fix(Layer): fix Layer lifecycle (#112)

feat(Graph): Add method to get elements in viewport

Author: draedful

src/components/canvas/groups/BlockGroups.ts

@@ -48,24 +48,23 @@ export class BlockGroups<P extends BlockGroupsProps = BlockGroupsProps> extends
         return groupingFn(blocks);
       });
 
-      constructor(props: BlockGroupsProps & { updateBlocksOnDrag?: boolean }) {
-        super(props);
-        this.unsubscribe.push(
-          computed(() => {
+      protected afterInit(): void {
+        this.onSignal(
+          computed<TGroup[]>(() => {
             const groupedBlocks = this.$groupsBlocksMap.value;
             return Object.entries(groupedBlocks).map(([key, blocks]) =>
               mapToGroups(key, { blocks, rect: getUsableRectByBlockIds(blocks) })
             );
-          }).subscribe((groups: TGroup[]) => {
+          }),
+          (groups: TGroup[]) => {
             this.setGroups(groups);
-          })
+          }
         );
+        super.afterInit();
       }
     };
   }
 
-  private unsubscribe: (() => void)[] = [];
-
   protected $groupsBlocksMap = new Signal<Record<string, BlockState[]>>({});
 
   protected $groupsSource = this.props.graph.rootStore.groupsList.$groups;
@@ -76,6 +75,7 @@ export class BlockGroups<P extends BlockGroupsProps = BlockGroupsProps> extends
         zIndex: 1,
         classNames: ["no-user-select"],
         transformByCameraPosition: true,
+        ...props.canvas,
       },
       ...props,
     });
@@ -92,16 +92,15 @@ export class BlockGroups<P extends BlockGroupsProps = BlockGroupsProps> extends
       graph: this.props.graph,
       ownerDocument: this.props.root!,
     });
+  }
 
-    this.unsubscribe.push(
-      this.$groupsSource.subscribe((groups) => {
-        this.shouldUpdateChildren = true;
-        this.shouldRenderChildren = true;
-        this.setState({ groups });
-      })
-    );
-
-    this.performRender = this.performRender.bind(this);
+  protected afterInit(): void {
+    this.onSignal(this.$groupsSource, (groups) => {
+      this.shouldUpdateChildren = true;
+      this.shouldRenderChildren = true;
+      this.setState({ groups });
+    });
+    super.afterInit();
   }
 
   public getParent(): CoreComponent | undefined {
@@ -136,11 +135,6 @@ export class BlockGroups<P extends BlockGroupsProps = BlockGroupsProps> extends
     super.unmountLayer();
   }
 
-  protected unmount(): void {
-    this.unsubscribe.forEach((unsubscribe) => unsubscribe());
-    super.unmount();
-  }
-
   protected getGroupComponent(group: GroupState) {
     return group.$state.value.component || this.props.groupComponent || Group;
   }
@@ -157,8 +151,4 @@ export class BlockGroups<P extends BlockGroupsProps = BlockGroupsProps> extends
       );
     });
   }
-
-  public render() {
-    this.resetTransform();
-  }
 }

src/components/canvas/layers/belowLayer/BelowLayer.ts

@@ -26,26 +26,22 @@ export class BelowLayer extends Layer<TBelowLayerProps, TBelowLayerContext> {
         zIndex: 1,
         classNames: ["no-pointer-events"],
         transformByCameraPosition: true,
+        ...props.canvas,
       },
       ...props,
     });
+    this.background = this.props.graph.rootStore.settings.$background.value || (Background as typeof Component);
+  }
 
+  protected afterInit(): void {
     this.onSignal(this.props.graph.rootStore.settings.$background, () => {
       this.background = this.props.graph.rootStore.settings.$background.value || (Background as typeof Component);
       this.shouldUpdateChildren = true;
       this.performRender();
     });
-  }
-
-  protected afterInit(): void {
-    this.onGraphEvent("camera-change", this.performRender);
     super.afterInit();
   }
 
-  public render() {
-    this.resetTransform();
-  }
-
   public updateChildren(): ComponentDescriptor<CoreComponentProps, CoreComponentContext>[] {
     return [this.background.create({})];
   }

src/components/canvas/layers/connectionLayer/ConnectionLayer.ts

@@ -132,6 +132,7 @@ export class ConnectionLayer extends Layer<
       canvas: {
         zIndex: 4,
         classNames: ["no-pointer-events"],
+        ...props.canvas,
       },
       ...props,
     });
@@ -148,9 +149,6 @@ export class ConnectionLayer extends Layer<
 
     this.enabled = Boolean(this.props.graph.rootStore.settings.getConfigFlag("canCreateNewConnections"));
 
-    this.eventAborter = new AbortController();
-    this.performRender = this.performRender.bind(this);
-
     this.onSignal(this.props.graph.rootStore.settings.$settings, (value) => {
       this.enabled = Boolean(value.canCreateNewConnections);
     });
@@ -163,7 +161,6 @@ export class ConnectionLayer extends Layer<
    */
   protected afterInit(): void {
     // Register event listeners with the graphOn wrapper method for automatic cleanup when unmounted
-    this.onGraphEvent("camera-change", this.performRender);
     this.onGraphEvent("mousedown", this.handleMouseDown, {
       capture: true,
     });

src/components/canvas/layers/newBlockLayer/NewBlockLayer.ts

@@ -66,6 +66,7 @@ export class NewBlockLayer extends Layer<
       canvas: {
         zIndex: 4,
         classNames: ["no-pointer-events"],
+        ...props.canvas,
       },
       ...props,
     });
@@ -79,9 +80,6 @@ export class NewBlockLayer extends Layer<
       colors: this.props.graph.graphColors,
       graph: this.props.graph,
     });
-
-    this.eventAborter = new AbortController();
-    this.performRender = this.performRender.bind(this);
   }
 
   /**
@@ -90,14 +88,11 @@ export class NewBlockLayer extends Layer<
    * after the layer is unmounted and reattached.
    */
   protected afterInit(): void {
+    super.afterInit();
     // Register event listeners with the graphOn wrapper method for automatic cleanup when unmounted
-    this.onGraphEvent("camera-change", this.performRender);
     this.onGraphEvent("mousedown", this.handleMouseDown, {
       capture: true,
     });
-
-    // Call parent afterInit to ensure proper initialization
-    super.afterInit();
   }
 
   protected handleMouseDown = (nativeEvent: GraphMouseEvent) => {
@@ -181,14 +176,15 @@ export class NewBlockLayer extends Layer<
     this.initialPoint = this.context.graph.getPointInCameraSpace(event);
 
     this.context.graph.executеDefaultEventAction("block-add-start-from-shadow", { blocks }, () => {
+      const scale = this.context.camera.getCameraScale();
       const xy = getXY(this.context.graphCanvas, event);
       const mouseX = xy[0];
       const mouseY = xy[1];
 
       // Calculate the screen position of the clicked block
       const cameraRect = this.context.camera.getCameraRect();
-      const clickedBlockX = block.connectedState.x * this.context.camera.getCameraScale() + cameraRect.x;
-      const clickedBlockY = block.connectedState.y * this.context.camera.getCameraScale() + cameraRect.y;
+      const clickedBlockX = block.connectedState.x * scale + cameraRect.x;
+      const clickedBlockY = block.connectedState.y * scale + cameraRect.y;
 
       // Calculate the click position relative to the block's top-left corner
       const clickOffsetX = mouseX - clickedBlockX;
@@ -197,12 +193,12 @@ export class NewBlockLayer extends Layer<
       // Create ghost blocks for each block being duplicated
       this.blockStates = this.copyBlocks.map((blockState) => {
         // Calculate screen position for each block
-        const blockScreenX = blockState.x * this.context.camera.getCameraScale() + cameraRect.x;
-        const blockScreenY = blockState.y * this.context.camera.getCameraScale() + cameraRect.y;
+        const blockScreenX = blockState.x * scale + cameraRect.x;
+        const blockScreenY = blockState.y * scale + cameraRect.y;
 
         // Use block's own width and height values
-        const blockWidth = blockState.width * this.context.camera.getCameraScale();
-        const blockHeight = blockState.height * this.context.camera.getCameraScale();
+        const blockWidth = blockState.width * scale;
+        const blockHeight = blockState.height * scale;
 
         return {
           width: blockWidth,

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

@@ -31,6 +31,7 @@ export class SelectionLayer extends Layer<
       canvas: {
         zIndex: 4,
         classNames: ["no-pointer-events"],
+        ...props.canvas,
       },
       ...props,
     });
@@ -39,8 +40,6 @@ export class SelectionLayer extends Layer<
       canvas: this.getCanvas(),
       ctx: this.getCanvas().getContext("2d"),
     });
-
-    this.performRender = this.performRender.bind(this);
   }
 
   /**
@@ -50,7 +49,6 @@ export class SelectionLayer extends Layer<
    */
   protected afterInit(): void {
     // Set up event handlers here instead of in constructor
-    this.onGraphEvent("camera-change", this.performRender);
     this.onGraphEvent("mousedown", this.handleMouseDown, {
       capture: true,
     });

src/graph.ts

@@ -177,6 +177,23 @@ export class Graph {
     return this.getElementsOverPoint(point, filter)?.[0] as InstanceType<T> | undefined;
   }
 
+  public getViewportRect(): TRect {
+    const CAMERA_VIEWPORT_TRESHOLD = this.graphConstants.system.CAMERA_VIEWPORT_TRESHOLD;
+    const cameraSize = this.cameraService.getCameraState();
+
+    const x = -cameraSize.relativeX - cameraSize.relativeWidth * CAMERA_VIEWPORT_TRESHOLD;
+    const y = -cameraSize.relativeY - cameraSize.relativeHeight * CAMERA_VIEWPORT_TRESHOLD;
+    const width = -cameraSize.relativeX + cameraSize.relativeWidth * (1 + CAMERA_VIEWPORT_TRESHOLD) - x;
+    const height = -cameraSize.relativeY + cameraSize.relativeHeight * (1 + CAMERA_VIEWPORT_TRESHOLD) - y;
+
+    return { x, y, width, height };
+  }
+
+  public getElementsInViewport<T extends Constructor<GraphComponent>>(filter?: T[]): InstanceType<T>[] {
+    const viewportRect = this.getViewportRect();
+    return this.getElementsOverRect(viewportRect, filter);
+  }
+
   public getElementsOverRect<T extends Constructor<GraphComponent>>(rect: TRect, filter?: T[]): InstanceType<T>[] {
     const items = this.hitTest.testBox({
       minX: rect.x,

src/react-components/BlocksList.tsx

@@ -49,25 +49,8 @@ export const BlocksList = memo(function BlocksList({ renderBlock, graphObject }:
       setBlockStates([]);
       return;
     }
-    const CAMERA_VIEWPORT_TRESHOLD = graphObject.graphConstants.system.CAMERA_VIEWPORT_TRESHOLD;
-    const cameraSize = graphObject.cameraService.getCameraState();
-
-    const x = -cameraSize.relativeX - cameraSize.relativeWidth * CAMERA_VIEWPORT_TRESHOLD;
-    const y = -cameraSize.relativeY - cameraSize.relativeHeight * CAMERA_VIEWPORT_TRESHOLD;
-    const width = -cameraSize.relativeX + cameraSize.relativeWidth * (1 + CAMERA_VIEWPORT_TRESHOLD) - x;
-    const height = -cameraSize.relativeY + cameraSize.relativeHeight * (1 + CAMERA_VIEWPORT_TRESHOLD) - y;
-
-    const statesInRect = graphObject
-      .getElementsOverRect(
-        {
-          x,
-          y,
-          width,
-          height,
-        },
-        [CanvasBlock]
-      )
-      .map((component: CanvasBlock) => component.connectedState);
+    const statesInRect = graphObject.getElementsInViewport([CanvasBlock]).map((component) => component.connectedState);
+
     setBlockStates((blocks) => {
       if (
         !isEqual(
@@ -110,14 +93,20 @@ export const BlocksList = memo(function BlocksList({ renderBlock, graphObject }:
 
   useEffect(() => {
     return () => {
-      // throttleUpdate.cancel();
       scheduleListUpdate.cancel();
     };
   }, []);
 
   // init list
   useEffect(() => {
-    graphObject.hitTest.waitUsableRectUpdate(updateBlockList);
+    graphObject.hitTest.waitUsableRectUpdate(() => {
+      if (graphObject.cameraService.getCameraBlockScaleLevel() !== ECameraScaleLevel.Detailed) {
+        setRenderAllowed(false);
+        return;
+      }
+      setRenderAllowed(true);
+      scheduleListUpdate.flush();
+    });
     return graphObject.hitTest.onUsableRectUpdate(updateBlockList);
   }, [graphObject.hitTest, isRenderAllowed, graphState]);