@oh-just-another/react-ui 0.58.0 → 0.59.0

package/CHANGELOG.md

@@ -1,5 +1,109 @@
 # @oh-just-another/react-ui
 
+## 0.59.0
+
+### Minor Changes
+
+- 1c4941e: New `<DrawingPanel>` — a floating tool-options panel that appears while the brush or eraser is active. It edits `editor.brushSettings` (via the new `useBrushSettings` hook): line colour, enclosed-fill colour, opacity and width for the brush; only the width (which doubles as the eraser radius) for the eraser. `<Diagram>` mounts it automatically top-right, hidden in zen mode; opt out with the new `hideDrawingPanel` prop. This is a functional scaffold intended for restyling.
+- ca48e8a: Add two interaction tools: an eraser (mode `erase`, hotkey `E`) and a laser pointer (mode `laser`, hotkey `K`).
+  - Eraser: press-and-drag sweeps shapes under the cursor into a pending set (previewed dimmed) and deletes them all in one undo step on release. Attached links are removed with their shapes, like a Delete-key delete.
+  - Laser pointer: press-and-drag paints an ephemeral red trail that fades over a couple of seconds. Nothing is written to the scene or history — it lives purely on the overlay. Available in read-only mode. Collab replication of trails is a follow-up.
+
+  Both tools appear in the default toolbar (`DEFAULT_TOOLBAR` / `DEFAULT_VERTICAL_TOOLBAR`) and are registered as `mode-erase` / `mode-laser` actions. TTL, colour and width of the laser trail are tunable via `state/constants.ts`.
+
+- bdc847e: Add four editor tools:
+  - **Eyedropper** — new `eyedropper` mode (toolbar button, `Alt+I`). Click a
+    shape to sample its fill/stroke and apply it to the selection.
+    `Editor.pickColorAt` / `applyEyedropperAt` + pure `pickColorAt`.
+  - **Convert element type** — `Editor.convertSelection(target)` and pure
+    `computeConvertType` switch rectangle ↔ ellipse ↔ diamond (polygon) in place,
+    preserving position/size/style. New "Shape type" property-panel control.
+  - **Image crop** — optional normalised `crop` rect on `ImageElement` (additive,
+    serialised). New `crop` mode entered by double-clicking an image or the
+    property-panel Crop button: drag a frame, `Enter` to apply, `Esc` to cancel.
+    Canvas2D renders the cropped source region (`RenderTarget.drawImage` gains an
+    optional `crop` arg). `Editor.beginImageCrop` / `commitImageCrop` /
+    `cancelImageCrop` + pure `computeSetImageCrop` / `cropRectFromWorldDrag`.
+  - **Flowchart auto-generate** — `Cmd/Ctrl+Alt+Arrow` spawns a connected node
+    from the selected node in that direction. `Editor.spawnConnectedNode` + pure
+    `computeSpawnConnectedNode`.
+
+  Also exposes `worldToLocal` from `@oh-just-another/scene`.
+
+- 511a22a: The eyedropper is no longer a standalone toolbar tool (its palette button and the `Alt+I` hotkey / `mode-eyedropper` action are removed). Instead, every colour picker (`ColorSwatchPicker`) gains an optional pipette button via a new `onEyedrop` prop: clicking it arms `Editor.beginEyedropperPick(onPick)` and the next canvas click samples the colour of the shape under the cursor straight into that swatch — without changing the current tool mode. New editor API: `beginEyedropperPick` and the `isEyedropperArmed` flag; the cursor shows a crosshair while armed.
+- dda2e56: Add a `<Minimap>` component (react-ui) — a small overview canvas that renders the whole scene with a frame for the current viewport; click / drag to pan the main view. Add `exportMermaid(scene)` (importers) — writes a `flowchart TD` string (inverse of `importMermaid`), round-tripping node + edge structure and emitting `%% skipped: <type>` comments for non-graph elements.
+- 70a08d8: Read-only chrome. `<DiagramRoot>` / `<DiagramCanvas>` accept a `readOnly` prop (applied on mount and synced on change), a new `useReadOnly()` hook exposes the flag reactively, and the `<Toolbar>` disables creation / mutation tools (draw modes, insert-image, tool-lock, undo/redo) in read-only while keeping select / hand live.
+- 7f69f29: Add scene text search, a stats/dimensions overlay, and zen mode.
+  - `state`: `searchScene(scene, query)` / `elementSearchText(element)` — a pure, case-insensitive substring index over text shapes, frame names, and edge labels; plus `Editor.selectLink(id)` to programmatically select a single connector.
+  - `react-ui`: `<SearchOverlay>` (⌘F) finds and frames matching text with next/prev navigation; `<StatsPanel>` (⌥/) shows the selection's x/y/w/h/angle and scene totals; `<ZenModeProvider>` / `useZenMode` (⌥Z, Esc to exit) hides chrome for focused work. All three are wired into `<Editor>` from `@oh-just-another/editor`.
+
+- cf8b735: Add styled text runs (rich text, phase 1): a `TextElement` can now carry an optional `runs` overlay — contiguous substrings each with a partial `TextStyle` (bold / italic / colour / decoration) over the element's base style. The flat `text` stays the source of truth (`runs.map(r => r.text).join("") === text`), so plain-text scenes render, serialise and round-trip byte-for-byte unchanged.
+  - `scene`: `TextRun` type + `TextElement.runs?`; pure helpers `runsToText`, `normalizeRuns`, `sliceRuns`, and `applyStyleToRange(el, from, to, partial)` (splits/merges/coalesces runs, sheds the overlay when uniform).
+  - `serialization`: additive optional `runs` in the text schema; legacy documents (no `runs`) round-trip unchanged.
+  - `renderer-core`: the text renderer draws each visual line's style segments with per-run font + fill through the shared `RenderTarget`, so Canvas2D, WebGL2 and SVG all honour runs. Line breaking still uses the element's base metrics.
+  - `state`: `Editor.applyTextStyleToRange(id, from, to, partial)` applies a style to a character range as one undo step.
+  - `react-ui`: the text formatting controls (bold / italic / underline / strikethrough / colour) target the current inline-edit selection when one is active — styling just those characters — and fall back to whole-element styling otherwise.
+
+  Full inline rich-text editing (per-run wrap metrics, caret-aware run editing) is a follow-up.
+
+### Patch Changes
+
+- a9558d9: Reworked flowchart keyboard model. Arrow-key bindings are reworked and disambiguated by modifier: `Arrow` nudges (unchanged); `Cmd/Ctrl+Arrow` grows a flowchart CREATE session (each press adds a pending connected sibling, previewed on the overlay, committed as one undo step when Cmd/Ctrl is released, cancelled on Escape); `Alt+Arrow` navigates to the adjacent node (graph neighbour, else spatially nearest); `Cmd/Ctrl+Shift+Arrow` aligns (moved off the old plain `Alt+Arrow`). The old `Cmd/Ctrl+Alt+Arrow` spawn binding is retired.
+
+  New API: `editor.growFlowchart` / `commitFlowchart` / `cancelFlowchart` / `navigateFlowchart` / `flowchartPreview`, the pure `computeSpawnConnectedNodes`, and `endpointElementId` (scene). `<Diagram>` wires the keyup-commit / Escape-cancel lifecycle for you.
+
+- 22b90f9: The keyboard-shortcuts help dialog now lists every real binding. The `arrange` category (align / flip / distribute) was missing from the dialog's category order and is now shown, and keyTest-driven bindings (nudge arrows, Enter edit/create, plus flowchart create/navigate) surface their chips via a new display-only `Action.displayHotkey` field instead of rendering as "—". `displayHotkey` is never dispatched (only `hotkey`/`keyTest`/`sequence` are), which also closes a latent hole where a display matcher could fire a Ctrl-modified combo the `keyTest` deliberately excluded.
+- 34ddb22: The minimap now supports wheel zoom: scrolling over it zooms the main view into the world spot under the cursor (recentering there first, matching its click-to-pan), using the same delta→factor curve as the main canvas. The handler is a non-passive listener so it doesn't scroll the page, and doesn't interfere with click/drag panning. Tunable via `MINIMAP_WHEEL_ZOOM_SPEED` / `MINIMAP_WHEEL_ZOOM_MAX_STEP`.
+- bd2e26c: Make read-only (view) mode a true guard. Every mutating `Editor` method reachable from the UI (`updateStyle`, `updateTextProps`, `deleteSelected`, `duplicateSelected`, group/ungroup, align/flip/distribute, z-order, `moveSelectionBy`, `setLink`, `convertSelection`, `clear`, etc.) is now a no-op while `readOnly` is set, backstopping direct panel/hotkey calls that previously bypassed the pointer-level gate. The overlay keeps the selection outline (halo) but no longer paints resize/rotate/group handles or link endpoint grips in read-only, and the property panel / selection floating panel / mutating context-menu entries are hidden. `copy` / `copy-style` are flagged view-safe so they stay live.
+- 5d8a282: Fix the bold / italic / underline / strikethrough toggles in the text style popover never applying to an in-edit text selection. The toggle button was a component defined inside `TextDecorationControl`, so it got a fresh identity on every panel re-render; during inline text editing the panel re-renders continuously (caret blink), and a remount between `mousedown` and `mouseup` swallowed the synthesized `click`. Hoisted the toggle to a stable module-level component so the button persists across re-renders and the click fires. Colour was unaffected (it goes through a stable control).
+- 71a6c8b: Fix the search bar (⌘F) jumping to a match the moment it opens, before the user types anything. The query was retained across close/open, so reopening re-ran the reveal effect against the stale query and framed the previous match. The query and active index are now reset on close, so the bar always opens empty and only navigates once the user types.
+- 71a6c8b: Search navigation no longer blows a small match up to fill the whole canvas. Jumping to a match now centers it while preserving the current zoom, only zooming out when the match is too large to fit — a small element stays small and just lands in the center. Adds `Editor.revealSelection(padding)` and the pure `computeRevealBounds` helper (never zooms in, unlike `zoomToSelection`'s fit-to-fill).
+- Updated dependencies [783749e]
+- Updated dependencies [c189261]
+- Updated dependencies [c189261]
+- Updated dependencies [c189261]
+- Updated dependencies [641842b]
+- Updated dependencies [c189261]
+- Updated dependencies [c58054b]
+- Updated dependencies [b156869]
+- Updated dependencies [0d3934e]
+- Updated dependencies [0d3934e]
+- Updated dependencies [b0a9f3b]
+- Updated dependencies [571f13b]
+- Updated dependencies [ca48e8a]
+- Updated dependencies [1975a9b]
+- Updated dependencies [1975a9b]
+- Updated dependencies [bdc847e]
+- Updated dependencies [511a22a]
+- Updated dependencies [a9558d9]
+- Updated dependencies [22b90f9]
+- Updated dependencies [99b5bee]
+- Updated dependencies [f381039]
+- Updated dependencies [394d3ce]
+- Updated dependencies [295f38b]
+- Updated dependencies [bd2e26c]
+- Updated dependencies [97de2fd]
+- Updated dependencies [407f203]
+- Updated dependencies [744f4b8]
+- Updated dependencies [71a6c8b]
+- Updated dependencies [7f69f29]
+- Updated dependencies [dde8279]
+- Updated dependencies [cec8f83]
+- Updated dependencies [1975a9b]
+- Updated dependencies [1975a9b]
+- Updated dependencies [1975a9b]
+- Updated dependencies [1975a9b]
+- Updated dependencies [cf8b735]
+- Updated dependencies [571f13b]
+- Updated dependencies [f8302c3]
+  - @oh-just-another/scene@0.60.0
+  - @oh-just-another/state@0.60.0
+  - @oh-just-another/renderer-core@0.59.0
+  - @oh-just-another/renderer-canvas@0.60.0
+  - @oh-just-another/renderer-svg@0.57.3
+  - @oh-just-another/templates@0.57.3
+  - @oh-just-another/versioning@0.57.3
+
 ## 0.58.0
 
 ### Minor Changes

package/README.md

@@ -1,5 +1,7 @@
 # @oh-just-another/react-ui
 
+[![npm version](https://img.shields.io/npm/v/@oh-just-another/react-ui.svg)](https://www.npmjs.com/package/@oh-just-another/react-ui)
+
 React 18+ wrappers around the editor — `DiagramCanvas`, `Toolbar`, `Palette`, `PropertyPanel`, plus a small set of hooks. Mount it with three lines of JSX, customize with hooks for everything else.
 
 The React binding layer (L5) over `@oh-just-another/state`; needs React + DOM. For a single drop-in component, use `@oh-just-another/editor`.
@@ -47,6 +49,7 @@ Every component reads the editor from context, so most take no required props.
 | `TopBar` / `BottomBar`           | Edge-anchored bars for toolbars and status chrome.               |
 | `Sidebar`                        | Collapsible side container for panels.                           |
 | `BottomSheet`                    | Sliding bottom container (touch / mobile layouts).               |
+| `Minimap`                        | Overview canvas with a viewport frame; click / drag to pan.      |
 
 ### Toolbar & zoom