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

Anchor

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.

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.

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.

Example bounds

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

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

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
}

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

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