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,78 @@
+import { FunctionalComponent } from 'vue'
+import { getCenter, getSmoothStepPath } from './utils'
+import BaseEdge from './BaseEdge'
+import { Position, SmoothStepEdgeProps } from '~/types'
+
+const SmoothStepEdge: FunctionalComponent<SmoothStepEdgeProps> = function ({
+  sourcePosition = Position.Bottom,
+  targetPosition = Position.Top,
+  label,
+  labelStyle = {},
+  labelShowBg = true,
+  labelBgStyle = {},
+  labelBgPadding,
+  labelBgBorderRadius,
+  sourceY,
+  sourceX,
+  targetX,
+  targetY,
+  markerEnd,
+  markerStart,
+  borderRadius,
+  style,
+}) {
+  const [centerX, centerY] = getCenter({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+  })
+
+  const path = getSmoothStepPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+    borderRadius,
+  })
+
+  return h(BaseEdge, {
+    path,
+    centerX,
+    centerY,
+    label,
+    labelStyle,
+    labelShowBg,
+    labelBgStyle,
+    labelBgPadding,
+    labelBgBorderRadius,
+    style,
+    markerEnd,
+    markerStart,
+  })
+}
+
+SmoothStepEdge.props = [
+  'sourcePosition',
+  'targetPosition',
+  'label',
+  'labelStyle',
+  'labelShowBg',
+  'labelBgStyle',
+  'labelBgPadding',
+  'labelBgBorderRadius',
+  'sourceY',
+  'sourceX',
+  'targetX',
+  'targetY',
+  'borderRadius',
+  'markerEnd',
+  'markerStart',
+  'style',
+]
+
+export default SmoothStepEdge