From 156037e0733942bb5590453766dbb20e15047062 Mon Sep 17 00:00:00 2001 From: Yanyan Wang Date: Mon, 14 Mar 2022 15:00:07 +0800 Subject: [PATCH] feat: shouldDeselect param for lasso-select (#3575) * feat: shouldDeselect param for lasso-select; fix: initial collapsed combos with unexpected size; * docs: new docs for comboCombined; docs: update translate and zoom api with animate cfg * chore: refine * feat: support meta and key combination to trigger zoom for scroll-canvas behavior (#3568) * feat: support meta and key combination to trigger zoom for scroll-canvas behavior * docs: fix typo in docs * fix: push ctrl into zoomKey array unexpectedly Co-authored-by: litianyi.troy * chore: update version nums Co-authored-by: Troy Li Co-authored-by: litianyi.troy --- CHANGELOG.md | 5 + packages/core/package.json | 2 +- packages/core/src/global.ts | 2 +- packages/core/src/graph/controller/item.ts | 1 + packages/core/src/graph/controller/layout.ts | 2 +- packages/core/src/graph/graph.ts | 6 +- packages/core/src/types/index.ts | 4 +- packages/element/package.json | 4 +- packages/g6/package.json | 4 +- packages/g6/src/index.ts | 4 +- packages/pc/package.json | 12 +- packages/pc/src/behavior/lasso-select.ts | 19 +-- packages/pc/src/behavior/scroll-canvas.ts | 15 +-- packages/pc/src/global.ts | 2 +- .../tests/unit/layout/combo-combined-spec.ts | 34 +++++- packages/plugin/package.json | 4 +- .../site/docs/api/graphFunc/transform.en.md | 66 ++++++++++- .../site/docs/api/graphFunc/transform.zh.md | 29 ++++- .../site/docs/api/graphLayout/circular.en.md | 3 +- .../site/docs/api/graphLayout/circular.zh.md | 1 + .../docs/api/graphLayout/comboCombined.en.md | 109 ++++++++++++++++++ .../docs/api/graphLayout/comboCombined.zh.md | 108 +++++++++++++++++ .../docs/api/graphLayout/comboForce.en.md | 3 +- .../docs/api/graphLayout/comboForce.zh.md | 5 +- .../docs/api/graphLayout/concentric.en.md | 3 +- .../docs/api/graphLayout/concentric.zh.md | 3 +- .../site/docs/api/graphLayout/dagre.en.md | 3 +- .../site/docs/api/graphLayout/dagre.zh.md | 3 +- .../site/docs/api/graphLayout/force.en.md | 1 + .../site/docs/api/graphLayout/force.zh.md | 3 +- .../docs/api/graphLayout/forceAtlas2.en.md | 3 +- .../docs/api/graphLayout/forceAtlas2.zh.md | 3 +- .../docs/api/graphLayout/fruchterman.en.md | 3 +- .../docs/api/graphLayout/fruchterman.zh.md | 3 +- .../site/docs/api/graphLayout/gforce.en.md | 3 +- .../site/docs/api/graphLayout/gforce.zh.md | 3 +- packages/site/docs/api/graphLayout/grid.en.md | 3 +- packages/site/docs/api/graphLayout/grid.zh.md | 3 +- .../site/docs/api/graphLayout/guide.en.md | 2 +- .../site/docs/api/graphLayout/guide.zh.md | 3 +- packages/site/docs/api/graphLayout/mds.en.md | 3 +- packages/site/docs/api/graphLayout/mds.zh.md | 3 +- .../site/docs/api/graphLayout/radial.en.md | 3 +- .../site/docs/api/graphLayout/radial.zh.md | 3 +- .../site/docs/api/graphLayout/random.en.md | 3 +- .../site/docs/api/graphLayout/random.zh.md | 3 +- .../middle/states/defaultBehavior.en.md | 2 +- .../middle/states/defaultBehavior.zh.md | 2 +- 48 files changed, 442 insertions(+), 69 deletions(-) create mode 100644 packages/site/docs/api/graphLayout/comboCombined.en.md create mode 100644 packages/site/docs/api/graphLayout/comboCombined.zh.md diff --git a/CHANGELOG.md b/CHANGELOG.md index 7dfafd2e0b3..4ecea061823 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,10 @@ # ChangeLog +#### 4.6.3 + +- feat: shouldDeselect param for lasso-select; +- fix: initial collapsed combos with unexpected size; + #### 4.6.1 - fix: layoutController is null problem; diff --git a/packages/core/package.json b/packages/core/package.json index 65257bbe8fc..537c393826f 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g6-core", - "version": "0.6.1", + "version": "0.6.3", "description": "A Graph Visualization Framework in JavaScript", "keywords": [ "antv", diff --git a/packages/core/src/global.ts b/packages/core/src/global.ts index 1d11603d921..4d6b5b32384 100644 --- a/packages/core/src/global.ts +++ b/packages/core/src/global.ts @@ -64,7 +64,7 @@ const colorSet = { }; export default { - version: '0.6.1', + version: '0.6.3', rootContainerClassName: 'root-container', nodeContainerClassName: 'node-container', edgeContainerClassName: 'edge-container', diff --git a/packages/core/src/graph/controller/item.ts b/packages/core/src/graph/controller/item.ts index de645837f3c..e7d4551a148 100644 --- a/packages/core/src/graph/controller/item.ts +++ b/packages/core/src/graph/controller/item.ts @@ -188,6 +188,7 @@ export default class ItemController { setTimeout(() => { if (!item.destroyed) { graph.collapseCombo(item as ICombo); + graph.updateCombo(item as ICombo); } }, 0); } diff --git a/packages/core/src/graph/controller/layout.ts b/packages/core/src/graph/controller/layout.ts index 42792b52b98..bb6e28d7c49 100644 --- a/packages/core/src/graph/controller/layout.ts +++ b/packages/core/src/graph/controller/layout.ts @@ -281,7 +281,7 @@ export default abstract class LayoutController { // 控制布局动画 // eslint-disable-next-line class-methods-use-this - public layoutAnimate() {} + public layoutAnimate() { } // 将当前节点的平均中心移动到原点 public moveToZero() { diff --git a/packages/core/src/graph/graph.ts b/packages/core/src/graph/graph.ts index d80d6792c2d..664e6962981 100644 --- a/packages/core/src/graph/graph.ts +++ b/packages/core/src/graph/graph.ts @@ -2226,9 +2226,13 @@ export default abstract class AbstractGraph extends EventEmitter implements IAbs updateItems(nodes); if (combos && combos.length !== 0) { - self.updateCombos(); if (referComboModel) { updateItems(combos); + setTimeout(() => { + self.updateCombos(); + }, 0); + } else { + self.updateCombos(); } } diff --git a/packages/core/src/types/index.ts b/packages/core/src/types/index.ts index 5d0bbca8876..e19f4e0ad39 100644 --- a/packages/core/src/types/index.ts +++ b/packages/core/src/types/index.ts @@ -133,6 +133,8 @@ export interface LayoutConfig { [key: string]: unknown; } +export type ZoomKeyType = 'shift' | 'ctrl' | 'alt' | 'control' | 'meta'; + export interface ModeOption { type: string; delegate?: boolean; @@ -170,7 +172,7 @@ export interface ModeOption { functionParams?: any[]; relayout?: boolean; brushStyle?: object; - zoomKey?: 'shift' | 'ctrl' | 'alt' | 'control'; + zoomKey?: ZoomKeyType | ZoomKeyType[]; shouldUpdate?: (e: IG6GraphEvent) => boolean; shouldBegin?: (e: IG6GraphEvent) => boolean; shouldEnd?: (e: IG6GraphEvent) => boolean; diff --git a/packages/element/package.json b/packages/element/package.json index ba24d52afa8..12c8c696769 100644 --- a/packages/element/package.json +++ b/packages/element/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g6-element", - "version": "0.6.1", + "version": "0.6.3", "description": "A Graph Visualization Framework in JavaScript", "keywords": [ "antv", @@ -61,7 +61,7 @@ }, "dependencies": { "@antv/g-base": "^0.5.1", - "@antv/g6-core": "*", + "@antv/g6-core": "0.6.3", "@antv/util": "~2.0.5" }, "devDependencies": { diff --git a/packages/g6/package.json b/packages/g6/package.json index 6bfddf07d3b..d108f964825 100644 --- a/packages/g6/package.json +++ b/packages/g6/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g6", - "version": "4.6.1", + "version": "4.6.3", "description": "A Graph Visualization Framework in JavaScript", "keywords": [ "antv", @@ -66,7 +66,7 @@ ] }, "dependencies": { - "@antv/g6-pc": "*" + "@antv/g6-pc": "0.6.3" }, "devDependencies": { "@babel/core": "^7.7.7", diff --git a/packages/g6/src/index.ts b/packages/g6/src/index.ts index a01afdb56e9..5c139c47686 100644 --- a/packages/g6/src/index.ts +++ b/packages/g6/src/index.ts @@ -1,7 +1,7 @@ import G6 from '@antv/g6-pc'; -G6.version = '4.6.1'; +G6.version = '4.6.3'; export * from '@antv/g6-pc'; export default G6; -export const version = '4.6.1'; +export const version = '4.6.3'; diff --git a/packages/pc/package.json b/packages/pc/package.json index 9b8e75059d2..5cd78698aa7 100644 --- a/packages/pc/package.json +++ b/packages/pc/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g6-pc", - "version": "0.6.1", + "version": "0.6.3", "description": "A Graph Visualization Framework in JavaScript", "keywords": [ "antv", @@ -75,11 +75,11 @@ "@antv/g-canvas": "^0.5.2", "@antv/g-math": "^0.1.1", "@antv/g-svg": "^0.5.1", - "@antv/g6-core": "*", - "@antv/g6-element": "*", - "@antv/g6-plugin": "*", + "@antv/g6-core": "0.6.3", + "@antv/g6-element": "0.6.3", + "@antv/g6-plugin": "0.6.3", "@antv/hierarchy": "^0.6.7", - "@antv/layout": "^0.2.0", + "@antv/layout": "^0.2.1", "@antv/matrix-util": "^3.1.0-beta.3", "@antv/path-util": "^2.0.3", "@antv/util": "~2.0.5", @@ -124,4 +124,4 @@ "worker-loader": "^3.0.0", "stats-js": "1.0.1" } -} \ No newline at end of file +} diff --git a/packages/pc/src/behavior/lasso-select.ts b/packages/pc/src/behavior/lasso-select.ts index 856e865058d..795fe74068a 100644 --- a/packages/pc/src/behavior/lasso-select.ts +++ b/packages/pc/src/behavior/lasso-select.ts @@ -32,8 +32,9 @@ export default { stroke: '#DDEEFE', lineWidth: 1, }, - onSelect() {}, - onDeselect() {}, + onSelect() { }, + onDeselect() { }, + shouldDeselect: undefined, selectedState: 'selected', trigger: DEFAULT_TRIGGER, includeEdges: true, @@ -80,7 +81,7 @@ export default { } if (this.selectedNodes && this.selectedNodes.length !== 0) { - this.clearStates(); + this.clearStates('dragstart'); } if (!lasso) { @@ -131,12 +132,16 @@ export default { } return path; }, - clearStates() { - const { graph, selectedState } = this; + clearStates(action = 'canvas:click') { + const { graph, selectedState, shouldDeselect } = this; + const nodes = graph.findAllByState('node', selectedState); const edges = graph.findAllByState('edge', selectedState); - nodes.forEach((node) => graph.setItemState(node, selectedState, false)); - edges.forEach((edge) => graph.setItemState(edge, selectedState, false)); + + if (!shouldDeselect || shouldDeselect({ action, nodes, edges })) { + nodes.forEach((node) => graph.setItemState(node, selectedState, false)); + edges.forEach((edge) => graph.setItemState(edge, selectedState, false)); + } if (this.onDeselect) { this.onDeselect(this.selectedNodes, this.selectedEdges); diff --git a/packages/pc/src/behavior/scroll-canvas.ts b/packages/pc/src/behavior/scroll-canvas.ts index 6795631f8e3..39c6f90423b 100644 --- a/packages/pc/src/behavior/scroll-canvas.ts +++ b/packages/pc/src/behavior/scroll-canvas.ts @@ -1,6 +1,6 @@ import { G6Event, IG6GraphEvent } from '@antv/g6-core'; -const ALLOW_EVENTS = ['shift', 'ctrl', 'alt', 'control']; +const ALLOW_EVENTS = ['shift', 'ctrl', 'alt', 'control', 'meta']; export default { getDefaultCfg(): object { @@ -25,8 +25,9 @@ export default { onWheel(ev: IG6GraphEvent) { const graph = this.graph; - let keyDown = ev[`${this.zoomKey}Key`]; - if (this.zoomKey === 'control') keyDown = ev.ctrlKey; + const zoomKeys = Array.isArray(this.zoomKey) ? [].concat(this.zoomKey) : [this.zoomKey]; + if (zoomKeys.includes('control')) zoomKeys.push('ctrl'); + let keyDown = zoomKeys.some(ele => ev[`${ele}Key`]); if (keyDown) { const canvas = graph.get('canvas'); const point = canvas.getPointByClient(ev.clientX, ev.clientY); @@ -44,11 +45,11 @@ export default { let dx = (ev.deltaX || ev.movementX) as number; let dy = (ev.deltaY || ev.movementY) as number; if (!dy && navigator.userAgent.indexOf('Firefox') > -1) dy = (-ev.wheelDelta * 125) / 3 - + const width = this.graph.get('width'); const height = this.graph.get('height'); const graphCanvasBBox = this.graph.get('canvas').getCanvasBBox(); - + let expandWidth = this.scalableRange as number; let expandHeight = this.scalableRange as number; // 若 scalableRange 是 0~1 的小数，则作为比例考虑 @@ -86,13 +87,13 @@ export default { dy = minY - (height + expandHeight) } } - + if (this.get('direction') === 'x') { dy = 0; } else if (this.get('direction') === 'y') { dx = 0; } - + graph.translate(-dx, -dy); } ev.preventDefault(); diff --git a/packages/pc/src/global.ts b/packages/pc/src/global.ts index 183589e6430..32ac3964448 100644 --- a/packages/pc/src/global.ts +++ b/packages/pc/src/global.ts @@ -7,7 +7,7 @@ const textColor = 'rgb(0, 0, 0)'; const colorSet = getColorsWithSubjectColor(subjectColor, backColor); export default { - version: '0.6.1', + version: '0.6.3', rootContainerClassName: 'root-container', nodeContainerClassName: 'node-container', edgeContainerClassName: 'edge-container', diff --git a/packages/pc/tests/unit/layout/combo-combined-spec.ts b/packages/pc/tests/unit/layout/combo-combined-spec.ts index 1bcebe75738..02d03cdfff0 100644 --- a/packages/pc/tests/unit/layout/combo-combined-spec.ts +++ b/packages/pc/tests/unit/layout/combo-combined-spec.ts @@ -48,11 +48,11 @@ describe('no node and one node', () => { graph.on('afterlayout', () => { expect(testData.nodes[0].x).toBe(250); expect(testData.nodes[0].y).toBe(250); + graph.destroy(); done(); }); graph.data(testData); graph.render(); - graph.destroy(); }); }); @@ -205,8 +205,10 @@ describe('scenario', () => { // 增加动画 combo.getKeyShape().animate({ y: -comboBBox.height / 2, r: 10 }, { duration: 300, easing: 'easeCubic' }); setTimeout(() => { - graph.uncombo(combo.getID()); - graph.layout(); + if (combo && !combo.destroyed) { + graph.uncombo(combo.getID()); + graph.layout(); + } }, 300); // 标记新增的边，用于观察 @@ -295,4 +297,30 @@ describe('scenario', () => { it('senario', () => { }); +}); + +describe('overlap problem', () => { + it('overlap problem', (done) => { + const testData = { "nodes": [{ "id": "node===lca1_server-01.com", "label": "lca1_server-01.com", "comboId": "cluster_lca1-01.com" }, { "id": "node===lor1_server-01.com", "label": "lor1_server-01.com", "comboId": "cluster_lor1-01.com" }, { "id": "node===lor1_server-02.com", "label": "lor1_server-02.com", "comboId": "cluster_lor1-02.com" }, { "id": "node===ltx1_server-01.com", "label": "ltx1_server-01.com", "comboId": "cluster_ltxt1-01.com" }, { "id": "node===lva1-server01.com", "label": "lva1-server01.com", "comboId": "cluster_lva1-01.com" }], "combos": [{ "id": "data_center_lca1", "label": "data_center_lca1", "parentId": null }, { "id": "cluster_lca1-01.com", "label": "cluster_lca1-01.com", "parentId": "data_center_lca1" }, { "id": "data_center_lor1", "label": "data_center_lor1", "parentId": null }, { "id": "cluster_lor1-01.com", "label": "cluster_lor1-01.com", "parentId": "data_center_lor1" }, { "id": "cluster_lor1-02.com", "label": "cluster_lor1-02.com", "parentId": "data_center_lor1" }, { "id": "data_center_ltx1", "label": "data_center_ltx1", "parentId": null }, { "id": "cluster_ltxt1-01.com", "label": "cluster_ltxt1-01.com", "parentId": "data_center_ltx1" }, { "id": "data_center_lva1", "label": "data_center_lva1", "parentId": null }, { "id": "cluster_lva1-01.com", "label": "cluster_lva1-01.com", "parentId": "data_center_lva1" }] } + const graph = new G6.Graph({ + container: div, + layout: { + type: 'comboCombined', + }, + modes: { + default: ['drag-canvas', 'zoom-canvas', 'drag-node', 'drag-combo', 'collapse-expand-combo'] + }, + width: 500, + height: 500, + minZoom: 0.00001 + }); + graph.data(testData); + graph.render(); + + graph.on('canvas:click', e => { + graph.fitView() + }) + graph.destroy(); + done(); + }); }); \ No newline at end of file diff --git a/packages/plugin/package.json b/packages/plugin/package.json index 91862aff5ef..fa339b6da74 100644 --- a/packages/plugin/package.json +++ b/packages/plugin/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g6-plugin", - "version": "0.6.1", + "version": "0.6.3", "description": "G6 Plugin", "main": "lib/index.js", "module": "es/index.js", @@ -22,7 +22,7 @@ "@antv/g-base": "^0.5.1", "@antv/g-canvas": "^0.5.2", "@antv/g-svg": "^0.5.2", - "@antv/g6-core": "*", + "@antv/g6-core": "0.6.3", "@antv/matrix-util": "^3.1.0-beta.3", "@antv/scale": "^0.3.4", "@antv/util": "^2.0.9", diff --git a/packages/site/docs/api/graphFunc/transform.en.md b/packages/site/docs/api/graphFunc/transform.en.md index 5e34d5af94b..7163b114f39 100644 --- a/packages/site/docs/api/graphFunc/transform.en.md +++ b/packages/site/docs/api/graphFunc/transform.en.md @@ -19,6 +19,63 @@ Get the current zoom ratio. const zoom = graph.getZoom(); ``` +### graph.zoom(ratio, center, animate, animateCfg) + +Change the scale of the graph with a relative ratio. + +**Parameters** + +| Name | Type | Required | Description | +| --- | --- | --- | --- | +| ratio | Number | true | Relative zoom ratio | +| center | Object | false | The zoom center. If it is not assigned, (0, 0) will be regarded as the zoom center | +| animate | boolean | false | Whether move the graph with animation. If it is not assigned, animates following the graph's `animate`. | +| animateCfg | Object | false | The animation's configuraiton. Its configurations can be found in [Basic Animation Docs](/en/docs/manual/middle/animation). | + +**Usage** + +```javascript +// zoom to scale 3 at the center (100, 100) +graph.zoom(3, { x: 100, y: 100 }); + +// zoom to scale 0.5 at the center (0, 0) +graph.zoom(0.5); + +// zoom to scale 3 at the center (100, 100) with animation +graph.zoom(3, { x: 100, y: 100 }, true, { + duration: 100, +}); +``` + +### graph.zoomTo(toRatio, center) + +Scale the graph to a target ratio. + +**Parameters** + +| Name | Type | Required | Description | +| --- | --- | --- | --- | +| toRatio | Number | true | The target ratio | +| center | Object | false | The zoom center. If it is not assigned, (0, 0) will be regarded as the zoom center | +| animate | boolean | false | Whether move the graph with animation. If it is not assigned, animates following the graph's `animate`. | +| animateCfg | Object | false | The animation's configuraiton. Its configurations can be found in [Basic Animation Docs](/en/docs/manual/middle/animation). | + +**Usage** + +```javascript +// Scale the graph 3 times at the center (100, 100) +graph.zoomTo(3, { x: 100, y: 100 }); + +// Scale the graph 0.5 times at the center (0, 0) +graph.zoomTo(0.5); + +// Scale the graph 3 times at the center (100, 100) with animation +graph.zoomTo(3, { x: 100, y: 100 }, true, { + duration: 100, +}); +``` + + ### graph.changeSize(width, height) Change the size of the canvas. @@ -36,7 +93,7 @@ Change the size of the canvas. graph.changeSize(600, 350); ``` -### graph.translate(dx, dy) +### graph.translate(dx, dy, animate, animateCfg) Move the canvas with **relative displacement**. @@ -46,11 +103,18 @@ Move the canvas with **relative displacement**. | ---- | ------ | -------- | ----------------------------------------- | | dx | Number | true | Displacement in the horizontal direction. | | dy | Number | true | Displacement in the vertical direction. | +| animate | boolean | false | Whether translate the graph with animation. | +| animateCfg | Object | false | The animation's configuraiton. Its configurations can be found in [Basic Animation Docs](/en/docs/manual/middle/animation). If it is not assigned, animates following the graph's `animateCfg`. | **Usage** ```javascript graph.translate(100, 100); + +// 带动画 +graph.translate(100, 100, true, { + duration: 100, +}); ``` ### graph.moveTo(x, y, animate, animateCfg) diff --git a/packages/site/docs/api/graphFunc/transform.zh.md b/packages/site/docs/api/graphFunc/transform.zh.md index 987e6411980..359843c88b4 100644 --- a/packages/site/docs/api/graphFunc/transform.zh.md +++ b/packages/site/docs/api/graphFunc/transform.zh.md @@ -21,7 +21,7 @@ order: 3 const zoom = graph.getZoom(); ``` -### graph.zoom(ratio, center) +### graph.zoom(ratio, center, animate, animateCfg) 改变视口的缩放比例，在当前画布比例下缩放，是相对比例。 @@ -31,18 +31,25 @@ const zoom = graph.getZoom(); | --- | --- | --- | --- | | ratio | Number | true | 缩放比例 | | center | Object | false | 以 `center` 的 `x`、`y` 坐标为中心缩放，如果省略了 `center` 参数，则以元素当前位置为中心缩放 | +| animate | Boolean | false | 是否开启动画 | +| animateCfg | GraphAnimateConfig | false | 若带有动画，可配置动画，参见[基础动画教程](/zh/docs/manual/middle/animation)。若未配置，则跟随 graph 的 `animateCfg` 参数 | **用法** ```javascript -// 以 (100, 100) 为中心点，放大3倍 +// 以 (100, 100) 为中心点，放大到 3 graph.zoom(3, { x: 100, y: 100 }); // 以当前元素位置为中心，缩小到 0.5 graph.zoom(0.5); + +// 带动画以 (100, 100) 为中心点，放大到 3 +graph.zoom(3, { x: 100, y: 100 }, true, { + duration: 100, +}); ``` -### graph.zoomTo(toRatio, center) +### graph.zoomTo(toRatio, center, animate, animateCfg) 缩放视窗窗口到一个固定比例。 @@ -52,6 +59,8 @@ graph.zoom(0.5); | --- | --- | --- | --- | | toRatio | Number | true | 固定比例值 | | center | Object | false | 以 `center` 的 `x`、`y` 坐标为中心缩放，如果省略了 `center` 参数，则以元素当前位置为中心缩放 | +| animate | Boolean | false | 是否开启动画 | +| animateCfg | GraphAnimateConfig | false | 若带有动画，可配置动画，参见[基础动画教程](/zh/docs/manual/middle/animation)。若未配置，则跟随 graph 的 `animateCfg` 参数 | **用法** @@ -61,6 +70,11 @@ graph.zoomTo(3, { x: 100, y: 100 }); // 以当前元素位置为中心，缩小到 0.5 graph.zoomTo(0.5); + +// 带动画以 (100, 100) 为中心点，放大3倍 +graph.zoomTo(3, { x: 100, y: 100 }, true, { + duration: 100, +}); ``` ### graph.changeSize(width, height) @@ -80,7 +94,7 @@ graph.zoomTo(0.5); graph.changeSize(600, 350); ``` -### graph.translate(dx, dy) +### graph.translate(dx, dy, animate, animateCfg) 采用**相对位移**来平移画布。 @@ -90,11 +104,18 @@ graph.changeSize(600, 350); | ---- | ------ | -------- | ------------ | | dx | Number | true | 水平方向位移 | | dy | Number | true | 垂直方向位移 | +| animate | Boolean | false | 是否开启动画 | +| animateCfg | GraphAnimateConfig | false | 若带有动画，可配置动画，参见[基础动画教程](/zh/docs/manual/middle/animation)。若未配置，则跟随 graph 的 `animateCfg` 参数 | **用法** ```javascript graph.translate(100, 100); + +// 带动画 +graph.translate(100, 100, true, { + duration: 100, +}); ``` ### graph.moveTo(x, y, animate, animateCfg) diff --git a/packages/site/docs/api/graphLayout/circular.en.md b/packages/site/docs/api/graphLayout/circular.en.md index 521c62cc217..47e8d3bd587 100644 --- a/packages/site/docs/api/graphLayout/circular.en.md +++ b/packages/site/docs/api/graphLayout/circular.en.md @@ -63,4 +63,5 @@ const graph = new G6.Graph({ ## layoutCfg.workerEnabled -**Type**: Boolean
**Default**: false
**Required**: false
**Description**: Whether to enable the web-worker in case layout calculation takes too long to block page interaction +**Type**: Boolean
**Default**: false
**Required**: false
**Description**: Whether to enable the web-worker in case layout calculation takes too long to block page interaction. +⚠️ Notice: When `workerEnabled: true`, all the function type parameters are not supported. \ No newline at end of file diff --git a/packages/site/docs/api/graphLayout/circular.zh.md b/packages/site/docs/api/graphLayout/circular.zh.md index c7fc366c486..88512cfe179 100644 --- a/packages/site/docs/api/graphLayout/circular.zh.md +++ b/packages/site/docs/api/graphLayout/circular.zh.md @@ -64,3 +64,4 @@ const graph = new G6.Graph({ ## layoutCfg.workerEnabled **类型**: Boolean
**默认值**: false
**是否必须**: false
**说明**: 是否启用 web-worker 以防布局计算时间过长阻塞页面交互。 +⚠️ 注意: `workerEnabled: true` 时，不支持所有函数类型的参数。 diff --git a/packages/site/docs/api/graphLayout/comboCombined.en.md b/packages/site/docs/api/graphLayout/comboCombined.en.md new file mode 100644 index 00000000000..7ed566e0079 --- /dev/null +++ b/packages/site/docs/api/graphLayout/comboCombined.en.md @@ -0,0 +1,109 @@ +--- +title: ComboCombined +order: 13 +--- + +_It is a new feature of V4.6._ ComboCombined supports configuring layout method for items inside a combo and layout method for the outer combo and nodes. By default, the inner layout is Concentric layout, and the outer layout is Gforce. When you assigning inner layout by yourself, please use the sync layout methods, such as Circular, Concentric, Grid, Dagre, MDS, Radial, or any custom sync layout. You can also assign custom layout method for the outer layout. + +img + +```javascript +const graph = new G6.Graph({ + container: 'mountNode', + width: 1000, + height: 600, + groupByTypes: false, // If you want to have a combo graph with reasonable visual levels of nodes, edges, and combo, set groupByTypes to false + layout: { + type: 'comboCombined', + center: [ 200, 200 ], // The center of the graph by default + onLayoutEnd: () => { + console.log('combo force layout done'); + } + } +); +``` + +### layoutCfg.center + +**Type**: Array
**Example**: [ 0, 0 ]
**Default**: The center of the graph
**Required**: false
**Description**: The center of the layout + +### layoutCfg.nodeSize + +**Type**: Number
**Default**: 10
**Required**: false
**Description**: The diameter of the node. It is used for preventing node overlappings. If `nodeSize` is not assigned, the size property in node data will take effect. If the size in node data does not exist either, `nodeSize` is assigned to 10 by default + +### layoutCfg.spacing + +**Type**: Number / Function
**Default**: 0
**Required**: false
**Example**: Example 1: 10
Example 2: + +```javascript +(d) => { + // d is a node + if (d.id === 'node1') { + return 100; + } + return 10; +}; +``` + +
**Description**: Takes effect when `preventNodeOverlap` or `preventOverlap` is `true`. It is the minimum distance between nodes/combos to prevent node/combo overlappings. It can be a function to define different distances for different nodes (example 2) + +
+ +### layoutCfg.comboPadding + +**Type**: Number / Function
**Default**: 10
**Required**: false
**Example**: Example 1: 10
Example 2: + +```javascript +(d) => { + // d is a combo + if (d.id === 'combo1') { + return 100; + } + return 10; +}; +``` + +### layoutCfg.outerLayout + +```javascript +outerLayout: new G6.Layout['gForce']({ + ... // the parameters for the gForce layout +}); +``` + +**Type**: Object
**Default**: GForce Instance
**Required**: false
**Description**: The outer layout instance, should be a sync layout method. Refer to the corresponding layout docs. The default configuration of the `outerLayout` is: + +```javascript +outerLayout: new G6.Layout['gForce']({ + gravity: 1, + factor: 2, + linkDistance: (edge: any, source: any, target: any) => { + const nodeSize = ((source.size?.[0] || 30) + (target.size?.[0] || 30)) / 2; + return Math.min(nodeSize * 1.5, 700); + } +}); +``` + +### layoutCfg.innerLayout + +```javascript +innerLayout: new G6.Layout['grid']({ + ... // the parameters for the grid layout +}); +``` + +**Type**:Object
**Default**:Concentric Instance
**Required**:false
**Description**: The layout method for the items inside a combo. Refer to the corresponding layout docs. The default configuration of the `outerLayout` is: + +```javascript +outerLayout: new G6.Layout['concentric']({ + sortBy: 'id' +}); +``` + +
**Description**: The padding value inside each combo. It is not about rendering, only used for force calculation + + +### layoutCfg.workerEnabled + +**Type**: Boolean
**Default**: false
**Required**: false
**Description**: Whether to enable the web-worker in case layout calculation takes too long to block page interaction. +⚠️ Notice: When `workerEnabled: true`, all the function type parameters are not supported. diff --git a/packages/site/docs/api/graphLayout/comboCombined.zh.md b/packages/site/docs/api/graphLayout/comboCombined.zh.md new file mode 100644 index 00000000000..ef75ae1a637 --- /dev/null +++ b/packages/site/docs/api/graphLayout/comboCombined.zh.md @@ -0,0 +1,108 @@ +--- +title: Combo 复合布局 ComboCombined +order: 13 +--- + +*V4.6 新增功能。*ComboCombined 支持自由配置 combo 内部元素的布局以及最外层 combo 和节点之间的布局，默认情况下将使用 Concentric 同心圆布局作为内部布局，gForce 力导向布局作为外部布局。能够达到较好的效果以及稳定性。当您指定内部布局时，请使用同步的布局算法，可从以下布局中选择：Circular，Concentric，Grid，Dagre，MDS，Radial，或任何同步的自定义布局。也可以自定义布局作为内部/外部布局。 + +img + +```javascript +const graph = new G6.Graph({ + container: 'mountNode', + width: 1000, + height: 600, + groupByTypes: false, // 若希望在带有 combo 的图上，节点、边、combo 的层级符合常规逻辑，需要将 groupByTypes 设置为 false + layout: { + type: 'comboCombined', + center: [ 200, 200 ], // 可选，默认为图的中心 + onLayoutEnd: () => { // 可选 + console.log('combo force layout done'); + } + } +); +``` + +### layoutCfg.center + +**类型**： Array
**示例**：[ 0, 0 ]
**默认值**：图的中心
**是否必须**：false
**说明**：布局的中心 + +### layoutCfg.nodeSize + +**类型**： Number
**默认值**：10
**是否必须**：false
**说明**：节点大小（直径）。用于碰撞检测。若不指定，则根据传入的节点的 size 属性计算。若即不指定，节点中也没有 `size`，则默认大小为 `10` + +### layoutCfg.spacing + +**类型**: Number / Function
**默认值**: 0
**是否必须**: false
**示例**: Example 1: 10
Example 2: + +```javascript +(d) => { + // d is a node + if (d.id === 'node1') { + return 100; + } + return 10; +}; +``` + +
**描述**: `preventNodeOverlap` 或 `preventOverlap` 为 `true` 时生效, 防止重叠时节点/ combo 边缘间距的最小值。可以是回调函数, 为不同节点设置不同的最小间距, 如示例 2 所示 + +### layoutCfg.comboPadding + +**类型**: Number / Function
**默认值**: 10
**是否必须**: false
**示例**: Example 1: 10
Example 2: + +```javascript +(d) => { + // d is a combo + if (d.id === 'combo1') { + return 100; + } + return 10; +}; +``` + +
**描述**: Combo 内部的 padding 值，不用于渲染，仅用于计算力。推荐设置为与视图上 combo 内部 padding 值相同的值 + +### layoutCfg.outerLayout + +```javascript +outerLayout: new G6.Layout['gForce']({ + ... // 该布局的参数 +}); +``` + +**类型**：Object
**默认值**：GForce 实例
**是否必须**：false
**说明**：最外层的布局算法，需要使用同步的布局算法，默认为 gForce。具体参数详见被使用布局的文档。 +默认情况下 gForce 布局将使用以下参数： + +```javascript +outerLayout: new G6.Layout['gForce']({ + gravity: 1, + factor: 2, + linkDistance: (edge: any, source: any, target: any) => { + const nodeSize = ((source.size?.[0] || 30) + (target.size?.[0] || 30)) / 2; + return Math.min(nodeSize * 1.5, 700); + } +}); +``` + +### layoutCfg.innerLayout + +```javascript +innerLayout: new G6.Layout['grid']({ + ... // 该布局的参数 +}); +``` + +**类型**：Object
**默认值**：Concentric 实例
**是否必须**：false
**说明**：ombo 内部的布局算法，默认为 concentric。具体参数详见被使用布局的文档。 +默认情况下 concentric 布局将使用以下参数： + +```javascript +outerLayout: new G6.Layout['concentric']({ + sortBy: 'id' +}); +``` + +### layoutCfg.workerEnabled + +**类型**: Boolean
**默认值**: false
**是否必须**: false
**说明**: 是否启用 web-worker 以防布局计算时间过长阻塞页面交互。 +⚠️ 注意: `workerEnabled: true` 时，不支持所有函数类型的参数。 diff --git a/packages/site/docs/api/graphLayout/comboForce.en.md b/packages/site/docs/api/graphLayout/comboForce.en.md index fdfc3491361..0c24737c55d 100644 --- a/packages/site/docs/api/graphLayout/comboForce.en.md +++ b/packages/site/docs/api/graphLayout/comboForce.en.md @@ -174,4 +174,5 @@ const graph = new G6.Graph({ ### layoutCfg.workerEnabled -**Type**: Boolean
**Default**: false
**Required**: false
**Description**: Whether to enable the web-worker in case layout calculation takes too long to block page interaction +**Type**: Boolean
**Default**: false
**Required**: false
**Description**: Whether to enable the web-worker in case layout calculation takes too long to block page interaction. +⚠️ Notice: When `workerEnabled: true`, all the function type parameters are not supported. diff --git a/packages/site/docs/api/graphLayout/comboForce.zh.md b/packages/site/docs/api/graphLayout/comboForce.zh.md index a8094ceea25..ba2da850630 100644 --- a/packages/site/docs/api/graphLayout/comboForce.zh.md +++ b/packages/site/docs/api/graphLayout/comboForce.zh.md @@ -1,6 +1,6 @@ --- title: Combo 力导向 ComboForce -order: 11 +order: 12 --- *V3.5 新增功能。*ComboForce 是基于力导向的专用于带有 combo 的图的布局算法。通过自研改造经典力导向算法，将根据节点的 combo 信息，施加不同的力以达到同 combo 节点尽可能聚集，不同 combo 之间尽可能无重叠的布局。 @@ -173,4 +173,5 @@ const graph = new G6.Graph({ ### layoutCfg.workerEnabled -**类型**: Boolean
**默认值**: false
**是否必须**: false
**说明**: 是否启用 web-worker 以防布局计算时间过长阻塞页面交互 +**类型**: Boolean
**默认值**: false
**是否必须**: false
**说明**: 是否启用 web-worker 以防布局计算时间过长阻塞页面交互。 +⚠️ 注意: `workerEnabled: true` 时，不支持所有函数类型的参数。 diff --git a/packages/site/docs/api/graphLayout/concentric.en.md b/packages/site/docs/api/graphLayout/concentric.en.md index 304ac8a4d47..2ae520d8d9e 100644 --- a/packages/site/docs/api/graphLayout/concentric.en.md +++ b/packages/site/docs/api/graphLayout/concentric.en.md @@ -71,4 +71,5 @@ const graph = new G6.Graph({ ## layoutCfg.workerEnabled -**Type**: Boolean
**Default**: false
**Required**: false
**Description**: Whether to enable the web-worker in case layout calculation takes too long to block page interaction +**Type**: Boolean
**Default**: false
**Required**: false
**Description**: Whether to enable the web-worker in case layout calculation takes too long to block page interaction. +⚠️ Notice: When `workerEnabled: true`, all the function type parameters are not supported. diff --git a/packages/site/docs/api/graphLayout/concentric.zh.md b/packages/site/docs/api/graphLayout/concentric.zh.md index 9f78ed67559..742817362fe 100644 --- a/packages/site/docs/api/graphLayout/concentric.zh.md +++ b/packages/site/docs/api/graphLayout/concentric.zh.md @@ -71,4 +71,5 @@ const graph = new G6.Graph({ ## layoutCfg.workerEnabled -**类型**: Boolean
**默认值**: false
**是否必须**: false
**说明**: 是否启用 web-worker 以防布局计算时间过长阻塞页面交互 +**类型**: Boolean
**默认值**: false
**是否必须**: false
**说明**: 是否启用 web-worker 以防布局计算时间过长阻塞页面交互。 +⚠️ 注意: `workerEnabled: true` 时，不支持所有函数类型的参数。 diff --git a/packages/site/docs/api/graphLayout/dagre.en.md b/packages/site/docs/api/graphLayout/dagre.en.md index 8fa1545da76..69d16f1ddb6 100644 --- a/packages/site/docs/api/graphLayout/dagre.en.md +++ b/packages/site/docs/api/graphLayout/dagre.en.md @@ -92,7 +92,8 @@ _Supported by G6 v4.5.1_ ## layoutCfg.workerEnabled -**Type**: Boolean
**Default**: false
**Required**: false
**Description**: Whether to enable the web-worker in case layout calculation takes too long to block page interaction +**Type**: Boolean
**Default**: false
**Required**: false
**Description**: Whether to enable the web-worker in case layout calculation takes too long to block page interaction. +⚠️ Notice: When `workerEnabled: true`, all the function type parameters are not supported. ## layoutCfg.sortByCombo diff --git a/packages/site/docs/api/graphLayout/dagre.zh.md b/packages/site/docs/api/graphLayout/dagre.zh.md index 61b10565860..334a37da1d9 100644 --- a/packages/site/docs/api/graphLayout/dagre.zh.md +++ b/packages/site/docs/api/graphLayout/dagre.zh.md @@ -90,7 +90,8 @@ _自 G6 v4.5.1 起支持。_ ## layoutCfg.workerEnabled -**类型**: Boolean
**默认值**: false
**是否必须**: false
**说明**: 是否启用 web-worker 以防布局计算时间过长阻塞页面交互 +**类型**: Boolean
**默认值**: false
**是否必须**: false
**说明**: 是否启用 web-worker 以防布局计算时间过长阻塞页面交互。 +⚠️ 注意: `workerEnabled: true` 时，不支持所有函数类型的参数。 ## layoutCfg.sortByCombo diff --git a/packages/site/docs/api/graphLayout/force.en.md b/packages/site/docs/api/graphLayout/force.en.md index 4b64fcfaa37..28829e57c2a 100644 --- a/packages/site/docs/api/graphLayout/force.en.md +++ b/packages/site/docs/api/graphLayout/force.en.md @@ -131,3 +131,4 @@ If you want to fix the positions for some nodes during calculation, assign `fx` ## layoutCfg.workerEnabled **Type**: Boolean
**Default**: false
**Required**: false
**Description**: Whether to enable the web-worker in case layout calculation takes too long to block page interaction. +⚠️ Notice: When `workerEnabled: true`, all the function type parameters are not supported. diff --git a/packages/site/docs/api/graphLayout/force.zh.md b/packages/site/docs/api/graphLayout/force.zh.md index d90b76a5d68..2fab96dbe5a 100644 --- a/packages/site/docs/api/graphLayout/force.zh.md +++ b/packages/site/docs/api/graphLayout/force.zh.md @@ -131,4 +131,5 @@ const graph = new G6.Graph({ ## layoutCfg.workerEnabled -**类型**: Boolean
**默认值**: false
**是否必须**: false
**说明**: 是否启用 web-worker 以防布局计算时间过长阻塞页面交互 +**类型**: Boolean
**默认值**: false
**是否必须**: false
**说明**: 是否启用 web-worker 以防布局计算时间过长阻塞页面交互。 +⚠️ 注意: `workerEnabled: true` 时，不支持所有函数类型的参数。 diff --git a/packages/site/docs/api/graphLayout/forceAtlas2.en.md b/packages/site/docs/api/graphLayout/forceAtlas2.en.md index a90b05589e1..2c12bce6e00 100644 --- a/packages/site/docs/api/graphLayout/forceAtlas2.en.md +++ b/packages/site/docs/api/graphLayout/forceAtlas2.en.md @@ -34,7 +34,8 @@ const graph = new G6.Graph({ ## layoutCfg.workerEnabled -**Type**: Boolean
**Default**: false
**Required**: false
**Description**: Whether to enable the web-worker in case layout calculation takes too long to block page interaction +**Type**: Boolean
**Default**: false
**Required**: false
**Description**: Whether to enable the web-worker in case layout calculation takes too long to block page interaction. +⚠️ Notice: When `workerEnabled: true`, all the function type parameters are not supported. ## layoutCfg.kr diff --git a/packages/site/docs/api/graphLayout/forceAtlas2.zh.md b/packages/site/docs/api/graphLayout/forceAtlas2.zh.md index 195aec542f1..94d9abb05dc 100644 --- a/packages/site/docs/api/graphLayout/forceAtlas2.zh.md +++ b/packages/site/docs/api/graphLayout/forceAtlas2.zh.md @@ -34,7 +34,8 @@ const graph = new G6.Graph({ ## layoutCfg.workerEnabled -**类型**: Boolean
**默认值**: false
**是否必须**: false
**说明**: 是否启用 web-worker 以防布局计算时间过长阻塞页面交互 +**类型**: Boolean
**默认值**: false
**是否必须**: false
**说明**: 是否启用 web-worker 以防布局计算时间过长阻塞页面交互。 +⚠️ 注意: `workerEnabled: true` 时，不支持所有函数类型的参数。 ## layoutCfg.kr diff --git a/packages/site/docs/api/graphLayout/fruchterman.en.md b/packages/site/docs/api/graphLayout/fruchterman.en.md index 58f1edae5bf..4d1f2acb68d 100644 --- a/packages/site/docs/api/graphLayout/fruchterman.en.md +++ b/packages/site/docs/api/graphLayout/fruchterman.en.md @@ -54,7 +54,8 @@ If you want to fix the positions for some nodes during calculation, assign `fx` ## layoutCfg.workerEnabled -**Type**: Boolean
**Default**: false
**Required**: false
**Description**: Whether to enable the web-worker in case layout calculation takes too long to block page interaction +**Type**: Boolean
**Default**: false
**Required**: false
**Description**: Whether to enable the web-worker in case layout calculation takes too long to block page interaction. +⚠️ Notice: When `workerEnabled: true`, all the function type parameters are not supported. ## layoutCfg.gpuEnabled diff --git a/packages/site/docs/api/graphLayout/fruchterman.zh.md b/packages/site/docs/api/graphLayout/fruchterman.zh.md index 4bb5df758ba..c0e4d84c050 100644 --- a/packages/site/docs/api/graphLayout/fruchterman.zh.md +++ b/packages/site/docs/api/graphLayout/fruchterman.zh.md @@ -54,7 +54,8 @@ const graph = new G6.Graph({ ## layoutCfg.workerEnabled -**类型**: Boolean
**默认值**: false
**是否必须**: false
**说明**: 是否启用 web-worker 以防布局计算时间过长阻塞页面交互 +**类型**: Boolean
**默认值**: false
**是否必须**: false
**说明**: 是否启用 web-worker 以防布局计算时间过长阻塞页面交互。 +⚠️ 注意: `workerEnabled: true` 时，不支持所有函数类型的参数。 ## layoutCfg.gpuEnabled diff --git a/packages/site/docs/api/graphLayout/gforce.en.md b/packages/site/docs/api/graphLayout/gforce.en.md index 6dcef3ebf65..34305e94fa2 100644 --- a/packages/site/docs/api/graphLayout/gforce.en.md +++ b/packages/site/docs/api/graphLayout/gforce.en.md @@ -125,7 +125,8 @@ If you want to fix the positions for some nodes during calculation, assign `fx` ## layoutCfg.workerEnabled -**Type**: Boolean
**Default**: false
**Required**: false
**Description**: Whether to enable the web-worker in case layout calculation takes too long to block page interaction +**Type**: Boolean
**Default**: false
**Required**: false
**Description**: Whether to enable the web-worker in case layout calculation takes too long to block page interaction. +⚠️ Notice: When `workerEnabled: true`, all the function type parameters are not supported. ## layoutCfg.gpuEnabled diff --git a/packages/site/docs/api/graphLayout/gforce.zh.md b/packages/site/docs/api/graphLayout/gforce.zh.md index 2f302a492df..eaea3bd2e74 100644 --- a/packages/site/docs/api/graphLayout/gforce.zh.md +++ b/packages/site/docs/api/graphLayout/gforce.zh.md @@ -125,7 +125,8 @@ const graph = new G6.Graph({ ## layoutCfg.workerEnabled -**类型**: Boolean
**默认值**: false
**是否必须**: false
**说明**: 是否启用 web-worker 以防布局计算时间过长阻塞页面交互 +**类型**: Boolean
**默认值**: false
**是否必须**: false
**说明**: 是否启用 web-worker 以防布局计算时间过长阻塞页面交互。 +⚠️ 注意: `workerEnabled: true` 时，不支持所有函数类型的参数。 ## layoutCfg.gpuEnabled diff --git a/packages/site/docs/api/graphLayout/grid.en.md b/packages/site/docs/api/graphLayout/grid.en.md index 3fd5c80d712..1ce5d4ba057 100644 --- a/packages/site/docs/api/graphLayout/grid.en.md +++ b/packages/site/docs/api/graphLayout/grid.en.md @@ -60,4 +60,5 @@ const graph = new G6.Graph({ ## layoutCfg.workerEnabled -**Type**: Boolean
**Default**: false
**Required**: false
**Description**: Whether to enable the web-worker in case layout calculation takes too long to block page interaction +**Type**: Boolean
**Default**: false
**Required**: false
**Description**: Whether to enable the web-worker in case layout calculation takes too long to block page interaction. +⚠️ Notice: When `workerEnabled: true`, all the function type parameters are not supported. diff --git a/packages/site/docs/api/graphLayout/grid.zh.md b/packages/site/docs/api/graphLayout/grid.zh.md index c39454edef0..5b9909a172b 100644 --- a/packages/site/docs/api/graphLayout/grid.zh.md +++ b/packages/site/docs/api/graphLayout/grid.zh.md @@ -61,4 +61,5 @@ const graph = new G6.Graph({ ## layoutCfg.workerEnabled -**类型**: Boolean
**默认值**: false
**是否必须**: false
**说明**: 是否启用 web-worker 以防布局计算时间过长阻塞页面交互 +**类型**: Boolean
**默认值**: false
**是否必须**: false
**说明**: 是否启用 web-worker 以防布局计算时间过长阻塞页面交互。 +⚠️ 注意: `workerEnabled: true` 时，不支持所有函数类型的参数。 diff --git a/packages/site/docs/api/graphLayout/guide.en.md b/packages/site/docs/api/graphLayout/guide.en.md index 683cdb03180..4bbe1b9ef41 100644 --- a/packages/site/docs/api/graphLayout/guide.en.md +++ b/packages/site/docs/api/graphLayout/guide.en.md @@ -20,7 +20,7 @@ Notice that the layouts for Graph cannot be used on TreeGraph. - [Dagre Layout](./dagre): Arranges the nodes hierarchically; - [Concentric Layout](./concentric): Arranges the nodes on concentric circles; - [Grid Layout](./grid): Arranges the nodes on grid. -- [Combo Force Layout](./comboForce)：_New feature of V3.5_ Designed for graph with combos. +- [Combo Force Layout](./comboForce)：_New feature of V3.5_ Designed for graph with combos.- [Combo Combined Layout](./comboCombined)：_New feature of V4.6_ Designed for graph with combos. Support configuring the layout for items inside a combo and the layout for the outer combos and nodes. ## Configure to Gaph diff --git a/packages/site/docs/api/graphLayout/guide.zh.md b/packages/site/docs/api/graphLayout/guide.zh.md index a2cd5fd7b04..1f0de17328d 100644 --- a/packages/site/docs/api/graphLayout/guide.zh.md +++ b/packages/site/docs/api/graphLayout/guide.zh.md @@ -23,7 +23,8 @@ G6 提供了以下内置布局算法。可以在[实例化图时配置](#实例 - [Dagre Layout](./dagre)：层次布局； - [Concentric Layout](./concentric)：同心圆布局，将重要（默认以度数为度量）的节点放置在布局中心； - [Grid Layout](./grid)：格子布局，将节点有序（默认是数据顺序）排列在格子上； -- [Combo Force Layout](./comboForce)：*V3.5 新增。*适用于带有 combo 图的力导向布局，推荐有 combo 的图使用该布局。 +- [Combo Force Layout](./comboForce)：*V3.5 新增。*适用于带有 combo 图的力导向布局。 +- [Combo Combined Layout](./comboCombined)：*V4.6 新增。*适用于带有 combo 的图，可自由组合内外布局，默认情况下可以有较好的效果，推荐有 combo 的图使用该布局。 ## 实例化图时使用布局 diff --git a/packages/site/docs/api/graphLayout/mds.en.md b/packages/site/docs/api/graphLayout/mds.en.md index 04fce64603e..0012b49f4f2 100644 --- a/packages/site/docs/api/graphLayout/mds.en.md +++ b/packages/site/docs/api/graphLayout/mds.en.md @@ -27,4 +27,5 @@ const graph = new G6.Graph({ ## layoutCfg.workerEnabled -**Type**: Boolean
**Default**: false
**Required**: false
**Description**: Whether to enable the web-worker in case layout calculation takes too long to block page interaction +**Type**: Boolean
**Default**: false
**Required**: false
**Description**: Whether to enable the web-worker in case layout calculation takes too long to block page interaction. +⚠️ Notice: When `workerEnabled: true`, all the function type parameters are not supported. diff --git a/packages/site/docs/api/graphLayout/mds.zh.md b/packages/site/docs/api/graphLayout/mds.zh.md index ce835e4f6c6..c94c4645dfb 100644 --- a/packages/site/docs/api/graphLayout/mds.zh.md +++ b/packages/site/docs/api/graphLayout/mds.zh.md @@ -27,4 +27,5 @@ const graph = new G6.Graph({ ## layoutCfg.workerEnabled -**类型**: Boolean
**默认值**: false
**是否必须**: false
**说明**: 是否启用 web-worker 以防布局计算时间过长阻塞页面交互 +**类型**: Boolean
**默认值**: false
**是否必须**: false
**说明**: 是否启用 web-worker 以防布局计算时间过长阻塞页面交互。 +⚠️ 注意: `workerEnabled: true` 时，不支持所有函数类型的参数。 diff --git a/packages/site/docs/api/graphLayout/radial.en.md b/packages/site/docs/api/graphLayout/radial.en.md index aa0acba0259..957105567d8 100644 --- a/packages/site/docs/api/graphLayout/radial.en.md +++ b/packages/site/docs/api/graphLayout/radial.en.md @@ -98,4 +98,5 @@ const graph = new G6.Graph({ ## layoutCfg.workerEnabled -**Type**: Boolean
**Default**: false
**Required**: false
**Description**: Whether to enable the web-worker in case layout calculation takes too long to block page interaction +**Type**: Boolean
**Default**: false
**Required**: false
**Description**: Whether to enable the web-worker in case layout calculation takes too long to block page interaction. +⚠️ Notice: When `workerEnabled: true`, all the function type parameters are not supported. diff --git a/packages/site/docs/api/graphLayout/radial.zh.md b/packages/site/docs/api/graphLayout/radial.zh.md index 1a381c2f1be..7f1a8b7e06b 100644 --- a/packages/site/docs/api/graphLayout/radial.zh.md +++ b/packages/site/docs/api/graphLayout/radial.zh.md @@ -98,4 +98,5 @@ const graph = new G6.Graph({ ## layoutCfg.workerEnabled -**类型**: Boolean
**默认值**: false
**是否必须**: false
**说明**: 是否启用 web-worker 以防布局计算时间过长阻塞页面交互 +**类型**: Boolean
**默认值**: false
**是否必须**: false
**说明**: 是否启用 web-worker 以防布局计算时间过长阻塞页面交互。 +⚠️ 注意: `workerEnabled: true` 时，不支持所有函数类型的参数。 diff --git a/packages/site/docs/api/graphLayout/random.en.md b/packages/site/docs/api/graphLayout/random.en.md index 991971f2c7d..d11432e2369 100644 --- a/packages/site/docs/api/graphLayout/random.en.md +++ b/packages/site/docs/api/graphLayout/random.en.md @@ -34,4 +34,5 @@ const graph = new G6.Graph({ ## layoutCfg.workerEnabled -**Type**: Boolean
**Default**: false
**Required**: false
**Description**: Whether to enable the web-worker in case layout calculation takes too long to block page interaction +**Type**: Boolean
**Default**: false
**Required**: false
**Description**: Whether to enable the web-worker in case layout calculation takes too long to block page interaction. +⚠️ Notice: When `workerEnabled: true`, all the function type parameters are not supported. diff --git a/packages/site/docs/api/graphLayout/random.zh.md b/packages/site/docs/api/graphLayout/random.zh.md index 4249bd14120..9df4cf707d4 100644 --- a/packages/site/docs/api/graphLayout/random.zh.md +++ b/packages/site/docs/api/graphLayout/random.zh.md @@ -34,4 +34,5 @@ const graph = new G6.Graph({ ## layoutCfg.workerEnabled -**类型**: Boolean
**默认值**: false
**是否必须**: false
**说明**: 是否启用 web-worker 以防布局计算时间过长阻塞页面交互 +**类型**: Boolean
**默认值**: false
**是否必须**: false
**说明**: 是否启用 web-worker 以防布局计算时间过长阻塞页面交互。 +⚠️ 注意: `workerEnabled: true` 时，不支持所有函数类型的参数。 diff --git a/packages/site/docs/manual/middle/states/defaultBehavior.en.md b/packages/site/docs/manual/middle/states/defaultBehavior.en.md index e00fd3b8361..ab3330f50c7 100644 --- a/packages/site/docs/manual/middle/states/defaultBehavior.en.md +++ b/packages/site/docs/manual/middle/states/defaultBehavior.en.md @@ -160,7 +160,7 @@ The canvas can be dragged along x direction only.
diff --git a/packages/site/docs/manual/middle/states/defaultBehavior.zh.md b/packages/site/docs/manual/middle/states/defaultBehavior.zh.md index aa2b5751b85..a8d11962e53 100644 --- a/packages/site/docs/manual/middle/states/defaultBehavior.zh.md +++ b/packages/site/docs/manual/middle/states/defaultBehavior.zh.md @@ -162,7 +162,7 @@ const graph = new G6.Graph({ - `type: 'scroll-canvas'`； - `direction`：允许拖拽方向，支持`'x'`，`'y'`，`'both'`，默认方向为 `'both'`； - `enableOptimize`：是否开启优化，开启后拖动画布过程中隐藏所有的边及节点上非 keyShape 部分，默认关闭； - - `zoomKey`：切换为滚动缩放的键盘按钮，按住该键并滚动滚轮，则切换为滚轮缩放画布，可选项为：`'shift'`，`'ctrl'`，`'alt'`，`'control'`； + - `zoomKey`：切换为滚动缩放的键盘按钮，按住该键并滚动滚轮，则切换为滚轮缩放画布，可选项为：`'shift'`，`'ctrl'`，`'alt'`，`'control'`，`'meta'`, 可使用数组监听多个按键，任意按键按下时都会触发缩放； - `scalableRange`：拖动 canvas 可扩展的范围，默认为 0，值为 -1 ～ 1 代表可超出视口的范围的比例值（相对于视口大小）。值小于 -1 或大于 1 时，为正和负数时的效果如下图所示。