Demo: LayoutStrategy with horizontal/vertical placement of children and support for percentage-based width/height

[drinkspiller]

I put together a demo of "inline" LayoutStrategy where the children of a group are positioned either horizontally (row) or vertically (column). The demo also supports supplying percentage-based width and height for Group and Shapes.

DEMO

I've read the LayoutManager README but am still not quite clear on when it is appropriate to implement layout logic in LayoutStrategy's calcLayoutResult method vs LayoutManager's performLayout method. I'd be grateful for a look at the LayoutStrategy implemented in the demo and suggestions for patterns that might be more idiomatic to Fabric. Thanks!

• Mr. Furley

[drinkspiller]

Friendly bump requesting guidance as to whether this should be done in LayoutStrategy's calcLayoutResult method vs LayoutManager's performLayout method?

[asturur]

Sorry for not replying.
The readme was my attempt to document how the layout strategy should have worked from the contributor code.
I cannot open your codesanbox demo anymore, or i would happily read it.
Can you make sure the demo is reacheable?

[graphics-et-al]

@drinkspiller Interested in this too- would love to see the demo

[drinkspiller]

@asturur & @graphics-et-al

It kind of works, but it's brittle. All the objects have to be added to the top level group followed by an imperative call to topLevelGroup.triggerLayout(). I ran into issues trying to 1) remove the need to imperatively call triggerLayout() and 2) getting layout working correctly if objects are added after the initial layout.

To see where things stand:

1. Try this updated demo link
2. Start the preview:
   
3. Check out: src/fabric_layout_flex_strategy.ts, src/app/app.component.ts

Feedback/modifications on 1) removing the requirement to imperatively triggerLayout() and 2) support layout for items .add()ed after the fact welcome!