cropt2 2.0.3 → 2.0.5

package/LICENSE

@@ -2,6 +2,7 @@ MIT License
 
 Copyright (c) 2015 Foliotek Inc
 Copyright (c) 2023 Theodore Brown
+Copyright (c) 2026 Filipe Laborde-Basto
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
 documentation files (the "Software"), to deal in the Software without restriction, including without limitation the

package/README.md

@@ -9,6 +9,11 @@ keyboard handling, and various optimizations and bug fixes. And packed to work a
 esm package, etc.
 
 
+## Quick Start
+
+- Look at the /docs directory for examples.
+- Try our [codepen](https://codepen.io/mindflowgo/pen/QwEbegE).
+
 ## Installation
 
 ```

package/dist/cropt.esm.min.js

@@ -1 +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;
+function t(){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 e(t,e,i){return Math.round(Math.max(Math.min(t,e),i))}export default class{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=function(t,e){let i;return(...n)=>{clearTimeout(i),i=setTimeout(()=>t(...n),e)}}(()=>{this.#h()},100);constructor(e,i){if(e.classList.contains("cropt-container"))throw new Error("Cropt is already initialized on this element");i.viewport&&(i.viewport={...this.options.viewport,...i.viewport}),this.options={...this.options,...i},this.options.transparencyColor&&(this.#r=this.options.transparencyColor),this.element=e,this.element.classList.add("cropt-container"),this.elements=t(),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 function(t){return new Promise((e,i)=>{const n=new Image;n.crossOrigin="anonymous",n.onload=()=>{e(n)},n.onerror=i,n.src=t})}(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.#f(e.transform),this.#h()},0);else{const t=e;this.#b(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.#f(),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&&!document.createElement("canvas").toDataURL("image/webp").startsWith("data:image/webp")&&(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.#b()}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.#b())}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=t()}#f(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}}}#M(t,i){const n=this.elements.preview.getBoundingClientRect(),s=this.elements.viewport.getBoundingClientRect(),o=this.#f();o.y+=e(s.top-n.top,i,s.bottom-n.bottom),o.x+=e(s.left-n.left,t,s.right-n.right),this.#P(o),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.#M(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=function(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}}(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.#M(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.#f();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.#f(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")}#H(){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"}#b(t=null){if(!this.#H())return;const e={x:0,y:0,scale:1,origin:{x:0,y:0}};this.#f(e),this.#w(t),e.scale=this.#n,this.#f(e),this.#Z(),this.#h()}#P(t){const e=this.elements.viewport.getBoundingClientRect(),i=this.elements.preview.getBoundingClientRect(),{origin:n}=this.#f(),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.#f({...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)}#Z(){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.#P({x:o,y:r,scale:this.#n})}}

package/dist/cropt.min.js

@@ -1 +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")})};;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);
+var t,e,i,s,n,o,a,h,r,l,m,c,d,p,u,g,w,f,v,y,b,x,E,C,L,R,M,B,z,W,O,Y,j,I,X=this&&this.__classPrivateFieldSet||function(t,e,i,s,n){if("m"===s)throw new TypeError("Private method is not writable");if("a"===s&&!n)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof e?t!==e||!n:!e.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===s?n.call(t,i):n?n.value=i:e.set(t,i),i},k=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 T(){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 H(t,e,i){return Math.round(Math.max(Math.min(t,e),i))}e=new WeakMap,i=new WeakMap,s=new WeakMap,n=new WeakMap,o=new WeakMap,a=new WeakMap,h=new WeakMap,r=new WeakMap,l=new WeakMap,t=new WeakSet,m=function(){const t=t=>Math.round(Math.max(0,t/k(this,n,"f"))),e=this.elements.preview.getBoundingClientRect(),i=this.elements.viewport.getBoundingClientRect(),s=this.elements.viewport.offsetWidth,o=this.elements.viewport.offsetHeight,a=(i.width-s)/2,h=(i.height-o)/2,r=i.left-e.left,l=i.top-e.top;return{left:t(r),top:t(l),right:t(r+s+a),bottom:t(l+o+h),width:t(s+a),height:t(o+h)}},c=async function(t){const e=this.elements.preview,i=await createImageBitmap(e),s=90===Math.abs(t%180),n=document.createElement("canvas");n.width=s?i.height:i.width,n.height=s?i.width:i.height;const o=n.getContext("2d");if(!o)throw new Error("Could not get canvas context");o.translate(n.width/2,n.height/2),o.rotate(t*Math.PI/180),o.drawImage(i,-i.width/2,-i.height/2),i.close();const h=await new Promise((t,e)=>{n.toBlob(i=>i?t(i):e(new Error("Failed to create blob")),"image/webp",1)});k(this,a,"f")&&URL.revokeObjectURL(e.src),e.src=URL.createObjectURL(h),await e.decode(),X(this,a,!0,"f")},d=function(t){var e,i;const s=this.elements.preview,n=()=>{const[t,e]=(s.style.transformOrigin||"0px 0px").split(" ");return{x:parseFloat(t)||0,y:parseFloat(e)||0}};if(void 0!==t){const{x:a=0,y:h=0,scale:r=1}=t;if(s.style.transform=`translate(${a}px, ${h}px) scale(${r})`,void 0!==t.origin){const n=null!==(e=t.origin.x)&&void 0!==e?e:0,o=null!==(i=t.origin.y)&&void 0!==i?i:0;s.style.transformOrigin=`${n}px ${o}px`}return{x:a,y:h,scale:r,rotate:k(this,o,"f"),origin:n()}}const a=s.style.transform||"";let h=0,r=0,l=1;for(const t of["translate","scale"]){const e=new RegExp(`${t}s*\\(([^)]+)\\)`),i=a.match(e);if(i){const e=i[1].trim();if("translate"===t){const[t,i]=e.split(",").map(t=>t.trim());h=Math.round(parseFloat(t))||0,r=void 0!==i?Math.round(parseFloat(i))||0:h}else"scale"===t&&(l=parseFloat(e)||1)}}return{x:h,y:r,scale:l,rotate:k(this,o,"f"),origin:n()}},p=function(){const e=this.elements.viewport;e.style.borderRadius=this.options.viewport.borderRadius,e.style.width=this.options.viewport.width+"px",e.style.height=this.options.viewport.height+"px",k(this,t,"m",g).call(this)},u=function(){if(!this.options.resizeBars)return;const{resizeHandleRight:e,resizeHandleBottom:i}=this.elements;e.classList.add("cr-resize-handle","cr-resize-handle-right");const s=document.createElement("div");s.classList.add("cr-resize-handle-grabber"),e.appendChild(s),i.classList.add("cr-resize-handle","cr-resize-handle-bottom");const n=document.createElement("div");n.classList.add("cr-resize-handle-grabber"),i.appendChild(n),this.elements.controls.appendChild(e),this.elements.controls.appendChild(i),k(this,t,"m",w).call(this),setTimeout(()=>k(this,t,"m",g).call(this),200)},g=function(){if(!this.options.resizeBars)return;const{resizeHandleRight:t,resizeHandleBottom:e,viewport:i,boundary:s}=this.elements,n=this.options.viewport.width,o=this.options.viewport.height,a=i.getBoundingClientRect(),h=s.getBoundingClientRect(),r=a.left-h.left,l=a.top-h.top;t.style.left=r+n-22+"px",t.style.top=l+o/2-22+"px",e.style.left=r+n/2-22+"px",e.style.top=l+o-22+"px"},w=function(){let e=0,n=0;const o=s=>{s.preventDefault();const o=s.pageX-e,a=Math.floor(.95*this.elements.boundary.clientWidth),h=Math.min(a,Math.max(k(this,i,"f"),n+o));this.options.viewport.width=h,k(this,t,"m",p).call(this)},a=()=>{document.removeEventListener("pointermove",o),document.removeEventListener("pointerup",a)};this.elements.resizeHandleRight.addEventListener("pointerdown",t=>{0===t.button&&(t.preventDefault(),t.stopPropagation(),e=t.pageX,n=this.options.viewport.width,document.addEventListener("pointermove",o,{signal:k(this,r,"f").signal}),document.addEventListener("pointerup",a,{signal:k(this,r,"f").signal}))},{signal:k(this,r,"f").signal});let h=0,l=0;const m=e=>{e.preventDefault();const i=e.pageY-h,n=Math.floor(.95*this.elements.boundary.clientHeight),o=Math.min(n,Math.max(k(this,s,"f"),l+i));this.options.viewport.height=o,k(this,t,"m",p).call(this)},c=()=>{document.removeEventListener("pointermove",m),document.removeEventListener("pointerup",c)};this.elements.resizeHandleBottom.addEventListener("pointerdown",t=>{0===t.button&&(t.preventDefault(),t.stopPropagation(),h=t.pageY,l=this.options.viewport.height,document.addEventListener("pointermove",m,{signal:k(this,r,"f").signal}),document.addEventListener("pointerup",c,{signal:k(this,r,"f").signal}))},{signal:k(this,r,"f").signal})},f=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},v=function(e,i,s,n){console.time("getCanvas");const o=k(this,t,"m",f).call(this,e),a=o.getContext("2d"),r=document.createElement("canvas"),l=r.getContext("2d"),m=document.createElement("canvas"),c=m.getContext("2d");if(m.width=i,m.height=s,null===c||null===a||null===l)throw new Error("Canvas context cannot be null");let d={width:o.width,height:o.height};for(;d.width>2*m.width;){let t=d.width,e=d.height;r.width=t,r.height=e,l.clearRect(0,0,r.width,r.height),l.drawImage(o,0,0),d={width:Math.floor(t/2),height:Math.floor(e/2)},a.clearRect(0,0,t,e),a.drawImage(r,0,0,t,e,0,0,d.width,d.height)}return"image/jpeg"===n&&(c.fillStyle=k(this,h,"f"),c.fillRect(0,0,m.width,m.height)),c.drawImage(o,0,0,d.width,d.height,0,0,m.width,m.height),o.width=o.height=0,r.width=r.height=0,console.timeEnd("getCanvas"),m},y=function(){const t=k(this,n,"f"),e=this.elements.viewport.getBoundingClientRect(),i=this.elements.boundary.clientWidth/2,s=this.elements.boundary.clientHeight/2,o=this.elements.preview.getBoundingClientRect(),a=e.width/2,h=e.height/2,r=-1*(a/t-i),l=-1*(h/t-s),m=1/t*a,c=1/t*h;return{translate:{maxX:r,minX:r-(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)-m,minX:m,maxY:o.height*(1/t)-c,minY:c}}},b=function(e,i){const s=this.elements.preview.getBoundingClientRect(),n=this.elements.viewport.getBoundingClientRect(),o=k(this,t,"m",d).call(this);o.y+=H(n.top-s.top,i,n.bottom-s.bottom),o.x+=H(n.left-s.left,e,n.right-s.right),k(this,t,"m",Y).call(this,o),k(this,l,"f").call(this)},x=function(){let e=0,i=0,s=[],o=0,a=a=>{a.preventDefault();const h=s.findIndex(t=>t.pointerId===a.pointerId);if(-1!==h){if(s[h]=a,2===s.length){let t=s[0],e=s[1],i=Math.hypot(t.pageX-e.pageX,t.pageY-e.pageY);return 0===o&&(o=i/k(this,n,"f")),void this.setZoom(i/o)}0===o&&(k(this,t,"m",b).call(this,a.pageX-e,a.pageY-i),e=a.pageX,i=a.pageY)}},h=e=>{const i=s.findIndex(t=>t.pointerId===e.pointerId);-1!==i&&s.splice(i,1),0===s.length&&(this.elements.overlay.removeEventListener("pointermove",a),this.elements.overlay.removeEventListener("pointerup",h),this.elements.overlay.removeEventListener("pointerout",h),k(this,t,"m",B).call(this,!1,this.elements.preview),o=0)};if(this.elements.overlay.addEventListener("pointerdown",n=>{n.button||(n.preventDefault(),s.push(n),this.elements.overlay.setPointerCapture(n.pointerId),s.length>1||(e=n.pageX,i=n.pageY,k(this,t,"m",B).call(this,!0,this.elements.preview),this.elements.overlay.addEventListener("pointermove",a,{signal:k(this,r,"f").signal}),this.elements.overlay.addEventListener("pointerup",h,{signal:k(this,r,"f").signal}),this.elements.overlay.addEventListener("pointerout",h,{signal:k(this,r,"f").signal})))},{signal:k(this,r,"f").signal}),!this.options.enableKeypress)return;document.addEventListener("keydown",e=>{if(document.activeElement&&["INPUT","TEXTAREA","SELECT","BUTTON"].includes(document.activeElement.nodeName))return;const i=function(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}}(e.key);if(null!==i)if(e.shiftKey&&i[1]){e.preventDefault();const t=parseFloat(this.elements.zoomer.value);this.setZoom(t+.005*i[1])}else e.preventDefault(),k(this,t,"m",b).call(this,i[0],i[1])},{signal:k(this,r,"f").signal})},E=function(){if(this.options.enableZoomSlider&&this.elements.zoomer.addEventListener("input",()=>k(this,t,"m",C).call(this),{signal:k(this,r,"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(k(this,n,"f")+e*k(this,n,"f")))},{signal:k(this,r,"f").signal})},C=function(){const e=k(this,t,"m",d).call(this);X(this,n,parseFloat(this.elements.zoomer.value),"f"),e.scale=k(this,n,"f");const i=k(this,t,"m",y).call(this),s=i.translate,o=i.origin;e.x>=s.maxX&&(e.origin.x=o.minX,e.x=s.maxX),e.x<=s.minX&&(e.origin.x=o.maxX,e.x=s.minX),e.y>=s.maxY&&(e.origin.y=o.minY,e.y=s.maxY),e.y<=s.minY&&(e.origin.y=o.maxY,e.y=s.minY),k(this,t,"m",d).call(this,e),k(this,l,"f").call(this)},L=function(){this.options.enableRotateBtns&&(this.elements.rotateLeft.addEventListener("click",()=>this.setRotation(k(this,o,"f")-90),{signal:k(this,r,"f").signal}),this.elements.rotateRight.addEventListener("click",()=>this.setRotation(k(this,o,"f")+90),{signal:k(this,r,"f").signal}))},R=function(e){k(this,t,"m",M).call(this,e),this.elements.preview.parentNode&&this.elements.preview.parentNode.replaceChild(e,this.elements.preview),this.elements.preview=e},M=function(e){e.classList.add("cr-image"),e.style.background=k(this,h,"f"),e.setAttribute("alt","preview"),k(this,t,"m",B).call(this,!1,e)},B=function(t,e){e.setAttribute("aria-grabbed",t.toString()),this.elements.boundary.setAttribute("aria-dropeffect",t?"move":"none")},z=function(){return null!==this.elements.preview.offsetParent},W=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"},O=function(e=null){if(!k(this,t,"m",z).call(this))return;const i={x:0,y:0,scale:1,origin:{x:0,y:0}};k(this,t,"m",d).call(this,i),k(this,t,"m",j).call(this,e),i.scale=k(this,n,"f"),k(this,t,"m",d).call(this,i),k(this,t,"m",I).call(this),k(this,t,"m",W).call(this)},Y=function(e){var i,s;const o=this.elements.viewport.getBoundingClientRect(),a=this.elements.preview.getBoundingClientRect(),{origin:h}=k(this,t,"m",d).call(this),r=o.top-a.top+o.height/2,l=o.left-a.left+o.width/2,m={x:Math.round(l/k(this,n,"f")),y:Math.round(r/k(this,n,"f"))};e.x=Math.round(e.x-(m.x-(null!==(i=h.x)&&void 0!==i?i:0))*(1-k(this,n,"f"))),e.y=Math.round(e.y-(m.y-(null!==(s=h.y)&&void 0!==s?s:0))*(1-k(this,n,"f"))),k(this,t,"m",d).call(this,Object.assign(Object.assign({},e),{origin:m}))},j=function(t=null){const i=this.elements.preview,s=this.elements.viewport.getBoundingClientRect(),n=Math.max(s.width/i.naturalWidth,s.height/i.naturalHeight);let o=k(this,e,"f");if(n>=o&&(o+=n),this.elements.zoomer.min=n.toFixed(3),this.elements.zoomer.max=o.toFixed(3),null===t){const e=this.elements.boundary.getBoundingClientRect();t=Math.max(e.width/i.naturalWidth,e.height/i.naturalHeight)}this.setZoom(t)},I=function(){const e=this.elements.preview.getBoundingClientRect(),i=this.elements.viewport.getBoundingClientRect(),s=this.elements.boundary.getBoundingClientRect(),o=i.left-s.left,a=i.top-s.top,h=o-(e.width-i.width)/2,r=a-(e.height-i.height)/2;k(this,t,"m",Y).call(this,{x:h,y:r,scale:k(this,n,"f")})};class Cropt{constructor(m,c){if(t.add(this),this.options={mouseWheelZoom:"on",viewport:{width:220,height:220,borderRadius:"0px"},zoomerInputClass:"cr-slider",enableZoomSlider:!0,enableKeypress:!1,resizeBars:!1,enableRotateBtns:!1},e.set(this,.85),i.set(this,50),s.set(this,50),n.set(this,1),o.set(this,0),a.set(this,!1),h.set(this,"#fff"),r.set(this,new AbortController),l.set(this,function(t,e){let i;return(...s)=>{clearTimeout(i),i=setTimeout(()=>t(...s),e)}}(()=>{k(this,t,"m",W).call(this)},100)),m.classList.contains("cropt-container"))throw new Error("Cropt is already initialized on this element");c.viewport&&(c.viewport=Object.assign(Object.assign({},this.options.viewport),c.viewport)),this.options=Object.assign(Object.assign({},this.options),c),this.options.transparencyColor&&X(this,h,this.options.transparencyColor,"f"),this.element=m,this.element.classList.add("cropt-container"),this.elements=T(),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"),k(this,t,"m",M).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),k(this,t,"m",u).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),k(this,t,"m",p).call(this),k(this,t,"m",x).call(this),k(this,t,"m",E).call(this),k(this,t,"m",L).call(this)}bind(e,i){if(!e)throw new Error("src cannot be empty");return function(t){return new Promise((e,i)=>{const s=new Image;s.crossOrigin="anonymous",s.onload=()=>{e(s)},s.onerror=i,s.src=t})}(e).then(async e=>{if(k(this,t,"m",R).call(this,e),"object"==typeof i)this.setOptions({viewport:i.viewport}),setTimeout(async()=>{i.transform.rotate&&await this.setRotation(i.transform.rotate);const e=i.transform.scale;k(this,t,"m",j).call(this,e),k(this,t,"m",d).call(this,i.transform),k(this,t,"m",W).call(this)},0);else{const e=i;k(this,t,"m",O).call(this,e)}})}get(){const e=k(this,t,"m",m).call(this);let i={x:e.left,y:e.top,width:e.width,height:e.height};const s=this.elements.preview.naturalWidth,n=this.elements.preview.naturalHeight;return 90===k(this,o,"f")||270===k(this,o,"f")?(i.width=e.height,i.height=e.width,90===k(this,o,"f")?(i.x=e.top,i.y=s-e.left-e.width):(i.x=n-e.top-e.height,i.y=e.left)):180===k(this,o,"f")&&(i.x=s-e.left-e.width,i.y=n-e.top-e.height),i.x=Math.max(0,i.x),i.y=Math.max(0,i.y),{crop:i,transform:k(this,t,"m",d).call(this),viewport:{width:Math.round(this.options.viewport.width),height:Math.round(this.options.viewport.height),borderRadius:this.options.viewport.borderRadius}}}toCanvas(e=null,i=""){const s=k(this,t,"m",m).call(this),n=e&&e<0;e&&n&&(e=-e);let o=s.width,a=s.height;if(e&&(!n||o>e||a>e)){const t=this.elements.viewport.getBoundingClientRect(),i=t.width/t.height;i>1?(o=e,a=e/i):(a=e,o=e*i)}return Promise.resolve(k(this,t,"m",v).call(this,s,o,a,i))}toBlob(t=null,e="image/webp",i=1){return"image/webp"===e&&i<1&&!document.createElement("canvas").toDataURL("image/webp").startsWith("data:image/webp")&&(e="image/jpeg"),new Promise((s,n)=>{this.toCanvas(t,e).then(t=>{t.toBlob(e=>{null===e?n("Canvas blob is null"):(e.width=t.width,e.height=t.height,s(e))},e,i)})})}refresh(){k(this,t,"m",O).call(this)}setOptions(e){const i=this.options.viewport.width,s=this.options.viewport.height,n=this.options.viewport;e.viewport&&(e.viewport=Object.assign(Object.assign({},n),e.viewport)),this.options=Object.assign(Object.assign({},this.options),e),k(this,t,"m",p).call(this),n.width===i&&n.height===s||k(this,t,"m",j).call(this)}setZoom(e){const i=this.elements.zoomer,s=parseFloat(i.min),n=parseFloat(i.max);i.value=Math.max(s,Math.min(n,e)).toFixed(3),k(this,t,"m",C).call(this)}async setRotation(e){if(void 0===e)return;const i=(e%360+360)%360,s=i-k(this,o,"f");0!==s&&(X(this,o,i,"f"),await k(this,t,"m",c).call(this,s),k(this,t,"m",O).call(this))}destroy(){k(this,r,"f").abort(),k(this,a,"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=T()}}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,8 +1,15 @@
 {
   "name": "cropt2",
-  "version": "2.0.3",
+  "version": "2.0.5",
   "description": "A lightweight but powerful JavaScript image cropper",
-  "keywords": ["cropping", "image", "canvas", "image-editing", "image-compression", "resizing"],
+  "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",
@@ -27,7 +34,6 @@
   "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",
@@ -37,20 +43,19 @@
     "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:js:esm": "tsc --declaration && tsc src/cropt.ts --module ESNext --target ES2017 --outDir dist/esm && terser dist/cropt.js --passes=2 --toplevel -c -m -o dist/cropt.esm.min.js",
+    "build:js:classic": "tsc src/cropt.ts --target ES2017 --outDir dist/ && terser dist/cropt.js --passes=2 --toplevel -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"
+    "start": "http-server ./docs"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/mindflowgo/cropt.git"
   },
-   "bugs": {
-     "url": "https://github.com/mindflowgo/cropt/issues"
+  "bugs": {
+    "url": "https://github.com/mindflowgo/cropt/issues"
   },
   "homepage": "http://mindflowgo.github.io/cropt/"
-}
+}