feat(V6): Group Rewrite + Nested Selection

[ShaMan123]

Group Rewrite

This PR has been broken down into #7858 #7859 #7860 and will be left open for tracking only.

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

Motivation

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

closes #6499, closes #3012, closes #3000, closes #7130, closes #7142, closes #7598

Nested selection is a MUST.
Group wasn't easy to use and was very limiting (e.g. doesn't support resizing logic, customize rendering - bg) and confusing (relative coordinate system and transform).

Current State

Fixed logic across fabric for nested objects to be selectable.
Selection logic needs refactoring to support some cases of nested selection (multiselect), for now use canvas.setActiveObject.
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.
Group now respects originX originY (still buggy)

BREAKING

• all awkward methods such as addWithUpdate are removed

Working Examples

• CodeSandbox or JSFiddle
• Layer or in JSFiddle

POC

Tryouts (out of scope, and stale, here to light the way):

• ICollection 1
• ICollection 2

Alpha testing

• cdn: https://cdn.jsdelivr.net/gh/fabricjs/fabric.js@vv6!-build/dist/fabric.js
• npm: npm i --save fabricjs/fabric.js#v6! && cd ./node_modules/fabric && npm run build
• yarn pnp: follow the patching instructions in the POC

To Do

• refactor selection logic (use dblClick to select nested objects? create mechanism for dev to customize selection)
• 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

• @asturur rethink preserveObjectStacking in favor of a drag image/ghost
• 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)
• look into active selection - creating from nested objects
• update tests
• object caching in some cases leaves traces
• refactor object caching
• 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
• support layers under groups?
• 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
• groupSVGElements
• support fill, stroke
• from svg - parsing back fill/stroke without adding redundant rect, layout props
• rethink _renderObjects - nested active object will fail with perPixelTargetFind because it will not get rendered by group (add logic to canvas.isTargetTransparent)

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!

[github-actions]

Code Coverage Summary

> fabric@5.0.0 coverage:report
> nyc report --reporter=lcov --reporter=text

-----------|---------|----------|---------|---------|-----------------------------------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s                             
-----------|---------|----------|---------|---------|-----------------------------------------------
All files  |   83.31 |    77.22 |    86.2 |   83.04 |                                               
 fabric.js |   83.31 |    77.22 |    86.2 |   83.04 | ...,30257,30382,30462-30527,30650,30749,30966 
-----------|---------|----------|---------|---------|-----------------------------------------------

[github-actions]

Code Coverage Summary

> fabric@5.0.0 coverage:report
> nyc report --reporter=lcov --reporter=text

-----------|---------|----------|---------|---------|-----------------------------------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s                             
-----------|---------|----------|---------|---------|-----------------------------------------------
All files  |   83.31 |    77.24 |   86.14 |   83.03 |                                               
 fabric.js |   83.31 |    77.24 |   86.14 |   83.03 | ...,30247,30372,30452-30517,30640,30739,30956 
-----------|---------|----------|---------|---------|-----------------------------------------------

[github-actions]

Code Coverage Summary

> fabric@5.0.0 coverage:report
> nyc report --reporter=lcov --reporter=text

-----------|---------|----------|---------|---------|-----------------------------------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s                             
-----------|---------|----------|---------|---------|-----------------------------------------------
All files  |   83.31 |    77.26 |   86.14 |   83.03 |                                               
 fabric.js |   83.31 |    77.26 |   86.14 |   83.03 | ...,30247,30372,30452-30517,30640,30739,30956 
-----------|---------|----------|---------|---------|-----------------------------------------------

[github-actions]

Code Coverage Summary

> fabric@5.0.0 coverage:report
> nyc report --reporter=lcov --reporter=text

-----------|---------|----------|---------|---------|-----------------------------------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s                             
-----------|---------|----------|---------|---------|-----------------------------------------------
All files  |   83.31 |    77.24 |   86.14 |   83.03 |                                               
 fabric.js |   83.31 |    77.24 |   86.14 |   83.03 | ...,30247,30372,30452-30517,30640,30739,30956 
-----------|---------|----------|---------|---------|-----------------------------------------------

[ShaMan123]

I have dropped old group's caching checks so the issue with caching probably lies there.
I didn't build new logic because, as we discussed, there's a need to rewrite it.

[ShaMan123]

add relativeRemove or some name for a function that removes objects without removing the group's transform

[ShaMan123]

Here I think it makes sense to preserve the old group's transform if removeParentTransform is true

[ShaMan123]

Alright,
Future thoughts regarding new selection logic:
If an object is selected, logic target checking should bubble up the tree to parents, siblings and relations in some manner.
Only after bubbling has reached it's course and is now at the top most ancestor of the active object should it iterate down the tree on all remaining objects searching for a new target to select.

Thoughts? @asturur @melchiar

[ShaMan123]

@asturur I now understand your incline not to have fill/stroke for group. I was not aware of backgroundColor which is good enough for most use cases. So I don't oppose removing

[ShaMan123]

Take a look at THIS!

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 notice 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! All you need is to reference the parent object as the group property (will rename that I guess) and reference the object in _objects array of parent

Custom classes will become much easier to build

[ShaMan123]

This PR has been broken down into #7858 #7859 #7860 and will be left open for tracking only

[ShaMan123]

apart from _renderObjects this PR has been completely consumed