fixed z-index ordering issues

packages/svelte/package.json

@@ -56,11 +56,11 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^6.0.0",
-    "@sveltejs/kit": "^2.20.5",
-    "@sveltejs/package": "^2.3.10",
+    "@sveltejs/kit": "^2.20.7",
+    "@sveltejs/package": "^2.3.11",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
-    "@typescript-eslint/eslint-plugin": "^8.29.1",
-    "@typescript-eslint/parser": "^8.29.1",
+    "@typescript-eslint/eslint-plugin": "^8.30.1",
+    "@typescript-eslint/parser": "^8.30.1",
     "autoprefixer": "^10.4.21",
     "cssnano": "^7.0.6",
     "dotenv": "^16.5.0",
@@ -75,7 +75,7 @@
     "postcss-rename": "^0.6.1",
     "prettier": "^3.5.3",
     "prettier-plugin-svelte": "^3.3.3",
-    "svelte": "^5.26.2",
+    "svelte": "^5.27.0",
     "svelte-check": "^4.1.6",
     "svelte-eslint-parser": "^1.1.2",
     "svelte-preprocess": "^6.0.3",

packages/svelte/src/lib/actions/portal/portal.svelte.ts

@@ -12,7 +12,7 @@ function tryToMount(node: Element, domNode: Element | null, target: Portal | und
     return;
   }
 
-  const targetEl = target === 'root' ? domNode : domNode.querySelector(selector[target]);
+  const targetEl = target === 'root' ? domNode : domNode.querySelector('.svelte-flow__viewport');
 
   if (targetEl) {
     targetEl.appendChild(node);

packages/svelte/src/lib/components/EdgeLabel/EdgeLabel.svelte

@@ -22,6 +22,10 @@
   const store = useStore();
 
   const id = getContext<string>('svelteflow__edge_id');
+
+  let z = $derived.by(() => {
+    return store.visible.edges.get(id)?.zIndex;
+  });
 </script>
 
 <div
@@ -32,6 +36,7 @@
   style:pointer-events="all"
   style:width={toPxString(width)}
   style:height={toPxString(height)}
+  style:z-index={z}
   role="button"
   tabindex="-1"
   onclick={() => {

packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte

@@ -95,7 +95,6 @@
         edgeRef?.blur();
         unselectNodesAndEdges({ edges: [edge] });
       } else {
-        console.log(id);
         addSelectedEdges([id]);
       }
     }
@@ -103,8 +102,9 @@
 </script>
 
 <!-- TODO: aria-label, describedby -->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 {#if !hidden}
-  <svg style:z-index={zIndex}>
+  <svg style:z-index={zIndex} class="svelte-flow__edge-wrapper">
     <g
       bind:this={edgeRef}
       class={['svelte-flow__edge', className]}
@@ -135,7 +135,7 @@
           : `Edge from ${source} to ${target}`}
       role={focusable ? 'button' : 'img'}
       onkeydown={focusable ? onkeydown : undefined}
-      tabIndex={focusable ? 0 : undefined}
+      tabindex={focusable ? 0 : undefined}
     >
       <EdgeComponent
         {id}

packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte

@@ -46,7 +46,6 @@
   }
 
   function onkeydown(event: KeyboardEvent) {
-    console.log('yas');
     if (Object.prototype.hasOwnProperty.call(arrowKeyDiffs, event.key)) {
       event.preventDefault();
       store.moveSelectedNodes(arrowKeyDiffs[event.key], event.shiftKey ? 4 : 1);

packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte

@@ -13,19 +13,17 @@
   }: { store: SvelteFlowStore } & EdgeEvents = $props();
 </script>
 
-<div class="svelte-flow__edges">
-  <svg class="svelte-flow__marker">
-    <MarkerDefinition />
-  </svg>
+<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}
-</div>
+{#each store.visible.edges.values() as edge (edge.id)}
+  <EdgeWrapper
+    bind:store
+    {edge}
+    {onedgeclick}
+    {onedgecontextmenu}
+    {onedgepointerenter}
+    {onedgepointerleave}
+  />
+{/each}

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

@@ -43,31 +43,19 @@
   });
 </script>
 
-<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>
-
-<style>
-  .svelte-flow__nodes {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    left: 0;
-    top: 0;
-  }
-</style>
+{#each store.visible.nodes.values() as node (node.id)}
+  <NodeWrapper
+    bind:store
+    {node}
+    {resizeObserver}
+    {nodeClickDistance}
+    {onnodeclick}
+    {onnodepointerenter}
+    {onnodepointermove}
+    {onnodepointerleave}
+    {onnodedrag}
+    {onnodedragstart}
+    {onnodedragstop}
+    {onnodecontextmenu}
+  />
+{/each}

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

@@ -161,8 +161,6 @@
           containerStyle={connectionLineContainerStyle}
           style={connectionLineStyle}
         />
-        <div class="svelte-flow__edgelabel-renderer"></div>
-        <div class="svelte-flow__viewport-portal"></div>
         <NodeRenderer
           bind:store
           {nodeClickDistance}

packages/svelte/src/styles/base.css

@@ -7,20 +7,3 @@
   text-align: center;
   position: absolute;
 }
-
-.svelte-flow__nodes {
-  z-index: 0;
-}
-
-.svelte-flow__edgelabel-renderer {
-  z-index: 0;
-}
-
-.svelte-flow__zoom {
-  z-index: 4;
-}
-
-.svelte-flow__edges {
-  -webkit-user-select: none;
-  user-select: none;
-}

packages/svelte/src/styles/style.css

@@ -11,20 +11,3 @@
   color: var(--xy-edge-label-color, var(--xy-edge-label-color-default));
   background: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default));
 }
-
-.svelte-flow__nodes {
-  z-index: 0;
-}
-
-.svelte-flow__edgelabel-renderer {
-  z-index: 0;
-}
-
-.svelte-flow__zoom {
-  z-index: 4;
-}
-
-.svelte-flow__edges {
-  -webkit-user-select: none;
-  user-select: none;
-}

packages/system/src/styles/init.css

@@ -123,6 +123,11 @@
   }
 }
 
+.xy-flow__edge-wrapper {
+  position: absolute;
+  overflow: visible;
+}
+
 .xy-flow__edge {
   pointer-events: visibleStroke;
 
@@ -144,10 +149,6 @@
     pointer-events: none;
   }
 
-  &:focus {
-    outline: 1px solid red !important;
-  }
-
   &.selected,
   &:focus,
   &:focus-visible {
@@ -437,3 +438,7 @@ svg.xy-flow__connectionline {
     }
   }
 }
+
+.xy-flow__marker {
+  position: absolute;
+}

packages/system/src/utils/store.ts

@@ -196,8 +196,9 @@ function updateChildNode<NodeType extends NodeBase>(
   }
 }
 
+const DEFAULT_NODE_Z = 1;
 function calculateZ(node: NodeBase, selectedNodeZ: number) {
-  return (isNumeric(node.zIndex) ? node.zIndex : 0) + (node.selected ? selectedNodeZ : 0);
+  return (isNumeric(node.zIndex) ? node.zIndex : DEFAULT_NODE_Z) + (node.selected ? selectedNodeZ : DEFAULT_NODE_Z);
 }
 
 function calculateChildXYZ<NodeType extends NodeBase>(