CODEWITHSUNDEEP
fabricjs
ps0604
ps0604

Reputation: 1071

Fabric: error loading subclass object from JSON

In this jsfiddle I have a line that is created from a subclass (it's basically a line with two additional attributes). I'm trying to serialize/deserialize the line to/from JSON. I can serialize with no problems (including the two additional attributes) but when I try to deserialize with loadFromJSON I get the Cannot read property 'async' of undefined exception.

Uncomment the last line in the jsfiddle to get the error.

I implemented the fromObject() method, but I'm not sure it's correct. What's wrong with this code?

Javascript:

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

fabric.PolySegment = fabric.util.createClass(fabric.Line, {

  type: 'seg',

  initialize: function(points,options) {
    options || (options = { });

    this.callSuper('initialize', points,options);
    this.set('poly', options.poly);
    this.set('id', options.id);
  },

  toObject: function() {
    return fabric.util.object.extend(this.callSuper('toObject'), {
      poly: this.get('poly'),
      id: this.get('id')
    });
  },

  _render: function(ctx) {
    this.callSuper('_render', ctx);
      }
    });

fabric.PolySegment.fromObject = function (object, callback) {
    return new fabric.PolySegment(object);
};

fabric.PolySegment.async = true;

var coords1 = [ 10, 10, 100, 100 ];
var seg1 = new fabric.PolySegment(coords1, {
    stroke: 'black',
    strokeWidth: 6,
    originX: 'left',
    originY: 'top',
    poly: 111111,
    id: 222222
});

canvas.add(seg1);
var json = JSON.stringify(canvas);
document.getElementById('t').innerHTML = json;

// uncomment the line below, you'll get an exception
//canvas.loadFromJSON(json);

Upvotes: 1

Views: 952

Answers (1)

PromInc
PromInc

Reputation: 1233

In looking at your Fiddle, it seems like the issue is the type value you have given your new class. If I change:

type: 'seg',

to

type: 'polySegment',

and uncomment the last line, I don't get the error. However, I also don't get the line to load on the canvas. But I guess I'm not 100% sure what is happening in your script there - you're loading the polySegment, then converting it to JSON and reloading it? I'm assuming this is merely for illustration purposes.

While what I suggest here gets rid of your error, I'm personally not 100% sure why it works. In reading the FabricJS documentation on Subclassing, it doesn't specify that the subclass type needs to match that of the subclass definition, but it seems to work...

I hope that helps in some way.

One last comment about this, I've always used the toJSON method to transfer a canvas element to JSON. Though this retrieves a JSON object, not a string like you are doing. Also, the toJSON method requires that you specify what properties you want to capture, so maybe this isn't the best method for your case. It's discussed on this page. But my point for bringing this up, is I know for certain that the toJSON method works well with the loadFromJSON method. So I mention that in case you find the JSON.stringify method to be the issue, there is a alternate method to approach the same concept.

Upvotes: 2

Related Questions