API reference / edit-controls

edit-controls

The edit buttons around a selected graphic, as plain DOM for any engine.

In edit mode a click selects a graphic and its grips drag. Moving, rotating and resizing the whole graphic need something to grab that is not a grip: a dashed box around the selection with a move, rotate and resize button on its corners. This draws that box and those buttons over a map container, for any engine that answers selectionBox(), selectionGestures() and beginGesture(), which every engine does.

It needs no framework. It creates its own elements inside the container you give it, keeps them over the selection on every animation frame while the engine is in edit mode, and shows only the gestures the selected symbol accepts: a security operation gets no resize button and the crossed mission tasks get no rotate button.

import {attachEditControls} from '@zaes/tactical-graphics/edit-controls';

const controls = attachEditControls(mapContainer, engine);
// later
controls.destroy();

Every button can be swapped: icons replaces a button's picture, labels its tooltip, corners where it hangs, and gestures which of the three appear at all. For a design of your own from scratch, skip this and build on the three engine methods directly.

The look is set with CSS custom properties on the container or any ancestor: --tg-edit-button-background, --tg-edit-button-color, --tg-edit-button-border, --tg-edit-button-hover, --tg-edit-box-color and --tg-edit-z-index. The elements carry the classes tg-edit-controls, tg-edit-box and tg-edit-button (plus tg-edit-button--translate, --rotate and --resize) for anything more.

Interfaces

• EditControls
• EditControlsEngine
• EditControlsOptions

Type Aliases

EditControlCorner

type EditControlCorner = "top-left" | "top-right" | "bottom-left" | "bottom-right";

Defined in: tacticalgraphics/ui/editControls.ts:99

A corner of the selection box.

Functions

attachEditControls()

function attachEditControls(
   container, 
   engine, 
   options?
): EditControls;

Defined in: tacticalgraphics/ui/editControls.ts:174

Draws the edit box and its buttons over container, following engine's selection.

container should be the element the map fills, or one laid exactly over it: the engine's selection box is measured from the map container's top-left. The controls are positioned absolutely inside it, so give it position: relative (or any positioning) if it has none; this function sets relative when it finds static.

Parameters

container

HTMLElement

engine

EditControlsEngine

options?

EditControlsOptions = {}

Returns

EditControls

References

AllowedGestures

Re-exports AllowedGestures

---

EditMode

Re-exports EditMode

---

GestureKind

Re-exports GestureKind

---

SelectionBox

Re-exports SelectionBox