From c5b8adac3df3a9e2833a82202955dc12c0c25504 Mon Sep 17 00:00:00 2001 From: yvonneyx Date: Mon, 14 Oct 2024 20:47:44 +0800 Subject: [PATCH] refactor: migrate syncToLabelSize --- .../demos/behavior-auto-adapt-label.ts | 1 + .../demos/case-unicorns-investors.ts | 16 +- .../behaviors/auto-adapt-label/default.svg | 410 +++++++++--------- .../behaviors/auto-adapt-label/disable.svg | 356 +++++++-------- .../behaviors/auto-adapt-label/padding-60.svg | 344 +++++++-------- .../behaviors/auto-adapt-label/zoom-3.svg | 332 +++++++------- packages/g6/src/behaviors/auto-adapt-label.ts | 21 +- packages/g6/src/transforms/map-node-size.ts | 25 +- .../default/demo/unicorns-investors.js | 11 +- 9 files changed, 760 insertions(+), 756 deletions(-) diff --git a/packages/g6/__tests__/demos/behavior-auto-adapt-label.ts b/packages/g6/__tests__/demos/behavior-auto-adapt-label.ts index 479fb9c639f..13d8411b53b 100644 --- a/packages/g6/__tests__/demos/behavior-auto-adapt-label.ts +++ b/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' }], diff --git a/packages/g6/__tests__/demos/case-unicorns-investors.ts b/packages/g6/__tests__/demos/case-unicorns-investors.ts index 66cd4f1d296..d14cdc41045 100644 --- a/packages/g6/__tests__/demos/case-unicorns-investors.ts +++ b/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) => e.targetType === 'node', degree: 1, inactiveState: 'inactive', onHover: (e: IPointerEvent) => { @@ -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: [ { diff --git a/packages/g6/__tests__/snapshots/behaviors/auto-adapt-label/default.svg b/packages/g6/__tests__/snapshots/behaviors/auto-adapt-label/default.svg index 04b60b1656d..72dc118fd51 100644 --- a/packages/g6/__tests__/snapshots/behaviors/auto-adapt-label/default.svg +++ b/packages/g6/__tests__/snapshots/behaviors/auto-adapt-label/default.svg @@ -1243,16 +1243,31 @@ + + + + + + + + + + + Proto Indo-European + + + + - + - + Baltic @@ -1303,6 +1318,21 @@ + + + + + + + + + + + Bulgarian + + + + @@ -1399,10 +1429,10 @@ - + - + South Slavic @@ -1549,10 +1579,10 @@ - + - + West Germanic @@ -1654,10 +1684,10 @@ - + - + Middle Dutch @@ -1894,10 +1924,10 @@ - + - + Brythonic @@ -1969,10 +1999,10 @@ - + - + Goidelic @@ -2074,10 +2104,10 @@ - + - + Latin @@ -2218,31 +2248,16 @@ - - - - - - - - - - - Hellenic - - - - - + - + Anatolian @@ -2308,16 +2323,31 @@ + + + + + + + + + + + Dard + + + + - + - + Sanskrit @@ -2494,10 +2524,10 @@ - + - + Iranian @@ -2668,452 +2698,422 @@ - + - - - - - Albanian - - - - - - - - - - - - - - - Proto Indo-European - - - - - - - - - - - + - - East Slavic + + Thracian - + - + - + - + - - West Slavic + + Albanian - + - + - + - + - - Slavic + + Tocharian A - + - + - + - + - - Germanic + + Greek - + - + - + - + - - North Germanic + + Faroese - + - + - + - + - - Old Norse + + Norwegian - + - + - + - + - - Indo-Iranian + + Icelandic - + - + - + - + - Balto-Slavic + Polish - + - + - + - + - Osco-Umbrian + Slovene - + - + - + - + - Latino-Faliscan + Indic - + - + - + - + - Tocharian + Dardic - + - + - Old Icelandic + Hellenic - + - + - Old Norwegian + East Germanic - + - + - Middle Norwegian + Middle Danish - + - + - Middle Danish + Middle Norwegian - + - + - East Germanic + Old Norwegian - + - + - Dardic + Old Icelandic - + - + - + - + - Indic + Tocharian - + - + - + - + - Bulgarian + Latino-Faliscan - + - + - + - + - Slovene + Osco-Umbrian - + - + - + - + - Polish + Balto-Slavic - + - + - + - + - - Icelandic + + Indo-Iranian - + - + - + - + - - Norwegian + + Old Norse - + - + - + - + - - Faroese + + North Germanic - + - + - + - + - - Greek + + Germanic - + - + - + - + - - Dard + + Slavic - + - + - + - + - - Tocharian A + + West Slavic - + - + - + - + - - Thracian + + East Slavic diff --git a/packages/g6/__tests__/snapshots/behaviors/auto-adapt-label/disable.svg b/packages/g6/__tests__/snapshots/behaviors/auto-adapt-label/disable.svg index 6f2ffb9939d..a57b0a476e0 100644 --- a/packages/g6/__tests__/snapshots/behaviors/auto-adapt-label/disable.svg +++ b/packages/g6/__tests__/snapshots/behaviors/auto-adapt-label/disable.svg @@ -1243,212 +1243,212 @@ - + - + - + - + - - Proto Indo-European + + Thracian - + - + - + - + - - East Slavic + + Albanian - + - + - + - + - - West Slavic + + Tocharian A - + - + - + - + - - Slavic + + Greek - + - + - + - + - - Germanic + + Faroese - + - + - + - + - - North Germanic + + Norwegian - + - + - + - + - - Old Norse + + Icelandic - + - + - + - + - - Indo-Iranian + + Polish - + - + - + - + - Balto-Slavic + Slovene - + - + - + - + - Osco-Umbrian + Indic - + - + - + - + - Latino-Faliscan + Dardic - + - + - + - + - Tocharian + Hellenic - + - + - Old Icelandic + East Germanic - + - + - Old Norwegian + Middle Danish @@ -1468,212 +1468,212 @@ - + - + - Middle Danish + Old Norwegian - + - + - East Germanic + Old Icelandic - + - + - + - + - Dardic + Tocharian - + - + - + - + - Indic + Latino-Faliscan - + - + - + - + - Bulgarian + Osco-Umbrian - + - + - + - + - Slovene + Balto-Slavic - + - + - + - + - - Polish + + Indo-Iranian - + - + - + - + - - Icelandic + + Old Norse - + - + - + - + - - Norwegian + + North Germanic - + - + - + - + - - Faroese + + Germanic - + - + - + - + - - Greek + + Slavic - + - + - + - + - - Dard + + West Slavic - + - + - + - + - - Tocharian A + + East Slavic - + - + - + - + - - Thracian + + Proto Indo-European @@ -2038,21 +2038,6 @@ - - - - - - - - - - - Hellenic - - - - @@ -2113,6 +2098,21 @@ + + + + + + + + + + + Bulgarian + + + + @@ -2803,6 +2803,21 @@ + + + + + + + + + + + Dard + + + + @@ -3103,21 +3118,6 @@ - - - - - - - - - - - Albanian - - - - diff --git a/packages/g6/__tests__/snapshots/behaviors/auto-adapt-label/padding-60.svg b/packages/g6/__tests__/snapshots/behaviors/auto-adapt-label/padding-60.svg index e71ea766695..258b75ed0fa 100644 --- a/packages/g6/__tests__/snapshots/behaviors/auto-adapt-label/padding-60.svg +++ b/packages/g6/__tests__/snapshots/behaviors/auto-adapt-label/padding-60.svg @@ -1243,167 +1243,152 @@ - - - - - - - - - - - Proto Indo-European - - - - - + - + - + - + - - Slavic + + Thracian - + - + - + - + - - North Germanic + + Albanian - + - + - + - + - Balto-Slavic + Tocharian A - + - + - + - + - Osco-Umbrian + Greek - + - + - + - + - Latino-Faliscan + Faroese - + - + - + - + - Tocharian + Norwegian - + - + - + - + - Old Icelandic + Icelandic - + - + - + - + - Old Norwegian + Polish - + - + - + - + - Middle Danish + Slovene - + - + - East Germanic + Indic @@ -1423,167 +1408,167 @@ - + - + - Indic + East Germanic - + - + - + - + - Bulgarian + Middle Danish - + - + - + - + - Slovene + Old Norwegian - + - + - + - + - Polish + Old Icelandic - + - + - + - + - Icelandic + Tocharian - + - + - + - + - Norwegian + Latino-Faliscan - + - + - + - + - Faroese + Osco-Umbrian - + - + - + - + - Greek + Balto-Slavic - + - + - + - + - - Dard + + North Germanic - + - + - + - + - - Tocharian A + + Slavic - + - + - + - + - - Thracian + + Proto Indo-European @@ -1993,6 +1978,21 @@ + + + + + + + + + + + Bulgarian + + + + @@ -2683,6 +2683,21 @@ + + + + + + + + + + + Dard + + + + @@ -2983,62 +2998,62 @@ - + - + - + - + - - Albanian + + Hellenic - + - + - + - + - - East Slavic + + Old Danish - + - + - + - + - - West Slavic + + Middle Norwegian - + - + - Germanic + Indo-Iranian @@ -3058,62 +3073,47 @@ - + - + - Indo-Iranian - - - - - - - - - - - - - - - Middle Norwegian + Germanic - + - + - + - + - - Old Danish + + West Slavic - + - + - + - + - - Hellenic + + East Slavic diff --git a/packages/g6/__tests__/snapshots/behaviors/auto-adapt-label/zoom-3.svg b/packages/g6/__tests__/snapshots/behaviors/auto-adapt-label/zoom-3.svg index aa73bdcc35f..46c3ee16e87 100644 --- a/packages/g6/__tests__/snapshots/behaviors/auto-adapt-label/zoom-3.svg +++ b/packages/g6/__tests__/snapshots/behaviors/auto-adapt-label/zoom-3.svg @@ -1258,36 +1258,6 @@ - - - - - - - - - - - Bulgarian - - - - - - - - - - - - - - - Dard - - - - @@ -1693,6 +1663,21 @@ + + + + + + + + + + + Bulgarian + + + + @@ -2383,6 +2368,21 @@ + + + + + + + + + + + Dard + + + + @@ -2698,197 +2698,197 @@ - + - + - + - + - - East Slavic + + Thracian - + - + - + - + - - West Slavic + + Albanian - + - + - + - + - - Slavic + + Tocharian A - + - + - + - + - - Germanic + + Greek - + - + - + - + - - North Germanic + + Norwegian - + - + - + - + - - Old Norse + + Icelandic - + - + - + - + - - Indo-Iranian + + Polish - + - + - + - + - Balto-Slavic + Slovene - + - + - + - + - Osco-Umbrian + Indic - + - + - + - + - Latino-Faliscan + Dardic - + - + - + - + - Tocharian + Hellenic - + - + - Old Icelandic + East Germanic - + - + - Old Norwegian + Middle Danish @@ -2908,197 +2908,197 @@ - + - + - Middle Danish + Old Norwegian - + - + - East Germanic + Old Icelandic - + - + - + - + - Hellenic + Tocharian - + - + - + - + - Dardic + Latino-Faliscan - + - + - + - + - Indic + Osco-Umbrian - + - + - + - + - Slovene + Balto-Slavic - + - + - + - + - - Polish + + Indo-Iranian - + - + - + - + - - Icelandic + + Old Norse - + - + - + - + - - Norwegian + + North Germanic - + - + - + - + - - Greek + + Germanic - + - + - + - + - - Tocharian A + + Slavic - + - + - + - + - - Albanian + + West Slavic - + - + - + - + - - Thracian + + East Slavic diff --git a/packages/g6/src/behaviors/auto-adapt-label.ts b/packages/g6/src/behaviors/auto-adapt-label.ts index 12611874544..27778d7b3c9 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, 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; - /** - * 根据节点大小调整标签字号 - * - * Adjust the label font size according to the node size - * @defaultValue true - */ - syncToNodeSize?: boolean | { maxFontSize: number; minFontSize: number }; /** * 节流时间 * @@ -86,7 +79,6 @@ export class AutoAdaptLabel extends BaseBehavior { throttle: 100, padding: 0, nodeSorter: { type: 'degree' }, - syncToNodeSize: true, }; constructor(context: RuntimeContext, options: AutoAdaptLabelOptions) { @@ -205,7 +197,7 @@ export class AutoAdaptLabel extends BaseBehavior { 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 { 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); }; diff --git a/packages/g6/src/transforms/map-node-size.ts b/packages/g6/src/transforms/map-node-size.ts index 29cfcfc5ce6..e0bca55f43d 100644 --- a/packages/g6/src/transforms/map-node-size.ts +++ b/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); + /** + * 是否将节点大小同步到标签字体大小 + * + * 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 { maxSize: 80, minSize: 20, scale: 'log', + syncToLabelSize: false, }; constructor(context: RuntimeContext, options: MapNodeSizeOptions) { @@ -111,10 +119,23 @@ export class MapNodeSize extends BaseTransform { maxSize, this.options.scale, ); + const element = this.context.element?.getElement(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; diff --git a/packages/site/examples/feature/default/demo/unicorns-investors.js b/packages/site/examples/feature/default/demo/unicorns-investors.js index d41292ea0b7..00333eb7878 100644 --- a/packages/site/examples/feature/default/demo/unicorns-investors.js +++ b/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, });