feat(svelte): add BaseEdge and EdgeLabelRenderer

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

@@ -1,5 +1,5 @@
 <script lang="ts"> 
-  import Edge from '$lib/components/edges/BaseEdge.svelte';
+  import EdgeWrapper from '$lib/components/edges/EdgeWrapper.svelte';
   import { useStore } from '$lib/store';
 
   const { edgesWithDataStore, widthStore, heightStore } = useStore();
@@ -8,10 +8,10 @@
 
 <svg
   width={$widthStore}
-  height={$heightStore}
+  height={$heightStore}
   class="react-flow__edges"
 >
-  {#each $edgesWithDataStore as edge (edge.id)}
+  {#each $edgesWithDataStore as edge (edge.id)}
     <EdgeWrapper {...edge} />
   {/each}
 </svg>

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

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onDestroy } from 'svelte';
 
-  import BaseNode from '$lib/components/nodes/BaseNode.svelte';
+  import NodeWrapper from '$lib/components/nodes/NodeWrapper.svelte';
   import { useStore } from '$lib/store';
 
   const { nodesStore, updateNodeDimensions } = useStore();
@@ -22,7 +22,7 @@
 
 <div class="react-flow__nodes">
   {#each $nodesStore as node (node.id)}
-    <BaseNode {...node} {resizeObserver} />
+    <NodeWrapper {...node} {resizeObserver} />
   {/each}
 </div>
 

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

@@ -68,9 +68,10 @@
   <Zoom>
     <Pane>
       <Viewport>
-        <NodeSelection />
-        <NodeRenderer />
         <EdgeRenderer />
+        <div class="react-flow__edgelabel-renderer" />
+        <NodeRenderer />
+        <NodeSelection />
       </Viewport>
       <UserSelection />
     </Pane>
@@ -92,4 +93,12 @@
   .react-flow :global(.react-flow__node-output) {
     padding: 10px;
   }
+
+  .react-flow__edgelabel-renderer {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    user-select: none;
+  }
 </style>