From 835dec25ba07d5cd1cd2b71211a0d01cfa1e49cd Mon Sep 17 00:00:00 2001 From: peterkogo Date: Wed, 10 Apr 2024 14:47:49 +0200 Subject: [PATCH] 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;