Group Position Doesn't Retain

[darkfrog26]

I am currently creating a group with an empty array (no children) to start with and I want it to be centered at 100x100. Unfortunately when I set those values and then addWithUpdate the left and top seem to be getting reset to 0x0.

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[darkfrog26]

If, after adding the items, I then set left and top everything looks correct.

[darkfrog26]

There also seems to be a glitch that causes neither the group nor items in the group to be selectable.

[asturur]

there is an old discussion about this. mainly the group wrap himself around object positions. Only after the group is created you can force is position.

after setting the group top and left you have to call setCoords to make it selectable.

[darkfrog26]

this seems really clunky to me and painful to use....are there any plans to change this?

[asturur]

we have mayor bugs and features to solve and implement.

but we are always open to suggestions.
.setCoords is called manually because it is calculation intensive, so we do not want to call it automatically on every top or left modifications.

yeah grop is a little bit unconfortable to work with.

[darkfrog26]

That's a shame. Most of the functionality of FabricJS I have been very impressed with. Group is the first major frustration point I've hit.

[asturur]

I was thinking about this.
I cannot really see how to accomplish this feature.

I position a group at 50,50.
I add a circle that has top left of 60,60.
i add a rect that has top left of 10,10

i want to keep the group at 50,50, where should rect and circle be?

[darkfrog26]

@asturur sorry for the very late reply:

The absolute position within the canvas of circle and rect should be 110x110 and 60x60 respectively. Perhaps I'm not fully understanding your question, but I don't see how adding anything to the group would change anything.

[asturur]

so you mean translating the given top and left to add from the top left of the group. That can be done by code, but when you are grouping from graphic interface it looks very strange.

[dmccuskey]

i just posted a new bug report which may be similar in nature: #3837

the current behavior seems broken when using group.add(). however, things seem to work correctly if objects are added in the group constructor. (i haven't tested extensively)

basically, when an object is added to a new container, its position should be relative to that container's originX/Y (oX/oY).

say we have a Rect with oX/oY Top Left with pos 10, 20 in canvas.

considering a Group with oX/oY Top Left at 30, 40 and h/w of 60, 60. the absolute position (in Canvas-space) of Rect when added to Group should be 40, 60.

taking same Group (at current position), but changing oX/oY to Center/Center, the absolute position of added Rect should be 70, 90.

i just started working with fabricjs on a new project. right now, in order to get the correct behavior, it's necessary to offset left/top coordinates by 1/2 of width/height. this should be unnecessary if the originX/Y system was working correctly.

[ShaMan123]

This is very old. But relevant.
I am trying to clean up a bit so I want to close this.
I suffer from Group as well but there is hope.
All people interested please follow #7473 (and perhaps these discussions #7136 #7299)
My approach is exposing a method that is called by the Group and is easily overriden.
#7473 does that.