amotify 0.2.217 → 0.2.218
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.
|
@@ -98,15 +98,15 @@ let Page = () => {
|
|
|
98
98
|
let [ val_checked2,set_checked2 ] = useState( true )
|
|
99
99
|
|
|
100
100
|
useEffect( () => {
|
|
101
|
-
$$.interval.once( () => {
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
},1000,'test1' )
|
|
101
|
+
// $$.interval.once( () => {
|
|
102
|
+
// set_selected( !select2 )
|
|
103
|
+
// set_value( '1996/05/11' )
|
|
104
|
+
|
|
105
|
+
// $$.interval.once( () => {
|
|
106
|
+
// set_selected( !!select3 )
|
|
107
|
+
// set_value( '2025/05/11' )
|
|
108
|
+
// },1000,'test2' )
|
|
109
|
+
// },1000,'test1' )
|
|
110
110
|
},[] )
|
|
111
111
|
|
|
112
112
|
return <Plate
|
|
@@ -122,7 +122,24 @@ let Page = () => {
|
|
|
122
122
|
<Literal>
|
|
123
123
|
val_value { val_value || "null" }
|
|
124
124
|
</Literal>
|
|
125
|
-
<
|
|
125
|
+
<Button.Prime
|
|
126
|
+
onClick={ () => {
|
|
127
|
+
Cropper.openDialogNEdit( {
|
|
128
|
+
use: '1:1',
|
|
129
|
+
develops: [
|
|
130
|
+
{ size: 'R',maxSize: 3 * 1024 * 1024 } // 3MB
|
|
131
|
+
],
|
|
132
|
+
onProcessFinished: async ( files ) => {
|
|
133
|
+
if ( !files || !files[ 0 ] ) return
|
|
134
|
+
let mediaId = UUID()
|
|
135
|
+
console.log( files[ 0 ] )
|
|
136
|
+
}
|
|
137
|
+
} )
|
|
138
|
+
} }
|
|
139
|
+
>
|
|
140
|
+
Submit
|
|
141
|
+
</Button.Prime>
|
|
142
|
+
{/* <Input.TextField.Email
|
|
126
143
|
form='form_test'
|
|
127
144
|
name='testInput'
|
|
128
145
|
override='force'
|
|
@@ -140,7 +157,7 @@ let Page = () => {
|
|
|
140
157
|
)
|
|
141
158
|
set_value( value )
|
|
142
159
|
} }
|
|
143
|
-
/>
|
|
160
|
+
/> */}
|
|
144
161
|
|
|
145
162
|
{/* <Input.TextField
|
|
146
163
|
override='force'
|
package/dist/fn/Cropper.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as H,c as K,e as F}from"../chunk-C5N2D3ZX.js";import{jsx as i,jsxs as f}from"react/jsx-runtime";import y,{UUID as J,useStore as z}from"jmini";import{$$fromRoot as Z}from"../@utils";import{useState as N,useEffect as O}from"react";import{Box as B,FAI as L,Column as M}from"../atoms";import{Row as R,Literal as A}from"../mols";import{Button as P}from"./Button";import X 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 U}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,m]=y.is.array(a.use)&&a.use||a.use.split(":").map(o=>Number(o)),g=c/m;this.usage={w:c,h:m,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,m=(a.height-r)/2,g=e/r;this.pst={frame:{x:c,y:m,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,m=t.y-r,g=this.scale.current*this.Picture.revisedAspect/100,o=c/g*n.x,l=m/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}=y.getCursor(e.touches[0]),{x:n,y:c}=y.getCursor(e.touches[1]),m=n-r,g=c-t;if(s=="start")this.pinchEffectInfo.origin={x:m,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(m,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 F(this,null,function*(){let{grayScale:a,tone:s,rotate:e}=this.Picture;const r=document.createElement("canvas");let t=r.getContext("2d"),n=yield y.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 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],w=C[0]/255,x=C[1]/255,p=C[2]/255;for(let h=0;h<m;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 S=0;S<3;S++){let _=o[l+S];o[l+S]=_+(E-_)*a}}o[l]*=w,o[l+1]*=x,o[l+2]*=p}}t.putImageData(g,0,0);let v=r.toDataURL("image/jpeg");{let C=yield y.ImageLoader(v),{width:w,height:x}=C,p=w/x;this.Picture=K(H({},this.Picture),{elm:C,aspect:p,revisedAspect:this.pst.frame.aspect>p?this.pst.frame.w/w:this.pst.frame.h/x})}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,g=this.Picture.revisedAspect*m,o=this.pst.centerX-n*g,l=this.pst.centerY-c*g,S=this.Picture.elm.width*g,v=this.Picture.elm.height*g;{let C=this.pst.frame.x+this.pst.frame.w-S,w=this.pst.frame.x,x=this.pst.frame.y+this.pst.frame.h-v,p=this.pst.frame.y,h=0;o<C&&(h=o-C),o>w&&(h=o-w);let u=0;l<x&&(u=l-x),l>p&&(u=l-p),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),w),l=Math.min(Math.max(l,x),p)}this.pst.outImage={x:o,y:l,w:S,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,S,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,S=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,S/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=y(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 F(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,g=(t.x-r.x+t.w)/n,o=(t.y-r.y)/c,l=(t.y-r.y+t.h)/c,S=Array.from({length:s.length}),v="image/jpeg";for(let C=0;C<s.length;C++){let{size:w,maxSize:x}=s[C];x=x||{S:1024*20,R:1024*100,L:1024*350}[w];let p={S:140,R:600,L:1200}[w],h=p;this.usage.aspect>1?h=p/this.usage.aspect:p=h*this.usage.aspect;let u=document.createElement("canvas");u.width=p,u.height=h;let E=u.getContext("2d");if(!E)return;E.clearRect(0,0,p,h),E.drawImage(this.Picture.elm,m,o,g-m,l-o,0,0,p,h);let _=u.toDataURL(v),b=yield _.toBlob(v);if(!b)return;if(b.size>=x){let k=x/b.size;if(_=u.toDataURL(v,k*.92),b=yield _.toBlob(v),!b)return}let W=new File([b],this.val_file.name,{type:v});S[C]=W}return S})}}const q={Core:d=>{let{val_file:a,options:s,finishedCallback:e,abortCallback:r}=d,{use:t,develops:n=[]}=s,[c]=N(J());const m={scale:{default:120,min:100,max:400},rotate:0,grayScale:0,tone:0};let[g,o]=N(m.scale.default),[l,S]=N(m.rotate),[v,C]=N(m.grayScale),[w,x]=N(m.tone);return O(()=>{let p="CropperResize";return y(window).addEvent({eventType:"resize",eventID:p,callback:()=>{y.interval.once(()=>{var k;let h=Z("#Canvas-"+c)[0];if(!h)return;let u=(k=z.get(c))==null?void 0:k.Instance;if(!u)return;let E=h.position(),_=E.width/E.height;h.width=2400,h.height=2400/_;let{width:b,height:W}=h;u.pst.centerX=b/2,u.pst.centerY=W/2,u.frameSizing(),u.modifyImage()},250,"CropperResize")}}),()=>{y(window).removeEvent(p)}},[]),O(()=>{z.set({[c]:{}}),F(void 0,null,function*(){V.fn.corner.active(),yield y.pending(()=>{},400);let{target:p}=yield a.convert();if(!p)return;let h=p.result,u=Z("#Canvas-"+c)[0];if(!u)return;let E=u.position(),_=E.width/E.height;u.width=2400,u.height=2400/_;let b=new re({set_scale:o,val_file:a,develops:n,use:t,scale:m.scale,componentId:c,canvas:u,picture:{image:yield y.ImageLoader(h),grayScale:m.grayScale,tone:m.tone,rotate:m.rotate}});z.set({[c]:{Instance:b}});const W=function(I){if(I.preventDefault(),I.touches&&I.touches.length>1)b.pinchEffect({eventType:"start",event:I}),y(document).addEvent({eventType:"touchmove",eventID:"CropperEffectMove",options:{passive:!1},callback:D=>{D.preventDefault(),b.pinchEffect({eventType:"move",event:D})}}).addEvent({eventType:"touchend",eventID:"CropperEffectEnd",options:{passive:!1},callback:G});else{b.dragEffect(H({eventType:"start"},y.getCursor(I)));let{type:D}=I;y(document).addEvent({eventType:D=="touchstart"?"touchmove":"mousemove",eventID:"CropperEffectMove",options:{passive:!1},callback:T=>{k("move",T)}}).addEvent({eventType:D=="touchstart"?"touchend":"mouseup",eventID:"CropperEffectEnd",options:{passive:!1},callback:T=>{k("end",T),G(T)}})}},k=function(I,D){D.preventDefault(),b.dragEffect(H({eventType:I},y.getCursor(D)))},G=function(I){I.preventDefault(),y(document).removeEvent(["CropperEffectMove","CropperEffectEnd"])};y(u).removeEvent(["CropperMouseWheel","CropperTouchStart","CropperMouseDown"]).addEvent({eventID:"CropperMouseWheel",eventType:"wheel",callback:I=>{I.preventDefault();let D=Number(I.wheelDelta*.04),T=b.scale.current+D;T=Math.max(T,b.scale.min),T=Math.min(T,b.scale.max),o(T)},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 p=(h=z.get(c))==null?void 0:h.Instance;p&&p.updateScale(g)},[g]),O(()=>{var h;let p=(h=z.get(c))==null?void 0:h.Instance;p&&p.updateFilter({grayScale:v,tone:w,rotate:l})},[v,w,l]),i(X.Body,{borderRadius:0,height:"viewHeight",width:"viewWidth",children:f(M,{className:[U("Wrap"),U("Use_"+t)].join(" "),gap:0,height:1,position:"relative",overflow:"hidden",borderRadius:"inherit",children:[i(B,{flexSizing:0,overflow:"hidden",position:"relative",backgroundColor:"black",flexCenter:!0,freeCSS:{zIndex:1},children:i("canvas",{style:{width:"100%",height:"100%"},width:2400,height:2400,className:U("Canvas"),id:"Canvas-"+c})}),f(R.Separate,{borderTop:!0,flexSizing:"none",backgroundColor:"layer.1",padding:1,verticalAlign:"unset",UnderBreakPointStyles:{flexType:"col"},children:[i(q.SettingRegion,{DefaultOptions:m,val_scale:g,set_scale:o,val_tone:w,set_tone:x,val_grayScale:v,set_grayScale:C,val_rotate:l,set_rotate:S}),f(R.Right,{flexSizing:"none",children:[i(P.Border,{isRounded:!0,onClick:()=>{r()},children:"\u9589\u3058\u308B"}),i(P,{isRounded:!0,boxShadow:"3.remark",onClick:()=>F(void 0,null,function*(){var u;let p=(u=z.get(c))==null?void 0:u.Instance;if(!p)return;V.fn.mini.active("CropperExportation");let h=yield p.export();setTimeout(()=>{V.fn.mini.stop("CropperExportation"),e(h)},3e3)}),children:f(R.Center,{gap:"1/2",children:[i(V.White.R,{loaderID:"CropperExportation"}),"\u6C7A\u5B9A"]})})]})]})]})})},SettingRegion:d=>{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 f(R.Left,{verticalAlign:"unset",flexWrap:!0,children:[f(M,{gap:"1/3",children:[i(A.Supplement,{children:"Rotate"}),f(R.Left,{flexChilds:"even",gap:"1/6",children:[i(P.Border.S,{isRounded:!0,borderTopRightRadius:0,borderBottomRightRadius:0,onClick:()=>{let e=d.val_rotate-90;e<0&&(e+=360),d.set_rotate(e)},children:f(R.Center,{gap:"1/4",children:["90\xB0",i(L,{icon:te})]})}),i(P.Border.S,{isRounded:!0,borderTopLeftRadius:0,borderBottomLeftRadius:0,onClick:()=>{d.set_rotate((d.val_rotate+90)%360)},children:f(R.Center,{gap:"1/4",children:[i(L,{icon:ae}),"90\xB0"]})})]})]}),f(M,{gap:"1/3",freeCSS:{minWidth:12*6},children:[i(A.Supplement,{children:"Zoom"}),f(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(X.Body,{children:f(M,{padding:1.5,children:[f(R.Separate,{children:[i(A.Paragraph,{children:f(R.Center,{gap:"1/2",children:[i(L.Search,{fontColor:"5.translucent"}),"Zoom"]})}),i(P.Sub,{color:"cloud",ssSphere:2.5,onClick:()=>{Y.close(r)},children:i(L.X,{})})]}),i(B,{borderBottom:!0,opacity:"low"}),i($.Slider,{override:"force",value:d.val_scale-100,min:d.DefaultOptions.scale.min-100,max:d.DefaultOptions.scale.max-100,step:25,onUpdateValidValue:(t,n)=>{y.interval.once(()=>{d.set_scale(t+100)},250,"Cropper.UpdateScale")},legends:{enable:!0,custom:t=>"x"+Math.round(100+t)/100}})]})})})},children:[d.val_scale.rate(1,0),"%"]})]}),f(M,{gap:"1/3",freeCSS:{minWidth:12*6},children:[i(A.Supplement,{children:"GrayScale"}),f(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(X.Body,{children:f(M,{padding:1.5,children:[f(R.Separate,{children:[i(A.Paragraph,{children:f(R.Center,{gap:"1/2",children:[i(L,{icon:Q,fontColor:"5.translucent"}),"Gray Scale"]})}),i(P.Sub,{color:"cloud",ssSphere:2.5,onClick:()=>{Y.close(r)},children:i(L.X,{})})]}),i(B,{borderBottom:!0,opacity:"low"}),i($.Slider,{value:d.val_grayScale,min:0,max:100,step:10,onUpdateValidValue:t=>{y.interval.once(()=>{d.set_grayScale(t)},250,"Cropper.GrayScale")},legends:{enable:!0,custom:t=>t+"%"}})]})})})},children:[d.val_grayScale.rate(1,0),"%"]})]}),f(M,{gap:"1/3",freeCSS:{minWidth:12*6},children:[i(A.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:f(R.Left,{gap:"1/3",children:[i(B,{ssSphere:1,className:[U("ToneBall"),U("ToneBall_"+n)].join(" ")}),i(B,{textAlign:"left",flexSizing:0,children:s(n)})]})});return i(X.Body,{children:f(M,{padding:1.5,children:[f(R.Separate,{children:[i(A.Paragraph,{children:f(R.Center,{gap:"1/2",children:[i(L,{icon:ee,fontColor:"5.translucent"}),"Tone"]})}),i(P.Sub,{color:"cloud",ssSphere:2.5,onClick:()=>{Y.close(r)},children:i(L.X,{})})]}),i(B,{borderBottom:!0,opacity:"low"}),i($.Radio.Normal,{value:d.val_tone,gap:"1/2",cellStyles:{fontColor:"3.blur"},options:[{value:0,label:i(B,{flexSizing:0,textAlign:"center",children:"\u306A\u3057"})},...t],onUpdateValidValue:n=>{d.set_tone(n)}})]})})}})},children:f(R.Center,{gap:"1/2",children:[i(B,{boxShadow:"2.remark",ssSphere:1,className:[U("ToneBall"),U("ToneBall_"+d.val_tone)].join(" ")}),s(d.val_tone)]})})]})]})}},j={openDialogNEdit:d=>F(void 0,null,function*(){let a=yield $.Filer.fn.openDialog({accept:"image",multiple:!1});j.openEditor(H({imageFile:a[0]},d))}),openEditor:d=>F(void 0,null,function*(){let a="CropperImage";X.open("middleCenter",{sheetID:a,size:"MAX",padding:0,margin:0,freeCSS:{maxWidth:"100%"},content:i(q.Core,{val_file:d.imageFile,options:d,finishedCallback:s=>{X.close(a),d.onProcessFinished(s)},abortCallback:()=>{X.close(a)}}),closeAtEscapeKeyDown:!1})})};export{j as Cropper,j as default};
|
|
1
|
+
import{b as H,c as K,e as W}from"../chunk-C5N2D3ZX.js";import{jsx as i,jsxs as f}from"react/jsx-runtime";import y,{UUID as J,useStore as z}from"jmini";import{$$fromRoot as Z}from"../@utils";import{useState as N,useEffect as O}from"react";import{Box as B,FAI as L,Column as M}from"../atoms";import{Row as R,Literal as F}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]=y.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}=y.getCursor(e.touches[0]),{x:n,y:c}=y.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 W(this,null,function*(){let{grayScale:a,tone:s,rotate:e}=this.Picture;const r=document.createElement("canvas");let t=r.getContext("2d"),n=yield y.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],w=C[0]/255,x=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 S=0;S<3;S++){let _=o[l+S];o[l+S]=_+(E-_)*a}}o[l]*=w,o[l+1]*=x,o[l+2]*=m}}t.putImageData(g,0,0);let v=r.toDataURL("image/jpeg");{let C=yield y.ImageLoader(v),{width:w,height:x}=C,m=w/x;this.Picture=K(H({},this.Picture),{elm:C,aspect:m,revisedAspect:this.pst.frame.aspect>m?this.pst.frame.w/w:this.pst.frame.h/x})}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,S=this.Picture.elm.width*g,v=this.Picture.elm.height*g;{let C=this.pst.frame.x+this.pst.frame.w-S,w=this.pst.frame.x,x=this.pst.frame.y+this.pst.frame.h-v,m=this.pst.frame.y,h=0;o<C&&(h=o-C),o>w&&(h=o-w);let u=0;l<x&&(u=l-x),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),w),l=Math.min(Math.max(l,x),m)}this.pst.outImage={x:o,y:l,w:S,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,S,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,S=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,S/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=y(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 W(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,S=Array.from({length:s.length}),v="image/jpeg";for(let C=0;C<s.length;C++){let{size:w,maxSize:x}=s[C];x=x||{S:1024*20,R:1024*100,L:1024*350}[w];let m={S:140,R:600,L:1200}[w],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 _=u.toDataURL(v),b=yield _.toBlob(v);if(!b)return;if(b.size>=x){let k=x/b.size;if(_=u.toDataURL(v,k*.92),b=yield _.toBlob(v),!b)return}let U=new File([b],this.val_file.name,{type:v});S[C]=U}return S})}}const q={Core:d=>{let{val_file:a,options:s,finishedCallback:e,abortCallback:r}=d,{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,S]=N(p.rotate),[v,C]=N(p.grayScale),[w,x]=N(p.tone);return O(()=>{let m="CropperResize";return y(window).addEvent({eventType:"resize",eventID:m,callback:()=>{y.interval.once(()=>{var k;let h=Z("#Canvas-"+c)[0];if(!h)return;let u=(k=z.get(c))==null?void 0:k.Instance;if(!u)return;let E=h.position(),_=E.width/E.height;h.width=2400,h.height=2400/_;let{width:b,height:U}=h;u.pst.centerX=b/2,u.pst.centerY=U/2,u.frameSizing(),u.modifyImage()},250,"CropperResize")}}),()=>{y(window).removeEvent(m)}},[]),O(()=>{z.set({[c]:{}}),W(void 0,null,function*(){V.fn.corner.active(),yield y.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(),_=E.width/E.height;u.width=2400,u.height=2400/_;let b=new re({set_scale:o,val_file:a,develops:n,use:t,scale:p.scale,componentId:c,canvas:u,picture:{image:yield y.ImageLoader(h),grayScale:p.grayScale,tone:p.tone,rotate:p.rotate}});z.set({[c]:{Instance:b}});const U=function(I){if(I.preventDefault(),I.touches&&I.touches.length>1)b.pinchEffect({eventType:"start",event:I}),y(document).addEvent({eventType:"touchmove",eventID:"CropperEffectMove",options:{passive:!1},callback:D=>{D.preventDefault(),b.pinchEffect({eventType:"move",event:D})}}).addEvent({eventType:"touchend",eventID:"CropperEffectEnd",options:{passive:!1},callback:G});else{b.dragEffect(H({eventType:"start"},y.getCursor(I)));let{type:D}=I;y(document).addEvent({eventType:D=="touchstart"?"touchmove":"mousemove",eventID:"CropperEffectMove",options:{passive:!1},callback:T=>{k("move",T)}}).addEvent({eventType:D=="touchstart"?"touchend":"mouseup",eventID:"CropperEffectEnd",options:{passive:!1},callback:T=>{k("end",T),G(T)}})}},k=function(I,D){D.preventDefault(),b.dragEffect(H({eventType:I},y.getCursor(D)))},G=function(I){I.preventDefault(),y(document).removeEvent(["CropperEffectMove","CropperEffectEnd"])};y(u).removeEvent(["CropperMouseWheel","CropperTouchStart","CropperMouseDown"]).addEvent({eventID:"CropperMouseWheel",eventType:"wheel",callback:I=>{I.preventDefault();let D=Number(I.wheelDelta*.04),T=b.scale.current+D;T=Math.max(T,b.scale.min),T=Math.min(T,b.scale.max),o(T)},options:{passive:!1}}).addEvent({eventType:"touchstart",eventID:"CropperTouchStart",callback:U,options:{passive:!1}}).addEvent({eventType:"mousedown",eventID:"CropperMouseDown",callback:U,options:{passive:!1}}),setTimeout(()=>{V.fn.corner.stop()},1e3)})},[a.id]),O(()=>{var h;let m=(h=z.get(c))==null?void 0:h.Instance;m&&m.updateScale(g)},[g]),O(()=>{var h;let m=(h=z.get(c))==null?void 0:h.Instance;m&&m.updateFilter({grayScale:v,tone:w,rotate:l})},[v,w,l]),i(A.Body,{borderRadius:0,height:"viewHeight",width:"viewWidth",children:f(M,{className:[X("Wrap"),X("Use_"+t)].join(" "),gap:0,height:1,position:"relative",overflow:"hidden",borderRadius:"inherit",children:[i(B,{flexSizing:0,overflow:"hidden",position:"relative",backgroundColor:"black",flexCenter:!0,freeCSS:{zIndex:1},children:i("canvas",{style:{width:"100%",height:"100%"},width:2400,height:2400,className:X("Canvas"),id:"Canvas-"+c})}),f(R.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:w,set_tone:x,val_grayScale:v,set_grayScale:C,val_rotate:l,set_rotate:S}),f(R.Right,{flexSizing:"none",children:[i(P.Border,{isRounded:!0,onClick:()=>{r()},children:"\u9589\u3058\u308B"}),i(P,{isRounded:!0,boxShadow:"3.remark",onClick:()=>W(void 0,null,function*(){var u;let m=(u=z.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:f(R.Center,{gap:"1/2",children:[i(V.White.R,{loaderID:"CropperExportation"}),"\u6C7A\u5B9A"]})})]})]})]})})},SettingRegion:d=>{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 f(R.Left,{verticalAlign:"unset",flexWrap:!0,children:[f(M,{gap:"1/3",children:[i(F.Supplement,{children:"Rotate"}),f(R.Left,{flexChilds:"even",gap:"1/6",children:[i(P.Border.S,{isRounded:!0,borderTopRightRadius:0,borderBottomRightRadius:0,onClick:()=>{let e=d.val_rotate-90;e<0&&(e+=360),d.set_rotate(e)},children:f(R.Center,{gap:"1/4",children:["90\xB0",i(L,{icon:te})]})}),i(P.Border.S,{isRounded:!0,borderTopLeftRadius:0,borderBottomLeftRadius:0,onClick:()=>{d.set_rotate((d.val_rotate+90)%360)},children:f(R.Center,{gap:"1/4",children:[i(L,{icon:ae}),"90\xB0"]})})]})]}),f(M,{gap:"1/3",freeCSS:{minWidth:12*6},children:[i(F.Supplement,{children:"Zoom"}),f(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:f(M,{padding:1.5,children:[f(R.Separate,{children:[i(F.Paragraph,{children:f(R.Center,{gap:"1/2",children:[i(L.Search,{fontColor:"5.translucent"}),"Zoom"]})}),i(P.Sub,{color:"cloud",ssSphere:2.5,onClick:()=>{Y.close(r)},children:i(L.X,{})})]}),i(B,{borderBottom:!0,opacity:"low"}),i($.Slider,{override:"force",value:d.val_scale-100,min:d.DefaultOptions.scale.min-100,max:d.DefaultOptions.scale.max-100,step:25,onUpdateValidValue:(t,n)=>{y.interval.once(()=>{d.set_scale(t+100)},250,"Cropper.UpdateScale")},legends:{enable:!0,custom:t=>"x"+Math.round(100+t)/100}})]})})})},children:[d.val_scale.rate(1,0),"%"]})]}),f(M,{gap:"1/3",freeCSS:{minWidth:12*6},children:[i(F.Supplement,{children:"GrayScale"}),f(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:f(M,{padding:1.5,children:[f(R.Separate,{children:[i(F.Paragraph,{children:f(R.Center,{gap:"1/2",children:[i(L,{icon:Q,fontColor:"5.translucent"}),"Gray Scale"]})}),i(P.Sub,{color:"cloud",ssSphere:2.5,onClick:()=>{Y.close(r)},children:i(L.X,{})})]}),i(B,{borderBottom:!0,opacity:"low"}),i($.Slider,{value:d.val_grayScale,min:0,max:100,step:10,onUpdateValidValue:t=>{y.interval.once(()=>{d.set_grayScale(t)},250,"Cropper.GrayScale")},legends:{enable:!0,custom:t=>t+"%"}})]})})})},children:[d.val_grayScale.rate(1,0),"%"]})]}),f(M,{gap:"1/3",freeCSS:{minWidth:12*6},children:[i(F.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:f(R.Left,{gap:"1/3",children:[i(B,{ssSphere:1,className:[X("ToneBall"),X("ToneBall_"+n)].join(" ")}),i(B,{textAlign:"left",flexSizing:0,children:s(n)})]})});return i(A.Body,{children:f(M,{padding:1.5,children:[f(R.Separate,{children:[i(F.Paragraph,{children:f(R.Center,{gap:"1/2",children:[i(L,{icon:ee,fontColor:"5.translucent"}),"Tone"]})}),i(P.Sub,{color:"cloud",ssSphere:2.5,onClick:()=>{Y.close(r)},children:i(L.X,{})})]}),i(B,{borderBottom:!0,opacity:"low"}),i($.Radio.Normal,{value:d.val_tone,gap:"1/2",cellStyles:{fontColor:"3.blur"},options:[{value:0,label:i(B,{flexSizing:0,textAlign:"center",children:"\u306A\u3057"})},...t],onUpdateValidValue:n=>{d.set_tone(n)}})]})})}})},children:f(R.Center,{gap:"1/2",children:[i(B,{boxShadow:"2.remark",ssSphere:1,className:[X("ToneBall"),X("ToneBall_"+d.val_tone)].join(" ")}),s(d.val_tone)]})})]})]})}},j={openDialogNEdit:d=>{$.Filer.fn.openDialog({accept:"image",multiple:!1,onChange:a=>{j.openEditor(H({imageFile:a[0]},d))}})},openEditor:d=>W(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:d.imageFile,options:d,finishedCallback:s=>{A.close(a),d.onProcessFinished(s)},abortCallback:()=>{A.close(a)}}),closeAtEscapeKeyDown:!1})})};export{j as Cropper,j as default};
|
package/dist/fn/Input/Filer.d.ts
CHANGED
package/dist/fn/Input/Filer.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as
|
|
1
|
+
import{b as r,c,d as Y,e as U}from"../../chunk-C5N2D3ZX.js";import{Fragment as oe,jsx as l,jsxs as d}from"react/jsx-runtime";import{useState as j,useEffect as ee}from"react";import H,{UUID as v,useStore as te}from"jmini";import{$$fromRoot as D,ExtractStyles as pe}from"../../@utils";import{Box as f,FAI as R,Flex as L,Column as ae}from"../../atoms";import{Row as ue}from"../../mols";import{Button as W}from"../Button";import q from"../Snackbar";import{OptionalInputWrapper as de,BoxWrapper as me,CoreEffects as le,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 ne={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(ne.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(ae,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,[F,T]=j(!1),B=v(),J=u.rank(),[X,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"),ee(()=>{F&&setTimeout(()=>{D("#"+B).focus()},100)},[F]),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:F?l(oe,{children:d(ae,{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:X,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=>U(void 0,null,function*(){let{name:N}=h,b=[...a.dataValue],w=b[t],Z=w.id;if(!w)return;let{target:P}=yield w.convert();if(!P)return;let $=yield String(P.result).toBlob(m.type);if(!$)return;let _=new File([$],N+"."+M,{type:w.type});_.id=Z,b[t]=_,p(C=>c(r({},C),{dataValue:b,eventType:"update",eventID:v()})),T(!1)})},children:"\u6C7A\u5B9A"})]})]})}):d(oe,{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,{})})]})})}),!F&&d(f,{fontSize:"1.mini",fontColor:"4.thin",flexSizing:0,children:[i,"\u30D5\u30A1\u30A4\u30EB / ",J,"B"]})]}),l(W.Sub,{color:"cloud",fontColor:"4.thin",ssSphere:3,onClick:()=>{let h=[...a.dataValue];h[t]&&(h.splice(t,1),p(b=>c(r({},b),{dataValue:h,eventType:"update",eventID:v()})))},children:l(R.X,{})})]}))}},Se=e=>{let Q=e,{tone:t,required:o,form:m,isNameEditable:a,useSystemOnly:p,accept:n="*",limit:u=1,checkValidationAtFirst:s,onChange:F,onValidate:T,onValidateDelay:B,onUpdateValue:J,onUpdateValidValue:X,onUserAction:M,value:i=[],className:h,cellStyles:N,cellClassName:b,componentId:w,status_id:Z,enableFormSubmit:P,freeCSS:ie,wrapStyles:$}=Q,_=Y(Q,["tone","required","form","isNameEditable","useSystemOnly","accept","limit","checkValidationAtFirst","onChange","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value","className","cellStyles","cellClassName","componentId","status_id","enableFormSubmit","freeCSS","wrapStyles"]),[C,A]=j(le.DefaultStatus(e.componentId||"",i)),[G,se]=j({ok:!1,notice:[]}),re={rootStates:e,val_status:C,set_status:A};ee(()=>{te.set({["AddFiles-"+C.componentId]:x=>{A(V=>{let I=V.dataValue,k=[];for(var y=0;y<(x==null?void 0:x.length);y++){let S=x[y],{type:E,name:z}=S;if(y+1+I.length>u){q.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/)){q.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:[...I,...k],eventType:"update",eventID:v()})})}})},[]),le.CommonEffects({type:"file",states:e,val_status:C,set_status:A,val_validate:G,set_validate:se,SystemValidation:ye});let O="";return n&&(n=="image"?O="image/png,image/jpeg":O=n),d(me,{val_status:C,set_status:A,val_validate:G,states:e,children:[l(f,c(r({htmlTag:"input",type:"file",className:g("Input"),"data-component-id":C.componentId,accept:O,multiple:u!=1,onChange:x=>U(void 0,null,function*(){F&&F(x);let V=x.target,I=V.files,k=[];for(var y=0;y<(I==null?void 0:I.length);y++){let S=I[y],E=S.name;if(S.id=v(),y+1+C.dataValue.length>u){q.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:v()})),V.value=""})},_),{opacity:"low",tabIndex:-1,value:""})),l(ne.List,r({},re))]})},K=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}));K.fn={openDialog:e=>{let{multiple:t,accept:o}=e,m=v();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),H("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),H("#"+m).remove())},a.click()}},typeof window!="undefined"&&window.document&&H(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=te.get("AddFiles-"+m);a&&a(t)}}},options:{passive:!1}});export{K as Filer,K as default};
|