BlLinearLayout test testElementWithThreeExactChildrenAlignInExactParentRTL fails after interspace constraint introduction

[plantec]

testElementWithThreeExactChildrenAlignInExactParentRTL is failing

[plantec]

in fact the test seems bad and there are issues with vertical orientation.

[plantec]

After my previous commit to get tests green, I have an issue in toplo. horizontal case. All seems ok try with the following code snippet:

| parent childA childB childC |
	childA := BlElement new 
			border: (BlBorder builder
				            dashed;
				            paint: Color blue;
				            width: 3;
				            build);
			constraintsDo: [ :c |
				c horizontal exact: 100.
				c vertical exact: 100 ].
	childB := BlElement new 
			border: (BlBorder builder
				            dashed;
				            paint: Color green;
				            width: 3;
				            build);
			constraintsDo: [ :c |
				c horizontal exact: 200.
				c vertical exact: 100 ].
	childC := BlElement new 
			border: (BlBorder builder
				            dashed;
				            paint: Color red;
				            width: 3;
				            build);
			constraintsDo: [ :c |
				c horizontal exact: 50.
				c vertical exact: 100 ].
	childA constraints linear vertical alignBottom.
	childB constraints linear vertical alignCenter.
	childC constraints linear vertical alignTop.
	parent := BlElement new
		           border: (BlBorder builder
				            paint: Color black;
				            width: 3;
				            build);
		           layout: BlLinearLayout horizontal.
	"parent layout rightToLeft. " "<-- uncomment here to get the inverted direction  effect"
	parent constraints horizontal exact: 500.
	parent constraints vertical exact: 600.
	parent addChildren: {
			childA.
			childB.
			childC }.
	parent forceLayout.
	'A: ' trace. childA position traceCr.
	'B: ' trace. childB position traceCr.
	'C: ' trace. childC position traceCr.
"	self assert: childA extent equals: 100 @ 100.
	self assert: childA position equals: 0 @ 0.
	self assert: childB extent equals: 200 @ 100.
	self assert: childB position equals: 150 @ 100.
	self assert: childC extent equals: 50 @ 100.
	self assert: childC position equals: 450 @ 200.
	self assert: parent extent equals: 500 @ 600.
	self assert: parent position equals: 0 @ 0."
	parent openInSpace.```

[plantec]

the issue is for vertical layout. Now, according to the horizontal case, the result seems not consistent.

| parent childA childB childC |
	childA := BlElement new 
			border: (BlBorder builder
				            dashed;
				            paint: Color blue;
				            width: 3;
				            build);
			constraintsDo: [ :c |
				c horizontal exact: 100.
				c vertical exact: 100 ].
	childB := BlElement new 
			border: (BlBorder builder
				            dashed;
				            paint: Color green;
				            width: 3;
				            build);
			constraintsDo: [ :c |
				c horizontal exact: 200.
				c vertical exact: 100 ].
	childC := BlElement new 
			border: (BlBorder builder
				            dashed;
				            paint: Color red;
				            width: 3;
				            build);
			constraintsDo: [ :c |
				c horizontal exact: 50.
				c vertical exact: 100 ].
	childA constraints linear horizontal alignLeft.
	childB constraints linear horizontal alignCenter.
	childC constraints linear horizontal alignRight.
	parent := BlElement new
		           border: (BlBorder builder
				            paint: Color black;
				            width: 3;
				            build);
		           layout: BlLinearLayout vertical.
	"parent layout rightToLeft. " "<-- uncomment here to get the inverted direction  effect"
	parent constraints horizontal exact: 500.
	parent constraints vertical exact: 600.
	parent addChildren: {
			childA.
			childB.
			childC }.
	parent forceLayout.
	'A: ' trace. childA position traceCr.
	'B: ' trace. childB position traceCr.
	'C: ' trace. childC position traceCr.
"	self assert: childA extent equals: 100 @ 100.
	self assert: childA position equals: 0 @ 0.
	self assert: childB extent equals: 200 @ 100.
	self assert: childB position equals: 150 @ 100.
	self assert: childC extent equals: 50 @ 100.
	self assert: childC position equals: 450 @ 200.
	self assert: parent extent equals: 500 @ 600.
	self assert: parent position equals: 0 @ 0."
	parent openInSpace.```

[tinchodias]

I'm confused, not sure I identify the problem. Indeed I see it strange that the API sets right-to-left but meaning bottom-to-top when vertical.

with "parent layout: BlLinearLayout vertical":

with "parent layout: BlLinearLayout horizontal":

[plantec]

I agree, it's confusing. I think this is because of the name rightToLeft in fact, #topToBottom/bottomToTop are not implemented. instead of (#leftToRight #rightToLeft) -> (#startToEnd #endToStart) that would work whatever the orientation (H/V) semantic of start ? H + startToEnd -> left to right H + endToStart -> right to left with H, start means left V + startToEnd -> top to bottom V + endToStart -> bottom to top with V, start means top

alignStart and alignEnd would always have a consistent meaning alignLeft, alignRight, alignTop and alignBottom implementation would differ depending on the orientation (H/V) and on the direction (startToEnd/endToStart) so that with alignLeft, the element would be really on the left side

[plantec]

thinking more about it... leftToRight and rightToLeft semantic is not clear. it seems that we agree :) what about invertDirection and invertOrientation ?

[tinchodias]

I agree, was can decide other names.

As a reference, I looked at others.

In Spec2 (SpDirectionableLayout)

• direction:

• newHorizontal (and newLeftToRight)
• newVertical (and newTopToBottom)

• align:

and API to align all items independently from the orientation:

• hAlignStart
• hAlignCenter
• hAlignEnd
• vAlignStart
• vAlignCenter
• vAlignEnd I am not sure if you can specify an alignment in specific items

In html (flexbox, etc)

• direction:

• flex-direction: row
• flex-direction: row-reverse
• flex-direction: column
• flex-direction: column-reverse These map to our:
• leftToRight
• rightToLeft
• topToBottom
• bottomToTop

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox#changing_flex-direction https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction

• align:

items can specify their option

• align-self: flex-start
• align-self: center
• align-self: flex-end

and there is an attribute to set the default align for items. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox

Martín

On 03-09-2023, at 05:10, Alain Plantec @.***> wrote:

thinking more about it... leftToRight and rightToLeft semantic is not clear. it seems that we agree :) what about invertDirection and invertOrientation ?

— Reply to this email directly, view it on GitHub https://github.com/pharo-graphics/Bloc/issues/302#issuecomment-1704044035, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAXHHKMI3D247MDDSJF3OE3XYQ3ODANCNFSM6AAAAAA4E3DGNU. You are receiving this because you were assigned.

[plantec]

I agree. I will merge the related PR and then open a new issue for operators renaming