feat(Object): `fill-parent` layout #7901

ShaMan123 · 2022-04-23T12:57:41Z

Gist

This PR adds support for fill-parent layout option on Object.
This complements Layer and the layout engine.
Makes backgroundColor | fill | stroke on Group redundant.
Same goes for bg/overlay image/color on Canvas. The next PR can deprecate them, which is good for v6 and layering in particular.

Changes

src/util/parent_resize_observer.js - extracted logic from Layer
src/shapes/layer.class.js - extracted logic
src/shapes/group.class.js - adaptations + important fix 2e35a8c ported to fix(Group): patch2 minors #7900 9a5fac1
src/mixins/stateful.mixin.js - will save state of nested objects/gradients/filters (clipPath etc.) instead of copying them entirely. This adaptation is needed because I used circular refs instead of a mixin for ParentResizeObserver (which will probably be the standard for fabric after migrating to TS)
src/shapes/circle.class.js
src/shapes/ellipse.class.js
Most of the rest of the files are adapted tests and a few that I've added.

I handled Path and others by scaling. Thoughts?

Dev

First merge #7860 update from master and merge this one.

View the diff

Test

    canvas.add(
      new fabric.Rect({
      fill: "yellow",
      originX: 'center',
      originY: 'center',
      stroke: 'green',
      strokeWidth: 50,
      strokeDashArray: [4, 16, 4],
      evented: false,
      selectable: false,
      layout: 'fill-parent'
      }),
      new fabric.Circle({
        left: 100,
        top: 50,
        radius: 50,
        fill: 'blue'
      })
    );
    canvas.on("resize", (e) => console.log("resizing", e));
    canvas.item(0).animate('angle', 360, {
      duration: 5000,
      delay: 5000,
      onChange: () => canvas.renderAll()
    });

    setTimeout(() => canvas.setDimensions({
      width: 200,
      height: 200
    }), 3000);

Kitchensink._.Fabric.js.Demos.-.Google.Chrome.2022-04-23.16-41-58.mp4

#7744 (review)

in case object is a collection

github-actions · 2022-05-04T07:21:37Z

Code Coverage Summary

> [email protected] coverage:report
> nyc report --reporter=lcov --reporter=text

-----------|---------|----------|---------|---------|-----------------------------------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s                             
-----------|---------|----------|---------|---------|-----------------------------------------------
All files  |   82.95 |    75.88 |   85.69 |   82.66 |                                               
 fabric.js |   82.95 |    75.88 |   85.69 |   82.66 | ...,31404,31478,31489-31554,31677,31776,32012 
-----------|---------|----------|---------|---------|-----------------------------------------------

github-actions · 2022-05-04T07:26:27Z

Code Coverage Summary

> [email protected] coverage:report
> nyc report --reporter=lcov --reporter=text

-----------|---------|----------|---------|---------|-----------------------------------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s                             
-----------|---------|----------|---------|---------|-----------------------------------------------
All files  |   83.23 |    76.31 |   85.69 |   82.96 |                                               
 fabric.js |   83.23 |    76.31 |   85.69 |   82.96 | ...,31404,31478,31489-31554,31677,31776,32012 
-----------|---------|----------|---------|---------|-----------------------------------------------

github-actions · 2022-05-04T07:27:59Z

Code Coverage Summary

> [email protected] coverage:report
> nyc report --reporter=lcov --reporter=text

-----------|---------|----------|---------|---------|-----------------------------------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s                             
-----------|---------|----------|---------|---------|-----------------------------------------------
All files  |   83.29 |    76.38 |   85.69 |   83.02 |                                               
 fabric.js |   83.29 |    76.38 |   85.69 |   83.02 | ...,31404,31478,31489-31554,31677,31776,32012 
-----------|---------|----------|---------|---------|-----------------------------------------------

github-actions · 2022-05-04T08:18:15Z

Code Coverage Summary

> [email protected] coverage:report
> nyc report --reporter=lcov --reporter=text

-----------|---------|----------|---------|---------|-----------------------------------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s                             
-----------|---------|----------|---------|---------|-----------------------------------------------
All files  |   83.24 |    76.33 |   85.69 |   82.97 |                                               
 fabric.js |   83.24 |    76.33 |   85.69 |   82.97 | ...,31409,31483,31494-31559,31682,31781,32017 
-----------|---------|----------|---------|---------|-----------------------------------------------

github-actions · 2022-05-04T08:23:43Z

Code Coverage Summary

> [email protected] coverage:report
> nyc report --reporter=lcov --reporter=text

-----------|---------|----------|---------|---------|-----------------------------------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s                             
-----------|---------|----------|---------|---------|-----------------------------------------------
All files  |   83.24 |     76.4 |   85.69 |   82.97 |                                               
 fabric.js |   83.24 |     76.4 |   85.69 |   82.97 | ...,31409,31483,31494-31559,31682,31781,32017 
-----------|---------|----------|---------|---------|-----------------------------------------------

github-actions · 2022-05-04T08:35:35Z

Code Coverage Summary

> [email protected] coverage:report
> nyc report --reporter=lcov --reporter=text

-----------|---------|----------|---------|---------|-----------------------------------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s                             
-----------|---------|----------|---------|---------|-----------------------------------------------
All files  |   83.24 |     76.4 |   85.69 |   82.97 |                                               
 fabric.js |   83.24 |     76.4 |   85.69 |   82.97 | ...,31409,31483,31494-31559,31682,31781,32017 
-----------|---------|----------|---------|---------|-----------------------------------------------

github-actions · 2022-05-04T09:02:41Z

Code Coverage Summary

> [email protected] coverage:report
> nyc report --reporter=lcov --reporter=text

-----------|---------|----------|---------|---------|-----------------------------------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s                             
-----------|---------|----------|---------|---------|-----------------------------------------------
All files  |   83.18 |    76.35 |   85.63 |    82.9 |                                               
 fabric.js |   83.18 |    76.35 |   85.63 |    82.9 | ...,31409,31483,31494-31559,31682,31781,32017 
-----------|---------|----------|---------|---------|-----------------------------------------------

github-actions · 2022-06-12T05:04:03Z

Code Coverage Summary

> [email protected] coverage:report
> nyc report --reporter=lcov --reporter=text

-----------|---------|----------|---------|---------|-----------------------------------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s                             
-----------|---------|----------|---------|---------|-----------------------------------------------
All files  |   83.19 |    76.41 |   85.64 |   82.92 |                                               
 fabric.js |   83.19 |    76.41 |   85.64 |   82.92 | ...,31440,31514,31525-31590,31713,31812,32048 
-----------|---------|----------|---------|---------|-----------------------------------------------

github-actions · 2022-06-12T05:14:08Z

Code Coverage Summary

> [email protected] coverage:report
> nyc report --reporter=lcov --reporter=text

-----------|---------|----------|---------|---------|-----------------------------------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s                             
-----------|---------|----------|---------|---------|-----------------------------------------------
All files  |   83.19 |    76.41 |   85.64 |   82.92 |                                               
 fabric.js |   83.19 |    76.41 |   85.64 |   82.92 | ...,31440,31514,31525-31590,31713,31812,32048 
-----------|---------|----------|---------|---------|-----------------------------------------------

github-actions · 2022-06-12T05:50:01Z

Code Coverage Summary

> [email protected] coverage:report
> nyc report --reporter=lcov --reporter=text

-----------|---------|----------|---------|---------|-----------------------------------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s                             
-----------|---------|----------|---------|---------|-----------------------------------------------
All files  |   83.19 |    76.41 |   85.64 |   82.92 |                                               
 fabric.js |   83.19 |    76.41 |   85.64 |   82.92 | ...,31440,31514,31525-31590,31713,31812,32048 
-----------|---------|----------|---------|---------|-----------------------------------------------

stale · 2022-06-28T00:17:11Z

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

ShaMan123 · 2024-03-20T09:40:10Z

closing in favor of LayoutManager hook onAfterLayout, layout:after event

ShaMan123 added 30 commits April 3, 2022 23:32

apply 7744 patch (no binaries)

1a191a7

apply 7744 patch (binaries)

26e8392

commit #7744 review

7d793b3

#7744 (review)

patch2

2708029

Update spray_brush.class.js

02a8ffa

enable text editing under group

0d3690f

migrate back to isDescendantOf

ff0346a

render bg

812f02a

fix(): clear canvas from entire object tree

053946c

in case object is a collection

fix(): center object in case object is nested

db76c44

Update eraser_brush.mixin.js

04aad5b

Update canvas.class.js

8c1c535

Update canvas_events.mixin.js

3fd4af2

lint

58e9be2

safeguard from adding group to itself

c2ef2f5

Update object_ancestry.mixin.js

f0145b5

patch tests from v6!

cb20b81

Update canvas_grouping.mixin.js

347f80d

Update canvas.class.js

a56d55e

create layer

22045b6

Update layer.class.js

724792a

warn

7163ad3

Update group_layout.js

2a426e7

Update group_layout.js

5e3fc1f

remove redundant logic

2b1f680

Update canvas_grouping.mixin.js

1ad5cc8

fix(): calling sendPointToPlane

11c828f

Update group.class.js

b6fa3dc

refactor enterGroup

e9afc89

invalidate groups after active selection change

d8f8251

ShaMan123 added 2 commits May 4, 2022 10:24

add test

4e2c5da

lint

de1fae2

fix polyline/ploygon

443bc35

ShaMan123 added 2 commits May 4, 2022 11:20

Update generic_rendering.js

bb355d2

Update fill-parent.png

00e66c9

Update generic_rendering.js

c33fe61

ShaMan123 added 2 commits May 4, 2022 11:58

backgroundColor -> fill-parent object

d63f288

remove bgColor

12311b0

Merge branch 'master' into fill-parent

6e8daca

ShaMan123 added 2 commits June 12, 2022 08:07

Merge branch 'master' into v6-layer

1a2612e

Merge branch 'v6-layer' into fill-parent

351967c

fix tests

14866dc

ShaMan123 mentioned this pull request Jun 26, 2022

ci(): switch the old custom build for rollup #8013

Merged

stale bot added the stale Issue marked as stale by the stale bot label Jun 28, 2022

ShaMan123 added feature and removed stale Issue marked as stale by the stale bot labels Jun 28, 2022

ShaMan123 mentioned this pull request Nov 28, 2022

feat(Brush API): Observable, clipPath #8476

Closed

2 tasks

ShaMan123 closed this Mar 20, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(Object): `fill-parent` layout #7901

feat(Object): `fill-parent` layout #7901

ShaMan123 commented Apr 23, 2022 •

edited

Loading

github-actions bot commented May 4, 2022 •

edited

Loading

github-actions bot commented May 4, 2022 •

edited

Loading

github-actions bot commented May 4, 2022 •

edited

Loading

github-actions bot commented May 4, 2022 •

edited

Loading

github-actions bot commented May 4, 2022 •

edited

Loading

github-actions bot commented May 4, 2022 •

edited

Loading

github-actions bot commented May 4, 2022 •

edited

Loading

github-actions bot commented Jun 12, 2022 •

edited

Loading

github-actions bot commented Jun 12, 2022 •

edited

Loading

github-actions bot commented Jun 12, 2022 •

edited

Loading

stale bot commented Jun 28, 2022

ShaMan123 commented Mar 20, 2024

feat(Object): fill-parent layout #7901

feat(Object): fill-parent layout #7901

Conversation

ShaMan123 commented Apr 23, 2022 • edited Loading

Gist

Changes

Dev

github-actions bot commented May 4, 2022 • edited Loading

Code Coverage Summary

github-actions bot commented May 4, 2022 • edited Loading

Code Coverage Summary

github-actions bot commented May 4, 2022 • edited Loading

Code Coverage Summary

github-actions bot commented May 4, 2022 • edited Loading

Code Coverage Summary

github-actions bot commented May 4, 2022 • edited Loading

Code Coverage Summary

github-actions bot commented May 4, 2022 • edited Loading

Code Coverage Summary

github-actions bot commented May 4, 2022 • edited Loading

Code Coverage Summary

github-actions bot commented Jun 12, 2022 • edited Loading

Code Coverage Summary

github-actions bot commented Jun 12, 2022 • edited Loading

Code Coverage Summary

github-actions bot commented Jun 12, 2022 • edited Loading

Code Coverage Summary

stale bot commented Jun 28, 2022

ShaMan123 commented Mar 20, 2024

feat(Object): `fill-parent` layout #7901

feat(Object): `fill-parent` layout #7901

ShaMan123 commented Apr 23, 2022 •

edited

Loading

github-actions bot commented May 4, 2022 •

edited

Loading

github-actions bot commented May 4, 2022 •

edited

Loading

github-actions bot commented May 4, 2022 •

edited

Loading

github-actions bot commented May 4, 2022 •

edited

Loading

github-actions bot commented May 4, 2022 •

edited

Loading

github-actions bot commented May 4, 2022 •

edited

Loading

github-actions bot commented May 4, 2022 •

edited

Loading

github-actions bot commented Jun 12, 2022 •

edited

Loading

github-actions bot commented Jun 12, 2022 •

edited

Loading

github-actions bot commented Jun 12, 2022 •

edited

Loading