amotify 0.1.42 → 0.1.44

package/dist/@styles/componentClasses/_.css

@@ -1,6 +1,6 @@
 /**
 * @license amotify
-* amotify 0.1.42
+* amotify 0.1.43
 * https://mingoo.co.jp/
 
 * Copyright (c) mingoo, LLC.

package/dist/@styles/index.css

@@ -1,6 +1,6 @@
 /**
 * @license amotify
-* amotify 0.1.42
+* amotify 0.1.43
 * https://mingoo.co.jp/
 
 * Copyright (c) mingoo, LLC.

package/dist/@styles/init.css

@@ -1,6 +1,6 @@
 /**
 * @license amotify
-* amotify 0.1.42
+* amotify 0.1.43
 * https://mingoo.co.jp/
 
 * Copyright (c) mingoo, LLC.

package/dist/@styles/style.css

@@ -1,6 +1,6 @@
 /**
 * @license amotify
-* amotify 0.1.42
+* amotify 0.1.43
 * https://mingoo.co.jp/
 
 * Copyright (c) mingoo, LLC.

package/dist/@styles/var.css

@@ -1,6 +1,6 @@
 /**
 * @license amotify
-* amotify 0.1.42
+* amotify 0.1.43
 * https://mingoo.co.jp/
 
 * Copyright (c) mingoo, LLC.

package/dist/fn/Cropper.js

@@ -1 +1 @@
-import{b as X,c as O,e as P}from"../chunk-VY3566IV.js";import{Fragment as $,jsx as h,jsxs as y}from"react/jsx-runtime";import{$$ as b,$$fromRoot as j,useStore as M}from"../@utils/_";import{useState as z,useEffect as H}from"react";import V from"../atoms/Flex";import D from"../atoms/Box";import B from"../atoms/FAI";import T from"../mols/Column";import q from"../mols/Row";import Y from"./Button";import A from"./Sheet";import k from"./Loader/_";import W from"./Input/_";import{faPalette as K}from"@fortawesome/free-solid-svg-icons/faPalette";import{faBarsStaggered as Z}from"@fortawesome/free-solid-svg-icons/faBarsStaggered";import{faRotateLeft as J}from"@fortawesome/free-solid-svg-icons/faRotateLeft";import{faRotateRight as Q}from"@fortawesome/free-solid-svg-icons/faRotateRight";import{CropperClasses as U}from"../@styles/componentClasses/_";class ee{constructor(i){this.set_scale=i.set_scale,this.val_file=i.val_file,this.develops=i.develops,this.use=i.use,this.componentID=i.componentID,this.scale={current:i.scale.default,default:i.scale.default,min:i.scale.min,max:i.scale.max};let e=i.canvas,{width:l,height:t}=e,a=i.picture.image,{width:m,height:s}=a,c=m/s;this.Canvas={elm:e,ctx:e.getContext("2d")};let o=0,r=0;this.use=="square"?(o=e.width/3*2,r=e.height/3*2):this.use=="wallpaper.horizontal"?(o=e.width*(7/9),r=o/3):this.use=="wallpaper.vertical"&&(r=e.height*(7/9),o=r/2);let n=(e.width-o)/2,d=(e.height-r)/2,g=o/r;this.Picture={elm:a,originDataUrl:a.src,aspect:c,revisedAspect:g>c?o/m:r/s,rotate:i.picture.rotate,grayScale:i.picture.grayScale,tone:i.picture.tone},this.pst={frame:{x:n,y:d,w:o,h:r,aspect:g},outImage:{x:0,y:0,w:0,h:0},imageX:m/2,imageY:s/2,centerX:l/2,centerY:t/2},this.dragEffectInfo={origin:{x:0,y:0},frameExpandRate:{x:0,y:0}},this.pinchEffectInfo={origin:{x:0,y:0,scale:this.scale.current}},this.modifyImage()}dragEffect(i){let{eventType:e,x:l,y:t}=i;if(e=="start"){let a=this.Canvas.elm.position();this.dragEffectInfo={origin:{x:l,y:t},frameExpandRate:{x:this.Canvas.elm.width/a.width,y:this.Canvas.elm.height/a.height}}}else{let{origin:a,frameExpandRate:m}=this.dragEffectInfo,s=a.x-l,c=a.y-t,o=this.scale.current*this.Picture.revisedAspect/100,r=s/o*m.x,n=c/o*m.y;e=="move"?this.drawImage(this.pst.imageX+r,this.pst.imageY+n):e=="end"&&this.drawImage(this.pst.imageX+=r,this.pst.imageY+=n)}}pinchEffect(i){let{eventType:e,event:l}=i,{x:t,y:a}=b.getCursor(l.touches[0]),{x:m,y:s}=b.getCursor(l.touches[1]),c=m-t,o=s-a;if(e=="start")this.pinchEffectInfo.origin={x:c,y:o,scale:this.scale.current};else if(e=="move"){let{origin:r}=this.pinchEffectInfo,n=Math.sqrt(Math.pow(r.x,2)+Math.pow(r.y,2)),g=Math.sqrt(Math.pow(c,2)+Math.pow(o,2))/n,C=Number(r.scale*g);this.set_scale(C)}}updateScale(i){let e=i;e=Math.max(e,this.scale.min),e=Math.min(e,this.scale.max),this.scale.current=e,this.drawImage()}updateFilter(i){this.Picture.grayScale=i.grayScale,this.Picture.tone=i.tone,this.Picture.rotate=i.rotate,this.modifyImage()}modifyImage(){return P(this,null,function*(){let{grayScale:i,tone:e,rotate:l}=this.Picture;const t=document.createElement("canvas");let a=t.getContext("2d"),m=new Image;m.src=this.Picture.originDataUrl;let s=m.width,c=m.height;(l==90||l==270)&&(s=m.height,c=m.width),t.width=s,t.height=c,i&&(a.filter="grayscale("+i+"%)"),l&&(a.translate(s/2,c/2),a.rotate(l*Math.PI/180),[90,270].includes(l)?a.translate(-c/2,-s/2):a.translate(-s/2,-c/2)),a.drawImage(m,0,0,m.width,m.height);let o=a.getImageData(0,0,t.width,t.height),r=o.data;{i/=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]][e],x=C[0]/255,S=C[1]/255,p=C[2]/255;for(let u=0;u<c;u++)for(let v=0;v<s;v++){var n=(u*s+v)*4;if(i){let w=.3*r[n]+.59*r[n+1]+.11*r[n+2];for(var d=0;d<3;d++){let E=r[n+d];r[n+d]=E+(w-E)*i}}r[n]*=x,r[n+1]*=S,r[n+2]*=p}}a.putImageData(o,0,0);let g=t.toDataURL("image/jpeg");{let C=yield b.ImageLoader(g),{width:x,height:S}=C,p=x/S;this.Picture=O(X({},this.Picture),{elm:C,aspect:p,revisedAspect:this.pst.frame.aspect>p?this.pst.frame.w/x:this.pst.frame.h/S})}this.drawImage()})}drawImage(i,e){let{use:l,Canvas:{ctx:t},pst:{frame:a}}=this,m=i||this.pst.imageX,s=e||this.pst.imageY;{let c=this.scale.current/100,o=this.Picture.revisedAspect*c,r=this.pst.centerX-m*o,n=this.pst.centerY-s*o,d=this.Picture.elm.width*o,g=this.Picture.elm.height*o;{let C=this.pst.frame.x+this.pst.frame.w-d,x=this.pst.frame.x,S=this.pst.frame.y+this.pst.frame.h-g,p=this.pst.frame.y,u=0;r<C&&(u=r-C),r>x&&(u=r-x);let v=0;n<S&&(v=n-S),n>p&&(v=n-p),this.dragEffectInfo.origin.x+=u/2/this.dragEffectInfo.frameExpandRate.x,this.dragEffectInfo.origin.y+=v/2/this.dragEffectInfo.frameExpandRate.y,r=Math.min(Math.max(r,C),x),n=Math.min(Math.max(n,S),p)}this.pst.outImage={x:r,y:n,w:d,h:g},t.clearRect(0,0,this.Canvas.elm.width,this.Canvas.elm.height),t.drawImage(this.Picture.elm,0,0,this.Picture.elm.width,this.Picture.elm.height,r,n,d,g)}{l=="square"?(t.fillStyle="rgba( 20,24,20,.3 )",t.beginPath(),t.arc(this.Canvas.elm.width/2,this.Canvas.elm.height/2,this.Canvas.elm.width,0,Math.PI*2,!0),t.arc(this.Canvas.elm.width/2,this.Canvas.elm.height/2,this.Canvas.elm.width/3*2/2,0,Math.PI*2,!1),t.closePath(),t.fill()):(l=="wallpaper.horizontal"||l=="wallpaper.vertical")&&(t.fillStyle="rgba( 20,24,20,.3 )"),t.beginPath(),t.moveTo(0,0),t.lineTo(this.Canvas.elm.width,0),t.lineTo(this.Canvas.elm.width,this.Canvas.elm.height),t.lineTo(0,this.Canvas.elm.height),t.lineTo(0,0),t.closePath(),t.lineTo(a.x,a.y),t.lineTo(a.x,a.y+a.h),t.lineTo(a.x+a.w,a.y+a.h),t.lineTo(a.x+a.w,a.y),t.lineTo(a.x,a.y),t.fill();let o=b(document.body).getStyleProperty("--color-theme-hsl");t.lineWidth=this.Canvas.elm.width/200,t.strokeStyle=`hsla( ${o},1 )`,t.strokeRect(a.x,a.y,a.w,a.h)}}export(){return P(this,null,function*(){let{develops:i,Picture:e,pst:{outImage:l,frame:t}}=this,a=l.w/e.elm.width,m=l.h/e.elm.height,s=(t.x-l.x)/a,c=(t.x-l.x+t.w)/a,o=(t.y-l.y)/m,r=(t.y-l.y+t.h)/m,n=Array.from({length:i.length}),d="image/jpeg";for(let g=0;g<i.length;g++){let{size:C,maxSize:x}=i[g];x=x||{S:1024*20,R:1024*100,L:1024*350}[C];let S={S:144,R:576,L:1152}[C],p=S;this.use=="wallpaper.horizontal"?p=S/3*2:this.use=="wallpaper.vertical"&&(p=S*2);let u=document.createElement("canvas");u.width=S,u.height=p;let v=u.getContext("2d");if(!v)return;v.clearRect(0,0,S,p),v.drawImage(this.Picture.elm,s,o,c-s,r-o,0,0,S,p);let w=u.toDataURL(d),E=yield w.toBlob(d);if(!E)return;if(E.size>=x){let F=x/E.size;if(w=u.toDataURL(d,F*.92),E=yield w.toBlob(d),!E)return}let L=new File([E],this.val_file.name,{type:d});n[g]=L}return n})}}const G={Core:f=>{let{val_file:i,options:e,finishedCallback:l,abortCallback:t}=f,{use:a,develops:m=[]}=e,[s]=z(b.uuid.gen(32));const c={scale:{default:125,min:100,max:300},rotate:0,grayScale:0,tone:0};let[o,r]=z(c.scale.default),[n,d]=z(c.rotate),[g,C]=z(c.grayScale),[x,S]=z(c.tone);return H(()=>{M.set({key:s,value:{}}),P(void 0,null,function*(){k.fn.corner.active();let{target:p}=yield i.read();if(!p)return;let u=p.result,v=j("#Canvas-"+s)[0];if(!v)return;let w=new ee({set_scale:r,val_file:i,develops:m,use:a,scale:c.scale,componentID:s,canvas:v,picture:{image:yield b.ImageLoader(u),grayScale:c.grayScale,tone:c.tone,rotate:c.rotate}});M.set({key:s,value:{Instance:w}});const E=function(I){if(I.preventDefault(),I.touches&&I.touches.length>1)w.pinchEffect({eventType:"start",event:I}),b(document).addEvent({eventType:"touchmove",eventID:"CropperEffectMove",options:{passive:!1},callback:R=>{R.preventDefault(),w.pinchEffect({eventType:"move",event:R})}}).addEvent({eventType:"touchend",eventID:"CropperEffectEnd",options:{passive:!1},callback:F});else{w.dragEffect(X({eventType:"start"},b.getCursor(I)));let{type:R}=I;b(document).addEvent({eventType:R=="touchstart"?"touchmove":"mousemove",eventID:"CropperEffectMove",options:{passive:!1},callback:_=>{L("move",_)}}).addEvent({eventType:R=="touchstart"?"touchend":"mouseup",eventID:"CropperEffectEnd",options:{passive:!1},callback:_=>{L("end",_),F(_)}})}},L=function(I,R){R.preventDefault(),w.dragEffect(X({eventType:I},b.getCursor(R)))},F=function(I){I.preventDefault(),b(document).removeEvent(["CropperEffectMove","CropperEffectEnd"])};b(v).removeEvent(["CropperMouseWheel","CropperTouchStart","CropperMouseDown"]).addEvent({eventID:"CropperMouseWheel",eventType:"wheel",callback:I=>{I.preventDefault();let R=Number(I.wheelDelta*.04),_=w.scale.current+R;_=Math.max(_,w.scale.min),_=Math.min(_,w.scale.max),r(_)},options:{passive:!1}}).addEvent({eventType:"touchstart",eventID:"CropperTouchStart",callback:E,options:{passive:!1}}).addEvent({eventType:"mousedown",eventID:"CropperMouseDown",callback:E,options:{passive:!1}}),setTimeout(()=>{k.fn.corner.stop()},1e3)})},[i.id]),H(()=>{var u;let p=(u=M.get(s))==null?void 0:u.Instance;p&&p.updateScale(o)},[o]),H(()=>{var u;let p=(u=M.get(s))==null?void 0:u.Instance;p&&p.updateFilter({grayScale:g,tone:x,rotate:n})},[g,x,n]),h(A.Comps.Body,{children:y(V,{className:[U("Wrap"),U("Use_"+a)].join(" "),flexWrap:!1,position:"relative",overflow:"hidden",borderRadius:"inherit",boxShadow:"3.remark",UnderBreakPointStyles:{flexType:"col"},children:[h(D,{flexGrid:3,UnderBreakPointStyles:{width:1,padding:2},children:h(D,{overflow:"hidden",position:"relative",backgroundColor:"layer.4",freeCSS:{zIndex:1},UnderBreakPointStyles:{borderRadius:"1.tone.primary"},children:h("canvas",{width:"2400",height:a=="wallpaper.horizontal"?"1800":a=="wallpaper.vertical"?"3200":"2400",className:U("Canvas"),id:"Canvas-"+s})})}),y(T,{gap:0,flexGrid:2,boxShadow:"3.remark",UnderBreakPointStyles:{width:1,maxWidth:"unset"},freeCSS:{maxWidth:12*28},children:[y(T,{gap:1,flexSizing:0,overflow:"auto",padding:1.5,UnderBreakPointStyles:{flexSizing:"none"},children:[h(D,{flexSizing:"none",fontSize:"4.thirdTitle",isSemiBoldFont:!0,children:"\u30D5\u30A3\u30EB\u30BF\u30FC"}),h(G.SettingRegion,{DefaultOptions:c,val_scale:o,set_scale:r,val_tone:x,set_tone:S,val_grayScale:g,set_grayScale:C,val_rotate:n,set_rotate:d})]}),y(V,{padding:1.5,flexSizing:"none",gap:1,borderTop:!0,children:[h(Y.Button.Border.R,{onClick:()=>{t()},children:"\u30AD\u30E3\u30F3\u30BB\u30EB"}),h(Y.Button.Prime.R,{flexSizing:0,onClick:()=>P(void 0,null,function*(){var v;let p=(v=M.get(s))==null?void 0:v.Instance;if(!p)return;k.fn.mini.active("CropperExportation");let u=yield p.export();setTimeout(()=>{k.fn.mini.stop("CropperExportation"),l(u)},3e3)}),children:y(q.Center,{gap:"1/2",children:[h(k.White.R,{loaderID:"CropperExportation"}),"\u6C7A\u5B9A"]})})]})]})]})})},SettingRegion:f=>{let i=[];for(let e=1;e<=10;e++)i.push({value:e,label:y($,{children:[h(D,{className:[U("ToneBall"),U("ToneBall_"+e)].join(" ")}),h(D,{textAlign:"center",flexSizing:"auto",children:["","\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"][e]})]})});return y($,{children:[y(T,{gap:"1/3",children:[y(D,{children:[h(B.Rotate,{fontSize:"3.paragraph",fontColor:"4.thin"})," Rotate"]}),y(q.Separate,{flexChilds:"even",paddingLeft:2,children:[y(Y.Button.Border.S,{onClick:()=>{let e=f.val_rotate-90;e<0&&(e+=360),f.set_rotate(e)},children:[h(B,{icon:J})," \u5DE6\u306B\u56DE\u8EE2"]}),y(Y.Button.Border.S,{onClick:()=>{f.set_rotate((f.val_rotate+90)%360)},children:["\u53F3\u306B\u56DE\u8EE2 ",h(B,{icon:Q})]})]})]}),y(T,{gap:"1/3",children:[y(D,{children:[h(B.Search,{fontSize:"3.paragraph",fontColor:"4.thin"})," Zoom"]}),h(D,{paddingLeft:2,children:h(W.Slider,{override:"force",value:f.val_scale-100,min:f.DefaultOptions.scale.min-100,max:f.DefaultOptions.scale.max-100,step:25,onUpdateValidValue:({eventType:e,value:l})=>{b.interval.clear("Cropper.UpdateScale"),b.interval.standBy("Cropper.UpdateScale",400,()=>{f.set_scale(l+100)})},legends:{enable:!0,custom:e=>"x"+Math.round(100+e)/100}})})]}),y(T,{gap:"1/3",children:[y(D,{children:[h(B,{icon:K,fontSize:"3.paragraph",fontColor:"4.thin"})," Gray Scale"]}),h(D,{paddingLeft:2,children:h(W.Slider,{value:f.val_grayScale,min:0,max:100,step:10,onUpdateValidValue:({value:e})=>{b.interval.clear("Cropper.GrayScale"),b.interval.standBy("Cropper.GrayScale",400,()=>{f.set_grayScale(e)})},legends:{enable:!0,custom:e=>e+"%"}})})]}),y(T,{gap:"1/3",children:[y(D,{children:[h(B,{icon:Z,fontSize:"3.paragraph",fontColor:"4.thin"})," Tone"]}),h(D,{paddingLeft:2,children:h(W.Radio,{value:f.val_tone,gap:"1/2",cellStyles:{isRounded:!0,borderWidth:2,borderColor:"1.thin",padding:"1/2",paddingRight:1,fontSize:"1.mini",gap:"1/3",flexSizing:"auto"},options:[{value:0,label:"\u306A\u3057",padding:["1/2",1],flexCenter:!0},...i],onUpdateValidValue:({value:e})=>{f.set_tone(e[0])}})})]})]})}},N={open:f=>P(void 0,null,function*(){let i=yield W.Filer.fn.openDialog({accept:"image",multiple:!1}),e="CropperImage";A.open({sheetID:e,type:"normal.middleCenter",size:"3L",freeCSS:{width:f.use=="wallpaper.horizontal"?12*100:12*80},content:h(G.Core,{val_file:i[0],options:f,finishedCallback:l=>{A.close(e),f.onProcessFinished(l)},abortCallback:()=>{A.close(e)}}),close_option:{escapeKeyDown:!1}})})};export{N as Cropper,N as default};
+import{b as X,c as O,e as P}from"../chunk-VY3566IV.js";import{Fragment as $,jsx as m,jsxs as y}from"react/jsx-runtime";import{$$ as b,$$fromRoot as j,useStore as M}from"../@utils/_";import{useState as z,useEffect as H}from"react";import V from"../atoms/Flex";import D from"../atoms/Box";import B from"../atoms/FAI";import T from"../mols/Column";import q from"../mols/Row";import Y from"./Button";import A from"./Sheet";import k from"./Loader/_";import W from"./Input/_";import{faPalette as K}from"@fortawesome/free-solid-svg-icons/faPalette";import{faBarsStaggered as Z}from"@fortawesome/free-solid-svg-icons/faBarsStaggered";import{faRotateLeft as J}from"@fortawesome/free-solid-svg-icons/faRotateLeft";import{faRotateRight as Q}from"@fortawesome/free-solid-svg-icons/faRotateRight";import{CropperClasses as L}from"../@styles/componentClasses/_";class ee{constructor(i){this.set_scale=i.set_scale,this.val_file=i.val_file,this.develops=i.develops,this.use=i.use,this.componentID=i.componentID,this.scale={current:i.scale.default,default:i.scale.default,min:i.scale.min,max:i.scale.max};let e=i.canvas,{width:l,height:t}=e,a=i.picture.image,{width:h,height:s}=a,c=h/s;this.Canvas={elm:e,ctx:e.getContext("2d")};let o=0,r=0;this.use=="square"?(o=e.width/3*2,r=e.height/3*2):this.use=="wallpaper.horizontal"?(o=e.width*(7/9),r=o/3):this.use=="wallpaper.vertical"&&(r=e.height*(7/9),o=r/2);let n=(e.width-o)/2,d=(e.height-r)/2,g=o/r;this.Picture={elm:a,originDataUrl:a.src,aspect:c,revisedAspect:g>c?o/h:r/s,rotate:i.picture.rotate,grayScale:i.picture.grayScale,tone:i.picture.tone},this.pst={frame:{x:n,y:d,w:o,h:r,aspect:g},outImage:{x:0,y:0,w:0,h:0},imageX:h/2,imageY:s/2,centerX:l/2,centerY:t/2},this.dragEffectInfo={origin:{x:0,y:0},frameExpandRate:{x:0,y:0}},this.pinchEffectInfo={origin:{x:0,y:0,scale:this.scale.current}},this.modifyImage()}dragEffect(i){let{eventType:e,x:l,y:t}=i;if(e=="start"){let a=this.Canvas.elm.position();this.dragEffectInfo={origin:{x:l,y:t},frameExpandRate:{x:this.Canvas.elm.width/a.width,y:this.Canvas.elm.height/a.height}}}else{let{origin:a,frameExpandRate:h}=this.dragEffectInfo,s=a.x-l,c=a.y-t,o=this.scale.current*this.Picture.revisedAspect/100,r=s/o*h.x,n=c/o*h.y;e=="move"?this.drawImage(this.pst.imageX+r,this.pst.imageY+n):e=="end"&&this.drawImage(this.pst.imageX+=r,this.pst.imageY+=n)}}pinchEffect(i){let{eventType:e,event:l}=i,{x:t,y:a}=b.getCursor(l.touches[0]),{x:h,y:s}=b.getCursor(l.touches[1]),c=h-t,o=s-a;if(e=="start")this.pinchEffectInfo.origin={x:c,y:o,scale:this.scale.current};else if(e=="move"){let{origin:r}=this.pinchEffectInfo,n=Math.sqrt(Math.pow(r.x,2)+Math.pow(r.y,2)),g=Math.sqrt(Math.pow(c,2)+Math.pow(o,2))/n,C=Number(r.scale*g);this.set_scale(C)}}updateScale(i){let e=i;e=Math.max(e,this.scale.min),e=Math.min(e,this.scale.max),this.scale.current=e,this.drawImage()}updateFilter(i){this.Picture.grayScale=i.grayScale,this.Picture.tone=i.tone,this.Picture.rotate=i.rotate,this.modifyImage()}modifyImage(){return P(this,null,function*(){let{grayScale:i,tone:e,rotate:l}=this.Picture;const t=document.createElement("canvas");let a=t.getContext("2d"),h=yield b.ImageLoader(this.Picture.originDataUrl),s=h.width,c=h.height;(l==90||l==270)&&(s=h.height,c=h.width),t.width=s,t.height=c,i&&(a.filter="grayscale("+i+"%)"),l&&(a.translate(s/2,c/2),a.rotate(l*Math.PI/180),[90,270].includes(l)?a.translate(-c/2,-s/2):a.translate(-s/2,-c/2)),a.drawImage(h,0,0,h.width,h.height);let o=a.getImageData(0,0,t.width,t.height),r=o.data;{i/=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]][e],x=C[0]/255,S=C[1]/255,p=C[2]/255;for(let u=0;u<c;u++)for(let v=0;v<s;v++){var n=(u*s+v)*4;if(i){let w=.3*r[n]+.59*r[n+1]+.11*r[n+2];for(var d=0;d<3;d++){let E=r[n+d];r[n+d]=E+(w-E)*i}}r[n]*=x,r[n+1]*=S,r[n+2]*=p}}a.putImageData(o,0,0);let g=t.toDataURL("image/jpeg");{let C=yield b.ImageLoader(g),{width:x,height:S}=C,p=x/S;this.Picture=O(X({},this.Picture),{elm:C,aspect:p,revisedAspect:this.pst.frame.aspect>p?this.pst.frame.w/x:this.pst.frame.h/S})}this.drawImage()})}drawImage(i,e){let{use:l,Canvas:{ctx:t},pst:{frame:a}}=this,h=i||this.pst.imageX,s=e||this.pst.imageY;{let c=this.scale.current/100,o=this.Picture.revisedAspect*c,r=this.pst.centerX-h*o,n=this.pst.centerY-s*o,d=this.Picture.elm.width*o,g=this.Picture.elm.height*o;{let C=this.pst.frame.x+this.pst.frame.w-d,x=this.pst.frame.x,S=this.pst.frame.y+this.pst.frame.h-g,p=this.pst.frame.y,u=0;r<C&&(u=r-C),r>x&&(u=r-x);let v=0;n<S&&(v=n-S),n>p&&(v=n-p),this.dragEffectInfo.origin.x+=u/2/this.dragEffectInfo.frameExpandRate.x,this.dragEffectInfo.origin.y+=v/2/this.dragEffectInfo.frameExpandRate.y,r=Math.min(Math.max(r,C),x),n=Math.min(Math.max(n,S),p)}this.pst.outImage={x:r,y:n,w:d,h:g},t.clearRect(0,0,this.Canvas.elm.width,this.Canvas.elm.height),t.drawImage(this.Picture.elm,0,0,this.Picture.elm.width,this.Picture.elm.height,r,n,d,g)}{l=="square"?(t.fillStyle="rgba( 20,24,20,.3 )",t.beginPath(),t.arc(this.Canvas.elm.width/2,this.Canvas.elm.height/2,this.Canvas.elm.width,0,Math.PI*2,!0),t.arc(this.Canvas.elm.width/2,this.Canvas.elm.height/2,this.Canvas.elm.width/3*2/2,0,Math.PI*2,!1),t.closePath(),t.fill()):(l=="wallpaper.horizontal"||l=="wallpaper.vertical")&&(t.fillStyle="rgba( 20,24,20,.3 )"),t.beginPath(),t.moveTo(0,0),t.lineTo(this.Canvas.elm.width,0),t.lineTo(this.Canvas.elm.width,this.Canvas.elm.height),t.lineTo(0,this.Canvas.elm.height),t.lineTo(0,0),t.closePath(),t.lineTo(a.x,a.y),t.lineTo(a.x,a.y+a.h),t.lineTo(a.x+a.w,a.y+a.h),t.lineTo(a.x+a.w,a.y),t.lineTo(a.x,a.y),t.fill();let o=b(document.body).getStyleProperty("--color-theme-hsl");t.lineWidth=this.Canvas.elm.width/200,t.strokeStyle=`hsla( ${o},1 )`,t.strokeRect(a.x,a.y,a.w,a.h)}}export(){return P(this,null,function*(){let{develops:i,Picture:e,pst:{outImage:l,frame:t}}=this,a=l.w/e.elm.width,h=l.h/e.elm.height,s=(t.x-l.x)/a,c=(t.x-l.x+t.w)/a,o=(t.y-l.y)/h,r=(t.y-l.y+t.h)/h,n=Array.from({length:i.length}),d="image/jpeg";for(let g=0;g<i.length;g++){let{size:C,maxSize:x}=i[g];x=x||{S:1024*20,R:1024*100,L:1024*350}[C];let S={S:144,R:576,L:1152}[C],p=S;this.use=="wallpaper.horizontal"?p=S/3*2:this.use=="wallpaper.vertical"&&(p=S*2);let u=document.createElement("canvas");u.width=S,u.height=p;let v=u.getContext("2d");if(!v)return;v.clearRect(0,0,S,p),v.drawImage(this.Picture.elm,s,o,c-s,r-o,0,0,S,p);let w=u.toDataURL(d),E=yield w.toBlob(d);if(!E)return;if(E.size>=x){let F=x/E.size;if(w=u.toDataURL(d,F*.92),E=yield w.toBlob(d),!E)return}let U=new File([E],this.val_file.name,{type:d});n[g]=U}return n})}}const G={Core:f=>{let{val_file:i,options:e,finishedCallback:l,abortCallback:t}=f,{use:a,develops:h=[]}=e,[s]=z(b.uuid.gen(32));const c={scale:{default:125,min:100,max:300},rotate:0,grayScale:0,tone:0};let[o,r]=z(c.scale.default),[n,d]=z(c.rotate),[g,C]=z(c.grayScale),[x,S]=z(c.tone);return H(()=>{M.set({key:s,value:{}}),P(void 0,null,function*(){k.fn.corner.active();let{target:p}=yield i.read();if(!p)return;let u=p.result,v=j("#Canvas-"+s)[0];if(!v)return;let w=new ee({set_scale:r,val_file:i,develops:h,use:a,scale:c.scale,componentID:s,canvas:v,picture:{image:yield b.ImageLoader(u),grayScale:c.grayScale,tone:c.tone,rotate:c.rotate}});M.set({key:s,value:{Instance:w}});const E=function(I){if(I.preventDefault(),I.touches&&I.touches.length>1)w.pinchEffect({eventType:"start",event:I}),b(document).addEvent({eventType:"touchmove",eventID:"CropperEffectMove",options:{passive:!1},callback:R=>{R.preventDefault(),w.pinchEffect({eventType:"move",event:R})}}).addEvent({eventType:"touchend",eventID:"CropperEffectEnd",options:{passive:!1},callback:F});else{w.dragEffect(X({eventType:"start"},b.getCursor(I)));let{type:R}=I;b(document).addEvent({eventType:R=="touchstart"?"touchmove":"mousemove",eventID:"CropperEffectMove",options:{passive:!1},callback:_=>{U("move",_)}}).addEvent({eventType:R=="touchstart"?"touchend":"mouseup",eventID:"CropperEffectEnd",options:{passive:!1},callback:_=>{U("end",_),F(_)}})}},U=function(I,R){R.preventDefault(),w.dragEffect(X({eventType:I},b.getCursor(R)))},F=function(I){I.preventDefault(),b(document).removeEvent(["CropperEffectMove","CropperEffectEnd"])};b(v).removeEvent(["CropperMouseWheel","CropperTouchStart","CropperMouseDown"]).addEvent({eventID:"CropperMouseWheel",eventType:"wheel",callback:I=>{I.preventDefault();let R=Number(I.wheelDelta*.04),_=w.scale.current+R;_=Math.max(_,w.scale.min),_=Math.min(_,w.scale.max),r(_)},options:{passive:!1}}).addEvent({eventType:"touchstart",eventID:"CropperTouchStart",callback:E,options:{passive:!1}}).addEvent({eventType:"mousedown",eventID:"CropperMouseDown",callback:E,options:{passive:!1}}),setTimeout(()=>{k.fn.corner.stop()},1e3)})},[i.id]),H(()=>{var u;let p=(u=M.get(s))==null?void 0:u.Instance;p&&p.updateScale(o)},[o]),H(()=>{var u;let p=(u=M.get(s))==null?void 0:u.Instance;p&&p.updateFilter({grayScale:g,tone:x,rotate:n})},[g,x,n]),m(A.Comps.Body,{children:y(V,{className:[L("Wrap"),L("Use_"+a)].join(" "),flexWrap:!1,position:"relative",overflow:"hidden",borderRadius:"inherit",boxShadow:"3.remark",UnderBreakPointStyles:{flexType:"col"},children:[m(D,{flexGrid:3,UnderBreakPointStyles:{width:1,padding:2},children:m(D,{overflow:"hidden",position:"relative",backgroundColor:"layer.4",freeCSS:{zIndex:1},UnderBreakPointStyles:{borderRadius:"1.tone.primary"},children:m("canvas",{width:"2400",height:a=="wallpaper.horizontal"?"1800":a=="wallpaper.vertical"?"3200":"2400",className:L("Canvas"),id:"Canvas-"+s})})}),y(T,{gap:0,flexGrid:2,boxShadow:"3.remark",UnderBreakPointStyles:{width:1,maxWidth:"unset"},freeCSS:{maxWidth:12*28},children:[y(T,{gap:1,flexSizing:0,overflow:"auto",padding:1.5,UnderBreakPointStyles:{flexSizing:"none"},children:[m(D,{flexSizing:"none",fontSize:"4.thirdTitle",isSemiBoldFont:!0,children:"\u30D5\u30A3\u30EB\u30BF\u30FC"}),m(G.SettingRegion,{DefaultOptions:c,val_scale:o,set_scale:r,val_tone:x,set_tone:S,val_grayScale:g,set_grayScale:C,val_rotate:n,set_rotate:d})]}),y(V,{padding:1.5,flexSizing:"none",gap:1,borderTop:!0,children:[m(Y.Button.Border.R,{onClick:()=>{t()},children:"\u30AD\u30E3\u30F3\u30BB\u30EB"}),m(Y.Button.Prime.R,{flexSizing:0,onClick:()=>P(void 0,null,function*(){var v;let p=(v=M.get(s))==null?void 0:v.Instance;if(!p)return;k.fn.mini.active("CropperExportation");let u=yield p.export();setTimeout(()=>{k.fn.mini.stop("CropperExportation"),l(u)},3e3)}),children:y(q.Center,{gap:"1/2",children:[m(k.White.R,{loaderID:"CropperExportation"}),"\u6C7A\u5B9A"]})})]})]})]})})},SettingRegion:f=>{let i=[];for(let e=1;e<=10;e++)i.push({value:e,label:y($,{children:[m(D,{className:[L("ToneBall"),L("ToneBall_"+e)].join(" ")}),m(D,{textAlign:"center",flexSizing:"auto",children:["","\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"][e]})]})});return y($,{children:[y(T,{gap:"1/3",children:[y(D,{children:[m(B.Rotate,{fontSize:"3.paragraph",fontColor:"4.thin"})," Rotate"]}),y(q.Separate,{flexChilds:"even",paddingLeft:2,children:[y(Y.Button.Border.S,{onClick:()=>{let e=f.val_rotate-90;e<0&&(e+=360),f.set_rotate(e)},children:[m(B,{icon:J})," \u5DE6\u306B\u56DE\u8EE2"]}),y(Y.Button.Border.S,{onClick:()=>{f.set_rotate((f.val_rotate+90)%360)},children:["\u53F3\u306B\u56DE\u8EE2 ",m(B,{icon:Q})]})]})]}),y(T,{gap:"1/3",children:[y(D,{children:[m(B.Search,{fontSize:"3.paragraph",fontColor:"4.thin"})," Zoom"]}),m(D,{paddingLeft:2,children:m(W.Slider,{override:"force",value:f.val_scale-100,min:f.DefaultOptions.scale.min-100,max:f.DefaultOptions.scale.max-100,step:25,onUpdateValidValue:({eventType:e,value:l})=>{b.interval.clear("Cropper.UpdateScale"),b.interval.standBy("Cropper.UpdateScale",400,()=>{f.set_scale(l+100)})},legends:{enable:!0,custom:e=>"x"+Math.round(100+e)/100}})})]}),y(T,{gap:"1/3",children:[y(D,{children:[m(B,{icon:K,fontSize:"3.paragraph",fontColor:"4.thin"})," Gray Scale"]}),m(D,{paddingLeft:2,children:m(W.Slider,{value:f.val_grayScale,min:0,max:100,step:10,onUpdateValidValue:({value:e})=>{b.interval.clear("Cropper.GrayScale"),b.interval.standBy("Cropper.GrayScale",400,()=>{f.set_grayScale(e)})},legends:{enable:!0,custom:e=>e+"%"}})})]}),y(T,{gap:"1/3",children:[y(D,{children:[m(B,{icon:Z,fontSize:"3.paragraph",fontColor:"4.thin"})," Tone"]}),m(D,{paddingLeft:2,children:m(W.Radio,{value:f.val_tone,gap:"1/2",cellStyles:{isRounded:!0,borderWidth:2,borderColor:"1.thin",padding:"1/2",paddingRight:1,fontSize:"1.mini",gap:"1/3",flexSizing:"auto"},options:[{value:0,label:"\u306A\u3057",padding:["1/2",1],flexCenter:!0},...i],onUpdateValidValue:({value:e})=>{f.set_tone(e[0])}})})]})]})}},N={open:f=>P(void 0,null,function*(){let i=yield W.Filer.fn.openDialog({accept:"image",multiple:!1}),e="CropperImage";A.open({sheetID:e,type:"normal.middleCenter",size:"3L",freeCSS:{width:f.use=="wallpaper.horizontal"?12*100:12*80},content:m(G.Core,{val_file:i[0],options:f,finishedCallback:l=>{A.close(e),f.onProcessFinished(l)},abortCallback:()=>{A.close(e)}}),close_option:{escapeKeyDown:!1}})})};export{N as Cropper,N as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "amotify",
-  "version": "0.1.42",
+  "version": "0.1.44",
   "description": "UI FW for React",
   "scripts": {
     "clean": "rimraf dist",
@@ -33,7 +33,7 @@
     "@fortawesome/free-regular-svg-icons": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@mingoo/jsmin": "^0.0.16",
+    "@mingoo/jsmin": "^0.0.17",
     "@types/express": "^4.17.21",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",