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,
 });