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

rockerBOO · Jan 12, 2022 · 35e18c5 · 35e18c5
1 parent afd15ed
commit 35e18c5
Show file tree

Hide file tree

Showing 2 changed files with 53 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
@@ -718,8 +718,8 @@
     });
   });
 
-  ["DragEnter", "DragLeave", "DragOver", "Drop"].forEach(function (eventType) {
-    QUnit.test("Fabric event fired - " + eventType, function (assert) {
+  ['DragEnter', 'DragLeave', 'DragOver'].forEach(function(eventType) {
+    QUnit.test('Fabric event fired - ' + eventType, function(assert) {
       var eventName = eventType.toLowerCase();
       var counter = 0;
       var c = new fabric.Canvas();
@@ -733,6 +733,7 @@
     });
   });
 
+<<<<<<< HEAD
   ["DragEnter", "DragLeave", "DragOver", "Drop"].forEach(function (eventType) {
     QUnit.test(
       "_simpleEventHandler fires on object and canvas" + eventType,
@@ -762,6 +763,43 @@
         );
       }
     );
+  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) {
+      var eventName = eventType.toLowerCase();
+      var counter = 0;
+      var target;
+      var c = new fabric.Canvas();
+      var rect = new fabric.Rect({ width: 10, height: 10 });
+      c.add(rect);
+      rect.on(eventName, function() {
+        counter++;
+      });
+      c.on(eventName, function(opt) {
+        target = opt.target;
+      });
+      var event = fabric.document.createEvent('HTMLEvents');
+      event.initEvent(eventName, true, true);
+      event.clientX = 5;
+      event.clientY = 5;
+      c.upperCanvasEl.dispatchEvent(event);
+      assert.equal(counter, 1, eventName + ' fabric event fired on rect');
+      assert.equal(target, rect, eventName + ' on canvas has rect as a target');
+    });
   });
 
   ["mousedown", "mousemove", "wheel", "dblclick"].forEach(function (eventType) {