feat(svelte): edge types, use edge-utils

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

@@ -1,14 +1,8 @@
-<script lang="ts">
-  import { useStore } from '$lib/store';
-	import { SelectionMode, type Node, type Edge } from '@reactflow/system';
-	import { getConnectedEdges, getEventPosition, getNodesInside } from '@reactflow/utils';
-
-  const { nodesStore, edgesStore, transformStore, nodeOriginStore, draggingStore, selectionRectStore, selectionRectModeStore, selectionKeyPressedStore, resetSelectedElements } = useStore();
-
-  const wrapHandler = (
+<script lang="ts" context="module">
+  export function wrapHandler(
     handler: (evt: MouseEvent) => void,
     container: HTMLDivElement
-  ):  (evt: MouseEvent) => void => {
+  ): (evt: MouseEvent) => void {
     return (event: MouseEvent) => {
       if (event.target !== container) {
         return;
@@ -18,6 +12,29 @@
     };
   };
 
+  export function toggleSelected<Item extends Node | Edge>(ids: string[]) {
+    return (item: Item) => {
+      const isSelected = ids.includes(item.id);
+
+      if (item.selected !== isSelected) {
+        return {
+          ...item,
+          selected: isSelected,
+        };
+      }
+
+      return item;
+    }
+  }
+</script>
+
+<script lang="ts">
+  import { useStore } from '$lib/store';
+	import { SelectionMode, type Node, type Edge } from '@reactflow/system';
+	import { getConnectedEdges, getEventPosition, getNodesInside } from '@reactflow/utils';
+
+  const { nodesStore, edgesStore, transformStore, nodeOriginStore, draggingStore, selectionRectStore, selectionRectModeStore, selectionKeyPressedStore, resetSelectedElements } = useStore();
+
   // @todo take from props
   const elementsSelectable = true;
   const selectionMode = SelectionMode.Partial
@@ -67,20 +84,7 @@
     // onSelectionStart?.(event);
   };
 
-  function toggleSelected<Item extends Node | Edge>(ids: string[]) {
-    return (item: Item) => {
-      const isSelected = ids.includes(item.id);
 
-      if (item.selected !== isSelected) {
-        return {
-          ...item,
-          selected: isSelected,
-        };
-      }
-
-      return item;
-    }
-  }
 
   function onMouseMove(event: MouseEvent) {
     if (!isSelecting || !containerBounds || !$selectionRectStore) {

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

@@ -4,9 +4,9 @@
 
   export let position: PanelPosition = 'top-right';
   export let style: string = '';
-  export { className as class }
 
   let className: string;
+  export { className as class }
 
   $: positionClasses = `${position}`.split('-');
 </script>