feat(example): Add edge types example (stress tests)

* Remove a lot of computed functions or merge them into existing ones
*

examples/EdgeTypes/index.tsx

@@ -0,0 +1,43 @@
+/**
+ * Example for checking the different edge types and source and target positions
+ */
+import RevueFlow, {
+  removeElements,
+  addEdge,
+  MiniMap,
+  Controls,
+  Background,
+  OnLoadParams,
+  Connection,
+  Edge,
+  Elements
+} from '../../src';
+import { getElements } from './utils';
+import { defineComponent, ref } from 'vue';
+
+const onLoad = (reactFlowInstance: OnLoadParams) => {
+  reactFlowInstance.fitView();
+  console.log(reactFlowInstance.getElements());
+};
+
+const initialElements = getElements();
+
+const EdgeTypesFlow = defineComponent({
+  setup() {
+    const elements = ref<Elements>(initialElements);
+    const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value));
+    const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value));
+
+    return () => (
+      <RevueFlow
+        v-model={elements.value}
+        onLoad={onLoad}
+        onElementsRemove={onElementsRemove}
+        onConnect={onConnect}
+        minZoom={0.2}
+      ></RevueFlow>
+    );
+  }
+});
+
+export default EdgeTypesFlow;

examples/EdgeTypes/utils.ts

@@ -0,0 +1,106 @@
+import { ElementId, Elements, Position } from '../../src';
+
+const nodeWidth = 80;
+const nodeGapWidth = nodeWidth * 2;
+const nodeStyle = { width: nodeWidth, fontSize: 11, color: 'white' };
+
+const sourceTargetPositions = [
+  { source: Position.Bottom, target: Position.Top },
+  { source: Position.Right, target: Position.Left }
+];
+const nodeColors = [
+  ['#1e9e99', '#4cb3ac', '#6ec9c0', '#8ddfd4'],
+  ['#0f4c75', '#1b5d8b', '#276fa1', '#3282b8']
+];
+const edgeTypes = ['default', 'step', 'smoothstep', 'straight'];
+const offsets = [
+  {
+    x: 0,
+    y: -nodeGapWidth
+  },
+  {
+    x: nodeGapWidth,
+    y: -nodeGapWidth
+  },
+  {
+    x: nodeGapWidth,
+    y: 0
+  },
+  {
+    x: nodeGapWidth,
+    y: nodeGapWidth
+  },
+  {
+    x: 0,
+    y: nodeGapWidth
+  },
+  {
+    x: -nodeGapWidth,
+    y: nodeGapWidth
+  },
+  {
+    x: -nodeGapWidth,
+    y: 0
+  },
+  {
+    x: -nodeGapWidth,
+    y: -nodeGapWidth
+  }
+];
+
+let id = 0;
+const getNodeId = (): ElementId => (id++).toString();
+
+export function getElements(): Elements {
+  const initialElements = [];
+
+  for (let sourceTargetIndex = 0; sourceTargetIndex < sourceTargetPositions.length; sourceTargetIndex++) {
+    const currSourceTargetPos = sourceTargetPositions[sourceTargetIndex];
+
+    for (let edgeTypeIndex = 0; edgeTypeIndex < edgeTypes.length; edgeTypeIndex++) {
+      const currEdgeType = edgeTypes[edgeTypeIndex];
+
+      for (let offsetIndex = 0; offsetIndex < offsets.length; offsetIndex++) {
+        const currOffset = offsets[offsetIndex];
+
+        const style = { ...nodeStyle, background: nodeColors[sourceTargetIndex][edgeTypeIndex] };
+        const sourcePosition = {
+          x: offsetIndex * nodeWidth * 4,
+          y: edgeTypeIndex * 300 + sourceTargetIndex * edgeTypes.length * 300
+        };
+        const sourceId = getNodeId();
+        const sourceData = { label: `Source ${sourceId}` };
+        const sourceNode = {
+          id: sourceId,
+          style,
+          data: sourceData,
+          position: sourcePosition,
+          sourcePosition: currSourceTargetPos.source,
+          targetPosition: currSourceTargetPos.target
+        };
+
+        const targetId = getNodeId();
+        const targetData = { label: `Target ${targetId}` };
+        const targetPosition = {
+          x: sourcePosition.x + currOffset.x,
+          y: sourcePosition.y + currOffset.y
+        };
+        const targetNode = {
+          id: targetId,
+          style,
+          data: targetData,
+          position: targetPosition,
+          sourcePosition: currSourceTargetPos.source,
+          targetPosition: currSourceTargetPos.target
+        };
+
+        initialElements.push(sourceNode);
+        initialElements.push(targetNode);
+
+        initialElements.push({ id: `${sourceId}-${targetId}`, source: sourceId, target: targetId, type: currEdgeType });
+      }
+    }
+  }
+
+  return initialElements as Elements;
+}

examples/router.ts

@@ -28,6 +28,10 @@ export const routes: RouterOptions['routes'] = [
   {
     path: '/button-edge',
     component: () => import('./EdgeWithButton/EdgeWithButton.vue')
+  },
+  {
+    path: '/edge-types',
+    component: () => import('./EdgeTypes')
   }
 ];
 

src/components/ConnectionLine/index.tsx

@@ -31,7 +31,6 @@ export default defineComponent({
   setup(props) {
     const store = inject<RevueFlowStore>('store')!;
     const sourceNode = ref<Node | null>(store.nodes.find((n) => n.id === store.connectionNodeId) || null);
-    const nodesConnectable = computed(() => store.nodesConnectable);
 
     const sourceHandle = computed(() =>
       store.connectionHandleId && store.connectionHandleType
@@ -40,22 +39,25 @@ export default defineComponent({
           )
         : store.connectionHandleType && sourceNode.value?.__rf.handleBounds[store.connectionHandleType][0]
     );
-    const sourceHandleX = computed(() =>
+
-      sourceHandle.value ? sourceHandle.value.x + sourceHandle.value.width / 2 : (sourceNode.value?.__rf.width as number) / 2
+    const sourceX = computed(() =>
+      sourceNode.value?.__rf.position.x + sourceHandle.value
+        ? sourceHandle.value.x + sourceHandle.value.width / 2
+        : (sourceNode.value?.__rf.width as number) / 2
     );
-    const sourceHandleY = computed(() =>
+    const sourceY = computed(() =>
-      sourceHandle.value ? sourceHandle.value.y + sourceHandle.value.height / 2 : sourceNode.value?.__rf.height
+      sourceNode.value?.__rf.position.y + sourceHandle.value
+        ? sourceHandle.value.y + sourceHandle.value.height / 2
+        : sourceNode.value?.__rf.height
     );
-    const sourceX = computed(() => sourceNode.value?.__rf.position.x + sourceHandleX.value);
-    const sourceY = computed(() => sourceNode.value?.__rf.position.y + sourceHandleY.value);
 
     const targetX = computed(() => (store.connectionPosition.x - store.transform[0]) / store.transform[2]);
     const targetY = computed(() => (store.connectionPosition.y - store.transform[1]) / store.transform[2]);
-
+    const targetPosition = computed(() =>
-    const isRightOrLeft = computed(
+      sourceHandle.value?.position === Position.Left || sourceHandle.value?.position === Position.Right
-      () => sourceHandle.value?.position === Position.Left || sourceHandle.value?.position === Position.Right
+        ? Position.Left
+        : Position.Top
     );
-    const targetPosition = computed(() => (isRightOrLeft.value ? Position.Left : Position.Top));
 
     let dAttr = computed(() => `M${sourceX.value},${sourceY.value} ${targetX.value},${targetY.value}`);
 
@@ -114,7 +116,7 @@ export default defineComponent({
     }
 
     return () =>
-      nodesConnectable.value && sourceNode.value ? (
+      store.nodesConnectable && sourceNode.value ? (
         <g class="revue-flow__connection">
           <path d={dAttr.value} class="revue-flow__connection-path" style={props.connectionLineStyle} />
         </g>

src/components/Edges/Edge.tsx

@@ -69,17 +69,15 @@ export default defineComponent({
       console.warn(`couldn't create edge for target id: ${props.edge.target}; edge id: ${props.edge.id}`);
     }
 
-    const targetNodeBounds = computed(() => nodes.value.targetNode?.__rf.handleBounds);
     // when connection type is loose we can define all handles as sources
-    const targetNodeHandles = computed(() =>
+    const targetNodeHandles = () =>
       props.connectionMode === ConnectionMode.Strict
-        ? targetNodeBounds.value?.target
+        ? nodes.value.targetNode?.__rf.handleBounds.target
-        : targetNodeBounds.value?.target || targetNodeBounds.value?.source
+        : nodes.value.targetNode?.__rf.handleBounds.target || nodes.value.targetNode?.__rf.handleBounds.source;
-    );
     const sourceHandle = computed(
       () => nodes.value.sourceNode && getHandle(nodes.value.sourceNode.__rf.handleBounds.source, props.edge.sourceHandle || null)
     );
-    const targetHandle = computed(() => getHandle(targetNodeHandles.value, props.edge.targetHandle || null));
+    const targetHandle = computed(() => getHandle(targetNodeHandles(), props.edge.targetHandle || null));
     const sourcePosition = computed(() => (sourceHandle.value ? sourceHandle.value.position : Position.Bottom));
     const targetPosition = computed(() => (targetHandle.value ? targetHandle.value.position : Position.Top));
 
@@ -88,16 +86,16 @@ export default defineComponent({
       sourceY: number;
       targetX: number;
       targetY: number;
-    }>(() => {
+    }>(() =>
-      return getEdgePositions(
+      getEdgePositions(
         nodes.value.sourceNode as Node,
         sourceHandle.value,
         sourcePosition.value,
         nodes.value.targetNode as Node,
         targetHandle.value,
         targetPosition.value
-      );
+      )
-    });
+    );
 
     const isVisible = computed(() => {
       return props.onlyRenderVisibleElements
@@ -113,13 +111,6 @@ export default defineComponent({
     });
 
     const isSelected = computed(() => store.selectedElements?.some((elm) => isEdge(elm) && elm.id === props.edge.id) || false);
-    const updating = ref<boolean>(false);
-    const inactive = computed(() => !store.elementsSelectable);
-    const edgeClasses = computed(() => [
-      'revue-flow__edge',
-      `revue-flow__edge-${props.type}`,
-      { selected: isSelected.value, animated: props.edge.animated, inactive: inactive.value, updating: updating.value }
-    ]);
 
     const edgeElement = computed<Edge>(() => {
       const el: Edge = {
@@ -192,13 +183,23 @@ export default defineComponent({
       handleEdgeUpdater(event, false);
     };
 
+    const updating = ref<boolean>(false);
     const onEdgeUpdaterMouseEnter = () => (updating.value = true);
     const onEdgeUpdaterMouseOut = () => (updating.value = false);
 
     return () =>
       isVisible.value && edgePositions.value ? (
         <g
-          class={edgeClasses.value}
+          class={[
+            'revue-flow__edge',
+            `revue-flow__edge-${props.type}`,
+            {
+              selected: isSelected.value,
+              animated: props.edge.animated,
+              inactive: !store.elementsSelectable,
+              updating: updating.value
+            }
+          ]}
           onClick={onEdgeClick}
           onContextmenu={onEdgeContextMenu}
           onMouseenter={onEdgeMouseEnter}
@@ -211,7 +212,7 @@ export default defineComponent({
               id: props.edge.id,
               source: props.edge.source,
               target: props.edge.target,
-              selected: isSelected,
+              selected: isSelected.value,
               animated: props.edge.animated,
               label: props.edge.label,
               labelStyle: props.edge.labelStyle,

src/components/Edges/EdgeAnchor.tsx

@@ -1,5 +1,5 @@
 import { Position } from '../../types';
-import { computed, defineComponent, HTMLAttributes, PropType } from 'vue';
+import { defineComponent, HTMLAttributes, PropType } from 'vue';
 
 const shiftX = (x: number, shift: number, position: Position): number => {
   if (position === Position.Left) return x - shift;
@@ -41,13 +41,12 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const radius = computed(() => props.radius || 10);
     return () => (
       <circle
         class="revue-flow__edgeupdater"
-        cx={shiftX(props.centerX, radius.value, props.position)}
+        cx={shiftX(props.centerX, props.radius || 10, props.position)}
-        cy={shiftY(props.centerY, radius.value, props.position)}
+        cy={shiftY(props.centerY, props.radius || 10, props.position)}
-        r={radius.value}
+        r={props.radius || 10}
         stroke="transparent"
         fill="transparent"
       />

src/components/Edges/SmoothStepEdge.tsx

@@ -1,8 +1,9 @@
-import { computed, defineComponent } from 'vue';
+import { defineComponent } from 'vue';
 import EdgeText from './EdgeText';
-import { getMarkerEnd, getCenter, EdgeSmoothProps } from './utils';
+import { getMarkerEnd, getCenter, EdgeSmoothProps, GetCenterParams } from './utils';
 import { ArrowHeadType, EdgeType, Position } from '../../types';
 import { reactify } from '@vueuse/core';
+import { getBezierPath } from './BezierEdge';
 
 // These are some helper methods for drawing the round corners
 // The name indicates the direction of the path. "bottomLeftCorner" goes
@@ -98,26 +99,24 @@ export default defineComponent({
     ...EdgeSmoothProps
   },
   setup(props) {
-    const centered = computed(() => {
+    const centered = reactify(({ sourceX, sourceY, targetX, targetY, targetPosition, sourcePosition }: GetCenterParams) => {
       return getCenter({
-        sourceX: props.sourceX,
+        sourceX: sourceX,
-        sourceY: props.sourceY,
+        sourceY: sourceY,
-        targetX: props.targetX,
+        targetX: targetX,
-        targetY: props.targetY,
+        targetY: targetY,
-        sourcePosition: props.sourcePosition,
+        sourcePosition: sourcePosition,
-        targetPosition: props.targetPosition
+        targetPosition: targetPosition
       });
     });
-
+    const path = reactify(({ sourceX, sourceY, targetX, targetY, targetPosition, sourcePosition }: GetSmoothStepPathParams) => {
-    const path = computed(() => {
+      return getBezierPath({
-      return getSmoothStepPath({
+        sourceX: sourceX,
-        sourceX: props.sourceX,
+        sourceY: sourceY,
-        sourceY: props.sourceY,
+        targetX: targetX,
-        targetX: props.targetX,
+        targetY: targetY,
-        targetY: props.targetY,
+        targetPosition: targetPosition,
-        sourcePosition: props.sourcePosition,
+        sourcePosition: sourcePosition
-        targetPosition: props.targetPosition,
-        borderRadius: props.borderRadius
       });
     });
 
@@ -128,13 +127,13 @@ export default defineComponent({
         <path
           class="revue-flow__edge-path"
           style={props.style}
-          d={path.value}
+          d={path({ ...props }).value}
           marker-end={markerEnd(props.arrowHeadType, props.markerEndId).value}
         />
         {props.label ? (
           <EdgeText
-            x={centered.value[0]}
+            x={centered({ ...props }).value[0]}
-            y={centered.value[1]}
+            y={centered({ ...props }).value[1]}
             label={props.label}
             labelStyle={props.labelStyle}
             labelShowBg={props.labelShowBg}

src/components/Edges/utils.ts

@@ -70,6 +70,21 @@ export const DefaultEdgeProps = {
     required: true,
     default: 0
   },
+  source: {
+    type: String as PropType<EdgeProps['source']>,
+    required: true,
+    default: 0
+  },
+  target: {
+    type: String as PropType<EdgeProps['target']>,
+    required: true,
+    default: 0
+  },
+  selected: {
+    type: Boolean as PropType<EdgeProps['selected']>,
+    required: true,
+    default: false
+  },
   targetX: {
     type: Number as PropType<EdgeProps['targetX']>,
     required: true,

src/components/Handle/index.tsx

@@ -1,6 +1,6 @@
 import { ElementId, Position, RevueFlowStore } from '../../types';
 import { onMouseDown, ValidConnectionFunc } from './handler';
-import { computed, defineComponent, inject, PropType } from 'vue';
+import { defineComponent, inject, PropType } from 'vue';
 import { RevueFlowHooks } from '../../hooks/RevueFlowHooks';
 
 const alwaysValid = () => true;
@@ -41,23 +41,21 @@ export default defineComponent({
     const onMouseDownHandler = (event: MouseEvent) =>
       onMouseDown(event, store, hooks, props.id as string, nodeId, props.type === 'target', props.isValidConnection);
 
-    const handleClasses = computed(() => [
-      'revue-flow__handle',
-      `revue-flow__handle-${props.position}`,
-      'nodrag',
-      {
-        source: props.type !== 'target',
-        target: props.type === 'target',
-        connectable: props.isConnectable
-      }
-    ]);
-
     return () => (
       <div
         data-handleid={props.id}
         data-nodeid={nodeId}
         data-handlepos={props.position}
-        class={handleClasses.value}
+        class={[
+          'revue-flow__handle',
+          `revue-flow__handle-${props.position}`,
+          'nodrag',
+          {
+            source: props.type !== 'target',
+            target: props.type === 'target',
+            connectable: props.isConnectable
+          }
+        ]}
         onMousedown={onMouseDownHandler}
       >
         {slots.default ? slots.default() : ''}

src/components/Nodes/Node.tsx

@@ -1,4 +1,4 @@
-import { computed, CSSProperties, defineComponent, h, inject, PropType, provide } from 'vue';
+import { computed, defineComponent, h, inject, PropType, provide } from 'vue';
 import { templateRef, tryOnMounted, useResizeObserver } from '@vueuse/core';
 import { DraggableCore, DraggableEventListener } from '@braks/revue-draggable';
 import { Node, NodeDimensionUpdate, NodeType, RevueFlowStore } from '../../types';
@@ -46,7 +46,6 @@ export default defineComponent({
     const nodeElement = templateRef<HTMLDivElement>('nodeElement', null);
 
     const selected = computed(() => store.selectedElements?.some(({ id }) => id === props.node.id) || false);
-    const transform = computed(() => store.transform);
     const isDraggable = computed(
       () => props.node.draggable || (store.nodesDraggable && typeof props.node.draggable === 'undefined')
     );
@@ -66,16 +65,7 @@ export default defineComponent({
           data: props.node.data
         } as Node)
     );
-    const grid = computed(() => (props.snapToGrid ? props.snapGrid : [1, 1])! as [number, number]);
-    const initialized = computed(() => props.node.__rf.width !== null && props.node.__rf.height !== null);
 
-    const nodeStyle = computed<CSSProperties>(() => ({
-      zIndex: selected.value ? 10 : 3,
-      transform: `translate(${props.node.__rf.position.x}px,${props.node.__rf.position.y}px)`,
-      pointerEvents: isSelectable.value || isDraggable.value ? 'all' : 'none',
-      opacity: initialized.value ? 1 : 0,
-      ...props.node.style
-    }));
     const onMouseEnterHandler = () => {
       if (props.node.__rf.isDragging) {
         return;
@@ -188,21 +178,12 @@ export default defineComponent({
       ]);
     });
 
-    const nodeClasses = computed(() => [
-      'revue-flow__node',
-      `revue-flow__node-${props.node.type}`,
-      {
-        selected: selected.value,
-        selectable: isSelectable.value
-      }
-    ]);
-
     return () => (
       <DraggableCore
         cancel=".nodrag"
-        scale={transform.value[2]}
+        scale={store.transform[2]}
         disabled={!isDraggable.value}
-        grid={grid.value}
+        grid={props.snapGrid}
         enableUserSelectHack={false}
         onStart={onDragStart}
         onMove={onDrag}
@@ -210,8 +191,21 @@ export default defineComponent({
       >
         <div
           ref="nodeElement"
-          class={nodeClasses.value}
+          class={[
-          style={nodeStyle.value}
+            'revue-flow__node',
+            `revue-flow__node-${props.node.type}`,
+            {
+              selected: selected.value,
+              selectable: isSelectable.value
+            }
+          ]}
+          style={{
+            zIndex: selected.value ? 10 : 3,
+            transform: `translate(${props.node.__rf.position.x}px,${props.node.__rf.position.y}px)`,
+            pointerEvents: isSelectable.value || isDraggable.value ? 'all' : 'none',
+            opacity: props.node.__rf.width !== null && props.node.__rf.height !== null ? 1 : 0,
+            ...props.node.style
+          }}
           data-id={props.node.id}
           onMouseenter={onMouseEnterHandler}
           onMousemove={onMouseMoveHandler}

src/container/EdgeRenderer/index.tsx

@@ -70,18 +70,18 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const store = inject<RevueFlowStore>('store');
+    const store = inject<RevueFlowStore>('store')!;
-    const transform = computed(() => store?.transform);
+
     const transformStyle = computed(() => {
-      return `translate(${transform.value?.[0]},${transform.value?.[1]}) scale(${transform.value?.[2]})`;
+      return `translate(${store.transform[0]},${store.transform[1]}) scale(${store.transform[2]})`;
     });
-    const renderConnectionLine = computed(() => store?.connectionNodeId && store?.connectionHandleType);
+    const renderConnectionLine = computed(() => store.connectionNodeId && store.connectionHandleType);
 
     return () => (
-      <svg width={store?.width} height={store?.height} class="revue-flow__edges">
+      <svg width={store.width} height={store.height} class="revue-flow__edges">
         <MarkerDefinitions color={props.arrowHeadColor as string} />
         <g transform={transformStyle.value}>
-          {store?.edges.map((edge) => (
+          {store.edges.map((edge) => (
             <Edge
               key={edge.id}
               edge={edge}

src/container/GraphView/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, inject, PropType, watchEffect } from 'vue';
+import { defineComponent, inject, PropType } from 'vue';
 import FlowRenderer from '../FlowRenderer';
 import NodeRenderer from '../NodeRenderer';
 import EdgeRenderer from '../EdgeRenderer';
@@ -6,6 +6,7 @@ import { onLoadProject, onLoadGetElements, onLoadToObject } from '../../utils/gr
 import { GraphViewProps, RevueFlowStore } from '../../types';
 import useZoomPanHelper from '../../hooks/useZoomPanHelper';
 import { RevueFlowHooks } from '../../hooks/RevueFlowHooks';
+import { tryOnMounted } from '@vueuse/core';
 
 export default defineComponent({
   name: 'GraphView',
@@ -233,7 +234,7 @@ export default defineComponent({
       }
     };
 
-    watchEffect(() => {
+    tryOnMounted(() => {
       init();
     });
 

src/container/RevueFlow/index.tsx

@@ -1,5 +1,5 @@
 import { defineComponent, onBeforeUnmount, onUpdated, PropType, provide, watch } from 'vue';
-import { reactify, useVModel } from '@vueuse/core';
+import { useVModel } from '@vueuse/core';
 import '../../style.css';
 import '../../theme-default.css';
 import GraphView from '../GraphView';
@@ -240,14 +240,11 @@ export default defineComponent({
       store.setElements([]);
     });
 
-    const nodeTypesParsed = reactify(() => createNodeTypes({ ...defaultNodeTypes, ...props.nodeTypes }));
-    const edgeTypesParsed = reactify(() => createEdgeTypes({ ...defaultEdgeTypes, ...props.edgeTypes }));
-
     return () => (
       <div class="revue-flow">
         <GraphView
-          nodeTypes={nodeTypesParsed().value}
+          nodeTypes={createNodeTypes({ ...defaultNodeTypes, ...props.nodeTypes })}
-          edgeTypes={edgeTypesParsed().value}
+          edgeTypes={createEdgeTypes({ ...defaultEdgeTypes, ...props.edgeTypes })}
           connectionMode={props.connectionMode}
           connectionLineType={props.connectionLineType}
           connectionLineStyle={props.connectionLineStyle}