One behavior engine, two placement sources.

Smart Components

Course-aware placement without course-data exposure.

Annotation primitives

Build client-owned ideas from local pixels.

Image, shape, and text Annotations never call the protected sidecar. The client supplies their starting image pixels and the SDK supplies the shared component behavior.

Shared view API

Build your own controls around the mounted view.

Graphics JS does not prescribe a toolbar or editor UI. Your application owns the controls and calls the view methods that correspond to its product experience.

await view.setSmartComponents([
  { type: "tee", movable: true },
  { type: "flag", movable: false },
]);

await view.addSmartComponent({
  id: "approach-100",
  type: "approach-markers",
  yardages: [100],
  style: { color: "#FF0000" },
});
await view.addSmartComponent({
  id: "approach-150",
  type: "approach-markers",
  yardages: [150],
  style: { color: "#FFFFFF" },
});

// All of these update the local DOM without rendering another image.
view.setSmartComponentVisible("tee", false);
view.setSmartComponentMovable("flag", true);
view.setSmartComponentStyle({ type: "flag", style: { size: 56 } });
view.resetSmartComponentPosition("tee");

// Client-authored primitives use client-provided image pixels.
view.setAnnotations([{
  type: "annotation",
  id: "preferred-miss",
  position: { x: 420, y: 610 },
  movable: true,
  content: { type: "shape", shape: "diamond" },
}]);

setSmartComponents removes absent components locally, retains unchanged placements and DOM, and requests only new or placement-affecting definitions. Types may repeat, up to 64 total instances per request. Give repeated instances explicit id values when later controls should target only one; a type selector continues to affect every instance of that type. addSmartComponent and removeSmartComponent provide incremental equivalents. Identical removed definitions are restored from the mounted view's bounded cache. Pass { force: true } as the options argument only when every requested definition must be resolved again. The earlier setOverlays and setOverlay* names remain compatibility aliases during the beta.

Shared events

Connect components to application behavior.