Grids.

Usage

Add the grids 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: "grids",
    spacingYards: 5,
    scope: "image",
    origin: "green-center",
    detailed: true,
    style: {
      strokeColor: "#FFFFFF",
      strokeWidth: 2,
      detailStrokeWidth: 1,
      strokeStyle: "solid",
      opacity: 0.65,
      showLabels: true,
      labelEveryX: 2,
      labelEveryY: 1,
      labelMode: "sticky",
      labelEdges: ["left", "bottom"],
    },
  },
]);

// Use measured green axes and extend past the putting surface.
await view.setSmartComponents([{
  type: "grids",
  spacingYards: 5,
  scope: "green-buffer",
  origin: "maximum-dimensions",
  bufferYards: 7.5,
  detailed: true,
  style: { strokeColor: "#FFFFFF", opacity: 0.45 },
}]);

// Presentation-only changes remain local.
view.setSmartComponentStyle({
  type: "grids",
  style: { strokeColor: "#00D5FF", opacity: 0.8, showHorizontal: true, showVertical: true, showLabels: true, labelMode: "gutter", labelEdges: ["top", "right", "bottom", "left"] },
});

Defaults

Built-in presentation.

Component options

Configure behavior and presentation.

Behavior

Important implementation details.

• Green-center origin uses image-aligned axes through the protected center-green pixel. Maximum-dimensions uses the mapped depth axis and preferred maximum-width cross-section. Green-front finds the approach-facing polygon extent along the mapped depth axis for front/back spacing while preserving center green for left/right spacing. Protected modes fall back to green center when required geometry is unavailable.
• Every primary line uses the same width, including lines passing through the origin. Detailed mode selects a nice-number interval that divides each primary box evenly—for example 5→1, 10→2, 20→5, and 50→10 yards. Horizontal and vertical visibility are independent local presentation controls. Left/right edges label horizontal lines with positive values above and negative values below. Top/bottom edges label vertical lines with negative values left and positive values right. Every target/origin line is 0 yd. Sticky mode uses pills; gutter mode uses compact signed values in any selected solid paper-theme bands. Gutter labels too close to either end of the graphic are omitted, even with a single edge selected. Perpendicular gutters also omit covered values and suppress the top/bottom value when padded corner labels overlap.
• Metric vector spacing preserves equal ground-yard measurements even when measured axes are rotated or artifact scale differs by direction.
• Changing spacing, scope, origin, buffer distance, or detail requests new instructions against the cached sidecar. Changing color, widths, pattern, opacity, visibility, or label presentation is an immediate local DOM update.
• Green scope is clipped to the measured putting surface. Green buffer expands that shape by the requested ground-yard distance and sends only final segment fade fractions. The browser never receives either polygon, measured dimension geometry, the pixel-to-meter transform, geographic coordinates, or the internal sidecar.
• The component is available on Hole and Green graphics. Course-wide scope is not included in this version.
• Grids are measurement drawings and remain locked rather than movable.