V6: 🎉 Group Rewrite

[ShaMan123]

V6

Hi everyone,
fabric is moving forward!
We have 2 main goals for v6:

1. js/ts migration which is covered here IMPORTANT: Migrating to modern javascript/typescript #7596
2. Group rewrite 🎉

You can see #8316

Group Rewrite

This is a tracking issue for the group rewrite, read below for more detail including the current state of things and gist.
We aim to fix and support long desired features including:

1. Nested selection - DONE
2. Resizing and customized layout - DONE
3. Transform and coordinate system (which is relative to the parent group) - DONE

Motivating Issues/Discussions

#7473 #7316 #6776 #7136 #7299 #7130 #7142 #7449 and anything with a group tag

How do you fit in?

1. You can become an alpha tester (we aim to publish an alpha tag to npm regularly).
   IMPORTANT NOTICE: all changes made to the v6 branch are experimental and can be removed or changed without notice and without proper support (including supported features from v5). fabric might change drastically between commits. Meaning if you want in - it's on you.

You can join the effort by contributing

This description is updated continuously with relevant information
You don't need to scroll and read endless comments (unless you are a maintainer :))

---

Current State

Fixed logic across fabric for nested objects to be selectable.
Group has been completely rewritten and Layer has been introduced. As part of the rewrite group is now a layout engine, you can use it to customize layout of objects.
In general the rewrite allows any object to be selectable and interactive if it is referenced in the _objects array of it's parent and it references it's parent via the group property. If you build custom objects with nesting this is what you are looking for.

Usage

It is advised to use set on group/objects from now on (until #7596 is done, then it might change due to setters)
Changing subTargetCheck or interactive enables/disables crucial functionality so for these props it is not an advice but a MUST.

new fabric.Group(objects, {
  subTargetCheck: true,
  interactive: true   //  enables selecting subtargets
});

Progress

• feat(Group): First Patch of New Group! 🥳 #7858
• feat(Group): 2nd Patch of New Group! 🎉 #7859
• fix(Group): patch2 minors #7916
• fix(Group): patch #7916 #8000
• feat(Layer): 3rd Patch of Group Rewrite ♦️ #7860 needs porting to v6
• fix(v6): 4th PR of Group Rewrite 🎛️ nested controls 😜 #7861
• fix(Group): 🛠️ layout, angle and origin ⚡ #8004
• fix(Group): remove added object from canvas #8034 needs porting to v6
• BREAKING(Object Stacking): 🔙 refactor logic to support Group 🔝 #8461
• fix(ActiveSelection): 🔃 preserveObjectStacking 📌 #7878
• fix(ActiveSelection): 🚀 multiple nested selection 🗂️ #7882
• fix(): selection logic to support nested multiselection #8665
• fix(V6): nested selection 🔧 fix canvas exporting 🧩 #7893 needs porting to v6
• feat(Object): fill-parent layout #7901 needs porting to v6
• chore(): cleanup type assertions, expose Object#parent => rm isActiveSelection #8951

Experimental

• feat(V6): interactive clip path #7879
• feat(V6): brush layering POC #7880

Triggering Layout

#9148 extracts layout management to a standalone class

triggerLayout forces a group to recalculate its bounding box and reposition its objects.
You can define a layout strategy and assign it to the layout manager.
Read the code, it has comments explaining stuff and types that make it clear what you need to return from the method.
Look at the modified trigger, it is possible adding more triggers.
However I will promote an overall solution.
#7882 is a POC, follow the progress trigger

BREAKING

• all awkward methods such as addWithUpdate are removed including toGroup/toActiveSelection
• renamed object stacking methods on canvas (e.g. moveTo -> moveObjectTo)
• strict object tree - EXTREMELY BREAKING because it steals under the radar
  • an object can have only one parent
  • no need to call remove before adding to another group, fabric handles it internally
  • no need (and discouraged) to use awkward active selection code for removing an object
  • canvas methods still need to enforce a strict check
• if you hacked group prior to the rewrite you will probably need to rewrite your logic

Pitfalls

All object origin methods (e.g. translateToOriginPoint) are relative methods.
You should use them ONLY in the correct plane and with points that belong to the relative plane.
IMO it makes them worthless.
#8767 changes that.

BUGS

If you encounter bugs related to group or if you have a feature request please submit a relevant ticket.
Notice that bug reports of versions below v6 will be completely disregarded and closed. This was hard work, put effort into your repro so it is in v6.

Working Examples

• JSFiddle
• Layer

Using v6! stale branch
- CodeSandbox or JSFiddle
- Layer or in JSFiddle

To Do

• refactor selection logic
  • use dblClick to select nested objects? create mechanism for dev to customize selection? for now override searchPossibleTargets
  • refactor to enable n levels of nesting (logic is adequate for 2)

    fabric.js/src/canvas.class.js

    Line 422 in 109efe5

    // in case a single object is selected render it's entire above the other objects

  • look into active selection - creating from nested objects (deprecate/refactor _chooseObjectsToRender)
  • z-index of relatives when deselecting an object and selecting another - https://codesandbox.io/s/yiliv
  • alt-selection for selecting objects under top object with another click - POC
• @asturur rethink preserveObjectStacking in favor of a drag image/ghost - can wait/stale due to fix(ActiveSelection): 🔃 preserveObjectStacking 📌 #7878
• text selection in scaled and rotated group is wrong (getLocalPointer 8bf7f92)
• bounding box and controls of object under transformed group (fix(v6!): nested controls #7758 )
• phase out coords (can be delayed, now that bbox and controls are fixed) Redo coords #8767
• update tests
• refactor object caching - Group/Canvas Caching #7874
  • object caching in some cases leaves traces (probably caused by wrong size when clearing cache)
  • caching edge case - nested absolute clip path (see fiddle, try moving group, image should be clipped). Possible fix is to handle a registry of children with abs clip paths OR modify the shouldCache method
  • fix group's caching behavior + shadow logic - Group With ClipPath and Text with Shadow Renders Incorrectly #7454
  • rethink _renderObjects - nested active object will fail with perPixelTargetFind because it will not get rendered by group (add logic to canvas.isTargetTransparent) feat(Group): render selected objects #7863
  • rethink ActiveSelection caching - why not?
• support layers under groups feat(Layer): 3rd Patch of Group Rewrite ♦️ #7860
• ActiveSelection.toGroup use removeAll instead
• getObjectsBoundingBox - needs work to exactly fit when group is rotated
• initial layout inconsistent with old group
• initial layout - supporting originX/Y 407023c and angle fix(Group): 6th Patch of New Group 🛠️ layout, angle and origin ⚡ #7867
• initial layout ( compare against the working examples of v6!) (Layer/Group)
• Layer - respect originX/originY?
• Group centerObject methods:
  • object.setRelativeCenterPoint(new Point())
  • object.setRelativeCenterPoint(new Point(object.getRelativeCenterPoint().x, 0))
• should clipPath become evented/interactive? feat(V6): interactive clip path #7879
• groupSVGElements
• support fill, stroke backgroundColor - might be replaced with fill-parent layout for object will not be supported by fabric, see feat(Group): 2nd Patch of New Group! 🎉 #7859 (comment)
• remove object selection monitors in favor of a simple check canvas.getActiveObjects().includes(obj)
• canvas/group removed event dereferencing inconsistency feat(Group): 2nd Patch of New Group! 🎉 #7859 (comment)_ - fixed by fix(Group): patch #7916 #8000
• flipX/Y on group and/or nested objects is a complete mess Redo coords #8767

Look

Video is running in original speed

Cutting Edge

The blue circles are rendered by a textbox and because of the rewrite with a few lines of code I got this working
Pay no attention to caching of course

This is EXTREMELY exciting because it means that anyone could create custom objects subclassing whatever object they need and have nested selection work out of the box!

[ShaMan123]

First milestone #7858 🤟

[ShaMan123]

First milestone is merged!! 🥳🥳
Meaning that fabric.Group is now the new group.

[ShaMan123]

updated description

[ShaMan123]

updated v6-alpha branch
now contains:

• all non experimental group PRs in description
• feat(IText): Draggable text #7802
• fix(canvas export): regression caused by safegurading #7907
• fix(Canvas): selection + setViewportTransform edge case #7713
• fix(IText): some RTL selection issues #7864
• feat(): support aborting promises/requests #7827

[ShaMan123]

Second milestone merged!
Most of the functionalities are now available in master!
Usage:

new fabric.Group(objects, {
  subTargetCheck: true,
  interactive: true   //  enables selecting subtargets
})

[ShaMan123]

4th milestone merged!

[ShaMan123]

@asturur I think we can drop coords in favor of getCenterPoint + _getTransformedDimensions
What do you think?

[ShaMan123]

Group layout now respects origin, skewing and angle.
Stay tuned for more!

[ShaMan123]

Group is now in beta!

[ShaMan123]

Next Up

• Active Selection fixes
• Layer

[abdussami-tayyab]

Thanks @ShaMan123 , it is working for me with objectCaching: false on the Group object.

Sorry to pour here with questions, I realise you guys must be super-busy, but I also feel bringing up problems right now is best for all of us.
A question I have is, let's say there's a Group of Rect and a Circle, and these 2 conditions are true:

1. Rect object is bigger than the Circle
2. Circle is inside the Rect

Is it possible to select the Group? I am unable to do that, because the Rect covers the whole Group and when I select Rect, it makes the Rect interactive (and movable).

Are there a couple of event listeners that might help selecting the Group if Rect.size === Group.size?

[ShaMan123]

Rect.selectable = false?

[abdussami-tayyab]

It will make the rect unselectable/non-interactive which is also something I don't want. I just tried this use-case in Canva, and in Canva if I create a rectangle of 50x50 and place a circle of 30x30 inside it, then group both of them. Then when I select the group to move, the whole group moves and I am not able to move the rectangle or circle although I can change their attributes.

I wonder what event listeners we can use, for example if a user moves a group without Shift key pressed, we deal with the group but if Shift key is pressed, we can select the individual object inside the group. If this is an advanced topic for us, we can have a look at it later, but important to at least think about it because we are sure this is not an unusual case.

[ShaMan123]

Did you try toggling the selectable prop in correlation to the shift key?
You can also try to fiddle with onSelect, onDeselect and the related events

[abdussami-tayyab]

Sorry but can you please point me to that in the code from where I see how it works? Thanks.

…

On Sat, 20 May 2023, 02:40 Shachar, ***@***.***> wrote: Did you try toggling the selectable prop in correlation to the shift key? You can also try to fiddle with onSelect, onDeselect and the related events — Reply to this email directly, view it on GitHub <#7670 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABW3JIVLM2CUAQTTGVW7QJ3XG7SGXANCNFSM5OAWEAHQ> . You are receiving this because you commented.Message ID: <fabricjs/fabric. ***@***.***>

[abdussami-tayyab]

@ShaMan123 I tried setting the selectable attribute of objects inside a group, the problem with that now is that moving the group now does nothing because the underlying object which has selectable: false.

Is there any way we can set interactive only on IText objects and not on any other shape?

[abdussami-tayyab]

@asturur can you help with my comment above? If I can make some objects in a group interactive and some not, that would be golden for the project I'm working on. If this is not in the plan for now, that would work as well if I can get to know. Thanks for this great package!

cc: @ShaMan123

[ShaMan123]

Open a dedicated discussion/issue
Provide a reproduction

[asturur]

@abdussami-tayyab link the open issue when you open it.
The interactive group feature wasn't planned with all those customization in mind, so some of them needs to be evaluated, thought, and built from scratch.

[abdussami-tayyab]

@asturur do we have a boilerplate JSFiddle or CodeSandbox that I can use to replicate my issue?
Sorry about commenting here, I understand it breaks the purpose of this thread. I'll delete once you tell me how I can add code to JSFiddle or CodeSandbox (or any other tool).

Thanks!

[StringKe]

Any update on the implementation of this DEMO in V6?

[ShaMan123]

Are you referring to toGroup/toActiveSelection?

toActiveSelection

canvas.getActiveSelection().add(...group.removeAll())
//or
canvas.setActiveObject(new ActiveSelection(group.removeAll())
// remove group

toGroup

new Group(canvas.getActiveObjects())

[StringKe]

Are you referring to toGroup/toActiveSelection?

toActiveSelection

canvas.getActiveSelection().add(...group.removeAll())
//or
canvas.setActiveObject(new ActiveSelection(group.removeAll())
// remove group

toGroup

new Group(canvas.getActiveObjects())

Thanks, your code is very clean, I used a lot of code to achieve a similar result.

[ShaMan123]

Thanks, your code is very clean, I used a lot of code to achieve a similar result.

Yes, v6 is a major step forward for the repo and the group rewrite especially

[ShaMan123]

Guys I am hiding your last off topic comments
Be strict about the discussions and open a dedicated ticket or else everything becomes spam.
We have starter apps, read the README/CONTRIBUTING guides.

[ShaMan123]

Group rewrite has completed a while back and the LayoutManager has been introduced.

#8034 hasn't been merged so look out when adding objects to a group that belonged to a canvas. Call Canvas#remove to be sure until that is fixed. The rest of the add operations should manage removing objects from previous group for you.

The parent ref has been introduced to complement the existing group ref.
Basically the group ref is what defines the plane the object is in while the parent ref describe where the object is in the object tree.
When selected as part of an ActiveSelection, a nested object (one under some group n levels) will have its group ref set to the active selection and its parent ref set to the group it came from.
When not selected both refs point to the group.
This is needed for a couple of things including the ability to move the object back to its parent after deselected and rendering it in the case of preserveObjectStacking.

There are pending issues with the transform system and the caching system that will cause bugs when using groups such as:
#8743 This bug is caused because fabric uses decomposed values instead of pure matrix multiplication.
Look out for bugs coming from a combination of shadows and caching/clipPaths.

I suggest anyone needing nested objects and groups to familiarize with sendPointToPlane, sendVectorToPlane and sendObjectToPlane. They do the heavy up lifting of the linear algebra for you. Once you understand how they work it becomes easy to do complex linear algebra in your code.
Be mindful of the plane you are working in, whether it is the viewport, the scene, the parent plane, the object plane, some other internal object plane (fabric defines many of these but none are easy to grasp, such as pathOffset) or weirder ones.
Doing so will save dev hours and make your logic robust for nesting.