Best approach to extend fabric classes

[bitttttten]

Hey! Love the project and I just have a few questions. I'm looking to extend the base fabric object to always add an ID.

Later on I adjust the controls, and seems to break it.

class FabricObject extends fabric.Object {
  public id?: string;
  constructor(options: fabric.IObjectOptions) {
    super(options);
    this.id = `Math.random()`;
  }
}

fabric.Object = FabricObject;

// later on
fabric.Object.prototype.transparentCorners = false;
fabric.Object.prototype.cornerColor = 'blue';
fabric.Object.prototype.cornerStyle = 'circle';

I would imagine I can do something like this, although it doesn't seem to work exactly.

For example if I now try and set transparentCorners or cornerColor, this no longer works: https://stackblitz.com/edit/vitejs-vite-ahqkv6?file=src%2Fmain.ts.

What's the right approach here?

[asturur]

With which version of fabricJS are you working?

[asturur]

Yes a bit.
But not extremely. You will still be able to do it.

Is a long explanation of the difference between classes and functions with prototype and what TS does.
We will have to write it in the changelog and migration guide for fabric so i won't duplicate the effort now

[bitttttten]

yep sounds fair, was more gauging the effort as in should i wait or go with this approach, as there are many things i want to adjust and tweak 🧙

i will just go for it and refactor if necessary

appreciate the replies! fabric6 is looking v nice

[asturur]

You should consider fabric 6 stable and just go with it.

[bitttttten]

how would you do this in fabric6?

if i do

import { FabricObject } from 'fabric'

FabricObject.prototype.controls.ml = ml;

i end up getting

Uncaught TypeError: Cannot set properties of undefined (setting 'ml') at index.ts:135:33

still trying to work out what i am doing wrong, but thought i'd ask as i hit a dead end with debugging :)

[asturur]

Controls are not on the prototype anymore in fabric6, at least not by default.

If you need to change the controls for all objects, wait a second for this PR to be merged:
#9891
In which i had to make some last minute change because there were some issues with the performances.

There is a function 'createControls' you can change that function to return the controls for all the objects.

[bitttttten]

Solved by doing something like:

const _initialize = fabric.Object.prototype.initialize

fabric.Object.prototype.initialize = function (...args) {
  _initialize.apply(this, args)
  this.someThingAppliedToAllObjects = true

  return this
}