Page History

...

• Use Raster to enable position-based selection over a fixed image such as seating maps or warehouse layouts; bind the background via image and make the grid visible with enableRaster.
• Use for discrete, cell-level selections (not free-form drawing). Handle taps/clicks with events.ON_RASTER_CLICK and persist/hand off selections using getData.
• Keep the component present only when needed using displayConditions (state-driven show/hide) or visibilityPolicySetId (role-gated availability).

Sizing & Layout

• Size the drawing plane explicitly so the grid aligns with the image: set rasterWidth/rasterHeight and define cell size with rectSize (square) or rectW/rectH (rectangular).
• Prefer cell sizes that map cleanly to the underlying image scale to avoid misalignment and accidental multi-cell hits. Configure via rectSize or rectW/rectH.
• Add outer breathing room only via the component’s own paddingClass.

States & Feedback

• Represent selection state with the visual tokens: use rectBackgroundColor for selected cells and ensure any cell text remains readable via textColor.
• Expose/Hide grid lines to indicate mode shifts (e.g., view vs. select) using toggleRasterOn/toggleRasterOff; read current mode with getRasterState.

Color & Contrast

• Ensure axis labels are legible over the image by choosing an axisTextColor with sufficient contrast against the background.
• Maintain readable selection overlays by pairing rectBackgroundColor with a contrasting textColor.
• On busy images, turn grid lines on (toggleRasterOn) to aid targeting.

Visibility & Authorization

• Gate visibility by role/policy using visibilityPolicySetId.
• Use displayConditions to show/hide based on page state (e.g., show only after an image is available or a location is selected).

Content & Localization

• Name the component clearly for authors via displayName so it’s easy to find and maintain in large structures.

...