https://artpic2000.com/_next/static/chunks/6831-15690208b5cc66d1.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[6831],{50457:(e,t,i)=>{i.d(t,{A:()=>d});var r=i(73818),s=i(55729);function a(e){return e&&e.stopPropagation&&e.stopPropagation(),e&&e.preventDefault&&e.preventDefault(),!1}function o(e){return null==e?[]:Array.isArray(e)?e.slice():[e]}function n(e){return null!==e&&1===e.length?e[0]:e.slice()}function h(e){Object.keys(e).forEach(t=>{"u">typeof document&&document.addEventListener(t,e[t],!1)})}function l(e,t){let i;return c(((i=e)<=t.min&&(i=t.min),i>=t.max&&(i=t.max),i),t)}function c(e,t){let i=(e-t.min)%t.step,r=e-i;return 2*Math.abs(i)>=t.step&&(r+=i>0?t.step:-t.step),parseFloat(r.toFixed(5))}let u=function(e){function t(t){var i;(i=e.call(this,t)||this).onKeyUp=()=>{i.onEnd()},i.onMouseUp=()=>{i.onEnd(i.getMouseEventMap())},i.onTouchEnd=e=>{e.preventDefault(),i.onEnd(i.getTouchEventMap())},i.onBlur=()=>{i.setState({index:-1},i.onEnd(i.getKeyDownEventMap()))},i.onMouseMove=e=>{i.setState({pending:!0});let t=i.getMousePosition(e),r=i.getDiffPosition(t[0]),s=i.getValueFromPosition(r);i.move(s)},i.onTouchMove=e=>{if(e.touches.length>1)return;i.setState({pending:!0});let t=i.getTouchPosition(e);if(void 0===i.isScrolling){let e=t[0]-i.startPosition[0],r=t[1]-i.startPosition[1];i.isScrolling=Math.abs(r)>Math.abs(e)}if(i.isScrolling)return void i.setState({index:-1});let r=i.getDiffPosition(t[0]),s=i.getValueFromPosition(r);i.move(s)},i.onKeyDown=e=>{if(!(e.ctrlKey||e.shiftKey||e.altKey||e.metaKey))switch(i.setState({pending:!0}),e.key){case"ArrowLeft":case"ArrowDown":case"Left":case"Down":e.preventDefault(),i.moveDownByStep();break;case"ArrowRight":case"ArrowUp":case"Right":case"Up":e.preventDefault(),i.moveUpByStep();break;case"Home":e.preventDefault(),i.move(i.props.min);break;case"End":e.preventDefault(),i.move(i.props.max);break;case"PageDown":e.preventDefault(),i.moveDownByStep(i.props.pageFn(i.props.step));break;case"PageUp":e.preventDefault(),i.moveUpByStep(i.props.pageFn(i.props.step))}},i.onSliderMouseDown=e=>{if(!i.props.disabled&&2!==e.button){if(i.setState({pending:!0}),!i.props.snapDragDisabled){let t=i.getMousePosition(e);i.forceValueFromPosition(t[0],e=>{i.start(e,t[0]),h(i.getMouseEventMap())})}a(e)}},i.onSliderClick=e=>{if(!i.props.disabled&&i.props.onSliderClick&&!i.hasMoved){let t=i.getMousePosition(e),r=l(i.calcValue(i.calcOffsetFromPosition(t[0])),i.props);i.props.onSliderClick(r)}},i.createOnKeyDown=e=>t=>{i.props.disabled||(i.start(e),h(i.getKeyDownEventMap()),a(t))},i.createOnMouseDown=e=>t=>{if(i.props.disabled||2===t.button)return;i.setState({pending:!0});let r=i.getMousePosition(t);i.start(e,r[0]),h(i.getMouseEventMap()),a(t)},i.createOnTouchStart=e=>t=>{if(i.props.disabled||t.touches.length>1)return;i.setState({pending:!0});let r=i.getTouchPosition(t);i.startPosition=r,i.isScrolling=void 0,i.start(e,r[0]),h(i.getTouchEventMap()),t.stopPropagation&&t.stopPropagation()},i.handleResize=()=>{let e=window.setTimeout(()=>{i.pendingResizeTimeouts.shift(),i.resize()},0);i.pendingResizeTimeouts.push(e)},i.renderThumb=(e,t)=>{let r=i.props.thumbClassName+" "+i.props.thumbClassName+"-"+t+" "+(i.state.index===t?i.props.thumbActiveClassName:""),s={ref:e=>{i["thumb"+t]=e},key:i.props.thumbClassName+"-"+t,className:r,style:e,onMouseDown:i.createOnMouseDown(t),onTouchStart:i.createOnTouchStart(t),onFocus:i.createOnKeyDown(t),tabIndex:0,role:"slider","aria-orientation":i.props.orientation,"aria-valuenow":i.state.value[t],"aria-valuemin":i.props.min,"aria-valuemax":i.props.max,"aria-label":Array.isArray(i.props.ariaLabel)?i.props.ariaLabel[t]:i.props.ariaLabel,"aria-labelledby":Array.isArray(i.props.ariaLabelledby)?i.props.ariaLabelledby[t]:i.props.ariaLabelledby,"aria-disabled":i.props.disabled},a={index:t,value:n(i.state.value),valueNow:i.state.value[t]};return i.props.ariaValuetext&&(s["aria-valuetext"]="string"==typeof i.props.ariaValuetext?i.props.ariaValuetext:i.props.ariaValuetext(a)),i.props.renderThumb(s,a)},i.renderTrack=(e,t,r)=>{let s={key:i.props.trackClassName+"-"+e,className:i.props.trackClassName+" "+i.props.trackClassName+"-"+e,style:i.buildTrackStyle(t,i.state.upperBound-r)},a={index:e,value:n(i.state.value)};return i.props.renderTrack(s,a)};let r=o(t.value);r.length||(r=o(t.defaultValue)),i.pendingResizeTimeouts=[];let c=[];for(let e=0;e<r.length;e+=1)r[e]=l(r[e],t),c.push(e);return i.resizeObserver=null,i.resizeElementRef=s.createRef(),i.state={index:-1,upperBound:0,sliderLength:0,value:r,zIndices:c},i}t.prototype=Object.create(e.prototype),t.prototype.constructor=t,(0,r.A)(t,e);var i=t.prototype;return i.componentDidMount=function(){"u">typeof window&&(this.resizeObserver=new ResizeObserver(this.handleResize),this.resizeObserver.observe(this.resizeElementRef.current),this.resize())},t.getDerivedStateFromProps=function(e,t){let i=o(e.value);return i.length?t.pending?null:{value:i.map(t=>l(t,e))}:null},i.componentDidUpdate=function(){0===this.state.upperBound&&this.resize()},i.componentWillUnmount=function(){this.clearPendingResizeTimeouts(),this.resizeObserver&&this.resizeObserver.disconnect()},i.onEnd=function(e){e&&Object.keys(e).forEach(t=>{"u">typeof document&&document.removeEventListener(t,e[t],!1)}),this.hasMoved&&this.fireChangeEvent("onAfterChange"),this.setState({pen

1ding:!1}),this.hasMoved=!1},i.getValue=function(){return n(this.state.value)},i.getClosestIndex=function(e){let t=Number.MAX_VALUE,i=-1,{value:r}=this.state,s=r.length;for(let a=0;a<s;a+=1){let s=Math.abs(e-this.calcOffset(r[a]));s<t&&(t=s,i=a)}return i},i.getMousePosition=function(e){return[e["page"+this.axisKey()],e["page"+this.orthogonalAxisKey()]]},i.getTouchPosition=function(e){let t=e.touches[0];return[t["page"+this.axisKey()],t["page"+this.orthogonalAxisKey()]]},i.getKeyDownEventMap=function(){return{keydown:this.onKeyDown,keyup:this.onKeyUp,focusout:this.onBlur}},i.getMouseEventMap=function(){return{mousemove:this.onMouseMove,mouseup:this.onMouseUp}},i.getTouchEventMap=function(){return{touchmove:this.onTouchMove,touchend:this.onTouchEnd}},i.getValueFromPosition=function(e){let t=e/(this.state.sliderLength-this.state.thumbSize)*(this.props.max-this.props.min);return l(this.state.startValue+t,this.props)},i.getDiffPosition=function(e){let t=e-this.state.startPosition;return this.props.invert&&(t*=-1),t},i.resize=function(){let{slider:e,thumb0:t}=this;if(!e||!t)return;let i=this.sizeKey(),r=e.getBoundingClientRect(),s=e[i],a=r[this.posMaxKey()],o=r[this.posMinKey()],n=t.getBoundingClientRect()[i.replace("client","").toLowerCase()],h=s-n,l=Math.abs(a-o);this.state.upperBound===h&&this.state.sliderLength===l&&this.state.thumbSize===n||this.setState({upperBound:h,sliderLength:l,thumbSize:n})},i.calcOffset=function(e){let t=this.props.max-this.props.min;return 0===t?0:(e-this.props.min)/t*this.state.upperBound},i.calcValue=function(e){return e/this.state.upperBound*(this.props.max-this.props.min)+this.props.min},i.calcOffsetFromPosition=function(e){let{slider:t}=this,i=t.getBoundingClientRect(),r=i[this.posMaxKey()],s=i[this.posMinKey()],a=e-(window["page"+this.axisKey()+"Offset"]+(this.props.invert?r:s));return this.props.invert&&(a=this.state.sliderLength-a),a-=this.state.thumbSize/2},i.forceValueFromPosition=function(e,t){let i=this.calcOffsetFromPosition(e),r=this.getClosestIndex(i),s=l(this.calcValue(i),this.props),a=this.state.value.slice();a[r]=s;for(let e=0;e<a.length-1;e+=1)if(a[e+1]-a[e]<this.props.minDistance)return;this.fireChangeEvent("onBeforeChange"),this.hasMoved=!0,this.setState({value:a},()=>{t(r),this.fireChangeEvent("onChange")})},i.clearPendingResizeTimeouts=function(){do clearTimeout(this.pendingResizeTimeouts.shift());while(this.pendingResizeTimeouts.length)},i.start=function(e,t){let i=this["thumb"+e];i&&i.focus();let{zIndices:r}=this.state;r.splice(r.indexOf(e),1),r.push(e),this.setState(i=>({startValue:i.value[e],startPosition:void 0!==t?t:i.startPosition,index:e,zIndices:r}))},i.moveUpByStep=function(e){void 0===e&&(e=this.props.step);let t=this.state.value[this.state.index],i=l(this.props.invert&&"horizontal"===this.props.orientation?t-e:t+e,this.props);

1this.move(Math.min(i,this.props.max))},i.moveDownByStep=function(e){void 0===e&&(e=this.props.step);let t=this.state.value[this.state.index],i=l(this.props.invert&&"horizontal"===this.props.orientation?t+e:t-e,this.props);this.move(Math.max(i,this.props.min))},i.move=function(e){let t=this.state.value.slice(),{index:i}=this.state,{length:r}=t,s=t[i];if(e===s)return;this.hasMoved||this.fireChangeEvent("onBeforeChange"),this.hasMoved=!0;let{pearling:a,max:o,min:n,minDistance:h}=this.props;if(!a){if(i>0){let r=t[i-1];e<r+h&&(e=r+h)}if(i<r-1){let r=t[i+1];e>r-h&&(e=r-h)}}t[i]=e,a&&r>1&&(e>s?(this.pushSucceeding(t,h,i),function(e,t,i,r){for(let s=0;s<e;s+=1){let a=r-s*i;t[e-1-s]>a&&(t[e-1-s]=a)}}(r,t,h,o)):e<s&&(this.pushPreceding(t,h,i),function(e,t,i,r){for(let s=0;s<e;s+=1){let e=r+s*i;t[s]<e&&(t[s]=e)}}(r,t,h,n))),this.setState({value:t},this.fireChangeEvent.bind(this,"onChange"))},i.pushSucceeding=function(e,t,i){let r,s;for(s=e[r=i]+t;null!==e[r+1]&&s>e[r+1];r+=1,s=e[r]+t)e[r+1]=c(s,this.props)},i.pushPreceding=function(e,t,i){for(let r=i,s=e[r]-t;null!==e[r-1]&&s<e[r-1];r-=1,s=e[r]-t)e[r-1]=c(s,this.props)},i.axisKey=function(){return"vertical"===this.props.orientation?"Y":"X"},i.orthogonalAxisKey=function(){return"vertical"===this.props.orientation?"X":"Y"},i.posMinKey=function(){return"vertical"===this.props.orientation?this.props.invert?"bottom":"top":this.props.invert?"right":"left"},i.posMaxKey=function(){return"vertical"===this.props.orientation?this.props.invert?"top":"bottom":this.props.invert?"left":"right"},i.sizeKey=function(){return"vertical"===this.props.orientation?"clientHeight":"clientWidth"},i.fireChangeEvent=function(e){this.props[e]&&this.props[e](n(this.state.value),this.state.index)},i.buildThumbStyle=function(e,t){let i={position:"absolute",touchAction:"none",willChange:this.state.index>=0?this.posMinKey():void 0,zIndex:this.state.zIndices.indexOf(t)+1};return i[this.posMinKey()]=e+"px",i},i.buildTrackStyle=function(e,t){let i={position:"absolute",willChange:this.state.index>=0?this.posMinKey()+","+this.posMaxKey():void 0};return i[this.posMinKey()]=e,i[this.posMaxKey()]=t,i},i.buildMarkStyle=function(e){var t;return(t={position:"absolute"})[this.posMinKey()]=e,t},i.renderThumbs=function(e){let{length:t}=e,i=[];for(let r=0;r<t;r+=1)i[r]=this.buildThumbStyle(e[r],r);let r=[];for(let e=0;e<t;e+=1)r[e]=this.renderThumb(i[e],e);return r},i.renderTracks=function(e){let t=[],i=e.length-1;t.push(this.renderTrack(0,0,e[0]));for(let r=0;r<i;r+=1)t.push(this.renderTrack(r+1,e[r],e[r+1]));return t.push(this.renderTrack(i+1,e[i],this.state.upperBound)),t},i.renderMarks=function(){let{marks:e}=this.props,t=this.props.max-this.props.min+1;return"boolean"==typeof e?e=Array.from({length:t}).map((e,t)=>t):"number"==typeof e&&(e=Array.from({length:t}).map((e,t)=>t).filter(t=>t%e==0)),e.map(parseFloat).sort((e,t)=>e-t).map(e=>{let t=this.calcOffset(e),i={key:e,className:this.props.markClassName,style:this.buildMarkStyle(t)};return this.props.renderMark(i)})},i.render=function(){let e=[],{value:t}=this.state,i=t.length;for(let r=0;r<i;r+=1)e[r]=this.calcOffset(t[r],r);let r=this.props.withTracks?this.renderTracks(e):null,a=this.renderThumbs(e),o=this.props.marks?this.renderMarks():null;return s.createElement("div",{ref:e=>{this.slider=e,this.resizeElementRef.current=e},style:{position:"relative"},className:this.props.className+(this.props.disabled?" disabled":""),onMouseDown:this.onSliderMouseDown,onClick:this.onSliderClick},r,a,o)},t}(s.Component);u.displayName="ReactSlider",u.defaultProps={min:0,max:100,step:1,pageFn:e=>10*e,minDistance:0,defaultValue:0,orientation:"horizontal",className:"slider",thumbClassName:"thumb",thumbActiveClassName:"active",trackClassName:"track",markClassName:"mark",withTracks:!0,pearling:!1,disabled:!1,snapDragDisabled:!1,invert:!1,marks:[],renderThumb:e=>s.createElement("div",e),renderTrack:e=>s.createElement("div",e),renderMark:e=>s.createElement("span",e)};var d=u},59773:(e,t,i)=>{var r=i(74406);t.mw={prefix:r.prefix,iconName:r.iconName,icon:[r.width,r.height,r.aliases,r.unicode,r.svgPathData]},t.U2=t.mw,r.prefix,r.iconName,r.width,r.height,r.aliases,r.unicode,r.svgPathData,r.aliases},74406:(e,t)=>

1{Object.defineProperty(t,"__esModule",{value:!0});var i="arrow-rotate-left",r=[8634,"arrow-left-rotate","arrow-rotate-back","arrow-rotate-backward","undo"],s="f0e2",a="M125.7 160H176c17.7 0 32 14.3 32 32s-14.3 32-32 32H48c-17.7 0-32-14.3-32-32V64c0-17.7 14.3-32 32-32s32 14.3 32 32v51.2L97.6 97.6c87.5-87.5 229.3-87.5 316.8 0s87.5 229.3 0 316.8s-229.3 87.5-316.8 0c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0c62.5 62.5 163.8 62.5 226.3 0s62.5-163.8 0-226.3s-163.8-62.5-226.3 0L125.7 160z";t.definition={prefix:"fas",iconName:i,icon:[512,512,r,s,a]},t.faArrowRotateLeft=t.definition,t.prefix="fas",t.iconName=i,t.width=512,t.height=512,t.ligatures=r,t.unicode=s,t.svgPathData=a,t.aliases=r},78235:(e,t,i)=>{i.d(t,{A:()=>u});var r=i(55729),s=(e,t,i,r,s,a)=>{if(0===a)e.rect(t,i,r,s);else{let o=r-a,n=s-a;e.translate(t,i),e.arc(a,a,a,Math.PI,1.5*Math.PI),e.lineTo(o,0),e.arc(o,a,a,1.5*Math.PI,2*Math.PI),e.lineTo(r,n),e.arc(o,n,a,2*Math.PI,.5*Math.PI),e.lineTo(a,s),e.arc(a,n,a,.5*Math.PI,Math.PI),e.closePath(),e.translate(-t,-i)}},a=(e,t)=>new Promise((i,r)=>{let s=new Image;s.addEventListener("load",()=>i(s)),s.addEventListener("error",r),!e.match(/^\s*data:([a-z]+\/[a-z]+(;[a-z-]+=[a-z-]+)?)?(;base64)?,[a-z0-9!$&',()*+;=\-._~:@/?%\s]*\s*$/i)&&t&&(s.crossOrigin=t),s.src=e}),o="u">typeof File,n=e=>Math.PI/180*e,h={x:.5,y:.5},l=class{constructor(e){this.imageState=h,this.config={border:25,borderRadius:0,scale:1,rotate:0,color:[0,0,0,.5],backgroundColor:"",borderColor:void 0,showGrid:!1,gridColor:"#666",disableBoundaryChecks:!1,disableHiDPIScaling:!1,disableCanvasRotation:!0,crossOrigin:void 0,...e},this.pixelRatio="u">typeof window&&window.devicePixelRatio&&!this.config.disableHiDPIScaling?window.devicePixelRatio:1}getPixelRatio(){return this.pixelRatio}getImageState(){return this.imageState}setImageState(e){this.imageState=e}updateConfig(e){this.config={...this.config,...e}}isVertical(){return!this.config.disableCanvasRotation&&this.config.rotate%180!=0}getBorders(e){let t=e??this.config.border;return Array.isArray(t)?t:[t,t]}getDimensions(){let{width:e,height:t,rotate:i,border:r}=this.config,s={width:0,height:0},[a,o]=this.getBorders(r);return this.isVertical()?(s.width=t,s.height=e):(s.width=e,s.height=t),s.width+=2*a,s.height+=2*o,{canvas:s,rotate:i,width:e,height:t,border:r}}getXScale(){if(!this.imageState.width||!this.imageState.height)throw Error("Image dimension is unknown.");return Math.min(1,this.config.width/this.config.height/(this.imageState.width/this.imageState.height))}getYScale(){if(!this.imageState.width||!this.imageState.height)throw Error("Image dimension is unknown.");return Math.min(1,this.config.height/this.config.width/(this.imageState.height/this.imageState.width))}getCroppingRect(e){if(!this.imageState.width||!this.imageState.height)return{x:0,y:0,width:1,height:1};let t=e||{x:this.imageState.x,y:this.imageState.y},i=1/this.config.scale*this.getXScale(),r=1/this.config.scale*this.getYScale(),s={x:t.x-i/2,y:t.y-r/2,width:i,height:r},a=0,o=1-s.width,n=0,h=1-s.height;return(this.config.disableBoundaryChecks||i>1||r>1)&&(a=-s.width,o=1,n=-s.height,h=1),{...s,x:Math.max(a,Math.min(s.x,o)),y:Math.max(n,Math.min(s.y,h))}}getInitialSize(e,t){let i,r,s=this.getDimensions();return s.height/s.width>t/e?r=(i=s.height)/t*e:i=(r=s.width)/e*t,{height:i,width:r}}async loadImage(e){let t;if(o&&e instanceof File)t=await new Promise((t,i)=>{let r=new FileReader;r.addEventListener("load",e=>{try{if(!e?.target?.result)throw Error("No image data");t(a(e.target.result))}catch(e){i(e)}}),r.readAsDataURL(e)});else if("string"==typeof e)t=await a(e,this.config.crossOrigin);else throw Error("Invalid image source");let i={...this.getInitialSize(t.width,t.height),resource:t,x:.5,y:.5};return this.imageState=i,i}clearImage(){this.imageState=h}calculatePosition(e=this.imageState,t){let[i,r]=this.getBorders(t);if(!e.width||!e.height)throw Error("Image dimension is unknown.");let s=this.getCroppingRect(),a=e.width*this.config.scale,o=e.height*this.config.scale,n=-s.x*a,h=-s.y*o;return this.isVertical()?(n+=r,h+=i):(n+=i,h+=r),{x:n,y:h,height:o,width:a}}paint(e){var t,i;let r,a;e.save(),e.scale(this.pixelRatio,this.pixelRatio),e.translate(0,0),e.fillStyle="rgba("+this.config.color.slice(0,4).join(",")+")";let o=this.config.borderRadius,n=this.getDimensions(),[h,l]=this.getBorders(n.border),c=n.

1canvas.height,u=n.canvas.width;o=Math.min(o=Math.max(o,0),u/2-h,c/2-l),e.beginPath(),s(e,h,l,u-2*h,c-2*l,o),e.rect(u,0,-u,c),e.fill("evenodd"),this.config.borderColor&&(e.strokeStyle="rgba("+this.config.borderColor.slice(0,4).join(",")+")",e.lineWidth=1,e.beginPath(),s(e,h+.5,l+.5,u-2*h-1,c-2*l-1,o),e.stroke()),this.config.showGrid&&(t=u-2*h,i=c-2*l,e.fillStyle=this.config.gridColor,r=t/3,a=i/3,e.fillRect(h,l,1,i),e.fillRect(r+h,l,1,i),e.fillRect(2*r+h,l,1,i),e.fillRect(3*r+h,l,1,i),e.fillRect(4*r+h,l,1,i),e.fillRect(h,l,t,1),e.fillRect(h,a+l,t,1),e.fillRect(h,2*a+l,t,1),e.fillRect(h,3*a+l,t,1),e.fillRect(h,4*a+l,t,1)),e.restore()}paintImage(e,t,i,r=this.pixelRatio){if(!t.resource)return;let s=this.calculatePosition(t,i);e.save(),e.translate(e.canvas.width/2,e.canvas.height/2),e.rotate(this.config.rotate*Math.PI/180),e.translate(-(e.canvas.width/2),-(e.canvas.height/2)),this.isVertical()&&e.translate((e.canvas.width-e.canvas.height)/2,(e.canvas.height-e.canvas.width)/2),e.scale(r,r),e.globalCompositeOperation="destination-over",e.drawImage(t.resource,s.x,s.y,s.width,s.height),this.config.backgroundColor&&(e.fillStyle=this.config.backgroundColor,e.fillRect(0,0,e.canvas.width,e.canvas.height)),e.restore()}getImage(){let e=this.getCroppingRect(),t=this.imageState;if(!t.resource)throw Error("No image resource available, please report this to: https://github.com/mosch/react-avatar-editor/issues");e.x*=t.resource.width,e.y*=t.resource.height,e.width*=t.resource.width,e.height*=t.resource.height;let i=document.createElement("canvas");this.isVertical()?(i.width=Math.round(e.height),i.height=Math.round(e.width)):(i.width=Math.round(e.width),i.height=Math.round(e.height));let r=i.getContext("2d");if(!r)throw Error("No context found, please report this to: https://github.com/mosch/react-avatar-editor/issues");return r.translate(i.width/2,i.height/2),r.rotate(this.config.rotate*Math.PI/180),r.translate(-(i.width/2),-(i.height/2)),this.isVertical()&&r.translate((i.width-i.height)/2,(i.height-i.width)/2),this.config.backgroundColor&&(r.fillStyle=this.config.backgroundColor,r.fillRect(0,0,i.width,i.height)),r.drawImage(t.resource,-e.x,-e.y),i}getImageScaledToCanvas(){let e=this.getDimensions(),t=this.imageState,i=document.createElement("canvas");if(this.isVertical()?(i.width=e.height,i.height=e.width):(i.width=e.width,i.height=e.height),!t.resource)return i;let r=i.getContext("2d");if(!r)return i;let s=this.calculatePosition(t,0);return r.save(),r.translate(i.width/2,i.height/2),r.rotate(this.config.rotate*Math.PI/180),r.translate(-(i.width/2),-(i.height/2)),this.isVertical()&&r.translate((i.width-i.height)/2,(i.height-i.width)/2),this.config.backgroundColor&&(r.fillStyle=this.config.backgroundColor,r.fillRect(0,0,i.width,i.height)),r.drawImage(t.resource,s.x,s.y,s.width,s.height),r.restore(),i}calculateDragPosition(e,t,i,r){let s=i-e,a=r-t;if(!this.imageState.width||!this.imageState.height)throw Error("Image dimension is unknown.");let o=this.imageState.width*this.config.scale,h=this.imageState.height*this.config.scale,{x:l,y:c}=this.getCroppingRect();l*=o,c*=h;let u=this.config.rotate;u%=360;let d=Math.cos(n(u=u<0?u+360:u)),g=Math.sin(n(u)),p=l+s*d+a*g,f=c+-s*g+a*d;return{x:p/o+1/this.config.scale*this.getXScale()/2,y:f/h+1/this.config.scale*this.getYScale()/2}}},c=()=>{},u=(0,r.forwardRef)((e,t)=>{let{scale:i=1,rotate:s=0,border:a=25,borderRadius:o=0,width:n=200,height:h=200,color:u=[0,0,0,.5],showGrid:d=!1,gridColor:g="#666",disableBoundaryChecks:p=!1,disableHiDPIScaling:f=!1,disableCanvasRotation:m=!0,image:v,position:w,backgroundColor:b,crossOrigin:y,onLoadStart:S,onLoadFailure:M,onLoadSuccess:x,onImageReady:C,onImageChange:k,onMouseUp:R,onMouseMove:P,onPositionChange:E,borderColor:D,style:I}=e,T=(0,r.useRef)(null),z=(0,r.useRef)(new l({width:n,height:h,border:a,borderRadius:o,scale:i,rotate:s,color:u,backgroundColor:b,borderColor:D,showGrid:d,gridColor:g,disableBoundaryChecks:p,disableHiDPIScaling:f,disableCanvasRotation:m,crossOrigin:y})),L=(0,r.useRef)(!1),K=(0,r.useRef)(void 0),N=(0,r.useRef)(void 0),[O,A]=(0,r.useState)(!1),[B,V]=(0,r.useState)(!1),[F,U]=(0,r.useState)(z.current.getImageState()),H=(0,r.useRef)(R);H.current=R;let X=(0,r.useRef)(P);X.current=P;let Y=(0,r.useRef)(E);Y.current=E,(0,r.useEffect)(()=>{z.current.updateConfig({width:n,height:h,border:a,borderRadius:o,scale:i,rotate:s,color:u,backgroundColor:b,borderColor:D,showGrid:d,gridColor:g,disableBoundaryChecks:

1p,disableHiDPIScaling:f,disableCanvasRotation:m,crossOrigin:y})},[n,h,a,o,i,s,u,b,D,d,g,p,f,m,y]);let _=(0,r.useCallback)(()=>{if(!T.current)throw Error("No canvas found, please report this to: https://github.com/mosch/react-avatar-editor/issues");return T.current},[]),j=(0,r.useCallback)(()=>{let e=_().getContext("2d");if(!e)throw Error("No context found, please report this to: https://github.com/mosch/react-avatar-editor/issues");return e},[_]),G=(0,r.useCallback)(async e=>{V(!0),S?.();try{let t=await z.current.loadImage(e);L.current=!1,A(!1),U(t),C?.(),x?.(t)}catch{M?.()}finally{V(!1)}},[S,C,x,M]),W=(0,r.useCallback)(()=>{let e=_();j().clearRect(0,0,e.width,e.height),z.current.clearImage(),U(z.current.getImageState())},[_,j]),$=(0,r.useCallback)(()=>{let e=j(),t=_();e.clearRect(0,0,t.width,t.height),z.current.paint(e),z.current.paintImage(e,F,a)},[j,_,F,a,n,h,o,i,s,u,b,D,d,g,p,f,m,y]),q=(0,r.useCallback)(e=>{e.preventDefault(),L.current=!0,K.current=void 0,N.current=void 0,A(!0)},[]),J=(0,r.useCallback)(()=>{L.current=!0,K.current=void 0,N.current=void 0,A(!0)},[]);(0,r.useImperativeHandle)(t,()=>({getImage:()=>z.current.getImage(),getImageScaledToCanvas:()=>z.current.getImageScaledToCanvas(),getCroppingRect:()=>z.current.getCroppingRect()}),[]),(0,r.useEffect)(()=>{let e=j();v&&G(v),z.current.paint(e);let t=e=>{if(!L.current)return;e.cancelable&&e.preventDefault();let t="targetTouches"in e?e.targetTouches[0].pageX:e.clientX,i="targetTouches"in e?e.targetTouches[0].pageY:e.clientY,r=K.current,s=N.current;if(K.current=t,N.current=i,void 0!==r&&void 0!==s){let e=z.current.getImageState();if(e.width&&e.height){let a=z.current.calculateDragPosition(t,i,r,s);Y.current?.(a);let o={...e,...a};z.current.setImageState(o),U(o)}}X.current?.(e)},i=()=>{L.current&&(L.current=!1,A(!1),H.current?.())},r=!!(()=>{let e=!1;try{let t=Object.defineProperty({},"passive",{get:function(){e=!0}});window.addEventListener("test",c,t),window.removeEventListener("test",c,t)}catch{e=!1}return e})()&&{passive:!1};return document.addEventListener("mousemove",t,r),document.addEventListener("mouseup",i,r),document.addEventListener("touchmove",t,r),document.addEventListener("touchend",i,r),()=>{document.removeEventListener("mousemove",t,!1),document.removeEventListener("mouseup",i,!1),document.removeEventListener("touchmove",t,!1),document.removeEventListener("touchend",i,!1)}},[]),(0,r.useEffect)(()=>{v?G(v):v||.5===F.x||.5===F.y||W()},[v,n,h,b]),(0,r.useEffect)(()=>{$()},[$]),(0,r.useEffect)(()=>{if(!B)return;let e=T.current;if(!e)return;let t=e.getContext("2d");if(!t)return;let i,r=performance.now(),s=a=>{let o=.03+.02*Math.sin((a-r)/1e3*2.5)+.02;t.save(),t.clearRect(0,0,e.width,e.height),t.fillStyle=`rgba(255,255,255,${o})`,t.fillRect(0,0,e.width,e.height),t.restore(),i=requestAnimationFrame(s)};return i=requestAnimationFrame(s),()=>cancelAnimationFrame(i)},[B]);let Q=(0,r.useRef)({image:v,width:n,height:h,position:w,scale:i,rotate:s,imageX:F.x,imageY:F.y});(0,r.useEffect)(()=>{let e=Q.current;(e.image!==v||e.width!==n||e.height!==h||e.position!==w||e.scale!==i||e.rotate!==s||e.imageX!==F.x||e.imageY!==F.y)&&(k?.(),Q.current={image:v,width:n,height:h,position:w,scale:i,rotate:s,imageX:F.x,imageY:F.y})},[v,n,h,w,i,s,F.x,F.y,k]);let Z=z.current.getDimensions(),ee=z.current.getPixelRatio(),et={width:Z.canvas.width,height:Z.canvas.height,cursor:O?"grabbing":"grab",touchAction:"none",maxWidth:"none",maxHeight:"none"};return r.createElement("canvas",{width:Z.canvas.width*ee,height:Z.canvas.height*ee,onMouseDown:q,onTouchStart:J,style:{...et,...I},ref:T})});u.displayName="AvatarEditor"}}]);