fix(example): custom edges not displayed correctly

2021-08-08 19:28:45 +02:00
parent e7513b898c
commit 9e397e6817
4 changed files with 82 additions and 75 deletions
@@ -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;