@oh-just-another/state 0.60.0 → 0.61.0

package/dist/editor.js

@@ -1,7 +1,7 @@
 import { createActor } from "xstate";
 import { createEmitter } from "@oh-just-another/events";
 import { elementId as castElementId } from "@oh-just-another/types";
-import { addElement, addLink, endpointElementId, anchorSnapper, apply, buildSpatialIndex, isElementHidden, isElementLocked, runAutoLayout, DEFAULT_LAYER_ID, routeElbowLink, routeElbowPreview, getLink, getLinkPath, getElement, getElementAt, getElementAtIndexed, getElementLocalBounds, localToWorld, worldToLocal, isFrame, isGroup, isText, isImage, isBrush, brushBodyColor, getElementWorldBounds, setTextMeasurer, getScreenToWorld, gridSnapper, outlineSnapper, SnapEngine, invert, updateLink, updateElement, isAnchorRef, isSnapToGridEnabled, resolveSnapSpacing, } from "@oh-just-another/scene";
+import { addElement, getLinkCurvePoints, linkLabelAnchor, addLink, endpointElementId, anchorSnapper, apply, buildSpatialIndex, isElementHidden, isElementLocked, runAutoLayout, DEFAULT_LAYER_ID, routeElbowLink, routeElbowPreview, getLink, getLinkPath, getElement, getElementAt, getElementAtIndexed, getElementLocalBounds, localToWorld, worldToLocal, isFrame, isGroup, isText, isImage, isBrush, brushBodyColor, getElementWorldBounds, setTextMeasurer, getScreenToWorld, gridSnapper, outlineSnapper, SnapEngine, invert, updateLink, updateElement, isAnchorRef, isSnapToGridEnabled, resolveSnapSpacing, } from "@oh-just-another/scene";
 import { layerId as castLayerId, } from "@oh-just-another/types";
 import { bounds as B, matrix, vec2 } from "@oh-just-another/math";
 import { onAnimationContentReady, setActiveRasterizer, setActiveTextShaper, ElementCache, } from "@oh-just-another/renderer-core";
@@ -17,6 +17,7 @@ import { DEFAULT_SNAP_THRESHOLD, LINK_ENDPOINT_HANDLE_RADIUS, LINK_HIT_THRESHOLD
 import { HANDLE_HIT_SLOP } from "./handle.js";
 import { req } from "./util.js";
 import { interactionMachine, } from "./machine.js";
+import { DEFAULT_MODE } from "./modes.js";
 import { createEventCache, fanOutEvents, primeEventCache, } from "./editor/event-fanout.js";
 import { AnimationController } from "./editor/animation.js";
 import { GestureController } from "./editor/gesture-tx.js";
@@ -30,7 +31,7 @@ import { applyContainerDrop as applyContainerDropPure, clampContainerToChildren
 import { computeGroupResizePatches, computeElementResize, computeRotatedElementResize, computeTextResize, } from "./editor/applies/resize.js";
 import { bindPointerEvents as bindPointerEventsExternal } from "./editor/pointer-binding.js";
 import { InteractionState, } from "./editor/interaction-state.js";
-import { beginBrushStroke as beginBrushStrokePure, commitBrushStroke as commitBrushStrokePure, extendBrushStroke as extendBrushStrokePure, smoothBrushPoints, brushStyleFromSettings, DEFAULT_BRUSH_SETTINGS, newBrushId, } from "./editor/public/brush.js";
+import { beginBrushStroke as beginBrushStrokePure, commitBrushStroke as commitBrushStrokePure, extendBrushStroke as extendBrushStrokePure, brushCommitPoints, brushStyleFromSettings, computeSetBrushWidth, DEFAULT_BRUSH_SETTINGS, newBrushId, } from "./editor/public/brush.js";
 import { beginEraseStroke as beginEraseStrokePure, sampleErase as sampleErasePure, computeEraseCommit, } from "./editor/public/eraser.js";
 import { computeEraseFromMasks, computeStrokeErasePreviewFromMasks, markErasedIntervals, } from "./editor/public/stroke-eraser.js";
 import { coveredLength } from "./editor/public/stroke-eraser-coverage.js";
@@ -324,11 +325,11 @@ export class Editor {
         this.interaction.brushStroke = v;
     }
     /**
-     * The in-progress brush stroke with its captured vertices Catmull-Rom-smoothed
-     * for the LIVE overlay preview — the SAME resampler `commitBrushStroke` applies
-     * on release (see {@link smoothBrushPoints}), so the stroke reads smooth while
-     * drawn instead of snapping from an angular polyline to a curve on release. A
-     * fresh object each call (points diverge from `brushStroke.points`), so the
+     * The in-progress brush stroke run through the SAME commit pipeline
+     * `commitBrushStroke` applies on release (see {@link brushCommitPoints}:
+     * raw catch-up point + Catmull-Rom resample), so the stroke reads exactly
+     * as it will land in the scene instead of snapping on release. A fresh
+     * object each call (points diverge from `brushStroke.points`), so the
      * overlay memo repaints every move that grows the stroke.
      */
     get brushPreviewStroke() {
@@ -338,7 +339,7 @@ export class Editor {
         const style = brushStyleFromSettings(this._brushSettings);
         return {
             origin: s.origin,
-            points: smoothBrushPoints(s.points),
+            points: brushCommitPoints(s, style).points,
             fill: brushBodyColor(style),
             opacity: style.opacity ?? 1,
         };
@@ -559,6 +560,14 @@ export class Editor {
      * toolbar as a lock affordance next to the active tool.
      */
     _toolLocked = false;
+    /** The tool active before the current one — `activeTool.lastActiveTool`. */
+    _lastActiveTool = null;
+    /** Cached `activeTool` value object; rebuilt only when a component changes. */
+    _activeToolCache = {
+        type: DEFAULT_MODE,
+        locked: false,
+        lastActiveTool: null,
+    };
     /**
      * Host-extensible file-drop dispatch. Built-ins (image / scene
      * JSON) register themselves at editor construction; hosts add
@@ -766,10 +775,10 @@ export class Editor {
                 return self._toolLocked;
             },
             get mode() {
-                return self.mode;
+                return self.activeTool.type;
             },
             setMode: (m) => {
-                self.setMode(m);
+                self.setActiveTool(m);
             },
             notify: () => {
                 self.notify();
@@ -948,8 +957,8 @@ export class Editor {
         this.fileDropRegistry.register(imageFileDropHandler);
         this.fileDropRegistry.register(videoFileDropHandler);
         this._readOnly = options.readOnly ?? false;
-        if (options.initialMode) {
-            this.actor.send({ type: "SET_MODE", mode: options.initialMode });
+        if (options.initialTool) {
+            this.actor.send({ type: "SET_MODE", mode: options.initialTool });
         }
     }
     /**
@@ -970,7 +979,7 @@ export class Editor {
      * either way, so emitted events are unchanged.
      */
     observableSnapshot() {
-        const mode = this.mode;
+        const activeTool = this.activeTool;
         const selection = this._selection;
         const selectedLinks = this._selectedLinks;
         const scene = this._scene;
@@ -978,7 +987,7 @@ export class Editor {
         const canRedo = this.canRedo;
         const cached = this.snapshotCache;
         if (cached !== null &&
-            cached.mode === mode &&
+            cached.activeTool === activeTool &&
             cached.selection === selection &&
             cached.selectedLinks === selectedLinks &&
             cached.scene === scene &&
@@ -987,7 +996,7 @@ export class Editor {
             return cached;
         }
         const snapshot = {
-            mode,
+            activeTool,
             selection,
             selectedLinks,
             scene,
@@ -1004,8 +1013,24 @@ export class Editor {
     get selection() {
         return this._selection;
     }
-    get mode() {
-        return this.actor.getSnapshot().context.mode;
+    /**
+     * The active tool as a single value object (`{ type, locked,
+     * lastActiveTool }`) — the one source of truth for the current tool.
+     * The reference is stable between changes (safe for React deps).
+     */
+    get activeTool() {
+        const type = this.actor.getSnapshot().context.mode;
+        const c = this._activeToolCache;
+        if (c.type !== type ||
+            c.locked !== this._toolLocked ||
+            c.lastActiveTool !== this._lastActiveTool) {
+            this._activeToolCache = {
+                type,
+                locked: this._toolLocked,
+                lastActiveTool: this._lastActiveTool,
+            };
+        }
+        return this._activeToolCache;
     }
     get history() {
         return this._history;
@@ -1205,10 +1230,6 @@ export class Editor {
     toggleGrid() {
         this.setGrid({ enabled: !this.gridEnabled });
     }
-    /** Whether the active draw-mode sticks after a create (toolbar lock). */
-    get toolLocked() {
-        return this._toolLocked;
-    }
     /** All currently-selected link (connector) ids. */
     get selectedLinks() {
         return this._selectedLinks;
@@ -1267,8 +1288,8 @@ export class Editor {
         return this.fileDropRegistry.dispatch(file, ctx);
     }
     /**
-     * Toggle the tool-lock affordance. With `true`, draw-modes persist
-     * after each successful shape create — the user keeps drawing
+     * Toggle the tool lock (`activeTool.locked`). With `true`, draw tools
+     * persist after each successful shape create — the user keeps drawing
      * rectangles without re-pressing R. With `false` (default), the
      * editor reverts to `select` after each create.
      */
@@ -1278,10 +1299,18 @@ export class Editor {
         this._toolLocked = locked;
         this.notify();
     }
-    maybeRevertModeAfterCreate() {
+    maybeRevertToolAfterCreate() {
         this.gestures.maybeRevertModeAfterCreate();
     }
-    setMode(mode) {
+    /**
+     * Switch the active tool. The single entry point for tool changes —
+     * toolbar buttons and hotkeys reach it through the action registry.
+     * Records the outgoing tool in `activeTool.lastActiveTool`.
+     */
+    setActiveTool(mode) {
+        const prev = this.actor.getSnapshot().context.mode;
+        if (prev !== mode)
+            this._lastActiveTool = prev;
         // A tool switch cancels any armed colour-picker pipette.
         this.pendingEyedropperPick = null;
         // Switching tools commits any in-flight text edit (standard: leaving the
@@ -1614,30 +1643,19 @@ export class Editor {
         this.interaction.editingLinkCaption = null;
         this.notify();
     }
-    /** World-space anchor point for a link's caption (midpoint of its path). */
+    /**
+     * World-space anchor point for a link's caption — the same shared geometry
+     * the renderer places the pill at (`linkLabelAnchor` over the drawn
+     * polyline), so the inline editor opens exactly over the label.
+     */
     linkLabelWorld(id) {
         const edge = getLink(this._scene, id);
         if (!edge)
             return null;
-        const path = getLinkPath(this._scene, edge);
+        const path = getLinkCurvePoints(this._scene, edge);
         if (!path || path.length < 2)
             return null;
-        const t = edge.label?.position ?? 0.5;
-        let total = 0;
-        for (let i = 1; i < path.length; i++)
-            total += vec2.distance(req(path[i - 1]), req(path[i]));
-        let remaining = total * t;
-        for (let i = 1; i < path.length; i++) {
-            const a = req(path[i - 1]);
-            const b = req(path[i]);
-            const seg = vec2.distance(a, b);
-            if (remaining <= seg) {
-                const r = seg === 0 ? 0 : remaining / seg;
-                return { x: a.x + (b.x - a.x) * r, y: a.y + (b.y - a.y) * r };
-            }
-            remaining -= seg;
-        }
-        return req(path[path.length - 1]);
+        return linkLabelAnchor(path, edge);
     }
     beginTextEdit(id) {
         this.textEdit.begin(id);
@@ -1799,7 +1817,7 @@ export class Editor {
             y: (vp.size.height || 200) / 2,
         });
         const id = newElementIdAtCursor(++this.nextId);
-        const shape = buildElementAtCursor(this._scene, this.mode, world, this._activeLayerId, id);
+        const shape = buildElementAtCursor(this._scene, this.activeTool.type, world, this._activeLayerId, id);
         const r = addElement(this._scene, shape);
         this._scene = r.scene;
         this._history.push(r.patch);
@@ -1825,7 +1843,7 @@ export class Editor {
         this._scene = r.scene;
         this.textEdit.markPendingCreate(id);
         this._selection = Selection.single(id);
-        this.maybeRevertModeAfterCreate();
+        this.maybeRevertToolAfterCreate();
         this.notify();
         this.announce(`Created text ${id}`);
         this.beginTextEdit(id);
@@ -1845,14 +1863,21 @@ export class Editor {
         this._brushSettings = { ...this._brushSettings, ...patch };
         this.notify();
     }
-    beginBrushStroke(world, pressure = 0.5) {
-        this.brushStroke = beginBrushStrokePure(world, pressure, this._brushSettings.width);
+    /**
+     * Start a brush stroke. `pointerType` (a `PointerEvent.pointerType`) decides
+     * the pressure source: a pen has a real pressure channel and is honoured
+     * verbatim (the default, which also keeps programmatic callers exact); mouse
+     * and touch have none, so pressure is simulated from pointer speed.
+     */
+    beginBrushStroke(world, pressure = 0.5, pointerType = "pen") {
+        this.brushStroke = beginBrushStrokePure(world, pressure, this._brushSettings.width, pointerType !== "pen");
         this.notify();
     }
     extendBrushStroke(world, pressure = 0.5) {
         if (!this.brushStroke)
             return;
-        extendBrushStrokePure(this.brushStroke, world, pressure, this._brushSettings.width);
+        // Zoom feeds the speed-based pressure simulation (screen-px speed).
+        extendBrushStrokePure(this.brushStroke, world, pressure, this._scene.viewport.zoom || 1);
         this.notify();
     }
     commitBrushStroke() {
@@ -2394,6 +2419,22 @@ export class Editor {
         this._history.push(result.patch);
         this.notify();
     }
+    /**
+     * Re-base the width of committed brush strokes (`style.strokeWidth` has no
+     * effect on brushes — their widths are baked per point). Scales every baked
+     * point width proportionally and records the new `baseWidth`, keeping the
+     * stroke's pressure profile. One undo step. Read-only editors ignore it.
+     */
+    setBrushWidth(ids, width) {
+        if (this.readOnly)
+            return;
+        const result = computeSetBrushWidth(this._scene, ids, width);
+        if (!result)
+            return;
+        this._scene = result.scene;
+        this._history.push(result.patch);
+        this.notify();
+    }
     /**
      * Apply a partial text style (bold / italic / colour / decoration) to the
      * character range `[from, to)` of a single text element, producing styled
@@ -2440,9 +2481,9 @@ export class Editor {
     /**
      * Sample the colour under `worldPoint`. When a pipette pick is armed (see
      * {@link beginEyedropperPick}), route the colour to that callback and disarm.
-     * Otherwise (legacy tool path) apply it as the current selection's fill and
-     * revert to `select` mode. Returns the sampled colour, or `null` on empty
-     * canvas. Read-only editors sample but don't mutate.
+     * Otherwise apply it as the current selection's fill (programmatic path).
+     * Returns the sampled colour, or `null` on empty canvas. Read-only editors
+     * sample but don't mutate.
      */
     applyEyedropperAt(worldPoint) {
         const color = pickColorAt(this._scene, worldPoint, "fill");
@@ -2460,8 +2501,6 @@ export class Editor {
         if (!this.readOnly && this._selection.size > 0) {
             this.updateStyle(this._selection, { fill: color });
         }
-        if (this.mode === "eyedropper" && !this.toolLocked)
-            this.setMode("select");
         return color;
     }
     // --- F9: Convert element type ----------------------------------------
@@ -2672,7 +2711,7 @@ export class Editor {
             drag: null,
             dragStartWorld: null,
         };
-        this.setMode("crop");
+        this.setActiveTool("crop");
         this.refreshCursor();
         this.notify();
     }
@@ -2771,7 +2810,7 @@ export class Editor {
             this._scene = result.scene;
             this._history.push(result.patch);
         }
-        this.setMode("select");
+        this.setActiveTool("select");
         this.refreshCursor();
         this.notify();
     }
@@ -2780,7 +2819,7 @@ export class Editor {
         if (this.cropSession === null)
             return;
         this.cropSession = null;
-        this.setMode("select");
+        this.setActiveTool("select");
         this.refreshCursor();
         this.notify();
     }
@@ -3434,6 +3473,10 @@ export class Editor {
         return pickPressTarget(worldPoint, {
             scene: this._scene,
             selection: this._selection,
+            // Selection chrome (resize / rotate / endpoint handles) is pressable
+            // only under the select tool — a creation tool's press on a selected
+            // shape must start the new element / link instead.
+            selectionChromeActive: this.activeTool.type === "select",
             selectedLink: this.selectedLink,
             selectedLinkCount: this._selectedLinks.size,
             enteredGroup: this._enteredGroup,
@@ -4302,7 +4345,7 @@ export class Editor {
         if (kind === "frame") {
             this.assignFrameMembers(id, b);
         }
-        this.maybeRevertModeAfterCreate();
+        this.maybeRevertToolAfterCreate();
         this.notify();
     }
     /** Generate the next "Frame N" name based on existing frames. */
@@ -4337,7 +4380,7 @@ export class Editor {
         this._scene = result.scene;
         this._history.push(result.patch);
         this.edgePreview = null;
-        this.maybeRevertModeAfterCreate();
+        this.maybeRevertToolAfterCreate();
         // Dropped on empty canvas (free `point` end) → offer a shape-picker at
         // the drop point (standard). The free-ended link stays; picking re-points
         // it, dismissing keeps it. Only the `to` end is user-dragged here.
@@ -4485,6 +4528,19 @@ export class Editor {
     beginWaypointDrag(linkId, index, insert) {
         this.linkHandles.beginWaypointDrag(linkId, index, insert);
     }
+    /** Caption (label pill) drag along the selected link's path. */
+    get isDraggingLabel() {
+        return this.linkHandles.isDraggingLabel;
+    }
+    beginLabelDrag(linkId) {
+        this.linkHandles.beginLabelDrag(linkId);
+    }
+    updateLabelDrag(world) {
+        this.linkHandles.updateLabelDrag(world);
+    }
+    endLabelDrag() {
+        this.linkHandles.endLabelDrag();
+    }
     /** Live update of the dragged waypoint to `world`. */
     updateWaypointDrag(world) {
         this.linkHandles.updateWaypointDrag(world);
@@ -4920,7 +4976,7 @@ export class Editor {
             animationClock: (shape) => this.gifPlayback.clock(castElementId(typeof shape.id === "string" ? shape.id : "")),
             tileComposeFn: this.tileComposeFn,
             tileDirtyElements: this.tileDirtyElements,
-            mode: this.mode,
+            mode: this.activeTool.type,
             activeLayerId: this._activeLayerId,
             cropFrame: this.cropFrameCorners(),
             cropGhost: this.cropGhost(),
@@ -4951,7 +5007,7 @@ export class Editor {
             // (updated on every hover AND drag move) — `hoverCursorWorld` is forced
             // null outside select mode. Radius is the panel's eraser width in SCREEN
             // px (matches the slider number).
-            eraserCursor: this.mode === "erase" && !this._readOnly && this.lastPointerWorld !== null
+            eraserCursor: this.activeTool.type === "erase" && !this._readOnly && this.lastPointerWorld !== null
                 ? { center: this.lastPointerWorld, radius: this._brushSettings.width }
                 : null,
             peerCursors: this._peerCursors,