Smart Component 06

Grids.

Grids turn a Hole or Green graphic into a visual measuring surface without baking lines into the downloadable image. The full-image scope and green-center origin are the defaults. A measured origin privately aligns to mapped depth and width geometry. Green and Green buffer scopes return only final clipped SVG segments and optional fade stops.

type: "grids"component: caddie-gridsProtected placement

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,
    },
  },
]);

// 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 },
});

Defaults

Built-in presentation.

SubjectsHole · Green

CoverageEntire image

OriginGreen center

Optional scopeGreen surface only

Buffered scopeGreen + 7.5 yards · faded tips

Primary spacing5 yards

Detailed gridOff · 1-yard subdivisions

WidthsPrimary 2px · detail 1px

MovementLocked

Component options

Configure behavior and presentation.

Option	Type	Default	Description
type	"grids"	Required	Requests a measured grid for the selected hole or green.
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.
spacingYards	number	5	Primary whole-yard box spacing from 1 through 25.
scope	"image" \| "green" \| "green-buffer"	"image"	Covers the image, clips to the putting surface, or clips to a metric green buffer with faded exposed tips.
origin	"green-center" \| "maximum-dimensions"	"green-center"	Uses image-aligned axes through green center or protected mapped depth/width axes. Measured mode prefers maximum width, then center width, then safely falls back to green center.
bufferYards	number	7.5	Green-buffer only. Extends the protected surface from 1 through 25 yards before clipping and fading line tips.
detailed	boolean	false	Adds one-yard subdivision lines inside the primary boxes.
style.strokeColor	#RRGGBB	"#FFFFFF"	Grid-line color applied locally by the SVG renderer.
style.strokeWidth	number	2	Primary non-scaling SVG line width from 1 through 8 image pixels.
style.detailStrokeWidth	number	1	Width of detailed one-yard subdivision lines.
style.strokeStyle	"solid" \| "dashed" \| "dotted" \| "dash-dot"	"solid"	Visible SVG stroke pattern.
style.opacity	number	0.65	Grid-layer opacity from 0.05 through 1.

Behavior

Important implementation details.

Green-center origin uses image-aligned axes through the protected center-green pixel. Maximum-dimensions origin uses the mapped depth axis and prefers the maximum-width cross-section; center width is the measurement fallback, followed by green center if neither is available.
Every primary line uses the same width, including lines passing through the origin. Detailed mode inserts independently styled one-yard lines between primary lines.
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, or visibility 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.

Protected course dataThe response contains only final visible line segments, their primary/detail kind, resolved origin name, and optional buffered-tip fade fractions. Green coverage, buffers, and measured dimension axes are resolved server-side. The response excludes protected polygons and cross-sections, longitude, latitude, course geometry, affine transforms, source control points, and the internal render sidecar.