From bba97aa01a661398b8d5cb6912bf9ffdf82f0548 Mon Sep 17 00:00:00 2001 From: Peter Date: Tue, 26 Sep 2023 15:45:06 +0200 Subject: [PATCH 1/7] feat(svelte) added connectionLineComponent --- .../src/components/Header/Header.svelte | 3 +- .../custom-connection-line/+page.svelte | 35 +++++++++++++++++++ .../ConnectionLine.svelte | 11 ++++++ .../custom-connection-line/CustomNode.svelte | 34 ++++++++++++++++++ .../ConnectionLine/ConnectionLine.svelte | 8 +++-- .../container/SvelteFlow/SvelteFlow.svelte | 4 ++- 6 files changed, 90 insertions(+), 5 deletions(-) create mode 100644 examples/svelte/src/routes/custom-connection-line/+page.svelte create mode 100644 examples/svelte/src/routes/custom-connection-line/ConnectionLine.svelte create mode 100644 examples/svelte/src/routes/custom-connection-line/CustomNode.svelte diff --git a/examples/svelte/src/components/Header/Header.svelte b/examples/svelte/src/components/Header/Header.svelte index 6fa79b68..3d0c9ff5 100644 --- a/examples/svelte/src/components/Header/Header.svelte +++ b/examples/svelte/src/components/Header/Header.svelte @@ -13,7 +13,8 @@ 'subflows', 'usesvelteflow', 'useupdatenodeinternals', - 'validation' + 'validation', + 'custom-connection-line' ]; const onChange = (event: Event) => { diff --git a/examples/svelte/src/routes/custom-connection-line/+page.svelte b/examples/svelte/src/routes/custom-connection-line/+page.svelte new file mode 100644 index 00000000..c5bcab3f --- /dev/null +++ b/examples/svelte/src/routes/custom-connection-line/+page.svelte @@ -0,0 +1,35 @@ + + +
+ + + + +
+ + diff --git a/examples/svelte/src/routes/custom-connection-line/ConnectionLine.svelte b/examples/svelte/src/routes/custom-connection-line/ConnectionLine.svelte new file mode 100644 index 00000000..977359f1 --- /dev/null +++ b/examples/svelte/src/routes/custom-connection-line/ConnectionLine.svelte @@ -0,0 +1,11 @@ + + +{#if $connectionPath} + + + +{/if} diff --git a/examples/svelte/src/routes/custom-connection-line/CustomNode.svelte b/examples/svelte/src/routes/custom-connection-line/CustomNode.svelte new file mode 100644 index 00000000..0f4cc6bd --- /dev/null +++ b/examples/svelte/src/routes/custom-connection-line/CustomNode.svelte @@ -0,0 +1,34 @@ + + +
+
Node
+ + + +
diff --git a/packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte b/packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte index f2abe041..31d67711 100644 --- a/packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte +++ b/packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte @@ -8,8 +8,10 @@ {#if $connectionPath} - - - + + + + + {/if} diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte index 600622ce..c77c0b29 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte +++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte @@ -154,7 +154,9 @@ - + + +
Date: Tue, 26 Sep 2023 15:49:09 +0200 Subject: [PATCH 2/7] refined example --- .../src/routes/custom-connection-line/ConnectionLine.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/svelte/src/routes/custom-connection-line/ConnectionLine.svelte b/examples/svelte/src/routes/custom-connection-line/ConnectionLine.svelte index 977359f1..a3676bb0 100644 --- a/examples/svelte/src/routes/custom-connection-line/ConnectionLine.svelte +++ b/examples/svelte/src/routes/custom-connection-line/ConnectionLine.svelte @@ -6,6 +6,6 @@ {#if $connectionPath} - + {/if} From 854a9d3606868ddb2da7daba88d0ee151f4f3807 Mon Sep 17 00:00:00 2001 From: Peter Date: Tue, 26 Sep 2023 16:01:00 +0200 Subject: [PATCH 3/7] feat(svelte) added connectionLineContainerStyle and connectionLineStyle props --- .../lib/components/ConnectionLine/ConnectionLine.svelte | 7 +++++-- .../svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte | 4 +++- packages/svelte/src/lib/container/SvelteFlow/types.ts | 2 ++ 3 files changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte b/packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte index 31d67711..9f53f486 100644 --- a/packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte +++ b/packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte @@ -3,13 +3,16 @@ import { useStore } from '$lib/store'; + export let containerStyle: string = ''; + export let style: string = ''; + const { connectionPath, width, height, connection } = useStore(); {#if $connectionPath} - + - + diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte index c77c0b29..ec54dfea 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte +++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte @@ -39,6 +39,8 @@ export let connectionRadius: $$Props['connectionRadius'] = undefined; export let connectionLineType: $$Props['connectionLineType'] = undefined; export let connectionMode: $$Props['connectionMode'] = ConnectionMode.Strict; + export let connectionLineStyle: $$Props['connectionLineStyle'] = ''; + export let connectionLineContainerStyle: $$Props['connectionLineContainerStyle'] = ''; export let onMoveStart: $$Props['onMoveStart'] = undefined; export let onMove: $$Props['onMove'] = undefined; export let onMoveEnd: $$Props['onMoveEnd'] = undefined; @@ -154,7 +156,7 @@ - +
diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts index 8f038bcb..00fed6d6 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/types.ts +++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts @@ -39,6 +39,8 @@ export type SvelteFlowProps = DOMAttributes & { initialViewport?: Viewport; connectionRadius?: number; connectionMode?: ConnectionMode; + connectionLineStyle?: string; + connectionLineContainerStyle?: string; selectionMode?: SelectionMode; snapGrid?: SnapGrid; defaultMarkerColor?: string; From 66caa4c8caf7119623b13cf1d0ae17ca0ef08d86 Mon Sep 17 00:00:00 2001 From: Peter Date: Wed, 27 Sep 2023 13:40:03 +0200 Subject: [PATCH 4/7] chore(svelte) refactored connectionPath & connection --- .../ConnectionLine.svelte | 8 +-- .../ConnectionLine/ConnectionLine.svelte | 8 +-- ...on-path.ts => derived-connection-props.ts} | 49 +++++++++++++++++-- packages/svelte/src/lib/store/index.ts | 42 +++++++--------- .../svelte/src/lib/store/initial-store.ts | 13 ++--- packages/system/src/types/general.ts | 8 +-- packages/system/src/xyhandle/XYHandle.ts | 17 +++++-- 7 files changed, 88 insertions(+), 57 deletions(-) rename packages/svelte/src/lib/store/{connection-path.ts => derived-connection-props.ts} (68%) diff --git a/examples/svelte/src/routes/custom-connection-line/ConnectionLine.svelte b/examples/svelte/src/routes/custom-connection-line/ConnectionLine.svelte index a3676bb0..20ac6192 100644 --- a/examples/svelte/src/routes/custom-connection-line/ConnectionLine.svelte +++ b/examples/svelte/src/routes/custom-connection-line/ConnectionLine.svelte @@ -1,11 +1,11 @@ -{#if $connectionPath} - - +{#if $connection.path} + + {/if} diff --git a/packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte b/packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte index 9f53f486..d88cb728 100644 --- a/packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte +++ b/packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte @@ -6,14 +6,14 @@ export let containerStyle: string = ''; export let style: string = ''; - const { connectionPath, width, height, connection } = useStore(); + const { width, height, connection } = useStore(); -{#if $connectionPath} +{#if $connection.path} - - + + diff --git a/packages/svelte/src/lib/store/connection-path.ts b/packages/svelte/src/lib/store/derived-connection-props.ts similarity index 68% rename from packages/svelte/src/lib/store/connection-path.ts rename to packages/svelte/src/lib/store/derived-connection-props.ts index aea51c3f..f9586885 100644 --- a/packages/svelte/src/lib/store/connection-path.ts +++ b/packages/svelte/src/lib/store/derived-connection-props.ts @@ -1,4 +1,4 @@ -import { derived } from 'svelte/store'; +import { derived, type Writable } from 'svelte/store'; import { getBezierPath, getSmoothStepPath, @@ -10,6 +10,35 @@ import { } from '@xyflow/system'; import type { SvelteFlowStoreState } from './types'; +import type { ConnectionData } from '$lib/types'; + +export type ConnectionProps = { + path: string | null; + sourceX: number | null; + sourceY: number | null; + sourcePosition: Position | undefined | null; + targetX: number | null; + targetY: number | null; + targetPosition: Position | undefined | null; + pointerPosition: ConnectionData['connectionPosition'] | null; + startHandle: ConnectionData['connectionStartHandle'] | null; + endHandle: ConnectionData['connectionEndHandle'] | null; + status: ConnectionData['connectionStatus'] | null; +}; + +export const initConnectionProps = { + path: null, + sourceX: null, + sourceY: null, + sourcePosition: null, + targetX: null, + targetY: null, + targetPosition: null, + pointerPosition: null, + startHandle: null, + endHandle: null, + status: null +}; const oppositePosition = { [Position.Left]: Position.Right, @@ -18,10 +47,13 @@ const oppositePosition = { [Position.Bottom]: Position.Top }; -export function getConnectionPath(store: SvelteFlowStoreState) { +export function getDerivedConnectionProps( + store: SvelteFlowStoreState, + currentConnection: Writable +) { return derived( [ - store.connection, + currentConnection, store.connectionLineType, store.connectionMode, store.nodes, @@ -29,7 +61,7 @@ export function getConnectionPath(store: SvelteFlowStoreState) { ], ([connection, connectionLineType, connectionMode, nodes, transform]) => { if (!connection.connectionStartHandle?.nodeId) { - return null; + return initConnectionProps; } const fromNode = nodes.find((n) => n.id === connection.connectionStartHandle?.nodeId); @@ -80,7 +112,14 @@ export function getConnectionPath(store: SvelteFlowStoreState) { [path] = getStraightPath(pathParams); } - return path; + return { + path, + ...pathParams, + pointerPosition: connection.connectionPosition, + startHandle: connection.connectionStartHandle, + endHandle: connection.connectionEndHandle, + status: connection.connectionStatus + }; } ); } diff --git a/packages/svelte/src/lib/store/index.ts b/packages/svelte/src/lib/store/index.ts index 08fc8b90..18896dae 100644 --- a/packages/svelte/src/lib/store/index.ts +++ b/packages/svelte/src/lib/store/index.ts @@ -1,5 +1,5 @@ import { getContext, setContext } from 'svelte'; -import { derived, get } from 'svelte/store'; +import { derived, get, writable } from 'svelte/store'; import { internalsSymbol, createMarkerIds, @@ -19,18 +19,13 @@ import { } from '@xyflow/system'; import { addEdge as addEdgeUtil } from '$lib/utils'; -import type { EdgeTypes, NodeTypes, Node, Edge, FitViewOptions } from '$lib/types'; -import { getConnectionPath } from './connection-path'; -import { - initConnectionData, - initialEdgeTypes, - initialNodeTypes, - getInitialStore -} from './initial-store'; +import type { EdgeTypes, NodeTypes, Node, Edge, FitViewOptions, ConnectionData } from '$lib/types'; +import { initialEdgeTypes, initialNodeTypes, getInitialStore } from './initial-store'; import type { SvelteFlowStore } from './types'; import { syncNodeStores, syncEdgeStores } from './utils'; import { getEdgeTree } from './edge-tree'; import { getVisibleNodes } from './visible-nodes'; +import { getDerivedConnectionProps } from './derived-connection-props'; export const key = Symbol(); @@ -252,25 +247,22 @@ export function createStore(): SvelteFlowStore { }); } - const updateConnection: UpdateConnection = (update) => { - const currentConnectionData = get(store.connection); + const initConnectionUpdateData = { + connectionStartHandle: null, + connectionEndHandle: null, + connectionPosition: null, + connectionStatus: null + }; - const nextConnectionData = currentConnectionData - ? { - ...initConnectionData, - ...currentConnectionData, - ...update - } - : { - ...initConnectionData, - ...update - }; - - store.connection.set(nextConnectionData); + // by creating an internal, unexposed store and using a derived store + // we prevent using slow get() calls + const currentConnection = writable(initConnectionUpdateData); + const updateConnection: UpdateConnection = (newConnection: ConnectionData) => { + currentConnection.set(newConnection); }; function cancelConnection() { - updateConnection(initConnectionData); + updateConnection(initConnectionUpdateData); } function reset() { @@ -292,7 +284,7 @@ export function createStore(): SvelteFlowStore { // derived state edgeTree: getEdgeTree(store), - connectionPath: getConnectionPath(store), + connection: getDerivedConnectionProps(store, currentConnection), visibleNodes: getVisibleNodes(store), markers: derived( [store.edges, store.defaultMarkerColor, store.flowId], diff --git a/packages/svelte/src/lib/store/initial-store.ts b/packages/svelte/src/lib/store/initial-store.ts index f3e69b9e..2740be0a 100644 --- a/packages/svelte/src/lib/store/initial-store.ts +++ b/packages/svelte/src/lib/store/initial-store.ts @@ -24,15 +24,9 @@ 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 { ConnectionData, NodeTypes, EdgeTypes, EdgeLayouted, Node } from '$lib/types'; +import type { NodeTypes, EdgeTypes, EdgeLayouted, Node } from '$lib/types'; import { createNodesStore, createEdgesStore } from './utils'; - -export const initConnectionData = { - connectionStartHandle: null, - connectionEndHandle: null, - connectionPosition: null, - connectionStatus: null -}; +import { initConnectionProps, type ConnectionProps } from './derived-connection-props'; export const initialNodeTypes = { input: InputNode, @@ -79,8 +73,7 @@ export const getInitialStore = () => ({ transform: writable([0, 0, 1]), connectionMode: writable(ConnectionMode.Strict), domNode: writable(null), - connectionPath: readable(null), - connection: writable(initConnectionData), + connection: readable(initConnectionProps), connectionLineType: writable(ConnectionLineType.Bezier), connectionRadius: writable(20), isValidConnection: writable(() => true), diff --git a/packages/system/src/types/general.ts b/packages/system/src/types/general.ts index ba1c6e3c..d23dee9b 100644 --- a/packages/system/src/types/general.ts +++ b/packages/system/src/types/general.ts @@ -131,8 +131,8 @@ export type UpdateNodePositions = ( export type PanBy = (delta: XYPosition) => boolean; export type UpdateConnection = (params: { - connectionPosition?: XYPosition | null; - connectionStatus?: ConnectionStatus | null; - connectionStartHandle?: ConnectingHandle | null; - connectionEndHandle?: ConnectingHandle | null; + connectionPosition: XYPosition | null; + connectionStatus: ConnectionStatus | null; + connectionStartHandle: ConnectingHandle | null; + connectionEndHandle: ConnectingHandle | null; }) => void; diff --git a/packages/system/src/xyhandle/XYHandle.ts b/packages/system/src/xyhandle/XYHandle.ts index 732b3e60..6ec86528 100644 --- a/packages/system/src/xyhandle/XYHandle.ts +++ b/packages/system/src/xyhandle/XYHandle.ts @@ -66,6 +66,8 @@ const nullConnection: Connection = { source: null, target: null, sourceHandle: n const alwaysValid = () => true; +let connectionStartHandle: ConnectingHandle | null = null; + function onPointerDown( event: MouseEvent | TouchEvent, { @@ -129,15 +131,18 @@ function onPointerDown( autoPanId = requestAnimationFrame(autoPan); } + // Stays the same for all consecutive pointermove events + connectionStartHandle = { + nodeId, + handleId, + type: handleType, + }; + updateConnection({ connectionPosition, connectionStatus: null, // connectionNodeId etc will be removed in the next major in favor of connectionStartHandle - connectionStartHandle: { - nodeId, - handleId, - type: handleType, - }, + connectionStartHandle, connectionEndHandle: null, }); @@ -173,6 +178,7 @@ function onPointerDown( isValid = result.isValid; updateConnection({ + connectionStartHandle, connectionPosition: closestHandle && isValid ? rendererPointToPoint( @@ -220,6 +226,7 @@ function onPointerDown( isValid = false; connection = null; handleDomNode = null; + connectionStartHandle = null; doc.removeEventListener('mousemove', onPointerMove as EventListener); doc.removeEventListener('mouseup', onPointerUp as EventListener); From 1d8fc1bfaf8702c88eb7d07f18fcbe8d0ea5ce98 Mon Sep 17 00:00:00 2001 From: Peter Date: Wed, 27 Sep 2023 15:53:17 +0200 Subject: [PATCH 5/7] fix(svelte) backup connection line now renders correctly --- .../svelte/src/routes/custom-connection-line/+page.svelte | 2 +- .../lib/components/ConnectionLine/ConnectionLine.svelte | 6 ++++-- .../svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte | 8 ++++++-- 3 files changed, 11 insertions(+), 5 deletions(-) diff --git a/examples/svelte/src/routes/custom-connection-line/+page.svelte b/examples/svelte/src/routes/custom-connection-line/+page.svelte index c5bcab3f..58552225 100644 --- a/examples/svelte/src/routes/custom-connection-line/+page.svelte +++ b/examples/svelte/src/routes/custom-connection-line/+page.svelte @@ -26,7 +26,7 @@
- +
diff --git a/packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte b/packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte index d88cb728..f8ddc5b3 100644 --- a/packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte +++ b/packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte @@ -5,16 +5,18 @@ export let containerStyle: string = ''; export let style: string = ''; + export let usingCustomLine: boolean = false; const { width, height, connection } = useStore(); {#if $connection.path} - + + {#if !usingCustomLine} - + {/if} {/if} diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte index 2f13ac2f..bb450236 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte +++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte @@ -162,8 +162,12 @@ - - + +
Date: Wed, 27 Sep 2023 16:02:46 +0200 Subject: [PATCH 6/7] fix(svelte) corrected positioning --- .../custom-connection-line/ConnectionLine.svelte | 4 +--- .../components/ConnectionLine/ConnectionLine.svelte | 11 ++++++----- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/examples/svelte/src/routes/custom-connection-line/ConnectionLine.svelte b/examples/svelte/src/routes/custom-connection-line/ConnectionLine.svelte index 20ac6192..23d8653d 100644 --- a/examples/svelte/src/routes/custom-connection-line/ConnectionLine.svelte +++ b/examples/svelte/src/routes/custom-connection-line/ConnectionLine.svelte @@ -5,7 +5,5 @@ {#if $connection.path} - - - + {/if} diff --git a/packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte b/packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte index f8ddc5b3..4635dad5 100644 --- a/packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte +++ b/packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte @@ -12,11 +12,12 @@ {#if $connection.path} - - {#if !usingCustomLine} - + + + + {#if !usingCustomLine} - - {/if} + {/if} + {/if} From 8a1a26385a2e16562af62ea4e2a4acfbed7b687b Mon Sep 17 00:00:00 2001 From: moklick Date: Wed, 27 Sep 2023 16:10:16 +0200 Subject: [PATCH 7/7] feat(hooks): add useConnection --- .../custom-connection-line/ConnectionLine.svelte | 4 ++-- packages/svelte/src/lib/hooks/useConnection.ts | 10 ++++++++++ packages/svelte/src/lib/index.ts | 1 + 3 files changed, 13 insertions(+), 2 deletions(-) create mode 100644 packages/svelte/src/lib/hooks/useConnection.ts diff --git a/examples/svelte/src/routes/custom-connection-line/ConnectionLine.svelte b/examples/svelte/src/routes/custom-connection-line/ConnectionLine.svelte index 23d8653d..0a7f87b5 100644 --- a/examples/svelte/src/routes/custom-connection-line/ConnectionLine.svelte +++ b/examples/svelte/src/routes/custom-connection-line/ConnectionLine.svelte @@ -1,7 +1,7 @@ {#if $connection.path} diff --git a/packages/svelte/src/lib/hooks/useConnection.ts b/packages/svelte/src/lib/hooks/useConnection.ts new file mode 100644 index 00000000..6db9e735 --- /dev/null +++ b/packages/svelte/src/lib/hooks/useConnection.ts @@ -0,0 +1,10 @@ +import type { Readable } from 'svelte/store'; + +import { useStore } from '$lib/store'; +import type { ConnectionProps } from '$lib/store/derived-connection-props'; + +export function useConnection(): Readable { + const { connection } = useStore(); + + return connection; +} diff --git a/packages/svelte/src/lib/index.ts b/packages/svelte/src/lib/index.ts index 66b1af10..f1af3791 100644 --- a/packages/svelte/src/lib/index.ts +++ b/packages/svelte/src/lib/index.ts @@ -21,6 +21,7 @@ export { useStore } from '$lib/store'; export * from '$lib/utils'; export * from '$lib/hooks/useSvelteFlow'; export * from '$lib/hooks/useUpdateNodeInternals'; +export * from '$lib/hooks/useConnection'; // types export type { Edge, EdgeProps, EdgeTypes, DefaultEdgeOptions } from '$lib/types/edges';