npm - cropt2 - Versions diffs - 2.0.2 → 2.0.4 - Mend

cropt2 2.0.2 → 2.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/cropt.esm.min.js CHANGED Viewed

	@@ -1 +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=ti)}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(tMath.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(.95this.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(.95this.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>2l.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/tr,h=1/ta;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+.005e[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=-1t.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;
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.crossOrigin="anonymous",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=ti)}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(tMath.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(.95this.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(.95this.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>2l.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/tr,h=1/ta;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+.005e[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=-1t.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.js CHANGED Viewed

	@@ -1 +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=ti)}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(tMath.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(.95this.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(.95this.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>2l.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/tr,h=1/ta;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+.005e[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=-1t.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);
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.crossOrigin="anonymous",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=ti)}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(tMath.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(.95this.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(.95this.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>2l.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/tr,h=1/ta;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+.005e[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=-1t.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 CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "cropt2",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "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>",