refactor: update Layer and LayersService for better performance and consistency

- Moved from useEffect to useLayoutEffect in useLayer for immediate updates.
- Replaced window.devicePixelRatio with globalThis.devicePixelRatio for broader compatibility.
- Enhanced updateSize method in Layer to ensure proper rendering.
- Changed rootSize in LayersService to use signals for reactive updates.
- Switched debounce to throttle in handleRootResize for improved performance.

Author: draedful

.storybook/preview.tsx

@@ -4,13 +4,13 @@ import React, { StrictMode } from "react";
 import './styles/global.css';
 
 const preview: Preview = {
-    // decorators: [
-    //   (Story) => (
-    //     <StrictMode>
-    //       <Story />
-    //     </StrictMode>
-    //   ),
-    // ],
+    decorators: [
+      (Story) => (
+        <StrictMode>
+          <Story />
+        </StrictMode>
+      ),
+    ],
 };
 
 export default preview;

src/graphConfig.ts

@@ -133,7 +133,7 @@ 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,
+    PIXEL_RATIO: typeof globalThis !== "undefined" ? globalThis.devicePixelRatio || 1 : 1,
     USABLE_RECT_GAP: 400,
     CAMERA_VIEWPORT_TRESHOLD: 0.5,
   },

src/plugins/minimap/layer.ts

@@ -92,11 +92,16 @@ export class MiniMapLayer extends Layer<MiniMapLayerProps, MiniMapLayerContext>
         this.onCanvasEvent("mousedown", this.handleMouseDownEvent);
       }
     }
+    this.onSignal(this.props.graph.hitTest.$usableRect, () => {
+      this.onBlockUpdated();
+      this.calculateViewPortCoords();
+      this.rerenderMapContent();
+    });
 
     super.afterInit();
   }
 
-  public updateSize(): void {
+  protected updateCanvasSize(): void {
     this.rerenderMapContent();
   }
 

src/react-components/hooks/useLayer.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useDeferredValue, useLayoutEffect, useState } from "react";
 
 import isEqual from "lodash/isEqual";
 
@@ -36,11 +36,16 @@ export function useLayer<T extends Constructor<Layer> = Constructor<Layer>>(
     : never
 ) {
   const [layer, setLayer] = useState<InstanceType<T> | null>(null);
+  const deferredLayer = useDeferredValue(layer);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
+    // setLayer will apply the next state not immediately,
+    // so we have to store link to layer instance in useLayoutEffect
+    // in order to detach that layer from graph in case of fast re-run of effect
     const layerInstance = graph ? graph.addLayer(layerCtor, props) : null;
     setLayer(layerInstance);
     return () => {
+      // detach layer from graph
       if (layerInstance) {
         graph?.detachLayer(layerInstance);
       }
@@ -49,11 +54,11 @@ export function useLayer<T extends Constructor<Layer> = Constructor<Layer>>(
 
   const prevProps = usePrevious(props);
 
-  useEffect(() => {
-    if (layer && (!prevProps || !isEqual(prevProps, props))) {
-      layer.setProps(props);
+  useLayoutEffect(() => {
+    if (deferredLayer && (!prevProps || !isEqual(prevProps, props))) {
+      deferredLayer.setProps(props);
     }
-  }, [layer, props, prevProps]);
+  }, [deferredLayer, props, prevProps]);
 
   return layer;
 }

src/services/HitTest.ts

@@ -34,7 +34,7 @@ export interface IHitBox extends HitBoxData {
 export class HitTest extends Emitter {
   private tree = new RBush<HitBox>(9);
 
-  protected $usableRect = signal<TRect>({ x: 0, y: 0, width: 0, height: 0 });
+  public readonly $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>();
@@ -76,7 +76,7 @@ export class HitTest extends Emitter {
     },
     {
       priority: ESchedulerPriority.LOWEST,
-      frameTimeout: 250,
+      frameTimeout: 100,
     }
   );
 
@@ -91,8 +91,10 @@ export class HitTest extends Emitter {
   }
 
   public clear() {
+    this.processQueue.cancel();
     this.queue.clear();
     this.tree.clear();
+    this.updateUsableRect();
   }
 
   public add(item: HitBox) {
@@ -121,11 +123,15 @@ export class HitTest extends Emitter {
 
   protected updateUsableRect() {
     const rect = this.tree.toJSON();
+    if (rect.length === 0) {
+      this.$usableRect.value = { x: 0, y: 0, width: 0, height: 0 };
+      return;
+    }
     this.$usableRect.value = {
-      x: rect.minX,
-      y: rect.minY,
-      width: rect.maxX - rect.minX,
-      height: rect.maxY - rect.minY,
+      x: Number.isFinite(rect.minX) ? rect.minX : 0,
+      y: Number.isFinite(rect.minY) ? rect.minY : 0,
+      width: Number.isFinite(rect.maxX) ? rect.maxX - rect.minX : 0,
+      height: Number.isFinite(rect.maxY) ? rect.maxY - rect.minY : 0,
     };
   }
 

src/services/Layer.ts

@@ -202,13 +202,12 @@ export class Layer<
     this.init();
   }
 
-  public updateSize(width: number, height: number) {
-    if (this.canvas) {
-      const dpr = this.props.canvas.respectPixelRatio === false ? 1 : this.context.graph.layers.getDPR();
-      this.canvas.width = width * dpr;
-      this.canvas.height = height * dpr;
-    }
-  }
+  protected sizeTouched = false;
+
+  public updateSize = () => {
+    this.sizeTouched = true;
+    this.performRender();
+  };
 
   /**
    * Called after initialization and when the layer is reattached.
@@ -250,6 +249,7 @@ export class Layer<
         this.html.style.transform = `matrix(${camera.scale}, 0, 0, ${camera.scale}, ${camera.x}, ${camera.y})`;
       });
     }
+    this.onSignal(this.props.graph.layers.rootSize, this.updateSize);
   }
 
   protected init() {
@@ -370,7 +370,17 @@ export class Layer<
     ctx.setTransform(scale * dpr, 0, 0, scale * dpr, x * dpr, y * dpr);
   }
 
+  protected updateCanvasSize() {
+    const { width, height, dpr } = this.context.graph.layers.getRootSize();
+    this.canvas.width = width * dpr;
+    this.canvas.height = height * dpr;
+  }
+
   public resetTransform() {
+    if (this.sizeTouched) {
+      this.sizeTouched = false;
+      this.updateCanvasSize();
+    }
     const cameraState = this.props.canvas?.transformByCameraPosition ? this.context.camera.getCameraState() : null;
     // Reset transform and clear the canvas
     this.context.ctx.setTransform(1, 0, 0, 1, 0, 0);

src/services/LayersService.ts

@@ -1,14 +1,16 @@
+import { signal } from "@preact/signals-core";
+
 import { ESchedulerPriority } from "../lib";
 import { Component } from "../lib/Component";
 import { Emitter } from "../utils/Emitter";
-import { debounce } from "../utils/functions";
+import { throttle } from "../utils/functions";
 
 import { Layer } from "./Layer";
 
 export class Layers extends Emitter {
   private attached = false;
 
-  private rootSize: { width: number; height: number } = { width: 0, height: 0 };
+  public readonly rootSize = signal({ width: 0, height: 0, dpr: globalThis.devicePixelRatio || 1 });
 
   protected layers: Set<Layer> = new Set();
 
@@ -17,7 +19,7 @@ export class Layers extends Emitter {
   }
 
   public getDPR() {
-    return devicePixelRatio;
+    return globalThis.devicePixelRatio || 1;
   }
 
   public createLayer<T extends Constructor<Layer> = Constructor<Layer>>(
@@ -30,8 +32,6 @@ export class Layers extends Emitter {
     }) as InstanceType<T>;
     this.layers.add(layer);
     if (this.attached) {
-      const { width, height } = this.rootSize;
-      layer.updateSize(width, height);
       layer.attachLayer(this.$root);
     }
     return layer;
@@ -43,7 +43,7 @@ export class Layers extends Emitter {
   }
 
   public getRootSize() {
-    return this.rootSize;
+    return this.rootSize.value;
   }
 
   public getLayers(): Layer[] {
@@ -97,13 +97,13 @@ export class Layers extends Emitter {
     this.handleRootResize();
   });
 
-  protected handleRootResize = debounce(
+  protected handleRootResize = throttle(
     () => {
       this.updateSize();
     },
     {
-      priority: ESchedulerPriority.HIGH,
-      frameTimeout: 16,
+      priority: ESchedulerPriority.LOWEST,
+      frameInterval: 1,
     }
   );
 
@@ -120,23 +120,14 @@ export class Layers extends Emitter {
   }
 
   public updateSize = () => {
-    if (!this.rootSize) {
-      return;
-    }
-    this.updateRootSize();
-
-    const { width, height } = this.rootSize;
-    this.layers.forEach((layer) => {
-      layer.updateSize(width, height);
-    });
-    this.emit("update-size", this.rootSize);
-  };
-
-  private updateRootSize = () => {
     if (!this.$root) {
       return;
     }
-    this.rootSize.width = this.$root.clientWidth;
-    this.rootSize.height = this.$root.clientHeight;
+    this.rootSize.value = {
+      width: this.$root.clientWidth,
+      height: this.$root.clientHeight,
+      dpr: this.getDPR(),
+    };
+    this.emit("update-size", this.getRootSize());
   };
 }

src/utils/functions/index.ts

@@ -173,9 +173,9 @@ function isTrackpadDetector() {
   let isTrackpadDetected = false;
   let cleanStateTimer = setTimeout(() => {}, 0);
 
-  return (e: WheelEvent) => {
-    const normalizedDeltaY = e.deltaY * devicePixelRatio;
-    const normalizedDeltaX = e.deltaX * devicePixelRatio;
+  return (e: WheelEvent, dpr: number = globalThis.devicePixelRatio || 1) => {
+    const normalizedDeltaY = e.deltaY * dpr;
+    const normalizedDeltaX = e.deltaX * dpr;
     // deltaX in the trackpad scroll usually is not zero.
     if (normalizedDeltaX) {
       isTrackpadDetected = true;