refactor: enhance graph layer visibility management; implement camera viewport threshold and improve hit test stability checks

Author: draedful

docs/system/graph-settings.md

@@ -140,8 +140,8 @@ Constants control the sizing, spacing, and other numerical values used throughou
 | Constant | Default | Description |
 |----------|---------|-------------|
 | `GRID_SIZE` | `16` | Base grid size for layout calculations |
-| `PIXEL_RATIO` | `window.devicePixelRatio \|\| 1` | Device pixel ratio for rendering |
 | `USABLE_RECT_GAP` | `400` | Gap around the usable rect area |
+| `CAMERA_VIEWPORT_TRESHOLD` | `0.5` | Threshold for camera viewport |
 
 ### Camera Constants
 

src/api/PublicGraphApi.ts

@@ -39,23 +39,23 @@ export class PublicGraphApi {
     return new Promise((resolve) => {
       const currentRect = this.getUsableRect();
 
-      // Check if usableRect is ready (not empty default state)
-      if (currentRect.width > 0 || currentRect.height > 0 || currentRect.x !== 0 || currentRect.y !== 0) {
-        this.zoomToRect(currentRect, zoomConfig);
-        resolve();
+      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;
       }
 
-      // Wait for usableRect to become ready
-      const unsubscribe = this.graph.hitTest.onUsableRectUpdate((usableRect) => {
-        if (usableRect.height === 0 && usableRect.width === 0 && usableRect.x === 0 && usableRect.y === 0) {
-          return;
-        }
-
-        this.zoomToRect(usableRect, zoomConfig);
-        unsubscribe();
-        resolve();
-      });
+      this.zoomToRect(currentRect, zoomConfig);
+      resolve();
     });
   }
 

src/components/canvas/connections/BaseConnection.ts

@@ -96,13 +96,13 @@ export class BaseConnection<
       this.connectionPoints[1].x,
       this.anchorsPoints?.[0].x || Infinity,
       this.anchorsPoints?.[1].x || Infinity,
-    ];
+    ].filter(Number.isFinite);
     const y = [
       this.connectionPoints[0].y,
       this.connectionPoints[1].y,
       this.anchorsPoints?.[0].y || Infinity,
       this.anchorsPoints?.[1].y || Infinity,
-    ];
+    ].filter(Number.isFinite);
 
     this.bBox = [Math.min(...x), Math.min(...y), Math.max(...x), Math.max(...y)];
 

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

@@ -145,14 +145,16 @@ export class BatchPath2DRenderer {
       }, [] satisfies Path2DGroup[]);
   });
 
-  protected requestRender = debounce(
+  protected requestRender = () => {
+    this.onChange?.();
+  }; /* debounce(
     () => {
       this.onChange?.();
     },
     {
       priority: ESchedulerPriority.HIGHEST,
     }
-  );
+  ); */
 
   protected getGroup(zIndex: number, group: string) {
     if (!this.indexes.has(zIndex)) {

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

@@ -95,8 +95,6 @@ export class GraphLayer extends Layer<TGraphLayerProps, TGraphLayerContext> {
     this.camera = this.props.camera;
 
     this.performRender = this.performRender.bind(this);
-
-    canvas.style.visibility = "hidden";
   }
 
   protected afterInit(): void {
@@ -107,16 +105,6 @@ export class GraphLayer extends Layer<TGraphLayerProps, TGraphLayerContext> {
 
     // Subscribe to graph events here instead of in the constructor
     this.onGraphEvent("camera-change", this.performRender);
-    schedule(
-      () => {
-        this.getCanvas().style.visibility = "visible";
-      },
-      {
-        priority: ESchedulerPriority.LOWEST,
-        frameInterval: 15,
-        once: true,
-      }
-    );
     super.afterInit();
   }
 

src/components/canvas/layers/selectionLayer/SelectionLayer.ts

@@ -81,7 +81,7 @@ export class SelectionLayer extends Layer<
         this.selection.y,
         this.selection.width,
         this.selection.height,
-        Number(window.devicePixelRatio)
+        Number(this.context.graph.layers.getDPR())
       );
       ctx.closePath();
 

src/graph.ts

@@ -9,7 +9,7 @@ import { GraphLayer } from "./components/canvas/layers/graphLayer/GraphLayer";
 import { SelectionLayer } from "./components/canvas/layers/selectionLayer/SelectionLayer";
 import { TGraphColors, TGraphConstants, initGraphColors, initGraphConstants } from "./graphConfig";
 import { GraphEventParams, GraphEventsDefinitions } from "./graphEvents";
-import { ESchedulerPriority, scheduler } from "./lib/Scheduler";
+import { scheduler } from "./lib/Scheduler";
 import { HitTest } from "./services/HitTest";
 import { Layer } from "./services/Layer";
 import { Layers } from "./services/LayersService";
@@ -22,7 +22,6 @@ import { getXY } from "./utils/functions";
 import { clearTextCache } from "./utils/renderers/text";
 import { RecursivePartial } from "./utils/types/helpers";
 import { IPoint, IRect, Point, TPoint, TRect, isTRect } from "./utils/types/shapes";
-import { schedule } from "./utils/utils/schedule";
 
 export type LayerConfig<T extends Constructor<Layer> = Constructor<Layer>> = [
   T,
@@ -102,6 +101,10 @@ export class Graph {
     this.graphLayer = this.addLayer(GraphLayer, {});
     this.selectionLayer = this.addLayer(SelectionLayer, {});
 
+    this.selectionLayer.hide();
+    this.graphLayer.hide();
+    this.belowLayer.hide();
+
     if (rootEl) {
       this.attach(rootEl);
     }
@@ -119,19 +122,6 @@ export class Graph {
     this.setupGraph(config);
   }
 
-  public scheduleTask(cb: () => void) {
-    schedule(
-      () => {
-        cb();
-      },
-      {
-        priority: ESchedulerPriority.LOWEST,
-        frameInterval: 10,
-        once: true,
-      }
-    );
-  }
-
   public getGraphLayer() {
     return this.graphLayer;
   }
@@ -173,7 +163,7 @@ export class Graph {
   }
 
   public getElementsOverPoint<T extends Constructor<GraphComponent>>(point: IPoint, filter?: T[]): InstanceType<T>[] {
-    const items = this.hitTest.testPoint(point, this.graphConstants.system.PIXEL_RATIO);
+    const items = this.hitTest.testPoint(point, this.layers.getDPR());
     if (filter && items.length > 0) {
       return items.filter((item) => filter.some((Component) => item instanceof Component)) as InstanceType<T>[];
     }
@@ -362,6 +352,31 @@ export class Graph {
     this.layers.start();
     this.scheduler.start();
     this.setGraphState(GraphState.READY);
+    this.runAfterGraphReady(() => {
+      this.selectionLayer.show();
+      this.graphLayer.show();
+      this.belowLayer.show();
+    });
+  }
+
+  /**
+   * Graph is ready when the hitboxes are stable.
+   * In order to initialize hitboxes we need to start scheduler and wait untils every component registered in hitTest service
+   * Immediatelly after registering startign a rendering process.
+   * @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();
+    }
   }
 
   public stop(full = false) {

src/graphConfig.ts

@@ -83,6 +83,7 @@ export const initGraphColors: TGraphColors = {
 export type TGraphConstants = {
   system: {
     GRID_SIZE: number;
+    /* @deprecated this config is not used anymore, Layers checks devicePixelRatio internally */
     PIXEL_RATIO: number;
     USABLE_RECT_GAP: number;
     /** For preload blocks on the html layer (camera dimensions * (1 + this value)) */
@@ -131,6 +132,7 @@ export type TGraphConstants = {
 export const initGraphConstants: TGraphConstants = {
   system: {
     GRID_SIZE: 16,
+    /* @deprecated this config is not used anymore, Layers checks devicePixelRatio internally */
     PIXEL_RATIO: typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1,
     USABLE_RECT_GAP: 400,
     CAMERA_VIEWPORT_TRESHOLD: 0.5,
@@ -157,7 +159,7 @@ export const initGraphConstants: TGraphConstants = {
     DEFAULT_Z_INDEX: 0,
     THRESHOLD_LINE_HIT: 8,
     MIN_ZOOM_FOR_CONNECTION_ARROW_AND_LABEL: 0.25,
-    PATH2D_CHUNK_SIZE: 9,
+    PATH2D_CHUNK_SIZE: 100,
     LABEL: {
       INNER_PADDINGS: [0, 0, 0, 0],
     },

src/services/HitTest.ts

@@ -40,6 +40,16 @@ export class HitTest extends Emitter {
   // Single queue replaces all complex state tracking
   protected queue = new Map<HitBox, HitBoxData | null>();
 
+  public get isUnstable() {
+    return (
+      this.queue.size > 0 ||
+      (this.$usableRect.value.height === 0 &&
+        this.$usableRect.value.width === 0 &&
+        this.$usableRect.value.x === 0 &&
+        this.$usableRect.value.y === 0)
+    );
+  }
+
   public load(items: HitBox[]) {
     this.tree.load(items);
   }
@@ -74,9 +84,12 @@ export class HitTest extends Emitter {
     }
   );
 
-  public update(item: HitBox, bbox: HitBoxData) {
+  public update(item: HitBox, bbox: HitBoxData, force = false) {
     this.queue.set(item, bbox);
     this.processQueue();
+    if (force) {
+      this.processQueue.flush();
+    }
   }
 
   public clear() {
@@ -118,12 +131,12 @@ export class HitTest extends Emitter {
   }
 
   protected updateUsableRect() {
-    const { minX, minY, maxX, maxY } = this.getBBox(this.tree.all());
+    const rect = this.tree.toJSON();
     this.$usableRect.value = {
-      x: minX,
-      y: minY,
-      width: maxX - minX,
-      height: maxY - minY,
+      x: rect.minX,
+      y: rect.minY,
+      width: rect.maxX - rect.minX,
+      height: rect.maxY - rect.minY,
     };
   }
 
@@ -227,7 +240,7 @@ export class HitBox implements IHitBox {
   public update = (minX: number, minY: number, maxX: number, maxY: number, force?: boolean): void => {
     if (this.destroyed) return;
     if (minX === this.minX && minY === this.minY && maxX === this.maxX && maxY === this.maxY && !force) return;
-    this.hitTest.update(this, { minX, minY, maxX, maxY, x: this.x, y: this.y });
+    this.hitTest.update(this, { minX, minY, maxX, maxY, x: this.x, y: this.y }, force);
   };
 
   public getRect(): [number, number, number, number] {

src/services/Layer.css

@@ -25,4 +25,8 @@
   transform-origin: 0 0;
   transform-style: preserve-3d;
   will-change: transform;
+}
+
+.hidden {
+  visibility: hidden;
 }