amotify 0.2.223 → 0.2.224

package/demo/next/src/app/(router)/page.tsx

@@ -133,11 +133,14 @@ let Page = () => {
               // use: '9:16',
               // use: '3:4',
               develops: [
-                { size: 'R',maxSize: 3 * 1024 * 1024 } // 3MB
+                // { size: 'R',maxSize: 3 * 1024 * 1024 }, // 3MB
+                { size: 'L',maxSize: 3 * 1024 * 1024 } // 3MB
               ],
               onProcessFinished: async ( files ) => {
                 if ( !files || !files[ 0 ] ) return
                 let filer = await Filer( files[ 0 ] )
+
+                console.log( filer )
                 let new_dataurl = await filer.toDataURL()
                 console.log(
                   '[new_dataurl]',new_dataurl
@@ -223,6 +226,7 @@ let Page = () => {
       </Button.Prime>
 
       { val_dataurl && <Img
+        showExpand
         src={ val_dataurl }
       /> }
     </Column>

package/dist/fn/Cropper.js

@@ -1 +1 @@
-import{b as K,c as ie,e as O}from"../chunk-C5N2D3ZX.js";import{jsx as o,jsxs as m}from"react/jsx-runtime";import b,{UUID as le,useStore as q}from"jmini";import{$$fromRoot as re}from"../@utils";import{useState as Y,useEffect as ee}from"react";import{Box as z,FAI as U,Column as H}from"../atoms";import{Row as R,Literal as D}from"../mols";import{Button as W}from"./Button";import N from"./Sheet";import Z from"./Loader";import te from"./Input";import{faPalette as ne}from"@fortawesome/free-solid-svg-icons/faPalette";import{faBarsStaggered as se}from"@fortawesome/free-solid-svg-icons/faBarsStaggered";import{faRotateLeft as ce}from"@fortawesome/free-solid-svg-icons/faRotateLeft";import{faRotateRight as pe}from"@fortawesome/free-solid-svg-icons/faRotateRight";import{CropperClasses as V}from"../@styles/componentClasses";import $ from"./Tooltips";class me{constructor(e){this.set_scale=e.set_scale,this.val_file=e.val_file,this.develops=e.develops;{let[p,n]=b.is.array(e.use)&&e.use||e.use.split(":").map(i=>Number(i)),h=p/n;this.usage={w:p,h:n,aspect:h}}this.componentId=e.componentId;let c=e.canvas,t=e.picture.image;this.Canvas={elm:c,ctx:c.getContext("2d")};let{width:a,height:r}=t,l=a/r;this.Picture={elm:t,originDataUrl:t.src,aspect:l,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/l*this.usage.aspect:this.scale.min=100*l/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:r/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,d=e.height*(2/3);a=t=Math.min(s,d)}else this.usage.aspect>1?(t=e.width*.9,a=t/this.usage.aspect):(a=e.height*.9,t=a*this.usage.aspect);let i=.85;a>e.height*i&&(a=e.height*i,t=a*this.usage.aspect),t>e.width*i&&(t=e.width*i,a=t/this.usage.aspect)}let{width:r,height:l}=c,p=(e.width-t)/2,n=(e.height-a)/2,h=t/a;this.pst={frame:{x:p,y:n,w:t,h:a,aspect:h},outImage:{x:0,y:0,w:0,h:0},imageX:r/2,imageY:l/2,centerX:e.width/2,centerY:e.height/2}}dragEffect(e){let{eventType:c,x:t,y:a}=e;if(c=="start"){let r=this.Canvas.elm.position();this.dragEffectInfo={origin:{x:t,y:a},frameExpandRate:{x:this.Canvas.elm.width/r.width,y:this.Canvas.elm.height/r.height}}}else{let{origin:r,frameExpandRate:l}=this.dragEffectInfo,p=r.x-t,n=r.y-a,h=this.scale.current*this.Picture.revisedAspect/100,i=p/h*l.x,s=n/h*l.y;c=="move"?this.drawImage(this.pst.imageX+i,this.pst.imageY+s):c=="end"&&this.drawImage(this.pst.imageX+=i,this.pst.imageY+=s)}}pinchEffect(e){let{eventType:c,event:t}=e,{x:a,y:r}=b.getCursor(t.touches[0]),{x:l,y:p}=b.getCursor(t.touches[1]),n=l-a,h=p-r;if(c=="start")this.pinchEffectInfo.origin={x:n,y:h,scale:this.scale.current};else if(c=="move"){let{origin:i}=this.pinchEffectInfo,s=Math.sqrt(Math.pow(i.x,2)+Math.pow(i.y,2)),v=Math.sqrt(Math.pow(n,2)+Math.pow(h,2))/s,f=Number(i.scale*v);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 O(this,null,function*(){let{grayScale:e,tone:c,rotate:t}=this.Picture;const a=document.createElement("canvas");let r=a.getContext("2d"),l=yield b.ImageLoader(this.Picture.originDataUrl),p=l.width,n=l.height;(t==90||t==270)&&(p=l.height,n=l.width),a.width=p,a.height=n,e&&(r.filter="grayscale("+e+"%)"),t&&(r.translate(p/2,n/2),r.rotate(t*Math.PI/180),[90,270].includes(t)?r.translate(-n/2,-p/2):r.translate(-p/2,-n/2)),r.drawImage(l,0,0,l.width,l.height);let h=r.getImageData(0,0,a.width,a.height),i=h.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],S=f[0]/255,C=f[1]/255,y=f[2]/255;for(let I=0;I<n;I++)for(let _=0;_<p;_++){var s=(I*p+_)*4;if(e){let P=.3*i[s]+.59*i[s+1]+.11*i[s+2];for(var d=0;d<3;d++){let E=i[s+d];i[s+d]=E+(P-E)*e}}i[s]*=S,i[s+1]*=C,i[s+2]*=y}}r.putImageData(h,0,0);let v=a.toDataURL("image/jpeg");{let f=yield b.ImageLoader(v),{width:S,height:C}=f,y=S/C;this.Picture=ie(K({},this.Picture),{elm:f,aspect:y,revisedAspect:this.pst.frame.aspect>y?this.pst.frame.w/S:this.pst.frame.h/C})}this.drawImage()})}drawImage(e,c){let{Canvas:{ctx:t,elm:a},pst:{frame:r}}=this;t.clearRect(0,0,this.Canvas.elm.width,this.Canvas.elm.height);let l=e||this.pst.imageX,p=c||this.pst.imageY;{let n=this.scale.current/100,h=this.Picture.revisedAspect*n,i=this.pst.centerX-l*h,s=this.pst.centerY-p*h,d=this.Picture.elm.width*h,v=this.Picture.elm.height*h,f=0,S=0;this.usage.aspect<this.Picture.aspect?(f=d,S=f/this.usage.aspect):(S=v,f=S*this.usage.aspect);{let C=this.pst.frame.x-(d-f)/2,y=this.pst.frame.x+this.pst.frame.w-(d+f)/2,I=this.pst.frame.y-(v-S)/2,_=this.pst.frame.y+this.pst.frame.h-(v+S)/2,P=0;i<y&&(P=i-y),i>C&&(P=i-C);let E=0;s<_&&(E=s-_),s>I&&(E=s-I),this.dragEffectInfo.origin.x+=P/2/this.dragEffectInfo.frameExpandRate.x,this.dragEffectInfo.origin.y+=E/2/this.dragEffectInfo.frameExpandRate.y,i=Math.min(Math.max(i,y),C),s=Math.min(Math.max(s,_),I)}this.pst.outImage={x:i,y:s,w:d,h:v};{let C=1;t.lineWidth=C,t.strokeStyle="#ffffff66",t.strokeRect(i+(d-f)/2-C,s+(v-S)/2-C,f+C*2,S+C*2)}t.drawImage(this.Picture.elm,0,0,this.Picture.elm.width,this.Picture.elm.height,i,s,d,v)}{if(this.usage.aspect==1){t.fillStyle="rgba( 20,24,20,.5 )",t.beginPath();let n=a.width/3*2,h=a.height/3*2,i=Math.min(n,h),s=Math.max(n,h);t.arc(a.width/2,a.height/2,s*1.41,0,Math.PI*2,!0),t.arc(a.width/2,a.height/2,i/2,0,Math.PI*2,!1),t.closePath(),t.fill()}else t.fillStyle="rgba( 20,24,20,.5 )";{let h=b(document.body).getStyleProperty("--color-theme-hsl"),i=2;t.lineWidth=i,t.strokeStyle=`hsla( ${h},1 )`,t.strokeRect(r.x-i,r.y-i,r.w+i*2,r.h+i*2)}}}export(){return O(this,null,function*(){let{Canvas:e,develops:c,Picture:t,pst:{outImage:a,frame:r}}=this,l=a.w/t.elm.width,p=a.h/t.elm.height,n=(r.x-a.x)/l,h=(r.x-a.x+r.w)/l,i=(r.y-a.y)/p,s=(r.y-a.y+r.h)/p,d=Array.from({length:c.length}),v="image/jpeg";for(let f=0;f<c.length;f++){let{size:S,maxSize:C}=c[f];C=C||{S:1024*20,R:1024*100,L:1024*350}[S];let y={S:140,R:600,L:1200}[S],I=y;this.usage.aspect>=1?I=y/this.usage.aspect:y=I*this.usage.aspect;let _=document.createElement("canvas");_.width=y,_.height=I;let P=_.getContext("2d");if(!P)return;P.clearRect(0,0,y,I),P.drawImage(this.Picture.elm,n,i,h-n,s-i,0,0,y,I);let E=_.toDataURL(v),A=yield E.toBlob(v);if(!A)return;if(A.size>=C){let g=C/A.size;if(E=_.toDataURL(v,g*.92),A=yield E.toBlob(v),!A)return}let w=new File([A],this.val_file.name,{type:v});d[f]=w}return d})}}const oe={Core:u=>{let{val_file:e,options:c,finishedCallback:t,abortCallback:a}=u,{use:r,develops:l=[]}=c,[p]=Y(le());const n={scale:{default:120,min:50,max:300},rotate:0,grayScale:0,tone:0};let h=2048*2048,i=1024,[s,d]=Y(n.scale.default),[v,f]=Y(n.rotate),[S,C]=Y(n.grayScale),[y,I]=Y(n.tone),[_,P]=Y(0),[E,A]=Y(0);return ee(()=>{let w="CropperResize";return b(window).addEvent({eventType:"resize",eventID:w,callback:()=>{b.interval.once(()=>{var j;let g=re("#Canvas-"+p)[0];if(!g)return;let B=(j=q.get(p))==null?void 0:j.Instance;if(!B)return;let J=g.position(),X=J.width/J.height,M=i,F=M/X;if(M*F>h){let G=M*F/h;M=Math.floor(M/Math.sqrt(G)),F=Math.floor(F/Math.sqrt(G))}g.width=i,g.height=F;let{width:L,height:Q}=g;B.pst.centerX=L/2,B.pst.centerY=Q/2,B.frameSizing(),B.modifyImage()},250,"CropperResize")}}),()=>{b(window).removeEvent(w)}},[]),ee(()=>{q.set({[p]:{}}),O(void 0,null,function*(){Z.fn.corner.active(),yield b.pending(()=>{},400);let w=yield e.convert();if(w=String(w),!w)return;let g=re("#Canvas-"+p)[0];if(!g)return;let B=g.position(),J=B.width/B.height,X=i,M=X/J;if(X*M>h){let x=X*M/h;X=Math.floor(X/Math.sqrt(x)),M=Math.floor(M/Math.sqrt(x))}g.width=X,g.height=M;let F=yield b.ImageLoader(w);P(F.width),A(F.height);let L=new me({set_scale:d,val_file:e,develops:l,use:r,scale:n.scale,componentId:p,canvas:g,picture:{image:F,grayScale:n.grayScale,tone:n.tone,rotate:n.rotate}});q.set({[p]:{Instance:L}});const Q=function(x){if(x.preventDefault(),x.touches&&x.touches.length>1)L.pinchEffect({eventType:"start",event:x}),b(document).addEvent({eventType:"touchmove",eventID:"CropperEffectMove",options:{passive:!1},callback:T=>{T.preventDefault(),L.pinchEffect({eventType:"move",event:T})}}).addEvent({eventType:"touchend",eventID:"CropperEffectEnd",options:{passive:!1},callback:G});else{L.dragEffect(K({eventType:"start"},b.getCursor(x)));let{type:T}=x;b(document).addEvent({eventType:T=="touchstart"?"touchmove":"mousemove",eventID:"CropperEffectMove",options:{passive:!1},callback:k=>{j("move",k)}}).addEvent({eventType:T=="touchstart"?"touchend":"mouseup",eventID:"CropperEffectEnd",options:{passive:!1},callback:k=>{j("end",k),G(k)}})}},j=function(x,T){T.preventDefault(),L.dragEffect(K({eventType:x},b.getCursor(T)))},G=function(x){x.preventDefault(),b(document).removeEvent(["CropperEffectMove","CropperEffectEnd"])};b(g).removeEvent(["CropperMouseWheel","CropperTouchStart","CropperMouseDown"]).addEvent({eventID:"CropperMouseWheel",eventType:"wheel",callback:x=>{x.preventDefault();let T=Number(x.wheelDelta*.04),k=L.scale.current+T;k=Math.max(k,L.scale.min),k=Math.min(k,L.scale.max),d(k)},options:{passive:!1}}).addEvent({eventType:"touchstart",eventID:"CropperTouchStart",callback:Q,options:{passive:!1}}).addEvent({eventType:"mousedown",eventID:"CropperMouseDown",callback:Q,options:{passive:!1}}),setTimeout(()=>{Z.fn.corner.stop()},1e3)})},[e.id]),ee(()=>{var g;let w=(g=q.get(p))==null?void 0:g.Instance;w&&w.updateScale(s)},[s]),ee(()=>{var g;let w=(g=q.get(p))==null?void 0:g.Instance;w&&w.updateFilter({grayScale:S,tone:y,rotate:v})},[S,y,v]),o(N.Body,{borderRadius:0,height:"viewHeight",width:"viewWidth",children:m(H,{className:[V("Wrap"),V("Use_"+r)].join(" "),gap:0,height:1,position:"relative",overflow:"hidden",borderRadius:"inherit",children:[m(z,{flexSizing:0,overflow:"hidden",position:"relative",backgroundColor:"black",flexCenter:!0,freeCSS:{zIndex:1},children:[o("canvas",{style:{width:"100%",height:"100%"},width:i,height:i,className:V("Canvas"),id:"Canvas-"+p}),o(D.Supplement,{position:"absolute",bottom:1,left:1,fontColor:"white",children:m(R.Left,{gap:"1/2",flexWrap:!0,children:[m(D,{children:["[",e.type,"]"]}),o(D,{children:e.name}),m(D,{children:[_,"px x ",E,"px"]}),m(D,{children:["[",e.size.rank(),"B]"]})]})})]}),m(R.Separate,{borderTop:!0,flexSizing:"none",backgroundColor:"layer.1",padding:1,verticalAlign:"unset",UnderBreakPointStyles:{flexType:"col"},children:[o(oe.SettingRegion,{DefaultOptions:n,val_scale:s,set_scale:d,val_tone:y,set_tone:I,val_grayScale:S,set_grayScale:C,val_rotate:v,set_rotate:f}),m(R.Right,{flexSizing:"none",children:[o(W.Border.S,{onClick:()=>{a()},children:"\u9589\u3058\u308B"}),o(W.Prime.S,{boxShadow:"3.remark",onClick:()=>O(void 0,null,function*(){var B;let w=(B=q.get(p))==null?void 0:B.Instance;if(!w)return;Z.fn.mini.active("CropperExportation");let g=yield w.export();setTimeout(()=>{Z.fn.mini.stop("CropperExportation"),t(g)},3e3)}),children:m(R.Center,{gap:"1/2",children:[o(Z.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 m(R.Left,{verticalAlign:"unset",flexWrap:!0,children:[m(H,{gap:"1/3",children:[o(D.Supplement,{children:"Rotate"}),m(R.Left,{flexChilds:"even",gap:"1/6",children:[o(W.Border.S,{isRounded:!0,borderTopRightRadius:0,borderBottomRightRadius:0,onClick:()=>{let t=u.val_rotate-90;t<0&&(t+=360),u.set_rotate(t)},children:m(R.Center,{gap:"1/4",children:["90\xB0",o(U,{icon:ce})]})}),o(W.Border.S,{isRounded:!0,borderTopLeftRadius:0,borderBottomLeftRadius:0,onClick:()=>{u.set_rotate((u.val_rotate+90)%360)},children:m(R.Center,{gap:"1/4",children:[o(U,{icon:pe}),"90\xB0"]})})]})]}),m(H,{gap:"1/3",freeCSS:{minWidth:12*6},children:[o(D.Supplement,{children:"Zoom"}),m(W.Border.S,{flexCenter:!0,isRounded:!0,flexSizing:0,onClick:t=>{let a="CropperZoomEdit";$.open({tipsID:a,gravityPoint:3,event:t,closeAtParentBlur:!1,freeCSS:{minWidth:12*26},content:o(N.Body,{children:m(H,{padding:1.5,children:[m(R.Separate,{children:[o(D.Paragraph,{children:m(R.Center,{gap:"1/2",children:[o(U.Search,{fontColor:"5.translucent"}),"Zoom"]})}),o(W.Sub,{color:"cloud",ssSphere:2.5,onClick:()=>{$.close(a)},children:o(U.X,{})})]}),o(z,{borderBottom:!0,opacity:"low"}),o(te.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:(r,l)=>{b.interval.once(()=>{u.set_scale(r+100)},250,"Cropper.UpdateScale")},legends:{enable:!0,custom:r=>"x"+Math.round(100+r)/100}})]})})})},children:[u.val_scale.rate(1,0),"%"]})]}),m(H,{gap:"1/3",freeCSS:{minWidth:12*6},children:[o(D.Supplement,{children:"GrayScale"}),m(W.Border.S,{flexCenter:!0,isRounded:!0,flexSizing:0,onClick:t=>{let a="CropperGrayScaleEdit";$.open({tipsID:a,gravityPoint:3,event:t,closeAtParentBlur:!1,freeCSS:{minWidth:12*26},content:o(N.Body,{children:m(H,{padding:1.5,children:[m(R.Separate,{children:[o(D.Paragraph,{children:m(R.Center,{gap:"1/2",children:[o(U,{icon:ne,fontColor:"5.translucent"}),"Gray Scale"]})}),o(W.Sub,{color:"cloud",ssSphere:2.5,onClick:()=>{$.close(a)},children:o(U.X,{})})]}),o(z,{borderBottom:!0,opacity:"low"}),o(te.Slider,{value:u.val_grayScale,min:0,max:100,step:10,onUpdateValidValue:r=>{b.interval.once(()=>{u.set_grayScale(r)},250,"Cropper.GrayScale")},legends:{enable:!0,custom:r=>r+"%"}})]})})})},children:[u.val_grayScale.rate(1,0),"%"]})]}),m(H,{gap:"1/3",freeCSS:{minWidth:12*6},children:[o(D.Supplement,{children:"Tone"}),o(W.Border.S,{flexCenter:!0,isRounded:!0,flexSizing:0,onClick:t=>{let a="CropperToneEdit";$.open({tipsID:a,gravityPoint:3,event:t,closeAtParentBlur:!1,freeCSS:{minWidth:12*26,maxWidth:12*24},content:()=>{let r=[];for(let l=1;l<=10;l++)r.push({value:l,label:m(R.Left,{gap:"1/3",children:[o(z,{ssSphere:1,className:[V("ToneBall"),V("ToneBall_"+l)].join(" ")}),o(z,{textAlign:"left",flexSizing:0,children:c(l)})]})});return o(N.Body,{children:m(H,{padding:1.5,children:[m(R.Separate,{children:[o(D.Paragraph,{children:m(R.Center,{gap:"1/2",children:[o(U,{icon:se,fontColor:"5.translucent"}),"Tone"]})}),o(W.Sub,{color:"cloud",ssSphere:2.5,onClick:()=>{$.close(a)},children:o(U.X,{})})]}),o(z,{borderBottom:!0,opacity:"low"}),o(te.Radio.Normal,{value:u.val_tone,gap:"1/2",cellStyles:{fontColor:"3.blur"},options:[{value:0,label:o(z,{flexSizing:0,textAlign:"center",children:"\u306A\u3057"})},...r],onUpdateValidValue:l=>{u.set_tone(l)}})]})})}})},children:m(R.Center,{gap:"1/2",children:[o(z,{boxShadow:"2.remark",ssSphere:1,className:[V("ToneBall"),V("ToneBall_"+u.val_tone)].join(" ")}),c(u.val_tone)]})})]})]})}},ae={openDialogNEdit:u=>{te.Filer.fn.openDialog({accept:"image",multiple:!1,onChange:e=>{ae.openEditor(K({imageFile:e[0]},u))}})},openEditor:u=>O(void 0,null,function*(){let e="CropperImage";N.open("middleCenter",{sheetID:e,size:"MAX",padding:0,margin:0,freeCSS:{maxWidth:"100%"},content:o(oe.Core,{val_file:u.imageFile,options:u,finishedCallback:c=>{N.close(e),u.onProcessFinished(c)},abortCallback:()=>{N.close(e)}}),closeAtEscapeKeyDown:!1})})};export{ae as Cropper,ae as default};
+import{b as K,c as ie,e as V}from"../chunk-C5N2D3ZX.js";import{jsx as o,jsxs as p}from"react/jsx-runtime";import b,{UUID as le,useStore as O}from"jmini";import{$$fromRoot as re}from"../@utils";import{useState as U,useEffect as ee}from"react";import{Box as A,FAI as X,Column as H}from"../atoms";import{Row as I,Literal as P}from"../mols";import{Button as W}from"./Button";import Y from"./Sheet";import Z from"./Loader";import te from"./Input";import{faPalette as ne}from"@fortawesome/free-solid-svg-icons/faPalette";import{faBarsStaggered as se}from"@fortawesome/free-solid-svg-icons/faBarsStaggered";import{faRotateLeft as ce}from"@fortawesome/free-solid-svg-icons/faRotateLeft";import{faRotateRight as me}from"@fortawesome/free-solid-svg-icons/faRotateRight";import{CropperClasses as N}from"../@styles/componentClasses";import q from"./Tooltips";class he{constructor(e){this.set_scale=e.set_scale,this.val_file=e.val_file,this.develops=e.develops;{let[m,s]=b.is.array(e.use)&&e.use||e.use.split(":").map(i=>Number(i)),h=m/s;this.usage={w:m,h:s,aspect:h}}this.componentId=e.componentId;let c=e.canvas,t=e.picture.image;this.Canvas={elm:c,ctx:c.getContext("2d")};let{width:a,height:r}=t,l=a/r;this.Picture={elm:t,originDataUrl:t.src,aspect:l,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/l*this.usage.aspect:this.scale.min=100*l/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:r/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 n=e.width*.6666666666666666,v=e.height*(2/3);a=t=Math.min(n,v)}else this.usage.aspect>1?(t=e.width*.9,a=t/this.usage.aspect):(a=e.height*.9,t=a*this.usage.aspect);let i=.85;a>e.height*i&&(a=e.height*i,t=a*this.usage.aspect),t>e.width*i&&(t=e.width*i,a=t/this.usage.aspect)}let{width:r,height:l}=c,m=(e.width-t)/2,s=(e.height-a)/2,h=t/a;this.pst={frame:{x:m,y:s,w:t,h:a,aspect:h},outImage:{x:0,y:0,w:0,h:0},imageX:r/2,imageY:l/2,centerX:e.width/2,centerY:e.height/2}}dragEffect(e){let{eventType:c,x:t,y:a}=e;if(c=="start"){let r=this.Canvas.elm.position();this.dragEffectInfo={origin:{x:t,y:a},frameExpandRate:{x:this.Canvas.elm.width/r.width,y:this.Canvas.elm.height/r.height}}}else{let{origin:r,frameExpandRate:l}=this.dragEffectInfo,m=r.x-t,s=r.y-a,h=this.scale.current*this.Picture.revisedAspect/100,i=m/h*l.x,n=s/h*l.y;c=="move"?this.drawImage(this.pst.imageX+i,this.pst.imageY+n):c=="end"&&this.drawImage(this.pst.imageX+=i,this.pst.imageY+=n)}}pinchEffect(e){let{eventType:c,event:t}=e,{x:a,y:r}=b.getCursor(t.touches[0]),{x:l,y:m}=b.getCursor(t.touches[1]),s=l-a,h=m-r;if(c=="start")this.pinchEffectInfo.origin={x:s,y:h,scale:this.scale.current};else if(c=="move"){let{origin:i}=this.pinchEffectInfo,n=Math.sqrt(Math.pow(i.x,2)+Math.pow(i.y,2)),C=Math.sqrt(Math.pow(s,2)+Math.pow(h,2))/n,d=Number(i.scale*C);this.set_scale(d)}}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 r=a.getContext("2d"),l=yield b.ImageLoader(this.Picture.originDataUrl),m=l.width,s=l.height;(t==90||t==270)&&(m=l.height,s=l.width),a.width=m,a.height=s,e&&(r.filter="grayscale("+e+"%)"),t&&(r.translate(m/2,s/2),r.rotate(t*Math.PI/180),[90,270].includes(t)?r.translate(-s/2,-m/2):r.translate(-m/2,-s/2)),r.drawImage(l,0,0,l.width,l.height);let h=r.getImageData(0,0,a.width,a.height),i=h.data;{e/=100;let d=[[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=d[0]/255,S=d[1]/255,_=d[2]/255;for(let w=0;w<s;w++)for(let x=0;x<m;x++){var n=(w*m+x)*4;if(e){let B=.3*i[n]+.59*i[n+1]+.11*i[n+2];for(var v=0;v<3;v++){let D=i[n+v];i[n+v]=D+(B-D)*e}}i[n]*=y,i[n+1]*=S,i[n+2]*=_}}r.putImageData(h,0,0);let C=a.toDataURL("image/jpeg");{let d=yield b.ImageLoader(C),{width:y,height:S}=d,_=y/S;this.Picture=ie(K({},this.Picture),{elm:d,aspect:_,revisedAspect:this.pst.frame.aspect>_?this.pst.frame.w/y:this.pst.frame.h/S})}this.drawImage()})}drawImage(e,c){let{Canvas:{ctx:t,elm:a},pst:{frame:r}}=this;t.clearRect(0,0,this.Canvas.elm.width,this.Canvas.elm.height);let l=e||this.pst.imageX,m=c||this.pst.imageY;{let s=this.scale.current/100,h=this.Picture.revisedAspect*s,i=this.pst.centerX-l*h,n=this.pst.centerY-m*h,v=this.Picture.elm.width*h,C=this.Picture.elm.height*h,d=0,y=0;this.usage.aspect<this.Picture.aspect?(d=v,y=d/this.usage.aspect):(y=C,d=y*this.usage.aspect);{let S=this.pst.frame.x-(v-d)/2,_=this.pst.frame.x+this.pst.frame.w-(v+d)/2,w=this.pst.frame.y-(C-y)/2,x=this.pst.frame.y+this.pst.frame.h-(C+y)/2,B=0;i<_&&(B=i-_),i>S&&(B=i-S);let D=0;n<x&&(D=n-x),n>w&&(D=n-w),this.dragEffectInfo.origin.x+=B/2/this.dragEffectInfo.frameExpandRate.x,this.dragEffectInfo.origin.y+=D/2/this.dragEffectInfo.frameExpandRate.y,i=Math.min(Math.max(i,_),S),n=Math.min(Math.max(n,x),w)}this.pst.outImage={x:i,y:n,w:v,h:C};{let S=1;t.lineWidth=S,t.strokeStyle="#ffffff66",t.strokeRect(i+(v-d)/2-S,n+(C-y)/2-S,d+S*2,y+S*2)}t.drawImage(this.Picture.elm,0,0,this.Picture.elm.width,this.Picture.elm.height,i,n,v,C)}{if(this.usage.aspect==1){t.fillStyle="rgba( 20,24,20,.5 )",t.beginPath();let s=a.width/3*2,h=a.height/3*2,i=Math.min(s,h),n=Math.max(s,h);t.arc(a.width/2,a.height/2,n*1.41,0,Math.PI*2,!0),t.arc(a.width/2,a.height/2,i/2,0,Math.PI*2,!1),t.closePath(),t.fill()}else t.fillStyle="rgba( 20,24,20,.5 )";{let h=b(document.body).getStyleProperty("--color-theme-hsl"),i=2;t.lineWidth=i,t.strokeStyle=`hsla( ${h},1 )`,t.strokeRect(r.x-i,r.y-i,r.w+i*2,r.h+i*2)}}}export(){return V(this,null,function*(){let{Canvas:e,develops:c,Picture:t,pst:{outImage:a,frame:r}}=this,l=a.w/t.elm.width,m=a.h/t.elm.height,s=(r.x-a.x)/l,h=r.w/l,i=(r.y-a.y)/m,n=r.h/m,v=Array.from({length:c.length}),C="image/jpeg";for(let d=0;d<c.length;d++){let{size:y,maxSize:S}=c[d];S=S||{S:1024*20,R:1024*100,L:1024*350}[y];let _={S:140,R:600,L:1200}[y],w=document.createElement("canvas");w.width=h,w.height=n;let x=document.createElement("canvas");x.width=_,x.height=_/this.usage.aspect;let B=w.getContext("2d");if(!B)return;let D=x.getContext("2d");if(!D)return;B.clearRect(0,0,w.width,w.height),B.drawImage(this.Picture.elm,s,i,h,n,0,0,h,n),D.fillStyle="black",D.drawImage(w,0,0,w.width,w.height,0,0,x.width,x.height);let $=x.toDataURL(C),g=yield $.toBlob(C);if(!g)return;if(g.size>=S){let E=S/g.size;if($=x.toDataURL(C,E*.92),g=yield $.toBlob(C),!g)return}let f=new File([g],this.val_file.name,{type:C});v[d]=f}return v})}}const oe={Core:u=>{let{val_file:e,options:c,finishedCallback:t,abortCallback:a}=u,{use:r,develops:l=[]}=c,[m]=U(le());const s={scale:{default:120,min:50,max:300},rotate:0,grayScale:0,tone:0};let h=2048*2048,i=1024,[n,v]=U(s.scale.default),[C,d]=U(s.rotate),[y,S]=U(s.grayScale),[_,w]=U(s.tone),[x,B]=U(0),[D,$]=U(0);return ee(()=>{let g="CropperResize";return b(window).addEvent({eventType:"resize",eventID:g,callback:()=>{b.interval.once(()=>{var j;let f=re("#Canvas-"+m)[0];if(!f)return;let E=(j=O.get(m))==null?void 0:j.Instance;if(!E)return;let J=f.position(),F=J.width/J.height,M=i,z=M/F;if(M*z>h){let G=M*z/h;M=Math.floor(M/Math.sqrt(G)),z=Math.floor(z/Math.sqrt(G))}f.width=i,f.height=z;let{width:T,height:Q}=f;E.pst.centerX=T/2,E.pst.centerY=Q/2,E.frameSizing(),E.modifyImage()},250,"CropperResize")}}),()=>{b(window).removeEvent(g)}},[]),ee(()=>{O.set({[m]:{}}),V(void 0,null,function*(){Z.fn.corner.active(),yield b.pending(()=>{},400);let g=yield e.convert();if(g=String(g),!g)return;let f=re("#Canvas-"+m)[0];if(!f)return;let E=f.position(),J=E.width/E.height,F=i,M=F/J;if(F*M>h){let R=F*M/h;F=Math.floor(F/Math.sqrt(R)),M=Math.floor(M/Math.sqrt(R))}f.width=F,f.height=M;let z=yield b.ImageLoader(g);B(z.width),$(z.height);let T=new he({set_scale:v,val_file:e,develops:l,use:r,scale:s.scale,componentId:m,canvas:f,picture:{image:z,grayScale:s.grayScale,tone:s.tone,rotate:s.rotate}});O.set({[m]:{Instance:T}});const Q=function(R){if(R.preventDefault(),R.touches&&R.touches.length>1)T.pinchEffect({eventType:"start",event:R}),b(document).addEvent({eventType:"touchmove",eventID:"CropperEffectMove",options:{passive:!1},callback:L=>{L.preventDefault(),T.pinchEffect({eventType:"move",event:L})}}).addEvent({eventType:"touchend",eventID:"CropperEffectEnd",options:{passive:!1},callback:G});else{T.dragEffect(K({eventType:"start"},b.getCursor(R)));let{type:L}=R;b(document).addEvent({eventType:L=="touchstart"?"touchmove":"mousemove",eventID:"CropperEffectMove",options:{passive:!1},callback:k=>{j("move",k)}}).addEvent({eventType:L=="touchstart"?"touchend":"mouseup",eventID:"CropperEffectEnd",options:{passive:!1},callback:k=>{j("end",k),G(k)}})}},j=function(R,L){L.preventDefault(),T.dragEffect(K({eventType:R},b.getCursor(L)))},G=function(R){R.preventDefault(),b(document).removeEvent(["CropperEffectMove","CropperEffectEnd"])};b(f).removeEvent(["CropperMouseWheel","CropperTouchStart","CropperMouseDown"]).addEvent({eventID:"CropperMouseWheel",eventType:"wheel",callback:R=>{R.preventDefault();let L=Number(R.wheelDelta*.04),k=T.scale.current+L;k=Math.max(k,T.scale.min),k=Math.min(k,T.scale.max),v(k)},options:{passive:!1}}).addEvent({eventType:"touchstart",eventID:"CropperTouchStart",callback:Q,options:{passive:!1}}).addEvent({eventType:"mousedown",eventID:"CropperMouseDown",callback:Q,options:{passive:!1}}),setTimeout(()=>{Z.fn.corner.stop()},1e3)})},[e.id]),ee(()=>{var f;let g=(f=O.get(m))==null?void 0:f.Instance;g&&g.updateScale(n)},[n]),ee(()=>{var f;let g=(f=O.get(m))==null?void 0:f.Instance;g&&g.updateFilter({grayScale:y,tone:_,rotate:C})},[y,_,C]),o(Y.Body,{borderRadius:0,height:"viewHeight",width:"viewWidth",children:p(H,{className:[N("Wrap"),N("Use_"+r)].join(" "),gap:0,height:1,position:"relative",overflow:"hidden",borderRadius:"inherit",children:[p(A,{flexSizing:0,overflow:"hidden",position:"relative",backgroundColor:"black",flexCenter:!0,freeCSS:{zIndex:1},children:[o("canvas",{style:{width:"100%",height:"100%"},width:i,height:i,className:N("Canvas"),id:"Canvas-"+m}),o(P.Supplement,{position:"absolute",bottom:1,left:1,fontColor:"white",children:p(I.Left,{gap:"1/2",flexWrap:!0,children:[p(P,{children:["[",e.type,"]"]}),o(P,{children:e.name}),p(P,{children:[x,"px x ",D,"px"]}),p(P,{children:["[",e.size.rank(),"B]"]})]})})]}),p(I.Separate,{borderTop:!0,flexSizing:"none",backgroundColor:"layer.1",padding:1,verticalAlign:"unset",UnderBreakPointStyles:{flexType:"col"},children:[o(oe.SettingRegion,{DefaultOptions:s,val_scale:n,set_scale:v,val_tone:_,set_tone:w,val_grayScale:y,set_grayScale:S,val_rotate:C,set_rotate:d}),p(I.Right,{flexSizing:"none",children:[o(W.Border.S,{onClick:()=>{a()},children:"\u9589\u3058\u308B"}),o(W.Prime.S,{boxShadow:"3.remark",onClick:()=>V(void 0,null,function*(){var E;let g=(E=O.get(m))==null?void 0:E.Instance;if(!g)return;Z.fn.mini.active("CropperExportation");let f=yield g.export();setTimeout(()=>{Z.fn.mini.stop("CropperExportation"),t(f)},1e3)}),children:p(I.Center,{gap:"1/2",children:[o(Z.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(I.Left,{verticalAlign:"unset",flexWrap:!0,children:[p(H,{gap:"1/3",children:[o(P.Supplement,{children:"Rotate"}),p(I.Left,{flexChilds:"even",gap:"1/6",children:[o(W.Border.S,{isRounded:!0,borderTopRightRadius:0,borderBottomRightRadius:0,onClick:()=>{let t=u.val_rotate-90;t<0&&(t+=360),u.set_rotate(t)},children:p(I.Center,{gap:"1/4",children:["90\xB0",o(X,{icon:ce})]})}),o(W.Border.S,{isRounded:!0,borderTopLeftRadius:0,borderBottomLeftRadius:0,onClick:()=>{u.set_rotate((u.val_rotate+90)%360)},children:p(I.Center,{gap:"1/4",children:[o(X,{icon:me}),"90\xB0"]})})]})]}),p(H,{gap:"1/3",freeCSS:{minWidth:12*6},children:[o(P.Supplement,{children:"Zoom"}),p(W.Border.S,{flexCenter:!0,isRounded:!0,flexSizing:0,onClick:t=>{let a="CropperZoomEdit";q.open({tipsID:a,gravityPoint:3,event:t,closeAtParentBlur:!1,freeCSS:{minWidth:12*26},content:o(Y.Body,{children:p(H,{padding:1.5,children:[p(I.Separate,{children:[o(P.Paragraph,{children:p(I.Center,{gap:"1/2",children:[o(X.Search,{fontColor:"5.translucent"}),"Zoom"]})}),o(W.Sub,{color:"cloud",ssSphere:2.5,onClick:()=>{q.close(a)},children:o(X.X,{})})]}),o(A,{borderBottom:!0,opacity:"low"}),o(te.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:(r,l)=>{b.interval.once(()=>{u.set_scale(r+100)},250,"Cropper.UpdateScale")},legends:{enable:!0,custom:r=>"x"+Math.round(100+r)/100}})]})})})},children:[u.val_scale.rate(1,0),"%"]})]}),p(H,{gap:"1/3",freeCSS:{minWidth:12*6},children:[o(P.Supplement,{children:"GrayScale"}),p(W.Border.S,{flexCenter:!0,isRounded:!0,flexSizing:0,onClick:t=>{let a="CropperGrayScaleEdit";q.open({tipsID:a,gravityPoint:3,event:t,closeAtParentBlur:!1,freeCSS:{minWidth:12*26},content:o(Y.Body,{children:p(H,{padding:1.5,children:[p(I.Separate,{children:[o(P.Paragraph,{children:p(I.Center,{gap:"1/2",children:[o(X,{icon:ne,fontColor:"5.translucent"}),"Gray Scale"]})}),o(W.Sub,{color:"cloud",ssSphere:2.5,onClick:()=>{q.close(a)},children:o(X.X,{})})]}),o(A,{borderBottom:!0,opacity:"low"}),o(te.Slider,{value:u.val_grayScale,min:0,max:100,step:10,onUpdateValidValue:r=>{b.interval.once(()=>{u.set_grayScale(r)},250,"Cropper.GrayScale")},legends:{enable:!0,custom:r=>r+"%"}})]})})})},children:[u.val_grayScale.rate(1,0),"%"]})]}),p(H,{gap:"1/3",freeCSS:{minWidth:12*6},children:[o(P.Supplement,{children:"Tone"}),o(W.Border.S,{flexCenter:!0,isRounded:!0,flexSizing:0,onClick:t=>{let a="CropperToneEdit";q.open({tipsID:a,gravityPoint:3,event:t,closeAtParentBlur:!1,freeCSS:{minWidth:12*26,maxWidth:12*24},content:()=>{let r=[];for(let l=1;l<=10;l++)r.push({value:l,label:p(I.Left,{gap:"1/3",children:[o(A,{ssSphere:1,className:[N("ToneBall"),N("ToneBall_"+l)].join(" ")}),o(A,{textAlign:"left",flexSizing:0,children:c(l)})]})});return o(Y.Body,{children:p(H,{padding:1.5,children:[p(I.Separate,{children:[o(P.Paragraph,{children:p(I.Center,{gap:"1/2",children:[o(X,{icon:se,fontColor:"5.translucent"}),"Tone"]})}),o(W.Sub,{color:"cloud",ssSphere:2.5,onClick:()=>{q.close(a)},children:o(X.X,{})})]}),o(A,{borderBottom:!0,opacity:"low"}),o(te.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"})},...r],onUpdateValidValue:l=>{u.set_tone(l)}})]})})}})},children:p(I.Center,{gap:"1/2",children:[o(A,{boxShadow:"2.remark",ssSphere:1,className:[N("ToneBall"),N("ToneBall_"+u.val_tone)].join(" ")}),c(u.val_tone)]})})]})]})}},ae={openDialogNEdit:u=>{te.Filer.fn.openDialog({accept:"image",multiple:!1,onChange:e=>{ae.openEditor(K({imageFile:e[0]},u))}})},openEditor:u=>V(void 0,null,function*(){let e="CropperImage";Y.open("middleCenter",{sheetID:e,size:"MAX",padding:0,margin:0,freeCSS:{maxWidth:"100%"},content:o(oe.Core,{val_file:u.imageFile,options:u,finishedCallback:c=>{Y.close(e),u.onProcessFinished(c)},abortCallback:()=>{Y.close(e)}}),closeAtEscapeKeyDown:!1})})};export{ae as Cropper,ae as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "amotify",
-  "version": "0.2.223",
+  "version": "0.2.224",
   "description": "UI Component for React,NextJS,esbuild",
   "scripts": {
     "start": "run-p clean build:*",