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

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

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
-        : targetNodeBounds.value?.target || targetNodeBounds.value?.source
-    );
+        ? nodes.value.targetNode?.__rf.handleBounds.target
+        : 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)}
-        cy={shiftY(props.centerY, radius.value, props.position)}
-        r={radius.value}
+        cx={shiftX(props.centerX, props.radius || 10, props.position)}
+        cy={shiftY(props.centerY, props.radius || 10, props.position)}
+        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,
-        sourceY: props.sourceY,
-        targetX: props.targetX,
-        targetY: props.targetY,
-        sourcePosition: props.sourcePosition,
-        targetPosition: props.targetPosition
+        sourceX: sourceX,
+        sourceY: sourceY,
+        targetX: targetX,
+        targetY: targetY,
+        sourcePosition: sourcePosition,
+        targetPosition: targetPosition
       });
     });
-
-    const path = computed(() => {
-      return getSmoothStepPath({
-        sourceX: props.sourceX,
-        sourceY: props.sourceY,
-        targetX: props.targetX,
-        targetY: props.targetY,
-        sourcePosition: props.sourcePosition,
-        targetPosition: props.targetPosition,
-        borderRadius: props.borderRadius
+    const path = reactify(({ sourceX, sourceY, targetX, targetY, targetPosition, sourcePosition }: GetSmoothStepPathParams) => {
+      return getBezierPath({
+        sourceX: sourceX,
+        sourceY: sourceY,
+        targetX: targetX,
+        targetY: targetY,
+        targetPosition: targetPosition,
+        sourcePosition: sourcePosition
       });
     });
 
@@ -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]}
-            y={centered.value[1]}
+            x={centered({ ...props }).value[0]}
+            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,