Green measurements.

Usage

Add the green measurements 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: "green-measurements",
  origin: "green-center",
  depthLabelPosition: "top",
  widthLabelPosition: "right",
  style: {
    strokeColor: "#FFFFFF",
    strokeWidth: 4,
    strokeStyle: "solid",
    linePosition: "inside",
    endCap: "none",
    endCapSize: 10,
    showDepth: true,
    showWidth: true,
    showLabels: true,
    showDepthLabel: true,
    showWidthLabel: true,
    labelPrecision: "rounded",
    labelSize: 16,
    labelColor: "#FFFFFF",
    labelBackgroundColor: "#07110D",
    labelXPadding: 8,
    labelYPadding: 6,
    labelGap: 8,
  },
}]);

// Visibility and presentation are immediate local SVG changes.
view.setSmartComponentStyle({
  type: "green-measurements",
  style: { showWidthLabel: false, strokeColor: "#00D5FF" },
});

Defaults

Built-in presentation.

Component options

Configure behavior and presentation.

Behavior

Important implementation details.

• Depth follows the stored approach-relative axis from one measured green edge to the other. Width uses the stored center or maximum cross-section rather than an estimated image-aligned span.
• Maximum mode uses maximum width when available; center width is its fallback. Center mode applies the inverse fallback. resolvedOrigin reports which width geometry was actually used.
• Inside mode keeps the depth label horizontal and rotates the width label 90 degrees at their selected endpoints. Their endpoint and outward direction come from the final pixel line, while size, colors, padding, gap, and visibility remain local DOM presentation.
• Outside mode translates the complete depth span toward the selected width side and the complete width span toward the selected depth side. Both retain their original length and angle; the depth label rotates vertically and the width label becomes horizontal at the centers of the shifted lines.
• End caps are local SVG presentation: none by default, or matching dots or outward-facing triangular points with one shared size.
• Changing origin or label side requests new final placement instructions. Line visibility, label visibility, stroke styling, label styling, and whole-component visibility make no overlay request.
• The response intentionally exposes the visible yardage strings and their safe display values because they are the component content and allow local precision changes. It excludes source measurement records, source cross-sections, green polygons, coordinates, projection transforms, and the internal sidecar.