test(adoptUserNodes): add unit test

examples/react/cypress/components/utils/adopt-user-nodes.cy.ts

@@ -0,0 +1,119 @@
+import { adoptUserNodes } from '@xyflow/system';
+
+import type { Node, NodeLookup, ParentLookup } from '@xyflow/react';
+
+describe('adoptUserNodes Testing', () => {
+  it('builds node lookup', () => {
+    const nodeLookup: NodeLookup = new Map();
+    const parentLookup: ParentLookup = new Map();
+
+    const userNode: Node = {
+      id: '1',
+      data: { label: 'node' },
+      position: { x: 250, y: 5 },
+      measured: { width: 100, height: 50 },
+    };
+
+    adoptUserNodes([userNode], nodeLookup, parentLookup);
+    const internalNode = nodeLookup.get('1');
+
+    expect(nodeLookup.size).to.equal(1);
+    expect(internalNode).to.have.property('internals');
+  });
+
+  it('calculates positionAbsolute with nodeOrigin', () => {
+    const nodeLookup: NodeLookup = new Map();
+    const parentLookup: ParentLookup = new Map();
+
+    const userNode: Node = {
+      id: '1',
+      data: { label: 'node' },
+      position: { x: 250, y: 5 },
+      measured: { width: 100, height: 50 },
+    };
+
+    adoptUserNodes([userNode], nodeLookup, parentLookup, {
+      nodeOrigin: [0.5, 0.5],
+    });
+    const internalNode = nodeLookup.get('1');
+
+    expect(internalNode.internals.positionAbsolute.x).to.equal(userNode.position.x - userNode.measured.width / 2);
+    expect(internalNode.internals.positionAbsolute.y).to.equal(userNode.position.y - userNode.measured.height / 2);
+  });
+
+  it('calculates positionAbsolute for sub flow', () => {
+    const nodeLookup: NodeLookup = new Map();
+    const parentLookup: ParentLookup = new Map();
+
+    const userParentNode: Node = {
+      id: '1',
+      data: { label: 'node' },
+      position: { x: 100, y: 100 },
+      measured: { width: 100, height: 50 },
+    };
+
+    const userChildNode: Node = {
+      id: '2',
+      data: { label: 'child' },
+      position: { x: 0, y: 0 },
+      measured: { width: 100, height: 50 },
+      parentId: '1',
+    };
+
+    adoptUserNodes([userParentNode, userChildNode], nodeLookup, parentLookup);
+
+    const internalParentNode = nodeLookup.get('1');
+    const internalChildNode = nodeLookup.get('2');
+
+    expect(nodeLookup.size).to.equal(2);
+
+    expect(internalChildNode.internals.positionAbsolute.x).to.equal(
+      userChildNode.position.x + userParentNode.position.x
+    );
+    expect(internalChildNode.internals.positionAbsolute.y).to.equal(
+      userChildNode.position.y + userParentNode.position.y
+    );
+  });
+
+  it('calculates positionAbsolute for sub flow with nodeOrigin', () => {
+    const nodeLookup: NodeLookup = new Map();
+    const parentLookup: ParentLookup = new Map();
+    const nodeOrigin = [0.5, 0.5];
+
+    const userParentNode: Node = {
+      id: '1',
+      data: { label: 'node' },
+      position: { x: 100, y: 100 },
+      measured: { width: 100, height: 50 },
+    };
+
+    const userChildNode: Node = {
+      id: '2',
+      data: { label: 'child' },
+      position: { x: 0, y: 0 },
+      measured: { width: 100, height: 50 },
+      parentId: '1',
+    };
+
+    adoptUserNodes([userParentNode, userChildNode], nodeLookup, parentLookup, {
+      nodeOrigin,
+    });
+
+    const internalParentNode = nodeLookup.get('1');
+    const internalChildNode = nodeLookup.get('2');
+
+    const expectedParentX = userParentNode.position.x - userParentNode.measured.width * nodeOrigin[0];
+    const expectedParentY = userParentNode.position.y - userParentNode.measured.height * nodeOrigin[1];
+
+    expect(internalParentNode.internals.positionAbsolute.x).to.equal(expectedParentX);
+    expect(internalParentNode.internals.positionAbsolute.y).to.equal(expectedParentY);
+
+    const expectedChildX = userChildNode.position.x - userChildNode.measured.width * nodeOrigin[0] + expectedParentX;
+    const expectedChildY = userChildNode.position.y - userChildNode.measured.height * nodeOrigin[1] + expectedParentY;
+
+    expect(internalChildNode.internals.positionAbsolute.x).to.equal(expectedChildX);
+    expect(internalChildNode.internals.positionAbsolute.y).to.equal(expectedChildY);
+  });
+});
+
+export {};

examples/react/package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "@reduxjs/toolkit": "^2.2.3",
     "@xyflow/react": "workspace:*",
+    "@xyflow/system": "^0.0.41",
     "classcat": "^5.0.4",
     "dagre": "^0.8.5",
     "localforage": "^1.10.0",

pnpm-lock.yaml

@@ -101,6 +101,9 @@ importers:
       '@xyflow/react':
         specifier: workspace:*
         version: link:../../packages/react
+      '@xyflow/system':
+        specifier: ^0.0.41
+        version: 0.0.41
       classcat:
         specifier: ^5.0.4
         version: 5.0.4
@@ -2211,6 +2214,9 @@ packages:
     peerDependencies:
       vite: ^4.2.0 || ^5.0.0
 
+  '@xyflow/system@0.0.41':
+    resolution: {integrity: sha512-XAjs8AUA0YMfYD91cT6pLGALwbsPS64s2WBHyULqL1m0gTqXqaUSLK1P7qA/Q8HecN0RFbqlM2tPO8bmZXP0YQ==}
+
   acorn-jsx@5.3.2:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
@@ -8424,6 +8430,16 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@xyflow/system@0.0.41':
+    dependencies:
+      '@types/d3-drag': 3.0.7
+      '@types/d3-selection': 3.0.10
+      '@types/d3-transition': 3.0.8
+      '@types/d3-zoom': 3.0.8
+      d3-drag: 3.0.0
+      d3-selection: 3.0.0
+      d3-zoom: 3.0.0
+
   acorn-jsx@5.3.2(acorn@8.10.0):
     dependencies:
       acorn: 8.10.0