From 9e397e68174432bc1409ad9ab216912d73d24da8 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 8 Aug 2021 19:13:59 +0200
Subject: [PATCH] fix(example): custom edges not displayed correctly

---
 examples/Edges/CustomEdge.tsx  | 58 ++++++++++++-----------
 examples/Edges/CustomEdge2.tsx | 85 ++++++++++++++++++----------------
 examples/Edges/index.tsx       | 12 ++---
 src/components/Edges/utils.ts  |  2 +-
 4 files changed, 82 insertions(+), 75 deletions(-)

diff --git a/examples/Edges/CustomEdge.tsx b/examples/Edges/CustomEdge.tsx
index 1e04c67f..146a0edb 100644
--- a/examples/Edges/CustomEdge.tsx
+++ b/examples/Edges/CustomEdge.tsx
@@ -1,31 +1,35 @@
-import { EdgeProps, getBezierPath, getMarkerEnd } from '../../src';
-import { FunctionalComponent } from 'vue';
+import { getBezierPath, getMarkerEnd } from '../../src';
+import { computed, defineComponent } from 'vue';
+import { DefaultEdgeProps } from '../../src/components/Edges/utils';
 
-const CustomEdge: FunctionalComponent<EdgeProps> = ({
-  id,
-  sourceX,
-  sourceY,
-  targetX,
-  targetY,
-  sourcePosition,
-  targetPosition,
-  data,
-  arrowHeadType,
-  markerEndId
-}) => {
-  const edgePath = getBezierPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition });
-  const markerEnd = getMarkerEnd(arrowHeadType, markerEndId);
+const CustomEdge = defineComponent({
+  props: {
+    ...DefaultEdgeProps
+  },
+  setup(props) {
+    const edgePath = computed(() =>
+      getBezierPath({
+        sourceX: props.sourceX,
+        sourceY: props.sourceY,
+        sourcePosition: props.sourcePosition,
+        targetX: props.targetX,
+        targetY: props.targetY,
+        targetPosition: props.targetPosition
+      })
+    );
+    const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId));
 
-  return () => (
-    <>
-      <path id={id} class="react-flow__edge-path" d={edgePath} marker-end={markerEnd} />
-      <text>
-        <textPath href={`#${id}`} style={{ fontSize: '12px' }} startOffset="50%" text-anchor="middle">
-          {data.text}
-        </textPath>
-      </text>
-    </>
-  );
-};
+    return () => (
+      <>
+        <path id={props.id} class="revue-flow__edge-path" d={edgePath.value} marker-end={markerEnd.value} />
+        <text>
+          <textPath href={`#${props.id}`} style={{ fontSize: '12px' }} startOffset="50%" text-anchor="middle">
+            {props.data.text}
+          </textPath>
+        </text>
+      </>
+    );
+  }
+});
 
 export default CustomEdge;
diff --git a/examples/Edges/CustomEdge2.tsx b/examples/Edges/CustomEdge2.tsx
index e84f32be..3c1a56c0 100644
--- a/examples/Edges/CustomEdge2.tsx
+++ b/examples/Edges/CustomEdge2.tsx
@@ -1,44 +1,49 @@
-import { FunctionalComponent } from 'vue';
-import { EdgeProps, EdgeText, getBezierPath, getEdgeCenter, getMarkerEnd } from '../../src';
+import { computed, defineComponent } from 'vue';
+import { EdgeText, getBezierPath, getEdgeCenter, getMarkerEnd } from '../../src';
+import { DefaultEdgeProps } from '../../src/components/Edges/utils';
 
-const CustomEdge: FunctionalComponent<EdgeProps> = ({
-  id,
-  sourceX,
-  sourceY,
-  targetX,
-  targetY,
-  sourcePosition,
-  targetPosition,
-  data,
-  arrowHeadType,
-  markerEndId
-}) => {
-  const edgePath = getBezierPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition });
-  const markerEnd = getMarkerEnd(arrowHeadType, markerEndId);
-  const [centerX, centerY] = getEdgeCenter({
-    sourceX,
-    sourceY,
-    targetX,
-    targetY
-  });
+const CustomEdge = defineComponent({
+  props: {
+    ...DefaultEdgeProps
+  },
+  setup(props) {
+    const edgePath = computed(() =>
+      getBezierPath({
+        sourceX: props.sourceX,
+        sourceY: props.sourceY,
+        sourcePosition: props.sourcePosition,
+        targetX: props.targetX,
+        targetY: props.targetY,
+        targetPosition: props.targetPosition
+      })
+    );
+    const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId));
+    const center = computed(() =>
+      getEdgeCenter({
+        sourceX: props.sourceX,
+        sourceY: props.sourceY,
+        targetX: props.targetX,
+        targetY: props.targetY
+      })
+    );
 
-  return () => (
-    <>
-      <path id={id} class="react-flow__edge-path" d={edgePath} marker-end={markerEnd} />
-      <EdgeText
-        x={centerX}
-        y={centerY}
-        label={data.text}
-        labelStyle={{ fill: 'white' }}
-        labelShowBg
-        labelBgStyle={{ fill: 'red' }}
-        labelBgPadding={[2, 4]}
-        labelBgBorderRadius={2}
-        onClick={() => console.log(data)}
-      />
-      ;
-    </>
-  );
-};
+    return () => (
+      <>
+        <path id={props.id} class="revue-flow__edge-path" d={edgePath.value} marker-end={markerEnd.value} />
+        <EdgeText
+          x={center.value[0]}
+          y={center.value[1]}
+          label={props.data?.text}
+          labelStyle={{ fill: 'white' }}
+          labelShowBg
+          labelBgStyle={{ fill: 'red' }}
+          labelBgPadding={[2, 4]}
+          labelBgBorderRadius={2}
+          onClick={() => console.log(props.data)}
+        />
+      </>
+    );
+  }
+});
 
 export default CustomEdge;
diff --git a/examples/Edges/index.tsx b/examples/Edges/index.tsx
index 93878747..8c2c4150 100644
--- a/examples/Edges/index.tsx
+++ b/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));
 
diff --git a/src/components/Edges/utils.ts b/src/components/Edges/utils.ts
index 40fb26be..672bd762 100644
--- a/src/components/Edges/utils.ts
+++ b/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']>,