diff --git a/examples/react/cypress/components/utils/adopt-user-nodes.cy.ts b/examples/react/cypress/components/utils/adopt-user-nodes.cy.ts new file mode 100644 index 00000000..acc3c8a3 --- /dev/null +++ b/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 {}; diff --git a/examples/react/package.json b/examples/react/package.json index 6b7362f5..ecbcb09f 100644 --- a/examples/react/package.json +++ b/examples/react/package.json @@ -16,6 +16,7 @@ "dependencies": { "@reduxjs/toolkit": "^2.2.3", "@xyflow/react": "workspace:*", + "@xyflow/system": "workspace:*", "classcat": "^5.0.4", "dagre": "^0.8.5", "localforage": "^1.10.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ad492c30..918e9fd6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -101,6 +101,9 @@ importers: '@xyflow/react': specifier: workspace:* version: link:../../packages/react + '@xyflow/system': + specifier: workspace:* + version: link:../../packages/system classcat: specifier: ^5.0.4 version: 5.0.4