Smart Component 11
Teeboxes legend.
The Teeboxes legend is a protected design component inspired by printed yardage-book panels. CADDIE.100 returns only the hole number and selected color-and-yardage rows needed for the visible legend. Graphics JS creates and positions the HTML element locally, without returning tee names, coordinates, geometry, transforms, or the sidecar.
Usage
Add the teeboxes legend to a graphic.
Include the component in the initial mount call, reconcile it through view.setSmartComponents, or append it with view.addSmartComponent. Types may repeat. Give repeated instances stable id values to style, show, hide, move, reset, or remove one instance independently. The selected Smart Component type, instance ID, render receipt, and protected selection options such as yardages, grid spacing, coverage, measured origin, buffer distance, detail, limits, or targets are sent to the overlay service. Marker-image origins, images, presentation styles, supported labels, and movement remain local.
const view = await caddie.mount(container, graphicRequest, [
{
type: "teeboxes-legend",
limit: "all",
style: {
variant: "bordered",
strokeColor: "#A8B2AE",
strokeWidth: 1,
backgroundColor: "#FFFFFF",
numberTextColor: "#07110D",
yardageTextColor: "#07110D",
numberSize: 28,
yardageSize: 16,
numberStyle: "circle",
markerShape: "circle",
position: "right-top",
},
},
]);
view.setSmartComponentStyle({
type: "teeboxes-legend",
style: { position: { left: 0.05, top: 32 } },
});Defaults
Built-in presentation.
Component options
Configure behavior and presentation.
| Option | Type | Default | Description |
|---|---|---|---|
| type | "teeboxes-legend" | Required | Requests the selected hole's compact scorecard legend values. |
| id | string | Automatic | Optional stable 1–64 character instance ID using letters, numbers, underscores, or hyphens. Use IDs to independently control repeated Smart Components of the same type. |
| limit | "all" | 5 | 4 | 3 | "all" | Shows every scorecard tee or only the selected number of longest tee sets for this hole. |
| style.variant | "edge" | "bordered" | "minimal" | "bordered" | Selects the base filled-edge, bordered-panel, or no-panel treatment. |
| style.strokeColor | #RRGGBB | "#A8B2AE" | Panel, divider, and circled-number stroke color. |
| style.strokeWidth | number | 1 | Stroke width from 0 through 12 CSS pixels. |
| style.backgroundColor | #RRGGBB | "#FFFFFF" | Panel background color. The minimal variant remains transparent. |
| style.numberTextColor | #RRGGBB | "#07110D" | Hole-number text color. |
| style.yardageTextColor | #RRGGBB | "#07110D" | Scorecard-yardage text color. |
| style.numberSize | number | 28 | Hole-number size from 14 through 64 CSS pixels. |
| style.yardageSize | number | 16 | Yardage size from 12 through 32 CSS pixels. |
| style.numberStyle | "plain" | "circle" | "circle" | Shows the hole number as plain text or inside a stroked circle. |
| style.markerShape | "circle" | "square" | "circle" | Shape used for each scorecard-color marker. |
| style.position | TeeboxesLegendPosition | "right-top" | Uses one of nine named positions or custom { left, top } numbers. Values from 0 through 1 are proportions; larger values are image pixels. |
Behavior
Important implementation details.
- Named positions are left-top, center-top, right-top, left, center, right, left-bottom, center-bottom, and right-bottom.
- A custom left or top from 0 through 1 is interpreted as a fraction of the rendered canvas. A value greater than 1 is an absolute image pixel.
- Style and position changes are immediate DOM operations. Changing the number of displayed tees requests a new protected selection against the cached artifact.
- The visible hole number and yardages necessarily appear in the browser. Tee identities, names, coordinates, geometry, transforms, and the sidecar do not.
- The legend is a locked design component and is not draggable.