From 3f94dfa84cdab9aae690599214a6c1650f06d3d6 Mon Sep 17 00:00:00 2001 From: Peter Date: Tue, 28 Nov 2023 15:48:19 +0100 Subject: [PATCH 1/3] feat(svelte) added onedgecreate function --- .../svelte/src/routes/examples/edges/+page.svelte | 11 ++++++++++- .../svelte/src/lib/components/Handle/Handle.svelte | 11 ++++++++++- .../src/lib/container/SvelteFlow/SvelteFlow.svelte | 2 ++ packages/svelte/src/lib/container/SvelteFlow/types.ts | 5 ++++- packages/svelte/src/lib/container/SvelteFlow/utils.ts | 1 + packages/svelte/src/lib/store/initial-store.ts | 6 ++++-- packages/svelte/src/lib/types/general.ts | 4 +++- 7 files changed, 34 insertions(+), 6 deletions(-) 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; From 1d7803aff7a0812c3f07a559defc69fbdcf59e2b Mon Sep 17 00:00:00 2001 From: moklick Date: Tue, 28 Nov 2023 16:50:17 +0100 Subject: [PATCH 2/3] chore(svelte/onConnect): cleanup --- .../svelte/src/lib/components/Handle/Handle.svelte | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/packages/svelte/src/lib/components/Handle/Handle.svelte b/packages/svelte/src/lib/components/Handle/Handle.svelte index 7d3010bd..745a0f28 100644 --- a/packages/svelte/src/lib/components/Handle/Handle.svelte +++ b/packages/svelte/src/lib/components/Handle/Handle.svelte @@ -80,20 +80,17 @@ updateConnection, cancelConnection, panBy, - onConnect: (connection) => { - if ($onedgecreate) { - const modifiedConnection = $onedgecreate(connection); - if (modifiedConnection) { - addEdge(modifiedConnection); - dispatch('connect', { connection }); - } + onConnect: (_connection) => { + let connection = $onedgecreate ? $onedgecreate(_connection) : _connection; + + if (!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 }); + dispatch('connect', { connection: _connection }); }, onConnectStart: (event, startParams) => { dispatch('connectstart', { From 95acea54d1dfab616a42ee1900797377c87d123d Mon Sep 17 00:00:00 2001 From: moklick Date: Wed, 29 Nov 2023 16:33:57 +0100 Subject: [PATCH 3/3] chore(react/svelte): cleanup edge creation --- .../src/routes/examples/edges/+page.svelte | 19 +++++++++++++++---- .../src/lib/components/Handle/Handle.svelte | 10 +++++----- packages/system/src/utils/edges/general.ts | 10 +++++++++- 3 files changed, 29 insertions(+), 10 deletions(-) diff --git a/examples/svelte/src/routes/examples/edges/+page.svelte b/examples/svelte/src/routes/examples/edges/+page.svelte index 575984ca..f201a02d 100644 --- a/examples/svelte/src/routes/examples/edges/+page.svelte +++ b/examples/svelte/src/routes/examples/edges/+page.svelte @@ -6,7 +6,8 @@ Background, BackgroundVariant, MiniMap, - MarkerType + MarkerType, + type Connection } from '@xyflow/svelte'; import '@xyflow/svelte/dist/style.css'; @@ -143,6 +144,12 @@ } } ]); + + $: console.log('edges', $edges); + + function getEdgeId(connection: Connection) { + return `edge-${connection.source}-${connection.target}}`; + } { - console.log('on edge create', e); - return e; + onedgecreate={(connection) => { + console.log('on edge create', connection); + + return { + ...connection, + id: getEdgeId(connection) + }; }} > diff --git a/packages/svelte/src/lib/components/Handle/Handle.svelte b/packages/svelte/src/lib/components/Handle/Handle.svelte index 745a0f28..e4b6a823 100644 --- a/packages/svelte/src/lib/components/Handle/Handle.svelte +++ b/packages/svelte/src/lib/components/Handle/Handle.svelte @@ -80,17 +80,17 @@ updateConnection, cancelConnection, panBy, - onConnect: (_connection) => { - let connection = $onedgecreate ? $onedgecreate(_connection) : _connection; + onConnect: (connection) => { + const edge = $onedgecreate ? $onedgecreate(connection) : connection; - if (!connection) { + if (!edge) { return; } - addEdge(connection); + addEdge(edge); // @todo: should we change/ improve the stuff we are passing here? // instead of source/target we could pass fromNodeId, fromHandleId, etc - dispatch('connect', { connection: _connection }); + dispatch('connect', { connection }); }, onConnectStart: (event, startParams) => { dispatch('connectstart', { diff --git a/packages/system/src/utils/edges/general.ts b/packages/system/src/utils/edges/general.ts index bdffbbd8..9ffd8e24 100644 --- a/packages/system/src/utils/edges/general.ts +++ b/packages/system/src/utils/edges/general.ts @@ -112,7 +112,7 @@ export function isEdgeVisible({ sourceNode, targetNode, width, height, transform } const getEdgeId = ({ source, sourceHandle, target, targetHandle }: Connection | EdgeBase): string => - `xyflow__edge-${source}${sourceHandle || ''}-${target}${targetHandle || ''}`; + `xy-edge__${source}${sourceHandle || ''}-${target}${targetHandle || ''}`; const connectionExists = (edge: EdgeBase, edges: EdgeBase[]) => { return edges.some( @@ -148,6 +148,14 @@ export const addEdgeBase = ( return edges; } + if (edge.sourceHandle === null) { + delete edge.sourceHandle; + } + + if (edge.targetHandle === null) { + delete edge.targetHandle; + } + return edges.concat(edge); };