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

refactor: pass props to edge/nodewrapper separately

Browse Source 
Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
Braks
2021-11-22 01:22:27 +01:00
parent a03f658794
commit c35673c622
18 changed files with 204 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
examples/Basic/Basic.vue
View File

@@ -16,8 +16,8 @@ import {
useVueFlow,
} from '~/index'
const onNodeDragStop = ({ node }: { node: Node }) => console.log('drag stop', node)
const onElementClick = ({ node }: { node: Node }) => console.log('click', node)
const onNodeDragStop = (e) => console.log('drag stop', e)
const onElementClick = (e) => console.log('click', e)
const elements = ref<Elements>([
{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
{ id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
@@ -26,12 +26,12 @@ const elements = ref<Elements>([
{ id: 'e1-2', source: '1', target: '2', animated: true },
{ id: 'e1-3', source: '1', target: '3' },
])
const rfInstance = ref<FlowInstance | null>(null)
const vfInstance = ref<FlowInstance>()
const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
const onConnect = (params: Edge | Connection) => (elements.value = addEdge(params, elements.value))
const onLoad = (flowInstance: FlowInstance) => {
flowInstance.fitView({ padding: 0.1 })
rfInstance.value = flowInstance
vfInstance.value = flowInstance
}
const updatePos = () => {
@@ -46,8 +46,8 @@ const updatePos = () => {
})
}
const logToObject = () => console.log(rfInstance.value?.toObject())
const resetTransform = () => rfInstance.value?.setTransform({ x: 0, y: 0, zoom: 1 })
const logToObject = () => console.log(vfInstance.value?.toObject())
const resetTransform = () => vfInstance.value?.setTransform({ x: 0, y: 0, zoom: 1 })
const toggleclasss = () => {
elements.value = elements.value.map((el) => {
@@ -64,11 +64,11 @@ const toggleclasss = () => {
:min-zoom="0.2"
:max-zoom="4"
:zoom-on-scroll="false"
:worker="true"
@elements-remove="onElementsRemove"
@connect="onConnect"
@node-drag-stop="onNodeDragStop"
@node-click="onElementClick"
@elementClick="onElementClick"
@load="onLoad"
>
<MiniMap />

1
package.json
View File

@@ -37,7 +37,6 @@
"d3": "^7.1.1",
"d3-selection": "^3.0.0",
"d3-zoom": "^3.0.0",
"defu": "^5.0.0",
"microdiff": "^1.2.0",
"pinia": "^2.0.0-rc.10"
},

8
src/components/Edges/BezierEdge.vue
View File

@@ -1,6 +1,6 @@
<script lang="ts" setup>
import { Component, CSSProperties, DefineComponent } from 'vue'
import { ArrowHeadType, EdgeProps, ElementId, Position } from '../../types'
import { CSSProperties, DefineComponent } from 'vue'
import { ArrowHeadType, EdgeProps, EdgeTextProps, ElementId, Position } from '../../types'
import { getCenter, getMarkerEnd, getBezierPath } from './utils'
import EdgeText from './EdgeText.vue'
@@ -19,8 +19,8 @@ interface BezierEdgeProps extends EdgeProps {
label?:
| string
| {
component: Component | DefineComponent
props?: Record<string, any>
component: DefineComponent<EdgeTextProps>
props?: EdgeTextProps
}
labelStyle?: CSSProperties
labelShowBg?: boolean

4
src/components/Edges/EdgeText.vue
View File

@@ -1,5 +1,5 @@
<script lang="ts" setup>
import { Component, CSSProperties, DefineComponent } from 'vue'
import { CSSProperties, DefineComponent } from 'vue'
interface EdgeTextProps {
x: number
@@ -7,7 +7,7 @@ interface EdgeTextProps {
label?:
| string
| {
component: Component | DefineComponent
component: DefineComponent
props?: Record<string, any>
}
labelStyle?: CSSProperties

113
src/components/Edges/EdgeWrapper.vue
View File

@@ -1,12 +1,39 @@
<script lang="ts" setup>
import { CSSProperties, DefineComponent } from 'vue'
import { useHandle, useStore } from '../../composables'
import { ConnectionMode, Edge, EdgePositions, Position } from '../../types'
import { ArrowHeadType, ConnectionMode, Edge, EdgePositions, EdgeTextProps, ElementId, Position } from '../../types'
import { isEdge, getEdgePositions, getHandle, getSourceTargetNodes, isEdgeVisible } from '../../utils'
import EdgeAnchor from './EdgeAnchor.vue'
interface EdgeWrapper {
id: ElementId
edge: Edge
type?: string
source: ElementId
target: ElementId
sourceHandle?: ElementId | null
targetHandle?: ElementId | null
selected?: boolean
sourcePosition?: Position
targetPosition?: Position
label?:
| string
| {
component: DefineComponent<EdgeTextProps>
props?: EdgeTextProps
}
labelStyle?: any
labelShowBg?: boolean
labelBgStyle?: any
labelBgPadding?: [number, number]
labelBgBorderRadius?: number
style?: CSSProperties | unknown
animated?: boolean
arrowHeadType?: ArrowHeadType
markerEndId?: string
data?: any
class?: string
isHidden?: boolean
edgeUpdaterRadius?: number
}
@@ -15,7 +42,7 @@ const props = withDefaults(defineProps<EdgeWrapper>(), {})
const store = useStore()
const type = computed(() => {
const t = props.edge.type ?? 'default'
const t = props.type ?? 'default'
let edge = store.getEdgeTypes[t]
if (!edge) {
edge = store.getEdgeTypes.default
@@ -53,8 +80,8 @@ const onEdgeMouseLeave = (event: MouseEvent) => store.hooks.edgeMouseLeave.trigg
const handler = useHandle()
const handleEdgeUpdater = (event: MouseEvent, isSourceHandle: boolean) => {
const nodeId = isSourceHandle ? props.edge.target : props.edge.source
const handleId = (isSourceHandle ? props.edge.targetHandle : props.edge.sourceHandle) ?? ''
const nodeId = isSourceHandle ? props.target : props.source
const handleId = (isSourceHandle ? props.targetHandle : props.sourceHandle) ?? ''
const isValidConnection = () => true
const isTarget = isSourceHandle
@@ -92,11 +119,11 @@ const nodes = computed(() => {
const n = getSourceTargetNodes(props.edge, store.nodes)
if (!n.sourceNode) {
console.warn(`couldn't create edge for source id: ${props.edge.source}; edge id: ${props.edge.id}`)
console.warn(`couldn't create edge for source id: ${props.source}; edge id: ${props.id}`)
}
if (!n.targetNode) {
console.warn(`couldn't create edge for target id: ${props.edge.target}; edge id: ${props.edge.id}`)
console.warn(`couldn't create edge for target id: ${props.target}; edge id: ${props.id}`)
}
return n
@@ -111,17 +138,17 @@ const targetNodeHandles = computed(() =>
const sourceHandle = computed(() => {
if (nodes.value.sourceNode && nodes.value.sourceNode.__vf?.handleBounds?.source)
return getHandle(nodes.value.sourceNode.__vf.handleBounds.source, props.edge.sourceHandle ?? null)
return getHandle(nodes.value.sourceNode.__vf.handleBounds.source, props.sourceHandle ?? null)
else return null
})
const targetHandle = computed(() => {
if (targetNodeHandles.value) return getHandle(targetNodeHandles.value, props.edge.targetHandle ?? null)
if (targetNodeHandles.value) return getHandle(targetNodeHandles.value, props.targetHandle ?? null)
else return null
})
const sourcePosition = computed(() => (sourceHandle.value ? sourceHandle.value.position : Position.Bottom))
const targetPosition = computed(() => (targetHandle.value ? targetHandle.value.position : Position.Top))
const isSelected = computed(() => store.selectedElements?.some((elm) => isEdge(elm) && elm.id === props.edge.id) ?? false)
const isSelected = computed(() => store.selectedElements?.some((elm) => isEdge(elm) && elm.id === props.id) ?? false)
const edgePos = computed(() =>
getEdgePositions(
nodes.value.sourceNode,
@@ -141,17 +168,17 @@ export default {
</script>
<template>
<g
v-show="!props.edge.isHidden && isVisible(edgePos)"
v-show="!props.isHidden && isVisible(edgePos)"
:class="[
'vue-flow__edge',
`vue-flow__edge-${props.edge.type || 'default'}`,
`vue-flow__edge-${props.type || 'default'}`,
{
selected: isSelected,
animated: props.edge.animated,
animated: props.animated,
inactive: !elementsSelectable,
updating,
},
props.edge.class,
props.class,
]"
@click="onEdgeClick"
@dblClick="onDoubleClick"
@@ -163,20 +190,20 @@ export default {
<slot
v-if="edgePos.sourceX && edgePos.sourceY && edgePos.targetX && edgePos.targetY"
v-bind="{
id: props.edge.id,
source: props.edge.source,
target: props.edge.target,
id: props.id,
source: props.source,
target: props.target,
selected: isSelected,
animated: props.edge.animated,
label: props.edge.label,
labelStyle: props.edge.labelStyle,
labelShowBg: props.edge.labelShowBg,
labelBgStyle: props.edge.labelBgStyle,
labelBgPadding: props.edge.labelBgPadding,
labelBgBorderRadius: props.edge.labelBgBorderRadius,
data: props.edge.data,
style: props.edge.style,
arrowHeadType: props.edge.arrowHeadType,
animated: props.animated,
label: props.label,
labelStyle: props.labelStyle,
labelShowBg: props.labelShowBg,
labelBgStyle: props.labelBgStyle,
labelBgPadding: props.labelBgPadding,
labelBgBorderRadius: props.labelBgBorderRadius,
data: props.data,
style: props.style,
arrowHeadType: props.arrowHeadType,
sourcePosition,
targetPosition,
sourceX: edgePos.sourceX,
@@ -184,28 +211,28 @@ export default {
targetX: edgePos.targetX,
targetY: edgePos.targetY,
markerEndId: props.markerEndId,
sourceHandleId: props.edge.sourceHandle,
targetHandleId: props.edge.targetHandle,
sourceHandleId: props.sourceHandle,
targetHandleId: props.targetHandle,
}"
>
<component
:is="type"
v-if="typeof type !== 'boolean'"
v-bind="{
id: props.edge.id,
source: props.edge.source,
target: props.edge.target,
id: props.id,
source: props.source,
target: props.target,
selected: isSelected,
animated: props.edge.animated,
label: props.edge.label,
labelStyle: props.edge.labelStyle,
labelShowBg: props.edge.labelShowBg,
labelBgStyle: props.edge.labelBgStyle,
labelBgPadding: props.edge.labelBgPadding,
labelBgBorderRadius: props.edge.labelBgBorderRadius,
data: props.edge.data,
style: props.edge.style,
arrowHeadType: props.edge.arrowHeadType,
animated: props.animated,
label: props.label,
labelStyle: props.labelStyle,
labelShowBg: props.labelShowBg,
labelBgStyle: props.labelBgStyle,
labelBgPadding: props.labelBgPadding,
labelBgBorderRadius: props.labelBgBorderRadius,
data: props.data,
style: props.style,
arrowHeadType: props.arrowHeadType,
sourcePosition,
targetPosition,
sourceX: edgePos.sourceX,
@@ -213,8 +240,8 @@ export default {
targetX: edgePos.targetX,
targetY: edgePos.targetY,
markerEndId: props.markerEndId,
sourceHandleId: props.edge.sourceHandle,
targetHandleId: props.edge.targetHandle,
sourceHandleId: props.sourceHandle,
targetHandleId: props.targetHandle,
}"
/>
</slot>

8
src/components/Edges/SmoothStepEdge.vue
View File

@@ -1,6 +1,6 @@
<script lang="ts" setup>
import { Component, CSSProperties, DefineComponent } from 'vue'
import { ArrowHeadType, EdgeProps, ElementId, Position } from '../../types'
import { CSSProperties, DefineComponent } from 'vue'
import { ArrowHeadType, EdgeProps, EdgeTextProps, ElementId, Position } from '../../types'
import EdgeText from './EdgeText.vue'
import { getCenter, getMarkerEnd, getSmoothStepPath } from './utils'
@@ -19,8 +19,8 @@ interface SmoothStepEdgeProps extends EdgeProps {
label?:
| string
| {
component: Component | DefineComponent
props?: Record<string, any>
component: DefineComponent<EdgeTextProps>
props?: EdgeTextProps
}
labelStyle?: CSSProperties
labelShowBg?: boolean

10
src/components/Edges/StepEdge.vue
View File

@@ -1,9 +1,9 @@
<script lang="ts" setup>
import { Component, CSSProperties, DefineComponent } from 'vue'
import { ArrowHeadType, EdgeProps, ElementId, Position } from '../../types'
import { CSSProperties, DefineComponent } from 'vue'
import { ArrowHeadType, EdgeProps, EdgeTextProps, ElementId, Position } from '../../types'
import SmoothStepEdge from './SmoothStepEdge.vue'
export interface StepEdgeProps extends EdgeProps {
interface StepEdgeProps extends EdgeProps {
id: ElementId
source: ElementId
target: ElementId
@@ -18,8 +18,8 @@ export interface StepEdgeProps extends EdgeProps {
label?:
| string
| {
component: Component | DefineComponent
props?: Record<string, any>
component: DefineComponent<EdgeTextProps>
props?: EdgeTextProps
}
labelStyle?: CSSProperties
labelShowBg?: boolean

8
src/components/Edges/StraightEdge.vue
View File

@@ -1,6 +1,6 @@
<script lang="ts" setup>
import { Component, CSSProperties, DefineComponent } from 'vue'
import { ArrowHeadType, EdgeProps, ElementId, Position } from '../../types'
import { CSSProperties, DefineComponent } from 'vue'
import { ArrowHeadType, EdgeProps, EdgeTextProps, ElementId, Position } from '../../types'
import EdgeText from './EdgeText.vue'
import { getMarkerEnd, getBezierPath } from './utils'
@@ -19,8 +19,8 @@ interface StraightEdgeProps extends EdgeProps {
label?:
| string
| {
component: Component | DefineComponent
props?: Record<string, any>
component: DefineComponent<EdgeTextProps>
props?: EdgeTextProps
}
labelStyle?: CSSProperties
labelShowBg?: boolean

99
src/components/Nodes/NodeWrapper.vue
View File

@@ -1,13 +1,28 @@
<script lang="ts" setup>
import { DraggableEventListener, DraggableCore } from '@braks/revue-draggable'
import { CSSProperties } from 'vue'
import { useStore } from '../../composables'
import { FlowEvents, GraphNode, SnapGrid } from '../../types'
import { ElementId, FlowEvents, GraphNode, Position, SnapGrid, VFInternals, XYPosition } from '../../types'
import { NodeId } from '../../context'
interface NodeWrapperProps {
node: GraphNode
vf: VFInternals
selectNodesOnDrag?: boolean
snapGrid?: SnapGrid
id: ElementId
position: XYPosition
type?: string
class?: string
style?: CSSProperties
data?: any
targetPosition?: Position
sourcePosition?: Position
isHidden?: boolean
draggable?: boolean
selectable?: boolean
connectable?: boolean
dragHandle?: string
}
interface NodeEvents {
@@ -25,12 +40,12 @@ const props = withDefaults(defineProps<NodeWrapperProps>(), {
})
const store = useStore()
provide(NodeId, props.node.id)
provide(NodeId, props.id)
const nodeElement = templateRef<HTMLDivElement>('node-element', null)
const type = computed(() => {
const t = props.node.type ?? 'default'
const t = props.type ?? 'default'
let node = store.getNodeTypes[t]
if (!node) {
node = store.getNodeTypes.default
@@ -39,24 +54,20 @@ const type = computed(() => {
return node
})
const selectable = computed(() =>
typeof props.node.selectable === 'undefined' ? store.elementsSelectable : props.node.selectable,
)
const draggable = computed(() => (typeof props.node.draggable === 'undefined' ? store.nodesDraggable : props.node.draggable))
const connectable = computed(() =>
typeof props.node.connectable === 'undefined' ? store.nodesConnectable : props.node.connectable,
)
const selectable = computed(() => (typeof props.selectable === 'undefined' ? store.elementsSelectable : props.selectable))
const draggable = computed(() => (typeof props.draggable === 'undefined' ? store.nodesDraggable : props.draggable))
const connectable = computed(() => (typeof props.connectable === 'undefined' ? store.nodesConnectable : props.connectable))
const scale = computed(() => store.transform[2])
const selected = computed(() => selectable.value && store.selectedElements?.some(({ id }) => id === props.node.id))
const selected = computed(() => selectable.value && store.selectedElements?.some(({ id }) => id === props.id))
const onMouseEnterHandler = () =>
props.node.__vf.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseEnter.trigger({ event, node: props.node }))
props.vf.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseEnter.trigger({ event, node: props.node }))
const onMouseMoveHandler = () =>
props.node.__vf.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseMove.trigger({ event, node: props.node }))
props.vf.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseMove.trigger({ event, node: props.node }))
const onMouseLeaveHandler = () =>
props.node.__vf.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseLeave.trigger({ event, node: props.node }))
props.vf.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseLeave.trigger({ event, node: props.node }))
const onContextMenuHandler = () => (event: MouseEvent) => store.hooks.nodeContextMenu.trigger({ event, node: props.node })
@@ -69,9 +80,8 @@ const onSelectNodeHandler = (event: MouseEvent) => {
store.unsetNodesSelection()
if (!selected.value) store.addSelectedElements([n])
}
store.hooks.nodeClick.trigger({ event, node: n })
}
store.hooks.elementClick.trigger({ event, element: n })
store.hooks.nodeClick.trigger({ event, node: n })
}
const onDragStart: DraggableEventListener = ({ event }) => {
@@ -95,7 +105,7 @@ const onDrag: DraggableEventListener = ({ event, data }) => {
store.hooks.nodeDrag.trigger({ event, node: n })
store.updateNodePosDiff({
id: props.node.id,
id: props.id,
diff: {
x: data.deltaX,
y: data.deltaY,
@@ -108,11 +118,12 @@ const onDragStop: DraggableEventListener = ({ event }) => {
const n = props.node
// onDragStop also gets called when user just clicks on a node.
// Because of that we set dragging to true inside the onDrag handler and handle the click here
if (!props.node.__vf.isDragging) {
if (!props.vf.isDragging) {
if (selectable.value && !props.selectNodesOnDrag && !selected.value) {
store.addSelectedElements([n])
}
store.hooks.nodeClick.trigger({ event, node: n })
store.hooks.elementClick.trigger({ event, element: n })
return
}
@@ -127,7 +138,7 @@ const onDragStop: DraggableEventListener = ({ event }) => {
onMounted(() => {
store.updateNodeDimensions({
id: props.node.id,
id: props.id,
nodeElement: nodeElement.value,
forceUpdate: true,
})
@@ -141,10 +152,10 @@ onMounted(() => {
}),
)
watch([() => props.node.type, () => props.node.sourcePosition, () => props.node.targetPosition], () => {
watch([() => props.type, () => props.sourcePosition, () => props.targetPosition], () => {
nextTick(() => {
store.updateNodeDimensions({
id: props.node.id,
id: props.id,
nodeElement: nodeElement.value,
forceUpdate: true,
})
@@ -160,7 +171,7 @@ export default {
<template>
<DraggableCore
cancel=".nodrag"
:handle="props.node.dragHandle"
:handle="props.dragHandle"
:disabled="!draggable"
:scale="scale"
:grid="props.snapGrid"
@@ -173,21 +184,21 @@ export default {
ref="node-element"
:class="[
'vue-flow__node',
`vue-flow__node-${props.node.type}`,
`vue-flow__node-${props.type}`,
{
selected,
selectable: selectable,
},
props.node.class,
props.class,
]"
:style="{
zIndex: selected ? 10 : 3,
transform: `translate(${props.node.__vf?.position?.x}px,${props.node.__vf?.position?.y}px)`,
transform: `translate(${props.vf.position.x}px,${props.vf.position.y}px)`,
pointerEvents: selectable || draggable ? 'all' : 'none',
opacity: props.node.__vf?.width !== null && props.node.__vf?.height !== null ? 1 : 0,
...props.node.style,
opacity: props.vf.width !== null && props.vf.height !== null ? 1 : 0,
...props.style,
}"
:data-id="props.node.id"
:data-id="props.id"
@mouseenter="onMouseEnterHandler"
@mousemove="onMouseMoveHandler"
@mouseleave="onMouseLeaveHandler"
@@ -197,31 +208,31 @@ export default {
>
<slot
v-bind="{
id: props.node.id,
data: props.node.data,
type: props.node.type,
xPos: props.node.__vf?.position?.x,
yPos: props.node.__vf?.position?.y,
id: props.id,
data: props.data,
type: props.type,
xPos: props.vf.position.x,
yPos: props.vf.position.y,
selected,
connectable,
sourcePosition: props.node.sourcePosition,
targetPosition: props.node.targetPosition,
dragging: props.node.__vf?.isDragging,
sourcePosition: props.sourcePosition,
targetPosition: props.targetPosition,
dragging: props.vf.isDragging,
}"
>
<component
:is="type"
v-bind="{
id: props.node.id,
data: props.node.data,
type: props.node.type,
xPos: props.node.__vf?.position?.x,
yPos: props.node.__vf?.position?.y,
id: props.id,
data: props.data,
type: props.type,
xPos: props.vf.position.x,
yPos: props.vf.position.y,
selected,
connectable,
sourcePosition: props.node.sourcePosition,
targetPosition: props.node.targetPosition,
dragging: props.node.__vf?.isDragging,
sourcePosition: props.sourcePosition,
targetPosition: props.targetPosition,
dragging: props.vf.isDragging,
}"
/>
</slot>

23
src/container/EdgeRenderer/EdgeRenderer.vue
View File

@@ -40,9 +40,30 @@ export default {
<g :transform="transform">
<Edge
v-for="(edge, i) of store.getEdges"
:id="edge.id"
:key="`${edge.id}-${i}`"
:edge="edge"
:marker-end-id="props.markerEndId"
:type="edge.type"
:source="edge.source"
:target="edge.target"
:source-handle="edge.sourceHandle"
:target-handle="edge.targetHandle"
:selected="edge.selected"
:source-position="edge.sourcePosition"
:target-position="edge.targetPosition"
:label="edge.label"
:label-tyle="edge.labelStyle"
:label-show-bg="edge.labelShowBg"
:label-bg-style="edge.labelBgStyle"
:label-bg-padding="edge.labelBgPadding"
:label-bg-border-radius="edge.labelBgBorderRadius"
:style="edge.style"
:animated="edge.animated"
:arrow-head-type="edge.arrowHeadType"
:data="edge.data"
:class="edge.class"
:is-hidden="edge.isHidden"
:marker-end-id="edge.markerEndId ?? props.markerEndId"
:edge-updater-radius="props.edgeUpdaterRadius"
>
<template #default="edgeProps">

18
src/container/NodeRenderer/NodeRenderer.vue
View File

@@ -1,7 +1,7 @@
<script lang="ts" setup>
import { useStore } from '../../composables'
import Node from '../../components/Nodes/NodeWrapper.vue'
import { SnapGrid } from '../../types'
import Node from '../../components/Nodes/NodeWrapper.vue'
interface NodeRendererProps {
selectNodesOnDrag?: boolean
@@ -20,15 +20,29 @@ const snapGrid = computed(() => (props.snapToGrid || store.snapToGrid ? props.sn
</script>
<script lang="ts">
export default {
name: 'Nodes',
name: 'Node',
}
</script>
<template>
<div class="vue-flow__nodes" :style="{ transform }">
<Node
v-for="node of store.getNodes"
:id="node.id"
:key="node.id"
:node="node"
:vf="node.__vf"
:position="node.position"
:type="node.type"
:class="node.class"
:style="node.style"
:data="node.data"
:target-position="node.targetPosition"
:source-position="node.sourcePosition"
:is-hidden="node.isHidden"
:draggable="node.draggable"
:selectable="node.selectable"
:connectable="node.connectable"
:drag-handle="node.dragHandle"
:snap-grid="snapGrid"
:select-nodes-on-drag="props.selectNodesOnDrag"
>

14
src/container/VueFlow/VueFlow.vue
View File

@@ -116,15 +116,16 @@ const options = Object.assign({}, store.$state, props)
const init = async (state: FlowState) => {
// set state variables
const skip = ['modelValue', 'd3Zoom', 'd3Selection', 'd3ZoomHandler', 'minZoom', 'maxZoom', 'translateExtent', 'nodeExtent']
for (const opt of Object.keys(state)) {
const val = state[opt as keyof FlowState]
if (typeof val !== 'undefined' && opt !== 'modelValue' && opt !== 'elements') {
if (typeof val !== 'undefined' && !skip.includes(opt)) {
if (typeof val === 'object' && !Array.isArray(val)) {
;(store as any)[opt] = { ...(store as any)[opt], ...val }
} else (store as any)[opt] = val
}
}
await until(() => store.d3Zoom).not.toBeUndefined()
if (!store.isReady) await until(() => store.d3Zoom).not.toBeUndefined()
store.setMinZoom(state.minZoom)
store.setMaxZoom(state.maxZoom)
store.setTranslateExtent(state.translateExtent)
@@ -155,12 +156,6 @@ invoke(async () => {
}
store.hooks.load.trigger(instance)
store.instance = instance
})
throttledWatch(elements, store.setElements, { flush: 'post', deep: true, throttle: 10 })
throttledWatch(store.elements, (val) => (elements.value = val), { flush: 'post', deep: true, throttle: 10 })
onMounted(() => {
watch(
() => props,
() => init({ ...store.$state, ...props } as FlowState),
@@ -168,6 +163,9 @@ onMounted(() => {
)
})
throttledWatch(elements, store.setElements, { flush: 'post', deep: true, throttle: 10 })
throttledWatch(store.elements, (val) => (elements.value = val), { flush: 'post', deep: true, throttle: 10 })
const transitionName = computed(() => {
let name = ''
if (typeof store.loading === 'object' && store.loading.transition) {

8
src/store/stateStore.ts
View File

@@ -87,11 +87,9 @@ export default (id: string, preloadedState: FlowState) => {
next = res
} else next = await parseElements(elements, this.nodes, this.edges, this.nodeExtent)
}
if (next) {
this.elements = [...next.nextNodes, ...next.nextEdges]
this.nodes = next?.nextNodes ?? []
this.edges = next?.nextEdges ?? []
}
this.elements = [...next.nextNodes, ...next.nextEdges]
this.nodes = next.nextNodes ?? []
this.edges = next.nextEdges ?? []
},
updateNodeDimensions({ id, nodeElement, forceUpdate }) {
const i = this.nodes.map((x) => x.id).indexOf(id)

5
src/types/edge.ts
View File

@@ -1,5 +1,6 @@
import { Component, CSSProperties, DefineComponent } from 'vue'
import { ArrowHeadType, ElementId, Position } from './flow'
import { EdgeTextProps } from '~/types/components'
export interface Edge<T = any> {
id: ElementId
@@ -14,8 +15,8 @@ export interface Edge<T = any> {
label?:
| string
| {
component: Component | DefineComponent
props?: Record<string, any>
component: DefineComponent<EdgeTextProps>
props?: EdgeTextProps
}
labelStyle?: any
labelShowBg?: boolean

2
src/types/node.ts
View File

@@ -2,7 +2,7 @@ import { Component, CSSProperties, DefineComponent } from 'vue'
import { XYPosition, ElementId, Position } from './flow'
import { HandleElement } from './components'
interface VFInternals {
export interface VFInternals {
position: XYPosition
isDragging?: boolean
width: number

6
src/utils/store.ts
View File

@@ -114,11 +114,7 @@ export const parseElements = async (elements: Elements, nodes: GraphNode[], edge
...storeNode,
...element,
}
if (!updatedNode.__vf) updatedNode.__vf = {} as any
if (storeNode.position.x !== element.position.x || storeNode.position.y !== element.position.y) {
updatedNode.__vf!.position = element.position
}
updatedNode.__vf!.position = element.position
if (typeof element.type !== 'undefined' && element.type !== storeNode.type) {
// we reset the elements dimensions here in order to force a re-calculation of the bounds.

6
src/workers/parseElements.ts
View File

@@ -49,11 +49,7 @@ export default () =>
if (storeNode) {
const updatedNode = Object.assign(storeNode, element)
if (!updatedNode.__vf) updatedNode.__vf = {} as any
if (storeNode.position.x !== element.position.x || storeNode.position.y !== element.position.y) {
updatedNode.__vf!.position = element.position
}
updatedNode.__vf!.position = element.position
if (typeof element.type !== 'undefined' && element.type !== storeNode.type) {
// we reset the elements dimensions here in order to force a re-calculation of the bounds.

5
yarn.lock
View File

@@ -1974,11 +1974,6 @@ define-properties@^1.1.3:
dependencies:
object-keys "^1.0.12"
defu@^5.0.0:
version "5.0.0"
resolved "https://registry.yarnpkg.com/defu/-/defu-5.0.0.tgz#5768f0d402a555bfc4c267246b20f82ce8b5a10b"
integrity sha512-VHg73EDeRXlu7oYWRmmrNp/nl7QkdXUxkQQKig0Zk8daNmm84AbGoC8Be6/VVLJEKxn12hR0UBmz8O+xQiAPKQ==
del@^6.0.0:
version "6.0.0"
resolved "https://registry.yarnpkg.com/del/-/del-6.0.0.tgz#0b40d0332cea743f1614f818be4feb717714c952"