diff --git a/examples/vite-app/cypress/components/hooks/useEdges.cy.tsx b/examples/vite-app/cypress/components/hooks/useEdges.cy.tsx index d64d9dfd..34b0ae3c 100644 --- a/examples/vite-app/cypress/components/hooks/useEdges.cy.tsx +++ b/examples/vite-app/cypress/components/hooks/useEdges.cy.tsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import ReactFlow, { Edge, useEdges } from '@xyflow/react'; +import { ReactFlow, Edge, useEdges } from '@xyflow/react'; import { nodes as initialNodes, edges as initialEdges } from '../../fixtures/simpleflow'; diff --git a/examples/vite-app/cypress/components/hooks/useNodes.cy.tsx b/examples/vite-app/cypress/components/hooks/useNodes.cy.tsx index 43b7c071..4f813e00 100644 --- a/examples/vite-app/cypress/components/hooks/useNodes.cy.tsx +++ b/examples/vite-app/cypress/components/hooks/useNodes.cy.tsx @@ -1,5 +1,5 @@ import { useEffect } from 'react'; -import ReactFlow, { Node, useNodes } from '@xyflow/react'; +import { ReactFlow, Node, useNodes } from '@xyflow/react'; import { nodes } from '../../fixtures/simpleflow'; diff --git a/examples/vite-app/cypress/components/hooks/useNodesInitialized.cy.tsx b/examples/vite-app/cypress/components/hooks/useNodesInitialized.cy.tsx index e70a68c8..c7d79b9d 100644 --- a/examples/vite-app/cypress/components/hooks/useNodesInitialized.cy.tsx +++ b/examples/vite-app/cypress/components/hooks/useNodesInitialized.cy.tsx @@ -1,4 +1,4 @@ -import ReactFlow, { useNodesInitialized } from '@xyflow/react'; +import { ReactFlow, useNodesInitialized } from '@xyflow/react'; import { nodes } from '../../fixtures/simpleflow'; import ControlledFlow from '../../support/ControlledFlow'; diff --git a/examples/vite-app/cypress/components/hooks/useOnViewportChange.cy.tsx b/examples/vite-app/cypress/components/hooks/useOnViewportChange.cy.tsx index 22da0e8e..41e4039c 100644 --- a/examples/vite-app/cypress/components/hooks/useOnViewportChange.cy.tsx +++ b/examples/vite-app/cypress/components/hooks/useOnViewportChange.cy.tsx @@ -1,4 +1,4 @@ -import ReactFlow, { useOnViewportChange, Viewport } from '@xyflow/react'; +import { ReactFlow, useOnViewportChange, Viewport } from '@xyflow/react'; describe('useOnViewportChange.cy.tsx', () => { it('listen to viewport drag', () => { diff --git a/examples/vite-app/cypress/components/hooks/useViewport.cy.tsx b/examples/vite-app/cypress/components/hooks/useViewport.cy.tsx index 7e2c8b6b..499376f1 100644 --- a/examples/vite-app/cypress/components/hooks/useViewport.cy.tsx +++ b/examples/vite-app/cypress/components/hooks/useViewport.cy.tsx @@ -1,4 +1,4 @@ -import ReactFlow, { useViewport, Viewport } from '@xyflow/react'; +import { ReactFlow, useViewport, Viewport } from '@xyflow/react'; describe('useViewport.cy.tsx', () => { it('handles drag', () => { diff --git a/examples/vite-app/cypress/components/reactflow/basic-props.cy.tsx b/examples/vite-app/cypress/components/reactflow/basic-props.cy.tsx index 30bf86b9..c8ac818a 100644 --- a/examples/vite-app/cypress/components/reactflow/basic-props.cy.tsx +++ b/examples/vite-app/cypress/components/reactflow/basic-props.cy.tsx @@ -1,4 +1,4 @@ -import ReactFlow, { EdgeProps } from '@xyflow/react'; +import { ReactFlow, EdgeProps } from '@xyflow/react'; import ControlledFlow from '../../support/ControlledFlow'; import * as simpleflow from '../../fixtures/simpleflow'; diff --git a/examples/vite-app/cypress/components/reactflow/multiple-instance.cy.tsx b/examples/vite-app/cypress/components/reactflow/multiple-instance.cy.tsx index a2fbef35..8a7da5e4 100644 --- a/examples/vite-app/cypress/components/reactflow/multiple-instance.cy.tsx +++ b/examples/vite-app/cypress/components/reactflow/multiple-instance.cy.tsx @@ -1,4 +1,4 @@ -import ReactFlow, { BaseEdge, EdgeLabelRenderer, EdgeProps, getSmoothStepPath, ReactFlowProvider } from '@xyflow/react'; +import { ReactFlow, BaseEdge, EdgeLabelRenderer, EdgeProps, getSmoothStepPath, ReactFlowProvider } from '@xyflow/react'; import * as simpleflow from '../../fixtures/simpleflow'; function CustomEdge(props: EdgeProps) { diff --git a/examples/vite-app/cypress/components/reactflow/uncontrolled.cy.tsx b/examples/vite-app/cypress/components/reactflow/uncontrolled.cy.tsx index 4b1eb0cf..e16a06c6 100644 --- a/examples/vite-app/cypress/components/reactflow/uncontrolled.cy.tsx +++ b/examples/vite-app/cypress/components/reactflow/uncontrolled.cy.tsx @@ -1,4 +1,4 @@ -import ReactFlow from '@xyflow/react'; +import { ReactFlow } from '@xyflow/react'; import { nodes, edges } from '../../fixtures/simpleflow'; diff --git a/examples/vite-app/cypress/components/reactflow/view-props.cy.tsx b/examples/vite-app/cypress/components/reactflow/view-props.cy.tsx index dd1377ba..d8297d42 100644 --- a/examples/vite-app/cypress/components/reactflow/view-props.cy.tsx +++ b/examples/vite-app/cypress/components/reactflow/view-props.cy.tsx @@ -1,4 +1,4 @@ -import ReactFlow, { ReactFlowProps, Viewport, useViewport, SnapGrid, CoordinateExtent, Node } from '@xyflow/react'; +import { ReactFlow, ReactFlowProps, Viewport, useViewport, SnapGrid, CoordinateExtent, Node } from '@xyflow/react'; import ControlledFlow from '../../support/ControlledFlow'; import * as simpleflow from '../../fixtures/simpleflow'; diff --git a/examples/vite-app/package.json b/examples/vite-app/package.json index 16a01a02..4bf5ff55 100644 --- a/examples/vite-app/package.json +++ b/examples/vite-app/package.json @@ -30,8 +30,8 @@ "@types/react-dom": "^18.0.6", "@vitejs/plugin-react": "4.0.0", "@vitejs/plugin-react-swc": "^3.3.2", - "cypress": "^10.6.0", - "cypress-real-events": "^1.7.1", + "cypress": "12.14.0", + "cypress-real-events": "1.8.1", "start-server-and-test": "^1.14.0", "typescript": "^4.9.4", "vite": "4.3.9" diff --git a/package.json b/package.json index 49679c47..0c6563a0 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,6 @@ "@typescript-eslint/parser": "latest", "autoprefixer": "^10.4.8", "concurrently": "^7.6.0", - "cypress": "^10.6.0", "eslint": "^8.22.0", "eslint-config-prettier": "^8.5.0", "eslint-plugin-prettier": "^4.2.1", diff --git a/packages/react/src/container/Viewport/index.tsx b/packages/react/src/container/Viewport/index.tsx index 64ed99d5..5a297c54 100644 --- a/packages/react/src/container/Viewport/index.tsx +++ b/packages/react/src/container/Viewport/index.tsx @@ -13,7 +13,7 @@ function Viewport({ children }: ViewportProps) { const transform = useStore(selector); return ( -
+
{children}
); diff --git a/packages/react/src/hooks/useResizeHandler.ts b/packages/react/src/hooks/useResizeHandler.ts index 6d8433ef..6c611e3d 100644 --- a/packages/react/src/hooks/useResizeHandler.ts +++ b/packages/react/src/hooks/useResizeHandler.ts @@ -8,6 +8,9 @@ function useResizeHandler(domNode: MutableRefObject): voi useEffect(() => { const updateDimensions = () => { + if (!domNode.current) { + return false; + } const size = getDimensions(domNode.current!); if (size.height === 0 || size.width === 0) { diff --git a/packages/react/src/store/index.ts b/packages/react/src/store/index.ts index 52100f9e..0b6772e2 100644 --- a/packages/react/src/store/index.ts +++ b/packages/react/src/store/index.ts @@ -1,15 +1,16 @@ import { createStore } from 'zustand'; import { clampPosition, - getDimensions, - fitView, - getHandleBounds, - internalsSymbol, - type CoordinateExtent, + fitView as fitViewSystem, + updateNodes, + updateAbsolutePositions, + panBy as panBySystem, + Dimensions, + updateNodeDimensions as updateNodeDimensionsSystem, } from '@xyflow/system'; import { applyNodeChanges, createSelectionChange, getSelectionChanges } from '../utils/changes'; -import { createNodeInternals, updateAbsoluteNodePositions, updateNodesAndEdgesSelections } from './utils'; +import { updateNodesAndEdgesSelections } from './utils'; import initialState from './initialState'; import type { ReactFlowState, @@ -20,6 +21,7 @@ import type { NodeSelectionChange, NodePositionChange, UnselectNodesAndEdgesParams, + FitViewOptions, } from '../types'; const createRFStore = () => @@ -27,7 +29,9 @@ const createRFStore = () => ...initialState, setNodes: (nodes: Node[]) => { const { nodes: storeNodes, nodeOrigin, elevateNodesOnSelect } = get(); - set({ nodes: createNodeInternals(nodes, storeNodes, nodeOrigin, elevateNodesOnSelect) }); + const nextNodes = updateNodes(nodes, storeNodes, { nodeOrigin, elevateNodesOnSelect }); + + set({ nodes: nextNodes }); }, getNodes: () => { return get().nodes; @@ -41,91 +45,49 @@ const createRFStore = () => const hasDefaultEdges = typeof edges !== 'undefined'; const nextNodes = hasDefaultNodes - ? createNodeInternals(nodes, [], get().nodeOrigin, get().elevateNodesOnSelect) + ? updateNodes(nodes, [], { + nodeOrigin: get().nodeOrigin, + elevateNodesOnSelect: get().elevateNodesOnSelect, + }) : []; const nextEdges = hasDefaultEdges ? edges : []; set({ nodes: nextNodes, edges: nextEdges, hasDefaultNodes, hasDefaultEdges }); }, updateNodeDimensions: (updates) => { - const { - onNodesChange, + const { onNodesChange, fitView, nodes, fitViewOnInit, fitViewDone, fitViewOnInitOptions, domNode, nodeOrigin } = + get(); + const changes: NodeDimensionChange[] = []; + + const updatedNodes = updateNodeDimensionsSystem( + updates, nodes, - fitViewOnInit, - fitViewOnInitDone, - fitViewOnInitOptions, domNode, nodeOrigin, - width, - height, - minZoom, - maxZoom, - panZoom, - } = get(); - const viewportNode = domNode?.querySelector('.react-flow__viewport'); + (id: string, dimensions: Dimensions) => { + changes.push({ + id: id, + type: 'dimensions', + dimensions, + }); + } + ); - if (!viewportNode) { + if (!updatedNodes) { return; } - const style = window.getComputedStyle(viewportNode); - const { m22: zoom } = new window.DOMMatrixReadOnly(style.transform); - const changes: NodeDimensionChange[] = []; + const nextNodes = updateAbsolutePositions(updatedNodes, nodeOrigin); - const nextNodes = nodes.map((node) => { - const update = updates.find((change) => change.id === node.id); - - if (update) { - const dimensions = getDimensions(update.nodeElement); - const doUpdate = !!( - dimensions.width && - dimensions.height && - (node.width !== dimensions.width || node.height !== dimensions.height || update.forceUpdate) - ); - - if (doUpdate) { - changes.push({ - id: node.id, - type: 'dimensions', - dimensions, - }); - - return { - ...node, - ...dimensions, - [internalsSymbol]: { - ...node[internalsSymbol], - handleBounds: { - source: getHandleBounds('.source', update.nodeElement, zoom, node.origin || nodeOrigin), - target: getHandleBounds('.target', update.nodeElement, zoom, node.origin || nodeOrigin), - }, - }, - }; - } - } - - return node; - }); - - updateAbsoluteNodePositions(nextNodes, nodeOrigin); - - const nextFitViewOnInitDone = - fitViewOnInitDone || + const nextFitViewDone = + fitViewDone || (fitViewOnInit && - !!panZoom && - fitView( - { - nodes: nextNodes, - width, - height, - panZoom, - minZoom, - maxZoom, - nodeOrigin, - }, - fitViewOnInitOptions - )); - set({ nodes: nextNodes, fitViewOnInitDone: nextFitViewOnInitDone }); + fitView({ + ...fitViewOnInitOptions, + nodes: nextNodes, + })); + + set({ nodes: nextNodes, fitViewDone: nextFitViewDone }); if (changes?.length > 0) { onNodesChange?.(changes); @@ -156,7 +118,10 @@ const createRFStore = () => if (changes?.length) { if (hasDefaultNodes) { const updatedNodes = applyNodeChanges(changes, nodes); - const nextNodes = createNodeInternals(updatedNodes, nodes, nodeOrigin, elevateNodesOnSelect); + const nextNodes = updateNodes(updatedNodes, nodes, { + nodeOrigin, + elevateNodesOnSelect, + }); set({ nodes: nextNodes }); } @@ -273,29 +238,28 @@ const createRFStore = () => }, panBy: (delta): boolean => { const { transform, width, height, panZoom, translateExtent } = get(); + return panBySystem({ delta, panZoom, transform, translateExtent, width, height }); + }, + fitView: (options?: FitViewOptions): boolean => { + const { panZoom, nodes, width, height, minZoom, maxZoom, nodeOrigin } = get(); + const fitViewNodes = options?.nodes || nodes; - if (!panZoom || (!delta.x && !delta.y)) { + if (!panZoom) { return false; } - const extent: CoordinateExtent = [ - [0, 0], - [width, height], - ]; - - const constrainedTransform = panZoom.setViewportConstrained( - { x: transform[0] + delta.x, y: transform[1] + delta.y, zoom: transform[2] }, - extent, - translateExtent + return fitViewSystem( + { + nodes: fitViewNodes as Node[], + width, + height, + panZoom, + minZoom, + maxZoom, + nodeOrigin, + }, + options ); - - const transformChanged = - !!constrainedTransform && - (transform[0] !== constrainedTransform.x || - transform[1] !== constrainedTransform.y || - transform[2] !== constrainedTransform.k); - - return transformChanged; }, cancelConnection: () => set({ diff --git a/packages/react/src/store/initialState.ts b/packages/react/src/store/initialState.ts index 3ecb8c2b..db673ef2 100644 --- a/packages/react/src/store/initialState.ts +++ b/packages/react/src/store/initialState.ts @@ -40,7 +40,7 @@ const initialState: ReactFlowStore = { elementsSelectable: true, elevateNodesOnSelect: true, fitViewOnInit: false, - fitViewOnInitDone: false, + fitViewDone: false, fitViewOnInitOptions: undefined, selectNodesOnDrag: true, diff --git a/packages/react/src/store/utils.ts b/packages/react/src/store/utils.ts index 209a807b..86cddde7 100644 --- a/packages/react/src/store/utils.ts +++ b/packages/react/src/store/utils.ts @@ -1,113 +1,6 @@ import type { StoreApi } from 'zustand'; -import { - internalsSymbol, - isNumeric, - getNodePositionWithOrigin, - type XYZPosition, - type NodeOrigin, -} from '@xyflow/system'; - import type { Edge, EdgeSelectionChange, Node, NodeSelectionChange, ReactFlowState } from '../types'; -type ParentNodes = Record; - -function calculateXYZPosition(node: Node, nodes: Node[], result: XYZPosition, nodeOrigin: NodeOrigin): XYZPosition { - if (!node.parentNode) { - return result; - } - - const parentNode = nodes.find((n) => n.id === node.parentNode)!; - const parentNodePosition = getNodePositionWithOrigin(parentNode, parentNode?.origin || nodeOrigin); - - return calculateXYZPosition( - parentNode, - nodes, - { - x: (result.x ?? 0) + parentNodePosition.x, - y: (result.y ?? 0) + parentNodePosition.y, - z: (parentNode[internalsSymbol]?.z ?? 0) > (result.z ?? 0) ? parentNode[internalsSymbol]?.z ?? 0 : result.z ?? 0, - }, - parentNode.origin || nodeOrigin - ); -} - -export function updateAbsoluteNodePositions(nodes: Node[], nodeOrigin: NodeOrigin, parentNodes?: ParentNodes) { - nodes.forEach((node) => { - if (node.parentNode && !nodes.find((n) => n.id === node.parentNode)) { - throw new Error(`Parent node ${node.parentNode} not found`); - } - - if (node.parentNode || parentNodes?.[node.id]) { - const parentNode = node.parentNode ? nodes.find((n) => n.id === node.parentNode) : null; - const { x, y, z } = calculateXYZPosition( - node, - nodes, - { - ...node.position, - z: node[internalsSymbol]?.z ?? 0, - }, - parentNode?.origin || nodeOrigin - ); - - node.positionAbsolute = { - x, - y, - }; - - node[internalsSymbol]!.z = z; - - if (parentNodes?.[node.id]) { - node[internalsSymbol]!.isParent = true; - } - } - }); -} - -export function createNodeInternals( - nodes: Node[], - storeNodes: Node[], - nodeOrigin: NodeOrigin, - elevateNodesOnSelect: boolean -): Node[] { - const nextNodes: Node[] = []; - const parentNodes: ParentNodes = {}; - const selectedNodeZ: number = elevateNodesOnSelect ? 1000 : 0; - - nodes.forEach((node) => { - const z = (isNumeric(node.zIndex) ? node.zIndex : 0) + (node.selected ? selectedNodeZ : 0); - const currInternals = storeNodes.find((n) => n.id === node.id); - - const updatedNode: Node = { - width: currInternals?.width, - height: currInternals?.height, - ...node, - positionAbsolute: { - x: node.position.x, - y: node.position.y, - }, - }; - - if (node.parentNode) { - updatedNode.parentNode = node.parentNode; - parentNodes[node.parentNode] = true; - } - - Object.defineProperty(updatedNode, internalsSymbol, { - enumerable: false, - value: { - handleBounds: currInternals?.[internalsSymbol]?.handleBounds, - z, - }, - }); - - nextNodes.push(updatedNode); - }); - - updateAbsoluteNodePositions(nodes, nodeOrigin, parentNodes); - - return nextNodes; -} - export function handleControlledSelectionChange( changes: NodeSelectionChange[] | EdgeSelectionChange[], items: NodeOrEdge[] diff --git a/packages/react/src/types/store.ts b/packages/react/src/types/store.ts index 5e489a41..7fff1f73 100644 --- a/packages/react/src/types/store.ts +++ b/packages/react/src/types/store.ts @@ -111,7 +111,7 @@ export type ReactFlowStore = { defaultEdgeOptions?: DefaultEdgeOptions; fitViewOnInit: boolean; - fitViewOnInitDone: boolean; + fitViewDone: boolean; fitViewOnInitOptions: FitViewOptions | undefined; onNodesDelete?: OnNodesDelete; @@ -151,11 +151,11 @@ export type ReactFlowActions = { setTranslateExtent: (translateExtent: CoordinateExtent) => void; setNodeExtent: (nodeExtent: CoordinateExtent) => void; cancelConnection: () => void; - // @todo can this be reused by system? updateConnection: UpdateConnection; reset: () => void; triggerNodeChanges: (changes: NodeChange[]) => void; panBy: PanBy; + fitView: (options?: FitViewOptions) => boolean; }; export type ReactFlowState = ReactFlowStore & ReactFlowActions; diff --git a/packages/svelte/README.md b/packages/svelte/README.md index 5de9a3fc..74834b81 100644 --- a/packages/svelte/README.md +++ b/packages/svelte/README.md @@ -28,8 +28,6 @@ A basic flow looks like this: BackgroundVariant, MiniMap, Panel, - createNodes, - createEdges, type NodeTypes } from '../../lib/index'; import { CustomNode } from './CustomNode'; diff --git a/packages/svelte/src/lib/container/Viewport/Viewport.svelte b/packages/svelte/src/lib/container/Viewport/Viewport.svelte index efdc15e6..11b864e6 100644 --- a/packages/svelte/src/lib/container/Viewport/Viewport.svelte +++ b/packages/svelte/src/lib/container/Viewport/Viewport.svelte @@ -5,7 +5,7 @@
diff --git a/packages/svelte/src/lib/store/edge-tree.ts b/packages/svelte/src/lib/store/edge-tree.ts index c4b3f53d..dbbe9827 100644 --- a/packages/svelte/src/lib/store/edge-tree.ts +++ b/packages/svelte/src/lib/store/edge-tree.ts @@ -63,12 +63,7 @@ export function getEdgeTree(store: SvelteFlowStoreState, onError: OnError) { if (edgePosition) { res.push({ ...edge, - sourceX: edgePosition.sourceX, - sourceY: edgePosition.sourceY, - targetX: edgePosition.targetX, - targetY: edgePosition.targetY, - sourcePosition: edgePosition.sourcePosition, - targetPosition: edgePosition.targetPosition + ...edgePosition }); } diff --git a/packages/svelte/src/lib/store/index.ts b/packages/svelte/src/lib/store/index.ts index 9934076d..fdd9814b 100644 --- a/packages/svelte/src/lib/store/index.ts +++ b/packages/svelte/src/lib/store/index.ts @@ -4,10 +4,9 @@ import { internalsSymbol, createMarkerIds, fitView as fitViewUtil, - getDimensions, getElementsToRemove, - getHandleBounds, - infiniteExtent, + panBy as panBySystem, + updateNodeDimensions as updateNodeDimensionsSystem, type UpdateNodePositions, type NodeDimensionUpdate, type ViewportHelperFunctionOptions, @@ -52,7 +51,6 @@ export function createStore(): SvelteFlowStore { function addEdge(edgeParams: Edge | Connection) { const edges = get(store.edges); - store.edges.set(addEdgeUtil(edgeParams, edges)); } @@ -64,6 +62,7 @@ export function createStore(): SvelteFlowStore { if (nodeDragItem) { return { ...n, + [internalsSymbol]: n[internalsSymbol], dragging, positionAbsolute: nodeDragItem.positionAbsolute, position: nodeDragItem.position @@ -76,54 +75,19 @@ export function createStore(): SvelteFlowStore { }; function updateNodeDimensions(updates: NodeDimensionUpdate[]) { - const viewportNode = document?.querySelector('.svelte-flow__viewport'); + const nextNodes = updateNodeDimensionsSystem( + updates, + get(store.nodes), + get(store.domNode), + get(store.nodeOrigin) + ); - if (!viewportNode) { + if (!nextNodes) { return; } - const style = window.getComputedStyle(viewportNode); - const { m22: zoom } = new window.DOMMatrixReadOnly(style.transform); - const nextNodes = get(store.nodes).map((node) => { - const update = updates.find((u) => u.id === node.id); - - if (update) { - const dimensions = getDimensions(update.nodeElement); - - const doUpdate = !!( - dimensions.width && - dimensions.height && - (node.width !== dimensions.width || - node.height !== dimensions.height || - update.forceUpdate) - ); - - if (doUpdate) { - const newNode = { - ...node, - width: dimensions.width, - height: dimensions.height, - [internalsSymbol]: { - ...node[internalsSymbol], - handleBounds: { - source: getHandleBounds('.source', update.nodeElement, zoom, node.origin), - target: getHandleBounds('.target', update.nodeElement, zoom, node.origin) - } - } - }; - - return newNode; - } - } - - return node; - }); - - const panZoom = get(store.panZoom); - const fitViewOnInitDone = - get(store.fitViewOnInitDone) || - (get(store.fitViewOnInit) && !!panZoom && fitView({ nodes: nextNodes })); + get(store.fitViewOnInitDone) || (get(store.fitViewOnInit) && fitView({ nodes: nextNodes })); store.fitViewOnInitDone.set(fitViewOnInitDone); store.nodes.set(nextNodes); @@ -174,22 +138,21 @@ export function createStore(): SvelteFlowStore { function fitView(options?: FitViewOptions) { const panZoom = get(store.panZoom); + const fitViewNodes = options?.nodes || get(store.nodes); if (!panZoom) { return false; } - const fitViewNodes = options?.nodes || get(store.nodes); - return fitViewUtil( { nodes: fitViewNodes as Node[], width: get(store.width), height: get(store.height), - minZoom: 0.2, - maxZoom: 2, + minZoom: get(store.minZoom), + maxZoom: get(store.maxZoom), panZoom, - nodeOrigin: [0, 0] + nodeOrigin: get(store.nodeOrigin) }, {} ); @@ -270,35 +233,14 @@ export function createStore(): SvelteFlowStore { } function panBy(delta: XYPosition) { - const panZoom = get(store.panZoom); - const transform = get(store.transform); - const width = get(store.width); - const height = get(store.height); - - if (!panZoom || (!delta.x && !delta.y)) { - return false; - } - - const nextViewport = panZoom.setViewportConstrained( - { - x: transform[0] + delta.x, - y: transform[1] + delta.y, - zoom: transform[2] - }, - [ - [0, 0], - [width, height] - ], - infiniteExtent - ); - - const transformChanged = - !!nextViewport && - (nextViewport.x !== transform[0] || - nextViewport.y !== transform[1] || - nextViewport.k !== transform[2]); - - return transformChanged; + return panBySystem({ + delta, + panZoom: get(store.panZoom), + transform: get(store.transform), + translateExtent: get(store.translateExtent), + width: get(store.width), + height: get(store.height) + }); } const updateConnection: UpdateConnection = (update) => { @@ -328,6 +270,8 @@ export function createStore(): SvelteFlowStore { store.selectionRectMode.set(null); store.snapGrid.set(null); store.isValidConnection.set(() => true); + store.nodes.set([]); + store.edges.set([]); unselectNodesAndEdges(); cancelConnection(); diff --git a/packages/svelte/src/lib/store/initial-store.ts b/packages/svelte/src/lib/store/initial-store.ts index 84b576df..07a9b96f 100644 --- a/packages/svelte/src/lib/store/initial-store.ts +++ b/packages/svelte/src/lib/store/initial-store.ts @@ -11,7 +11,8 @@ import { type PanZoomInstance, type CoordinateExtent, type IsValidConnection, - type GroupedEdges + type GroupedEdges, + type NodeOrigin } from '@xyflow/system'; import DefaultNode from '$lib/components/nodes/DefaultNode.svelte'; @@ -22,7 +23,7 @@ import StraightEdge from '$lib/components/edges/StraightEdge.svelte'; import SmoothStepEdge from '$lib/components/edges/SmoothStepEdge.svelte'; import StepEdge from '$lib/components/edges/StepEdge.svelte'; import type { ConnectionData, NodeTypes, EdgeTypes, EdgeLayouted, Node } from '$lib/types'; -import { createNodes, createEdges } from './utils'; +import { createNodesStore, createEdgesStore } from './utils'; export const initConnectionData = { connectionStartHandle: null, @@ -46,14 +47,15 @@ export const initialEdgeTypes = { export const getInitialStore = () => ({ flowId: writable(null), - nodes: createNodes([]), + nodes: createNodesStore([]), visibleNodes: readable([]), - edges: createEdges([]), + edges: createEdgesStore([]), edgeTree: readable[]>([]), height: writable(500), width: writable(500), minZoom: writable(0.5), maxZoom: writable(2), + nodeOrigin: writable([0, 0]), nodeExtent: writable(infiniteExtent), translateExtent: writable(infiniteExtent), autoPanOnNodeDrag: writable(true), diff --git a/packages/svelte/src/lib/store/utils.ts b/packages/svelte/src/lib/store/utils.ts index 5f75947b..3c94d315 100644 --- a/packages/svelte/src/lib/store/utils.ts +++ b/packages/svelte/src/lib/store/utils.ts @@ -6,17 +6,14 @@ import { type Writable, get } from 'svelte/store'; -import { - isNumeric, - getNodePositionWithOrigin, - internalsSymbol, - type XYZPosition -} from '@xyflow/system'; +import { updateNodes } from '@xyflow/system'; import type { DefaultEdgeOptions, DefaultNodeOptions, Edge, Node } from '$lib/types'; +// we need to sync the user nodes and the internal nodes so that the user can receive the updates +// made by Svelte Flow (like dragging or selecting a node). export function syncNodeStores( - nodesStore: ReturnType, + nodesStore: ReturnType, userNodesStore: Writable ) { const nodesStoreSetter = nodesStore.set; @@ -38,8 +35,9 @@ export function syncNodeStores( nodesStore.update = userNodesStore.update = (fn: (nds: Node[]) => Node[]) => _set(fn(val)); } +// same for edges export function syncEdgeStores( - edgesStore: ReturnType, + edgesStore: ReturnType, userEdgesStore: Writable ) { const nodesStoreSetter = edgesStore.set; @@ -58,66 +56,33 @@ export function syncEdgeStores( edgesStore.update = userEdgesStore.update = (fn: (nds: Edge[]) => Edge[]) => _set(fn(val)); } -export const createNodes = ( +export type NodeStoreOptions = { + elevateNodesOnSelect?: boolean; +}; + +// we are creating a custom store for the internals nodes in order to update the zIndex and positionAbsolute. +// The user only passes in relative positions, so we need to calculate the absolute positions based on the parent nodes. +export const createNodesStore = ( nodes: Node[] ): { subscribe: (this: void, run: Subscriber) => Unsubscriber; update: (this: void, updater: Updater) => void; set: (this: void, value: Node[]) => Node[]; setDefaultOptions: (opts: DefaultNodeOptions) => void; + setOptions: (opts: NodeStoreOptions) => void; } => { const { subscribe, set, update } = writable([]); let value = nodes; let defaults = {}; + let elevateNodesOnSelect = false; const _set = (nds: Node[]): Node[] => { - const parentNodes: Record = {}; - - const nextNodes = nds.map((n) => { - const node: Node = { ...defaults, ...n, positionAbsolute: n.position }; - const z = (isNumeric(node.zIndex) ? node.zIndex : 0) + (node.selected ? 1 : 0); - - if (node.parentNode) { - parentNodes[node.parentNode] = true; - } - - Object.defineProperty(node, internalsSymbol, { - value: { - handleBounds: node?.[internalsSymbol]?.handleBounds, - z - } - }); - - return node; + const nextNodes = updateNodes(nds, value, { + elevateNodesOnSelect, + defaults }); - const nodesWithPositions = nextNodes.map((node) => { - if (node.parentNode && !parentNodes[node.parentNode]) { - throw new Error(`Parent node ${node.parentNode} not found`); - } - - if (node.parentNode || parentNodes?.[node.id]) { - const { x, y, z } = calculateXYZPosition(node, nextNodes, { - ...node.position, - z: node[internalsSymbol]?.z ?? 0 - }); - - node.positionAbsolute = { - x, - y - }; - - node[internalsSymbol]!.z = z; - - if (parentNodes?.[node.id]) { - node[internalsSymbol]!.isParent = true; - } - } - - return node; - }); - - value = nodesWithPositions; + value = nextNodes; set(value); @@ -130,17 +95,22 @@ export const createNodes = ( defaults = options; }; + const setOptions = (options: NodeStoreOptions) => { + elevateNodesOnSelect = options.elevateNodesOnSelect ?? elevateNodesOnSelect; + }; + _set(value); return { subscribe, set: _set, update: _update, - setDefaultOptions + setDefaultOptions, + setOptions }; }; -export const createEdges = ( +export const createEdgesStore = ( edges: Edge[], defaultOptions?: DefaultEdgeOptions ): Writable & { setDefaultOptions: (opts: DefaultEdgeOptions) => void } => { @@ -169,20 +139,3 @@ export const createEdges = ( setDefaultOptions }; }; - -function calculateXYZPosition(node: Node, nodes: Node[], result: XYZPosition): XYZPosition { - if (!node.parentNode) { - return result; - } - const parentNode = nodes.find((n) => n.id === node.parentNode)!; - const parentNodePosition = getNodePositionWithOrigin(parentNode, parentNode?.origin); - - return calculateXYZPosition(parentNode, nodes, { - x: (result.x ?? 0) + parentNodePosition.x, - y: (result.y ?? 0) + parentNodePosition.y, - z: - (parentNode[internalsSymbol]?.z ?? 0) > (result.z ?? 0) - ? parentNode[internalsSymbol]?.z ?? 0 - : result.z ?? 0 - }); -} diff --git a/packages/svelte/src/routes/drag-n-drop/Flow.svelte b/packages/svelte/src/routes/drag-n-drop/Flow.svelte index 7545e254..f5a0b6d1 100644 --- a/packages/svelte/src/routes/drag-n-drop/Flow.svelte +++ b/packages/svelte/src/routes/drag-n-drop/Flow.svelte @@ -80,6 +80,10 @@ svelteFlow.nodes.update((nds) => nds.concat(newNode)); }; + + $: { + console.log($nodes); + }
diff --git a/packages/system/src/utils/index.ts b/packages/system/src/utils/index.ts index a482f65a..30a7e961 100644 --- a/packages/system/src/utils/index.ts +++ b/packages/system/src/utils/index.ts @@ -3,3 +3,4 @@ export * from './edges'; export * from './graph'; export * from './general'; export * from './marker'; +export * from './store'; diff --git a/packages/system/src/utils/store.ts b/packages/system/src/utils/store.ts new file mode 100644 index 00000000..ac1c622b --- /dev/null +++ b/packages/system/src/utils/store.ts @@ -0,0 +1,218 @@ +import { internalsSymbol } from '../constants'; +import { + BaseNode, + CoordinateExtent, + Dimensions, + NodeDimensionUpdate, + NodeOrigin, + PanZoomInstance, + Transform, + XYPosition, + XYZPosition, +} from '../types'; +import { getDimensions, getHandleBounds } from './dom'; +import { isNumeric } from './general'; +import { getNodePositionWithOrigin } from './graph'; + +type ParentNodes = Record; + +export function updateAbsolutePositions( + nodes: NodeType[], + nodeOrigin: NodeOrigin = [0, 0], + parentNodes?: ParentNodes +) { + return nodes.map((node) => { + if (node.parentNode && !nodes.find((n) => n.id === node.parentNode)) { + throw new Error(`Parent node ${node.parentNode} not found`); + } + + if (node.parentNode || parentNodes?.[node.id]) { + const parentNode = node.parentNode ? nodes.find((n) => n.id === node.parentNode) : null; + const { x, y, z } = calculateXYZPosition( + node, + nodes, + { + ...node.position, + z: node[internalsSymbol]?.z ?? 0, + }, + parentNode?.origin || nodeOrigin + ); + + node.positionAbsolute = { + x, + y, + }; + + node[internalsSymbol]!.z = z; + + if (parentNodes?.[node.id]) { + node[internalsSymbol]!.isParent = true; + } + } + + return node; + }); +} + +type UpdateNodesOptions = { + nodeOrigin?: NodeOrigin; + elevateNodesOnSelect?: boolean; + defaults?: Partial; +}; + +export function updateNodes( + nodes: NodeType[], + storeNodes: NodeType[], + options: UpdateNodesOptions = { + nodeOrigin: [0, 0] as NodeOrigin, + elevateNodesOnSelect: true, + defaults: {}, + } +): NodeType[] { + const parentNodes: ParentNodes = {}; + const selectedNodeZ: number = options?.elevateNodesOnSelect ? 1000 : 0; + + const nextNodes = nodes.map((n) => { + const currentStoreNode = storeNodes.find((storeNode) => n.id === storeNode.id); + const node: NodeType = { + ...options.defaults, + ...n, + positionAbsolute: n.position, + width: n.width || currentStoreNode?.width, + height: n.height || currentStoreNode?.height, + }; + const z = (isNumeric(n.zIndex) ? n.zIndex : 0) + (n.selected ? selectedNodeZ : 0); + const currInternals = n?.[internalsSymbol] || currentStoreNode?.[internalsSymbol]; + + if (node.parentNode) { + parentNodes[node.parentNode] = true; + } + + Object.defineProperty(node, internalsSymbol, { + enumerable: false, + value: { + handleBounds: currInternals?.handleBounds, + z, + }, + }); + + return node; + }); + + const nodesWithPositions = updateAbsolutePositions(nextNodes, options.nodeOrigin, parentNodes); + + return nodesWithPositions; +} + +function calculateXYZPosition( + node: NodeType, + nodes: NodeType[], + result: XYZPosition, + nodeOrigin: NodeOrigin +): XYZPosition { + if (!node.parentNode) { + return result; + } + + const parentNode = nodes.find((n) => n.id === node.parentNode)!; + const parentNodePosition = getNodePositionWithOrigin(parentNode, parentNode?.origin || nodeOrigin); + + return calculateXYZPosition( + parentNode, + nodes, + { + x: (result.x ?? 0) + parentNodePosition.x, + y: (result.y ?? 0) + parentNodePosition.y, + z: (parentNode[internalsSymbol]?.z ?? 0) > (result.z ?? 0) ? parentNode[internalsSymbol]?.z ?? 0 : result.z ?? 0, + }, + parentNode.origin || nodeOrigin + ); +} + +export function updateNodeDimensions( + updates: NodeDimensionUpdate[], + nodes: BaseNode[], + domNode: HTMLElement | null, + nodeOrigin?: NodeOrigin, + onUpdate?: (id: string, dimensions: Dimensions) => void +): BaseNode[] | null { + const viewportNode = domNode?.querySelector('.xyflow__viewport'); + + if (!viewportNode) { + return null; + } + + const style = window.getComputedStyle(viewportNode); + const { m22: zoom } = new window.DOMMatrixReadOnly(style.transform); + + const nextNodes = nodes.map((node) => { + const update = updates.find((u) => u.id === node.id); + if (update) { + const dimensions = getDimensions(update.nodeElement); + const doUpdate = !!( + dimensions.width && + dimensions.height && + (node.width !== dimensions.width || node.height !== dimensions.height || update.forceUpdate) + ); + + if (doUpdate) { + onUpdate?.(node.id, dimensions); + + return { + ...node, + ...dimensions, + [internalsSymbol]: { + ...node[internalsSymbol], + handleBounds: { + source: getHandleBounds('.source', update.nodeElement, zoom, node.origin || nodeOrigin), + target: getHandleBounds('.target', update.nodeElement, zoom, node.origin || nodeOrigin), + }, + }, + }; + } + } + + return node; + }); + + return nextNodes; +} + +export function panBy({ + delta, + panZoom, + transform, + translateExtent, + width, + height, +}: { + delta: XYPosition; + panZoom: PanZoomInstance | null; + transform: Transform; + translateExtent: CoordinateExtent; + width: number; + height: number; +}) { + if (!panZoom || (!delta.x && !delta.y)) { + return false; + } + + const nextViewport = panZoom.setViewportConstrained( + { + x: transform[0] + delta.x, + y: transform[1] + delta.y, + zoom: transform[2], + }, + [ + [0, 0], + [width, height], + ], + translateExtent + ); + + const transformChanged = + !!nextViewport && + (nextViewport.x !== transform[0] || nextViewport.y !== transform[1] || nextViewport.k !== transform[2]); + + return transformChanged; +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1784c019..0e112b55 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -62,8 +62,8 @@ importers: '@vitejs/plugin-react-swc': ^3.3.2 '@xyflow/react': workspace:* classcat: ^5.0.3 - cypress: ^10.6.0 - cypress-real-events: ^1.7.1 + cypress: 12.14.0 + cypress-real-events: 1.8.1 dagre: ^0.8.5 localforage: ^1.10.0 react: ^18.2.0 @@ -89,8 +89,8 @@ importers: '@types/react-dom': registry.npmjs.org/@types/react-dom/18.2.4 '@vitejs/plugin-react': registry.npmjs.org/@vitejs/plugin-react/4.0.0_vite@4.3.9 '@vitejs/plugin-react-swc': registry.npmjs.org/@vitejs/plugin-react-swc/3.3.2_vite@4.3.9 - cypress: registry.npmjs.org/cypress/10.11.0 - cypress-real-events: registry.npmjs.org/cypress-real-events/1.8.1_cypress@10.11.0 + cypress: registry.npmjs.org/cypress/12.14.0 + cypress-real-events: registry.npmjs.org/cypress-real-events/1.8.1_cypress@12.14.0 start-server-and-test: registry.npmjs.org/start-server-and-test/1.15.4 typescript: registry.npmjs.org/typescript/4.9.5 vite: registry.npmjs.org/vite/4.3.9 @@ -2036,7 +2036,7 @@ packages: version: 2.10.0 requiresBuild: true dependencies: - '@types/node': registry.npmjs.org/@types/node/14.18.48 + '@types/node': registry.npmjs.org/@types/node/18.16.16 dev: true optional: true @@ -2874,6 +2874,13 @@ packages: engines: {node: '>= 6'} dev: true + registry.npmjs.org/commander/6.2.1: + resolution: {integrity: sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/commander/-/commander-6.2.1.tgz} + name: commander + version: 6.2.1 + engines: {node: '>= 6'} + dev: true + registry.npmjs.org/common-tags/1.8.2: resolution: {integrity: sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/common-tags/-/common-tags-1.8.2.tgz} name: common-tags @@ -2995,7 +3002,7 @@ packages: stream-transform: registry.npmjs.org/stream-transform/2.1.3 dev: true - registry.npmjs.org/cypress-real-events/1.8.1_cypress@10.11.0: + registry.npmjs.org/cypress-real-events/1.8.1_cypress@12.14.0: resolution: {integrity: sha512-8fFnA8EzS3EVbAmpSEUf3A8yZCmfU3IPOSGUDVFCdE1ke1gYL1A+gvXXV6HKUbTPRuvKKt2vpaMbUwYLpDRswQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/cypress-real-events/-/cypress-real-events-1.8.1.tgz} id: registry.npmjs.org/cypress-real-events/1.8.1 name: cypress-real-events @@ -3003,7 +3010,7 @@ packages: peerDependencies: cypress: ^4.x || ^5.x || ^6.x || ^7.x || ^8.x || ^9.x || ^10.x || ^11.x || ^12.x dependencies: - cypress: registry.npmjs.org/cypress/10.11.0 + cypress: registry.npmjs.org/cypress/12.14.0 dev: true registry.npmjs.org/cypress/10.11.0: @@ -3058,6 +3065,58 @@ packages: yauzl: registry.npmjs.org/yauzl/2.10.0 dev: true + registry.npmjs.org/cypress/12.14.0: + resolution: {integrity: sha512-HiLIXKXZaIT1RT7sw1sVPt+qKtis3uYNm6KwC4qoYjabwLKaqZlyS/P+uVvvlBNcHIwL/BC6nQZajpbUd7hOgQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/cypress/-/cypress-12.14.0.tgz} + name: cypress + version: 12.14.0 + engines: {node: ^14.0.0 || ^16.0.0 || >=18.0.0} + hasBin: true + requiresBuild: true + dependencies: + '@cypress/request': registry.npmjs.org/@cypress/request/2.88.11 + '@cypress/xvfb': registry.npmjs.org/@cypress/xvfb/1.2.4_supports-color@8.1.1 + '@types/node': registry.npmjs.org/@types/node/14.18.48 + '@types/sinonjs__fake-timers': registry.npmjs.org/@types/sinonjs__fake-timers/8.1.1 + '@types/sizzle': registry.npmjs.org/@types/sizzle/2.3.3 + arch: registry.npmjs.org/arch/2.2.0 + blob-util: registry.npmjs.org/blob-util/2.0.2 + bluebird: registry.npmjs.org/bluebird/3.7.2 + buffer: registry.npmjs.org/buffer/5.7.1 + cachedir: registry.npmjs.org/cachedir/2.3.0 + chalk: registry.npmjs.org/chalk/4.1.2 + check-more-types: registry.npmjs.org/check-more-types/2.24.0 + cli-cursor: registry.npmjs.org/cli-cursor/3.1.0 + cli-table3: registry.npmjs.org/cli-table3/0.6.3 + commander: registry.npmjs.org/commander/6.2.1 + common-tags: registry.npmjs.org/common-tags/1.8.2 + dayjs: registry.npmjs.org/dayjs/1.11.8 + debug: registry.npmjs.org/debug/4.3.4_supports-color@8.1.1 + enquirer: registry.npmjs.org/enquirer/2.3.6 + eventemitter2: registry.npmjs.org/eventemitter2/6.4.7 + execa: registry.npmjs.org/execa/4.1.0 + executable: registry.npmjs.org/executable/4.1.1 + extract-zip: registry.npmjs.org/extract-zip/2.0.1_supports-color@8.1.1 + figures: registry.npmjs.org/figures/3.2.0 + fs-extra: registry.npmjs.org/fs-extra/9.1.0 + getos: registry.npmjs.org/getos/3.2.1 + is-ci: registry.npmjs.org/is-ci/3.0.1 + is-installed-globally: registry.npmjs.org/is-installed-globally/0.4.0 + lazy-ass: registry.npmjs.org/lazy-ass/1.6.0 + listr2: registry.npmjs.org/listr2/3.14.0_enquirer@2.3.6 + lodash: registry.npmjs.org/lodash/4.17.21 + log-symbols: registry.npmjs.org/log-symbols/4.1.0 + minimist: registry.npmjs.org/minimist/1.2.8 + ospath: registry.npmjs.org/ospath/1.2.2 + pretty-bytes: registry.npmjs.org/pretty-bytes/5.6.0 + proxy-from-env: registry.npmjs.org/proxy-from-env/1.0.0 + request-progress: registry.npmjs.org/request-progress/3.0.0 + semver: registry.npmjs.org/semver/7.5.1 + supports-color: registry.npmjs.org/supports-color/8.1.1 + tmp: registry.npmjs.org/tmp/0.2.1 + untildify: registry.npmjs.org/untildify/4.0.0 + yauzl: registry.npmjs.org/yauzl/2.10.0 + dev: true + registry.npmjs.org/d3-color/3.1.0: resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz} name: d3-color