@fraziym/axoniz 0.1.0

package/dist/web/static/js/editor/state.js

@@ -0,0 +1,257 @@
+/**
+ * Editor state store — a single mutable object that the gallery editor
+ * and its tool modules read and write directly.
+ *
+ * Migration: galleryEditor.js used to own ~110 module-scope `let`
+ * declarations and capture them via closure. Tool modules can't import
+ * a `let` binding's mutations across module boundaries, so we move the
+ * state into a single exported OBJECT whose properties are freely
+ * mutated by anyone holding a reference. Read/write `state.transformW`
+ * exactly the way the old code wrote `_transformW`.
+ *
+ * Slices land here one tool at a time; this file grows as more state
+ * migrates out of galleryEditor.js. Defaults match the legacy
+ * module-scope initializers verbatim — every `state.foo = …` reset
+ * site in galleryEditor.js still works unchanged.
+ */
+export const state = {
+  // ── Transform tool ──
+  // Drag-resize / rotate session state. While `transformActive` is
+  // false every field below should be considered stale.
+  transformActive: false,
+  transformLayer: null,
+  transformOrigW: 0,
+  transformOrigH: 0,
+  // Which corner/edge handle the user is currently dragging. One of
+  // 'tl' | 'tr' | 'bl' | 'br' | 'rot' | null.
+  transformHandle: null,
+  // Which handle is currently under the cursor (no drag). Drives the
+  // hover cursor lookup; lives next to `transformHandle` because both
+  // come from `_getTransformHandle`.
+  hoveredHandle: null,
+  // Snapshot of the layer canvas + offset at transform start so Cancel
+  // can restore exactly without re-fetching from the layer.
+  transformOrigCanvas: null,
+  transformOrigOffset: null,
+  // In-progress dimensions / rotation / flips committed on Apply.
+  transformPendingW: 0,
+  transformPendingH: 0,
+  transformPendingRot: 0,
+  transformPendingFlipH: false,
+  transformPendingFlipV: false,
+  transformAspectLock: true,
+  // Floating Transform popup element + drag-start offsets.
+  transformPopup: null,
+  transformStartX: 0,
+  transformStartY: 0,
+  transformStartOffX: 0,
+  transformStartOffY: 0,
+  // Transform overlay canvas — separate canvas positioned over the
+  // main canvas with extra slack for handle rendering. Created by
+  // _buildEditor; the move/transform tools draw their handle layer
+  // onto its 2D context.
+  transformOverlay: null,
+  transformOverlayCtx: null,
+
+  // ── Magic Wand tool ──
+  // Binary selection mask + the layer it was sampled from. `wandMask`
+  // is a canvas the size of `wandLayer`'s pixels, white where selected,
+  // transparent elsewhere. `wandLastSeed` remembers the last click so
+  // tolerance retunes can re-run the flood-fill without re-prompting.
+  wandMask: null,
+  wandLayerId: null,
+  wandTolerance: 24,
+  wandMaskVisible: true,
+  wandMode: 'replace',
+  wandLiveRetune: false,
+  wandLastSeed: null,
+  // Cached layer pixel data (getImageData is O(pixels) — expensive for
+  // 4K layers; invalidated when the active layer changes).
+  wandSrcCache: null,
+
+  // ── Brush / Eraser / Clone tools ──
+  // Shared paint color (brush picks up the swatch; eraser and clone
+  // ignore color but reuse the same picker control).
+  color: '#e06c75',
+  // Brush diameter in canvas pixels. Persisted across tool switches;
+  // bumped to a mask-friendly default on first inpaint entry.
+  brushSize: 8,
+  // Per-tool stroke modifiers — opacity + flow + softness. Each tool
+  // owns its own row so users can dial them in independently.
+  brushOpacity: 100,
+  brushFlow: 100,
+  brushSoftness: 100,
+  eraserOpacity: 100,
+  eraserFlow: 100,
+  eraserSoftness: 100,
+  cloneOpacity: 100,
+  cloneFlow: 100,
+  cloneSoftness: 100,
+  // Clone-stamp source point (set via Alt-click or double-tap). Null
+  // means no source picked yet — clicking with the clone tool no-ops
+  // until a source is set.
+  cloneSourceX: null,
+  cloneSourceY: null,
+  // Stroke-start offsets so the source moves WITH the brush, keeping
+  // the source→destination offset constant across the stroke.
+  cloneStrokeStartX: null,
+  cloneStrokeStartY: null,
+  // Frozen snapshot of the source layer's pixels at stroke start so
+  // moving the source over previously-painted pixels samples the
+  // original, not the in-progress stamp ring.
+  cloneSourceSnapshot: null,
+  cloneSourceLayerId: null,
+  // Mobile: double-tap detection for "set source" since Alt-click
+  // isn't an option without a keyboard.
+  cloneLastTapTime: 0,
+  cloneLastTapX: 0,
+  cloneLastTapY: 0,
+
+  // ── Inpaint + mask ──
+  // Active mask canvas + its 2D context. Re-pointed to the active
+  // mask sub-layer whenever the user picks a different mask in the
+  // layer panel.
+  maskCanvas: null,
+  maskCtx: null,
+  maskVisible: true,
+  // Reused canvas for the union-of-masks tint pass (saves repeated
+  // allocation on every composite).
+  compositeMaskUnion: null,
+  // Visual tint applied to mask pixels in the composite — purely
+  // cosmetic; the AI model still sees a hard binary mask.
+  maskTintColor: 'rgba(255, 110, 110, 1)',
+  maskTintOpacity: 0.28,
+  // Inpaint-tool paint vs erase modes (Ctrl+Alt flips for a single
+  // stroke; UI buttons toggle the persistent setting).
+  inpaintEraseMode: false,
+  inpaintEraseStroke: false,
+  // First-entry guard: bump brush size to the mask-friendly default
+  // the first time the user opens inpaint per session.
+  inpaintBrushInitialised: false,
+  // Last successful inpaint result layer — drives the live edge
+  // feather / stroke sliders (those only apply to the most recent
+  // result).
+  lastInpaintLayerId: null,
+  // Captured handlers so we can detach them on close without leaking.
+  inpaintDismissHandlers: null,
+  // Background-remove tool state — pristine snapshot so the edge
+  // cleanup sliders can live-rebuild alpha without re-running rembg.
+  rembgLiveLayer: null,
+  rembgLiveSnap: null,
+  // Memoised "is rembg installed on the server?" probe.
+  rembgInstalledCache: null,
+
+  // ── Stroke drag state ──
+  // Generic in-progress-stroke flags shared by brush/eraser/clone/
+  // inpaint. `lastX/Y` are the last mouse position used to interpolate
+  // a continuous line through fast-moving cursor samples.
+  drawing: false,
+  lastX: 0,
+  lastY: 0,
+
+  // ── Move tool ──
+  moving: false,
+  moveStartX: 0,
+  moveStartY: 0,
+  // Layer offset at drag start so we can compute the new offset by
+  // (mouse - startMouse) + startOffset rather than accumulating delta.
+  moveLayerOffsetX: 0,
+  moveLayerOffsetY: 0,
+  // Snap guides drawn during a move-tool drag (Ctrl held). Each entry
+  // is a vertical / horizontal line in canvas space.
+  activeSnapGuides: null,
+
+  // ── Crop tool ──
+  cropping: false,
+  cropStart: null,
+  cropEnd: null,
+  cropRect: null,
+  cropAspectLock: null,
+  // True while the user drags the inside of an already-finished crop
+  // rect to reposition it.
+  cropMoving: false,
+  cropMoveStart: null,
+
+  // ── Lasso tool ──
+  // Freehand selection polygon in canvas pixels. Empty when no lasso
+  // is in progress or staged.
+  lassoPoints: [],
+  lassoActive: false,
+
+  // In-editor copy/paste — separate from the OS clipboard so we can
+  // round-trip layer alpha and metadata losslessly.
+  internalClipboard: null,
+
+  // ── Editor DOM refs ──
+  // Root container that openEditor mounts into.
+  container: null,
+  // Main image canvas + its 2D context. Re-created on every openEditor
+  // so the editor can reopen with fresh dimensions.
+  mainCanvas: null,
+  mainCtx: null,
+
+  // ── Document + layers ──
+  layers: [],
+  activeLayerId: null,
+  // Active tool ID — one of move/crop/transform/brush/eraser/clone/
+  // lasso/wand/inpaint/rembg/harmonize/sharpen/upscale/style.
+  tool: 'move',
+  // Display zoom (1 = 100%). pan{X,Y} translate the canvas inside the
+  // viewport.
+  zoom: 1,
+  panX: 0,
+  panY: 0,
+  // Document dimensions in canvas pixels.
+  imgWidth: 0,
+  imgHeight: 0,
+  // Gallery image id this editor session is editing, or null for
+  // blank-canvas drafts.
+  imageId: null,
+  // Original file extension so save-over-original re-encodes in the
+  // same format (JPEG vs PNG matters: JPEG cuts upload size 5-10× for
+  // camera photos over remote tunnels).
+  originalExt: 'png',
+  // True between openEditor / closeEditor — guards async callbacks
+  // that fire after the user closes the editor (don't draw onto a
+  // dead canvas, don't re-mount the spinner).
+  editorOpen: false,
+  // Document-level click-away handlers registered for the current
+  // session. Tracked so closeEditor can detach them all cleanly.
+  // Mutated in place (push / length = 0); the reference never changes.
+  editorDocClickHandlers: [],
+
+  // ── Undo / redo ──
+  undoStack: [],
+  redoStack: [],
+
+  // ── Layer offsets + id allocation ──
+  // Map<layerId, {x, y}> — kept in a Map so we can serialise it
+  // separately from the layer's own canvas. Mutated in place.
+  layerOffsets: new Map(),
+  nextLayerId: 1,
+
+  // ── Popup / panel handles ──
+  fxPopupEl: null,
+  fxPopupLayerId: null,
+  fxMenuEl: null,
+  adjPopupEl: null,
+  // rAF-throttled live preview while sliders are dragged in adj popups.
+  adjRafPending: false,
+  historyPanelEl: null,
+  // Custom brush-cursor overlay element (circle following the mouse).
+  cursorEl: null,
+  // Hover-preview thumbnail floating element (singleton, repositioned).
+  layerThumbEl: null,
+  // Loading-overlay element (whirlpool + label).
+  editorLoadingEl: null,
+
+  // ── Draft persistence ──
+  draftId: null,
+  draftName: '',
+  persistTimer: null,
+  // Current PUT/POST promise so concurrent saves can chain.
+  persistInFlight: null,
+  // True when an edit happened during an in-flight save — triggers a
+  // follow-up persist after the current one finishes.
+  persistDirty: false,
+};

package/dist/web/static/js/editor/stroke-pipeline.js

@@ -0,0 +1,162 @@
+/**
+ * Stroke pipeline — paints one segment (last-position → current
+ * position) onto the active layer (or its active mask sub-layer).
+ *
+ * `strokeTo` dispatches by tool:
+ *   - clone  → cloneStrokeTo (custom stamp-based paint loop)
+ *   - brush  → source-over with opacity × flow + softness blur
+ *   - eraser → destination-out with opacity × flow + softness blur
+ *   - inpaint → source-over (paint) or destination-out (erase) with
+ *               full alpha on the mask canvas
+ *
+ * If the active parent has an active mask sub-layer, brush / eraser /
+ * inpaint target the mask canvas instead of the layer's pixel canvas.
+ *
+ * @param {{
+ *   activeLayer:          () => object | null,
+ *   getActiveMaskLayer:   () => object | null,
+ *   composite:            () => void,
+ * }} deps
+ */
+import { state } from './state.js';
+
+export function createStrokePipeline({ activeLayer, getActiveMaskLayer, composite }) {
+  function cloneStrokeTo(x, y, layer) {
+    if (!state.cloneSourceSnapshot) return;
+    const off = state.layerOffsets.get(layer.id) || { x: 0, y: 0 };
+    const dx = x - state.cloneStrokeStartX;
+    const dy = y - state.cloneStrokeStartY;
+    const srcX = state.cloneSourceX + dx;
+    const srcY = state.cloneSourceY + dy;
+    const ctx = layer.ctx;
+    const radius = Math.max(1, state.brushSize / 2);
+    // Walk last → current in roughly half-brush steps so stamps
+    // overlap into a continuous brush trail.
+    const lastSrcX = state.cloneSourceX + (state.lastX - state.cloneStrokeStartX);
+    const lastSrcY = state.cloneSourceY + (state.lastY - state.cloneStrokeStartY);
+    const dist = Math.hypot(x - state.lastX, y - state.lastY);
+    const step = Math.max(1, radius * 0.5);
+    const steps = Math.max(1, Math.ceil(dist / step));
+    const stampSize = Math.max(2, Math.ceil(radius * 2));
+    const stampRadius = stampSize / 2;
+    const stamp = document.createElement('canvas');
+    stamp.width = stampSize;
+    stamp.height = stampSize;
+    const stampCtx = stamp.getContext('2d');
+    const softness = Math.max(0, Math.min(1, state.cloneSoftness / 300));
+    const hardStop = stampRadius * (1 - softness);
+    ctx.save();
+    ctx.globalAlpha = (state.cloneOpacity / 100) * (state.cloneFlow / 100);
+    for (let i = 1; i <= steps; i++) {
+      const t = i / steps;
+      const px = state.lastX + (x - state.lastX) * t - off.x;
+      const py = state.lastY + (y - state.lastY) * t - off.y;
+      const sx = lastSrcX + (srcX - lastSrcX) * t;
+      const sy = lastSrcY + (srcY - lastSrcY) * t;
+      stampCtx.clearRect(0, 0, stampSize, stampSize);
+      stampCtx.globalCompositeOperation = 'source-over';
+      stampCtx.drawImage(
+        state.cloneSourceSnapshot,
+        sx - stampRadius, sy - stampRadius, stampSize, stampSize,
+        0, 0, stampSize, stampSize,
+      );
+      stampCtx.globalCompositeOperation = 'destination-in';
+      const mask = stampCtx.createRadialGradient(stampRadius, stampRadius, hardStop, stampRadius, stampRadius, stampRadius);
+      mask.addColorStop(0, 'rgba(0,0,0,1)');
+      mask.addColorStop(1, 'rgba(0,0,0,0)');
+      stampCtx.fillStyle = mask;
+      stampCtx.fillRect(0, 0, stampSize, stampSize);
+      ctx.drawImage(stamp, px - stampRadius, py - stampRadius);
+    }
+    ctx.restore();
+    state.lastX = x;
+    state.lastY = y;
+    composite();
+  }
+
+  function strokeTo(x, y) {
+    const layer = activeLayer();
+    if (!layer) return;
+    // Clone uses a stamp-based paint loop, not the line-stroke
+    // pipeline below.
+    if (state.tool === 'clone') return cloneStrokeTo(x, y, layer);
+
+    // If the active parent has an active mask sub-layer, brush /
+    // eraser / inpaint paint the mask canvas instead of the layer's
+    // pixel canvas. Brush adds to the mask, Eraser carves it away,
+    // Inpaint still works (its mask plumbing was already pointed at
+    // the same canvas).
+    const activeMask = getActiveMaskLayer();
+    const paintingMask = !!activeMask &&
+      (state.tool === 'brush' || state.tool === 'eraser' || state.tool === 'inpaint');
+    const ctx = paintingMask
+      ? activeMask.ctx
+      : (state.tool === 'inpaint' ? state.maskCtx : layer.ctx);
+    const off = state.layerOffsets.get(layer.id) || { x: 0, y: 0 };
+
+    ctx.save();
+    ctx.lineWidth = state.brushSize;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+
+    if (state.tool === 'eraser') {
+      ctx.globalCompositeOperation = 'destination-out';
+      // Effective alpha = opacity × flow. Opacity = max strength a
+      // stroke can reach; flow = how much erases per pass.
+      ctx.globalAlpha = (state.eraserOpacity / 100) * (state.eraserFlow / 100);
+      ctx.strokeStyle = 'rgba(0,0,0,1)';
+      if (state.eraserSoftness > 0) {
+        const blurPx = (state.eraserSoftness / 100) * (state.brushSize / 2);
+        ctx.filter = `blur(${blurPx.toFixed(2)}px)`;
+      }
+    } else if (state.tool === 'brush') {
+      // Brush — state.color onto the layer (or white onto an active
+      // mask sub-layer). Mask painting forces full alpha so masks
+      // stay a clean binary by default (a sub-100% brush would
+      // silently paint partial-strength mask pixels).
+      ctx.globalCompositeOperation = 'source-over';
+      ctx.strokeStyle = paintingMask ? 'rgba(255,255,255,1)' : state.color;
+      if (paintingMask) {
+        ctx.globalAlpha = 1;
+      } else {
+        ctx.globalAlpha = (state.brushOpacity / 100) * (state.brushFlow / 100);
+        if (state.brushSoftness > 0) {
+          const blurPx = (state.brushSoftness / 100) * (state.brushSize / 2);
+          ctx.filter = `blur(${blurPx.toFixed(2)}px)`;
+        }
+      }
+    } else if (state.tool === 'inpaint') {
+      if (state.inpaintEraseStroke) {
+        ctx.globalCompositeOperation = 'destination-out';
+        ctx.strokeStyle = 'rgba(0,0,0,1)';
+      } else {
+        ctx.globalCompositeOperation = 'source-over';
+        // Diffusion server expects white = inpaint area. The red
+        // overlay is rendered separately in composite() for the user.
+        ctx.strokeStyle = 'rgba(255,255,255,1)';
+      }
+    } else {
+      ctx.globalCompositeOperation = 'source-over';
+      ctx.strokeStyle = state.color;
+    }
+
+    // Mask canvases are always full-image (no per-layer offset), so
+    // painting onto a mask uses canvas-coord origin too — same as
+    // inpaint.
+    const onMaskOrInpaint = paintingMask || state.tool === 'inpaint';
+    const drawX = onMaskOrInpaint ? 0 : off.x;
+    const drawY = onMaskOrInpaint ? 0 : off.y;
+
+    ctx.beginPath();
+    ctx.moveTo(state.lastX - drawX, state.lastY - drawY);
+    ctx.lineTo(x - drawX, y - drawY);
+    ctx.stroke();
+    ctx.restore();
+
+    state.lastX = x;
+    state.lastY = y;
+    composite();
+  }
+
+  return { strokeTo, cloneStrokeTo };
+}

package/dist/web/static/js/editor/stroke-tool-sliders.js

@@ -0,0 +1,64 @@
+/**
+ * Per-tool stroke-modifier sliders (Opacity / Flow / Softness) for
+ * Eraser, Brush, and Clone. The three sections share identical UX:
+ *
+ *   - Opacity slider: writes to state, updates label, fades the
+ *     preview swatch opacity.
+ *   - Flow slider: writes to state, updates label, fades the swatch
+ *     opacity AND swaps its border style (dashed at low flow → dotted
+ *     at high flow) so the user sees the "denseness" change.
+ *   - Softness slider: writes to state, updates label, tweens the
+ *     radial-gradient inner stop on the swatch so it visually fades
+ *     from hard disk to soft falloff.
+ *
+ * The whole block was three near-identical 30-LOC copies before; now
+ * it's one helper that takes the tool's prefix + a state-field bag.
+ *
+ * Usage: just call wireStrokeToolSliders() — the DOM IDs are wired
+ * statically from #ge-{eraser,brush,clone}-{opacity,flow,softness}
+ * + their labels + preview swatches.
+ */
+import { state } from './state.js';
+
+/** Wire the three sliders for one stroke tool. */
+function wireToolSliders(prefix, fields) {
+  const opPrev   = document.getElementById(`ge-${prefix}-preview-opacity`);
+  const flPrev   = document.getElementById(`ge-${prefix}-preview-flow`);
+  const softPrev = document.getElementById(`ge-${prefix}-preview-softness`);
+
+  document.getElementById(`ge-${prefix}-opacity`)?.addEventListener('input', (e) => {
+    state[fields.opacity] = parseInt(e.target.value);
+    document.getElementById(`ge-${prefix}-opacity-label`).textContent = state[fields.opacity] + '%';
+    if (opPrev) opPrev.style.opacity = (state[fields.opacity] / 100).toFixed(2);
+  });
+
+  document.getElementById(`ge-${prefix}-flow`)?.addEventListener('input', (e) => {
+    state[fields.flow] = parseInt(e.target.value);
+    document.getElementById(`ge-${prefix}-flow-label`).textContent = state[fields.flow] + '%';
+    // Lower flow → fewer / sparser dots. Cycle dot densities by
+    // swapping the dashed/dotted border style and fading opacity.
+    if (flPrev) {
+      const denseness = Math.max(1, Math.round(state[fields.flow] / 20));
+      flPrev.style.borderStyle = denseness <= 2 ? 'dashed' : 'dotted';
+      flPrev.style.opacity = (0.3 + (state[fields.flow] / 100) * 0.6).toFixed(2);
+    }
+  });
+
+  document.getElementById(`ge-${prefix}-softness`)?.addEventListener('input', (e) => {
+    state[fields.softness] = parseInt(e.target.value);
+    document.getElementById(`ge-${prefix}-softness-label`).textContent = state[fields.softness] + '%';
+    // Preview tweens from a hard disk into a soft radial gradient as
+    // softness rises (the CSS already sets the radial gradient — we
+    // just tween the inner solid radius to communicate the falloff).
+    if (softPrev) {
+      const innerStop = Math.max(0, 60 - state[fields.softness] * 0.55);
+      softPrev.style.background = `radial-gradient(circle, var(--fg) 0%, var(--fg) ${innerStop}%, transparent 90%)`;
+    }
+  });
+}
+
+export function wireStrokeToolSliders() {
+  wireToolSliders('eraser', { opacity: 'eraserOpacity', flow: 'eraserFlow', softness: 'eraserSoftness' });
+  wireToolSliders('brush',  { opacity: 'brushOpacity',  flow: 'brushFlow',  softness: 'brushSoftness'  });
+  wireToolSliders('clone',  { opacity: 'cloneOpacity',  flow: 'cloneFlow',  softness: 'cloneSoftness'  });
+}

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

@@ -0,0 +1,81 @@
+/**
+ * Clone tool — Alt-click (desktop) or double-tap (mobile) sets the
+ * sample source; a regular click+drag stamps from that source onto the
+ * active layer. The source point moves WITH the brush so the offset
+ * stays constant across the stroke.
+ *
+ * begin() handles the source-pick and stroke-start branches; the
+ * actual per-sample stamping continues through the shared stroke
+ * pipeline (`_strokeTo`) which knows about clone-mode internally.
+ *
+ * @param {{
+ *   activeLayer: () => object | null,
+ *   saveState:   (label?: string) => void,
+ *   strokeTo:    (x: number, y: number) => void,
+ *   showToast:   (msg: string) => void,
+ * }} deps
+ */
+import { state } from '../state.js';
+import { canvasCoords } from '../canvas-coords.js';
+
+export function createCloneTool({ activeLayer, saveState, strokeTo, showToast }) {
+  return {
+    begin(e) {
+      const layer = activeLayer();
+      const coords = canvasCoords(e, state.mainCanvas);
+      // Mobile equivalent of Alt-click: double-tap in screen pixels.
+      // Wider tolerances (500 ms, 40 px) than desktop because finger
+      // taps drift more than mouse clicks.
+      const isTouchEvt = e.type && e.type.startsWith('touch');
+      let isDoubleTap = false;
+      if (isTouchEvt) {
+        const t = e.touches ? e.touches[0] : null;
+        const cx = t ? t.clientX : 0;
+        const cy = t ? t.clientY : 0;
+        const now = Date.now();
+        const dt = now - state.cloneLastTapTime;
+        const dx = cx - state.cloneLastTapX;
+        const dy = cy - state.cloneLastTapY;
+        if (dt < 500 && Math.hypot(dx, dy) < 40) {
+          isDoubleTap = true;
+          state.cloneLastTapTime = 0; // consume the pair
+        } else {
+          state.cloneLastTapTime = now;
+          state.cloneLastTapX = cx;
+          state.cloneLastTapY = cy;
+        }
+      }
+      if (e.altKey || isDoubleTap) {
+        state.cloneSourceX = coords.x;
+        state.cloneSourceY = coords.y;
+        state.cloneSourceLayerId = (layer && layer.id) || state.activeLayerId;
+        state.cloneSourceSnapshot = null; // captured at first stroke
+        showToast('Clone source set');
+        return;
+      }
+      if (state.cloneSourceX === null || state.cloneSourceY === null) {
+        showToast(isTouchEvt
+          ? 'Double-tap first to set a clone source'
+          : 'Alt-click first to set a clone source');
+        return;
+      }
+      if (!layer || layer.locked) return;
+      saveState('Clone stroke');
+      // Snapshot the source layer's pixels at stroke-start so the
+      // brush samples clean source pixels even after it has painted
+      // over them. Otherwise we'd cascade-clone the same ring.
+      const srcLayer = state.layers.find(l => l.id === state.cloneSourceLayerId) || layer;
+      const snap = document.createElement('canvas');
+      snap.width = srcLayer.canvas.width;
+      snap.height = srcLayer.canvas.height;
+      snap.getContext('2d').drawImage(srcLayer.canvas, 0, 0);
+      state.cloneSourceSnapshot = snap;
+      state.cloneStrokeStartX = coords.x;
+      state.cloneStrokeStartY = coords.y;
+      state.drawing = true;
+      state.lastX = coords.x;
+      state.lastY = coords.y;
+      strokeTo(coords.x, coords.y);
+    },
+  };
+}