chore: cleanup, check shoudRender in GraphComponent

gravity-ui · Dec 3, 2024 · c38b81d · c38b81d
1 parent e8e0f25
commit c38b81d
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 95 deletions.
diff --git a/src/components/canvas/anchors/index.ts b/src/components/canvas/anchors/index.ts
@@ -80,12 +80,9 @@ export class Anchor extends GraphComponent<TAnchorProps, TAnchorState> {
     this.connectedState.setSelection(!this.state.selected);
   }
 
-  public willIterate() {
-    super.willIterate();
-
-    const { x, y, width, height } = this.hitBox.getRect();
-
-    this.shouldRender = width && height ? this.context.camera.isRectVisible(x, y, width, height) : true;
+  protected isVisible() {
+    const params = this.getHitBox();
+    return params ? this.context.camera.isRectVisible(...params) : true;
   }
 
   public didIterate(): void {

diff --git a/src/components/canvas/blocks/Block.ts b/src/components/canvas/blocks/Block.ts
@@ -380,14 +380,6 @@ export class Block<
     });
   }
 
-  public willIterate() {
-    super.willIterate();
-
-    this.shouldRender =
-      !this.hidden &&
-      this.context.camera.isRectVisible(this.state.x, this.state.y, this.state.width, this.state.height);
-  }
-
   protected willRender() {
     super.willRender();
 

diff --git a/src/components/canvas/connections/BaseConnection.ts b/src/components/canvas/connections/BaseConnection.ts
@@ -69,14 +69,6 @@ export class BaseConnection<
     this.listenEvents(["mouseenter", 'mouseleave']);
   }
 
-  protected willIterate() {
-    super.willIterate();
-
-    this.shouldRender = this.context.camera.isLineVisible(
-      ...this.bBox
-    );
-  }
-
   protected override handleEvent(event) {
     event.stopPropagation();
     super.handleEvent(event);

diff --git a/src/components/canvas/graphComponent/index.tsx b/src/components/canvas/graphComponent/index.tsx
@@ -40,6 +40,18 @@ export class GraphComponent<
     this.hitBox.update(minX, minY, maxX, maxY, force);
   }
 
+  protected willIterate(): void {
+    super.willIterate();
+    if(!this.firstIterate) {
+      this.shouldRender = this.isVisible();
+    }
+
+  }
+
+  public isVisible() {
+    return this.context.camera.isRectVisible(...this.getHitBox());
+  }
+
   public getHitBox() {
     return this.hitBox.getRect();
   }

diff --git a/src/components/canvas/layers/graphLayer/helpers.ts b/src/components/canvas/layers/graphLayer/helpers.ts
@@ -5,6 +5,10 @@ export class DrawBelow extends GraphComponent {
 
   protected shouldRenderChildren = false;
 
+  public isVisible(): boolean {
+    return true;
+  }
+
   protected render() {
     this.context.ctx.globalCompositeOperation = "destination-over";
     return;
@@ -16,6 +20,10 @@ export class DrawOver extends GraphComponent {
 
   protected shouldRenderChildren = false;
 
+  public isVisible(): boolean {
+    return true;
+  }
+
   protected render() {
     this.context.ctx.globalCompositeOperation = "source-over";
     return;

diff --git a/src/mixins/withHitTest.ts b/src/mixins/withHitTest.ts
diff --git a/src/services/HitTest.ts b/src/services/HitTest.ts
@@ -2,9 +2,16 @@ import debounce from "lodash/debounce";
 import RBush from "rbush";
 
 import { Component } from "../lib/Component";
-import { IWithHitTest } from "../mixins/withHitTest";
 import { Emitter } from "../utils/Emitter";
-import { IPoint, TRect } from "../utils/types/shapes";
+import { IPoint } from "../utils/types/shapes";
+
+export interface IWithHitTest {
+  hitBox: IHitBox;
+  zIndex: number;
+  setHitBox(minX: number, minY: number, maxX: number, maxY: number, force?: boolean): void;
+  onHitBox(shape: HitBoxData): boolean;
+  removeHitBox(): void;
+}
 
 export type HitBoxData = {
   minX: number;
@@ -22,7 +29,7 @@ export type HitBoxData = {
 export interface IHitBox extends HitBoxData {
   update(minX: number, minY: number, maxX: number, maxY: number): void;
   destroy(): void;
-  getRect(): TRect;
+  getRect(): [number, number, number, number];
 }
 
 export class HitTest extends Emitter {
@@ -120,6 +127,8 @@ export class HitBox implements IHitBox {
 
   public y: number;
 
+  private rect: [number, number, number, number];
+
   constructor(
     public item: { zIndex: number } & Component & IWithHitTest,
     protected hitTest: HitTest
@@ -136,16 +145,17 @@ export class HitBox implements IHitBox {
     this.minY = minY;
     this.maxX = maxX;
     this.maxY = maxY;
+    this.rect = [
+      this.minX,
+      this.minY,
+      this.maxX - this.minX,
+      this.maxY - this.minY,
+    ];
     this.hitTest.add(this, Boolean(force));
   };
 
-  public getRect(): TRect {
-    return {
-      x: this.minX,
-      y: this.minY,
-      width: this.maxX - this.minX,
-      height: this.maxY - this.minY,
-    };
+  public getRect(): [number, number, number, number]  {
+    return this.rect;
   }
 
   public remove() {