I'm a little new to javascript so just trying to learn here, but why does one function return a value, but the other will not? Let me further explain:
For example:
'''
canvas.on({
'object:moved': updateNewLineCoordinates,
'selection:created': updateNewLineCoordinates,
'selection:updated': updateNewLineCoordinates,
'mouse:dblclick': addingControlPoints
});
'''
When I double click the mouse this function executes
'''
function addingControlPoints(o) {
let obj = o.target; // Object is defined without issue.
console.log(obj);
}
'''
The console outputs the properties the line that I double clicked on.
However, when I select the line, this function executes:
'''
function updateNewLineCoordinates(o) {
let obj = o.target; // Object is Undefined, why?
console.log(obj);
'''
The console outputs that the object is undefined. I cannot understand the "why"?
The reason is that selection events have a slightly different shape than regular mouse events. When you click a mouse an event is triggered that tells you what it was clicked on. Mouse events are very standard in Javascript, but Fabric gives events a subTargets property in case your click touches several targets at once.
Fabric's selection events, expect to return a list of objects inside the selection. A good way to get a picture of what is going on is by going to the FabricJS Events demo and uncheck everything except the selection events. You will see that selection: create returns an object with a property e representing the event and a selected array representing everything within the selection.
When you select something in the canvas by clicking, the target property of the mouse:down event will be the same as the object in the selected array of the selection: created event, which will also be triggered. By contrast when you do a click-and-drag select, the selection:created will potentially contain many more objects than the mouse:down that started the selection.