Floating drawing toolbar

The inline chrome that follows a selected drawing — color, width, font, lock, delete.

When a drawing is selected, a small floating toolbar appears adjacent to it. It's the per-drawing equivalent of a context menu — fast access to the four properties you actually edit (color, width, text, font) plus the four global actions (lock, hide, duplicate, delete).

How it works

The toolbar is draggable — it remembers its anchor relative to the drawing's first handle, so it doesn't fight your view scroll. It auto-collapses to a single dot when the cursor leaves it for ~600 ms, which keeps it out of the way during pan/zoom.

The toolbar lives in the same React tree as <EliteChart /> and renders into a portal at the chart-canvas root. It picks up the active drawing's id from useChartStore.selectedDrawingId.

Variations

Programmatically style a drawing

code

import { useChartStore } from '@elitechart/elitechart';

const store = useChartStore.getState();
store.patchDrawing(store.selectedDrawingId!, {
  color: '#22d3ee',
  lineWidth: 2,
});

Phase 1b lands a config flag; for now hide via CSS:

code

[role="toolbar"][aria-label="Drawing"] { display: none !important; }

API

Action	Method
Change color	`patchDrawing(id, { color })`
Change width	`patchDrawing(id, { lineWidth })`
Lock	`patchDrawing(id, { locked: true })`
Hide	`patchDrawing(id, { visible: false })`
Delete	`removeDrawing(id)`

How it works

Variations

Programmatically style a drawing

Disable the floating toolbar globally

API

Related