migrating hooks, fixed colorMode

packages/svelte/src/lib/store/index.ts

@@ -218,20 +218,37 @@ export function createStore(signals: StoreSignals): SvelteFlowStore {
     store.panZoom?.setClickDistance(distance);
   }
 
-  function deselect<T extends Node | Edge>(element: T) {
-    return element.selected ? { ...element, selected: false } : element;
+  function deselect<T extends Node | Edge>(
+    elements: T[],
+    elementsToDeselect: Set<string> | null = null
+  ): [boolean, T[]] {
+    let deselected = false;
+
+    const newElements = elements.map((element) => {
+      const shouldDeselect = elementsToDeselect ? elementsToDeselect.has(element.id) : true;
+
+      if (shouldDeselect && element.selected) {
+        deselected = true;
+        return { ...element, selected: false };
+      }
+      return element;
+    });
+
+    return [deselected, newElements];
   }
 
   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 [nodesDeselected, newNodes] = deselect(store.nodes, nodesToDeselect);
+    if (nodesDeselected) {
+      store.nodes = newNodes;
+    }
 
     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
-    );
+    const [edgesDeselected, newEdges] = deselect(store.edges, edgesToDeselect);
+    if (edgesDeselected) {
+      store.edges = newEdges;
+    }
   }
 
   function addSelectedNodes(ids: string[]) {
@@ -252,9 +269,7 @@ export function createStore(signals: StoreSignals): SvelteFlowStore {
     });
 
     if (!isMultiSelection) {
-      store.edges = store.edges.map((edge) => {
-        return edge.selected ? { ...edge, selected: false } : edge;
-      });
+      unselectNodesAndEdges({ nodes: [] });
     }
   }
 
@@ -272,7 +287,7 @@ export function createStore(signals: StoreSignals): SvelteFlowStore {
     });
 
     if (!isMultiSelection) {
-      store.nodes = store.nodes.map(deselect);
+      unselectNodesAndEdges({ edges: [] });
     }
   }
 

packages/svelte/src/lib/store/initial-store.svelte.ts

@@ -22,12 +22,12 @@ import {
   type NodeLookup,
   type ConnectionState,
   getInternalNodesBounds,
-  type ColorMode,
   createMarkerIds,
   type EdgeLookup,
   type ConnectionLookup,
   type ParentLookup,
-  pointToRendererPoint
+  pointToRendererPoint,
+  type ColorModeClass
 } from '@xyflow/system';
 
 import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
@@ -55,6 +55,7 @@ import type {
 } from '$lib/types';
 
 import type { StoreSignals } from './types';
+import { MediaQuery } from 'svelte/reactivity';
 
 export const initialNodeTypes = {
   input: InputNode,
@@ -74,14 +75,29 @@ export const getInitialStore = (signals: StoreSignals) => {
   // We use a class here, because Svelte adds getters & setter for us.
   // Inline classes have some performance implications but we just call it once (max twice).
   class SvelteFlowStore {
-    get nodes() {
+    _nodes: Node[] = $derived.by(() => {
+      adoptUserNodes(signals.nodes, this.nodeLookup, this.parentLookup, {
+        nodeExtent: this.nodeExtent,
+        nodeOrigin: this.nodeOrigin,
+        elevateNodesOnSelect: false,
+        checkEquality: true
+      });
       return signals.nodes;
+    });
+
+    _edges: Edge[] = $derived.by(() => {
+      updateConnectionLookup(this.connectionLookup, this.edgeLookup, signals.edges);
+      return signals.edges;
+    });
+
+    get nodes() {
+      return this._nodes;
     }
     set nodes(nodes) {
       signals.nodes = nodes;
     }
     get edges() {
-      return signals.edges;
+      return this._edges;
     }
     set edges(edges) {
       signals.edges = edges;
@@ -91,20 +107,6 @@ export const getInitialStore = (signals: StoreSignals) => {
     connectionLookup: ConnectionLookup = new Map();
     edgeLookup: EdgeLookup = new Map();
 
-    adoptNodes: true = $derived.by(() => {
-      adoptUserNodes(signals.nodes, this.nodeLookup, this.parentLookup, {
-        nodeExtent: this.nodeExtent,
-        nodeOrigin: this.nodeOrigin,
-        elevateNodesOnSelect: false,
-        checkEquality: true
-      });
-      return true;
-    });
-    adoptEdges: true = $derived.by(() => {
-      updateConnectionLookup(this.connectionLookup, this.edgeLookup, signals.edges);
-      return true;
-    });
-
     domNode: HTMLDivElement | null = $derived(signals.domNode ?? signals.domNode ?? null);
     width: number = $derived(signals.width ?? signals.props.width ?? 0);
     height: number = $derived(signals.height ?? signals.props.height ?? 0);
@@ -212,7 +214,17 @@ export const getInitialStore = (signals: StoreSignals) => {
 
       return initialized;
     });
-    colorMode: ColorMode = $derived(signals.props.colorMode ?? 'light');
+    prefersDark = new MediaQuery(
+      '(prefers-color-scheme: dark)',
+      signals.props.colorModeSSR === 'dark'
+    );
+    colorMode: ColorModeClass = $derived(
+      signals.props.colorMode === 'system'
+        ? this.prefersDark.current
+          ? 'dark'
+          : 'light'
+        : (signals.props.colorMode ?? 'light')
+    );
 
     constructor() {
       // Process intial fitView here