Reputation: 694
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:
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
Upvotes: 3
Views: 3519
Reputation: 5018
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:
'mousedown'
, not 'click'
)canvas.upperCanvasEl
)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>
Upvotes: 1
Reputation: 1086
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!
Upvotes: 1