refactor: simplify graph readiness and zoom handling; replace unstable checks with waitUsableRectUpdate method

Author: draedful

src/api/PublicGraphApi.ts

@@ -35,27 +35,9 @@ export class PublicGraphApi {
    * @param zoomConfig - Configuration for zoom transition and padding
    * @returns Promise that resolves when zoom operation is complete
    */
-  public zoomToViewPort(zoomConfig?: ZoomConfig): Promise<void> {
-    return new Promise((resolve) => {
-      const currentRect = this.getUsableRect();
-
-      if (this.graph.hitTest.isUnstable) {
-        const unsubscribe = this.graph.hitTest.onUsableRectUpdate((usableRect) => {
-          if (this.graph.hitTest.isUnstable) {
-            return;
-          }
-
-          this.zoomToRect(usableRect, zoomConfig);
-          resolve();
-          setTimeout(() => {
-            unsubscribe();
-          }, 0);
-        });
-        return;
-      }
-
-      this.zoomToRect(currentRect, zoomConfig);
-      resolve();
+  public zoomToViewPort(zoomConfig?: ZoomConfig) {
+    this.graph.hitTest.waitUsableRectUpdate((rect) => {
+      this.zoomToRect(rect, zoomConfig);
     });
   }
 

src/components/canvas/connections/BatchPath2D/index.tsx

@@ -1,6 +1,4 @@
-import { ESchedulerPriority } from "../../../../lib";
 import { cache } from "../../../../lib/utils";
-import { debounce } from "../../../../utils/functions";
 
 export type Path2DRenderStyleResult =
   | { type: "stroke" }

src/components/canvas/layers/graphLayer/GraphLayer.ts

@@ -1,11 +1,10 @@
 import { Graph } from "../../../../graph";
 import { GraphMouseEventNames, isNativeGraphEventName } from "../../../../graphEvents";
-import { ESchedulerPriority } from "../../../../lib";
 import { Component } from "../../../../lib/Component";
 import { Layer, LayerContext, LayerProps } from "../../../../services/Layer";
 import { Camera, TCameraProps } from "../../../../services/camera/Camera";
 import { ICamera } from "../../../../services/camera/CameraService";
-import { getEventDelta, schedule } from "../../../../utils/functions";
+import { getEventDelta } from "../../../../utils/functions";
 import { EventedComponent } from "../../EventedComponent/EventedComponent";
 import { Blocks } from "../../blocks/Blocks";
 import { BlockConnection } from "../../connections/BlockConnection";

src/graph.ts

@@ -366,17 +366,7 @@ export class Graph {
    * @param cb - Callback to run after graph is ready
    */
   public runAfterGraphReady(cb: () => void) {
-    if (this.hitTest.isUnstable) {
-      this.hitTest.on("update", () => {
-        if (this.hitTest.isUnstable) {
-          this.runAfterGraphReady(cb);
-          return;
-        }
-        cb();
-      });
-    } else {
-      cb();
-    }
+    this.hitTest.waitUsableRectUpdate(cb);
   }
 
   public stop(full = false) {

src/react-components/BlocksList.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useEffect, useLayoutEffect, useMemo, useState } from "react";
+import React, { memo, useEffect, useMemo, useState } from "react";
 
 import isEqual from "lodash/isEqual";
 
@@ -125,17 +125,12 @@ export const BlocksList = memo(function BlocksList({ renderBlock, graphObject }:
       throttleUpdate.cancel();
       scheduleListUpdate.cancel();
     };
-  }, [graphObject.cameraService]);
+  }, []);
 
   // init list
-  useLayoutEffect(() => {
-    graphObject.hitTest.on("update", throttleUpdate);
-
-    throttleUpdate(graphObject.cameraService.getCameraState());
-    return () => {
-      graphObject.hitTest.off("update", updateBlockList);
-    };
-  }, [graphObject.cameraService, graphObject.hitTest, updateBlockList]);
+  useEffect(() => {
+    return graphObject.hitTest.onUsableRectUpdate(updateBlockList);
+  }, [graphObject.hitTest, throttleUpdate, isRenderAllowed, graphState]);
 
   return (
     <>

src/services/HitTest.ts

@@ -33,15 +33,14 @@ export interface IHitBox extends HitBoxData {
 export class HitTest extends Emitter {
   private tree = new RBush<HitBox>(9);
 
-  protected empty = true;
-
   protected $usableRect = signal<TRect>({ x: 0, y: 0, width: 0, height: 0 });
 
   // Single queue replaces all complex state tracking
   protected queue = new Map<HitBox, HitBoxData | null>();
 
   public get isUnstable() {
     return (
+      this.processQueue.isScheduled() ||
       this.queue.size > 0 ||
       (this.$usableRect.value.height === 0 &&
         this.$usableRect.value.width === 0 &&
@@ -57,8 +56,7 @@ export class HitTest extends Emitter {
   // Single debounced job replaces complex scheduler logic
   protected processQueue = debounce(
     () => {
-      let needUpdateUsableRect = false;
-
+      const items = [];
       for (const [item, bbox] of this.queue) {
         if (bbox === null) {
           // Remove operation
@@ -67,29 +65,28 @@ export class HitTest extends Emitter {
           // Add/update operation
           this.tree.remove(item);
           item.updateRect(bbox);
-          this.tree.load([item]);
-          needUpdateUsableRect = true;
+          items.push(item);
         }
       }
+      this.tree.load(items);
       this.queue.clear();
-
-      if (needUpdateUsableRect) {
-        this.updateUsableRect();
-      }
+      this.updateUsableRect();
       this.emit("update", this);
     },
     {
-      priority: ESchedulerPriority.HIGHEST,
+      priority: ESchedulerPriority.LOWEST,
       frameTimeout: 250,
     }
   );
 
-  public update(item: HitBox, bbox: HitBoxData, force = false) {
+  public update(item: HitBox, bbox: HitBoxData, _force = false) {
     this.queue.set(item, bbox);
     this.processQueue();
-    if (force) {
+    // TODO: force update may be cause to unset unstable flag before graph is really made stable
+    // Usually case: updateEntities update blocks and connections. In this case used force stategy, so every entity will be updated immediatelly, but async, so zoom will be unstable
+    /* if (force) {
       this.processQueue.flush();
-    }
+    } */
   }
 
   public clear() {
@@ -109,25 +106,13 @@ export class HitTest extends Emitter {
     this.processQueue();
   }
 
-  protected getBBox(items: HitBox[]) {
-    return items.reduce(
-      (acc, item) => {
-        if (Number.isFinite(item.minX)) {
-          acc.minX = Math.min(acc.minX, item.minX);
-        }
-        if (Number.isFinite(item.minY)) {
-          acc.minY = Math.min(acc.minY, item.minY);
-        }
-        if (Number.isFinite(item.maxX)) {
-          acc.maxX = Math.max(acc.maxX, item.maxX);
-        }
-        if (Number.isFinite(item.maxY)) {
-          acc.maxY = Math.max(acc.maxY, item.maxY);
-        }
-        return acc;
-      },
-      { minX: 0, minY: 0, maxX: 0, maxY: 0 }
-    );
+  public waitUsableRectUpdate(callback: (rect: TRect) => void) {
+    if (this.isUnstable) {
+      return this.once("update", () => {
+        this.waitUsableRectUpdate(callback);
+      });
+    }
+    callback(this.$usableRect.value);
   }
 
   protected updateUsableRect() {

src/stories/Playground/GraphPlayground.tsx

@@ -7,7 +7,6 @@ import { TBlock } from "../../components/canvas/blocks/Block";
 import { random } from "../../components/canvas/blocks/generate";
 import { ConnectionLayer } from "../../components/canvas/layers/connectionLayer/ConnectionLayer";
 import { Graph, GraphState, TGraphConfig } from "../../graph";
-import { ESchedulerPriority } from "../../lib";
 import { GraphBlock, GraphCanvas, HookGraphParams, useGraph, useGraphEvent, useLayer } from "../../react-components";
 import { useFn } from "../../react-components/utils/hooks/useFn";
 import { ECanChangeBlockGeometry } from "../../store/settings";
@@ -31,8 +30,6 @@ import {
 import "./Playground.css";
 import "@gravity-ui/uikit/styles/styles.css";
 
-import { schedule } from "../../utils/functions";
-
 const generated = generatePlaygroundActionBlocks(0, 5);
 const textBlocks = [
   createTextBlock(-144, 80, 448, 0, "To create new block, drag and drop new connection from edge"),

src/utils/utils/schedule.ts

@@ -52,7 +52,7 @@ export const debounce = <T extends (...args: unknown[]) => void>(
     frameInterval?: number;
     frameTimeout?: number;
   } = {}
-): T & { cancel: () => void; flush: () => void } => {
+): T & { cancel: () => void; flush: () => void; isScheduled: () => boolean } => {
   let frameCounter = 0;
   let isScheduled = false;
   let removeScheduler: (() => void) | null = null;
@@ -66,10 +66,10 @@ export const debounce = <T extends (...args: unknown[]) => void>(
       const elapsedTime = currentTime - startTime;
 
       if (frameCounter >= frameInterval && elapsedTime >= frameTimeout) {
-        fn(...latestArgs);
         isScheduled = false;
         frameCounter = 0;
         startTime = 0;
+        fn(...latestArgs);
         if (removeScheduler) {
           removeScheduler();
           removeScheduler = null;
@@ -104,10 +104,13 @@ export const debounce = <T extends (...args: unknown[]) => void>(
       isScheduled = true;
       removeScheduler = scheduler.addScheduler(debouncedScheduler, priority);
     }
-  }) as T & { cancel: () => void; flush: () => void };
+  }) as T & { cancel: () => void; flush: () => void; isScheduled: () => boolean };
 
   debouncedFn.cancel = cancel;
   debouncedFn.flush = flush;
+  debouncedFn.isScheduled = () => {
+    return isScheduled;
+  };
 
   return debouncedFn;
 };