introduce divs for nodes, edges, edge labels and viewport front & back to simplify z-index ordering

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);

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)"

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>

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>;

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">
+<div class="svelte-flow__edges">
-  <MarkerDefinition />
+  <svg class="svelte-flow__marker">
-</svg>
+    <MarkerDefinition />
+  </svg>
 
-{#each store.visible.edges.values() as edge (edge.id)}
+  {#each store.visible.edges.values() as edge (edge.id)}
-  <EdgeWrapper
+    <EdgeWrapper
-    bind:store
+      bind:store
-    {edge}
+      {edge}
-    {onedgeclick}
+      {onedgeclick}
-    {onedgecontextmenu}
+      {onedgecontextmenu}
-    {onedgepointerenter}
+      {onedgepointerenter}
-    {onedgepointerleave}
+      {onedgepointerleave}
-  />
+    />
-{/each}
+  {/each}
+</div>

packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte

@@ -46,19 +46,21 @@
   });
 </script>
 
-{#each store.visible.nodes.values() as node (node.id)}
+<div class="svelte-flow__nodes">
-  <NodeWrapper
+  {#each store.visible.nodes.values() as node (node.id)}
-    bind:store
+    <NodeWrapper
-    {node}
+      bind:store
-    {resizeObserver}
+      {node}
-    {nodeClickDistance}
+      {resizeObserver}
-    {onnodeclick}
+      {nodeClickDistance}
-    {onnodepointerenter}
+      {onnodeclick}
-    {onnodepointermove}
+      {onnodepointerenter}
-    {onnodepointerleave}
+      {onnodepointermove}
-    {onnodedrag}
+      {onnodepointerleave}
-    {onnodedragstart}
+      {onnodedrag}
-    {onnodedragstop}
+      {onnodedragstart}
-    {onnodecontextmenu}
+      {onnodedragstop}
-  />
+      {onnodecontextmenu}
-{/each}
+    />
+  {/each}
+</div>

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')}

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>(