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

refactor(core): use node/edge id as only dependency for nodes/edges list (#1447)

Browse Source 
* refactor(core): use node id to (re-)render nodes

* refactor(core): use edge id to (re-)render nodes

* chore(changeset): add

* chore(core): cleanup

* chore(core): cast cmp as any
This commit is contained in:
Braks
2024-06-05 20:23:50 +02:00
parent 8bc1c99252
commit 876b71dc19
7 changed files with 274 additions and 325 deletions
Download Patch File Download Diff File Expand all files Collapse all files

189
packages/core/src/components/Edges/EdgeWrapper.ts
View File

@@ -1,9 +1,8 @@
import { computed, defineComponent, h, provide, ref } from 'vue'
import { useVModel } from '@vueuse/core'
import type { Connection, EdgeComponent, EdgeUpdatable, GraphEdge, HandleType, MouseTouchEvent } from '../../types'
import { computed, defineComponent, getCurrentInstance, h, inject, provide, ref, resolveComponent, toRef } from 'vue'
import type { Connection, EdgeComponent, HandleType, MouseTouchEvent } from '../../types'
import { ConnectionMode, Position } from '../../types'
import { useEdgeHooks, useHandle, useVueFlow } from '../../composables'
import { EdgeId, EdgeRef } from '../../context'
import { useEdge, useEdgeHooks, useHandle, useVueFlow } from '../../composables'
import { EdgeId, EdgeRef, Slots } from '../../context'
import {
ARIA_EDGE_DESC_KEY,
ErrorCode,
@@ -17,18 +16,12 @@ import EdgeAnchor from './EdgeAnchor'
interface Props {
id: string
type: EdgeComponent | ((...args: any[]) => any) | object | false
name: string
selectable?: boolean
focusable?: boolean
updatable?: EdgeUpdatable
edge: GraphEdge
}
const EdgeWrapper = defineComponent({
name: 'Edge',
compatConfig: { MODE: 3 },
props: ['name', 'type', 'id', 'updatable', 'selectable', 'focusable', 'edge'],
props: ['id'],
setup(props: Props) {
const {
id: vueFlowId,
@@ -45,11 +38,18 @@ const EdgeWrapper = defineComponent({
isValidConnection,
multiSelectionActive,
disableKeyboardA11y,
elementsSelectable,
edgesUpdatable,
edgesFocusable,
} = useVueFlow()
const hooks = useEdgeHooks(props.edge, emits)
const { edge } = useEdge(props.id)
const edge = useVModel(props, 'edge')
const hooks = useEdgeHooks(edge, emits)
const slots = inject(Slots)
const instance = getCurrentInstance()
const mouseOver = ref(false)
@@ -63,11 +63,45 @@ const EdgeWrapper = defineComponent({
const edgeEl = ref<SVGElement | null>(null)
const isSelectable = toRef(() => (typeof edge.selectable === 'undefined' ? elementsSelectable.value : edge.selectable))
const isUpdatable = toRef(() => (typeof edge.updatable === 'undefined' ? edgesUpdatable.value : edge.updatable))
const isFocusable = toRef(() => (typeof edge.focusable === 'undefined' ? edgesFocusable.value : edge.focusable))
provide(EdgeId, props.id)
provide(EdgeRef, edgeEl)
const edgeClass = computed(() => (edge.value.class instanceof Function ? edge.value.class(edge.value) : edge.value.class))
const edgeStyle = computed(() => (edge.value.style instanceof Function ? edge.value.style(edge.value) : edge.value.style))
const edgeClass = computed(() => (edge.class instanceof Function ? edge.class(edge) : edge.class))
const edgeStyle = computed(() => (edge.style instanceof Function ? edge.style(edge) : edge.style))
const edgeCmp = computed(() => {
const name = edge.type || 'default'
const slot = slots?.[`edge-${name}`]
if (slot) {
return slot
}
let edgeType = edge.template ?? getEdgeTypes.value[name]
if (typeof edgeType === 'string') {
if (instance) {
const components = Object.keys(instance.appContext.components)
if (components && components.includes(name)) {
edgeType = resolveComponent(name, false) as EdgeComponent
}
}
}
if (edgeType && typeof edgeType !== 'string') {
return edgeType
}
emits.error(new VueFlowError(ErrorCode.EDGE_TYPE_MISSING, edgeType))
return false
})
const { handlePointerDown } = useHandle({
nodeId,
@@ -80,29 +114,29 @@ const EdgeWrapper = defineComponent({
})
return () => {
const sourceNode = findNode(edge.value.source)
const targetNode = findNode(edge.value.target)
const pathOptions = 'pathOptions' in edge.value ? edge.value.pathOptions : {}
const sourceNode = findNode(edge.source)
const targetNode = findNode(edge.target)
const pathOptions = 'pathOptions' in edge ? edge.pathOptions : {}
if (!sourceNode && !targetNode) {
emits.error(new VueFlowError(ErrorCode.EDGE_SOURCE_TARGET_MISSING, edge.value.id, edge.value.source, edge.value.target))
emits.error(new VueFlowError(ErrorCode.EDGE_SOURCE_TARGET_MISSING, edge.id, edge.source, edge.target))
return null
}
if (!sourceNode) {
emits.error(new VueFlowError(ErrorCode.EDGE_SOURCE_MISSING, edge.value.id, edge.value.source))
emits.error(new VueFlowError(ErrorCode.EDGE_SOURCE_MISSING, edge.id, edge.source))
return null
}
if (!targetNode) {
emits.error(new VueFlowError(ErrorCode.EDGE_TARGET_MISSING, edge.value.id, edge.value.target))
emits.error(new VueFlowError(ErrorCode.EDGE_TARGET_MISSING, edge.id, edge.target))
return null
}
if (!edge.value || edge.value.hidden || sourceNode.hidden || targetNode.hidden) {
if (!edge || edge.hidden || sourceNode.hidden || targetNode.hidden) {
return null
}
@@ -113,7 +147,7 @@ const EdgeWrapper = defineComponent({
sourceNodeHandles = [...(sourceNode.handleBounds.source || []), ...(sourceNode.handleBounds.target || [])]
}
const sourceHandle = getHandle(sourceNodeHandles, edge.value.sourceHandle)
const sourceHandle = getHandle(sourceNodeHandles, edge.sourceHandle)
let targetNodeHandles
if (connectionMode.value === ConnectionMode.Strict) {
@@ -122,7 +156,7 @@ const EdgeWrapper = defineComponent({
targetNodeHandles = [...(targetNode.handleBounds.target || []), ...(targetNode.handleBounds.source || [])]
}
const targetHandle = getHandle(targetNodeHandles, edge.value.targetHandle)
const targetHandle = getHandle(targetNodeHandles, edge.targetHandle)
const sourcePosition = sourceHandle ? sourceHandle.position : Position.Bottom
@@ -137,10 +171,10 @@ const EdgeWrapper = defineComponent({
targetPosition,
)
edge.value.sourceX = sourceX
edge.value.sourceY = sourceY
edge.value.targetX = targetX
edge.value.targetY = targetY
edge.sourceX = sourceX
edge.sourceY = sourceY
edge.targetX = targetX
edge.targetY = targetY
return h(
'g',
@@ -150,14 +184,14 @@ const EdgeWrapper = defineComponent({
'data-id': props.id,
'class': [
'vue-flow__edge',
`vue-flow__edge-${props.type === false ? 'default' : props.name}`,
`vue-flow__edge-${edgeCmp.value === false ? 'default' : edge.type || 'default'}`,
noPanClassName.value,
edgeClass.value,
{
updating: mouseOver.value,
selected: edge.value.selected,
animated: edge.value.animated,
inactive: !props.selectable,
selected: edge.selected,
animated: edge.animated,
inactive: !isSelectable.value,
},
],
'onClick': onEdgeClick,
@@ -166,52 +200,49 @@ const EdgeWrapper = defineComponent({
'onMouseenter': onEdgeMouseEnter,
'onMousemove': onEdgeMouseMove,
'onMouseleave': onEdgeMouseLeave,
'onKeyDown': props.focusable ? onKeyDown : undefined,
'tabIndex': props.focusable ? 0 : undefined,
'aria-label':
edge.value.ariaLabel === null
? undefined
: edge.value.ariaLabel || `Edge from ${edge.value.source} to ${edge.value.target}`,
'aria-describedby': props.focusable ? `${ARIA_EDGE_DESC_KEY}-${vueFlowId}` : undefined,
'role': props.focusable ? 'button' : 'img',
'onKeyDown': isFocusable.value ? onKeyDown : undefined,
'tabIndex': isFocusable.value ? 0 : undefined,
'aria-label': edge.ariaLabel === null ? undefined : edge.ariaLabel || `Edge from ${edge.source} to ${edge.target}`,
'aria-describedby': isFocusable.value ? `${ARIA_EDGE_DESC_KEY}-${vueFlowId}` : undefined,
'role': isFocusable.value ? 'button' : 'img',
},
[
updating.value
? null
: h(props.type === false ? getEdgeTypes.value.default : props.type, {
: h(edgeCmp.value === false ? getEdgeTypes.value.default : (edgeCmp.value as any), {
id: props.id,
sourceNode,
targetNode,
source: edge.value.source,
target: edge.value.target,
type: edge.value.type,
updatable: props.updatable,
selected: edge.value.selected,
animated: edge.value.animated,
label: edge.value.label,
labelStyle: edge.value.labelStyle,
labelShowBg: edge.value.labelShowBg,
labelBgStyle: edge.value.labelBgStyle,
labelBgPadding: edge.value.labelBgPadding,
labelBgBorderRadius: edge.value.labelBgBorderRadius,
data: edge.value.data,
events: { ...edge.value.events, ...hooks.on },
source: edge.source,
target: edge.target,
type: edge.type,
updatable: isUpdatable.value,
selected: edge.selected,
animated: edge.animated,
label: edge.label,
labelStyle: edge.labelStyle,
labelShowBg: edge.labelShowBg,
labelBgStyle: edge.labelBgStyle,
labelBgPadding: edge.labelBgPadding,
labelBgBorderRadius: edge.labelBgBorderRadius,
data: edge.data,
events: { ...edge.events, ...hooks.on },
style: edgeStyle.value,
markerStart: `url('#${getMarkerId(edge.value.markerStart, vueFlowId)}')`,
markerEnd: `url('#${getMarkerId(edge.value.markerEnd, vueFlowId)}')`,
markerStart: `url('#${getMarkerId(edge.markerStart, vueFlowId)}')`,
markerEnd: `url('#${getMarkerId(edge.markerEnd, vueFlowId)}')`,
sourcePosition,
targetPosition,
sourceX,
sourceY,
targetX,
targetY,
sourceHandleId: edge.value.sourceHandle,
targetHandleId: edge.value.targetHandle,
interactionWidth: edge.value.interactionWidth,
sourceHandleId: edge.sourceHandle,
targetHandleId: edge.targetHandle,
interactionWidth: edge.interactionWidth,
...pathOptions,
}),
[
props.updatable === 'source' || props.updatable === true
isUpdatable.value === 'source' || isUpdatable.value === true
? [
h(
'g',
@@ -231,7 +262,7 @@ const EdgeWrapper = defineComponent({
),
]
: null,
props.updatable === 'target' || props.updatable === true
isUpdatable.value === 'target' || isUpdatable.value === true
? [
h(
'g',
@@ -265,11 +296,11 @@ const EdgeWrapper = defineComponent({
}
function onEdgeUpdate(event: MouseTouchEvent, connection: Connection) {
hooks.emit.update({ event, edge: edge.value, connection })
hooks.emit.update({ event, edge, connection })
}
function onEdgeUpdateEnd(event: MouseTouchEvent) {
hooks.emit.updateEnd({ event, edge: edge.value })
hooks.emit.updateEnd({ event, edge })
updating.value = false
}
@@ -280,28 +311,28 @@ const EdgeWrapper = defineComponent({
updating.value = true
nodeId.value = isSourceHandle ? edge.value.target : edge.value.source
handleId.value = (isSourceHandle ? edge.value.targetHandle : edge.value.sourceHandle) ?? ''
nodeId.value = isSourceHandle ? edge.target : edge.source
handleId.value = (isSourceHandle ? edge.targetHandle : edge.sourceHandle) ?? ''
edgeUpdaterType.value = isSourceHandle ? 'target' : 'source'
hooks.emit.updateStart({ event, edge: edge.value })
hooks.emit.updateStart({ event, edge })
handlePointerDown(event)
}
function onEdgeClick(event: MouseEvent) {
const data = { event, edge: edge.value }
const data = { event, edge }
if (props.selectable) {
if (isSelectable.value) {
nodesSelectionActive.value = false
if (edge.value.selected && multiSelectionActive.value) {
removeSelectedEdges([edge.value])
if (edge.selected && multiSelectionActive.value) {
removeSelectedEdges([edge])
edgeEl.value?.blur()
} else {
addSelectedEdges([edge.value])
addSelectedEdges([edge])
}
}
@@ -309,23 +340,23 @@ const EdgeWrapper = defineComponent({
}
function onEdgeContextMenu(event: MouseEvent) {
hooks.emit.contextMenu({ event, edge: edge.value })
hooks.emit.contextMenu({ event, edge })
}
function onDoubleClick(event: MouseEvent) {
hooks.emit.doubleClick({ event, edge: edge.value })
hooks.emit.doubleClick({ event, edge })
}
function onEdgeMouseEnter(event: MouseEvent) {
hooks.emit.mouseEnter({ event, edge: edge.value })
hooks.emit.mouseEnter({ event, edge })
}
function onEdgeMouseMove(event: MouseEvent) {
hooks.emit.mouseMove({ event, edge: edge.value })
hooks.emit.mouseMove({ event, edge })
}
function onEdgeMouseLeave(event: MouseEvent) {
hooks.emit.mouseLeave({ event, edge: edge.value })
hooks.emit.mouseLeave({ event, edge })
}
function onEdgeUpdaterSourceMouseDown(event: MouseEvent) {
@@ -337,7 +368,7 @@ const EdgeWrapper = defineComponent({
}
function onKeyDown(event: KeyboardEvent) {
if (!disableKeyboardA11y.value && elementSelectionKeys.includes(event.key) && props.selectable) {
if (!disableKeyboardA11y.value && elementSelectionKeys.includes(event.key) && isSelectable.value) {
const unselect = event.key === 'Escape'
if (unselect) {

249
packages/core/src/components/Nodes/NodeWrapper.ts
View File

@@ -1,33 +1,41 @@
import { computed, defineComponent, h, nextTick, onMounted, provide, ref, toRef, watch } from 'vue'
import { until, useVModel } from '@vueuse/core'
import {
computed,
defineComponent,
getCurrentInstance,
h,
inject,
nextTick,
onMounted,
provide,
ref,
resolveComponent,
toRef,
watch,
} from 'vue'
import { until } from '@vueuse/core'
import {
ARIA_NODE_DESC_KEY,
ErrorCode,
VueFlowError,
arrowKeyDiffs,
calcNextPosition,
elementSelectionKeys,
getXYZPos,
handleNodeClick,
} from '../../utils'
import type { GraphNode, HandleConnectable, NodeComponent } from '../../types'
import { NodeId, NodeRef } from '../../context'
import { isInputDOMNode, useDrag, useNodeHooks, useUpdateNodePositions, useVueFlow } from '../../composables'
import { NodeId, NodeRef, Slots } from '../../context'
import { isInputDOMNode, useDrag, useNode, useNodeHooks, useUpdateNodePositions, useVueFlow } from '../../composables'
import type { NodeComponent } from '../../types'
interface Props {
id: string
draggable: boolean
selectable: boolean
connectable: HandleConnectable
focusable: boolean
type: NodeComponent | ((...args: any[]) => any) | object | false
name: string
node: GraphNode
resizeObserver: ResizeObserver
}
const NodeWrapper = defineComponent({
name: 'Node',
compatConfig: { MODE: 3 },
props: ['name', 'type', 'id', 'draggable', 'selectable', 'focusable', 'connectable', 'node', 'resizeObserver'],
props: ['id', 'resizeObserver'],
setup(props: Props) {
provide(NodeId, props.id)
@@ -38,7 +46,6 @@ const NodeWrapper = defineComponent({
nodesSelectionActive,
multiSelectionActive,
emits,
findNode,
removeSelectedNodes,
addSelectedNodes,
updateNodeDimensions,
@@ -52,48 +59,86 @@ const NodeWrapper = defineComponent({
snapToGrid,
snapGrid,
nodeDragThreshold,
getConnectedEdges,
nodesDraggable,
elementsSelectable,
nodesConnectable,
nodesFocusable,
} = useVueFlow()
const slots = inject(Slots)
const instance = getCurrentInstance()
const updateNodePositions = useUpdateNodePositions()
const node = useVModel(props, 'node')
const parentNode = computed(() => findNode(node.value?.parentNode))
const connectedEdges = computed(() => getConnectedEdges(node.value ? [node.value] : []))
const { node, parentNode, connectedEdges } = useNode(props.id)
const nodeElement = ref<HTMLDivElement | null>(null)
provide(NodeRef, nodeElement)
const { emit, on } = useNodeHooks(node.value, emits)
const isDraggable = toRef(() => (typeof node.draggable === 'undefined' ? nodesDraggable.value : node.draggable))
const isSelectable = toRef(() => (typeof node.selectable === 'undefined' ? elementsSelectable.value : node.selectable))
const isConnectable = toRef(() => (typeof node.connectable === 'undefined' ? nodesConnectable.value : node.connectable))
const isFocusable = toRef(() => (typeof node.focusable === 'undefined' ? nodesFocusable.value : node.focusable))
const nodeCmp = computed(() => {
const name = node.type || 'default'
const slot = slots?.[`node-${name}`]
if (slot) {
return slot
}
let nodeType = node.template || getNodeTypes.value[name]
if (typeof nodeType === 'string') {
if (instance) {
const components = Object.keys(instance.appContext.components)
if (components && components.includes(name)) {
nodeType = resolveComponent(name, false) as NodeComponent
}
}
}
if (nodeType && typeof nodeType !== 'string') {
return nodeType
}
emits.error(new VueFlowError(ErrorCode.NODE_TYPE_MISSING, nodeType))
return false
})
const { emit, on } = useNodeHooks(node, emits)
const dragging = useDrag({
id: props.id,
el: nodeElement,
disabled: () => !props.draggable,
selectable: () => props.selectable,
dragHandle: () => node.value.dragHandle,
disabled: () => !isDraggable.value,
selectable: () => isSelectable.value,
dragHandle: () => node.dragHandle,
onStart(args) {
// todo: remove intersections from here - they are not needed and only reduce performance
emit.dragStart({ ...args, intersections: getIntersectingNodes(node.value) })
emit.dragStart({ ...args, intersections: getIntersectingNodes(node) })
},
onDrag(args) {
emit.drag({ ...args, intersections: getIntersectingNodes(node.value) })
emit.drag({ ...args, intersections: getIntersectingNodes(node) })
},
onStop(args) {
emit.dragStop({ ...args, intersections: getIntersectingNodes(node.value) })
emit.dragStop({ ...args, intersections: getIntersectingNodes(node) })
},
})
const getClass = computed(() => (node.value.class instanceof Function ? node.value.class(node.value) : node.value.class))
const getClass = computed(() => (node.class instanceof Function ? node.class(node) : node.class))
const getStyle = computed(() => {
const styles = (node.value.style instanceof Function ? node.value.style(node.value) : node.value.style) || {}
const styles = (node.style instanceof Function ? node.style(node) : node.style) || {}
const width = node.value.width instanceof Function ? node.value.width(node.value) : node.value.width
const height = node.value.height instanceof Function ? node.value.height(node.value) : node.value.height
const width = node.width instanceof Function ? node.width(node) : node.width
const height = node.height instanceof Function ? node.height(node) : node.height
if (width) {
styles.width = typeof width === 'string' ? width : `${width}px`
@@ -106,7 +151,7 @@ const NodeWrapper = defineComponent({
return styles
})
const zIndex = toRef(() => Number(node.value.zIndex ?? getStyle.value.zIndex ?? 0))
const zIndex = toRef(() => Number(node.zIndex ?? getStyle.value.zIndex ?? 0))
onUpdateNodeInternals((updateIds) => {
if (updateIds.includes(props.id)) {
@@ -116,7 +161,7 @@ const NodeWrapper = defineComponent({
onMounted(() => {
watch(
() => node.value.hidden,
() => node.hidden,
(isHidden = false, _, onCleanup) => {
if (!isHidden && nodeElement.value) {
props.resizeObserver.observe(nodeElement.value)
@@ -132,7 +177,7 @@ const NodeWrapper = defineComponent({
)
})
watch([() => node.value.type, () => node.value.sourcePosition, () => node.value.targetPosition], () => {
watch([() => node.type, () => node.sourcePosition, () => node.targetPosition], () => {
nextTick(() => {
updateNodeDimensions([{ id: props.id, nodeElement: nodeElement.value as HTMLDivElement, forceUpdate: true }])
})
@@ -141,15 +186,15 @@ const NodeWrapper = defineComponent({
/** this watcher only updates XYZPosition (when dragging a parent etc) */
watch(
[
() => node.value.position.x,
() => node.value.position.y,
() => node.position.x,
() => node.position.y,
() => parentNode.value?.computedPosition.x,
() => parentNode.value?.computedPosition.y,
() => parentNode.value?.computedPosition.z,
zIndex,
() => node.value.selected,
() => node.value.dimensions.height,
() => node.value.dimensions.width,
() => node.selected,
() => node.dimensions.height,
() => node.dimensions.width,
() => parentNode.value?.dimensions.height,
() => parentNode.value?.dimensions.width,
],
@@ -157,19 +202,19 @@ const NodeWrapper = defineComponent({
const xyzPos = {
x: newX,
y: newY,
z: nodeZIndex + (elevateNodesOnSelect.value ? (node.value.selected ? 1000 : 0) : 0),
z: nodeZIndex + (elevateNodesOnSelect.value ? (node.selected ? 1000 : 0) : 0),
}
if (typeof parentX !== 'undefined' && typeof parentY !== 'undefined') {
node.value.computedPosition = getXYZPos({ x: parentX, y: parentY, z: parentZ! }, xyzPos)
node.computedPosition = getXYZPos({ x: parentX, y: parentY, z: parentZ! }, xyzPos)
} else {
node.value.computedPosition = xyzPos
node.computedPosition = xyzPos
}
},
{ flush: 'post', immediate: true },
)
watch([() => node.value.extent, nodeExtent], ([nodeExtent, globalExtent], [oldNodeExtent, oldGlobalExtent]) => {
watch([() => node.extent, nodeExtent], ([nodeExtent, globalExtent], [oldNodeExtent, oldGlobalExtent]) => {
// update position if extent has actually changed
if (nodeExtent !== oldNodeExtent || globalExtent !== oldGlobalExtent) {
clampPosition()
@@ -179,10 +224,10 @@ const NodeWrapper = defineComponent({
// clamp initial position to nodes' extent
// if extent is parent, we need dimensions to properly clamp the position
if (
node.value.extent === 'parent' ||
(typeof node.value.extent === 'object' && 'range' in node.value.extent && node.value.extent.range === 'parent')
node.extent === 'parent' ||
(typeof node.extent === 'object' && 'range' in node.extent && node.extent.range === 'parent')
) {
until(() => node.value.initialized)
until(() => node.initialized)
.toBe(true)
.then(clampPosition)
}
@@ -192,7 +237,7 @@ const NodeWrapper = defineComponent({
}
return () => {
if (node.value.hidden) {
if (node.hidden) {
return null
}
@@ -200,31 +245,31 @@ const NodeWrapper = defineComponent({
'div',
{
'ref': nodeElement,
'data-id': node.value.id,
'data-id': node.id,
'class': [
'vue-flow__node',
`vue-flow__node-${props.type === false ? 'default' : props.name}`,
`vue-flow__node-${nodeCmp.value === false ? 'default' : node.type || 'default'}`,
{
[noPanClassName.value]: props.draggable,
[noPanClassName.value]: isDraggable.value,
dragging: dragging?.value,
draggable: props.draggable,
selected: node.value.selected,
selectable: props.selectable,
parent: node.value.isParent,
draggable: isDraggable.value,
selected: node.selected,
selectable: isSelectable.value,
parent: node.isParent,
},
getClass.value,
],
'style': {
visibility: node.value.initialized ? 'visible' : 'hidden',
zIndex: node.value.computedPosition.z ?? zIndex.value,
transform: `translate(${node.value.computedPosition.x}px,${node.value.computedPosition.y}px)`,
pointerEvents: props.selectable || props.draggable ? 'all' : 'none',
visibility: node.initialized ? 'visible' : 'hidden',
zIndex: node.computedPosition.z ?? zIndex.value,
transform: `translate(${node.computedPosition.x}px,${node.computedPosition.y}px)`,
pointerEvents: isSelectable.value || isDraggable.value ? 'all' : 'none',
...getStyle.value,
},
'tabIndex': props.focusable ? 0 : undefined,
'role': props.focusable ? 'button' : undefined,
'tabIndex': isFocusable.value ? 0 : undefined,
'role': isFocusable.value ? 'button' : undefined,
'aria-describedby': disableKeyboardA11y.value ? undefined : `${ARIA_NODE_DESC_KEY}-${vueFlowId}`,
'aria-label': node.value.ariaLabel,
'aria-label': node.ariaLabel,
'onMouseenter': onMouseEnter,
'onMousemove': onMouseMove,
'onMouseleave': onMouseLeave,
@@ -234,26 +279,26 @@ const NodeWrapper = defineComponent({
'onKeydown': onKeyDown,
},
[
h(props.type === false ? getNodeTypes.value.default : props.type, {
id: node.value.id,
type: node.value.type,
data: node.value.data,
events: { ...node.value.events, ...on },
selected: node.value.selected,
resizing: node.value.resizing,
h(nodeCmp.value === false ? getNodeTypes.value.default : (nodeCmp.value as any), {
id: node.id,
type: node.type,
data: node.data,
events: { ...node.events, ...on },
selected: node.selected,
resizing: node.resizing,
dragging: dragging.value,
connectable: props.connectable,
position: node.value.computedPosition,
dimensions: node.value.dimensions,
isValidTargetPos: node.value.isValidTargetPos,
isValidSourcePos: node.value.isValidSourcePos,
parent: node.value.parentNode,
parentNodeId: node.value.parentNode,
zIndex: node.value.computedPosition.z ?? zIndex.value,
targetPosition: node.value.targetPosition,
sourcePosition: node.value.sourcePosition,
label: node.value.label,
dragHandle: node.value.dragHandle,
connectable: isConnectable.value,
position: node.computedPosition,
dimensions: node.dimensions,
isValidTargetPos: node.isValidTargetPos,
isValidSourcePos: node.isValidSourcePos,
parent: node.parentNode,
parentNodeId: node.parentNode,
zIndex: node.computedPosition.z ?? zIndex.value,
targetPosition: node.targetPosition,
sourcePosition: node.sourcePosition,
label: node.label,
dragHandle: node.dragHandle,
onUpdateNodeInternals: updateInternals,
}),
],
@@ -261,28 +306,22 @@ const NodeWrapper = defineComponent({
}
/** this re-calculates the current position, necessary for clamping by a node's extent */
function clampPosition() {
const nextPos = node.value.computedPosition
const nextPos = node.computedPosition
if (snapToGrid.value) {
nextPos.x = snapGrid.value[0] * Math.round(nextPos.x / snapGrid.value[0])
nextPos.y = snapGrid.value[1] * Math.round(nextPos.y / snapGrid.value[1])
}
const { computedPosition, position } = calcNextPosition(
node.value,
nextPos,
emits.error,
nodeExtent.value,
parentNode.value,
)
const { computedPosition, position } = calcNextPosition(node, nextPos, emits.error, nodeExtent.value, parentNode.value)
// only overwrite positions if there are changes when clamping
if (node.value.computedPosition.x !== computedPosition.x || node.value.computedPosition.y !== computedPosition.y) {
node.value.computedPosition = { ...node.value.computedPosition, ...computedPosition }
if (node.computedPosition.x !== computedPosition.x || node.computedPosition.y !== computedPosition.y) {
node.computedPosition = { ...node.computedPosition, ...computedPosition }
}
if (node.value.position.x !== position.x || node.value.position.y !== position.y) {
node.value.position = position
if (node.position.x !== position.x || node.position.y !== position.y) {
node.position = position
}
}
@@ -294,34 +333,34 @@ const NodeWrapper = defineComponent({
function onMouseEnter(event: MouseEvent) {
if (!dragging?.value) {
emit.mouseEnter({ event, node: node.value, connectedEdges: connectedEdges.value })
emit.mouseEnter({ event, node, connectedEdges: connectedEdges.value })
}
}
function onMouseMove(event: MouseEvent) {
if (!dragging?.value) {
emit.mouseMove({ event, node: node.value, connectedEdges: connectedEdges.value })
emit.mouseMove({ event, node, connectedEdges: connectedEdges.value })
}
}
function onMouseLeave(event: MouseEvent) {
if (!dragging?.value) {
emit.mouseLeave({ event, node: node.value, connectedEdges: connectedEdges.value })
emit.mouseLeave({ event, node, connectedEdges: connectedEdges.value })
}
}
function onContextMenu(event: MouseEvent) {
return emit.contextMenu({ event, node: node.value, connectedEdges: connectedEdges.value })
return emit.contextMenu({ event, node, connectedEdges: connectedEdges.value })
}
function onDoubleClick(event: MouseEvent) {
return emit.doubleClick({ event, node: node.value, connectedEdges: connectedEdges.value })
return emit.doubleClick({ event, node, connectedEdges: connectedEdges.value })
}
function onSelectNode(event: MouseEvent) {
if (props.selectable && (!selectNodesOnDrag.value || !props.draggable || nodeDragThreshold.value > 0)) {
if (isSelectable.value && (!selectNodesOnDrag.value || !isDraggable.value || nodeDragThreshold.value > 0)) {
handleNodeClick(
node.value,
node,
multiSelectionActive.value,
addSelectedNodes,
removeSelectedNodes,
@@ -331,7 +370,7 @@ const NodeWrapper = defineComponent({
)
}
emit.click({ event, node: node.value, connectedEdges: connectedEdges.value })
emit.click({ event, node, connectedEdges: connectedEdges.value })
}
function onKeyDown(event: KeyboardEvent) {
@@ -339,11 +378,11 @@ const NodeWrapper = defineComponent({
return
}
if (elementSelectionKeys.includes(event.key) && props.selectable) {
if (elementSelectionKeys.includes(event.key) && isSelectable.value) {
const unselect = event.key === 'Escape'
handleNodeClick(
node.value,
node,
multiSelectionActive.value,
addSelectedNodes,
removeSelectedNodes,
@@ -351,9 +390,9 @@ const NodeWrapper = defineComponent({
unselect,
nodeElement.value!,
)
} else if (props.draggable && node.value.selected && arrowKeyDiffs[event.key]) {
} else if (isDraggable.value && node.selected && arrowKeyDiffs[event.key]) {
ariaLiveMessage.value = `Moved selected node ${event.key.replace('Arrow', '').toLowerCase()}. New position, x: ${~~node
.value.position.x}, y: ${~~node.value.position.y}`
.position.x}, y: ${~~node.position.y}`
updateNodePositions(
{

2
packages/core/src/composables/useEdge.ts
View File

@@ -21,7 +21,7 @@ export function useEdge<Data = ElementData, CustomEvents extends Record<string,
const { findEdge, emits } = useVueFlow()
const edge = findEdge<Data, CustomEvents>(edgeId)
const edge = findEdge<Data, CustomEvents>(edgeId)!
if (!edge) {
emits.error(new VueFlowError(ErrorCode.EDGE_NOT_FOUND, edgeId))

70
packages/core/src/container/EdgeRenderer/EdgeRenderer.vue
View File

@@ -1,66 +1,11 @@
<script lang="ts" setup>
import { getCurrentInstance, inject, resolveComponent } from 'vue'
import EdgeWrapper from '../../components/Edges/EdgeWrapper'
import ConnectionLine from '../../components/ConnectionLine'
import type { EdgeComponent, EdgeUpdatable, GraphEdge } from '../../types'
import { Slots } from '../../context'
import { useVueFlow } from '../../composables'
import { ErrorCode, VueFlowError, getEdgeZIndex } from '../../utils'
import { getEdgeZIndex } from '../../utils'
import MarkerDefinitions from './MarkerDefinitions.vue'
const slots = inject(Slots)
const {
edgesUpdatable,
edgesFocusable,
elementsSelectable,
findNode,
getEdges,
getEdgeTypes,
elevateEdgesOnSelect,
dimensions,
emits,
} = useVueFlow()
const instance = getCurrentInstance()
function selectable(edgeSelectable?: boolean) {
return typeof edgeSelectable === 'undefined' ? elementsSelectable.value : edgeSelectable
}
function updatable(edgeUpdatable?: EdgeUpdatable) {
return typeof edgeUpdatable === 'undefined' ? edgesUpdatable.value : edgeUpdatable
}
function focusable(edgeFocusable?: boolean) {
return typeof edgeFocusable === 'undefined' ? edgesFocusable.value : edgeFocusable
}
function getType(type?: string, template?: GraphEdge['template']) {
const name = type || 'default'
const slot = slots?.[`edge-${name}`]
if (slot) {
return slot
}
let edgeType = template ?? getEdgeTypes.value[name]
if (typeof edgeType === 'string') {
if (instance) {
const components = Object.keys(instance.appContext.components)
if (components && components.includes(name)) {
edgeType = resolveComponent(name, false) as EdgeComponent
}
}
}
if (edgeType && typeof edgeType !== 'string') {
return edgeType
}
emits.error(new VueFlowError(ErrorCode.EDGE_TYPE_MISSING, edgeType))
return false
}
const { findNode, getEdges, elevateEdgesOnSelect, dimensions } = useVueFlow()
</script>
<script lang="ts">
@@ -77,18 +22,11 @@ export default {
<svg
v-for="edge of getEdges"
:key="edge.id"
v-memo="[edge.id]"
class="vue-flow__edges vue-flow__container"
:style="{ zIndex: getEdgeZIndex(edge, findNode, elevateEdgesOnSelect) }"
>
<EdgeWrapper
:id="edge.id"
:edge="edge"
:type="getType(edge.type, edge.template)"
:name="edge.type || 'default'"
:selectable="selectable(edge.selectable)"
:updatable="updatable(edge.updatable)"
:focusable="focusable(edge.focusable)"
/>
<EdgeWrapper :id="edge.id" />
</svg>
<ConnectionLine />

79
packages/core/src/container/NodeRenderer/NodeRenderer.vue
View File

@@ -1,35 +1,19 @@
<script lang="ts" setup>
import { getCurrentInstance, inject, nextTick, onBeforeUnmount, onMounted, ref, resolveComponent, watch } from 'vue'
import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { NodeWrapper } from '../../components'
import type { GraphNode, HandleConnectable, NodeComponent } from '../../types'
import { Slots } from '../../context'
import { useVueFlow } from '../../composables'
import { ErrorCode, VueFlowError } from '../../utils'
import { useNodesInitialized } from '../../composables/useNodesInitialized'
const {
getNodes,
nodesDraggable,
nodesFocusable,
elementsSelectable,
nodesConnectable,
getNodeTypes,
updateNodeDimensions,
emits,
} = useVueFlow()
const { getNodes, updateNodeDimensions, emits } = useVueFlow()
const nodesInitialized = useNodesInitialized()
const slots = inject(Slots)
const resizeObserver = ref<ResizeObserver>()
const instance = getCurrentInstance()
watch(
nodesInitialized,
(initialized) => {
if (initialized) {
(isInit) => {
if (isInit) {
nextTick(() => {
emits.nodesInitialized(getNodes.value)
})
@@ -55,47 +39,6 @@ onMounted(() => {
})
onBeforeUnmount(() => resizeObserver.value?.disconnect())
function draggable(nodeDraggable?: boolean) {
return typeof nodeDraggable === 'undefined' ? nodesDraggable.value : nodeDraggable
}
function selectable(nodeSelectable?: boolean) {
return typeof nodeSelectable === 'undefined' ? elementsSelectable.value : nodeSelectable
}
function connectable(nodeConnectable?: HandleConnectable) {
return typeof nodeConnectable === 'undefined' ? nodesConnectable.value : nodeConnectable
}
function focusable(nodeFocusable?: boolean) {
return typeof nodeFocusable === 'undefined' ? nodesFocusable.value : nodeFocusable
}
function getType(type?: string, template?: GraphNode['template']) {
const name = type || 'default'
const slot = slots?.[`node-${name}`]
if (slot) {
return slot
}
let nodeType = template ?? getNodeTypes.value[name]
if (typeof nodeType === 'string') {
if (instance) {
const components = Object.keys(instance.appContext.components)
if (components && components.includes(name)) {
nodeType = resolveComponent(name, false) as NodeComponent
}
}
}
if (nodeType && typeof nodeType !== 'string') {
return nodeType
}
emits.error(new VueFlowError(ErrorCode.NODE_TYPE_MISSING, nodeType))
return false
}
</script>
<script lang="ts">
@@ -108,19 +51,7 @@ export default {
<template>
<div class="vue-flow__nodes vue-flow__container">
<template v-if="resizeObserver">
<NodeWrapper
v-for="node of getNodes"
:id="node.id"
:key="node.id"
:resize-observer="resizeObserver"
:type="getType(node.type, node.template)"
:name="node.type || 'default'"
:draggable="draggable(node.draggable)"
:selectable="selectable(node.selectable)"
:connectable="connectable(node.connectable)"
:focusable="focusable(node.focusable)"
:node="node"
/>
<NodeWrapper v-for="node of getNodes" :id="node.id" :key="node.id" v-memo="[node.id]" :resize-observer="resizeObserver" />
</template>
</div>
</template>