tag:support.nodebox.net,2012-11-01:/discussions/show-your-work/364-arrange-nodeNodeBox: Discussion 2020-03-15T00:07:48Ztag:support.nodebox.net,2012-11-01:Comment/481573552020-03-14T23:59:52Z2020-03-15T00:07:48ZArrange Node<div><p>The arrange node is a cross between a grid node and a stack node. You can use it to arrange a group of differently-sized shapes into tidy rows or columns without as much wasted space.</p>
<p>The node takes a list of shapes (paths or geometries) and returns the same shapes in the same order but positioned according to the settings you provide.</p>
<p>There are four possible directions and each behaves differently:</p>
<ul>
<li><strong>South</strong>: waterfall layout. Shapes arranged left to right, top to bottom in top-aligned columns. This is the arrangement Pinterest uses.</li>
<li><strong>North</strong>: building block layout. Shapes arranged left to right, bottom to top in bottom-aligned columns. This simulates stacking blocks or boxes from the ground up one layer at a time.</li>
<li><strong>East</strong>: left text layout. Shapes arranged left to right, top to bottom in left-aligned rows. If the shapes are word paths, this will create a paragraph of left-aligned text. Unlike South and North modes, shapes are not evenly distributed. Instead, each row is filled until the row width exceeds the combines shape width divided by the number of rows - the same way text flows to fill a given paragraph width. As a result the number of actual rows may be fewer than the number specified in the stacks setting.</li>
<li><strong>West</strong>: right text layout. Shapes arranged left to right, top to bottom in right-aligned rows. This works just like the East direction except that the rows are right-justified instead of left-justified.</li>
</ul>
<p>Four other settings control the details of the arrangement:</p>
<ul>
<li><strong>Stacks</strong> is the target number of rows or columns</li>
<li><strong>Lane size</strong> is the total width or height of the lane each column or row occupies</li>
<li><strong>Stack margin</strong> is the distance between each shape within a stack</li>
<li><strong>Align within</strong>, if checked, aligns shapes within each stack. Shapes within columns are left-aligned. Shapes within rows are bottom-aligned (as if sitting on shelves). When arranging words into paragraphs, Align within should be unchecked.</li>
</ul>
<p>This one node can produce reasonable arrangements of many different collections of shapes or words. The attached demo and screenshot shows some possible use cases, including an arrangement of arrangements. Please experiment with it and share examples, questions, and comments.</p></div>john