amotify 0.2.220 → 0.2.222

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

@@ -1,6 +1,6 @@
 "use client"
 
-import $$,{ UUID,Filer,Time } from 'jmini'
+import $$,{ UUID,Time,Filer } from 'jmini'
 import React,{
   useState,
   useEffect
@@ -97,6 +97,8 @@ let Page = () => {
   let [ val_checked1,set_checked1 ] = useState( false )
   let [ val_checked2,set_checked2 ] = useState( true )
 
+  let [ val_dataurl,set_dataurl ] = useState<string>( "" )
+
   useEffect( () => {
     // $$.interval.once( () => {
     //   set_selected( !select2 )
@@ -125,14 +127,20 @@ let Page = () => {
         <Button.Prime
           onClick={ () => {
             Cropper.openDialogNEdit( {
-              use: '1:1',
+              // use: '1:1',
+              // use: '16:9',
+              use: '4:3',
+              // use: '9:16',
+              // use: '3:4',
               develops: [
                 { size: 'R',maxSize: 3 * 1024 * 1024 } // 3MB
               ],
               onProcessFinished: async ( files ) => {
                 if ( !files || !files[ 0 ] ) return
-                let mediaId = UUID()
-                console.log( files[ 0 ] )
+                let filer = await Filer( files[ 0 ] )
+                let new_dataurl = await filer.toDataURL()
+
+                set_dataurl( new_dataurl )
               }
             } )
           } }
@@ -210,6 +218,10 @@ let Page = () => {
       >
         Submit
       </Button.Prime>
+
+      { val_dataurl && <Img
+        src={ val_dataurl }
+      /> }
     </Column>
   </Plate>
 }

package/dist/fn/Cropper.js

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

package/package.json

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