Skip to content

Commit faf67c2

Browse files
bcakmakoglubcakmakoglu
committed
fix(core): use computed edge ref
1 parent 876b71d commit faf67c2

File tree

2 files changed

+78
-73
lines changed

2 files changed

+78
-73
lines changed

‎packages/core/src/components/Edges/EdgeWrapper.ts

Lines changed: 64 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { computed, defineComponent, getCurrentInstance, h, inject, provide, ref, resolveComponent, toRef } from 'vue'
22
import type { Connection, EdgeComponent, HandleType, MouseTouchEvent } from '../../types'
33
import { ConnectionMode, Position } from '../../types'
4-
import { useEdge, useEdgeHooks, useHandle, useVueFlow } from '../../composables'
4+
import { useEdgeHooks, useHandle, useVueFlow } from '../../composables'
55
import { EdgeId, EdgeRef, Slots } from '../../context'
66
import {
77
ARIA_EDGE_DESC_KEY,
@@ -43,9 +43,9 @@ const EdgeWrapper = defineComponent({
4343
edgesFocusable,
4444
} = useVueFlow()
4545

46-
const { edge } = useEdge(props.id)
46+
const edge = computed(() => findEdge(props.id)!)
4747

48-
const hooks = useEdgeHooks(edge, emits)
48+
const hooks = useEdgeHooks(edge.value, emits)
4949

5050
const slots = inject(Slots)
5151

@@ -63,27 +63,29 @@ const EdgeWrapper = defineComponent({
6363

6464
const edgeEl = ref<SVGElement | null>(null)
6565

66-
const isSelectable = toRef(() => (typeof edge.selectable === 'undefined' ? elementsSelectable.value : edge.selectable))
66+
const isSelectable = toRef(() =>
67+
typeof edge.value.selectable === 'undefined' ? elementsSelectable.value : edge.value.selectable,
68+
)
6769

68-
const isUpdatable = toRef(() => (typeof edge.updatable === 'undefined' ? edgesUpdatable.value : edge.updatable))
70+
const isUpdatable = toRef(() => (typeof edge.value.updatable === 'undefined' ? edgesUpdatable.value : edge.value.updatable))
6971

70-
const isFocusable = toRef(() => (typeof edge.focusable === 'undefined' ? edgesFocusable.value : edge.focusable))
72+
const isFocusable = toRef(() => (typeof edge.value.focusable === 'undefined' ? edgesFocusable.value : edge.value.focusable))
7173

7274
provide(EdgeId, props.id)
7375
provide(EdgeRef, edgeEl)
7476

75-
const edgeClass = computed(() => (edge.class instanceof Function ? edge.class(edge) : edge.class))
76-
const edgeStyle = computed(() => (edge.style instanceof Function ? edge.style(edge) : edge.style))
77+
const edgeClass = computed(() => (edge.value.class instanceof Function ? edge.value.class(edge.value) : edge.value.class))
78+
const edgeStyle = computed(() => (edge.value.style instanceof Function ? edge.value.style(edge.value) : edge.value.style))
7779

7880
const edgeCmp = computed(() => {
79-
const name = edge.type || 'default'
81+
const name = edge.value.type || 'default'
8082

8183
const slot = slots?.[`edge-${name}`]
8284
if (slot) {
8385
return slot
8486
}
8587

86-
let edgeType = edge.template ?? getEdgeTypes.value[name]
88+
let edgeType = edge.value.template ?? getEdgeTypes.value[name]
8789

8890
if (typeof edgeType === 'string') {
8991
if (instance) {
@@ -114,29 +116,29 @@ const EdgeWrapper = defineComponent({
114116
})
115117

116118
return () => {
117-
const sourceNode = findNode(edge.source)
118-
const targetNode = findNode(edge.target)
119-
const pathOptions = 'pathOptions' in edge ? edge.pathOptions : {}
119+
const sourceNode = findNode(edge.value.source)
120+
const targetNode = findNode(edge.value.target)
121+
const pathOptions = 'pathOptions' in edge.value ? edge.value.pathOptions : {}
120122

121123
if (!sourceNode && !targetNode) {
122-
emits.error(new VueFlowError(ErrorCode.EDGE_SOURCE_TARGET_MISSING, edge.id, edge.source, edge.target))
124+
emits.error(new VueFlowError(ErrorCode.EDGE_SOURCE_TARGET_MISSING, edge.value.id, edge.value.source, edge.value.target))
123125

124126
return null
125127
}
126128

127129
if (!sourceNode) {
128-
emits.error(new VueFlowError(ErrorCode.EDGE_SOURCE_MISSING, edge.id, edge.source))
130+
emits.error(new VueFlowError(ErrorCode.EDGE_SOURCE_MISSING, edge.value.id, edge.value.source))
129131

130132
return null
131133
}
132134

133135
if (!targetNode) {
134-
emits.error(new VueFlowError(ErrorCode.EDGE_TARGET_MISSING, edge.id, edge.target))
136+
emits.error(new VueFlowError(ErrorCode.EDGE_TARGET_MISSING, edge.value.id, edge.value.target))
135137

136138
return null
137139
}
138140

139-
if (!edge || edge.hidden || sourceNode.hidden || targetNode.hidden) {
141+
if (!edge.value || edge.value.hidden || sourceNode.hidden || targetNode.hidden) {
140142
return null
141143
}
142144

@@ -147,7 +149,7 @@ const EdgeWrapper = defineComponent({
147149
sourceNodeHandles = [...(sourceNode.handleBounds.source || []), ...(sourceNode.handleBounds.target || [])]
148150
}
149151

150-
const sourceHandle = getHandle(sourceNodeHandles, edge.sourceHandle)
152+
const sourceHandle = getHandle(sourceNodeHandles, edge.value.sourceHandle)
151153

152154
let targetNodeHandles
153155
if (connectionMode.value === ConnectionMode.Strict) {
@@ -156,7 +158,7 @@ const EdgeWrapper = defineComponent({
156158
targetNodeHandles = [...(targetNode.handleBounds.target || []), ...(targetNode.handleBounds.source || [])]
157159
}
158160

159-
const targetHandle = getHandle(targetNodeHandles, edge.targetHandle)
161+
const targetHandle = getHandle(targetNodeHandles, edge.value.targetHandle)
160162

161163
const sourcePosition = sourceHandle ? sourceHandle.position : Position.Bottom
162164

@@ -171,10 +173,10 @@ const EdgeWrapper = defineComponent({
171173
targetPosition,
172174
)
173175

174-
edge.sourceX = sourceX
175-
edge.sourceY = sourceY
176-
edge.targetX = targetX
177-
edge.targetY = targetY
176+
edge.value.sourceX = sourceX
177+
edge.value.sourceY = sourceY
178+
edge.value.targetX = targetX
179+
edge.value.targetY = targetY
178180

179181
return h(
180182
'g',
@@ -184,13 +186,13 @@ const EdgeWrapper = defineComponent({
184186
'data-id': props.id,
185187
'class': [
186188
'vue-flow__edge',
187-
`vue-flow__edge-${edgeCmp.value === false ? 'default' : edge.type || 'default'}`,
189+
`vue-flow__edge-${edgeCmp.value === false ? 'default' : edge.value.type || 'default'}`,
188190
noPanClassName.value,
189191
edgeClass.value,
190192
{
191193
updating: mouseOver.value,
192-
selected: edge.selected,
193-
animated: edge.animated,
194+
selected: edge.value.selected,
195+
animated: edge.value.animated,
194196
inactive: !isSelectable.value,
195197
},
196198
],
@@ -202,7 +204,10 @@ const EdgeWrapper = defineComponent({
202204
'onMouseleave': onEdgeMouseLeave,
203205
'onKeyDown': isFocusable.value ? onKeyDown : undefined,
204206
'tabIndex': isFocusable.value ? 0 : undefined,
205-
'aria-label': edge.ariaLabel === null ? undefined : edge.ariaLabel || `Edge from ${edge.source} to ${edge.target}`,
207+
'aria-label':
208+
edge.value.ariaLabel === null
209+
? undefined
210+
: edge.value.ariaLabel || `Edge from ${edge.value.source} to ${edge.value.target}`,
206211
'aria-describedby': isFocusable.value ? `${ARIA_EDGE_DESC_KEY}-${vueFlowId}` : undefined,
207212
'role': isFocusable.value ? 'button' : 'img',
208213
},
@@ -213,32 +218,32 @@ const EdgeWrapper = defineComponent({
213218
id: props.id,
214219
sourceNode,
215220
targetNode,
216-
source: edge.source,
217-
target: edge.target,
218-
type: edge.type,
221+
source: edge.value.source,
222+
target: edge.value.target,
223+
type: edge.value.type,
219224
updatable: isUpdatable.value,
220-
selected: edge.selected,
221-
animated: edge.animated,
222-
label: edge.label,
223-
labelStyle: edge.labelStyle,
224-
labelShowBg: edge.labelShowBg,
225-
labelBgStyle: edge.labelBgStyle,
226-
labelBgPadding: edge.labelBgPadding,
227-
labelBgBorderRadius: edge.labelBgBorderRadius,
228-
data: edge.data,
229-
events: { ...edge.events, ...hooks.on },
225+
selected: edge.value.selected,
226+
animated: edge.value.animated,
227+
label: edge.value.label,
228+
labelStyle: edge.value.labelStyle,
229+
labelShowBg: edge.value.labelShowBg,
230+
labelBgStyle: edge.value.labelBgStyle,
231+
labelBgPadding: edge.value.labelBgPadding,
232+
labelBgBorderRadius: edge.value.labelBgBorderRadius,
233+
data: edge.value.data,
234+
events: { ...edge.value.events, ...hooks.on },
230235
style: edgeStyle.value,
231-
markerStart: `url('#${getMarkerId(edge.markerStart, vueFlowId)}')`,
232-
markerEnd: `url('#${getMarkerId(edge.markerEnd, vueFlowId)}')`,
236+
markerStart: `url('#${getMarkerId(edge.value.markerStart, vueFlowId)}')`,
237+
markerEnd: `url('#${getMarkerId(edge.value.markerEnd, vueFlowId)}')`,
233238
sourcePosition,
234239
targetPosition,
235240
sourceX,
236241
sourceY,
237242
targetX,
238243
targetY,
239-
sourceHandleId: edge.sourceHandle,
240-
targetHandleId: edge.targetHandle,
241-
interactionWidth: edge.interactionWidth,
244+
sourceHandleId: edge.value.sourceHandle,
245+
targetHandleId: edge.value.targetHandle,
246+
interactionWidth: edge.value.interactionWidth,
242247
...pathOptions,
243248
}),
244249
[
@@ -296,11 +301,11 @@ const EdgeWrapper = defineComponent({
296301
}
297302

298303
function onEdgeUpdate(event: MouseTouchEvent, connection: Connection) {
299-
hooks.emit.update({ event, edge, connection })
304+
hooks.emit.update({ event, edge: edge.value, connection })
300305
}
301306

302307
function onEdgeUpdateEnd(event: MouseTouchEvent) {
303-
hooks.emit.updateEnd({ event, edge })
308+
hooks.emit.updateEnd({ event, edge: edge.value })
304309
updating.value = false
305310
}
306311

@@ -311,52 +316,52 @@ const EdgeWrapper = defineComponent({
311316

312317
updating.value = true
313318

314-
nodeId.value = isSourceHandle ? edge.target : edge.source
315-
handleId.value = (isSourceHandle ? edge.targetHandle : edge.sourceHandle) ?? ''
319+
nodeId.value = isSourceHandle ? edge.value.target : edge.value.source
320+
handleId.value = (isSourceHandle ? edge.value.targetHandle : edge.value.sourceHandle) ?? ''
316321

317322
edgeUpdaterType.value = isSourceHandle ? 'target' : 'source'
318323

319-
hooks.emit.updateStart({ event, edge })
324+
hooks.emit.updateStart({ event, edge: edge.value })
320325

321326
handlePointerDown(event)
322327
}
323328

324329
function onEdgeClick(event: MouseEvent) {
325-
const data = { event, edge }
330+
const data = { event, edge: edge.value }
326331

327332
if (isSelectable.value) {
328333
nodesSelectionActive.value = false
329334

330-
if (edge.selected && multiSelectionActive.value) {
331-
removeSelectedEdges([edge])
335+
if (edge.value.selected && multiSelectionActive.value) {
336+
removeSelectedEdges([edge.value])
332337

333338
edgeEl.value?.blur()
334339
} else {
335-
addSelectedEdges([edge])
340+
addSelectedEdges([edge.value])
336341
}
337342
}
338343

339344
hooks.emit.click(data)
340345
}
341346

342347
function onEdgeContextMenu(event: MouseEvent) {
343-
hooks.emit.contextMenu({ event, edge })
348+
hooks.emit.contextMenu({ event, edge: edge.value })
344349
}
345350

346351
function onDoubleClick(event: MouseEvent) {
347-
hooks.emit.doubleClick({ event, edge })
352+
hooks.emit.doubleClick({ event, edge: edge.value })
348353
}
349354

350355
function onEdgeMouseEnter(event: MouseEvent) {
351-
hooks.emit.mouseEnter({ event, edge })
356+
hooks.emit.mouseEnter({ event, edge: edge.value })
352357
}
353358

354359
function onEdgeMouseMove(event: MouseEvent) {
355-
hooks.emit.mouseMove({ event, edge })
360+
hooks.emit.mouseMove({ event, edge: edge.value })
356361
}
357362

358363
function onEdgeMouseLeave(event: MouseEvent) {
359-
hooks.emit.mouseLeave({ event, edge })
364+
hooks.emit.mouseLeave({ event, edge: edge.value })
360365
}
361366

362367
function onEdgeUpdaterSourceMouseDown(event: MouseEvent) {

‎packages/core/src/container/EdgeRenderer/EdgeRenderer.vue

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { useVueFlow } from '../../composables'
55
import { getEdgeZIndex } from '../../utils'
66
import MarkerDefinitions from './MarkerDefinitions.vue'
77
8-
const { findNode, getEdges, elevateEdgesOnSelect, dimensions } = useVueFlow()
8+
const { findNode, getEdges, elevateEdgesOnSelect } = useVueFlow()
99
</script>
1010

1111
<script lang="ts">
@@ -16,19 +16,19 @@ export default {
1616
</script>
1717

1818
<template>
19-
<template v-if="dimensions.width && dimensions.height">
20-
<MarkerDefinitions />
19+
<MarkerDefinitions />
2120

22-
<svg
23-
v-for="edge of getEdges"
24-
:key="edge.id"
25-
v-memo="[edge.id]"
26-
class="vue-flow__edges vue-flow__container"
27-
:style="{ zIndex: getEdgeZIndex(edge, findNode, elevateEdgesOnSelect) }"
28-
>
29-
<EdgeWrapper :id="edge.id" />
30-
</svg>
21+
{{ getEdges.map((e) => !!e.hidden) }}
3122

32-
<ConnectionLine />
33-
</template>
23+
<svg
24+
v-for="edge of getEdges"
25+
:key="edge.id"
26+
v-memo="[edge.id]"
27+
class="vue-flow__edges vue-flow__container"
28+
:style="{ zIndex: getEdgeZIndex(edge, findNode, elevateEdgesOnSelect) }"
29+
>
30+
<EdgeWrapper :id="edge.id" />
31+
</svg>
32+
33+
<ConnectionLine />
3434
</template>

0 commit comments

Comments
 (0)