0

I saving polygon value inside angular $localStorage .

Once fabric js draw the object . my $localStorage changed. 

var arr = [{
        x: 81,
        y: 58
    }, {
        x: 221,
        y: 23
    }, {
        x: 247,
        y: 158
    }, {
        x: 100,
        y: 219
    }, {
        x: 81,
        y: 58
    }];

    if(!$localStorage.mask)
      $localStorage.mask = arr;

Is it a bug ?

Here the plunker

Sahal Saad
  • 80
  • 6

1 Answers1

0

Indeed, FabricJS seems to modify the given points array for its internal purposes (i.e. offset), specifically in this piece of code (from https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.js):

...  
  //misko321: only for reference of what minX, minY, width and height are
  _calcDimensions: function() {

      var points = this.points,
          minX = min(points, 'x'),
          minY = min(points, 'y'),
          maxX = max(points, 'x'),
          maxY = max(points, 'y');

      this.width = (maxX - minX) || 0;
      this.height = (maxY - minY) || 0;

      this.minX = minX || 0,
      this.minY = minY || 0;
    },

  _applyPointOffset: function() {
      // change points to offset polygon into a bounding box
      // executed one time
      this.points.forEach(function(p) {
        p.x -= (this.minX + this.width / 2);
        p.y -= (this.minY + this.height / 2);
      }, this);
    },

...

Together with the fact that ngStorage observes for any changes to the added objects, it updates those modified (internally by Fabric.js) coordinates.

The cleanest solution that comes to my mind at the moment is to copy the arr object (ref. Most elegant way to clone a JavaScript object) and send one of the objects to ngStorage and the other one to FabricJS.

Nevertheless, it would be nice, if ngStorage supported some sort of freeze() method, that would disable the AngularJS watch on this object, thus preventing it from further modifications.

misko321
  • 493
  • 7
  • 14
  • did you try it . I have no luck because the problem at localStorage level . I end up switch to easeljs . thanks for your help . – Sahal Saad Oct 06 '15 at 09:41
  • No, I haven't tried that out, but if I understand the reason for the problem correctly (as I described) I think it should work. – misko321 Oct 06 '15 at 09:47
  • It doesn't matter how many clone you have . Once you store in localStorage it will change the value . The problem at localStorage level . Unless you not using localStorage to store the other value for cloning purpose. In my case I just only use localStorage . Or maybe you right . Can you update the plunker ? Thanks – Sahal Saad Oct 07 '15 at 01:19