feat: split Path2DGroup to chunks

feat: add isPathVisible method to BlockConnection and ConnectionArrow, improve path visibility handling in BatchPath2D

Author: draedful

src/components/canvas/GraphComponent/index.tsx

@@ -56,10 +56,10 @@ export class GraphComponent<
       event.stopPropagation();
       dragListener(this.context.ownerDocument)
         .on(EVENTS.DRAG_START, (event: MouseEvent) => {
-          this.context.graph.getGraphLayer().captureEvents(this);
           if (onDragStart?.(event) === false) {
             return;
           }
+          this.context.graph.getGraphLayer().captureEvents(this);
           const xy = getXY(this.context.canvas, event);
           startDragCoords = this.context.camera.applyToPoint(xy[0], xy[1]);
         })

src/components/canvas/connections/BatchPath2D/index.tsx

@@ -1,3 +1,5 @@
+import debounce from "lodash/debounce";
+
 import { cache } from "../../../../lib/utils";
 
 export type Path2DRenderStyleResult =
@@ -9,40 +11,56 @@ export interface Path2DRenderInstance {
   getPath(): Path2D | undefined | null;
   style(ctx: CanvasRenderingContext2D): Path2DRenderStyleResult | undefined;
   afterRender?(ctx: CanvasRenderingContext2D): void;
+  isPathVisible?(): boolean;
 }
 
-class Path2DGroup {
+const CHUNK_SIZE = 100;
+
+class Path2DChunk {
   protected items: Set<Path2DRenderInstance> = new Set();
 
+  protected visibleItems = cache(() => {
+    return Array.from(this.items).filter((item) => item.isPathVisible?.() ?? true);
+  });
+
   protected path = cache(() => {
     const path = new Path2D();
     path.moveTo(0, 0);
-    return Array.from(this.items).reduce((path, item) => {
-      const subPath = item.getPath();
-      if (subPath) {
-        path.addPath(subPath);
+    return this.visibleItems.get().reduce((path, item) => {
+      if (item.isPathVisible?.() ?? true) {
+        const subPath = item.getPath();
+        if (subPath) {
+          path.addPath(subPath);
+        }
       }
       return path;
     }, path);
   });
 
   protected applyStyles(ctx) {
-    const val = Array.from(this.items)[0];
-    return val.style(ctx);
+    const val = Array.from(this.items).find((item) => item.isPathVisible?.() ?? true);
+    return val?.style(ctx);
   }
 
   public add(item: Path2DRenderInstance) {
     this.items.add(item);
-    this.path.reset();
+    this.reset();
   }
 
-  public delete(item) {
+  public delete(item: Path2DRenderInstance) {
     this.items.delete(item);
+    this.reset();
+  }
+
+  public reset() {
     this.path.reset();
+    this.visibleItems.reset();
   }
 
   public render(ctx: CanvasRenderingContext2D) {
-    if (this.items.size) {
+    const visibleItems = this.visibleItems.get();
+
+    if (visibleItems.length) {
       ctx.save();
 
       const result = this.applyStyles(ctx);
@@ -63,11 +81,55 @@ class Path2DGroup {
         }
       }
       ctx.restore();
-      for (const item of this.items) {
+      for (const item of visibleItems) {
         item.afterRender?.(ctx);
       }
     }
   }
+
+  public get size() {
+    return this.items.size;
+  }
+}
+
+class Path2DGroup {
+  protected chunks: Path2DChunk[] = [new Path2DChunk()];
+  protected itemToChunk: Map<Path2DRenderInstance, Path2DChunk> = new Map();
+
+  public add(item: Path2DRenderInstance) {
+    let lastChunk = this.chunks[this.chunks.length - 1];
+    if (lastChunk.size >= CHUNK_SIZE) {
+      lastChunk = new Path2DChunk();
+      this.chunks.push(lastChunk);
+    }
+    lastChunk.add(item);
+    this.itemToChunk.set(item, lastChunk);
+  }
+
+  public delete(item: Path2DRenderInstance) {
+    const chunk = this.itemToChunk.get(item);
+    if (chunk) {
+      chunk.delete(item);
+      this.itemToChunk.delete(item);
+      if (chunk.size === 0 && this.chunks.length > 1) {
+        const index = this.chunks.indexOf(chunk);
+        if (index > -1) {
+          this.chunks.splice(index, 1);
+        }
+      }
+    }
+  }
+
+  public resetItem(item: Path2DRenderInstance) {
+    const chunk = this.itemToChunk.get(item);
+    chunk?.reset();
+  }
+
+  public render(ctx: CanvasRenderingContext2D) {
+    for (const chunk of this.chunks) {
+      chunk.render(ctx);
+    }
+  }
 }
 
 export class BatchPath2DRenderer {
@@ -126,4 +188,13 @@ export class BatchPath2DRenderer {
     this.orderedPaths.reset();
     this.onChange?.();
   }
+
+  public markDirty(item: Path2DRenderInstance) {
+    const params = this.itemParams.get(item);
+    if (params) {
+      const group = this.getGroup(params.zIndex, params.group);
+      group.resetItem(item);
+      this.onChange?.();
+    }
+  }
 }

src/graph.ts

@@ -162,7 +162,6 @@ export class Graph {
 
   public zoomTo(target: TGraphZoomTarget, config?: ZoomConfig) {
     this.scheduleTask(() => {
-      console.log("zoomTo", target, config);
       if (target === "center") {
         this.api.zoomToViewPort(config);
         return;

src/react-components/BlocksList.tsx

@@ -27,10 +27,6 @@ export type TBlockProps = {
 export const Block: React.FC<TBlockProps> = memo((props: TBlockProps) => {
   const block = useSignal(props.blockState.$state);
 
-  useLayoutEffect(() => {
-    console.log("block-update", props.blockState.id);
-  }, [props.blockState]);
-
   if (!block) return;
 
   return props.renderBlock(props.graphObject, block, props.blockState);