fix: fix resolve unstable state on empty graph (#151)

Author: draedful

src/graph.ts

@@ -28,8 +28,17 @@ export type TGraphConfig<Block extends TBlock = TBlock, Connection extends TConn
   configurationName?: string;
   blocks?: Block[];
   connections?: TConnection[];
+  /**
+   * @deprecated use Graph.zoom api
+   */
   rect?: TRect;
+  /**
+   * @deprecated use Graph.zoom api
+   * */
   cameraXY?: TPoint;
+  /**
+   * @deprecated use Graph.zoom api
+   * */
   cameraScale?: number;
   settings?: Partial<TGraphSettingsConfig<Block, Connection>>;
   layers?: LayerConfig[];
@@ -56,7 +65,7 @@ export class Graph {
 
   public rootStore: RootStore = new RootStore(this);
 
-  public hitTest = new HitTest();
+  public hitTest = new HitTest(this);
 
   protected graphLayer: GraphLayer;
 

src/services/HitTest.ts

@@ -1,6 +1,7 @@
 import { signal } from "@preact/signals-core";
 import RBush from "rbush";
 
+import { Graph } from "../graph";
 import { ESchedulerPriority } from "../lib";
 import { Component } from "../lib/Component";
 import { Emitter } from "../utils/Emitter";
@@ -61,17 +62,40 @@ export class HitTest extends Emitter {
   // Single queue replaces all complex state tracking
   protected queue = new Map<HitBox, HitBoxData | null>();
 
-  public get isUnstable() {
+  constructor(protected graph: Graph) {
+    super();
+  }
+
+  /**
+   * Check if graph has any elements (blocks or connections)
+   * @returns true if graph has elements, false if empty
+   */
+  private hasGraphElements(): boolean {
+    if (!this.graph) {
+      return false;
+    }
     return (
-      this.processQueue.isScheduled() ||
-      this.queue.size > 0 ||
-      (this.$usableRect.value.height === 0 &&
-        this.$usableRect.value.width === 0 &&
-        this.$usableRect.value.x === 0 &&
-        this.$usableRect.value.y === 0)
+      this.graph.rootStore.blocksList.$blocks.value.length > 0 ||
+      this.graph.rootStore.connectionsList.$connections.value.length > 0
     );
   }
 
+  public get isUnstable() {
+    const hasProcessingQueue = this.processQueue.isScheduled() || this.queue.size > 0;
+    const hasZeroUsableRect =
+      this.$usableRect.value.height === 0 &&
+      this.$usableRect.value.width === 0 &&
+      this.$usableRect.value.x === 0 &&
+      this.$usableRect.value.y === 0;
+
+    // If graph has no elements, it's stable even with zero usableRect
+    if (hasZeroUsableRect && !this.hasGraphElements()) {
+      return hasProcessingQueue;
+    }
+
+    return hasProcessingQueue || hasZeroUsableRect;
+  }
+
   /**
    * Load array of HitBox items
    * @param items Array of HitBox items to load
@@ -172,6 +196,12 @@ export class HitTest extends Emitter {
    * @returns Unsubscribe function
    */
   public waitUsableRectUpdate(callback: (rect: TRect) => void): () => void {
+    // For empty graphs, immediately call callback with current usableRect
+    if (!this.hasGraphElements()) {
+      callback(this.$usableRect.value);
+      return noop;
+    }
+
     if (this.isUnstable) {
       const removeListener = this.$usableRect.subscribe(() => {
         if (!this.isUnstable) {

src/stories/configurations/emptyGraph.ts

@@ -0,0 +1,17 @@
+import { TGraphConfig } from "../../graph";
+
+import { storiesSettings } from "./definitions";
+
+export const emptyGraphConfig: TGraphConfig = {
+  configurationName: "emptyGraph",
+  blocks: [],
+  connections: [],
+  cameraScale: 1,
+  rect: {
+    x: -400,
+    y: -300,
+    width: 800,
+    height: 600,
+  },
+  settings: storiesSettings,
+};

src/stories/main/GraphEditor.stories.tsx

@@ -13,6 +13,7 @@ import { CustomLayerConfig } from "../configurations/CustomLayerConfig";
 import { oneBezierConnectionConfig } from "../configurations/bezierConnection";
 import { coloredConnections } from "../configurations/coloredConnections";
 import { customSchematicViewConfig } from "../configurations/customBlocksView";
+import { emptyGraphConfig } from "../configurations/emptyGraph";
 import { generatePrettyBlocks } from "../configurations/generatePretty";
 import { oneBlockConfig } from "../configurations/oneBlock";
 import { oneStraightConfig } from "../configurations/oneConnection";
@@ -198,11 +199,14 @@ export const SnappingGraph: Story = {
   ),
 };
 
-//
-// export const ThousandBlocksAnd9000Connections: Story = {
-//   render: () => <GraphApp config={generatePrettyBlocks(25, 15)}></GraphApp>,
-// };
-//
-// export const FiveThousandBlocksAnd5000Connections: Story = {
-//   render: () => <GraphApp config={generatePrettyBlocks(40, 500)}></GraphApp>,
-// };
+export const EmptyGraph: Story = {
+  render: (args) => <GraphApp config={emptyGraphConfig} {...args}></GraphApp>,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Demonstrates behavior of an empty graph. This tests the fix for HitTest service where waitUsableRectUpdate would never resolve for graphs initialized without elements.",
+      },
+    },
+  },
+};