Clone with SVG is not saving paths after load

[paulcredmond]

Version: 1.7.3

Test Case

SVG image is cloned and saved with toJSON();

As you can see in the gif, a non-SVG object is restored no problem (rectangle in this example). But the SVG clones don't have their path data when they are restored after load. But they do weirdly pop in again at the end, no idea why.

Steps to reproduce

• An image is added to the canvas with fabric.loadSVGFromURL()
• New object created using fabric.util.groupSVGElements()
• Object is cloned using .clone()
• Canvas is saved using .toJSON()
• Canvas is loaded using loadFromDatalessJSON()
• Cloned objects are restored to canvas but missing path data: paths[0]
• Note: I am calling .renderAll() after load, so that's not the issue

Expected Behavior

Clone of an SVG is restored with copied paths.

Actual Behavior

SVG clone does not have any paths.

[asturur]

I do not know how the gif could help.
Could you please create a minimal fiddle with a test?

[paulcredmond]

@asturur Sorry, you're right. I have a working demo here:

http://codepen.io/paulcredmond/pen/GrrPJP

If you add some SVGs using the addsvg button, then move them around and undo/redo you'll notice they disappear, but the fabric objects can still be selected on the canvas.

• canvas.toJSON(); seems to have this issue.
• JSON.stringify(canvas); doesn't seem to have this issue.

[asturur]

I think this is why people use things like immutable js or similar

this is the fromObject code.
We use the paths array to recreate _paths and then we delete it. I consider this sort of ok behaviour. But is also true that you cannot use this object again next time because paths is no more available. In your stack there is a reference of the object that gets modified and then is no more valid.

Using JSON and PARSE gives you a clone of the object everytime so you are safe.
Do not know if this is a bug or not.

[asturur]

maybe is a bug since it can be addressed in the PathGroup constructor.

[paulcredmond]

Thanks @asturur