[Bug]: a clone of a subclassed object is not displayed

[micrology]

CheckList

• I agree to follow this project's Code of Conduct
• I have read and followed the Contributing Guide
• I have read and followed the Issue Tracker Guide
• I have searched and referenced existing issues and discussions
• I am filing a BUG report.
• I have managed to reproduce the bug after upgrading to the latest version
• I have created an accurate and minimal reproduction

Version

5.2.4

In What environments are you experiencing the problem?

Chrome

Node Version (if applicable)

18.0.0

Link To Reproduction

https://jsfiddle.net/uvjk0haf/

Steps To Reproduce

Run the template https://jsfiddle.net/uvjk0haf/

See also unanswered query on StackOverflow https://stackoverflow.com/questions/74205399/fabricjs-cloning-a-subclassed-object-makes-the-clone-invisible

Expected Behavior

If you create a subclass of e.g. a rect, then clone it, the clone is not visible. This is shown in the JSFiddle, where running the example displays 3 rectangles, two red but only one yellow. There should be 2 yellow rectangles.

Actual Behavior

In the JSFiddle, there should be four rects displayed, two red and two yellow. The missing yellow rect is a cloned subclass of Rect.

Error Message & Stack Trace

No response

[asturur]

Hi @micrology i think the fact that the fromObject is missing and that the type is still rect, may throw off deserialization.
Can you try to swap the type to customRect and add a fromObject function exactly like fabric.Rect has?

[micrology]

Thank you for the suggestions. I changed the type to customRect (see https://jsfiddle.net/9jpc64Lu/ ), but this made no difference. Can you help me with how I should add a "a fromObject function exactly like fabric.Rect has"?

[micrology]

Well, I did some googling, found a recipe for a fromObject method and added it. The code is here: https://jsfiddle.net/9jpc64Lu/ . But it still doesn't work as it should. Any other thoughts?

[only-exlight]

I faced the same problem in version 5.3.0. I managed to solve it with the following code snippet:

export const Rect = fabric.util.createClass(fabric.Rect, {
  type: 'ext-rect',
  custom: null,
});

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

You will probably have to assign your custom properties as well.