See UPDATE below...

The place node is designed not just to make it easier to place shapes on the canvas, but also to change the way you THINK about placing shapes on a canvas.

In NodeBox, shapes and paths are positioned using points. Shapes like rect and ellipse have a position port that centers the shape on an x,y point. By making a list of points with a grid node, you can arrange your shapes in an orderly way. You can also reposition shapes using a translate or align node.

It's all done with points. And with enough ingenuity you can move shapes anywhere you want using this system.

But this is not how REAL graphic designers position elements on a canvas. Real designers use grid systems. In these systems elements are tied to a rigid arrangement of consistently sized tiles or cells that ensure everything lines up in a pleasing manner. Many arrangements of cells are possible, including simple graph paper, document pages with headers and footers, newspaper columns, and bento box compartments. In each case elements are anchored to particular cells; when the cells lines up, the elements line up with them.

My place node translates this idea to Nodebox in a powerful, flexible, general purpose way. Instead of aligning to points, you instead align to "reference" shapes - actually the bounding boxes of those shapes. The reference shape works like a cell. There are nine ways of aligning to a cell: tuck the upper left corner of your shape into the upper left corner of the cell, center the shape under the top edge of the cell, etc. You can align inside the cell or outside it.

The Place node takes six parameters:

• Shape. The shape, path, or geometry you wish to place.
• Reference Shape. The shape you want to place in relation to. If this shape is not a rectangle, the bounding box of the shape will be used instead. This ensures there are always four corners, four midpoints, and a center to refer to.
• Reference Point. One of nine possible alignment schemes:
  • Upper Left
  • Upper Mid
  • Upper Right
  • Right Mid
  • Lower Right
  • Lower Mid
  • Lower Left
  • Left Mid
  • Center
• Offset The distance in pixels from the edge of the reference shape.
• Inside. If checked, the shape will be aligned inside the reference. Otherwise, the shape will be aligned outside the reference.
• Descenders. If checked, compensate for text paths with descenders (like a lower case g).

You will normally use a zero or positive value for the offset. If the reference cells are not visible, you will probably want to keep all offsets at 0; if they are visible, you will probably need to increase the offset to provide some breathing room. For best results in multi-cell layout, use the same offset for all.

Negative offsets will pull outside elements into a cell or push inside elements out of a cell. This can sometimes be useful when using place to merge two non-rectangular shapes together (see example below). One subtle feature: elements tied to corners will actually be moved by the offset multiplied by the square root of two. This ensures that different elements aligned to the same reference shape with the same offsets will line up properly.

The Descenders option is not necessary when aligning geometric shapes (and will cause misalignments if used with them). But when aligning text paths inside the bottom of a cell or on top of a cell, you have two choices. You may want to base positioning on the actual bottom of the boundary box surrounding the text (including any descenders poking down), OR you may want to position based on the baseline of the text. If you check the Descenders box, the Place node will attempt to use the baseline; this may cause descending characters to dip below the bottom of the cell or into the top. You can correct this, if desired, by increasing the offset.

NOTE: the Descenders option will only work properly with text paths created at the origin. If you move your text path before using it with the place node, the text path will be (often rather dramatically) misaligned.

DEMO

The attached demo creates a simple layout of nine 4:3 cells and then aligns text in all 18 possible relationships (nine inside and nine outside). A constant margin of 7 pixels is defined using the number node named OFFSET; change that value to see the text move in relation to the nine cells.

You can also try turning off the Descenders option in the place1 node to see the effect. Notice the blue Gg text in the lower right corner of the lower right cell; it will bounce up and down as you switch the option on and off. When off, there are 7 pixels of space from the bottom of the g; when on, there are 7 pixels to the baseline of the text path (causing it to align better with the other two bottom cells). If you zoom in and look closely, you will see a very subtle effect on the blue Aa and (if you fiddle with place2) the red text paths on top. Depending on the font, many letters will have portions that dip ever so slightly below the baseline. So, when using text paths, it is a good idea to check the Descnders option even if you don't have any obviously descending characters.

Although the main use case for the place node is for aligning elements to a grid system, you can also use it to build complex shapes by tying two or more simple shapes together. The demo includes an example of this.

I place a female symbol in the first cell and a male symbol in the last cell. Both of these symbols are created by placing one shape next to another. The female symbol is made by placing a plus sign below a circle using the Lower Mid option. The male symbol is made by placing an arrow northeast of a circle using the Upper Right option. For the male symbol, since the reference shape is a circle, the arrow projects from the northeast corner of the circle's bounding box. To compensate for this, I use a negative offset to pull it in.

Notice also that the two circles are themselves placed using more place nodes (place5 and place6). This is a good example of how grid systems help you make more consistent and professional-looking layouts. Although placed in different corners of different cells, the consistent offsets ensure a clean look. Try changing the diameter of the two circles (using the SIZE node) to see how the two symbols adapt harmoniously.

One drawback of this system is that you do need to create a set of tiles or cells to control the placements. Fortunately, this is not hard to do. I already use a rectangle to create a canvas background, so I can use that as a reference to easily place a page number in the upper right corner, a signature in the bottom right, etc. Columns with gutters are easy to make.

If anyone expresses a desire for more advanced grid systems, I would enjoy making some. I have already been thinking about making a node to create a wide variety of Bento Box layouts. It would be possible to create a whole gallery of layouts and share them on the forum.

Comments welcome. Enjoy!