Skip to content

Commit 5f3ae69

Browse files
bcakmakoglubcakmakoglu
committed
refactor(core): replace types in NodeWrapper and default nodes
Signed-off-by: braks <[email protected]>
1 parent 8ff8060 commit 5f3ae69

File tree

6 files changed

+74
-90
lines changed

6 files changed

+74
-90
lines changed

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

+7-10
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 { Node, NodeProps } from '../../types'
55
import { Position } from '../../types'
66

7-
const DefaultNode: FunctionalComponent<NodeProps<{ label: any }>> = function ({
7+
const DefaultNode: FunctionalComponent<NodeProps<Node<{ label: any }, 'default'>>> = 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

+6-8
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 { Node, NodeProps } from '../../types'
55
import { Position } from '../../types'
66

7-
const InputNode: FunctionalComponent<NodeProps<{ label: any }>> = function ({
7+
const InputNode: FunctionalComponent<NodeProps<Node<{ label: any }, 'input'>>> = function ({
88
sourcePosition = Position.Bottom,
9-
label: _label,
10-
connectable = true,
11-
isValidSourcePos,
9+
isConnectable = true,
1210
data,
1311
}) {
14-
const label = data.label || _label
12+
const label = data.label
1513

1614
return [
1715
typeof label !== 'string' && label ? h(label) : h('div', { innerHTML: label }),
18-
h(Handle as Component, { type: 'source', position: sourcePosition, connectable, isValidConnection: isValidSourcePos }),
16+
h(Handle as Component, { type: 'source', position: sourcePosition, isConnectable }),
1917
]
2018
}
2119

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

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

+48-59
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ const NodeWrapper = defineComponent({
8282

8383
const isFocusable = toRef(() => (typeof node.focusable === 'undefined' ? nodesFocusable.value : node.focusable))
8484

85-
const isInit = toRef(() => !!node.dimensions.width && !!node.dimensions.height)
85+
const isInit = toRef(() => !!node.measured.width && !!node.measured.height)
8686

8787
const nodeCmp = computed(() => {
8888
const name = node.type || 'default'
@@ -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(node, emits)
116116

117117
const dragging = useDrag({
118118
id: props.id,
@@ -134,26 +134,7 @@ const NodeWrapper = defineComponent({
134134
},
135135
})
136136

137-
const getClass = computed(() => (node.class instanceof Function ? node.class(node) : node.class))
138-
139-
const getStyle = computed(() => {
140-
const styles = (node.style instanceof Function ? node.style(node) : node.style) || {}
141-
142-
const width = node.width instanceof Function ? node.width(node) : node.width
143-
const height = node.height instanceof Function ? node.height(node) : node.height
144-
145-
if (width) {
146-
styles.width = typeof width === 'string' ? width : `${width}px`
147-
}
148-
149-
if (height) {
150-
styles.height = typeof height === 'string' ? height : `${height}px`
151-
}
152-
153-
return styles
154-
})
155-
156-
const zIndex = toRef(() => Number(node.zIndex ?? getStyle.value.zIndex ?? 0))
137+
const zIndex = toRef(() => Number(node.zIndex ?? node.style?.zIndex ?? 0))
157138

158139
onUpdateNodeInternals((updateIds) => {
159140
// when no ids are passed, update all nodes
@@ -191,27 +172,38 @@ const NodeWrapper = defineComponent({
191172
[
192173
() => node.position.x,
193174
() => node.position.y,
194-
() => parentNode.value?.computedPosition.x,
195-
() => parentNode.value?.computedPosition.y,
196-
() => parentNode.value?.computedPosition.z,
175+
() => parentNode.value?.internals.positionAbsolute.x,
176+
() => parentNode.value?.internals.positionAbsolute.y,
177+
() => parentNode.value?.internals.z,
197178
zIndex,
198179
() => node.selected,
199-
() => node.dimensions.height,
200-
() => node.dimensions.width,
201-
() => parentNode.value?.dimensions.height,
202-
() => parentNode.value?.dimensions.width,
180+
() => node.measured.height,
181+
() => node.measured.width,
182+
() => parentNode.value?.measured.height,
183+
() => parentNode.value?.measured.width,
203184
],
204185
([newX, newY, parentX, parentY, parentZ, nodeZIndex]) => {
205-
const xyzPos = {
206-
x: newX,
207-
y: newY,
208-
z: nodeZIndex + (elevateNodesOnSelect.value ? (node.selected ? 1000 : 0) : 0),
209-
}
186+
const nextZ = nodeZIndex + (elevateNodesOnSelect.value ? (node.selected ? 1000 : 0) : 0)
210187

211188
if (typeof parentX !== 'undefined' && typeof parentY !== 'undefined') {
212-
node.computedPosition = getXYZPos({ x: parentX, y: parentY, z: parentZ! }, xyzPos)
189+
const {
190+
x: absoluteX,
191+
y: absoluteY,
192+
z,
193+
} = getXYZPos(
194+
{ x: parentX, y: parentY, z: parentZ! },
195+
{
196+
x: newX,
197+
y: newY,
198+
z: nextZ,
199+
},
200+
)
201+
202+
node.internals.positionAbsolute = { x: absoluteX, y: absoluteY }
203+
node.internals.z = z
213204
} else {
214-
node.computedPosition = xyzPos
205+
node.internals.positionAbsolute = { x: newX, y: newY }
206+
node.internals.z = nextZ
215207
}
216208
},
217209
{ flush: 'post', immediate: true },
@@ -258,17 +250,18 @@ const NodeWrapper = defineComponent({
258250
draggable: isDraggable.value,
259251
selected: node.selected,
260252
selectable: isSelectable.value,
261-
parent: node.isParent,
262253
},
263-
getClass.value,
254+
node.class,
255+
],
256+
'style': [
257+
{
258+
visibility: isInit.value ? 'visible' : 'hidden',
259+
zIndex: node.internals.z ?? zIndex.value,
260+
transform: `translate(${node.internals.positionAbsolute.x}px,${node.internals.positionAbsolute.y}px)`,
261+
pointerEvents: isSelectable.value || isDraggable.value ? 'all' : 'none',
262+
},
263+
node.style,
264264
],
265-
'style': {
266-
visibility: isInit.value ? 'visible' : 'hidden',
267-
zIndex: node.computedPosition.z ?? zIndex.value,
268-
transform: `translate(${node.computedPosition.x}px,${node.computedPosition.y}px)`,
269-
pointerEvents: isSelectable.value || isDraggable.value ? 'all' : 'none',
270-
...getStyle.value,
271-
},
272265
'tabIndex': isFocusable.value ? 0 : undefined,
273266
'role': isFocusable.value ? 'button' : undefined,
274267
'aria-describedby': disableKeyboardA11y.value ? undefined : `${ARIA_NODE_DESC_KEY}-${vueFlowId}`,
@@ -286,21 +279,17 @@ const NodeWrapper = defineComponent({
286279
id: node.id,
287280
type: node.type,
288281
data: node.data,
289-
events: { ...node.events, ...on },
290282
selected: node.selected,
291-
resizing: node.resizing,
292283
dragging: dragging.value,
293284
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,
285+
positionAbsoluteX: node.internals.positionAbsolute.x,
286+
positionAbsoluteY: node.internals.positionAbsolute.y,
287+
width: node.measured.width,
288+
height: node.measured.height,
289+
parentId: node.parentId,
290+
zIndex: node.internals.z ?? zIndex.value,
301291
targetPosition: node.targetPosition,
302292
sourcePosition: node.sourcePosition,
303-
label: node.label,
304293
dragHandle: node.dragHandle,
305294
onUpdateNodeInternals: updateInternals,
306295
}),
@@ -309,7 +298,7 @@ const NodeWrapper = defineComponent({
309298
}
310299
/** this re-calculates the current position, necessary for clamping by a node's extent */
311300
function clampPosition() {
312-
const nextPos = node.computedPosition
301+
const nextPos = node.internals.positionAbsolute
313302

314303
if (snapToGrid.value) {
315304
nextPos.x = snapGrid.value[0] * Math.round(nextPos.x / snapGrid.value[0])
@@ -319,8 +308,8 @@ const NodeWrapper = defineComponent({
319308
const { computedPosition, position } = calcNextPosition(node, nextPos, emits.error, nodeExtent.value, parentNode.value)
320309

321310
// only overwrite positions if there are changes when clamping
322-
if (node.computedPosition.x !== computedPosition.x || node.computedPosition.y !== computedPosition.y) {
323-
node.computedPosition = { ...node.computedPosition, ...computedPosition }
311+
if (nextPos.x !== computedPosition.x || nextPos.y !== computedPosition.y) {
312+
node.internals.positionAbsolute = { ...nextPos, ...computedPosition }
324313
}
325314

326315
if (node.position.x !== position.x || node.position.y !== position.y) {

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

+6-8
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 { Node, NodeProps } from '../../types'
55
import { Position } from '../../types'
66

7-
const OutputNode: FunctionalComponent<NodeProps<{ label: any }>> = function ({
7+
const OutputNode: FunctionalComponent<NodeProps<Node<{ label: any }, 'output'>>> = function ({
88
targetPosition = Position.Top,
9-
label: _label,
10-
connectable = true,
11-
isValidTargetPos,
9+
isConnectable = true,
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/useNode.ts

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { computed, inject, ref } from 'vue'
2-
import type { NodeBase } from '@xyflow/system'
32
import { ErrorCode, VueFlowError, getConnectedEdges } from '../utils'
43
import { NodeRef } from '../context'
4+
import type { GraphNode, Node } from '../types'
55
import { useVueFlow } from './useVueFlow'
66
import { useNodeId } from './useNodeId'
77

@@ -16,13 +16,13 @@ import { useNodeId } from './useNodeId'
1616
* @param id - The id of the node to access
1717
* @returns the node id, the node, the node dom element, it's parent and connected edges
1818
*/
19-
export function useNode<NodeType extends NodeBase = NodeBase>(id?: string) {
19+
export function useNode<NodeType extends Node = Node>(id?: string) {
2020
const nodeId = id ?? useNodeId() ?? ''
2121
const nodeEl = inject(NodeRef, ref(null))
2222

23-
const { findNode, edges, emits } = useVueFlow()
23+
const { getNode, edges, emits } = useVueFlow()
2424

25-
const node = findNode<NodeType>(nodeId)!
25+
const node = getNode(nodeId) as GraphNode<NodeType>
2626

2727
if (!node) {
2828
emits.error(new VueFlowError(ErrorCode.NODE_NOT_FOUND, nodeId))
@@ -32,7 +32,7 @@ export function useNode<NodeType extends NodeBase = NodeBase>(id?: string) {
3232
id: nodeId,
3333
nodeEl,
3434
node,
35-
parentNode: computed(() => findNode(node.parentId)),
35+
parentNode: computed(() => getNode(node.parentId)),
3636
connectedEdges: computed(() => getConnectedEdges([node], edges.value)),
3737
}
3838
}

‎packages/core/src/types/node.ts

+2
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,8 @@ export interface Node<NodeData extends ElementData = ElementData, NodeType exten
3434
extends Omit<NodeBase<NodeData, NodeType>, 'connectable' | 'extent' | 'origin'> {
3535
/** Disable/enable connecting node */
3636
connectable?: HandleConnectable
37+
/** Disable/enable focusing node */
38+
focusable?: boolean
3739
/** define node extent, i.e. area in which node can be moved */
3840
extent?: CoordinateExtent | CoordinateExtentRange | 'parent'
3941
/** Additional class names, can be a string or a callback returning a string (receives current flow element) */

0 commit comments

Comments
 (0)