feat(svelte): add BaseEdge and EdgeLabelRenderer

packages/svelte/src/lib/components/EdgeLabelRenderer/index.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import portal from '$lib/actions/portal';
+
+  type $$Props = {}
+</script>
+
+<div use:portal={'.react-flow__edgelabel-renderer'}>
+  <slot />
+</div>

packages/svelte/src/lib/components/edges/BaseEdge.svelte

@@ -1,44 +1,46 @@
 <script lang="ts">
-	import type { SvelteComponentTyped } from 'svelte';
-  import { Position } from '@reactflow/system';
+  import type { BaseEdgeProps } from '$lib/types';
+  import EdgeLabelRenderer from '$lib/components/EdgeLabelRenderer/index.svelte';
 
-	import { useStore } from '$lib/store';
-  import BezierEdge from '$lib/components/edges/StraightEdge.svelte';
-	import type { EdgeProps } from '$lib/types';
+  type $$Props = BaseEdgeProps;
 
-  export let id: string;
-  export let type: string = 'default';
-  export let sourceX: number = 0;
-  export let sourceY: number = 0;
-  export let targetX: number = 0;
-  export let targetY: number = 0;
-  export let sourcePosition: Position = Position.Bottom;
-  export let targetPosition: Position = Position.Top;
-
-  const { edgeTypesStore } = useStore();
-  const edgeComponent: typeof SvelteComponentTyped<EdgeProps> = $edgeTypesStore[type] || BezierEdge;
+  export let path: $$Props['path'];
+  export let label: $$Props['label'];
+  export let labelX: $$Props['labelX'];
+  export let labelY: $$Props['labelY'];
+  export let interactionWidth: $$Props['interactionWidth'] = 20;
 </script>
 
-<g
-  class="react-flow__edge"
-  data-id={id}
->
-  <svelte:component
-    this={edgeComponent}
-    {id}
-    {sourceX}
-    {sourceY}
-    {targetX}
-    {targetY}
-    {sourcePosition}
-    {targetPosition}
+<path
+  d={path}
+  fill="none"
+  class="react-flow__edge-path"
+/>
+
+{#if interactionWidth}
+  <path
+    d={path}
+    fill="none"
+    stroke-opacity={0}
+    stroke-width={interactionWidth}
+    class="react-flow__edge-interaction"
   />
-</g>
+{/if}
+
+{#if label}
+  <EdgeLabelRenderer>
+    <div
+      class="react-flow__edge-label"
+      style:transform={`translate(-50%, -50%) translate(${labelX}px,${labelY}px)`}
+    >
+        {label}
+    </div>
+  </EdgeLabelRenderer>
+{/if}
 
 <style>
-  .react-flow__edge :global(path) {
-    stroke: #ccc;
-    stroke-width: 1;
-    fill: none;
+  .react-flow__edge-label {
+    position: absolute;
+    background: white;
   }
 </style>

packages/svelte/src/lib/components/edges/BezierEdge.svelte

@@ -1,21 +1,24 @@
 <script lang="ts">
   import { getBezierPath } from '@reactflow/edge-utils';
+
   import type { EdgeProps } from '$lib/types';
-  
-  interface $$Props extends EdgeProps {}
+	import BaseEdge from './BaseEdge.svelte';
 
-  export let id: $$Props['id'];
-  export let sourceX: $$Props['sourceX'] = 0;
-  export let sourceY: $$Props['sourceY'] = 0;
-  export let targetX: $$Props['targetX'] = 0;
-  export let targetY: $$Props['targetY'] = 0;
-  export let sourcePosition: $$Props['sourcePosition'] = undefined;
-  export let targetPosition: $$Props['targetPosition'] = undefined;
+  type $$Props = EdgeProps;
 
-  $: [path] = getBezierPath({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition });
+  $: [path, labelX, labelY] = getBezierPath({
+    sourceX: $$props.sourceX,
+    sourceY: $$props.sourceY,
+    targetX: $$props.targetX,
+    targetY: $$props.targetY,
+    sourcePosition: $$props.sourcePosition,
+    targetPosition: $$props.targetPosition,
+  });
 </script>
 
-<path
-  d={path}
-  class="react-flow__edge-path"
-/>
+<BaseEdge
+  {path}
+  {labelX}
+  {labelY}
+  {...$$props}
+/>

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

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import type { SvelteComponentTyped } from 'svelte';
+  import { Position } from '@reactflow/system';
+
+	import { useStore } from '$lib/store';
+  import BezierEdge from '$lib/components/edges/StraightEdge.svelte';
+	import type { EdgeProps, WrapEdgeProps } from '$lib/types';
+
+  type $$Props = WrapEdgeProps;
+
+  export let id: $$Props['id'];
+  export let type: $$Props['type'] = 'default';
+  export let source: $$Props['source'] = '';
+  export let target: $$Props['target'] = '';
+  export let sourceX: $$Props['sourceX'] = 0;
+  export let sourceY: $$Props['sourceY'] = 0;
+  export let targetX: $$Props['targetX'] = 0;
+  export let targetY: $$Props['targetY'] = 0;
+  export let sourcePosition: $$Props['sourcePosition'] = Position.Bottom;
+  export let targetPosition:  $$Props['targetPosition'] = Position.Top;
+  export let animated: $$Props['animated'] = false;
+  export let selected: $$Props['selected'] = false;
+  export let label: $$Props['label'] = undefined;
+
+  const { edgeTypesStore } = useStore();
+  const edgeComponent: typeof SvelteComponentTyped<EdgeProps> = $edgeTypesStore[type!] || BezierEdge;
+</script>
+
+<g
+  class="react-flow__edge"
+  class:animated
+  data-id={id}
+>
+  <svelte:component
+    this={edgeComponent}
+    {id}
+    {source}
+    {target}
+    {sourceX}
+    {sourceY}
+    {targetX}
+    {targetY}
+    {sourcePosition}
+    {targetPosition}
+    {animated}
+    {selected}
+    {label}
+  />
+</g>
+
+<style>
+  .react-flow__edge {
+    pointer-events: visibleStroke;
+    cursor: pointer;
+  }
+
+  .react-flow__edge :global(path) {
+    stroke: #ccc;
+    stroke-width: 1;
+    fill: none;
+  }
+
+  .animated :global(path) {
+    stroke-dasharray: 5;
+    animation: dashdraw 0.5s linear infinite;
+  }
+
+  @keyframes dashdraw {
+    from {
+      stroke-dashoffset: 10;
+    }
+  }
+</style>

packages/svelte/src/lib/components/edges/SmoothStepEdge.svelte

@@ -1,21 +1,24 @@
 <script lang="ts">
   import { getSmoothStepPath } from '@reactflow/edge-utils';
+
   import type { EdgeProps } from '$lib/types';
-  
-  interface $$Props extends EdgeProps {}
+  import BaseEdge from './BaseEdge.svelte';
 
-  export let id: $$Props['id'];
-  export let sourceX: $$Props['sourceX'] = 0;
-  export let sourceY: $$Props['sourceY'] = 0;
-  export let targetX: $$Props['targetX'] = 0;
-  export let targetY: $$Props['targetY'] = 0;
-  export let sourcePosition: $$Props['sourcePosition'] = undefined;
-  export let targetPosition: $$Props['targetPosition'] = undefined;
+  type $$Props = EdgeProps;
 
-  $: [path] = getSmoothStepPath({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition });
+  $: [path, labelX, labelY] = getSmoothStepPath({ 
+    sourceX: $$props.sourceX,
+    sourceY: $$props.sourceY,
+    targetX: $$props.targetX,
+    targetY: $$props.targetY,
+    sourcePosition: $$props.sourcePosition,
+    targetPosition: $$props.targetPosition,
+  });
 </script>
 
-<path
-  d={path}
-  class="react-flow__edge-path"
+<BaseEdge
+  {path}
+  {labelX}
+  {labelY}
+  {...$$props}
 />

packages/svelte/src/lib/components/edges/StraightEdge.svelte

@@ -1,19 +1,22 @@
 <script lang="ts">
   import { getStraightPath } from '@reactflow/edge-utils';
+
 	import type { EdgeProps } from '$lib/types';
+	import BaseEdge from './BaseEdge.svelte';
 
-  interface $$Props extends EdgeProps {}
+  type $$Props = EdgeProps;
 
-  export let id: $$Props['id'];
-  export let sourceX: $$Props['sourceX'] = 0;
-  export let sourceY: $$Props['sourceY'] = 0;
-  export let targetX: $$Props['targetX'] = 0;
-  export let targetY: $$Props['targetY'] = 0;
-
-  $: [path] = getStraightPath({ sourceX, sourceY, targetX, targetY });
+  $: [path, labelX, labelY] = getStraightPath({
+    sourceX: $$props.sourceX,
+    sourceY: $$props.sourceY,
+    targetX: $$props.targetX,
+    targetY: $$props.targetY,
+  });
 </script>
 
-<path
-  d={path}
-  class="react-flow__edge-path"
+<BaseEdge
+  {path}
+  {labelX}
+  {labelY}
+  {...$$props}
 />

packages/svelte/src/lib/components/nodes/NodeWrapper.svelte

@@ -85,7 +85,6 @@
 <style>
   .react-flow__node {
     border-radius: 3px;
-    font-size: 12px;
     color: #222;
     text-align: center;
     border-width: 1px;