feat: toggle label visibility

packages/g6/__tests__/demos/behavior-toggle-label-visibility.ts

@@ -0,0 +1,98 @@
+import data from '@@/dataset/language-tree.json';
+import { type FixShapeConfig, Graph } from '@antv/g6';
+
+export const behaviorToggleLabelVisibility: TestCase = async (context) => {
+  // const fixKeyShapeConfig: FixShapeConfig = {
+  //   shape: (shapes) => shapes.find((shape) => shape.className === 'key')!,
+  //   fields: ['r', 'width', 'height'],
+  // };
+
+  const fixLabelConfig: FixShapeConfig = {
+    shape: (shapes) =>
+      shapes.find((shape) => shape.parentElement?.className === 'label' && shape.className === 'text')!,
+    fields: ['fontSize', 'lineHeight'],
+  };
+
+  const fixLabelBgConfig: FixShapeConfig = {
+    shape: (shapes) =>
+      shapes.find((shape) => shape.parentElement?.className === 'label' && shape.className === 'background')!,
+    fields: ['x', 'y', 'width', 'height'],
+  };
+
+  const graph = new Graph({
+    ...context,
+    padding: 20,
+    theme: 'light',
+    data,
+    node: {
+      style: {
+        labelText: (d) => d.id,
+        labelBackground: true,
+        labelFontFamily: 'Gill Sans',
+        labelFill: '#333',
+        // labelWordWrap: true,
+        // labelMaxLines: 4,
+        // labelMaxWidth: 200,
+      },
+      state: {
+        active: {
+          label: true,
+        },
+      },
+      palette: {
+        type: 'group',
+        color: 'tableau',
+        field: 'group',
+      },
+    },
+    edge: {
+      style: {
+        stroke: '#E2E3E1',
+        endArrow: true,
+      },
+    },
+    behaviors: [
+      'drag-canvas',
+      'zoom-canvas',
+      function () {
+        return {
+          type: 'hover-activate',
+          degree: 0,
+          onHover: (e) => {
+            this.frontElement(e.target.id);
+          },
+        };
+      },
+      {
+        type: 'fix-element-size',
+        enable: false,
+        state: undefined,
+        node: [fixLabelConfig, fixLabelBgConfig],
+      },
+      {
+        type: 'toggle-label-visibility',
+      },
+    ],
+    layout: {
+      type: 'd3-force',
+      manyBody: { strength: -200 },
+      x: {},
+      y: {},
+    },
+    transforms: [
+      {
+        key: 'map-node-size',
+        type: 'map-node-size',
+        maxSize: 60,
+        minSize: 12,
+        scale: 'linear',
+      },
+    ],
+    plugins: [{ type: 'background', background: '#fff' }],
+    animation: false,
+  });
+
+  await graph.render();
+
+  return graph;
+};

packages/g6/__tests__/demos/index.ts

@@ -18,6 +18,7 @@ export { behaviorHoverActivate } from './behavior-hover-activate';
 export { behaviorLassoSelect } from './behavior-lasso-select';
 export { behaviorOptimizeViewportTransform } from './behavior-optimize-viewport-transform';
 export { behaviorScrollCanvas } from './behavior-scroll-canvas';
+export { behaviorToggleLabelVisibility } from './behavior-toggle-label-visibility';
 export { behaviorZoomCanvas } from './behavior-zoom-canvas';
 export { bugTooltipResize } from './bug-tooltip-resize';
 export { canvasCursor } from './canvas-cursor';

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

@@ -10,6 +10,7 @@ import {
   getNodeBBox,
   getPointBBox,
   getTriangleCenter,
+  isBBoxInside,
   isPointInBBox,
   isPointOnBBoxBoundary,
   isPointOutsideBBox,
@@ -62,6 +63,17 @@ describe('bbox', () => {
     expect(getCombinedBBox([])).toEqual(new AABB());
   });
 
+  it('isBBoxInside', () => {
+    const bbox1 = new AABB();
+    bbox1.setMinMax([0, 0, 0], [1, 1, 1]);
+    const bbox2 = new AABB();
+    bbox2.setMinMax([0.5, 0.5, 0], [1.5, 1.5, 1]);
+    const bbox3 = new AABB();
+    bbox3.setMinMax([0, 0, 0], [2, 2, 2]);
+    expect(isBBoxInside(bbox1, bbox2)).toBe(false);
+    expect(isBBoxInside(bbox1, bbox3)).toBe(true);
+  });
+
   it('isPointInBBox', () => {
     expect(isPointInBBox([0.5, 0.5, 0], bbox)).toBe(true);
     expect(isPointInBBox([0, 0, 0], bbox)).toBe(true);

packages/g6/src/behaviors/fix-element-size.ts

@@ -41,16 +41,17 @@ export interface FixElementSizeOptions extends BaseBehaviorOptions {
    * <zh/> 指定要固定大小的元素状态
    *
    * <en/> Specify the state of elements to be fixed in size
+   * @defaultValue `'selected'`
    */
   state?: State;
   /**
    * <zh/> 节点配置项，用于定义哪些属性在视觉上保持固定大小。若未指定（即为 undefined），则整个节点将被固定
    *
    * <en/> Node configuration for defining which node attributes should remain fixed in size visually. If not specified (i.e., undefined), the entire node will be fixed in size.
    * @example
-   * <zh/> 例如，在缩放过程中固定节点的 lineWidth 属性，可以配置如下：
+   * <zh/> 如果在缩放过程中希望固定节点主图形的 lineWidth 属性，可以这样配置：
    *
-   * <en/> For example, to fix `lineWidth` attribute of a node during zooming, you can configure it as follows:
+   * <en/> If you want to fix the lineWidth attribute of the key shape of the node during zooming, you can configure it like this:
    * ```ts
    * {
    *  node: [
@@ -60,6 +61,15 @@ export interface FixElementSizeOptions extends BaseBehaviorOptions {
    *    },
    *  ],
    * }
+   *
+   * <zh/> 如果希望固定节点标签的文字大小和行高，可以这样配置：
+   *
+   * <en/> If you want to fix the font size and line height of the node label, you can configure it like this:
+   * ```ts
+   *  {
+   *    shape: (shapes: DisplayObject[]) => shapes.find((shape) => shape.parentElement?.className === 'label' && shape.className === 'text')!,
+   *   fields: ['fontSize', 'lineHeight'],
+   *  },
    * ```
    */
   node?: FixShapeConfig | FixShapeConfig[];
@@ -146,7 +156,7 @@ export class FixElementSize extends BaseBehavior {
       configs.forEach((config: FixShapeConfig) => {
         const { shape: shapeFilter, fields } = config;
         const shape = shapeFilter(descendantShapes);
-
+        if (!shape) return;
         fields.forEach((field) => {
           if (!hasCachedStyle(shape, field)) cacheStyle(shape, field);
           const oriFieldValue = getCachedStyle(shape, field);

packages/g6/src/behaviors/index.ts

@@ -12,6 +12,7 @@ export { HoverActivate } from './hover-activate';
 export { LassoSelect } from './lasso-select';
 export { OptimizeViewportTransform } from './optimize-viewport-transform';
 export { ScrollCanvas } from './scroll-canvas';
+export { ToggleLabelVisibility } from './toggle-label-visibility';
 export { ZoomCanvas } from './zoom-canvas';
 
 export type { BaseBehaviorOptions } from './base-behavior';
@@ -28,4 +29,5 @@ export type { HoverActivateOptions } from './hover-activate';
 export type { LassoSelectOptions } from './lasso-select';
 export type { OptimizeViewportTransformOptions } from './optimize-viewport-transform';
 export type { ScrollCanvasOptions } from './scroll-canvas';
+export type { ToggleLabelVisibilityOptions } from './toggle-label-visibility';
 export type { ZoomCanvasOptions } from './zoom-canvas';