357 lines
12 KiB
TypeScript
357 lines
12 KiB
TypeScript
import { computed, defineComponent, h, onBeforeUnmount, onMounted, provide, ref, watch } from 'vue'
|
|
import { until, useVModel } from '@vueuse/core'
|
|
import type { GraphNode, HandleConnectable, NodeComponent } from '~/types'
|
|
import { NodeId, NodeRef } from '~/context'
|
|
import { isInputDOMNode, useDrag, useNodeHooks, useUpdateNodePositions, useVueFlow } from '~/composables'
|
|
import {
|
|
ARIA_NODE_DESC_KEY,
|
|
arrowKeyDiffs,
|
|
calcNextPosition,
|
|
elementSelectionKeys,
|
|
getConnectedEdges,
|
|
getXYZPos,
|
|
handleNodeClick,
|
|
isNumber,
|
|
} from '~/utils'
|
|
|
|
interface Props {
|
|
id: string
|
|
draggable: boolean
|
|
selectable: boolean
|
|
connectable: HandleConnectable
|
|
focusable: boolean
|
|
type: NodeComponent | Function | 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'],
|
|
setup(props: Props) {
|
|
provide(NodeId, props.id)
|
|
|
|
const {
|
|
id: vueFlowId,
|
|
edges,
|
|
noPanClassName,
|
|
selectNodesOnDrag,
|
|
nodesSelectionActive,
|
|
multiSelectionActive,
|
|
emits,
|
|
findNode,
|
|
removeSelectedNodes,
|
|
addSelectedNodes,
|
|
updateNodeDimensions,
|
|
onUpdateNodeInternals,
|
|
getIntersectingNodes,
|
|
getNodeTypes,
|
|
nodeExtent,
|
|
elevateNodesOnSelect,
|
|
disableKeyboardA11y,
|
|
ariaLiveMessage,
|
|
snapToGrid,
|
|
snapGrid,
|
|
} = useVueFlow()
|
|
|
|
const updateNodePositions = useUpdateNodePositions()
|
|
|
|
const node = useVModel(props, 'node')
|
|
|
|
const parentNode = computed(() => findNode(node.value.parentNode))
|
|
|
|
const connectedEdges = computed(() => getConnectedEdges([node.value], edges.value))
|
|
|
|
const nodeElement = ref<HTMLDivElement | null>(null)
|
|
|
|
provide(NodeRef, nodeElement)
|
|
|
|
const { emit, on } = useNodeHooks(node.value, emits)
|
|
|
|
const dragging = useDrag({
|
|
id: props.id,
|
|
el: nodeElement,
|
|
disabled: () => !props.draggable,
|
|
selectable: () => props.selectable,
|
|
dragHandle: () => node.value.dragHandle,
|
|
onStart(args) {
|
|
emit.dragStart({ ...args, intersections: getIntersectingNodes(node.value) })
|
|
},
|
|
onDrag(args) {
|
|
emit.drag({ ...args, intersections: getIntersectingNodes(node.value) })
|
|
},
|
|
onStop(args) {
|
|
emit.dragStop({ ...args, intersections: getIntersectingNodes(node.value) })
|
|
},
|
|
})
|
|
|
|
const getClass = computed(() => (node.value.class instanceof Function ? node.value.class(node.value) : node.value.class))
|
|
|
|
const getStyle = computed(() => {
|
|
const styles = (node.value.style instanceof Function ? node.value.style(node.value) : node.value.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
|
|
|
|
if (width) {
|
|
styles.width = typeof width === 'string' ? width : `${width}px`
|
|
}
|
|
|
|
if (height) {
|
|
styles.height = typeof height === 'string' ? height : `${height}px`
|
|
}
|
|
|
|
return styles
|
|
})
|
|
|
|
const zIndex = () => Number(node.value.zIndex ?? getStyle.value.zIndex ?? 0)
|
|
|
|
onUpdateNodeInternals((updateIds) => {
|
|
if (updateIds.includes(props.id)) {
|
|
updateInternals()
|
|
}
|
|
})
|
|
|
|
onMounted(() => {
|
|
props.resizeObserver.observe(nodeElement.value as HTMLDivElement)
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
props.resizeObserver.unobserve(nodeElement.value as HTMLDivElement)
|
|
})
|
|
|
|
watch(
|
|
[() => node.value.type, () => node.value.sourcePosition, () => node.value.targetPosition],
|
|
() => {
|
|
updateNodeDimensions([{ id: props.id, nodeElement: nodeElement.value as HTMLDivElement, forceUpdate: true }])
|
|
},
|
|
{ flush: 'pre' },
|
|
)
|
|
|
|
/** this watcher only updates XYZPosition (when dragging a parent etc) */
|
|
watch(
|
|
[
|
|
() => node.value.position.x,
|
|
() => node.value.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,
|
|
() => parentNode.value?.dimensions.height,
|
|
() => parentNode.value?.dimensions.width,
|
|
],
|
|
([newX, newY, parentX, parentY, parentZ, nodeZIndex]) => {
|
|
const xyzPos = {
|
|
x: newX,
|
|
y: newY,
|
|
z: nodeZIndex + (elevateNodesOnSelect.value ? (node.value.selected ? 1000 : 0) : 0),
|
|
}
|
|
|
|
if (isNumber(parentX) && isNumber(parentY)) {
|
|
node.value.computedPosition = getXYZPos({ x: parentX, y: parentY, z: parentZ! }, xyzPos)
|
|
} else {
|
|
node.value.computedPosition = xyzPos
|
|
}
|
|
},
|
|
{ flush: 'pre', immediate: true },
|
|
)
|
|
|
|
watch([() => node.value.extent, nodeExtent], ([nodeExtent, globalExtent], [oldNodeExtent, oldGlobalExtent]) => {
|
|
// update position if extent has actually changed
|
|
if (nodeExtent !== oldNodeExtent || globalExtent !== oldGlobalExtent) {
|
|
clampPosition()
|
|
}
|
|
})
|
|
|
|
// 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')
|
|
) {
|
|
until(() => node.value.initialized)
|
|
.toBe(true)
|
|
.then(clampPosition)
|
|
}
|
|
// if extent is not parent, we can clamp it immediately
|
|
else {
|
|
clampPosition()
|
|
}
|
|
|
|
return () =>
|
|
h(
|
|
'div',
|
|
{
|
|
'ref': nodeElement,
|
|
'data-id': node.value.id,
|
|
'class': [
|
|
'vue-flow__node',
|
|
`vue-flow__node-${props.type === false ? 'default' : props.name}`,
|
|
{
|
|
[noPanClassName.value]: props.draggable,
|
|
dragging: dragging?.value,
|
|
selected: node.value.selected,
|
|
selectable: props.selectable,
|
|
parent: node.value.isParent,
|
|
},
|
|
getClass.value,
|
|
],
|
|
'style': {
|
|
zIndex: node.value.computedPosition.z ?? zIndex(),
|
|
transform: `translate(${node.value.computedPosition.x}px,${node.value.computedPosition.y}px)`,
|
|
pointerEvents: props.selectable || props.draggable ? 'all' : 'none',
|
|
visibility: node.value.initialized ? 'visible' : 'hidden',
|
|
...getStyle.value,
|
|
},
|
|
'tabIndex': props.focusable ? 0 : undefined,
|
|
'role': props.focusable ? 'button' : undefined,
|
|
'aria-describedby': disableKeyboardA11y.value ? undefined : `${ARIA_NODE_DESC_KEY}-${vueFlowId}`,
|
|
'aria-label': node.value.ariaLabel,
|
|
'onMouseenter': onMouseEnter,
|
|
'onMousemove': onMouseMove,
|
|
'onMouseleave': onMouseLeave,
|
|
'onContextmenu': onContextMenu,
|
|
'onClick': onSelectNode,
|
|
'onDblclick': onDoubleClick,
|
|
'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,
|
|
dragging: dragging.value,
|
|
connectable: props.connectable,
|
|
position: node.value.position,
|
|
dimensions: node.value.dimensions,
|
|
isValidTargetPos: node.value.isValidTargetPos,
|
|
isValidSourcePos: node.value.isValidSourcePos,
|
|
parent: node.value.parentNode,
|
|
zIndex: node.value.computedPosition.z,
|
|
targetPosition: node.value.targetPosition,
|
|
sourcePosition: node.value.sourcePosition,
|
|
label: node.value.label,
|
|
dragHandle: node.value.dragHandle,
|
|
onUpdateNodeInternals: updateInternals,
|
|
}),
|
|
],
|
|
)
|
|
|
|
/** this re-calculates the current position, necessary for clamping by a node's extent */
|
|
function clampPosition() {
|
|
const nextPos = node.value.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,
|
|
)
|
|
|
|
// 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.value.position.x !== position.x || node.value.position.y !== position.y) {
|
|
node.value.position = position
|
|
}
|
|
}
|
|
|
|
function updateInternals() {
|
|
if (nodeElement.value) {
|
|
updateNodeDimensions([{ id: props.id, nodeElement: nodeElement.value, forceUpdate: true }])
|
|
}
|
|
}
|
|
|
|
function onMouseEnter(event: MouseEvent) {
|
|
if (!dragging?.value) {
|
|
emit.mouseEnter({ event, node: node.value, connectedEdges: connectedEdges.value })
|
|
}
|
|
}
|
|
|
|
function onMouseMove(event: MouseEvent) {
|
|
if (!dragging?.value) {
|
|
emit.mouseMove({ event, node: node.value, connectedEdges: connectedEdges.value })
|
|
}
|
|
}
|
|
|
|
function onMouseLeave(event: MouseEvent) {
|
|
if (!dragging?.value) {
|
|
emit.mouseLeave({ event, node: node.value, connectedEdges: connectedEdges.value })
|
|
}
|
|
}
|
|
|
|
function onContextMenu(event: MouseEvent) {
|
|
return emit.contextMenu({ event, node: node.value, connectedEdges: connectedEdges.value })
|
|
}
|
|
|
|
function onDoubleClick(event: MouseEvent) {
|
|
return emit.doubleClick({ event, node: node.value, connectedEdges: connectedEdges.value })
|
|
}
|
|
|
|
function onSelectNode(event: MouseEvent) {
|
|
if (props.selectable && (!selectNodesOnDrag.value || !props.draggable)) {
|
|
handleNodeClick(
|
|
node.value,
|
|
multiSelectionActive.value,
|
|
addSelectedNodes,
|
|
removeSelectedNodes,
|
|
nodesSelectionActive,
|
|
false,
|
|
nodeElement.value!,
|
|
)
|
|
}
|
|
|
|
emit.click({ event, node: node.value, connectedEdges: connectedEdges.value })
|
|
}
|
|
|
|
function onKeyDown(event: KeyboardEvent) {
|
|
if (isInputDOMNode(event)) {
|
|
return
|
|
}
|
|
|
|
if (elementSelectionKeys.includes(event.key) && props.selectable) {
|
|
const unselect = event.key === 'Escape'
|
|
|
|
handleNodeClick(
|
|
node.value,
|
|
multiSelectionActive.value,
|
|
addSelectedNodes,
|
|
removeSelectedNodes,
|
|
nodesSelectionActive,
|
|
unselect,
|
|
nodeElement.value!,
|
|
)
|
|
} else if (!disableKeyboardA11y.value && props.draggable && node.value.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}`
|
|
|
|
updateNodePositions(
|
|
{
|
|
x: arrowKeyDiffs[event.key].x,
|
|
y: arrowKeyDiffs[event.key].y,
|
|
},
|
|
event.shiftKey,
|
|
)
|
|
}
|
|
}
|
|
},
|
|
})
|
|
|
|
export default NodeWrapper
|