refactor(nodes): rename parentNode to parentId

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 },
   },

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,
         };
       });
     });

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
 		}
 	]);

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
 		},
 		{

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,

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;

packages/system/src/utils/graph.ts

@@ -358,7 +358,7 @@ export function calculateNodePosition<NodeType extends NodeBase>({
   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<NodeType extends NodeBase = NodeBase,
     }
 
     const isIncluded = nodeIds.includes(node.id);
-    const parentHit = !isIncluded && node.parentNode && matchingNodes.find((n) => n.id === node.parentNode);
+    const parentHit = !isIncluded && node.parentId && matchingNodes.find((n) => n.id === node.parentId);
 
     if (isIncluded || parentHit) {
       matchingNodes.push(node);

packages/system/src/utils/store.ts

@@ -31,13 +31,13 @@ export function updateAbsolutePositions<NodeType extends NodeBase>(
   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<NodeType extends NodeBase>(
   nodes.forEach((userNode) => {
     const currentStoreNode = tmpLookup.get(userNode.id);
 
-    if (userNode.parentNode) {
+    if (userNode.parentId) {
-      parentNodeIds.add(userNode.parentNode);
+      parentNodeIds.add(userNode.parentId);
     }
 
     if (userNode === currentStoreNode?.internals.userNode) {
@@ -123,11 +123,11 @@ function calculateXYZPosition<NodeType extends NodeBase>(
   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<string, Rect>();
 
   nodes.forEach((node) => {
-    if (node.expandParent && node.parentNode) {
+    const parentId = node.parentId;
-      const parentNode = nodeLookup.get(node.parentNode);
+    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);
       }
     }
   });

packages/system/src/xydrag/utils.ts

@@ -5,11 +5,11 @@ export function wrapSelectionDragFunc(selectionFunc?: (event: MouseEvent, nodes:
 }
 
 export function isParentSelected<NodeType extends NodeBase>(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<NodeType extends NodeBase>(
   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<NodeType extends NodeBase>(
           y: mousePos.y - (internalNode.internals.positionAbsolute?.y ?? 0),
         },
         extent: internalNode.extent,
-        parentNode: internalNode.parentNode,
+        parentId: internalNode.parentId,
         origin: internalNode.origin,
         expandParent: internalNode.expandParent,
         internals: {

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 },