implemented new fitView logic

2025-04-09 10:36:16 +02:00
parent 8b5284697c
commit 9383ba5554
132 changed files with 5506 additions and 2297 deletions
@@ -27,7 +27,8 @@ import {
  type ParentLookup,
  pointToRendererPoint,
  type ColorModeClass,
-  type Transform
+  type Transform,
+  fitViewport
 } from '@xyflow/system';

 import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
@@ -51,7 +52,6 @@ import type {
  OnBeforeDelete,
  IsValidConnection,
  Edge,
-  Node,
  EdgeLayouted,
  InternalNode
 } from '$lib/types';
@@ -78,14 +78,54 @@ 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 {
-    _nodes: Node[] = $derived.by(() => {
-      adoptUserNodes(signals.nodes, this.nodeLookup, this.parentLookup, {
+    flowId: string = $derived(signals.props.id ?? '1');
+    domNode = $state<HTMLDivElement | null>(null);
+    panZoom: PanZoomInstance | null = $state(null);
+    width = $state<number>(signals.width ?? 0);
+    height = $state<number>(signals.height ?? 0);
+
+    nodesInitialized: boolean = $derived.by(() => {
+      const nodesInitialized = adoptUserNodes(signals.nodes, this.nodeLookup, this.parentLookup, {
        nodeExtent: this.nodeExtent,
        nodeOrigin: this.nodeOrigin,
        elevateNodesOnSelect: signals.props.elevateNodesOnSelect ?? true,
        checkEquality: true
      });
-      return signals.nodes;
+
+      if (this.fitViewQueued && nodesInitialized) {
+        if (this.fitViewOptions?.duration) {
+          this.resolveFitView();
+        } else {
+          /**
+           * When no duration is set, viewport is set immediately which prevents an update
+           * I do not understand why, however we are setting state in a derived which is a no-go
+           */
+          queueMicrotask(() => {
+            this.resolveFitView();
+          });
+        }
+      }
+
+      return nodesInitialized;
+    });
+    edgesInitialized: boolean = $state(false);
+    viewportInitialized: boolean = $derived(this.panZoom !== null);
+
+    // TODO: Figure out initialized
+    _initialNodesLength: number = signals.nodes?.length ?? 0;
+    _initialEdgesLength: number = signals.edges?.length ?? 0;
+    initialized: boolean = $derived.by(() => {
+      let initialized = false;
+      // if it hasn't been initialised check if it's now
+      if (this._initialNodesLength === 0) {
+        initialized = this.viewportInitialized;
+      } else if (this._initialEdgesLength === 0) {
+        initialized = this.viewportInitialized && this.nodesInitialized;
+      } else {
+        initialized = this.viewportInitialized && this.nodesInitialized && this.edgesInitialized;
+      }
+
+      return initialized;
    });

    _edges: Edge[] = $derived.by(() => {
@@ -94,7 +134,9 @@ export const getInitialStore = (signals: StoreSignals) => {
    });

    get nodes() {
-      return this._nodes;
+      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+      this.nodesInitialized;
+      return signals.nodes;
    }
    set nodes(nodes) {
      signals.nodes = nodes;
@@ -116,7 +158,7 @@ export const getInitialStore = (signals: StoreSignals) => {
      const {
        // We need to access this._nodes to trigger on changes
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        _nodes,
+        nodes,
        _edges: edges,
        _prevVisibleEdges: previousEdges,
        nodeLookup,
@@ -174,11 +216,6 @@ export const getInitialStore = (signals: StoreSignals) => {
      signals.elementsSelectable = value;
    }

-    domNode = $state<HTMLDivElement | null>(null);
-    width = $state<number>(signals.width ?? 0);
-    height = $state<number>(signals.height ?? 0);
-
-    flowId: string = $derived(signals.props.id ?? '1');
    minZoom: number = $derived(signals.props.minZoom ?? 0.5);
    maxZoom: number = $derived(signals.props.maxZoom ?? 2);

@@ -192,11 +229,10 @@ export const getInitialStore = (signals: StoreSignals) => {
    autoPanOnNodeDrag: boolean = $derived(signals.props.autoPanOnNodeDrag ?? true);
    autoPanOnConnect: boolean = $derived(signals.props.autoPanOnConnect ?? true);

-    fitViewOnInitDone: boolean = $state(false);
-    fitViewOnInit: boolean = $derived(signals.props.fitView ?? false);
-    fitViewOptions: FitViewOptions | undefined = $derived(signals.props.fitViewOptions);
+    fitViewQueued: boolean = signals.props.fitView ?? false;
+    fitViewOptions: FitViewOptions | undefined = signals.props.fitViewOptions;
+    fitViewResolver: PromiseWithResolvers<boolean> | null = null;

-    panZoom: PanZoomInstance | null = $state(null);
    snapGrid: SnapGrid | null = $derived(signals.props.snapGrid ?? null);

    dragging: boolean = $state(false);
@@ -215,15 +251,16 @@ export const getInitialStore = (signals: StoreSignals) => {

    // _viewport is the internal viewport.
    // when binding to viewport, we operate on signals.viewport instead
+    initial: boolean = true;
    _viewport: Viewport = $state(signals.props.initialViewport ?? { x: 0, y: 0, zoom: 1 });
    get viewport() {
      return signals.viewport ?? this._viewport;
    }
-    set viewport(viewport: Viewport) {
+    set viewport(newViewport: Viewport) {
      if (signals.viewport) {
-        signals.viewport = viewport;
+        signals.viewport = newViewport;
      }
-      this._viewport = viewport;
+      this._viewport = newViewport;
    }

    // _connection is viewport independent and originating from XYHandle
@@ -271,25 +308,32 @@ export const getInitialStore = (signals: StoreSignals) => {
    onconnectend?: OnConnectEnd = $derived(signals.props.onconnectend);
    onbeforedelete?: OnBeforeDelete = $derived(signals.props.onbeforedelete);

-    nodesInitialized: boolean = $state(false);
-    edgesInitialized: boolean = $state(false);
-    viewportInitialized: boolean = $state(false);
-
-    _initialNodesLength: number = signals.nodes?.length ?? 0;
-    _initialEdgesLength: number = signals.edges?.length ?? 0;
-    initialized: boolean = $derived.by(() => {
-      let initialized = false;
-      // if it hasn't been initialised check if it's now
-      if (this._initialNodesLength === 0) {
-        initialized = this.viewportInitialized;
-      } else if (this._initialEdgesLength === 0) {
-        initialized = this.viewportInitialized && this.nodesInitialized;
-      } else {
-        initialized = this.viewportInitialized && this.nodesInitialized && this.edgesInitialized;
+    resolveFitView = async () => {
+      if (!this.panZoom) {
+        return;
      }

-      return initialized;
-    });
+      await fitViewport(
+        {
+          nodes: this.nodeLookup,
+          width: this.width,
+          height: this.height,
+          panZoom: this.panZoom,
+          minZoom: this.minZoom,
+          maxZoom: this.maxZoom
+        },
+        this.fitViewOptions
+      );
+
+      this.fitViewResolver?.resolve(true);
+      /**
+       * wait for the fitViewport to resolve before deleting the resolver,
+       * we want to reuse the old resolver if the user calls fitView again in the mean time
+       */
+      this.fitViewQueued = false;
+      this.fitViewOptions = undefined;
+      this.fitViewResolver = null;
+    };

    _prefersDark = new MediaQuery(
      '(prefers-color-scheme: dark)',
@@ -328,7 +372,6 @@ export const getInitialStore = (signals: StoreSignals) => {

 // Only way to check if an object is a proxy
 // is to see if is failes to perform a structured clone
-// TODO: is $state.raw really nessessary?
 function warnIfDeeplyReactive(array: unknown[] | undefined, name: string) {
  try {
    if (array && array.length > 0) {