@masters-union/union-stack 0.3.11 → 0.3.13

package/dist/picker.js

@@ -528,6 +528,26 @@ var BASE_CSS = `
 .us-tool svg { width: 13px; height: 13px; }
 .us-tool-spacer { flex: 1; }
 
+/* Crop dimension inputs \u2014 live W\xD7H readout, editable for free-form crops. */
+.us-crop-dims {
+  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
+  padding: 10px 16px 0;
+}
+.us-crop-dims[hidden] { display: none; }
+.us-crop-dims-label {
+  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
+  text-transform: uppercase; color: var(--us-muted);
+}
+.us-crop-dim-input {
+  width: 76px; appearance: none; text-align: center;
+  background: var(--us-overlay); border: 1px solid var(--us-border-strong);
+  border-radius: 8px; padding: 5px 8px; min-height: 30px;
+  font: inherit; font-size: 12px; color: var(--us-fg);
+}
+.us-crop-dim-input:focus { outline: none; border-color: var(--us-primary); }
+.us-crop-dim-input:read-only { opacity: 0.55; cursor: default; }
+.us-crop-dims-x, .us-crop-dims-unit { color: var(--us-muted); font-size: 12px; }
+
 .us-editor-footer {
   display: flex; gap: 8px; justify-content: flex-end;
   padding: 12px 16px;
@@ -640,8 +660,6 @@ var ImageEditor = class {
   constructor(opts) {
     this.opts = opts;
     this.cropBox = null;
-    // What's currently rendered to the user, sized to fit MAX_DISPLAY.
-    this.displayScale = 1;
     // Tracks whether the working canvas has transparency (post-circle), so
     // export() can pick PNG vs JPEG correctly.
     this.hasAlpha = false;
@@ -653,12 +671,13 @@ var ImageEditor = class {
     this.dragStart = null;
     this.onPointerMove = (e) => {
       if (!this.dragKind || !this.dragStart || !this.cropRect) return;
-      const dx = e.clientX - this.dragStart.px;
-      const dy = e.clientY - this.dragStart.py;
+      const m = this.canvasMetrics();
+      const dx = (e.clientX - this.dragStart.px) / (m.scaleX || 1);
+      const dy = (e.clientY - this.dragStart.py) / (m.scaleY || 1);
       const start = this.dragStart.rect;
-      const maxW = this.displayCanvas.width;
-      const maxH = this.displayCanvas.height;
-      const min = MIN_CROP;
+      const maxW = this.working.width;
+      const maxH = this.working.height;
+      const min = this.minCropImg();
       if (this.aspect && this.dragKind !== "move") {
         switch (this.dragKind) {
           case "se":
@@ -773,6 +792,16 @@ var ImageEditor = class {
     this.displayCanvas.className = "us-editor-canvas";
     this.canvasWrap.appendChild(this.displayCanvas);
     this.root.appendChild(this.canvasWrap);
+    this.cropDims = el("div", "us-crop-dims");
+    this.cropDims.hidden = true;
+    this.widthInput = this.makeDimInput("Crop width in pixels", "w");
+    this.heightInput = this.makeDimInput("Crop height in pixels", "h");
+    this.cropDims.appendChild(el("span", "us-crop-dims-label", "Crop size"));
+    this.cropDims.appendChild(this.widthInput);
+    this.cropDims.appendChild(el("span", "us-crop-dims-x", "\xD7"));
+    this.cropDims.appendChild(this.heightInput);
+    this.cropDims.appendChild(el("span", "us-crop-dims-unit", "px"));
+    this.root.appendChild(this.cropDims);
     const toolbar = el("div", "us-editor-toolbar");
     this.cropTool = makeTool("Crop", ICON.crop);
     this.cropTool.onclick = () => this.toggleCropMode();
@@ -844,7 +873,6 @@ var ImageEditor = class {
     const dh = Math.max(1, Math.round(wh * scale));
     this.displayCanvas.width = dw;
     this.displayCanvas.height = dh;
-    this.displayScale = scale;
     const ctx = this.displayCanvas.getContext("2d");
     if (!ctx) return;
     ctx.clearRect(0, 0, dw, dh);
@@ -863,45 +891,52 @@ var ImageEditor = class {
     this.mode = "crop";
     this.cropTool.dataset.active = "true";
     this.cropTool.innerHTML = `${ICON.check} <span>Apply crop</span>`;
-    const dw = this.displayCanvas.width;
-    const dh = this.displayCanvas.height;
+    const iw = this.working.width;
+    const ih = this.working.height;
     if (this.aspect) {
       const a = this.aspect;
-      let w = dw;
+      const minImg = this.minCropImg();
+      let w = iw;
       let h = w / a;
-      if (h > dh) {
-        h = dh;
+      if (h > ih) {
+        h = ih;
         w = h * a;
       }
       w = w * 0.9;
       h = w / a;
-      if (w < MIN_CROP) {
-        w = MIN_CROP;
+      if (w < minImg) {
+        w = minImg;
         h = w / a;
       }
-      if (h < MIN_CROP) {
-        h = MIN_CROP;
+      if (h < minImg) {
+        h = minImg;
         w = h * a;
       }
-      if (w > dw) {
-        w = dw;
+      if (w > iw) {
+        w = iw;
         h = w / a;
       }
-      if (h > dh) {
-        h = dh;
+      if (h > ih) {
+        h = ih;
         w = h * a;
       }
       this.cropRect = {
-        x: Math.round((dw - w) / 2),
-        y: Math.round((dh - h) / 2),
+        x: Math.round((iw - w) / 2),
+        y: Math.round((ih - h) / 2),
         w,
         h
       };
     } else {
-      const inset = Math.round(Math.min(dw, dh) * 0.1);
-      this.cropRect = { x: inset, y: inset, w: dw - inset * 2, h: dh - inset * 2 };
+      const inset = Math.round(Math.min(iw, ih) * 0.1);
+      this.cropRect = { x: inset, y: inset, w: iw - inset * 2, h: ih - inset * 2 };
     }
     this.renderCropBox();
+    const locked = this.aspect !== null;
+    this.widthInput.readOnly = locked;
+    this.heightInput.readOnly = locked;
+    this.cropDims.dataset.locked = locked ? "true" : "false";
+    this.cropDims.hidden = false;
+    this.syncCropDimsInputs();
   }
   exitCropMode() {
     this.mode = "none";
@@ -912,6 +947,46 @@ var ImageEditor = class {
       this.cropBox.remove();
       this.cropBox = null;
     }
+    this.cropDims.hidden = true;
+  }
+  // Build a numeric crop-dimension input. `axis` selects which side it edits.
+  makeDimInput(ariaLabel, axis) {
+    const input = document.createElement("input");
+    input.type = "number";
+    input.min = "1";
+    input.inputMode = "numeric";
+    input.className = "us-crop-dim-input";
+    input.setAttribute("aria-label", ariaLabel);
+    input.addEventListener("input", () => this.onDimInput(axis));
+    input.addEventListener("change", () => this.syncCropDimsInputs());
+    return input;
+  }
+  // Push the current crop frame size (in image/output pixels) into the inputs,
+  // skipping whichever the user is actively editing so we don't fight typing.
+  // cropRect is already in image px, so this is a direct read.
+  syncCropDimsInputs() {
+    if (!this.cropRect || !this.widthInput || !this.heightInput) return;
+    const wImg = Math.max(1, Math.round(this.cropRect.w));
+    const hImg = Math.max(1, Math.round(this.cropRect.h));
+    if (document.activeElement !== this.widthInput) this.widthInput.value = String(wImg);
+    if (document.activeElement !== this.heightInput) this.heightInput.value = String(hImg);
+  }
+  // Free-form only: resize the crop frame from a typed output-pixel dimension.
+  // Anchored at the frame's current top-left and clamped to the image + min size.
+  onDimInput(axis) {
+    if (this.aspect !== null || !this.cropRect) return;
+    const input = axis === "w" ? this.widthInput : this.heightInput;
+    const valImg = parseInt(input.value, 10);
+    if (!Number.isFinite(valImg) || valImg <= 0) return;
+    const min = this.minCropImg();
+    if (axis === "w") {
+      const maxW = this.working.width - this.cropRect.x;
+      this.cropRect = { ...this.cropRect, w: clamp(valImg, min, maxW) };
+    } else {
+      const maxH = this.working.height - this.cropRect.y;
+      this.cropRect = { ...this.cropRect, h: clamp(valImg, min, maxH) };
+    }
+    this.updateCropBox();
   }
   renderCropBox() {
     if (!this.cropRect) return;
@@ -932,16 +1007,36 @@ var ImageEditor = class {
     this.cropBox = box;
     this.updateCropBox();
   }
+  // The crop rect is stored in IMAGE (working-canvas / output) pixels — the same
+  // space we ultimately crop in — so the on-screen selection always matches the
+  // pixels we extract, regardless of how CSS scales the displayed canvas. These
+  // metrics convert between image px and the canvas's live on-screen size.
+  canvasMetrics() {
+    const c = this.displayCanvas.getBoundingClientRect();
+    const w = this.canvasWrap.getBoundingClientRect();
+    return {
+      scaleX: c.width / (this.working.width || 1),
+      // CSS px per image px
+      scaleY: c.height / (this.working.height || 1),
+      offX: c.left - w.left,
+      // canvas offset inside wrap
+      offY: c.top - w.top
+    };
+  }
+  // Minimum crop size in IMAGE px, sized so the handles stay ~MIN_CROP px apart
+  // on screen no matter how zoomed the canvas is.
+  minCropImg() {
+    const { scaleX } = this.canvasMetrics();
+    return scaleX > 0 ? MIN_CROP / scaleX : MIN_CROP;
+  }
   updateCropBox() {
     if (!this.cropBox || !this.cropRect) return;
-    const canvasRect = this.displayCanvas.getBoundingClientRect();
-    const wrapRect = this.canvasWrap.getBoundingClientRect();
-    const left = canvasRect.left - wrapRect.left + this.cropRect.x;
-    const top = canvasRect.top - wrapRect.top + this.cropRect.y;
-    this.cropBox.style.left = `${left}px`;
-    this.cropBox.style.top = `${top}px`;
-    this.cropBox.style.width = `${this.cropRect.w}px`;
-    this.cropBox.style.height = `${this.cropRect.h}px`;
+    const m = this.canvasMetrics();
+    this.cropBox.style.left = `${m.offX + this.cropRect.x * m.scaleX}px`;
+    this.cropBox.style.top = `${m.offY + this.cropRect.y * m.scaleY}px`;
+    this.cropBox.style.width = `${this.cropRect.w * m.scaleX}px`;
+    this.cropBox.style.height = `${this.cropRect.h * m.scaleY}px`;
+    this.syncCropDimsInputs();
   }
   // ---- drag handlers (crop) ----------------------------------------------
   beginDrag(e, kind) {
@@ -958,12 +1053,13 @@ var ImageEditor = class {
   // the ratio exact; both are clamped so the rect stays on-canvas.
   lockedRectFromDrag(anchorX, anchorY, desiredW, signX, signY) {
     const a = this.aspect;
-    const maxW = this.displayCanvas.width;
-    const maxH = this.displayCanvas.height;
-    let w = Math.max(MIN_CROP, desiredW);
+    const maxW = this.working.width;
+    const maxH = this.working.height;
+    const min = this.minCropImg();
+    let w = Math.max(min, desiredW);
     let h = w / a;
-    if (h < MIN_CROP) {
-      h = MIN_CROP;
+    if (h < min) {
+      h = min;
       w = h * a;
     }
     const roomX = signX > 0 ? maxW - anchorX : anchorX;
@@ -980,11 +1076,10 @@ var ImageEditor = class {
       this.exitCropMode();
       return;
     }
-    const s = this.displayScale;
-    const sx = Math.round(this.cropRect.x / s);
-    const sy = Math.round(this.cropRect.y / s);
-    const sw = Math.round(this.cropRect.w / s);
-    const sh = Math.round(this.cropRect.h / s);
+    const sx = clamp(Math.round(this.cropRect.x), 0, this.working.width - 1);
+    const sy = clamp(Math.round(this.cropRect.y), 0, this.working.height - 1);
+    const sw = clamp(Math.round(this.cropRect.w), 1, this.working.width - sx);
+    const sh = clamp(Math.round(this.cropRect.h), 1, this.working.height - sy);
     const next = document.createElement("canvas");
     next.width = sw;
     next.height = sh;