fix(example): custom edges not displayed correctly

examples/Edges/CustomEdge.tsx

@@ -1,31 +1,35 @@
-import { EdgeProps, getBezierPath, getMarkerEnd } from '../../src';
+import { getBezierPath, getMarkerEnd } from '../../src';
-import { FunctionalComponent } from 'vue';
+import { computed, defineComponent } from 'vue';
+import { DefaultEdgeProps } from '../../src/components/Edges/utils';
 
-const CustomEdge: FunctionalComponent<EdgeProps> = ({
+const CustomEdge = defineComponent({
-  id,
+  props: {
-  sourceX,
+    ...DefaultEdgeProps
-  sourceY,
+  },
-  targetX,
+  setup(props) {
-  targetY,
+    const edgePath = computed(() =>
-  sourcePosition,
+      getBezierPath({
-  targetPosition,
+        sourceX: props.sourceX,
-  data,
+        sourceY: props.sourceY,
-  arrowHeadType,
+        sourcePosition: props.sourcePosition,
-  markerEndId
+        targetX: props.targetX,
-}) => {
+        targetY: props.targetY,
-  const edgePath = getBezierPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition });
+        targetPosition: props.targetPosition
-  const markerEnd = getMarkerEnd(arrowHeadType, markerEndId);
+      })
+    );
+    const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId));
 
-  return () => (
+    return () => (
-    <>
+      <>
-      <path id={id} class="react-flow__edge-path" d={edgePath} marker-end={markerEnd} />
+        <path id={props.id} class="revue-flow__edge-path" d={edgePath.value} marker-end={markerEnd.value} />
-      <text>
+        <text>
-        <textPath href={`#${id}`} style={{ fontSize: '12px' }} startOffset="50%" text-anchor="middle">
+          <textPath href={`#${props.id}`} style={{ fontSize: '12px' }} startOffset="50%" text-anchor="middle">
-          {data.text}
+            {props.data.text}
-        </textPath>
+          </textPath>
-      </text>
+        </text>
-    </>
+      </>
-  );
+    );
-};
+  }
+});
 
 export default CustomEdge;

examples/Edges/CustomEdge2.tsx

@@ -1,44 +1,49 @@
-import { FunctionalComponent } from 'vue';
+import { computed, defineComponent } from 'vue';
-import { EdgeProps, EdgeText, getBezierPath, getEdgeCenter, getMarkerEnd } from '../../src';
+import { EdgeText, getBezierPath, getEdgeCenter, getMarkerEnd } from '../../src';
+import { DefaultEdgeProps } from '../../src/components/Edges/utils';
 
-const CustomEdge: FunctionalComponent<EdgeProps> = ({
+const CustomEdge = defineComponent({
-  id,
+  props: {
-  sourceX,
+    ...DefaultEdgeProps
-  sourceY,
+  },
-  targetX,
+  setup(props) {
-  targetY,
+    const edgePath = computed(() =>
-  sourcePosition,
+      getBezierPath({
-  targetPosition,
+        sourceX: props.sourceX,
-  data,
+        sourceY: props.sourceY,
-  arrowHeadType,
+        sourcePosition: props.sourcePosition,
-  markerEndId
+        targetX: props.targetX,
-}) => {
+        targetY: props.targetY,
-  const edgePath = getBezierPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition });
+        targetPosition: props.targetPosition
-  const markerEnd = getMarkerEnd(arrowHeadType, markerEndId);
+      })
-  const [centerX, centerY] = getEdgeCenter({
+    );
-    sourceX,
+    const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId));
-    sourceY,
+    const center = computed(() =>
-    targetX,
+      getEdgeCenter({
-    targetY
+        sourceX: props.sourceX,
-  });
+        sourceY: props.sourceY,
+        targetX: props.targetX,
+        targetY: props.targetY
+      })
+    );
 
-  return () => (
+    return () => (
-    <>
+      <>
-      <path id={id} class="react-flow__edge-path" d={edgePath} marker-end={markerEnd} />
+        <path id={props.id} class="revue-flow__edge-path" d={edgePath.value} marker-end={markerEnd.value} />
-      <EdgeText
+        <EdgeText
-        x={centerX}
+          x={center.value[0]}
-        y={centerY}
+          y={center.value[1]}
-        label={data.text}
+          label={props.data?.text}
-        labelStyle={{ fill: 'white' }}
+          labelStyle={{ fill: 'white' }}
-        labelShowBg
+          labelShowBg
-        labelBgStyle={{ fill: 'red' }}
+          labelBgStyle={{ fill: 'red' }}
-        labelBgPadding={[2, 4]}
+          labelBgPadding={[2, 4]}
-        labelBgBorderRadius={2}
+          labelBgBorderRadius={2}
-        onClick={() => console.log(data)}
+          onClick={() => console.log(props.data)}
-      />
+        />
-      ;
+      </>
-    </>
+    );
-  );
+  }
-};
+});
 
 export default CustomEdge;

examples/Edges/index.tsx

@@ -1,4 +1,4 @@
-import { FunctionalComponent, ref } from 'vue';
+import { ref } from 'vue';
 import CustomEdge from './CustomEdge';
 import CustomEdge2 from './CustomEdge2';
 import RevueFlow, {
@@ -12,14 +12,9 @@ import RevueFlow, {
   addEdge,
   Connection,
   Edge,
-  EdgeProps,
   removeElements
 } from '../../src';
 
-const onLoad = (reactFlowInstance: OnLoadParams) => reactFlowInstance.fitView();
-const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
-const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element);
-
 const initialElements = [
   { id: '1', type: 'input', data: { label: 'Input 1' }, position: { x: 250, y: 0 } },
   { id: '2', data: { label: 'Node 2' }, position: { x: 150, y: 100 } },
@@ -80,7 +75,7 @@ const initialElements = [
   }
 ];
 
-const edgeTypes: Record<string, FunctionalComponent<EdgeProps>> = {
+const edgeTypes: Record<string, any> = {
   custom: CustomEdge,
   custom2: CustomEdge2
 };
@@ -88,6 +83,9 @@ const edgeTypes: Record<string, FunctionalComponent<EdgeProps>> = {
 const EdgesFlow = () => {
   const elements = ref<Elements>(initialElements as Elements);
 
+  const onLoad = (reactFlowInstance: OnLoadParams) => reactFlowInstance.fitView();
+  const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
+  const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element);
   const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value));
   const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value));
 

src/components/Edges/utils.ts

@@ -138,7 +138,7 @@ export const DefaultEdgeProps = {
   data: {
     type: Object as PropType<EdgeProps['data']>,
     required: false,
-    default: undefined
+    default: () => ({} as any)
   },
   sourceHandleId: {
     type: String as PropType<EdgeProps['sourceHandleId']>,