feat: allow to set className for BlockList node. Allow to reach instance of react layer via react ref.

Author: draedful

docs/react/usage.md

@@ -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:

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

@@ -1,5 +1,3 @@
-import { effect } from "@preact/signals-core";
-
 import { Graph } from "../../../../graph";
 import { GraphMouseEventNames, isNativeGraphEventName } from "../../../../graphEvents";
 import { Component } from "../../../../lib/Component";

src/react-components/BlocksList.tsx

@@ -7,7 +7,7 @@ import { Graph, GraphState } from "../graph";
 import { ESchedulerPriority } from "../lib";
 import { ECameraScaleLevel, TCameraState } from "../services/camera/CameraService";
 import { BlockState } from "../store/block/Block";
-import { debounce, throttle } from "../utils/functions";
+import { debounce } from "../utils/functions";
 
 import { useSignal } from "./hooks";
 import { useGraphEvent } from "./hooks/useGraphEvents";

src/react-components/GraphCanvas.tsx

@@ -14,13 +14,21 @@ import { useFn } from "./utils/hooks/useFn";
 export type GraphProps = Pick<Partial<TBlockListProps>, "renderBlock"> &
   Partial<TGraphEventCallbacks> & {
     className?: string;
+    blockListClassName?: string;
     graph: Graph;
+    reactLayerRef?: React.MutableRefObject<ReactLayer | null>;
   };
 
-export function GraphCanvas({ graph, className, renderBlock, ...cbs }: GraphProps) {
+export function GraphCanvas({ graph, className, blockListClassName, renderBlock, reactLayerRef, ...cbs }: GraphProps) {
   const containerRef = useRef<HTMLDivElement>();
 
-  const reactLayer = useLayer(graph, ReactLayer, {});
+  const reactLayer = useLayer(graph, ReactLayer, {
+    blockListClassName,
+  });
+
+  if (reactLayerRef) {
+    reactLayerRef.current = reactLayer;
+  }
 
   useEffect(() => {
     if (containerRef.current) {

src/react-components/hooks/useLayer.test.ts

@@ -127,20 +127,6 @@ describe("useLayer hook", () => {
   });
 
   describe("Props management", () => {
-    it("should call setProps on initial render", () => {
-      // Setup
-      const props = createValidLayerProps();
-
-      // Execute
-      const { result } = renderHook(() => useLayer(graph, TestLayer, props));
-
-      // Get the layer instance
-      const layer = result.current;
-
-      // Verify that setProps was called on the created layer
-      expect(layer.setProps).toHaveBeenCalledWith(props);
-    });
-
     it("should pass initial props to layer via addLayer", () => {
       // Setup
       const initialProps = createValidLayerProps();

src/react-components/hooks/useLayer.ts

@@ -1,4 +1,4 @@
-import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 
 import isEqual from "lodash/isEqual";