Pick to edit

Use onGraphicPick(handler, options?) to handle clicks on committed graphics without knowing their internal layer. event.id is the graphic ID; the event also includes the selected feature, pixel, coordinate, and original browser event. If the user picks another graphic during an edit, TacticalDraw commits the current edit before calling your handler.

const unsubscribe = td.onGraphicPick((event) => {
  const graphic = graphics.find((candidate) => candidate.id === event.id);
  if (graphic) void startEdit(graphic);
});

The returned unsubscribe() is idempotent. Pass { signal } to unsubscribe automatically when an AbortSignal fires.

For your own layers, use onPick(layerId, handler, options?). Adapter authors can recover a graphic ID with tryControlMeasureIdFromFeature(feature).

The Quick start gives a complete selection and edit procedure.

Composing with host click handling

If your map clears selection on click, first check whether TacticalDraw owns the clicked pixel with ownsInteractionAt(pixel, options?):

map.on("click", (e) => {
  if (td.ownsInteractionAt(e.pixel, { originalEvent: e.originalEvent })) return;
  clearHostSelection();
});

The check covers committed graphics, the active preview, edit handles, and the estimated bounds of rotated or offset labels. It excludes the guide layer, which is not interactive.

Pass the host event as originalEvent to use the default hit tolerance: 4 pixels for mouse or pen, and 12 for touch. Set tolerance to override it. The check is synchronous and reads the adapter cache directly, so it works from any host click handler without an onPick subscription.