Merge pull request williamngan#88 from tibotiber/fix/drop-when-click

fix: bail out of drag mode on simple click
doc22940 · Sep 30, 2019 · 689f5a1 · 689f5a1
2 parents a808c61 + 16f1aa4
commit 689f5a1
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 12 deletions.
diff --git a/dist/es2015/UI.js b/dist/es2015/UI.js
diff --git a/dist/es5.js b/dist/es5.js
diff --git a/dist/index.js b/dist/index.js
diff --git a/dist/pts.js b/dist/pts.js
diff --git a/src/UI.ts b/src/UI.ts
@@ -411,6 +411,7 @@ export class UIDragger extends UIButton {
   private _draggingID:number = -1;
   private _moveHoldID:number = -1;
   private _dropHoldID:number = -1;
+  private _upHoldID:number = -1;
 
   /**
    * Create a dragger which has all the states in UIButton, with additional "dragging" (a boolean indicating whether it's currently being dragged) and "offset" (a Pt representing the offset between this UI's position and the pointer's position when dragged) states. (See [`UI.state`](#link)) You may also create a new UIDragger using one of the static helper like [`UI.fromRectangle`](#link) or [`UI.fromCircle`](#link).
@@ -443,7 +444,10 @@ export class UIDragger extends UIButton {
         this._moveHoldID = this.hold( UA.move ); // keep hold of move
       }
       if (this._dropHoldID === -1) {
-        this._dropHoldID = this.hold( UA.drop ); // keep hold of drop
+        this._dropHoldID = this.hold( UA.drop ); // keep hold of drop (normal drag and drop)
+      }
+      if (this._upHoldID === -1) {
+        this._upHoldID = this.hold( UA.up ); // keep hold of up (cancel dragging if simple click)
       }
       if (this._draggingID === -1) {
         this._draggingID = this.on( UA.move, (t:UI, p:PtLike) => {
@@ -455,8 +459,8 @@ export class UIDragger extends UIButton {
       }
     });
 
-    // Handle pointer drop and end dragging
-    this.on( UA.drop, (target:UI, pt:PtLike, type:string) => {
+    // Handle pointer drop or up and end dragging
+    const endDrag = (target:UI, pt:PtLike, type:string) => {
       this.state('dragging', false);
       // remove move listener
       this.off(UA.move, this._draggingID);
@@ -467,12 +471,17 @@ export class UIDragger extends UIButton {
       // stop keeping hold of drop
       this.unhold( this._dropHoldID );
       this._dropHoldID = -1;
+      // stop keeping hold of up
+      this.unhold( this._upHoldID );
+      this._upHoldID = -1;
       // trigger event
       if ( this.state('moved') ) {
         UI._trigger( this._actions[UA.uidrop], target, pt, UA.uidrop );
         this.state( 'moved', false );
       }
-    });
+    };
+    this.on( UA.drop, endDrag);
+    this.on( UA.up, endDrag);
 
   }