From dca2eb6f379a0b29fd1104a71a0df321ffe98c0a Mon Sep 17 00:00:00 2001 From: peterkogo Date: Tue, 10 Dec 2024 12:54:18 +0100 Subject: [PATCH] cleanup useSvelteFlow --- packages/svelte/src/lib/hooks/index.ts | 1 - ...eSvelteFlow.svelte.ts => useSvelteFlow.ts} | 134 +++++++----------- packages/svelte/src/lib/index.ts | 2 +- .../plugins/NodeToolbar/NodeToolbar.svelte | 4 +- 4 files changed, 54 insertions(+), 87 deletions(-) delete mode 100644 packages/svelte/src/lib/hooks/index.ts rename packages/svelte/src/lib/hooks/{useSvelteFlow.svelte.ts => useSvelteFlow.ts} (87%) diff --git a/packages/svelte/src/lib/hooks/index.ts b/packages/svelte/src/lib/hooks/index.ts deleted file mode 100644 index 84f29965..00000000 --- a/packages/svelte/src/lib/hooks/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './useSvelteFlow.svelte'; diff --git a/packages/svelte/src/lib/hooks/useSvelteFlow.svelte.ts b/packages/svelte/src/lib/hooks/useSvelteFlow.ts similarity index 87% rename from packages/svelte/src/lib/hooks/useSvelteFlow.svelte.ts rename to packages/svelte/src/lib/hooks/useSvelteFlow.ts index 2a5cdd51..babaad20 100644 --- a/packages/svelte/src/lib/hooks/useSvelteFlow.svelte.ts +++ b/packages/svelte/src/lib/hooks/useSvelteFlow.ts @@ -1,4 +1,3 @@ -import { get } from 'svelte/store'; import { getOverlappingArea, isRectObject, @@ -207,11 +206,18 @@ export function useSvelteFlow(): { * @example * updateNode('node-1', (node) => ({ position: { x: node.position.x + 10, y: node.position.y } })); */ - updateNode: ( - id: string, - nodeUpdate: Partial | ((node: Node) => Partial), - options?: { replace: boolean } - ) => void; + // updateNode: ( + // id: string, + // nodeUpdate: Partial | ((node: Node) => Partial), + // options?: { replace: boolean } + // ) => void; + updateNode: + | ((id: string, nodeUpdate: Node | ((node: Node) => Node), options: { replace: true }) => void) + | (( + id: string, + nodeUpdate: Partial | ((node: Node) => Partial), + options: { replace: false } + ) => void); /** * Updates the data attribute of a node. * @@ -242,11 +248,13 @@ export function useSvelteFlow(): { * @example * updateNode('node-1', (node) => ({ position: { x: node.position.x + 10, y: node.position.y } })); */ - updateEdge: ( - id: string, - edgeUpdate: Partial | ((edge: Edge) => Partial), - options?: { replace: boolean } - ) => void; + updateEdge: + | ((id: string, edgeUpdate: Edge | ((edge: Edge) => Edge), options: { replace: true }) => void) + | (( + id: string, + edgeUpdate: Partial | ((edge: Edge) => Partial), + options?: { replace: false } + ) => void); toObject: () => { nodes: Node[]; edges: Edge[]; viewport: Viewport }; /** * Returns the bounds of the given nodes or node ids. @@ -278,7 +286,6 @@ export function useSvelteFlow(): { } const store = useStore(); - // const { nodes, edges } = store; const getNodeRect = (node: Node | { id: Node['id'] }): Rect | null => { const nodeToUse = isNode(node) ? node : store.nodeLookup.get(node.id)!; @@ -302,63 +309,35 @@ export function useSvelteFlow(): { return nodeToRect(nodeWithPosition); }; - const updateNode = ( + function updateNode( id: string, nodeUpdate: Partial | ((node: Node) => Partial), options: { replace: boolean } = { replace: false } - ) => { - const node = store.nodeLookup.get(id)?.internals.userNode; + ) { + store.nodes = store.nodes.map((node) => { + if (node.id === id) { + const nextNode = typeof nodeUpdate === 'function' ? nodeUpdate(node as Node) : nodeUpdate; + 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.set(store.nodes); - // } - }; - - const updateEdge = ( + function updateEdge( id: string, edgeUpdate: Partial | ((edge: Edge) => Partial), options: { replace: boolean } = { replace: false } - ) => { - const edge = store.edgeLookup.get(id); + ) { + store.edges = store.edges.map((edge) => { + if (edge.id === id) { + const nextEdge = typeof edgeUpdate === 'function' ? edgeUpdate(edge) : edgeUpdate; + return options.replace && isEdge(nextEdge) ? nextEdge : { ...edge, ...nextEdge }; + } - if (!edge) { - return; - } - - const nextEdge = typeof edgeUpdate === 'function' ? edgeUpdate(edge as Edge) : edgeUpdate; - - // if (options.replace) { - // edges.update((edgs) => - // edgs.map((edge) => { - // if (edge.id === id) { - // return isEdge(nextEdge) ? nextEdge : { ...edge, ...nextEdge }; - // } - - // return edge; - // }) - // ); - // } else { - // Object.assign(edge, nextEdge); - // edges.set(store.edges); - // } - }; + return edge; + }); + } const getInternalNode = (id: string) => store.nodeLookup.get(id); @@ -485,17 +464,13 @@ export function useSvelteFlow(): { onBeforeDelete: store.onbeforedelete }); - // if (matchingNodes) { - // nodes.update((nds) => - // nds.filter((node) => !matchingNodes.some(({ id }) => id === node.id)) - // ); - // } + if (matchingNodes) { + store.nodes = store.nodes.filter((node) => !matchingNodes.some(({ id }) => id === node.id)); + } - // if (matchingEdges) { - // edges.update((eds) => - // eds.filter((edge) => !matchingEdges.some(({ id }) => id === edge.id)) - // ); - // } + if (matchingEdges) { + store.edges = store.edges.filter((edge) => !matchingEdges.some(({ id }) => id === edge.id)); + } return { deletedNodes: matchingNodes, @@ -546,17 +521,11 @@ export function useSvelteFlow(): { }, toObject: () => { - return { - nodes: store.nodes.map((node) => ({ - ...node, - // we want to make sure that changes to the nodes object that gets returned by toObject - // do not affect the nodes object - position: { ...node.position }, - data: { ...node.data } - })), - edges: store.edges.map((edge) => ({ ...edge })), + return structuredClone({ + nodes: [...store.nodes], + edges: [...store.edges], viewport: { ...store.viewport } - }; + }); }, updateNode, updateNodeData: (id, dataUpdate, options) => { @@ -568,9 +537,7 @@ export function useSvelteFlow(): { const nextData = typeof dataUpdate === 'function' ? dataUpdate(node) : dataUpdate; - node.data = options?.replace ? nextData : { ...node.data, ...nextData }; - - // nodes.update((nds) => nds); + updateNode(id, { data: options?.replace ? nextData : { ...node.data, ...nextData } }); }, updateEdge, getNodesBounds: (nodes) => { @@ -580,6 +547,7 @@ export function useSvelteFlow(): { Array.from(store.connectionLookup.get(`${nodeId}-${type}-${id ?? null}`)?.values() ?? []) }; } + function getElements(lookup: Map, ids: string[]): Node[]; function getElements(lookup: Map, ids: string[]): Edge[]; // eslint-disable-next-line @typescript-eslint/no-explicit-any diff --git a/packages/svelte/src/lib/index.ts b/packages/svelte/src/lib/index.ts index a98a6241..2cf48b73 100644 --- a/packages/svelte/src/lib/index.ts +++ b/packages/svelte/src/lib/index.ts @@ -31,7 +31,7 @@ export { useStore } from '$lib/store'; export * from '$lib/utils'; //hooks -export * from '$lib/hooks/useSvelteFlow.svelte'; +export * from '$lib/hooks/useSvelteFlow'; export * from '$lib/hooks/useUpdateNodeInternals'; export * from '$lib/hooks/useConnection'; export * from '$lib/hooks/useNodesEdges'; diff --git a/packages/svelte/src/lib/plugins/NodeToolbar/NodeToolbar.svelte b/packages/svelte/src/lib/plugins/NodeToolbar/NodeToolbar.svelte index 43ca976d..ab7c2b57 100644 --- a/packages/svelte/src/lib/plugins/NodeToolbar/NodeToolbar.svelte +++ b/packages/svelte/src/lib/plugins/NodeToolbar/NodeToolbar.svelte @@ -4,7 +4,7 @@ import portal from '$lib/actions/portal'; import { useStore } from '$lib/store'; - import { useSvelteFlow } from '$lib/hooks'; + import { useSvelteFlow } from '$lib/hooks/useSvelteFlow'; import type { InternalNode } from '$lib/types'; import type { NodeToolbarProps } from './types'; @@ -19,7 +19,7 @@ }: NodeToolbarProps = $props(); const store = useStore(); - // const { nodes } = store; + const { getNodesBounds } = useSvelteFlow(); const contextNodeId = getContext('svelteflow__node_id');