From 0cd68914c1d77bb4ab810af8a0e9abe215637659 Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Tue, 10 Dec 2024 12:12:21 +0100
Subject: [PATCH] clean up BaseEdge, fix store functions

---
 .../src/lib/components/BaseEdge/index.ts      |   1 -
 .../src/lib/components/BaseEdge/types.ts      |  23 ----
 .../components/EdgeWrapper/EdgeWrapper.svelte |   1 -
 .../{BaseEdge => edges}/BaseEdge.svelte       |   2 +-
 .../lib/components/edges/BezierEdge.svelte    |  15 +--
 .../edges/BezierEdgeInternal.svelte           |  21 +--
 .../components/edges/SmoothStepEdge.svelte    |  12 +-
 .../edges/SmoothStepEdgeInternal.svelte       |  20 +--
 .../src/lib/components/edges/StepEdge.svelte  |   2 +-
 .../components/edges/StepEdgeInternal.svelte  |   2 +-
 .../lib/components/edges/StraightEdge.svelte  |   2 +-
 .../edges/StraightEdgeInternal.svelte         |   2 +-
 .../svelte/src/lib/components/edges/index.ts  |   4 +-
 packages/svelte/src/lib/index.ts              |   9 +-
 packages/svelte/src/lib/store/index.ts        | 122 +++---------------
 packages/svelte/src/lib/types/edges.ts        |  22 ++++
 16 files changed, 91 insertions(+), 169 deletions(-)
 delete mode 100644 packages/svelte/src/lib/components/BaseEdge/index.ts
 delete mode 100644 packages/svelte/src/lib/components/BaseEdge/types.ts
 rename packages/svelte/src/lib/components/{BaseEdge => edges}/BaseEdge.svelte (93%)

diff --git a/packages/svelte/src/lib/components/BaseEdge/index.ts b/packages/svelte/src/lib/components/BaseEdge/index.ts
deleted file mode 100644
index 65bb0fbc..00000000
--- a/packages/svelte/src/lib/components/BaseEdge/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as BaseEdge } from './BaseEdge.svelte';
diff --git a/packages/svelte/src/lib/components/BaseEdge/types.ts b/packages/svelte/src/lib/components/BaseEdge/types.ts
deleted file mode 100644
index 41a1189b..00000000
--- a/packages/svelte/src/lib/components/BaseEdge/types.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import type { EdgeProps } from '$lib/types';
-
-export type BaseEdgeProps = Pick<
-  EdgeProps,
-  'interactionWidth' | 'label' | 'labelStyle' | 'style'
-> & {
-  id?: string;
-  /** SVG path of the edge */
-  path: string;
-  /** The x coordinate of the label */
-  labelX?: number;
-  /** The y coordinate of the label */
-  labelY?: number;
-  /** Marker at start of edge
-   * @example 'url(#arrow)'
-   */
-  markerStart?: string;
-  /** Marker at end of edge
-   * @example 'url(#arrow)'
-   */
-  markerEnd?: string;
-  class?: string;
-};
diff --git a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte b/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
index d235ee72..f6bc36a0 100644
--- a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
+++ b/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
@@ -4,7 +4,6 @@
 
   import { getMarkerId } from '@xyflow/system';
 
-  import { useStore } from '$lib/store';
   import { BezierEdgeInternal } from '$lib/components/edges';
   import { useHandleEdgeSelect } from '$lib/hooks/useHandleEdgeSelect';
 
diff --git a/packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte b/packages/svelte/src/lib/components/edges/BaseEdge.svelte
similarity index 93%
rename from packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte
rename to packages/svelte/src/lib/components/edges/BaseEdge.svelte
index fb1f1588..54183e34 100644
--- a/packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte
+++ b/packages/svelte/src/lib/components/edges/BaseEdge.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import cc from 'classcat';
-  import type { BaseEdgeProps } from './types';
+  import type { BaseEdgeProps } from '../../types';
   import EdgeLabel from '../EdgeLabel/EdgeLabel.svelte';
 
   let {
diff --git a/packages/svelte/src/lib/components/edges/BezierEdge.svelte b/packages/svelte/src/lib/components/edges/BezierEdge.svelte
index 898de2b8..c95e992c 100644
--- a/packages/svelte/src/lib/components/edges/BezierEdge.svelte
+++ b/packages/svelte/src/lib/components/edges/BezierEdge.svelte
@@ -1,25 +1,24 @@
 <script lang="ts">
   import { getBezierPath } from '@xyflow/system';
 
+  import BaseEdge from './BaseEdge.svelte';
   import type { BezierEdgeProps } from '$lib/types';
 
-  import { BaseEdge } from '$lib/components/BaseEdge';
-
   let {
     id,
+    interactionWidth,
     label,
     labelStyle,
-    style,
-    markerStart,
     markerEnd,
+    markerStart,
     pathOptions,
-    interactionWidth,
+    sourcePosition,
     sourceX,
     sourceY,
-    sourcePosition,
+    style,
+    targetPosition,
     targetX,
-    targetY,
-    targetPosition
+    targetY
   }: BezierEdgeProps = $props();
 
   let [path, labelX, labelY] = $derived(
diff --git a/packages/svelte/src/lib/components/edges/BezierEdgeInternal.svelte b/packages/svelte/src/lib/components/edges/BezierEdgeInternal.svelte
index 7b8869b2..9a894d72 100644
--- a/packages/svelte/src/lib/components/edges/BezierEdgeInternal.svelte
+++ b/packages/svelte/src/lib/components/edges/BezierEdgeInternal.svelte
@@ -1,21 +1,22 @@
 <script lang="ts">
   import { getBezierPath } from '@xyflow/system';
 
+  import BaseEdge from './BaseEdge.svelte';
   import type { EdgeProps } from '$lib/types';
-  import { BaseEdge } from '$lib/components/BaseEdge';
+
   let {
-    sourceX,
-    sourceY,
-    sourcePosition,
-    targetX,
-    targetY,
-    targetPosition,
+    interactionWidth,
     label,
     labelStyle,
-    markerStart,
     markerEnd,
-    interactionWidth,
-    style
+    markerStart,
+    sourcePosition,
+    sourceX,
+    sourceY,
+    style,
+    targetPosition,
+    targetX,
+    targetY
   }: EdgeProps = $props();
 
   let [path, labelX, labelY] = $derived(
diff --git a/packages/svelte/src/lib/components/edges/SmoothStepEdge.svelte b/packages/svelte/src/lib/components/edges/SmoothStepEdge.svelte
index b0e3e4ad..a1cae125 100644
--- a/packages/svelte/src/lib/components/edges/SmoothStepEdge.svelte
+++ b/packages/svelte/src/lib/components/edges/SmoothStepEdge.svelte
@@ -1,24 +1,24 @@
 <script lang="ts">
   import { getSmoothStepPath } from '@xyflow/system';
 
+  import BaseEdge from './BaseEdge.svelte';
   import type { SmoothStepEdgeProps } from '$lib/types';
-  import { BaseEdge } from '$lib/components/BaseEdge';
 
   let {
     id,
+    interactionWidth,
     label,
     labelStyle,
     style,
-    markerStart,
     markerEnd,
+    markerStart,
     pathOptions,
-    interactionWidth,
+    sourcePosition,
     sourceX,
     sourceY,
-    sourcePosition,
+    targetPosition,
     targetX,
-    targetY,
-    targetPosition
+    targetY
   }: SmoothStepEdgeProps = $props();
 
   let [path, labelX, labelY] = $derived(
diff --git a/packages/svelte/src/lib/components/edges/SmoothStepEdgeInternal.svelte b/packages/svelte/src/lib/components/edges/SmoothStepEdgeInternal.svelte
index 3c7510a4..e7b49ec4 100644
--- a/packages/svelte/src/lib/components/edges/SmoothStepEdgeInternal.svelte
+++ b/packages/svelte/src/lib/components/edges/SmoothStepEdgeInternal.svelte
@@ -1,22 +1,22 @@
 <script lang="ts">
   import { getSmoothStepPath } from '@xyflow/system';
 
+  import BaseEdge from './BaseEdge.svelte';
   import type { EdgeProps } from '$lib/types';
-  import { BaseEdge } from '$lib/components/BaseEdge';
 
   let {
-    sourceX,
-    sourceY,
-    sourcePosition,
-    targetX,
-    targetY,
-    targetPosition,
+    interactionWidth,
     label,
     labelStyle,
-    markerStart,
+    style,
     markerEnd,
-    interactionWidth,
-    style
+    markerStart,
+    sourcePosition,
+    sourceX,
+    sourceY,
+    targetPosition,
+    targetX,
+    targetY
   }: EdgeProps = $props();
 
   let [path, labelX, labelY] = $derived(
diff --git a/packages/svelte/src/lib/components/edges/StepEdge.svelte b/packages/svelte/src/lib/components/edges/StepEdge.svelte
index e97fbb7e..e12abed3 100644
--- a/packages/svelte/src/lib/components/edges/StepEdge.svelte
+++ b/packages/svelte/src/lib/components/edges/StepEdge.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import { getSmoothStepPath } from '@xyflow/system';
 
+  import BaseEdge from './BaseEdge.svelte';
   import type { StepEdgeProps } from '$lib/types';
-  import { BaseEdge } from '$lib/components/BaseEdge';
 
   let {
     id,
diff --git a/packages/svelte/src/lib/components/edges/StepEdgeInternal.svelte b/packages/svelte/src/lib/components/edges/StepEdgeInternal.svelte
index 17736db3..7c419bdc 100644
--- a/packages/svelte/src/lib/components/edges/StepEdgeInternal.svelte
+++ b/packages/svelte/src/lib/components/edges/StepEdgeInternal.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import { getSmoothStepPath } from '@xyflow/system';
 
+  import BaseEdge from './BaseEdge.svelte';
   import type { EdgeProps } from '$lib/types';
-  import { BaseEdge } from '$lib/components/BaseEdge';
 
   let {
     sourceX,
diff --git a/packages/svelte/src/lib/components/edges/StraightEdge.svelte b/packages/svelte/src/lib/components/edges/StraightEdge.svelte
index b28c6c97..73e5c929 100644
--- a/packages/svelte/src/lib/components/edges/StraightEdge.svelte
+++ b/packages/svelte/src/lib/components/edges/StraightEdge.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import { getStraightPath } from '@xyflow/system';
 
+  import BaseEdge from './BaseEdge.svelte';
   import type { StraightEdgeProps } from '$lib/types';
-  import { BaseEdge } from '$lib/components/BaseEdge';
 
   let {
     id,
diff --git a/packages/svelte/src/lib/components/edges/StraightEdgeInternal.svelte b/packages/svelte/src/lib/components/edges/StraightEdgeInternal.svelte
index 59af7394..cc78f0e5 100644
--- a/packages/svelte/src/lib/components/edges/StraightEdgeInternal.svelte
+++ b/packages/svelte/src/lib/components/edges/StraightEdgeInternal.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import { getStraightPath } from '@xyflow/system';
 
+  import BaseEdge from './BaseEdge.svelte';
   import type { EdgeProps } from '$lib/types';
-  import { BaseEdge } from '$lib/components/BaseEdge';
 
   let {
     sourceX,
diff --git a/packages/svelte/src/lib/components/edges/index.ts b/packages/svelte/src/lib/components/edges/index.ts
index 4be51363..2428ea93 100644
--- a/packages/svelte/src/lib/components/edges/index.ts
+++ b/packages/svelte/src/lib/components/edges/index.ts
@@ -5,7 +5,7 @@
 // @todo: how can we prevent this duplication in ...Edge/ ...EdgeInternal?
 // both are quite similar, it's just about 1-2 props that are different
 export { default as BezierEdge } from './BezierEdge.svelte';
-export { default as BezierEdgeInternal } from './BezierEdgeInternal.svelte';
+export { default as BezierEdgeInternal } from './BezierEdge.svelte';
 
 export { default as SmoothStepEdge } from './SmoothStepEdge.svelte';
 export { default as SmoothStepEdgeInternal } from './SmoothStepEdgeInternal.svelte';
@@ -15,3 +15,5 @@ export { default as StraightEdgeInternal } from './StraightEdgeInternal.svelte';
 
 export { default as StepEdge } from './StepEdge.svelte';
 export { default as StepEdgeInternal } from './StepEdgeInternal.svelte';
+
+export { default as BaseEdge } from './BaseEdge.svelte';
diff --git a/packages/svelte/src/lib/index.ts b/packages/svelte/src/lib/index.ts
index 4920729f..a98a6241 100644
--- a/packages/svelte/src/lib/index.ts
+++ b/packages/svelte/src/lib/index.ts
@@ -7,8 +7,13 @@ export * from '$lib/container/Panel';
 export * from '$lib/components/SvelteFlowProvider';
 export * from '$lib/components/EdgeLabelRenderer';
 export * from '$lib/components/ViewportPortal';
-export * from '$lib/components/BaseEdge';
-export { BezierEdge, StepEdge, SmoothStepEdge, StraightEdge } from '$lib/components/edges';
+export {
+  BezierEdge,
+  StepEdge,
+  SmoothStepEdge,
+  StraightEdge,
+  BaseEdge
+} from '$lib/components/edges';
 export * from '$lib/components/Handle';
 export * from '$lib/components/EdgeLabel';
 
diff --git a/packages/svelte/src/lib/store/index.ts b/packages/svelte/src/lib/store/index.ts
index f2077c6d..4f5de5e0 100644
--- a/packages/svelte/src/lib/store/index.ts
+++ b/packages/svelte/src/lib/store/index.ts
@@ -46,7 +46,6 @@ export function createStore(signals: StoreSignals): SvelteFlowStore {
   }
 
   function addEdge(edgeParams: Edge | Connection) {
-    // TODO: let's see
     store.edges = addEdgeUtil(edgeParams, store.edges);
   }
 
@@ -215,33 +214,29 @@ export function createStore(signals: StoreSignals): SvelteFlowStore {
     }
   }
 
-  function resetSelectedElements(elements: Node[] | Edge[]) {
-    let elementsChanged = false;
-    elements.forEach((element) => {
-      if (element.selected) {
-        element.selected = false;
-        elementsChanged = true;
-      }
-    });
-    return elementsChanged;
-  }
-
   function setPaneClickDistance(distance: number) {
     store.panZoom?.setClickDistance(distance);
   }
 
-  function unselectNodesAndEdges(params?: { nodes?: Node[]; edges?: Edge[] }) {
-    resetSelectedElements(params?.nodes || store.nodes);
-    // if (resetNodes) store.nodes.set(get(store.nodes));
+  function deselect<T extends Node | Edge>(element: T) {
+    return element.selected ? { ...element, selected: false } : element;
+  }
 
-    resetSelectedElements(params?.edges || store.edges);
-    // if (resetEdges) store.edges.set(get(store.edges));
+  function unselectNodesAndEdges(params?: { nodes?: Node[]; edges?: Edge[] }) {
+    const nodesToDeselect = params?.nodes ? new Set(params.nodes.map((node) => node.id)) : null;
+    store.nodes = store.nodes.map((node) =>
+      !nodesToDeselect || nodesToDeselect.has(node.id) ? deselect(node) : node
+    );
+
+    const edgesToDeselect = params?.edges ? new Set(params.edges.map((node) => node.id)) : null;
+    store.edges = store.edges.map((edge) =>
+      !edgesToDeselect || edgesToDeselect.has(edge.id) ? deselect(edge) : edge
+    );
   }
 
   function addSelectedNodes(ids: string[]) {
     const isMultiSelection = store.multiselectionKeyPressed;
 
-    // store.nodes.update((ns) =>
     store.nodes = store.nodes.map((node) => {
       const nodeWillBeSelected = ids.includes(node.id);
       const selected = isMultiSelection ? node.selected || nodeWillBeSelected : nodeWillBeSelected;
@@ -251,7 +246,6 @@ export function createStore(signals: StoreSignals): SvelteFlowStore {
         node.selected = selected;
         return { ...node };
       }
-
       return node;
     });
 
@@ -265,30 +259,23 @@ export function createStore(signals: StoreSignals): SvelteFlowStore {
   function addSelectedEdges(ids: string[]) {
     const isMultiSelection = store.multiselectionKeyPressed;
 
-    // store.edges.update((edges) =>
-    store.edges.forEach((edge) => {
+    store.edges = store.edges.map((edge) => {
       const edgeWillBeSelected = ids.includes(edge.id);
       const selected = isMultiSelection ? edge.selected || edgeWillBeSelected : edgeWillBeSelected;
 
-      edge.selected = selected;
-
-      // return edge;
+      if (edge.selected !== selected) {
+        return { ...edge, selected };
+      }
+      return edge;
     });
-    // );
 
     if (!isMultiSelection) {
-      // store.nodes.update((ns) =>
-      store.nodes.forEach((node) => {
-        node.selected = false;
-        // return node;
-      });
-      // );
+      store.nodes = store.nodes.map(deselect);
     }
   }
 
   function handleNodeSelection(id: string) {
-    const node = store.nodes?.find((n) => n.id === id);
-    // const node = store.nodeLookup.get(id)?.internals.userNode;
+    const node = store.nodeLookup.get(id);
 
     if (!node) {
       console.warn('012', errorMessages['error012'](id));
@@ -357,73 +344,4 @@ export function createStore(signals: StoreSignals): SvelteFlowStore {
   } satisfies SvelteFlowStoreActions);
 
   return storeWithActions;
-
-  // return {
-  //   // state
-  //   ...store,
-
-  //   // derived state
-  //   // visibleEdges: getVisibleEdges(store),
-  //   // visibleNodes: getVisibleNodes(store),
-  //   // connection: derived([_connection, store.viewport], ([connection, viewport]) => {
-  //   //   return connection.inProgress
-  //   //     ? {
-  //   //         ...connection,
-  //   //         to: pointToRendererPoint(connection.to, [viewport.x, viewport.y, viewport.zoom])
-  //   //       }
-  //   //     : { ...connection };
-  //   // }),
-  //   // markers: derived(
-  //   //   [store.edges, store.defaultMarkerColor, store.flowId],
-  //   //   ([edges, defaultColor, id]) => createMarkerIds(edges, { defaultColor, id })
-  //   // ),
-  //   // initialized: (() => {
-  //   //   let initialized = false;
-  //   //   const initialNodesLength = get(store.nodes).length;
-  //   //   const initialEdgesLength = get(store.edges).length;
-  //   //   return derived(
-  //   //     [store.nodesInitialized, store.edgesInitialized, store.viewportInitialized],
-  //   //     ([nodesInitialized, edgesInitialized, viewportInitialized]) => {
-  //   //       // If it was already initialized, return true from then on
-  //   //       if (initialized) return initialized;
-
-  //   //       // if it hasn't been initialised check if it's now
-  //   //       if (initialNodesLength === 0) {
-  //   //         initialized = viewportInitialized;
-  //   //       } else if (initialEdgesLength === 0) {
-  //   //         initialized = viewportInitialized && nodesInitialized;
-  //   //       } else {
-  //   //         initialized = viewportInitialized && nodesInitialized && edgesInitialized;
-  //   //       }
-
-  //   //       return initialized;
-  //   //     }
-  //   //   );
-  //   // })(),
-
-  //   // actions
-  //   syncNodeStores: (nodes) => syncNodeStores(store.nodes, nodes),
-  //   syncEdgeStores: (edges) => syncEdgeStores(store.edges, edges),
-  //   // syncViewport: (viewport) => syncViewportStores(store.panZoom, store.viewport, viewport),
-  //   setNodeTypes,
-  //   setEdgeTypes,
-  //   addEdge,
-  //   updateNodePositions,
-  //   updateNodeInternals,
-  //   zoomIn,
-  //   zoomOut,
-  //   fitView: (options?: FitViewOptions) => fitView(options),
-  //   setMinZoom,
-  //   setMaxZoom,
-  //   setTranslateExtent,
-  //   setPaneClickDistance,
-  //   unselectNodesAndEdges,
-  //   addSelectedNodes,
-  //   addSelectedEdges,
-  //   handleNodeSelection,
-  //   panBy,
-  //   updateConnection,
-  //   cancelConnection,
-  //   reset
-  // };
 }
diff --git a/packages/svelte/src/lib/types/edges.ts b/packages/svelte/src/lib/types/edges.ts
index 0f3153e4..3901be4c 100644
--- a/packages/svelte/src/lib/types/edges.ts
+++ b/packages/svelte/src/lib/types/edges.ts
@@ -23,6 +23,28 @@ export type Edge<
   class?: string;
 };
 
+export type BaseEdgeProps = Pick<
+  EdgeProps,
+  'interactionWidth' | 'label' | 'labelStyle' | 'style'
+> & {
+  id?: string;
+  /** SVG path of the edge */
+  path: string;
+  /** The x coordinate of the label */
+  labelX?: number;
+  /** The y coordinate of the label */
+  labelY?: number;
+  /** Marker at start of edge
+   * @example 'url(#arrow)'
+   */
+  markerStart?: string;
+  /** Marker at end of edge
+   * @example 'url(#arrow)'
+   */
+  markerEnd?: string;
+  class?: string;
+};
+
 type SmoothStepEdge<EdgeData extends Record<string, unknown> = Record<string, unknown>> = Edge<
   EdgeData,
   'smoothstep'