feat: label size sync to key size

antvis · Oct 14, 2024 · f2057ff · f2057ff
1 parent 03e82a4
commit f2057ff
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 12 deletions.
diff --git a/packages/g6/__tests__/demos/case-unicorns-investors.ts b/packages/g6/__tests__/demos/case-unicorns-investors.ts
@@ -27,11 +27,9 @@ export const caseUnicornsInvestors: TestCase = async (context) => {
  },
  state: {
  inactive: {
- fill: '#E0E0E0',
- fillOpacity: 1,
+ fillOpacity: 0.3,
  icon: false,
  label: false,
- labelBackground: false,
  },
  },
  },
@@ -40,11 +38,9 @@ export const caseUnicornsInvestors: TestCase = async (context) => {
  label: false,
  labelText: (d) => d.data?.type,
  labelBackground: true,
- lineWidth: 1,
  },
  state: {
  active: {
- lineWidth: 3,
  label: true,
  },
  inactive: {
@@ -63,7 +59,7 @@ export const caseUnicornsInvestors: TestCase = async (context) => {
  {
  type: 'map-node-size',
  scale: 'linear',
- maxSize: 80,
+ maxSize: 60,
  minSize: 20,
  },
  ],
@@ -90,7 +86,10 @@ export const caseUnicornsInvestors: TestCase = async (context) => {
  type: 'fix-element-size',
  enable: true,
  },
- 'auto-adapt-label',
+ {
+ type: 'auto-adapt-label',
+ syncToKeySize: { maxFontSize: 16, minFontSize: 12 },
+ },
  ],
  plugins: [
  {

diff --git a/packages/g6/src/behaviors/auto-adapt-label.ts b/packages/g6/src/behaviors/auto-adapt-label.ts
@@ -1,5 +1,5 @@
 import { AABB } from '@antv/g';
-import { groupBy, isFunction, throttle } from '@antv/util';
+import { groupBy, isBoolean, 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,6 +55,13 @@ export interface AutoAdaptLabelOptions extends BaseBehaviorOptions {
  * @defaultValue 0
  */
  padding?: Padding;
+ /**
+ * <zh/> 是否根据 key 的大小同步调整标签的大小
+ *
+ * <en/> Whether to adjust the size of the label according to the size of the key
+ * @defaultValue true
+ */
+ syncToKeySize?: boolean | { maxFontSize: number; minFontSize: number };
  /**
  * <zh/> 节流时间
  *
@@ -79,6 +86,7 @@ export class AutoAdaptLabel extends BaseBehavior<AutoAdaptLabelOptions> {
  throttle: 100,
  padding: 0,
  nodeSorter: { type: 'degree' },
+ syncToKeySize: true,
  };
 
  constructor(context: RuntimeContext, options: AutoAdaptLabelOptions) {
@@ -212,6 +220,15 @@ export class AutoAdaptLabel extends BaseBehavior<AutoAdaptLabelOptions> {
  private showLabel = (element: Element) => {
  const label = element.getShape('label');
  if (label) setVisibility(label, 'visible');
+ if (this.options.syncToKeySize) {
+ const { size: sizeArr, labelFontSize } = element.attributes;
+ const size = Array.isArray(sizeArr) ? Math.min(...sizeArr) : sizeArr;
+ const { maxFontSize, minFontSize } = !isBoolean(this.options.syncToKeySize)
+ ? this.options.syncToKeySize
+ : { 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);
  };

diff --git a/packages/site/examples/feature/default/demo/meta.json b/packages/site/examples/feature/default/demo/meta.json
@@ -34,7 +34,7 @@
  "zh": "信息密度",
  "en": "Information Density"
  },
- "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*HfH8SodrHo4AAAAAAAAAAAAADmJ7AQ/original"
+ "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*KaoETa-gBDIAAAAAAAAAAAAADmJ7AQ/original"
  }
  ]
 }
diff --git a/packages/site/examples/feature/default/demo/unicorns-investors.js b/packages/site/examples/feature/default/demo/unicorns-investors.js
@@ -20528,6 +20528,7 @@ const size = (node) => Math.max(...node.style.size);
 
 const graph = new Graph({
  data,
+ autoFit: 'view',
  node: {
  style: {
  fillOpacity: 1,
@@ -20551,11 +20552,9 @@ const graph = new Graph({
  label: false,
  labelText: (d) => d.data?.type,
  labelBackground: true,
- lineWidth: 1,
  },
  state: {
  active: {
- lineWidth: 3,
  label: true,
  },
  inactive: {
@@ -20601,7 +20600,10 @@ const graph = new Graph({
  type: 'fix-element-size',
  enable: true,
  },
- 'auto-adapt-label',
+ {
+ type: 'auto-adapt-label',
+ syncToKeySize: { maxFontSize: 16, minFontSize: 12 },
+ },
  ],
  animation: false,
 });