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 <[email protected]> * chore: update version nums Co-authored-by: Troy Li <[email protected]> Co-authored-by: litianyi.troy <[email protected]>
antvis · Mar 14, 2022 · 156037e · 156037e
1 parent 6b6f81c
commit 156037e
Show file tree

Hide file tree

Showing 48 changed files with 442 additions and 69 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"
   }
-}
+}
diff --git 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
@@ -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
@@ -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
@@ -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();
+  });
 });
diff --git 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",