clean up BaseEdge, fix store functions

packages/svelte/src/lib/components/BaseEdge/index.ts

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

packages/svelte/src/lib/components/BaseEdge/types.ts

@@ -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;
-};

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';
 

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 {

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,
+    targetY
-    targetPosition
   }: BezierEdgeProps = $props();
 
   let [path, labelX, labelY] = $derived(

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,
+    interactionWidth,
-    sourceY,
-    sourcePosition,
-    targetX,
-    targetY,
-    targetPosition,
     label,
     labelStyle,
-    markerStart,
     markerEnd,
-    interactionWidth,
+    markerStart,
-    style
+    sourcePosition,
+    sourceX,
+    sourceY,
+    style,
+    targetPosition,
+    targetX,
+    targetY
   }: EdgeProps = $props();
 
   let [path, labelX, labelY] = $derived(

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,
+    targetY
-    targetPosition
   }: SmoothStepEdgeProps = $props();
 
   let [path, labelX, labelY] = $derived(

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,
+    interactionWidth,
-    sourceY,
-    sourcePosition,
-    targetX,
-    targetY,
-    targetPosition,
     label,
     labelStyle,
-    markerStart,
+    style,
     markerEnd,
-    interactionWidth,
+    markerStart,
-    style
+    sourcePosition,
+    sourceX,
+    sourceY,
+    targetPosition,
+    targetX,
+    targetY
   }: EdgeProps = $props();
 
   let [path, labelX, labelY] = $derived(

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,

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,

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,

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,

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';

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 {
-export { BezierEdge, StepEdge, SmoothStepEdge, StraightEdge } from '$lib/components/edges';
+  BezierEdge,
+  StepEdge,
+  SmoothStepEdge,
+  StraightEdge,
+  BaseEdge
+} from '$lib/components/edges';
 export * from '$lib/components/Handle';
 export * from '$lib/components/EdgeLabel';
 

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[] }) {
+  function deselect<T extends Node | Edge>(element: T) {
-    resetSelectedElements(params?.nodes || store.nodes);
+    return element.selected ? { ...element, selected: false } : element;
-    // if (resetNodes) store.nodes.set(get(store.nodes));
+  }
 
-    resetSelectedElements(params?.edges || store.edges);
+  function unselectNodesAndEdges(params?: { nodes?: Node[]; edges?: Edge[] }) {
-    // if (resetEdges) store.edges.set(get(store.edges));
+    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 = store.edges.map((edge) => {
-    store.edges.forEach((edge) => {
       const edgeWillBeSelected = ids.includes(edge.id);
       const selected = isMultiSelection ? edge.selected || edgeWillBeSelected : edgeWillBeSelected;
 
-      edge.selected = selected;
+      if (edge.selected !== selected) {
-
+        return { ...edge, selected };
-      // return edge;
+      }
+      return edge;
     });
-    // );
 
     if (!isMultiSelection) {
-      // store.nodes.update((ns) =>
+      store.nodes = store.nodes.map(deselect);
-      store.nodes.forEach((node) => {
-        node.selected = false;
-        // return node;
-      });
-      // );
     }
   }
 
   function handleNodeSelection(id: string) {
-    const node = store.nodes?.find((n) => n.id === id);
+    const node = store.nodeLookup.get(id);
-    // const node = store.nodeLookup.get(id)?.internals.userNode;
 
     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
-  // };
 }

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'