FabricJS double-click on objects

Question

I try to perform a special action when the user double-clicks on any object located inside the canvas. I read the documents and did not find any mouse:dblclick in the documentation mouse:dblclick events. I tried to do something like:

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

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

Any ideas from FabricJS-y for this?

Answer 1

A more elegant way is to override fabric.Canvas._initEventListeners to add 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 double click event does not fire on drawing mode. target.fire('object:dblclick', { e: e }); } } 

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

Answer 2

This is similar to @LeoCreer answer, but actually accesses the target

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

Answer 3

The right way to add custom events to Fabric.js

 window.fabric.util.addListener(canvas.upperCanvasEl, 'dblclick', function (event, self) { yourFunction(event); }); 

or use fabric.ext

Answer 4

Here's a quick and easy way to add a double-click event handler in Fabric JS -

Include the following code snippet in your html file. Just make sure this is loaded after the main fabric.js library.

 <script type="text/javascript"> fabric = (function(f) { var nativeOn = f.on; var dblClickSubscribers = []; var nativeCanvas = f.Canvas; f.Canvas = (function(domId, options) { var canvasDomElement = document.getElementById(domId); var c = new nativeCanvas(domId, options); c.dblclick = function(handler) { dblClickSubscribers.push(handler) }; canvasDomElement.nextSibling.ondblclick = function(ev){ for(var i = 0; i < dblClickSubscribers.length; i++) { console.log(ev); dblClickSubscribers[i]({ e :ev }); } }; return c; }); return f; }(fabric)); </script> 

Then add this code to listen for the double-click event:

 canvas.dblclick(function(e) { }); 

To get information about the actual object clicked on the canvas, use the following method -

 canvas.getActiveObject(); 

eg.

 canvas.dblclick(function(e) { activeObject = canvas.getActiveObject(); }); 

Answer 5

I am using this workaround:

  var timer = 0; canvas.item(0).on('mouseup', function() { var d = new Date(); timer = d.getTime(); }); canvas.item(0).on('mousedown', function() { var d = new Date(); if ((d.getTime() - timer) < 300) { console.log('double click') } });