feat(svelte): add custom edge example

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

@@ -16,8 +16,9 @@
   export let sourceY: $$Props['sourceY'] = 0;
   export let targetX: $$Props['targetX'] = 0;
   export let targetY: $$Props['targetY'] = 0;
-  export let sourceHandleId: $$Props['sourceHandleId'] = undefined;
+  // @ todo: support edge updates
-  export let targetHandleId: $$Props['targetHandleId'] = undefined;
+  // export let sourceHandleId: $$Props['sourceHandleId'] = undefined;
+  // export let targetHandleId: $$Props['targetHandleId'] = undefined;
   export let sourcePosition: $$Props['sourcePosition'] = Position.Bottom;
   export let targetPosition: $$Props['targetPosition'] = Position.Top;
   export let animated: $$Props['animated'] = false;
@@ -35,6 +36,7 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <g
   class="svelte-flow__edge"
   class:animated

packages/svelte/src/lib/index.ts

@@ -4,6 +4,9 @@ export * from '$lib/container/SvelteFlow';
 export * from '$lib/container/Panel';
 
 export * from '$lib/components/SvelteFlowProvider';
+export * from '$lib/components/EdgeLabelRenderer';
+export * from '$lib/components/BaseEdge';
+export * from '$lib/components/Handle';
 
 export * from '$lib/plugins/Controls';
 export * from '$lib/plugins/Background';

packages/svelte/src/routes/overview/+page.svelte

@@ -9,14 +9,20 @@
     createNodes,
     createEdges,
     type NodeTypes,
-    SelectionMode
+    SelectionMode,
+    type EdgeTypes
   } from '../../lib/index';
-  import { CustomNode } from '../../example-components/CustomNode';
+  import { CustomNode } from './CustomNode';
+  import { CustomEdge } from './CustomEdge';
 
   const nodeTypes: NodeTypes = {
     custom: CustomNode
   };
 
+  const edgeTypes: EdgeTypes = {
+    custom: CustomEdge
+  };
+
   const nodes = createNodes([
     {
       id: '1',
@@ -81,7 +87,7 @@
     },
     {
       id: '2-4',
-      type: 'default',
+      type: 'custom',
       source: '2',
       target: '4',
     }
@@ -111,6 +117,7 @@
 >
   <SvelteFlow
     {nodeTypes}
+    {edgeTypes}
     fitView
     minZoom={0.1}
     maxZoom={2.5}

packages/svelte/src/routes/overview/CustomEdge/Custom.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import { getBezierPath } from '@reactflow/edge-utils';
+
+  import { BaseEdge, EdgeLabelRenderer, useSvelteFlow, type EdgeProps } from '../../../lib/index';
+
+  type $$Props = EdgeProps;
+
+  $: [path, labelX, labelY] = getBezierPath({
+    sourceX: $$props.sourceX,
+    sourceY: $$props.sourceY,
+    targetX: $$props.targetX,
+    targetY: $$props.targetY,
+    sourcePosition: $$props.sourcePosition,
+    targetPosition: $$props.targetPosition
+  });
+
+  const svelteFlow = useSvelteFlow();
+
+  function onClick() {
+    svelteFlow.edges.update(eds => eds.filter(e => e.id !== $$props.id));
+  }
+</script>
+
+<BaseEdge {path} {labelX} {labelY} {...$$props} />
+
+<EdgeLabelRenderer>
+  <button
+    style:transform={`translate(-50%,-50%) translate(${labelX}px,${labelY}px)`}
+    class="edge-button"
+    on:click={onClick}
+  >
+  ✕
+  </button>
+</EdgeLabelRenderer>
+
+
+<style>
+  .edge-button {
+    border-radius: 50%;
+    position: absolute;
+    border: none;
+    width: 1rem;
+    height: 1rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 8px;
+    pointer-events: all;
+    cursor: pointer;
+    background-color: #eee;
+  }
+  
+  .edge-button:hover {
+    box-shadow: 0 0 2px 1px rgba(0,0,0,0.12);
+  }
+</style>

packages/svelte/src/routes/overview/CustomEdge/index.ts

@@ -0,0 +1 @@
+export { default as CustomEdge } from './Custom.svelte';

packages/svelte/src/routes/overview/CustomNode/Custom.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { Handle } from '$lib/components/Handle';
   import { Position } from '@reactflow/system';
+  import { Handle } from '../../../lib/index';
 
   export let data: { label: string } = { label: 'Node' };
   export let xPos: number = 0;