fix: 🐛 should remove selection box after cell was removed

antvis · Jul 28, 2020 · 90e706f · 90e706f
1 parent eb812f5
commit 90e706f
Show file tree

Hide file tree

Showing 9 changed files with 34 additions and 13 deletions.
diff --git a/examples/x6-example-components/package.json b/examples/x6-example-components/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@antv/x6-example-components",
-  "version": "0.10.37",
+  "version": "0.10.38",
   "scripts": {
     "start": "umi dev",
     "build": "umi build",

diff --git a/examples/x6-example-features/package.json b/examples/x6-example-features/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@antv/x6-example-features",
-  "version": "0.10.37",
+  "version": "0.10.38",
   "scripts": {
     "start": "umi dev",
     "build": "umi build",
@@ -10,7 +10,7 @@
     "precommit": "lint-staged"
   },
   "dependencies": {
-    "@antv/x6": "^0.10.37",
+    "@antv/x6": "^0.10.38",
     "@antv/x6-components": "^0.10.1",
     "@antv/x6-react-shape": "^0.10.2",
     "antd": "^4.4.2",

diff --git a/examples/x6-example-features/src/pages/selection/index.tsx b/examples/x6-example-features/src/pages/selection/index.tsx
@@ -14,6 +14,10 @@ export default class Example extends React.Component {
       resizing: {
         enabled: true,
       },
+      keyboard: {
+        enabled: true,
+        global: true,
+      },
       // rotating: {
       //   enabled: true,
       // },
@@ -75,6 +79,10 @@ export default class Example extends React.Component {
     graph.on('edge:unselected', ({ edge }) => {
       console.log('unselected', edge)
     })
+
+    graph.bindKey('backspace', () => {
+      graph.removeCells(graph.getSelectedCells())
+    })
   }
 
   refContainer = (container: HTMLDivElement) => {

diff --git a/examples/x6-example-sites-helper/package.json b/examples/x6-example-sites-helper/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/x6-example-sites-helper",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "private": "true",
   "main": "lib/index.js",
   "module": "es/index.js",

diff --git a/examples/x6-example-sites/package.json b/examples/x6-example-sites/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@antv/x6-example-sites",
   "private": "true",
-  "version": "0.10.37",
+  "version": "0.10.38",
   "workspaces": [
     "packages/**/*"
   ],
@@ -11,9 +11,9 @@
     "clear": "rimraf node_modules yarn.lock && yarn workspaces run clean"
   },
   "dependencies": {
-    "@antv/x6": "^0.10.37",
+    "@antv/x6": "^0.10.38",
     "@antv/x6-components": "^0.10.1",
-    "@antv/x6-example-sites-helper": "^0.1.1",
+    "@antv/x6-example-sites-helper": "^0.1.2",
     "@antv/x6-react-shape": "^0.10.2",
     "antd": "^4.4.2",
     "react": "^16.13.1",

diff --git a/packages/x6-sites/package.json b/packages/x6-sites/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/x6-sites",
-  "version": "0.10.37",
+  "version": "0.10.38",
   "description": "X6 sites deployed on gh-pages",
   "scripts": {
     "clean": "gatsby clean",
@@ -15,7 +15,7 @@
   ],
   "dependencies": {
     "@antv/gatsby-theme-antv": "^0.10.65",
-    "@antv/x6": "^0.10.37",
+    "@antv/x6": "^0.10.38",
     "antd": "^4.4.2",
     "express": "^4.17.1",
     "gatsby": "^2.24.2",

diff --git a/packages/x6/package.json b/packages/x6/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/x6",
-  "version": "0.10.37",
+  "version": "0.10.38",
   "description": "JavaScript diagramming library",
   "main": "lib/index.js",
   "module": "es/index.js",

diff --git a/packages/x6/src/addon/selection/index.ts b/packages/x6/src/addon/selection/index.ts
@@ -94,9 +94,10 @@ export class Selection extends View<Selection.EventArgs> {
     graph.off('scale', this.onTransformed, this)
     graph.off('translate', this.onTransformed, this)
 
+    collection.off('added', this.onCellAdded, this)
     collection.off('removed', this.onCellRemoved, this)
     collection.off('reseted', this.onReseted, this)
-    collection.off('added', this.onCellAdded, this)
+    collection.off('updated', this.onCollectionUpdated, this)
     collection.off('cell:change:*', this.onCellChanged, this)
   }
 
@@ -608,15 +609,27 @@ export class Selection extends View<Selection.EventArgs> {
 
   protected onReseted({ previous, current }: Collection.EventArgs['reseted']) {
     this.destroyAllSelectionBoxes(previous)
-    current.forEach((cell) => this.createSelectionBox(cell))
+    current.forEach((cell) => {
+      this.listenCellRemoveEvent(cell)
+      this.createSelectionBox(cell)
+    })
     this.updateContainer()
   }
 
   protected onCellAdded({ cell }: Collection.EventArgs['added']) {
+    // The collection do not known the cell was removed when cell was
+    // removed by interaction(such as, by "delete" shortcut), so we should
+    // manually listen to cell's remove evnet.
+    this.listenCellRemoveEvent(cell)
     this.createSelectionBox(cell)
     this.updateContainer()
   }
 
+  protected listenCellRemoveEvent(cell: Cell) {
+    cell.off('removed', this.onCellRemoved, this)
+    cell.on('removed', this.onCellRemoved, this)
+  }
+
   protected onCollectionUpdated({
     added,
     removed,

diff --git a/packages/x6/src/global/version.ts b/packages/x6/src/global/version.ts
@@ -3,5 +3,5 @@
 /**
  * Auto generated version file, do not modify it!
  */
-const version = '0.10.37'
+const version = '0.10.38'
 export { version }