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