feat(): drop:before event (#7442)

fabricjs · Jan 9, 2022 · 176a4e9 · 176a4e9
1 parent ae80776
commit 176a4e9
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 3 deletions.
diff --git a/src/mixins/canvas_events.mixin.js b/src/mixins/canvas_events.mixin.js
@@ -106,7 +106,7 @@
       this._onDragOver = this._onDragOver.bind(this);
       this._onDragEnter = this._simpleEventHandler.bind(this, 'dragenter');
       this._onDragLeave = this._simpleEventHandler.bind(this, 'dragleave');
-      this._onDrop = this._simpleEventHandler.bind(this, 'drop');
+      this._onDrop = this._onDrop.bind(this);
       this.eventsBound = true;
     },
 
@@ -218,6 +218,18 @@
       this._fireEnterLeaveEvents(target, e);
     },
 
+    /**
+     * `drop:before` is a an event that allow you to schedule logic
+     * before the `drop` event. Prefer `drop` event always, but if you need
+     * to run some drop-disabling logic on an event, since there is no way
+     * to handle event handlers ordering, use `drop:before`
+     * @param {Event} e
+     */
+    _onDrop: function (e) {
+      this._simpleEventHandler('drop:before', e);
+      return this._simpleEventHandler('drop', e);
+    },
+
     /**
      * @private
      * @param {Event} e Event object fired on mousedown

diff --git a/test/unit/canvas_events.js b/test/unit/canvas_events.js
@@ -459,7 +459,7 @@
     });
   });
 
-  ['DragEnter', 'DragLeave', 'DragOver', 'Drop'].forEach(function(eventType) {
+  ['DragEnter', 'DragLeave', 'DragOver'].forEach(function(eventType) {
     QUnit.test('Fabric event fired - ' + eventType, function(assert) {
       var eventName = eventType.toLowerCase();
       var counter = 0;
@@ -474,8 +474,23 @@
     });
   });
 
+  QUnit.test('Fabric event fired - Drop', function (assert) {
+    var eventNames = ['drop:before', 'drop'];
+    var c = new fabric.Canvas();
+    var fired = [];
+    eventNames.forEach(function (eventName) {
+      c.on(eventName, function () {
+        fired.push(eventName);
+      });
+    });
+    var event = fabric.document.createEvent('HTMLEvents');
+    event.initEvent('drop', true, true);
+    c.upperCanvasEl.dispatchEvent(event);
+    assert.deepEqual(fired, eventNames, 'bad drop event fired');
+  });
+
   ['DragEnter', 'DragLeave', 'DragOver', 'Drop'].forEach(function(eventType) {
-    QUnit.test('_simpleEventHandler fires on object and canvas' + eventType, function(assert) {
+    QUnit.test('_simpleEventHandler fires on object and canvas - ' + eventType, function(assert) {
       var eventName = eventType.toLowerCase();
       var counter = 0;
       var target;