https://assets2.gyazo.com/dist/7f9d22b16018170e3bad.chunk.js

1try{!function(){var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:{},t=(new e.Error).stack;t&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[t]="1b167fc8-42ec-45d5-8ebc-3d4b756cb91b",e._sentryDebugIdIdentifier="sentry-dbid-1b167fc8-42ec-45d5-8ebc-3d4b756cb91b")}()}catch(e){}(globalThis.webpackChunkgyazo=globalThis.webpackChunkgyazo||[]).push([[7999],{23902(e,t,i){var n=i(96540);const r=e=>{const t=n.useRef(e);return n.useEffect(()=>{t.current=e}),t};i.d(t,["A",0,r])},91971(e,t,i){const n=i(96540)["undefined"!=typeof document&&void 0!==document.createElement?"useLayoutEffect":"useEffect"];i.d(t,["A",0,n])},10629(e,t,i){const n=function(e){var t=[],i=null,n=function(){for(var n=arguments.length,r=new Array(n),a=0;a<n;a++)r[a]=arguments[a];t=r,i||(i=requestAnimationFrame(function(){i=null,e.apply(void 0,t)}))};return n.cancel=function(){i&&(cancelAnimationFrame(i),i=null)},n};i.d(t,["A",0,n])},22869(e,t,i){i.d(t,{Ay:()=>w});var n=i(96540),r={x:0,y:0,width:0,height:0,unit:"px"},a=(e,t,i)=>Math.min(Math.max(e,t),i),o=(e,t)=>e===t||e.width===t.width&&e.height===t.height&&e.x===t.x&&e.y===t.y&&e.unit===t.unit;function h(e,t,i){return"%"===e.unit?{...r,...e,unit:"%"}:{unit:"%",x:e.x?e.x/t*100:0,y:e.y?e.y/i*100:0,width:e.width?e.width/t*100:0,height:e.height?e.height/i*100:0}}function s(e,t,i){return e.unit&&"px"!==e.unit?{unit:"px",x:e.x?e.x*t/100:0,y:e.y?e.y*i/100:0,width:e.width?e.width*t/100:0,height:e.height?e.height*i/100:0}:{...r,...e,unit:"px"}}function d(e,t,i,n,r,a=0,o=0,h=n,s=r){let d={...e},l=Math.min(a,n),c=Math.min(o,r),w=Math.min(h,n),p=Math.min(s,r);t&&(t>1?(l=o?o*t:l,c=l/t,w=h*t):(c=a?a/t:c,l=c*t,p=s/t)),d.y<0&&(d.height=Math.max(d.height+d.y,c),d.y=0),d.x<0&&(d.width=Math.max(d.width+d.x,l),d.x=0);let g=n-(d.x+d.width);g<0&&(d.x=Math.min(d.x,n-l),d.width+=g);let u=r-(d.y+d.height);if(u<0&&(d.y=Math.min(d.y,r-c),d.height+=u),d.width<l&&(("sw"===i||"nw"==i)&&(d.x-=l-d.width),d.width=l),d.height<c&&(("nw"===i||"ne"==i)&&(d.y-=c-d.height),d.height=c),d.width>w&&(("sw"===i||"nw"==i)&&(d.x-=w-d.width),d.width=w),d.height>p&&(("nw"===i||"ne"==i)&&(d.y-=p-d.height),d.height=p),t){let e=d.width/d.height;if(e<t){let e=Math.max(d.width/t,c);("nw"===i||"ne"==i)&&(d.y-=e-d.height),d.height=e}else if(e>t){let e=Math.max(d.height*t,l);("sw"===i||"nw"==i)&&(d.x-=e-d.width),d.width=e}}return d}var l={capture:!0,passive:!1},c=0,w=class e extends n.PureComponent{static xOrds=["e","w"];static yOrds=["n","s"];static xyOrds=["nw","ne","se","sw"];static nudgeStep=1;static nudgeStepMedium=10;static nudgeStepLarge=100;static defaultProps={ariaLabels:{cropArea:"Use the arrow keys to move the crop selection area",nwDragHandle:"Use the arrow keys to move the north west drag handle to change the crop selection area",nDragHandle:"Use the up and down arrow keys to move the north drag handle to change the crop selection area",neDragHandle:"Use the arrow keys to move the north east drag handle to change the crop selection area",eDragHandle:"Use the up and down arrow keys to move the east drag handle to change the crop selection area",seDragHandle:"Use the arrow keys to move the south east drag handle to change the crop selection area",sDragHandle:"Use the up and down arrow keys to move the south drag handle to change the crop selection area",swDragHandle:"Use the arrow keys to move the south west drag handle to change the crop selection area",wDragHandle:"Use the up and down arrow keys to move the west drag handle to change the crop selection area"}};get document(){return document}docMoveBound=!1;mouseDownOnCrop=!1;dragStarted=!1;evData={startClientX:0,startClientY:0,startCropX:0,startCropY:0,clientX:0,clientY:0,isResize:!0};componentRef=(0,n.createRef)();mediaRef=(0,n.createRef)();resizeObserver;initChangeCalled=!1;instanceId="rc-"+c++;state={cropIsActive:!1,newCropIsBeingDrawn:!1};getBox(){let e=this.mediaRef.current;if(!e)return{x:0,y:0,width:0,height:0};let{x:t,y:i,width:n,height:r}=e.getBoundingClientRect();return{x:t,y:i,width:n,height:r}}componentDidUpdate(e){let{crop:t,onComplete:i}=this.props;if(i&&!e.crop&&t){let{width:e,height:n}=this.getBox();e&&n&&i(s(t,e,n),h(t,e,n))}}componentWillUnmount(){this.resizeObserver&&this.resizeObserver.disconnect(),this.unbindDocMove()}bindDocMove(){this.docMoveBound||=(this.document.addEventListener("pointermove",this.onDocPointerMove,l),this.document.addEventListener("pointerup",this.onDocPointerDone,l),this.document.addEventListener("pointercancel",this.onDocPointerDone,l),!0)}unbindDocMove(){this.docMoveBound&&=(this.document.removeEventListener("pointermove",this.onDocPointerMove,l),this.document.removeEventListener("pointerup",this.onDocPointerDone,l),this.document.removeEventListener("pointercancel",this.onDocPointerDone,l),!1)}onCropPointerDown=e=>{let{crop:t,disabled:i}=this.props,n=this.getBox();if(!t)return;let r=s(t,n.width,n.height);if(i)return;e.cancelable&&e.preventDefault(),this.bindDocMove(),this.componentRef.current.focus({preventScroll:!0});let a=e.target.dataset.ord,o=!!a,h=e.clientX,d=e.clientY,l=r.x,c=r.y;if(a){let t=e.clientX-n.x,i=e.clientY-n.y,o=0,s=0;"ne"===a||"e"==a?(o=t-(r.x+r.width),s=i-r.y,l=r.x,c=r.y+r.height):"se"===a||"s"===a?(o=t-(r.x+r.width),s=i-(r.y+r.height),l=r.x,c=r.y):"sw"===a||"w"==a?(o=t-r.x,s=i-(r.y+r.height),l=r.x+r.width,c=r.y):("nw"===a||"n"==a)&&(o=t-r.x,s=i-r.y,l=r.x+r.width,c=r.y+r.height),h=l+n.x+o,d=c+n.y+s}this.evData={startClientX:h,startClientY:d,startCropX:l,startCropY:c,clientX:e.clientX,clientY:e.clientY,isResize:o,ord:a},this.mouseDownOnCrop=!0,this.setState({cropIsActive:!0})};onComponentPointerDown=e=>{let{crop:t,disabled:i,locked:n,keepSelection:r,onChange:a}=this.props,o=this.getBox();if(i||n||r&&t)return;e.cancelable&&e.preventDefault(),this.bindDocMove(),this.componentRef.current.focus({preventScroll:!0});let d=e.clientX-o.x,l=e.clientY-o.y,c={unit:"px",x:d,y:l,width:0,height:0};this.evData={startClientX:e.clientX,startClientY:e.clientY,startCropX:d,startCropY:l,clientX:e.clientX,clientY:e.clientY,isResize:!0},this.mouseDownOnCrop=!0,a(s(c,o.width,o.height),h(c,o.width,o.height)),this.setState({cropIsActive:!0,newCropIsBeingDrawn:!0})};onDocPointerMove=e=>{let{crop:t,disabled:i,onChange:n,onDragStart:r}=this.props,a=this.getBox();if(i||!t||!this.mouseDownOnCrop)return;e.cancelable&&e.preventDefault(),this.dragStarted||(this.dragStarted=!0,r&&r(e));let d,{evData:l}=this;l.clientX=e.clientX,l.clientY=e.clientY,d=l.isResize?this.resizeCrop():this.dragCrop(),o(t,d)||n(s(d,a.width,a.height),h(d,a.width,a.height))};onComponentKeyDown=t=>{let{crop:i,disabled:n,onChange:r,onComplete:o}=this.props;if(n)return;let d=t.key,l=!1;if(!i)return;let c=this.getBox(),w=this.makePixelCrop(c),p=(navigator.platform.match("Mac")?t.metaKey:t.ctrlKey)?e.nudgeStepLarge:t.shiftKey?e.nudgeStepMedium:e.nudgeStep;if("ArrowLeft"===d?(w.x-=p,l=!0):"ArrowRight"===d?(w.x+=p,l=!0):"ArrowUp"===d?(w.y-=p,l=!0):"ArrowDown"===d&&(w.y+=

1p,l=!0),l){t.cancelable&&t.preventDefault(),w.x=a(w.x,0,c.width-w.width),w.y=a(w.y,0,c.height-w.height);let e=s(w,c.width,c.height),i=h(w,c.width,c.height);r(e,i),o&&o(e,i)}};onHandlerKeyDown=(t,i)=>{let{aspect:n=0,crop:r,disabled:a,minWidth:l=0,minHeight:c=0,maxWidth:w,maxHeight:p,onChange:g,onComplete:u}=this.props,m=this.getBox();if(a||!r)return;if("ArrowUp"!==t.key&&"ArrowDown"!==t.key&&"ArrowLeft"!==t.key&&"ArrowRight"!==t.key)return;t.stopPropagation(),t.preventDefault();let y=(navigator.platform.match("Mac")?t.metaKey:t.ctrlKey)?e.nudgeStepLarge:t.shiftKey?e.nudgeStepMedium:e.nudgeStep,x=d(function(e,t,i,n){let r={...e};return"ArrowLeft"===t?"nw"===n?(r.x-=i,r.y-=i,r.width+=i,r.height+=i):"w"===n?(r.x-=i,r.width+=i):"sw"===n?(r.x-=i,r.width+=i,r.height+=i):"ne"===n?(r.y+=i,r.width-=i,r.height-=i):"e"===n?r.width-=i:"se"===n&&(r.width-=i,r.height-=i):"ArrowRight"===t&&("nw"===n?(r.x+=i,r.y+=i,r.width-=i,r.height-=i):"w"===n?(r.x+=i,r.width-=i):"sw"===n?(r.x+=i,r.width-=i,r.height-=i):"ne"===n?(r.y-=i,r.width+=i,r.height+=i):"e"===n?r.width+=i:"se"===n&&(r.width+=i,r.height+=i)),"ArrowUp"===t?"nw"===n?(r.x-=i,r.y-=i,r.width+=i,r.height+=i):"n"===n?(r.y-=i,r.height+=i):"ne"===n?(r.y-=i,r.width+=i,r.height+=i):"sw"===n?(r.x+=i,r.width-=i,r.height-=i):"s"===n?r.height-=i:"se"===n&&(r.width-=i,r.height-=i):"ArrowDown"===t&&("nw"===n?(r.x+=i,r.y+=i,r.width-=i,r.height-=i):"n"===n?(r.y+=i,r.height-=i):"ne"===n?(r.y+=i,r.width-=i,r.height-=i):"sw"===n?(r.x-=i,r.width+=i,r.height+=i):"s"===n?r.height+=i:"se"===n&&(r.width+=i,r.height+=i)),r}(s(r,m.width,m.height),t.key,y,i),n,i,m.width,m.height,l,c,w,p);if(!o(r,x)){let e=h(x,m.width,m.height);g(x,e),u&&u(x,e)}};onDocPointerDone=e=>{let{crop:t,disabled:i,onComplete:n,onDragEnd:r}=this.props,a=this.getBox();this.unbindDocMove(),!i&&t&&this.mouseDownOnCrop&&(this.mouseDownOnCrop=!1,this.dragStarted=!1,r&&r(e),n&&n(s(t,a.width,a.height),h(t,a.width,a.height)),this.setState({cropIsActive:!1,newCropIsBeingDrawn:!1}))};onDragFocus=()=>{this.componentRef.current?.scrollTo(0,0)};getCropStyle(){let{crop:e}=this.props;if(e)return{top:`${e.y}${e.unit}`,left:`${e.x}${e.unit}`,width:`${e.width}${e.unit}`,height:`${e.height}${e.unit}`}}dragCrop(){let{evData:e}=this,t=this.getBox(),i=this.makePixelCrop(t),n=e.clientX-e.startClientX,r=e.clientY-e.startClientY;return i.x=a(e.startCropX+n,0,t.width-i.width),i.y=a(e.startCropY+r,0,t.height-i.height),i}getPointRegion(e,t,i,n){let r,a,{evData:o}=this,h=o.clientX-e.x,s=o.clientY-e.y;return r=n&&t?"nw"===t||"n"===t||"ne"===t:s<o.startCropY,a=i&&t?"nw"===t||"w"===t||"sw"===t:h<o.startCropX,a?r?"nw":"sw":r?"ne":"se"}resolveMinDimensions(e,t,i=0,n=0){let r=Math.min(i,e.width),a=Math.min(n,e.height);return t&&(r||a)?t>1?r?[r,r/t]:[a*t,a]:a?[a*t,a]:[r,r/t]:[r,a]}resizeCrop(){let{evData:t}=this,{aspect:i=0,maxWidth:n,maxHeight:r}=this.props,o=this.getBox(),[h,s]=this.resolveMinDimensions(o,i,this.props.minWidth,this.props.minHeight),l=this.makePixelCrop(o),c=this.getPointRegion(o,t.ord,h,s),w=t.ord||c,p=t.clientX-t.startClientX,g=t.clientY-t.startClientY;(h&&"nw"===w||"w"===w||"sw"===w)&&(p=Math.min(p,-h)),(s&&"nw"===w||"n"===w||"ne"===w)&&(g=Math.min(g,-s));let u={unit:"px",x:0,y:0,width:0,height:0};"ne"===c?(u.x=t.startCropX,u.width=p,i?(u.height=u.width/i,u.y=t.startCropY-u.height):(u.height=Math.abs(g),u.y=t.startCropY-u.height)):"se"===c?(u.x=t.startCropX,u.y=t.startCropY,u.width=p,u.height=i?u.width/i:g):"sw"===c?(u.x=t.startCropX+p,u.y=t.startCropY,u.width=Math.abs(p),u.height=i?u.width/i:g):"nw"===c&&(u.x=t.startCropX+p,u.width=Math.abs(p),i?(u.height=u.width/i,u.y=t.startCropY-u.height):(u.height=Math.abs(g),u.y=t.startCropY+g));let m=d(u,i,c,o.width,o.height,h,s,n,r);return i||e.xyOrds.indexOf(w)>-1?l=m:e.xOrds.indexOf(w)>-1?(l.x=m.x,l.width=m.width):e.yOrds.indexOf(w)>-1&&(l.y=m.y,l.height=m.height),l.x=a(l.x,0,o.width-l.width),l.y=a(l.y,0,o.height-l.height),l}renderCropSelection(){let{ariaLabels:t=e.defaultProps.ariaLabels,disabled:i,locked:r,renderSelectionAddon:a,ruleOfThirds:o,crop:h}=this.props,s=this.getCropStyle();if(h)return n.createElement("div",{style:s,className:"ReactCrop__crop-selection",onPointerDown:this.onCropPointerDown,"aria-label":t.cropArea,tabIndex:0,onKeyDown:this.onComponentKeyDown,role:"group"},!i&&!r&&n.createElement("div",{className:"ReactCrop__drag-elements",onFocus:this.onDragFocus},n.createElement("div",{className:"ReactCrop__drag-bar ord-n","data-ord":"n"}),n.createElement("div",{className:"ReactCrop__drag-bar ord-e","data-ord":"e"}),n.createElement("div",{className:"ReactCrop__drag-bar ord-s","data-ord":"s"}),n.createElement("div",{className:"ReactCrop__drag-bar ord-w","data-ord":"w"}),n.createElement("div",{className:"ReactCrop__drag-handle ord-nw","data-ord":"nw",tabIndex:0,"aria-label":t.nwDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,"nw"),role:"button"}),n.createElement("div",{className:"ReactCrop__drag-handle ord-n","data-ord":"n",tabIndex:0,"aria-label":t.nDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,"n"),role:"button"}),n.createElement("div",{className:"ReactCrop__drag-handle ord-ne","data-ord":"ne",tabIndex:0,"aria-label":t.neDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,"ne"),role:"button"}),n.createElement("div",{className:"ReactCrop__drag-handle ord-e","data-ord":"e",tabIndex:0,"aria-label":t.eDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,"e"),role:"button"}),n.createElement("div",{className:"ReactCrop__drag-handle ord-se","data-ord":"se",tabIndex:0,"aria-label":t.seDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,"se"),role:"button"}),n.createElement("div",{className:"ReactCrop__drag-handle ord-s","data-ord":"s",tabIndex:0,"aria-label":t.sDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,"s"),role:"button"}),n.createElement("div",{className:"ReactCrop__drag-handle ord-sw","data-ord":"sw",tabIndex:0,"aria-label":t.swDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,"sw"),role:"button"}),n.createElement("div",{className:"ReactCrop__drag-handle ord-w","data-ord":"w",tabIndex:0,"aria-label":t.wDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,"w"),role:"button"})),a&&n.createElement("div",{className:"ReactCrop__selection-addon",onPointerDown:e=>e.stopPropagation()},a(this.state)),o&&n.createElement(n.Fragment,null,n.createElement("div",{className:"ReactCrop__rule-of-thirds-hz"}),n.createElement("div",{className:"ReactCrop__rule-of-thirds-vt"})))}makePixelCrop(e){return s({...r,...this.props.crop||{}},e.width,e.height)}render(){let{aspect:e,children:t,circularCrop:i,className:r,crop:a,disabled:o,locked:h,style:s,ruleOfThirds:d}=this.props,{cropIsActive:l,newCropIsBeingDrawn:c}=this.state,w=a?this.renderCropSelection():null,p=((...e)=>e.filter(e=>e&&"string"==typeof e).join(" "))("ReactCrop",r,l&&"ReactCrop--active",o&&"ReactCrop--disabled",h&&"ReactCrop--locked",c&&"ReactCrop--new-crop",a&&e&&"ReactCrop--fixed-aspect",a&&i&&"ReactCrop--circular-crop",a&&d&&"ReactCrop--rule-of-thirds",!this.dragStarted&&a&&!a.width&&!a.height&&"ReactCrop--invisible-crop",i&&"ReactCrop--no-animate");return n.createElement("div",{ref:this.componentRef,className:p,style:s},n.createElement("div",{ref:this.mediaRef,className:"ReactCrop__child-wrapper",onPointerDown:this.onComponentPointerDown},t),a?n.createElement("svg",{className:"ReactCrop__crop-mask",width:"100%",height:"100%"},n.createElement("defs",null,n.createElement("mask",{id:`hole-${this.instanceId}`},n.createElement("rect",{width:"100%",height:"100%",fill:"white"}),i?n.createElement("ellipse",{cx:`${a.x+a.width/2}${a.unit}`,cy:`${a.y+a.height/2}${a.unit}`,rx:`${a.width/2}${a.unit}`,ry:`${a.height/2}${a.unit}`,fill:"black"}):n.createElement("rect",{x:`${a.x}${a.unit}`,y:`${a.y}${a.unit}`,width:`${a.width}${a.unit}`,height:`${a.height}${a.unit}`,fill:"black"}))),n.createElement("rect",{fill:"black",fillOpacity:.5,width:"100%",height:"100%",mask:`url(#hole-${this.instanceId})`})):void 0,w)}};Math.PI}}]);