fix: some improvements

src/react-components/Anchor.css

@@ -8,7 +8,6 @@
   width: var(--graph-block-anchor-width, 16px);
   height: var(--graph-block-anchor-height, 16px);
   cursor: pointer;
-  will-change: transform;
 }
 
 .graph-block-anchor.graph-block-anchor-selected {

src/react-components/Block.css

@@ -6,17 +6,19 @@
   box-sizing: content-box;
   width: var(--graph-block-geometry-width);
   height: var(--graph-block-geometry-height);
-
-  will-change: transform;
+
   contain: layout size;
   isolation: isolate;
-
   /* Creates a composite layer */
-  transform-style: preserve-3d;
+  transform-style: flat;
   pointer-events: all;
   transform: translate3d(var(--graph-block-geometry-x, 0px), var(--graph-block-geometry-y, 0px), 0);
 }
 
+.graph-block-container-moving {
+  /*will-change: transform;*/
+}
+
 .graph-block-container-non-interactive {
   pointer-events: none;
 }
@@ -29,11 +31,11 @@
   box-sizing: border-box;
 
   background: var(--graph-block-bg);
-  border: 1px solid var(--graph-block-border)
+  border: 1px solid var(--graph-block-border);
 }
 
 .graph-block-wrapper.selected {
-  border-color: var(--graph-block-border-selected)
+  border-color: var(--graph-block-border-selected);
 }
 
 .graph-block-wrapper.selected:hover {

src/react-components/Block.tsx

@@ -1,11 +1,12 @@
-import React, { useEffect, useMemo, useRef, useState } from "react";
+import React, { ForwardedRef, forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 
 import { noop } from "lodash";
 
 import { TBlock } from "../components/canvas/blocks/Block";
 import { Graph } from "../graph";
+import { ESchedulerPriority } from "../lib/Scheduler";
 
-import { useComputedSignal, useSignalEffect } from "./hooks";
+import { useComputedSignal, useSchedulerDebounce, useSignalEffect } from "./hooks";
 import { useBlockState } from "./hooks/useBlockState";
 import { cn } from "./utils/cn";
 
@@ -84,19 +85,22 @@
  * ```
  *
  */
-export const GraphBlock = <T extends TBlock>({
-  graph,
-  block,
-  children,
-  className,
-  containerClassName,
-  autoHideCanvas = true,
-  canvasVisible,
-}: TGraphBlockProps<T>) => {
+function GraphBlockInner<T extends TBlock>(
+  { graph, block, children, className, containerClassName, autoHideCanvas = true, canvasVisible }: TGraphBlockProps<T>,
+  ref: ForwardedRef<HTMLDivElement>
+) {
   const containerRef = useRef<HTMLDivElement>(null);
+  useImperativeHandle(ref, () => containerRef.current!);
   const lastStateRef = useRef({ x: 0, y: 0, width: 0, height: 0, zIndex: 0 });
   const state = useBlockState(graph, block);
 
+  const stopMoving = useSchedulerDebounce(
+    (container: HTMLDivElement) => {
+      container.classList.remove("graph-block-container-moving");
+    },
+    { priority: ESchedulerPriority.LOW, frameTimeout: 150 }
+  );
+
   const viewState = useComputedSignal(() => state?.$viewComponent.value, [state]);
   const [interactive, setInteractive] = useState(viewState?.isInteractive() ?? false);
 
@@ -124,7 +128,7 @@
     const geometry = state?.$geometry.value;
     const container = containerRef.current;
     const lastState = lastStateRef.current;
-    if (!container || !geometry) {
+    if (!container || !geometry || !viewState) {
       return;
     }
 
@@ -135,6 +139,10 @@
       container.style.setProperty("--graph-block-geometry-y", `${geometry.y}px`);
       lastState.x = geometry.x;
       lastState.y = geometry.y;
+      if (!container.classList.contains("graph-block-container-moving")) {
+        container.classList.add("graph-block-container-moving");
+      }
+      stopMoving(container);
     }
 
     const hasSizeChange = lastState.width !== geometry.width || lastState.height !== geometry.height;
@@ -146,7 +154,6 @@
     }
 
     const { zIndex, order } = viewState.$viewState.value;
-
     const newZIndex = (zIndex || 0) + (order || 0);
 
     if (lastState.zIndex !== newZIndex) {
@@ -185,4 +192,8 @@
       <div className={wrapperClassNames}>{children}</div>
     </div>
   );
-};
+}
+
+export const GraphBlock = forwardRef(GraphBlockInner) as <T extends TBlock>(
+  props: TGraphBlockProps<T> & { ref?: React.Ref<HTMLDivElement> }
+) => React.ReactElement | null;

src/react-components/hooks/schedulerHooks.ts

@@ -4,7 +4,6 @@ import { debounce } from "../../utils/functions";
 import { TDebounceOptions, TScheduleOptions, schedule, throttle } from "../../utils/utils/schedule";
 import { useFn } from "../utils/hooks/useFn";
 
-type TSchedulerDebounceFn = (...args: unknown[]) => void;
 /**
  * Hook to create a debounced function that delays execution until both frame and time conditions are met.
  *
@@ -31,7 +30,7 @@ type TSchedulerDebounceFn = (...args: unknown[]) => void;
  * debouncedSearch.cancel();
  * ```
  */
-export function useSchedulerDebounce<T extends TSchedulerDebounceFn>(fn: T, options: TDebounceOptions) {
+export function useSchedulerDebounce<T extends (...args: Parameters<T>) => void>(fn: T, options: TDebounceOptions) {
   const handle = useFn(fn);
 
   /* Use memo to avoid re-creation of the debounce options on each render */
@@ -52,7 +51,6 @@ export function useSchedulerDebounce<T extends TSchedulerDebounceFn>(fn: T, opti
   return debouncedFn;
 }
 
-type TSchedulerThrottleFn = (...args: unknown[]) => void;
 /**
  * Hook to create a throttled function that limits execution frequency.
  *
@@ -78,7 +76,7 @@ type TSchedulerThrottleFn = (...args: unknown[]) => void;
  * );
  * ```
  */
-export function useSchedulerThrottle<T extends TSchedulerThrottleFn>(fn: T, options: TDebounceOptions) {
+export function useSchedulerThrottle<T extends (...args: Parameters<T>) => void>(fn: T, options: TDebounceOptions) {
   const handle = useFn(fn);
 
   /* Use memo to avoid re-creation of the throttle options on each render */

src/react-components/hooks/useBlockState.ts

@@ -9,6 +9,10 @@ export function useBlockState<T extends TBlock>(graph: Graph, block: T | T["id"]
   }, [graph, block]);
 }
 
+export function useSyncBlockState<T extends TBlock>(graph: Graph, block: T | T["id"]) {
+  return graph.rootStore.blocksList.$blocksMap.value.get(isTBlock(block) ? block.id : block);
+}
+
 export function useBlockViewState<T extends TBlock>(graph: Graph, block: T | T["id"]) {
   const blockState = useBlockState(graph, block);
   return blockState?.getViewComponent();

src/services/Layer.css

@@ -11,7 +11,7 @@
 canvas.layer {
   outline: none;
   filter: none;
-  border:none;
+  border: none;
 }
 
 .no-user-select {
@@ -34,9 +34,12 @@ canvas.layer {
   isolation: isolate;
   transform-origin: 0 0;
   transform-style: preserve-3d;
-  will-change: transform;
+}
+
+.layer-with-camera-moving {
+  /*will-change: transform;*/
 }
 
 .layer-hidden {
   visibility: hidden;
-}
+}

src/services/Layer.ts

@@ -3,6 +3,8 @@ import { TGraphColors, TGraphConstants } from "../graphConfig";
 import { GraphEventsDefinitions } from "../graphEvents";
 import { CoreComponent } from "../lib";
 import { Component, TComponentState } from "../lib/Component";
+import { ESchedulerPriority } from "../lib/Scheduler";
+import { debounce } from "../utils/utils/schedule";
 
 import { ICamera, TCameraState } from "./camera/CameraService";
 
@@ -328,9 +330,24 @@ export class Layer<
     this.updateSize();
   }
 
+  private readonly stopCameraMoving = debounce(
+    () => {
+      this.html?.classList.remove("layer-with-camera-moving");
+      this.moving = false;
+    },
+    { priority: ESchedulerPriority.LOW, frameTimeout: 150 }
+  );
+
+  protected moving = false;
+
   protected scheduleCameraChange(camera: TCameraState) {
     if (this.html && this.htmlActive) {
+      if (!this.moving) {
+        this.html.classList.add("layer-with-camera-moving");
+        this.moving = true;
+      }
       this.html.style.transform = `matrix(${camera.scale}, 0, 0, ${camera.scale}, ${camera.x}, ${camera.y})`;
+      this.stopCameraMoving();
     }
   }
 
@@ -413,6 +430,7 @@ export class Layer<
   }
 
   protected unmount(): void {
+    this.stopCameraMoving.cancel();
     this.unmountLayer();
     super.unmount();
   }

src/utils/utils/schedule.ts

@@ -53,7 +53,7 @@ export type TDebounceOptions = {
  * @param options.frameTimeout - Minimum time in milliseconds to wait before execution (default: 0)
  * @returns A debounced version of the function with cancel and flush methods
  */
-export const debounce = <T extends (...args: unknown[]) => void>(
+export const debounce = <T extends (...args: Parameters<T>) => void>(
   fn: T,
   { priority = ESchedulerPriority.MEDIUM, frameInterval = 1, frameTimeout = 0 }: TDebounceOptions = {}
 ): T & { cancel: () => void; flush: () => void; isScheduled: () => boolean } => {
@@ -85,7 +85,7 @@ export const debounce = <T extends (...args: unknown[]) => void>(
         removeScheduler = null;
         const args = latestArgs;
         latestArgs = undefined;
-        fn(...(args ?? []));
+        fn(...((args ?? []) as Parameters<T>));
         if (currentRemoveScheduler) {
           currentRemoveScheduler();
         }
@@ -145,7 +145,7 @@ export const debounce = <T extends (...args: unknown[]) => void>(
  * @param options.frameTimeout - Minimum time in milliseconds between executions (default: 0)
  * @returns A throttled version of the function with cancel and flush methods
  */
-export const throttle = <T extends (...args: unknown[]) => void>(
+export const throttle = <T extends (...args: Parameters<T>) => void>(
   fn: T,
   { priority = ESchedulerPriority.MEDIUM, frameInterval = 1, frameTimeout = 0 }: TDebounceOptions = {}
 ): T & { cancel: () => void; flush: () => void } => {
@@ -194,7 +194,7 @@ export const throttle = <T extends (...args: unknown[]) => void>(
 
   const throttledFn = ((...args: Parameters<T>) => {
     if (canExecute) {
-      fn(...(args ?? []));
+      fn(...args);
       canExecute = false;
       frameCounter = 0;
       startTime = getNow(); // Start timing from this execution