alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Make edges work

Browse Source
This commit is contained in:
Braks
2021-07-09 13:39:17 +02:00
parent 52e1188d04
commit b2c250ef38
10 changed files with 183 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.vue
View File

@@ -1,15 +1,15 @@
<template>
<RevueFlow style="height: 1000px" :elements="elements"> Let's flow! </RevueFlow>
<Basic style="height: 100vh" />
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import RevueFlow from './container/RevueFlow';
import Basic from './Basic';
export default defineComponent({
name: 'App',
components: {
RevueFlow
Basic
},
data() {
return {

85
src/Basic.tsx Normal file
View File

@@ -0,0 +1,85 @@
import { Connection, Edge, Elements, FlowElement, Node, OnLoadParams } from './types';
import { addEdge, isNode, removeElements } from './utils/graph';
import RevueFlow from './container/RevueFlow';
import { defineComponent, ref } from 'vue';
const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element);
const initialElements: Elements = [
{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
{ id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
{ id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
{ id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
{ id: 'e1-2', source: '1', target: '2', animated: true },
{ id: 'e1-3', source: '1', target: '3' }
];
const BasicFlow = defineComponent({
setup() {
const elements = ref<Elements>(initialElements);
const rfInstance = ref<OnLoadParams | null>(null);
const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value));
const onConnect = (params: Edge | Connection) => (elements.value = addEdge(params, elements.value));
const onLoad = (reactFlowInstance: OnLoadParams) => {
console.log('loaded', reactFlowInstance);
rfInstance.value = reactFlowInstance;
};
const updatePos = () => {
elements.value = elements.value.map((el) => {
if (isNode(el)) {
el.position = {
x: Math.random() * 400,
y: Math.random() * 400
};
}
return el;
});
};
const logToObject = () => console.log(rfInstance.value?.toObject());
const resetTransform = () => rfInstance.value?.setTransform({ x: 0, y: 0, zoom: 1 });
const toggleClassnames = () => {
elements.value = elements.value.map((el) => {
if (isNode(el)) {
el.className = el.className === 'light' ? 'dark' : 'light';
}
return el;
});
};
return () => (
<RevueFlow
elements={elements.value}
onLoad={onLoad}
onElementClick={onElementClick}
onElementsRemove={onElementsRemove}
onConnect={onConnect}
onNodeDragStop={onNodeDragStop}
class="react-flow-basic-example"
defaultZoom={1.5}
minZoom={0.2}
maxZoom={4}
>
<div style={{ position: 'absolute', right: '10px', top: '10px', zIndex: 4 }}>
<button onClick={resetTransform} style={{ marginRight: '5px' }}>
reset transform
</button>
<button onClick={updatePos} style={{ marginRight: '5px' }}>
change pos
</button>
<button onClick={toggleClassnames} style={{ marginRight: '5px' }}>
toggle classnames
</button>
<button onClick={logToObject}>toObject</button>
</div>
</RevueFlow>
);
}
});
export default BasicFlow;

46
src/components/Edges/BezierEdge.tsx
View File

@@ -1,4 +1,4 @@
import { CSSProperties, defineComponent, PropType } from 'vue';
import { computed, CSSProperties, defineComponent, PropType } from 'vue';
import EdgeText from './EdgeText';
@@ -96,9 +96,9 @@ const BezierEdge = defineComponent({
required: true
},
labelBgPadding: {
type: ([0, 0] as any) as PropType<[number, number]>,
type: Array as unknown as PropType<[number, number]>,
required: false,
default: () => [0, 0] as [number, number]
default: () => [0, 0]
},
labelBgBorderRadius: {
type: Number,
@@ -120,26 +120,32 @@ const BezierEdge = defineComponent({
}
},
setup(props) {
const [centerX, centerY] = getCenter({
sourceX: props.sourceX,
sourceY: props.sourceY,
targetX: props.targetX,
targetY: props.targetY,
sourcePosition: props.sourcePosition,
targetPosition: props.targetPosition
console.log('edge');
const centered = computed(() => {
return getCenter({
sourceX: props.sourceX,
sourceY: props.sourceY,
targetX: props.targetX,
targetY: props.targetY,
sourcePosition: props.sourcePosition,
targetPosition: props.targetPosition
});
});
const path = getBezierPath({
sourceX: props.sourceX,
sourceY: props.sourceY,
targetX: props.targetX,
targetY: props.targetY,
targetPosition: props.targetPosition
const path = computed(() => {
console.log('computing in edge');
return getBezierPath({
sourceX: props.sourceX,
sourceY: props.sourceY,
targetX: props.targetX,
targetY: props.targetY,
targetPosition: props.targetPosition
});
});
const text = props.label ? (
<EdgeText
x={centerX}
y={centerY}
x={centered.value[0]}
y={centered.value[1]}
label={props.label}
labelStyle={props.labelStyle}
labelShowBg={props.labelShowBg}
@@ -151,9 +157,9 @@ const BezierEdge = defineComponent({
const markerEnd = getMarkerEnd(props.arrowHeadType, props.markerEndId);
return (
return () => (
<>
<path style={props.style} d={path} class="react-flow__edge-path" marker-end={markerEnd} />
<path style={props.style} d={path.value} class="react-flow__edge-path" marker-end={markerEnd} />
{text}
</>
);

5
src/components/Edges/wrapEdge.tsx
View File

@@ -10,16 +10,13 @@ export default (EdgeComponent: any): Component<EdgeProps> => {
components: { EdgeComponent },
props: WrapEdgeProps,
setup(props) {
console.log('wrap');
const pinia = store();
const updating = ref<boolean>(false);
const inactive = !props.elementsSelectable && !props.onClick;
const edgeClasses = [
'react-flow__edge',
`react-flow__edge-${props.type}`,
{ selected: props.selected, animated: props.animated, inactive, updating }
{ selected: props.selected, animated: props.animated, inactive, updating: updating.value }
];
const edgeElement = computed<Edge>(() => {

96
src/container/EdgeRenderer/index.tsx
View File

@@ -14,7 +14,7 @@ import {
Transform,
OnEdgeUpdateFunc
} from '../../types';
import { computed, CSSProperties, defineComponent, PropType, ref } from 'vue';
import { computed, CSSProperties, defineComponent, PropType } from 'vue';
import store from '../../store';
interface EdgeRendererProps {
@@ -102,71 +102,59 @@ const EdgeCmp = defineComponent({
}
},
setup(props) {
const sourceHandleId = props.edge.sourceHandle || null;
const targetHandleId = props.edge.targetHandle || null;
const nodes = computed(() => {
console.log('foo');
return getSourceTargetNodes(props.edge, props.nodes);
});
const { sourceNode, targetNode } = nodes.value;
console.log(nodes.value);
const sourceHandleId = computed(() => props.edge.sourceHandle ?? null);
const targetHandleId = computed(() => props.edge.targetHandle ?? null);
const nodes = computed(() => getSourceTargetNodes(props.edge, props.nodes));
const onConnectEdge = (connection: Connection) => {
props.props.onEdgeUpdate?.(props.edge, connection);
};
if (!sourceNode) {
if (!nodes.value.sourceNode) {
console.log(`couldn't create edge for source id: ${props.edge.source}; edge id: ${props.edge.id}`);
return null;
return () => null;
}
if (!targetNode) {
if (!nodes.value.targetNode) {
console.log(`couldn't create edge for target id: ${props.edge.target}; edge id: ${props.edge.id}`);
return null;
}
// source and target node need to be initialized
if (!sourceNode.__rf.width || !targetNode.__rf.width) {
return null;
return () => null;
}
const edgeType = props.edge.type || 'default';
const EdgeComponent: any = props.props.edgeTypes[edgeType] || props.props.edgeTypes.default;
const targetNodeBounds = targetNode.__rf.handleBounds;
const targetNodeBounds = nodes.value.targetNode.__rf.handleBounds;
// when connection type is loose we can define all handles as sources
const targetNodeHandles =
props.connectionMode === ConnectionMode.Strict
? targetNodeBounds.target
: targetNodeBounds.target || targetNodeBounds.source;
const sourceHandle = getHandle(sourceNode.__rf.handleBounds.source, sourceHandleId);
const targetHandle = getHandle(targetNodeHandles, targetHandleId);
const sourcePosition = sourceHandle ? sourceHandle.position : Position.Bottom;
const targetPosition = targetHandle ? targetHandle.position : Position.Top;
if (!sourceHandle) {
console.log(`couldn't create edge for source handle id: ${sourceHandleId}; edge id: ${props.edge.id}`);
return null;
}
if (!targetHandle) {
console.log(`couldn't create edge for target handle id: ${targetHandleId}; edge id: ${props.edge.id}`);
return null;
}
const { sourceX, sourceY, targetX, targetY } = getEdgePositions(
sourceNode,
sourceHandle,
sourcePosition,
targetNode,
targetHandle,
targetPosition
const sourceHandle = computed(
() => nodes.value.sourceNode && getHandle(nodes.value.sourceNode.__rf.handleBounds.source, sourceHandleId.value)
);
const targetHandle = computed(() => getHandle(targetNodeHandles, targetHandleId.value));
const sourcePosition = sourceHandle.value ? sourceHandle.value.position : Position.Bottom;
const targetPosition = targetHandle.value ? targetHandle.value.position : Position.Top;
const edgePositions = computed(() => {
return (
nodes.value.sourceNode &&
nodes.value.targetNode &&
getEdgePositions(
nodes.value.sourceNode,
sourceHandle,
sourcePosition,
nodes.value.targetNode,
targetHandle,
targetPosition
)
);
});
const isVisible = computed(() => {
return props.onlyRenderVisibleElements
? isEdgeVisible({
sourcePos: { x: sourceX, y: sourceY },
targetPos: { x: targetX, y: targetY },
sourcePos: { x: edgePositions.value?.sourceX, y: edgePositions.value?.sourceY },
targetPos: { x: edgePositions.value?.targetX, y: edgePositions.value?.targetY },
width: props.width || 0,
height: props.height || 0,
transform: props.transform
@@ -202,10 +190,10 @@ const EdgeCmp = defineComponent({
target={props.edge.target}
sourceHandleId={sourceHandleId}
targetHandleId={targetHandleId}
sourceX={sourceX}
sourceY={sourceY}
targetX={targetX}
targetY={targetY}
sourceX={edgePositions.value.sourceX}
sourceY={edgePositions.value.sourceY}
targetX={edgePositions.value.targetX}
targetY={edgePositions.value.targetY}
sourcePosition={sourcePosition}
targetPosition={targetPosition}
elementsSelectable={props.elementsSelectable}
@@ -228,7 +216,10 @@ const EdgeCmp = defineComponent({
const EdgeRenderer = defineComponent({
name: 'EdgeRenderer',
components: { EdgeCmp, ConnectionLine },
components: {
EdgeCmp,
ConnectionLine
},
props: {
edgeTypes: {
type: Object,
@@ -323,13 +314,12 @@ const EdgeRenderer = defineComponent({
},
setup(props) {
const pinia = store();
const transformStyle = `translate(${pinia.transform[0]},${pinia.transform[1]}) scale(${pinia.transform[2]})`;
const renderConnectionLine = pinia.connectionNodeId && pinia.connectionHandleType;
const transformStyle = computed(() => `translate(${pinia.transform[0]},${pinia.transform[1]}) scale(${pinia.transform[2]})`);
const renderConnectionLine = computed(() => pinia.connectionNodeId && pinia.connectionHandleType);
return () => (
<svg width={pinia.width} height={pinia.height} class="react-flow__edges">
<g transform={transformStyle}>
<g transform={transformStyle.value}>
{pinia.edges.map((edge: Edge) => (
<EdgeCmp
key={edge.id}
@@ -344,7 +334,7 @@ const EdgeRenderer = defineComponent({
onlyRenderVisibleElements={props.onlyRenderVisibleElements}
/>
))}
{renderConnectionLine && (
{renderConnectionLine.value && (
<ConnectionLine
nodes={pinia.nodes}
connectionNodeId={pinia.connectionNodeId!}

2
src/container/EdgeRenderer/utils.ts
View File

@@ -59,7 +59,6 @@ export function getHandlePosition(position: Position, node: Node, handle: any |
}
export function getHandle(bounds: HandleElement[], handleId: ElementId | null): HandleElement | null {
console.log('handle', bounds);
if (!bounds) {
return null;
}
@@ -94,6 +93,7 @@ export const getEdgePositions = (
const sourceHandlePos = getHandlePosition(sourcePosition, sourceNode, sourceHandle);
const targetHandlePos = getHandlePosition(targetPosition, targetNode, targetHandle);
console.log('getting edge positions');
return {
sourceX: sourceHandlePos.x,
sourceY: sourceHandlePos.y,

20
src/container/GraphView/index.tsx
View File

@@ -6,7 +6,18 @@ import { onLoadProject, onLoadGetElements, onLoadToObject } from '../../utils/gr
import { ReactFlowProps } from '../RevueFlow';
import { NodeTypesType, EdgeTypesType, ConnectionLineType, KeyCode } from '../../types';
import { CSSProperties, defineComponent, onMounted, PropType, ref } from 'vue';
import {
reactive,
computed,
CSSProperties,
defineComponent,
onBeforeMount,
onMounted,
onUpdated,
PropType,
ref,
watch
} from 'vue';
import store from '../../store';
import useZoomPanHelper from '../../hooks/useZoomPanHelper';
@@ -350,9 +361,9 @@ const GraphView = defineComponent({
const pinia = store();
const isInitialized = ref<boolean>(false);
const { zoomIn, zoomOut, zoomTo, transform, fitView, initialized } = useZoomPanHelper();
onMounted(() => {
const { zoomIn, zoomOut, zoomTo, transform, fitView, initialized } = useZoomPanHelper();
if (!isInitialized.value && initialized) {
if (props.onLoad) {
props.onLoad({
@@ -364,9 +375,8 @@ const GraphView = defineComponent({
project: onLoadProject(pinia),
getElements: onLoadGetElements(pinia),
toObject: onLoadToObject(pinia)
} as any);
});
}
isInitialized.value = true;
}
});

13
src/container/RevueFlow/index.tsx
View File

@@ -1,4 +1,4 @@
import { computed, CSSProperties, defineComponent, HTMLAttributes, onMounted, PropType, provide } from 'vue';
import { computed, CSSProperties, defineComponent, HTMLAttributes, onBeforeMount, PropType, provide } from 'vue';
import GraphView from '../GraphView';
import DefaultNode from '../../components/Nodes/DefaultNode';
import InputNode from '../../components/Nodes/InputNode';
@@ -454,14 +454,11 @@ const RevueFlow = defineComponent({
},
setup(props, { slots }) {
const pinia = store();
const nodeTypesParsed = computed(() => createNodeTypes(props.nodeTypes as any));
const edgeTypesParsed = computed(() => createEdgeTypes(props.edgeTypes as any));
provide('store', pinia);
const reactFlowClasses = ['react-flow'];
pinia.setElements(props.elements);
onMounted(() => {
pinia.setElements(props.elements);
});
const nodeTypesParsed = computed(() => props.nodeTypes && createNodeTypes(props.nodeTypes));
const edgeTypesParsed = computed(() => props.edgeTypes && createEdgeTypes(props.edgeTypes));
const reactFlowClasses = ['react-flow'];
return () => (
<div class={reactFlowClasses}>

2
src/hooks/useResizeHandler.ts
View File

@@ -14,7 +14,7 @@ export default (rendererNode: HTMLDivElement) => {
const size = getDimensions(rendererNode);
if (size.height === 0 || size.width === 0) {
console.warn('The React Flow parent container needs a width and a height to render the graph.');
console.log('The React Flow parent container needs a width and a height to render the graph.');
}
pinia.updateSize(size);

7
src/hooks/useZoomPanHelper.ts
View File

@@ -1,7 +1,6 @@
import { zoomIdentity } from 'd3-zoom';
import { getRectOfNodes, pointToRendererPoint, getTransformForBounds } from '../utils/graph';
import { FitViewParams, FlowTransform, ZoomPanHelperFunctions, Rect, XYPosition } from '../types';
import { computed } from 'vue';
import store from '../store';
const DEFAULT_PADDING = 0.1;
@@ -20,7 +19,7 @@ const initialZoomPanHelper: ZoomPanHelperFunctions = {
const useZoomPanHelper = (): ZoomPanHelperFunctions => {
const pinia = store();
const zoomPanHelperFunctions = computed<ZoomPanHelperFunctions>(() => {
const zoomPanHelperFunctions = () => {
if (pinia.d3Selection && pinia.d3Zoom) {
return {
zoomIn: () => pinia.d3Zoom?.scaleBy(pinia.d3Selection as any, 1.2),
@@ -77,9 +76,9 @@ const useZoomPanHelper = (): ZoomPanHelperFunctions => {
}
return initialZoomPanHelper;
});
};
return zoomPanHelperFunctions.value;
return zoomPanHelperFunctions();
};
export default useZoomPanHelper;