From 2d1d4717d945830f67c879d632796bf2a8129a1e Mon Sep 17 00:00:00 2001 From: peterkogo Date: Wed, 10 Apr 2024 09:30:00 +0200 Subject: [PATCH 1/6] fixed errors but still WIP --- packages/react/src/types/nodes.ts | 6 ++ .../src/lib/components/Handle/Handle.svelte | 4 +- .../NodeSelection/NodeSelection.svelte | 2 + .../NodeRenderer/NodeRenderer.svelte | 23 +++----- .../svelte/src/lib/container/Pane/Pane.svelte | 12 ++-- .../svelte/src/lib/hooks/useSvelteFlow.ts | 5 +- packages/svelte/src/lib/index.ts | 3 +- .../plugins/NodeToolbar/NodeToolbar.svelte | 40 ++++++------- .../src/lib/store/derived-connection-props.ts | 12 ++-- packages/svelte/src/lib/store/index.ts | 58 +++++++++++++------ .../svelte/src/lib/store/initial-store.ts | 19 +++--- packages/svelte/src/lib/store/utils.ts | 11 ++-- .../svelte/src/lib/store/visible-nodes.ts | 17 ++++-- packages/svelte/src/lib/types/nodes.ts | 10 +++- packages/system/src/utils/graph.ts | 5 +- packages/system/src/utils/store.ts | 17 ++++-- 16 files changed, 142 insertions(+), 102 deletions(-) diff --git a/packages/react/src/types/nodes.ts b/packages/react/src/types/nodes.ts index 89fec455..a01a894a 100644 --- a/packages/react/src/types/nodes.ts +++ b/packages/react/src/types/nodes.ts @@ -24,6 +24,12 @@ export type Node< focusable?: boolean; }; +/** + * The node data structure that gets used for internal nodes. + * There are some data structures added under node.internal + * that are needed for tracking some properties + * @public + */ export type InternalNode = InternalNodeBase; export type NodeMouseHandler = (event: ReactMouseEvent, node: NodeType) => void; diff --git a/packages/svelte/src/lib/components/Handle/Handle.svelte b/packages/svelte/src/lib/components/Handle/Handle.svelte index 5217686c..f93688fc 100644 --- a/packages/svelte/src/lib/components/Handle/Handle.svelte +++ b/packages/svelte/src/lib/components/Handle/Handle.svelte @@ -42,7 +42,7 @@ const { connectionMode, domNode, - nodes, + nodeLookup, connectionRadius, viewport, isValidConnection, @@ -72,7 +72,7 @@ isTarget, connectionRadius: $connectionRadius, domNode: $domNode, - nodes: $nodes, + nodeLookup: $nodeLookup, connectionMode: $connectionMode, lib: $lib, autoPanOnConnect: $autoPanOnConnect, diff --git a/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte b/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte index e648604a..4d357485 100644 --- a/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte +++ b/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte @@ -20,6 +20,8 @@ $: selectedNodes = $nodes.filter((n) => n.selected); $: bounds = getNodesBounds(selectedNodes); + $: console.log($nodes); + function onContextMenu(event: MouseEvent | TouchEvent) { dispatch('selectioncontextmenu', { nodes: selectedNodes, event }); } diff --git a/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte b/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte index 8761942d..07e84096 100644 --- a/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte +++ b/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte @@ -1,11 +1,6 @@
diff --git a/examples/svelte/src/routes/examples/usenodesdata/UppercaseNode.svelte b/examples/svelte/src/routes/examples/usenodesdata/UppercaseNode.svelte index be15ac9a..55960cb5 100644 --- a/examples/svelte/src/routes/examples/usenodesdata/UppercaseNode.svelte +++ b/examples/svelte/src/routes/examples/usenodesdata/UppercaseNode.svelte @@ -12,6 +12,8 @@ type $$Props = NodeProps; export let id: $$Props['id']; + export let data: $$Props['data']; + $$restProps; const { updateNodeData } = useSvelteFlow(); const connections = useHandleConnections({ @@ -22,8 +24,12 @@ $: nodeData = useNodesData($connections[0]?.source); $: textNode = isTextNode($nodeData) ? $nodeData : null; + $: console.log(textNode?.data, data); + $: { - updateNodeData(id, { text: textNode?.data.text.toUpperCase() || '' }); + const input = textNode?.data.text.toUpperCase() ?? ''; + updateNodeData(id, { text: input }); + console.log('updatedNodeData with', input); } diff --git a/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte b/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte index 4d357485..e648604a 100644 --- a/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte +++ b/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte @@ -20,8 +20,6 @@ $: selectedNodes = $nodes.filter((n) => n.selected); $: bounds = getNodesBounds(selectedNodes); - $: console.log($nodes); - function onContextMenu(event: MouseEvent | TouchEvent) { dispatch('selectioncontextmenu', { nodes: selectedNodes, event }); } diff --git a/packages/svelte/src/lib/hooks/useNodesData.ts b/packages/svelte/src/lib/hooks/useNodesData.ts index 83db2115..a13bdb65 100644 --- a/packages/svelte/src/lib/hooks/useNodesData.ts +++ b/packages/svelte/src/lib/hooks/useNodesData.ts @@ -29,7 +29,7 @@ export function useNodesData(nodeIds: any): any { const _nodeIds = isArrayOfIds ? nodeIds : [nodeIds]; for (const nodeId of _nodeIds) { - const node = nodeLookup.get(nodeId); + const node = nodeLookup.get(nodeId)?.internals.userNode; if (node) { nextNodesData.push({ id: node.id, diff --git a/packages/svelte/src/lib/hooks/useSvelteFlow.ts b/packages/svelte/src/lib/hooks/useSvelteFlow.ts index 7eeffc65..1f1128cc 100644 --- a/packages/svelte/src/lib/hooks/useSvelteFlow.ts +++ b/packages/svelte/src/lib/hooks/useSvelteFlow.ts @@ -256,17 +256,28 @@ export function useSvelteFlow(): { nodeUpdate: Partial | ((node: Node) => Partial), options: { replace: boolean } = { replace: false } ) => { - nodes.update((nds) => - nds.map((node) => { - if (node.id === id) { - const nextNode = typeof nodeUpdate === 'function' ? nodeUpdate(node as Node) : nodeUpdate; + const node = get(nodeLookup).get(id)?.internals.userNode; - return options.replace && isNode(nextNode) ? nextNode : { ...node, ...nextNode }; - } + if (!node) { + return; + } - return node; - }) - ); + const nextNode = typeof nodeUpdate === 'function' ? nodeUpdate(node as Node) : nodeUpdate; + + if (options.replace) { + nodes.update((nds) => + nds.map((node) => { + if (node.id === id) { + return isNode(nextNode) ? nextNode : { ...node, ...nextNode }; + } + + return node; + }) + ); + } else { + Object.assign(node, nextNode); + nodes.update((nds) => nds); + } }; return { @@ -448,13 +459,21 @@ export function useSvelteFlow(): { }, updateNode, updateNodeData: (id, dataUpdate, options) => { - updateNode(id, (node) => { - const nextData = typeof dataUpdate === 'function' ? dataUpdate(node) : dataUpdate; + const node = get(nodeLookup).get(id)?.internals.userNode; - return options?.replace - ? { ...node, data: nextData } - : { ...node, data: { ...node.data, ...nextData } }; - }); + if (!node) { + return; + } + + const nextData = typeof dataUpdate === 'function' ? dataUpdate(node) : dataUpdate; + + if (options?.replace) { + node.data = nextData; + } else { + node.data = { ...node.data, ...nextData }; + } + + nodes.update((nds) => nds); }, viewport }; diff --git a/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte b/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte index c67f2e87..c346bd53 100644 --- a/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte +++ b/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte @@ -69,7 +69,7 @@ }; }, onChange: (change: XYResizerChange, childChanges: XYResizerChildChange[]) => { - const node = $nodeLookup.get(id); + const node = $nodeLookup.get(id)?.internals.userNode; if (node) { node.height = change.isHeightChange ? change.height : node.height; node.width = change.isWidthChange ? change.width : node.width; @@ -79,7 +79,7 @@ : node.position; for (const childChange of childChanges) { - const childNode = $nodeLookup.get(childChange.id); + const childNode = $nodeLookup.get(childChange.id)?.internals.userNode; if (childNode) { childNode.position = childChange.position; } diff --git a/packages/svelte/src/lib/store/index.ts b/packages/svelte/src/lib/store/index.ts index bdfbf6d2..3e74e592 100644 --- a/packages/svelte/src/lib/store/index.ts +++ b/packages/svelte/src/lib/store/index.ts @@ -65,20 +65,17 @@ export function createStore({ const nodeLookup = get(store.nodeLookup); for (const nodeDragItem of nodeDragItems) { - const node = nodeLookup.get(nodeDragItem.id); + const node = nodeLookup.get(nodeDragItem.id)?.internals.userNode; if (!node) { continue; } - const userNode = node.internals.userNode; - userNode.position = nodeDragItem.position; - userNode.dragging = dragging; - // node.internals.positionAbsolute = nodeDragItem.internals.positionAbsolute; + node.position = nodeDragItem.position; + node.dragging = dragging; } store.nodes.set(get(store.nodes)); - //$nodes = $nodes }; function updateNodeDimensions(updates: Map) { @@ -111,11 +108,13 @@ export function createStore({ } switch (nodeUpdate.type) { - case 'dimensions': + case 'dimensions': { + const measured = { ...node.measured, ...nodeUpdate.dimensions }; node.width = nodeUpdate.dimensions?.width ?? node.width; node.height = nodeUpdate.dimensions?.height ?? node.height; - // TODO: do we need measured here? + node.measured = measured; break; + } case 'position': node.position = nodeUpdate.position ?? node.position; break; From 3a8b947260df76e38b9467d27309d196839c6093 Mon Sep 17 00:00:00 2001 From: peterkogo Date: Wed, 10 Apr 2024 12:02:16 +0200 Subject: [PATCH 3/6] fixed wrong initial set on store --- .../routes/examples/intersections/Flow.svelte | 4 +- .../examples/intersections/nodes-and-edges.ts | 44 +++++++++---------- packages/svelte/src/lib/store/index.ts | 8 ++-- packages/svelte/src/lib/store/utils.ts | 2 +- 4 files changed, 29 insertions(+), 29 deletions(-) diff --git a/examples/svelte/src/routes/examples/intersections/Flow.svelte b/examples/svelte/src/routes/examples/intersections/Flow.svelte index f3f80335..12c98e00 100644 --- a/examples/svelte/src/routes/examples/intersections/Flow.svelte +++ b/examples/svelte/src/routes/examples/intersections/Flow.svelte @@ -12,8 +12,8 @@ const { getIntersectingNodes } = useSvelteFlow(); - function onNodeDrag({ detail: { node } }) { - const intersections = getIntersectingNodes(node).map((n) => n.id); + function onNodeDrag({ detail: { targetNode } }) { + const intersections = getIntersectingNodes(targetNode).map((n) => n.id); $nodes.forEach((n) => { n.class = intersections.includes(n.id) ? 'highlight' : ''; diff --git a/examples/svelte/src/routes/examples/intersections/nodes-and-edges.ts b/examples/svelte/src/routes/examples/intersections/nodes-and-edges.ts index fffb59b8..7b094ce2 100644 --- a/examples/svelte/src/routes/examples/intersections/nodes-and-edges.ts +++ b/examples/svelte/src/routes/examples/intersections/nodes-and-edges.ts @@ -1,28 +1,28 @@ import type { Node, Edge } from '@xyflow/svelte'; export const initialNodes: Node[] = [ - { - id: '1', - data: { label: 'Node 1' }, - position: { x: 0, y: 0 }, - style: 'width: 200px; height: 100px;' - }, - { - id: '2', - data: { label: 'Node 2' }, - position: { x: 0, y: 150 } - }, - { - id: '3', - data: { label: 'Node 3' }, - position: { x: 250, y: 0 } - }, - { - id: '4', - data: { label: 'Node' }, - position: { x: 350, y: 150 }, - style: 'width: 50px; height: 50px;' - } + { + id: '1', + data: { label: 'Node 1' }, + position: { x: 0, y: 0 }, + style: 'width: 200px; height: 100px;' + }, + { + id: '2', + data: { label: 'Node 2' }, + position: { x: 0, y: 150 } + }, + { + id: '3', + data: { label: 'Node 3' }, + position: { x: 250, y: 0 } + }, + { + id: '4', + data: { label: 'Node' }, + position: { x: 350, y: 150 }, + style: 'width: 50px; height: 50px;' + } ]; export const initialEdges: Edge[] = []; diff --git a/packages/svelte/src/lib/store/index.ts b/packages/svelte/src/lib/store/index.ts index 3e74e592..aa642097 100644 --- a/packages/svelte/src/lib/store/index.ts +++ b/packages/svelte/src/lib/store/index.ts @@ -75,7 +75,7 @@ export function createStore({ node.dragging = dragging; } - store.nodes.set(get(store.nodes)); + store.nodes.update((nds) => nds); }; function updateNodeDimensions(updates: Map) { @@ -121,7 +121,7 @@ export function createStore({ } } - store.nodes.set(get(store.nodes)); + store.nodes.update((nds) => nds); if (!get(store.nodesInitialized)) { store.nodesInitialized.set(true); @@ -205,10 +205,10 @@ export function createStore({ function unselectNodesAndEdges(params?: { nodes?: Node[]; edges?: Edge[] }) { const resetNodes = resetSelectedElements(params?.nodes || get(store.nodes)); - if (resetNodes) store.nodes.set(get(store.nodes)); + if (resetNodes) store.nodes.update((nds) => nds); const resetEdges = resetSelectedElements(params?.edges || get(store.edges)); - if (resetEdges) store.edges.set(get(store.edges)); + if (resetEdges) store.edges.update((nds) => nds); } store.deleteKeyPressed.subscribe(async (deleteKeyPressed) => { diff --git a/packages/svelte/src/lib/store/utils.ts b/packages/svelte/src/lib/store/utils.ts index 444423c6..4dabbd33 100644 --- a/packages/svelte/src/lib/store/utils.ts +++ b/packages/svelte/src/lib/store/utils.ts @@ -147,7 +147,7 @@ export const createNodesStore = ( checkEquality: false }); - value = nodes; + value = nds; set(value); From dd2bb65d1eac9b09fe3b7827e1fb2d1682e25aed Mon Sep 17 00:00:00 2001 From: peterkogo Date: Wed, 10 Apr 2024 12:13:09 +0200 Subject: [PATCH 4/6] removed console.log --- examples/svelte/src/routes/examples/drag-n-drop/Flow.svelte | 3 --- 1 file changed, 3 deletions(-) diff --git a/examples/svelte/src/routes/examples/drag-n-drop/Flow.svelte b/examples/svelte/src/routes/examples/drag-n-drop/Flow.svelte index 68961b08..b72a4b17 100644 --- a/examples/svelte/src/routes/examples/drag-n-drop/Flow.svelte +++ b/examples/svelte/src/routes/examples/drag-n-drop/Flow.svelte @@ -55,15 +55,12 @@ const onDragOver = (event: DragEvent) => { event.preventDefault(); - console.log(event); - if (event.dataTransfer) { event.dataTransfer.dropEffect = 'move'; } }; const onDrop = (event: DragEvent) => { - console.log(event); event.preventDefault(); if (!event.dataTransfer) { From db05c3f3f4d453e3a04484a709c62ce83072fca0 Mon Sep 17 00:00:00 2001 From: peterkogo Date: Wed, 10 Apr 2024 13:35:17 +0200 Subject: [PATCH 5/6] updated prettierignore and removed unused variable --- packages/svelte/.prettierignore | 1 + packages/svelte/src/lib/store/visible-nodes.ts | 6 +++--- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/svelte/.prettierignore b/packages/svelte/.prettierignore index 38972655..33affffb 100644 --- a/packages/svelte/.prettierignore +++ b/packages/svelte/.prettierignore @@ -1,6 +1,7 @@ .DS_Store node_modules /build +/dist /.svelte-kit /package .env diff --git a/packages/svelte/src/lib/store/visible-nodes.ts b/packages/svelte/src/lib/store/visible-nodes.ts index 1c31e638..e615439f 100644 --- a/packages/svelte/src/lib/store/visible-nodes.ts +++ b/packages/svelte/src/lib/store/visible-nodes.ts @@ -5,14 +5,14 @@ import type { SvelteFlowStoreState } from './types'; export function getVisibleNodes(store: SvelteFlowStoreState) { return derived( [ - store.nodes, store.nodeLookup, store.onlyRenderVisibleElements, store.width, store.height, - store.viewport + store.viewport, + store.nodes ], - ([_, nodeLookup, onlyRenderVisibleElements, width, height, viewport]) => { + ([nodeLookup, onlyRenderVisibleElements, width, height, viewport]) => { const transform: Transform = [viewport.x, viewport.y, viewport.zoom]; return onlyRenderVisibleElements From 835dec25ba07d5cd1cd2b71211a0d01cfa1e49cd Mon Sep 17 00:00:00 2001 From: peterkogo Date: Wed, 10 Apr 2024 14:47:49 +0200 Subject: [PATCH 6/6] resolved some requested changes --- .../NodeToolbar/NodeToolbar.tsx | 2 +- .../src/components/ConnectionLine/index.tsx | 6 +++--- .../components/NodeWrapper/NodeWrapper.svelte | 8 ++++---- .../src/lib/components/NodeWrapper/types.ts | 4 ++-- .../src/lib/components/NodeWrapper/utils.ts | 10 +++++----- .../container/NodeRenderer/NodeRenderer.svelte | 12 ++++++------ packages/svelte/src/lib/hooks/useSvelteFlow.ts | 6 +----- packages/svelte/src/lib/store/index.ts | 18 +++++++++--------- packages/svelte/src/lib/store/initial-store.ts | 2 +- packages/system/src/utils/edges/positions.ts | 4 ++-- packages/system/src/utils/store.ts | 2 +- packages/system/src/xydrag/utils.ts | 4 ++-- packages/system/src/xyhandle/utils.ts | 4 ++-- 13 files changed, 39 insertions(+), 43 deletions(-) diff --git a/packages/react/src/additional-components/NodeToolbar/NodeToolbar.tsx b/packages/react/src/additional-components/NodeToolbar/NodeToolbar.tsx index 1fc6f25c..f14f822e 100644 --- a/packages/react/src/additional-components/NodeToolbar/NodeToolbar.tsx +++ b/packages/react/src/additional-components/NodeToolbar/NodeToolbar.tsx @@ -74,7 +74,7 @@ export function NodeToolbar({ } const nodeRect: Rect = getNodesBounds(nodes, { nodeOrigin }); - const zIndex: number = Math.max(...nodes.map((node) => (node.internals?.z || 1) + 1)); + const zIndex: number = Math.max(...nodes.map((node) => node.internals.z + 1)); const wrapperStyle: CSSProperties = { position: 'absolute', diff --git a/packages/react/src/components/ConnectionLine/index.tsx b/packages/react/src/components/ConnectionLine/index.tsx index 54b3f24d..4ca5c106 100644 --- a/packages/react/src/components/ConnectionLine/index.tsx +++ b/packages/react/src/components/ConnectionLine/index.tsx @@ -52,7 +52,7 @@ const ConnectionLine = ({ ), shallow ); - const fromHandleBounds = fromNode?.internals?.handleBounds; + const fromHandleBounds = fromNode?.internals.handleBounds; let handleBounds = fromHandleBounds?.[handleType]; if (connectionMode === ConnectionMode.Loose) { @@ -66,8 +66,8 @@ const ConnectionLine = ({ const fromHandle = handleId ? handleBounds.find((d) => d.id === handleId) : handleBounds[0]; const fromHandleX = fromHandle ? fromHandle.x + fromHandle.width / 2 : (fromNode.measured.width ?? 0) / 2; const fromHandleY = fromHandle ? fromHandle.y + fromHandle.height / 2 : fromNode.measured.height ?? 0; - const fromX = (fromNode.internals.positionAbsolute.x ?? 0) + fromHandleX; - const fromY = (fromNode.internals.positionAbsolute.y ?? 0) + fromHandleY; + const fromX = fromNode.internals.positionAbsolute.x + fromHandleX; + const fromY = fromNode.internals.positionAbsolute.y + fromHandleY; const fromPosition = fromHandle?.position; const toPosition = fromPosition ? oppositePosition[fromPosition] : null; diff --git a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte index e502cd50..a466d0ad 100644 --- a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte +++ b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte @@ -35,8 +35,8 @@ export let sourcePosition: $$Props['sourcePosition'] = undefined; export let targetPosition: $$Props['targetPosition'] = undefined; export let zIndex: $$Props['zIndex']; - export let computedWidth: $$Props['computedWidth'] = undefined; - export let computedHeight: $$Props['computedHeight'] = undefined; + export let measuredWidth: $$Props['measuredWidth'] = undefined; + export let measuredHeight: $$Props['measuredHeight'] = undefined; export let initialWidth: $$Props['initialWidth'] = undefined; export let initialHeight: $$Props['initialHeight'] = undefined; export let width: $$Props['width'] = undefined; @@ -79,8 +79,8 @@ height, initialWidth, initialHeight, - computedWidth, - computedHeight + measuredWidth, + measuredHeight }); $: { diff --git a/packages/svelte/src/lib/components/NodeWrapper/types.ts b/packages/svelte/src/lib/components/NodeWrapper/types.ts index a290ec08..7277be5f 100644 --- a/packages/svelte/src/lib/components/NodeWrapper/types.ts +++ b/packages/svelte/src/lib/components/NodeWrapper/types.ts @@ -21,8 +21,8 @@ export type NodeWrapperProps = Pick< | 'initialWidth' | 'initialHeight' > & { - computedWidth?: number; - computedHeight?: number; + measuredWidth?: number; + measuredHeight?: number; type: string; positionX: number; positionY: number; diff --git a/packages/svelte/src/lib/components/NodeWrapper/utils.ts b/packages/svelte/src/lib/components/NodeWrapper/utils.ts index b2609587..f795e31d 100644 --- a/packages/svelte/src/lib/components/NodeWrapper/utils.ts +++ b/packages/svelte/src/lib/components/NodeWrapper/utils.ts @@ -3,20 +3,20 @@ export function getNodeInlineStyleDimensions({ height, initialWidth, initialHeight, - computedWidth, - computedHeight + measuredWidth, + measuredHeight }: { width?: number; height?: number; initialWidth?: number; initialHeight?: number; - computedWidth?: number; - computedHeight?: number; + measuredWidth?: number; + measuredHeight?: number; }): { width: string | undefined; height: string | undefined; } { - if (computedWidth === undefined && computedHeight === undefined) { + if (measuredWidth === undefined && measuredHeight === undefined) { const styleWidth = width ?? initialWidth; const styleHeight = height ?? initialHeight; diff --git a/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte b/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte index 07e84096..ae400eb5 100644 --- a/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte +++ b/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte @@ -41,8 +41,8 @@ {#each $visibleNodes as node (node.id)} {@const nodeDimesions = getNodeDimensions(node)} {@const posOrigin = getPositionWithOrigin({ - x: node.internals.positionAbsolute.x ?? 0, - y: node.internals.positionAbsolute.y ?? 0, + x: node.internals.positionAbsolute.x, + y: node.internals.positionAbsolute.y, ...nodeDimesions, origin: node.origin })} @@ -61,8 +61,8 @@ node.connectable || ($nodesConnectable && typeof node.connectable === 'undefined') )} - positionX={node.internals.positionAbsolute?.x ?? 0} - positionY={node.internals.positionAbsolute?.y ?? 0} + positionX={node.internals.positionAbsolute.x} + positionY={node.internals.positionAbsolute.y} positionOriginX={posOrigin.x ?? 0} positionOriginY={posOrigin.y ?? 0} isParent={!!node.internals.isParent} @@ -79,8 +79,8 @@ height={node.height} initialWidth={node.initialWidth} initialHeight={node.initialHeight} - computedWidth={node.measured.width} - computedHeight={node.measured.height} + measuredWidth={node.measured.width} + measuredHeight={node.measured.height} {resizeObserver} on:nodeclick on:nodemouseenter diff --git a/packages/svelte/src/lib/hooks/useSvelteFlow.ts b/packages/svelte/src/lib/hooks/useSvelteFlow.ts index 1f1128cc..6c83418f 100644 --- a/packages/svelte/src/lib/hooks/useSvelteFlow.ts +++ b/packages/svelte/src/lib/hooks/useSvelteFlow.ts @@ -467,11 +467,7 @@ export function useSvelteFlow(): { const nextData = typeof dataUpdate === 'function' ? dataUpdate(node) : dataUpdate; - if (options?.replace) { - node.data = nextData; - } else { - node.data = { ...node.data, ...nextData }; - } + node.data = options?.replace ? nextData : { ...node.data, ...nextData }; nodes.update((nds) => nds); }, diff --git a/packages/svelte/src/lib/store/index.ts b/packages/svelte/src/lib/store/index.ts index aa642097..2f6266eb 100644 --- a/packages/svelte/src/lib/store/index.ts +++ b/packages/svelte/src/lib/store/index.ts @@ -80,14 +80,14 @@ export function createStore({ function updateNodeDimensions(updates: Map) { const nodeLookup = get(store.nodeLookup); - const nodeUpdates = updateNodeDimensionsSystem( + const changes = updateNodeDimensionsSystem( updates, nodeLookup, get(store.domNode), get(store.nodeOrigin) ); - if (!nodeUpdates) { + if (!changes) { return; } @@ -100,23 +100,23 @@ export function createStore({ store.fitViewOnInitDone.set(fitViewOnInitDone); } - for (const nodeUpdate of nodeUpdates) { - const node = nodeLookup.get(nodeUpdate.id)?.internals.userNode; + for (const change of changes) { + const node = nodeLookup.get(change.id)?.internals.userNode; if (!node) { continue; } - switch (nodeUpdate.type) { + switch (change.type) { case 'dimensions': { - const measured = { ...node.measured, ...nodeUpdate.dimensions }; - node.width = nodeUpdate.dimensions?.width ?? node.width; - node.height = nodeUpdate.dimensions?.height ?? node.height; + const measured = { ...node.measured, ...change.dimensions }; + node.width = change.dimensions?.width ?? node.width; + node.height = change.dimensions?.height ?? node.height; node.measured = measured; break; } case 'position': - node.position = nodeUpdate.position ?? node.position; + node.position = change.position ?? node.position; break; } } diff --git a/packages/svelte/src/lib/store/initial-store.ts b/packages/svelte/src/lib/store/initial-store.ts index efa93b53..7d2b2444 100644 --- a/packages/svelte/src/lib/store/initial-store.ts +++ b/packages/svelte/src/lib/store/initial-store.ts @@ -93,7 +93,7 @@ export const getInitialStore = ({ let viewport: Viewport = { x: 0, y: 0, zoom: 1 }; if (fitView && width && height) { - const nodesWithDimensions = Array.from(nodeLookup.values()).filter( + const nodesWithDimensions = nodes.filter( (node) => (node.width && node.height) || (node.initialWidth && node.initialHeight) ); diff --git a/packages/system/src/utils/edges/positions.ts b/packages/system/src/utils/edges/positions.ts index de8416db..6e61ce8c 100644 --- a/packages/system/src/utils/edges/positions.ts +++ b/packages/system/src/utils/edges/positions.ts @@ -97,8 +97,8 @@ function toHandleBounds(handles?: NodeHandle[]) { } function getHandlePosition(position: Position, node: InternalNodeBase, handle: HandleElement | null = null): number[] { - const x = (handle?.x ?? 0) + (node.internals.positionAbsolute?.x ?? 0); - const y = (handle?.y ?? 0) + (node.internals.positionAbsolute?.y ?? 0); + const x = (handle?.x ?? 0) + node.internals.positionAbsolute.x; + const y = (handle?.y ?? 0) + node.internals.positionAbsolute.y; const { width, height } = handle ?? getNodeDimensions(node); switch (position) { diff --git a/packages/system/src/utils/store.ts b/packages/system/src/utils/store.ts index 97c1b8ac..b2b60e80 100644 --- a/packages/system/src/utils/store.ts +++ b/packages/system/src/utils/store.ts @@ -107,7 +107,7 @@ export function adoptUserNodes( }, internals: { positionAbsolute: userNode.position, - handleBounds: currentStoreNode?.internals?.handleBounds, + handleBounds: currentStoreNode?.internals.handleBounds, z: (isNumeric(userNode.zIndex) ? userNode.zIndex : 0) + (userNode.selected ? selectedNodeZ : 0), userNode, isParent: false, diff --git a/packages/system/src/xydrag/utils.ts b/packages/system/src/xydrag/utils.ts index adead2b7..b1cd0597 100644 --- a/packages/system/src/xydrag/utils.ts +++ b/packages/system/src/xydrag/utils.ts @@ -55,8 +55,8 @@ export function getDragItems( id: internalNode.id, position: internalNode.position || { x: 0, y: 0 }, distance: { - x: mousePos.x - (internalNode.internals.positionAbsolute?.x ?? 0), - y: mousePos.y - (internalNode.internals.positionAbsolute?.y ?? 0), + x: mousePos.x - internalNode.internals.positionAbsolute.x, + y: mousePos.y - internalNode.internals.positionAbsolute.y, }, extent: internalNode.extent, parentId: internalNode.parentId, diff --git a/packages/system/src/xyhandle/utils.ts b/packages/system/src/xyhandle/utils.ts index 346ebe45..ba18e79a 100644 --- a/packages/system/src/xyhandle/utils.ts +++ b/packages/system/src/xyhandle/utils.ts @@ -22,8 +22,8 @@ export function getHandles( id: h.id || null, type, nodeId: node.id, - x: (node.internals.positionAbsolute.x ?? 0) + h.x + h.width / 2, - y: (node.internals.positionAbsolute.y ?? 0) + h.y + h.height / 2, + x: node.internals.positionAbsolute.x + h.x + h.width / 2, + y: node.internals.positionAbsolute.y + h.y + h.height / 2, }); } return res;