diff --git a/examples/svelte/src/routes/examples/edges/+page.svelte b/examples/svelte/src/routes/examples/edges/+page.svelte index 403b0ef6..575984ca 100644 --- a/examples/svelte/src/routes/examples/edges/+page.svelte +++ b/examples/svelte/src/routes/examples/edges/+page.svelte @@ -145,7 +145,16 @@ ]); - + { + console.log('on edge create', e); + return e; + }} +> diff --git a/packages/svelte/src/lib/components/Handle/Handle.svelte b/packages/svelte/src/lib/components/Handle/Handle.svelte index 655bcc6b..7d3010bd 100644 --- a/packages/svelte/src/lib/components/Handle/Handle.svelte +++ b/packages/svelte/src/lib/components/Handle/Handle.svelte @@ -55,6 +55,7 @@ isValidConnection, lib, addEdge, + onedgecreate, panBy, cancelConnection, updateConnection, @@ -80,8 +81,16 @@ cancelConnection, panBy, onConnect: (connection) => { - addEdge(connection); + if ($onedgecreate) { + const modifiedConnection = $onedgecreate(connection); + if (modifiedConnection) { + addEdge(modifiedConnection); + dispatch('connect', { connection }); + } + return; + } + addEdge(connection); // @todo: should we change/ improve the stuff we are passing here? // instead of source/target we could pass fromNodeId, fromHandleId, etc dispatch('connect', { connection }); diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte index 59bff1f4..21ceec49 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte +++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte @@ -71,6 +71,7 @@ export let autoPanOnNodeDrag: $$Props['autoPanOnNodeDrag'] = true; export let onerror: $$Props['onerror'] = undefined; export let ondelete: $$Props['ondelete'] = undefined; + export let onedgecreate: $$Props['onedgecreate'] = undefined; export let attributionPosition: $$Props['attributionPosition'] = undefined; export let proOptions: $$Props['proOptions'] = undefined; export let defaultEdgeOptions: $$Props['defaultEdgeOptions'] = undefined; @@ -149,6 +150,7 @@ autoPanOnNodeDrag, onerror, ondelete, + onedgecreate, connectionMode, nodeDragThreshold }; diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts index daab48e9..9116dc60 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/types.ts +++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts @@ -26,7 +26,8 @@ import type { EdgeTypes, DefaultEdgeOptions, FitViewOptions, - OnDelete + OnDelete, + OnEdgeCreate } from '$lib/types'; import type { Writable } from 'svelte/store'; @@ -89,4 +90,6 @@ export type SvelteFlowProps = DOMAttributes & { onMoveEnd?: OnMoveEnd; onerror?: OnError; ondelete?: OnDelete; + + onedgecreate?: OnEdgeCreate; }; diff --git a/packages/svelte/src/lib/container/SvelteFlow/utils.ts b/packages/svelte/src/lib/container/SvelteFlow/utils.ts index 9abdb3e9..0281cd55 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/utils.ts +++ b/packages/svelte/src/lib/container/SvelteFlow/utils.ts @@ -64,6 +64,7 @@ export type UpdatableStoreProps = { connectionMode?: UnwrapWritable; onerror?: UnwrapWritable; ondelete?: UnwrapWritable; + onedgecreate?: UnwrapWritable; nodeDragThreshold?: UnwrapWritable; }; diff --git a/packages/svelte/src/lib/store/initial-store.ts b/packages/svelte/src/lib/store/initial-store.ts index dbbb17fc..8f358cf9 100644 --- a/packages/svelte/src/lib/store/initial-store.ts +++ b/packages/svelte/src/lib/store/initial-store.ts @@ -35,7 +35,8 @@ import type { Node, Edge, FitViewOptions, - OnDelete + OnDelete, + OnEdgeCreate } from '$lib/types'; import { createNodesStore, createEdgesStore } from './utils'; import { initConnectionProps, type ConnectionProps } from './derived-connection-props'; @@ -130,6 +131,7 @@ export const getInitialStore = ({ lib: readable('svelte'), onlyRenderVisibleElements: writable(false), onerror: writable(devWarn), - ondelete: writable(undefined) + ondelete: writable(undefined), + onedgecreate: writable(undefined) }; }; diff --git a/packages/svelte/src/lib/types/general.ts b/packages/svelte/src/lib/types/general.ts index 14764318..62666705 100644 --- a/packages/svelte/src/lib/types/general.ts +++ b/packages/svelte/src/lib/types/general.ts @@ -4,7 +4,8 @@ import type { HandleType, Position, XYPosition, - ConnectingHandle + ConnectingHandle, + Connection } from '@xyflow/system'; import type { Node } from './nodes'; @@ -35,3 +36,4 @@ export type HandleComponentProps = { export type FitViewOptions = FitViewOptionsBase; export type OnDelete = (params: { nodes: Node[]; edges: Edge[] }) => void; +export type OnEdgeCreate = (connection: Connection) => Edge | Connection | void;