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);