Skip to content

Commit 282a763

Browse files
bcakmakoglubcakmakoglu
committed
refactor(core): align node type(s) with xyflow system
Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
1 parent d465d1b commit 282a763

File tree

27 files changed

+341
-795
lines changed

27 files changed

+341
-795
lines changed

‎packages/core/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@
7373
"@vueuse/core": "^10.5.0",
7474
"d3-drag": "^3.0.0",
7575
"d3-selection": "^3.0.0",
76-
"@xyflow/system": "^0.0.37"
76+
"@xyflow/system": "^0.0.73"
7777
},
7878
"devDependencies": {
7979
"@rollup/plugin-replace": "^5.0.3",

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const EdgeWrapper = defineComponent({
3838

3939
const edge = computed(() => findEdge(props.id)!)
4040

41-
const hooks = useEdgeHooks(edge.value, emits)
41+
const hooks = useEdgeHooks(emits)
4242

4343
const slots = inject(Slots)
4444

@@ -219,7 +219,6 @@ const EdgeWrapper = defineComponent({
219219
labelBgPadding: edge.value.labelBgPadding,
220220
labelBgBorderRadius: edge.value.labelBgBorderRadius,
221221
data: edge.value.data,
222-
events: { ...edge.value.events, ...hooks.on },
223222
style: edgeStyle.value,
224223
markerStart: `url('#${getMarkerId(edge.value.markerStart, vueFlowId)}')`,
225224
markerEnd: `url('#${getMarkerId(edge.value.markerEnd, vueFlowId)}')`,

‎packages/core/src/components/Handle/Handle.vue‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { isDef } from '../../utils'
88
99
const {
1010
position = Position.Top,
11-
connectable = undefined,
11+
isConnectable = undefined,
1212
connectableStart = true,
1313
connectableEnd = true,
1414
id: handleId = null,
@@ -61,8 +61,8 @@ const { handlePointerDown, handleClick } = useHandle({
6161
type,
6262
})
6363
64-
const isConnectable = computed(() => {
65-
if (typeof connectable === 'string' && connectable === 'single') {
64+
const isHandleConnectable = computed(() => {
65+
if (typeof isConnectable === 'string' && isConnectable === 'single') {
6666
return !connectedEdges.value.some((edge) => {
6767
const id = edge[`${type.value}Handle`]
6868
@@ -74,7 +74,7 @@ const isConnectable = computed(() => {
7474
})
7575
}
7676
77-
if (typeof connectable === 'number') {
77+
if (typeof isConnectable === 'number') {
7878
return (
7979
connectedEdges.value.filter((edge) => {
8080
const id = edge[`${type.value}Handle`]
@@ -84,15 +84,15 @@ const isConnectable = computed(() => {
8484
}
8585
8686
return id ? id === handleId : true
87-
}).length < connectable
87+
}).length < isConnectable
8888
)
8989
}
9090
91-
if (typeof connectable === 'function') {
92-
return connectable(node, connectedEdges.value)
91+
if (typeof isConnectable === 'function') {
92+
return isConnectable(node, connectedEdges.value)
9393
}
9494
95-
return isDef(connectable) ? connectable : nodesConnectable.value
95+
return isDef(isConnectable) ? isConnectable : nodesConnectable.value
9696
})
9797
9898
// todo: remove this and have users handle this themselves using `updateNodeInternals`
@@ -145,7 +145,7 @@ onUnmounted(() => {
145145
function onPointerDown(event: MouseEvent | TouchEvent) {
146146
const isMouseTriggered = isMouseEvent(event)
147147
148-
if (isConnectable.value && isConnectableStart.value && ((isMouseTriggered && event.button === 0) || !isMouseTriggered)) {
148+
if (isHandleConnectable.value && isConnectableStart.value && ((isMouseTriggered && event.button === 0) || !isMouseTriggered)) {
149149
handlePointerDown(event)
150150
}
151151
}
@@ -155,7 +155,7 @@ function onClick(event: MouseEvent) {
155155
return
156156
}
157157
158-
if (isConnectable.value) {
158+
if (isHandleConnectable.value) {
159159
handleClick(event)
160160
}
161161
}

‎packages/core/src/components/Nodes/DefaultNode.ts‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,25 @@
11
import type { Component, FunctionalComponent } from 'vue'
22
import { h } from 'vue'
33
import Handle from '../Handle/Handle.vue'
4-
import type { NodeProps } from '../../types'
4+
import type { BuiltInNode, NodeProps } from '../../types'
55
import { Position } from '../../types'
66

7-
const DefaultNode: FunctionalComponent<NodeProps<{ label: any }>> = function ({
7+
const DefaultNode: FunctionalComponent<NodeProps<BuiltInNode>> = function ({
88
sourcePosition = Position.Bottom,
99
targetPosition = Position.Top,
10-
label: _label,
11-
connectable = true,
12-
isValidTargetPos,
13-
isValidSourcePos,
10+
isConnectable = true,
1411
data,
1512
}) {
16-
const label = data.label || _label
13+
const label = data.label
1714

1815
return [
19-
h(Handle as Component, { type: 'target', position: targetPosition, connectable, isValidConnection: isValidTargetPos }),
16+
h(Handle as Component, { type: 'target', position: targetPosition, isConnectable }),
2017
typeof label !== 'string' && label ? h(label) : h('div', { innerHTML: label }),
21-
h(Handle as Component, { type: 'source', position: sourcePosition, connectable, isValidConnection: isValidSourcePos }),
18+
h(Handle as Component, { type: 'source', position: sourcePosition, isConnectable }),
2219
]
2320
}
2421

25-
DefaultNode.props = ['sourcePosition', 'targetPosition', 'label', 'isValidTargetPos', 'isValidSourcePos', 'connectable', 'data']
22+
DefaultNode.props = ['sourcePosition', 'targetPosition', 'isConnectable', 'data']
2623
DefaultNode.inheritAttrs = false
2724
DefaultNode.compatConfig = { MODE: 3 }
2825

‎packages/core/src/components/Nodes/InputNode.ts‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,16 @@ import Handle from '../Handle/Handle.vue'
44
import type { NodeProps } from '../../types'
55
import { Position } from '../../types'
66

7-
const InputNode: FunctionalComponent<NodeProps<{ label: any }>> = function ({
8-
sourcePosition = Position.Bottom,
9-
label: _label,
10-
connectable = true,
11-
isValidSourcePos,
12-
data,
13-
}) {
14-
const label = data.label || _label
7+
const InputNode: FunctionalComponent<NodeProps> = function ({ sourcePosition = Position.Bottom, isConnectable = true, data }) {
8+
const label = data.label
159

1610
return [
1711
typeof label !== 'string' && label ? h(label) : h('div', { innerHTML: label }),
18-
h(Handle as Component, { type: 'source', position: sourcePosition, connectable, isValidConnection: isValidSourcePos }),
12+
h(Handle as Component, { type: 'source', position: sourcePosition, isConnectable }),
1913
]
2014
}
2115

22-
InputNode.props = ['sourcePosition', 'label', 'isValidSourcePos', 'connectable', 'data']
16+
InputNode.props = ['sourcePosition', 'isConnectable', 'data']
2317
InputNode.inheritAttrs = false
2418
InputNode.compatConfig = { MODE: 3 }
2519

‎packages/core/src/components/Nodes/NodeWrapper.ts‎

Lines changed: 32 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ import {
2525
} from '../../utils'
2626
import { NodeId, NodeRef, Slots } from '../../context'
2727
import { isInputDOMNode, useDrag, useNode, useNodeHooks, useUpdateNodePositions, useVueFlow } from '../../composables'
28-
import type { NodeComponent } from '../../types'
28+
import type { BuiltInNode, NodeComponent } from '../../types'
2929

3030
interface Props {
3131
id: string
@@ -36,7 +36,7 @@ const NodeWrapper = defineComponent({
3636
name: 'Node',
3737
compatConfig: { MODE: 3 },
3838
props: ['id', 'resizeObserver'],
39-
setup(props: Props) {
39+
setup<NodeType extends Node>(props: Props) {
4040
const {
4141
id: vueFlowId,
4242
noPanClassName,
@@ -92,7 +92,7 @@ const NodeWrapper = defineComponent({
9292
return slot
9393
}
9494

95-
let nodeType = node.template || getNodeTypes.value[name]
95+
let nodeType = getNodeTypes.value[name]
9696

9797
if (typeof nodeType === 'string') {
9898
if (instance) {
@@ -112,7 +112,7 @@ const NodeWrapper = defineComponent({
112112
return false
113113
})
114114

115-
const { emit, on } = useNodeHooks(node, emits)
115+
const { emit } = useNodeHooks(emits)
116116

117117
const dragging = useDrag({
118118
id: props.id,
@@ -139,15 +139,15 @@ const NodeWrapper = defineComponent({
139139
const getStyle = computed(() => {
140140
const styles = (node.style instanceof Function ? node.style(node) : node.style) || {}
141141

142-
const width = node.width instanceof Function ? node.width(node) : node.width
143-
const height = node.height instanceof Function ? node.height(node) : node.height
142+
const width = node.width
143+
const height = node.height
144144

145145
if (width) {
146-
styles.width = typeof width === 'string' ? width : `${width}px`
146+
styles.width = `${width}px`
147147
}
148148

149149
if (height) {
150-
styles.height = typeof height === 'string' ? height : `${height}px`
150+
styles.height = `${height}px`
151151
}
152152

153153
return styles
@@ -228,7 +228,7 @@ const NodeWrapper = defineComponent({
228228
// if extent is parent, we need dimensions to properly clamp the position
229229
if (
230230
node.extent === 'parent' ||
231-
(typeof node.extent === 'object' && 'range' in node.extent && node.extent.range === 'parent')
231+
(!!node.extent && typeof node.extent === 'object' && 'range' in node.extent && node.extent.range === 'parent')
232232
) {
233233
until(() => isInit)
234234
.toBe(true)
@@ -282,28 +282,29 @@ const NodeWrapper = defineComponent({
282282
'onKeydown': onKeyDown,
283283
},
284284
[
285-
h(nodeCmp.value === false ? getNodeTypes.value.default : (nodeCmp.value as any), {
286-
id: node.id,
287-
type: node.type,
288-
data: node.data,
289-
events: { ...node.events, ...on },
290-
selected: node.selected,
291-
resizing: node.resizing,
292-
dragging: dragging.value,
293-
connectable: isConnectable.value,
294-
position: node.computedPosition,
295-
dimensions: node.dimensions,
296-
isValidTargetPos: node.isValidTargetPos,
297-
isValidSourcePos: node.isValidSourcePos,
298-
parent: node.parentNode,
299-
parentNodeId: node.parentNode,
300-
zIndex: node.computedPosition.z ?? zIndex.value,
301-
targetPosition: node.targetPosition,
302-
sourcePosition: node.sourcePosition,
303-
label: node.label,
304-
dragHandle: node.dragHandle,
305-
onUpdateNodeInternals: updateInternals,
306-
}),
285+
h(
286+
nodeCmp.value === false
287+
? (getNodeTypes.value.default as NodeComponent<BuiltInNode>)
288+
: (nodeCmp.value as NodeComponent<NodeType>),
289+
{
290+
id: node.id,
291+
type: node.type,
292+
data: node.data,
293+
selected: node.selected,
294+
resizing: node.resizing,
295+
dragging: dragging.value,
296+
connectable: isConnectable.value,
297+
position: node.computedPosition,
298+
dimensions: node.dimensions,
299+
parent: node.parentNode,
300+
parentNodeId: node.parentNode,
301+
zIndex: node.computedPosition.z ?? zIndex.value,
302+
targetPosition: node.targetPosition,
303+
sourcePosition: node.sourcePosition,
304+
dragHandle: node.dragHandle,
305+
onUpdateNodeInternals: updateInternals,
306+
},
307+
),
307308
],
308309
)
309310
}

‎packages/core/src/components/Nodes/OutputNode.ts‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,23 @@
11
import type { Component, FunctionalComponent } from 'vue'
22
import { h } from 'vue'
33
import Handle from '../Handle/Handle.vue'
4-
import type { NodeProps } from '../../types'
4+
import type { BuiltInNode, NodeProps } from '../../types'
55
import { Position } from '../../types'
66

7-
const OutputNode: FunctionalComponent<NodeProps<{ label: any }>> = function ({
7+
const OutputNode: FunctionalComponent<NodeProps<BuiltInNode>> = function ({
88
targetPosition = Position.Top,
9-
label: _label,
10-
connectable = true,
11-
isValidTargetPos,
9+
isConnectable,
1210
data,
1311
}) {
14-
const label = data.label || _label
12+
const label = data.label
1513

1614
return [
17-
h(Handle as Component, { type: 'target', position: targetPosition, connectable, isValidConnection: isValidTargetPos }),
15+
h(Handle as Component, { type: 'target', position: targetPosition, isConnectable }),
1816
typeof label !== 'string' && label ? h(label) : h('div', { innerHTML: label }),
1917
]
2018
}
2119

22-
OutputNode.props = ['targetPosition', 'label', 'isValidTargetPos', 'connectable', 'data']
20+
OutputNode.props = ['targetPosition', 'isConnectable', 'data']
2321
OutputNode.inheritAttrs = false
2422
OutputNode.compatConfig = { MODE: 3 }
2523

‎packages/core/src/composables/useEdgeHooks.ts‎

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { EdgeEventsEmit, EdgeEventsOn, GraphEdge, VueFlowStore } from '../types'
1+
import type { EdgeEventsEmit, EdgeEventsOn, VueFlowStore } from '../types'
22
import { createExtendedEventHook } from '../utils'
33

44
function createEdgeHooks() {
@@ -20,52 +20,43 @@ function createEdgeHooks() {
2020
*
2121
* @internal
2222
*/
23-
export function useEdgeHooks(edge: GraphEdge, emits: VueFlowStore['emits']): { emit: EdgeEventsEmit; on: EdgeEventsOn } {
23+
export function useEdgeHooks(emits: VueFlowStore['emits']): { emit: EdgeEventsEmit; on: EdgeEventsOn } {
2424
const edgeHooks = createEdgeHooks()
2525

2626
edgeHooks.doubleClick.on((event) => {
2727
emits.edgeDoubleClick(event)
28-
edge.events?.doubleClick?.(event)
2928
})
3029

3130
edgeHooks.click.on((event) => {
3231
emits.edgeClick(event)
33-
edge.events?.click?.(event)
3432
})
3533

3634
edgeHooks.mouseEnter.on((event) => {
3735
emits.edgeMouseEnter(event)
38-
edge.events?.mouseEnter?.(event)
3936
})
4037

4138
edgeHooks.mouseMove.on((event) => {
4239
emits.edgeMouseMove(event)
43-
edge.events?.mouseMove?.(event)
4440
})
4541

4642
edgeHooks.mouseLeave.on((event) => {
4743
emits.edgeMouseLeave(event)
48-
edge.events?.mouseLeave?.(event)
4944
})
5045

5146
edgeHooks.contextMenu.on((event) => {
5247
emits.edgeContextMenu(event)
53-
edge.events?.contextMenu?.(event)
5448
})
5549

5650
edgeHooks.updateStart.on((event) => {
5751
emits.edgeUpdateStart(event)
58-
edge.events?.updateStart?.(event)
5952
})
6053

6154
edgeHooks.update.on((event) => {
6255
emits.edgeUpdate(event)
63-
edge.events?.update?.(event)
6456
})
6557

6658
edgeHooks.updateEnd.on((event) => {
6759
emits.edgeUpdateEnd(event)
68-
edge.events?.updateEnd?.(event)
6960
})
7061

7162
return Object.entries(edgeHooks).reduce(

0 commit comments

Comments
 (0)