Closed labordep closed 2 weeks ago
Could use the the margins, but it does not seem to work.
Here i added a margin of 10px to all children. See:
BlElement new
constraintsDo: [:constraints | constraints horizontal exact: 400.0.
constraints vertical exact: 300.0 ];
id: #A;
layout: BlProportionalLayout new;
addChildren: {(BlElement new
constraintsDo: [:constraints | constraints proportional vertical bottom: 0.5.
constraints margin: (BlInsets all: 10.0) ];
id: #B;
background: (BlPaintBackground new
paint: (BlColorPaint new
color: (Color r: 0.9413489736070382 g: 0.05865102639296188 b: 0.0 alpha: 1.0);
yourself);
opacity: 1.0;
yourself);
border: (BlBorderBuilder new
paint: (BlColorPaint new
color: (Color r: 0.0 g: 0.0 b: 0.0 alpha: 1.0);
yourself);
build);
yourself) .
(BlElement new
constraintsDo: [:constraints | constraints proportional horizontal right: 0.5.
constraints proportional vertical top: 0.5.
constraints margin: (BlInsets all: 10.0) ];
id: #C;
background: (BlPaintBackground new
paint: (BlColorPaint new
color: (Color r: 0.0 g: 0.0 b: 1.0 alpha: 1.0);
yourself);
opacity: 1.0;
yourself);
border: (BlBorderBuilder new
paint: (BlColorPaint new
color: (Color r: 0.0 g: 0.0 b: 0.0 alpha: 1.0);
yourself);
build);
yourself) .
(BlElement new
constraintsDo: [:constraints | constraints proportional horizontal left: 0.5.
constraints proportional vertical top: 0.5.
constraints margin: (BlInsets all: 10.0) ];
id: #D;
background: (BlPaintBackground new
paint: (BlColorPaint new
color: (Color r: 0.0 g: 0.0 b: 1.0 alpha: 1.0);
yourself);
opacity: 1.0;
yourself);
border: (BlBorderBuilder new
paint: (BlColorPaint new
color: (Color r: 0.0 g: 0.0 b: 0.0 alpha: 1.0);
yourself);
build);
yourself)};
background: (BlPaintBackground new
paint: (BlColorPaint new
color: (Color r: 0.5 g: 0.5 b: 0.5 alpha: 1.0);
yourself);
opacity: 1.0;
yourself);
yourself
The gap between the parent border and the child is correct but the gap between the children are not.
I see the point, and I'm doing a PR to evaluate. I wrote current math calculations of this layout taking the inspiration on the Morphic proportional and AFAIU it was like it is now. But I see your point, the offset of the children's margin would be very convenient in the way you request.
In my opinion margin are not a solution for this problem. I just want to personalize the proportion... I prefer to access to topOffset than using margin top ...
too objects to do the job kill the solution... i prefer to use a single object for constraints ... BlInsets all ... lets keep api simple to use... we don't have to know Bloc elements to manipulate bloc... (i have the same remark about : visbility ... )
Cheers ! :)
Eric
Okay, I see. However, as it is right now, all BlElement have padding and margin and they are stored internally in a layout constraint inst var. When the parent has a proportional layout, the children's margin is ignored if we store this as another inst var.
See in BlElement
:
padding: aBlInsets
self padding = aBlInsets ifTrue: [ ^ self ].
self constraintsDo: [ :c | c padding: aBlInsets ]
and
margin: aBlInsets
self margin = aBlInsets ifTrue: [ ^ self ].
self constraintsDo: [ :c | c margin: aBlInsets ]
In grid layout, the margin of the children has a similar effect in the rendering: a gap between the "cells":
gap := 5.
cell1 := BlElement new
background: Color red;
constraintsDo: [ :c |
c horizontal matchParent.
c vertical matchParent.
c margin: (BlInsets all: gap) ];
yourself.
cell2 := BlElement new
background: Color green;
constraintsDo: [ :c |
c horizontal matchParent.
c grid horizontal weight: 3.
c vertical matchParent.
c margin: (BlInsets all: gap) ];
yourself.
container := BlElement new
background: Color blue;
layout: (BlGridLayout new columnCount: 2);
size: 100 @ 100;
addChild: cell1;
addChild: cell2;
yourself.
container exportAsPNG
gap := 5:
gap := 0:
gsp := 10:
Hi,
The need is to define a pixel offset value (for each directions : left, bottom, right, top). This value should be negative (for example: -5px).
Illustration with a concrete use case:![image](https://github.com/user-attachments/assets/380fe83f-7c6e-492c-b0f6-0103f4f3cb57)
Note: dimensions of this picture are not representative.
Thanks :)