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

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>

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>

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