amotify 0.2.221 → 0.2.223
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/demo/next/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
|
|
3
|
-
import $$,{ UUID,Filer
|
|
3
|
+
import $$,{ UUID,Time,Filer } from 'jmini'
|
|
4
4
|
import React,{
|
|
5
5
|
useState,
|
|
6
6
|
useEffect
|
|
@@ -97,6 +97,8 @@ let Page = () => {
|
|
|
97
97
|
let [ val_checked1,set_checked1 ] = useState( false )
|
|
98
98
|
let [ val_checked2,set_checked2 ] = useState( true )
|
|
99
99
|
|
|
100
|
+
let [ val_dataurl,set_dataurl ] = useState<string>( "" )
|
|
101
|
+
|
|
100
102
|
useEffect( () => {
|
|
101
103
|
// $$.interval.once( () => {
|
|
102
104
|
// set_selected( !select2 )
|
|
@@ -125,14 +127,23 @@ let Page = () => {
|
|
|
125
127
|
<Button.Prime
|
|
126
128
|
onClick={ () => {
|
|
127
129
|
Cropper.openDialogNEdit( {
|
|
128
|
-
use: '1:1',
|
|
130
|
+
// use: '1:1',
|
|
131
|
+
// use: '16:9',
|
|
132
|
+
use: '4:3',
|
|
133
|
+
// use: '9:16',
|
|
134
|
+
// use: '3:4',
|
|
129
135
|
develops: [
|
|
130
136
|
{ size: 'R',maxSize: 3 * 1024 * 1024 } // 3MB
|
|
131
137
|
],
|
|
132
138
|
onProcessFinished: async ( files ) => {
|
|
133
139
|
if ( !files || !files[ 0 ] ) return
|
|
134
|
-
let
|
|
135
|
-
|
|
140
|
+
let filer = await Filer( files[ 0 ] )
|
|
141
|
+
let new_dataurl = await filer.toDataURL()
|
|
142
|
+
console.log(
|
|
143
|
+
'[new_dataurl]',new_dataurl
|
|
144
|
+
)
|
|
145
|
+
|
|
146
|
+
set_dataurl( new_dataurl )
|
|
136
147
|
}
|
|
137
148
|
} )
|
|
138
149
|
} }
|
|
@@ -210,6 +221,10 @@ let Page = () => {
|
|
|
210
221
|
>
|
|
211
222
|
Submit
|
|
212
223
|
</Button.Prime>
|
|
224
|
+
|
|
225
|
+
{ val_dataurl && <Img
|
|
226
|
+
src={ val_dataurl }
|
|
227
|
+
/> }
|
|
213
228
|
</Column>
|
|
214
229
|
</Plate>
|
|
215
230
|
}
|
package/dist/fn/Cropper.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as Z,c as ie,e as V}from"../chunk-C5N2D3ZX.js";import{jsx as i,jsxs as p}from"react/jsx-runtime";import C,{UUID as le,useStore as q}from"jmini";import{$$fromRoot as oe}from"../@utils";import{useState as Y,useEffect as Q}from"react";import{Box as A,FAI as X,Column as z}from"../atoms";import{Row as x,Literal as T}from"../mols";import{Button as k}from"./Button";import H from"./Sheet";import J from"./Loader";import ee from"./Input";import{faPalette as se}from"@fortawesome/free-solid-svg-icons/faPalette";import{faBarsStaggered as ce}from"@fortawesome/free-solid-svg-icons/faBarsStaggered";import{faRotateLeft as me}from"@fortawesome/free-solid-svg-icons/faRotateLeft";import{faRotateRight as pe}from"@fortawesome/free-solid-svg-icons/faRotateRight";import{CropperClasses as N}from"../@styles/componentClasses";import O from"./Tooltips";class he{constructor(a){this.set_scale=a.set_scale,this.val_file=a.val_file,this.develops=a.develops;{let[c,m]=C.is.array(a.use)&&a.use||a.use.split(":").map(o=>Number(o)),h=c/m;this.usage={w:c,h:m,aspect:h}}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,m=(a.height-r)/2,h=e/r;this.pst={frame:{x:c,y:m,w:e,h:r,aspect:h},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,m=t.y-r,h=this.scale.current*this.Picture.revisedAspect/100,o=c/h*n.x,l=m/h*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}=C.getCursor(e.touches[0]),{x:n,y:c}=C.getCursor(e.touches[1]),m=n-r,h=c-t;if(s=="start")this.pinchEffectInfo.origin={x:m,y:h,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)),g=Math.sqrt(Math.pow(m,2)+Math.pow(h,2))/l,f=Number(o.scale*g);this.set_scale(f)}}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 V(this,null,function*(){let{grayScale:a,tone:s,rotate:e}=this.Picture;const r=document.createElement("canvas");let t=r.getContext("2d"),n=yield C.ImageLoader(this.Picture.originDataUrl),c=n.width,m=n.height;(e==90||e==270)&&(c=n.height,m=n.width),r.width=c,r.height=m,a&&(t.filter="grayscale("+a+"%)"),e&&(t.translate(c/2,m/2),t.rotate(e*Math.PI/180),[90,270].includes(e)?t.translate(-m/2,-c/2):t.translate(-c/2,-m/2)),t.drawImage(n,0,0,n.width,n.height);let h=t.getImageData(0,0,r.width,r.height),o=h.data;{a/=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]][s],w=f[0]/255,R=f[1]/255,v=f[2]/255;for(let I=0;I<m;I++)for(let _=0;_<c;_++){var l=(I*c+_)*4;if(a){let U=.3*o[l]+.59*o[l+1]+.11*o[l+2];for(var d=0;d<3;d++){let W=o[l+d];o[l+d]=W+(U-W)*a}}o[l]*=w,o[l+1]*=R,o[l+2]*=v}}t.putImageData(h,0,0);let g=r.toDataURL("image/jpeg");{let f=yield C.ImageLoader(g),{width:w,height:R}=f,v=w/R;this.Picture=ie(Z({},this.Picture),{elm:f,aspect:v,revisedAspect:this.pst.frame.aspect>v?this.pst.frame.w/w: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 m=this.scale.current/100,h=this.Picture.revisedAspect*m,o=this.pst.centerX-n*h,l=this.pst.centerY-c*h,d=this.Picture.elm.width*h,g=this.Picture.elm.height*h;{let f=this.pst.frame.x+this.pst.frame.w-d,w=this.pst.frame.x,R=this.pst.frame.y+this.pst.frame.h-g,v=this.pst.frame.y,I=0;o<f&&(I=o-f),o>w&&(I=o-w);let _=0;l<R&&(_=l-R),l>v&&(_=l-v),this.dragEffectInfo.origin.x+=I/2/this.dragEffectInfo.frameExpandRate.x,this.dragEffectInfo.origin.y+=_/2/this.dragEffectInfo.frameExpandRate.y,o=Math.min(Math.max(o,f),w),l=Math.min(Math.max(l,R),v)}this.pst.outImage={x:o,y:l,w:d,h:g},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,d,g)}{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,d=Math.min(o,l),g=Math.max(o,l);e.arc(r.width/2,r.height/2,g*1.41,0,Math.PI*2,!0),e.arc(r.width/2,r.height/2,d/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 h=C(document.body).getStyleProperty("--color-theme-hsl");e.lineWidth=4,e.strokeStyle=`hsla( ${h},1 )`,e.strokeRect(t.x,t.y,t.w,t.h)}}export(){return V(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,m=(t.x-r.x)/n,h=(t.x-r.x+t.w)/n,o=(t.y-r.y)/c,l=(t.y-r.y+t.h)/c,d=Array.from({length:s.length}),g="image/jpeg";for(let f=0;f<s.length;f++){let{size:w,maxSize:R}=s[f];R=R||{S:1024*20,R:1024*100,L:1024*350}[w];let v={S:140,R:600,L:1200}[w],I=v;this.usage.aspect>1?I=v/this.usage.aspect:v=I*this.usage.aspect;let _=document.createElement("canvas");_.width=v,_.height=I;let U=_.getContext("2d");if(!U)return;U.clearRect(0,0,v,I),U.drawImage(this.Picture.elm,m,o,h-m,l-o,0,0,v,I);let W=_.toDataURL(g),F=yield W.toBlob(g);if(!F)return;if(F.size>=R){let S=R/F.size;if(W=_.toDataURL(g,S*.92),F=yield W.toBlob(g),!F)return}let y=new File([F],this.val_file.name,{type:g});d[f]=y}return d})}}const ne={Core:u=>{let{val_file:a,options:s,finishedCallback:e,abortCallback:r}=u,{use:t,develops:n=[]}=s,[c]=Y(le());const m={scale:{default:120,min:100,max:400},rotate:0,grayScale:0,tone:0};let h=2048*2048,o=1024,[l,d]=Y(m.scale.default),[g,f]=Y(m.rotate),[w,R]=Y(m.grayScale),[v,I]=Y(m.tone),[_,U]=Y(0),[W,F]=Y(0);return Q(()=>{let y="CropperResize";return C(window).addEvent({eventType:"resize",eventID:y,callback:()=>{C.interval.once(()=>{var G;let S=oe("#Canvas-"+c)[0];if(!S)return;let E=(G=q.get(c))==null?void 0:G.Instance;if(!E)return;let $=S.position(),te=$.width/$.height,D=o,B=D/te;if(D*B>h){let K=D*B/h;D=Math.floor(D/Math.sqrt(K)),B=Math.floor(B/Math.sqrt(K))}S.width=o,S.height=B;let{width:j,height:P}=S;E.pst.centerX=j/2,E.pst.centerY=P/2,E.frameSizing(),E.modifyImage()},250,"CropperResize")}}),()=>{C(window).removeEvent(y)}},[]),Q(()=>{q.set({[c]:{}}),V(void 0,null,function*(){J.fn.corner.active(),yield C.pending(()=>{},400);let{target:y}=yield a.convert();if(!y)return;let S=y.result,E=oe("#Canvas-"+c)[0];if(!E)return;let $=E.position(),te=$.width/$.height,D=o,B=D/te;if(D*B>h){let b=D*B/h;D=Math.floor(D/Math.sqrt(b)),B=Math.floor(B/Math.sqrt(b))}E.width=D,E.height=B;let j=yield C.ImageLoader(S);U(j.width),F(j.height);let P=new he({set_scale:d,val_file:a,develops:n,use:t,scale:m.scale,componentId:c,canvas:E,picture:{image:j,grayScale:m.grayScale,tone:m.tone,rotate:m.rotate}});q.set({[c]:{Instance:P}});const G=function(b){if(b.preventDefault(),b.touches&&b.touches.length>1)P.pinchEffect({eventType:"start",event:b}),C(document).addEvent({eventType:"touchmove",eventID:"CropperEffectMove",options:{passive:!1},callback:M=>{M.preventDefault(),P.pinchEffect({eventType:"move",event:M})}}).addEvent({eventType:"touchend",eventID:"CropperEffectEnd",options:{passive:!1},callback:re});else{P.dragEffect(Z({eventType:"start"},C.getCursor(b)));let{type:M}=b;C(document).addEvent({eventType:M=="touchstart"?"touchmove":"mousemove",eventID:"CropperEffectMove",options:{passive:!1},callback:L=>{K("move",L)}}).addEvent({eventType:M=="touchstart"?"touchend":"mouseup",eventID:"CropperEffectEnd",options:{passive:!1},callback:L=>{K("end",L),re(L)}})}},K=function(b,M){M.preventDefault(),P.dragEffect(Z({eventType:b},C.getCursor(M)))},re=function(b){b.preventDefault(),C(document).removeEvent(["CropperEffectMove","CropperEffectEnd"])};C(E).removeEvent(["CropperMouseWheel","CropperTouchStart","CropperMouseDown"]).addEvent({eventID:"CropperMouseWheel",eventType:"wheel",callback:b=>{b.preventDefault();let M=Number(b.wheelDelta*.04),L=P.scale.current+M;L=Math.max(L,P.scale.min),L=Math.min(L,P.scale.max),d(L)},options:{passive:!1}}).addEvent({eventType:"touchstart",eventID:"CropperTouchStart",callback:G,options:{passive:!1}}).addEvent({eventType:"mousedown",eventID:"CropperMouseDown",callback:G,options:{passive:!1}}),setTimeout(()=>{J.fn.corner.stop()},1e3)})},[a.id]),Q(()=>{var S;let y=(S=q.get(c))==null?void 0:S.Instance;y&&y.updateScale(l)},[l]),Q(()=>{var S;let y=(S=q.get(c))==null?void 0:S.Instance;y&&y.updateFilter({grayScale:w,tone:v,rotate:g})},[w,v,g]),i(H.Body,{borderRadius:0,height:"viewHeight",width:"viewWidth",children:p(z,{className:[N("Wrap"),N("Use_"+t)].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:[i("canvas",{style:{width:"100%",height:"100%"},width:o,height:o,className:N("Canvas"),id:"Canvas-"+c}),i(T.Supplement,{position:"absolute",bottom:1,left:1,fontColor:"white",children:p(x.Left,{gap:"1/2",flexWrap:!0,children:[p(T,{children:["[",a.type,"]"]}),i(T,{children:a.name}),p(T,{children:[_,"px x ",W,"px"]}),p(T,{children:["[",a.size.rank(),"B]"]})]})})]}),p(x.Separate,{borderTop:!0,flexSizing:"none",backgroundColor:"layer.1",padding:1,verticalAlign:"unset",UnderBreakPointStyles:{flexType:"col"},children:[i(ne.SettingRegion,{DefaultOptions:m,val_scale:l,set_scale:d,val_tone:v,set_tone:I,val_grayScale:w,set_grayScale:R,val_rotate:g,set_rotate:f}),p(x.Right,{flexSizing:"none",children:[i(k.Border,{isRounded:!0,onClick:()=>{r()},children:"\u9589\u3058\u308B"}),i(k,{isRounded:!0,boxShadow:"3.remark",onClick:()=>V(void 0,null,function*(){var E;let y=(E=q.get(c))==null?void 0:E.Instance;if(!y)return;J.fn.mini.active("CropperExportation");let S=yield y.export();setTimeout(()=>{J.fn.mini.stop("CropperExportation"),e(S)},3e3)}),children:p(x.Center,{gap:"1/2",children:[i(J.White.R,{loaderID:"CropperExportation"}),"\u6C7A\u5B9A"]})})]})]})]})})},SettingRegion:u=>{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 p(x.Left,{verticalAlign:"unset",flexWrap:!0,children:[p(z,{gap:"1/3",children:[i(T.Supplement,{children:"Rotate"}),p(x.Left,{flexChilds:"even",gap:"1/6",children:[i(k.Border.S,{isRounded:!0,borderTopRightRadius:0,borderBottomRightRadius:0,onClick:()=>{let e=u.val_rotate-90;e<0&&(e+=360),u.set_rotate(e)},children:p(x.Center,{gap:"1/4",children:["90\xB0",i(X,{icon:me})]})}),i(k.Border.S,{isRounded:!0,borderTopLeftRadius:0,borderBottomLeftRadius:0,onClick:()=>{u.set_rotate((u.val_rotate+90)%360)},children:p(x.Center,{gap:"1/4",children:[i(X,{icon:pe}),"90\xB0"]})})]})]}),p(z,{gap:"1/3",freeCSS:{minWidth:12*6},children:[i(T.Supplement,{children:"Zoom"}),p(k.Border.S,{flexCenter:!0,isRounded:!0,flexSizing:0,onClick:e=>{let r="CropperZoomEdit";O.open({tipsID:r,gravityPoint:3,event:e,closeAtParentBlur:!1,freeCSS:{minWidth:12*26},content:i(H.Body,{children:p(z,{padding:1.5,children:[p(x.Separate,{children:[i(T.Paragraph,{children:p(x.Center,{gap:"1/2",children:[i(X.Search,{fontColor:"5.translucent"}),"Zoom"]})}),i(k.Sub,{color:"cloud",ssSphere:2.5,onClick:()=>{O.close(r)},children:i(X.X,{})})]}),i(A,{borderBottom:!0,opacity:"low"}),i(ee.Slider,{override:"force",value:u.val_scale-100,min:u.DefaultOptions.scale.min-100,max:u.DefaultOptions.scale.max-100,step:25,onUpdateValidValue:(t,n)=>{C.interval.once(()=>{u.set_scale(t+100)},250,"Cropper.UpdateScale")},legends:{enable:!0,custom:t=>"x"+Math.round(100+t)/100}})]})})})},children:[u.val_scale.rate(1,0),"%"]})]}),p(z,{gap:"1/3",freeCSS:{minWidth:12*6},children:[i(T.Supplement,{children:"GrayScale"}),p(k.Border.S,{flexCenter:!0,isRounded:!0,flexSizing:0,onClick:e=>{let r="CropperGrayScaleEdit";O.open({tipsID:r,gravityPoint:3,event:e,closeAtParentBlur:!1,freeCSS:{minWidth:12*26},content:i(H.Body,{children:p(z,{padding:1.5,children:[p(x.Separate,{children:[i(T.Paragraph,{children:p(x.Center,{gap:"1/2",children:[i(X,{icon:se,fontColor:"5.translucent"}),"Gray Scale"]})}),i(k.Sub,{color:"cloud",ssSphere:2.5,onClick:()=>{O.close(r)},children:i(X.X,{})})]}),i(A,{borderBottom:!0,opacity:"low"}),i(ee.Slider,{value:u.val_grayScale,min:0,max:100,step:10,onUpdateValidValue:t=>{C.interval.once(()=>{u.set_grayScale(t)},250,"Cropper.GrayScale")},legends:{enable:!0,custom:t=>t+"%"}})]})})})},children:[u.val_grayScale.rate(1,0),"%"]})]}),p(z,{gap:"1/3",freeCSS:{minWidth:12*6},children:[i(T.Supplement,{children:"Tone"}),i(k.Border.S,{flexCenter:!0,isRounded:!0,flexSizing:0,onClick:e=>{let r="CropperToneEdit";O.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:p(x.Left,{gap:"1/3",children:[i(A,{ssSphere:1,className:[N("ToneBall"),N("ToneBall_"+n)].join(" ")}),i(A,{textAlign:"left",flexSizing:0,children:s(n)})]})});return i(H.Body,{children:p(z,{padding:1.5,children:[p(x.Separate,{children:[i(T.Paragraph,{children:p(x.Center,{gap:"1/2",children:[i(X,{icon:ce,fontColor:"5.translucent"}),"Tone"]})}),i(k.Sub,{color:"cloud",ssSphere:2.5,onClick:()=>{O.close(r)},children:i(X.X,{})})]}),i(A,{borderBottom:!0,opacity:"low"}),i(ee.Radio.Normal,{value:u.val_tone,gap:"1/2",cellStyles:{fontColor:"3.blur"},options:[{value:0,label:i(A,{flexSizing:0,textAlign:"center",children:"\u306A\u3057"})},...t],onUpdateValidValue:n=>{u.set_tone(n)}})]})})}})},children:p(x.Center,{gap:"1/2",children:[i(A,{boxShadow:"2.remark",ssSphere:1,className:[N("ToneBall"),N("ToneBall_"+u.val_tone)].join(" ")}),s(u.val_tone)]})})]})]})}},ae={openDialogNEdit:u=>{ee.Filer.fn.openDialog({accept:"image",multiple:!1,onChange:a=>{ae.openEditor(Z({imageFile:a[0]},u))}})},openEditor:u=>V(void 0,null,function*(){let a="CropperImage";H.open("middleCenter",{sheetID:a,size:"MAX",padding:0,margin:0,freeCSS:{maxWidth:"100%"},content:i(ne.Core,{val_file:u.imageFile,options:u,finishedCallback:s=>{H.close(a),u.onProcessFinished(s)},abortCallback:()=>{H.close(a)}}),closeAtEscapeKeyDown:!1})})};export{ae as Cropper,ae as default};
|
|
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};
|
package/dist/fn/Input/Filer.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as r,c,d as
|
|
1
|
+
import{b as r,c,d as ee,e as j}from"../../chunk-C5N2D3ZX.js";import{Fragment as ie,jsx as l,jsxs as d}from"react/jsx-runtime";import{useState as H,useEffect as te}from"react";import q,{UUID as I,useStore as ae}from"jmini";import{$$fromRoot as D,ExtractStyles as pe}from"../../@utils";import{Box as f,FAI as R,Flex as L,Column as le}from"../../atoms";import{Row as ue}from"../../mols";import{Button as W}from"../Button";import K from"../Snackbar";import{OptionalInputWrapper as de,BoxWrapper as me,CoreEffects as ne,DefaultBoxishStyles as ce}from"./core";import fe from"./TextField";import{InputFilerClasses as g}from"../../@styles/componentClasses";import{faCloudArrowUp as ge}from"@fortawesome/free-solid-svg-icons/faCloudArrowUp";function ye(e){let{value:t,states:o}=e,{required:m}=o,a=[];return m&&!t.length&&a.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"}),{ok:!a.filter(({type:p})=>p=="invalid").length,notice:a}}const oe={List:e=>{let{rootStates:t,val_status:o,set_status:m}=e;if(t.useSystemOnly)return null;let a=t.limit-(o.dataValue||[]).length,p=(o.dataValue||[]).map((n,u)=>l(oe.ListCell,c(r({},e),{index:u,val_file:n}),n.name));return a>0&&p.push(l(f,c(r({htmlTag:"label"},t.cellStyles),{className:[t.cellClassName,g("AddButton")].join(" "),"data-component-id":o.componentId,htmlFor:t.id,tabIndex:t.tabIndex,onKeyDown:n=>{let{key:u}=n;t.tabIndex!=-1&&[" ","Enter"].includes(u)&&D("#"+t.id).click()},children:d(ue.Center,{padding:["1/3",0],children:[l(f,{isRounded:!0,className:g("AddIcon"),children:l(R,{icon:ge,className:g("Icon"),fontColor:"theme",fontSize:"4.thirdTitle",backgroundColor:"theme.opa.low",ssSphere:3,padding:"1/2"})}),d(f,{children:[d(f,{fontColor:"theme",fontSize:"2.normal",isSemiBoldFont:!0,children:["\u30D5\u30A1\u30A4\u30EB\u3092\u9078\u629E(",a,")"]}),l(f,{fontColor:"4.thin",fontSize:"0.xs",isSemiBoldFont:!0,children:"\u30D5\u30A1\u30A4\u30EB\u3092\u30C9\u30ED\u30C3\u30D7"})]})]})}),"AddButton")),l(le,c(r({flexSizing:"auto"},pe(t)),{className:t.className,children:p}))},ListCell:e=>{let{index:t,rootStates:o,val_file:m,val_status:a,set_status:p}=e,{name:n,size:u,type:s}=m,[C,T]=H(!1),B=I(),X=u.rank(),[Z,M]=n.replace(/\s/,"").replace(/(.*)\.(.*)$/,"$1 $2").split(" "),i="\u30D5\u30A1\u30A4\u30EB";return s.match(/image/)?i=s.replace(/image\//,""):s.match(/pdf/)?i="PDF":s.match(/csv/)?i="CSV":s.match(/spreadsheet/)?i="SpreadSheet":s.match(/presentation/)?i="PowerPoint":s.match(/word/)?i="Word":s.match(/zip/)?i="Zip":s.match(/powerpoint/)?i="PowerPoint":s.match(/html/)?i="HTML":s.match(/js/)?i="JavaScript":s.match(/css/)?i="CSS":s.match(/text\/plain/)&&(i="\u30C6\u30AD\u30B9\u30C8"),te(()=>{C&&setTimeout(()=>{D("#"+B).focus()},100)},[C]),d(L,c(r({verticalAlign:"center",flexWrap:!1,gap:1,className:o.cellClassName},o.cellStyles),{children:[l(R.File,{fontSize:"4.thirdTitle",fontColor:"4.thin"}),d(f,{flexSizing:0,children:[l(f,{children:l(L,{verticalAlign:"center",gap:"2/3",flexWrap:!1,className:g("FileName"),children:C?l(ie,{children:d(le,{flexSizing:0,gap:"1/2",children:[d(L,{gap:"2/3",verticalAlign:"center",children:[l(fe,{tone:"border",wrapStyles:{flexSizing:"auto"},restrict:"fileName",name:"name",required:!0,id:B,form:"form-"+B,enableFormSubmit:!0,value:Z,onKeyDown:h=>{let{key:N}=h;N=="Escape"&&T(!1)}}),d(f,{children:[". ",M]})]}),d(L,{gap:"2/3",horizontalAlign:"right",flexWrap:!1,children:[l(W.Sub,{padding:["2/3",1],onClick:()=>{T(!1)},children:"\u9589\u3058\u308B"}),l(W,{padding:["2/3",1],submitOption:{formName:"form-"+B,callback:h=>j(void 0,null,function*(){let{name:N}=h,v=[...a.dataValue],w=v[t],G=w.id;if(!w)return;let _=yield w.convert();_=String(_);let P=yield _.toBlob(m.type);if(!P)return;let $=new File([P],N+"."+M,{type:w.type});$.id=G,v[t]=$,p(O=>c(r({},O),{dataValue:v,eventType:"update",eventID:I()})),T(!1)})},children:"\u6C7A\u5B9A"})]})]})}):d(ie,{children:[n,!!o.isNameEditable&&l(W.Clear,{ssSphere:2.5,flexSizing:"none",fontColor:"4.thin",padding:"1/3",ssEffectsOnActive:"expand",color:"cloud",onClick:()=>{T(!0)},children:l(R.Pen,{})})]})})}),!C&&d(f,{fontSize:"1.mini",fontColor:"4.thin",flexSizing:0,children:[i,"\u30D5\u30A1\u30A4\u30EB / ",X,"B"]})]}),l(W.Sub,{color:"cloud",fontColor:"4.thin",ssSphere:3,onClick:()=>{let h=[...a.dataValue];h[t]&&(h.splice(t,1),p(v=>c(r({},v),{dataValue:h,eventType:"update",eventID:I()})))},children:l(R.X,{})})]}))}},Se=e=>{let Y=e,{tone:t,required:o,form:m,isNameEditable:a,useSystemOnly:p,accept:n="*",limit:u=1,checkValidationAtFirst:s,onChange:C,onValidate:T,onValidateDelay:B,onUpdateValue:X,onUpdateValidValue:Z,onUserAction:M,value:i=[],className:h,cellStyles:N,cellClassName:v,componentId:w,status_id:G,enableFormSubmit:_,freeCSS:P,wrapStyles:$}=Y,O=ee(Y,["tone","required","form","isNameEditable","useSystemOnly","accept","limit","checkValidationAtFirst","onChange","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value","className","cellStyles","cellClassName","componentId","status_id","enableFormSubmit","freeCSS","wrapStyles"]),[b,A]=H(ne.DefaultStatus(e.componentId||"",i)),[Q,se]=H({ok:!1,notice:[]}),re={rootStates:e,val_status:b,set_status:A};te(()=>{ae.set({["AddFiles-"+b.componentId]:F=>{A(V=>{let x=V.dataValue,k=[];for(var y=0;y<(F==null?void 0:F.length);y++){let S=F[y],{type:E,name:z}=S;if(y+1+x.length>u){K.add({componentId:z,secondsToClose:12e3,children:`\u30D5\u30A1\u30A4\u30EB\u9078\u629E\u4E0A\u9650\u3092\u8D85\u3048\u305F\u305F\u3081\u3001${z}}\u306F\u8FFD\u52A0\u3067\u304D\u307E\u305B\u3093\u3002`,backgroundColor:"nega"});continue}if(n&&n=="image"&&!E.match(/image/)){K.add({componentId:z,secondsToClose:12e3,children:`\u30D5\u30A1\u30A4\u30EB\u5F62\u5F0F\u304C\u7570\u306A\u308B\u305F\u3081\u3001${z} \u306F\u8FFD\u52A0\u3067\u304D\u307E\u305B\u3093\u3002`,backgroundColor:"nega"});continue}k.push(S)}return c(r({},V),{dataValue:[...x,...k],eventType:"update",eventID:I()})})}})},[]),ne.CommonEffects({type:"file",states:e,val_status:b,set_status:A,val_validate:Q,set_validate:se,SystemValidation:ye});let U="";return n&&(n=="image"?U="image/png,image/jpeg":U=n),d(me,{val_status:b,set_status:A,val_validate:Q,states:e,children:[l(f,c(r({htmlTag:"input",type:"file",className:g("Input"),"data-component-id":b.componentId,accept:U,multiple:u!=1,onChange:F=>j(void 0,null,function*(){C&&C(F);let V=F.target,x=V.files,k=[];for(var y=0;y<(x==null?void 0:x.length);y++){let S=x[y],E=S.name;if(S.id=I(),y+1+b.dataValue.length>u){K.add({componentId:E,secondsToClose:12e3,children:`\u30D5\u30A1\u30A4\u30EB\u767B\u9332\u6570\u3092\u8D85\u3048\u305F\u305F\u3081\u3001${E}}\u306F\u8FFD\u52A0\u3067\u304D\u307E\u305B\u3093\u3067\u3057\u305F\u3002`,backgroundColor:"nega"});continue}k.push(S)}A(S=>c(r({},S),{dataValue:[...S.dataValue,...k],eventType:"update",eventID:I()})),V.value=""})},O),{opacity:"low",tabIndex:-1,value:""})),l(oe.List,r({},re))]})},J=e=>(e=c(r({limit:1,isNameEditable:!0,useSystemOnly:!1,tone:"border",value:[]},e),{override:"force",cellStyles:r(r({},ce({tone:e.tone||"border"})),e.cellStyles)}),l(de,{componentId:e.componentId,children:Se,states:e}));J.fn={openDialog:e=>{let{multiple:t,accept:o}=e,m=I();const a=document.createElement("input");a.type="file",a.multiple=!!t,a.value="",a.id=m,o&&(o=="image"?a.accept="image/png,image/jpeg,image/jpg,image/webp":a.accept=o),q("body").append(a),a.onchange=p=>{var u;let n=((u=p==null?void 0:p.target)==null?void 0:u.files)||[];n!=null&&n.length&&(e.onChange(n),q("#"+m).remove())},a.click()}},typeof window!="undefined"&&window.document&&q(document).addEvent({eventType:"dragover",callback:e=>{e.preventDefault(),D("."+g("AddButton")).addClass(g("Draggable"))},options:{passive:!1}}).addEvent({eventType:"drop",callback:e=>{e.preventDefault(),D("."+g("AddButton")).removeClass(g("Draggable"));let t=e.dataTransfer.files;if(t.length){let o=e.target;if(D(o).hasClass(g("AddButton"))){let{componentId:m}=o.dataset,a=ae.get("AddFiles-"+m);a&&a(t)}}},options:{passive:!1}});export{J as Filer,J as default};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "amotify",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.223",
|
|
4
4
|
"description": "UI Component for React,NextJS,esbuild",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"start": "run-p clean build:*",
|
|
@@ -90,7 +90,7 @@
|
|
|
90
90
|
"@fortawesome/free-solid-svg-icons": "^6.7.2",
|
|
91
91
|
"@fortawesome/react-fontawesome": "^0.2.2",
|
|
92
92
|
"dotenv": "^17.0.1",
|
|
93
|
-
"jmini": "^0.0.
|
|
93
|
+
"jmini": "^0.0.98",
|
|
94
94
|
"react": "^18.3.1"
|
|
95
95
|
},
|
|
96
96
|
"devDependencies": {
|