FabricJS double click on objects

Question

I am trying to perform a special action whenever the user double clicks any object located inside the canvas. I have read the docs and not found any mouse:dblclick-like event in the documentation. I tried doing something like:

fabric.util.addListener(fabric.document, 'dblclick', callback);

Which does trigger the dblclick event but does not give specific information about the actual object that is being clicked on the canvas.

Any ideas of the most FabricJS-y way of doing this?

Answer 1

This is similar to @LeoCreer's answer but actually gets access to the targeted object

fabric.util.addListener(canvas.upperCanvasEl, 'dblclick', function (e) {
  var target = canvas.findTarget(e);
});

Answer 2

The more elegant way is to override fabric.Canvas._initEventListeners to add the dblclick support

_initEventListeners: function() {
  var self = this;
  self.callSuper('_initEventListeners');

  addListener(self.upperCanvasEl, 'dblclick', self._onDoubleClick);
}

_onDoubleClick: function(e) {
  var self = this;

  var target = self.findTarget(e);
  self.fire('mouse:dblclick', {
    target: target,
    e: e
  });

  if (target && !self.isDrawingMode) {
    // To unify the behavior, the object's double click event does not fire on drawing mode.
    target.fire('object:dblclick', {
      e: e
    });
  }
}

I've also developed a library to implement more events missed in fabricjs : https://github.com/mazong1123/fabric.ext