Free Drawing, Grouping and loading JSON

[chrisrickard]

When creating Group of free drawing segments, exporting toJSON, and then re-loading the same JSON - the paths are all misplaced.

See this fiddle: https://jsfiddle.net/xvzms0j6/17/
And an animated gif of an exact example: http://giphy.com/gifs/3oEduMXd7lMxKZk6ly

Essentially I wish to create a Group from free drawing paths, and allow placement to say the same when exporting and importing.

Any ideas?

[asturur]

i m gonna check it later if is a bug i ll commit a fix.

[asturur]

sometimes i get the bug, sometimes not.

[chrisrickard]

I think it has something to do with "what" you free draw :)

Circles with lines through them, or crosses always recreate the bug for me. But non-crossing lines don't seem too.

[chrisrickard]

Any further help with this would be much appreciated... Unfortunately it is a showstopper in a HTML5 app I am releasing this week.

@kangax any ideas about this interesting issue?

[sapics]

@chrisrickard I have tested by recent version of fabric.js.
https://jsfiddle.net/sapics/x0sLhgtj/5/
The copied canvas has fill color and position is changed.

[chrisrickard]

@sapix yeah I noticed that.. so was avoiding upgrading (as the position bug remained, but also had a fill color issue)

[sapics]

@chrisrickard How about this? https://jsfiddle.net/sapics/x0sLhgtj/17/

[chrisrickard]

@sapics same result im afraid - http://imgur.com/Ax5hjrE

[sapics]

@chrisrickard sorry... https://jsfiddle.net/sapics/x0sLhgtj/18/

[chrisrickard]

Hi @saphics, that seems to work - but creates another odd issue.

When you click canvas1 (after toJSON'ing).. it repositions the group? :/

See animated gif: http://giphy.com/gifs/xTiTntnWGVlz496L4I

[sapics]

@chrisrickard Oh, sorry. I fixed it to https://jsfiddle.net/sapics/x0sLhgtj/20/

[chrisrickard]

@sapics Fantastic you did it, we make a great team 👍

[asturur]

so the bugs with current version are?
fill black and wrong position?

could you be more clear?

i m trying to squash as more bugs as possible

[sapics]

@asturur Sorry for late report. It would be caused by bugs of current version.
I make PR for fix it #2101. I am not good at English. Could you understand what I mean in #2101?

[asturur]

I see #2101, sadly i m not so group guru and i need time to understand if this is the right fix.
Maybe kangax will be faster.

[sapics]

@asturur Thank you for reading #2101. I would wait for PR review.

[chrisrickard]

@sapics I think there may be an issue caused by your fix, so I have reopened this issue.

Steps to recreate:

1. Draw and group the paths
2. Alter the Group (resize, rotate etc).
3. Reload the JSON into the canvas (loading from toJSON).

The result is the last action seems to be "rerun". E.g - if you resize the path smaller, every time you reload the JSON it gets smaller and smaller.

See this fiddle: https://jsfiddle.net/mq00xq3y/7/
And an animated gif of an exact example: http://giphy.com/gifs/l41lZIXB8fZwyxHiw

I wasn't 100% sure if it's from your change, but I couldn't seem to recreate it with the current dist version.

[sapics]

@chrisrickard Thank you for your report!
I understand what you pointed out, and it is caused by my fix.
I fixed it, however, it causes another bug, what I have not understood yet.
I guess that It takes some time.

[sapics]

I fixed in https://jsfiddle.net/sapics/mq00xq3y/77/.
As written in it, I checked only for fabric.Rect.
I guess that some problem come from path type.

This issue have not fixed yet.

[sapics]

@chrisrickard I have fixed Path Class. it looks work well.
https://jsfiddle.net/sapics/mq00xq3y/91/

[asturur]

why path class? does it is not about group's object toObject method general problem?

[sapics]

@asturur There are two problems.
One of the problem comes from group.toObject which includes delegatedProperties.
Another problem comes from path.initialize. (Position difference comes from this.)

[chrisrickard]

Seems to be fixed, thanks @sapics - your a lifesaver!

[newtriks]

I maybe mistaken, but simply taking the last fiddle from this thread by @sapics and replacing the source with the latest version of fabricjs, the issue of the path objects being filled on re-load seems to still be a problem? Or is it that the approach taken in the fiddle is no longer compatible?

https://jsfiddle.net/z8d4fb35/

On a side note, are you actually able to load a path object into the objects array as opposed to loading as JSON? So for example, if you serialized to a path object, could you take that object and manually start adding it to the canvas via pushing to the objects array?

[sapics]

Please try master-build as https://jsfiddle.net/sapics/z8d4fb35/2/.
I guess that it would be work!

[newtriks]

@sapics looks great thanks! Adding the object returned directly to canvas doesn't work i.e. canvas.add(pathObj);, still trying to work out how to access and push to the actual canvas items, particularly on load. Thanks for the help anyway.

[sapics]

@newtriks That's good!
canvas objects can get by canvas.getObjects.