These docs are for v1.0. Click to read the latest docs for v1.2.

Lucid products will calculate the placement and size of a shape's geometry using the bounds of the shape (or sub-shape) definition that contains it. By default, the bounds of a parent shape will be applied to its sub-shapes, but you can use shape data or another formula to modify a sub-shape’s bounds and describe a new position or size for the sub-shape's geometry. Bounds is defined by specifying four parts: Anchor Position, Anchor Offset, Size, and Rotation.

ShapeBounds

PropertyDescription
xformula
yformula
wformula
hformula
absoluteboolean, string (optional)
rotationformula (optional)
anchorstring, Anchor (optional)

Anchor

PropertyType
xnumber
ynumber

Anchor position

The anchor position of a shape’s bounds specifies the anchor/rotation point for the shape. Combined with the anchor offset, anchor position dictates where to place the shape relative to its container. If an anchor position is not defined for the shape, it will default to anchoring to the top-left corner of its parent container.

Anchor position is defined using relative or absolute coordinates. See the Absolute vs. Relative Coordinates section below to learn more.

Anchor offset

The anchor offset of a shape’s bounds describes where the anchor position will be placed on the shape. For example, an anchor offset of top-left will place its top-left corner at the anchor position.

Anchor offset can be specified directly as a relative coordinate within the sub-shape [from (0, 0) to (1, 1)] or can be specified using one of the predefined anchor types (defined below).

As an illustration, in the example below there are 3 sub-shapes (A, B, and C), each with different anchor types and positions.

Anchor Points

The following values of each sub-shape's anchor offset are as follows:

  • Sub-shape A has an anchor offset of left, positioned at anchor point (0, 0.5), which is the left of the container.
  • Sub-shape B has an anchor of center, positioned at anchor point (0.5, 0.5), which is the center of the container.
  • Sub-shape C has an anchor of top-right, positioned at anchor point (1, 0), which is the top-right corner of the container.

Note that changing the anchor offset would move each sub-shape around their respective green points, and not the container itself.

Anchor TypeDescription
top-leftUses the top-left corner of the sub-shape as the anchor point. Equivalent to an anchor of (0, 0).
topUses the top center point of the sub-shape as the anchor point. Equivalent to an anchor of (0.5, 0).
top-rightUses the top-right corner of the sub-shape as the anchor point. Equivalent to an anchor of (1, 0).
leftUses the left center point of the sub-shape as the anchor point. Equivalent to an anchor of (0, 0.5).
centerUses the center of the sub-shape as its anchor point. Equivalent to an anchor of (0.5, 0.5).
rightUses the right center point of the sub-shape as the anchor point. Equivalent to an anchor of (1, 0.5).
bottom-leftUses the bottom-left corner of the sub-shape as the anchor point. Equivalent to an anchor of (0, 1).
bottomUses the bottom center point of the sub-shape as the anchor point. Equivalent to an anchor of (0.5, 1).
bottom-rightUses the bottom-right corner of the sub-shape as the anchor point. Equivalent to an anchor of (1, 1).

Size

The size of a shape’s geometry describes the width and height of the shape, specifying the extent of the shape’s bounds. Like anchor position, shape size can be specified using absolute or relative values.

Absolute coordinates are measured in pixels in screen space. When you use absolute coordinates to specify anchor position, you are placing the anchor point at an exact pixel location. Absolute coordinates are measured relative to the parent bounds. For example, if the absolute position (5, 5) was specified with an anchor of top-left, the anchor point would be calculated as 5 pixels to the right and 5 pixels down from the parent's top-left corner.

Relative coordinates specify a percentage of the bounds in which the shape is contained. Relative coordinates are always in the range 0 to 1, with relative coordinates (0.5, 0.5) always positioning the shape in the center of its parent’s bounds. For example, if a shape’s container is 300 x 200 pixels and you specify a relative position of (0.1, 0.1), this will translate to absolute coordinates of (30, 20) in pixels. If the container is resized to 400 x 400 pixels, the relative position (0.1, 0.1) would become (40, 40).

Anchor positions are specified as x and y in the bounds, and are made absolute by including the characters x or y, respectively, in the absolute string field. Width and height are specified as w and h, and are made absolute by including the characters w or h, respectively, in the absolute string field.

📘

If bounds are not specified for a sub-shape, the sub-shape's bounds will default to the anchor point in the top left, and the bounds fills its container.

Rotation


A shape’s bounds can specify a rotation, which will be applied to shapes after they are rendered, using the anchor point as the point of rotation. The geometry itself operates purely on a non-rotated coordinate system for simplicity.

Rotation

Example bounds

bounds: {
  x: 5
  y: 5
  w: 5
  h: 5
  anchor: 'top-left'
  // All coordinates are absolute.
  // "absolute: true" is equivalent.
  absolute: 'xywh'
}

Top Left

bounds: {
  x: 0.5
  y: 0.5
  w: 5
  h: 5
  anchor: 'center'
  // Width and Height are absolute
  absolute: 'wh'
}

Center

bounds: {
  x: 0,
  y: 0.5,
  w: 0.5,
  h: 0.5,
  anchor: 'left',
  // None of the properties are absolute.
  // - "absolute: ''" is equivalent.
  // - No absolute field is also equivalent.
  absolute: false
}

Left

bounds: {
  x: 1
  y: 1
  w: 25
  h: 25
  anchor: 'bottom-right'
  absolute: 'wh'
}

Bottom Right

bounds: {
  x: 0.5
  y: 0.5
  w: 0.9
  h: 0.9
  anchor: 'center'
}

Center