Arrange Node

john's Avatar

john

14 Mar, 2020 11:59 PM

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.

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.

There are four possible directions and each behaves differently:

  • South: waterfall layout. Shapes arranged left to right, top to bottom in top-aligned columns. This is the arrangement Pinterest uses.
  • North: 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.
  • East: 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.
  • West: 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.

Four other settings control the details of the arrangement:

  • Stacks is the target number of rows or columns
  • Lane size is the total width or height of the lane each column or row occupies
  • Stack margin is the distance between each shape within a stack
  • Align within, 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.

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.

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Already uploaded files

  • arrange_screenshot.png 594 KB
  • arrange_demo.zip 27.5 KB

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac

Recent Discussions

05 Apr, 2020 10:29 PM
02 Apr, 2020 07:12 PM
31 Mar, 2020 07:58 AM
31 Mar, 2020 04:13 AM
31 Mar, 2020 03:23 AM

 

27 Mar, 2020 03:55 AM
27 Mar, 2020 03:25 AM
15 Mar, 2020 09:06 PM
15 Mar, 2020 12:34 AM
14 Mar, 2020 11:59 PM
11 Mar, 2020 06:48 PM