amotify 0.1.31 → 0.1.32

package/dist/fn/Cropper.js

@@ -1 +1,1009 @@
-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 k,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 z 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]=k(b.uuid.gen(32));const c={scale:{default:125,min:100,max:300},rotate:0,grayScale:0,tone:0};let[o,r]=k(c.scale.default),[n,d]=k(c.rotate),[g,C]=k(c.grayScale),[x,S]=k(c.tone);return H(()=>{M.set({key:s,value:{}}),P(void 0,null,function*(){z.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(()=>{z.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:"4.layer.darken",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;z.fn.mini.active("CropperExportation");let u=yield p.export();setTimeout(()=>{z.fn.mini.stop("CropperExportation"),l(u)},3e3)}),children:y(q.Center,{gap:"1/2",children:[h(z.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 {
+  __async,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-JJ3PEWPN.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  $$,
+  $$fromRoot,
+  useStore
+} from "../@utils/_";
+import {
+  useState,
+  useEffect
+} from "react";
+import Flex from "../atoms/Flex";
+import Box from "../atoms/Box";
+import FAI from "../atoms/FAI";
+import Column from "../mols/Column";
+import Row from "../mols/Row";
+import Button from "./Button";
+import Sheet from "./Sheet";
+import Loader from "./Loader/_";
+import Input from "./Input/_";
+import { faPalette } from "@fortawesome/free-solid-svg-icons/faPalette";
+import { faBarsStaggered } from "@fortawesome/free-solid-svg-icons/faBarsStaggered";
+import { faRotateLeft } from "@fortawesome/free-solid-svg-icons/faRotateLeft";
+import { faRotateRight } from "@fortawesome/free-solid-svg-icons/faRotateRight";
+import { CropperClasses } from "../@styles/componentClasses/_";
+class Picture {
+  constructor(params) {
+    this.set_scale = params.set_scale;
+    this.val_file = params.val_file;
+    this.develops = params.develops;
+    this.use = params.use;
+    this.componentID = params.componentID;
+    this.scale = {
+      current: params.scale.default,
+      default: params.scale.default,
+      min: params.scale.min,
+      max: params.scale.max
+    };
+    let Canvas = params.canvas;
+    let {
+      width: cvsW,
+      height: cvsH
+    } = Canvas;
+    let Picture2 = params.picture.image;
+    let {
+      width: pictW,
+      height: pictH
+    } = Picture2;
+    let pictAsp = pictW / pictH;
+    this.Canvas = {
+      elm: Canvas,
+      ctx: Canvas.getContext("2d")
+    };
+    let frameW = 0, frameH = 0;
+    if (this.use == "square") {
+      frameW = Canvas.width / 3 * 2;
+      frameH = Canvas.height / 3 * 2;
+    } else if (this.use == "wallpaper.horizontal") {
+      frameW = Canvas.width * (7 / 9);
+      frameH = frameW / 3;
+    } else if (this.use == "wallpaper.vertical") {
+      frameH = Canvas.height * (7 / 9);
+      frameW = frameH / 2;
+    }
+    let frameX = (Canvas.width - frameW) / 2;
+    let frameY = (Canvas.height - frameH) / 2;
+    let frameAsp = frameW / frameH;
+    this.Picture = {
+      elm: Picture2,
+      originDataUrl: Picture2.src,
+      aspect: pictAsp,
+      revisedAspect: frameAsp > pictAsp ? frameW / pictW : frameH / pictH,
+      rotate: params.picture.rotate,
+      grayScale: params.picture.grayScale,
+      tone: params.picture.tone
+    };
+    this.pst = {
+      frame: {
+        x: frameX,
+        y: frameY,
+        w: frameW,
+        h: frameH,
+        aspect: frameAsp
+      },
+      outImage: { x: 0, y: 0, w: 0, h: 0 },
+      imageX: pictW / 2,
+      imageY: pictH / 2,
+      centerX: cvsW / 2,
+      centerY: cvsH / 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(params) {
+    let {
+      eventType,
+      x,
+      y
+    } = params;
+    if (eventType == "start") {
+      let CanvasRect = this.Canvas.elm.position();
+      this.dragEffectInfo = {
+        origin: { x, y },
+        frameExpandRate: {
+          x: this.Canvas.elm.width / CanvasRect.width,
+          y: this.Canvas.elm.height / CanvasRect.height
+        }
+      };
+    } else {
+      let {
+        origin,
+        frameExpandRate
+      } = this.dragEffectInfo;
+      let dragX = origin.x - x;
+      let dragY = origin.y - y;
+      let scale = this.scale.current * this.Picture.revisedAspect / 100;
+      let shiftX = dragX / scale * frameExpandRate.x;
+      let shiftY = dragY / scale * frameExpandRate.y;
+      if (eventType == "move") {
+        this.drawImage(
+          this.pst.imageX + shiftX,
+          this.pst.imageY + shiftY
+        );
+      } else if (eventType == "end") {
+        this.drawImage(
+          this.pst.imageX += shiftX,
+          this.pst.imageY += shiftY
+        );
+      }
+    }
+  }
+  pinchEffect(params) {
+    let {
+      eventType,
+      event
+    } = params;
+    let { x: x1, y: y1 } = $$.getCursor(event.touches[0]);
+    let { x: x2, y: y2 } = $$.getCursor(event.touches[1]);
+    let marginX = x2 - x1;
+    let marginY = y2 - y1;
+    if (eventType == "start") {
+      this.pinchEffectInfo.origin = {
+        x: marginX,
+        y: marginY,
+        scale: this.scale.current
+      };
+    } else if (eventType == "move") {
+      let {
+        origin
+      } = this.pinchEffectInfo;
+      let originDist = Math.sqrt(Math.pow(origin.x, 2) + Math.pow(origin.y, 2));
+      let dist = Math.sqrt(Math.pow(marginX, 2) + Math.pow(marginY, 2));
+      let margin = dist / originDist;
+      let scale = Number(origin.scale * margin);
+      this.set_scale(scale);
+    }
+  }
+  updateScale(scale) {
+    let nextValue = scale;
+    nextValue = Math.max(nextValue, this.scale.min);
+    nextValue = Math.min(nextValue, this.scale.max);
+    this.scale.current = nextValue;
+    this.drawImage();
+  }
+  updateFilter(params) {
+    this.Picture.grayScale = params.grayScale;
+    this.Picture.tone = params.tone;
+    this.Picture.rotate = params.rotate;
+    this.modifyImage();
+  }
+  modifyImage() {
+    return __async(this, null, function* () {
+      let {
+        grayScale,
+        tone,
+        rotate
+      } = this.Picture;
+      const canvas = document.createElement("canvas");
+      let ctx = canvas.getContext("2d");
+      let image = new Image();
+      image.src = this.Picture.originDataUrl;
+      let ImageW = image.width;
+      let ImageH = image.height;
+      if (rotate == 90 || rotate == 270) {
+        ImageW = image.height;
+        ImageH = image.width;
+      }
+      canvas.width = ImageW;
+      canvas.height = ImageH;
+      if (grayScale)
+        ctx.filter = "grayscale(" + grayScale + "%)";
+      if (rotate) {
+        ctx.translate(ImageW / 2, ImageH / 2);
+        ctx.rotate(rotate * Math.PI / 180);
+        if ([90, 270].includes(rotate)) {
+          ctx.translate(-ImageH / 2, -ImageW / 2);
+        } else {
+          ctx.translate(-ImageW / 2, -ImageH / 2);
+        }
+      }
+      ctx.drawImage(image, 0, 0, image.width, image.height);
+      let newImage = ctx.getImageData(0, 0, canvas.width, canvas.height);
+      let imgData = newImage.data;
+      {
+        grayScale /= 100;
+        let ColorDir = [
+          [255, 255, 255],
+          // Original
+          [255, 200, 100],
+          // Warm
+          [170, 170, 255],
+          // Cold
+          [240, 200, 145],
+          // Sepia
+          [128, 255, 255],
+          // Cyan
+          [255, 128, 255],
+          // Magenta
+          [255, 255, 128],
+          // Yellow
+          [128, 158, 169],
+          // Origin1
+          [128, 112, 162],
+          // Origin2
+          [50, 192, 87],
+          // Origin3
+          [246, 100, 140]
+          // Origin4
+        ][tone];
+        let rCorrect = ColorDir[0] / 255;
+        let gCorrect = ColorDir[1] / 255;
+        let bCorrect = ColorDir[2] / 255;
+        for (let iH = 0; iH < ImageH; iH++) {
+          for (let iW = 0; iW < ImageW; iW++) {
+            var Index = (iH * ImageW + iW) * 4;
+            if (grayScale) {
+              let terminal = 0.3 * imgData[Index] + 0.59 * imgData[Index + 1] + 0.11 * imgData[Index + 2];
+              for (var k = 0; k < 3; k++) {
+                let current = imgData[Index + k];
+                imgData[Index + k] = current + (terminal - current) * grayScale;
+              }
+            }
+            imgData[Index] *= rCorrect;
+            imgData[Index + 1] *= gCorrect;
+            imgData[Index + 2] *= bCorrect;
+          }
+        }
+      }
+      ctx.putImageData(newImage, 0, 0);
+      let newDataUrl = canvas.toDataURL("image/jpeg");
+      {
+        let Picture2 = yield $$.ImageLoader(newDataUrl);
+        let {
+          width: pictW,
+          height: pictH
+        } = Picture2;
+        let pictAsp = pictW / pictH;
+        this.Picture = __spreadProps(__spreadValues({}, this.Picture), {
+          elm: Picture2,
+          aspect: pictAsp,
+          revisedAspect: this.pst.frame.aspect > pictAsp ? this.pst.frame.w / pictW : this.pst.frame.h / pictH
+        });
+      }
+      this.drawImage();
+    });
+  }
+  drawImage(_imageX, _imageY) {
+    let {
+      use,
+      Canvas: {
+        ctx
+      },
+      pst: {
+        frame
+      }
+    } = this;
+    let ImageX = _imageX || this.pst.imageX;
+    let ImageY = _imageY || this.pst.imageY;
+    {
+      let scale = this.scale.current / 100;
+      let totalScale = this.Picture.revisedAspect * scale;
+      let imgX = this.pst.centerX - ImageX * totalScale;
+      let imgY = this.pst.centerY - ImageY * totalScale;
+      let imgW = this.Picture.elm.width * totalScale;
+      let imgH = this.Picture.elm.height * totalScale;
+      {
+        let minX = this.pst.frame.x + this.pst.frame.w - imgW;
+        let maxX = this.pst.frame.x;
+        let minY = this.pst.frame.y + this.pst.frame.h - imgH;
+        let maxY = this.pst.frame.y;
+        let extraX = 0;
+        if (imgX < minX)
+          extraX = imgX - minX;
+        if (imgX > maxX)
+          extraX = imgX - maxX;
+        let extraY = 0;
+        if (imgY < minY)
+          extraY = imgY - minY;
+        if (imgY > maxY)
+          extraY = imgY - maxY;
+        this.dragEffectInfo.origin.x += extraX / 2 / this.dragEffectInfo.frameExpandRate.x;
+        this.dragEffectInfo.origin.y += extraY / 2 / this.dragEffectInfo.frameExpandRate.y;
+        imgX = Math.min(Math.max(imgX, minX), maxX);
+        imgY = Math.min(Math.max(imgY, minY), maxY);
+      }
+      this.pst.outImage = {
+        x: imgX,
+        y: imgY,
+        w: imgW,
+        h: imgH
+      };
+      ctx.clearRect(
+        0,
+        0,
+        this.Canvas.elm.width,
+        this.Canvas.elm.height
+      );
+      ctx.drawImage(
+        this.Picture.elm,
+        0,
+        0,
+        this.Picture.elm.width,
+        this.Picture.elm.height,
+        imgX,
+        imgY,
+        imgW,
+        imgH
+      );
+    }
+    {
+      if (use == "square") {
+        ctx.fillStyle = "rgba( 20,24,20,.3 )";
+        ctx.beginPath();
+        ctx.arc(this.Canvas.elm.width / 2, this.Canvas.elm.height / 2, this.Canvas.elm.width, 0, Math.PI * 2, true);
+        ctx.arc(this.Canvas.elm.width / 2, this.Canvas.elm.height / 2, this.Canvas.elm.width / 3 * 2 / 2, 0, Math.PI * 2, false);
+        ctx.closePath();
+        ctx.fill();
+      } else if (use == "wallpaper.horizontal") {
+        ctx.fillStyle = "rgba( 20,24,20,.3 )";
+      } else if (use == "wallpaper.vertical") {
+        ctx.fillStyle = "rgba( 20,24,20,.3 )";
+      }
+      ctx.beginPath();
+      ctx.moveTo(0, 0);
+      ctx.lineTo(this.Canvas.elm.width, 0);
+      ctx.lineTo(this.Canvas.elm.width, this.Canvas.elm.height);
+      ctx.lineTo(0, this.Canvas.elm.height);
+      ctx.lineTo(0, 0);
+      ctx.closePath();
+      ctx.lineTo(frame.x, frame.y);
+      ctx.lineTo(frame.x, frame.y + frame.h);
+      ctx.lineTo(frame.x + frame.w, frame.y + frame.h);
+      ctx.lineTo(frame.x + frame.w, frame.y);
+      ctx.lineTo(frame.x, frame.y);
+      ctx.fill();
+      let body = $$(document.body);
+      let themeColorHSL = body.getStyleProperty("--color-theme-hsl");
+      ctx.lineWidth = this.Canvas.elm.width / 200;
+      ctx.strokeStyle = `hsla( ${themeColorHSL},1 )`;
+      ctx.strokeRect(frame.x, frame.y, frame.w, frame.h);
+    }
+  }
+  export() {
+    return __async(this, null, function* () {
+      let {
+        develops,
+        Picture: Picture2,
+        pst: {
+          outImage,
+          frame
+        }
+      } = this;
+      let ratioX = outImage.w / Picture2.elm.width;
+      let ratioY = outImage.h / Picture2.elm.height;
+      let Left = (frame.x - outImage.x) / ratioX;
+      let Right = (frame.x - outImage.x + frame.w) / ratioX;
+      let Top = (frame.y - outImage.y) / ratioY;
+      let Bottom = (frame.y - outImage.y + frame.h) / ratioY;
+      let Files = Array.from({ length: develops.length });
+      let MimeType = "image/jpeg";
+      for (let index = 0; index < develops.length; index++) {
+        let {
+          size,
+          maxSize
+        } = develops[index];
+        maxSize = maxSize || {
+          S: 1024 * 20,
+          R: 1024 * 100,
+          L: 1024 * 350
+        }[size];
+        let width = {
+          S: 144,
+          R: 576,
+          L: 1152
+        }[size];
+        let height = width;
+        if (this.use == "wallpaper.horizontal") {
+          height = width / 3 * 2;
+        } else if (this.use == "wallpaper.vertical") {
+          height = width * 2;
+        }
+        let Preview = document.createElement("canvas");
+        Preview.width = width;
+        Preview.height = height;
+        let previewCtx = Preview.getContext("2d");
+        if (!previewCtx)
+          return;
+        previewCtx.clearRect(0, 0, width, height);
+        previewCtx.drawImage(
+          this.Picture.elm,
+          Left,
+          Top,
+          Right - Left,
+          Bottom - Top,
+          0,
+          0,
+          width,
+          height
+        );
+        let dataUrl = Preview.toDataURL(MimeType);
+        let blob = yield dataUrl.toBlob(MimeType);
+        if (!blob)
+          return;
+        if (blob.size >= maxSize) {
+          let Ratio = maxSize / blob.size;
+          dataUrl = Preview.toDataURL(MimeType, Ratio * 0.92);
+          blob = yield dataUrl.toBlob(MimeType);
+          if (!blob)
+            return;
+        }
+        let file = new File([blob], this.val_file.name, { type: MimeType });
+        Files[index] = file;
+      }
+      return Files;
+    });
+  }
+}
+const Comps = {
+  Core: (params) => {
+    let {
+      val_file,
+      options,
+      finishedCallback,
+      abortCallback
+    } = params;
+    let {
+      use,
+      develops = []
+    } = options;
+    let [val_componentID] = useState($$.uuid.gen(32));
+    const DefaultOptions = {
+      scale: {
+        default: 125,
+        min: 100,
+        max: 300
+      },
+      rotate: 0,
+      grayScale: 0,
+      tone: 0
+    };
+    let [val_scale, set_scale] = useState(DefaultOptions.scale.default);
+    let [val_rotate, set_rotate] = useState(DefaultOptions.rotate);
+    let [val_grayScale, set_grayScale] = useState(DefaultOptions.grayScale);
+    let [val_tone, set_tone] = useState(DefaultOptions.tone);
+    useEffect(() => {
+      useStore.set({
+        key: val_componentID,
+        value: {}
+      });
+      (() => __async(void 0, null, function* () {
+        Loader.fn.corner.active();
+        let { target } = yield val_file.read();
+        if (!target)
+          return;
+        let dataUrl = target.result;
+        let Canvas = $$fromRoot("#Canvas-" + val_componentID)[0];
+        if (!Canvas)
+          return;
+        let __Cropper = new Picture({
+          set_scale,
+          val_file,
+          develops,
+          use,
+          scale: DefaultOptions.scale,
+          componentID: val_componentID,
+          canvas: Canvas,
+          picture: {
+            image: yield $$.ImageLoader(dataUrl),
+            grayScale: DefaultOptions.grayScale,
+            tone: DefaultOptions.tone,
+            rotate: DefaultOptions.rotate
+          }
+        });
+        useStore.set({
+          key: val_componentID,
+          value: {
+            Instance: __Cropper
+          }
+        });
+        const UserEffectStart = function(event) {
+          event.preventDefault();
+          if (event.touches && event.touches.length > 1) {
+            __Cropper.pinchEffect({
+              eventType: "start",
+              event
+            });
+            $$(document).addEvent({
+              eventType: "touchmove",
+              eventID: "CropperEffectMove",
+              options: { passive: false },
+              callback: (event2) => {
+                event2.preventDefault();
+                __Cropper.pinchEffect({
+                  eventType: "move",
+                  event: event2
+                });
+              }
+            }).addEvent({
+              eventType: "touchend",
+              eventID: "CropperEffectEnd",
+              options: { passive: false },
+              callback: EventEnd
+            });
+          } else {
+            __Cropper.dragEffect(__spreadValues({
+              eventType: "start"
+            }, $$.getCursor(event)));
+            let { type } = event;
+            $$(document).addEvent({
+              eventType: type == "touchstart" ? "touchmove" : "mousemove",
+              eventID: "CropperEffectMove",
+              options: { passive: false },
+              callback: (event2) => {
+                DragEffect("move", event2);
+              }
+            }).addEvent({
+              eventType: type == "touchstart" ? "touchend" : "mouseup",
+              eventID: "CropperEffectEnd",
+              options: { passive: false },
+              callback: (event2) => {
+                DragEffect("end", event2);
+                EventEnd(event2);
+              }
+            });
+          }
+        };
+        const DragEffect = function(eventType, event) {
+          event.preventDefault();
+          __Cropper.dragEffect(__spreadValues({
+            eventType
+          }, $$.getCursor(event)));
+        };
+        const EventEnd = function(event) {
+          event.preventDefault();
+          $$(document).removeEvent([
+            "CropperEffectMove",
+            "CropperEffectEnd"
+          ]);
+        };
+        $$(Canvas).removeEvent([
+          "CropperMouseWheel",
+          "CropperTouchStart",
+          "CropperMouseDown"
+        ]).addEvent({
+          eventID: "CropperMouseWheel",
+          eventType: "wheel",
+          callback: (event) => {
+            event.preventDefault();
+            let bitScale = Number(event.wheelDelta * 0.04);
+            let nextScale = __Cropper.scale.current + bitScale;
+            nextScale = Math.max(nextScale, __Cropper.scale.min);
+            nextScale = Math.min(nextScale, __Cropper.scale.max);
+            set_scale(nextScale);
+          },
+          options: { passive: false }
+        }).addEvent({
+          eventType: "touchstart",
+          eventID: "CropperTouchStart",
+          callback: UserEffectStart,
+          options: { passive: false }
+        }).addEvent({
+          eventType: "mousedown",
+          eventID: "CropperMouseDown",
+          callback: UserEffectStart,
+          options: { passive: false }
+        });
+        setTimeout(() => {
+          Loader.fn.corner.stop();
+        }, 1e3);
+      }))();
+    }, [val_file.id]);
+    useEffect(() => {
+      var _a;
+      let Instance = (_a = useStore.get(val_componentID)) == null ? void 0 : _a.Instance;
+      if (Instance) {
+        Instance.updateScale(val_scale);
+      }
+    }, [val_scale]);
+    useEffect(() => {
+      var _a;
+      let Instance = (_a = useStore.get(val_componentID)) == null ? void 0 : _a.Instance;
+      if (Instance) {
+        Instance.updateFilter({
+          grayScale: val_grayScale,
+          tone: val_tone,
+          rotate: val_rotate
+        });
+      }
+    }, [val_grayScale, val_tone, val_rotate]);
+    return /* @__PURE__ */ jsx(Sheet.Comps.Body, { children: /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        className: [
+          CropperClasses("Wrap"),
+          CropperClasses("Use_" + use)
+        ].join(" "),
+        flexWrap: false,
+        position: "relative",
+        overflow: "hidden",
+        borderRadius: "inherit",
+        boxShadow: "3.remark",
+        UnderBreakPointStyles: {
+          flexType: "col"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              flexGrid: 3,
+              UnderBreakPointStyles: {
+                width: 1,
+                padding: 2
+              },
+              children: /* @__PURE__ */ jsx(
+                Box,
+                {
+                  overflow: "hidden",
+                  position: "relative",
+                  backgroundColor: "4.layer.darken",
+                  freeCSS: {
+                    zIndex: 1
+                  },
+                  UnderBreakPointStyles: {
+                    borderRadius: "1.tone.primary"
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    "canvas",
+                    {
+                      width: "2400",
+                      height: use == "wallpaper.horizontal" ? "1800" : use == "wallpaper.vertical" ? "3200" : "2400",
+                      className: CropperClasses("Canvas"),
+                      id: "Canvas-" + val_componentID
+                    }
+                  )
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Column,
+            {
+              gap: 0,
+              flexGrid: 2,
+              boxShadow: "3.remark",
+              UnderBreakPointStyles: {
+                width: 1,
+                maxWidth: "unset"
+              },
+              freeCSS: {
+                maxWidth: 12 * 28
+              },
+              children: [
+                /* @__PURE__ */ jsxs(
+                  Column,
+                  {
+                    gap: 1,
+                    flexSizing: 0,
+                    overflow: "auto",
+                    padding: 1.5,
+                    UnderBreakPointStyles: {
+                      flexSizing: "none"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        Box,
+                        {
+                          flexSizing: "none",
+                          fontSize: "4.thirdTitle",
+                          isSemiBoldFont: true,
+                          children: "\u30D5\u30A3\u30EB\u30BF\u30FC"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Comps.SettingRegion,
+                        {
+                          DefaultOptions,
+                          val_scale,
+                          set_scale,
+                          val_tone,
+                          set_tone,
+                          val_grayScale,
+                          set_grayScale,
+                          val_rotate,
+                          set_rotate
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  Flex,
+                  {
+                    padding: 1.5,
+                    flexSizing: "none",
+                    gap: 1,
+                    borderTop: true,
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        Button.Button.Border.R,
+                        {
+                          onClick: () => {
+                            abortCallback();
+                          },
+                          children: "\u30AD\u30E3\u30F3\u30BB\u30EB"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Button.Button.Prime.R,
+                        {
+                          flexSizing: 0,
+                          onClick: () => __async(void 0, null, function* () {
+                            var _a;
+                            let Instance = (_a = useStore.get(val_componentID)) == null ? void 0 : _a.Instance;
+                            if (!Instance)
+                              return;
+                            Loader.fn.mini.active("CropperExportation");
+                            let Files = yield Instance.export();
+                            setTimeout(() => {
+                              Loader.fn.mini.stop("CropperExportation");
+                              finishedCallback(Files);
+                            }, 3e3);
+                          }),
+                          children: /* @__PURE__ */ jsxs(
+                            Row.Center,
+                            {
+                              gap: "1/2",
+                              children: [
+                                /* @__PURE__ */ jsx(
+                                  Loader.White.R,
+                                  {
+                                    loaderID: "CropperExportation"
+                                  }
+                                ),
+                                "\u6C7A\u5B9A"
+                              ]
+                            }
+                          )
+                        }
+                      )
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ) });
+  },
+  SettingRegion: (params) => {
+    let ToneList = [];
+    for (let index = 1; index <= 10; index++) {
+      ToneList.push({
+        value: index,
+        label: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              className: [
+                CropperClasses("ToneBall"),
+                CropperClasses("ToneBall_" + index)
+              ].join(" ")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              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"][index]
+            }
+          )
+        ] })
+      });
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(Column, { gap: "1/3", children: [
+        /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsx(
+            FAI.Rotate,
+            {
+              fontSize: "3.paragraph",
+              fontColor: "4.thin"
+            }
+          ),
+          " Rotate"
+        ] }),
+        /* @__PURE__ */ jsxs(
+          Row.Separate,
+          {
+            flexChilds: "even",
+            paddingLeft: 2,
+            children: [
+              /* @__PURE__ */ jsxs(
+                Button.Button.Border.S,
+                {
+                  onClick: () => {
+                    let next = params.val_rotate - 90;
+                    if (next < 0)
+                      next += 360;
+                    params.set_rotate(next);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(FAI, { icon: faRotateLeft }),
+                    " \u5DE6\u306B\u56DE\u8EE2"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                Button.Button.Border.S,
+                {
+                  onClick: () => {
+                    params.set_rotate((params.val_rotate + 90) % 360);
+                  },
+                  children: [
+                    "\u53F3\u306B\u56DE\u8EE2 ",
+                    /* @__PURE__ */ jsx(FAI, { icon: faRotateRight })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(Column, { gap: "1/3", children: [
+        /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsx(
+            FAI.Search,
+            {
+              fontSize: "3.paragraph",
+              fontColor: "4.thin"
+            }
+          ),
+          " Zoom"
+        ] }),
+        /* @__PURE__ */ jsx(Box, { paddingLeft: 2, children: /* @__PURE__ */ jsx(
+          Input.Slider,
+          {
+            override: "force",
+            value: params.val_scale - 100,
+            min: params.DefaultOptions.scale.min - 100,
+            max: params.DefaultOptions.scale.max - 100,
+            step: 25,
+            onUpdateValidValue: ({ eventType, value }) => {
+              $$.interval.clear("Cropper.UpdateScale");
+              $$.interval.standBy("Cropper.UpdateScale", 400, () => {
+                params.set_scale(value + 100);
+              });
+            },
+            legends: {
+              enable: true,
+              custom: (value) => {
+                let scale = Math.round(100 + value);
+                return "x" + scale / 100;
+              }
+            }
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxs(Column, { gap: "1/3", children: [
+        /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsx(
+            FAI,
+            {
+              icon: faPalette,
+              fontSize: "3.paragraph",
+              fontColor: "4.thin"
+            }
+          ),
+          " Gray Scale"
+        ] }),
+        /* @__PURE__ */ jsx(Box, { paddingLeft: 2, children: /* @__PURE__ */ jsx(
+          Input.Slider,
+          {
+            value: params.val_grayScale,
+            min: 0,
+            max: 100,
+            step: 10,
+            onUpdateValidValue: ({ value }) => {
+              $$.interval.clear("Cropper.GrayScale");
+              $$.interval.standBy("Cropper.GrayScale", 400, () => {
+                params.set_grayScale(value);
+              });
+            },
+            legends: {
+              enable: true,
+              custom: (value) => value + "%"
+            }
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxs(Column, { gap: "1/3", children: [
+        /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsx(
+            FAI,
+            {
+              icon: faBarsStaggered,
+              fontSize: "3.paragraph",
+              fontColor: "4.thin"
+            }
+          ),
+          " Tone"
+        ] }),
+        /* @__PURE__ */ jsx(Box, { paddingLeft: 2, children: /* @__PURE__ */ jsx(
+          Input.Radio,
+          {
+            value: params.val_tone,
+            gap: "1/2",
+            cellStyles: {
+              isRounded: true,
+              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: true
+              },
+              ...ToneList
+            ],
+            onUpdateValidValue: ({ value }) => {
+              params.set_tone(value[0]);
+            }
+          }
+        ) })
+      ] })
+    ] });
+  }
+};
+const Cropper = {
+  open: (params) => __async(void 0, null, function* () {
+    let Image2 = yield Input.Filer.fn.openDialog({
+      // accept: 'image/jpeg,image/jpg,image/png,image/gif',
+      accept: "image",
+      multiple: false
+    });
+    let sheetID = "CropperImage";
+    Sheet.open({
+      sheetID,
+      type: "normal.middleCenter",
+      size: "3L",
+      freeCSS: {
+        width: params.use == "wallpaper.horizontal" ? 12 * 100 : 12 * 80
+      },
+      content: /* @__PURE__ */ jsx(
+        Comps.Core,
+        {
+          val_file: Image2[0],
+          options: params,
+          finishedCallback: (files) => {
+            Sheet.close(sheetID);
+            params.onProcessFinished(files);
+          },
+          abortCallback: () => {
+            Sheet.close(sheetID);
+          }
+        }
+      ),
+      close_option: {
+        escapeKeyDown: false
+      }
+    });
+  })
+};
+export {
+  Cropper,
+  Cropper as default
+};