@fraziym/axoniz 0.1.0

package/dist/web/static/js/editor/tools/transform-drag.js

@@ -0,0 +1,174 @@
+/**
+ * Transform-drag tool — handle drag interactions for the Transform
+ * tool (resize via corner/edge handles, rotation via the rot grip).
+ *
+ * The transform UI runs in TWO modes: the floating popup (W/H/rot
+ * numeric inputs, lives elsewhere) AND direct drag on the canvas
+ * handles. Both ultimately mutate `state.transformPendingW/H/Rot` and
+ * call `reapplyTransform()` to redraw. This module owns the drag
+ * branch.
+ *
+ * The dispatcher in galleryEditor.js calls `tryBegin/tryContinue/
+ * tryEnd` which return `true` when the event was for the transform
+ * tool and was handled (so the dispatcher can short-circuit).
+ *
+ * @param {{
+ *   beginMove:             (e: Event) => void,
+ *   composite:              () => void,
+ *   drawTransformHandles:   () => void,
+ *   reapplyTransform:       () => void,
+ *   getTransformHandle:     (x: number, y: number) => string | null,
+ *   cursorForHandle:        (id: string | null) => string,
+ * }} deps
+ */
+import { state } from '../state.js';
+import { canvasCoords } from '../canvas-coords.js';
+
+export function createTransformDragTool({
+  beginMove, composite, drawTransformHandles, reapplyTransform,
+  getTransformHandle, cursorForHandle,
+}) {
+  return {
+    /**
+     * Called on pointerdown. Returns true if the transform tool handled
+     * the event (the dispatcher should NOT fall through to other tools).
+     */
+    tryBegin(e) {
+      if (!state.transformActive) return false;
+      const coords = canvasCoords(e, state.mainCanvas);
+      state.transformHandle = getTransformHandle(coords.x, coords.y);
+      if (state.transformHandle) {
+        state.transformStartX = coords.x;
+        state.transformStartY = coords.y;
+        // Snapshot offset + size at drag-start so each frame computes
+        // "start + dx" (correct delta) rather than accumulating off the
+        // running offset, which was making top/left grabs drift.
+        const layer = state.transformLayer;
+        const off = state.layerOffsets.get(layer.id) || { x: 0, y: 0 };
+        state.transformStartOffX = off.x;
+        state.transformStartOffY = off.y;
+        state.transformOrigW = layer.canvas.width;
+        state.transformOrigH = layer.canvas.height;
+        return true;
+      }
+      // No corner hit — if click inside the layer's bounding box, act
+      // like Move so the user can drag the layer around without
+      // switching tools.
+      if (state.transformLayer) {
+        const off = state.layerOffsets.get(state.transformLayer.id) || { x: 0, y: 0 };
+        const w = state.transformLayer.canvas.width;
+        const h = state.transformLayer.canvas.height;
+        if (coords.x >= off.x && coords.x <= off.x + w &&
+            coords.y >= off.y && coords.y <= off.y + h) {
+          beginMove(e);
+          return true;
+        }
+      }
+      return false;
+    },
+
+    /**
+     * Called on pointermove. Returns true if handled.
+     *
+     * When transformActive but no handle is grabbed, updates the
+     * hover cursor + pulse. When a handle is grabbed, drives the
+     * resize / rotation pipeline.
+     */
+    tryContinue(e) {
+      if (!state.transformActive) return false;
+      // No drag in progress — just hover-cursor + pulse.
+      if (!state.transformHandle && state.mainCanvas) {
+        const coords = canvasCoords(e, state.mainCanvas);
+        const hovered = getTransformHandle(coords.x, coords.y);
+        state.mainCanvas.style.cursor = hovered ? cursorForHandle(hovered) : 'default';
+        if (hovered !== state.hoveredHandle) {
+          state.hoveredHandle = hovered;
+          composite();
+        }
+        return false; // didn't fully consume the event
+      }
+      if (!state.transformHandle) return false;
+      e.preventDefault();
+      const coords = canvasCoords(e, state.mainCanvas);
+      // Rotation grip — angle measured from the layer's geometric
+      // centre to the cursor. Mirror into the popup if it's open.
+      if (state.transformHandle === 'rot') {
+        const layer = state.transformLayer;
+        const off = state.layerOffsets.get(layer.id) || { x: 0, y: 0 };
+        const cx = off.x + layer.canvas.width / 2;
+        const cy = off.y + layer.canvas.height / 2;
+        const rad = Math.atan2(coords.y - cy, coords.x - cx) + Math.PI / 2;
+        let deg = Math.round((rad * 180) / Math.PI);
+        if (e.shiftKey) deg = Math.round(deg / 15) * 15; // 15° snap
+        while (deg > 180) deg -= 360;
+        while (deg <= -180) deg += 360;
+        state.transformPendingRot = deg;
+        reapplyTransform();
+        if (state.transformPopup) {
+          const rotIn = state.transformPopup.querySelector('#ge-transform-rot');
+          if (rotIn) rotIn.value = String(deg);
+        }
+        return true;
+      }
+      // Resize via corner / edge handle.
+      const dx = coords.x - state.transformStartX;
+      const dy = coords.y - state.transformStartY;
+      const layer = state.transformLayer;
+      let newW = layer.canvas.width;
+      let newH = layer.canvas.height;
+      if (state.transformHandle.includes('r')) newW = state.transformOrigW + dx;
+      if (state.transformHandle.includes('l')) newW = state.transformOrigW - dx;
+      if (state.transformHandle.includes('b')) newH = state.transformOrigH + dy;
+      if (state.transformHandle.includes('t')) newH = state.transformOrigH - dy;
+      // Shift = lock aspect ratio. Use whichever axis moved more
+      // (relative to the original) as the driver.
+      if (e.shiftKey && state.transformOrigW > 0 && state.transformOrigH > 0) {
+        const aspect = state.transformOrigW / state.transformOrigH;
+        const wDelta = Math.abs(newW - state.transformOrigW);
+        const hDelta = Math.abs(newH - state.transformOrigH);
+        if (wDelta >= hDelta) {
+          newH = Math.max(1, Math.round(newW / aspect));
+        } else {
+          newW = Math.max(1, Math.round(newH * aspect));
+        }
+      }
+      newW = Math.max(1, Math.round(newW));
+      newH = Math.max(1, Math.round(newH));
+      // Route through the popup-driven pipeline so popup + drag stay
+      // in sync. Anchor the opposite corner via transformOrigOffset so
+      // handles don't slide while the user drags.
+      state.transformPendingW = newW;
+      state.transformPendingH = newH;
+      const anchorOffX = state.transformStartOffX +
+        (state.transformHandle.includes('l') ? (state.transformOrigW - newW) : 0);
+      const anchorOffY = state.transformStartOffY +
+        (state.transformHandle.includes('t') ? (state.transformOrigH - newH) : 0);
+      state.transformOrigOffset = {
+        x: anchorOffX + newW / 2 - state.transformOrigW / 2,
+        y: anchorOffY + newH / 2 - state.transformOrigH / 2,
+      };
+      reapplyTransform();
+      // Mirror the new W/H into the popup if it's open.
+      if (state.transformPopup) {
+        const wIn = state.transformPopup.querySelector('#ge-transform-w');
+        const hIn = state.transformPopup.querySelector('#ge-transform-h');
+        if (wIn) wIn.value = String(state.transformPendingFlipH ? -newW : newW);
+        if (hIn) hIn.value = String(state.transformPendingFlipV ? -newH : newH);
+      }
+      return true;
+    },
+
+    /**
+     * Called on pointerup. Returns true if handled.
+     */
+    tryEnd() {
+      if (!(state.transformActive && state.transformHandle)) return false;
+      state.transformHandle = null;
+      state.transformOrigW = state.transformLayer?.canvas.width || 0;
+      state.transformOrigH = state.transformLayer?.canvas.height || 0;
+      composite();
+      drawTransformHandles();
+      return true;
+    },
+  };
+}

package/dist/web/static/js/editor/tools/transform-handles.js

@@ -0,0 +1,271 @@
+/**
+ * Transform-tool handle rendering + hit-testing + overlay sync.
+ *
+ * Lives separately from `transform-drag.js` (which owns the drag
+ * STATE MACHINE) because these three helpers are pure geometry that
+ * happens to read shared state — they don't track in-progress drags,
+ * they just paint and hit-test.
+ *
+ *  - `syncOverlay(margin)`  positions the overlay canvas + sizes its
+ *                           bitmap based on the main canvas + zoom.
+ *  - `drawHandles(margin)`  draws the rotated bounding outline + 4
+ *                           corner handles + the rotation knob (with
+ *                           hover / active visual states).
+ *  - `getHandleAt(x, y)`    returns the handle id under (x, y), or
+ *                           null. Geometry MUST mirror `drawHandles`
+ *                           exactly or the user grabs phantom points.
+ *
+ * No event listeners attached here — the dispatcher in
+ * editor/tools/transform-drag.js calls `getHandleAt` and routes
+ * pointer events.
+ */
+import { state } from '../state.js';
+
+/**
+ * Position the transform overlay canvas + size its backing bitmap.
+ * Margin is the image-space slack each side so handles can render
+ * outside the main canvas (matches _TRANSFORM_OVERLAY_MARGIN in
+ * galleryEditor.js — kept as a parameter so this module has no
+ * dependency on a magic number defined elsewhere).
+ */
+export function syncOverlay(margin) {
+  if (!state.transformOverlay || !state.mainCanvas) return;
+  if (!state.transformActive) {
+    state.transformOverlay.style.display = 'none';
+    return;
+  }
+  const W = state.mainCanvas.width + 2 * margin;
+  const H = state.mainCanvas.height + 2 * margin;
+  if (state.transformOverlay.width !== W) state.transformOverlay.width = W;
+  if (state.transformOverlay.height !== H) state.transformOverlay.height = H;
+  // Overlay must scale with state.zoom so its handles render at the
+  // SAME on-screen size as the main canvas content. Without this, the
+  // overlay renders at full bitmap size while main canvas shrinks
+  // (zoomed-out), making handles look massive.
+  state.transformOverlay.style.display = '';
+  state.transformOverlay.style.position = 'absolute';
+  state.transformOverlay.style.width  = (W * state.zoom) + 'px';
+  state.transformOverlay.style.height = (H * state.zoom) + 'px';
+  state.transformOverlay.style.pointerEvents = 'none';
+  state.transformOverlay.style.zIndex = '5';
+  // Position the overlay at the main canvas's LAYOUT position
+  // (offsetLeft/Top — unaffected by CSS transforms), shifted up-left by
+  // the overlay's `margin` image-px of handle slack. Then SHARE the
+  // canvas's transform (the pan handler writes the same translate3d to
+  // both canvas + overlay), so pan moves them together. Reading the
+  // layout offset (not getBoundingClientRect, which includes the pan
+  // transform) is what avoids the double-pan "bounce".
+  state.transformOverlay.style.left = Math.round(state.mainCanvas.offsetLeft - margin * state.zoom) + 'px';
+  state.transformOverlay.style.top  = Math.round(state.mainCanvas.offsetTop  - margin * state.zoom) + 'px';
+  state.transformOverlay.style.transform = state.mainCanvas.style.transform || 'none';
+}
+
+
+/**
+ * Compute the on-screen position of the rotation knob given the
+ * layer's bbox center + rotation. The knob normally sits OUTSIDE the
+ * top edge of the rotated layer; if that would land beyond the canvas
+ * viewport, flip it INSIDE.
+ *
+ * Returned by `_knobPosition` and shared by drawHandles + getHandleAt
+ * so both compute the same point.
+ */
+function knobPosition(cxh, cyh, rotRad, baseInnerR, rotOffset) {
+  let rotInside = false;
+  const outsideR = baseInnerR + rotOffset;
+  const knobLocalX = cxh + Math.sin(rotRad) * outsideR;
+  const knobLocalY = cyh - Math.cos(rotRad) * outsideR;
+  // Primary check: anything drawn outside the main canvas's pixel
+  // buffer is invisible (canvas operations clip silently).
+  if (
+    knobLocalX < 0 || knobLocalY < 0 ||
+    knobLocalX > state.mainCanvas.width || knobLocalY > state.mainCanvas.height
+  ) {
+    rotInside = true;
+  }
+  // Secondary check: even if the knob is inside the canvas bitmap, the
+  // viewport may have scrolled the canvas such that the knob falls
+  // outside the visible canvas-area window.
+  try {
+    const area = state.container && state.container.querySelector('.ge-canvas-area');
+    if (area && !rotInside) {
+      const aRect = area.getBoundingClientRect();
+      const mRect = state.mainCanvas.getBoundingClientRect();
+      const scaleX = mRect.width / state.mainCanvas.width;
+      const scaleY = mRect.height / state.mainCanvas.height;
+      const knobClientX = mRect.left + knobLocalX * scaleX;
+      const knobClientY = mRect.top + knobLocalY * scaleY;
+      if (knobClientY < aRect.top + 6) rotInside = true;
+      if (knobClientX < aRect.left + 6 || knobClientX > aRect.right - 6) rotInside = true;
+    }
+  } catch {}
+  const innerR = rotInside ? Math.max(4, baseInnerR - rotOffset) : baseInnerR;
+  const rotR = rotInside ? innerR : baseInnerR + rotOffset;
+  return {
+    rotInside,
+    innerR,
+    rotX: cxh + Math.sin(rotRad) * rotR,
+    rotY: cyh - Math.cos(rotRad) * rotR,
+  };
+}
+
+
+/**
+ * Draw the rotated bounding outline + 4 corner handles + the rotation
+ * knob into the overlay canvas. The overlay is translated by `margin`
+ * so image (0,0) maps to overlay (margin, margin).
+ */
+export function drawHandles(margin) {
+  if (!state.transformActive || !state.transformLayer) return;
+  syncOverlay(margin);
+  if (!state.transformOverlayCtx) return;
+  const layer = state.transformLayer;
+  const off = state.layerOffsets.get(layer.id) || { x: 0, y: 0 };
+  const w = layer.canvas.width;
+  const h = layer.canvas.height;
+  const ctx = state.transformOverlayCtx;
+  // Clear + shift drawing by margin so image (0,0) maps to overlay (M,M).
+  ctx.clearRect(0, 0, state.transformOverlay.width, state.transformOverlay.height);
+  ctx.save();
+  ctx.translate(margin, margin);
+  // Zoom-corrected handle size + stroke so they stay readable at any zoom.
+  const sz = 10 / state.zoom;
+  const stroke = 1.5 / state.zoom;
+
+  // Pre-rotation rectangle dims (what the user sees the layer as).
+  // Falls back to layer bbox before any popup values exist.
+  const preW = state.transformPendingW || w;
+  const preH = state.transformPendingH || h;
+  const cxBox = off.x + w / 2;
+  const cyBox = off.y + h / 2;
+  const rotRadBox = ((state.transformPendingRot || 0) * Math.PI) / 180;
+  const cosBox = Math.cos(rotRadBox);
+  const sinBox = Math.sin(rotRadBox);
+  const rotPt = (dx, dy) => ({
+    x: cxBox + dx * cosBox - dy * sinBox,
+    y: cyBox + dx * sinBox + dy * cosBox,
+  });
+  const tl = rotPt(-preW / 2, -preH / 2);
+  const tr = rotPt( preW / 2, -preH / 2);
+  const br = rotPt( preW / 2,  preH / 2);
+  const bl = rotPt(-preW / 2,  preH / 2);
+
+  // Outline of the rotated rectangle — solid white inner line with a
+  // thin black halo for contrast on light AND dark backgrounds.
+  const drawRectOutline = () => {
+    ctx.beginPath();
+    ctx.moveTo(tl.x, tl.y);
+    ctx.lineTo(tr.x, tr.y);
+    ctx.lineTo(br.x, br.y);
+    ctx.lineTo(bl.x, bl.y);
+    ctx.closePath();
+    ctx.stroke();
+  };
+  ctx.lineWidth = 1 / state.zoom;
+  ctx.strokeStyle = 'rgba(0, 0, 0, 0.45)';
+  ctx.setLineDash([6 / state.zoom, 4 / state.zoom]);
+  ctx.lineDashOffset = 1 / state.zoom;
+  drawRectOutline();
+  ctx.strokeStyle = '#fff';
+  ctx.lineDashOffset = 0;
+  drawRectOutline();
+  ctx.setLineDash([]);
+
+  // Corner handles + rotation knob anchored to the rotated layer's
+  // top-center (not bbox top), so the knob stays attached to the
+  // visible content as it spins.
+  const rotOffset = 24 / state.zoom;
+  const cxh = off.x + w / 2;
+  const cyh = off.y + h / 2;
+  const rotRad = ((state.transformPendingRot || 0) * Math.PI) / 180;
+  const baseInnerR = (state.transformPendingH || h) / 2;
+  const knob = knobPosition(cxh, cyh, rotRad, baseInnerR, rotOffset);
+  // Tether line collapses to a point when knob is inside the layer.
+  const drawTether = !knob.rotInside;
+  const innerX = cxh + Math.sin(rotRad) * baseInnerR;
+  const innerY = cyh - Math.cos(rotRad) * baseInnerR;
+  const corners = [
+    { x: tl.x, y: tl.y, id: 'tl' },
+    { x: tr.x, y: tr.y, id: 'tr' },
+    { x: br.x, y: br.y, id: 'br' },
+    { x: bl.x, y: bl.y, id: 'bl' },
+    { x: knob.rotX, y: knob.rotY, id: 'rot' },
+  ];
+  if (drawTether) {
+    ctx.beginPath();
+    ctx.moveTo(innerX, innerY);
+    ctx.lineTo(knob.rotX, knob.rotY);
+    ctx.strokeStyle = 'rgba(255, 255, 255, 0.7)';
+    ctx.lineWidth = 1 / state.zoom;
+    ctx.stroke();
+  }
+  for (const c of corners) {
+    const active = c.id === state.transformHandle;
+    const hovered = !active && c.id === state.hoveredHandle;
+    const radius = (active ? sz * 0.75 : hovered ? sz * 0.6 : sz / 2);
+    ctx.beginPath();
+    ctx.arc(c.x, c.y, radius, 0, Math.PI * 2);
+    ctx.fillStyle = active ? '#e06c75' : hovered ? '#ffd' : '#fff';
+    ctx.fill();
+    ctx.lineWidth = stroke;
+    ctx.strokeStyle = active ? '#fff' : 'rgba(0, 0, 0, 0.5)';
+    ctx.stroke();
+    if (hovered) {
+      // Subtle red ring around the hovered handle for visual feedback.
+      ctx.beginPath();
+      ctx.arc(c.x, c.y, radius + 2 / state.zoom, 0, Math.PI * 2);
+      ctx.strokeStyle = 'rgba(224, 108, 117, 0.7)';
+      ctx.lineWidth = stroke;
+      ctx.stroke();
+    }
+  }
+  ctx.restore();
+}
+
+
+/**
+ * Hit-test (x, y) against the transform handles. Returns the handle
+ * id ('tl' | 'tr' | 'br' | 'bl' | 'rot') or null.
+ *
+ * Geometry MUST mirror `drawHandles` exactly, otherwise the user
+ * grabs phantom points.
+ */
+export function getHandleAt(x, y) {
+  if (!state.transformLayer) return null;
+  const layer = state.transformLayer;
+  const off = state.layerOffsets.get(layer.id) || { x: 0, y: 0 };
+  const w = layer.canvas.width;
+  const h = layer.canvas.height;
+  const threshold = 8 / state.zoom;
+  const rotOffset = 24 / state.zoom;
+  const cxh = off.x + w / 2;
+  const cyh = off.y + h / 2;
+  const rotRad = ((state.transformPendingRot || 0) * Math.PI) / 180;
+  const baseInnerR = (state.transformPendingH || h) / 2;
+  const knob = knobPosition(cxh, cyh, rotRad, baseInnerR, rotOffset);
+
+  // Rotate corners around centre — must match drawHandles.
+  const preW = state.transformPendingW || w;
+  const preH = state.transformPendingH || h;
+  const cosA = Math.cos(rotRad);
+  const sinA = Math.sin(rotRad);
+  const rotCorner = (dx, dy) => ({
+    x: cxh + dx * cosA - dy * sinA,
+    y: cyh + dx * sinA + dy * cosA,
+  });
+  const tlH = rotCorner(-preW / 2, -preH / 2);
+  const trH = rotCorner( preW / 2, -preH / 2);
+  const brH = rotCorner( preW / 2,  preH / 2);
+  const blH = rotCorner(-preW / 2,  preH / 2);
+  const handles = [
+    { x: tlH.x,    y: tlH.y,    id: 'tl' },
+    { x: trH.x,    y: trH.y,    id: 'tr' },
+    { x: brH.x,    y: brH.y,    id: 'br' },
+    { x: blH.x,    y: blH.y,    id: 'bl' },
+    { x: knob.rotX, y: knob.rotY, id: 'rot' },
+  ];
+  for (const c of handles) {
+    if (Math.abs(x - c.x) < threshold && Math.abs(y - c.y) < threshold) return c.id;
+  }
+  return null;
+}