From f68d6d1066b71b02761f2667f228ace262532e65 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 16 Oct 2023 11:14:18 +0200
Subject: [PATCH 1/6] chore(svelte): edge types

---
 packages/svelte/src/lib/types/edges.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/svelte/src/lib/types/edges.ts b/packages/svelte/src/lib/types/edges.ts
index c4426a89..3f65be9c 100644
--- a/packages/svelte/src/lib/types/edges.ts
+++ b/packages/svelte/src/lib/types/edges.ts
@@ -10,13 +10,11 @@ import type {
 
 import type { Node } from '$lib/types';
 
-export type DefaultEdge<EdgeData = any> = EdgeBase<EdgeData> & {
+export type DefaultEdge<EdgeData = any> = Omit<EdgeBase<EdgeData>, 'focusable'> & {
   label?: string;
   labelStyle?: string;
   style?: string;
   class?: string;
-  sourceNode?: Node;
-  targetNode?: Node;
 };
 
 type SmoothStepEdgeType<T> = DefaultEdge<T> & {
@@ -47,7 +45,7 @@ export type EdgeProps = Omit<Edge, 'sourceHandle' | 'targetHandle'> &
 
 export type EdgeTypes = Record<string, ComponentType<SvelteComponent<EdgeProps>>>;
 
-export type DefaultEdgeOptions = DefaultEdgeOptionsBase<Edge>;
+export type DefaultEdgeOptions = Omit<DefaultEdgeOptionsBase<Edge>, 'focusable'>;
 
 export type EdgeLayouted = Pick<
   Edge,
@@ -72,6 +70,8 @@ export type EdgeLayouted = Pick<
   | 'class'
 > &
   EdgePosition & {
+    sourceNode?: Node;
+    targetNode?: Node;
     sourceHandleId?: string | null;
     targetHandleId?: string | null;
   };

From 3c30fa40874ffa230ec8191f155ba5252ec096cc Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 16 Oct 2023 11:14:56 +0200
Subject: [PATCH 2/6] chore(svelte): rename showInteractive to showLock

---
 packages/svelte/src/lib/plugins/Controls/Controls.svelte | 4 ++--
 packages/svelte/src/lib/plugins/Controls/types.ts        | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/svelte/src/lib/plugins/Controls/Controls.svelte b/packages/svelte/src/lib/plugins/Controls/Controls.svelte
index 80ef31a6..396d19dd 100644
--- a/packages/svelte/src/lib/plugins/Controls/Controls.svelte
+++ b/packages/svelte/src/lib/plugins/Controls/Controls.svelte
@@ -15,7 +15,7 @@
   export let position: $$Props['position'] = 'bottom-left';
   export let showZoom: $$Props['showZoom'] = true;
   export let showFitView: $$Props['showFitView'] = true;
-  export let showInteractive: $$Props['showInteractive'] = true;
+  export let showLock: $$Props['showLock'] = true;
   export let buttonBgColor: $$Props['buttonBgColor'] = undefined;
   export let buttonBgColorHover: $$Props['buttonBgColorHover'] = undefined;
   export let buttonColor: $$Props['buttonColor'] = undefined;
@@ -101,7 +101,7 @@
       <FitViewIcon />
     </ControlButton>
   {/if}
-  {#if showInteractive}
+  {#if showLock}
     <ControlButton
       class="svelte-flow__controls-interactive"
       on:click={onToggleInteractivity}
diff --git a/packages/svelte/src/lib/plugins/Controls/types.ts b/packages/svelte/src/lib/plugins/Controls/types.ts
index 0f3c05d7..31131dff 100644
--- a/packages/svelte/src/lib/plugins/Controls/types.ts
+++ b/packages/svelte/src/lib/plugins/Controls/types.ts
@@ -4,7 +4,7 @@ export type ControlsProps = {
   position?: PanelPosition;
   showZoom?: boolean;
   showFitView?: boolean;
-  showInteractive?: boolean;
+  showLock?: boolean;
   buttonBgColor?: string;
   buttonBgColorHover?: string;
   buttonColor?: string;

From 92a06d25dbe0b2b48f4f04c55bcc235851596a89 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 16 Oct 2023 11:22:05 +0200
Subject: [PATCH 3/6] chore(svelte): add id prop

---
 .../src/additional-components/Background/Background.tsx     | 6 ++++--
 .../svelte/src/lib/plugins/Background/Background.svelte     | 3 ++-
 packages/svelte/src/lib/plugins/Background/types.ts         | 1 +
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/additional-components/Background/Background.tsx b/packages/react/src/additional-components/Background/Background.tsx
index 73664f9f..843daf19 100644
--- a/packages/react/src/additional-components/Background/Background.tsx
+++ b/packages/react/src/additional-components/Background/Background.tsx
@@ -46,6 +46,8 @@ function Background({
     ? [scaledSize / offset, scaledSize / offset]
     : [patternDimensions[0] / offset, patternDimensions[1] / offset];
 
+  const _patternId = `${patternId}${id ? id : ''}`;
+
   return (
     <svg
       className={cc(['react-flow__background', className])}
@@ -61,7 +63,7 @@ function Background({
       data-testid="rf__background"
     >
       <pattern
-        id={patternId + id}
+        id={_patternId}
         x={transform[0] % scaledGap[0]}
         y={transform[1] % scaledGap[1]}
         width={scaledGap[0]}
@@ -80,7 +82,7 @@ function Background({
           />
         )}
       </pattern>
-      <rect x="0" y="0" width="100%" height="100%" fill={`url(#${patternId + id})`} />
+      <rect x="0" y="0" width="100%" height="100%" fill={`url(#${_patternId})`} />
     </svg>
   );
 }
diff --git a/packages/svelte/src/lib/plugins/Background/Background.svelte b/packages/svelte/src/lib/plugins/Background/Background.svelte
index 7e6a9bff..67689ab9 100644
--- a/packages/svelte/src/lib/plugins/Background/Background.svelte
+++ b/packages/svelte/src/lib/plugins/Background/Background.svelte
@@ -16,6 +16,7 @@
 
   type $$Props = BackgroundProps;
 
+  export let id: $$Props['id'] = undefined;
   export let variant: $$Props['variant'] = BackgroundVariant.Dots;
   export let gap: $$Props['gap'] = 20;
   export let size: $$Props['size'] = 1;
@@ -32,7 +33,7 @@
   const isCross = variant === BackgroundVariant.Cross;
   const gapXY: number[] = Array.isArray(gap!) ? gap! : [gap!, gap!];
 
-  $: patternId = `background-pattern-${$flowId}`;
+  $: patternId = `background-pattern-${$flowId}-${id ? id : ''}`;
   $: scaledGap = [gapXY[0] * $viewport.zoom || 1, gapXY[1] * $viewport.zoom || 1];
   $: scaledSize = patternSize * $viewport.zoom;
   $: patternDimensions = (isCross ? [scaledSize, scaledSize] : scaledGap) as [number, number];
diff --git a/packages/svelte/src/lib/plugins/Background/types.ts b/packages/svelte/src/lib/plugins/Background/types.ts
index dd6a4d3c..3ca5667d 100644
--- a/packages/svelte/src/lib/plugins/Background/types.ts
+++ b/packages/svelte/src/lib/plugins/Background/types.ts
@@ -5,6 +5,7 @@ export enum BackgroundVariant {
 }
 
 export type BackgroundProps = {
+  id?: string;
   bgColor?: string;
   patternColor?: string;
   patternClass?: string;

From c7a533bffed7bb39885cf8abdf4f9078a5ebef5d Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 16 Oct 2023 15:53:36 +0200
Subject: [PATCH 4/6] chore(svelte): fix types for event handlers

---
 .../components/EdgeWrapper/EdgeWrapper.svelte | 17 +++++++++++----
 .../src/lib/components/Handle/Handle.svelte   | 21 +++++++++++++++++--
 .../components/NodeWrapper/NodeWrapper.svelte | 12 ++++++++++-
 .../svelte/src/lib/container/Pane/Pane.svelte |  9 +++++++-
 .../src/lib/container/SvelteFlow/types.ts     | 21 -------------------
 5 files changed, 51 insertions(+), 29 deletions(-)

diff --git a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte b/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
index 7d609447..8601415b 100644
--- a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
+++ b/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
@@ -6,7 +6,7 @@
 
   import { useStore } from '$lib/store';
   import BezierEdge from '$lib/components/edges/BezierEdge.svelte';
-  import type { EdgeLayouted } from '$lib/types';
+  import type { EdgeLayouted, Edge } from '$lib/types';
 
   type $$Props = EdgeLayouted;
 
@@ -39,7 +39,10 @@
   export { className as class };
 
   const { edges, edgeTypes, flowId, addSelectedEdges } = useStore();
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    edgeclick: { edge: Edge; event: MouseEvent | TouchEvent };
+    edgecontextmenu: { edge: Edge; event: MouseEvent };
+  }>();
 
   $: edgeComponent = $edgeTypes[type!] || BezierEdge;
   $: markerStartUrl = markerStart ? `url(#${getMarkerId(markerStart, $flowId)})` : undefined;
@@ -51,12 +54,18 @@
     }
 
     const edge = $edges.find((e) => e.id === id);
-    dispatch('edgeclick', { event, edge });
+
+    if (edge) {
+      dispatch('edgeclick', { event, edge });
+    }
   }
 
   function onContextMenu(event: MouseEvent) {
     const edge = $edges.find((e) => e.id === id);
-    dispatch('edgecontextmenu', { event, edge });
+
+    if (edge) {
+      dispatch('edgecontextmenu', { event, edge });
+    }
   }
 </script>
 
diff --git a/packages/svelte/src/lib/components/Handle/Handle.svelte b/packages/svelte/src/lib/components/Handle/Handle.svelte
index 58d5ad02..655bcc6b 100644
--- a/packages/svelte/src/lib/components/Handle/Handle.svelte
+++ b/packages/svelte/src/lib/components/Handle/Handle.svelte
@@ -1,7 +1,13 @@
 <script lang="ts">
   import { getContext, createEventDispatcher } from 'svelte';
   import cc from 'classcat';
-  import { Position, XYHandle, isMouseEvent } from '@xyflow/system';
+  import {
+    Position,
+    XYHandle,
+    isMouseEvent,
+    type Connection,
+    type HandleType
+  } from '@xyflow/system';
 
   import { useStore } from '$lib/store';
   import type { HandleComponentProps } from '$lib/types';
@@ -26,7 +32,18 @@
   $: handleConnectable = isConnectable !== undefined ? isConnectable : $connectable;
 
   const handleId = id || null;
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    connect: { connection: Connection };
+    connectstart: {
+      event: MouseEvent | TouchEvent;
+      nodeId: string | null;
+      handleId: string | null;
+      handleType: HandleType | null;
+    };
+    connectend: {
+      event: MouseEvent | TouchEvent;
+    };
+  }>();
 
   const store = useStore();
   const {
diff --git a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
index 10906aea..df142974 100644
--- a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
+++ b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
@@ -16,6 +16,7 @@
   import { useStore } from '$lib/store';
   import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
   import type { NodeWrapperProps } from './types';
+  import type { Node } from '$lib/types';
 
   interface $$Props extends NodeWrapperProps {}
 
@@ -54,7 +55,16 @@
 
   const nodeComponent: ComponentType<SvelteComponent<NodeProps>> = $nodeTypes[type!] || DefaultNode;
   const selectNodesOnDrag = false;
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    nodeclick: { node: Node; event: MouseEvent | TouchEvent };
+    nodecontextmenu: { node: Node; event: MouseEvent | TouchEvent };
+    nodedrag: { node: Node; nodes: Node[]; event: MouseEvent | TouchEvent };
+    nodedragstart: { node: Node; nodes: Node[]; event: MouseEvent | TouchEvent };
+    nodedragstop: { node: Node; nodes: Node[]; event: MouseEvent | TouchEvent };
+    nodemouseenter: { node: Node; event: MouseEvent | TouchEvent };
+    nodemouseleave: { node: Node; event: MouseEvent | TouchEvent };
+    nodemousemove: { node: Node; event: MouseEvent | TouchEvent };
+  }>();
   const connectableStore = writable(connectable);
 
   $: {
diff --git a/packages/svelte/src/lib/container/Pane/Pane.svelte b/packages/svelte/src/lib/container/Pane/Pane.svelte
index 6727fc44..efc365fc 100644
--- a/packages/svelte/src/lib/container/Pane/Pane.svelte
+++ b/packages/svelte/src/lib/container/Pane/Pane.svelte
@@ -41,7 +41,14 @@
 
   export let panOnDrag: $$Props['panOnDrag'] = undefined;
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    paneclick: {
+      event: MouseEvent | TouchEvent;
+    };
+    panecontextmenu: {
+      event: MouseEvent;
+    };
+  }>();
   const {
     nodes,
     edges,
diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts
index 91f3bb70..9e59bef9 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/types.ts
+++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts
@@ -83,25 +83,4 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
   onMove?: OnMove;
   onMoveEnd?: OnMoveEnd;
   onError?: OnError;
-
-  'on:nodeclick'?: CustomEvent<{ event: MouseEvent | TouchEvent; node: Node }>;
-  'on:nodemouseenter'?: CustomEvent<{ event: MouseEvent; node: Node }>;
-  'on:nodemousemove'?: CustomEvent<{ event: MouseEvent; node: Node }>;
-  'on:nodemouseleave'?: CustomEvent<{ event: MouseEvent; node: Node }>;
-  'on:edgeclick'?: CustomEvent<{ event: MouseEvent; edge: Edge }>;
-  'on:edgecontextmenu'?: CustomEvent<{ event: MouseEvent; edge: Edge }>;
-  'on:connectstart'?: CustomEvent<{
-    event: MouseEvent | TouchEvent;
-    nodeId?: string;
-    handleId?: string;
-    handleType?: HandleType;
-  }>;
-  'on:connect'?: CustomEvent<{ connection: Connection }>;
-  'on:connectend'?: CustomEvent<{ event: MouseEvent | TouchEvent }>;
-  'on:paneclick'?: CustomEvent<{ event: MouseEvent | TouchEvent }>;
-  'on:panecontextmenu'?: CustomEvent<{ event: MouseEvent }>;
-  'on:nodedragstart'?: CustomEvent<{ event: MouseEvent; node: NodeBase; nodes: NodeBase[] }>;
-  'on:nodedrag'?: CustomEvent<{ event: MouseEvent; node: NodeBase; nodes: NodeBase[] }>;
-  'on:nodedragstop'?: CustomEvent<{ event: MouseEvent; node: NodeBase; nodes: NodeBase[] }>;
-  'on:nodecontextmenu'?: CustomEvent<{ event: MouseEvent; node: NodeBase }>;
 };

From bce7a49c73f9220a0379e390454795493ab87551 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 16 Oct 2023 15:54:43 +0200
Subject: [PATCH 5/6] chore(svelte): add class to BaseEdge comp

---
 packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte | 2 ++
 packages/svelte/src/lib/components/BaseEdge/types.ts        | 1 +
 2 files changed, 3 insertions(+)

diff --git a/packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte b/packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte
index 5676d135..fe0e7d94 100644
--- a/packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte
+++ b/packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte
@@ -14,6 +14,8 @@
   export let markerEnd: $$Props['markerEnd'] = undefined;
   export let style: $$Props['style'] = undefined;
   export let interactionWidth: $$Props['interactionWidth'] = 20;
+  let className: $$Props['class'] = undefined;
+  export { className as class };
 </script>
 
 <path
diff --git a/packages/svelte/src/lib/components/BaseEdge/types.ts b/packages/svelte/src/lib/components/BaseEdge/types.ts
index 32ed066b..c4135c1c 100644
--- a/packages/svelte/src/lib/components/BaseEdge/types.ts
+++ b/packages/svelte/src/lib/components/BaseEdge/types.ts
@@ -10,4 +10,5 @@ export type BaseEdgeProps = Pick<
   labelY?: number;
   markerStart?: string;
   markerEnd?: string;
+  class?: string;
 };

From 82bcc2263ebf9bdf7a8f02908336f5ed6b59ffc4 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 16 Oct 2023 18:54:40 +0200
Subject: [PATCH 6/6] feat(svelte): add selected prop for minimap node

---
 packages/svelte/src/lib/plugins/Minimap/Minimap.svelte     | 1 +
 packages/svelte/src/lib/plugins/Minimap/MinimapNode.svelte | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte b/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
index 79b5e1ad..95c8c7d3 100644
--- a/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
+++ b/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
@@ -121,6 +121,7 @@
             y={pos.y}
             width={node.width}
             height={node.height}
+            selected={node.selected}
             color={nodeColorFunc(node)}
             borderRadius={nodeBorderRadius}
             strokeColor={nodeStrokeColorFunc(node)}
diff --git a/packages/svelte/src/lib/plugins/Minimap/MinimapNode.svelte b/packages/svelte/src/lib/plugins/Minimap/MinimapNode.svelte
index c9658f8a..ff0b1f0a 100644
--- a/packages/svelte/src/lib/plugins/Minimap/MinimapNode.svelte
+++ b/packages/svelte/src/lib/plugins/Minimap/MinimapNode.svelte
@@ -10,12 +10,14 @@
   export let shapeRendering: string;
   export let strokeColor: string;
   export let strokeWidth: number = 2;
+  export let selected: boolean = false;
   let className: string = '';
   export { className as class };
 </script>
 
 <rect
   class={cc(['svelte-flow__minimap-node', className])}
+  class:selected
   {x}
   {y}
   rx={borderRadius}