From f2057ffef5c28ad50191551bad25459577af129a Mon Sep 17 00:00:00 2001
From: yvonneyx <zhuyuxin0627@gmail.com>
Date: Mon, 14 Oct 2024 16:45:11 +0800
Subject: [PATCH] feat: label size sync to key size

---
 .../demos/case-unicorns-investors.ts          | 13 ++++++-------
 packages/g6/src/behaviors/auto-adapt-label.ts | 19 ++++++++++++++++++-
 .../examples/feature/default/demo/meta.json   |  2 +-
 .../default/demo/unicorns-investors.js        |  8 +++++---
 4 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/packages/g6/__tests__/demos/case-unicorns-investors.ts b/packages/g6/__tests__/demos/case-unicorns-investors.ts
index d14d12a7da8..d43c081d6f2 100644
--- 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
index e3f5ec96f5d..fc68359650f 100644
--- 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
index 6e5b9fe43f5..cb3b0fad6ce 100644
--- 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
index 37a2beef6d5..ed647d3c658 100644
--- 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,
 });