<!DOCTYPE html><html><head><title></title><style type="text/css">p.MsoNormal,p.MsoNoSpacing{margin:0}</style></head><body><div>I'm right now trying to understand every LayoutMorph example from the LayoutMorph's class side and making the math with pen and paper to create an accurate model. (Using the power of the scientific method. :-)) The examples contain proportional sizing examples for all three cases where proportions add up to less than one, to one and more than one.<br></div><div><br></div><div>This code is from the exampe1b<br></div><blockquote type="cite"><div>row := LayoutMorph newRow name: #Row1.<br></div><div>row<br></div><div>color: Color red;<br></div><div>addMorph: (BoxedMorph new color: (Color h: 60 s: 0.6 v: 0.6); name: #A)<br></div><div>layoutSpec: (LayoutSpec fixedWidth: 10); <br></div><div>addMorph: (ImageMorph new name: #B);<br></div><div>addMorph: (BoxedMorph new color: (Color h: 30 s: 0.6 v: 0.6); name: #C)<br></div><div>layoutSpec: (LayoutSpec proportionalWidth: 0.4);<br></div><div>addMorph: (BoxedMorph new color: (Color h: 30 s: 0.6 v: 0.6); name: #D)<br></div><div>layoutSpec: (LayoutSpec proportionalWidth: 0.15);<br></div><div>addMorph: (BoxedMorph new color: (Color h: 60 s: 0.6 v: 0.6); name: #E)<br></div><div>layoutSpec: (LayoutSpec fixedWidth: 20 fixedHeight: 20).<br></div><div>pane addMorph: row layoutSpec: LayoutSpec useAll.<br></div></blockquote><div>I think what is happening is this in the X direction:<br></div><ul><li>The outer LayoutMorph extent is defined later in the code as 400@300<br></li><li>The outer LayoutMorph has 5 point separation, so the inner LayoutMorph (Row1) has 390 point to lay itself out in the X direction<br></li><li>The dynamically allocated proportions are: 0.4 for C, 0.15 for D in the X direction<br></li><li>The statically allocated X values are: 10 points for A, 85 pints for B and 20 for E<br></li><li>So the dynamically allocatable area is: 390-10-85-20 = 275<br></li><li>C's X dimenson is 275x0.4 = 110 and 275x0.15=41.25 is D's. And inspecting the two morphs' sizes supports my model. Because the proportionally allocated area's ratio in total is less than one we get empty space. This is why in the first row is only partially filled up. In the second row of this example the proportions add up to 1 so the row is filed up. <br></li><li>In the example1 method's first Row1 LayoutMorph's ratios add up to 1.35 so in this case the proportions in percent will be: 59,2% (0.8/1.35) for B, 29,6% (0.4/1.35) and 11,1% (0.15/1.35) for C. And these proportions looks correct doing the math and comparing to the inspector.<br></li></ul><div class="align-center" style="position:relative;margin-top:1em;margin-right:0px;margin-bottom:1em;margin-left:0px;text-align:center;"><img style="max-width:100%;height:auto;" src="cid:16912601806850.5774342997643414@content.messagingengine.com"><br></div><div>But the most simple disproof about the proportions should be 1 in total is the initialize method of LayoutSpec. It will set the proportional ratios 1.0. So if we have 2 submorphs initialized this way we will have the combined ratios of 2 in total. And the submorphs will have 50% (1/2) of the total area. <br></div><div><br></div><div>Maybe there is some kine of cognitive bias when we see numbers between 0 and 1 to interpret them directly as percentage. Because my first instinct also was that they need to add up to 1. But I tested with e.g. 500 as proportional ratio and it also works. Almost certainly there is normalization regarding the proportional ratios.<br></div><div class="align-center" style="position:relative;margin-top:1em;margin-right:0px;margin-bottom:1em;margin-left:0px;text-align:center;"><img style="max-width:100%;height:auto;" src="cid:16912640076700.2676338654289957@content.messagingengine.com"><br></div><div>Regards,<br></div><div>Szabolcs<br></div><div><br></div><div><br></div><div>On Sat, Aug 5, 2023, at 20:05, Hilaire Fernandes via Cuis-dev wrote:<br></div><blockquote type="cite" id="qt" style=""><p>Your proportional should add up to 1, otherwise the system will make a choice for you. Here it chooses to have no void, and reallocate the free space proportionally.<br></p><p>It is my interpretation.<br></p><p>Nevertheless, you should not meet a situation when you do not add up to 1. Why have unused space in a layout? Space screen is expensive.<br></p><p>If you want to trick the system you can add transparent morph:<br></p><div style="background-color:rgb(255, 255, 255);background-position-x:0%;background-position-y:0%;background-repeat:repeat;background-attachment:scroll;background-image:none;background-size:auto;background-origin:padding-box;background-clip:border-box;overflow-x:auto;overflow-y:auto;width:auto;border-top-color:gray;border-top-style:solid;border-right-color:gray;border-right-style:solid;border-bottom-color:gray;border-bottom-style:solid;border-left-color:gray;border-left-style:solid;border-image-outset:0;border-image-repeat:stretch;border-image-slice:100%;border-image-source:none;border-image-width:1;border-top-width:0.1em;border-right-width:0.1em;border-bottom-width:0.1em;border-left-width:0.8em;padding-top:0.2em;padding-right:0.6em;padding-bottom:0.2em;padding-left:0.6em;"><pre style="margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;line-height:125%;"><span style="color:rgb(51, 51, 51);">|</span><span style="color:rgb(153, 102, 51);">l b1 b2 t </span><span style="color:rgb(51, 51, 51);">|</span> <span style="color:rgb(153, 102, 51);">l</span> <span style="color:rgb(51, 51, 51);">:=</span> <span style="color:rgb(187, 0, 102);"><b>LayoutMorph</b></span> <span style="color:rgb(0, 102, 187);"><b>newColumn</b></span> . <span style="color:rgb(153, 102, 51);">b1</span> <span style="color:rgb(51, 51, 51);">:=</span> <span style="color:rgb(187, 0, 102);"><b>BoxedMorph</b></span> <span style="color:rgb(0, 112, 32);">new</span> <span style="color:rgb(0, 102, 187);"><b>layoutSpec:</b></span> (<span style="color:rgb(187, 0, 102);"><b>LayoutSpec</b></span> <span style="color:rgb(0, 102, 187);"><b>proportionalHeight:</b></span> <span style="color:rgb(102, 0, 238);"><b>0.1</b></span>) <span style="color:rgb(255, 0, 0);background-color:rgb(255, 170, 170);">::</span> <span style="color:rgb(0, 102, 187);"><b>color:</b></span> <span style="color:rgb(187, 0, 102);"><b>Color</b></span> <span style="color:rgb(0, 102, 187);"><b>green</b></span>. <span style="color:rgb(153, 102, 51);">b2</span> <span style="color:rgb(51, 51, 51);">:=</span> <span style="color:rgb(187, 0, 102);"><b>BoxedMorph</b></span> <span style="color:rgb(0, 112, 32);">new</span> <span style="color:rgb(0, 102, 187);"><b>layoutSpec:</b></span> (<span style="color:rgb(187, 0, 102);"><b>LayoutSpec</b></span> <span style="color:rgb(0, 102, 187);"><b>proportionalHeight:</b></span> <span style="color:rgb(102, 0, 238);"><b>0.1</b></span>) <span style="color:rgb(255, 0, 0);background-color:rgb(255, 170, 170);">::</span> <span style="color:rgb(0, 102, 187);"><b>color:</b></span> <span style="color:rgb(187, 0, 102);"><b>Color</b></span> <span style="color:rgb(0, 102, 187);"><b>red</b></span>. <span style="color:rgb(153, 102, 51);">t</span> <span style="color:rgb(51, 51, 51);">:=</span> <span style="color:rgb(187, 0, 102);"><b>BoxedMorph</b></span> <span style="color:rgb(0, 112, 32);">new</span> <span style="color:rgb(0, 102, 187);"><b>layoutSpec:</b></span> (<span style="color:rgb(187, 0, 102);"><b>LayoutSpec</b></span> <span style="color:rgb(0, 102, 187);"><b>proportionalHeight:</b></span> <span style="color:rgb(102, 0, 238);"><b>0.8</b></span>) <span style="color:rgb(255, 0, 0);background-color:rgb(255, 170, 170);">::</span> <span style="color:rgb(0, 102, 187);"><b>color:</b></span> <span style="color:rgb(187, 0, 102);"><b>Color</b></span> <span style="color:rgb(0, 102, 187);"><b>transparent</b></span> . <span style="color:rgb(153, 102, 51);">l</span> <span style="color:rgb(0, 102, 187);"><b>addMorph:</b></span> <span style="color:rgb(153, 102, 51);">b1</span>. <span style="color:rgb(153, 102, 51);">l</span> <span style="color:rgb(0, 102, 187);"><b>addMorph:</b></span> <span style="color:rgb(153, 102, 51);">t</span>. <span style="color:rgb(153, 102, 51);">l</span> <span style="color:rgb(0, 102, 187);"><b>addMorph:</b></span> <span style="color:rgb(153, 102, 51);">b2</span>. <span style="color:rgb(153, 102, 51);">l</span> <span style="color:rgb(0, 102, 187);"><b>openInWorld</b></span>. <br></pre></div><p><br></p><p><br></p><div class="qt-moz-cite-prefix">Le 05/08/2023 à 17:31, Szabolcs Komáromi via Cuis-dev a écrit :<br></div><blockquote type="cite" cite="mid:d44cf8d6-8c92-4ea0-977f-2193cb3d222c@app.fastmail.com"><div>Hi,<br></div><div><br></div><div>Shouldn't this code produce a morph with a green and red box inside the gray box at the gray box's top edge? And the red and green box should have a height 10% of the gray box's height? Every other direction works that way.<br></div><div><br></div><div>Or I don't understand something fundamental about laying out morphs. The furthermost Workspace's morph looks wrong to me.<br></div></blockquote><div>-- <br></div><div>Cuis-dev mailing list<br></div><div><a href="mailto:Cuis-dev@lists.cuis.st">Cuis-dev@lists.cuis.st</a><br></div><div><a href="https://lists.cuis.st/mailman/listinfo/cuis-dev">https://lists.cuis.st/mailman/listinfo/cuis-dev</a><br></div><div><br></div></blockquote><div><br></div></body></html>