refactor: fix element size

packages/g6/__tests__/demos/case-language-tree.ts

@@ -1,27 +1,46 @@
 import { labelPropagation } from '@antv/algorithm';
-import { Graph, NodeData } from '@antv/g6';
+import { DisplayObject } from '@antv/g';
+import type { Element, IPointerEvent, NodeData } from '@antv/g6';
+import { Graph } from '@antv/g6';
 import data from '../dataset/language-tree.json';
 
 export const caseLanguageTree: TestCase = async (context) => {
   const size = (node: NodeData) => Math.max(...(node.style?.size as [number, number, number]));
 
   const graph = new Graph({
     ...context,
-    autoFit: 'view',
     data: {
       ...data,
       nodes: labelPropagation(data).clusters.flatMap((cluster) => cluster.nodes),
     },
     node: {
       style: {
-        labelText: (d) => d.id,
+        label: true,
         labelBackground: true,
+        labelBackgroundFill: 'lightblue',
+        labelText: (d) => d.id,
+        icon: true,
         iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
       },
+      state: {
+        inactive: {
+          fill: '#E0E0E0',
+          fillOpacity: 1,
+          icon: false,
+          label: false,
+          labelBackground: false,
+        },
+      },
       palette: {
         field: (d) => d.clusterId,
       },
     },
+    edge: {
+      style: {
+        stroke: '#E0E0E0',
+        endArrow: true,
+      },
+    },
     layout: {
       type: 'd3-force',
       link: {
@@ -35,17 +54,48 @@ export const caseLanguageTree: TestCase = async (context) => {
       },
       animation: false,
     },
-    transforms: ['map-node-size'],
+    transforms: [
+      {
+        key: 'map-node-size',
+        type: 'map-node-size',
+      },
+    ],
     behaviors: [
       'drag-canvas',
       'zoom-canvas',
+      function () {
+        return {
+          key: 'hover-activate',
+          type: 'hover-activate',
+          enable: true,
+          degree: 1,
+          inactiveState: 'inactive',
+          onHover: (e: IPointerEvent<Element>) => {
+            this.frontElement(e.target.id);
+            e.view.setCursor('pointer');
+          },
+          onHoverEnd: (e: IPointerEvent<Element>) => {
+            e.view.setCursor('default');
+          },
+        };
+      },
+      {
+        key: 'fix-element-size',
+        type: 'fix-element-size',
+        enable: true,
+        // 字号保持
+        node: [
+          {
+            shape: (shapes: DisplayObject[]) => shapes.find((shape) => shape.className === 'label')!,
+          },
+        ],
+      },
       {
-        key: 'hover-activate',
-        type: 'hover-activate',
-        degree: 1,
-        inactiveState: 'inactive',
+        key: 'auto-adapt-label',
+        type: 'auto-adapt-label',
       },
     ],
+    plugins: [{ type: 'background', background: '#fff' }],
     animation: false,
   });
 

packages/g6/src/behaviors/auto-adapt-label.ts

@@ -3,7 +3,7 @@ import { groupBy, isFunction, throttle } from '@antv/util';
 import { GraphEvent } from '../constants';
 import type { RuntimeContext } from '../runtime/types';
 import type { Combo, Edge, Element, ID, IEvent, Node, NodeCentralityOptions, Padding } from '../types';
-import { getExpandedBBox, isBBoxInside } from '../utils/bbox';
+import { getExpandedBBox } from '../utils/bbox';
 import { getNodeCentralities } from '../utils/centrality';
 import { arrayDiff } from '../utils/diff';
 import { setVisibility } from '../utils/visibility';
@@ -94,37 +94,27 @@ export class AutoAdaptLabel extends BaseBehavior<AutoAdaptLabelOptions> {
   }
 
   /**
-   * <zh/> 检查当前包围盒是否有足够的空间进行展示；如果与已经展示的包围盒有重叠，或者超出视窗范围，则不会展示
+   * <zh/> 检查当前包围盒是否有足够的空间进行展示；如果与已经展示的包围盒有重叠，则不会展示
    *
-   * <en/> Check whether the current bounding box has enough space to display; if it overlaps with the displayed bounding box or exceeds the viewport range, it will not be displayed
+   * <en/> Check whether the current bounding box has enough space to display; if it overlaps with the displayed bounding box, it will not be displayed
    * @param bbox - bbox
    * @param bboxes - occupied bboxes which are already shown
    * @returns whether the bbox is overlapping with the bboxes or outside the viewpointBounds
    */
   private isOverlapping = (bbox: AABB, bboxes: AABB[]) => {
-    return !isBBoxInside(bbox, this.viewpointBounds) || bboxes.some((b) => bbox.intersects(b));
+    return bboxes.some((b) => bbox.intersects(b));
   };
 
-  private get viewpointBounds(): AABB {
-    const { canvas } = this.context;
-
-    const [minX, minY] = canvas.getCanvasByViewport([0, 0]);
-    const [maxX, maxY] = canvas.getCanvasByViewport(canvas.getSize());
-    const viewpointBounds = new AABB();
-    viewpointBounds.setMinMax([minX, minY, 0], [maxX, maxY, 0]);
-
-    return getExpandedBBox(viewpointBounds, 2);
-  }
-
   private occupiedBounds: AABB[] = [];
 
   private detectLabelCollision = (elements: Element[]): { show: Element[]; hide: Element[] } => {
+    const viewport = this.context.viewport!;
     const res: { show: Element[]; hide: Element[] } = { show: [], hide: [] };
     this.occupiedBounds = [];
 
     elements.forEach((element) => {
       const labelBounds = element.getShape('label').getRenderBounds();
-      if (!this.isOverlapping(labelBounds, this.occupiedBounds)) {
+      if (!this.isOverlapping(labelBounds, this.occupiedBounds) || !viewport.isInViewport(labelBounds)) {
         res.show.push(element);
         this.occupiedBounds.push(getExpandedBBox(labelBounds, this.options.padding));
       } else {
@@ -229,12 +219,13 @@ export class AutoAdaptLabel extends BaseBehavior<AutoAdaptLabelOptions> {
 
   private bindEvents() {
     const { graph } = this.context;
-    graph.once(GraphEvent.AFTER_RENDER, this.onToggleVisibility);
+    graph.on(GraphEvent.AFTER_DRAW, this.onToggleVisibility);
     graph.on(GraphEvent.AFTER_TRANSFORM, this.onTransform);
   }
 
   private unbindEvents() {
     const { graph } = this.context;
+    graph.off(GraphEvent.AFTER_DRAW, this.onToggleVisibility);
     graph.off(GraphEvent.AFTER_TRANSFORM, this.onTransform);
   }