cropt2 2.0.0 → 2.0.2

package/README.md

@@ -1,23 +1,30 @@
-# Cropt - lightweight JavaScript image cropper
+# Cropt v2 - lightweight JavaScript image cropper
+[Github](https://github.com/mindflowgo/cropt/)
+
+Originally based on [Foliotek/Croppie](https://github.com/Foliotek/Croppie), but rewritten as a modern ES module with a simpler API, higher quality image scaling, and numerous other improvements by 
+[Devtheorem](https://devtheorem.github.io/cropt/).
+
+It was extensively enhanced (but backwards compatible with v1) to include adjustable viewport, rotation, 
+keyboard handling, and various optimizations and bug fixes. And packed to work as browser install, commonJS, 
+esm package, etc.
 
-Originally based on [Foliotek/Croppie](https://github.com/Foliotek/Croppie), but rewritten as a modern ES module with a simpler API, higher quality image scaling, and numerous other improvements. 
 
 ## Installation
 
 ```
-npm install cropt
+npm install cropt2
 ```
 
 ## Running Demo
 
 ```
-npm run prepare
+npm run build
 npm start
 ```
 
 ## Usage
 
-1. Include the `src/cropt.css` stylesheet on your page.
+1. Include the `cropt.min.css` stylesheet on your page.
 2. Add a `div` element to your HTML to hold the Cropt instance.
 3. Import Cropt and bind it to an image:
 
@@ -130,17 +137,7 @@ Set a rotation factor (0, 90, 180, 270) to the image.
 
 ## Visibility and binding
 
-Cropt is dependent on its container being visible when the bind method is called. This can be an issue when your component is inside a modal that isn't shown. Consider the Bootstrap modal, for example:
-
-```javascript
-const cropEl = document.getElementById('my-cropt');
-const c = new Cropt(cropEl, opts);
-const myModal = document.getElementById('my-modal');
-
-myModal.addEventListener('shown.bs.modal', () => {
-    c.bind("my/image.jpg");
-});
-```
+Cropt is dependent on its container being **visible** when the bind method is called. This can be an issue when your component is inside a modal or block that isn't shown (ex. style = display:none).
 
 If you have issues getting the correct result, and your Cropt instance is shown inside a modal, try taking it out of the modal and see if the issue persists. If not, make sure that your bind method is called after the modal finishes opening.
 
@@ -154,11 +151,10 @@ Cropt is tested in the following browsers:
 * Safari
 * Chrome
 * Edge
+* Mobile Safari
 
 Cropt should also work in any other modern browser using an engine based on Gecko, WebKit, or Chromium.
 
 ## License
 
 MIT
-
-

package/dist/cropt.d.ts

@@ -0,0 +1,107 @@
+declare global {
+    interface Blob {
+        width?: number;
+        height?: number;
+    }
+}
+type RecursivePartial<T> = {
+    [P in keyof T]?: RecursivePartial<T[P]>;
+};
+export interface CroptOptions {
+    mouseWheelZoom: "off" | "on" | "ctrl";
+    viewport: {
+        width: number;
+        height: number;
+        borderRadius: string;
+    };
+    zoomerInputClass: string;
+    enableZoomSlider?: boolean;
+    enableKeypress?: boolean;
+    resizeBars?: boolean;
+    enableRotateBtns?: boolean;
+    transparencyColor?: string;
+}
+declare class Cropt {
+    #private;
+    element: HTMLElement;
+    elements: {
+        boundary: HTMLDivElement;
+        viewport: HTMLDivElement;
+        preview: HTMLImageElement;
+        overlay: HTMLDivElement;
+        controls: HTMLDivElement;
+        resizeHandleRight: HTMLDivElement;
+        resizeHandleBottom: HTMLDivElement;
+        toolBar: HTMLDivElement;
+        zoomer: HTMLInputElement;
+        rotateLeft: HTMLButtonElement;
+        rotateRight: HTMLButtonElement;
+    };
+    options: CroptOptions;
+    constructor(element: HTMLElement, options: RecursivePartial<CroptOptions>);
+    /**
+     * Bind an image from an src string.
+     * Passing in preset transform/viewport parameters will restore to those
+     * Returns a Promise which resolves when the image has been loaded and state is initialized.
+     */
+    bind(src: string, preset?: number | {
+        transform: {
+            x: number;
+            y: number;
+            scale: number;
+            rotate: number;
+            origin: {
+                x: number;
+                y: number;
+            };
+        };
+        viewport: {
+            width: number;
+            height: number;
+            borderRadius: string;
+        };
+    }): Promise<void>;
+    /**
+     * Returns:
+     * crop { x, y, width, height }: the crop rectangle for image cropping outside Cropt
+     * transform: adjustments to re-create placement of image in viewport (ex. continue editing)
+     * viewport: the active viewport size + borderRadius used (in case it's system adjusted)
+     */
+    get(): {
+        crop: {
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+        };
+        transform: {
+            x: number;
+            y: number;
+            scale: number;
+            rotate: number;
+            origin: {
+                x: number;
+                y: number;
+            };
+        };
+        viewport: {
+            width: number;
+            height: number;
+            borderRadius: string;
+        };
+    };
+    /**
+     * Returns a Promise resolving to an HTMLCanvasElement object for the cropped image.
+     * If size is POSTIVE: the image will be SCALED with its longest side set to size.
+     * If size is NEGATIVE: it will only SHRINK it if it exceeds size (never enlarge it)
+     * Otherwise (size = null), actual-size cropped area is returned
+     */
+    toCanvas(size?: number | null, type?: string): Promise<HTMLCanvasElement>;
+    toBlob(size?: number | null, type?: string, quality?: number): Promise<Blob>;
+    refresh(): void;
+    setOptions(options: RecursivePartial<CroptOptions>): void;
+    setZoom(value: number): void;
+    setRotation(degrees: number): Promise<void>;
+    destroy(): void;
+}
+export default Cropt;

package/dist/cropt.esm.min.js

@@ -0,0 +1 @@
+var _Cropt_instances,_Cropt_maxZoom,_Cropt_viewportMinWidth,_Cropt_viewportMinHeight,_Cropt_scale,_Cropt_rotation,_Cropt_clearRotationBlob,_Cropt_transparencyColor,_Cropt_abortController,_Cropt_updateOverlayDebounced,_Cropt_getPoints,_Cropt_rotateImage,_Cropt_transformPreview,_Cropt_setViewportCss,_Cropt_setupControlOverlay,_Cropt_updateControlHandlePositions,_Cropt_initControlHandlers,_Cropt_getUnscaledCanvas,_Cropt_getCanvas,_Cropt_getVirtualBoundaries,_Cropt_assignTransformCoordinates,_Cropt_initDraggable,_Cropt_initializeZoom,_Cropt_onZoom,_Cropt_initializeRotate,_Cropt_replaceImage,_Cropt_setPreviewAttributes,_Cropt_setDragState,_Cropt_isVisible,_Cropt_updateOverlay,_Cropt_initPropertiesFromImage,_Cropt_updateCenterPoint,_Cropt_updateZoomLimits,_Cropt_centerImage,__classPrivateFieldSet=this&&this.__classPrivateFieldSet||function(t,e,i,s,o){if("m"===s)throw new TypeError("Private method is not writable");if("a"===s&&!o)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof e?t!==e||!o:!e.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===s?o.call(t,i):o?o.value=i:e.set(t,i),i},__classPrivateFieldGet=this&&this.__classPrivateFieldGet||function(t,e,i,s){if("a"===i&&!s)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof e?t!==e||!s:!e.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===i?s:"a"===i?s.call(t):s?s.value:e.get(t)};function debounce(t,e){let i;return(...s)=>{clearTimeout(i),i=setTimeout(()=>t(...s),e)}}function loadImage(t){return new Promise((e,i)=>{const s=new Image;s.onload=()=>{e(s)},s.onerror=i,s.src=t})}function getInitialElements(){return{boundary:document.createElement("div"),viewport:document.createElement("div"),preview:document.createElement("img"),overlay:document.createElement("div"),controls:document.createElement("div"),resizeHandleRight:document.createElement("div"),resizeHandleBottom:document.createElement("div"),toolBar:document.createElement("div"),zoomer:document.createElement("input"),rotateLeft:document.createElement("button"),rotateRight:document.createElement("button")}}function getArrowKeyDeltas(t){switch(t){case"ArrowLeft":return[2,0];case"ArrowUp":return[0,2];case"ArrowRight":return[-2,0];case"ArrowDown":return[0,-2];default:return null}}function clampDelta(t,e,i){return Math.round(Math.max(Math.min(t,e),i))}function canvasSupportsWebP(){return document.createElement("canvas").toDataURL("image/webp").startsWith("data:image/webp")}class Cropt{constructor(t,e){if(_Cropt_instances.add(this),this.options={mouseWheelZoom:"on",viewport:{width:220,height:220,borderRadius:"0px"},zoomerInputClass:"cr-slider",enableZoomSlider:!0,enableKeypress:!1,resizeBars:!1,enableRotateBtns:!1},_Cropt_maxZoom.set(this,.85),_Cropt_viewportMinWidth.set(this,50),_Cropt_viewportMinHeight.set(this,50),_Cropt_scale.set(this,1),_Cropt_rotation.set(this,0),_Cropt_clearRotationBlob.set(this,!1),_Cropt_transparencyColor.set(this,"#fff"),_Cropt_abortController.set(this,new AbortController),_Cropt_updateOverlayDebounced.set(this,debounce(()=>{__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_updateOverlay).call(this)},100)),t.classList.contains("cropt-container"))throw new Error("Cropt is already initialized on this element");e.viewport&&(e.viewport=Object.assign(Object.assign({},this.options.viewport),e.viewport)),this.options=Object.assign(Object.assign({},this.options),e),this.options.transparencyColor&&__classPrivateFieldSet(this,_Cropt_transparencyColor,this.options.transparencyColor,"f"),this.element=t,this.element.classList.add("cropt-container"),this.elements=getInitialElements(),this.elements.toolBar.classList.add("cr-toolbar-wrap"),this.elements.boundary.classList.add("cr-boundary"),this.elements.viewport.classList.add("cr-viewport"),this.elements.overlay.classList.add("cr-overlay"),this.elements.controls.classList.add("cr-controls"),this.elements.viewport.setAttribute("tabindex","0"),__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_setPreviewAttributes).call(this,this.elements.preview),this.elements.boundary.appendChild(this.elements.preview),this.elements.boundary.appendChild(this.elements.viewport),this.elements.boundary.appendChild(this.elements.overlay),this.elements.boundary.appendChild(this.elements.controls),__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_setupControlOverlay).call(this),this.options.enableRotateBtns&&(this.elements.rotateLeft.type="button",this.elements.rotateLeft.innerHTML="↺",this.elements.rotateLeft.setAttribute("aria-label","rotate left"),this.elements.rotateLeft.classList.add("cr-rotate-btn","cr-rotate-left"),this.elements.rotateRight.type="button",this.elements.rotateRight.innerHTML="↻",this.elements.rotateRight.setAttribute("aria-label","rotate right"),this.elements.rotateRight.classList.add("cr-rotate-btn","cr-rotate-right"),this.elements.toolBar.appendChild(this.elements.rotateLeft),this.elements.toolBar.appendChild(this.elements.rotateRight)),this.elements.zoomer.type="range",this.elements.zoomer.step="0.001",this.elements.zoomer.value="1",this.options.enableZoomSlider&&(this.elements.zoomer.className=this.options.zoomerInputClass,this.elements.zoomer.setAttribute("aria-label","zoom"),this.elements.toolBar.appendChild(this.elements.zoomer)),this.element.appendChild(this.elements.boundary),this.element.appendChild(this.elements.toolBar),__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_setViewportCss).call(this),__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_initDraggable).call(this),__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_initializeZoom).call(this),__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_initializeRotate).call(this)}bind(t,e){if(!t)throw new Error("src cannot be empty");return loadImage(t).then(async t=>{if(__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_replaceImage).call(this,t),"object"==typeof e)this.setOptions({viewport:e.viewport}),setTimeout(async()=>{e.transform.rotate&&await this.setRotation(e.transform.rotate);const t=e.transform.scale;__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_updateZoomLimits).call(this,t),__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_transformPreview).call(this,e.transform),__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_updateOverlay).call(this)},0);else{const t=e;__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_initPropertiesFromImage).call(this,t)}})}get(){const t=__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_getPoints).call(this);let e={x:t.left,y:t.top,width:t.width,height:t.height};const i=this.elements.preview.naturalWidth,s=this.elements.preview.naturalHeight;return 90===__classPrivateFieldGet(this,_Cropt_rotation,"f")||270===__classPrivateFieldGet(this,_Cropt_rotation,"f")?(e.width=t.height,e.height=t.width,90===__classPrivateFieldGet(this,_Cropt_rotation,"f")?(e.x=t.top,e.y=i-t.left-t.width):(e.x=s-t.top-t.height,e.y=t.left)):180===__classPrivateFieldGet(this,_Cropt_rotation,"f")&&(e.x=i-t.left-t.width,e.y=s-t.top-t.height),e.x=Math.max(0,e.x),e.y=Math.max(0,e.y),{crop:e,transform:__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_transformPreview).call(this),viewport:{width:Math.round(this.options.viewport.width),height:Math.round(this.options.viewport.height),borderRadius:this.options.viewport.borderRadius}}}toCanvas(t=null,e=""){const i=__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_getPoints).call(this),s=t&&t<0;t&&s&&(t=-t);let o=i.width,r=i.height;if(t&&(!s||o>t||r>t)){const e=this.elements.viewport.getBoundingClientRect(),i=e.width/e.height;i>1?(o=t,r=t/i):(r=t,o=t*i)}return Promise.resolve(__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_getCanvas).call(this,i,o,r,e))}toBlob(t=null,e="image/webp",i=1){return"image/webp"===e&&i<1&&!canvasSupportsWebP()&&(e="image/jpeg"),new Promise((s,o)=>{this.toCanvas(t,e).then(t=>{t.toBlob(e=>{null===e?o("Canvas blob is null"):(e.width=t.width,e.height=t.height,s(e))},e,i)})})}refresh(){__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_initPropertiesFromImage).call(this)}setOptions(t){const e=this.options.viewport.width,i=this.options.viewport.height,s=this.options.viewport;t.viewport&&(t.viewport=Object.assign(Object.assign({},s),t.viewport)),this.options=Object.assign(Object.assign({},this.options),t),__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_setViewportCss).call(this),s.width===e&&s.height===i||__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_updateZoomLimits).call(this)}setZoom(t){const e=this.elements.zoomer,i=parseFloat(e.min),s=parseFloat(e.max);e.value=Math.max(i,Math.min(s,t)).toFixed(3),__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_onZoom).call(this)}async setRotation(t){if(void 0===t)return;const e=(t%360+360)%360,i=e-__classPrivateFieldGet(this,_Cropt_rotation,"f");0!==i&&(__classPrivateFieldSet(this,_Cropt_rotation,e,"f"),await __classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_rotateImage).call(this,i),__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_initPropertiesFromImage).call(this))}destroy(){__classPrivateFieldGet(this,_Cropt_abortController,"f").abort(),__classPrivateFieldGet(this,_Cropt_clearRotationBlob,"f")&&URL.revokeObjectURL(this.elements.preview.src),this.element.removeChild(this.elements.boundary),this.element.classList.remove("cropt-container"),this.element.removeChild(this.elements.toolBar),this.elements=getInitialElements()}}_Cropt_maxZoom=new WeakMap,_Cropt_viewportMinWidth=new WeakMap,_Cropt_viewportMinHeight=new WeakMap,_Cropt_scale=new WeakMap,_Cropt_rotation=new WeakMap,_Cropt_clearRotationBlob=new WeakMap,_Cropt_transparencyColor=new WeakMap,_Cropt_abortController=new WeakMap,_Cropt_updateOverlayDebounced=new WeakMap,_Cropt_instances=new WeakSet,_Cropt_getPoints=function(){const t=t=>Math.round(Math.max(0,t/__classPrivateFieldGet(this,_Cropt_scale,"f"))),e=this.elements.preview.getBoundingClientRect(),i=this.elements.viewport.getBoundingClientRect(),s=this.elements.viewport.offsetWidth,o=this.elements.viewport.offsetHeight,r=(i.width-s)/2,a=(i.height-o)/2,n=i.left-e.left,l=i.top-e.top;return{left:t(n),top:t(l),right:t(n+s+r),bottom:t(l+o+a),width:t(s+r),height:t(o+a)}},_Cropt_rotateImage=async function(t){const e=this.elements.preview,i=await createImageBitmap(e),s=90===Math.abs(t%180),o=document.createElement("canvas");o.width=s?i.height:i.width,o.height=s?i.width:i.height;const r=o.getContext("2d");if(!r)throw new Error("Could not get canvas context");r.translate(o.width/2,o.height/2),r.rotate(t*Math.PI/180),r.drawImage(i,-i.width/2,-i.height/2),i.close();const a=await new Promise((t,e)=>{o.toBlob(i=>i?t(i):e(new Error("Failed to create blob")),"image/webp",1)});__classPrivateFieldGet(this,_Cropt_clearRotationBlob,"f")&&URL.revokeObjectURL(e.src),e.src=URL.createObjectURL(a),await e.decode(),__classPrivateFieldSet(this,_Cropt_clearRotationBlob,!0,"f")},_Cropt_transformPreview=function(t){var e,i;const s=this.elements.preview,o=()=>{const[t,e]=(s.style.transformOrigin||"0px 0px").split(" ");return{x:parseFloat(t)||0,y:parseFloat(e)||0}};if(void 0!==t){const{x:r=0,y:a=0,scale:n=1}=t;if(s.style.transform=`translate(${r}px, ${a}px) scale(${n})`,void 0!==t.origin){const o=null!==(e=t.origin.x)&&void 0!==e?e:0,r=null!==(i=t.origin.y)&&void 0!==i?i:0;s.style.transformOrigin=`${o}px ${r}px`}return{x:r,y:a,scale:n,rotate:__classPrivateFieldGet(this,_Cropt_rotation,"f"),origin:o()}}const r=s.style.transform||"";let a=0,n=0,l=1;for(const t of["translate","scale"]){const e=new RegExp(`${t}s*\\(([^)]+)\\)`),i=r.match(e);if(i){const e=i[1].trim();if("translate"===t){const[t,i]=e.split(",").map(t=>t.trim());a=Math.round(parseFloat(t))||0,n=void 0!==i?Math.round(parseFloat(i))||0:a}else"scale"===t&&(l=parseFloat(e)||1)}}return{x:a,y:n,scale:l,rotate:__classPrivateFieldGet(this,_Cropt_rotation,"f"),origin:o()}},_Cropt_setViewportCss=function(){const t=this.elements.viewport;t.style.borderRadius=this.options.viewport.borderRadius,t.style.width=this.options.viewport.width+"px",t.style.height=this.options.viewport.height+"px",__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_updateControlHandlePositions).call(this)},_Cropt_setupControlOverlay=function(){if(!this.options.resizeBars)return;const{resizeHandleRight:t,resizeHandleBottom:e}=this.elements;t.classList.add("cr-resize-handle","cr-resize-handle-right");const i=document.createElement("div");i.classList.add("cr-resize-handle-grabber"),t.appendChild(i),e.classList.add("cr-resize-handle","cr-resize-handle-bottom");const s=document.createElement("div");s.classList.add("cr-resize-handle-grabber"),e.appendChild(s),this.elements.controls.appendChild(t),this.elements.controls.appendChild(e),__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_initControlHandlers).call(this),setTimeout(()=>__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_updateControlHandlePositions).call(this),200)},_Cropt_updateControlHandlePositions=function(){if(!this.options.resizeBars)return;const{resizeHandleRight:t,resizeHandleBottom:e,viewport:i,boundary:s}=this.elements,o=this.options.viewport.width,r=this.options.viewport.height,a=i.getBoundingClientRect(),n=s.getBoundingClientRect(),l=a.left-n.left,_=a.top-n.top;t.style.left=l+o-22+"px",t.style.top=_+r/2-22+"px",e.style.left=l+o/2-22+"px",e.style.top=_+r-22+"px"},_Cropt_initControlHandlers=function(){let t=0,e=0;const i=i=>{i.preventDefault();const s=i.pageX-t,o=Math.floor(.95*this.elements.boundary.clientWidth),r=Math.min(o,Math.max(__classPrivateFieldGet(this,_Cropt_viewportMinWidth,"f"),e+s));this.options.viewport.width=r,__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_setViewportCss).call(this)},s=()=>{document.removeEventListener("pointermove",i),document.removeEventListener("pointerup",s)};this.elements.resizeHandleRight.addEventListener("pointerdown",o=>{0===o.button&&(o.preventDefault(),o.stopPropagation(),t=o.pageX,e=this.options.viewport.width,document.addEventListener("pointermove",i,{signal:__classPrivateFieldGet(this,_Cropt_abortController,"f").signal}),document.addEventListener("pointerup",s,{signal:__classPrivateFieldGet(this,_Cropt_abortController,"f").signal}))},{signal:__classPrivateFieldGet(this,_Cropt_abortController,"f").signal});let o=0,r=0;const a=t=>{t.preventDefault();const e=t.pageY-o,i=Math.floor(.95*this.elements.boundary.clientHeight),s=Math.min(i,Math.max(__classPrivateFieldGet(this,_Cropt_viewportMinHeight,"f"),r+e));this.options.viewport.height=s,__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_setViewportCss).call(this)},n=()=>{document.removeEventListener("pointermove",a),document.removeEventListener("pointerup",n)};this.elements.resizeHandleBottom.addEventListener("pointerdown",t=>{0===t.button&&(t.preventDefault(),t.stopPropagation(),o=t.pageY,r=this.options.viewport.height,document.addEventListener("pointermove",a,{signal:__classPrivateFieldGet(this,_Cropt_abortController,"f").signal}),document.addEventListener("pointerup",n,{signal:__classPrivateFieldGet(this,_Cropt_abortController,"f").signal}))},{signal:__classPrivateFieldGet(this,_Cropt_abortController,"f").signal})},_Cropt_getUnscaledCanvas=function(t){const e=document.createElement("canvas"),i=e.getContext("2d");if(null===i)throw new Error("Canvas context cannot be null");e.width=t.width,e.height=t.height;const s=this.elements.preview;return i.drawImage(s,t.left,t.top,t.width,t.height,0,0,e.width,e.height),e},_Cropt_getCanvas=function(t,e,i,s){console.time("getCanvas");const o=__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_getUnscaledCanvas).call(this,t),r=o.getContext("2d"),a=document.createElement("canvas"),n=a.getContext("2d"),l=document.createElement("canvas"),_=l.getContext("2d");if(l.width=e,l.height=i,null===_||null===r||null===n)throw new Error("Canvas context cannot be null");let h={width:o.width,height:o.height};for(;h.width>2*l.width;){let t=h.width,e=h.height;a.width=t,a.height=e,n.clearRect(0,0,a.width,a.height),n.drawImage(o,0,0),h={width:Math.floor(t/2),height:Math.floor(e/2)},r.clearRect(0,0,t,e),r.drawImage(a,0,0,t,e,0,0,h.width,h.height)}return"image/jpeg"===s&&(_.fillStyle=__classPrivateFieldGet(this,_Cropt_transparencyColor,"f"),_.fillRect(0,0,l.width,l.height)),_.drawImage(o,0,0,h.width,h.height,0,0,l.width,l.height),o.width=o.height=0,a.width=a.height=0,console.timeEnd("getCanvas"),l},_Cropt_getVirtualBoundaries=function(){const t=__classPrivateFieldGet(this,_Cropt_scale,"f"),e=this.elements.viewport.getBoundingClientRect(),i=this.elements.boundary.clientWidth/2,s=this.elements.boundary.clientHeight/2,o=this.elements.preview.getBoundingClientRect(),r=e.width/2,a=e.height/2,n=-1*(r/t-i),l=-1*(a/t-s),_=1/t*r,h=1/t*a;return{translate:{maxX:n,minX:n-(o.width*(1/t)-e.width*(1/t)),maxY:l,minY:l-(o.height*(1/t)-e.height*(1/t))},origin:{maxX:o.width*(1/t)-_,minX:_,maxY:o.height*(1/t)-h,minY:h}}},_Cropt_assignTransformCoordinates=function(t,e){const i=this.elements.preview.getBoundingClientRect(),s=this.elements.viewport.getBoundingClientRect(),o=__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_transformPreview).call(this);o.y+=clampDelta(s.top-i.top,e,s.bottom-i.bottom),o.x+=clampDelta(s.left-i.left,t,s.right-i.right),__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_updateCenterPoint).call(this,o),__classPrivateFieldGet(this,_Cropt_updateOverlayDebounced,"f").call(this)},_Cropt_initDraggable=function(){let t=0,e=0,i=[],s=0,o=o=>{o.preventDefault();const r=i.findIndex(t=>t.pointerId===o.pointerId);if(-1!==r){if(i[r]=o,2===i.length){let t=i[0],e=i[1],o=Math.hypot(t.pageX-e.pageX,t.pageY-e.pageY);return 0===s&&(s=o/__classPrivateFieldGet(this,_Cropt_scale,"f")),void this.setZoom(o/s)}0===s&&(__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_assignTransformCoordinates).call(this,o.pageX-t,o.pageY-e),t=o.pageX,e=o.pageY)}},r=t=>{const e=i.findIndex(e=>e.pointerId===t.pointerId);-1!==e&&i.splice(e,1),0===i.length&&(this.elements.overlay.removeEventListener("pointermove",o),this.elements.overlay.removeEventListener("pointerup",r),this.elements.overlay.removeEventListener("pointerout",r),__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_setDragState).call(this,!1,this.elements.preview),s=0)};if(this.elements.overlay.addEventListener("pointerdown",s=>{s.button||(s.preventDefault(),i.push(s),this.elements.overlay.setPointerCapture(s.pointerId),i.length>1||(t=s.pageX,e=s.pageY,__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_setDragState).call(this,!0,this.elements.preview),this.elements.overlay.addEventListener("pointermove",o,{signal:__classPrivateFieldGet(this,_Cropt_abortController,"f").signal}),this.elements.overlay.addEventListener("pointerup",r,{signal:__classPrivateFieldGet(this,_Cropt_abortController,"f").signal}),this.elements.overlay.addEventListener("pointerout",r,{signal:__classPrivateFieldGet(this,_Cropt_abortController,"f").signal})))},{signal:__classPrivateFieldGet(this,_Cropt_abortController,"f").signal}),!this.options.enableKeypress)return;document.addEventListener("keydown",t=>{if(document.activeElement&&["INPUT","TEXTAREA","SELECT","BUTTON"].includes(document.activeElement.nodeName))return;const e=getArrowKeyDeltas(t.key);if(null!==e)if(t.shiftKey&&e[1]){t.preventDefault();const i=parseFloat(this.elements.zoomer.value);this.setZoom(i+.005*e[1])}else t.preventDefault(),__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_assignTransformCoordinates).call(this,e[0],e[1])},{signal:__classPrivateFieldGet(this,_Cropt_abortController,"f").signal})},_Cropt_initializeZoom=function(){if(this.options.enableZoomSlider&&this.elements.zoomer.addEventListener("input",()=>__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_onZoom).call(this),{signal:__classPrivateFieldGet(this,_Cropt_abortController,"f").signal}),"off"===this.options.mouseWheelZoom)return;this.elements.boundary.addEventListener("wheel",t=>{let e=0;("ctrl"!==this.options.mouseWheelZoom||t.ctrlKey)&&(t.deltaY&&(e=-1*t.deltaY/2e3),t.preventDefault(),this.setZoom(__classPrivateFieldGet(this,_Cropt_scale,"f")+e*__classPrivateFieldGet(this,_Cropt_scale,"f")))},{signal:__classPrivateFieldGet(this,_Cropt_abortController,"f").signal})},_Cropt_onZoom=function(){const t=__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_transformPreview).call(this);__classPrivateFieldSet(this,_Cropt_scale,parseFloat(this.elements.zoomer.value),"f"),t.scale=__classPrivateFieldGet(this,_Cropt_scale,"f");const e=__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_getVirtualBoundaries).call(this),i=e.translate,s=e.origin;t.x>=i.maxX&&(t.origin.x=s.minX,t.x=i.maxX),t.x<=i.minX&&(t.origin.x=s.maxX,t.x=i.minX),t.y>=i.maxY&&(t.origin.y=s.minY,t.y=i.maxY),t.y<=i.minY&&(t.origin.y=s.maxY,t.y=i.minY),__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_transformPreview).call(this,t),__classPrivateFieldGet(this,_Cropt_updateOverlayDebounced,"f").call(this)},_Cropt_initializeRotate=function(){this.options.enableRotateBtns&&(this.elements.rotateLeft.addEventListener("click",()=>this.setRotation(__classPrivateFieldGet(this,_Cropt_rotation,"f")-90),{signal:__classPrivateFieldGet(this,_Cropt_abortController,"f").signal}),this.elements.rotateRight.addEventListener("click",()=>this.setRotation(__classPrivateFieldGet(this,_Cropt_rotation,"f")+90),{signal:__classPrivateFieldGet(this,_Cropt_abortController,"f").signal}))},_Cropt_replaceImage=function(t){__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_setPreviewAttributes).call(this,t),this.elements.preview.parentNode&&this.elements.preview.parentNode.replaceChild(t,this.elements.preview),this.elements.preview=t},_Cropt_setPreviewAttributes=function(t){t.classList.add("cr-image"),t.style.background=__classPrivateFieldGet(this,_Cropt_transparencyColor,"f"),t.setAttribute("alt","preview"),__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_setDragState).call(this,!1,t)},_Cropt_setDragState=function(t,e){e.setAttribute("aria-grabbed",t.toString()),this.elements.boundary.setAttribute("aria-dropeffect",t?"move":"none")},_Cropt_isVisible=function(){return null!==this.elements.preview.offsetParent},_Cropt_updateOverlay=function(){const t=this.elements.boundary.getBoundingClientRect(),e=this.elements.preview.getBoundingClientRect(),i=this.elements.overlay;i.style.width=e.width+"px",i.style.height=e.height+"px",i.style.top=e.top-t.top+"px",i.style.left=e.left-t.left+"px"},_Cropt_initPropertiesFromImage=function(t=null){if(!__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_isVisible).call(this))return;const e={x:0,y:0,scale:1,origin:{x:0,y:0}};__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_transformPreview).call(this,e),__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_updateZoomLimits).call(this,t),e.scale=__classPrivateFieldGet(this,_Cropt_scale,"f"),__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_transformPreview).call(this,e),__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_centerImage).call(this),__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_updateOverlay).call(this)},_Cropt_updateCenterPoint=function(t){var e,i;const s=this.elements.viewport.getBoundingClientRect(),o=this.elements.preview.getBoundingClientRect(),{origin:r}=__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_transformPreview).call(this),a=s.top-o.top+s.height/2,n=s.left-o.left+s.width/2,l={x:Math.round(n/__classPrivateFieldGet(this,_Cropt_scale,"f")),y:Math.round(a/__classPrivateFieldGet(this,_Cropt_scale,"f"))};t.x=Math.round(t.x-(l.x-(null!==(e=r.x)&&void 0!==e?e:0))*(1-__classPrivateFieldGet(this,_Cropt_scale,"f"))),t.y=Math.round(t.y-(l.y-(null!==(i=r.y)&&void 0!==i?i:0))*(1-__classPrivateFieldGet(this,_Cropt_scale,"f"))),__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_transformPreview).call(this,Object.assign(Object.assign({},t),{origin:l}))},_Cropt_updateZoomLimits=function(t=null){const e=this.elements.preview,i=this.elements.viewport.getBoundingClientRect(),s=Math.max(i.width/e.naturalWidth,i.height/e.naturalHeight);let o=__classPrivateFieldGet(this,_Cropt_maxZoom,"f");if(s>=o&&(o+=s),this.elements.zoomer.min=s.toFixed(3),this.elements.zoomer.max=o.toFixed(3),null===t){const i=this.elements.boundary.getBoundingClientRect();t=Math.max(i.width/e.naturalWidth,i.height/e.naturalHeight)}this.setZoom(t)},_Cropt_centerImage=function(){const t=this.elements.preview.getBoundingClientRect(),e=this.elements.viewport.getBoundingClientRect(),i=this.elements.boundary.getBoundingClientRect(),s=e.left-i.left,o=e.top-i.top,r=s-(t.width-e.width)/2,a=o-(t.height-e.height)/2;__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_updateCenterPoint).call(this,{x:r,y:a,scale:__classPrivateFieldGet(this,_Cropt_scale,"f")})};export default Cropt;

package/dist/cropt.min.css

@@ -1,2 +1 @@
-.cropt-container .cr-image{z-index:-1;position:absolute;top:0;left:0;transform-origin:0 0;max-height:none;max-width:none;pointer-events:none}.cropt-container .cr-image,.cropt-container .cr-overlay{-webkit-user-select:none;user-select:none}.cropt-container .cr-boundary{position:relative;overflow:hidden;margin:0 auto;z-index:1;height:320px}.cropt-container .cr-boundary,.cropt-container .cr-toolbar-wrap{width:320px}.cropt-container .cr-viewport{position:absolute;box-sizing:border-box;border:2px solid #fff;margin:auto;top:0;bottom:0;right:0;left:0;box-shadow:0 0 2000px 2000px rgba(0,0,0,.5);z-index:0}.cropt-container .cr-overlay{z-index:1;position:absolute;cursor:move;touch-action:none}.cropt-container .cr-toolbar-wrap{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:5px auto}.cropt-container .cr-slider{flex:1;margin:0 10px 0}.cropt-container .cr-control{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.cropt-container .cr-resize-handle{z-index:100!important;position:absolute;width:44px!important;height:44px!important;touch-action:none;pointer-events:auto;display:flex;align-items:center;justify-content:center}.cropt-container .cr-resize-handle-grabber{width:10px;height:10px;background:#fff;border:1px solid rgba(0,0,0,.3);box-shadow:0 1px 3px rgba(0,0,0,.2);pointer-events:none}.cropt-container .cr-resize-handle-right{cursor:ew-resize}.cropt-container .cr-resize-handle-bottom{cursor:ns-resize}.cropt-container .cr-rotate-btn{border:2px solid #667;border-radius:25%;background:0 0;cursor:pointer}
-/*# sourceMappingURL=cropt.min.css.map */
+.cropt-container .cr-image{left:0;max-height:none;max-width:none;pointer-events:none;position:absolute;top:0;transform-origin:0 0;z-index:-1}.cropt-container .cr-image,.cropt-container .cr-overlay{-webkit-user-select:none;user-select:none}.cropt-container .cr-boundary{height:320px;margin:0 auto;overflow:hidden;position:relative;z-index:1}.cropt-container .cr-boundary,.cropt-container .cr-toolbar-wrap{width:320px}.cropt-container .cr-viewport{border:2px solid #fff;bottom:0;box-shadow:0 0 2000px 2000px rgba(0,0,0,.5);box-sizing:border-box;left:0;margin:auto;position:absolute;right:0;top:0;z-index:0}.cropt-container .cr-overlay{cursor:move;position:absolute;touch-action:none;z-index:1}.cropt-container .cr-toolbar-wrap{align-items:center;display:flex;gap:6px;justify-content:space-between;margin:5px auto}.cropt-container .cr-slider{flex:1;margin:0 10px}.cropt-container .cr-control{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.cropt-container .cr-resize-handle{align-items:center;display:flex;height:44px!important;justify-content:center;pointer-events:auto;position:absolute;touch-action:none;width:44px!important;z-index:100!important}.cropt-container .cr-resize-handle-grabber{background:#fff;border:1px solid rgba(0,0,0,.3);box-shadow:0 1px 3px rgba(0,0,0,.2);height:10px;pointer-events:none;width:10px}.cropt-container .cr-resize-handle-right{cursor:ew-resize}.cropt-container .cr-resize-handle-bottom{cursor:ns-resize}.cropt-container .cr-rotate-btn{background:transparent;border:2px solid #667;border-radius:25%;cursor:pointer}

package/dist/cropt.min.js

@@ -1 +1 @@
-function debounce(t,e){let i;return(...n)=>{clearTimeout(i),i=setTimeout(()=>t(...n),e)}}function loadImage(t){return new Promise((e,i)=>{const n=new Image;n.onload=()=>{e(n)},n.onerror=i,n.src=t})}function getInitialElements(){return{boundary:document.createElement("div"),viewport:document.createElement("div"),preview:document.createElement("img"),overlay:document.createElement("div"),controls:document.createElement("div"),resizeHandleRight:document.createElement("div"),resizeHandleBottom:document.createElement("div"),toolBar:document.createElement("div"),zoomer:document.createElement("input"),rotateLeft:document.createElement("button"),rotateRight:document.createElement("button")}}function getArrowKeyDeltas(t){switch(t){case"ArrowLeft":return[2,0];case"ArrowUp":return[0,2];case"ArrowRight":return[-2,0];case"ArrowDown":return[0,-2];default:return null}}function clampDelta(t,e,i){return Math.round(Math.max(Math.min(t,e),i))}function canvasSupportsWebP(){return document.createElement("canvas").toDataURL("image/webp").startsWith("data:image/webp")}export class Cropt{element;elements;options={mouseWheelZoom:"on",viewport:{width:220,height:220,borderRadius:"0px"},zoomerInputClass:"cr-slider",enableZoomSlider:!0,enableKeypress:!1,resizeBars:!1,enableRotateBtns:!1};#t=.85;#e=50;#i=50;#n=1;#s=0;#o=!1;#r="#fff";#a=new AbortController;#l=debounce(()=>{this.#h()},100);constructor(t,e){if(t.classList.contains("cropt-container"))throw new Error("Cropt is already initialized on this element");e.viewport&&(e.viewport={...this.options.viewport,...e.viewport}),this.options={...this.options,...e},this.options.transparencyColor&&(this.#r=this.options.transparencyColor),this.element=t,this.element.classList.add("cropt-container"),this.elements=getInitialElements(),this.elements.toolBar.classList.add("cr-toolbar-wrap"),this.elements.boundary.classList.add("cr-boundary"),this.elements.viewport.classList.add("cr-viewport"),this.elements.overlay.classList.add("cr-overlay"),this.elements.controls.classList.add("cr-controls"),this.elements.viewport.setAttribute("tabindex","0"),this.#d(this.elements.preview),this.elements.boundary.appendChild(this.elements.preview),this.elements.boundary.appendChild(this.elements.viewport),this.elements.boundary.appendChild(this.elements.overlay),this.elements.boundary.appendChild(this.elements.controls),this.#m(),this.options.enableRotateBtns&&(this.elements.rotateLeft.type="button",this.elements.rotateLeft.innerHTML="↺",this.elements.rotateLeft.setAttribute("aria-label","rotate left"),this.elements.rotateLeft.classList.add("cr-rotate-btn","cr-rotate-left"),this.elements.rotateRight.type="button",this.elements.rotateRight.innerHTML="↻",this.elements.rotateRight.setAttribute("aria-label","rotate right"),this.elements.rotateRight.classList.add("cr-rotate-btn","cr-rotate-right"),this.elements.toolBar.appendChild(this.elements.rotateLeft),this.elements.toolBar.appendChild(this.elements.rotateRight)),this.elements.zoomer.type="range",this.elements.zoomer.step="0.001",this.elements.zoomer.value="1",this.options.enableZoomSlider&&(this.elements.zoomer.className=this.options.zoomerInputClass,this.elements.zoomer.setAttribute("aria-label","zoom"),this.elements.toolBar.appendChild(this.elements.zoomer)),this.element.appendChild(this.elements.boundary),this.element.appendChild(this.elements.toolBar),this.#p(),this.#c(),this.#g(),this.#u()}bind(t,e){if(!t)throw new Error("src cannot be empty");return loadImage(t).then(async t=>{if(this.#v(t),"object"==typeof e)this.setOptions({viewport:e.viewport}),setTimeout(async()=>{e.transform.rotate&&await this.setRotation(e.transform.rotate);const t=e.transform.scale;this.#w(t),this.#b(e.transform),this.#h()},0);else{const t=e;this.#f(t)}})}#y(){const t=t=>Math.round(Math.max(0,t/this.#n)),e=this.elements.preview.getBoundingClientRect(),i=this.elements.viewport.getBoundingClientRect(),n=this.elements.viewport.offsetWidth,s=this.elements.viewport.offsetHeight,o=(i.width-n)/2,r=(i.height-s)/2,a=i.left-e.left,l=i.top-e.top;return{left:t(a),top:t(l),right:t(a+n+o),bottom:t(l+s+r),width:t(n+o),height:t(s+r)}}get(){const t=this.#y();let e={x:t.left,y:t.top,width:t.width,height:t.height};const i=this.elements.preview.naturalWidth,n=this.elements.preview.naturalHeight;return 90===this.#s||270===this.#s?(e.width=t.height,e.height=t.width,90===this.#s?(e.x=t.top,e.y=i-t.left-t.width):(e.x=n-t.top-t.height,e.y=t.left)):180===this.#s&&(e.x=i-t.left-t.width,e.y=n-t.top-t.height),e.x=Math.max(0,e.x),e.y=Math.max(0,e.y),{crop:e,transform:this.#b(),viewport:{width:Math.round(this.options.viewport.width),height:Math.round(this.options.viewport.height),borderRadius:this.options.viewport.borderRadius}}}toCanvas(t=null,e=""){const i=this.#y(),n=t&&t<0;t&&n&&(t=-t);let s=i.width,o=i.height;if(t&&(!n||s>t||o>t)){const e=this.elements.viewport.getBoundingClientRect(),i=e.width/e.height;i>1?(s=t,o=t/i):(o=t,s=t*i)}return Promise.resolve(this.#C(i,s,o,e))}toBlob(t=null,e="image/webp",i=1){return"image/webp"===e&&i<1&&!canvasSupportsWebP()&&(e="image/jpeg"),new Promise((n,s)=>{this.toCanvas(t,e).then(t=>{t.toBlob(e=>{null===e?s("Canvas blob is null"):(e.width=t.width,e.height=t.height,n(e))},e,i)})})}refresh(){this.#f()}setOptions(t){const e=this.options.viewport.width,i=this.options.viewport.height,n=this.options.viewport;t.viewport&&(t.viewport={...n,...t.viewport}),this.options={...this.options,...t},this.#p(),n.width===e&&n.height===i||this.#w()}setZoom(t){const e=this.elements.zoomer,i=parseFloat(e.min),n=parseFloat(e.max);e.value=Math.max(i,Math.min(n,t)).toFixed(3),this.#x()}async setRotation(t){if(void 0===t)return;const e=(t%360+360)%360,i=e-this.#s;0!==i&&(this.#s=e,await this.#R(i),this.#f())}async#R(t){const e=this.elements.preview,i=await createImageBitmap(e),n=90===Math.abs(t%180),s=document.createElement("canvas");s.width=n?i.height:i.width,s.height=n?i.width:i.height;const o=s.getContext("2d");if(!o)throw new Error("Could not get canvas context");o.translate(s.width/2,s.height/2),o.rotate(t*Math.PI/180),o.drawImage(i,-i.width/2,-i.height/2),i.close();const r=await new Promise((t,e)=>{s.toBlob(i=>i?t(i):e(new Error("Failed to create blob")),"image/webp",1)});this.#o&&URL.revokeObjectURL(e.src),e.src=URL.createObjectURL(r),await e.decode(),this.#o=!0}destroy(){this.#a.abort(),this.#o&&URL.revokeObjectURL(this.elements.preview.src),this.element.removeChild(this.elements.boundary),this.element.classList.remove("cropt-container"),this.element.removeChild(this.elements.toolBar),this.elements=getInitialElements()}#b(t){const e=this.elements.preview,i=()=>{const[t,i]=(e.style.transformOrigin||"0px 0px").split(" ");return{x:parseFloat(t)||0,y:parseFloat(i)||0}};if(void 0!==t){const{x:n=0,y:s=0,scale:o=1}=t;if(e.style.transform=`translate(${n}px, ${s}px) scale(${o})`,void 0!==t.origin){const i=t.origin.x??0,n=t.origin.y??0;e.style.transformOrigin=`${i}px ${n}px`}return{x:n,y:s,scale:o,rotate:this.#s,origin:i()}}const n=e.style.transform||"";let s=0,o=0,r=1;for(const t of["translate","scale"]){const e=new RegExp(`${t}s*\\(([^)]+)\\)`),i=n.match(e);if(i){const e=i[1].trim();if("translate"===t){const[t,i]=e.split(",").map(t=>t.trim());s=Math.round(parseFloat(t))||0,o=void 0!==i?Math.round(parseFloat(i))||0:s}else"scale"===t&&(r=parseFloat(e)||1)}}return{x:s,y:o,scale:r,rotate:this.#s,origin:i()}}#p(){const t=this.elements.viewport;t.style.borderRadius=this.options.viewport.borderRadius,t.style.width=this.options.viewport.width+"px",t.style.height=this.options.viewport.height+"px",this.#L()}#m(){if(!this.options.resizeBars)return;const{resizeHandleRight:t,resizeHandleBottom:e}=this.elements;t.classList.add("cr-resize-handle","cr-resize-handle-right");const i=document.createElement("div");i.classList.add("cr-resize-handle-grabber"),t.appendChild(i),e.classList.add("cr-resize-handle","cr-resize-handle-bottom");const n=document.createElement("div");n.classList.add("cr-resize-handle-grabber"),e.appendChild(n),this.elements.controls.appendChild(t),this.elements.controls.appendChild(e),this.#E(),setTimeout(()=>this.#L(),200)}#L(){if(!this.options.resizeBars)return;const{resizeHandleRight:t,resizeHandleBottom:e,viewport:i,boundary:n}=this.elements,s=this.options.viewport.width,o=this.options.viewport.height,r=i.getBoundingClientRect(),a=n.getBoundingClientRect(),l=r.left-a.left,h=r.top-a.top;t.style.left=l+s-22+"px",t.style.top=h+o/2-22+"px",e.style.left=l+s/2-22+"px",e.style.top=h+o-22+"px"}#E(){let t=0,e=0;const i=i=>{i.preventDefault();const n=i.pageX-t,s=Math.floor(.95*this.elements.boundary.clientWidth),o=Math.min(s,Math.max(this.#e,e+n));this.options.viewport.width=o,this.#p()},n=()=>{document.removeEventListener("pointermove",i),document.removeEventListener("pointerup",n)};this.elements.resizeHandleRight.addEventListener("pointerdown",s=>{0===s.button&&(s.preventDefault(),s.stopPropagation(),t=s.pageX,e=this.options.viewport.width,document.addEventListener("pointermove",i,{signal:this.#a.signal}),document.addEventListener("pointerup",n,{signal:this.#a.signal}))},{signal:this.#a.signal});let s=0,o=0;const r=t=>{t.preventDefault();const e=t.pageY-s,i=Math.floor(.95*this.elements.boundary.clientHeight),n=Math.min(i,Math.max(this.#i,o+e));this.options.viewport.height=n,this.#p()},a=()=>{document.removeEventListener("pointermove",r),document.removeEventListener("pointerup",a)};this.elements.resizeHandleBottom.addEventListener("pointerdown",t=>{0===t.button&&(t.preventDefault(),t.stopPropagation(),s=t.pageY,o=this.options.viewport.height,document.addEventListener("pointermove",r,{signal:this.#a.signal}),document.addEventListener("pointerup",a,{signal:this.#a.signal}))},{signal:this.#a.signal})}#B(t){const e=document.createElement("canvas"),i=e.getContext("2d");if(null===i)throw new Error("Canvas context cannot be null");e.width=t.width,e.height=t.height;const n=this.elements.preview;return i.drawImage(n,t.left,t.top,t.width,t.height,0,0,e.width,e.height),e}#C(t,e,i,n){console.time("getCanvas");const s=this.#B(t),o=s.getContext("2d"),r=document.createElement("canvas"),a=r.getContext("2d"),l=document.createElement("canvas"),h=l.getContext("2d");if(l.width=e,l.height=i,null===h||null===o||null===a)throw new Error("Canvas context cannot be null");let d={width:s.width,height:s.height};for(;d.width>2*l.width;){let t=d.width,e=d.height;r.width=t,r.height=e,a.clearRect(0,0,r.width,r.height),a.drawImage(s,0,0),d={width:Math.floor(t/2),height:Math.floor(e/2)},o.clearRect(0,0,t,e),o.drawImage(r,0,0,t,e,0,0,d.width,d.height)}return"image/jpeg"===n&&(h.fillStyle=this.#r,h.fillRect(0,0,l.width,l.height)),h.drawImage(s,0,0,d.width,d.height,0,0,l.width,l.height),s.width=s.height=0,r.width=r.height=0,console.timeEnd("getCanvas"),l}#z(){const t=this.#n,e=this.elements.viewport.getBoundingClientRect(),i=this.elements.boundary.clientWidth/2,n=this.elements.boundary.clientHeight/2,s=this.elements.preview.getBoundingClientRect(),o=e.width/2,r=e.height/2,a=-1*(o/t-i),l=-1*(r/t-n),h=1/t*o,d=1/t*r;return{translate:{maxX:a,minX:a-(s.width*(1/t)-e.width*(1/t)),maxY:l,minY:l-(s.height*(1/t)-e.height*(1/t))},origin:{maxX:s.width*(1/t)-h,minX:h,maxY:s.height*(1/t)-d,minY:d}}}#P(t,e){const i=this.elements.preview.getBoundingClientRect(),n=this.elements.viewport.getBoundingClientRect(),s=this.#b();s.y+=clampDelta(n.top-i.top,e,n.bottom-i.bottom),s.x+=clampDelta(n.left-i.left,t,n.right-i.right),this.#M(s),this.#l()}#c(){let t=0,e=0,i=[],n=0,s=s=>{s.preventDefault();const o=i.findIndex(t=>t.pointerId===s.pointerId);if(-1!==o){if(i[o]=s,2===i.length){let t=i[0],e=i[1],s=Math.hypot(t.pageX-e.pageX,t.pageY-e.pageY);return 0===n&&(n=s/this.#n),void this.setZoom(s/n)}0===n&&(this.#P(s.pageX-t,s.pageY-e),t=s.pageX,e=s.pageY)}},o=t=>{const e=i.findIndex(e=>e.pointerId===t.pointerId);-1!==e&&i.splice(e,1),0===i.length&&(this.elements.overlay.removeEventListener("pointermove",s),this.elements.overlay.removeEventListener("pointerup",o),this.elements.overlay.removeEventListener("pointerout",o),this.#I(!1,this.elements.preview),n=0)};if(this.elements.overlay.addEventListener("pointerdown",n=>{n.button||(n.preventDefault(),i.push(n),this.elements.overlay.setPointerCapture(n.pointerId),i.length>1||(t=n.pageX,e=n.pageY,this.#I(!0,this.elements.preview),this.elements.overlay.addEventListener("pointermove",s,{signal:this.#a.signal}),this.elements.overlay.addEventListener("pointerup",o,{signal:this.#a.signal}),this.elements.overlay.addEventListener("pointerout",o,{signal:this.#a.signal})))},{signal:this.#a.signal}),!this.options.enableKeypress)return;document.addEventListener("keydown",t=>{if(document.activeElement&&["INPUT","TEXTAREA","SELECT","BUTTON"].includes(document.activeElement.nodeName))return;const e=getArrowKeyDeltas(t.key);if(null!==e)if(t.shiftKey&&e[1]){t.preventDefault();const i=parseFloat(this.elements.zoomer.value);this.setZoom(i+.005*e[1])}else t.preventDefault(),this.#P(e[0],e[1])},{signal:this.#a.signal})}#g(){if(this.options.enableZoomSlider&&this.elements.zoomer.addEventListener("input",()=>this.#x(),{signal:this.#a.signal}),"off"===this.options.mouseWheelZoom)return;this.elements.boundary.addEventListener("wheel",t=>{let e=0;("ctrl"!==this.options.mouseWheelZoom||t.ctrlKey)&&(t.deltaY&&(e=-1*t.deltaY/2e3),t.preventDefault(),this.setZoom(this.#n+e*this.#n))},{signal:this.#a.signal})}#x(){const t=this.#b();this.#n=parseFloat(this.elements.zoomer.value),t.scale=this.#n;const e=this.#z(),i=e.translate,n=e.origin;t.x>=i.maxX&&(t.origin.x=n.minX,t.x=i.maxX),t.x<=i.minX&&(t.origin.x=n.maxX,t.x=i.minX),t.y>=i.maxY&&(t.origin.y=n.minY,t.y=i.maxY),t.y<=i.minY&&(t.origin.y=n.maxY,t.y=i.minY),this.#b(t),this.#l()}#u(){this.options.enableRotateBtns&&(this.elements.rotateLeft.addEventListener("click",()=>this.setRotation(this.#s-90),{signal:this.#a.signal}),this.elements.rotateRight.addEventListener("click",()=>this.setRotation(this.#s+90),{signal:this.#a.signal}))}#v(t){this.#d(t),this.elements.preview.parentNode&&this.elements.preview.parentNode.replaceChild(t,this.elements.preview),this.elements.preview=t}#d(t){t.classList.add("cr-image"),t.style.background=this.#r,t.setAttribute("alt","preview"),this.#I(!1,t)}#I(t,e){e.setAttribute("aria-grabbed",t.toString()),this.elements.boundary.setAttribute("aria-dropeffect",t?"move":"none")}#D(){return null!==this.elements.preview.offsetParent}#h(){const t=this.elements.boundary.getBoundingClientRect(),e=this.elements.preview.getBoundingClientRect(),i=this.elements.overlay;i.style.width=e.width+"px",i.style.height=e.height+"px",i.style.top=e.top-t.top+"px",i.style.left=e.left-t.left+"px"}#f(t=null){if(!this.#D())return;const e={x:0,y:0,scale:1,origin:{x:0,y:0}};this.#b(e),this.#w(t),e.scale=this.#n,this.#b(e),this.#H(),this.#h()}#M(t){const e=this.elements.viewport.getBoundingClientRect(),i=this.elements.preview.getBoundingClientRect(),{origin:n}=this.#b(),s=e.top-i.top+e.height/2,o=e.left-i.left+e.width/2,r={x:Math.round(o/this.#n),y:Math.round(s/this.#n)};t.x=Math.round(t.x-(r.x-(n.x??0))*(1-this.#n)),t.y=Math.round(t.y-(r.y-(n.y??0))*(1-this.#n)),this.#b({...t,origin:r})}#w(t=null){const e=this.elements.preview,i=this.elements.viewport.getBoundingClientRect(),n=Math.max(i.width/e.naturalWidth,i.height/e.naturalHeight);let s=this.#t;if(n>=s&&(s+=n),this.elements.zoomer.min=n.toFixed(3),this.elements.zoomer.max=s.toFixed(3),null===t){const i=this.elements.boundary.getBoundingClientRect();t=Math.max(i.width/e.naturalWidth,i.height/e.naturalHeight)}this.setZoom(t)}#H(){const t=this.elements.preview.getBoundingClientRect(),e=this.elements.viewport.getBoundingClientRect(),i=this.elements.boundary.getBoundingClientRect(),n=e.left-i.left,s=e.top-i.top,o=n-(t.width-e.width)/2,r=s-(t.height-e.height)/2;this.#M({x:o,y:r,scale:this.#n})}}
+var _Cropt_instances,_Cropt_maxZoom,_Cropt_viewportMinWidth,_Cropt_viewportMinHeight,_Cropt_scale,_Cropt_rotation,_Cropt_clearRotationBlob,_Cropt_transparencyColor,_Cropt_abortController,_Cropt_updateOverlayDebounced,_Cropt_getPoints,_Cropt_rotateImage,_Cropt_transformPreview,_Cropt_setViewportCss,_Cropt_setupControlOverlay,_Cropt_updateControlHandlePositions,_Cropt_initControlHandlers,_Cropt_getUnscaledCanvas,_Cropt_getCanvas,_Cropt_getVirtualBoundaries,_Cropt_assignTransformCoordinates,_Cropt_initDraggable,_Cropt_initializeZoom,_Cropt_onZoom,_Cropt_initializeRotate,_Cropt_replaceImage,_Cropt_setPreviewAttributes,_Cropt_setDragState,_Cropt_isVisible,_Cropt_updateOverlay,_Cropt_initPropertiesFromImage,_Cropt_updateCenterPoint,_Cropt_updateZoomLimits,_Cropt_centerImage,__classPrivateFieldSet=this&&this.__classPrivateFieldSet||function(t,e,i,s,o){if("m"===s)throw new TypeError("Private method is not writable");if("a"===s&&!o)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof e?t!==e||!o:!e.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===s?o.call(t,i):o?o.value=i:e.set(t,i),i},__classPrivateFieldGet=this&&this.__classPrivateFieldGet||function(t,e,i,s){if("a"===i&&!s)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof e?t!==e||!s:!e.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===i?s:"a"===i?s.call(t):s?s.value:e.get(t)};function debounce(t,e){let i;return(...s)=>{clearTimeout(i),i=setTimeout(()=>t(...s),e)}}function loadImage(t){return new Promise((e,i)=>{const s=new Image;s.onload=()=>{e(s)},s.onerror=i,s.src=t})}function getInitialElements(){return{boundary:document.createElement("div"),viewport:document.createElement("div"),preview:document.createElement("img"),overlay:document.createElement("div"),controls:document.createElement("div"),resizeHandleRight:document.createElement("div"),resizeHandleBottom:document.createElement("div"),toolBar:document.createElement("div"),zoomer:document.createElement("input"),rotateLeft:document.createElement("button"),rotateRight:document.createElement("button")}}function getArrowKeyDeltas(t){switch(t){case"ArrowLeft":return[2,0];case"ArrowUp":return[0,2];case"ArrowRight":return[-2,0];case"ArrowDown":return[0,-2];default:return null}}function clampDelta(t,e,i){return Math.round(Math.max(Math.min(t,e),i))}function canvasSupportsWebP(){return document.createElement("canvas").toDataURL("image/webp").startsWith("data:image/webp")}class Cropt{constructor(t,e){if(_Cropt_instances.add(this),this.options={mouseWheelZoom:"on",viewport:{width:220,height:220,borderRadius:"0px"},zoomerInputClass:"cr-slider",enableZoomSlider:!0,enableKeypress:!1,resizeBars:!1,enableRotateBtns:!1},_Cropt_maxZoom.set(this,.85),_Cropt_viewportMinWidth.set(this,50),_Cropt_viewportMinHeight.set(this,50),_Cropt_scale.set(this,1),_Cropt_rotation.set(this,0),_Cropt_clearRotationBlob.set(this,!1),_Cropt_transparencyColor.set(this,"#fff"),_Cropt_abortController.set(this,new AbortController),_Cropt_updateOverlayDebounced.set(this,debounce(()=>{__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_updateOverlay).call(this)},100)),t.classList.contains("cropt-container"))throw new Error("Cropt is already initialized on this element");e.viewport&&(e.viewport=Object.assign(Object.assign({},this.options.viewport),e.viewport)),this.options=Object.assign(Object.assign({},this.options),e),this.options.transparencyColor&&__classPrivateFieldSet(this,_Cropt_transparencyColor,this.options.transparencyColor,"f"),this.element=t,this.element.classList.add("cropt-container"),this.elements=getInitialElements(),this.elements.toolBar.classList.add("cr-toolbar-wrap"),this.elements.boundary.classList.add("cr-boundary"),this.elements.viewport.classList.add("cr-viewport"),this.elements.overlay.classList.add("cr-overlay"),this.elements.controls.classList.add("cr-controls"),this.elements.viewport.setAttribute("tabindex","0"),__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_setPreviewAttributes).call(this,this.elements.preview),this.elements.boundary.appendChild(this.elements.preview),this.elements.boundary.appendChild(this.elements.viewport),this.elements.boundary.appendChild(this.elements.overlay),this.elements.boundary.appendChild(this.elements.controls),__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_setupControlOverlay).call(this),this.options.enableRotateBtns&&(this.elements.rotateLeft.type="button",this.elements.rotateLeft.innerHTML="↺",this.elements.rotateLeft.setAttribute("aria-label","rotate left"),this.elements.rotateLeft.classList.add("cr-rotate-btn","cr-rotate-left"),this.elements.rotateRight.type="button",this.elements.rotateRight.innerHTML="↻",this.elements.rotateRight.setAttribute("aria-label","rotate right"),this.elements.rotateRight.classList.add("cr-rotate-btn","cr-rotate-right"),this.elements.toolBar.appendChild(this.elements.rotateLeft),this.elements.toolBar.appendChild(this.elements.rotateRight)),this.elements.zoomer.type="range",this.elements.zoomer.step="0.001",this.elements.zoomer.value="1",this.options.enableZoomSlider&&(this.elements.zoomer.className=this.options.zoomerInputClass,this.elements.zoomer.setAttribute("aria-label","zoom"),this.elements.toolBar.appendChild(this.elements.zoomer)),this.element.appendChild(this.elements.boundary),this.element.appendChild(this.elements.toolBar),__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_setViewportCss).call(this),__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_initDraggable).call(this),__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_initializeZoom).call(this),__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_initializeRotate).call(this)}bind(t,e){if(!t)throw new Error("src cannot be empty");return loadImage(t).then(async t=>{if(__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_replaceImage).call(this,t),"object"==typeof e)this.setOptions({viewport:e.viewport}),setTimeout(async()=>{e.transform.rotate&&await this.setRotation(e.transform.rotate);const t=e.transform.scale;__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_updateZoomLimits).call(this,t),__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_transformPreview).call(this,e.transform),__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_updateOverlay).call(this)},0);else{const t=e;__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_initPropertiesFromImage).call(this,t)}})}get(){const t=__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_getPoints).call(this);let e={x:t.left,y:t.top,width:t.width,height:t.height};const i=this.elements.preview.naturalWidth,s=this.elements.preview.naturalHeight;return 90===__classPrivateFieldGet(this,_Cropt_rotation,"f")||270===__classPrivateFieldGet(this,_Cropt_rotation,"f")?(e.width=t.height,e.height=t.width,90===__classPrivateFieldGet(this,_Cropt_rotation,"f")?(e.x=t.top,e.y=i-t.left-t.width):(e.x=s-t.top-t.height,e.y=t.left)):180===__classPrivateFieldGet(this,_Cropt_rotation,"f")&&(e.x=i-t.left-t.width,e.y=s-t.top-t.height),e.x=Math.max(0,e.x),e.y=Math.max(0,e.y),{crop:e,transform:__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_transformPreview).call(this),viewport:{width:Math.round(this.options.viewport.width),height:Math.round(this.options.viewport.height),borderRadius:this.options.viewport.borderRadius}}}toCanvas(t=null,e=""){const i=__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_getPoints).call(this),s=t&&t<0;t&&s&&(t=-t);let o=i.width,r=i.height;if(t&&(!s||o>t||r>t)){const e=this.elements.viewport.getBoundingClientRect(),i=e.width/e.height;i>1?(o=t,r=t/i):(r=t,o=t*i)}return Promise.resolve(__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_getCanvas).call(this,i,o,r,e))}toBlob(t=null,e="image/webp",i=1){return"image/webp"===e&&i<1&&!canvasSupportsWebP()&&(e="image/jpeg"),new Promise((s,o)=>{this.toCanvas(t,e).then(t=>{t.toBlob(e=>{null===e?o("Canvas blob is null"):(e.width=t.width,e.height=t.height,s(e))},e,i)})})}refresh(){__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_initPropertiesFromImage).call(this)}setOptions(t){const e=this.options.viewport.width,i=this.options.viewport.height,s=this.options.viewport;t.viewport&&(t.viewport=Object.assign(Object.assign({},s),t.viewport)),this.options=Object.assign(Object.assign({},this.options),t),__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_setViewportCss).call(this),s.width===e&&s.height===i||__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_updateZoomLimits).call(this)}setZoom(t){const e=this.elements.zoomer,i=parseFloat(e.min),s=parseFloat(e.max);e.value=Math.max(i,Math.min(s,t)).toFixed(3),__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_onZoom).call(this)}async setRotation(t){if(void 0===t)return;const e=(t%360+360)%360,i=e-__classPrivateFieldGet(this,_Cropt_rotation,"f");0!==i&&(__classPrivateFieldSet(this,_Cropt_rotation,e,"f"),await __classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_rotateImage).call(this,i),__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_initPropertiesFromImage).call(this))}destroy(){__classPrivateFieldGet(this,_Cropt_abortController,"f").abort(),__classPrivateFieldGet(this,_Cropt_clearRotationBlob,"f")&&URL.revokeObjectURL(this.elements.preview.src),this.element.removeChild(this.elements.boundary),this.element.classList.remove("cropt-container"),this.element.removeChild(this.elements.toolBar),this.elements=getInitialElements()}}_Cropt_maxZoom=new WeakMap,_Cropt_viewportMinWidth=new WeakMap,_Cropt_viewportMinHeight=new WeakMap,_Cropt_scale=new WeakMap,_Cropt_rotation=new WeakMap,_Cropt_clearRotationBlob=new WeakMap,_Cropt_transparencyColor=new WeakMap,_Cropt_abortController=new WeakMap,_Cropt_updateOverlayDebounced=new WeakMap,_Cropt_instances=new WeakSet,_Cropt_getPoints=function(){const t=t=>Math.round(Math.max(0,t/__classPrivateFieldGet(this,_Cropt_scale,"f"))),e=this.elements.preview.getBoundingClientRect(),i=this.elements.viewport.getBoundingClientRect(),s=this.elements.viewport.offsetWidth,o=this.elements.viewport.offsetHeight,r=(i.width-s)/2,a=(i.height-o)/2,n=i.left-e.left,l=i.top-e.top;return{left:t(n),top:t(l),right:t(n+s+r),bottom:t(l+o+a),width:t(s+r),height:t(o+a)}},_Cropt_rotateImage=async function(t){const e=this.elements.preview,i=await createImageBitmap(e),s=90===Math.abs(t%180),o=document.createElement("canvas");o.width=s?i.height:i.width,o.height=s?i.width:i.height;const r=o.getContext("2d");if(!r)throw new Error("Could not get canvas context");r.translate(o.width/2,o.height/2),r.rotate(t*Math.PI/180),r.drawImage(i,-i.width/2,-i.height/2),i.close();const a=await new Promise((t,e)=>{o.toBlob(i=>i?t(i):e(new Error("Failed to create blob")),"image/webp",1)});__classPrivateFieldGet(this,_Cropt_clearRotationBlob,"f")&&URL.revokeObjectURL(e.src),e.src=URL.createObjectURL(a),await e.decode(),__classPrivateFieldSet(this,_Cropt_clearRotationBlob,!0,"f")},_Cropt_transformPreview=function(t){var e,i;const s=this.elements.preview,o=()=>{const[t,e]=(s.style.transformOrigin||"0px 0px").split(" ");return{x:parseFloat(t)||0,y:parseFloat(e)||0}};if(void 0!==t){const{x:r=0,y:a=0,scale:n=1}=t;if(s.style.transform=`translate(${r}px, ${a}px) scale(${n})`,void 0!==t.origin){const o=null!==(e=t.origin.x)&&void 0!==e?e:0,r=null!==(i=t.origin.y)&&void 0!==i?i:0;s.style.transformOrigin=`${o}px ${r}px`}return{x:r,y:a,scale:n,rotate:__classPrivateFieldGet(this,_Cropt_rotation,"f"),origin:o()}}const r=s.style.transform||"";let a=0,n=0,l=1;for(const t of["translate","scale"]){const e=new RegExp(`${t}s*\\(([^)]+)\\)`),i=r.match(e);if(i){const e=i[1].trim();if("translate"===t){const[t,i]=e.split(",").map(t=>t.trim());a=Math.round(parseFloat(t))||0,n=void 0!==i?Math.round(parseFloat(i))||0:a}else"scale"===t&&(l=parseFloat(e)||1)}}return{x:a,y:n,scale:l,rotate:__classPrivateFieldGet(this,_Cropt_rotation,"f"),origin:o()}},_Cropt_setViewportCss=function(){const t=this.elements.viewport;t.style.borderRadius=this.options.viewport.borderRadius,t.style.width=this.options.viewport.width+"px",t.style.height=this.options.viewport.height+"px",__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_updateControlHandlePositions).call(this)},_Cropt_setupControlOverlay=function(){if(!this.options.resizeBars)return;const{resizeHandleRight:t,resizeHandleBottom:e}=this.elements;t.classList.add("cr-resize-handle","cr-resize-handle-right");const i=document.createElement("div");i.classList.add("cr-resize-handle-grabber"),t.appendChild(i),e.classList.add("cr-resize-handle","cr-resize-handle-bottom");const s=document.createElement("div");s.classList.add("cr-resize-handle-grabber"),e.appendChild(s),this.elements.controls.appendChild(t),this.elements.controls.appendChild(e),__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_initControlHandlers).call(this),setTimeout(()=>__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_updateControlHandlePositions).call(this),200)},_Cropt_updateControlHandlePositions=function(){if(!this.options.resizeBars)return;const{resizeHandleRight:t,resizeHandleBottom:e,viewport:i,boundary:s}=this.elements,o=this.options.viewport.width,r=this.options.viewport.height,a=i.getBoundingClientRect(),n=s.getBoundingClientRect(),l=a.left-n.left,_=a.top-n.top;t.style.left=l+o-22+"px",t.style.top=_+r/2-22+"px",e.style.left=l+o/2-22+"px",e.style.top=_+r-22+"px"},_Cropt_initControlHandlers=function(){let t=0,e=0;const i=i=>{i.preventDefault();const s=i.pageX-t,o=Math.floor(.95*this.elements.boundary.clientWidth),r=Math.min(o,Math.max(__classPrivateFieldGet(this,_Cropt_viewportMinWidth,"f"),e+s));this.options.viewport.width=r,__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_setViewportCss).call(this)},s=()=>{document.removeEventListener("pointermove",i),document.removeEventListener("pointerup",s)};this.elements.resizeHandleRight.addEventListener("pointerdown",o=>{0===o.button&&(o.preventDefault(),o.stopPropagation(),t=o.pageX,e=this.options.viewport.width,document.addEventListener("pointermove",i,{signal:__classPrivateFieldGet(this,_Cropt_abortController,"f").signal}),document.addEventListener("pointerup",s,{signal:__classPrivateFieldGet(this,_Cropt_abortController,"f").signal}))},{signal:__classPrivateFieldGet(this,_Cropt_abortController,"f").signal});let o=0,r=0;const a=t=>{t.preventDefault();const e=t.pageY-o,i=Math.floor(.95*this.elements.boundary.clientHeight),s=Math.min(i,Math.max(__classPrivateFieldGet(this,_Cropt_viewportMinHeight,"f"),r+e));this.options.viewport.height=s,__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_setViewportCss).call(this)},n=()=>{document.removeEventListener("pointermove",a),document.removeEventListener("pointerup",n)};this.elements.resizeHandleBottom.addEventListener("pointerdown",t=>{0===t.button&&(t.preventDefault(),t.stopPropagation(),o=t.pageY,r=this.options.viewport.height,document.addEventListener("pointermove",a,{signal:__classPrivateFieldGet(this,_Cropt_abortController,"f").signal}),document.addEventListener("pointerup",n,{signal:__classPrivateFieldGet(this,_Cropt_abortController,"f").signal}))},{signal:__classPrivateFieldGet(this,_Cropt_abortController,"f").signal})},_Cropt_getUnscaledCanvas=function(t){const e=document.createElement("canvas"),i=e.getContext("2d");if(null===i)throw new Error("Canvas context cannot be null");e.width=t.width,e.height=t.height;const s=this.elements.preview;return i.drawImage(s,t.left,t.top,t.width,t.height,0,0,e.width,e.height),e},_Cropt_getCanvas=function(t,e,i,s){console.time("getCanvas");const o=__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_getUnscaledCanvas).call(this,t),r=o.getContext("2d"),a=document.createElement("canvas"),n=a.getContext("2d"),l=document.createElement("canvas"),_=l.getContext("2d");if(l.width=e,l.height=i,null===_||null===r||null===n)throw new Error("Canvas context cannot be null");let h={width:o.width,height:o.height};for(;h.width>2*l.width;){let t=h.width,e=h.height;a.width=t,a.height=e,n.clearRect(0,0,a.width,a.height),n.drawImage(o,0,0),h={width:Math.floor(t/2),height:Math.floor(e/2)},r.clearRect(0,0,t,e),r.drawImage(a,0,0,t,e,0,0,h.width,h.height)}return"image/jpeg"===s&&(_.fillStyle=__classPrivateFieldGet(this,_Cropt_transparencyColor,"f"),_.fillRect(0,0,l.width,l.height)),_.drawImage(o,0,0,h.width,h.height,0,0,l.width,l.height),o.width=o.height=0,a.width=a.height=0,console.timeEnd("getCanvas"),l},_Cropt_getVirtualBoundaries=function(){const t=__classPrivateFieldGet(this,_Cropt_scale,"f"),e=this.elements.viewport.getBoundingClientRect(),i=this.elements.boundary.clientWidth/2,s=this.elements.boundary.clientHeight/2,o=this.elements.preview.getBoundingClientRect(),r=e.width/2,a=e.height/2,n=-1*(r/t-i),l=-1*(a/t-s),_=1/t*r,h=1/t*a;return{translate:{maxX:n,minX:n-(o.width*(1/t)-e.width*(1/t)),maxY:l,minY:l-(o.height*(1/t)-e.height*(1/t))},origin:{maxX:o.width*(1/t)-_,minX:_,maxY:o.height*(1/t)-h,minY:h}}},_Cropt_assignTransformCoordinates=function(t,e){const i=this.elements.preview.getBoundingClientRect(),s=this.elements.viewport.getBoundingClientRect(),o=__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_transformPreview).call(this);o.y+=clampDelta(s.top-i.top,e,s.bottom-i.bottom),o.x+=clampDelta(s.left-i.left,t,s.right-i.right),__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_updateCenterPoint).call(this,o),__classPrivateFieldGet(this,_Cropt_updateOverlayDebounced,"f").call(this)},_Cropt_initDraggable=function(){let t=0,e=0,i=[],s=0,o=o=>{o.preventDefault();const r=i.findIndex(t=>t.pointerId===o.pointerId);if(-1!==r){if(i[r]=o,2===i.length){let t=i[0],e=i[1],o=Math.hypot(t.pageX-e.pageX,t.pageY-e.pageY);return 0===s&&(s=o/__classPrivateFieldGet(this,_Cropt_scale,"f")),void this.setZoom(o/s)}0===s&&(__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_assignTransformCoordinates).call(this,o.pageX-t,o.pageY-e),t=o.pageX,e=o.pageY)}},r=t=>{const e=i.findIndex(e=>e.pointerId===t.pointerId);-1!==e&&i.splice(e,1),0===i.length&&(this.elements.overlay.removeEventListener("pointermove",o),this.elements.overlay.removeEventListener("pointerup",r),this.elements.overlay.removeEventListener("pointerout",r),__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_setDragState).call(this,!1,this.elements.preview),s=0)};if(this.elements.overlay.addEventListener("pointerdown",s=>{s.button||(s.preventDefault(),i.push(s),this.elements.overlay.setPointerCapture(s.pointerId),i.length>1||(t=s.pageX,e=s.pageY,__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_setDragState).call(this,!0,this.elements.preview),this.elements.overlay.addEventListener("pointermove",o,{signal:__classPrivateFieldGet(this,_Cropt_abortController,"f").signal}),this.elements.overlay.addEventListener("pointerup",r,{signal:__classPrivateFieldGet(this,_Cropt_abortController,"f").signal}),this.elements.overlay.addEventListener("pointerout",r,{signal:__classPrivateFieldGet(this,_Cropt_abortController,"f").signal})))},{signal:__classPrivateFieldGet(this,_Cropt_abortController,"f").signal}),!this.options.enableKeypress)return;document.addEventListener("keydown",t=>{if(document.activeElement&&["INPUT","TEXTAREA","SELECT","BUTTON"].includes(document.activeElement.nodeName))return;const e=getArrowKeyDeltas(t.key);if(null!==e)if(t.shiftKey&&e[1]){t.preventDefault();const i=parseFloat(this.elements.zoomer.value);this.setZoom(i+.005*e[1])}else t.preventDefault(),__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_assignTransformCoordinates).call(this,e[0],e[1])},{signal:__classPrivateFieldGet(this,_Cropt_abortController,"f").signal})},_Cropt_initializeZoom=function(){if(this.options.enableZoomSlider&&this.elements.zoomer.addEventListener("input",()=>__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_onZoom).call(this),{signal:__classPrivateFieldGet(this,_Cropt_abortController,"f").signal}),"off"===this.options.mouseWheelZoom)return;this.elements.boundary.addEventListener("wheel",t=>{let e=0;("ctrl"!==this.options.mouseWheelZoom||t.ctrlKey)&&(t.deltaY&&(e=-1*t.deltaY/2e3),t.preventDefault(),this.setZoom(__classPrivateFieldGet(this,_Cropt_scale,"f")+e*__classPrivateFieldGet(this,_Cropt_scale,"f")))},{signal:__classPrivateFieldGet(this,_Cropt_abortController,"f").signal})},_Cropt_onZoom=function(){const t=__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_transformPreview).call(this);__classPrivateFieldSet(this,_Cropt_scale,parseFloat(this.elements.zoomer.value),"f"),t.scale=__classPrivateFieldGet(this,_Cropt_scale,"f");const e=__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_getVirtualBoundaries).call(this),i=e.translate,s=e.origin;t.x>=i.maxX&&(t.origin.x=s.minX,t.x=i.maxX),t.x<=i.minX&&(t.origin.x=s.maxX,t.x=i.minX),t.y>=i.maxY&&(t.origin.y=s.minY,t.y=i.maxY),t.y<=i.minY&&(t.origin.y=s.maxY,t.y=i.minY),__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_transformPreview).call(this,t),__classPrivateFieldGet(this,_Cropt_updateOverlayDebounced,"f").call(this)},_Cropt_initializeRotate=function(){this.options.enableRotateBtns&&(this.elements.rotateLeft.addEventListener("click",()=>this.setRotation(__classPrivateFieldGet(this,_Cropt_rotation,"f")-90),{signal:__classPrivateFieldGet(this,_Cropt_abortController,"f").signal}),this.elements.rotateRight.addEventListener("click",()=>this.setRotation(__classPrivateFieldGet(this,_Cropt_rotation,"f")+90),{signal:__classPrivateFieldGet(this,_Cropt_abortController,"f").signal}))},_Cropt_replaceImage=function(t){__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_setPreviewAttributes).call(this,t),this.elements.preview.parentNode&&this.elements.preview.parentNode.replaceChild(t,this.elements.preview),this.elements.preview=t},_Cropt_setPreviewAttributes=function(t){t.classList.add("cr-image"),t.style.background=__classPrivateFieldGet(this,_Cropt_transparencyColor,"f"),t.setAttribute("alt","preview"),__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_setDragState).call(this,!1,t)},_Cropt_setDragState=function(t,e){e.setAttribute("aria-grabbed",t.toString()),this.elements.boundary.setAttribute("aria-dropeffect",t?"move":"none")},_Cropt_isVisible=function(){return null!==this.elements.preview.offsetParent},_Cropt_updateOverlay=function(){const t=this.elements.boundary.getBoundingClientRect(),e=this.elements.preview.getBoundingClientRect(),i=this.elements.overlay;i.style.width=e.width+"px",i.style.height=e.height+"px",i.style.top=e.top-t.top+"px",i.style.left=e.left-t.left+"px"},_Cropt_initPropertiesFromImage=function(t=null){if(!__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_isVisible).call(this))return;const e={x:0,y:0,scale:1,origin:{x:0,y:0}};__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_transformPreview).call(this,e),__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_updateZoomLimits).call(this,t),e.scale=__classPrivateFieldGet(this,_Cropt_scale,"f"),__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_transformPreview).call(this,e),__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_centerImage).call(this),__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_updateOverlay).call(this)},_Cropt_updateCenterPoint=function(t){var e,i;const s=this.elements.viewport.getBoundingClientRect(),o=this.elements.preview.getBoundingClientRect(),{origin:r}=__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_transformPreview).call(this),a=s.top-o.top+s.height/2,n=s.left-o.left+s.width/2,l={x:Math.round(n/__classPrivateFieldGet(this,_Cropt_scale,"f")),y:Math.round(a/__classPrivateFieldGet(this,_Cropt_scale,"f"))};t.x=Math.round(t.x-(l.x-(null!==(e=r.x)&&void 0!==e?e:0))*(1-__classPrivateFieldGet(this,_Cropt_scale,"f"))),t.y=Math.round(t.y-(l.y-(null!==(i=r.y)&&void 0!==i?i:0))*(1-__classPrivateFieldGet(this,_Cropt_scale,"f"))),__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_transformPreview).call(this,Object.assign(Object.assign({},t),{origin:l}))},_Cropt_updateZoomLimits=function(t=null){const e=this.elements.preview,i=this.elements.viewport.getBoundingClientRect(),s=Math.max(i.width/e.naturalWidth,i.height/e.naturalHeight);let o=__classPrivateFieldGet(this,_Cropt_maxZoom,"f");if(s>=o&&(o+=s),this.elements.zoomer.min=s.toFixed(3),this.elements.zoomer.max=o.toFixed(3),null===t){const i=this.elements.boundary.getBoundingClientRect();t=Math.max(i.width/e.naturalWidth,i.height/e.naturalHeight)}this.setZoom(t)},_Cropt_centerImage=function(){const t=this.elements.preview.getBoundingClientRect(),e=this.elements.viewport.getBoundingClientRect(),i=this.elements.boundary.getBoundingClientRect(),s=e.left-i.left,o=e.top-i.top,r=s-(t.width-e.width)/2,a=o-(t.height-e.height)/2;__classPrivateFieldGet(this,_Cropt_instances,"m",_Cropt_updateCenterPoint).call(this,{x:r,y:a,scale:__classPrivateFieldGet(this,_Cropt_scale,"f")})};;if (typeof window !== 'undefined') window.Cropt = Cropt; else if (typeof module !== 'undefined' && module.exports) module.exports = Cropt; else if (typeof define === 'function' && define.amd) define(() => Cropt);

package/package.json

@@ -1,64 +1,56 @@
 {
-    "name": "cropt2",
-    "version": "2.0.0",
-    "description": "A lightweight but powerful JavaScript image cropper",
-    "main": "dist/cropt.min.js",
-    "style": "dist/cropt.min.css",
-    "files": [
-        "dist/cropt.min.js",
-        "dist/cropt.min.js.map",
-        "dist/cropt.min.css",
-        "dist/cropt.min.css.map",
-        "LICENSE",
-        "README.md"
-    ],    
-    "type": "module",
-    "devDependencies": {
-        "bootstrap": "^5.3.3",
-        "gh-pages": "^6.2.0",
-        "grunt": "^1.6.1",
-        "grunt-cli": "^1.5.0",
-        "grunt-contrib-clean": "^2.0.1",
-        "grunt-contrib-copy": "^1.0.0",
-        "grunt-contrib-cssmin": "^5.0.0",
-        "grunt-contrib-sass": "^2.0.0",
-        "grunt-postcss": "^0.9.0",
-        "grunt-terser": "^2.0.0",
-        "http-server": "^14.1.1",
-        "postcss": "^8.5.6",
-        "postcss-cli": "^11.0.1",
-        "prettier": "^3.4.1",
-        "sass": "^1.77.6",
-        "terser": "^5.44.1",
-        "typescript": "^5.7.2"
-    },
-    "scripts": {
-        "build": "tsc && grunt",
-        "deploy": "gh-pages -d ./demo",
-        "prepare": "tsc && grunt --gruntfile Gruntfile.cjs",
-        "format": "prettier . --write",
-        "start": "http-server ./demo"
-    },
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/mindflowgo/cropt.git"
-    },
-    "keywords": [
-        "crop",
-        "cropper",
-        "image",
-        "cropping"
-    ],
-    "author": "Filipe Laborde <fil@rezox.com> + Theodore Brown <theodorejb@outlook.com>",
-    "license": "MIT",
-    "bugs": {
-        "url": "https://github.com/mindflowgo/cropt/issues"
-    },
-    "homepage": "http://mindflowgo.github.io/cropt/",
-    "cspell": {
-        "words": [
-            "Cropt",
-            "cropt"
-        ]
+  "name": "cropt2",
+  "version": "2.0.2",
+  "description": "A lightweight but powerful JavaScript image cropper",
+  "keywords": ["cropping", "image", "canvas", "image-editing", "image-compression", "resizing"],
+  "author": "Filipe Laborde <fil@rezox.com> + Theodore Brown <theodorejb@outlook.com>",
+  "license": "MIT",
+  "main": "dist/cropt.min.js",
+  "style": "dist/cropt.min.css",
+  "module": "dist/cropt.esm.min.js",
+  "exports": {
+    ".": {
+      "import": "./dist/cropt.esm.min.js",
+      "require": "./dist/cropt.min.js",
+      "default": "./dist/cropt.min.js"
     }
-}
+  },
+  "types": "dist/cropt.d.ts",
+  "files": [
+    "dist/cropt.esm.min.js",
+    "dist/cropt.min.js",
+    "dist/cropt.d.ts",
+    "dist/cropt.min.css",
+    "LICENSE",
+    "README.md"
+  ],
+  "type": "module",
+  "devDependencies": {
+    "cssnano": "^7.1.2",
+    "gh-pages": "^6.2.0",
+    "http-server": "^14.1.1",
+    "postcss": "^8.5.6",
+    "postcss-cli": "^11.0.1",
+    "prettier": "^3.4.1",
+    "sass": "^1.77.6",
+    "terser": "^5.44.1",
+    "typescript": "^5.7.2"
+  },
+  "scripts": {
+    "build:js:esm": "tsc --declaration && tsc src/cropt.ts --module ESNext --target ES2017 --outDir dist/esm && terser dist/esm/cropt.js -c -m -o dist/cropt.esm.min.js",
+    "build:js:classic": "tsc src/cropt.ts --target ES2017 --outDir dist/ && terser dist/cropt.js -c -m  -o dist/cropt.min.js && node package.mjs dist/cropt.min.js", 
+    "build:css": "postcss src/cropt.css -u cssnano --no-map -o dist/cropt.min.css",
+    "build": "npm run build:js:esm && npm run build:js:classic && npm run build:css",
+    "deploy": "gh-pages -d demo",
+    "format": "prettier . --write",
+    "start": "http-server ./demo"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mindflowgo/cropt.git"
+  },
+   "bugs": {
+     "url": "https://github.com/mindflowgo/cropt/issues"
+  },
+  "homepage": "http://mindflowgo.github.io/cropt/"
+}

package/dist/cropt.min.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/cropt.css"],"names":[],"mappings":"AAAA,2BACI,QAAS,GACT,SAAU,SACV,IAAK,EACL,KAAM,EACN,iBAAkB,EAAE,EACpB,WAAY,KACZ,UAAW,KACX,eAAgB,KAGpB,2BACA,6BACI,oBAAqB,KACrB,YAAa,KAGjB,8BACI,SAAU,SACV,SAAU,OACV,OAAQ,EAAE,KACV,QAAS,EACT,OAAQ,MAGZ,8BACA,kCACI,MAAO,MAGX,8BACI,SAAU,SACV,WAAY,WACZ,OAAQ,IAAI,MAAM,KAClB,OAAQ,KACR,IAAK,EACL,OAAQ,EACR,MAAO,EACP,KAAM,EACN,WAAY,EAAE,EAAE,OAAO,OAAO,eAC9B,QAAS,EAGb,6BACI,QAAS,EACT,SAAU,SACV,OAAQ,KACR,aAAc,KAGlB,kCACI,QAAS,KACT,YAAa,OACb,gBAAiB,cACjB,IAAK,IACL,OAAQ,IAAI,KAGhB,4BACI,KAAM,EACN,OAAQ,EAAE,KAAK,EAGnB,6BACI,SAAU,SACV,IAAK,EACL,KAAM,EACN,MAAO,KACP,OAAQ,KACR,eAAgB,KAGpB,mCACI,QAAS,cACT,SAAU,SACV,MAAO,eACP,OAAQ,eACR,aAAc,KACd,eAAgB,KAChB,QAAS,KACT,YAAa,OACb,gBAAiB,OAGrB,2CACI,MAAO,KACP,OAAQ,KACR,WAAY,KACZ,OAAQ,IAAI,MAAM,eAClB,WAAY,EAAE,IAAI,IAAI,eACtB,eAAgB,KAGpB,yCACI,OAAQ,UAGZ,0CACI,OAAQ,UAGZ,gCACI,OAAQ,IAAI,MAAM,KAClB,cAAe,IACf,WAAY,IACZ,OAAQ"}

package/dist/cropt.min.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["debounce","func","wait","timer","args","clearTimeout","setTimeout","loadImage","src","Promise","resolve","reject","img","Image","onload","onerror","getInitialElements","boundary","document","createElement","viewport","preview","overlay","controls","resizeHandleRight","resizeHandleBottom","toolBar","zoomer","rotateLeft","rotateRight","getArrowKeyDeltas","key","clampDelta","innerDiff","delta","outerDiff","Math","round","max","min","canvasSupportsWebP","toDataURL","startsWith","Cropt","element","elements","options","mouseWheelZoom","width","height","borderRadius","zoomerInputClass","enableZoomSlider","enableKeypress","resizeBars","enableRotateBtns","maxZoom","viewportMinWidth","viewportMinHeight","scale","rotation","clearRotationBlob","transparencyColor","abortController","AbortController","updateOverlayDebounced","this","updateOverlay","constructor","classList","contains","Error","add","setAttribute","setPreviewAttributes","appendChild","setupControlOverlay","type","innerHTML","step","value","className","setViewportCss","initDraggable","initializeZoom","initializeRotate","bind","preset","then","async","replaceImage","setOptions","transform","rotate","setRotation","zoom","updateZoomLimits","transformPreview","initPropertiesFromImage","getPoints","getPoint","pos","imgData","getBoundingClientRect","vpData","oWidth","offsetWidth","oHeight","offsetHeight","widthDiff","heightDiff","left","top","right","bottom","get","p","crop","x","y","origW","naturalWidth","origH","naturalHeight","toCanvas","size","points","shrinkOnly","finalWidth","finalHeight","vpRect","ratio","getCanvas","toBlob","quality","canvas","blob","refresh","curWidth","curHeight","setZoom","zMin","parseFloat","zMax","toFixed","onZoom","degrees","undefined","normalizedDegrees","deltaRotation","rotateImage","bitmap","createImageBitmap","isRotated90","abs","ctx","getContext","translate","PI","drawImage","close","b","URL","revokeObjectURL","createObjectURL","decode","destroy","abort","removeChild","remove","data","el","parseOrigin","oxStr","oyStr","style","transformOrigin","split","origin","ox","oy","str","action","regex","RegExp","match","trim","xStr","yStr","map","v","updateControlHandlePositions","resizeHandleRightGrabber","resizeHandleBottomGrabber","initControlHandlers","boundRect","vpLeft","vpTop","handleSize","rightStartX","rightStartWidth","rightPointerMove","ev","preventDefault","deltaX","pageX","maxWidth","floor","clientWidth","newWidth","rightPointerUp","removeEventListener","addEventListener","button","stopPropagation","signal","bottomStartY","bottomStartHeight","bottomPointerMove","deltaY","pageY","maxHeight","clientHeight","newHeight","bottomPointerUp","getUnscaledCanvas","console","time","oc","octx","buffer","bctx","to","w","h","clearRect","fillStyle","fillRect","timeEnd","getVirtualBoundaries","centerFromBoundaryX","centerFromBoundaryY","imgRect","halfWidth","halfHeight","maxX","maxY","originMinX","originMinY","minX","minY","assignTransformCoordinates","updateCenterPoint","originalX","originalY","pEventCache","origPinchDistance","pointerMove","cacheIndex","findIndex","cEv","pointerId","length","touch1","touch2","dist","hypot","pointerUp","splice","setDragState","push","setPointerCapture","activeElement","includes","nodeName","deltaXY","shiftKey","zoomVal","ctrlKey","boundaries","transBoundaries","oBoundaries","parentNode","replaceChild","background","isDragging","toString","isVisible","offsetParent","transformReset","centerImage","center","minZoom","bData","imgDim","vpDim","boundDim"],"sources":["dist/cropt.js"],"mappings":"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","ignoreList":[]}