feat(svelte): add zIndexMode

packages/react/src/types/component-props.ts

@@ -692,5 +692,11 @@ export interface ReactFlowProps<NodeType extends Node = Node, EdgeType extends E
    * Allows localization, customization of ARIA descriptions, control labels, minimap labels, and other UI strings.
    */
   ariaLabelConfig?: Partial<AriaLabelConfig>;
+  /**
+   * Used to define how z-indexing is calculated for nodes and edges.
+   * 'auto' is for selections and sub flows, 'basic' for selections only, and 'manual' for no auto z-indexing.
+   *
+   * @default 'auto'
+   */
   zIndexMode?: ZIndexMode;
 }

packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte

@@ -96,6 +96,7 @@
     ariaLabelConfig,
     autoPanSpeed,
     panOnScrollSpeed,
+    zIndexMode,
     ...divAttributes
   } = $derived(rest);
   /* eslint-enable @typescript-eslint/no-unused-vars */

packages/svelte/src/lib/container/SvelteFlow/types.ts

@@ -21,7 +21,8 @@ import type {
   OnReconnect,
   OnReconnectStart,
   OnReconnectEnd,
-  AriaLabelConfig
+  AriaLabelConfig,
+  ZIndexMode
 } from '@xyflow/system';
 
 import type {
@@ -500,4 +501,11 @@ export type SvelteFlowProps<
      * Allows localization, customization of ARIA descriptions, control labels, minimap labels, and other UI strings.
      */
     ariaLabelConfig?: Partial<AriaLabelConfig>;
+    /**
+     * Used to define how z-indexing is calculated for nodes and edges.
+     * 'auto' is for selections and sub flows, 'basic' for selections only, and 'manual' for no auto z-indexing.
+     *
+     * @default 'auto'
+     */
+    zIndexMode?: ZIndexMode;
   };

packages/svelte/src/lib/store/index.ts

@@ -62,7 +62,9 @@ export function createStore<NodeType extends Node = Node, EdgeType extends Edge
       store.nodeLookup,
       store.parentLookup,
       store.domNode,
-      store.nodeOrigin
+      store.nodeOrigin,
+      store.nodeExtent,
+      store.zIndexMode
     );
 
     if (!updatedInternals) {
@@ -71,7 +73,8 @@ export function createStore<NodeType extends Node = Node, EdgeType extends Edge
 
     updateAbsolutePositions(store.nodeLookup, store.parentLookup, {
       nodeOrigin: store.nodeOrigin,
-      nodeExtent: store.nodeExtent
+      nodeExtent: store.nodeExtent,
+      zIndexMode: store.zIndexMode
     });
 
     if (store.fitViewQueued) {

packages/svelte/src/lib/store/initial-store.svelte.ts

@@ -36,7 +36,8 @@ import {
   type OnReconnect,
   type OnReconnectStart,
   type OnReconnectEnd,
-  type AriaLabelConfig
+  type AriaLabelConfig,
+  type ZIndexMode
 } from '@xyflow/system';
 
 import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
@@ -116,13 +117,15 @@ export function getInitialStore<NodeType extends Node = Node, EdgeType extends E
     panZoom: PanZoomInstance | null = $state.raw(null);
     width = $state.raw<number>(signals.width ?? 0);
     height = $state.raw<number>(signals.height ?? 0);
+    zIndexMode = $state.raw<ZIndexMode>(signals.props.zIndexMode ?? 'auto');
 
     nodesInitialized: boolean = $derived.by(() => {
       const nodesInitialized = adoptUserNodes(signals.nodes, this.nodeLookup, this.parentLookup, {
         nodeExtent: this.nodeExtent,
         nodeOrigin: this.nodeOrigin,
         elevateNodesOnSelect: signals.props.elevateNodesOnSelect ?? true,
-        checkEquality: true
+        checkEquality: true,
+        zIndexMode: this.zIndexMode
       });
 
       if (this.fitViewQueued && nodesInitialized) {
@@ -226,7 +229,8 @@ export function getInitialStore<NodeType extends Node = Node, EdgeType extends E
         connectionMode,
         onerror,
         onlyRenderVisibleElements,
-        defaultEdgeOptions
+        defaultEdgeOptions,
+        zIndexMode
       } = this;
 
       let visibleNodes: Map<string, InternalNode<NodeType>>;
@@ -239,6 +243,7 @@ export function getInitialStore<NodeType extends Node = Node, EdgeType extends E
         nodeLookup,
         connectionMode,
         elevateEdgesOnSelect: signals.props.elevateEdgesOnSelect ?? true,
+        zIndexMode,
         onerror
       };
 

packages/svelte/src/lib/store/visibleElements.ts

@@ -7,7 +7,8 @@ import {
   isEdgeVisible,
   type NodeLookup,
   type OnError,
-  type Transform
+  type Transform,
+  type ZIndexMode
 } from '@xyflow/system';
 
 export function getVisibleNodes<NodeType extends Node = Node>(
@@ -42,6 +43,7 @@ export interface EdgeLayoutAllOptions<NodeType extends Node = Node, EdgeType ext
   transform: never;
   width: never;
   height: never;
+  zIndexMode: never;
 }
 
 export interface EdgeLayoutOnlyVisibleOptions<
@@ -53,6 +55,7 @@ export interface EdgeLayoutOnlyVisibleOptions<
   width: number;
   height: number;
   onlyRenderVisible: true;
+  zIndexMode: ZIndexMode;
 }
 
 export type EdgeLayoutOptions<NodeType extends Node = Node, EdgeType extends Edge = Edge> =
@@ -70,7 +73,8 @@ export function getLayoutedEdges<NodeType extends Node = Node, EdgeType extends
     connectionMode,
     onerror,
     onlyRenderVisible,
-    elevateEdgesOnSelect
+    elevateEdgesOnSelect,
+    zIndexMode
   } = options;
   const layoutedEdges = new Map<string, EdgeLayouted<EdgeType>>();
   for (const edge of edges) {
@@ -134,7 +138,8 @@ export function getLayoutedEdges<NodeType extends Node = Node, EdgeType extends
           zIndex: edge.zIndex ?? defaultEdgeOptions.zIndex,
           sourceNode,
           targetNode,
-          elevateOnSelect: elevateEdgesOnSelect
+          elevateOnSelect: elevateEdgesOnSelect,
+          zIndexMode
         }),
         sourceNode,
         targetNode,