How do i trigger mouse events in fabric.js to simulate mouse actions?

Question

I'm able to get the jquery response on the triggering but the fabric canvas is not acting on the event.

I expect this fiddle to deselect the IText element:

fiddle

I know the fabric canvas got a trigger event, but it's not working too.

var canvas = new fabric.Canvas("c");
var test = jQuery("#c");

test.on("mouse:down", function (){
    alert("you clicked me");
  canvas.renderAll();
  debugger;
});

canvas.on({"mousedown": function() {
  alert("you clicked me too");
}});

$("#testClick").click(function() {
  var e = jQuery.Event("mouse:down", {
    pageX: 10,
    pageY: 10
  });
  jQuery(canvas).trigger(e);//Missed - not jquery
  jQuery(jQuery("#c")).trigger(e);
  jQuery(test).trigger(e);
});

/*************** TEXT ****************/
 var text = new fabric.IText('FaBric.js', {
  fontSize: 40,
  textAlign: 'center',
  fontWeight: 'bold',
  left: 128,
  top: 128,
  angle: 30,
  originX: 'center',
  originY: 'center',
  shadow: 'blue -5px 6px 5px',
  styles: {
    0: {
      0: {
        fontSize: 60,
        fontFamily: 'Impact',
        fontWeight: 'normal',
        fill: 'orange'
      }
    }
  }

});

text.setSelectionStyles({
  fontStyle: 'italic',
  fill: '',
  stroke: 'red',
  strokeWidth: 2
}, 1, 5);
canvas.add(text);
canvas.setActiveObject(text);

EDIT 1

I have tried with both "mouse:down" and "click" event but the object doesn't deselect: fiddle 2

Answer 1

It won't be enough to just trigger events via Fabric's trigger. The events that Fabric objects emit are not used to trigger internal logic, so firing them won't do any good unless you want to trigger your own event handlers.

I'm not familiar with jQuery's events, but you can do just as well with the standard JS MouseEvent constructor. Just make sure you're:

• firing the appropriate event type (i.e. 'mousedown', not 'click')
• dispatching it on the appropriate DOM element (i.e. Fabric's upper canvas, accessible via canvas.upperCanvasEl)
• setting the event's clientX/clientY instead of pageX/pageY

var canvas = new fabric.Canvas("c");

canvas.on({"mouse:down": function(e) {
  console.log("Mouse down", e.e.clientX, e.e.clientY);
  canvas.renderAll();
}});

document.querySelector('#testClick').onclick = function() {
  var evt = new MouseEvent("mousedown", {
    clientX: 15,
    clientY: 15
  });
  canvas.upperCanvasEl.dispatchEvent(evt);
  // same as:
  //document.querySelector(".upper-canvas").dispatchEvent(evt);
}


/*************** TEXT ****************/

var text = new fabric.IText('FaBric.js', {
  fontSize: 40,
  textAlign: 'center',
  fontWeight: 'bold',
  left: 128,
  top: 128,
  angle: 30,
  originX: 'center',
  originY: 'center',
  shadow: 'blue -5px 6px 5px',
  styles: {
    0: {
      0: {
        fontSize: 60,
        fontFamily: 'Impact',
        fontWeight: 'normal',
        fill: 'orange'
      }
    }
  }

});

text.setSelectionStyles({
  fontStyle: 'italic',
  fill: '',
  stroke: 'red',
  strokeWidth: 2
}, 1, 5);
canvas.add(text);
canvas.setActiveObject(text);

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.js"></script>
<canvas id="c" width="300" height="200"></canvas>
<button id="testClick">Deselect</button>

Answer 2

Here is a working fork of your fiddle: https://jsfiddle.net/y74h38av/

The main problem in your existing code is that you are confusing the jQuery event API with the Fabric event API. The Fabric canvas object does not accept a jQuery event object. Also, note the syntactical differences between the two APIs. jQuery uses mousedown while Fabric uses mouse:down. You access the Fabric event API via the event method directly on a Fabric object. If you try to wrap the Fabric object in a jQuery object, like you do here, jQuery(test).trigger(e);, it will not work.

I hope this helps!