From 472ef21c62cc1b5522fade1a20461f5954526c92 Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Tue, 29 Apr 2025 20:15:23 +0200
Subject: [PATCH] introduce divs for nodes, edges, edge labels and viewport
 front & back to simplify z-index ordering

---
 .../src/lib/actions/portal/portal.svelte.ts   |  4 +--
 .../lib/components/EdgeLabel/EdgeLabel.svelte |  2 +-
 .../ViewportPortal/ViewportPortal.svelte      |  4 +--
 .../lib/components/ViewportPortal/types.ts    |  1 +
 .../EdgeRenderer/EdgeRenderer.svelte          | 28 ++++++++-------
 .../NodeRenderer/NodeRenderer.svelte          | 34 ++++++++++---------
 .../container/SvelteFlow/SvelteFlow.svelte    |  3 ++
 packages/system/src/utils/store.ts            |  5 ++-
 8 files changed, 44 insertions(+), 37 deletions(-)

diff --git a/packages/svelte/src/lib/actions/portal/portal.svelte.ts b/packages/svelte/src/lib/actions/portal/portal.svelte.ts
index e9a7554f..30d465eb 100644
--- a/packages/svelte/src/lib/actions/portal/portal.svelte.ts
+++ b/packages/svelte/src/lib/actions/portal/portal.svelte.ts
@@ -1,13 +1,13 @@
 import { useStore } from '$lib/store';
 
-type Portal = 'viewport' | 'root';
+type Portal = 'viewport-back' | 'viewport-front' | 'root' | 'edge-labels';
 
 function tryToMount(node: Element, domNode: Element | null, target: Portal | undefined) {
   if (!target || !domNode) {
     return;
   }
 
-  const targetEl = target === 'root' ? domNode : domNode.querySelector('.svelte-flow__viewport');
+  const targetEl = target === 'root' ? domNode : domNode.querySelector(`.svelte-flow__${target}`);
 
   if (targetEl) {
     targetEl.appendChild(node);
diff --git a/packages/svelte/src/lib/components/EdgeLabel/EdgeLabel.svelte b/packages/svelte/src/lib/components/EdgeLabel/EdgeLabel.svelte
index 191333b1..187567d7 100644
--- a/packages/svelte/src/lib/components/EdgeLabel/EdgeLabel.svelte
+++ b/packages/svelte/src/lib/components/EdgeLabel/EdgeLabel.svelte
@@ -28,7 +28,7 @@
 </script>
 
 <div
-  use:portal={'viewport'}
+  use:portal={'edge-labels'}
   class={['svelte-flow__edge-label', { transparent }, className]}
   style:cursor={selectEdgeOnClick ? 'pointer' : undefined}
   style:transform="translate(-50%, -50%) translate({x}px,{y}px)"
diff --git a/packages/svelte/src/lib/components/ViewportPortal/ViewportPortal.svelte b/packages/svelte/src/lib/components/ViewportPortal/ViewportPortal.svelte
index 45adcffd..f07d11a5 100644
--- a/packages/svelte/src/lib/components/ViewportPortal/ViewportPortal.svelte
+++ b/packages/svelte/src/lib/components/ViewportPortal/ViewportPortal.svelte
@@ -2,9 +2,9 @@
   import { portal } from '$lib/actions/portal';
   import type { ViewportPortalProps } from './types';
 
-  let { children, ...rest }: ViewportPortalProps = $props();
+  let { moveTo = 'front', children, ...rest }: ViewportPortalProps = $props();
 </script>
 
-<div use:portal={'viewport'} {...rest}>
+<div use:portal={`viewport-${moveTo}`} {...rest}>
   {@render children?.()}
 </div>
diff --git a/packages/svelte/src/lib/components/ViewportPortal/types.ts b/packages/svelte/src/lib/components/ViewportPortal/types.ts
index 14b3e817..0d185bee 100644
--- a/packages/svelte/src/lib/components/ViewportPortal/types.ts
+++ b/packages/svelte/src/lib/components/ViewportPortal/types.ts
@@ -2,5 +2,6 @@ import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 
 export type ViewportPortalProps = {
+  moveTo: 'front' | 'back';
   children?: Snippet;
 } & HTMLAttributes<HTMLDivElement>;
diff --git a/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte b/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte
index 817b7e20..8cf8238b 100644
--- a/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte
+++ b/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte
@@ -13,17 +13,19 @@
   }: { store: SvelteFlowStore<NodeType, EdgeType> } & EdgeEvents<EdgeType> = $props();
 </script>
 
-<svg class="svelte-flow__marker">
-  <MarkerDefinition />
-</svg>
+<div class="svelte-flow__edges">
+  <svg class="svelte-flow__marker">
+    <MarkerDefinition />
+  </svg>
 
-{#each store.visible.edges.values() as edge (edge.id)}
-  <EdgeWrapper
-    bind:store
-    {edge}
-    {onedgeclick}
-    {onedgecontextmenu}
-    {onedgepointerenter}
-    {onedgepointerleave}
-  />
-{/each}
+  {#each store.visible.edges.values() as edge (edge.id)}
+    <EdgeWrapper
+      bind:store
+      {edge}
+      {onedgeclick}
+      {onedgecontextmenu}
+      {onedgepointerenter}
+      {onedgepointerleave}
+    />
+  {/each}
+</div>
diff --git a/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte b/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte
index c528eb47..2dc4c6aa 100644
--- a/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte
+++ b/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte
@@ -46,19 +46,21 @@
   });
 </script>
 
-{#each store.visible.nodes.values() as node (node.id)}
-  <NodeWrapper
-    bind:store
-    {node}
-    {resizeObserver}
-    {nodeClickDistance}
-    {onnodeclick}
-    {onnodepointerenter}
-    {onnodepointermove}
-    {onnodepointerleave}
-    {onnodedrag}
-    {onnodedragstart}
-    {onnodedragstop}
-    {onnodecontextmenu}
-  />
-{/each}
+<div class="svelte-flow__nodes">
+  {#each store.visible.nodes.values() as node (node.id)}
+    <NodeWrapper
+      bind:store
+      {node}
+      {resizeObserver}
+      {nodeClickDistance}
+      {onnodeclick}
+      {onnodepointerenter}
+      {onnodepointermove}
+      {onnodepointerleave}
+      {onnodedrag}
+      {onnodedragstart}
+      {onnodedragstop}
+      {onnodecontextmenu}
+    />
+  {/each}
+</div>
diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
index 58e0156f..b3051afb 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
@@ -149,6 +149,7 @@
   >
     <Pane bind:store {onpaneclick} {onpanecontextmenu} {panOnDrag} {selectionOnDrag}>
       <ViewportComponent bind:store>
+        <div class="svelte-flow__viewport-back svelte-flow__container"></div>
         <EdgeRenderer
           bind:store
           {onedgeclick}
@@ -156,6 +157,7 @@
           {onedgepointerenter}
           {onedgepointerleave}
         />
+        <div class="svelte-flow__edge-labels svelte-flow__container"></div>
         <ConnectionLine
           bind:store
           type={connectionLineType}
@@ -183,6 +185,7 @@
           {onnodedragstart}
           {onnodedragstop}
         />
+        <div class="svelte-flow__viewport-front svelte-flow__container"></div>
       </ViewportComponent>
       <Selection
         isVisible={!!(store.selectionRect && store.selectionRectMode === 'user')}
diff --git a/packages/system/src/utils/store.ts b/packages/system/src/utils/store.ts
index 2f5b87ec..b157ce46 100644
--- a/packages/system/src/utils/store.ts
+++ b/packages/system/src/utils/store.ts
@@ -195,10 +195,9 @@ function updateChildNode<NodeType extends NodeBase>(
     });
   }
 }
-
-const DEFAULT_NODE_Z = 1;
+``;
 function calculateZ(node: NodeBase, selectedNodeZ: number) {
-  return (isNumeric(node.zIndex) ? node.zIndex : DEFAULT_NODE_Z) + (node.selected ? selectedNodeZ : DEFAULT_NODE_Z);
+  return (isNumeric(node.zIndex) ? node.zIndex : 0) + (node.selected ? selectedNodeZ : 0);
 }
 
 function calculateChildXYZ<NodeType extends NodeBase>(