Shape annotation.

Shape annotations are lightweight DOM primitives for targets, preferred misses, landing points, and other client-authored ideas. Their placement and presentation stay entirely in the browser.

type: "annotation"component: annotation:shapeClient placement

Usage

Add the shape annotation to a graphic.

Add the primitive with view.setAnnotations. Its image-pixel position, content, and presentation are entirely client-authored and do not invoke the protected overlay service.

view.setAnnotations([
  {
    type: "annotation",
    id: "preferred-miss",
    position: { x: 420, y: 610 },
    movable: true,
    content: {
      type: "shape",
      shape: "diamond",
      color: "#00D5FF",
      outlineColor: "#07110D",
    },
    style: {
      size: 44,
      label: "Preferred miss",
      labelPosition: "right",
    },
  },
]);

Defaults

Built-in presentation.

Placement sourceClient image pixel

Origincenter

Size44px

NetworkNo request

Component options

Configure behavior and presentation.

Option	Type	Default	Description
type	"annotation"	Required	Identifies a client-authored Annotation primitive.
id	string	Required	Stable 1–64 character local identity using letters, numbers, underscores, or hyphens.
position	{ x: number; y: number }	Required	Starting position in pixels within the rendered image. This value is supplied by the client, not the sidecar.
movable	boolean	false	Enables the same pointer and keyboard movement behavior used by Smart Components.
origin	GraphicOverlayOrigin	"center"	Selects which of nine component origins is aligned to the client-provided pixel.
style.size	number	44 or 48	Component box size in CSS pixels, from 20 through 96.
style.label	string \| boolean \| null	null	Optional label using the shared label renderer.
style.labelPosition	GraphicOverlayLabelPosition	"bottom"	One of eight label positions around the component.
style.labelGap	number	6	Whole CSS pixels from 0 through 32 between the component and label.
content.type	"shape"	Required	Selects the shape primitive renderer.
content.shape	"circle" \| "square" \| "diamond"	Required	Selects the built-in geometric shape.
content.color	#RRGGBB	"#00D5FF"	Shape fill color.
content.outlineColor	#RRGGBB	"#07110D"	Two-pixel shape outline color.

Behavior

Important implementation details.

Shapes share the same component state and interaction engine as tee and flag Smart Components.
Changing a shape does not alter or rerender the clean graphic.
The starting pixel is local, so reset never calls CADDIE.100.

Local annotation boundaryAnnotations accept client-provided image pixels only. They do not accept longitude, latitude, geometry, transforms, or sidecar data.