feat: autosize element label (#6068)

.vscode/settings.json

@@ -18,6 +18,7 @@
     "aftertransform",
     "afterviewportanimate",
     "antv",
+    "autosize",
     "batchend",
     "batchstart",
     "bbox",

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;
+};

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';

packages/g6/src/behaviors/fix-element-size.ts

@@ -69,6 +69,12 @@ export interface FixElementSizeOptions extends BaseBehaviorOptions {
    * <en/> 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[];
+  /**
+   * <zh/> Combo 配置项，用于定义哪些属性在视觉上保持固定大小。默认整个 Combo 将被固定
+   *
+   * <en/> 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);

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();

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();

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"
+    }
+  ]
+}

packages/site/examples/behavior/fix-element-size/index.zh.md

@@ -0,0 +1,3 @@
+---
+title: 缩放画布时固定元素大小
+---