Fabric v6 custom properties in serialized object (json)

[lance-lfx]

I'm having troubles trying to add custom properties to my serialized object. I have followed the demo in the new website to declare module 'fabric', typing the object with the custom properties in the interface and adding this line after: FabricObject.customProperties = ['name', 'id'];.

However, when I serialized the object, it is still not giving me those properties that I added. Any thoughts or recommendations?

[asturur]

Are you serializing a custom object or one that comes from fabric?

[asturur]

Well then it should work or we have a bug.

The code concatenate the properties you ask, plus the fabricObject.customProperties and the specific object customProperties.

    const propertiesToSerialize = propertiesToInclude.concat(
      FabricObject.customProperties,
      (this.constructor as typeof FabricObject).customProperties || [],
    );

there is also a test:

  test('with default custom properties', () => {
    FabricObject.customProperties = ['key2'];
    const obj = new FabricObject({ name: 'test1', key2: 'value2' });
    expect(obj.name).toBe('test1');
    expect(obj.key2).toBe('value2');
    const serialized = obj.toObject();
    expect(serialized.name).toBe(undefined);
    expect(serialized.key2).toBe('value2');
  });

Is you code much different from this simple test?

[lance-lfx]

there are 2 differences from my code vs. the test you have shown above

1. i have the custom properties as optional properties, so they are typed like this in the interface: "id?: number"
2. instead of using the custom properties in a new instance, i was using FabricObject.set({ id: 123}).

the custom properties do show up in my object prior to serialization, but not after serialization

[asturur]

Please be clear what FabricObject is. Is it the variable name of you instance, or is it the imported class?

1. should not matter at all.

[lance-lfx]

it was a variable name of a FabricObject instance

[asturur]

customProperties is on the class, is not per instance.

[stewmorg]

I'm encountering this issue as well after following the guidelines in the documentation: https://fabricjs.com/docs/using-custom-properties/

my example is relatively simple and the IDE correctly detects the id and name properties set using the docs. However, when calling toObject or toJson the properties are not included in the serialisation. The documentation suggests it should be.

Am I missing a step?

``
const canvas = new StaticCanvas("canvasElementId");
const helloWorld = new FabricText("hello world",{id:"123"});
canvas.add(helloWorld);
canvas.centerObject(helloWorld);
console.log(helloWorld.id) // logs 123
console.log(helloWorld.toJSON().id) // doesn't work
console.log(canvas.toObject()); // no id property in the console.

[asturur]