@fraziym/axoniz 0.1.0

package/dist/web/static/js/editor/tools/crop.js

@@ -0,0 +1,137 @@
+/**
+ * Crop tool — drag-rect selection that lets the user cut down the
+ * canvas to a smaller region. Supports Shift-lock aspect ratio and
+ * click-inside-rect to reposition an existing crop without redrawing.
+ *
+ * Owns its own begin/drag/end handlers and reads/writes shared state.
+ * The factory takes a small dependency bag for things still living in
+ * galleryEditor.js — `composite` redraws the canvas, `showCropApply`
+ * mounts the floating W×H + Apply panel after the user finishes
+ * dragging.
+ *
+ * @param {{
+ *   composite: () => void,
+ *   showCropApply: () => void,
+ * }} deps
+ */
+import { state } from '../state.js';
+import { canvasCoords } from '../canvas-coords.js';
+import { drawCheckerboard } from '../checkerboard.js';
+
+export function createCropTool({ composite, showCropApply }) {
+  return {
+    begin(e) {
+      const coords = canvasCoords(e, state.mainCanvas);
+      // Click inside an existing crop rect → switch to move-mode so
+      // the user can reposition without redrawing.
+      if (state.cropRect &&
+          coords.x >= state.cropRect.x && coords.x <= state.cropRect.x + state.cropRect.w &&
+          coords.y >= state.cropRect.y && coords.y <= state.cropRect.y + state.cropRect.h) {
+        state.cropMoving = true;
+        state.cropMoveStart = { x: coords.x, y: coords.y, rx: state.cropRect.x, ry: state.cropRect.y };
+        return;
+      }
+      state.cropping = true;
+      state.cropStart = coords;
+      state.cropEnd = { ...state.cropStart };
+      state.cropRect = null;
+      state.cropAspectLock = null;
+      // Tear down the size panel while the user is drawing a new rect.
+      const old = state.container?.querySelector('.ge-crop-apply');
+      if (old) old.remove();
+    },
+
+    drag(e) {
+      // Move-mode: drag the existing rect around the canvas.
+      if (state.cropMoving && state.cropRect && state.cropMoveStart) {
+        e.preventDefault();
+        const c = canvasCoords(e, state.mainCanvas);
+        const dx = c.x - state.cropMoveStart.x;
+        const dy = c.y - state.cropMoveStart.y;
+        let nx = state.cropMoveStart.rx + dx;
+        let ny = state.cropMoveStart.ry + dy;
+        // Clamp to canvas bounds so the rect stays fully visible.
+        nx = Math.max(0, Math.min(nx, state.mainCanvas.width - state.cropRect.w));
+        ny = Math.max(0, Math.min(ny, state.mainCanvas.height - state.cropRect.h));
+        state.cropRect = { ...state.cropRect, x: nx, y: ny };
+        composite();
+        return;
+      }
+      if (!state.cropping) return;
+      e.preventDefault();
+      state.cropEnd = canvasCoords(e, state.mainCanvas);
+      // Shift-held = lock aspect ratio. First Shift press during the
+      // drag snapshots the current aspect; subsequent moves stay locked.
+      // Releasing Shift resets so the user can re-lock at a new ratio.
+      if (e.shiftKey) {
+        const rawDx = state.cropEnd.x - state.cropStart.x;
+        const rawDy = state.cropEnd.y - state.cropStart.y;
+        if (state.cropAspectLock == null) {
+          const rawW = Math.abs(rawDx) || 1;
+          const rawH = Math.abs(rawDy) || 1;
+          state.cropAspectLock = rawW / rawH;
+        }
+        const absDx = Math.abs(rawDx);
+        const absDy = Math.abs(rawDy);
+        // Whichever axis the user moved more (relative to the lock) is
+        // the driver; scale the other to preserve aspect.
+        let dx, dy;
+        if (absDx >= absDy * state.cropAspectLock) {
+          dx = rawDx;
+          dy = Math.sign(rawDy || 1) * (absDx / state.cropAspectLock);
+        } else {
+          dy = rawDy;
+          dx = Math.sign(rawDx || 1) * (absDy * state.cropAspectLock);
+        }
+        state.cropEnd = { x: state.cropStart.x + dx, y: state.cropStart.y + dy };
+      } else {
+        state.cropAspectLock = null;
+      }
+      composite();
+      // Draw crop overlay.
+      const x = Math.min(state.cropStart.x, state.cropEnd.x);
+      const y = Math.min(state.cropStart.y, state.cropEnd.y);
+      const w = Math.abs(state.cropEnd.x - state.cropStart.x);
+      const h = Math.abs(state.cropEnd.y - state.cropStart.y);
+      state.mainCtx.fillStyle = 'rgba(0,0,0,0.4)';
+      state.mainCtx.fillRect(0, 0, state.mainCanvas.width, state.mainCanvas.height);
+      state.mainCtx.clearRect(x, y, w, h);
+      // Redraw layers inside the crop rect (dim everything outside).
+      state.mainCtx.save();
+      state.mainCtx.beginPath();
+      state.mainCtx.rect(x, y, w, h);
+      state.mainCtx.clip();
+      drawCheckerboard(state.mainCtx, state.mainCanvas.width, state.mainCanvas.height);
+      for (const layer of state.layers) {
+        if (!layer.visible) continue;
+        state.mainCtx.globalAlpha = layer.opacity;
+        const off = state.layerOffsets.get(layer.id) || { x: 0, y: 0 };
+        state.mainCtx.drawImage(layer.canvas, off.x, off.y);
+      }
+      state.mainCtx.globalAlpha = 1;
+      state.mainCtx.restore();
+      // Dashed border around the kept region.
+      state.mainCtx.strokeStyle = '#fff';
+      state.mainCtx.lineWidth = 1;
+      state.mainCtx.setLineDash([4, 4]);
+      state.mainCtx.strokeRect(x, y, w, h);
+      state.mainCtx.setLineDash([]);
+      state.cropRect = { x, y, w, h };
+    },
+
+    end() {
+      // Move-mode wrap-up: refresh the floating panel so Apply follows
+      // the rect to its new spot.
+      if (state.cropMoving) {
+        state.cropMoving = false;
+        state.cropMoveStart = null;
+        if (state.cropRect) showCropApply();
+        return;
+      }
+      state.cropping = false;
+      if (state.cropRect && state.cropRect.w > 5 && state.cropRect.h > 5) {
+        showCropApply();
+      }
+    },
+  };
+}

package/dist/web/static/js/editor/tools/flood-fill.js

@@ -0,0 +1,72 @@
+/**
+ * Iterative 4-connected flood fill on RGBA pixel data.
+ *
+ * Pure function — takes the source pixel array + seed + tolerance and
+ * returns a mask canvas with white where the fill landed. The legacy
+ * gallery editor's magic-wand tool delegates to this.
+ *
+ * @param {Uint8ClampedArray|Uint8Array} src   RGBA bytes (length = w*h*4).
+ * @param {number} w                           Pixel width.
+ * @param {number} h                           Pixel height.
+ * @param {number} seedX                       Floored seed X.
+ * @param {number} seedY                       Floored seed Y.
+ * @param {number} tolerance                   Tolerance 0..100. Internally
+ *                                             squared and scaled to RGB+A
+ *                                             space (max ≈ 195k at 100).
+ * @returns {HTMLCanvasElement|null}           A `w × h` mask canvas with
+ *                                             white-opaque pixels for
+ *                                             visited cells, or null if
+ *                                             the seed is out of bounds.
+ */
+export function floodFillMask(src, w, h, seedX, seedY, tolerance) {
+  if (seedX < 0 || seedY < 0 || seedX >= w || seedY >= h) return null;
+
+  const seedIdx = (seedY * w + seedX) * 4;
+  const sr = src[seedIdx], sg = src[seedIdx + 1];
+  const sb = src[seedIdx + 2], sa = src[seedIdx + 3];
+
+  // 0..100 → squared RGB+A distance threshold. Max single-channel diff
+  // is 255, so sqrt(4 * 255²) ≈ 510; squared cap ≈ 195k at tol = 100.
+  const tol = Math.pow(tolerance * 4.42, 2);
+
+  const visited = new Uint8Array(w * h);
+  const stack = [seedX, seedY];
+  visited[seedY * w + seedX] = 1;
+  while (stack.length) {
+    const y = stack.pop();
+    const x = stack.pop();
+    const nbrs = [
+      [x + 1, y], [x - 1, y], [x, y + 1], [x, y - 1],
+    ];
+    for (const [nx, ny] of nbrs) {
+      if (nx < 0 || ny < 0 || nx >= w || ny >= h) continue;
+      const idx = ny * w + nx;
+      if (visited[idx]) continue;
+      const o = idx * 4;
+      const dr = src[o] - sr, dg = src[o + 1] - sg;
+      const db = src[o + 2] - sb, da = src[o + 3] - sa;
+      // RGB + alpha-aware so a click on a transparent pixel selects
+      // the transparent region cleanly.
+      if (dr * dr + dg * dg + db * db + da * da <= tol) {
+        visited[idx] = 1;
+        stack.push(nx, ny);
+      }
+    }
+  }
+
+  const mask = document.createElement('canvas');
+  mask.width = w;
+  mask.height = h;
+  const mCtx = mask.getContext('2d');
+  const mData = mCtx.createImageData(w, h);
+  for (let i = 0; i < w * h; i++) {
+    if (visited[i]) {
+      mData.data[i * 4]     = 255;
+      mData.data[i * 4 + 1] = 255;
+      mData.data[i * 4 + 2] = 255;
+      mData.data[i * 4 + 3] = 255;
+    }
+  }
+  mCtx.putImageData(mData, 0, 0);
+  return mask;
+}

package/dist/web/static/js/editor/tools/lasso-mask.js

@@ -0,0 +1,171 @@
+/**
+ * Lasso-tool pixel & path helpers.
+ *
+ * All functions take the lasso polygon `points` as an explicit
+ * argument so they can be tested in isolation. The legacy gallery
+ * editor calls them with its module-level `_lassoPoints` array.
+ */
+
+/**
+ * Shift each polygon vertex along the outward normal by `grow` pixels.
+ * Used by the lasso overlay (to draw the "feather" halo) and by
+ * `buildLassoMask` (to bake the grown polygon into the mask).
+ *
+ * @param {{x: number, y: number}[]} points  Polygon vertices in draw order.
+ * @param {number} grow                      Positive = expand outward, negative = contract.
+ * @returns {{x: number, y: number}[]}       New array (same length, original is not mutated).
+ */
+export function lassoOffsetPoints(points, grow) {
+  const n = points.length;
+  if (n < 3 || !grow) return points;
+  // Polygon winding (positive = CCW) — flip the normal so it points
+  // away from the interior regardless of draw direction.
+  let area = 0;
+  for (let i = 0; i < n; i++) {
+    const p = points[i], q = points[(i + 1) % n];
+    area += (q.x - p.x) * (q.y + p.y);
+  }
+  const sign = area > 0 ? 1 : -1;
+  const out = new Array(n);
+  for (let i = 0; i < n; i++) {
+    const a = points[(i - 1 + n) % n], b = points[i], c = points[(i + 1) % n];
+    const e1x = b.x - a.x, e1y = b.y - a.y;
+    const e2x = c.x - b.x, e2y = c.y - b.y;
+    const l1 = Math.hypot(e1x, e1y) || 1;
+    const l2 = Math.hypot(e2x, e2y) || 1;
+    // Perpendicular (dy, -dx); flip via `sign` for outward direction.
+    const n1x = (e1y / l1) * sign, n1y = (-e1x / l1) * sign;
+    const n2x = (e2y / l2) * sign, n2y = (-e2x / l2) * sign;
+    const nx = (n1x + n2x) / 2;
+    const ny = (n1y + n2y) / 2;
+    const nl = Math.hypot(nx, ny) || 1;
+    out[i] = { x: b.x + (nx / nl) * grow, y: b.y + (ny / nl) * grow };
+  }
+  return out;
+}
+
+
+/**
+ * Trace the lasso polygon on the given context (move-to + line-to,
+ * closed). Caller is responsible for `stroke()` / `fill()` choice.
+ */
+export function getLassoPath(ctx, points) {
+  if (!points || points.length < 1) return;
+  ctx.beginPath();
+  ctx.moveTo(points[0].x, points[0].y);
+  for (let i = 1; i < points.length; i++) {
+    ctx.lineTo(points[i].x, points[i].y);
+  }
+  ctx.closePath();
+}
+
+
+/**
+ * Build a (optionally feathered, optionally grown) selection mask
+ * from a lasso polygon.
+ *
+ * @param {{x: number, y: number}[]} points  Polygon vertices.
+ * @param {number} w / h                     Output canvas dimensions.
+ * @param {number} offX / offY               Translate the polygon by (offX, offY) before rasterising.
+ * @param {number} feather                   Feather width in pixels. 0 = hard edge.
+ * @param {number} grow                      Positive = dilate the polygon, negative = erode.
+ * @returns {HTMLCanvasElement}              A `w × h` canvas with alpha = selection strength.
+ */
+export function buildLassoMask(points, w, h, offX, offY, feather, grow) {
+  // Step 1: draw hard mask
+  const hard = document.createElement('canvas');
+  hard.width = w; hard.height = h;
+  const hCtx = hard.getContext('2d');
+  hCtx.beginPath();
+  hCtx.moveTo(points[0].x - offX, points[0].y - offY);
+  for (let i = 1; i < points.length; i++) {
+    hCtx.lineTo(points[i].x - offX, points[i].y - offY);
+  }
+  hCtx.closePath();
+  hCtx.fillStyle = '#fff';
+  hCtx.fill();
+
+  // Step 1b: grow / shrink — blur the hard mask, threshold low for
+  // grow and high for shrink. Same technique as the bg-remove edge
+  // tuner. RGB is left alone, alpha is replaced.
+  if (grow && grow !== 0) {
+    const blurC = document.createElement('canvas');
+    blurC.width = w; blurC.height = h;
+    const bctx = blurC.getContext('2d');
+    bctx.filter = `blur(${Math.abs(grow)}px)`;
+    bctx.drawImage(hard, 0, 0);
+    bctx.filter = 'none';
+    const blurred = bctx.getImageData(0, 0, w, h).data;
+    const hd = hCtx.getImageData(0, 0, w, h);
+    const out = hd.data;
+    const thr = grow > 0 ? 32 : 200;
+    for (let i = 0; i < out.length; i += 4) {
+      const a = blurred[i + 3] >= thr ? 255 : 0;
+      out[i] = a; out[i + 1] = a; out[i + 2] = a; out[i + 3] = a;
+    }
+    hCtx.putImageData(hd, 0, 0);
+  }
+
+  if (feather <= 0) return hard;
+
+  // Step 2: pixel data and distance-based feather.
+  const hardData = hCtx.getImageData(0, 0, w, h);
+  const d = hardData.data;
+
+  // Build inside/outside map.
+  const inside = new Uint8Array(w * h);
+  for (let i = 0; i < w * h; i++) {
+    inside[i] = d[i * 4] > 128 ? 1 : 0;
+  }
+
+  // Distance from edge (for pixels inside the selection, distance to nearest outside pixel).
+  const dist = new Float32Array(w * h);
+  dist.fill(feather + 1);
+
+  // Seed: edge pixels (inside pixels adjacent to outside pixels).
+  for (let y = 0; y < h; y++) {
+    for (let x = 0; x < w; x++) {
+      const i = y * w + x;
+      if (!inside[i]) { dist[i] = 0; continue; }
+      const hasOutside = (x > 0 && !inside[i-1]) || (x < w-1 && !inside[i+1]) ||
+                         (y > 0 && !inside[(y-1)*w+x]) || (y < h-1 && !inside[(y+1)*w+x]);
+      if (hasOutside) dist[i] = 1;
+    }
+  }
+
+  // Two-pass chamfer distance transform.
+  for (let y = 0; y < h; y++) {
+    for (let x = 0; x < w; x++) {
+      const i = y * w + x;
+      if (dist[i] === 0) continue;
+      if (x > 0) dist[i] = Math.min(dist[i], dist[i-1] + 1);
+      if (y > 0) dist[i] = Math.min(dist[i], dist[(y-1)*w+x] + 1);
+    }
+  }
+  for (let y = h-1; y >= 0; y--) {
+    for (let x = w-1; x >= 0; x--) {
+      const i = y * w + x;
+      if (dist[i] === 0) continue;
+      if (x < w-1) dist[i] = Math.min(dist[i], dist[i+1] + 1);
+      if (y < h-1) dist[i] = Math.min(dist[i], dist[(y+1)*w+x] + 1);
+    }
+  }
+
+  // Pixels near the edge get reduced alpha.
+  const result = document.createElement('canvas');
+  result.width = w; result.height = h;
+  const rCtx = result.getContext('2d');
+  const rData = rCtx.createImageData(w, h);
+
+  for (let i = 0; i < w * h; i++) {
+    if (!inside[i]) continue;
+    const edgeDist = dist[i];
+    const alpha = edgeDist >= feather ? 255 : Math.round((edgeDist / feather) * 255);
+    rData.data[i*4] = alpha;
+    rData.data[i*4+1] = alpha;
+    rData.data[i*4+2] = alpha;
+    rData.data[i*4+3] = 255;
+  }
+  rCtx.putImageData(rData, 0, 0);
+  return result;
+}

package/dist/web/static/js/editor/tools/lasso.js

@@ -0,0 +1,65 @@
+/**
+ * Lasso tool — freehand polygon selection. Mouse-down starts a fresh
+ * polygon; every move appends a point and redraws the dashed outline;
+ * mouse-up keeps the selection visible (the panel's action buttons
+ * read `state.lassoPoints` to act on it).
+ *
+ * Owns its own begin/drag/end handlers and reads/writes shared state.
+ *
+ * @param {{
+ *   composite:                 () => void,
+ *   drawLassoOverlay:          () => void,
+ *   syncToolClearIndicators:   () => void,
+ * }} deps
+ */
+import { state } from '../state.js';
+import { canvasCoords } from '../canvas-coords.js';
+
+export function createLassoTool({ composite, drawLassoOverlay, syncToolClearIndicators }) {
+  return {
+    begin(e) {
+      state.lassoPoints = [];
+      state.lassoActive = true;
+      const coords = canvasCoords(e, state.mainCanvas);
+      state.lassoPoints.push(coords);
+    },
+
+    drag(e) {
+      if (!state.lassoActive) return;
+      e.preventDefault();
+      const coords = canvasCoords(e, state.mainCanvas);
+      state.lassoPoints.push(coords);
+      // Live overlay: dashed white outline + translucent red fill.
+      composite();
+      if (state.lassoPoints.length > 1) {
+        state.mainCtx.beginPath();
+        state.mainCtx.moveTo(state.lassoPoints[0].x, state.lassoPoints[0].y);
+        for (let i = 1; i < state.lassoPoints.length; i++) {
+          state.mainCtx.lineTo(state.lassoPoints[i].x, state.lassoPoints[i].y);
+        }
+        state.mainCtx.closePath();
+        state.mainCtx.strokeStyle = '#fff';
+        state.mainCtx.lineWidth = 1 / state.zoom;
+        state.mainCtx.setLineDash([4 / state.zoom, 4 / state.zoom]);
+        state.mainCtx.stroke();
+        state.mainCtx.setLineDash([]);
+        state.mainCtx.fillStyle = 'rgba(255, 80, 80, 0.15)';
+        state.mainCtx.fill();
+      }
+    },
+
+    end() {
+      state.lassoActive = false;
+      if (state.lassoPoints.length < 3) {
+        state.lassoPoints = [];
+        composite();
+        syncToolClearIndicators();
+        return;
+      }
+      // Keep the selection drawn — the panel's action buttons use it.
+      composite();
+      drawLassoOverlay();
+      syncToolClearIndicators();
+    },
+  };
+}

package/dist/web/static/js/editor/tools/move.js

@@ -0,0 +1,79 @@
+/**
+ * Move tool — drag a layer around the canvas, with optional snap-on-Ctrl
+ * to other layers' edges/centers and to canvas edges/center.
+ *
+ * Owns its own input handlers (begin/drag/end) and reads/writes the
+ * shared `state` store directly. The factory takes a small dependency
+ * bag for things that still live in galleryEditor.js — `activeLayer`,
+ * `saveState`, `composite` — so this module doesn't have to know about
+ * the orchestrator.
+ *
+ * @param {{
+ *   activeLayer: () => {id: string, canvas: HTMLCanvasElement, locked?: boolean} | null,
+ *   saveState:   (label?: string) => void,
+ *   composite:   () => void,
+ * }} deps
+ * @returns {{ begin: (e: Event) => void, drag: (e: Event) => void, end: () => void }}
+ */
+import { state } from '../state.js';
+import { canvasCoords } from '../canvas-coords.js';
+import { computeSnap as computeSnapImpl } from '../snap.js';
+
+export function createMoveTool({ activeLayer, saveState, composite }) {
+  function computeSnap(layer, nx, ny) {
+    return computeSnapImpl(layer, nx, ny, {
+      zoom: state.zoom,
+      canvasW: state.imgWidth,
+      canvasH: state.imgHeight,
+      otherLayers: state.layers.map(l => ({
+        visible: l.visible,
+        id: l.id,
+        canvas: l.canvas,
+        offset: state.layerOffsets.get(l.id) || { x: 0, y: 0 },
+      })),
+    });
+  }
+
+  return {
+    begin(e) {
+      const layer = activeLayer();
+      if (!layer || layer.locked) return;
+      saveState();
+      state.moving = true;
+      const coords = canvasCoords(e, state.mainCanvas);
+      const off = state.layerOffsets.get(layer.id) || { x: 0, y: 0 };
+      state.moveStartX = coords.x;
+      state.moveStartY = coords.y;
+      state.moveLayerOffsetX = off.x;
+      state.moveLayerOffsetY = off.y;
+    },
+    drag(e) {
+      if (!state.moving) return;
+      e.preventDefault();
+      const layer = activeLayer();
+      if (!layer) return;
+      const coords = canvasCoords(e, state.mainCanvas);
+      const dx = coords.x - state.moveStartX;
+      const dy = coords.y - state.moveStartY;
+      let nx = state.moveLayerOffsetX + dx;
+      let ny = state.moveLayerOffsetY + dy;
+      // Ctrl held = snap to canvas edges/center and to every other
+      // visible layer's edges/center. Opt-in to avoid a "sticky" feel
+      // during normal drags.
+      if (e.ctrlKey || e.metaKey) {
+        const snapped = computeSnap(layer, nx, ny);
+        nx = snapped.x;
+        ny = snapped.y;
+        state.activeSnapGuides = snapped.guides;
+      } else {
+        state.activeSnapGuides = null;
+      }
+      state.layerOffsets.set(layer.id, { x: nx, y: ny });
+      composite();
+    },
+    end() {
+      state.moving = false;
+      state.activeSnapGuides = null;
+    },
+  };
+}

package/dist/web/static/js/editor/tools/stroke.js

@@ -0,0 +1,123 @@
+/**
+ * Shared stroke pipeline for brush / eraser / inpaint.
+ *
+ * Per-sample stamping happens in `_strokeTo` (still in galleryEditor.js
+ * because it touches a lot of pixel-pass internals). This module owns
+ * the begin / continue / end orchestration around it:
+ *
+ *  - begin: capture the inpaint-erase flag for the stroke, ensure a
+ *           mask sub-layer exists when inpaint runs against an empty
+ *           layer, push an undo entry with a tool-specific label, then
+ *           kick off the first stamp.
+ *  - continue: forward the new cursor position to `_strokeTo`.
+ *  - end: clear the drawing flag, composite, sync any tool indicators
+ *         that reflect mask state.
+ *
+ * Clone has its own begin (see tools/clone.js) but reuses `continue`
+ * and `end` because once a clone stroke is in progress, the pipeline
+ * is identical.
+ *
+ * @param {{
+ *   saveState:               (label: string) => void,
+ *   strokeTo:                (x: number, y: number) => void,
+ *   composite:               () => void,
+ *   getActiveMaskLayer:      () => object | null,
+ *   activeParentLayer:       () => object | null,
+ *   ensureActiveMaskLayer:   () => object | null,
+ *   createLayer:             (name: string, w: number, h: number) => object,
+ *   renderLayerPanel:        () => void,
+ *   syncToolClearIndicators: () => void,
+ * }} deps
+ */
+import { state } from '../state.js';
+import { canvasCoords } from '../canvas-coords.js';
+
+const STROKE_TOOLS = new Set(['brush', 'eraser', 'inpaint']);
+
+function strokeLabel(tool) {
+  if (tool === 'brush') return 'Brush stroke';
+  if (tool === 'eraser') return 'Eraser stroke';
+  if (tool === 'inpaint') return state.inpaintEraseStroke ? 'Erase mask' : 'Paint mask';
+  return 'Stroke';
+}
+
+export function createStrokeTool({
+  saveState, strokeTo, composite,
+  getActiveMaskLayer, activeParentLayer, ensureActiveMaskLayer, createLayer,
+  renderLayerPanel, syncToolClearIndicators,
+}) {
+  return {
+    /**
+     * Begin a stroke. Returns true if the dispatcher should consider
+     * the event handled (i.e. tool is one of brush/eraser/inpaint).
+     */
+    tryBegin(e) {
+      if (!STROKE_TOOLS.has(state.tool)) return false;
+      // Capture the inpaint-erase flag for this stroke. Ctrl+Alt
+      // pressed at pointerdown flips the persistent toggle for one
+      // stroke only.
+      if (state.tool === 'inpaint') {
+        const flip = e && e.ctrlKey && e.altKey;
+        state.inpaintEraseStroke = flip ? !state.inpaintEraseMode : state.inpaintEraseMode;
+        // Make sure we're painting onto an existing mask sub-layer. If
+        // there's no parent layer at all, create one first so a totally
+        // empty canvas can accept an inpaint stroke.
+        if (!getActiveMaskLayer()) {
+          let parent = activeParentLayer();
+          if (!parent) {
+            parent = createLayer('Layer 1', state.imgWidth, state.imgHeight);
+            state.layers.push(parent);
+            state.activeLayerId = parent.id;
+          }
+          if (parent.masks && parent.masks.length) {
+            parent.activeMaskId = parent.masks[parent.masks.length - 1].id;
+            const m = getActiveMaskLayer();
+            if (m) {
+              state.maskCanvas = m.canvas;
+              state.maskCtx = m.ctx;
+              renderLayerPanel();
+            }
+          } else {
+            const mk = ensureActiveMaskLayer();
+            if (mk) {
+              state.maskCanvas = mk.canvas;
+              state.maskCtx = mk.ctx;
+              renderLayerPanel();
+            }
+          }
+        }
+      }
+      saveState(strokeLabel(state.tool));
+      state.drawing = true;
+      const coords = canvasCoords(e, state.mainCanvas);
+      state.lastX = coords.x;
+      state.lastY = coords.y;
+      strokeTo(coords.x, coords.y);
+      return true;
+    },
+
+    /**
+     * Forward an in-progress stroke. Returns true if a stroke is
+     * actually in progress (dispatcher should short-circuit).
+     */
+    tryContinue(e) {
+      if (!state.drawing) return false;
+      e.preventDefault();
+      const coords = canvasCoords(e, state.mainCanvas);
+      strokeTo(coords.x, coords.y);
+      return true;
+    },
+
+    /**
+     * Wrap up an in-progress stroke. Returns true if there was one.
+     */
+    tryEnd() {
+      if (!state.drawing) return false;
+      const wasDrawingInpaint = state.tool === 'inpaint';
+      state.drawing = false;
+      composite();
+      if (wasDrawingInpaint) syncToolClearIndicators();
+      return true;
+    },
+  };
+}