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 2826a8ea..68961b08 100644 --- a/examples/svelte/src/routes/examples/drag-n-drop/Flow.svelte +++ b/examples/svelte/src/routes/examples/drag-n-drop/Flow.svelte @@ -13,7 +13,7 @@ import '@xyflow/svelte/dist/style.css'; - const nodes = writable([ + const nodes = writable([ { id: '1', type: 'input', @@ -63,6 +63,7 @@ }; const onDrop = (event: DragEvent) => { + console.log(event); event.preventDefault(); if (!event.dataTransfer) { @@ -81,7 +82,8 @@ data: { label: `${type} node` } }; - nodes.update((nds) => nds.concat(newNode)); + $nodes.push(newNode); + $nodes = $nodes; }; $: { diff --git a/examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte b/examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte index d5955501..436d2109 100644 --- a/examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte +++ b/examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte @@ -11,6 +11,7 @@ type $$Props = NodeProps; export let id: $$Props['id']; + $$restProps; const connections = useHandleConnections({ nodeId: id, diff --git a/examples/svelte/src/routes/examples/usenodesdata/TextNode.svelte b/examples/svelte/src/routes/examples/usenodesdata/TextNode.svelte index c1642da2..1fe5ff70 100644 --- a/examples/svelte/src/routes/examples/usenodesdata/TextNode.svelte +++ b/examples/svelte/src/routes/examples/usenodesdata/TextNode.svelte @@ -7,6 +7,7 @@ export let data: $$Props['data']; const { updateNodeData } = useSvelteFlow(); + $$restProps;
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;