<html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"/></head><body style="overflow-wrap: break-word; -webkit-nbsp-mode: space; line-break: after-white-space;">Hi Juan,<br id="lineBreakAtBeginningOfMessage"/><div><br/><blockquote type="cite"><div>Am 26.08.2024 um 16:45 schrieb Juan Vuletich via Cuis-dev <cuis-dev@lists.cuis.st>:</div><div><div bgcolor="#ffffff" text="#000000">
Apologies. I forgot about your contribution.<br/></div></div></blockquote><div><br/></div>No worries! I should have followed up on the proposal earlier myself.</div><div><br/><blockquote type="cite"><div><div bgcolor="#ffffff" text="#000000"><blockquote cite="mid:0AEEFBBF-FD88-40C5-9BEA-6074D11903D0@pieber.com" type="cite"><div>However, instead of an additional boolean instance variable
(useEdgeSpace) I chose to split separation into padding (inner
distance to the borders) and spacing (distance between
elements). I chose the name padding because that's how it's
called in the CSS box model [3].</div>
</blockquote>
<br/>
This is good. There's no reason to do it differently if what is well
known is perfectly fine, and doing it in our unique way only annoys
people without bringing an improvement.<br/>
<br/>
<blockquote cite="mid:0AEEFBBF-FD88-40C5-9BEA-6074D11903D0@pieber.com" type="cite">
<div>I did keep the instance variable separation in the first
step, as it is currently used in UI-Panel and UI-Click-Select in
Cuis-Smalltalk-UI. However, I prepared updates for those
packages after which the instance variable separation should be
deleted.</div>
</blockquote>
<br/>
Please post your code for these packages. (see my suggestion below)<br/></div></div></blockquote><div><br/></div><div>See the attached Cuis-Smalltalk-UI changes.zip. It removes all references to the instance variable separation and all senders of xSeparation and ySeparation, so the instance variable can be deleted. Here is how I found them:</div><div><br/></div><div><div style="color: rgb(59, 59, 59); background-color: rgb(255, 255, 255); font-family: Menlo, Monaco, "Courier New", monospace; line-height: 18px; white-space: pre;">Feature require: 'UI-MetaProperties'.</div><div style="color: rgb(59, 59, 59); background-color: rgb(255, 255, 255); font-family: Menlo, Monaco, "Courier New", monospace; line-height: 18px; white-space: pre;"><br/></div></div><div><div style="caret-color: rgb(59, 59, 59); color: rgb(59, 59, 59); font-family: Menlo, Monaco, "Courier New", monospace; white-space: pre; background-color: rgb(255, 255, 255);">"Print and browse all methods referencing the instance variable separation or sending #xSeparation or #ySeparation in classes other than LayoutMorph."</div><div style="caret-color: rgb(59, 59, 59); color: rgb(59, 59, 59); font-family: Menlo, Monaco, "Courier New", monospace; white-space: pre; background-color: rgb(255, 255, 255);">| methods |</div><div style="caret-color: rgb(59, 59, 59); color: rgb(59, 59, 59); font-family: Menlo, Monaco, "Courier New", monospace; white-space: pre; background-color: rgb(255, 255, 255);">methods := OrderedCollection new.</div><div style="caret-color: rgb(59, 59, 59); color: rgb(59, 59, 59); font-family: Menlo, Monaco, "Courier New", monospace; white-space: pre; background-color: rgb(255, 255, 255);">LayoutMorph allSubclasses do: [:cls | methods addAll: (cls allAccessesTo: 'separation')].</div><div style="caret-color: rgb(59, 59, 59); color: rgb(59, 59, 59); font-family: Menlo, Monaco, "Courier New", monospace; white-space: pre; background-color: rgb(255, 255, 255);">#(xSeparation ySeparation) do: [:selector |</div><div style="caret-color: rgb(59, 59, 59); color: rgb(59, 59, 59); font-family: Menlo, Monaco, "Courier New", monospace; white-space: pre; background-color: rgb(255, 255, 255);"> methods addAll: (Smalltalk allCallsOn: selector)].</div><div style="caret-color: rgb(59, 59, 59); color: rgb(59, 59, 59); font-family: Menlo, Monaco, "Courier New", monospace; white-space: pre; background-color: rgb(255, 255, 255);">methods := methods reject: [:method | method classSymbol = #LayoutMorph].</div><div style="caret-color: rgb(59, 59, 59); color: rgb(59, 59, 59); font-family: Menlo, Monaco, "Courier New", monospace; white-space: pre; background-color: rgb(255, 255, 255);">methods do: [:method | | package |</div><div style="caret-color: rgb(59, 59, 59); color: rgb(59, 59, 59); font-family: Menlo, Monaco, "Courier New", monospace; white-space: pre; background-color: rgb(255, 255, 255);"> package := CodePackage packageOfMethod: method ifNone: [].</div><div style="caret-color: rgb(59, 59, 59); color: rgb(59, 59, 59); font-family: Menlo, Monaco, "Courier New", monospace; white-space: pre; background-color: rgb(255, 255, 255);"> Transcript cr; show: 'Package: '; show: package packageName; show: ': '.</div><div style="caret-color: rgb(59, 59, 59); color: rgb(59, 59, 59); font-family: Menlo, Monaco, "Courier New", monospace; white-space: pre; background-color: rgb(255, 255, 255);"> method printClassAndSelectorOn: Transcript].</div><div style="caret-color: rgb(59, 59, 59); color: rgb(59, 59, 59); font-family: Menlo, Monaco, "Courier New", monospace; white-space: pre; background-color: rgb(255, 255, 255);">Smalltalk</div><div style="caret-color: rgb(59, 59, 59); color: rgb(59, 59, 59); font-family: Menlo, Monaco, "Courier New", monospace; white-space: pre; background-color: rgb(255, 255, 255);"> browseMessageListUnsorted: methods</div><div style="caret-color: rgb(59, 59, 59); color: rgb(59, 59, 59); font-family: Menlo, Monaco, "Courier New", monospace; white-space: pre; background-color: rgb(255, 255, 255);"> name: 'References to separation, Senders of xSeparation and ySeparation'</div><div style="caret-color: rgb(59, 59, 59); color: rgb(59, 59, 59); font-family: Menlo, Monaco, "Courier New", monospace; white-space: pre; background-color: rgb(255, 255, 255);"> autoHighlight: 'separation'.</div></div><div><br/></div><div>My change set is a prerequisite for loading the packages.</div><br/><blockquote type="cite"><div><div bgcolor="#ffffff" text="#000000"><blockquote cite="mid:0AEEFBBF-FD88-40C5-9BEA-6074D11903D0@pieber.com" type="cite"><div>In a third step the instance variable padding could be moved
to the superclass BoxedMorph and be supplemented by the property
margin (outer distance to the borders), which is also part of
the CSS box model [3] and widely used in web design.</div>
<div><br/>
</div>
<div>I would ike this design because LayoutMorph would become
simpler again, BoxedMorph would become more flexible and at the
same time easier to understand for people with knowledge of CSS.
What do you think?</div>
</blockquote>
<br/>
I think this should be the first step, actually, as it impacts on
the resulting design for LayoutMorph.<br/>
<br/>
This is my suggestion:<br/>
- BoxedMorph would have 2 "Borders": Border and Padding<br/>
- Padding is drawn the same as background, i.e. using the morph
'color'<br/>
- Padding behaves as an inner part of the current Border. Any code
that needs the boundary between current Border and the "inside" of
the morph would now get the boundary between Padding and the area
inside it.<br/></div></div></blockquote><div><br/></div>I like that!</div><div><br/><blockquote type="cite"><div><div bgcolor="#ffffff" text="#000000">
- Margin is only a property that a morph can be queried about, and
is part of its LayoutSpec. It is not considered part of the morph at
all. It is only used by the containing LayoutMorph. This design is
consistent with [1], that states: "Note: The margin property also
affects the total space that the box will take up on the page, but
the margin is not included in the actual size of the box. The box's
total width and height stops at the border."<br/>
<br/>
So, Bernhard, the difference with your design would be:<br/>
- Margin is moved from LayoutMorph to the inner morphs, but to their
LayoutSpec. It is to be used in place of "separation" or "spacing".<br/>
- Padding is moved up to BorderedMorph as you suggest. LayoutMorphs
would inherit it. This means that any BorderedMorph could have a
non-zero padding of their contents<br/>
- LayoutMorph would no longer have 'separation' and 'margin',
neither 'useEdgeSpace' nor a specific 'padding'.<br/>
<br/>
I think this would cover all the suggested use cases.<br/>
<br/>
Opinions?<br/></div></div></blockquote><div><br/></div><div>I like your proposal. However, as Mark wrote I also think spacing on the level of LayoutMorph would still be needed. How would you emulate this behavior with only margins in the layouts specs on the level of submorphs?</div><div><br/></div><div><div><span class="Apple-tab-span" style="white-space:pre"> </span>| row |</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>row := (LayoutMorph newRow padding: 0; spacing: 10) name: 'padding & spacing'.</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>row</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>color: Color white;</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>addMorph: (BoxedMorph new noBorder; color: Color random; name: 'A')</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>layoutSpec: (LayoutSpec proportionalWidth: 1 / 3);</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>addMorph: (BoxedMorph new noBorder; color: Color random; name: 'B')</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>layoutSpec: (LayoutSpec proportionalWidth: 1 / 3);</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>addMorph: (BoxedMorph new noBorder; color: Color random; name: 'c')</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>layoutSpec: (LayoutSpec proportionalWidth: 1 / 3).</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>row morphPosition: 150@130 extent: 400@300.</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>row openInWorld</div></div><div><br/></div><div>Actually, instead of spacing we should call it gap, as this is the CSS property name for this behavior [1]. As we currently support only one direction in a LayoutMorph a point instead of a number – as I implemented it – does not make sense.</div><div><br/></div><div>For even greater flexibility margin, border, and padding could support Rectangles in addition to Numbers and Points.</div><div><br/></div><div>[1] <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/gap">https://developer.mozilla.org/en-US/docs/Web/CSS/gap</a></div><div><br/></div><div>Cheers,</div><div>Bernhard</div><div><br/></div></div><div></div></body></html><html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"/></head><body style="overflow-wrap: break-word; -webkit-nbsp-mode: space; line-break: after-white-space;"><div></div><br/></body></html>