refactor: migrate syncToLabelSize

packages/g6/__tests__/demos/behavior-auto-adapt-label.ts

@@ -61,6 +61,7 @@ export const behaviorAutoAdaptLabel: TestCase = async (context) => {
         maxSize: 60,
         minSize: 12,
         scale: 'linear',
+        syncToLabelSize: true,
       },
     ],
     plugins: [{ type: 'background', background: '#fff' }],

packages/g6/__tests__/demos/case-unicorns-investors.ts

@@ -61,6 +61,10 @@ export const caseUnicornsInvestors: TestCase = async (context) => {
         scale: 'linear',
         maxSize: 60,
         minSize: 20,
+        syncToLabelSize: {
+          maxFontSize: 16,
+          minFontSize: 12,
+        },
       },
     ],
     behaviors: [
@@ -70,7 +74,7 @@ export const caseUnicornsInvestors: TestCase = async (context) => {
         return {
           key: 'hover-activate',
           type: 'hover-activate',
-          enable: true,
+          enable: (e: IPointerEvent<Element>) => e.targetType === 'node',
           degree: 1,
           inactiveState: 'inactive',
           onHover: (e: IPointerEvent<Element>) => {
@@ -82,14 +86,8 @@ export const caseUnicornsInvestors: TestCase = async (context) => {
           },
         };
       },
-      {
-        type: 'fix-element-size',
-        enable: true,
-      },
-      {
-        type: 'auto-adapt-label',
-        syncToNodeSize: { maxFontSize: 16, minFontSize: 12 },
-      },
+      { type: 'fix-element-size', enable: true },
+      'auto-adapt-label',
     ],
     plugins: [
       {

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

@@ -1,5 +1,5 @@
 import { AABB } from '@antv/g';
-import { groupBy, isBoolean, isFunction, throttle } from '@antv/util';
+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';
@@ -55,13 +55,6 @@ export interface AutoAdaptLabelOptions extends BaseBehaviorOptions {
    * @defaultValue 0
    */
   padding?: Padding;
-  /**
-   * <zh/> 根据节点大小调整标签字号
-   *
-   * <en/> Adjust the label font size according to the node size
-   * @defaultValue true
-   */
-  syncToNodeSize?: boolean | { maxFontSize: number; minFontSize: number };
   /**
    * <zh/> 节流时间
    *
@@ -86,7 +79,6 @@ export class AutoAdaptLabel extends BaseBehavior<AutoAdaptLabelOptions> {
     throttle: 100,
     padding: 0,
     nodeSorter: { type: 'degree' },
-    syncToNodeSize: true,
   };
 
   constructor(context: RuntimeContext, options: AutoAdaptLabelOptions) {
@@ -205,7 +197,7 @@ export class AutoAdaptLabel extends BaseBehavior<AutoAdaptLabelOptions> {
     const sortedElements = this.sortLabelElementsInView(this.labelElementsInView);
     const { show, hide } = this.detectLabelCollision(sortedElements);
 
-    show.forEach(this.showLabel);
+    show.reverse().forEach(this.showLabel);
     hide.forEach(this.hideLabel);
   };
 
@@ -220,15 +212,6 @@ export class AutoAdaptLabel extends BaseBehavior<AutoAdaptLabelOptions> {
   private showLabel = (element: Element) => {
     const label = element.getShape('label');
     if (label) setVisibility(label, 'visible');
-    if (this.options.syncToNodeSize) {
-      const { size: sizeArr, labelFontSize } = element.attributes;
-      const size = Array.isArray(sizeArr) ? Math.min(...sizeArr) : sizeArr;
-      const { maxFontSize, minFontSize } = !isBoolean(this.options.syncToNodeSize)
-        ? this.options.syncToNodeSize
-        : { maxFontSize: Infinity, minFontSize: labelFontSize };
-      const fontSize = Math.min(maxFontSize, Math.max(size / 2, minFontSize));
-      element.update({ labelFontSize: fontSize, labelLineHeight: fontSize });
-    }
     element.toFront();
     this.hiddenElements.delete(element.id);
   };

packages/g6/src/transforms/map-node-size.ts

@@ -1,4 +1,4 @@
-import { deepMix, isEqual } from '@antv/util';
+import { deepMix, isBoolean, isEqual } from '@antv/util';
 import type { RuntimeContext } from '../runtime/types';
 import type { GraphData } from '../spec';
 import type { ID, Node, NodeCentralityOptions, Size, STDSize } from '../types';
@@ -68,6 +68,13 @@ export interface MapNodeSizeOptions extends BaseTransformOptions {
     | 'pow'
     | 'sqrt'
     | ((value: number, domain: [number, number], range: [number, number]) => number);
+  /**
+   * <zh/> 是否将节点大小同步到标签字体大小
+   *
+   * <en/> Whether to synchronize the node size to the label font size
+   * @defaultValue false
+   */
+  syncToLabelSize?: boolean | { maxFontSize: number; minFontSize: number };
 }
 
 /**
@@ -85,6 +92,7 @@ export class MapNodeSize extends BaseTransform<MapNodeSizeOptions> {
     maxSize: 80,
     minSize: 20,
     scale: 'log',
+    syncToLabelSize: false,
   };
 
   constructor(context: RuntimeContext, options: MapNodeSizeOptions) {
@@ -111,10 +119,23 @@ export class MapNodeSize extends BaseTransform<MapNodeSizeOptions> {
         maxSize,
         this.options.scale,
       );
+
       const element = this.context.element?.getElement<Node>(idOf(datum));
 
+      const style = { size };
+
+      if (this.options.syncToLabelSize) {
+        const sizeArr = element ? element.attributes.size : size;
+        const fontSize = (Array.isArray(sizeArr) ? Math.min(...sizeArr) : sizeArr) / 2;
+        const { maxFontSize, minFontSize } = isBoolean(this.options.syncToLabelSize)
+          ? { maxFontSize: Infinity, minFontSize: element ? element.attributes.labelFontSize : 12 }
+          : this.options.syncToLabelSize;
+        const _fontSize = Math.min(maxFontSize, Math.max(fontSize, minFontSize));
+        Object.assign(style, { labelFontSize: _fontSize, labelLineHeight: _fontSize });
+      }
+
       if (!element || !isEqual(size, element.attributes.size)) {
-        reassignTo(input, element ? 'update' : 'add', 'node', deepMix(datum, { style: { size } }));
+        reassignTo(input, element ? 'update' : 'add', 'node', deepMix(datum, { style }));
       }
     });
     return input;

packages/site/examples/feature/default/demo/unicorns-investors.js

@@ -20575,6 +20575,10 @@ const graph = new Graph({
       scale: 'linear',
       maxSize: 60,
       minSize: 20,
+      syncToNodeSize: { 
+        maxFontSize: 16, 
+        minFontSize: 12 
+      },
     },
   ],
   behaviors: [
@@ -20584,7 +20588,7 @@ const graph = new Graph({
       return {
         key: 'hover-activate',
         type: 'hover-activate',
-        enable: true,
+        enable: (e) => e.targetType === 'node',
         degree: 1,
         inactiveState: 'inactive',
         onHover: (e) => {
@@ -20600,10 +20604,7 @@ const graph = new Graph({
       type: 'fix-element-size',
       enable: true,
     },
-    {
-      type: 'auto-adapt-label',
-      syncToNodeSize: { maxFontSize: 16, minFontSize: 12 },
-    },
+    'auto-adapt-label'
   ],
   animation: false,
 });