diff --git a/examples/svelte/src/routes/examples/edges/+page.svelte b/examples/svelte/src/routes/examples/edges/+page.svelte index 403b0ef6..fc118333 100644 --- a/examples/svelte/src/routes/examples/edges/+page.svelte +++ b/examples/svelte/src/routes/examples/edges/+page.svelte @@ -145,7 +145,7 @@ ]); - + diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte index c648d07b..10c1751e 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte +++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte @@ -63,7 +63,8 @@ export let selectionOnDrag: $$Props['selectionOnDrag'] = undefined; export let autoPanOnConnect: $$Props['autoPanOnConnect'] = true; export let autoPanOnNodeDrag: $$Props['autoPanOnNodeDrag'] = true; - export let onError: $$Props['onError'] = undefined; + export let onerror: $$Props['onerror'] = undefined; + export let ondelete: $$Props['ondelete'] = undefined; export let attributionPosition: $$Props['attributionPosition'] = undefined; export let proOptions: $$Props['proOptions'] = undefined; export let defaultEdgeOptions: $$Props['defaultEdgeOptions'] = undefined; @@ -139,7 +140,8 @@ isValidConnection, autoPanOnConnect, autoPanOnNodeDrag, - onError, + onerror, + ondelete, connectionMode, nodeDragThreshold }; diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts index b239094a..bf66a30b 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/types.ts +++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts @@ -24,7 +24,8 @@ import type { KeyDefinition, EdgeTypes, DefaultEdgeOptions, - FitViewOptions + FitViewOptions, + OnDelete } from '$lib/types'; import type { Writable } from 'svelte/store'; @@ -84,5 +85,6 @@ export type SvelteFlowProps = DOMAttributes & { onMoveStart?: OnMoveStart; onMove?: OnMove; onMoveEnd?: OnMoveEnd; - onError?: OnError; + onerror?: OnError; + ondelete?: OnDelete; }; diff --git a/packages/svelte/src/lib/container/SvelteFlow/utils.ts b/packages/svelte/src/lib/container/SvelteFlow/utils.ts index 0579eaa9..fe5a15aa 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/utils.ts +++ b/packages/svelte/src/lib/container/SvelteFlow/utils.ts @@ -62,7 +62,8 @@ export type UpdatableStoreProps = { autoPanOnConnect?: UnwrapWritable; autoPanOnNodeDrag?: UnwrapWritable; connectionMode?: UnwrapWritable; - onError?: UnwrapWritable; + onerror?: UnwrapWritable; + ondelete?: UnwrapWritable; nodeDragThreshold?: UnwrapWritable; }; diff --git a/packages/svelte/src/lib/store/edge-tree.ts b/packages/svelte/src/lib/store/edge-tree.ts index 0861be01..cd5448ab 100644 --- a/packages/svelte/src/lib/store/edge-tree.ts +++ b/packages/svelte/src/lib/store/edge-tree.ts @@ -41,8 +41,8 @@ export function getEdgeTree(store: SvelteFlowStoreState) { ); return derived( - [visibleEdges, store.nodes, store.nodeLookup, store.connectionMode, store.onError], - ([visibleEdges, , nodeLookup, connectionMode, onError]) => { + [visibleEdges, store.nodes, store.nodeLookup, store.connectionMode, store.onerror], + ([visibleEdges, , nodeLookup, connectionMode, onerror]) => { const layoutedEdges = visibleEdges.reduce((res, edge) => { const sourceNode = nodeLookup.get(edge.source); const targetNode = nodeLookup.get(edge.target); @@ -58,7 +58,7 @@ export function getEdgeTree(store: SvelteFlowStoreState) { sourceHandle: edge.sourceHandle || null, targetHandle: edge.targetHandle || null, connectionMode, - onError + onError: onerror }); if (edgePosition) { diff --git a/packages/svelte/src/lib/store/index.ts b/packages/svelte/src/lib/store/index.ts index 27a6aee0..625191e0 100644 --- a/packages/svelte/src/lib/store/index.ts +++ b/packages/svelte/src/lib/store/index.ts @@ -221,6 +221,11 @@ export function createStore({ store.edges.update((eds) => eds.filter((edge) => !matchingEdges.some((mE) => mE.id === edge.id)) ); + + get(store.ondelete)?.({ + nodes: matchingNodes, + edges: matchingEdges + }); } } }); diff --git a/packages/svelte/src/lib/store/initial-store.ts b/packages/svelte/src/lib/store/initial-store.ts index 2e40a719..d6b621d9 100644 --- a/packages/svelte/src/lib/store/initial-store.ts +++ b/packages/svelte/src/lib/store/initial-store.ts @@ -28,7 +28,15 @@ import BezierEdge from '$lib/components/edges/BezierEdge.svelte'; import StraightEdge from '$lib/components/edges/StraightEdge.svelte'; import SmoothStepEdge from '$lib/components/edges/SmoothStepEdge.svelte'; import StepEdge from '$lib/components/edges/StepEdge.svelte'; -import type { NodeTypes, EdgeTypes, EdgeLayouted, Node, Edge, FitViewOptions } from '$lib/types'; +import type { + NodeTypes, + EdgeTypes, + EdgeLayouted, + Node, + Edge, + FitViewOptions, + OnDelete +} from '$lib/types'; import { createNodesStore, createEdgesStore } from './utils'; import { initConnectionProps, type ConnectionProps } from './derived-connection-props'; @@ -125,6 +133,7 @@ export const getInitialStore = ({ defaultMarkerColor: writable('#b1b1b7'), lib: readable('svelte'), onlyRenderVisibleElements: writable(false), - onError: writable(devWarn) + onerror: writable(devWarn), + ondelete: writable(undefined) }; }; diff --git a/packages/svelte/src/lib/types/general.ts b/packages/svelte/src/lib/types/general.ts index d73f4a4e..14764318 100644 --- a/packages/svelte/src/lib/types/general.ts +++ b/packages/svelte/src/lib/types/general.ts @@ -8,6 +8,7 @@ import type { } from '@xyflow/system'; import type { Node } from './nodes'; +import type { Edge } from './edges'; export type KeyModifier = ShortcutModifierDefinition; export type KeyDefinitionObject = { key: string; modifier?: KeyModifier }; @@ -32,3 +33,5 @@ export type HandleComponentProps = { }; export type FitViewOptions = FitViewOptionsBase; + +export type OnDelete = (params: { nodes: Node[]; edges: Edge[] }) => void;