[Feature]: Will Fabric v6 support user-defined Object properties?

[wangrongding]

CheckList

• I agree to follow this project's Code of Conduct
• I have read and followed the Contributing Guide
• I have searched and referenced existing issues, feature requests and discussions
• I am filing a FEATURE request.

Description

Will Fabric v6 support user-defined Object properties?

For example, when I want to create an element, I can embed an Id in the object for convenient future use. Currently, Fabric v5 does not support this due to ts type restrictions, so I am currently using Object.assign to merge the ID with the target object.

Current State

Additional Context

No response

[asturur]

fabric v6 sort of supports that but the definition of types are hard to do.
This should definitely be explained in some doc.

[ouyoungs]

mean this?
https://juejin.cn/post/7153068432303325220

let canvas = new Canvas('c')

let rect = new Rect({
  width: 30,
  height: 30,
  top: 10,
  left: 10,
  my_id: 'rect01'
})

canvas.add(rect)

function handleToJSON() {
  console.log(canvas.toJSON(['my_id']))
}

[wangrongding]

I know this, I'm talking about the official api and support for Typescript type.

[asturur]

i think today you can do:

const newText = new FabricText<{ id: string } & Partial<TextProps>>('myText', {
  id: 'hello',
  fontFamily: 'Arial',
});

But i m sure there will be some kind of hiccups here and there, is not as smooth as we want, is also hard to do because of mixins and everything.

Slowly mixin will go away and hopefully will be simple

[vadimcoder]

I ended up using this so far (I'm using v 6.0.0-rc2):

interface ICustomData {
  entry: ...; // my custom prop
  isDirty: ...;  // my custom prop
}

// custom PathProps
interface IMyPathProps extends TOptions<PathProps> {
  customData: ICustomData;
}

// custom Path with custom data based on fabric Path
export class MyPath extends Path<IMyPathProps> {
  customData!: ICustomData;
}

// using:
fabricCanvas.add(
  new MyPath("M 0,0 ..." , {
    fill: 'transparent',
    customData: { // TS does type checking here
      entry: ...
      isDirty: ...,
    },
  }),
);

// or:
const path = fabricCanvas.getActiveObject() as MyPath;
console.log(path?.customData);

[zhe-he]

Let's solve it by rewriting...

/** fabric.d.ts */
import "fabric";
declare module "fabric" {
    interface FabricObjectProps {
        /** mark 1 */
        someAttr?: string | number;
    }
    interface FabricObject {
         /** mark 2 */
        someAttr?: string | number;
    }
}

/** patch.ts */
const lastToObject = FabricObject.prototype.toObject;
FabricObject.prototype.toObject = function (arr: string[] = []) {
     return lastToObject.call(this, arr.concat(["someAttr"]));
}

[asturur]

#10071
Made the export of plain custom properties as simple as possible.
Deep objects won't be cloned.
I m also going to cover this topic on a specif doc on the website

[asturur]

https://fabricjs.github.io/docs/using-custom-properties/

[Smrtnyk]

I am having issues with properly typing classes that are extending from Group.
For example here https://github.com/Smrtnyk/Firetable/blob/master/packages/floor-creator/src/elements/Table.ts#L104
Group is not a generic so I cannot pass the unique table props to it

[asturur]

I forgot about that mixin there. I think we should make it Generic

[asturur]

I played a bit with it and while Props and SProps can still be made generic, i don't think eventSpec can.

[Smrtnyk]

I guess at least passing Props and SProps is better than nothing
it would solve my issue at least to not have ugly ts-expect-error

[asturur]

@Smrtnyk check if some of this code helps: #10092 i m still working on it didn't do deep testing

[Smrtnyk]

hm, it is still not really working
there is an error for Props not being assignable to Group props
because Props from documentation refer to serialized props of the group, which includes serialized layout manager, but props in group accept only layout manager.
I guess easiest for you is to add a test in fabric that is extending the group and make sure that there are no ts errors.
if you need test inspiration you can have a look at the link I posted above
https://github.com/Smrtnyk/Firetable/blob/master/packages/floor-creator/src/elements/Table.ts#L104
in my case I am extending the table class on a second level as well
https://github.com/Smrtnyk/Firetable/blob/master/packages/floor-creator/src/elements/RectTable.ts#L24
where I had to add another ts-expect-error.
I assume that fromObject also needs to be more flexible, not just toObject

[asturur]

Yes is not fixable as it is today.
I really spent 10+ hours on this and the correct way is to drop the collection mixin and duplicate the collection code for canvas and group.
But is like extra 5KB or more of code added to the library and makes me mad.

I'll probably try to resort to the older method in which the methods were copied over the class at runtime and i will duplicate the declarations only. But is time consuming.

For now the best thing you can do is just use the extend on the actual group and use declare and the constructor to add all of your props.

I checked your examples, where is that you are having issues with those? What is not working?