@masters-union/union-stack 0.3.12 → 0.3.14

package/dist/picker.js

@@ -660,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;
@@ -673,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":
@@ -874,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);
@@ -893,43 +891,44 @@ 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;
@@ -964,28 +963,28 @@ var ImageEditor = class {
   }
   // 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 s = this.displayScale || 1;
-    const wImg = Math.max(1, Math.round(this.cropRect.w / s));
-    const hImg = Math.max(1, Math.round(this.cropRect.h / s));
+    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 pixel dimension. Anchored
-  // at the frame's current top-left and clamped to the canvas + the min size.
+  // 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 s = this.displayScale || 1;
     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.displayCanvas.width - this.cropRect.x;
-      this.cropRect = { ...this.cropRect, w: clamp(Math.round(valImg * s), MIN_CROP, maxW) };
+      const maxW = this.working.width - this.cropRect.x;
+      this.cropRect = { ...this.cropRect, w: clamp(valImg, min, maxW) };
     } else {
-      const maxH = this.displayCanvas.height - this.cropRect.y;
-      this.cropRect = { ...this.cropRect, h: clamp(Math.round(valImg * s), MIN_CROP, maxH) };
+      const maxH = this.working.height - this.cropRect.y;
+      this.cropRect = { ...this.cropRect, h: clamp(valImg, min, maxH) };
     }
     this.updateCropBox();
   }
@@ -1008,16 +1007,35 @@ 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) ----------------------------------------------
@@ -1035,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;
@@ -1057,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;
@@ -1126,6 +1144,7 @@ var ImageEditor = class {
   // ---- apply --------------------------------------------------------------
   async applyAndClose() {
     this.applyBtn.disabled = true;
+    if (this.mode === "crop") this.applyCrop();
     try {
       const file = await this.exportFile();
       this.opts.onApply(file);
@@ -1384,10 +1403,10 @@ var Picker = class {
       this.$urlSource = this.renderUrlSource();
       body.appendChild(this.$urlSource);
     }
-    this.activateSource(sources[0] ?? "device");
     this.$list = el2("div", "us-file-list");
     body.appendChild(this.$list);
     panel.appendChild(body);
+    this.activateSource(sources[0] ?? "device");
     const autoUpload = this.opts.autoUpload === true;
     const actions = el2("div", "us-actions");
     this.$summary = el2("div", "us-actions-summary", "");