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

refactor(core): remove reactivity transform in node wrapper

Browse Source 
Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
braks
2023-05-11 15:33:42 +02:00
committed by Braks
parent 833afdbd97
commit a7db003b68
1 changed files with 82 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/components/Nodes/NodeWrapper.ts
+82 -77
View File
@@ -41,21 +41,21 @@ const NodeWrapper = defineComponent({
ariaLiveMessage, ariaLiveMessage,
snapToGrid, snapToGrid,
snapGrid, snapGrid,
} = $(useVueFlow()) } = useVueFlow()
const updateNodePositions = useUpdateNodePositions() const updateNodePositions = useUpdateNodePositions()
const node = $(useVModel(props, 'node')) const node = useVModel(props, 'node')
const parentNode = computed(() => findNode(node.parentNode)) const parentNode = computed(() => findNode(node.value.parentNode))
const connectedEdges = $computed(() => getConnectedEdges([node], edges)) const connectedEdges = computed(() => getConnectedEdges([node.value], edges.value))
const nodeElement = ref<HTMLDivElement>() const nodeElement = ref<HTMLDivElement>()
provide(NodeRef, nodeElement) provide(NodeRef, nodeElement)
const { emit, on } = useNodeHooks(node, emits) const { emit, on } = useNodeHooks(node.value, emits)
const dragging = useDrag({ const dragging = useDrag({
id: props.id, id: props.id,
@@ -63,23 +63,23 @@ const NodeWrapper = defineComponent({
disabled: () => !props.draggable, disabled: () => !props.draggable,
selectable: () => props.selectable, selectable: () => props.selectable,
onStart(args) { onStart(args) {
emit.dragStart({ ...args, intersections: getIntersectingNodes(node) }) emit.dragStart({ ...args, intersections: getIntersectingNodes(node.value) })
}, },
onDrag(args) { onDrag(args) {
emit.drag({ ...args, intersections: getIntersectingNodes(node) }) emit.drag({ ...args, intersections: getIntersectingNodes(node.value) })
}, },
onStop(args) { onStop(args) {
emit.dragStop({ ...args, intersections: getIntersectingNodes(node) }) emit.dragStop({ ...args, intersections: getIntersectingNodes(node.value) })
}, },
}) })
const getClass = computed(() => (node.class instanceof Function ? node.class(node) : node.class)) const getClass = computed(() => (node.value.class instanceof Function ? node.value.class(node.value) : node.value.class))
const getStyle = computed(() => { const getStyle = computed(() => {
const styles = (node.style instanceof Function ? node.style(node) : node.style) || {} const styles = (node.value.style instanceof Function ? node.value.style(node.value) : node.value.style) || {}
const width = node.width instanceof Function ? node.width(node) : node.width const width = node.value.width instanceof Function ? node.value.width(node.value) : node.value.width
const height = node.height instanceof Function ? node.height(node) : node.height const height = node.value.height instanceof Function ? node.value.height(node.value) : node.value.height
if (width) { if (width) {
styles.width = typeof width === 'string' ? width : `${width}px` styles.width = typeof width === 'string' ? width : `${width}px`
@@ -92,7 +92,7 @@ const NodeWrapper = defineComponent({
return styles return styles
}) })
const zIndex = () => Number(node.zIndex ?? getStyle.value.zIndex ?? 0) const zIndex = () => Number(node.value.zIndex ?? getStyle.value.zIndex ?? 0)
onUpdateNodeInternals((updateIds) => { onUpdateNodeInternals((updateIds) => {
if (updateIds.includes(props.id)) { if (updateIds.includes(props.id)) {
@@ -109,7 +109,7 @@ const NodeWrapper = defineComponent({
}) })
watch( watch(
[() => node.type, () => node.sourcePosition, () => node.targetPosition], [() => node.value.type, () => node.value.sourcePosition, () => node.value.targetPosition],
() => { () => {
updateNodeDimensions([{ id: props.id, nodeElement: nodeElement.value as HTMLDivElement, forceUpdate: true }]) updateNodeDimensions([{ id: props.id, nodeElement: nodeElement.value as HTMLDivElement, forceUpdate: true }])
}, },
@@ -119,15 +119,15 @@ const NodeWrapper = defineComponent({
/** this watcher only updates XYZPosition (when dragging a parent etc) */ /** this watcher only updates XYZPosition (when dragging a parent etc) */
watch( watch(
[ [
() => node.position.x, () => node.value.position.x,
() => node.position.y, () => node.value.position.y,
() => parentNode.value?.computedPosition.x, () => parentNode.value?.computedPosition.x,
() => parentNode.value?.computedPosition.y, () => parentNode.value?.computedPosition.y,
() => parentNode.value?.computedPosition.z, () => parentNode.value?.computedPosition.z,
() => zIndex(), () => zIndex(),
() => node.selected, () => node.value.selected,
() => node.dimensions.height, () => node.value.dimensions.height,
() => node.dimensions.width, () => node.value.dimensions.width,
() => parentNode.value?.dimensions.height, () => parentNode.value?.dimensions.height,
() => parentNode.value?.dimensions.width, () => parentNode.value?.dimensions.width,
], ],
@@ -135,19 +135,19 @@ const NodeWrapper = defineComponent({
const xyzPos = { const xyzPos = {
x: newX, x: newX,
y: newY, y: newY,
z: nodeZIndex + (elevateNodesOnSelect ? (node.selected ? 1000 : 0) : 0), z: nodeZIndex + (elevateNodesOnSelect.value ? (node.value.selected ? 1000 : 0) : 0),
} }
if (isNumber(parentX) && isNumber(parentY)) { if (isNumber(parentX) && isNumber(parentY)) {
node.computedPosition = getXYZPos({ x: parentX, y: parentY, z: parentZ! }, xyzPos) node.value.computedPosition = getXYZPos({ x: parentX, y: parentY, z: parentZ! }, xyzPos)
} else { } else {
node.computedPosition = xyzPos node.value.computedPosition = xyzPos
} }
}, },
{ flush: 'pre', immediate: true }, { flush: 'pre', immediate: true },
) )
watch([() => node.extent, () => nodeExtent], ([nodeExtent, globalExtent], [oldNodeExtent, oldGlobalExtent]) => { watch([() => node.value.extent, nodeExtent], ([nodeExtent, globalExtent], [oldNodeExtent, oldGlobalExtent]) => {
// update position if extent has actually changed // update position if extent has actually changed
if (nodeExtent !== oldNodeExtent || globalExtent !== oldGlobalExtent) { if (nodeExtent !== oldNodeExtent || globalExtent !== oldGlobalExtent) {
clampPosition() clampPosition()
@@ -157,10 +157,10 @@ const NodeWrapper = defineComponent({
// clamp initial position to nodes' extent // clamp initial position to nodes' extent
// if extent is parent, we need dimensions to properly clamp the position // if extent is parent, we need dimensions to properly clamp the position
if ( if (
node.extent === 'parent' || node.value.extent === 'parent' ||
(typeof node.extent === 'object' && 'range' in node.extent && node.extent.range === 'parent') (typeof node.value.extent === 'object' && 'range' in node.value.extent && node.value.extent.range === 'parent')
) { ) {
until(() => node.initialized) until(() => node.value.initialized)
.toBe(true) .toBe(true)
.then(clampPosition) .then(clampPosition)
} }
@@ -174,29 +174,29 @@ const NodeWrapper = defineComponent({
'div', 'div',
{ {
'ref': nodeElement, 'ref': nodeElement,
'data-id': node.id, 'data-id': node.value.id,
'class': [ 'class': [
'vue-flow__node', 'vue-flow__node',
`vue-flow__node-${props.type === false ? 'default' : props.name}`, `vue-flow__node-${props.type === false ? 'default' : props.name}`,
{ {
[noPanClassName]: props.draggable, [noPanClassName.value]: props.draggable,
dragging: dragging?.value, dragging: dragging?.value,
selected: node.selected, selected: node.value.selected,
selectable: props.selectable, selectable: props.selectable,
}, },
getClass.value, getClass.value,
], ],
'style': { 'style': {
zIndex: node.computedPosition.z ?? zIndex(), zIndex: node.value.computedPosition.z ?? zIndex(),
transform: `translate(${node.computedPosition.x}px,${node.computedPosition.y}px)`, transform: `translate(${node.value.computedPosition.x}px,${node.value.computedPosition.y}px)`,
pointerEvents: props.selectable || props.draggable ? 'all' : 'none', pointerEvents: props.selectable || props.draggable ? 'all' : 'none',
visibility: node.initialized ? 'visible' : 'hidden', visibility: node.value.initialized ? 'visible' : 'hidden',
...getStyle.value, ...getStyle.value,
}, },
'tabIndex': props.focusable ? 0 : undefined, 'tabIndex': props.focusable ? 0 : undefined,
'role': props.focusable ? 'button' : undefined, 'role': props.focusable ? 'button' : undefined,
'aria-describedby': disableKeyboardA11y ? undefined : `${ARIA_NODE_DESC_KEY}-${vueFlowId}`, 'aria-describedby': disableKeyboardA11y.value ? undefined : `${ARIA_NODE_DESC_KEY}-${vueFlowId}`,
'aria-label': node.ariaLabel, 'aria-label': node.value.ariaLabel,
'onMouseenter': onMouseEnter, 'onMouseenter': onMouseEnter,
'onMousemove': onMouseMove, 'onMousemove': onMouseMove,
'onMouseleave': onMouseLeave, 'onMouseleave': onMouseLeave,
@@ -206,25 +206,25 @@ const NodeWrapper = defineComponent({
'onKeydown': onKeyDown, 'onKeydown': onKeyDown,
}, },
[ [
h(props.type === false ? getNodeTypes.default : props.type, { h(props.type === false ? getNodeTypes.value.default : props.type, {
id: node.id, id: node.value.id,
type: node.type, type: node.value.type,
data: node.data, data: node.value.data,
events: { ...node.events, ...on }, events: { ...node.value.events, ...on },
selected: !!node.selected, selected: !!node.value.selected,
resizing: !!node.resizing, resizing: !!node.value.resizing,
dragging: dragging.value, dragging: dragging.value,
connectable: props.connectable, connectable: props.connectable,
position: node.position, position: node.value.position,
dimensions: node.dimensions, dimensions: node.value.dimensions,
isValidTargetPos: node.isValidTargetPos, isValidTargetPos: node.value.isValidTargetPos,
isValidSourcePos: node.isValidSourcePos, isValidSourcePos: node.value.isValidSourcePos,
parent: node.parentNode, parent: node.value.parentNode,
zIndex: node.computedPosition.z, zIndex: node.value.computedPosition.z,
targetPosition: node.targetPosition, targetPosition: node.value.targetPosition,
sourcePosition: node.sourcePosition, sourcePosition: node.value.sourcePosition,
label: node.label, label: node.value.label,
dragHandle: node.dragHandle, dragHandle: node.value.dragHandle,
onUpdateNodeInternals: updateInternals, onUpdateNodeInternals: updateInternals,
}), }),
], ],
@@ -232,22 +232,28 @@ const NodeWrapper = defineComponent({
/** this re-calculates the current position, necessary for clamping by a node's extent */ /** this re-calculates the current position, necessary for clamping by a node's extent */
function clampPosition() { function clampPosition() {
const nextPos = node.computedPosition const nextPos = node.value.computedPosition
if (snapToGrid) { if (snapToGrid.value) {
nextPos.x = snapGrid[0] * Math.round(nextPos.x / snapGrid[0]) nextPos.x = snapGrid.value[0] * Math.round(nextPos.x / snapGrid.value[0])
nextPos.y = snapGrid[1] * Math.round(nextPos.y / snapGrid[1]) nextPos.y = snapGrid.value[1] * Math.round(nextPos.y / snapGrid.value[1])
} }
const { computedPosition, position } = calcNextPosition(node, nextPos, emits.error, nodeExtent, parentNode.value) const { computedPosition, position } = calcNextPosition(
node.value,
nextPos,
emits.error,
nodeExtent.value,
parentNode.value,
)
// only overwrite positions if there are changes when clamping // only overwrite positions if there are changes when clamping
if (node.computedPosition.x !== computedPosition.x || node.computedPosition.y !== computedPosition.y) { if (node.value.computedPosition.x !== computedPosition.x || node.value.computedPosition.y !== computedPosition.y) {
node.computedPosition = { ...node.computedPosition, ...computedPosition } node.value.computedPosition = { ...node.value.computedPosition, ...computedPosition }
} }
if (node.position.x !== position.x || node.position.y !== position.y) { if (node.value.position.x !== position.x || node.value.position.y !== position.y) {
node.position = position node.value.position = position
} }
} }
@@ -259,44 +265,44 @@ const NodeWrapper = defineComponent({
function onMouseEnter(event: MouseEvent) { function onMouseEnter(event: MouseEvent) {
if (!dragging?.value) { if (!dragging?.value) {
emit.mouseEnter({ event, node, connectedEdges }) emit.mouseEnter({ event, node: node.value, connectedEdges: connectedEdges.value })
} }
} }
function onMouseMove(event: MouseEvent) { function onMouseMove(event: MouseEvent) {
if (!dragging?.value) { if (!dragging?.value) {
emit.mouseMove({ event, node, connectedEdges }) emit.mouseMove({ event, node: node.value, connectedEdges: connectedEdges.value })
} }
} }
function onMouseLeave(event: MouseEvent) { function onMouseLeave(event: MouseEvent) {
if (!dragging?.value) { if (!dragging?.value) {
emit.mouseLeave({ event, node, connectedEdges }) emit.mouseLeave({ event, node: node.value, connectedEdges: connectedEdges.value })
} }
} }
function onContextMenu(event: MouseEvent) { function onContextMenu(event: MouseEvent) {
return emit.contextMenu({ event, node, connectedEdges }) return emit.contextMenu({ event, node: node.value, connectedEdges: connectedEdges.value })
} }
function onDoubleClick(event: MouseEvent) { function onDoubleClick(event: MouseEvent) {
return emit.doubleClick({ event, node, connectedEdges }) return emit.doubleClick({ event, node: node.value, connectedEdges: connectedEdges.value })
} }
function onSelectNode(event: MouseEvent) { function onSelectNode(event: MouseEvent) {
if (props.selectable && (!selectNodesOnDrag || !props.draggable)) { if (props.selectable && (!selectNodesOnDrag.value || !props.draggable)) {
handleNodeClick( handleNodeClick(
node, node.value,
multiSelectionActive, multiSelectionActive.value,
addSelectedNodes, addSelectedNodes,
removeSelectedNodes, removeSelectedNodes,
$$(nodesSelectionActive), nodesSelectionActive,
false, false,
nodeElement.value!, nodeElement.value!,
) )
} }
emit.click({ event, node, connectedEdges }) emit.click({ event, node: node.value, connectedEdges: connectedEdges.value })
} }
function onKeyDown(event: KeyboardEvent) { function onKeyDown(event: KeyboardEvent) {
@@ -312,18 +318,17 @@ const NodeWrapper = defineComponent({
} }
handleNodeClick( handleNodeClick(
node, node.value,
multiSelectionActive, multiSelectionActive.value,
addSelectedNodes, addSelectedNodes,
removeSelectedNodes, removeSelectedNodes,
$$(nodesSelectionActive), nodesSelectionActive,
unselect, unselect,
nodeElement.value!, nodeElement.value!,
) )
} else if (!disableKeyboardA11y && props.draggable && node.selected && arrowKeyDiffs[event.key]) { } else if (!disableKeyboardA11y.value && props.draggable && node.value.selected && arrowKeyDiffs[event.key]) {
$$(ariaLiveMessage).value = `Moved selected node ${event.key ariaLiveMessage.value = `Moved selected node ${event.key.replace('Arrow', '').toLowerCase()}. New position, x: ${~~node
.replace('Arrow', '') .value.position.x}, y: ${~~node.value.position.y}`
.toLowerCase()}. New position, x: ${~~node.position.x}, y: ${~~node.position.y}`
updateNodePositions( updateNodePositions(
{ {