refactor(svelte/react): use edge layouting vanilla helpers

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

@@ -3,16 +3,25 @@
   import { MarkerDefinition } from '$lib/container/EdgeRenderer/MarkerDefinition';
   import { useStore } from '$lib/store';
 
-  const { edgesLayouted, width, height } = useStore();
+  const { width, height, elementsSelectable, edgeTree } = useStore();
 </script>
 
-<svg width={$width} height={$height} class="svelte-flow__edges">
-  {#each $edgesLayouted as edge (edge.id)}
-    <EdgeWrapper {...edge} on:edge:click />
-  {/each}
+{#each $edgeTree as group (group.level)}
+  <svg width={$width} height={$height} style="z-index: {group.level}" class="svelte-flow__edges">
+    {#if group.isMaxLevel} <MarkerDefinition />{/if}
+    <g>
+      {#each group.edges as edge (edge.id)}
+        {@const edgeType = edge.type || 'default'}
+        {@const selectable = !!(
+          edge.selectable ||
+          ($elementsSelectable && typeof edge.selectable === 'undefined')
+        )}
 
-  <MarkerDefinition />
-</svg>
+        <EdgeWrapper {...edge} type={edgeType} {selectable} on:edge:click />
+      {/each}
+    </g>
+  </svg>
+{/each}
 
 <style>
   .svelte-flow__edges {

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

@@ -1,58 +0,0 @@
-import { getHandlePosition } from '@xyflow/system';
-import {
-  type NodeHandleBounds,
-  type Rect,
-  type HandleElement,
-  Position,
-  internalsSymbol
-} from '@xyflow/system';
-
-import type { Node } from '$lib/types';
-
-export function getNodeData(node?: Node): [Rect, NodeHandleBounds | null, boolean] {
-  const handleBounds = node?.[internalsSymbol]?.handleBounds || null;
-
-  const isValid =
-    handleBounds &&
-    node?.width &&
-    node?.height &&
-    typeof node?.positionAbsolute?.x !== 'undefined' &&
-    typeof node?.positionAbsolute?.y !== 'undefined';
-
-  return [
-    {
-      x: node?.positionAbsolute?.x || 0,
-      y: node?.positionAbsolute?.y || 0,
-      width: node?.width || 0,
-      height: node?.height || 0
-    },
-    handleBounds,
-    !!isValid
-  ];
-}
-
-export type EdgePosition = {
-  sourceX: number;
-  sourceY: number;
-  targetX: number;
-  targetY: number;
-};
-
-export function getEdgePositions(
-  sourceNodeRect: Rect,
-  sourceHandle: HandleElement,
-  sourcePosition: Position,
-  targetNodeRect: Rect,
-  targetHandle: HandleElement,
-  targetPosition: Position
-): EdgePosition {
-  const sourceHandlePos = getHandlePosition(sourcePosition, sourceNodeRect, sourceHandle);
-  const targetHandlePos = getHandlePosition(targetPosition, targetNodeRect, targetHandle);
-
-  return {
-    sourceX: sourceHandlePos.x,
-    sourceY: sourceHandlePos.y,
-    targetX: targetHandlePos.x,
-    targetY: targetHandlePos.y
-  };
-}