diff --git a/packages/g6/__tests__/demos/behavior-auto-adapt-label.ts b/packages/g6/__tests__/demos/behavior-auto-adapt-label.ts index 479fb9c639..13d8411b53 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 66cd4f1d29..d14cdc4104 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 04b60b1656..72dc118fd5 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,426 +2698,36 @@ + + + + + + + + + + + Thracian + + + + - + - + Albanian - - - - - - - - - - - Proto Indo-European - - - - - - - - - - - - - - - East Slavic - - - - - - - - - - - - - - - West Slavic - - - - - - - - - - - - - - - Slavic - - - - - - - - - - - - - - - Germanic - - - - - - - - - - - - - - - North Germanic - - - - - - - - - - - - - - - Old Norse - - - - - - - - - - - - - - - Indo-Iranian - - - - - - - - - - - - - - - Balto-Slavic - - - - - - - - - - - - - - - Osco-Umbrian - - - - - - - - - - - - - - - Latino-Faliscan - - - - - - - - - - - - - - - Tocharian - - - - - - - - - - - - - - - Old Icelandic - - - - - - - - - - - - - - - Old Norwegian - - - - - - - - - - - - - - - Middle Norwegian - - - - - - - - - - - - - - - Middle Danish - - - - - - - - - - - - - - - East Germanic - - - - - - - - - - - - - - - Dardic - - - - - - - - - - - - - - - Indic - - - - - - - - - - - - - - - Bulgarian - - - - - - - - - - - - - - - Slovene - - - - - - - - - - - - - - - Polish - - - - - - - - - - - - - - - Icelandic - - - - - - - - - - - - - - - Norwegian - - - - - - - - - - - - - - - Faroese - - - - - - - - - - - - - - - Greek - - - - - - - - - - - - - - - Dard - - - - @@ -3103,17 +2743,377 @@ - + - + - Thracian + Greek + + + + + + + + + + + + + + + Faroese + + + + + + + + + + + + + + + Norwegian + + + + + + + + + + + + + + + Icelandic + + + + + + + + + + + + + + + Polish + + + + + + + + + + + + + + + Slovene + + + + + + + + + + + + + + + Indic + + + + + + + + + + + + + + + Dardic + + + + + + + + + + + + + + + Hellenic + + + + + + + + + + + + + + + East Germanic + + + + + + + + + + + + + + + Middle Danish + + + + + + + + + + + + + + + Middle Norwegian + + + + + + + + + + + + + + + Old Norwegian + + + + + + + + + + + + + + + Old Icelandic + + + + + + + + + + + + + + + Tocharian + + + + + + + + + + + + + + + Latino-Faliscan + + + + + + + + + + + + + + + Osco-Umbrian + + + + + + + + + + + + + + + Balto-Slavic + + + + + + + + + + + + + + + Indo-Iranian + + + + + + + + + + + + + + + Old Norse + + + + + + + + + + + + + + + North Germanic + + + + + + + + + + + + + + + Germanic + + + + + + + + + + + + + + + Slavic + + + + + + + + + + + + + + + West Slavic + + + + + + + + + + + + + + + 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 6f2ffb9939..a57b0a476e 100644 --- a/packages/g6/__tests__/snapshots/behaviors/auto-adapt-label/disable.svg +++ b/packages/g6/__tests__/snapshots/behaviors/auto-adapt-label/disable.svg @@ -1243,407 +1243,32 @@ - - - - - - - - - - - Proto Indo-European - - - - - - - - - - - - - - - East Slavic - - - - - - - - - - - - - - - West Slavic - - - - - - - - - - - - - - - Slavic - - - - - - - - - - - - - - - Germanic - - - - - - - - - - - - - - - North Germanic - - - - - - - - - - - - - - - Old Norse - - - - - - - - - - - - - - - Indo-Iranian - - - - - - - - - - - - - - - Balto-Slavic - - - - - - - - - - - - - - - Osco-Umbrian - - - - - - - - - - - - - - - Latino-Faliscan - - - - - - - - - - - - - - - Tocharian - - - - - - - - - - - - - - - Old Icelandic - - - - - - - - - - - - - - - Old Norwegian - - - - - - - - - - - - - - - Middle Norwegian - - - - - - - - - - - - - - - Middle Danish - - - - - - - - - - - - - - - East Germanic - - - - - - - - - - - - - - - Dardic - - - - - - - - - - - - - - - Indic - - - - - + - + - Bulgarian + Thracian - + - + - Slovene - - - - - - - - - - - - - - - Polish - - - - - - - - - - - - - - - Icelandic - - - - - - - - - - - - - - - Norwegian - - - - - - - - - - - - - - - Faroese - - - - - - - - - - - - - - - Greek - - - - - - - - - - - - - - - Dard + Albanian @@ -1663,17 +1288,392 @@ - + - + - Thracian + Greek + + + + + + + + + + + + + + + Faroese + + + + + + + + + + + + + + + Norwegian + + + + + + + + + + + + + + + Icelandic + + + + + + + + + + + + + + + Polish + + + + + + + + + + + + + + + Slovene + + + + + + + + + + + + + + + Indic + + + + + + + + + + + + + + + Dardic + + + + + + + + + + + + + + + Hellenic + + + + + + + + + + + + + + + East Germanic + + + + + + + + + + + + + + + Middle Danish + + + + + + + + + + + + + + + Middle Norwegian + + + + + + + + + + + + + + + Old Norwegian + + + + + + + + + + + + + + + Old Icelandic + + + + + + + + + + + + + + + Tocharian + + + + + + + + + + + + + + + Latino-Faliscan + + + + + + + + + + + + + + + Osco-Umbrian + + + + + + + + + + + + + + + Balto-Slavic + + + + + + + + + + + + + + + Indo-Iranian + + + + + + + + + + + + + + + Old Norse + + + + + + + + + + + + + + + North Germanic + + + + + + + + + + + + + + + Germanic + + + + + + + + + + + + + + + Slavic + + + + + + + + + + + + + + + West Slavic + + + + + + + + + + + + + + + East Slavic + + + + + + + + + + + + + + + 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 e71ea76669..258b75ed0f 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,317 +1243,32 @@ - - - - - - - - - - - Proto Indo-European - - - - - - - - - - - - - - - Slavic - - - - - - - - - - - - - - - North Germanic - - - - - - - - - - - - - - - Balto-Slavic - - - - - - - - - - - - - - - Osco-Umbrian - - - - - - - - - - - - - - - Latino-Faliscan - - - - - - - - - - - - - - - Tocharian - - - - - - - - - - - - - - - Old Icelandic - - - - - - - - - - - - - - - Old Norwegian - - - - - - - - - - - - - - - Middle Danish - - - - - - - - - - - - - - - East Germanic - - - - - - - - - - - - - - - Dardic - - - - - - - - - - - - - - - Indic - - - - - + - + - Bulgarian + Thracian - + - + - Slovene - - - - - - - - - - - - - - - Polish - - - - - - - - - - - - - - - Icelandic - - - - - - - - - - - - - - - Norwegian - - - - - - - - - - - - - - - Faroese - - - - - - - - - - - - - - - Greek - - - - - - - - - - - - - - - Dard + Albanian @@ -1573,17 +1288,287 @@ - + - + - Thracian + Greek + + + + + + + + + + + + + + + Faroese + + + + + + + + + + + + + + + Norwegian + + + + + + + + + + + + + + + Icelandic + + + + + + + + + + + + + + + Polish + + + + + + + + + + + + + + + Slovene + + + + + + + + + + + + + + + Indic + + + + + + + + + + + + + + + Dardic + + + + + + + + + + + + + + + East Germanic + + + + + + + + + + + + + + + Middle Danish + + + + + + + + + + + + + + + Old Norwegian + + + + + + + + + + + + + + + Old Icelandic + + + + + + + + + + + + + + + Tocharian + + + + + + + + + + + + + + + Latino-Faliscan + + + + + + + + + + + + + + + Osco-Umbrian + + + + + + + + + + + + + + + Balto-Slavic + + + + + + + + + + + + + + + North Germanic + + + + + + + + + + + + + + + Slavic + + + + + + + + + + + + + + + Proto Indo-European @@ -1993,6 +1978,21 @@ + + + + + + + + + + + Bulgarian + + + + @@ -2683,6 +2683,21 @@ + + + + + + + + + + + Dard + + + + @@ -2983,107 +2998,17 @@ - - - - - - - - - - - Albanian - - - - - - - - - - - - - - - East Slavic - - - - - - - - - - - - - - - West Slavic - - - - - - - - - - - - - - - Germanic - - - - - - - - - - - - - - - Old Norse - - - - - - - - - - - - - - - Indo-Iranian - - - - - + - + - Middle Norwegian + Hellenic @@ -3103,17 +3028,92 @@ - + - + - Hellenic + Middle Norwegian + + + + + + + + + + + + + + + Indo-Iranian + + + + + + + + + + + + + + + Old Norse + + + + + + + + + + + + + + + Germanic + + + + + + + + + + + + + + + West Slavic + + + + + + + + + + + + + + + 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 aa73bdcc35..46c3ee16e8 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,377 +2698,17 @@ - - - - - - - - - - - East Slavic - - - - - - - - - - - - - - - West Slavic - - - - - - - - - - - - - - - Slavic - - - - - - - - - - - - - - - Germanic - - - - - - - - - - - - - - - North Germanic - - - - - - - - - - - - - - - Old Norse - - - - - - - - - - - - - - - Indo-Iranian - - - - - - - - - - - - - - - Balto-Slavic - - - - - - - - - - - - - - - Osco-Umbrian - - - - - - - - - - - - - - - Latino-Faliscan - - - - - - - - - - - - - - - Tocharian - - - - - - - - - - - - - - - Old Icelandic - - - - - - - - - - - - - - - Old Norwegian - - - - - - - - - - - - - - - Middle Norwegian - - - - - - - - - - - - - - - Middle Danish - - - - - - - - - - - - - - - East Germanic - - - - - - - - - - - - - - - Hellenic - - - - - - - - - - - - - - - Dardic - - - - - - - - - - - - - - - Indic - - - - - + - + - Slovene - - - - - - - - - - - - - - - Polish - - - - - - - - - - - - - - - Icelandic - - - - - - - - - - - - - - - Norwegian - - - - - - - - - - - - - - - Greek - - - - - - - - - - - - - - - Tocharian A + Thracian @@ -3088,17 +2728,377 @@ - + - + - Thracian + Tocharian A + + + + + + + + + + + + + + + Greek + + + + + + + + + + + + + + + Norwegian + + + + + + + + + + + + + + + Icelandic + + + + + + + + + + + + + + + Polish + + + + + + + + + + + + + + + Slovene + + + + + + + + + + + + + + + Indic + + + + + + + + + + + + + + + Dardic + + + + + + + + + + + + + + + Hellenic + + + + + + + + + + + + + + + East Germanic + + + + + + + + + + + + + + + Middle Danish + + + + + + + + + + + + + + + Middle Norwegian + + + + + + + + + + + + + + + Old Norwegian + + + + + + + + + + + + + + + Old Icelandic + + + + + + + + + + + + + + + Tocharian + + + + + + + + + + + + + + + Latino-Faliscan + + + + + + + + + + + + + + + Osco-Umbrian + + + + + + + + + + + + + + + Balto-Slavic + + + + + + + + + + + + + + + Indo-Iranian + + + + + + + + + + + + + + + Old Norse + + + + + + + + + + + + + + + North Germanic + + + + + + + + + + + + + + + Germanic + + + + + + + + + + + + + + + Slavic + + + + + + + + + + + + + + + West Slavic + + + + + + + + + + + + + + + East Slavic diff --git a/packages/g6/src/behaviors/auto-adapt-label.ts b/packages/g6/src/behaviors/auto-adapt-label.ts index 1261187454..27778d7b3c 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 29cfcfc5ce..e0bca55f43 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 d41292ea0b..00333eb787 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, });