dnm-croppr - npm Package Compare versions

Comparing version 2.7.3 to 2.7.4

dist/dnm-croppr.min.js

 !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).Croppr=e()}(this,(function(){"use strict";!function(){for(var t=0,e=["ms","moz","webkit","o"],i=0;i<e.length&&!window.requestAnimationFrame;++i)window.requestAnimationFrame=window[e[i]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[e[i]+"CancelAnimationFrame"]||window[e[i]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(e,i){var n=(new Date).getTime(),s=Math.max(0,16-(n-t)),o=window.setTimeout((function(){e(n+s)}),s);return t=n+s,o}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(t){clearTimeout(t)})}(),function(){if("function"==typeof window.CustomEvent)return!1;function t(t,e){e=e||{bubbles:!1,cancelable:!1,detail:void 0};var i=document.createEvent("CustomEvent");return i.initCustomEvent(t,e.bubbles,e.cancelable,e.detail),i}t.prototype=window.Event.prototype,window.CustomEvent=t}(),function(t){try{return new CustomEvent("test"),!1}catch(t){}function e(e,i){i=i||{bubbles:!1,cancelable:!1};var n=document.createEvent("MouseEvent");return n.initMouseEvent(e,i.bubbles,i.cancelable,t,0,0,0,0,0,!1,!1,!1,!1,0,null),n}e.prototype=Event.prototype,t.MouseEvent=e}(window);class t{constructor(t,e,i,n){var s=this;function o(t){t.stopPropagation(),document.removeEventListener("mouseup",o),document.removeEventListener("mousemove",r),s.eventBus.dispatchEvent(new CustomEvent("handleend",{detail:{handle:s}}))}function r(t){t.stopPropagation(),s.eventBus.dispatchEvent(new CustomEvent("handlemove",{detail:{mouseX:t.clientX,mouseY:t.clientY}}))}this.position=t,this.constraints=e,this.cursor=i,this.eventBus=n,this.el=document.createElement("div"),this.el.className="croppr-handle",this.el.style.cursor=i,this.el.addEventListener("mousedown",(function(t){t.stopPropagation(),document.addEventListener("mouseup",o),document.addEventListener("mousemove",r),s.eventBus.dispatchEvent(new CustomEvent("handlestart",{detail:{handle:s}}))}))}}class e{constructor(t,e,i,n){this.x1=t,this.y1=e,this.x2=i,this.y2=n}set(t=null,e=null,i=null,n=null){return this.x1=null==t?this.x1:t,this.y1=null==e?this.y1:e,this.x2=null==i?this.x2:i,this.y2=null==n?this.y2:n,this}width(){return Math.abs(this.x2-this.x1)}height(){return Math.abs(this.y2-this.y1)}resize(t,e,i=[0,0]){const n=this.x1+this.width()*i[0],s=this.y1+this.height()*i[1];return this.x1=n-t*i[0],this.y1=s-e*i[1],this.x2=this.x1+t,this.y2=this.y1+e,this}scale(t,e=[0,0],i=null,n=null){const s=this.width()*t,o=this.height()*t;return this.resize(s,o,e),this}move(t=null,e=null){let i=this.width(),n=this.height();return t=null===t?this.x1:t,e=null===e?this.y1:e,this.x1=t,this.y1=e,this.x2=t+i,this.y2=e+n,this}getRelativePoint(t=[0,0]){return[this.width()*t[0],this.height()*t[1]]}getAbsolutePoint(t=[0,0]){return[this.x1+this.width()*t[0],this.y1+this.height()*t[1]]}getRatio(t=null,e=null){if(null===t)return null;if(null===e)return t;const i=this.width()/this.height();if(t>e){let i=t;t=e,e=i}return i>e?e:i<t?t:i}constrainToRatio(t=null,e=[0,0],i="height",n=null){if(null===t)return;const s=this.width(),o=this.height();if(null!==n){let i=t;i>n&&(i=n,n=t);let r=s/o;if(r<i||r>n){let t=s,h=o;r>n?h=s/n:t=o*i,this.resize(t,h,e)}}else switch(i){case"height":this.resize(s,s/t,e);break;case"width":this.resize(o*t,o,e);break;default:this.resize(s,s/t,e)}return this}constrainToBoundary(t,e,i=[0,0]){const[n,s]=this.getAbsolutePoint(i),o=n,r=s,h=t-n,l=e-s,a=-2*i[0]+1,u=-2*i[1]+1;let[d,c]=[null,null];switch(a){case-1:d=o;break;case 0:d=2*Math.min(o,h);break;case 1:d=h}switch(u){case-1:c=r;break;case 0:c=2*Math.min(r,l);break;case 1:c=l}if(this.width()>d){const t=d/this.width();this.scale(t,i)}if(this.height()>c){const t=c/this.height();this.scale(t,i)}return this}constrainToSize(t=null,e=null,i=null,n=null,s=[0,0],o=null,r=null){let h=this.getRatio(o,r);if(t&&this.width()>t){const e=t,i=null===h?this.height():t/h;this.resize(e,i,s)}if(e&&this.height()>e){const t=null===h?this.width():e*h,i=e;this.resize(t,i,s)}if(i&&this.width()<i){const t=i,e=null===h?this.height():i/h;this.resize(t,e,s)}if(n&&this.height()<n){const t=null===h?this.width():n*h,e=n;this.resize(t,e,s)}return this}}function i(t){t.preventDefault();const e=t.changedTouches[0];e.target.dispatchEvent(new MouseEvent({touchstart:"mousedown",touchmove:"mousemove",touchend:"mouseup"}[t.type],{bubbles:!0,cancelable:!0,view:window,clientX:e.clientX,clientY:e.clientY,screenX:e.screenX,screenY:e.screenY}))}
-/*! Fast Average Color | © 2020 Denis Seleznev | MIT License | https://github.com/fast-average-color/fast-average-color */function n(t){const e=t.toString(16);return 1===e.length?"0"+e:e}function s(t){return"#"+t.map(n).join("")}function o(t,e,i){for(let n=0;n<i.length;n++)if(r(t,e,i[n]))return!0;return!1}function r(t,e,i){switch(i.length){case 3:if(function(t,e,i){if(255!==t[e+3])return!0;if(t[e]===i[0]&&t[e+1]===i[1]&&t[e+2]===i[2])return!0;return!1}(t,e,i))return!0;break;case 4:if(function(t,e,i){if(t[e+3]&&i[3])return t[e]===i[0]&&t[e+1]===i[1]&&t[e+2]===i[2]&&t[e+3]===i[3];return t[e+3]===i[3]}(t,e,i))return!0;break;case 5:if(function(t,e,i){const n=i[0],s=i[1],o=i[2],r=i[3],l=i[4],a=t[e+3],u=h(a,r,l);if(!r)return u;if(!a&&u)return!0;if(h(t[e],n,l)&&h(t[e+1],s,l)&&h(t[e+2],o,l)&&u)return!0;return!1}(t,e,i))return!0;break;default:return!1}}function h(t,e,i){return t>=e-i&&t<=e+i}function l(t,e,i){const n={},s=i.ignoredColor,r=i.step;for(let i=0;i<e;i+=r){const e=t[i],r=t[i+1],h=t[i+2],l=t[i+3];if(s&&o(t,i,s))continue;const a=Math.round(e/24)+","+Math.round(r/24)+","+Math.round(h/24);n[a]?n[a]=[n[a][0]+e*l,n[a][1]+r*l,n[a][2]+h*l,n[a][3]+l,n[a][4]+1]:n[a]=[e*l,r*l,h*l,l,1]}const h=Object.keys(n).map((t=>n[t])).sort(((t,e)=>{const i=t[4],n=e[4];return i>n?-1:i===n?0:1}))[0],l=h[0],a=h[1],u=h[2],d=h[3],c=h[4];return d?[Math.round(l/d),Math.round(a/d),Math.round(u/d),Math.round(d/c)]:i.defaultColor}function a(t,e,i){let n=0,s=0,r=0,h=0,l=0;const a=i.ignoredColor,u=i.step;for(let i=0;i<e;i+=u){const e=t[i+3],u=t[i]*e,d=t[i+1]*e,c=t[i+2]*e;a&&o(t,i,a)||(n+=u,s+=d,r+=c,h+=e,l++)}return h?[Math.round(n/h),Math.round(s/h),Math.round(r/h),Math.round(h/l)]:i.defaultColor}function u(t,e,i){let n=0,s=0,r=0,h=0,l=0;const a=i.ignoredColor,u=i.step;for(let i=0;i<e;i+=u){const e=t[i],u=t[i+1],d=t[i+2],c=t[i+3];a&&o(t,i,a)||(n+=e*e*c,s+=u*u*c,r+=d*d*c,h+=c,l++)}return h?[Math.round(Math.sqrt(n/h)),Math.round(Math.sqrt(s/h)),Math.round(Math.sqrt(r/h)),Math.round(h/l)]:i.defaultColor}function d(t){return c(t,"defaultColor",[0,0,0,0])}function c(t,e,i){return void 0===t[e]?i:t[e]}const p="FastAverageColor: ";function m(t,e,i){t.silent||(console.error(p+e),i&&console.error(i))}function g(t){return Error(p+t)}class v{getColorAsync(t,e){if(!t)return Promise.reject(g("call .getColorAsync() without resource."));if("string"==typeof t){const i=new Image;return i.crossOrigin="",i.src=t,this._bindImageEvents(i,e)}if(t instanceof Image&&!t.complete)return this._bindImageEvents(t,e);{const i=this.getColor(t,e);return i.error?Promise.reject(i.error):Promise.resolve(i)}}getColor(t,e){const i=d(e=e||{});if(!t)return m(e,"call .getColor(null) without resource."),this.prepareResult(i);const n=function(t,e){const i=c(e,"left",0),n=c(e,"top",0),s=c(e,"width",t.width),o=c(e,"height",t.height);let r,h=s,l=o;return"precision"===e.mode||(s>o?(r=s/o,h=100,l=Math.round(h/r)):(r=o/s,l=100,h=Math.round(l/r)),(h>s||l>o||h<10||l<10)&&(h=s,l=o)),{srcLeft:i,srcTop:n,srcWidth:s,srcHeight:o,destWidth:h,destHeight:l}}(function(t){if(t instanceof HTMLImageElement){let e=t.naturalWidth,i=t.naturalHeight;return t.naturalWidth||-1===t.src.search(/\.svg(\?|$)/i)||(e=i=100),{width:e,height:i}}return t instanceof HTMLVideoElement?{width:t.videoWidth,height:t.videoHeight}:{width:t.width,height:t.height}}(t),e);if(!(n.srcWidth&&n.srcHeight&&n.destWidth&&n.destHeight))return m(e,`incorrect sizes for resource "${t.src}".`),this.prepareResult(i);if(!this._ctx&&(this._canvas="undefined"==typeof window?new OffscreenCanvas(1,1):document.createElement("canvas"),this._ctx=this._canvas.getContext&&this._canvas.getContext("2d"),!this._ctx))return m(e,"Canvas Context 2D is not supported in this browser."),this.prepareResult(i);this._canvas.width=n.destWidth,this._canvas.height=n.destHeight;let s=i;try{this._ctx.clearRect(0,0,n.destWidth,n.destHeight),this._ctx.drawImage(t,n.srcLeft,n.srcTop,n.srcWidth,n.srcHeight,0,0,n.destWidth,n.destHeight);const i=this._ctx.getImageData(0,0,n.destWidth,n.destHeight).data;s=this.getColorFromArray4(i,e)}catch(i){m(e,`security error (CORS) for resource ${t.src}.\nDetails: https://developer.mozilla.org/en/docs/Web/HTML/CORS_enabled_image`,i)}return this.prepareResult(s)}getColorFromArray4(t,e){e=e||{};const i=t.length,n=d(e);if(i<4)return n;const s=i-i%4,o=4*(e.step||1);let r;switch(e.algorithm||"sqrt"){case"simple":r=a;break;case"sqrt":r=u;break;case"dominant":r=l;break;default:throw g(`${e.algorithm} is unknown algorithm.`)}return r(t,s,{defaultColor:n,ignoredColor:(h=e.ignoredColor,h?Array.isArray(h)?"number"==typeof h[0]?[h.slice()]:h:[h]:h),step:o});var h}prepareResult(t){const e=t.slice(0,3),i=[].concat(e,t[3]/255),n=(299*(o=t)[0]+587*o[1]+114*o[2])/1e3<128;var o;return{value:t,rgb:"rgb("+e.join(",")+")",rgba:"rgba("+i.join(",")+")",hex:s(e),hexa:s(t),isDark:n,isLight:!n}}destroy(){delete this._canvas,delete this._ctx}_bindImageEvents(t,e){return new Promise(((i,n)=>{const s=()=>{h();const s=this.getColor(t,e);s.error?n(s.error):i(s)},o=()=>{h(),n(g(`Error loading image "${t.src}".`))},r=()=>{h(),n(g(`Image "${t.src}" loading aborted.`))},h=()=>{t.removeEventListener("load",s),t.removeEventListener("error",o),t.removeEventListener("abort",r)};t.addEventListener("load",s),t.addEventListener("error",o),t.addEventListener("abort",r)}))}}const w=[{position:[0,0],constraints:[1,0,0,1],cursor:"nw-resize"},{position:[.5,0],constraints:[1,0,0,0],cursor:"n-resize"},{position:[1,0],constraints:[1,1,0,0],cursor:"ne-resize"},{position:[1,.5],constraints:[0,1,0,0],cursor:"e-resize"},{position:[1,1],constraints:[0,1,1,0],cursor:"se-resize"},{position:[.5,1],constraints:[0,0,1,0],cursor:"s-resize"},{position:[0,1],constraints:[0,0,1,1],cursor:"sw-resize"},{position:[0,.5],constraints:[0,0,0,1],cursor:"w-resize"}];return class extends class{constructor(t,e,i=!1){if(this.initOptions=e,this.options=this.parseOptions(e),!(t=this.getElement(t)).getAttribute("src"))throw"Image src not provided.";this._initialized=!1,this._restore={parent:t.parentNode,element:t},this.options.preview&&(this._restore.preview=this.options.preview,this._restore.parentPreview=this.options.preview.parentNode),i||(0===t.width||0===t.height?t.onload=()=>{this.initialize(t)}:this.initialize(t))}initialize(t){if(this.createDOM(t),this.getSourceSize(),this.attachHandlerEvents(),this.attachRegionEvents(),this.attachOverlayEvents(),this.showModal("init"),this.initializeBox(null,!1),this.strictlyConstrain(),this.redraw(),this.resetModal("init"),this._initialized=!0,null!==this.options.onInitialize&&this.options.onInitialize(this),this.cropperEl.onwheel=t=>{t.preventDefault();let{deltaY:e}=t;let i=e>0?1:-1;e=Math.abs(e)/100,e=e>.05?.05:e,e=1+i*e,this.scaleBy(e),null!==this.options.onCropMove&&this.options.onCropMove(this.getValue()),null!==this.options.onCropStart&&this.options.onCropStart(this.getValue())},this.options.responsive){let t;window.onresize=()=>{clearTimeout(t),t=setTimeout((()=>{this.forceRedraw()}),100)}}}forceRedraw(){let t=this.options,e=this.responsiveData;const i=["x","y","width","height"];for(var n=0;n<i.length;n++)e[i[n]]=e[i[n]]>1?1:e[i[n]]<0?0:e[i[n]];t.startPosition=[e.x,e.y,"ratio"],t.startSize=[e.width,e.height,"ratio"],t=this.parseOptions(t),this.showModal("onResize"),this.initializeBox(t),this.resetModal("onResize")}getElement(t,e){if(t&&!t.nodeName&&null==(t=document.querySelector(t)))throw"Unable to find element.";return t}createDOM(e){var n;this.containerEl=document.createElement("div"),this.containerEl.className="croppr-container",this.eventBus=this.containerEl,(n=this.containerEl).addEventListener("touchstart",i),n.addEventListener("touchend",i),n.addEventListener("touchmove",i),this.cropperEl=document.createElement("div"),this.cropperEl.className="croppr",this.imageEl=document.createElement("img"),this.imageEl.setAttribute("crossOrigin","anonymous"),this.imageEl.setAttribute("alt",e.getAttribute("alt")),this.imageEl.onload=()=>{this.getSourceSize(),this.options=this.parseOptions(this.initOptions),this.showModal("setImage"),this.initializeBox(null,!1),this.strictlyConstrain(),this.redraw(),this.resetModal("setImage"),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue());const t=(new v).getColor(this.imageEl);t&&(this.isDark=t.isDark,this.isDark?this.cropperEl.className="croppr croppr-dark":this.cropperEl.className="croppr croppr-light"),this.onImageLoad&&this.onImageLoad()},this.imageEl.setAttribute("src",e.getAttribute("src")),this.imageEl.className="croppr-image",this.imageClippedEl=this.imageEl.cloneNode(),this.imageClippedEl.className="croppr-imageClipped",this.regionEl=document.createElement("div"),this.regionEl.className="croppr-region",this.overlayEl=document.createElement("div"),this.overlayEl.className="croppr-overlay";let s=document.createElement("div");s.className="croppr-handleContainer",this.handles=[];for(let e=0;e<w.length;e++){const i=new t(w[e].position,w[e].constraints,w[e].cursor,this.eventBus);this.handles.push(i),s.appendChild(i.el)}this.cropperEl.appendChild(this.imageEl),this.cropperEl.appendChild(this.imageClippedEl),this.cropperEl.appendChild(this.regionEl),this.cropperEl.appendChild(this.overlayEl),this.cropperEl.appendChild(s),this.containerEl.appendChild(this.cropperEl),e.parentElement.replaceChild(this.containerEl,e),this.setLivePreview()}setLivePreview(){if(this.options.preview){this.preview={},this.preview.parent=this.options.preview,this.preview.parent.style.position="relative";let t=document.createElement("div");this.preview.container=this.preview.parent.appendChild(t),this.preview.container.style.overflow="hidden",this.preview.container.style.position="absolute",this.preview.container.style.top="50%",this.preview.container.style.left="50%",this.preview.container.style.transform="translate(-50%, -50%)"}}resizePreview(t=null){if(null===t&&(t=this.getValue("ratio")),this.preview&&t.width&&t.height){const e=this.preview.parent.offsetWidth,i=this.preview.parent.offsetHeight,n=e/i,s=this.sourceSize.width*t.width,o=this.sourceSize.height*t.height,r=s/o;let h=e,l=i;n>r?h=l*r:l=h/r,this.preview.container.style.width=h+"px",this.preview.container.style.height=l+"px";let a=this.sourceSize.width*h/s,u=this.sourceSize.height*l/o,d=-t.x*a,c=-t.y*u;this.preview.image.style.width=a+"px",this.preview.image.style.height=u+"px",this.preview.image.style.left=d+"px",this.preview.image.style.top=c+"px"}}strictlyConstrain(t=null,e=null){let i;null===e?(i=[[0,0],[1,1]],e=[.5,.5]):i=[e],null===t&&(t=this.options);const{width:n,height:s}=this.imageEl.getBoundingClientRect();this.box.constrainToRatio(t.aspectRatio,e,"height",t.maxAspectRatio),this.box.constrainToSize(t.maxSize.width,t.maxSize.height,t.minSize.width,t.minSize.height,e,t.aspectRatio,t.maxAspectRatio),i.map((t=>{this.box.constrainToBoundary(n,s,t)}))}setImage(t,e){return this.onImageLoad=e,this.imageEl.src=t,this.imageClippedEl.src=t,this}destroy(){this._restore.parent.replaceChild(this._restore.element,this.containerEl),this.options.preview&&(this.preview.image.parentNode.removeChild(this.preview.image),this.preview.container.parentNode.removeChild(this.preview.container))}initializeBox(t=null,i=!0){null===t&&(t=this.options),this.convertOptionsToPixels(t);let n=t.startSize.width,s=t.startSize.height;t.minSize&&(n<t.minSize.width?n=t.minSize.width:n<t.maxSize.width&&(n=t.maxSize.width)),t.maxSize&&(s<t.minSize.height?s=t.minSize.height:s<t.maxSize.height&&(s=t.maxSize.height));let o=new e(0,0,n,s),r=0,h=0;if(null===t.startPosition){const{width:t,height:e}=this.imageEl.getBoundingClientRect();r=t/2-n/2,h=e/2-s/2}else r=t.startPosition.x,h=t.startPosition.y;if(o.move(r,h),this.preview){this.preview.image&&(this.preview.image.parentNode.removeChild(this.preview.image),this.preview.image=null);let t=document.createElement("img");t.src=this.imageEl.src,this.preview.image=this.preview.container.appendChild(t),this.preview.image.style.position="relative"}!0===i&&this.strictlyConstrain(),this.box=o,this.redraw();for(var l=0;l<this.handles.length;l++)!this.options.maxAspectRatio||.5!=this.handles[l].position[0]&&.5!=this.handles[l].position[1]?this.handles[l].el.style.display="block":this.handles[l].el.style.display="none";return o}showModal(t="default"){let e=this.modalStyle;if(e&&!0===e.modalIsDisplayed)return e;if(this.options.modal){let{modal:i}=this.options,n=i.currentStyle?i.currentStyle.display:getComputedStyle(i,null).display;e={operationName:t,modalIsDisplayed:!0,display:n,visibility:i.currentStyle?i.currentStyle.visibility:getComputedStyle(i,null).visibility},this.modalStyle=e,"none"===n&&(i.style.visibility="hidden",i.style.display="block")}return e}resetModal(t="default"){let e=this.modalStyle;if(e){let{visibility:i,display:n,operationName:s,modalIsDisplayed:o}=e;if(o&&t===s){let{modal:t}=this.options;t.style.visibility=i,t.style.display=n,this.modalStyle={operationName:null,modalIsDisplayed:!1}}}}getSourceSize(){return this.sourceSize={},this.sourceSize.width=this.imageEl.naturalWidth,this.sourceSize.height=this.imageEl.naturalHeight,this.sourceSize}convertor(t,e,i){const n=t=>{this.showModal();const{width:e,height:i}=this.imageEl.getBoundingClientRect();return this.resetModal(),t.width&&(t.width*=e),t.x&&(t.x*=e),t.height&&(t.height*=i),t.y&&(t.y*=i),t};return"real"===e&&"raw"===i?(t=>{this.showModal();const{width:e,height:i}=this.imageEl.getBoundingClientRect();this.resetModal();const n=this.sourceSize.width/e,s=this.sourceSize.height/i;return t.width&&(t.width/=n),t.x&&(t.x/=n),t.height&&(t.height/=s),t.y&&(t.y/=s),t})(t):"ratio"===e&&"raw"===i?n(t):null}convertOptionsToPixels(t=null){let e=!1;null===t&&(t=this.options,e=!0);const{width:i,height:n}=this.imageEl.getBoundingClientRect(),s=["maxSize","minSize","startSize","startPosition"];for(let e=0;e<s.length;e++){const i=s[e];null!==t[i]&&("ratio"==t[i].unit?t[i]=this.convertor(t[i],"ratio","raw"):"real"===t[i].unit&&(t[i]=this.convertor(t[i],"real","raw")),delete t[i].unit)}if(t.minSize&&(t.minSize.width>i&&(t.minSize.width=i),t.minSize.height>n&&(t.minSize.height=n)),t.startSize&&t.startPosition){let e=t.startPosition.x+t.startSize.width;e>i&&(t.startPosition.x-=e-i);let s=t.startPosition.y+t.startSize.height;s>n&&(t.startPosition.y-=s-n)}return e&&(this.options=t),t}redraw(){this.resizePreview();const t=Math.round(this.box.width()),e=Math.round(this.box.height()),i=Math.round(this.box.x1),n=Math.round(this.box.y1),s=Math.round(this.box.x2),o=Math.round(this.box.y2);window.requestAnimationFrame((()=>{this.regionEl.style.transform=`translate(${i}px, ${n}px)`,this.regionEl.style.width=t+"px",this.regionEl.style.height=e+"px",this.imageClippedEl.style.clip=`rect(${n}px, ${s}px, ${o}px, ${i}px)`;const r=this.box.getAbsolutePoint([.5,.5]),{width:h,height:l}=this.imageEl.getBoundingClientRect(),a=r[0]-h/2>>31,u=r[1]-l/2>>31,d=-2*((a^u)+u+u+4)+8;for(let s=0;s<this.handles.length;s++){let o=this.handles[s];const r=o.el.offsetWidth,h=o.el.offsetHeight,l=i+t*o.position[0]-r/2,a=n+e*o.position[1]-h/2;o.el.style.transform=`translate(${Math.round(l)}px, ${Math.round(a)}px)`,o.el.style.zIndex=d==s?5:4}}))}attachHandlerEvents(){const t=this.eventBus;t.addEventListener("handlestart",this.onHandleMoveStart.bind(this)),t.addEventListener("handlemove",this.onHandleMoveMoving.bind(this)),t.addEventListener("handleend",this.onHandleMoveEnd.bind(this))}attachRegionEvents(){const t=this.eventBus;function e(e){e.stopPropagation(),t.dispatchEvent(new CustomEvent("regionmove",{detail:{mouseX:e.clientX,mouseY:e.clientY}}))}function i(n){n.stopPropagation(),document.removeEventListener("mouseup",i),document.removeEventListener("mousemove",e),t.dispatchEvent(new CustomEvent("regionend",{detail:{mouseX:n.clientX,mouseY:n.clientY}}))}this.regionEl.addEventListener("mousedown",(function(n){n.stopPropagation(),document.addEventListener("mouseup",i),document.addEventListener("mousemove",e),t.dispatchEvent(new CustomEvent("regionstart",{detail:{mouseX:n.clientX,mouseY:n.clientY}}))})),t.addEventListener("regionstart",this.onRegionMoveStart.bind(this)),t.addEventListener("regionmove",this.onRegionMoveMoving.bind(this)),t.addEventListener("regionend",this.onRegionMoveEnd.bind(this))}attachOverlayEvents(){const t=this;let i=null;function n(e){e.stopPropagation(),t.eventBus.dispatchEvent(new CustomEvent("handlemove",{detail:{mouseX:e.clientX,mouseY:e.clientY}}))}function s(e){e.stopPropagation(),document.removeEventListener("mouseup",s),document.removeEventListener("mousemove",n),1!==t.box.width()||1!==t.box.height()?t.eventBus.dispatchEvent(new CustomEvent("handleend",{detail:{mouseX:e.clientX,mouseY:e.clientY}})):t.box=i}this.overlayEl.addEventListener("mousedown",(function(o){o.stopPropagation(),document.addEventListener("mouseup",s),document.addEventListener("mousemove",n);const r=t.cropperEl.getBoundingClientRect(),h=o.clientX-r.left,l=o.clientY-r.top;i=t.box,t.box=new e(h,l,h+1,l+1),t.eventBus.dispatchEvent(new CustomEvent("handlestart",{detail:{handle:t.handles[4]}}))}))}onHandleMoveStart(t){let e=t.detail.handle;const i=[1-e.position[0],1-e.position[1]];let[n,s]=this.box.getAbsolutePoint(i);this.activeHandle={handle:e,originPoint:i,originX:n,originY:s},null!==this.options.onCropStart&&this.options.onCropStart(this.getValue())}onHandleMoveMoving(t){let{mouseX:i,mouseY:n}=t.detail,s=this.cropperEl.getBoundingClientRect();i-=s.left,n-=s.top,i<0?i=0:i>s.width&&(i=s.width),n<0?n=0:n>s.height&&(n=s.height);let o=this.activeHandle.originPoint.slice();const r=this.activeHandle.originX,h=this.activeHandle.originY,l=this.activeHandle.handle,a=1===l.constraints[0],u=1===l.constraints[1],d=1===l.constraints[2],c=1===l.constraints[3],p=(c||u)&&(a||d);let m=c||u?r:this.box.x1,g=c||u?r:this.box.x2,v=a||d?h:this.box.y1,w=a||d?h:this.box.y2;m=c?i:m,g=u?i:g,v=a?n:v,w=d?n:w;let[f,E]=[!1,!1];if((c||u)&&(f=c?i>r:i<r),(a||d)&&(E=a?n>h:n<h),f){const t=m;m=g,g=t,o[0]=1-o[0]}if(E){const t=v;v=w,w=t,o[1]=1-o[1]}let x=new e(m,v,g,w);if(this.options.aspectRatio){let t=this.options.aspectRatio,e=!1;p?e=n>x.y1+t*x.width()||n<x.y2-t*x.width():(a||d)&&(e=!0);const i=e?"width":"height";x.constrainToRatio(t,o,i,this.options.maxAspectRatio)}x.constrainToSize(this.options.maxSize.width,this.options.maxSize.height,this.options.minSize.width,this.options.minSize.height,o,this.options.aspectRatio,this.options.maxAspectRatio);const{width:y,height:b}=this.imageEl.getBoundingClientRect();let C=[o];this.options.maxAspectRatio&&(C=[[0,0],[1,1]]),C.map((t=>{x.constrainToBoundary(y,b,t)})),this.box=x,this.redraw(),null!==this.options.onCropMove&&this.options.onCropMove(this.getValue())}onHandleMoveEnd(t){null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue())}onRegionMoveStart(t){let{mouseX:e,mouseY:i}=t.detail,n=this.cropperEl.getBoundingClientRect();e-=n.left,i-=n.top,this.currentMove={offsetX:e-this.box.x1,offsetY:i-this.box.y1},null!==this.options.onCropStart&&this.options.onCropStart(this.getValue())}onRegionMoveMoving(t){let{mouseX:e,mouseY:i}=t.detail,{offsetX:n,offsetY:s}=this.currentMove,o=this.cropperEl.getBoundingClientRect();e-=o.left,i-=o.top,this.box.move(e-n,i-s),this.box.x1<0&&this.box.move(0,null),this.box.x2>o.width&&this.box.move(o.width-this.box.width(),null),this.box.y1<0&&this.box.move(null,0),this.box.y2>o.height&&this.box.move(null,o.height-this.box.height()),this.redraw(),null!==this.options.onCropMove&&this.options.onCropMove(this.getValue())}onRegionMoveEnd(t){null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue())}getValue(t=null){null===t&&(t=this.options.returnMode);let e={};return"real"==t?e=this.getValueAsRealData():"ratio"==t?e=this.getValueAsRatio():"raw"==t&&(e={x:Math.round(this.box.x1),y:Math.round(this.box.y1),width:Math.round(this.box.width()),height:Math.round(this.box.height())}),this.options.responsive&&(this.responsiveData="ratio"==t?e:this.getValueAsRatio()),e}getValueAsRealData(){this.showModal();const t=this.imageEl.naturalWidth,e=this.imageEl.naturalHeight,{width:i,height:n}=this.imageEl.getBoundingClientRect(),s=t/i,o=e/n;return this.resetModal(),{x:Math.round(this.box.x1*s),y:Math.round(this.box.y1*o),width:Math.round(this.box.width()*s),height:Math.round(this.box.height()*o)}}getValueAsRatio(){this.showModal();const{width:t,height:e}=this.imageEl.getBoundingClientRect();return this.resetModal(),{x:this.box.x1/t,y:this.box.y1/e,width:this.box.width()/t,height:this.box.height()/e}}parseOptions(t=null){null===t&&(t=this.options);const e=null,i=null,n={width:null,height:null,unit:"raw"},s={width:null,height:null,unit:"raw"},o={width:1,height:1,unit:"ratio"},r=null,h="real",l=null,a=null,u=null,d=null,c=null,p=!0,m=null;let g=null;null!==t.preview&&(g=this.getElement(t.preview));let v=null;null!==t.modal&&(v=this.getElement(t.modal));let w=null;null!==t.responsive&&(w=t.responsive);let f=null,E=null;const x=["aspectRatio","maxAspectRatio"];for(var y=0;y<x.length;y++)if(void 0!==t[x[y]])if("number"==typeof t[x[y]]){let e=t[x[y]];"aspectRatio"===x[y]?f=e:E=e}else if(t[x[y]]instanceof Array){let e=t[x[y]][1]/t[x[y]][0];"aspectRatio"===x[y]?f=e:E=e}let b=null;void 0!==t.maxSize&&null!==t.maxSize&&(b={width:t.maxSize[0]||null,height:t.maxSize[1]||null,unit:t.maxSize[2]||"raw"});let C=null;void 0!==t.minSize&&null!==t.minSize&&(C={width:t.minSize[0]||null,height:t.minSize[1]||null,unit:t.minSize[2]||"raw"});let z=null;void 0!==t.startSize&&null!==t.startSize&&(z={width:t.startSize[0]||null,height:t.startSize[1]||null,unit:t.startSize[2]||"ratio"});let M=null;void 0!==t.startPosition&&null!==t.startPosition&&(M={x:t.startPosition[0]||null,y:t.startPosition[1]||null,unit:t.startPosition[2]||"ratio"});let S=null;"function"==typeof t.onInitialize&&(S=t.onInitialize);let R=null;"function"==typeof t.onCropStart&&(R=t.onCropStart);let P=null;"function"==typeof t.onCropEnd&&(P=t.onCropEnd);let A=null;"function"==typeof t.onUpdate&&(console.warn("Croppr.js: `onUpdate` is deprecated and will be removed in the next major release. Please use `onCropMove` or `onCropEnd` instead."),A=t.onUpdate),"function"==typeof t.onCropMove&&(A=t.onCropMove);let L=null;if(void 0!==t.returnMode){const e=t.returnMode.toLowerCase();if(-1===["real","ratio","raw"].indexOf(e))throw"Invalid return mode.";L=e}const B=(t,e)=>null!==t?t:e;return{aspectRatio:B(f,e),maxAspectRatio:B(E,i),maxSize:B(b,n),minSize:B(C,s),startSize:B(z,o),startPosition:B(M,r),returnMode:B(L,h),onInitialize:B(S,l),onCropStart:B(R,a),onCropMove:B(A,u),onCropEnd:B(P,d),preview:B(g,c),responsive:B(w,p),modal:B(v,m)}}}{constructor(t,e,i=!1){super(t,e,i)}getValue(t){return super.getValue(t)}setImage(t,e=null){return super.setImage(t,e)}destroy(){return super.destroy()}moveTo(t,e,i=!0,n="raw"){if(this.showModal("moveTo"),"ratio"===n||"real"===n){let i=this.convertor({x:t,y:e},n,"raw");t=i.x,e=i.y}return this.box.move(t,e),!0===i&&this.strictlyConstrain(null,[0,0]),this.redraw(),this.resetModal("moveTo"),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this}resizeTo(t,e,i=null,n=!0,s="raw"){if(this.showModal("resize"),"ratio"===s||"real"===s){let i={width:t,height:e};i=this.convertor(i,s,"raw"),t=i.width,e=i.height}return null===i&&(i=[.5,.5]),this.box.resize(t,e,i),!0===n&&this.strictlyConstrain(),this.redraw(),this.resetModal("resize"),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this}setValue(t,e=!0,i="ratio"){return this.showModal("setValue"),"ratio"!==i&&"real"!==i||(t=this.convertor(t,i,"raw")),this.moveTo(t.x,t.y,!1),this.resizeTo(t.width,t.height,[0,0],e),this.resetModal("setValue"),this}scaleBy(t,e=null,i=!0){return null===e&&(e=[.5,.5]),this.showModal("scaleBy"),this.box.scale(t,e),!0===i&&this.strictlyConstrain(),this.redraw(),this.resetModal("scaleBy"),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this}reset(){return this.showModal("reset"),this.box=this.initializeBox(this.options),this.redraw(),this.resetModal("reset"),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this}}}));
+/*! Fast Average Color | © 2020 Denis Seleznev | MIT License | https://github.com/fast-average-color/fast-average-color */function n(t){const e=t.toString(16);return 1===e.length?"0"+e:e}function s(t){return"#"+t.map(n).join("")}function o(t,e,i){for(let n=0;n<i.length;n++)if(r(t,e,i[n]))return!0;return!1}function r(t,e,i){switch(i.length){case 3:if(function(t,e,i){if(255!==t[e+3])return!0;if(t[e]===i[0]&&t[e+1]===i[1]&&t[e+2]===i[2])return!0;return!1}(t,e,i))return!0;break;case 4:if(function(t,e,i){if(t[e+3]&&i[3])return t[e]===i[0]&&t[e+1]===i[1]&&t[e+2]===i[2]&&t[e+3]===i[3];return t[e+3]===i[3]}(t,e,i))return!0;break;case 5:if(function(t,e,i){const n=i[0],s=i[1],o=i[2],r=i[3],l=i[4],a=t[e+3],u=h(a,r,l);if(!r)return u;if(!a&&u)return!0;if(h(t[e],n,l)&&h(t[e+1],s,l)&&h(t[e+2],o,l)&&u)return!0;return!1}(t,e,i))return!0;break;default:return!1}}function h(t,e,i){return t>=e-i&&t<=e+i}function l(t,e,i){const n={},s=i.ignoredColor,r=i.step;for(let i=0;i<e;i+=r){const e=t[i],r=t[i+1],h=t[i+2],l=t[i+3];if(s&&o(t,i,s))continue;const a=Math.round(e/24)+","+Math.round(r/24)+","+Math.round(h/24);n[a]?n[a]=[n[a][0]+e*l,n[a][1]+r*l,n[a][2]+h*l,n[a][3]+l,n[a][4]+1]:n[a]=[e*l,r*l,h*l,l,1]}const h=Object.keys(n).map((t=>n[t])).sort(((t,e)=>{const i=t[4],n=e[4];return i>n?-1:i===n?0:1}))[0],l=h[0],a=h[1],u=h[2],d=h[3],c=h[4];return d?[Math.round(l/d),Math.round(a/d),Math.round(u/d),Math.round(d/c)]:i.defaultColor}function a(t,e,i){let n=0,s=0,r=0,h=0,l=0;const a=i.ignoredColor,u=i.step;for(let i=0;i<e;i+=u){const e=t[i+3],u=t[i]*e,d=t[i+1]*e,c=t[i+2]*e;a&&o(t,i,a)||(n+=u,s+=d,r+=c,h+=e,l++)}return h?[Math.round(n/h),Math.round(s/h),Math.round(r/h),Math.round(h/l)]:i.defaultColor}function u(t,e,i){let n=0,s=0,r=0,h=0,l=0;const a=i.ignoredColor,u=i.step;for(let i=0;i<e;i+=u){const e=t[i],u=t[i+1],d=t[i+2],c=t[i+3];a&&o(t,i,a)||(n+=e*e*c,s+=u*u*c,r+=d*d*c,h+=c,l++)}return h?[Math.round(Math.sqrt(n/h)),Math.round(Math.sqrt(s/h)),Math.round(Math.sqrt(r/h)),Math.round(h/l)]:i.defaultColor}function d(t){return c(t,"defaultColor",[0,0,0,0])}function c(t,e,i){return void 0===t[e]?i:t[e]}const p="FastAverageColor: ";function m(t,e,i){t.silent||(console.error(p+e),i&&console.error(i))}function g(t){return Error(p+t)}class v{getColorAsync(t,e){if(!t)return Promise.reject(g("call .getColorAsync() without resource."));if("string"==typeof t){const i=new Image;return i.crossOrigin="",i.src=t,this._bindImageEvents(i,e)}if(t instanceof Image&&!t.complete)return this._bindImageEvents(t,e);{const i=this.getColor(t,e);return i.error?Promise.reject(i.error):Promise.resolve(i)}}getColor(t,e){const i=d(e=e||{});if(!t)return m(e,"call .getColor(null) without resource."),this.prepareResult(i);const n=function(t,e){const i=c(e,"left",0),n=c(e,"top",0),s=c(e,"width",t.width),o=c(e,"height",t.height);let r,h=s,l=o;return"precision"===e.mode||(s>o?(r=s/o,h=100,l=Math.round(h/r)):(r=o/s,l=100,h=Math.round(l/r)),(h>s||l>o||h<10||l<10)&&(h=s,l=o)),{srcLeft:i,srcTop:n,srcWidth:s,srcHeight:o,destWidth:h,destHeight:l}}(function(t){if(t instanceof HTMLImageElement){let e=t.naturalWidth,i=t.naturalHeight;return t.naturalWidth||-1===t.src.search(/\.svg(\?|$)/i)||(e=i=100),{width:e,height:i}}return t instanceof HTMLVideoElement?{width:t.videoWidth,height:t.videoHeight}:{width:t.width,height:t.height}}(t),e);if(!(n.srcWidth&&n.srcHeight&&n.destWidth&&n.destHeight))return m(e,`incorrect sizes for resource "${t.src}".`),this.prepareResult(i);if(!this._ctx&&(this._canvas="undefined"==typeof window?new OffscreenCanvas(1,1):document.createElement("canvas"),this._ctx=this._canvas.getContext&&this._canvas.getContext("2d"),!this._ctx))return m(e,"Canvas Context 2D is not supported in this browser."),this.prepareResult(i);this._canvas.width=n.destWidth,this._canvas.height=n.destHeight;let s=i;try{this._ctx.clearRect(0,0,n.destWidth,n.destHeight),this._ctx.drawImage(t,n.srcLeft,n.srcTop,n.srcWidth,n.srcHeight,0,0,n.destWidth,n.destHeight);const i=this._ctx.getImageData(0,0,n.destWidth,n.destHeight).data;s=this.getColorFromArray4(i,e)}catch(i){m(e,`security error (CORS) for resource ${t.src}.\nDetails: https://developer.mozilla.org/en/docs/Web/HTML/CORS_enabled_image`,i)}return this.prepareResult(s)}getColorFromArray4(t,e){e=e||{};const i=t.length,n=d(e);if(i<4)return n;const s=i-i%4,o=4*(e.step||1);let r;switch(e.algorithm||"sqrt"){case"simple":r=a;break;case"sqrt":r=u;break;case"dominant":r=l;break;default:throw g(`${e.algorithm} is unknown algorithm.`)}return r(t,s,{defaultColor:n,ignoredColor:(h=e.ignoredColor,h?Array.isArray(h)?"number"==typeof h[0]?[h.slice()]:h:[h]:h),step:o});var h}prepareResult(t){const e=t.slice(0,3),i=[].concat(e,t[3]/255),n=(299*(o=t)[0]+587*o[1]+114*o[2])/1e3<128;var o;return{value:t,rgb:"rgb("+e.join(",")+")",rgba:"rgba("+i.join(",")+")",hex:s(e),hexa:s(t),isDark:n,isLight:!n}}destroy(){delete this._canvas,delete this._ctx}_bindImageEvents(t,e){return new Promise(((i,n)=>{const s=()=>{h();const s=this.getColor(t,e);s.error?n(s.error):i(s)},o=()=>{h(),n(g(`Error loading image "${t.src}".`))},r=()=>{h(),n(g(`Image "${t.src}" loading aborted.`))},h=()=>{t.removeEventListener("load",s),t.removeEventListener("error",o),t.removeEventListener("abort",r)};t.addEventListener("load",s),t.addEventListener("error",o),t.addEventListener("abort",r)}))}}const w=[{position:[0,0],constraints:[1,0,0,1],cursor:"nw-resize"},{position:[.5,0],constraints:[1,0,0,0],cursor:"n-resize"},{position:[1,0],constraints:[1,1,0,0],cursor:"ne-resize"},{position:[1,.5],constraints:[0,1,0,0],cursor:"e-resize"},{position:[1,1],constraints:[0,1,1,0],cursor:"se-resize"},{position:[.5,1],constraints:[0,0,1,0],cursor:"s-resize"},{position:[0,1],constraints:[0,0,1,1],cursor:"sw-resize"},{position:[0,.5],constraints:[0,0,0,1],cursor:"w-resize"}];return class extends class{constructor(t,e,i=!1){if(this.initOptions=e,this.options=this.parseOptions(e),!(t=this.getElement(t)).getAttribute("src"))throw"Image src not provided.";this._initialized=!1,this._restore={parent:t.parentNode,element:t},this.options.preview&&(this._restore.preview=this.options.preview,this._restore.parentPreview=this.options.preview.parentNode),i||(0===t.width||0===t.height?t.onload=()=>{this.initialize(t)}:this.initialize(t))}initialize(t){if(this.createDOM(t),this.getSourceSize(),this.attachHandlerEvents(),this.attachRegionEvents(),this.attachOverlayEvents(),this.showModal("init"),this.initializeBox(null,!1),this.strictlyConstrain(),this.redraw(),this.resetModal("init"),this._initialized=!0,null!==this.options.onInitialize&&this.options.onInitialize(this),this.cropperEl.onwheel=t=>{t.preventDefault();let{deltaY:e}=t;let i=e>0?1:-1;e=Math.abs(e)/100,e=e>.05?.05:e,e=1+i*e,this.scaleBy(e),null!==this.options.onCropMove&&this.options.onCropMove(this.getValue()),null!==this.options.onCropStart&&this.options.onCropStart(this.getValue())},this.options.responsive){let t;window.onresize=()=>{clearTimeout(t),t=setTimeout((()=>{this.forceRedraw()}),100)}}}forceRedraw(){let t=this.options,e=this.responsiveData;const i=["x","y","width","height"];for(var n=0;n<i.length;n++)e[i[n]]=e[i[n]]>1?1:e[i[n]]<0?0:e[i[n]];t.startPosition=[e.x,e.y,"ratio"],t.startSize=[e.width,e.height,"ratio"],t=this.parseOptions(t),this.showModal("onResize"),this.initializeBox(t),this.resetModal("onResize")}getElement(t,e){if(t&&!t.nodeName&&null==(t=document.querySelector(t)))throw"Unable to find element.";return t}createDOM(e){var n;this.containerEl=document.createElement("div"),this.containerEl.className="croppr-container",this.eventBus=this.containerEl,(n=this.containerEl).addEventListener("touchstart",i),n.addEventListener("touchend",i),n.addEventListener("touchmove",i),this.cropperEl=document.createElement("div"),this.cropperEl.className="croppr",this.imageEl=document.createElement("img"),this.imageEl.setAttribute("crossOrigin","anonymous"),this.imageEl.setAttribute("alt",e.getAttribute("alt")),this.imageEl.onload=()=>{this.getSourceSize(),this.options=this.parseOptions(this.initOptions),this.showModal("setImage"),this.initializeBox(null,!1),this.strictlyConstrain(),this.redraw(),this.resetModal("setImage"),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue());const t=(new v).getColor(this.imageEl);t&&(this.isDark=t.isDark,this.isDark?this.cropperEl.className="croppr croppr-dark":this.cropperEl.className="croppr croppr-light"),this.onImageLoad&&this.onImageLoad()},this.imageEl.setAttribute("src",e.getAttribute("src")),this.imageEl.className="croppr-image",this.imageClippedEl=this.imageEl.cloneNode(),this.imageClippedEl.className="croppr-imageClipped",this.regionEl=document.createElement("div"),this.regionEl.className="croppr-region",this.overlayEl=document.createElement("div"),this.overlayEl.className="croppr-overlay";let s=document.createElement("div");s.className="croppr-handleContainer",this.handles=[];for(let e=0;e<w.length;e++){const i=new t(w[e].position,w[e].constraints,w[e].cursor,this.eventBus);this.handles.push(i),s.appendChild(i.el)}this.cropperEl.appendChild(this.imageEl),this.cropperEl.appendChild(this.imageClippedEl),this.cropperEl.appendChild(this.regionEl),this.cropperEl.appendChild(this.overlayEl),this.cropperEl.appendChild(s),this.containerEl.appendChild(this.cropperEl),e.parentElement.replaceChild(this.containerEl,e),this.setLivePreview()}setLivePreview(){if(this.options.preview){this.preview={},this.preview.parent=this.options.preview,this.preview.parent.style.position="relative";let t=document.createElement("div");this.preview.container=this.preview.parent.appendChild(t),this.preview.container.style.overflow="hidden",this.preview.container.style.position="absolute",this.preview.container.style.top="50%",this.preview.container.style.left="50%",this.preview.container.style.transform="translate(-50%, -50%)"}}resizePreview(t=null){if(null===t&&(t=this.getValue("ratio")),this.preview&&t.width&&t.height){const e=this.preview.parent.offsetWidth,i=this.preview.parent.offsetHeight,n=e/i,s=this.sourceSize.width*t.width,o=this.sourceSize.height*t.height,r=s/o;let h=e,l=i;n>r?h=l*r:l=h/r,this.preview.container.style.width=h+"px",this.preview.container.style.height=l+"px";let a=this.sourceSize.width*h/s,u=this.sourceSize.height*l/o,d=-t.x*a,c=-t.y*u;this.preview.image.style.width=a+"px",this.preview.image.style.height=u+"px",this.preview.image.style.left=d+"px",this.preview.image.style.top=c+"px"}}strictlyConstrain(t=null,e=null){let i;null===e?(i=[[0,0],[1,1]],e=[.5,.5]):i=[e],null===t&&(t=this.options);const{width:n,height:s}=this.imageEl.getBoundingClientRect();this.box.constrainToRatio(t.aspectRatio,e,"height",t.maxAspectRatio),this.box.constrainToSize(t.maxSize.width,t.maxSize.height,t.minSize.width,t.minSize.height,e,t.aspectRatio,t.maxAspectRatio),i.map((t=>{this.box.constrainToBoundary(n,s,t)}))}setImage(t,e){return this.onImageLoad=e,this.imageEl.src=t,this.imageClippedEl.src=t,this}destroy(){try{this.containerEl&&(this._restore.parent.replaceChild(this._restore.element,this.containerEl),this.options.preview&&(this.preview.image.parentNode.removeChild(this.preview.image),this.preview.container.parentNode.removeChild(this.preview.container)))}catch(t){console.error(t)}}initializeBox(t=null,i=!0){null===t&&(t=this.options),this.convertOptionsToPixels(t);let n=t.startSize.width,s=t.startSize.height;t.minSize&&(n<t.minSize.width?n=t.minSize.width:n<t.maxSize.width&&(n=t.maxSize.width)),t.maxSize&&(s<t.minSize.height?s=t.minSize.height:s<t.maxSize.height&&(s=t.maxSize.height));let o=new e(0,0,n,s),r=0,h=0;if(null===t.startPosition){const{width:t,height:e}=this.imageEl.getBoundingClientRect();r=t/2-n/2,h=e/2-s/2}else r=t.startPosition.x,h=t.startPosition.y;if(o.move(r,h),this.preview){this.preview.image&&(this.preview.image.parentNode.removeChild(this.preview.image),this.preview.image=null);let t=document.createElement("img");t.src=this.imageEl.src,this.preview.image=this.preview.container.appendChild(t),this.preview.image.style.position="relative"}!0===i&&this.strictlyConstrain(),this.box=o,this.redraw();for(var l=0;l<this.handles.length;l++)!this.options.maxAspectRatio||.5!=this.handles[l].position[0]&&.5!=this.handles[l].position[1]?this.handles[l].el.style.display="block":this.handles[l].el.style.display="none";return o}showModal(t="default"){let e=this.modalStyle;if(e&&!0===e.modalIsDisplayed)return e;if(this.options.modal){let{modal:i}=this.options,n=i.currentStyle?i.currentStyle.display:getComputedStyle(i,null).display;e={operationName:t,modalIsDisplayed:!0,display:n,visibility:i.currentStyle?i.currentStyle.visibility:getComputedStyle(i,null).visibility},this.modalStyle=e,"none"===n&&(i.style.visibility="hidden",i.style.display="block")}return e}resetModal(t="default"){let e=this.modalStyle;if(e){let{visibility:i,display:n,operationName:s,modalIsDisplayed:o}=e;if(o&&t===s){let{modal:t}=this.options;t.style.visibility=i,t.style.display=n,this.modalStyle={operationName:null,modalIsDisplayed:!1}}}}getSourceSize(){return this.sourceSize={},this.sourceSize.width=this.imageEl.naturalWidth,this.sourceSize.height=this.imageEl.naturalHeight,this.sourceSize}convertor(t,e,i){const n=t=>{this.showModal();const{width:e,height:i}=this.imageEl.getBoundingClientRect();return this.resetModal(),t.width&&(t.width*=e),t.x&&(t.x*=e),t.height&&(t.height*=i),t.y&&(t.y*=i),t};return"real"===e&&"raw"===i?(t=>{this.showModal();const{width:e,height:i}=this.imageEl.getBoundingClientRect();this.resetModal();const n=this.sourceSize.width/e,s=this.sourceSize.height/i;return t.width&&(t.width/=n),t.x&&(t.x/=n),t.height&&(t.height/=s),t.y&&(t.y/=s),t})(t):"ratio"===e&&"raw"===i?n(t):null}convertOptionsToPixels(t=null){let e=!1;null===t&&(t=this.options,e=!0);const{width:i,height:n}=this.imageEl.getBoundingClientRect(),s=["maxSize","minSize","startSize","startPosition"];for(let e=0;e<s.length;e++){const i=s[e];null!==t[i]&&("ratio"==t[i].unit?t[i]=this.convertor(t[i],"ratio","raw"):"real"===t[i].unit&&(t[i]=this.convertor(t[i],"real","raw")),delete t[i].unit)}if(t.minSize&&(t.minSize.width>i&&(t.minSize.width=i),t.minSize.height>n&&(t.minSize.height=n)),t.startSize&&t.startPosition){let e=t.startPosition.x+t.startSize.width;e>i&&(t.startPosition.x-=e-i);let s=t.startPosition.y+t.startSize.height;s>n&&(t.startPosition.y-=s-n)}return e&&(this.options=t),t}redraw(){this.resizePreview();const t=Math.round(this.box.width()),e=Math.round(this.box.height()),i=Math.round(this.box.x1),n=Math.round(this.box.y1),s=Math.round(this.box.x2),o=Math.round(this.box.y2);window.requestAnimationFrame((()=>{this.regionEl.style.transform=`translate(${i}px, ${n}px)`,this.regionEl.style.width=t+"px",this.regionEl.style.height=e+"px",this.imageClippedEl.style.clip=`rect(${n}px, ${s}px, ${o}px, ${i}px)`;const r=this.box.getAbsolutePoint([.5,.5]),{width:h,height:l}=this.imageEl.getBoundingClientRect(),a=r[0]-h/2>>31,u=r[1]-l/2>>31,d=-2*((a^u)+u+u+4)+8;for(let s=0;s<this.handles.length;s++){let o=this.handles[s];const r=o.el.offsetWidth,h=o.el.offsetHeight,l=i+t*o.position[0]-r/2,a=n+e*o.position[1]-h/2;o.el.style.transform=`translate(${Math.round(l)}px, ${Math.round(a)}px)`,o.el.style.zIndex=d==s?5:4}}))}attachHandlerEvents(){const t=this.eventBus;t.addEventListener("handlestart",this.onHandleMoveStart.bind(this)),t.addEventListener("handlemove",this.onHandleMoveMoving.bind(this)),t.addEventListener("handleend",this.onHandleMoveEnd.bind(this))}attachRegionEvents(){const t=this.eventBus;function e(e){e.stopPropagation(),t.dispatchEvent(new CustomEvent("regionmove",{detail:{mouseX:e.clientX,mouseY:e.clientY}}))}function i(n){n.stopPropagation(),document.removeEventListener("mouseup",i),document.removeEventListener("mousemove",e),t.dispatchEvent(new CustomEvent("regionend",{detail:{mouseX:n.clientX,mouseY:n.clientY}}))}this.regionEl.addEventListener("mousedown",(function(n){n.stopPropagation(),document.addEventListener("mouseup",i),document.addEventListener("mousemove",e),t.dispatchEvent(new CustomEvent("regionstart",{detail:{mouseX:n.clientX,mouseY:n.clientY}}))})),t.addEventListener("regionstart",this.onRegionMoveStart.bind(this)),t.addEventListener("regionmove",this.onRegionMoveMoving.bind(this)),t.addEventListener("regionend",this.onRegionMoveEnd.bind(this))}attachOverlayEvents(){const t=this;let i=null;function n(e){e.stopPropagation(),t.eventBus.dispatchEvent(new CustomEvent("handlemove",{detail:{mouseX:e.clientX,mouseY:e.clientY}}))}function s(e){e.stopPropagation(),document.removeEventListener("mouseup",s),document.removeEventListener("mousemove",n),1!==t.box.width()||1!==t.box.height()?t.eventBus.dispatchEvent(new CustomEvent("handleend",{detail:{mouseX:e.clientX,mouseY:e.clientY}})):t.box=i}this.overlayEl.addEventListener("mousedown",(function(o){o.stopPropagation(),document.addEventListener("mouseup",s),document.addEventListener("mousemove",n);const r=t.cropperEl.getBoundingClientRect(),h=o.clientX-r.left,l=o.clientY-r.top;i=t.box,t.box=new e(h,l,h+1,l+1),t.eventBus.dispatchEvent(new CustomEvent("handlestart",{detail:{handle:t.handles[4]}}))}))}onHandleMoveStart(t){let e=t.detail.handle;const i=[1-e.position[0],1-e.position[1]];let[n,s]=this.box.getAbsolutePoint(i);this.activeHandle={handle:e,originPoint:i,originX:n,originY:s},null!==this.options.onCropStart&&this.options.onCropStart(this.getValue())}onHandleMoveMoving(t){let{mouseX:i,mouseY:n}=t.detail,s=this.cropperEl.getBoundingClientRect();i-=s.left,n-=s.top,i<0?i=0:i>s.width&&(i=s.width),n<0?n=0:n>s.height&&(n=s.height);let o=this.activeHandle.originPoint.slice();const r=this.activeHandle.originX,h=this.activeHandle.originY,l=this.activeHandle.handle,a=1===l.constraints[0],u=1===l.constraints[1],d=1===l.constraints[2],c=1===l.constraints[3],p=(c||u)&&(a||d);let m=c||u?r:this.box.x1,g=c||u?r:this.box.x2,v=a||d?h:this.box.y1,w=a||d?h:this.box.y2;m=c?i:m,g=u?i:g,v=a?n:v,w=d?n:w;let[f,E]=[!1,!1];if((c||u)&&(f=c?i>r:i<r),(a||d)&&(E=a?n>h:n<h),f){const t=m;m=g,g=t,o[0]=1-o[0]}if(E){const t=v;v=w,w=t,o[1]=1-o[1]}let x=new e(m,v,g,w);if(this.options.aspectRatio){let t=this.options.aspectRatio,e=!1;p?e=n>x.y1+t*x.width()||n<x.y2-t*x.width():(a||d)&&(e=!0);const i=e?"width":"height";x.constrainToRatio(t,o,i,this.options.maxAspectRatio)}x.constrainToSize(this.options.maxSize.width,this.options.maxSize.height,this.options.minSize.width,this.options.minSize.height,o,this.options.aspectRatio,this.options.maxAspectRatio);const{width:y,height:b}=this.imageEl.getBoundingClientRect();let C=[o];this.options.maxAspectRatio&&(C=[[0,0],[1,1]]),C.map((t=>{x.constrainToBoundary(y,b,t)})),this.box=x,this.redraw(),null!==this.options.onCropMove&&this.options.onCropMove(this.getValue())}onHandleMoveEnd(t){null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue())}onRegionMoveStart(t){let{mouseX:e,mouseY:i}=t.detail,n=this.cropperEl.getBoundingClientRect();e-=n.left,i-=n.top,this.currentMove={offsetX:e-this.box.x1,offsetY:i-this.box.y1},null!==this.options.onCropStart&&this.options.onCropStart(this.getValue())}onRegionMoveMoving(t){let{mouseX:e,mouseY:i}=t.detail,{offsetX:n,offsetY:s}=this.currentMove,o=this.cropperEl.getBoundingClientRect();e-=o.left,i-=o.top,this.box.move(e-n,i-s),this.box.x1<0&&this.box.move(0,null),this.box.x2>o.width&&this.box.move(o.width-this.box.width(),null),this.box.y1<0&&this.box.move(null,0),this.box.y2>o.height&&this.box.move(null,o.height-this.box.height()),this.redraw(),null!==this.options.onCropMove&&this.options.onCropMove(this.getValue())}onRegionMoveEnd(t){null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue())}getValue(t=null){null===t&&(t=this.options.returnMode);let e={};return"real"==t?e=this.getValueAsRealData():"ratio"==t?e=this.getValueAsRatio():"raw"==t&&(e={x:Math.round(this.box.x1),y:Math.round(this.box.y1),width:Math.round(this.box.width()),height:Math.round(this.box.height())}),this.options.responsive&&(this.responsiveData="ratio"==t?e:this.getValueAsRatio()),e}getValueAsRealData(){this.showModal();const t=this.imageEl.naturalWidth,e=this.imageEl.naturalHeight,{width:i,height:n}=this.imageEl.getBoundingClientRect(),s=t/i,o=e/n;return this.resetModal(),{x:Math.round(this.box.x1*s),y:Math.round(this.box.y1*o),width:Math.round(this.box.width()*s),height:Math.round(this.box.height()*o)}}getValueAsRatio(){this.showModal();const{width:t,height:e}=this.imageEl.getBoundingClientRect();return this.resetModal(),{x:this.box.x1/t,y:this.box.y1/e,width:this.box.width()/t,height:this.box.height()/e}}parseOptions(t=null){null===t&&(t=this.options);const e=null,i=null,n={width:null,height:null,unit:"raw"},s={width:null,height:null,unit:"raw"},o={width:1,height:1,unit:"ratio"},r=null,h="real",l=null,a=null,u=null,d=null,c=null,p=!0,m=null;let g=null;null!==t.preview&&(g=this.getElement(t.preview));let v=null;null!==t.modal&&(v=this.getElement(t.modal));let w=null;null!==t.responsive&&(w=t.responsive);let f=null,E=null;const x=["aspectRatio","maxAspectRatio"];for(var y=0;y<x.length;y++)if(void 0!==t[x[y]])if("number"==typeof t[x[y]]){let e=t[x[y]];"aspectRatio"===x[y]?f=e:E=e}else if(t[x[y]]instanceof Array){let e=t[x[y]][1]/t[x[y]][0];"aspectRatio"===x[y]?f=e:E=e}let b=null;void 0!==t.maxSize&&null!==t.maxSize&&(b={width:t.maxSize[0]||null,height:t.maxSize[1]||null,unit:t.maxSize[2]||"raw"});let C=null;void 0!==t.minSize&&null!==t.minSize&&(C={width:t.minSize[0]||null,height:t.minSize[1]||null,unit:t.minSize[2]||"raw"});let z=null;void 0!==t.startSize&&null!==t.startSize&&(z={width:t.startSize[0]||null,height:t.startSize[1]||null,unit:t.startSize[2]||"ratio"});let M=null;void 0!==t.startPosition&&null!==t.startPosition&&(M={x:t.startPosition[0]||null,y:t.startPosition[1]||null,unit:t.startPosition[2]||"ratio"});let S=null;"function"==typeof t.onInitialize&&(S=t.onInitialize);let R=null;"function"==typeof t.onCropStart&&(R=t.onCropStart);let P=null;"function"==typeof t.onCropEnd&&(P=t.onCropEnd);let A=null;"function"==typeof t.onUpdate&&(console.warn("Croppr.js: `onUpdate` is deprecated and will be removed in the next major release. Please use `onCropMove` or `onCropEnd` instead."),A=t.onUpdate),"function"==typeof t.onCropMove&&(A=t.onCropMove);let L=null;if(void 0!==t.returnMode){const e=t.returnMode.toLowerCase();if(-1===["real","ratio","raw"].indexOf(e))throw"Invalid return mode.";L=e}const B=(t,e)=>null!==t?t:e;return{aspectRatio:B(f,e),maxAspectRatio:B(E,i),maxSize:B(b,n),minSize:B(C,s),startSize:B(z,o),startPosition:B(M,r),returnMode:B(L,h),onInitialize:B(S,l),onCropStart:B(R,a),onCropMove:B(A,u),onCropEnd:B(P,d),preview:B(g,c),responsive:B(w,p),modal:B(v,m)}}}{constructor(t,e,i=!1){super(t,e,i)}getValue(t){return super.getValue(t)}setImage(t,e=null){return super.setImage(t,e)}destroy(){return super.destroy()}moveTo(t,e,i=!0,n="raw"){if(this.showModal("moveTo"),"ratio"===n||"real"===n){let i=this.convertor({x:t,y:e},n,"raw");t=i.x,e=i.y}return this.box.move(t,e),!0===i&&this.strictlyConstrain(null,[0,0]),this.redraw(),this.resetModal("moveTo"),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this}resizeTo(t,e,i=null,n=!0,s="raw"){if(this.showModal("resize"),"ratio"===s||"real"===s){let i={width:t,height:e};i=this.convertor(i,s,"raw"),t=i.width,e=i.height}return null===i&&(i=[.5,.5]),this.box.resize(t,e,i),!0===n&&this.strictlyConstrain(),this.redraw(),this.resetModal("resize"),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this}setValue(t,e=!0,i="ratio"){return this.showModal("setValue"),"ratio"!==i&&"real"!==i||(t=this.convertor(t,i,"raw")),this.moveTo(t.x,t.y,!1),this.resizeTo(t.width,t.height,[0,0],e),this.resetModal("setValue"),this}scaleBy(t,e=null,i=!0){return null===e&&(e=[.5,.5]),this.showModal("scaleBy"),this.box.scale(t,e),!0===i&&this.strictlyConstrain(),this.redraw(),this.resetModal("scaleBy"),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this}reset(){return this.showModal("reset"),this.box=this.initializeBox(this.options),this.redraw(),this.resetModal("reset"),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this}}}));

package.json

 {
   "name": "dnm-croppr",
-  "version": "2.7.3",
+  "version": "2.7.4",
   "description": "A fork of original Croppr.js, a vanilla JavaScript image cropper, with advanced options.",
@@ -5,0 +5,0 @@ "main": "src/index.js",

src/core.js

@@ -350,6 +350,12 @@ /**
   destroy() {
-    this._restore.parent.replaceChild(this._restore.element, this.containerEl);
-    if(this.options.preview) {
-      this.preview.image.parentNode.removeChild(this.preview.image);
-      this.preview.container.parentNode.removeChild(this.preview.container);
+    try {
+      if (this.containerEl) {
+        this._restore.parent.replaceChild(this._restore.element, this.containerEl);
+        if(this.options.preview) {
+          this.preview.image.parentNode.removeChild(this.preview.image);
+          this.preview.container.parentNode.removeChild(this.preview.container);
+        }
+      }
+    } catch (e) {
+      console.error(e);
     }
@@ -356,0 +362,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

563760

increased by0.05%

Lines of code

4195

increased by0.29%

No dependency changes