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: 缩放画布时固定元素大小 +---