fix: visibility on group

__tests__/ssr/visibility.spec.ts

@@ -3,7 +3,7 @@ import { JSDOM } from 'jsdom';
 import xmlserializer from 'xmlserializer';
 import { getCanvas, sleep } from '../utils';
 import '../useSnapshotMatchers';
-import { Canvas, ImageExporter, Rect } from '../../packages/core/src';
+import { Canvas, ImageExporter, Rect, Group } from '../../packages/core/src';
 
 const dir = `${__dirname}/snapshots`;
 let $canvas: HTMLCanvasElement;
@@ -90,4 +90,50 @@ describe('Visibility', () => {
       'visibility-hide',
     );
   });
+
+  it('should account for visibility in group correctly.', async () => {
+    const group = new Group();
+    const rect1 = new Rect({
+      x: 0,
+      y: 0,
+      width: 100,
+      height: 100,
+      fill: 'red',
+      visible: false,
+    });
+    group.appendChild(rect1);
+    const rect2 = new Rect({
+      x: 50,
+      y: 50,
+      width: 100,
+      height: 100,
+      fill: 'green',
+    });
+    group.appendChild(rect2);
+    canvas.appendChild(group);
+    group.visible = false;
+    canvas.render();
+
+    expect($canvas.getContext('webgl1')).toMatchWebGLSnapshot(
+      dir,
+      'visibility-group-hide',
+    );
+    expect(exporter.toSVG({ grid: true })).toMatchSVGSnapshot(
+      dir,
+      'visibility-group-hide',
+    );
+
+    await sleep(300);
+
+    group.visible = true;
+    canvas.render();
+    expect($canvas.getContext('webgl1')).toMatchWebGLSnapshot(
+      dir,
+      'visibility-group-show',
+    );
+    expect(exporter.toSVG({ grid: true })).toMatchSVGSnapshot(
+      dir,
+      'visibility-group-show',
+    );
+  });
 });

packages/core/examples/main.ts

@@ -1,6 +1,6 @@
-import { set } from '@antv/util';
 import {
   Canvas,
+  Group,
   Circle,
   Rect,
   RoughCircle,
@@ -33,17 +33,33 @@ const canvas = await new Canvas({
   shaderCompilerPath: '/glsl_wgsl_compiler_bg.wasm',
 }).initialized;
 
-const rect = new RoughRect({
+const group = new Group();
+const rect1 = new Rect({
+  x: 0,
+  y: 0,
+  width: 100,
+  height: 100,
+  fill: 'red',
+  visible: false,
+});
+group.appendChild(rect1);
+const rect2 = new Rect({
   x: 50,
   y: 50,
   width: 100,
   height: 100,
-  fill: 'black',
-  // fillStyle: 'dots',
+  fill: 'green',
 });
-canvas.appendChild(rect);
+group.appendChild(rect2);
+canvas.appendChild(group);
+group.visible = false;
 canvas.render();
 
+setTimeout(() => {
+  group.visible = true;
+  canvas.render();
+}, 2000);
+
 // console.log(toSVGElement(serializeNode(rect1)));
 
 // const animate = () => {

packages/core/src/Canvas.ts

@@ -242,7 +242,7 @@ export class Canvas {
         shape.renderDirtyFlag = true;
       }
 
-      if (shape.renderable && shape.renderDirtyFlag) {
+      if (shape.renderDirtyFlag) {
         modified.push(shape);
         this.#renderDirtyFlag = true;
       }

packages/core/src/plugins/Renderer.ts

@@ -282,8 +282,10 @@ export class Renderer implements Plugin {
     });
 
     hooks.render.tap((shape) => {
-      shape.globalRenderOrder = this.#zIndexCounter++;
-      this.#batchManager.add(shape);
+      if (shape.renderable) {
+        shape.globalRenderOrder = this.#zIndexCounter++;
+        this.#batchManager.add(shape);
+      }
     });
   }
 

packages/core/src/plugins/Selector.ts

@@ -7,7 +7,6 @@ import { Plugin, PluginContext } from './interfaces';
 export class Selector implements Plugin {
   #selected: Shape[] = [];
   #selectableMap: Record<string, AbstractSelectable> = {};
-  #enableContinuousBrush = true;
 
   /**
    * the topmost operation layer, which will be appended to documentElement directly
@@ -31,7 +30,7 @@ export class Selector implements Plugin {
       const selected = e.target as Shape;
 
       if (selected === root) {
-        if (!e.shiftKey || (e.shiftKey && !this.#enableContinuousBrush)) {
+        if (!e.shiftKey) {
           this.deselectAllShapes();
           this.#selected = [];
         }