@fraziym/axoniz 0.1.0

package/dist/web/static/js/editor/mask-utils.js

@@ -0,0 +1,91 @@
+/**
+ * Mask-canvas helpers used by the inpaint pipeline.
+ *
+ * Pure utility functions — they take a canvas (or layer-shape) as
+ * input and return a fresh canvas, with no module-level state.
+ */
+
+/**
+ * Dilate (positive `px`) or erode (negative `px`) a binary alpha mask.
+ *
+ * Strategy: blur the source by `|px|`, then re-threshold the result.
+ * - Dilation keeps anything with non-trivial blurred alpha (low cutoff).
+ * - Erosion keeps only pixels that retained near-full alpha after blur.
+ *
+ * @param {HTMLCanvasElement} src   Source mask canvas.
+ * @param {number}            px    Pixels to dilate (>0) or erode (<0). 0 = copy.
+ * @returns {HTMLCanvasElement}     Fresh canvas with the same dimensions.
+ */
+export function dilateMask(src, px) {
+  const w = src.width, h = src.height;
+  const tmp = document.createElement('canvas');
+  tmp.width = w; tmp.height = h;
+  const ctx = tmp.getContext('2d');
+  if (px === 0) {
+    ctx.drawImage(src, 0, 0);
+    return tmp;
+  }
+  const dilate = px > 0;
+  const radius = Math.abs(px);
+  ctx.filter = `blur(${radius}px)`;
+  ctx.drawImage(src, 0, 0);
+  ctx.filter = 'none';
+  const img = ctx.getImageData(0, 0, w, h);
+  const threshold = dilate ? 8 : 247;
+  for (let i = 0; i < img.data.length; i += 4) {
+    const a = img.data[i + 3];
+    const keep = dilate ? a > threshold : a >= threshold;
+    if (keep) {
+      img.data[i] = img.data[i + 1] = img.data[i + 2] = 255;
+      img.data[i + 3] = 255;
+    } else {
+      img.data[i + 3] = 0;
+    }
+  }
+  ctx.putImageData(img, 0, 0);
+  return tmp;
+}
+
+
+/**
+ * Re-derive an inpaint-result layer's alpha from its cached AI image +
+ * the hard mask, applying a feather + optional dilate/erode of the
+ * boundary. Mutates `layer.canvas` in place via `layer.ctx`.
+ *
+ * The layer must carry an `inpaintSource = { ai, mask }` cache from the
+ * original inpaint call so we can re-shape the alpha cheaply (no
+ * second model call required).
+ *
+ * @param {{canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D,
+ *          inpaintSource?: {ai: CanvasImageSource, mask: HTMLCanvasElement}}} layer
+ * @param {number} featherPx     Gaussian blur radius applied to the mask alpha.
+ * @param {number} [edgeShiftPx] Dilate (+) or erode (-) the mask before blurring.
+ */
+export function applyInpaintFeather(layer, featherPx, edgeShiftPx = 0) {
+  if (!layer || !layer.inpaintSource) return;
+  const { ai, mask } = layer.inpaintSource;
+  const w = layer.canvas.width;
+  const h = layer.canvas.height;
+  // 1) Optional dilate/erode, then optional blur, into a fresh mask.
+  let shaped = mask;
+  if (edgeShiftPx !== 0) shaped = dilateMask(mask, edgeShiftPx);
+  const softMask = document.createElement('canvas');
+  softMask.width = w; softMask.height = h;
+  const smCtx = softMask.getContext('2d');
+  if (featherPx > 0) {
+    smCtx.filter = `blur(${featherPx}px)`;
+    smCtx.drawImage(shaped, 0, 0, w, h);
+    smCtx.filter = 'none';
+  } else {
+    smCtx.drawImage(shaped, 0, 0, w, h);
+  }
+  // 2) Draw the AI image fresh, then multiply alpha by the soft mask.
+  const ctx = layer.ctx;
+  ctx.save();
+  ctx.globalCompositeOperation = 'source-over';
+  ctx.clearRect(0, 0, w, h);
+  ctx.drawImage(ai, 0, 0);
+  ctx.globalCompositeOperation = 'destination-in';
+  ctx.drawImage(softMask, 0, 0);
+  ctx.restore();
+}

package/dist/web/static/js/editor/shortcuts-popover.js

@@ -0,0 +1,149 @@
+/**
+ * Shortcuts-cheatsheet popover — floating frosted-glass list of every
+ * editor keyboard shortcut, anchored above the topbar keyboard icon
+ * (drops below if there's no room above). Drag the header to move;
+ * Esc or click outside dismisses; position is persisted in
+ * localStorage so re-opening restores where the user left it.
+ *
+ * Public API: `toggleShortcuts(show?)` — true/false to force a state,
+ * undefined to toggle.
+ *
+ * @returns {{ toggleShortcuts: (show?: boolean) => void }}
+ */
+import { shortcutsPopupHTML } from './build/popups.js';
+
+export function createShortcutsPopover() {
+  let pop = null;
+  let outside = null;
+
+  function ensurePopover() {
+    if (pop) return pop;
+    const el = document.createElement('div');
+    el.id = 'ge-shortcuts-popover';
+    el.style.cssText = [
+      'position:fixed', 'z-index:10000', 'display:none',
+      // Frosted-glass background: semi-transparent + heavy blur of
+      // what's behind. Layered with an inner translucent veil so
+      // light themes also read clearly without losing the see-through
+      // feel.
+      'background:color-mix(in srgb, var(--panel, #1a1a1a) 55%, transparent)',
+      'backdrop-filter:blur(18px) saturate(150%)',
+      '-webkit-backdrop-filter:blur(18px) saturate(150%)',
+      'color:var(--fg,#eee)',
+      'border:1px solid color-mix(in srgb, var(--fg, #eee) 18%, transparent)',
+      'border-radius:12px',
+      'box-shadow:0 14px 36px rgba(0,0,0,0.5), inset 0 1px 0 color-mix(in srgb, var(--fg, #fff) 8%, transparent)',
+      'padding:12px 14px', 'min-width:540px', 'max-width:min(720px,92vw)',
+      'font-size:12px', 'line-height:1.5',
+    ].join(';');
+    el.innerHTML = shortcutsPopupHTML();
+    document.body.appendChild(el);
+    el.querySelector('#ge-shortcuts-close').addEventListener('click', () => toggleShortcuts(false));
+
+    // Drag by the header handle. Position survives across opens
+    // (localStorage).
+    const handle = el.querySelector('#ge-shortcuts-handle');
+    if (handle) {
+      let drag = null;
+      handle.addEventListener('pointerdown', (e) => {
+        if (e.target.closest('#ge-shortcuts-close')) return;
+        const r = el.getBoundingClientRect();
+        drag = { dx: e.clientX - r.left, dy: e.clientY - r.top, w: r.width, h: r.height };
+        handle.setPointerCapture(e.pointerId);
+        handle.style.cursor = 'grabbing';
+        // Mark as user-positioned so subsequent toggles don't re-anchor.
+        el.dataset.userPositioned = '1';
+        e.preventDefault();
+      });
+      handle.addEventListener('pointermove', (e) => {
+        if (!drag) return;
+        let left = e.clientX - drag.dx;
+        let top  = e.clientY - drag.dy;
+        const m = 4;
+        left = Math.max(m, Math.min(left, window.innerWidth  - drag.w - m));
+        top  = Math.max(m, Math.min(top,  window.innerHeight - drag.h - m));
+        el.style.left = left + 'px';
+        el.style.top  = top + 'px';
+      });
+      const endDrag = () => {
+        if (!drag) return;
+        drag = null;
+        handle.style.cursor = 'grab';
+        try {
+          localStorage.setItem('ge-shortcuts-pos', JSON.stringify({
+            left: el.style.left, top: el.style.top,
+          }));
+        } catch {}
+      };
+      handle.addEventListener('pointerup', endDrag);
+      handle.addEventListener('pointercancel', endDrag);
+    }
+    pop = el;
+    return pop;
+  }
+
+  function positionPopover(el, anchor) {
+    // Place ABOVE the anchor, horizontally centred but clamped to
+    // viewport. Falls back to BELOW if there's no room above.
+    el.style.display = 'block';   // need a layout pass for accurate size
+    const ar = anchor.getBoundingClientRect();
+    const pr = el.getBoundingClientRect();
+    const margin = 8;
+    let left = ar.left + (ar.width / 2) - (pr.width / 2);
+    let top = ar.top - pr.height - margin;
+    if (top < margin) top = ar.bottom + margin;
+    left = Math.max(margin, Math.min(left, window.innerWidth - pr.width - margin));
+    top  = Math.max(margin, Math.min(top, window.innerHeight - pr.height - margin));
+    el.style.left = left + 'px';
+    el.style.top  = top + 'px';
+  }
+
+  function toggleShortcuts(show) {
+    const el = ensurePopover();
+    const open = show === undefined ? el.style.display === 'none' : show;
+    if (open) {
+      // Restore the user's last-dragged position if any; otherwise
+      // anchor above the button.
+      let saved = null;
+      try { saved = JSON.parse(localStorage.getItem('ge-shortcuts-pos') || 'null'); } catch {}
+      if (saved && saved.left && saved.top) {
+        el.style.display = 'block';
+        el.style.left = saved.left;
+        el.style.top  = saved.top;
+        // Re-clamp in case the viewport changed since the user dragged.
+        requestAnimationFrame(() => {
+          const r = el.getBoundingClientRect();
+          const m = 4;
+          if (r.right > window.innerWidth)  el.style.left = (window.innerWidth - r.width - m) + 'px';
+          if (r.bottom > window.innerHeight) el.style.top = (window.innerHeight - r.height - m) + 'px';
+          if (r.left < 0) el.style.left = m + 'px';
+          if (r.top  < 0) el.style.top  = m + 'px';
+        });
+      } else {
+        const anchor = document.getElementById('ge-shortcuts-btn');
+        if (anchor) positionPopover(el, anchor);
+        else el.style.display = 'block';
+      }
+      // Defer outside-click so the click that opened us doesn't close us.
+      outside = (e) => {
+        if (el.contains(e.target)) return;
+        if (e.target.closest('#ge-shortcuts-btn')) return;
+        toggleShortcuts(false);
+      };
+      setTimeout(() => document.addEventListener('mousedown', outside, true), 0);
+    } else {
+      el.style.display = 'none';
+      if (outside) {
+        document.removeEventListener('mousedown', outside, true);
+        outside = null;
+      }
+    }
+  }
+
+  /** True when the popover is currently visible. */
+  function isOpen() {
+    return !!(pop && pop.style.display && pop.style.display !== 'none');
+  }
+
+  return { toggleShortcuts, isOpen };
+}

package/dist/web/static/js/editor/slider-ux.js

@@ -0,0 +1,191 @@
+/**
+ * Slider-UX wiring shared across the editor:
+ *
+ *   1. `is-using` class while a slider is being dragged (eraser-rows
+ *      expand to a wider track when in use). Cleared 0.5s after
+ *      pointerup so a quick click doesn't snap back instantly.
+ *   2. Floating value bubble above the thumb during drag.
+ *      Desktop: only the layer-opacity slider gets a bubble (the
+ *      eraser-row sliders already show a value chip on the right).
+ *      Mobile: every slider in the editor gets a bubble.
+ *   3. Click the value chip to type a number directly — replaces
+ *      the span with an inline input until blur/Enter.
+ *
+ * Wired ONCE on editor open; the listeners stay alive for the whole
+ * session via state.container delegation.
+ *
+ * @param {{
+ *   registerDocClickAway: (handler: (e: Event) => void) => void,
+ * }} deps
+ */
+import { state } from './state.js';
+
+export function wireSliderUx({ registerDocClickAway }) {
+  const container = state.container;
+  if (!container) return;
+
+  // ── Floating bubble ──
+  const sliderBubble = document.createElement('div');
+  sliderBubble.className = 'ge-slider-bubble';
+  sliderBubble.hidden = true;
+  let sliderBubbleSlider = null;
+
+  // Find the container row for any slider — works for ge-eraser-row
+  // sliders AND the layer-opacity slider on each layer item.
+  function bubbleRowFor(slider) {
+    return slider.closest('.ge-eraser-row, .ge-layer-item, .ge-control-row, .ge-adj-row');
+  }
+  function bubbleText(slider) {
+    const row = bubbleRowFor(slider);
+    // Pulled-out value chip (after the slider) wins; fall back to
+    // the various `<label> <span>` styles used across the editor.
+    const chip = row?.querySelector('.ge-slider-value')
+      || row?.querySelector('label > span[id$="-label"]')
+      || row?.querySelector('label > .ge-size-label')
+      || row?.querySelector('.ge-adj-value');
+    if (chip) return chip.textContent;
+    if (slider.classList.contains('ge-layer-opacity')) {
+      return Math.round(parseFloat(slider.value)) + '%';
+    }
+    return slider.value;
+  }
+  function bubblePos(slider, cursorX) {
+    // Bubble is fixed-positioned on document.body so it escapes any
+    // overflow:hidden / overflow:auto on the row's ancestors. The
+    // bubble's X is CLAMPED to the slider's track so it can't follow
+    // a finger that drags way past either end.
+    const sliderRect = slider.getBoundingClientRect();
+    const minX = sliderRect.left + 8;
+    const maxX = sliderRect.right - 8;
+    const x = Math.max(minX, Math.min(maxX, cursorX));
+    sliderBubble.style.left = x + 'px';
+    sliderBubble.style.top  = (sliderRect.top - 8) + 'px';
+  }
+  function showSliderBubble(slider, e) {
+    if (sliderBubble.parentElement !== document.body) document.body.appendChild(sliderBubble);
+    sliderBubble.textContent = bubbleText(slider);
+    bubblePos(slider, e ? e.clientX : slider.getBoundingClientRect().left + slider.offsetWidth / 2);
+    sliderBubble.hidden = false;
+    sliderBubble.classList.add('visible');
+    sliderBubbleSlider = slider;
+  }
+  function hideSliderBubble() {
+    sliderBubble.classList.remove('visible');
+    sliderBubble.hidden = true;
+    sliderBubbleSlider = null;
+  }
+
+  const slidingTimers = new WeakMap();
+  // Desktop: only the layer-opacity slider gets the bubble (eraser-
+  // rows have their own chip). Mobile: every slider gets one.
+  const isMobileSliders = window.matchMedia('(max-width: 820px)').matches;
+  const SLIDER_SEL = isMobileSliders
+    ? '.ge-layer-opacity, .ge-eraser-row input[type="range"], .ge-control-row input[type="range"], .ge-adj-row input[type="range"]'
+    : '.ge-layer-opacity';
+
+  container.addEventListener('pointerdown', (e) => {
+    const slider = e.target.closest(SLIDER_SEL);
+    if (!slider) return;
+    const t = slidingTimers.get(slider);
+    if (t) { clearTimeout(t); slidingTimers.delete(slider); }
+    slider.classList.add('is-using');
+    showSliderBubble(slider, e);
+    // Compensate for the leftward-expanding eraser sliders so the
+    // thumb lands at the cursor's X on the new (wider) track. Layer-
+    // opacity doesn't shift left when it grows, so it uses the
+    // browser default.
+    if (slider.matches('.ge-eraser-row input[type="range"]')) {
+      const rect = slider.getBoundingClientRect();
+      const valFrac = Math.max(0, Math.min(1, 1 - (rect.right - e.clientX) / 140));
+      const min = parseFloat(slider.min) || 0;
+      const max = parseFloat(slider.max) || 100;
+      const step = parseFloat(slider.step) || 1;
+      const raw = min + valFrac * (max - min);
+      const stepped = Math.round(raw / step) * step;
+      requestAnimationFrame(() => {
+        slider.value = String(stepped);
+        slider.dispatchEvent(new Event('input', { bubbles: true }));
+        sliderBubble.textContent = bubbleText(slider);
+      });
+    } else {
+      requestAnimationFrame(() => {
+        sliderBubble.textContent = bubbleText(slider);
+      });
+    }
+  }, true);
+  document.addEventListener('pointermove', (e) => {
+    if (!sliderBubbleSlider) return;
+    bubblePos(sliderBubbleSlider, e.clientX);
+    sliderBubble.textContent = bubbleText(sliderBubbleSlider);
+  });
+  const scheduleSliderRelease = (slider) => {
+    if (!slider) return;
+    const old = slidingTimers.get(slider);
+    if (old) clearTimeout(old);
+    const t = setTimeout(() => {
+      slider.classList.remove('is-using');
+      slidingTimers.delete(slider);
+    }, 500);
+    slidingTimers.set(slider, t);
+  };
+  document.addEventListener('pointerup', () => {
+    container.querySelectorAll('input[type="range"].is-using').forEach(scheduleSliderRelease);
+    hideSliderBubble();
+  });
+
+  // ── Click value chip to type a number ──
+  // Replaces the chip with a tiny inline input until blur/Enter,
+  // then writes back to the slider and dispatches `input` so
+  // previews react. Matches the legacy chip AND the pulled-out
+  // `.ge-slider-value` chip so every slider row in the editor is
+  // click-to-type editable.
+  registerDocClickAway((e) => {
+    const chip = e.target.closest(
+      '.ge-eraser-row .ge-slider-value, ' +
+      '.ge-eraser-row label > span[id$="-label"], ' +
+      '.ge-eraser-row > span[id$="-label"], ' +
+      '.ge-adj-row .ge-adj-value'
+    );
+    if (!chip) return;
+    const row = chip.closest('.ge-eraser-row, .ge-adj-row');
+    const slider = row?.querySelector('input[type="range"]');
+    if (!slider) return;
+    e.preventDefault();
+    e.stopPropagation();
+    const numeric = (slider.value ?? '').toString();
+    const inp = document.createElement('input');
+    inp.type = 'text';
+    inp.value = numeric;
+    inp.className = 'ge-slider-edit';
+    chip.style.visibility = 'hidden';
+    row.appendChild(inp);
+    // Position the input over where the chip sits.
+    const crect = chip.getBoundingClientRect();
+    const rrect = row.getBoundingClientRect();
+    inp.style.left = (crect.left - rrect.left) + 'px';
+    inp.style.top = (crect.top - rrect.top - 1) + 'px';
+    inp.style.width = Math.max(40, crect.width + 8) + 'px';
+    inp.focus();
+    inp.select();
+    const commit = () => {
+      const v = parseFloat(inp.value);
+      if (!Number.isNaN(v)) {
+        const min = parseFloat(slider.min) || 0;
+        const max = parseFloat(slider.max) || 100;
+        const clamped = Math.max(min, Math.min(max, v));
+        slider.value = String(clamped);
+        slider.dispatchEvent(new Event('input', { bubbles: true }));
+      }
+      cleanup();
+    };
+    const cleanup = () => {
+      inp.remove();
+      chip.style.visibility = '';
+    };
+    inp.addEventListener('blur', commit);
+    inp.addEventListener('keydown', (ev) => {
+      if (ev.key === 'Enter') { ev.preventDefault(); commit(); }
+      if (ev.key === 'Escape') { ev.preventDefault(); cleanup(); }
+    });
+  });
+}

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

@@ -0,0 +1,107 @@
+/**
+ * Snap-while-dragging: when the move tool drags a layer near another
+ * layer's edge or the canvas centre/edges, gently lock the proposed
+ * (nx, ny) to the nearest target within SNAP_PX.
+ *
+ * The implementation is pure — it takes the layer being moved + the
+ * trial offset + a context describing zoom + the other layers, and
+ * returns the snapped position plus any guides to draw.
+ *
+ * The legacy gallery editor's `_computeSnap` is a one-line wrapper
+ * that builds the context from module state.
+ *
+ * @param {{canvas: HTMLCanvasElement, id: string}} layer
+ *   The layer currently being moved.
+ * @param {number} nx / ny
+ *   Trial offset (top-left) in canvas pixels, before snapping.
+ * @param {{
+ *   zoom:        number,
+ *   canvasW:     number,
+ *   canvasH:     number,
+ *   otherLayers: Array<{visible: boolean, id: string, canvas: HTMLCanvasElement, offset: {x:number, y:number}}>,
+ * }} ctx
+ * @returns {{x: number, y: number, guides: Array}}
+ */
+export function computeSnap(layer, nx, ny, ctx) {
+  const SNAP_PX = 6 / Math.max(ctx.zoom, 0.0001);
+  const cw = ctx.canvasW, ch = ctx.canvasH;
+  const w = layer.canvas.width, h = layer.canvas.height;
+
+  const vTargets = [
+    { x: 0, label: 'canvas-l' },
+    { x: cw, label: 'canvas-r' },
+    { x: cw / 2, label: 'canvas-cx' },
+  ];
+  const hTargets = [
+    { y: 0, label: 'canvas-t' },
+    { y: ch, label: 'canvas-b' },
+    { y: ch / 2, label: 'canvas-cy' },
+  ];
+  const otherLayers = Array.isArray(ctx.otherLayers) ? ctx.otherLayers : [];
+  for (const other of otherLayers) {
+    if (!other.visible || other.id === layer.id) continue;
+    const o = other.offset || { x: 0, y: 0 };
+    const ow = other.canvas.width, oh = other.canvas.height;
+    vTargets.push({ x: o.x,            label: 'layer-l' });
+    vTargets.push({ x: o.x + ow,       label: 'layer-r' });
+    vTargets.push({ x: o.x + ow / 2,   label: 'layer-cx' });
+    hTargets.push({ y: o.y,            label: 'layer-t' });
+    hTargets.push({ y: o.y + oh,       label: 'layer-b' });
+    hTargets.push({ y: o.y + oh / 2,   label: 'layer-cy' });
+  }
+
+  const myEdgesX = { l: nx, cx: nx + w / 2, r: nx + w };
+  const myEdgesY = { t: ny, cy: ny + h / 2, b: ny + h };
+  let bestX = null, bestDx = Infinity;
+  let bestY = null, bestDy = Infinity;
+  for (const [src, val] of Object.entries(myEdgesX)) {
+    for (const t of vTargets) {
+      const d = Math.abs(t.x - val);
+      if (d < SNAP_PX && d < bestDx) {
+        bestDx = d;
+        bestX = { snapTo: t.x, src, target: t };
+      }
+    }
+  }
+  for (const [src, val] of Object.entries(myEdgesY)) {
+    for (const t of hTargets) {
+      const d = Math.abs(t.y - val);
+      if (d < SNAP_PX && d < bestDy) {
+        bestDy = d;
+        bestY = { snapTo: t.y, src, target: t };
+      }
+    }
+  }
+
+  const guides = [];
+  let snappedX = nx, snappedY = ny;
+  if (bestX) {
+    if (bestX.src === 'l') snappedX = bestX.snapTo;
+    else if (bestX.src === 'cx') snappedX = bestX.snapTo - w / 2;
+    else snappedX = bestX.snapTo - w;
+    guides.push({ vertical: true, x: bestX.snapTo });
+  }
+  if (bestY) {
+    if (bestY.src === 't') snappedY = bestY.snapTo;
+    else if (bestY.src === 'cy') snappedY = bestY.snapTo - h / 2;
+    else snappedY = bestY.snapTo - h;
+    guides.push({ vertical: false, y: bestY.snapTo });
+  }
+  return { x: snappedX, y: snappedY, guides };
+}
+
+
+/**
+ * CSS cursor name for each transform-tool handle.
+ *
+ * @param {'tl'|'tr'|'bl'|'br'|'rot'|string} id
+ * @returns {string}
+ */
+export function cursorForHandle(id) {
+  switch (id) {
+    case 'tl': case 'br': return 'nwse-resize';
+    case 'tr': case 'bl': return 'nesw-resize';
+    case 'rot': return 'grab';
+    default: return 'default';
+  }
+}