alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(core): use normal components for edges

Browse Source
This commit is contained in:
braks
2023-07-10 19:20:26 +02:00
committed by Braks
parent 908ea3965e
commit 7d93915f36
5 changed files with 173 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/components/Edges/BezierEdge.ts
+39 -41
View File
@@ -1,49 +1,47 @@
import type { FunctionalComponent } from 'vue' import { defineComponent, h } from 'vue'
import { h } from 'vue'
import BaseEdge from './BaseEdge.vue' import BaseEdge from './BaseEdge.vue'
import { getBezierPath } from './utils' import { getBezierPath } from './utils'
import type { BezierEdgeProps } from '~/types' import type { BezierEdgeProps } from '~/types'
import { Position } from '~/types' import { Position } from '~/types'
const BezierEdge: FunctionalComponent<BezierEdgeProps> = function ( const BezierEdge = defineComponent<BezierEdgeProps>({
{ sourcePosition = Position.Bottom, targetPosition = Position.Top, ...props }, name: 'BezierEdge',
{ attrs }, props: [
) { 'sourcePosition',
const [path, labelX, labelY] = getBezierPath({ 'targetPosition',
sourcePosition, 'label',
targetPosition, 'labelStyle',
...props, '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, { return h(BaseEdge as any, {
path, path,
labelX, labelX,
labelY, labelY,
...props, ...attrs,
...attrs, ...props,
}) })
} }
},
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 }
export default BezierEdge export default BezierEdge
packages/core/src/components/Edges/SimpleBezierEdge.ts
+38 -40
View File
@@ -1,48 +1,46 @@
import type { FunctionalComponent } from 'vue' import { defineComponent, h } from 'vue'
import { h } from 'vue'
import BaseEdge from './BaseEdge.vue' import BaseEdge from './BaseEdge.vue'
import { getSimpleBezierPath } from './utils' import { getSimpleBezierPath } from './utils'
import type { SimpleBezierEdgeProps } from '~/types' import type { SimpleBezierEdgeProps } from '~/types'
import { Position } from '~/types' import { Position } from '~/types'
const SimpleBezierEdge: FunctionalComponent<SimpleBezierEdgeProps> = function ( const SimpleBezierEdge = defineComponent<SimpleBezierEdgeProps>({
{ sourcePosition = Position.Bottom, targetPosition = Position.Top, ...props }, name: 'SimpleBezierEdge',
{ attrs }, props: [
) { 'sourcePosition',
const [path, labelX, labelY] = getSimpleBezierPath({ 'targetPosition',
sourcePosition, 'label',
targetPosition, 'labelStyle',
...props, '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, { return h(BaseEdge as any, {
path, path,
labelX, labelX,
labelY, labelY,
...props, ...attrs,
...attrs, ...props,
}) })
} }
},
SimpleBezierEdge.props = [ })
'sourcePosition',
'targetPosition',
'label',
'labelStyle',
'labelShowBg',
'labelBgStyle',
'labelBgPadding',
'labelBgBorderRadius',
'sourceY',
'sourceX',
'targetX',
'targetY',
'markerEnd',
'markerStart',
'interactionWidth',
]
SimpleBezierEdge.inheritAttrs = false
SimpleBezierEdge.compatConfig = { MODE: 3 }
export default SimpleBezierEdge export default SimpleBezierEdge
packages/core/src/components/Edges/SmoothStepEdge.ts
+40 -42
View File
@@ -1,50 +1,48 @@
import type { FunctionalComponent } from 'vue' import { defineComponent, h } from 'vue'
import { h } from 'vue'
import BaseEdge from './BaseEdge.vue' import BaseEdge from './BaseEdge.vue'
import { getSmoothStepPath } from './utils' import { getSmoothStepPath } from './utils'
import type { SmoothStepEdgeProps } from '~/types' import type { SmoothStepEdgeProps } from '~/types'
import { Position } from '~/types' import { Position } from '~/types'
const SmoothStepEdge: FunctionalComponent<SmoothStepEdgeProps> = function ( const SmoothStepEdge = defineComponent<SmoothStepEdgeProps>({
{ sourcePosition = Position.Bottom, targetPosition = Position.Top, ...props }, name: 'SmoothStepEdge',
{ attrs }, props: [
) { 'sourcePosition',
const [path, labelX, labelY] = getSmoothStepPath({ 'targetPosition',
sourcePosition, 'label',
targetPosition, 'labelStyle',
...props, '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, { return h(BaseEdge as any, {
path, path,
labelX, labelX,
labelY, labelY,
...props, ...attrs,
...attrs, ...props,
}) })
} }
},
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 }
export default SmoothStepEdge export default SmoothStepEdge
packages/core/src/components/Edges/StepEdge.ts
+24 -27
View File
@@ -1,31 +1,28 @@
import type { FunctionalComponent } from 'vue' import { defineComponent, h } from 'vue'
import { h } from 'vue'
import SmoothStepEdge from './SmoothStepEdge' import SmoothStepEdge from './SmoothStepEdge'
import type { StepEdgeProps } from '~/types'
const StepEdge: FunctionalComponent<StepEdgeProps> = function (props, { attrs }) { const StepEdge = defineComponent({
return h(SmoothStepEdge, { ...props, ...attrs, borderRadius: 0 }) name: 'StepEdge',
} props: [
'sourcePosition',
StepEdge.props = [ 'targetPosition',
'sourcePosition', 'label',
'targetPosition', 'labelStyle',
'label', 'labelShowBg',
'labelStyle', 'labelBgStyle',
'labelShowBg', 'labelBgPadding',
'labelBgStyle', 'labelBgBorderRadius',
'labelBgPadding', 'sourceY',
'labelBgBorderRadius', 'sourceX',
'sourceY', 'targetX',
'sourceX', 'targetY',
'targetX', 'markerEnd',
'targetY', 'markerStart',
'markerEnd', 'interactionWidth',
'markerStart', ] as any,
'interactionWidth', setup(props, { attrs }) {
] return () => h(SmoothStepEdge as any, { ...props, ...attrs, borderRadius: 0 })
},
StepEdge.inheritAttrs = false })
StepEdge.compatConfig = { MODE: 3 }
export default StepEdge export default StepEdge
packages/core/src/components/Edges/StraightEdge.ts
+32 -31
View File
@@ -1,38 +1,39 @@
import type { FunctionalComponent } from 'vue' import { defineComponent, h } from 'vue'
import { h } from 'vue'
import BaseEdge from './BaseEdge.vue' import BaseEdge from './BaseEdge.vue'
import { getStraightPath } from './utils' import { getStraightPath } from './utils'
import type { StraightEdgeProps } from '~/types' import type { StraightEdgeProps } from '~/types'
const StraightEdge: FunctionalComponent<StraightEdgeProps> = function (props, { attrs }) { const StraightEdge = defineComponent<StraightEdgeProps>({
const [path, labelX, labelY] = getStraightPath(props) 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, { return h(BaseEdge as any, {
path, path,
labelX, labelX,
labelY, labelY,
...props, ...attrs,
...attrs, ...props,
}) })
} }
},
StraightEdge.props = [ })
'label',
'labelStyle',
'labelShowBg',
'labelBgStyle',
'labelBgPadding',
'labelBgBorderRadius',
'sourceY',
'sourceX',
'targetX',
'targetY',
'markerEnd',
'markerStart',
'interactionWidth',
]
StraightEdge.inheritAttrs = false
StraightEdge.compatConfig = { MODE: 3 }
export default StraightEdge export default StraightEdge