fix: fix setVisibility util (#6158)

* refactor: omit visibility from element to sub shape

* fix(utils): refactor setVisibility

---------

Co-authored-by: antv <antv@antfin.com>

packages/g6/__tests__/demos/element-visibility-part.ts

@@ -0,0 +1,58 @@
+import { Group, Rect } from '@antv/g';
+import { BaseNodeStyleProps, Circle, ExtensionCategory, Graph, register, setVisibility } from '@antv/g6';
+
+interface CustomCircleStyleProps extends BaseNodeStyleProps {
+  show: boolean;
+}
+
+class CustomCircle extends Circle {
+  public renderPart(attributes: Required<CustomCircleStyleProps>, container: Group) {
+    const part = this.upsert('part', Rect, { width: 10, height: 10, stroke: 'red', lineWidth: 2 }, container)!;
+    this.upsert('part-rect', Rect, { x: 1, y: 1, width: 8, height: 8, fill: 'pink' }, part);
+
+    setVisibility(part, attributes.show ? 'visible' : 'hidden');
+  }
+
+  public render(attributes: Required<CustomCircleStyleProps>, container: Group): void {
+    super.render();
+    this.renderPart(attributes, container);
+  }
+}
+
+export const elementVisibilityPart: TestCase = async (context) => {
+  register(ExtensionCategory.NODE, 'custom-circle', CustomCircle, true);
+
+  const graph = new Graph({
+    ...context,
+    data: {
+      nodes: [{ id: 'node-1', style: { x: 100, y: 100, show: true } }],
+    },
+    node: {
+      type: 'custom-circle',
+      style: {
+        size: 20,
+      },
+    },
+  });
+
+  await graph.draw();
+
+  elementVisibilityPart.form = (panel) => {
+    const config = {
+      node: true,
+      part: true,
+    };
+    return [
+      panel.add(config, 'node').onChange((show: boolean) => {
+        graph.updateNodeData([{ id: 'node-1', style: { visibility: show ? 'visible' : 'hidden' } }]);
+        graph.draw();
+      }),
+      panel.add(config, 'part').onChange((show: boolean) => {
+        graph.updateNodeData([{ id: 'node-1', style: { show } }]);
+        graph.draw();
+      }),
+    ];
+  };
+
+  return graph;
+};

packages/g6/__tests__/demos/index.ts

@@ -61,6 +61,7 @@ export { elementPosition } from './element-position';
 export { elementPositionCombo } from './element-position-combo';
 export { elementState } from './element-state';
 export { elementVisibility } from './element-visibility';
+export { elementVisibilityPart } from './element-visibility-part';
 export { elementZIndex } from './element-z-index';
 export { graphToDataURL } from './graph-to-data-url';
 export { layoutAntVDagreFlow } from './layout-antv-dagre-flow';

packages/g6/__tests__/unit/utils/visibility.spec.ts

@@ -1,4 +1,5 @@
 import { BaseShape } from '@/src';
+import { setVisibility } from '@/src/utils/visibility';
 import { Circle } from '@antv/g';
 
 class Shape extends BaseShape<{ visibility: 'visible' | 'hidden' }> {
@@ -9,12 +10,10 @@ class Shape extends BaseShape<{ visibility: 'visible' | 'hidden' }> {
 }
 
 describe('visibility', () => {
-  it('setVisibility', () => {
+  it('shape visibility', () => {
     const shape = new Shape({});
-    // @ts-expect-error shapeMap is private
-    const vShape = shape.shapeMap.visibleShape;
-    // @ts-expect-error shapeMap is private
-    const hShape = shape.shapeMap.hiddenShape;
+    const vShape = shape.getShape('visibleShape');
+    const hShape = shape.getShape('hiddenShape');
 
     expect(shape.style.visibility).toBe(undefined);
     expect(vShape.style.visibility).toBe(undefined);
@@ -31,12 +30,10 @@ describe('visibility', () => {
     expect(hShape.style.visibility).toBe('hidden');
   });
 
-  it('setVisibility default is hidden', () => {
+  it('default is hidden', () => {
     const shape = new Shape({ style: { visibility: 'hidden' } });
-    // @ts-expect-error shapeMap is private
-    const vShape = shape.shapeMap.visibleShape;
-    // @ts-expect-error shapeMap is private
-    const hShape = shape.shapeMap.hiddenShape;
+    const vShape = shape.getShape('visibleShape');
+    const hShape = shape.getShape('hiddenShape');
 
     expect(shape.style.visibility).toBe('hidden');
     expect(vShape.style.visibility).toBe('hidden');
@@ -47,4 +44,143 @@ describe('visibility', () => {
     expect(vShape.style.visibility).toBe('visible');
     expect(hShape.style.visibility).toBe('hidden');
   });
+
+  it('setVisibility', () => {
+    /**
+     * d: default
+     * v: visible
+     * h: hidden
+     *           d
+     *       /   |   \
+     *    d      v     h
+     *   /|\    /|\   /|\
+     *  d v h  d v h d b h
+     */
+
+    const root = new Circle({ id: 'root', style: { r: 10 } });
+    const l1 = root.appendChild(new Circle({ id: 'l1', style: { r: 10 } }));
+    const l2 = root.appendChild(new Circle({ id: 'l2', style: { r: 10, visibility: 'visible' } }));
+    const l3 = root.appendChild(new Circle({ id: 'l3', style: { r: 10, visibility: 'hidden' } }));
+    const l1_1 = l1.appendChild(new Circle({ id: 'l1_1', style: { r: 10 } }));
+    const l1_2 = l1.appendChild(new Circle({ id: 'l1_2', style: { r: 10, visibility: 'visible' } }));
+    const l1_3 = l1.appendChild(new Circle({ id: 'l1_3', style: { r: 10, visibility: 'hidden' } }));
+    const l2_1 = l2.appendChild(new Circle({ id: 'l2_1', style: { r: 10 } }));
+    const l2_2 = l2.appendChild(new Circle({ id: 'l2_2', style: { r: 10, visibility: 'visible' } }));
+    const l2_3 = l2.appendChild(new Circle({ id: 'l2_3', style: { r: 10, visibility: 'hidden' } }));
+    const l3_1 = l3.appendChild(new Circle({ id: 'l3_1', style: { r: 10 } }));
+    const l3_2 = l3.appendChild(new Circle({ id: 'l3_2', style: { r: 10, visibility: 'visible' } }));
+    const l3_3 = l3.appendChild(new Circle({ id: 'l3_3', style: { r: 10, visibility: 'hidden' } }));
+
+    const assertDefault = () => {
+      expect(root.style.visibility).toBe(undefined);
+      expect(l1.style.visibility).toBe(undefined);
+      expect(l2.style.visibility).toBe('visible');
+      expect(l3.style.visibility).toBe('hidden');
+      expect(l1_1.style.visibility).toBe(undefined);
+      expect(l1_2.style.visibility).toBe('visible');
+      expect(l1_3.style.visibility).toBe('hidden');
+      expect(l2_1.style.visibility).toBe(undefined);
+      expect(l2_2.style.visibility).toBe('visible');
+      expect(l2_3.style.visibility).toBe('hidden');
+      expect(l3_1.style.visibility).toBe(undefined);
+      expect(l3_2.style.visibility).toBe('visible');
+      expect(l3_3.style.visibility).toBe('hidden');
+    };
+
+    const assertHidden = () => {
+      expect(root.style.visibility).toBe('hidden');
+      expect(l1.style.visibility).toBe('hidden');
+      expect(l2.style.visibility).toBe('hidden');
+      expect(l3.style.visibility).toBe('hidden');
+      expect(l1_1.style.visibility).toBe('hidden');
+      expect(l1_2.style.visibility).toBe('hidden');
+      expect(l1_3.style.visibility).toBe('hidden');
+      expect(l2_1.style.visibility).toBe('hidden');
+      expect(l2_2.style.visibility).toBe('hidden');
+      expect(l2_3.style.visibility).toBe('hidden');
+      expect(l3_1.style.visibility).toBe('hidden');
+      expect(l3_2.style.visibility).toBe('hidden');
+      expect(l3_3.style.visibility).toBe('hidden');
+    };
+
+    const assertVisible = () => {
+      expect(root.style.visibility).toBe('visible');
+      expect(l1.style.visibility).toBe('visible');
+      expect(l2.style.visibility).toBe('visible');
+      expect(l3.style.visibility).toBe('hidden');
+      expect(l1_1.style.visibility).toBe('visible');
+      expect(l1_2.style.visibility).toBe('visible');
+      expect(l1_3.style.visibility).toBe('hidden');
+      expect(l2_1.style.visibility).toBe('visible');
+      expect(l2_2.style.visibility).toBe('visible');
+      expect(l2_3.style.visibility).toBe('hidden');
+      expect(l3_1.style.visibility).toBe('hidden');
+      expect(l3_2.style.visibility).toBe('hidden');
+      expect(l3_3.style.visibility).toBe('hidden');
+    };
+
+    assertDefault();
+
+    setVisibility(root, 'hidden');
+
+    assertHidden();
+
+    setVisibility(root, 'visible');
+
+    assertVisible();
+
+    setVisibility(root, 'hidden');
+
+    assertHidden();
+  });
+
+  it('setVisibility 2', () => {
+    const root = new Circle({ id: 'root', style: { r: 10 } });
+    const level1 = root.appendChild(new Circle({ id: 'level1', style: { r: 10 } }));
+    const level2 = level1.appendChild(new Circle({ id: 'level2', style: { r: 10 } }));
+
+    expect(root.style.visibility).toBe(undefined);
+    expect(level1.style.visibility).toBe(undefined);
+    expect(level2.style.visibility).toBe(undefined);
+
+    setVisibility(level1, 'hidden');
+    expect(root.style.visibility).toBe(undefined);
+    expect(level1.style.visibility).toBe('hidden');
+    expect(level2.style.visibility).toBe('hidden');
+
+    setVisibility(level1, 'visible');
+    expect(root.style.visibility).toBe(undefined);
+    expect(level1.style.visibility).toBe('visible');
+    expect(level2.style.visibility).toBe('visible');
+
+    setVisibility(root, 'hidden');
+    expect(root.style.visibility).toBe('hidden');
+    expect(level1.style.visibility).toBe('hidden');
+    expect(level2.style.visibility).toBe('hidden');
+
+    setVisibility(root, 'visible');
+    expect(root.style.visibility).toBe('visible');
+    expect(level1.style.visibility).toBe('visible');
+    expect(level2.style.visibility).toBe('visible');
+
+    setVisibility(level1, 'hidden');
+    expect(root.style.visibility).toBe('visible');
+    expect(level1.style.visibility).toBe('hidden');
+    expect(level2.style.visibility).toBe('hidden');
+
+    setVisibility(root, 'hidden');
+    expect(root.style.visibility).toBe('hidden');
+    expect(level1.style.visibility).toBe('hidden');
+    expect(level2.style.visibility).toBe('hidden');
+
+    setVisibility(root, 'visible');
+    expect(root.style.visibility).toBe('visible');
+    expect(level1.style.visibility).toBe('hidden');
+    expect(level2.style.visibility).toBe('hidden');
+
+    setVisibility(level1, 'visible');
+    expect(root.style.visibility).toBe('visible');
+    expect(level1.style.visibility).toBe('visible');
+    expect(level2.style.visibility).toBe('visible');
+  });
 });

packages/g6/src/behaviors/optimize-viewport-transform.ts

@@ -72,7 +72,7 @@ export class OptimizeViewportTransform extends BaseBehavior<OptimizeViewportTran
       setVisibility(
         element,
         visibility,
-        excludedClassnames && ((shapes) => this.filterShapes(shapes, excludedClassnames)),
+        (shape) => !!shape.className && !excludedClassnames?.includes(shape.className),
       );
     });
   };

packages/g6/src/elements/shapes/base-shape.ts

@@ -124,7 +124,10 @@ export abstract class BaseShape<StyleProps extends BaseShapeStyleProps> extends
    */
   public getGraphicStyle<T extends Record<string, any>>(
     style: T,
-  ): Omit<T, 'x' | 'y' | 'z' | 'transform' | 'transformOrigin' | 'className' | 'class' | 'context' | 'zIndex'> {
+  ): Omit<
+    T,
+    'x' | 'y' | 'z' | 'transform' | 'transformOrigin' | 'className' | 'class' | 'context' | 'zIndex' | 'visibility'
+  > {
     return getSubShapeStyle(style);
   }
 

packages/g6/src/exports.ts

@@ -89,6 +89,7 @@ export { omitStyleProps, subStyleProps } from './utils/prefix';
 export { Shortcut } from './utils/shortcut';
 export { parseSize } from './utils/size';
 export { treeToGraphData } from './utils/tree';
+export { setVisibility } from './utils/visibility';
 
 export type { BaseStyleProps } from '@antv/g';
 export type {

packages/g6/src/utils/style.ts

@@ -61,7 +61,10 @@ export function mergeOptions(opt1: DisplayObjectConfig<any>, opt2: DisplayObject
  */
 export function getSubShapeStyle<T extends Record<string, any>>(
   style: T,
-): Omit<T, 'x' | 'y' | 'z' | 'transform' | 'transformOrigin' | 'className' | 'class' | 'context' | 'zIndex'> {
-  const { x, y, z, class: cls, className, transform, transformOrigin, context, zIndex, ...rest } = style;
+): Omit<
+  T,
+  'x' | 'y' | 'z' | 'transform' | 'transformOrigin' | 'className' | 'class' | 'context' | 'zIndex' | 'visibility'
+> {
+  const { x, y, z, class: cls, className, transform, transformOrigin, context, zIndex, visibility, ...rest } = style;
   return rest;
 }