You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2 lines
18 KiB
2 lines
18 KiB
import{j as v}from"./markdown-vendor-DnN-_XEd.js";import{r as f,a as w,u as A}from"./data-vendor-DOiUz3Tw.js";import{bL as K}from"./index-BF-Ici5R.js";import{M as k}from"./arco-vendor-Cm-ntj-q.js";var B=Object.defineProperty,L=(s,e,t)=>e in s?B(s,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):s[e]=t,u=(s,e,t)=>L(s,typeof e!="symbol"?e+"":e,t);const Y={x:0,y:0,width:0,height:0,unit:"px"},N=(s,e,t)=>Math.min(Math.max(s,e),t),j=(...s)=>s.filter(e=>e&&typeof e=="string").join(" "),X=(s,e)=>s===e||s.width===e.width&&s.height===e.height&&s.x===e.x&&s.y===e.y&&s.unit===e.unit;function U(s,e,t,o){const r=b(s,t,o);return s.width&&(r.height=r.width/e),s.height&&(r.width=r.height*e),r.y+r.height>o&&(r.height=o-r.y,r.width=r.height*e),r.x+r.width>t&&(r.width=t-r.x,r.height=r.width/e),s.unit==="%"?_(r,t,o):r}function F(s,e,t){const o=b(s,e,t);return o.x=(e-o.width)/2,o.y=(t-o.height)/2,s.unit==="%"?_(o,e,t):o}function _(s,e,t){return s.unit==="%"?{...Y,...s,unit:"%"}:{unit:"%",x:s.x?s.x/e*100:0,y:s.y?s.y/t*100:0,width:s.width?s.width/e*100:0,height:s.height?s.height/t*100:0}}function b(s,e,t){return s.unit?s.unit==="px"?{...Y,...s,unit:"px"}:{unit:"px",x:s.x?s.x*e/100:0,y:s.y?s.y*t/100:0,width:s.width?s.width*e/100:0,height:s.height?s.height*t/100:0}:{...Y,...s,unit:"px"}}function $(s,e,t,o,r,i=0,h=0,l=o,n=r){const a={...s};let c=Math.min(i,o),p=Math.min(h,r),g=Math.min(l,o),d=Math.min(n,r);e&&(e>1?(c=h?h*e:c,p=c/e,g=l*e):(p=i?i/e:p,c=p*e,d=n/e)),a.y<0&&(a.height=Math.max(a.height+a.y,p),a.y=0),a.x<0&&(a.width=Math.max(a.width+a.x,c),a.x=0);const C=o-(a.x+a.width);C<0&&(a.x=Math.min(a.x,o-c),a.width+=C);const m=r-(a.y+a.height);if(m<0&&(a.y=Math.min(a.y,r-p),a.height+=m),a.width<c&&((t==="sw"||t=="nw")&&(a.x-=c-a.width),a.width=c),a.height<p&&((t==="nw"||t=="ne")&&(a.y-=p-a.height),a.height=p),a.width>g&&((t==="sw"||t=="nw")&&(a.x-=g-a.width),a.width=g),a.height>d&&((t==="nw"||t=="ne")&&(a.y-=d-a.height),a.height=d),e){const x=a.width/a.height;if(x<e){const y=Math.max(a.width/e,p);(t==="nw"||t=="ne")&&(a.y-=y-a.height),a.height=y}else if(x>e){const y=Math.max(a.height*e,c);(t==="sw"||t=="nw")&&(a.x-=y-a.width),a.width=y}}return a}function z(s,e,t,o){const r={...s};return e==="ArrowLeft"?o==="nw"?(r.x-=t,r.y-=t,r.width+=t,r.height+=t):o==="w"?(r.x-=t,r.width+=t):o==="sw"?(r.x-=t,r.width+=t,r.height+=t):o==="ne"?(r.y+=t,r.width-=t,r.height-=t):o==="e"?r.width-=t:o==="se"&&(r.width-=t,r.height-=t):e==="ArrowRight"&&(o==="nw"?(r.x+=t,r.y+=t,r.width-=t,r.height-=t):o==="w"?(r.x+=t,r.width-=t):o==="sw"?(r.x+=t,r.width-=t,r.height-=t):o==="ne"?(r.y-=t,r.width+=t,r.height+=t):o==="e"?r.width+=t:o==="se"&&(r.width+=t,r.height+=t)),e==="ArrowUp"?o==="nw"?(r.x-=t,r.y-=t,r.width+=t,r.height+=t):o==="n"?(r.y-=t,r.height+=t):o==="ne"?(r.y-=t,r.width+=t,r.height+=t):o==="sw"?(r.x+=t,r.width-=t,r.height-=t):o==="s"?r.height-=t:o==="se"&&(r.width-=t,r.height-=t):e==="ArrowDown"&&(o==="nw"?(r.x+=t,r.y+=t,r.width-=t,r.height-=t):o==="n"?(r.y+=t,r.height-=t):o==="ne"?(r.y+=t,r.width-=t,r.height-=t):o==="sw"?(r.x-=t,r.width+=t,r.height+=t):o==="s"?r.height+=t:o==="se"&&(r.width+=t,r.height+=t)),r}const S={capture:!0,passive:!1};let W=0;const R=class D extends f.PureComponent{constructor(){super(...arguments),u(this,"docMoveBound",!1),u(this,"mouseDownOnCrop",!1),u(this,"dragStarted",!1),u(this,"evData",{startClientX:0,startClientY:0,startCropX:0,startCropY:0,clientX:0,clientY:0,isResize:!0}),u(this,"componentRef",f.createRef()),u(this,"mediaRef",f.createRef()),u(this,"resizeObserver"),u(this,"initChangeCalled",!1),u(this,"instanceId",`rc-${W++}`),u(this,"state",{cropIsActive:!1,newCropIsBeingDrawn:!1}),u(this,"onCropPointerDown",e=>{const{crop:t,disabled:o}=this.props,r=this.getBox();if(!t)return;const i=b(t,r.width,r.height);if(o)return;e.cancelable&&e.preventDefault(),this.bindDocMove(),this.componentRef.current.focus({preventScroll:!0});const h=e.target.dataset.ord,l=!!h;let n=e.clientX,a=e.clientY,c=i.x,p=i.y;if(h){const g=e.clientX-r.x,d=e.clientY-r.y;let C=0,m=0;h==="ne"||h=="e"?(C=g-(i.x+i.width),m=d-i.y,c=i.x,p=i.y+i.height):h==="se"||h==="s"?(C=g-(i.x+i.width),m=d-(i.y+i.height),c=i.x,p=i.y):h==="sw"||h=="w"?(C=g-i.x,m=d-(i.y+i.height),c=i.x+i.width,p=i.y):(h==="nw"||h=="n")&&(C=g-i.x,m=d-i.y,c=i.x+i.width,p=i.y+i.height),n=c+r.x+C,a=p+r.y+m}this.evData={startClientX:n,startClientY:a,startCropX:c,startCropY:p,clientX:e.clientX,clientY:e.clientY,isResize:l,ord:h},this.mouseDownOnCrop=!0,this.setState({cropIsActive:!0})}),u(this,"onComponentPointerDown",e=>{const{crop:t,disabled:o,locked:r,keepSelection:i,onChange:h}=this.props,l=this.getBox();if(o||r||i&&t)return;e.cancelable&&e.preventDefault(),this.bindDocMove(),this.componentRef.current.focus({preventScroll:!0});const n=e.clientX-l.x,a=e.clientY-l.y,c={unit:"px",x:n,y:a,width:0,height:0};this.evData={startClientX:e.clientX,startClientY:e.clientY,startCropX:n,startCropY:a,clientX:e.clientX,clientY:e.clientY,isResize:!0},this.mouseDownOnCrop=!0,h(b(c,l.width,l.height),_(c,l.width,l.height)),this.setState({cropIsActive:!0,newCropIsBeingDrawn:!0})}),u(this,"onDocPointerMove",e=>{const{crop:t,disabled:o,onChange:r,onDragStart:i}=this.props,h=this.getBox();if(o||!t||!this.mouseDownOnCrop)return;e.cancelable&&e.preventDefault(),this.dragStarted||(this.dragStarted=!0,i&&i(e));const{evData:l}=this;l.clientX=e.clientX,l.clientY=e.clientY;let n;l.isResize?n=this.resizeCrop():n=this.dragCrop(),X(t,n)||r(b(n,h.width,h.height),_(n,h.width,h.height))}),u(this,"onComponentKeyDown",e=>{const{crop:t,disabled:o,onChange:r,onComplete:i}=this.props;if(o)return;const h=e.key;let l=!1;if(!t)return;const n=this.getBox(),a=this.makePixelCrop(n),c=(navigator.platform.match("Mac")?e.metaKey:e.ctrlKey)?D.nudgeStepLarge:e.shiftKey?D.nudgeStepMedium:D.nudgeStep;if(h==="ArrowLeft"?(a.x-=c,l=!0):h==="ArrowRight"?(a.x+=c,l=!0):h==="ArrowUp"?(a.y-=c,l=!0):h==="ArrowDown"&&(a.y+=c,l=!0),l){e.cancelable&&e.preventDefault(),a.x=N(a.x,0,n.width-a.width),a.y=N(a.y,0,n.height-a.height);const p=b(a,n.width,n.height),g=_(a,n.width,n.height);r(p,g),i&&i(p,g)}}),u(this,"onHandlerKeyDown",(e,t)=>{const{aspect:o=0,crop:r,disabled:i,minWidth:h=0,minHeight:l=0,maxWidth:n,maxHeight:a,onChange:c,onComplete:p}=this.props,g=this.getBox();if(i||!r)return;if(e.key==="ArrowUp"||e.key==="ArrowDown"||e.key==="ArrowLeft"||e.key==="ArrowRight")e.stopPropagation(),e.preventDefault();else return;const d=(navigator.platform.match("Mac")?e.metaKey:e.ctrlKey)?D.nudgeStepLarge:e.shiftKey?D.nudgeStepMedium:D.nudgeStep,C=b(r,g.width,g.height),m=z(C,e.key,d,t),x=$(m,o,t,g.width,g.height,h,l,n,a);if(!X(r,x)){const y=_(x,g.width,g.height);c(x,y),p&&p(x,y)}}),u(this,"onDocPointerDone",e=>{const{crop:t,disabled:o,onComplete:r,onDragEnd:i}=this.props,h=this.getBox();this.unbindDocMove(),!(o||!t)&&this.mouseDownOnCrop&&(this.mouseDownOnCrop=!1,this.dragStarted=!1,i&&i(e),r&&r(b(t,h.width,h.height),_(t,h.width,h.height)),this.setState({cropIsActive:!1,newCropIsBeingDrawn:!1}))}),u(this,"onDragFocus",()=>{var e;(e=this.componentRef.current)==null||e.scrollTo(0,0)})}get document(){return document}getBox(){const e=this.mediaRef.current;if(!e)return{x:0,y:0,width:0,height:0};const{x:t,y:o,width:r,height:i}=e.getBoundingClientRect();return{x:t,y:o,width:r,height:i}}componentDidUpdate(e){const{crop:t,onComplete:o}=this.props;if(o&&!e.crop&&t){const{width:r,height:i}=this.getBox();r&&i&&o(b(t,r,i),_(t,r,i))}}componentWillUnmount(){this.resizeObserver&&this.resizeObserver.disconnect(),this.unbindDocMove()}bindDocMove(){this.docMoveBound||(this.document.addEventListener("pointermove",this.onDocPointerMove,S),this.document.addEventListener("pointerup",this.onDocPointerDone,S),this.document.addEventListener("pointercancel",this.onDocPointerDone,S),this.docMoveBound=!0)}unbindDocMove(){this.docMoveBound&&(this.document.removeEventListener("pointermove",this.onDocPointerMove,S),this.document.removeEventListener("pointerup",this.onDocPointerDone,S),this.document.removeEventListener("pointercancel",this.onDocPointerDone,S),this.docMoveBound=!1)}getCropStyle(){const{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(){const{evData:e}=this,t=this.getBox(),o=this.makePixelCrop(t),r=e.clientX-e.startClientX,i=e.clientY-e.startClientY;return o.x=N(e.startCropX+r,0,t.width-o.width),o.y=N(e.startCropY+i,0,t.height-o.height),o}getPointRegion(e,t,o,r){const{evData:i}=this,h=i.clientX-e.x,l=i.clientY-e.y;let n;r&&t?n=t==="nw"||t==="n"||t==="ne":n=l<i.startCropY;let a;return o&&t?a=t==="nw"||t==="w"||t==="sw":a=h<i.startCropX,a?n?"nw":"sw":n?"ne":"se"}resolveMinDimensions(e,t,o=0,r=0){const i=Math.min(o,e.width),h=Math.min(r,e.height);return!t||!i&&!h?[i,h]:t>1?i?[i,i/t]:[h*t,h]:h?[h*t,h]:[i,i/t]}resizeCrop(){const{evData:e}=this,{aspect:t=0,maxWidth:o,maxHeight:r}=this.props,i=this.getBox(),[h,l]=this.resolveMinDimensions(i,t,this.props.minWidth,this.props.minHeight);let n=this.makePixelCrop(i);const a=this.getPointRegion(i,e.ord,h,l),c=e.ord||a;let p=e.clientX-e.startClientX,g=e.clientY-e.startClientY;(h&&c==="nw"||c==="w"||c==="sw")&&(p=Math.min(p,-h)),(l&&c==="nw"||c==="n"||c==="ne")&&(g=Math.min(g,-l));const d={unit:"px",x:0,y:0,width:0,height:0};a==="ne"?(d.x=e.startCropX,d.width=p,t?(d.height=d.width/t,d.y=e.startCropY-d.height):(d.height=Math.abs(g),d.y=e.startCropY-d.height)):a==="se"?(d.x=e.startCropX,d.y=e.startCropY,d.width=p,t?d.height=d.width/t:d.height=g):a==="sw"?(d.x=e.startCropX+p,d.y=e.startCropY,d.width=Math.abs(p),t?d.height=d.width/t:d.height=g):a==="nw"&&(d.x=e.startCropX+p,d.width=Math.abs(p),t?(d.height=d.width/t,d.y=e.startCropY-d.height):(d.height=Math.abs(g),d.y=e.startCropY+g));const C=$(d,t,a,i.width,i.height,h,l,o,r);return t||D.xyOrds.indexOf(c)>-1?n=C:D.xOrds.indexOf(c)>-1?(n.x=C.x,n.width=C.width):D.yOrds.indexOf(c)>-1&&(n.y=C.y,n.height=C.height),n.x=N(n.x,0,i.width-n.width),n.y=N(n.y,0,i.height-n.height),n}renderCropSelection(){const{ariaLabels:e=D.defaultProps.ariaLabels,disabled:t,locked:o,renderSelectionAddon:r,ruleOfThirds:i,crop:h}=this.props,l=this.getCropStyle();if(h)return w.createElement("div",{style:l,className:"ReactCrop__crop-selection",onPointerDown:this.onCropPointerDown,"aria-label":e.cropArea,tabIndex:0,onKeyDown:this.onComponentKeyDown,role:"group"},!t&&!o&&w.createElement("div",{className:"ReactCrop__drag-elements",onFocus:this.onDragFocus},w.createElement("div",{className:"ReactCrop__drag-bar ord-n","data-ord":"n"}),w.createElement("div",{className:"ReactCrop__drag-bar ord-e","data-ord":"e"}),w.createElement("div",{className:"ReactCrop__drag-bar ord-s","data-ord":"s"}),w.createElement("div",{className:"ReactCrop__drag-bar ord-w","data-ord":"w"}),w.createElement("div",{className:"ReactCrop__drag-handle ord-nw","data-ord":"nw",tabIndex:0,"aria-label":e.nwDragHandle,onKeyDown:n=>this.onHandlerKeyDown(n,"nw"),role:"button"}),w.createElement("div",{className:"ReactCrop__drag-handle ord-n","data-ord":"n",tabIndex:0,"aria-label":e.nDragHandle,onKeyDown:n=>this.onHandlerKeyDown(n,"n"),role:"button"}),w.createElement("div",{className:"ReactCrop__drag-handle ord-ne","data-ord":"ne",tabIndex:0,"aria-label":e.neDragHandle,onKeyDown:n=>this.onHandlerKeyDown(n,"ne"),role:"button"}),w.createElement("div",{className:"ReactCrop__drag-handle ord-e","data-ord":"e",tabIndex:0,"aria-label":e.eDragHandle,onKeyDown:n=>this.onHandlerKeyDown(n,"e"),role:"button"}),w.createElement("div",{className:"ReactCrop__drag-handle ord-se","data-ord":"se",tabIndex:0,"aria-label":e.seDragHandle,onKeyDown:n=>this.onHandlerKeyDown(n,"se"),role:"button"}),w.createElement("div",{className:"ReactCrop__drag-handle ord-s","data-ord":"s",tabIndex:0,"aria-label":e.sDragHandle,onKeyDown:n=>this.onHandlerKeyDown(n,"s"),role:"button"}),w.createElement("div",{className:"ReactCrop__drag-handle ord-sw","data-ord":"sw",tabIndex:0,"aria-label":e.swDragHandle,onKeyDown:n=>this.onHandlerKeyDown(n,"sw"),role:"button"}),w.createElement("div",{className:"ReactCrop__drag-handle ord-w","data-ord":"w",tabIndex:0,"aria-label":e.wDragHandle,onKeyDown:n=>this.onHandlerKeyDown(n,"w"),role:"button"})),r&&w.createElement("div",{className:"ReactCrop__selection-addon",onPointerDown:n=>n.stopPropagation()},r(this.state)),i&&w.createElement(w.Fragment,null,w.createElement("div",{className:"ReactCrop__rule-of-thirds-hz"}),w.createElement("div",{className:"ReactCrop__rule-of-thirds-vt"})))}makePixelCrop(e){const t={...Y,...this.props.crop||{}};return b(t,e.width,e.height)}render(){const{aspect:e,children:t,circularCrop:o,className:r,crop:i,disabled:h,locked:l,style:n,ruleOfThirds:a}=this.props,{cropIsActive:c,newCropIsBeingDrawn:p}=this.state,g=i?this.renderCropSelection():null,d=j("ReactCrop",r,c&&"ReactCrop--active",h&&"ReactCrop--disabled",l&&"ReactCrop--locked",p&&"ReactCrop--new-crop",i&&e&&"ReactCrop--fixed-aspect",i&&o&&"ReactCrop--circular-crop",i&&a&&"ReactCrop--rule-of-thirds",!this.dragStarted&&i&&!i.width&&!i.height&&"ReactCrop--invisible-crop",o&&"ReactCrop--no-animate");return w.createElement("div",{ref:this.componentRef,className:d,style:n},w.createElement("div",{ref:this.mediaRef,className:"ReactCrop__child-wrapper",onPointerDown:this.onComponentPointerDown},t),i?w.createElement("svg",{className:"ReactCrop__crop-mask",width:"100%",height:"100%"},w.createElement("defs",null,w.createElement("mask",{id:`hole-${this.instanceId}`},w.createElement("rect",{width:"100%",height:"100%",fill:"white"}),o?w.createElement("ellipse",{cx:`${i.x+i.width/2}${i.unit}`,cy:`${i.y+i.height/2}${i.unit}`,rx:`${i.width/2}${i.unit}`,ry:`${i.height/2}${i.unit}`,fill:"black"}):w.createElement("rect",{x:`${i.x}${i.unit}`,y:`${i.y}${i.unit}`,width:`${i.width}${i.unit}`,height:`${i.height}${i.unit}`,fill:"black"}))),w.createElement("rect",{fill:"black",fillOpacity:.5,width:"100%",height:"100%",mask:`url(#hole-${this.instanceId})`})):void 0,g)}};u(R,"xOrds",["e","w"]),u(R,"yOrds",["n","s"]),u(R,"xyOrds",["nw","ne","se","sw"]),u(R,"nudgeStep",1),u(R,"nudgeStepMedium",10),u(R,"nudgeStepLarge",100),u(R,"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"}});let T=R;const G=new URL("/assets/ic_arrow_right_gray-DM6GPP4g.png",import.meta.url).href,V=new URL("/assets/ic_close-C0Ltcj9g.png",import.meta.url).href;function tt({image:s,onUploaded:e}){const{t}=A(),[o,r]=f.useState(!1),[i,h]=f.useState(),[l,n]=f.useState(null),[a,c]=f.useState(!1),p=f.useRef(null);f.useEffect(()=>{s&&(r(!0),h(void 0),n(null))},[s]);const g=f.useCallback(()=>{a||r(!1)},[a]),d=f.useCallback(m=>{const x=m.currentTarget;p.current=x;const y=x.naturalWidth||x.width,M=x.naturalHeight||x.height,H=F(U({unit:"%",width:80},1,y,M),y,M);h(H)},[]),C=f.useCallback(async()=>{const m=p.current;if(!m||!l?.width||!l?.height){k.warning(t("avatarCrop.selectAreaFirst"));return}const x=m.naturalWidth/m.width,y=m.naturalHeight/m.height,M=document.createElement("canvas");M.width=Math.max(1,Math.floor(l.width*x)),M.height=Math.max(1,Math.floor(l.height*y));const H=M.getContext("2d");if(!H){k.error(t("avatarCrop.cropFailed"));return}H.drawImage(m,l.x*x,l.y*y,l.width*x,l.height*y,0,0,M.width,M.height);let O=null;try{O=await new Promise(E=>{M.toBlob(P=>E(P),"image/png",.95)})}catch(E){if(E instanceof DOMException&&E.name==="SecurityError"){k.error(t("avatarCrop.crossOriginNotSupported"));return}k.error(t("avatarCrop.cropFailed"));return}if(!O){k.error(t("avatarCrop.cropFailed"));return}const I=new File([O],`role-avatar-${Date.now()}.png`,{type:"image/png"});c(!0);try{const E=await K(I,"avatar"),P=String(E?.url??E?.data?.url??"");if(!P)throw new Error("upload url missing");e(P),r(!1),k.success(t("avatarCrop.avatarUpdated"))}catch{k.error(t("avatarCrop.uploadFailed"))}finally{c(!1)}},[l,e,t]);return!o||!s?null:v.jsx("div",{className:"avatarCropModal",children:v.jsxs("div",{className:"avatarCropModal__container",role:"dialog","aria-modal":"true","aria-label":t("avatarCrop.dialogAria"),children:[v.jsxs("div",{className:"avatarCropModal__header",children:[v.jsxs("button",{type:"button",className:"avatarCropModal__backBtn",onClick:g,disabled:a,children:[v.jsx("span",{className:"avatarCropModal__backText",children:t("avatarCrop.back")}),v.jsx("img",{alt:"",className:"avatarCropModal__backIcon",src:G})]}),v.jsx("h3",{className:"avatarCropModal__title",children:t("avatarCrop.title")}),v.jsx("button",{type:"button",className:"avatarCropModal__closeBtn",onClick:g,disabled:a,"aria-label":t("avatarCrop.closeAria"),children:v.jsx("img",{alt:"",src:V})})]}),v.jsx("div",{className:"avatarCropModal__body",children:v.jsx("div",{className:"avatarCropModal__canvas",children:v.jsx(T,{crop:i,onChange:m=>h(m),onComplete:m=>n(m),aspect:1,minWidth:40,minHeight:40,children:v.jsx("img",{alt:"",src:s,crossOrigin:"anonymous",referrerPolicy:"no-referrer",onLoad:d})})})}),v.jsx("div",{className:"avatarCropModal__footer",children:v.jsx("button",{type:"button",className:"avatarCropModal__uploadBtn",onClick:()=>void C(),disabled:a,children:t(a?"avatarCrop.uploading":"avatarCrop.uploadAvatar")})})]})})}export{tt as A};
|
|
//# sourceMappingURL=index-DHTJ1olG.js.map
|
|
|