Add dragover event

[Tsourdox]

I'm trying write an application to drag & drop html images onto the canvas. The problem with the current available events is that they won't fire when dragging an image over the canvas. If this event was supported it would be a lot easier to, for example, have an object in the canvas change it's appearance to let the user know that the image can be dropped onto the object.

Thx for a nice library 🙏🏼

[asturur]

is an easy implementation and we should add it.
If you have idea how to do it, you can start.
Please look like at the moseWheel event implementation, is sort of the same thing.

[asturur]

@Tsourdox this is a basic implementation:
#4421

Why you do not give a shot to see if it was what you were looking for?

[Tsourdox]

@asturur Looked at the implementation, tweaked it a little to get it to work. Almost what I was looking for but it doesn't fire for objects in the canvas.

Found the __onMouseMove & _fireOverOutEvents implementation which seems to be what I'm looking for but for onDrag. Added the following function as seen below. onDragEnter & onDragLeave now triggeres for both canvas and objects if events are applied directly to the canvas. Tho if the events are applied on an object nothing is fired... Any thoughts?

`

   /**
   * Method that defines the actions when draging over the canvas.
   * @private
   * @param {Event} e Event object fired on mousemove
   */
  __onDragOver: function (e) {

    var target = this.findTarget(e);
    this._setCursorFromEvent(e, target);
    this._fireDragEnterLeaveEvents(target, e);
    
    this._handleEvent(e, 'dragover', target);
  },

  /**
   * @private
   */
  _fireDragEnterLeaveEvents: function(target, e) {
    var overOpt, outOpt, hoveredTarget = this._hoveredTarget;
    if (hoveredTarget !== target) {
      overOpt = { e: e, target: target, previousTarget: this._hoveredTarget };
      outOpt = { e: e, target: this._hoveredTarget, nextTarget: target };
      this._hoveredTarget = target;
    }
    if (target) {
      if (hoveredTarget !== target) {
        if (hoveredTarget) {
          this.fire('mouse:dragleave', outOpt);
          hoveredTarget.fire('dragleave', outOpt);
        }
        this.fire('mouse:dragenter', overOpt);
        target.fire('dragenter', overOpt);
      }
    }
    else if (hoveredTarget) {
      this.fire('mouse:dragleave', outOpt);
      hoveredTarget.fire('dragleave', outOpt);
    }
  },

`

[asturur]

yes apart i noticed i left some error around, i do not want to support drag enter and drag leave on a per object basis.
I do not want to add the mouse: prefix to events and divide them.
Event should have that name and fire both on the canvas or on the objects.

All the events (apart dragEnter and dragLeave) should be already working on a per object basis ( dragOver and drop basically ) while for enter and leave we need to do something like you did.

After that initial sketch i did not have time to iterate over.

[Tsourdox]

Will you have time to do this implementation or will I have to be the one? Not sure of the requirements and how the code works, I guess I could give it a try. So a combination or your implementation and mine but without the mouse: prefix?

[asturur]

no worries i think i can fix it and merge the one without enter/leave today.
My experience is that contributing something in rush has always bad results because the skipped steps are:

• linting
• testing
• code style ( for all the things lint is not configured )

Please just take care of checking if the first draft will work as soon as i ping you.

Do you know how to build the library from the command line to pick up latest ?

[Tsourdox]

Yes been using your feature branch and building with npm run build. yes just ping me and I'll try it out

[Tsourdox]

When I try the current code: The variable "targets" in the "_simpleEventHandler" function is always an empty array even when dragging over group objects in my canvas.

[jordan-acosta]

Any progress on this since Oct? I haven't gotten to it yet, but I think I'm going to need this functionality for a project I'm working on.

@asturur , regarding your comment above, "I do not want to support drag enter and drag leave on a per object basis". Could you go into more detail on what the rules are for fabric's event system? The docs explain how to work with events, but I still feel a little lost when trying to do certain things.

For example, when handling events on collections of objects in the HTML DOM, I typically use event delegation, since events fired on a node are then fired all the way up the DOM tree. This doesn't appear to be possible in fabric. I assume this has to do with fabric being optimized for speed (we all know how slow the DOM can be.)

[asturur]

well fabric is a unique dom element and all objects are just pixels over it.
I m just saying i do not want to make every object fire drag enter and drag leave probably to avoid confusion.

you drag something from outside the canvas and you will get the event, but internally in the canvas you cannot drag objects one over the other, no event will be fired for drag

[Tsourdox]

I did some changes and got it working. Not sure if I did something "bad", basically copied how it was done for mouse over, figured it would be the same.

[asturur]

Hey i know a lot of time passed, i pushed on the webiste a demo version of it

fabricjs.com/events

looks like working i need to add some tests.

[Tsourdox]

Seems to be working as I originally thought! Thank you 🙏