feat: culling optimize

Author: F-star

packages/core/src/graphics/canvas.ts

@@ -36,6 +36,10 @@ export class SuikaCanvas extends SuikaGraphics<SuikaCanvasAttrs> {
     }
     return null;
   }
+
+  protected override shouldSkipDraw() {
+    return false;
+  }
 }
 
 export const isCanvasGraphics = (

packages/core/src/graphics/ellipse.ts

@@ -49,8 +49,9 @@ export class SuikaEllipse extends SuikaGraphics<EllipseAttrs> {
   }
 
   override draw(drawInfo: IDrawInfo) {
+    if (this.shouldSkipDraw(drawInfo)) return;
+
     const opacity = this.getOpacity() * (drawInfo.opacity ?? 1);
-    if (!this.isVisible() || opacity === 0) return;
     const { ctx, imgManager, smooth } = drawInfo;
     const attrs = this.attrs;
     const cx = attrs.width / 2;

packages/core/src/graphics/frame/frame.ts

@@ -205,12 +205,12 @@ export class SuikaFrame extends SuikaGraphics<FrameAttrs> {
   }
 
   override draw(drawInfo: IDrawInfo) {
+    if (this.shouldSkipDraw(drawInfo)) return;
     const opacity = this.getOpacity() * (drawInfo.opacity ?? 1);
-    if (!this.isVisible() || opacity === 0) return;
 
     drawInfo = {
       ...drawInfo,
-      opacity: opacity,
+      opacity,
     };
 
     if (!this.isGroup()) {

packages/core/src/graphics/graphics/graphics.ts

@@ -359,6 +359,10 @@ export class SuikaGraphics<ATTRS extends GraphicsAttrs = GraphicsAttrs> {
     return false;
   }
 
+  protected strokeAABBIntersectWithBox(box: IBox) {
+    return isBoxIntersect(box, this.getBboxWithStroke());
+  }
+
   /**
    * whether the element intersect with the box
    */
@@ -476,8 +480,22 @@ export class SuikaGraphics<ATTRS extends GraphicsAttrs = GraphicsAttrs> {
     this.updateAttrs(rect, { finishRecomputed: true });
   }
 
+  protected shouldSkipDraw(drawInfo: IDrawInfo) {
+    if (!this.isVisible()) return true;
+    const opacity = this.getOpacity() * (drawInfo.opacity ?? 1);
+    if (opacity === 0) return true;
+
+    if (
+      drawInfo.viewportArea &&
+      !this.strokeAABBIntersectWithBox(drawInfo.viewportArea)
+    ) {
+      return true;
+    }
+    return false;
+  }
+
   draw(drawInfo: IDrawInfo) {
-    if (!this.isVisible()) return;
+    if (this.shouldSkipDraw(drawInfo)) return;
 
     const { ctx } = drawInfo;
 

packages/core/src/graphics/line.ts

@@ -31,8 +31,9 @@ export class SuikaLine extends SuikaGraphics<LineAttrs> {
   }
 
   override draw(drawInfo: IDrawInfo) {
+    if (this.shouldSkipDraw(drawInfo)) return;
+
     const opacity = this.getOpacity() * (drawInfo.opacity ?? 1);
-    if (!this.isVisible() || opacity === 0) return;
     const { ctx } = drawInfo;
     const { width, transform, stroke, strokeWidth } = this.attrs;
     ctx.save();

packages/core/src/graphics/path/path.ts

@@ -185,8 +185,9 @@ export class SuikaPath extends SuikaGraphics<PathAttrs> {
   }
 
   override draw(drawInfo: IDrawInfo) {
+    if (this.shouldSkipDraw(drawInfo)) return;
+
     const opacity = this.getOpacity() * (drawInfo.opacity ?? 1);
-    if (!this.isVisible() || opacity === 0) return;
     this._realDraw({ ...drawInfo, opacity });
   }
 

packages/core/src/graphics/rect.ts

@@ -143,8 +143,9 @@ export class SuikaRect extends SuikaGraphics<RectAttrs> {
   }
 
   override draw(drawInfo: IDrawInfo) {
+    if (this.shouldSkipDraw(drawInfo)) return;
+
     const opacity = this.getOpacity() * (drawInfo.opacity ?? 1);
-    if (!this.isVisible() || opacity === 0) return;
     this._realDraw({ ...drawInfo, opacity });
   }
 

packages/core/src/graphics/regular_polygon.ts

@@ -68,8 +68,9 @@ export class SuikaRegularPolygon extends SuikaGraphics<RegularPolygonAttrs> {
   }
 
   override draw(drawInfo: IDrawInfo) {
+    if (this.shouldSkipDraw(drawInfo)) return;
+
     const opacity = this.getOpacity() * (drawInfo.opacity ?? 1);
-    if (!this.isVisible() || opacity === 0) return;
     this._realDraw({ ...drawInfo, opacity });
   }
 

packages/core/src/graphics/star.ts

@@ -69,8 +69,9 @@ export class SuikaStar extends SuikaGraphics<StarAttrs> {
   }
 
   override draw(drawInfo: IDrawInfo) {
+    if (this.shouldSkipDraw(drawInfo)) return;
+
     const opacity = this.getOpacity() * (drawInfo.opacity ?? 1);
-    if (!this.isVisible() || opacity === 0) return;
     this._realDraw({ ...drawInfo, opacity });
   }
 

packages/core/src/graphics/text.ts

@@ -74,8 +74,9 @@ export class SuikaText extends SuikaGraphics<TextAttrs> {
   }
 
   override draw(drawInfo: IDrawInfo) {
+    if (this.shouldSkipDraw(drawInfo)) return;
+
     const opacity = this.getOpacity() * (drawInfo.opacity ?? 1);
-    if (!this.isVisible() || opacity === 0) return;
     const { transform, fill, stroke, fontSize, content, fontFamily } =
       this.attrs;
     const { ctx } = drawInfo;