refactor(nodes,edges): change defaults to functional components

# What's changed? * Change default node/edge components to functional components
2022-04-24 13:34:22 +02:00
parent 0519bd0f25
commit 8d33014291
26 changed files with 494 additions and 454 deletions
@@ -0,0 +1,61 @@
+import { FunctionalComponent } from 'vue'
+import BaseEdge from './BaseEdge'
+import { EdgeProps } from '~/types'
+
+const StraightEdge: FunctionalComponent<EdgeProps> = function ({
+  label,
+  labelStyle = {},
+  labelShowBg = true,
+  labelBgStyle = {},
+  labelBgPadding,
+  labelBgBorderRadius,
+  sourceY,
+  sourceX,
+  targetX,
+  targetY,
+  markerEnd,
+  markerStart,
+  style,
+}) {
+  const centerY = computed(() => {
+    const yOffset = Math.abs(targetY - sourceY) / 2
+    return targetY < sourceY ? targetY + yOffset : targetY - yOffset
+  })
+  const centerX = computed(() => {
+    const xOffset = Math.abs(targetX - sourceX) / 2
+    return targetX < sourceX ? targetX + xOffset : targetX - xOffset
+  })
+
+  return h(BaseEdge, {
+    path: `M ${sourceX},${sourceY}L ${targetX},${targetY}`,
+    centerX: centerX.value,
+    centerY: centerY.value,
+    label,
+    labelStyle,
+    labelShowBg,
+    labelBgStyle,
+    labelBgPadding,
+    labelBgBorderRadius,
+    style,
+    markerEnd,
+    markerStart,
+  })
+}
+
+StraightEdge.props = [
+  'label',
+  'labelStyle',
+  'labelShowBg',
+  'labelBgStyle',
+  'labelBgPadding',
+  'labelBgBorderRadius',
+  'sourceY',
+  'sourceX',
+  'targetX',
+  'targetY',
+  'markerEnd',
+  'markerStart',
+  'style',
+]
+
+export default StraightEdge