fix: 🐛 'blank:click' was not triggered when rubberband is enabled

solved by delay the creation of selection box fix #222
antvis · Aug 29, 2020 · 5046487 · 5046487
1 parent 2bc7ae9
commit 5046487
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 9 deletions.
diff --git a/examples/x6-example-features/src/pages/selection/index.tsx b/examples/x6-example-features/src/pages/selection/index.tsx
@@ -90,6 +90,14 @@ export default class Example extends React.Component {
       graph.removeCells(graph.getSelectedCells())
     })
 
+    graph.on('blank:mousedown', () => {
+      console.log('blank:mousedown')
+    })
+
+    graph.on('blank:click', () => {
+      console.log('blank:click')
+    })
+
     graph.select(a)
     graph.select([b, c])
   }

diff --git a/packages/x6/src/addon/selection/index.ts b/packages/x6/src/addon/selection/index.ts
@@ -201,16 +201,13 @@ export class Selection extends View<Selection.EventArgs> {
       y = evt.clientY - offset.top + window.pageYOffset + scrollTop
     }
 
-    this.$container
-      .css({
-        width: 1,
-        height: 1,
-        left: x,
-        top: y,
-      })
-      .appendTo(this.graph.container)
+    this.$container.css({
+      top: y,
+      left: x,
+      width: 1,
+      height: 1,
+    })
 
-    this.showRubberband()
     this.setEventData<EventData.Selecting>(evt, {
       action: 'selecting',
       clientX: evt.clientX,
@@ -309,6 +306,11 @@ export class Selection extends View<Selection.EventArgs> {
     switch (action) {
       case 'selecting': {
         const data = eventData as EventData.Selecting
+        if (data.moving !== true) {
+          this.$container.appendTo(this.graph.container)
+          this.showRubberband()
+          data.moving = true
+        }
         const dx = e.clientX - data.clientX
         const dy = e.clientY - data.clientY
         const left = parseInt(this.$container.css('left'), 10)
@@ -973,6 +975,7 @@ namespace EventData {
 
   export interface Selecting extends Common {
     action: 'selecting'
+    moving?: boolean
     clientX: number
     clientY: number
     offsetX: number