Bug 1456 - GraphUI: Add CSS alike Layout for Group: GridLayout and BoxLayout
Summary: GraphUI: Add CSS alike Layout for Group: GridLayout and BoxLayout
Status: RESOLVED FIXED
Alias: None
Product: GraphUI
Classification: JogAmp
Component: Core (show other bugs)
Version: 2.6.0
Hardware: All all
: P4 normal
Assignee: Sven Gothel
URL:
Depends on:
Blocks:
 
Reported: 2023-09-24 00:55 CEST by Sven Gothel
Modified: 2023-09-24 01:01 CEST (History)
0 users

See Also:
Type: FEATURE
SCM Refs:
6a0ac90182efba40b0e6dab8f6390898aced70e8 aca5b9b176f3c3393d8c7666a252488d44b18f2e 70d2b056e69562e83156d0435208be8124f2ff86 a9c76153fd9a472679c1fc85189f6d4ecda7979e 45298f3d4ef14cf3cc8eafb568f8b891c0aa4b41 8439522d73b60bcf61cc59550df6297bbafe73fb f39a084c6a34a083698ca56e9122642e839234c2 ddd6cac8cc658ce542cb98e85f7d262f9917d37a e5de90b67efe8e8ca518159b3a73295d751764c1 162f8e309b67c333a482d636e59d207a6c5924e7 52d3dd3b3d684d6ba37e573764c3006c4ba20494 e676a65eac2bfa2abbfcd346492868ed17dc4667 3ecb8e9d1bfd1149f32b05c13c5ec1be6c0cab54
Workaround: ---

Attachments
Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Sven Gothel 2023-09-24 00:55:49 CEST 
Grid- and Boxlayout shall be attachable to Group
and layout all elements at validate.

Each Shape shall have its property 'Padding',
which is part of the Shape bounds.

GridLayout shall have property Gap, outside of Shape bounds.

BoxLayout shall have property 'Margin', outside of Shape bound.

Grid- and BoxLayout shall utilize 'Alignment', giving directive 
about how each Shape shall be aligned to its field:
- Fill (scale up to field size)
- Center Horizontal
- Center Vertical

....
Comment 1 Sven Gothel 2023-09-24 01:01:55 CEST 
Most interesting ..

6a0ac90182efba40b0e6dab8f6390898aced70e8
GraphUI GridLayout: Functional Grid Layout w/ Padding, demo'ed in UISceneDemo20 with button Groups
    
    All layout magic is simply performed in Group.Layout.layout(..) @ validate, incl. updating the

+++

aca5b9b176f3c3393d8c7666a252488d44b18f2e
    GraphUI GridLayout: Also adjust potential bottom-left delta when centering shape to cell (like GlyphShape w/ underline)

+++

70d2b056e69562e83156d0435208be8124f2ff86
    GraphUI: Add BoxLayout and Margin, todo: Have GridLayout properly use Gap w/ Padding and alignment (Margin?) (CSS alike)

+++

a9c76153fd9a472679c1fc85189f6d4ecda7979e
    GraphUI Working GridLayout w/ and w/o cell-size and alignment; Added BoxLayout.

+++

8439522d73b60bcf61cc59550df6297bbafe73fb
    GraphUI Layout Alignment: Separate center alignment to horizontal and vertical

+++

ddd6cac8cc658ce542cb98e85f7d262f9917d37a

GraphUI Layout: Fix BoxLayout scale, margin and padding; Add same padding behavior to BoxLayout and GridLayout.

For all:
- Padding is applied to each {@Shape} via {@link Shape#setPaddding(Padding)} if passed in constructor
    
BoxLayout:
- Optionally centered {@link Alignment.Bit#CenterHoriz horizontally}, {@link Alignment.Bit#CenterVert vertically} or {@link Alignment#Center both}.
- Optionally scaled to cell-size if given and {@link Alignment#Fill}
- Margin is ignored on dimension with center {@link Alignment}
- Not implemented {@link Alignment}: Top, Right, Bottom, Left
    
GridLayout:
- Optionally centered {@link Alignment.Bit#CenterHoriz horizontally}, {@link Alignment.Bit#CenterVert vertically} or {@link Alignment#Center both}.
- Optionally scaled to cell-size if given and {@link Alignment#Fill}
- Without cell-size behaves like a grid bag using individual shape sizes including padding
- Can be filled in {@link Order#COLUMN} or {@link Order#ROW} major-order.
- Not implemented {@link Alignment}: Top, Right, Bottom, Left
    
Changes to Group.Layout interface:
- Added preValidate(Shape) allowing to prepare the shape before validation, used to inject Padding
    
Changes to Margin:
- Removed the complex CENTER property and using Alignment in BoxLayout as well
    
Changes to BoxLayout:
- Using Alignment
    
+++ 
    
Tested via UILayoutBox01 and UILayoutGrid01,
try the tooltip by clicking on the group's description label.

+++

e5de90b67efe8e8ca518159b3a73295d751764c1
GraphUI BoxLayout: Margin is only ignored for center Alignment w/o Fill scale. {Box,Grid}Layout: Always remove Bottom-Left delta a
nd refine API doc of  incl scale behavior

+++

e676a65eac2bfa2abbfcd346492868ed17dc4667
    GraphUI Layout (Box/Grid): Adjust bottom-left offset according to center-axis


+++