amotify
Version:
UI Component for React,NextJS,esbuild
2 lines (1 loc) • 16.1 kB
JavaScript
import{b as K,c as ne,e as V}from"../chunk-C5N2D3ZX.js";import{Fragment as Ce,jsx as o,jsxs as p}from"react/jsx-runtime";import v,{Filer as he,UUID as me,useStore as q}from"jmini";import{$$fromRoot as le}from"../@utils";import{useState as X,useEffect as ee}from"react";import{Box as A,FAI as z,Column as J,FlexMargin as pe}from"../atoms";import{Row as M,Literal as w}from"../mols";import{Button as W}from"./Button";import N from"./Sheet";import te from"./Loader";import ae from"./Input";import{faPalette as ue}from"@fortawesome/free-solid-svg-icons/faPalette";import{faBarsStaggered as ge}from"@fortawesome/free-solid-svg-icons/faBarsStaggered";import{faRotateLeft as fe}from"@fortawesome/free-solid-svg-icons/faRotateLeft";import{faRotateRight as de}from"@fortawesome/free-solid-svg-icons/faRotateRight";import{CropperClasses as O}from"../@styles/componentClasses";import j from"./Tooltips";class ve{constructor(e){this.set_scale=e.set_scale,this.val_file=e.val_file,this.develops=e.develops;{let[h,l]=v.isArray(e.use)&&e.use||e.use.split(":").map(r=>Number(r)),m=h/l;this.usage={w:h,h:l,aspect:m}}this.componentId=e.componentId;let c=e.canvas,t=e.picture.image;this.Canvas={elm:c,ctx:c.getContext("2d")};let{width:a,height:i}=t,n=a/i;this.Picture={elm:t,originDataUrl:t.src,aspect:n,revisedAspect:1,rotate:e.picture.rotate,grayScale:e.picture.grayScale,tone:e.picture.tone},this.scale={current:e.scale.default,default:e.scale.default,min:e.scale.min,max:e.scale.max},this.usage.aspect<this.Picture.aspect?this.scale.min=100/n*this.usage.aspect:this.scale.min=100*n/this.usage.aspect,this.pst={frame:{x:0,y:0,w:0,h:0,aspect:1},outImage:{x:0,y:0,w:0,h:0},imageX:a/2,imageY:i/2,centerX:0,centerY:0},this.dragEffectInfo={origin:{x:0,y:0},frameExpandRate:{x:0,y:0}},this.pinchEffectInfo={origin:{x:0,y:0,scale:this.scale.current}},this.frameSizing(),this.modifyImage()}frameSizing(){let e=this.Canvas.elm,c=this.Picture.elm,t=0,a=0;{if(this.usage.aspect==1){let s=e.width*.6666666666666666,C=e.height*(2/3);a=t=Math.min(s,C)}else this.usage.aspect>1?(t=e.width*.9,a=t/this.usage.aspect):(a=e.height*.9,t=a*this.usage.aspect);let r=.85;a>e.height*r&&(a=e.height*r,t=a*this.usage.aspect),t>e.width*r&&(t=e.width*r,a=t/this.usage.aspect)}let{width:i,height:n}=c,h=(e.width-t)/2,l=(e.height-a)/2,m=t/a;this.pst={frame:{x:h,y:l,w:t,h:a,aspect:m},outImage:{x:0,y:0,w:0,h:0},imageX:i/2,imageY:n/2,centerX:e.width/2,centerY:e.height/2}}dragEffect(e){let{eventType:c,x:t,y:a}=e;if(c=="start"){let i=this.Canvas.elm.position();this.dragEffectInfo={origin:{x:t,y:a},frameExpandRate:{x:this.Canvas.elm.width/i.width,y:this.Canvas.elm.height/i.height}}}else{let{origin:i,frameExpandRate:n}=this.dragEffectInfo,h=i.x-t,l=i.y-a,m=this.scale.current*this.Picture.revisedAspect/100,r=h/m*n.x,s=l/m*n.y;c=="move"?this.drawImage(this.pst.imageX+r,this.pst.imageY+s):c=="end"&&this.drawImage(this.pst.imageX+=r,this.pst.imageY+=s)}}pinchEffect(e){let{eventType:c,event:t}=e,{x:a,y:i}=v.getCursor(t.touches[0]),{x:n,y:h}=v.getCursor(t.touches[1]),l=n-a,m=h-i;if(c=="start")this.pinchEffectInfo.origin={x:l,y:m,scale:this.scale.current};else if(c=="move"){let{origin:r}=this.pinchEffectInfo,s=Math.sqrt(Math.pow(r.x,2)+Math.pow(r.y,2)),x=Math.sqrt(Math.pow(l,2)+Math.pow(m,2))/s,f=Number(r.scale*x);this.set_scale(f)}}updateScale(e){let c=e;c=Math.max(c,this.scale.min),c=Math.min(c,this.scale.max),this.scale.current=c,this.drawImage()}updateFilter(e){this.Picture.grayScale=e.grayScale,this.Picture.tone=e.tone,this.Picture.rotate=e.rotate,this.modifyImage()}modifyImage(){return V(this,null,function*(){let{grayScale:e,tone:c,rotate:t}=this.Picture;const a=document.createElement("canvas");let i=a.getContext("2d"),n=yield v.ImageLoader(this.Picture.originDataUrl),h=n.width,l=n.height;(t==90||t==270)&&(h=n.height,l=n.width),a.width=h,a.height=l,e&&(i.filter="grayscale("+e+"%)"),t&&(i.translate(h/2,l/2),i.rotate(t*Math.PI/180),v.isOneOf(t,90,270)?i.translate(-l/2,-h/2):i.translate(-h/2,-l/2)),i.drawImage(n,0,0,n.width,n.height);let m=i.getImageData(0,0,a.width,a.height),r=m.data;{e/=100;let f=[[255,255,255],[255,200,100],[170,170,255],[240,200,145],[128,255,255],[255,128,255],[255,255,128],[128,158,169],[128,112,162],[50,192,87],[246,100,140]][c],y=f[0]/255,d=f[1]/255,_=f[2]/255;for(let S=0;S<l;S++)for(let b=0;b<h;b++){var s=(S*h+b)*4;if(e){let D=.3*r[s]+.59*r[s+1]+.11*r[s+2];for(var C=0;C<3;C++){let E=r[s+C];r[s+C]=E+(D-E)*e}}r[s]*=y,r[s+1]*=d,r[s+2]*=_}}i.putImageData(m,0,0);let x=a.toDataURL("image/jpeg");{let f=yield v.ImageLoader(x),{width:y,height:d}=f,_=y/d;this.Picture=ne(K({},this.Picture),{elm:f,aspect:_,revisedAspect:this.pst.frame.aspect>_?this.pst.frame.w/y:this.pst.frame.h/d})}this.drawImage()})}drawImage(e,c){let{Canvas:{ctx:t,elm:a},pst:{frame:i}}=this;t.clearRect(0,0,this.Canvas.elm.width,this.Canvas.elm.height);let n=e||this.pst.imageX,h=c||this.pst.imageY;{let l=this.scale.current/100,m=this.Picture.revisedAspect*l,r=this.pst.centerX-n*m,s=this.pst.centerY-h*m,C=this.Picture.elm.width*m,x=this.Picture.elm.height*m,f=0,y=0;this.usage.aspect<this.Picture.aspect?(f=C,y=f/this.usage.aspect):(y=x,f=y*this.usage.aspect);{let d=this.pst.frame.x-(C-f)/2,_=this.pst.frame.x+this.pst.frame.w-(C+f)/2,S=this.pst.frame.y-(x-y)/2,b=this.pst.frame.y+this.pst.frame.h-(x+y)/2,D=0;r<_&&(D=r-_),r>d&&(D=r-d);let E=0;s<b&&(E=s-b),s>S&&(E=s-S),this.dragEffectInfo.origin.x+=D/2/this.dragEffectInfo.frameExpandRate.x,this.dragEffectInfo.origin.y+=E/2/this.dragEffectInfo.frameExpandRate.y,r=Math.min(Math.max(r,_),d),s=Math.min(Math.max(s,b),S)}this.pst.outImage={x:r,y:s,w:C,h:x};{let d=1;t.lineWidth=d,t.strokeStyle="#ffffff66",t.strokeRect(r+(C-f)/2-d,s+(x-y)/2-d,f+d*2,y+d*2)}t.drawImage(this.Picture.elm,0,0,this.Picture.elm.width,this.Picture.elm.height,r,s,C,x)}{if(this.usage.aspect==1){t.fillStyle="rgba( 20,24,20,.5 )",t.beginPath();let l=a.width/3*2,m=a.height/3*2,r=Math.min(l,m),s=Math.max(l,m);t.arc(a.width/2,a.height/2,s*1.41,0,Math.PI*2,!0),t.arc(a.width/2,a.height/2,r/2,0,Math.PI*2,!1),t.closePath(),t.fill()}else t.fillStyle="rgba( 20,24,20,.5 )";{let m=v(document.body).getStyleProperty("--color-theme-hsl"),r=2;t.lineWidth=r,t.strokeStyle=`hsla( ${m},1 )`,t.strokeRect(i.x-r,i.y-r,i.w+r*2,i.h+r*2)}}}export(){return V(this,null,function*(){let{Canvas:e,develops:c,Picture:t,pst:{outImage:a,frame:i}}=this,n=a.w/t.elm.width,h=a.h/t.elm.height,l=(i.x-a.x)/n,m=i.w/n,r=(i.y-a.y)/h,s=i.h/h,C=Array.from({length:c.length}),x="image/jpeg";for(let f=0;f<c.length;f++){let{size:y,maxSize:d}=c[f];d=d||{S:1024*20,R:1024*100,L:1024*350}[y];let _={S:140,R:600,L:1200}[y],S=document.createElement("canvas");S.width=m,S.height=s;let b=document.createElement("canvas");b.width=_,b.height=_/this.usage.aspect;let D=S.getContext("2d");if(!D)return;let E=b.getContext("2d");if(!E)return;D.clearRect(0,0,S.width,S.height),D.drawImage(this.Picture.elm,l,r,m,s,0,0,m,s),E.fillStyle="black",E.drawImage(S,0,0,S.width,S.height,0,0,b.width,b.height);let Z=b.toDataURL(x),H=yield Z.toBlob(x);if(!H)return;if(H.size>=d){let ie=d/H.size;if(Z=b.toDataURL(x,ie*.92),H=yield Z.toBlob(x),!H)return}let re=new File([H],this.val_file.name,{type:x});C[f]=re}return C})}}const se={Core:u=>{let{val_file:e,options:c,finishedCallback:t,abortCallback:a}=u,{use:i,develops:n=[]}=c,[h]=X(me());const l={scale:{default:120,min:50,max:300},rotate:0,grayScale:0,tone:0};let m=2048*2048,r=1024,[s,C]=X("init"),[x,f]=X(""),[y,d]=X(l.scale.default),[_,S]=X(l.rotate),[b,D]=X(l.grayScale),[E,Z]=X(l.tone),[H,re]=X(-1),[ie,ce]=X(-1);return ee(()=>{let g="CropperResize";return v(window).onEvent("resize",()=>{v.interval.once(()=>{var $;let I=le("#Canvas-"+h)[0];if(!I)return;let B=($=q.get(h))==null?void 0:$.Instance;if(!B)return;let F=I.position(),U=F.width/F.height,Y=r,k=Y/U;if(Y*k>m){let G=Y*k/m;Y=Math.floor(Y/Math.sqrt(G)),k=Math.floor(k/Math.sqrt(G))}I.width=r,I.height=k;let{width:P,height:Q}=I;B.pst.centerX=P/2,B.pst.centerY=Q/2,B.frameSizing(),B.modifyImage()},250,"CropperResize")},{eventID:g}),()=>{v(window).removeEvent(g)}},[]),ee(()=>{q.set({[h]:{}}),V(void 0,null,function*(){try{let g=le("#Canvas-"+h)[0];if(!g)return;let I=g.position(),B=I.width/I.height,F=r,U=F/B;if(F*U>m){let R=F*U/m;F=Math.floor(F/Math.sqrt(R)),U=Math.floor(U/Math.sqrt(R))}g.width=F,g.height=U;let Y=he(e),k=yield v.ImageLoader(yield Y.toObjectURL());re(k.width),ce(k.height);let P=new ve({set_scale:d,val_file:e,develops:n,use:i,scale:l.scale,componentId:h,canvas:g,picture:{image:k,grayScale:l.grayScale,tone:l.tone,rotate:l.rotate}});q.set({[h]:{Instance:P}});const Q=function(R){if(R.preventDefault(),R.touches&&R.touches.length>1)P.pinchEffect({eventType:"start",event:R}),v(document).onEvent("touchmove",L=>{L.preventDefault(),P.pinchEffect({eventType:"move",event:L})},{eventID:"CropperEffectMove",passive:!1}).onEvent("touchend",G,{eventID:"CropperEffectEnd",passive:!1});else{P.dragEffect(K({eventType:"start"},v.getCursor(R)));let{type:L}=R;v(document).onEvent(L=="touchstart"?"touchmove":"mousemove",T=>{$("move",T)},{eventID:"CropperEffectMove",passive:!1}).onEvent(L=="touchstart"?"touchend":"mouseup",T=>{$("end",T),G(T)},{eventID:"CropperEffectEnd",passive:!1})}},$=function(R,L){L.preventDefault(),P.dragEffect(K({eventType:R},v.getCursor(L)))},G=function(R){R.preventDefault(),v(document).removeEvent(["CropperEffectMove","CropperEffectEnd"])};v(g).removeEvent(["CropperMouseWheel","CropperTouchStart","CropperMouseDown"]).onEvent("wheel",R=>{R.preventDefault();let L=Number(R.wheelDelta*.04),T=P.scale.current+L;T=Math.max(T,P.scale.min),T=Math.min(T,P.scale.max),d(T)},{eventID:"CropperMouseWheel",passive:!1}).onEvent("touchstart",Q,{eventID:"CropperTouchStart",passive:!1}).onEvent("mousedown",Q,{eventID:"CropperMouseDown",passive:!1}),yield v.pending(1e3),C("ok")}catch(g){C("error"),f((g==null?void 0:g.message)||v.Stringify(g)),console.error(g)}})},[e.id]),ee(()=>{var I;let g=(I=q.get(h))==null?void 0:I.Instance;g&&g.updateScale(y)},[y]),ee(()=>{var I;let g=(I=q.get(h))==null?void 0:I.Instance;g&&g.updateFilter({grayScale:b,tone:E,rotate:_})},[b,E,_]),o(N.Body,{borderRadius:0,height:"viewHeight",width:"viewWidth",children:p(J,{className:[O("Wrap"),O("Use_"+i)].join(" "),gap:0,height:1,position:"relative",overflow:"hidden",borderRadius:"inherit",children:[p(A,{position:"absolute",ssZIndex:2,top:"50%",left:"50%",flexCenter:!0,xcss:{transform:"translate( -50%,-50% )",pointerEvents:"none"},children:[s=="init"&&o(te.Theme.XL,{showInitial:!0}),s=="error"&&p(w.Mini,{fontColor:"nega",children:["\u753B\u50CF\u306E\u8AAD\u307F\u8FBC\u307F\u306B\u5931\u6557\u3057\u307E\u3057\u305F",o(w.Description,{children:x})]})]}),p(A,{flexSizing:0,overflow:"hidden",ssZIndex:1,flexCenter:!0,paddingBottom:6,xcss:{backgroundColor:"#000f0f"},children:[o("canvas",{style:{width:"100%",height:"100%"},width:r,height:r,className:O("Canvas"),id:"Canvas-"+h}),o(w.Mini,{position:"absolute",bottom:1,left:1,right:1,ssCardBox:"plain",boxShadow:"0.max",padding:1,backgroundColor:"layer.0.opa.few",xcss:{backdropFilter:"blur(6px)"},children:p(J,{gap:"1/2",children:[p(M.Left,{gap:"1/2",flexWrap:!0,fontColor:"white",fontSize:"0.xs",fontHeight:1.2,children:[p(w,{children:["[",e.type,"]"]}),o(w,{children:e.name}),p(w,{children:[H,"px x ",ie,"px"]}),p(w,{children:["[",e.size.rank(),"B]"]})]}),p(M.Left,{gap:"1/2",verticalAlign:"unset",flexWrap:!0,children:[o(se.SettingRegion,{DefaultOptions:l,val_scale:y,set_scale:d,val_tone:E,set_tone:Z,val_grayScale:b,set_grayScale:D,val_rotate:_,set_rotate:S}),o(pe,{}),o(W.Border.S,{onClick:()=>{a()},children:"\u9589\u3058\u308B"}),o(W.Prime.S,{boxShadow:"3.remark",onClick:()=>V(void 0,null,function*(){var B;let g=(B=q.get(h))==null?void 0:B.Instance;if(!g)return;te.fn.mini.active("CropperExportation");let I=yield g.export();setTimeout(()=>{te.fn.mini.stop("CropperExportation"),t(I)},1e3)}),children:p(M.Center,{gap:"1/2",children:[o(te.White.R,{loaderID:"CropperExportation"}),"\u6C7A\u5B9A"]})})]})]})})]})]})})},SettingRegion:u=>{let e=["","\u6696\u8272","\u5BD2\u8272","\u30BB\u30D4\u30A2","\u30B7\u30A2\u30F3","\u30DE\u30BC\u30F3\u30BF","\u30A4\u30A8\u30ED\u30FC","\u30AA\u30EA\u30B8\u30CA\u30EB1","\u30AA\u30EA\u30B8\u30CA\u30EB2","\u30AA\u30EA\u30B8\u30CA\u30EB3","\u30AA\u30EA\u30B8\u30CA\u30EB4"],c=t=>e[t]||"\u306A\u3057";return p(Ce,{children:[p(M.Center,{gap:"1/6",children:[p(W.Border.S,{flexCenter:!0,gap:"1/4",border:"unset",borderTopRightRadius:0,borderBottomRightRadius:0,onClick:()=>{let t=u.val_rotate-90;t<0&&(t+=360),u.set_rotate(t)},children:[o(w,{children:"90\xB0"}),o(z,{icon:fe,fontColor:"4.thin"})]}),p(W.Border.S,{flexCenter:!0,gap:"1/4",border:"unset",borderTopLeftRadius:0,borderBottomLeftRadius:0,onClick:()=>{u.set_rotate((u.val_rotate+90)%360)},children:[o(z,{icon:de,fontColor:"4.thin"}),o(w,{children:"90\xB0"})]})]}),p(W.Border.S,{flexCenter:!0,gap:"1/2",border:"unset",onClick:t=>{let a="CropperZoomEdit";j.open({tipsID:a,gravityPoint:3,event:t,closeAtParentBlur:!1,xcss:{minWidth:12*26},content:o(N.Body,{children:p(J,{padding:1.5,children:[p(M.Separate,{children:[o(w.Paragraph,{children:p(M.Center,{gap:"1/2",children:[o(z.Search,{fontColor:"5.translucent"}),"Zoom"]})}),o(W.Sub,{color:"cloud",ssSphere:2.5,onClick:()=>{j.close(a)},children:o(z.X,{})})]}),o(A,{borderBottom:!0,opacity:"low"}),o(ae.Slider,{override:"force",value:u.val_scale-u.DefaultOptions.scale.min,min:u.DefaultOptions.scale.min-100,max:u.DefaultOptions.scale.max-100,step:25,onUpdateValidValue:(i,n)=>{v.interval.once(()=>{u.set_scale(i+100)},250,"Cropper.UpdateScale")},onLegendRender:i=>"x"+Math.round(100+i)/100})]})})})},children:[o(w.Micro,{fontColor:"4.thin",children:"Zoom"}),p(w,{unitWidth:4,children:[u.val_scale.toRatio(1,0),"%"]})]}),p(W.Border.S,{flexCenter:!0,gap:"1/2",border:"unset",onClick:t=>{let a="CropperGrayScaleEdit";j.open({tipsID:a,gravityPoint:3,event:t,closeAtParentBlur:!1,xcss:{minWidth:12*26},content:o(N.Body,{children:p(J,{padding:1.5,children:[p(M.Separate,{children:[o(w.Paragraph,{children:p(M.Center,{gap:"1/2",children:[o(z,{icon:ue,fontColor:"5.translucent"}),"Gray Scale"]})}),o(W.Sub,{color:"cloud",ssSphere:2.5,onClick:()=>{j.close(a)},children:o(z.X,{})})]}),o(A,{borderBottom:!0,opacity:"low"}),o(ae.Slider,{value:u.val_grayScale,min:0,max:100,step:10,onUpdateValidValue:i=>{v.interval.once(()=>{u.set_grayScale(i)},250,"Cropper.GrayScale")},onLegendRender:i=>i+"%"})]})})})},children:[o(w.Micro,{fontColor:"4.thin",children:"GrayScale"}),p(w,{children:[u.val_grayScale.toRatio(1,0),"%"]})]}),p(W.Border.S,{flexCenter:!0,gap:"1/2",border:"unset",onClick:t=>{let a="CropperToneEdit";j.open({tipsID:a,gravityPoint:3,event:t,closeAtParentBlur:!1,xcss:{minWidth:12*26,maxWidth:12*24},content:()=>{let i=[];for(let n=1;n<=10;n++)i.push({value:n,label:p(M.Left,{gap:"1/3",children:[o(A,{ssSphere:1,className:[O("ToneBall"),O("ToneBall_"+n)].join(" ")}),o(A,{textAlign:"left",flexSizing:0,children:c(n)})]})});return o(N.Body,{children:p(J,{padding:1.5,children:[p(M.Separate,{children:[o(w.Paragraph,{children:p(M.Center,{gap:"1/2",children:[o(z,{icon:ge,fontColor:"5.translucent"}),"Tone"]})}),o(W.Sub,{color:"cloud",ssSphere:2.5,onClick:()=>{j.close(a)},children:o(z.X,{})})]}),o(A,{borderBottom:!0,opacity:"low"}),o(ae.Radio.Normal,{value:u.val_tone,gap:"1/2",cellStyles:{fontColor:"3.blur"},options:[{value:0,label:o(A,{flexSizing:0,textAlign:"center",children:"\u306A\u3057"})},...i],onUpdateValidValue:n=>{u.set_tone(n)}})]})})}})},children:[o(w.Micro,{fontColor:"4.thin",children:"Tone"}),o(A,{boxShadow:"2.remark",ssSphere:1,className:[O("ToneBall"),O("ToneBall_"+u.val_tone)].join(" ")}),c(u.val_tone)]})]})}},oe={openDialogNEdit:u=>{ae.Filer.fn.openDialog({accept:"image",multiple:!1,onChange:e=>{oe.openEditor(K({imageFile:e[0]},u))}})},openEditor:u=>V(void 0,null,function*(){let e="CropperImage";N.open("middleCenter",{sheetID:e,size:"MAX",padding:0,margin:0,xcss:{maxWidth:"100%"},content:o(se.Core,{val_file:u.imageFile,options:u,finishedCallback:c=>{N.close(e),u.onProcessFinished(c)},abortCallback:()=>{N.close(e)}}),closeAtEscapeKeyDown:!1})})};export{oe as Cropper,oe as default};