Integrating Fabricjs and Angularjs

Question

I'm trying to build an app which edits simple graphics on screen, fabricjs is the canvas library I use, and angularjs is the MVW framework I use.

Now, the bindings from DOM to fabric work just fine (I click a div, and corresponding object on canvas gets selected), but not the other way around. When I click an object on canvas, and it gets selected the corresponding DOM isn't updated. I've read here that I should be using $scope.$apply();, but I'm not sure where to put that.

How do I make fabric update $scope state?

You can see the code here, click the Add Rect button to add elements to the canvas, and notice that when you click the element's name on the right it get's selected on the canvas, but if you select it directly on the canvas it's button isn't high-lit.

code: http://plnkr.co/edit/lMogPGjJOXx9HLAdiYqB

Answer 1

FabricJS implements events on its classes, so one could bind arbitrary listeners to them. In your case, you could bind a listener to the "object:selected" event, which would call $scope.$apply() and would be fired whenever a object is selected on canvas.

See the Event Inspector Demo and the Observable Class Documentation. The Canvas class inherits all these methods, so you could bind listeners to it. You can even retrieve the selected object, as in the example:

var canvas = new Fabric.Canvas('canvas_container');
canvas.on("object:selected", function (options, event) {
   var object = options.target; //This is the object selected
   // You can do anything you want and then call...
   $scope.$apply()
});

Answer 2

Based on the answer from Bernardo Domingues and MeLight's comment, it took me still some time to figure out.

The final solution for above is:

var canvas;

window.onload = function() {
    canvas = new fabric.Canvas('canvas');
    canvas.on("object:selected", function (options, event) {
        //var object = options.target; //This is the object selected 
        var scope = angular.element(document.getElementById('canvas')).scope();
        // You can do anything you want and then call...
        scope.$apply();
    });
};

The answer on AngularJS access scope from outside js function was very helpfull, together with http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

If you also want to see the position-information change when moving, add:

canvas.on("object:moving", function (options, event) {
    var scope = angular.element(document.getElementById('canvas')).scope();
    scope.$apply();
});