fix: fix for react strict mode (#107)

* fix: fix using graph with React StrictMode
* feat: allow to set className for BlockList node. Allow to reach instance of react layer via react ref.
* refactor: update Layer and LayersService for better performance and consistency

Author: draedful

.storybook/preview.ts

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

.storybook/preview.tsx

@@ -34,9 +34,20 @@ import { GraphCanvas } from "@gravity-ui/graph/react";
   graph={graph}
   renderBlock={renderBlock}
   className="my-graph"
+  blockListClassName="custom-blocks-container"
+  reactLayerRef={reactLayerRef}
 />
 ```
 
+#### Props
+
+- **`graph`** (required): The Graph instance to render
+- **`renderBlock`** (optional): Function to render custom block components
+- **`className`** (optional): CSS class for the main container
+- **`blockListClassName`** (optional): CSS class applied to the blocks container layer
+- **`reactLayerRef`** (optional): Ref to access the ReactLayer instance directly
+- **Event callbacks**: All graph event callbacks can be passed as props
+
 ### GraphBlock
 
 The `GraphBlock` component is a crucial wrapper that handles the complex interaction between HTML elements and the canvas layer. It's responsible for:

docs/react/usage.md

@@ -27,8 +27,9 @@ export class Blocks extends Component {
   }
 
   protected rerender() {
-    this.performRender();
+    this.shouldRenderChildren = true;
     this.shouldUpdateChildren = true;
+    this.performRender();
   }
 
   protected subscribe() {

src/components/canvas/blocks/Blocks.ts

@@ -104,19 +104,6 @@ export class BlockGroups<P extends BlockGroupsProps = BlockGroupsProps> extends
     this.performRender = this.performRender.bind(this);
   }
 
-  /**
-   * Called after initialization and when the layer is reattached.
-   * This is where we set up event subscriptions to ensure they work properly
-   * after the layer is unmounted and reattached.
-   */
-  protected afterInit(): void {
-    // Register event listener with the onGraphEvent method for automatic cleanup when unmounted
-    this.onGraphEvent("camera-change", this.performRender);
-
-    // Call parent afterInit to ensure proper initialization
-    super.afterInit();
-  }
-
   public getParent(): CoreComponent | undefined {
     /*
      * Override parent to delegate click events to camera.

src/components/canvas/groups/BlockGroups.ts

@@ -104,6 +104,12 @@ export class GraphLayer extends Layer<TGraphLayerProps, TGraphLayerContext> {
 
     // Subscribe to graph events here instead of in the constructor
     this.onGraphEvent("camera-change", this.performRender);
+    this.context.graph.rootStore.blocksList.$blocks.subscribe(() => {
+      this.performRender();
+    });
+    this.context.graph.rootStore.connectionsList.$connections.subscribe(() => {
+      this.performRender();
+    });
     super.afterInit();
   }
 

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

@@ -115,13 +115,13 @@ export class Graph {
       this.setConstants(graphConstants);
     }
 
-    this.layers.on("update-size", (event: IRect) => {
-      this.cameraService.set(event);
-    });
-
     this.setupGraph(config);
   }
 
+  protected onUpdateSize = (event: IRect) => {
+    this.cameraService.set(event);
+  };
+
   public getGraphLayer() {
     return this.graphLayer;
   }
@@ -324,6 +324,7 @@ export class Graph {
     if (this.state === GraphState.READY) {
       return;
     }
+    rootEl[Symbol.for("graph")] = this;
     this.layers.attach(rootEl);
 
     const { width: rootWidth, height: rootHeight } = this.layers.getRootSize();
@@ -349,6 +350,7 @@ export class Graph {
     if (rootEl) {
       this.attach(rootEl);
     }
+    this.layers.on("update-size", this.onUpdateSize);
     this.layers.start();
     this.scheduler.start();
     this.setGraphState(GraphState.READY);
@@ -395,9 +397,10 @@ export class Graph {
 
   public unmount() {
     this.detach();
+    this.layers.off("update-size", this.onUpdateSize);
     this.setGraphState(GraphState.INIT);
     this.hitTest.clear();
-    this.layers.destroy();
+    this.layers.unmount();
     clearTextCache();
     this.rootStore.reset();
     this.scheduler.stop();

src/graph.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/graphConfig.ts

@@ -19,10 +19,6 @@ import "./devtools-layer.css"; // Import the CSS file after type imports
  */
 export class DevToolsLayer extends Layer<TDevToolsLayerProps, LayerContext, TDevToolsLayerState> {
   public state = INITIAL_DEVTOOLS_LAYER_STATE;
-  private mouseMoveListener = this.handleMouseMove.bind(this);
-  private mouseEnterListener = this.handleMouseEnter.bind(this);
-  private mouseLeaveListener = this.handleMouseLeave.bind(this);
-  protected cameraSubscription: (() => void) | null = null;
 
   // HTML elements for ruler backgrounds
   private horizontalRulerBgEl: HTMLDivElement | null = null;
@@ -77,22 +73,27 @@ export class DevToolsLayer extends Layer<TDevToolsLayerProps, LayerContext, TDev
   }
 
   protected afterInit(): void {
-    super.afterInit();
-
-    if (this.context.graph) {
-      this.cameraSubscription = this.context.graph.on("camera-change", () => this.performRender());
-    } else {
-      console.error("DevToolsLayer: Graph instance not found in context during afterInit.");
-    }
-
-    const graphRoot = this.props.graph?.layers?.$root;
-    if (graphRoot) {
-      graphRoot.addEventListener("mousemove", this.mouseMoveListener);
-      graphRoot.addEventListener("mouseenter", this.mouseEnterListener);
-      graphRoot.addEventListener("mouseleave", this.mouseLeaveListener);
-    } else {
-      console.error("DevToolsLayer: Graph root layer element ($root) not found.");
-    }
+    this.onGraphEvent("camera-change", () => this.performRender());
+    this.onRootEvent(
+      "mousemove",
+      (event: MouseEvent): void => {
+        const canvas = this.context.graphCanvas;
+        if (!canvas) return;
+        const rect = canvas.getBoundingClientRect();
+        this.setState({
+          mouseX: event.clientX - rect.left,
+          mouseY: event.clientY - rect.top,
+          isMouseInside: true,
+        });
+      },
+      { capture: true }
+    );
+    this.onRootEvent("mouseenter", (): void => {
+      this.setState({ isMouseInside: true });
+    });
+    this.onRootEvent("mouseleave", (): void => {
+      this.setState({ isMouseInside: false, mouseX: null, mouseY: null });
+    });
 
     // Create HTML elements for ruler backgrounds if showRuler is initially true
     const htmlContainer = this.getHTML();
@@ -123,61 +124,9 @@ export class DevToolsLayer extends Layer<TDevToolsLayerProps, LayerContext, TDev
       htmlContainer.appendChild(this.verticalRulerBgEl);
     }
 
-    this.performRender(); // Initial render for positioning divs and canvas ticks/text
-  }
-
-  protected unmountLayer(): void {
-    this.cameraSubscription?.();
-    this.cameraSubscription = null;
-
-    const graphRoot = this.props.graph?.layers?.$root;
-    if (graphRoot) {
-      graphRoot.removeEventListener("mousemove", this.mouseMoveListener);
-      graphRoot.removeEventListener("mouseenter", this.mouseEnterListener);
-      graphRoot.removeEventListener("mouseleave", this.mouseLeaveListener);
-    }
-
-    // Remove ruler background elements
-    this.horizontalRulerBgEl?.remove();
-    this.verticalRulerBgEl?.remove();
-    this.horizontalRulerBgEl = null;
-    this.verticalRulerBgEl = null;
-
-    super.unmountLayer();
-  }
-
-  // --- Event Handlers ---
-
-  private handleMouseMove(event: MouseEvent): void {
-    const canvas = this.context.graphCanvas;
-    if (!canvas) return;
-    const rect = canvas.getBoundingClientRect();
-    this.setState({
-      mouseX: event.clientX - rect.left,
-      mouseY: event.clientY - rect.top,
-      isMouseInside: true,
-    });
-  }
-
-  private handleMouseEnter(): void {
-    this.setState({ isMouseInside: true });
-  }
-
-  private handleMouseLeave(): void {
-    this.setState({ isMouseInside: false, mouseX: null, mouseY: null });
-  }
-
-  // --- State Update ---
-
-  protected stateChanged(): void {
-    // Only re-render canvas if crosshair is visible and mouse position changed
-    if (this.props.showCrosshair) {
-      this.performRender();
-    }
+    super.afterInit();
   }
 
-  // --- Rendering Logic ---
-
   protected render(): void {
     if (!this.context.ctx || !this.context.graphCanvas) {
       return;

src/plugins/devtools/DevToolsLayer.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();
   }