I am trying to deserialize FabricJS canvas with custom class in angular/typescript

Question

Here is stacblitz example with my problem: https://angular-mzoqtk.stackblitz.io (https://stackblitz.com/edit/angular-mzoqtk?file=src%2Fmain.ts) When you click "ADD" textbox is added and the canvas is saved to json, when you click "LOAD", the json should be loaded, but there is a mistake telling: "Cannot read properties of undefined (reading 'fromObject')"

I have found examples saying to write a short method to enable deserialization of fabric objects:

fabric.labeledRect.fromObject = function(object, callback) {
  return fabric.Object._fromObject('LabeledRect', object, callback);
}

But I am using angular with typescript and after spending some hours I have no idea how to implement the above method in angular/typescript way. Please help.

I tried to achieve something like this, but it didn't work:

TextboxWithPadding = fabric.util.createClass(fabric.Textbox, {
    type: 'TextboxWithPadding',
    toObject: function() {
      return fabric.util.object.extend(this.callSuper('toObject'), {
        backgroundColor: this.get('backgroundColor'),
        padding: this.get('padding'),
        cornerRadius: this.get('cornerRadius')
      });
    },
     fromObject: function(object: any, callback: any) {
            return fabric.Object._fromObject('TextboxWithPadding', object, callback);
        },
  
    _renderBackground: function(ctx: any) {
      if (!this.backgroundColor) {
        return;
      }
      var dim = this._getNonTransformedDimensions();
      ctx.fillStyle = this.backgroundColor;
      ctx.beginPath();
      ctx.roundRect(-dim.x / 2 - this.padding, -dim.y / 2 - this.padding, dim.x + this.padding * 2, dim.y + this.padding * 2, [this.cornerRadius]); 
      ctx.fill()
      ctx.stroke()
      this._removeShadow(ctx); 
    }
  });

I also tried to implement fromObject like this, but it also didn't work:

   this.TextboxWithPadding.fromObject = function(object: any, callback: any) {
      return fabric.Object._fromObject('TextboxWithPadding', object, callback);
    }

I tried to deserialize custom class of fabricjs in angular/typescript project.

The error occurs when I read objects. The solution found in the documentation says that I should implement fromObject method, but I don't know how to make it work in angular.

I received one suggestion that I should assign the class to fabric global object with this line:

fabric.TextboxWithPadding = TextboxWithPadding

But it doesn't work. It gives error:

Property 'TextboxWithPadding' does not exist on type 'typeof import("/Users/marcinzmigrodzki/Documents/angularapps/ll/node_modules/@types/fabric/fabric-impl")'."

I know that it works in javascript, but my problem is that I need to convert it to angular/typescript.

Answer 1

I got help on FabricJS Github: https://github.com/fabricjs/fabric.js/discussions/8631#discussioncomment-4841299 The solution is to add this before loading json:

this.TextboxWithPadding.fromObject = function (object: any, callback: any) {
  return fabric.Object._fromObject('TextboxWithPadding', object, callback, {
    extraParam: 'text',
  });
};
// @ts-ignore silence!
fabric.TextboxWithPadding = this.TextboxWithPadding;