diff --git a/.vscode/settings.json b/.vscode/settings.json
index 8e916bf5f91..9f5a6faad33 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -18,6 +18,7 @@
"aftertransform",
"afterviewportanimate",
"antv",
+ "autosize",
"batchend",
"batchstart",
"bbox",
diff --git a/packages/g6/__tests__/demos/demo-autosize-element-label.ts b/packages/g6/__tests__/demos/demo-autosize-element-label.ts
new file mode 100644
index 00000000000..f98f1301d37
--- /dev/null
+++ b/packages/g6/__tests__/demos/demo-autosize-element-label.ts
@@ -0,0 +1,66 @@
+import type { FixShapeConfig } from '@/src';
+import { Graph } from '@/src';
+
+const mockText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit';
+
+const fixLabelConfig: FixShapeConfig = {
+ shape: (shapes) => shapes.find((shape) => shape.parentElement?.className === 'label' && shape.className === 'text')!,
+ fields: ['fontSize', 'lineHeight'],
+};
+
+export const demoAutosizeElementLabel: TestCase = async (context) => {
+ const graph = new Graph({
+ ...context,
+ data: {
+ nodes: [
+ { id: 'node1', combo: 'combo1', style: { x: 100, y: 100 } },
+ { id: 'node2', style: { x: 300, y: 300 } },
+ ],
+ edges: [{ id: 'edge1', source: 'node1', target: 'node2' }],
+ combos: [{ id: 'combo1', label: mockText }],
+ },
+ node: {
+ style: {
+ labelMaxLines: 3,
+ labelMaxWidth: '200%',
+ labelText: mockText,
+ labelWordWrap: true,
+ },
+ },
+ edge: {
+ style: {
+ labelMaxLines: 2,
+ labelMaxWidth: '60%',
+ labelText: mockText,
+ labelWordWrap: true,
+ },
+ },
+ combo: {
+ style: {
+ labelMaxLines: 1,
+ labelMaxWidth: '200%',
+ labelText: mockText,
+ labelWordWrap: true,
+ },
+ },
+ behaviors: [
+ {
+ type: 'fix-element-size',
+ key: 'fix-element-size',
+ enable: true,
+ state: undefined,
+ node: [fixLabelConfig],
+ edge: [fixLabelConfig],
+ combo: [fixLabelConfig],
+ },
+ 'zoom-canvas',
+ 'drag-canvas',
+ 'drag-element',
+ ],
+ autoFit: 'center',
+ });
+
+ await graph.render();
+
+ return graph;
+};
diff --git a/packages/g6/__tests__/demos/index.ts b/packages/g6/__tests__/demos/index.ts
index 13e723e1da2..16dc89c354e 100644
--- a/packages/g6/__tests__/demos/index.ts
+++ b/packages/g6/__tests__/demos/index.ts
@@ -25,6 +25,7 @@ export { caseOrgChart } from './case-org-chart';
export { elementCombo } from './combo';
export { commonGraph } from './common-graph';
export { controllerViewport } from './controller-viewport';
+export { demoAutosizeElementLabel } from './demo-autosize-element-label';
export { elementChangeType } from './element-change-type';
export { elementEdgeArrow } from './element-edge-arrow';
export { elementEdgeCubic } from './element-edge-cubic';
diff --git a/packages/g6/src/behaviors/fix-element-size.ts b/packages/g6/src/behaviors/fix-element-size.ts
index 79b7ab70301..8a3feac833f 100644
--- a/packages/g6/src/behaviors/fix-element-size.ts
+++ b/packages/g6/src/behaviors/fix-element-size.ts
@@ -69,6 +69,12 @@ export interface FixElementSizeOptions extends BaseBehaviorOptions {
* Edge configuration for defining which edge attributes should remain fixed in size visually. By default, the lineWidth and labelFontSize attributes are fixed
*/
edge?: FixShapeConfig | FixShapeConfig[];
+ /**
+ * Combo 配置项,用于定义哪些属性在视觉上保持固定大小。默认整个 Combo 将被固定
+ *
+ * Combo configuration for defining which combo attributes should remain fixed in size visually. By default, the entire combo will be fixed
+ */
+ combo?: FixShapeConfig | FixShapeConfig[];
}
/**
@@ -88,7 +94,7 @@ export class FixElementSize extends BaseBehavior {
{
shape: (shapes: DisplayObject[]) =>
shapes.find((shape) => shape.parentElement?.className === 'label' && shape.className === 'text')!,
- fields: ['fontSize'],
+ fields: ['fontSize', 'lineHeight'],
},
],
};
@@ -106,8 +112,14 @@ export class FixElementSize extends BaseBehavior {
if (!this.isZoomEvent(event) || !this.validate(event)) return;
const { graph, element } = this.context;
- const { node, edge, state } = this.options;
- const elementData = [...graph.getElementDataByState('node', state), ...graph.getElementDataByState('edge', state)];
+ const { state } = this.options;
+ const elementData = state
+ ? [
+ ...graph.getElementDataByState('node', state),
+ ...graph.getElementDataByState('edge', state),
+ ...graph.getElementDataByState('combo', state),
+ ]
+ : Object.values(graph.getData()).flat();
if (!elementData.length) return;
@@ -117,7 +129,7 @@ export class FixElementSize extends BaseBehavior {
const el = element?.getElement(id) as Element;
const type = graph.getElementType(id);
- const config = type === 'edge' ? edge : node;
+ const config = this.options[type];
if (!config) {
this.elementCache.set(id, el);
diff --git a/packages/site/examples/behavior/fix-element-size/demo/autosize-label.js b/packages/site/examples/behavior/fix-element-size/demo/autosize-label.js
new file mode 100644
index 00000000000..60e4e31a606
--- /dev/null
+++ b/packages/site/examples/behavior/fix-element-size/demo/autosize-label.js
@@ -0,0 +1,89 @@
+import { Graph } from '@antv/g6';
+
+const data = {
+ nodes: [
+ { id: 'node0', size: 50, label: '0', style: { x: 326, y: 268 } },
+ { id: 'node1', size: 30, label: '1', style: { x: 280, y: 384 } },
+ { id: 'node2', size: 30, label: '2', style: { x: 234, y: 167 } },
+ { id: 'node3', size: 30, label: '3', style: { x: 391, y: 368 } },
+ { id: 'node4', size: 30, label: '4', style: { x: 444, y: 209 } },
+ { id: 'node5', size: 30, label: '5', style: { x: 378, y: 157 } },
+ { id: 'node6', size: 15, label: '6', style: { x: 229, y: 400 } },
+ { id: 'node7', size: 15, label: '7', style: { x: 281, y: 440 } },
+ { id: 'node8', size: 15, label: '8', style: { x: 188, y: 119 } },
+ { id: 'node9', size: 15, label: '9', style: { x: 287, y: 157 } },
+ { id: 'node10', size: 15, label: '10', style: { x: 185, y: 200 } },
+ { id: 'node11', size: 15, label: '11', style: { x: 238, y: 110 } },
+ { id: 'node12', size: 15, label: '12', style: { x: 239, y: 221 } },
+ { id: 'node13', size: 15, label: '13', style: { x: 176, y: 160 } },
+ { id: 'node14', size: 15, label: '14', style: { x: 389, y: 423 } },
+ { id: 'node15', size: 15, label: '15', style: { x: 441, y: 341 } },
+ { id: 'node16', size: 15, label: '16', style: { x: 442, y: 398 } },
+ ],
+ edges: [
+ { source: 'node0', target: 'node1', label: '0-1' },
+ { source: 'node0', target: 'node2', label: '0-2' },
+ { source: 'node0', target: 'node3', label: '0-3' },
+ { source: 'node0', target: 'node4', label: '0-4' },
+ { source: 'node0', target: 'node5', label: '0-5' },
+ { source: 'node1', target: 'node6', label: '1-6' },
+ { source: 'node1', target: 'node7', label: '1-7' },
+ { source: 'node2', target: 'node8', label: '2-8' },
+ { source: 'node2', target: 'node9', label: '2-9' },
+ { source: 'node2', target: 'node10', label: '2-10' },
+ { source: 'node2', target: 'node11', label: '2-11' },
+ { source: 'node2', target: 'node12', label: '2-12' },
+ { source: 'node2', target: 'node13', label: '2-13' },
+ { source: 'node3', target: 'node14', label: '3-14' },
+ { source: 'node3', target: 'node15', label: '3-15' },
+ { source: 'node3', target: 'node16', label: '3-16' },
+ ],
+};
+
+const graph = new Graph({
+ container: 'container',
+ data,
+ node: {
+ style: {
+ labelText: (d) => d.id,
+ labelMaxWidth: '200%',
+ labelWordWrap: true,
+ size: (d) => d.size,
+ },
+ },
+ edge: {
+ style: {
+ labelText: (d) => `${d.source}-${d.target}`,
+ labelWordWrap: true,
+ labelMaxLines: 2,
+ labelMaxWidth: '60%',
+ },
+ },
+ behaviors: [
+ {
+ type: 'fix-element-size',
+ key: 'fix-element-size',
+ enable: true,
+ state: undefined,
+ node: [
+ {
+ shape: (shapes) =>
+ shapes.find((shape) => shape.parentElement?.className === 'label' && shape.className === 'text'),
+ fields: ['fontSize', 'lineHeight'],
+ },
+ ],
+ edge: [
+ {
+ shape: (shapes) =>
+ shapes.find((shape) => shape.parentElement?.className === 'label' && shape.className === 'text'),
+ fields: ['fontSize', 'lineHeight'],
+ },
+ ],
+ },
+ 'zoom-canvas',
+ 'drag-canvas',
+ ],
+ autoFit: 'center',
+});
+
+graph.render();
diff --git a/packages/site/examples/behavior/fix-element-size/demo/fix-size.js b/packages/site/examples/behavior/fix-element-size/demo/fix-size.js
new file mode 100644
index 00000000000..3f41fc61b26
--- /dev/null
+++ b/packages/site/examples/behavior/fix-element-size/demo/fix-size.js
@@ -0,0 +1,78 @@
+import { Graph } from '@antv/g6';
+
+const data = {
+ nodes: [
+ { id: 'node0', size: 50, label: '0', style: { x: 326, y: 268 }, states: ['selected'] },
+ { id: 'node1', size: 30, label: '1', style: { x: 280, y: 384 }, states: ['selected'] },
+ { id: 'node2', size: 30, label: '2', style: { x: 234, y: 167 } },
+ { id: 'node3', size: 30, label: '3', style: { x: 391, y: 368 } },
+ { id: 'node4', size: 30, label: '4', style: { x: 444, y: 209 } },
+ { id: 'node5', size: 30, label: '5', style: { x: 378, y: 157 } },
+ { id: 'node6', size: 15, label: '6', style: { x: 229, y: 400 } },
+ { id: 'node7', size: 15, label: '7', style: { x: 281, y: 440 } },
+ { id: 'node8', size: 15, label: '8', style: { x: 188, y: 119 } },
+ { id: 'node9', size: 15, label: '9', style: { x: 287, y: 157 } },
+ { id: 'node10', size: 15, label: '10', style: { x: 185, y: 200 } },
+ { id: 'node11', size: 15, label: '11', style: { x: 238, y: 110 } },
+ { id: 'node12', size: 15, label: '12', style: { x: 239, y: 221 } },
+ { id: 'node13', size: 15, label: '13', style: { x: 176, y: 160 } },
+ { id: 'node14', size: 15, label: '14', style: { x: 389, y: 423 } },
+ { id: 'node15', size: 15, label: '15', style: { x: 441, y: 341 } },
+ { id: 'node16', size: 15, label: '16', style: { x: 442, y: 398 } },
+ ],
+ edges: [
+ { source: 'node0', target: 'node1', label: '0-1', states: ['selected'] },
+ { source: 'node0', target: 'node2', label: '0-2' },
+ { source: 'node0', target: 'node3', label: '0-3' },
+ { source: 'node0', target: 'node4', label: '0-4' },
+ { source: 'node0', target: 'node5', label: '0-5' },
+ { source: 'node1', target: 'node6', label: '1-6' },
+ { source: 'node1', target: 'node7', label: '1-7' },
+ { source: 'node2', target: 'node8', label: '2-8' },
+ { source: 'node2', target: 'node9', label: '2-9' },
+ { source: 'node2', target: 'node10', label: '2-10' },
+ { source: 'node2', target: 'node11', label: '2-11' },
+ { source: 'node2', target: 'node12', label: '2-12' },
+ { source: 'node2', target: 'node13', label: '2-13' },
+ { source: 'node3', target: 'node14', label: '3-14' },
+ { source: 'node3', target: 'node15', label: '3-15' },
+ { source: 'node3', target: 'node16', label: '3-16' },
+ ],
+};
+
+const graph = new Graph({
+ container: 'container',
+ data,
+ node: {
+ style: {
+ labelText: (d) => d.label,
+ size: (d) => d.size,
+ lineWidth: 1,
+ },
+ },
+ edge: { style: { labelText: (d) => d.label } },
+ behaviors: [
+ 'zoom-canvas',
+ {
+ type: 'fix-element-size',
+ key: 'fix-element-size',
+ enable: (event) => event.data.scale < 1,
+ state: 'selected',
+ edge: [
+ {
+ shape: (shapes) => shapes.find((shape) => shape.className === 'key'),
+ fields: ['lineWidth'],
+ },
+ {
+ shape: (shapes) =>
+ shapes.find((shape) => shape.parentElement?.className === 'label' && shape.className === 'text'),
+ fields: ['fontSize', 'lineHeight'],
+ },
+ ],
+ },
+ { type: 'click-select', key: 'click-select', multiple: true },
+ ],
+ autoFit: 'center',
+});
+
+graph.render();
diff --git a/packages/site/examples/behavior/fix-element-size/demo/meta.json b/packages/site/examples/behavior/fix-element-size/demo/meta.json
new file mode 100644
index 00000000000..4919c82559d
--- /dev/null
+++ b/packages/site/examples/behavior/fix-element-size/demo/meta.json
@@ -0,0 +1,24 @@
+{
+ "title": {
+ "zh": "中文分类",
+ "en": "Category"
+ },
+ "demos": [
+ {
+ "filename": "fix-size.js",
+ "title": {
+ "zh": "缩放过程中固定选中元素",
+ "en": "Fix Element Size While Zooming"
+ },
+ "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*ipfbT61guFYAAAAAAAAAAAAADmJ7AQ/original"
+ },
+ {
+ "filename": "autosize-label.js",
+ "title": {
+ "zh": "缩放过程中动态调整标签的最大长度",
+ "en": "Auto Size Label While Zooming"
+ },
+ "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*PnrKRYX70pIAAAAAAAAAAAAADmJ7AQ/original"
+ }
+ ]
+}
diff --git a/packages/site/examples/behavior/fix-element-size/index.en.md b/packages/site/examples/behavior/fix-element-size/index.en.md
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/packages/site/examples/behavior/fix-element-size/index.zh.md b/packages/site/examples/behavior/fix-element-size/index.zh.md
new file mode 100644
index 00000000000..ec4fd43624c
--- /dev/null
+++ b/packages/site/examples/behavior/fix-element-size/index.zh.md
@@ -0,0 +1,3 @@
+---
+title: 缩放画布时固定元素大小
+---