From 62b57eec6e48ea0c257e0d032fc65a1d1b9b5277 Mon Sep 17 00:00:00 2001 From: peterkogo Date: Thu, 11 Jan 2024 15:00:16 +0100 Subject: [PATCH 1/4] feat(svelte) Expose edgeLookup, fix(svelte) dragging behaviour when selectable=false --- packages/svelte/src/lib/store/index.ts | 17 +++++++++++++++-- packages/svelte/src/lib/store/initial-store.ts | 4 +++- 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/packages/svelte/src/lib/store/index.ts b/packages/svelte/src/lib/store/index.ts index 75036a80..5cd8e9ae 100644 --- a/packages/svelte/src/lib/store/index.ts +++ b/packages/svelte/src/lib/store/index.ts @@ -200,11 +200,24 @@ export function createStore({ .map((edge) => edge.id); if (selectedNodeIds.length) { - store.nodes.update((ns) => ns.map(resetSelectedItem(selectedNodeIds))); + const nodeLookup = get(store.nodeLookup); + selectedNodeIds.forEach((id) => { + const node = nodeLookup.get(id); + if (node) { + node.selected = false; + } + }); + store.nodes.set(get(store.nodes)); } if (selectedEdgeIds.length) { - store.edges.update((es) => es.map(resetSelectedItem(selectedEdgeIds))); + const edgeLookup = get(store.edgeLookup); + selectedEdgeIds.forEach((id) => { + const edge = edgeLookup.get(id); + if (edge) { + edge.selected = false; + } + }); } } diff --git a/packages/svelte/src/lib/store/initial-store.ts b/packages/svelte/src/lib/store/initial-store.ts index 01a40a9c..90c59b2d 100644 --- a/packages/svelte/src/lib/store/initial-store.ts +++ b/packages/svelte/src/lib/store/initial-store.ts @@ -23,7 +23,8 @@ import { type OnConnectStart, type OnConnectEnd, type NodeLookup, - type OnBeforeDelete + type OnBeforeDelete, + type EdgeLookup } from '@xyflow/system'; import DefaultNode from '$lib/components/nodes/DefaultNode.svelte'; @@ -99,6 +100,7 @@ export const getInitialStore = ({ flowId: writable(null), nodes: createNodesStore(nextNodes, nodeLookup), nodeLookup: readable(nodeLookup), + edgeLookup: readable(edgeLookup), visibleNodes: readable([]), edges: createEdgesStore(edges, connectionLookup, edgeLookup), visibleEdges: readable([]), From 19a8bc3e4949f0c2946da041a9fd84f9739eeb1e Mon Sep 17 00:00:00 2001 From: peterkogo Date: Thu, 11 Jan 2024 16:58:49 +0100 Subject: [PATCH 2/4] Simplified unselectNodesAndEdges --- packages/svelte/src/lib/store/index.ts | 48 +++++++------------------- 1 file changed, 12 insertions(+), 36 deletions(-) diff --git a/packages/svelte/src/lib/store/index.ts b/packages/svelte/src/lib/store/index.ts index 5cd8e9ae..407b181b 100644 --- a/packages/svelte/src/lib/store/index.ts +++ b/packages/svelte/src/lib/store/index.ts @@ -178,47 +178,23 @@ export function createStore({ } } - function resetSelectedItem(ids: string[]) { - return (item: T) => { - if (item.selected && ids.includes(item.id)) { - return { - ...item, - selected: false - }; + function resetSelected(elements: Node[] | Edge[]) { + let resetSomeElements = false; + elements.forEach((element) => { + if (element.selected) { + element.selected = false; + resetSomeElements = true; } - - return item; - }; + }); + return resetSomeElements; } function unselectNodesAndEdges(params?: { nodes?: Node[]; edges?: Edge[] }) { - const selectedNodeIds = (params?.nodes ? params.nodes : get(store.nodes)) - .filter((node) => node.selected) - .map((node) => node.id); - const selectedEdgeIds = (params?.edges ? params.edges : get(store.edges)) - .filter((edge) => edge.selected) - .map((edge) => edge.id); + const resetNodes = resetSelected(params?.nodes || get(store.nodes)); + if (resetNodes) store.nodes.set(get(store.nodes)); - if (selectedNodeIds.length) { - const nodeLookup = get(store.nodeLookup); - selectedNodeIds.forEach((id) => { - const node = nodeLookup.get(id); - if (node) { - node.selected = false; - } - }); - store.nodes.set(get(store.nodes)); - } - - if (selectedEdgeIds.length) { - const edgeLookup = get(store.edgeLookup); - selectedEdgeIds.forEach((id) => { - const edge = edgeLookup.get(id); - if (edge) { - edge.selected = false; - } - }); - } + const resetEdges = resetSelected(params?.edges || get(store.edges)); + if (resetEdges) store.edges.set(get(store.edges)); } store.deleteKeyPressed.subscribe(async (deleteKeyPressed) => { From f5ffa83124ad5c9878ab52c7f5bdba97edfa0cee Mon Sep 17 00:00:00 2001 From: peterkogo Date: Thu, 11 Jan 2024 17:05:15 +0100 Subject: [PATCH 3/4] better naming --- packages/svelte/src/lib/store/index.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/svelte/src/lib/store/index.ts b/packages/svelte/src/lib/store/index.ts index 407b181b..a13cc7f1 100644 --- a/packages/svelte/src/lib/store/index.ts +++ b/packages/svelte/src/lib/store/index.ts @@ -178,22 +178,22 @@ export function createStore({ } } - function resetSelected(elements: Node[] | Edge[]) { - let resetSomeElements = false; + function resetSelectedElements(elements: Node[] | Edge[]) { + let elementsChanged = false; elements.forEach((element) => { if (element.selected) { element.selected = false; - resetSomeElements = true; + elementsChanged = true; } }); - return resetSomeElements; + return elementsChanged; } function unselectNodesAndEdges(params?: { nodes?: Node[]; edges?: Edge[] }) { - const resetNodes = resetSelected(params?.nodes || get(store.nodes)); + const resetNodes = resetSelectedElements(params?.nodes || get(store.nodes)); if (resetNodes) store.nodes.set(get(store.nodes)); - const resetEdges = resetSelected(params?.edges || get(store.edges)); + const resetEdges = resetSelectedElements(params?.edges || get(store.edges)); if (resetEdges) store.edges.set(get(store.edges)); } From 8c010860111f93f74b616a875e005e80a8b2654c Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 11 Jan 2024 17:16:40 +0100 Subject: [PATCH 4/4] chore(changelog): add changes --- packages/svelte/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md index dc044f9e..5f8bc9ea 100644 --- a/packages/svelte/CHANGELOG.md +++ b/packages/svelte/CHANGELOG.md @@ -5,6 +5,7 @@ ### Bugfix - fix `deleteElements` +- fix dragging when draggable=false ### ⚠️ Breaking