From 4a42a1a2e240559a40940091e7623f7c46c6ba28 Mon Sep 17 00:00:00 2001 From: peterkogo Date: Tue, 15 Apr 2025 15:56:57 +0200 Subject: [PATCH] fix defaultEdge options and add elevateEdgesOnSelect --- .../EdgeReconnectAnchor.svelte | 5 ++--- .../components/EdgeWrapper/EdgeWrapper.svelte | 4 +++- .../lib/container/SvelteFlow/Wrapper.svelte | 1 + .../src/lib/container/SvelteFlow/types.ts | 13 +++++++++++ .../src/lib/store/initial-store.svelte.ts | 13 +++++++++-- .../svelte/src/lib/store/visibleElements.ts | 22 ++++++++++++++----- 6 files changed, 47 insertions(+), 11 deletions(-) diff --git a/packages/svelte/src/lib/components/EdgeReconnectAnchor/EdgeReconnectAnchor.svelte b/packages/svelte/src/lib/components/EdgeReconnectAnchor/EdgeReconnectAnchor.svelte index 96ea290a..8af29883 100644 --- a/packages/svelte/src/lib/components/EdgeReconnectAnchor/EdgeReconnectAnchor.svelte +++ b/packages/svelte/src/lib/components/EdgeReconnectAnchor/EdgeReconnectAnchor.svelte @@ -2,9 +2,8 @@ import { useStore } from '$lib/store'; import type { Edge } from '$lib/types'; import { XYHandle, type HandleType, type XYPosition } from '@xyflow/system'; - import { getContext, type Snippet } from 'svelte'; - import type { ClassValue } from 'svelte/elements'; - import EdgeLabel from '../EdgeLabel/EdgeLabel.svelte'; + import { getContext } from 'svelte'; + import { EdgeLabel } from '../EdgeLabel'; import type { EdgeReconnectAnchorProps } from './types'; let { diff --git a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte b/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte index cac00565..b7f225ab 100644 --- a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte +++ b/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte @@ -44,7 +44,9 @@ zIndex, class: className, ariaLabel - } = $derived(store.defaultEdgeOptions ? { ...store.defaultEdgeOptions, ...edge } : edge); + } = $derived(edge); + + $inspect(edge); const { id } = edge; setContext('svelteflow__edge_id', id); diff --git a/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte b/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte index df9cf3b7..8fbf80cc 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte +++ b/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte @@ -73,6 +73,7 @@ style, defaultEdgeOptions, elevateNodesOnSelect, + elevateEdgesOnSelect, nodesDraggable, nodesConnectable, elementsSelectable, diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts index bf8ed51b..3e4a9c1d 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/types.ts +++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts @@ -337,6 +337,19 @@ export type SvelteFlowProps = NodeEvents & * @default true */ elevateNodesOnSelect?: boolean; + /** + * Enabling this option will raise the z-index of edges when they are selected, + * or when the connected nodes are selected. + * @default true + */ + elevateEdgesOnSelect?: boolean; + /** + * This callback can be used to validate a new connection + * + * If you return `false`, the edge will not be added to your flow. + * If you have custom connection logic its preferred to use this callback over the + * `isValidConnection` prop on the handle component for performance reasons. + */ isValidConnection?: IsValidConnection; /** This event handler is called when the user begins to pan or zoom the viewport */ onmovestart?: OnMoveStart; diff --git a/packages/svelte/src/lib/store/initial-store.svelte.ts b/packages/svelte/src/lib/store/initial-store.svelte.ts index 75fbc327..893c7fb3 100644 --- a/packages/svelte/src/lib/store/initial-store.svelte.ts +++ b/packages/svelte/src/lib/store/initial-store.svelte.ts @@ -151,13 +151,22 @@ export const getInitialStore = (signals: StoreSignals) => { nodeLookup, connectionMode, onerror, - onlyRenderVisibleElements + onlyRenderVisibleElements, + defaultEdgeOptions } = this; let visibleNodes: Map; let visibleEdges: Map; - const options = { edges, previousEdges, nodeLookup, connectionMode, onerror }; + const options = { + edges, + defaultEdgeOptions, + previousEdges, + nodeLookup, + connectionMode, + elevateEdgesOnSelect: signals.props.elevateEdgesOnSelect ?? true, + onerror + }; if (onlyRenderVisibleElements) { // We only subscribe to viewport, width, height if onlyRenderVisibleElements is true diff --git a/packages/svelte/src/lib/store/visibleElements.ts b/packages/svelte/src/lib/store/visibleElements.ts index 7b64478b..b8dc4462 100644 --- a/packages/svelte/src/lib/store/visibleElements.ts +++ b/packages/svelte/src/lib/store/visibleElements.ts @@ -1,4 +1,4 @@ -import type { Edge, EdgeLayouted, InternalNode } from '$lib/types'; +import type { DefaultEdgeOptions, Edge, EdgeLayouted, InternalNode } from '$lib/types'; import { ConnectionMode, getEdgePosition, @@ -27,6 +27,8 @@ export function getVisibleNodes( export interface EdgeLayoutBaseOptions { edges: Edge[]; + defaultEdgeOptions: DefaultEdgeOptions; + elevateEdgesOnSelect: boolean; previousEdges: Map; nodeLookup: NodeLookup; connectionMode: ConnectionMode; @@ -52,7 +54,16 @@ export interface EdgeLayoutOnlyVisibleOptions extends EdgeLayoutBaseOptions { export type EdgeLayoutOptions = EdgeLayoutAllOptions | EdgeLayoutOnlyVisibleOptions; export function getLayoutedEdges(options: EdgeLayoutOptions): Map { - const { edges, nodeLookup, previousEdges, connectionMode, onerror, onlyRenderVisible } = options; + const { + edges, + defaultEdgeOptions, + nodeLookup, + previousEdges, + connectionMode, + onerror, + onlyRenderVisible, + elevateEdgesOnSelect + } = options; const layoutedEdges = new Map(); for (const edge of edges) { const sourceNode = nodeLookup.get(edge.source); @@ -107,15 +118,16 @@ export function getLayoutedEdges(options: EdgeLayoutOptions): Map