From 3e59ab94f008e2d82dbb910836a37d6a50b010f8 Mon Sep 17 00:00:00 2001 From: moklick Date: Tue, 9 Apr 2024 13:26:54 +0200 Subject: [PATCH] refactor(nodes): rename parentNode to parentId --- .../react/src/examples/NodeResizer/index.tsx | 6 +++--- examples/react/src/examples/Subflow/index.tsx | 16 +++++++------- .../routes/examples/node-resizer/+page.svelte | 4 ++-- .../src/routes/examples/subflows/+page.svelte | 12 +++++------ packages/react/src/store/index.ts | 1 + packages/system/src/types/nodes.ts | 4 ++-- packages/system/src/utils/graph.ts | 4 ++-- packages/system/src/utils/store.ts | 21 ++++++++++--------- packages/system/src/xydrag/utils.ts | 8 +++---- packages/system/src/xyresizer/XYResizer.ts | 4 ++-- 10 files changed, 41 insertions(+), 39 deletions(-) diff --git a/examples/react/src/examples/NodeResizer/index.tsx b/examples/react/src/examples/NodeResizer/index.tsx index b0a272f2..7afb411f 100644 --- a/examples/react/src/examples/NodeResizer/index.tsx +++ b/examples/react/src/examples/NodeResizer/index.tsx @@ -137,7 +137,7 @@ const initialNodes: Node[] = [ label: 'Child with extent: parent', }, position: { x: 50, y: 50 }, - parentNode: '5', + parentId: '5', extent: 'parent', width: 50, height: 100, @@ -148,7 +148,7 @@ const initialNodes: Node[] = [ type: 'defaultResizer', data: { label: 'Child with expandParent' }, position: { x: 150, y: 100 }, - parentNode: '5', + parentId: '5', expandParent: true, style: { ...nodeStyle }, }, @@ -157,7 +157,7 @@ const initialNodes: Node[] = [ type: 'defaultResizer', data: { label: 'Child with expandParent & keepAspectRatio', keepAspectRatio: true }, position: { x: 25, y: 200 }, - parentNode: '5', + parentId: '5', expandParent: true, style: { ...nodeStyle }, }, diff --git a/examples/react/src/examples/Subflow/index.tsx b/examples/react/src/examples/Subflow/index.tsx index 8ea28e34..7f1b3f4b 100644 --- a/examples/react/src/examples/Subflow/index.tsx +++ b/examples/react/src/examples/Subflow/index.tsx @@ -50,7 +50,7 @@ const initialNodes: Node[] = [ data: { label: 'Node 4a' }, position: { x: 15, y: 15 }, className: 'light', - parentNode: '4', + parentId: '4', origin: [0.5, 0.5], extent: [ @@ -68,21 +68,21 @@ const initialNodes: Node[] = [ height: 200, width: 300, }, - parentNode: '4', + parentId: '4', }, { id: '4b1', data: { label: 'Node 4b1' }, position: { x: 40, y: 20 }, className: 'light', - parentNode: '4b', + parentId: '4b', }, { id: '4b2', data: { label: 'Node 4b2' }, position: { x: 20, y: 100 }, className: 'light', - parentNode: '4b', + parentId: '4b', }, { id: '5', @@ -98,7 +98,7 @@ const initialNodes: Node[] = [ data: { label: 'Node 5a' }, position: { x: 0, y: 0 }, className: 'light', - parentNode: '5', + parentId: '5', extent: 'parent', }, { @@ -106,7 +106,7 @@ const initialNodes: Node[] = [ data: { label: 'Node 5b' }, position: { x: 225, y: 50 }, className: 'light', - parentNode: '5', + parentId: '5', expandParent: true, }, { @@ -160,7 +160,7 @@ const Subflow = () => { const updatePos = () => { setNodes((nds) => { return nds.map((n) => { - if (!n.parentNode) { + if (!n.parentId) { return { ...n, position: { @@ -194,7 +194,7 @@ const Subflow = () => { return nds.map((n) => { return { ...n, - hidden: !!n.parentNode && !n.hidden, + hidden: !!n.parentId && !n.hidden, }; }); }); diff --git a/examples/svelte/src/routes/examples/node-resizer/+page.svelte b/examples/svelte/src/routes/examples/node-resizer/+page.svelte index b7479b03..8e08174a 100644 --- a/examples/svelte/src/routes/examples/node-resizer/+page.svelte +++ b/examples/svelte/src/routes/examples/node-resizer/+page.svelte @@ -113,7 +113,7 @@ type: 'defaultResizer', data: { label: 'Child with extent parent' }, position: { x: 50, y: 50 }, - parentNode: '5', + parentId: '5', extent: 'parent', style: nodeStyle }, @@ -122,7 +122,7 @@ type: 'defaultResizer', data: { label: 'Child' }, position: { x: 100, y: 100 }, - parentNode: '5', + parentId: '5', style: nodeStyle } ]); diff --git a/examples/svelte/src/routes/examples/subflows/+page.svelte b/examples/svelte/src/routes/examples/subflows/+page.svelte index 4c57c171..a4574a6e 100644 --- a/examples/svelte/src/routes/examples/subflows/+page.svelte +++ b/examples/svelte/src/routes/examples/subflows/+page.svelte @@ -36,7 +36,7 @@ id: '4a', data: { label: 'Node 4a' }, position: { x: 15, y: 15 }, - parentNode: '4', + parentId: '4', extent: [ [0, 0], [100, 100] @@ -47,19 +47,19 @@ data: { label: 'Node 4b' }, position: { x: 100, y: 60 }, style: 'width: 300px; height: 200px;', - parentNode: '4' + parentId: '4' }, { id: '4b1', data: { label: 'Node 4b1' }, position: { x: 40, y: 20 }, - parentNode: '4b' + parentId: '4b' }, { id: '4b2', data: { label: 'Node 4b2' }, position: { x: 20, y: 100 }, - parentNode: '4b' + parentId: '4b' }, { id: '5', @@ -73,14 +73,14 @@ id: '5a', data: { label: 'Node 5a' }, position: { x: 0, y: 0 }, - parentNode: '5', + parentId: '5', extent: 'parent' }, { id: '5b', data: { label: 'Node 5b' }, position: { x: 225, y: 50 }, - parentNode: '5', + parentId: '5', expandParent: true }, { diff --git a/packages/react/src/store/index.ts b/packages/react/src/store/index.ts index 4b2c0e95..492d6186 100644 --- a/packages/react/src/store/index.ts +++ b/packages/react/src/store/index.ts @@ -120,6 +120,7 @@ const createRFStore = ({ const triggerChangeNodes: InternalNode[] = []; const changes: NodeChange[] = nodeDragItems.map((node) => { + // @todo add expandParent to drag item so that we can get rid of the look up here const internalNode = nodeLookup.get(node.id); const change: NodeChange = { id: node.id, diff --git a/packages/system/src/types/nodes.ts b/packages/system/src/types/nodes.ts index 7b85fef8..c8c85a55 100644 --- a/packages/system/src/types/nodes.ts +++ b/packages/system/src/types/nodes.ts @@ -43,7 +43,7 @@ export type NodeBase< initialWidth?: number; initialHeight?: number; /** Parent node id, used for creating sub-flows */ - parentNode?: string; + parentId?: string; zIndex?: number; /** Boundary a node can be moved in * @example 'parent' or [[0, 0], [100, 100]] @@ -129,7 +129,7 @@ export type NodeDragItem = { positionAbsolute: XYPosition; }; extent?: 'parent' | CoordinateExtent; - parentNode?: string; + parentId?: string; dragging?: boolean; origin?: NodeOrigin; expandParent?: boolean; diff --git a/packages/system/src/utils/graph.ts b/packages/system/src/utils/graph.ts index c53add40..273a0057 100644 --- a/packages/system/src/utils/graph.ts +++ b/packages/system/src/utils/graph.ts @@ -358,7 +358,7 @@ export function calculateNodePosition({ onError?: OnError; }): { position: XYPosition; positionAbsolute: XYPosition } { const node = nodeLookup.get(nodeId)!; - const parentNode = node.parentNode ? nodeLookup.get(node.parentNode) : undefined; + const parentNode = node.parentId ? nodeLookup.get(node.parentId) : undefined; const { x: parentX, y: parentY } = parentNode ? getNodePositionWithOrigin(parentNode, parentNode.origin || nodeOrigin).positionAbsolute : { x: 0, y: 0 }; @@ -440,7 +440,7 @@ export async function getElementsToRemove n.id === node.parentNode); + const parentHit = !isIncluded && node.parentId && matchingNodes.find((n) => n.id === node.parentId); if (isIncluded || parentHit) { matchingNodes.push(node); diff --git a/packages/system/src/utils/store.ts b/packages/system/src/utils/store.ts index e82e2dea..7ab5504a 100644 --- a/packages/system/src/utils/store.ts +++ b/packages/system/src/utils/store.ts @@ -31,13 +31,13 @@ export function updateAbsolutePositions( const selectedNodeZ: number = options?.elevateNodesOnSelect ? 1000 : 0; for (const [id, node] of nodeLookup) { - const parentId = node.parentNode; + const parentId = node.parentId; if (parentId && !nodeLookup.has(parentId)) { throw new Error(`Parent node ${parentId} not found`); } - if (node.parentNode || node.internals.isParent || parentNodeIds?.has(id)) { + if (parentId || node.internals.isParent || parentNodeIds?.has(id)) { const parentNode = parentId ? nodeLookup.get(parentId) : null; const { x, y, z } = calculateXYZPosition( node, @@ -87,8 +87,8 @@ export function adoptUserNodes( nodes.forEach((userNode) => { const currentStoreNode = tmpLookup.get(userNode.id); - if (userNode.parentNode) { - parentNodeIds.add(userNode.parentNode); + if (userNode.parentId) { + parentNodeIds.add(userNode.parentId); } if (userNode === currentStoreNode?.internals.userNode) { @@ -123,11 +123,11 @@ function calculateXYZPosition( result: XYZPosition, nodeOrigin: NodeOrigin = [0, 0] ): XYZPosition { - if (!node.parentNode) { + if (!node.parentId) { return result; } - const parentNode = nodeLookup.get(node.parentNode)!; + const parentNode = nodeLookup.get(node.parentId)!; const { position: parentNodePosition } = getNodePositionWithOrigin(parentNode, parentNode?.origin || nodeOrigin); return calculateXYZPosition( @@ -147,13 +147,14 @@ export function handleParentExpand(nodes: InternalNodeBase[], nodeLookup: NodeLo const chilNodeRects = new Map(); nodes.forEach((node) => { - if (node.expandParent && node.parentNode) { - const parentNode = nodeLookup.get(node.parentNode); + const parentId = node.parentId; + if (node.expandParent && parentId) { + const parentNode = nodeLookup.get(parentId); if (parentNode) { - const parentRect = chilNodeRects.get(node.parentNode) || nodeToRect(parentNode, node.origin); + const parentRect = chilNodeRects.get(parentId) || nodeToRect(parentNode, node.origin); const expandedRect = getBoundsOfRects(parentRect, nodeToRect(node, node.origin)); - chilNodeRects.set(node.parentNode, expandedRect); + chilNodeRects.set(parentId, expandedRect); } } }); diff --git a/packages/system/src/xydrag/utils.ts b/packages/system/src/xydrag/utils.ts index e4570b6e..adead2b7 100644 --- a/packages/system/src/xydrag/utils.ts +++ b/packages/system/src/xydrag/utils.ts @@ -5,11 +5,11 @@ export function wrapSelectionDragFunc(selectionFunc?: (event: MouseEvent, nodes: } export function isParentSelected(node: NodeType, nodeLookup: NodeLookup): boolean { - if (!node.parentNode) { + if (!node.parentId) { return false; } - const parentNode = nodeLookup.get(node.parentNode); + const parentNode = nodeLookup.get(node.parentId); if (!parentNode) { return false; @@ -46,7 +46,7 @@ export function getDragItems( for (const [id, node] of nodeLookup) { if ( (node.selected || node.id === nodeId) && - (!node.parentNode || !isParentSelected(node, nodeLookup)) && + (!node.parentId || !isParentSelected(node, nodeLookup)) && (node.draggable || (nodesDraggable && typeof node.draggable === 'undefined')) ) { const internalNode = nodeLookup.get(id)!; @@ -59,7 +59,7 @@ export function getDragItems( y: mousePos.y - (internalNode.internals.positionAbsolute?.y ?? 0), }, extent: internalNode.extent, - parentNode: internalNode.parentNode, + parentId: internalNode.parentId, origin: internalNode.origin, expandParent: internalNode.expandParent, internals: { diff --git a/packages/system/src/xyresizer/XYResizer.ts b/packages/system/src/xyresizer/XYResizer.ts index ce1bbd12..50a3e4aa 100644 --- a/packages/system/src/xyresizer/XYResizer.ts +++ b/packages/system/src/xyresizer/XYResizer.ts @@ -136,7 +136,7 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange }: XYResize parentNode = undefined; if (node.extent === 'parent' || node.expandParent) { - parentNode = nodeLookup.get(node.parentNode!); + parentNode = nodeLookup.get(node.parentId!); if (parentNode && node.extent === 'parent') { parentExtent = nodeToParentExtent(parentNode); } @@ -148,7 +148,7 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange }: XYResize childExtent = undefined; for (const [childId, child] of nodeLookup) { - if (child.parentNode === nodeId) { + if (child.parentId === nodeId) { childNodes.push({ id: childId, position: { ...child.position },