From 7d93915f369d4665aced83b0e81102f08a88c5b7 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Wed, 14 Jun 2023 21:53:08 +0200 Subject: [PATCH] refactor(core): use normal components for edges --- .../core/src/components/Edges/BezierEdge.ts | 80 +++++++++--------- .../src/components/Edges/SimpleBezierEdge.ts | 78 +++++++++--------- .../src/components/Edges/SmoothStepEdge.ts | 82 +++++++++---------- .../core/src/components/Edges/StepEdge.ts | 51 ++++++------ .../core/src/components/Edges/StraightEdge.ts | 63 +++++++------- 5 files changed, 173 insertions(+), 181 deletions(-) diff --git a/packages/core/src/components/Edges/BezierEdge.ts b/packages/core/src/components/Edges/BezierEdge.ts index ae17cde3..4b471782 100644 --- a/packages/core/src/components/Edges/BezierEdge.ts +++ b/packages/core/src/components/Edges/BezierEdge.ts @@ -1,49 +1,47 @@ -import type { FunctionalComponent } from 'vue' -import { h } from 'vue' +import { defineComponent, h } from 'vue' import BaseEdge from './BaseEdge.vue' import { getBezierPath } from './utils' import type { BezierEdgeProps } from '~/types' import { Position } from '~/types' -const BezierEdge: FunctionalComponent = function ( - { sourcePosition = Position.Bottom, targetPosition = Position.Top, ...props }, - { attrs }, -) { - const [path, labelX, labelY] = getBezierPath({ - sourcePosition, - targetPosition, - ...props, - }) +const BezierEdge = defineComponent({ + name: 'BezierEdge', + props: [ + 'sourcePosition', + 'targetPosition', + 'label', + 'labelStyle', + 'labelShowBg', + 'labelBgStyle', + 'labelBgPadding', + 'labelBgBorderRadius', + 'sourceY', + 'sourceX', + 'targetX', + 'targetY', + 'curvature', + 'markerEnd', + 'markerStart', + 'interactionWidth', + ] as any, + compatConfig: { MODE: 3 }, + setup(props, { attrs }) { + return () => { + const [path, labelX, labelY] = getBezierPath({ + ...props, + sourcePosition: props.sourcePosition ?? Position.Bottom, + targetPosition: props.targetPosition ?? Position.Top, + }) - return h(BaseEdge as any, { - path, - labelX, - labelY, - ...props, - ...attrs, - }) -} - -BezierEdge.props = [ - 'sourcePosition', - 'targetPosition', - 'label', - 'labelStyle', - 'labelShowBg', - 'labelBgStyle', - 'labelBgPadding', - 'labelBgBorderRadius', - 'sourceY', - 'sourceX', - 'targetX', - 'targetY', - 'curvature', - 'markerEnd', - 'markerStart', - 'interactionWidth', -] - -BezierEdge.inheritAttrs = false -BezierEdge.compatConfig = { MODE: 3 } + return h(BaseEdge as any, { + path, + labelX, + labelY, + ...attrs, + ...props, + }) + } + }, +}) export default BezierEdge diff --git a/packages/core/src/components/Edges/SimpleBezierEdge.ts b/packages/core/src/components/Edges/SimpleBezierEdge.ts index 96699d25..9a258217 100644 --- a/packages/core/src/components/Edges/SimpleBezierEdge.ts +++ b/packages/core/src/components/Edges/SimpleBezierEdge.ts @@ -1,48 +1,46 @@ -import type { FunctionalComponent } from 'vue' -import { h } from 'vue' +import { defineComponent, h } from 'vue' import BaseEdge from './BaseEdge.vue' import { getSimpleBezierPath } from './utils' import type { SimpleBezierEdgeProps } from '~/types' import { Position } from '~/types' -const SimpleBezierEdge: FunctionalComponent = function ( - { sourcePosition = Position.Bottom, targetPosition = Position.Top, ...props }, - { attrs }, -) { - const [path, labelX, labelY] = getSimpleBezierPath({ - sourcePosition, - targetPosition, - ...props, - }) +const SimpleBezierEdge = defineComponent({ + name: 'SimpleBezierEdge', + props: [ + 'sourcePosition', + 'targetPosition', + 'label', + 'labelStyle', + 'labelShowBg', + 'labelBgStyle', + 'labelBgPadding', + 'labelBgBorderRadius', + 'sourceY', + 'sourceX', + 'targetX', + 'targetY', + 'markerEnd', + 'markerStart', + 'interactionWidth', + ] as any, + compatConfig: { MODE: 3 }, + setup(props, { attrs }) { + return () => { + const [path, labelX, labelY] = getSimpleBezierPath({ + ...props, + sourcePosition: props.sourcePosition ?? Position.Bottom, + targetPosition: props.targetPosition ?? Position.Top, + }) - return h(BaseEdge as any, { - path, - labelX, - labelY, - ...props, - ...attrs, - }) -} - -SimpleBezierEdge.props = [ - 'sourcePosition', - 'targetPosition', - 'label', - 'labelStyle', - 'labelShowBg', - 'labelBgStyle', - 'labelBgPadding', - 'labelBgBorderRadius', - 'sourceY', - 'sourceX', - 'targetX', - 'targetY', - 'markerEnd', - 'markerStart', - 'interactionWidth', -] - -SimpleBezierEdge.inheritAttrs = false -SimpleBezierEdge.compatConfig = { MODE: 3 } + return h(BaseEdge as any, { + path, + labelX, + labelY, + ...attrs, + ...props, + }) + } + }, +}) export default SimpleBezierEdge diff --git a/packages/core/src/components/Edges/SmoothStepEdge.ts b/packages/core/src/components/Edges/SmoothStepEdge.ts index 5a569729..f8bb39bb 100644 --- a/packages/core/src/components/Edges/SmoothStepEdge.ts +++ b/packages/core/src/components/Edges/SmoothStepEdge.ts @@ -1,50 +1,48 @@ -import type { FunctionalComponent } from 'vue' -import { h } from 'vue' +import { defineComponent, h } from 'vue' import BaseEdge from './BaseEdge.vue' import { getSmoothStepPath } from './utils' import type { SmoothStepEdgeProps } from '~/types' import { Position } from '~/types' -const SmoothStepEdge: FunctionalComponent = function ( - { sourcePosition = Position.Bottom, targetPosition = Position.Top, ...props }, - { attrs }, -) { - const [path, labelX, labelY] = getSmoothStepPath({ - sourcePosition, - targetPosition, - ...props, - }) +const SmoothStepEdge = defineComponent({ + name: 'SmoothStepEdge', + props: [ + 'sourcePosition', + 'targetPosition', + 'label', + 'labelStyle', + 'labelShowBg', + 'labelBgStyle', + 'labelBgPadding', + 'labelBgBorderRadius', + 'sourceY', + 'sourceX', + 'targetX', + 'targetY', + 'borderRadius', + 'markerEnd', + 'markerStart', + 'interactionWidth', + 'offset', + ] as any, + compatConfig: { MODE: 3 }, + setup(props, { attrs }) { + return () => { + const [path, labelX, labelY] = getSmoothStepPath({ + ...props, + sourcePosition: props.sourcePosition ?? Position.Bottom, + targetPosition: props.targetPosition ?? Position.Top, + }) - return h(BaseEdge as any, { - path, - labelX, - labelY, - ...props, - ...attrs, - }) -} - -SmoothStepEdge.props = [ - 'sourcePosition', - 'targetPosition', - 'label', - 'labelStyle', - 'labelShowBg', - 'labelBgStyle', - 'labelBgPadding', - 'labelBgBorderRadius', - 'sourceY', - 'sourceX', - 'targetX', - 'targetY', - 'borderRadius', - 'markerEnd', - 'markerStart', - 'interactionWidth', - 'offset', -] - -SmoothStepEdge.inheritAttrs = false -SmoothStepEdge.compatConfig = { MODE: 3 } + return h(BaseEdge as any, { + path, + labelX, + labelY, + ...attrs, + ...props, + }) + } + }, +}) export default SmoothStepEdge diff --git a/packages/core/src/components/Edges/StepEdge.ts b/packages/core/src/components/Edges/StepEdge.ts index 98d6e470..8f85e33a 100644 --- a/packages/core/src/components/Edges/StepEdge.ts +++ b/packages/core/src/components/Edges/StepEdge.ts @@ -1,31 +1,28 @@ -import type { FunctionalComponent } from 'vue' -import { h } from 'vue' +import { defineComponent, h } from 'vue' import SmoothStepEdge from './SmoothStepEdge' -import type { StepEdgeProps } from '~/types' -const StepEdge: FunctionalComponent = function (props, { attrs }) { - return h(SmoothStepEdge, { ...props, ...attrs, borderRadius: 0 }) -} - -StepEdge.props = [ - 'sourcePosition', - 'targetPosition', - 'label', - 'labelStyle', - 'labelShowBg', - 'labelBgStyle', - 'labelBgPadding', - 'labelBgBorderRadius', - 'sourceY', - 'sourceX', - 'targetX', - 'targetY', - 'markerEnd', - 'markerStart', - 'interactionWidth', -] - -StepEdge.inheritAttrs = false -StepEdge.compatConfig = { MODE: 3 } +const StepEdge = defineComponent({ + name: 'StepEdge', + props: [ + 'sourcePosition', + 'targetPosition', + 'label', + 'labelStyle', + 'labelShowBg', + 'labelBgStyle', + 'labelBgPadding', + 'labelBgBorderRadius', + 'sourceY', + 'sourceX', + 'targetX', + 'targetY', + 'markerEnd', + 'markerStart', + 'interactionWidth', + ] as any, + setup(props, { attrs }) { + return () => h(SmoothStepEdge as any, { ...props, ...attrs, borderRadius: 0 }) + }, +}) export default StepEdge diff --git a/packages/core/src/components/Edges/StraightEdge.ts b/packages/core/src/components/Edges/StraightEdge.ts index 92f93d07..5898b1f2 100644 --- a/packages/core/src/components/Edges/StraightEdge.ts +++ b/packages/core/src/components/Edges/StraightEdge.ts @@ -1,38 +1,39 @@ -import type { FunctionalComponent } from 'vue' -import { h } from 'vue' +import { defineComponent, h } from 'vue' import BaseEdge from './BaseEdge.vue' import { getStraightPath } from './utils' import type { StraightEdgeProps } from '~/types' -const StraightEdge: FunctionalComponent = function (props, { attrs }) { - const [path, labelX, labelY] = getStraightPath(props) +const StraightEdge = defineComponent({ + name: 'StraightEdge', + props: [ + 'label', + 'labelStyle', + 'labelShowBg', + 'labelBgStyle', + 'labelBgPadding', + 'labelBgBorderRadius', + 'sourceY', + 'sourceX', + 'targetX', + 'targetY', + 'markerEnd', + 'markerStart', + 'interactionWidth', + ] as any, + compatConfig: { MODE: 3 }, + setup(props, { attrs }) { + return () => { + const [path, labelX, labelY] = getStraightPath(props) - return h(BaseEdge as any, { - path, - labelX, - labelY, - ...props, - ...attrs, - }) -} - -StraightEdge.props = [ - 'label', - 'labelStyle', - 'labelShowBg', - 'labelBgStyle', - 'labelBgPadding', - 'labelBgBorderRadius', - 'sourceY', - 'sourceX', - 'targetX', - 'targetY', - 'markerEnd', - 'markerStart', - 'interactionWidth', -] - -StraightEdge.inheritAttrs = false -StraightEdge.compatConfig = { MODE: 3 } + return h(BaseEdge as any, { + path, + labelX, + labelY, + ...attrs, + ...props, + }) + } + }, +}) export default StraightEdge