mjpic 1.0.0 → 1.0.2

package/api/cli.ts

@@ -13,8 +13,8 @@ const program = new Command();
 
 program
   .name('mjpic')
-  .description('Agile Image Processing Tool')
-  .version('1.0.0')
+  .description('敏捷图片 - 轻量级图片处理工具')
+  .version('1.0.2')
   .option('-p, --port <number>', 'server port', '3000')
   .option('--host <string>', 'server host', 'localhost')
   .argument('[file]', 'image file to open')
@@ -53,7 +53,7 @@ program
 
     app.listen(port, host, () => {
       const url = `http://${host}:${port}`;
-      console.log(`mjpic is running at ${url}`);
+      console.log(`敏捷图片 is running at ${url}`);
       open(url);
     });
   });

package/dist/cli/cli.js

@@ -10,8 +10,8 @@ const __dirname = path.dirname(__filename);
 const program = new Command();
 program
     .name('mjpic')
-    .description('Agile Image Processing Tool')
-    .version('1.0.0')
+    .description('敏捷图片 - 轻量级图片处理工具')
+    .version('1.0.2')
     .option('-p, --port <number>', 'server port', '3000')
     .option('--host <string>', 'server host', 'localhost')
     .argument('[file]', 'image file to open')
@@ -42,7 +42,7 @@ program
     });
     app.listen(port, host, () => {
         const url = `http://${host}:${port}`;
-        console.log(`mjpic is running at ${url}`);
+        console.log(`敏捷图片 is running at ${url}`);
         open(url);
     });
 });

package/dist/client/assets/{index-BUIYLOn-.js → index-Bn7l1ZSh.js}

@@ -190,7 +190,7 @@ For more info see: https://github.com/konvajs/react-konva/issues/256
 `,N5=`ReactKonva: You are using "zIndex" attribute for a Konva node.
 react-konva may get confused with ordering. Just define correct order of elements in your render function of a component.
 For more info see: https://github.com/konvajs/react-konva/issues/194
-`,D5={};function Eh(n,r,o=D5){if(!lg&&"zIndex"in r&&(console.warn(N5),lg=!0),!cg&&r.draggable){var l=r.x!==void 0||r.y!==void 0,c=r.onDragEnd||r.onDragMove;l&&!c&&(console.warn(A5),cg=!0)}for(var u in o)if(!ag[u]){var d=u.slice(0,2)==="on",f=o[u]!==r[u];if(d&&f){var g=u.substr(2).toLowerCase();g.substr(0,7)==="content"&&(g="content"+g.substr(7,1).toUpperCase()+g.substr(8)),n.off(g,o[u])}var m=!r.hasOwnProperty(u);m&&n.setAttr(u,void 0)}var y=r._useStrictMode,x={},R=!1;const w={};for(var u in r)if(!ag[u]){var d=u.slice(0,2)==="on",_=o[u]!==r[u];if(d&&_){var g=u.substr(2).toLowerCase();g.substr(0,7)==="content"&&(g="content"+g.substr(7,1).toUpperCase()+g.substr(8)),r[u]&&(w[g]=r[u])}!d&&(r[u]!==o[u]||y&&r[u]!==n.getAttr(u))&&(R=!0,x[u]=r[u])}R&&(n.setAttrs(x),Uo(n));for(var g in w)n.on(g+Cp,w[g])}function Uo(n){if(!P5.Konva.autoDrawEnabled){var r=n.getLayer()||n.getStage();r&&r.batchDraw()}}var Hf=dp();const Lm={},L5={};Du.Node.prototype._applyProps=Eh;function T5(n,r){if(typeof r=="string"){console.error(`Do not use plain text as child of Konva.Node. You are using text: ${r}`);return}n.add(r),Uo(n)}function M5(n,r,o){let l=Du[n];l||(console.error(`Konva has no node with the type ${n}. Group will be used instead. If you use minimal version of react-konva, just import required nodes into Konva: "import "konva/lib/shapes/${n}"  If you want to render DOM elements as part of canvas tree take a look into this demo: https://konvajs.github.io/docs/react/DOM_Portal.html`),l=Du.Group);const c={},u={};for(var d in r){var f=d.slice(0,2)==="on";f?u[d]=r[d]:c[d]=r[d]}const g=new l(c);return Eh(g,u),g}function z5(n,r,o){console.error(`Text components are not supported for now in ReactKonva. Your text is: "${n}"`)}function O5(n,r,o){return!1}function I5(n){return n}function j5(){return null}function U5(){return null}function B5(n,r,o,l){return L5}function G5(){}function H5(n){}function V5(n,r){return!1}function W5(){return Lm}function K5(){return Lm}const q5=setTimeout,Y5=clearTimeout,X5=-1;function Q5(n,r){return!1}const $5=!1,J5=!0,Z5=!0;function ex(n,r){r.parent===n?r.moveToTop():n.add(r),Uo(n)}function tx(n,r){r.parent===n?r.moveToTop():n.add(r),Uo(n)}function Tm(n,r,o){r._remove(),n.add(r),r.setZIndex(o.getZIndex()),Uo(n)}function nx(n,r,o){Tm(n,r,o)}function rx(n,r){r.destroy(),r.off(Cp),Uo(n)}function ix(n,r){r.destroy(),r.off(Cp),Uo(n)}function sx(n,r,o){console.error(`Text components are not yet supported in ReactKonva. You text is: "${o}"`)}function ox(n,r,o){}function ax(n,r,o,l,c){Eh(n,c,l)}function lx(n){n.hide(),Uo(n)}function cx(n){}function ux(n,r){(r.visible==null||r.visible)&&n.show()}function dx(n,r){}function hx(n){}function fx(){}const px=()=>Dm.DefaultEventPriority,gx=Object.freeze(Object.defineProperty({__proto__:null,appendChild:ex,appendChildToContainer:tx,appendInitialChild:T5,cancelTimeout:Y5,clearContainer:hx,commitMount:ox,commitTextUpdate:sx,commitUpdate:ax,createInstance:M5,createTextInstance:z5,detachDeletedInstance:fx,finalizeInitialChildren:O5,getChildHostContext:K5,getCurrentEventPriority:px,getPublicInstance:I5,getRootHostContext:W5,hideInstance:lx,hideTextInstance:cx,idlePriority:Hf.unstable_IdlePriority,insertBefore:Tm,insertInContainerBefore:nx,isPrimaryRenderer:$5,noTimeout:X5,now:Hf.unstable_now,prepareForCommit:j5,preparePortalMount:U5,prepareUpdate:B5,removeChild:rx,removeChildFromContainer:ix,resetAfterCommit:G5,resetTextContent:H5,run:Hf.unstable_runWithPriority,scheduleTimeout:q5,shouldDeprioritizeSubtree:V5,shouldSetTextContent:Q5,supportsMutation:Z5,unhideInstance:ux,unhideTextInstance:dx,warnsIfNotActing:J5},Symbol.toStringTag,{value:"Module"}));var mx=Object.defineProperty,vx=Object.defineProperties,yx=Object.getOwnPropertyDescriptors,ug=Object.getOwnPropertySymbols,xx=Object.prototype.hasOwnProperty,wx=Object.prototype.propertyIsEnumerable,dg=(n,r,o)=>r in n?mx(n,r,{enumerable:!0,configurable:!0,writable:!0,value:o}):n[r]=o,hg=(n,r)=>{for(var o in r||(r={}))xx.call(r,o)&&dg(n,o,r[o]);if(ug)for(var o of ug(r))wx.call(r,o)&&dg(n,o,r[o]);return n},Sx=(n,r)=>vx(n,yx(r)),fg,pg;typeof window<"u"&&((fg=window.document)!=null&&fg.createElement||((pg=window.navigator)==null?void 0:pg.product)==="ReactNative")?W.useLayoutEffect:W.useEffect;function Mm(n,r,o){if(!n)return;if(o(n)===!0)return n;let l=n.child;for(;l;){const c=Mm(l,r,o);if(c)return c;l=l.sibling}}function zm(n){try{return Object.defineProperties(n,{_currentRenderer:{get(){return null},set(){}},_currentRenderer2:{get(){return null},set(){}}})}catch{return n}}const gg=console.error;console.error=function(){const n=[...arguments].join("");if(n!=null&&n.startsWith("Warning:")&&n.includes("useContext")){console.error=gg;return}return gg.apply(this,arguments)};const Fp=zm(W.createContext(null));class Om extends W.Component{render(){return W.createElement(Fp.Provider,{value:this._reactInternals},this.props.children)}}function kx(){const n=W.useContext(Fp);if(n===null)throw new Error("its-fine: useFiber must be called within a <FiberProvider />!");const r=W.useId();return W.useMemo(()=>{for(const l of[n,n==null?void 0:n.alternate]){if(!l)continue;const c=Mm(l,!1,u=>{let d=u.memoizedState;for(;d;){if(d.memoizedState===r)return!0;d=d.next}});if(c)return c}},[n,r])}function _x(){const n=kx(),[r]=W.useState(()=>new Map);r.clear();let o=n;for(;o;){if(o.type&&typeof o.type=="object"){const c=o.type._context===void 0&&o.type.Provider===o.type?o.type:o.type._context;c&&c!==Fp&&!r.has(c)&&r.set(c,W.useContext(zm(c)))}o=o.return}return r}function Cx(){const n=_x();return W.useMemo(()=>Array.from(n.keys()).reduce((r,o)=>l=>W.createElement(r,null,W.createElement(o.Provider,Sx(hg({},l),{value:n.get(o)}))),r=>W.createElement(Om,hg({},r))),[n])}function Fx(n){const r=Et.useRef({});return Et.useLayoutEffect(()=>{r.current=n}),Et.useLayoutEffect(()=>()=>{r.current={}},[]),r.current}const Rx=n=>{const r=Et.useRef(),o=Et.useRef(),l=Et.useRef(),c=Fx(n),u=Cx(),d=f=>{const{forwardedRef:g}=n;g&&(typeof g=="function"?g(f):g.current=f)};return Et.useLayoutEffect(()=>(o.current=new Du.Stage({width:n.width,height:n.height,container:r.current}),d(o.current),l.current=Cu.createContainer(o.current,Dm.LegacyRoot,!1,null),Cu.updateContainer(Et.createElement(u,{},n.children),l.current),()=>{Du.isBrowser&&(d(null),Cu.updateContainer(null,l.current,null),o.current.destroy())}),[]),Et.useLayoutEffect(()=>{d(o.current),Eh(o.current,n,c),Cu.updateContainer(Et.createElement(u,{},n.children),l.current,null)}),Et.createElement("div",{ref:r,id:n.id,accessKey:n.accessKey,className:n.className,role:n.role,style:n.style,tabIndex:n.tabIndex,title:n.title})},Ex="Layer",sh="Group",oh="Rect",Hs="Line",bx="Image",Px="Transformer",Cu=R5(gx);Cu.injectIntoDevTools({findHostInstanceByFiber:()=>null,bundleType:0,version:Et.version,rendererPackageName:"react-konva"});const Ax=Et.forwardRef((n,r)=>Et.createElement(Om,{},Et.createElement(Rx,{...n,forwardedRef:r})));var Vf,mg;function Nx(){if(mg)return Vf;mg=1;var n=bl();return Vf=function(o,l,c){const u=n.useRef("loading"),d=n.useRef(),[f,g]=n.useState(0),m=n.useRef(),y=n.useRef(),x=n.useRef();return(m.current!==o||y.current!==l||x.current!==c)&&(u.current="loading",d.current=void 0,m.current=o,y.current=l,x.current=c),n.useLayoutEffect(function(){if(!o)return;var R=document.createElement("img");function w(){R.decode().catch(()=>{}).finally(()=>{u.current="loaded",d.current=R,g(Math.random())})}function _(){u.current="failed",d.current=void 0,g(Math.random())}return R.addEventListener("load",w),R.addEventListener("error",_),l&&(R.crossOrigin=l),c&&(R.referrerPolicy=c),R.src=o,function(){R.removeEventListener("load",w),R.removeEventListener("error",_)}},[o,l,c]),[d.current,u.current]},Vf}var Dx=Nx();const Lx=Ou(Dx),Tx=({stageRef:n})=>{var We,rt,Ye;const{previewImage:r,config:o,loadImage:l,setOriginalSize:c,originalWidth:u,originalHeight:d,cropRect:f,setCropRect:g,updateConfig:m}=Bu(),{isStraightenToolActive:y,setStraightenToolActive:x,activeTool:R}=yp(),[w]=Lx(r||"","anonymous"),_=W.useRef(null),{t:b}=Nl(),[E,M]=W.useState({width:0,height:0}),F=W.useRef(null);W.useRef(null);const k=W.useRef(null),N=W.useRef(null),T=W.useRef(void 0),I=W.useRef(!1),X=W.useRef({width:0,height:0}),[z,B]=W.useState(null),j=W.useRef(!1),V=o.crop&&o.crop.aspectRatio,J=((We=o.crop)==null?void 0:We.aspectRatio)==="Free";let A=0,O=0,L=1,G=0,q=0,Y=0,oe=0,ne=0,K=0,te=0,re=0,Z=0,ue=0,pe=0,Q=0;if(w){if(o.resize&&o.resize.width>0&&o.resize.height>0?(A=o.resize.width,O=o.resize.height):(A=w.width,O=w.height),o.border){const{size:Je=0,applyHorizontal:ze=!0,applyVertical:Ze=!1}=o.border;Je>0&&(ze&&(Z=A*(Je/100)),Ze&&(ue=O*(Je/100)))}if(ne=A+Z*2,K=O+ue*2,E.width>0&&E.height>0){const Je=(E.width-40)/ne,ze=(E.height-40)/K;L=Math.min(Je,ze,1)}G=A*L,q=O*L,pe=Z*L,Q=ue*L,te=ne*L,re=K*L;const Fe=E.width/2,Ge=E.height/2;Y=Fe-te/2,oe=Ge-re/2}W.useEffect(()=>{w&&w.width&&w.height&&(c(w.width,w.height),X.current={width:w.width,height:w.height})},[w,c]);const ie=De=>{De.preventDefault(),De.stopPropagation()},de=De=>{De.preventDefault(),De.stopPropagation();const Fe=De.dataTransfer.files;if(Fe&&Fe.length>0){const Ge=Fe[0];if(Ge.type.startsWith("image/")){const Je=new FileReader;Je.onload=ze=>{var Ze;(Ze=ze.target)!=null&&Ze.result&&l(ze.target.result)},Je.readAsDataURL(Ge)}}};W.useLayoutEffect(()=>{const De=()=>{if(F.current){const{offsetWidth:Ge,offsetHeight:Je}=F.current;Ge>0&&Je>0&&M({width:Ge,height:Je})}};De();const Fe=new ResizeObserver(()=>{requestAnimationFrame(De)});return F.current&&Fe.observe(F.current),window.addEventListener("resize",De),()=>{window.removeEventListener("resize",De),Fe.disconnect()}},[]),W.useEffect(()=>{w&&F.current&&(M({width:F.current.offsetWidth,height:F.current.offsetHeight}),requestAnimationFrame(()=>{n.current&&n.current.batchDraw()}))},[w]),W.useEffect(()=>{var De,Fe,Ge,Je;if(w&&_.current){const ze=_.current;ze.clearCache();const Ze=[];if(o.brightness!==0&&Ze.push(tg.Filters.Brighten),o.contrast!==0&&Ze.push(tg.Filters.Contrast),o.sharpness>0){const $e=function(Ke){const Se=o.sharpness/100;if(Se<=0)return;const ut=Ke.data,xt=Ke.width,it=Ke.height,tt=new Uint8ClampedArray(ut),ht=1+4*Se,ct=-Se;for(let Oe=1;Oe<it-1;Oe++)for(let on=1;on<xt-1;on++){const et=(Oe*xt+on)*4,Xt=et-xt*4,Cn=et+xt*4,er=et-4,ri=et+4;for(let an=0;an<3;an++){const wi=tt[et+an]*ht+(tt[Xt+an]+tt[Cn+an]+tt[er+an]+tt[ri+an])*ct;ut[et+an]=wi}}};Ze.push($e)}if((De=o.enhancements)!=null&&De.autoEnhance){const $e=function(Ke){const Se=Ke.data,ut=Ke.width,xt=Ke.height,it=8;let tt=0,ht=0,ct=0,Oe=255,on=0,et=0,Xt=0;for(let qe=0;qe<Se.length;qe+=4*it){const Vt=Se[qe],Ft=Se[qe+1],Rn=Se[qe+2];tt+=Vt,ht+=Ft,ct+=Rn;const Nt=.299*Vt+.587*Ft+.114*Rn;Nt<Oe&&(Oe=Nt),Nt>on&&(on=Nt),et+=Nt,Xt++}const Cn=tt/Xt,er=ht/Xt,ri=ct/Xt,an=et/Xt,wi=er/(Cn||1),us=er/(ri||1);let Mr=0;an<100?Mr=(100-an)*.15:an>160&&(Mr=-(an-160)*.1);const Mt=on-Oe<150?15:8,Fn=259*(Mt+255)/(255*(259-Mt));for(let qe=0;qe<Se.length;qe+=4){Se[qe]=Math.min(255,Se[qe]*wi),Se[qe+2]=Math.min(255,Se[qe+2]*us);const Vt=.299*Se[qe]+.587*Se[qe+1]+.114*Se[qe+2],Ft=Vt+Mr,Nt=(Fn*(Ft-128)+128)/(Vt||1);Se[qe]=Math.min(255,Se[qe]*Nt),Se[qe+1]=Math.min(255,Se[qe+1]*Nt),Se[qe+2]=Math.min(255,Se[qe+2]*Nt);const en=.299*Se[qe]+.587*Se[qe+1]+.114*Se[qe+2],pn=1.15;Se[qe]=Math.min(255,en+(Se[qe]-en)*pn),Se[qe+1]=Math.min(255,en+(Se[qe+1]-en)*pn),Se[qe+2]=Math.min(255,en+(Se[qe+2]-en)*pn)}const Qt=new Uint8ClampedArray(Se),tr=.3,Ln=1+4*tr,ln=-tr;for(let qe=1;qe<xt-1;qe+=2)for(let Vt=1;Vt<ut-1;Vt+=2){const Ft=(qe*ut+Vt)*4,Rn=((qe-1)*ut+Vt)*4,Nt=((qe+1)*ut+Vt)*4,en=(qe*ut+(Vt-1))*4,pn=(qe*ut+(Vt+1))*4;for(let gn=0;gn<3;gn++){const nr=Qt[Ft+gn]*Ln+(Qt[Rn+gn]+Qt[Nt+gn]+Qt[en+gn]+Qt[pn+gn])*ln;Se[Ft+gn]=Math.min(255,Math.max(0,nr))}}};Ze.push($e)}if((Fe=o.enhancements)!=null&&Fe.fillLight){const $e=function(Ke){const Se=Ke.data;Ke.width,Ke.height;const ut=8;let xt=0,it=0;for(let Oe=0;Oe<Se.length;Oe+=4*ut).299*Se[Oe]+.587*Se[Oe+1]+.114*Se[Oe+2]<80&&xt++,it++;const tt=xt/it;let ht;tt>.5?ht=.6:tt>.3?ht=.7:ht=.85;const ct=new Array(256);for(let Oe=0;Oe<256;Oe++)ct[Oe]=Math.pow(Oe/255,ht)*255;for(let Oe=0;Oe<Se.length;Oe+=4){const on=.299*Se[Oe]+.587*Se[Oe+1]+.114*Se[Oe+2];let et;on<80?et=.7:on<160?et=.4:et=.1;const Xt=ct[Se[Oe]],Cn=ct[Se[Oe+1]],er=ct[Se[Oe+2]];Se[Oe]=Math.min(245,Se[Oe]+(Xt-Se[Oe])*et),Se[Oe+1]=Math.min(245,Se[Oe+1]+(Cn-Se[Oe+1])*et),Se[Oe+2]=Math.min(245,Se[Oe+2]+(er-Se[Oe+2])*et)}};Ze.push($e)}if((Ge=o.enhancements)!=null&&Ge.autoWhiteBalance){const $e=function(Ke){const Se=Ke.data,ut=Ke.width,xt=Ke.height;let it=0,tt=0,ht=0;const ct=ut*xt;for(let et=0;et<Se.length;et+=4)it+=Se[et],tt+=Se[et+1],ht+=Se[et+2];it/=ct,tt/=ct,ht/=ct;const Oe=tt/(it||1),on=tt/(ht||1);for(let et=0;et<Se.length;et+=4)Se[et]=Math.min(255,Math.max(0,Se[et]*Oe)),Se[et+1]=Se[et+1],Se[et+2]=Math.min(255,Math.max(0,Se[et+2]*on))};Ze.push($e)}if(ze.filters(Ze),ze.brightness(o.brightness/100),ze.contrast(o.contrast),Ze.length>0)try{ze.cache({pixelRatio:1})}catch($e){console.error("Failed to cache image:",$e)}(Je=ze.getLayer())==null||Je.batchDraw()}return()=>{_.current&&_.current.clearCache()}},[o,w]),W.useEffect(()=>{N.current&&k.current&&V&&requestAnimationFrame(()=>{var De;N.current&&k.current&&(N.current.nodes([k.current]),(De=N.current.getLayer())==null||De.batchDraw())})},[V]),W.useEffect(()=>{var Ke;const De=(Ke=o.crop)==null?void 0:Ke.aspectRatio;if(!De){T.current=void 0;return}if(De===T.current||I.current||!w||w.width===0||w.height===0)return;T.current=De;let Fe=w.width,Ge=w.height;o.resize&&o.resize.width>0&&o.resize.height>0&&(Fe=o.resize.width,Ge=o.resize.height);let Je=0,ze=0;if(o.border){const{size:Se=0,applyHorizontal:ut=!0,applyVertical:xt=!1}=o.border;Se>0&&(ut&&(Je=Fe*(Se/100)),xt&&(ze=Ge*(Se/100)))}const Ze=Fe+Je*2,$e=Ge+ze*2;if(De==="Free")g({x:Math.round(Ze*.1),y:Math.round($e*.1),width:Math.round(Ze*.8),height:Math.round($e*.8)});else{const Se=De.split(":"),ut=parseInt(Se[0]),xt=parseInt(Se[1]),it=ut/xt,tt=Ze/$e;let ht,ct;tt>it?(ct=$e,ht=Math.round($e*it)):(ht=Ze,ct=Math.round(Ze/it)),g({x:Math.round((Ze-ht)/2),y:Math.round(($e-ct)/2),width:ht,height:ct})}},[(rt=o.crop)==null?void 0:rt.aspectRatio,w==null?void 0:w.width,w==null?void 0:w.height,o.border,o.resize]);const xe=De=>{var Ge;if(!y)return;const Fe=(Ge=De.target.getStage())==null?void 0:Ge.getPointerPosition();Fe&&(j.current=!0,B({start:Fe,end:Fe}))},Ee=De=>{var Ge;if(!j.current||!z)return;const Fe=(Ge=De.target.getStage())==null?void 0:Ge.getPointerPosition();Fe&&B(Je=>Je?{...Je,end:Fe}:null)},Pe=()=>{if(!j.current||!z)return;j.current=!1;const De=z.end.x-z.start.x,Fe=z.end.y-z.start.y;if(Math.sqrt(De*De+Fe*Fe)>10){let Je=Math.atan2(Fe,De)*(180/Math.PI),ze=o.rotation-Je;ze=ze%360,ze>180&&(ze-=360),ze<=-180&&(ze+=360),m({rotation:ze})}B(null)};return r?$.jsx("div",{"trae-inspector-start-line":"596","trae-inspector-start-column":"4","trae-inspector-end-line":"872","trae-inspector-end-column":"10","trae-inspector-file-path":"src/components/layout/CanvasArea.tsx","trae-inspector-static-props":"%7B%22cwd%22%3A%22%2FUsers%2Fchinakr%2Fworkspace%2Ftrae%2Fmjpic%22%7D",className:"flex-1 bg-zinc-950 overflow-hidden relative",ref:F,onDragOver:ie,onDrop:de,children:$.jsx(Ax,{width:E.width,height:E.height,ref:n,onMouseDown:xe,onMouseMove:Ee,onMouseUp:Pe,style:{cursor:y?"crosshair":"default"},children:$.jsxs(Ex,{children:[w&&$.jsxs(sh,{id:"content-group",x:E.width/2,y:E.height/2,rotation:o.rotation,children:[(pe>0||Q>0)&&$.jsx(oh,{width:G+pe*2,height:q+Q*2,offsetX:(G+pe*2)/2,offsetY:(q+Q*2)/2,fill:((Ye=o.border)==null?void 0:Ye.color)||"#ffffff",listening:!1}),$.jsx(bx,{image:w,ref:_,x:0,y:0,width:A,height:O,scaleX:L,scaleY:L,offsetX:A/2,offsetY:O/2})]}),w&&V&&te>0&&re>0&&$.jsxs(sh,{children:[$.jsx(oh,{x:Y,y:oe,width:te,height:re,fill:"rgba(0, 0, 0, 0.5)",listening:!1}),$.jsxs(sh,{ref:k,x:Y+f.x*L,y:oe+f.y*L,draggable:!0,dragBoundFunc:De=>{var ut,xt;const Fe=Y,Ge=oe,Je=Y+te,ze=oe+re,Ze=((ut=k.current)==null?void 0:ut.scaleX())||1,$e=((xt=k.current)==null?void 0:xt.scaleY())||1,Ke=f.width*L*Ze,Se=f.height*L*$e;return{x:Math.max(Fe,Math.min(De.x,Je-Ke)),y:Math.max(Ge,Math.min(De.y,ze-Se))}},onDragStart:()=>{I.current=!0},onDragMove:De=>{const Fe=De.target,Ge=(Fe.x()-Y)/L,Je=(Fe.y()-oe)/L;g({...f,x:Ge,y:Je})},onDragEnd:()=>{setTimeout(()=>{I.current=!1},50)},onTransformStart:()=>{I.current=!0},onTransformEnd:De=>{var tt,ht;const Fe=De.target,Ge=Fe.scaleX(),Je=Fe.scaleY();Fe.scaleX(1),Fe.scaleY(1);const ze=f.width*L,Ze=f.height*L;let $e=Math.max(20,ze*Ge),Ke=Math.max(20,Ze*Je);if(!J&&((tt=o.crop)!=null&&tt.aspectRatio)){const ct=o.crop.aspectRatio.split(":"),Oe=parseInt(ct[0]),on=parseInt(ct[1]),et=Oe/on;Ge>Je?Ke=$e/et:$e=Ke*et}const Se=ne-$e/L,ut=K-Ke/L,xt=Math.min(Math.max(0,(Fe.x()-Y)/L),Se),it=Math.min(Math.max(0,(Fe.y()-oe)/L),ut);g({x:xt,y:it,width:$e/L,height:Ke/L}),T.current=(ht=o.crop)==null?void 0:ht.aspectRatio,setTimeout(()=>{I.current=!1},50)},children:[$.jsx(oh,{width:f.width*L,height:f.height*L,stroke:"#3b82f6",strokeWidth:2,fill:"transparent"}),$.jsx(Hs,{points:[0,f.height*L/3,f.width*L,f.height*L/3],stroke:"rgba(255, 255, 255, 0.5)",strokeWidth:1,listening:!1}),$.jsx(Hs,{points:[0,f.height*L*2/3,f.width*L,f.height*L*2/3],stroke:"rgba(255, 255, 255, 0.5)",strokeWidth:1,listening:!1}),$.jsx(Hs,{points:[f.width*L/3,0,f.width*L/3,f.height*L],stroke:"rgba(255, 255, 255, 0.5)",strokeWidth:1,listening:!1}),$.jsx(Hs,{points:[f.width*L*2/3,0,f.width*L*2/3,f.height*L],stroke:"rgba(255, 255, 255, 0.5)",strokeWidth:1,listening:!1})]}),$.jsx(Px,{ref:N,enabledAnchors:J?["top-left","top-right","bottom-left","bottom-right","middle-left","middle-right","top-center","bottom-center"]:["top-left","top-right","bottom-left","bottom-right"],boundBoxFunc:(De,Fe)=>{var ze;if(Fe.width<20||Fe.height<20)return De;if(!J&&((ze=o.crop)!=null&&ze.aspectRatio)){const Ze=o.crop.aspectRatio.split(":"),$e=parseInt(Ze[0]),Ke=parseInt(Ze[1]),Se=$e/Ke;Math.abs(Fe.width-De.width)>Math.abs(Fe.height-De.height)?Fe.height=Fe.width/Se:Fe.width=Fe.height*Se}const Ge=Fe.x-Y,Je=Fe.y-oe;return Ge<-5||Je<-5||Ge+Fe.width>te+5||Je+Fe.height>re+5?De:Fe}})]}),R==="rotate"&&te>0&&re>0&&$.jsxs(sh,{x:Y,y:oe,width:te,height:re,listening:!1,children:[$.jsx(oh,{width:te,height:re,stroke:"rgba(255, 255, 255, 0.5)",strokeWidth:1}),$.jsx(Hs,{points:[0,re/3,te,re/3],stroke:"rgba(255, 255, 255, 0.3)",strokeWidth:1}),$.jsx(Hs,{points:[0,re*2/3,te,re*2/3],stroke:"rgba(255, 255, 255, 0.3)",strokeWidth:1}),$.jsx(Hs,{points:[te/3,0,te/3,re],stroke:"rgba(255, 255, 255, 0.3)",strokeWidth:1}),$.jsx(Hs,{points:[te*2/3,0,te*2/3,re],stroke:"rgba(255, 255, 255, 0.3)",strokeWidth:1})]}),z&&$.jsx(Hs,{points:[z.start.x,z.start.y,z.end.x,z.end.y],stroke:"#3b82f6",strokeWidth:2,dash:[5,5]})]})})}):$.jsx("div",{"trae-inspector-start-line":"585","trae-inspector-start-column":"6","trae-inspector-end-line":"591","trae-inspector-end-column":"12","trae-inspector-file-path":"src/components/layout/CanvasArea.tsx","trae-inspector-static-props":"%7B%22cwd%22%3A%22%2FUsers%2Fchinakr%2Fworkspace%2Ftrae%2Fmjpic%22%7D",className:"flex-1 flex items-center justify-center bg-zinc-950 text-zinc-500",onDragOver:ie,onDrop:de,children:b("common.dragDrop")})};function Mx(n,r){let o;try{o=n()}catch{return}return{getItem:c=>{var u;const d=g=>g===null?null:JSON.parse(g,void 0),f=(u=o.getItem(c))!=null?u:null;return f instanceof Promise?f.then(d):d(f)},setItem:(c,u)=>o.setItem(c,JSON.stringify(u,void 0)),removeItem:c=>o.removeItem(c)}}const sp=n=>r=>{try{const o=n(r);return o instanceof Promise?o:{then(l){return sp(l)(o)},catch(l){return this}}}catch(o){return{then(l){return this},catch(l){return sp(l)(o)}}}},zx=(n,r)=>(o,l,c)=>{let u={storage:Mx(()=>window.localStorage),partialize:E=>E,version:0,merge:(E,M)=>({...M,...E}),...r},d=!1,f=0;const g=new Set,m=new Set;let y=u.storage;if(!y)return n((...E)=>{console.warn(`[zustand persist middleware] Unable to update item '${u.name}', the given storage is currently unavailable.`),o(...E)},l,c);const x=()=>{const E=u.partialize({...l()});return y.setItem(u.name,{state:E,version:u.version})},R=c.setState;c.setState=(E,M)=>(R(E,M),x());const w=n((...E)=>(o(...E),x()),l,c);c.getInitialState=()=>w;let _;const b=()=>{var E,M;if(!y)return;const F=++f;d=!1,g.forEach(N=>{var T;return N((T=l())!=null?T:w)});const k=((M=u.onRehydrateStorage)==null?void 0:M.call(u,(E=l())!=null?E:w))||void 0;return sp(y.getItem.bind(y))(u.name).then(N=>{if(N)if(typeof N.version=="number"&&N.version!==u.version){if(u.migrate){const T=u.migrate(N.state,N.version);return T instanceof Promise?T.then(I=>[!0,I]):[!0,T]}console.error("State loaded from storage couldn't be migrated since no migrate function was provided")}else return[!1,N.state];return[!1,void 0]}).then(N=>{var T;if(F!==f)return;const[I,X]=N;if(_=u.merge(X,(T=l())!=null?T:w),o(_,!0),I)return x()}).then(()=>{F===f&&(k==null||k(_,void 0),_=l(),d=!0,m.forEach(N=>N(_)))}).catch(N=>{F===f&&(k==null||k(void 0,N))})};return c.persist={setOptions:E=>{u={...u,...E},E.storage&&(y=E.storage)},clearStorage:()=>{y==null||y.removeItem(u.name)},getOptions:()=>u,rehydrate:()=>b(),hasHydrated:()=>d,onHydrate:E=>(g.add(E),()=>{g.delete(E)}),onFinishHydration:E=>(m.add(E),()=>{m.delete(E)})},u.skipHydration||b(),_||w},Ox=zx,vg=[{id:"free",label:"Free",value:"Free",isDefault:!0},{id:"1:1",label:"1:1",value:"1:1",isDefault:!1},{id:"4:3",label:"4:3",value:"4:3",isDefault:!1},{id:"3:4",label:"3:4",value:"3:4",isDefault:!1},{id:"16:9",label:"16:9",value:"16:9",isDefault:!1},{id:"9:16",label:"9:16",value:"9:16",isDefault:!1},{id:"3:2",label:"3:2",value:"3:2",isDefault:!1},{id:"2:3",label:"2:3",value:"2:3",isDefault:!1}],Im=vp()(Ox(n=>({aspectRatios:vg,addAspectRatio:r=>n(o=>({aspectRatios:[...o.aspectRatios,{...r,id:crypto.randomUUID(),isDefault:!1}]})),removeAspectRatio:r=>n(o=>({aspectRatios:o.aspectRatios.filter(l=>l.id!==r||l.isDefault)})),updateAspectRatio:(r,o)=>n(l=>({aspectRatios:l.aspectRatios.map(c=>c.id===r&&!c.isDefault?{...c,...o}:c)})),reorderAspectRatios:r=>n({aspectRatios:r}),resetToDefaults:()=>n({aspectRatios:vg})}),{name:"mjpic-presets-v2"}));function Ix(){for(var n=arguments.length,r=new Array(n),o=0;o<n;o++)r[o]=arguments[o];return W.useMemo(()=>l=>{r.forEach(c=>c(l))},r)}const bh=typeof window<"u"&&typeof window.document<"u"&&typeof window.document.createElement<"u";function Tl(n){const r=Object.prototype.toString.call(n);return r==="[object Window]"||r==="[object global]"}function Rp(n){return"nodeType"in n}function Yr(n){var r,o;return n?Tl(n)?n:Rp(n)&&(r=(o=n.ownerDocument)==null?void 0:o.defaultView)!=null?r:window:window}function Ep(n){const{Document:r}=Yr(n);return n instanceof r}function Gu(n){return Tl(n)?!1:n instanceof Yr(n).HTMLElement}function jm(n){return n instanceof Yr(n).SVGElement}function Ml(n){return n?Tl(n)?n.document:Rp(n)?Ep(n)?n:Gu(n)||jm(n)?n.ownerDocument:document:document:document}const cs=bh?W.useLayoutEffect:W.useEffect;function bp(n){const r=W.useRef(n);return cs(()=>{r.current=n}),W.useCallback(function(){for(var o=arguments.length,l=new Array(o),c=0;c<o;c++)l[c]=arguments[c];return r.current==null?void 0:r.current(...l)},[])}function jx(){const n=W.useRef(null),r=W.useCallback((l,c)=>{n.current=setInterval(l,c)},[]),o=W.useCallback(()=>{n.current!==null&&(clearInterval(n.current),n.current=null)},[]);return[r,o]}function Lu(n,r){r===void 0&&(r=[n]);const o=W.useRef(n);return cs(()=>{o.current!==n&&(o.current=n)},r),o}function Hu(n,r){const o=W.useRef();return W.useMemo(()=>{const l=n(o.current);return o.current=l,l},[...r])}function yh(n){const r=bp(n),o=W.useRef(null),l=W.useCallback(c=>{c!==o.current&&(r==null||r(c,o.current)),o.current=c},[]);return[o,l]}function op(n){const r=W.useRef();return W.useEffect(()=>{r.current=n},[n]),r.current}let Wf={};function Vu(n,r){return W.useMemo(()=>{if(r)return r;const o=Wf[n]==null?0:Wf[n]+1;return Wf[n]=o,n+"-"+o},[n,r])}function Um(n){return function(r){for(var o=arguments.length,l=new Array(o>1?o-1:0),c=1;c<o;c++)l[c-1]=arguments[c];return l.reduce((u,d)=>{const f=Object.entries(d);for(const[g,m]of f){const y=u[g];y!=null&&(u[g]=y+n*m)}return u},{...r})}}const El=Um(1),Tu=Um(-1);function Ux(n){return"clientX"in n&&"clientY"in n}function Pp(n){if(!n)return!1;const{KeyboardEvent:r}=Yr(n.target);return r&&n instanceof r}function Bx(n){if(!n)return!1;const{TouchEvent:r}=Yr(n.target);return r&&n instanceof r}function ap(n){if(Bx(n)){if(n.touches&&n.touches.length){const{clientX:r,clientY:o}=n.touches[0];return{x:r,y:o}}else if(n.changedTouches&&n.changedTouches.length){const{clientX:r,clientY:o}=n.changedTouches[0];return{x:r,y:o}}}return Ux(n)?{x:n.clientX,y:n.clientY}:null}const Mu=Object.freeze({Translate:{toString(n){if(!n)return;const{x:r,y:o}=n;return"translate3d("+(r?Math.round(r):0)+"px, "+(o?Math.round(o):0)+"px, 0)"}},Scale:{toString(n){if(!n)return;const{scaleX:r,scaleY:o}=n;return"scaleX("+r+") scaleY("+o+")"}},Transform:{toString(n){if(n)return[Mu.Translate.toString(n),Mu.Scale.toString(n)].join(" ")}},Transition:{toString(n){let{property:r,duration:o,easing:l}=n;return r+" "+o+"ms "+l}}}),yg="a,frame,iframe,input:not([type=hidden]):not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),*[tabindex]";function Gx(n){return n.matches(yg)?n:n.querySelector(yg)}const Hx={display:"none"};function Vx(n){let{id:r,value:o}=n;return Et.createElement("div",{id:r,style:Hx},o)}function Wx(n){let{id:r,announcement:o,ariaLiveType:l="assertive"}=n;const c={position:"fixed",top:0,left:0,width:1,height:1,margin:-1,border:0,padding:0,overflow:"hidden",clip:"rect(0 0 0 0)",clipPath:"inset(100%)",whiteSpace:"nowrap"};return Et.createElement("div",{id:r,style:c,role:"status","aria-live":l,"aria-atomic":!0},o)}function Kx(){const[n,r]=W.useState("");return{announce:W.useCallback(l=>{l!=null&&r(l)},[]),announcement:n}}const Bm=W.createContext(null);function qx(n){const r=W.useContext(Bm);W.useEffect(()=>{if(!r)throw new Error("useDndMonitor must be used within a children of <DndContext>");return r(n)},[n,r])}function Yx(){const[n]=W.useState(()=>new Set),r=W.useCallback(l=>(n.add(l),()=>n.delete(l)),[n]);return[W.useCallback(l=>{let{type:c,event:u}=l;n.forEach(d=>{var f;return(f=d[c])==null?void 0:f.call(d,u)})},[n]),r]}const Xx={draggable:`
+`,D5={};function Eh(n,r,o=D5){if(!lg&&"zIndex"in r&&(console.warn(N5),lg=!0),!cg&&r.draggable){var l=r.x!==void 0||r.y!==void 0,c=r.onDragEnd||r.onDragMove;l&&!c&&(console.warn(A5),cg=!0)}for(var u in o)if(!ag[u]){var d=u.slice(0,2)==="on",f=o[u]!==r[u];if(d&&f){var g=u.substr(2).toLowerCase();g.substr(0,7)==="content"&&(g="content"+g.substr(7,1).toUpperCase()+g.substr(8)),n.off(g,o[u])}var m=!r.hasOwnProperty(u);m&&n.setAttr(u,void 0)}var y=r._useStrictMode,x={},R=!1;const w={};for(var u in r)if(!ag[u]){var d=u.slice(0,2)==="on",_=o[u]!==r[u];if(d&&_){var g=u.substr(2).toLowerCase();g.substr(0,7)==="content"&&(g="content"+g.substr(7,1).toUpperCase()+g.substr(8)),r[u]&&(w[g]=r[u])}!d&&(r[u]!==o[u]||y&&r[u]!==n.getAttr(u))&&(R=!0,x[u]=r[u])}R&&(n.setAttrs(x),Uo(n));for(var g in w)n.on(g+Cp,w[g])}function Uo(n){if(!P5.Konva.autoDrawEnabled){var r=n.getLayer()||n.getStage();r&&r.batchDraw()}}var Hf=dp();const Lm={},L5={};Du.Node.prototype._applyProps=Eh;function T5(n,r){if(typeof r=="string"){console.error(`Do not use plain text as child of Konva.Node. You are using text: ${r}`);return}n.add(r),Uo(n)}function M5(n,r,o){let l=Du[n];l||(console.error(`Konva has no node with the type ${n}. Group will be used instead. If you use minimal version of react-konva, just import required nodes into Konva: "import "konva/lib/shapes/${n}"  If you want to render DOM elements as part of canvas tree take a look into this demo: https://konvajs.github.io/docs/react/DOM_Portal.html`),l=Du.Group);const c={},u={};for(var d in r){var f=d.slice(0,2)==="on";f?u[d]=r[d]:c[d]=r[d]}const g=new l(c);return Eh(g,u),g}function z5(n,r,o){console.error(`Text components are not supported for now in ReactKonva. Your text is: "${n}"`)}function O5(n,r,o){return!1}function I5(n){return n}function j5(){return null}function U5(){return null}function B5(n,r,o,l){return L5}function G5(){}function H5(n){}function V5(n,r){return!1}function W5(){return Lm}function K5(){return Lm}const q5=setTimeout,Y5=clearTimeout,X5=-1;function Q5(n,r){return!1}const $5=!1,J5=!0,Z5=!0;function ex(n,r){r.parent===n?r.moveToTop():n.add(r),Uo(n)}function tx(n,r){r.parent===n?r.moveToTop():n.add(r),Uo(n)}function Tm(n,r,o){r._remove(),n.add(r),r.setZIndex(o.getZIndex()),Uo(n)}function nx(n,r,o){Tm(n,r,o)}function rx(n,r){r.destroy(),r.off(Cp),Uo(n)}function ix(n,r){r.destroy(),r.off(Cp),Uo(n)}function sx(n,r,o){console.error(`Text components are not yet supported in ReactKonva. You text is: "${o}"`)}function ox(n,r,o){}function ax(n,r,o,l,c){Eh(n,c,l)}function lx(n){n.hide(),Uo(n)}function cx(n){}function ux(n,r){(r.visible==null||r.visible)&&n.show()}function dx(n,r){}function hx(n){}function fx(){}const px=()=>Dm.DefaultEventPriority,gx=Object.freeze(Object.defineProperty({__proto__:null,appendChild:ex,appendChildToContainer:tx,appendInitialChild:T5,cancelTimeout:Y5,clearContainer:hx,commitMount:ox,commitTextUpdate:sx,commitUpdate:ax,createInstance:M5,createTextInstance:z5,detachDeletedInstance:fx,finalizeInitialChildren:O5,getChildHostContext:K5,getCurrentEventPriority:px,getPublicInstance:I5,getRootHostContext:W5,hideInstance:lx,hideTextInstance:cx,idlePriority:Hf.unstable_IdlePriority,insertBefore:Tm,insertInContainerBefore:nx,isPrimaryRenderer:$5,noTimeout:X5,now:Hf.unstable_now,prepareForCommit:j5,preparePortalMount:U5,prepareUpdate:B5,removeChild:rx,removeChildFromContainer:ix,resetAfterCommit:G5,resetTextContent:H5,run:Hf.unstable_runWithPriority,scheduleTimeout:q5,shouldDeprioritizeSubtree:V5,shouldSetTextContent:Q5,supportsMutation:Z5,unhideInstance:ux,unhideTextInstance:dx,warnsIfNotActing:J5},Symbol.toStringTag,{value:"Module"}));var mx=Object.defineProperty,vx=Object.defineProperties,yx=Object.getOwnPropertyDescriptors,ug=Object.getOwnPropertySymbols,xx=Object.prototype.hasOwnProperty,wx=Object.prototype.propertyIsEnumerable,dg=(n,r,o)=>r in n?mx(n,r,{enumerable:!0,configurable:!0,writable:!0,value:o}):n[r]=o,hg=(n,r)=>{for(var o in r||(r={}))xx.call(r,o)&&dg(n,o,r[o]);if(ug)for(var o of ug(r))wx.call(r,o)&&dg(n,o,r[o]);return n},Sx=(n,r)=>vx(n,yx(r)),fg,pg;typeof window<"u"&&((fg=window.document)!=null&&fg.createElement||((pg=window.navigator)==null?void 0:pg.product)==="ReactNative")?W.useLayoutEffect:W.useEffect;function Mm(n,r,o){if(!n)return;if(o(n)===!0)return n;let l=n.child;for(;l;){const c=Mm(l,r,o);if(c)return c;l=l.sibling}}function zm(n){try{return Object.defineProperties(n,{_currentRenderer:{get(){return null},set(){}},_currentRenderer2:{get(){return null},set(){}}})}catch{return n}}const gg=console.error;console.error=function(){const n=[...arguments].join("");if(n!=null&&n.startsWith("Warning:")&&n.includes("useContext")){console.error=gg;return}return gg.apply(this,arguments)};const Fp=zm(W.createContext(null));class Om extends W.Component{render(){return W.createElement(Fp.Provider,{value:this._reactInternals},this.props.children)}}function kx(){const n=W.useContext(Fp);if(n===null)throw new Error("its-fine: useFiber must be called within a <FiberProvider />!");const r=W.useId();return W.useMemo(()=>{for(const l of[n,n==null?void 0:n.alternate]){if(!l)continue;const c=Mm(l,!1,u=>{let d=u.memoizedState;for(;d;){if(d.memoizedState===r)return!0;d=d.next}});if(c)return c}},[n,r])}function _x(){const n=kx(),[r]=W.useState(()=>new Map);r.clear();let o=n;for(;o;){if(o.type&&typeof o.type=="object"){const c=o.type._context===void 0&&o.type.Provider===o.type?o.type:o.type._context;c&&c!==Fp&&!r.has(c)&&r.set(c,W.useContext(zm(c)))}o=o.return}return r}function Cx(){const n=_x();return W.useMemo(()=>Array.from(n.keys()).reduce((r,o)=>l=>W.createElement(r,null,W.createElement(o.Provider,Sx(hg({},l),{value:n.get(o)}))),r=>W.createElement(Om,hg({},r))),[n])}function Fx(n){const r=Et.useRef({});return Et.useLayoutEffect(()=>{r.current=n}),Et.useLayoutEffect(()=>()=>{r.current={}},[]),r.current}const Rx=n=>{const r=Et.useRef(),o=Et.useRef(),l=Et.useRef(),c=Fx(n),u=Cx(),d=f=>{const{forwardedRef:g}=n;g&&(typeof g=="function"?g(f):g.current=f)};return Et.useLayoutEffect(()=>(o.current=new Du.Stage({width:n.width,height:n.height,container:r.current}),d(o.current),l.current=Cu.createContainer(o.current,Dm.LegacyRoot,!1,null),Cu.updateContainer(Et.createElement(u,{},n.children),l.current),()=>{Du.isBrowser&&(d(null),Cu.updateContainer(null,l.current,null),o.current.destroy())}),[]),Et.useLayoutEffect(()=>{d(o.current),Eh(o.current,n,c),Cu.updateContainer(Et.createElement(u,{},n.children),l.current,null)}),Et.createElement("div",{ref:r,id:n.id,accessKey:n.accessKey,className:n.className,role:n.role,style:n.style,tabIndex:n.tabIndex,title:n.title})},Ex="Layer",sh="Group",oh="Rect",Hs="Line",bx="Image",Px="Transformer",Cu=R5(gx);Cu.injectIntoDevTools({findHostInstanceByFiber:()=>null,bundleType:0,version:Et.version,rendererPackageName:"react-konva"});const Ax=Et.forwardRef((n,r)=>Et.createElement(Om,{},Et.createElement(Rx,{...n,forwardedRef:r})));var Vf,mg;function Nx(){if(mg)return Vf;mg=1;var n=bl();return Vf=function(o,l,c){const u=n.useRef("loading"),d=n.useRef(),[f,g]=n.useState(0),m=n.useRef(),y=n.useRef(),x=n.useRef();return(m.current!==o||y.current!==l||x.current!==c)&&(u.current="loading",d.current=void 0,m.current=o,y.current=l,x.current=c),n.useLayoutEffect(function(){if(!o)return;var R=document.createElement("img");function w(){R.decode().catch(()=>{}).finally(()=>{u.current="loaded",d.current=R,g(Math.random())})}function _(){u.current="failed",d.current=void 0,g(Math.random())}return R.addEventListener("load",w),R.addEventListener("error",_),l&&(R.crossOrigin=l),c&&(R.referrerPolicy=c),R.src=o,function(){R.removeEventListener("load",w),R.removeEventListener("error",_)}},[o,l,c]),[d.current,u.current]},Vf}var Dx=Nx();const Lx=Ou(Dx),Tx=({stageRef:n})=>{var We,rt,Ye;const{previewImage:r,config:o,loadImage:l,setOriginalSize:c,originalWidth:u,originalHeight:d,cropRect:f,setCropRect:g,updateConfig:m}=Bu(),{isStraightenToolActive:y,setStraightenToolActive:x,activeTool:R}=yp(),[w]=Lx(r||"","anonymous"),_=W.useRef(null),{t:b}=Nl(),[E,M]=W.useState({width:0,height:0}),F=W.useRef(null);W.useRef(null);const k=W.useRef(null),N=W.useRef(null),T=W.useRef(void 0),I=W.useRef(!1),X=W.useRef({width:0,height:0}),[z,B]=W.useState(null),j=W.useRef(!1),V=o.crop&&o.crop.aspectRatio,J=((We=o.crop)==null?void 0:We.aspectRatio)==="Free";let A=0,O=0,L=1,G=0,q=0,Y=0,oe=0,ne=0,K=0,te=0,re=0,Z=0,ue=0,pe=0,Q=0;if(w){if(o.resize&&o.resize.width>0&&o.resize.height>0?(A=o.resize.width,O=o.resize.height):(A=w.width,O=w.height),o.border){const{size:Je=0,applyHorizontal:ze=!0,applyVertical:Ze=!1}=o.border;Je>0&&(ze&&(Z=A*(Je/100)),Ze&&(ue=O*(Je/100)))}if(ne=A+Z*2,K=O+ue*2,E.width>0&&E.height>0){const Je=(E.width-40)/ne,ze=(E.height-40)/K;L=Math.min(Je,ze,1)}G=A*L,q=O*L,pe=Z*L,Q=ue*L,te=ne*L,re=K*L;const Fe=E.width/2,Ge=E.height/2;Y=Fe-te/2,oe=Ge-re/2}W.useEffect(()=>{w&&w.width&&w.height&&(c(w.width,w.height),X.current={width:w.width,height:w.height})},[w,c]);const ie=De=>{De.preventDefault(),De.stopPropagation()},de=De=>{De.preventDefault(),De.stopPropagation();const Fe=De.dataTransfer.files;if(Fe&&Fe.length>0){const Ge=Fe[0];if(Ge.type.startsWith("image/")){const Je=new FileReader;Je.onload=ze=>{var Ze;(Ze=ze.target)!=null&&Ze.result&&l(ze.target.result,Ge.name)},Je.readAsDataURL(Ge)}}};W.useLayoutEffect(()=>{const De=()=>{if(F.current){const{offsetWidth:Ge,offsetHeight:Je}=F.current;Ge>0&&Je>0&&M({width:Ge,height:Je})}};De();const Fe=new ResizeObserver(()=>{requestAnimationFrame(De)});return F.current&&Fe.observe(F.current),window.addEventListener("resize",De),()=>{window.removeEventListener("resize",De),Fe.disconnect()}},[]),W.useEffect(()=>{w&&F.current&&(M({width:F.current.offsetWidth,height:F.current.offsetHeight}),requestAnimationFrame(()=>{n.current&&n.current.batchDraw()}))},[w]),W.useEffect(()=>{var De,Fe,Ge,Je;if(w&&_.current){const ze=_.current;ze.clearCache();const Ze=[];if(o.brightness!==0&&Ze.push(tg.Filters.Brighten),o.contrast!==0&&Ze.push(tg.Filters.Contrast),o.sharpness>0){const $e=function(Ke){const Se=o.sharpness/100;if(Se<=0)return;const ut=Ke.data,xt=Ke.width,it=Ke.height,tt=new Uint8ClampedArray(ut),ht=1+4*Se,ct=-Se;for(let Oe=1;Oe<it-1;Oe++)for(let on=1;on<xt-1;on++){const et=(Oe*xt+on)*4,Xt=et-xt*4,Cn=et+xt*4,er=et-4,ri=et+4;for(let an=0;an<3;an++){const wi=tt[et+an]*ht+(tt[Xt+an]+tt[Cn+an]+tt[er+an]+tt[ri+an])*ct;ut[et+an]=wi}}};Ze.push($e)}if((De=o.enhancements)!=null&&De.autoEnhance){const $e=function(Ke){const Se=Ke.data,ut=Ke.width,xt=Ke.height,it=8;let tt=0,ht=0,ct=0,Oe=255,on=0,et=0,Xt=0;for(let qe=0;qe<Se.length;qe+=4*it){const Vt=Se[qe],Ft=Se[qe+1],Rn=Se[qe+2];tt+=Vt,ht+=Ft,ct+=Rn;const Nt=.299*Vt+.587*Ft+.114*Rn;Nt<Oe&&(Oe=Nt),Nt>on&&(on=Nt),et+=Nt,Xt++}const Cn=tt/Xt,er=ht/Xt,ri=ct/Xt,an=et/Xt,wi=er/(Cn||1),us=er/(ri||1);let Mr=0;an<100?Mr=(100-an)*.15:an>160&&(Mr=-(an-160)*.1);const Mt=on-Oe<150?15:8,Fn=259*(Mt+255)/(255*(259-Mt));for(let qe=0;qe<Se.length;qe+=4){Se[qe]=Math.min(255,Se[qe]*wi),Se[qe+2]=Math.min(255,Se[qe+2]*us);const Vt=.299*Se[qe]+.587*Se[qe+1]+.114*Se[qe+2],Ft=Vt+Mr,Nt=(Fn*(Ft-128)+128)/(Vt||1);Se[qe]=Math.min(255,Se[qe]*Nt),Se[qe+1]=Math.min(255,Se[qe+1]*Nt),Se[qe+2]=Math.min(255,Se[qe+2]*Nt);const en=.299*Se[qe]+.587*Se[qe+1]+.114*Se[qe+2],pn=1.15;Se[qe]=Math.min(255,en+(Se[qe]-en)*pn),Se[qe+1]=Math.min(255,en+(Se[qe+1]-en)*pn),Se[qe+2]=Math.min(255,en+(Se[qe+2]-en)*pn)}const Qt=new Uint8ClampedArray(Se),tr=.3,Ln=1+4*tr,ln=-tr;for(let qe=1;qe<xt-1;qe+=2)for(let Vt=1;Vt<ut-1;Vt+=2){const Ft=(qe*ut+Vt)*4,Rn=((qe-1)*ut+Vt)*4,Nt=((qe+1)*ut+Vt)*4,en=(qe*ut+(Vt-1))*4,pn=(qe*ut+(Vt+1))*4;for(let gn=0;gn<3;gn++){const nr=Qt[Ft+gn]*Ln+(Qt[Rn+gn]+Qt[Nt+gn]+Qt[en+gn]+Qt[pn+gn])*ln;Se[Ft+gn]=Math.min(255,Math.max(0,nr))}}};Ze.push($e)}if((Fe=o.enhancements)!=null&&Fe.fillLight){const $e=function(Ke){const Se=Ke.data;Ke.width,Ke.height;const ut=8;let xt=0,it=0;for(let Oe=0;Oe<Se.length;Oe+=4*ut).299*Se[Oe]+.587*Se[Oe+1]+.114*Se[Oe+2]<80&&xt++,it++;const tt=xt/it;let ht;tt>.5?ht=.6:tt>.3?ht=.7:ht=.85;const ct=new Array(256);for(let Oe=0;Oe<256;Oe++)ct[Oe]=Math.pow(Oe/255,ht)*255;for(let Oe=0;Oe<Se.length;Oe+=4){const on=.299*Se[Oe]+.587*Se[Oe+1]+.114*Se[Oe+2];let et;on<80?et=.7:on<160?et=.4:et=.1;const Xt=ct[Se[Oe]],Cn=ct[Se[Oe+1]],er=ct[Se[Oe+2]];Se[Oe]=Math.min(245,Se[Oe]+(Xt-Se[Oe])*et),Se[Oe+1]=Math.min(245,Se[Oe+1]+(Cn-Se[Oe+1])*et),Se[Oe+2]=Math.min(245,Se[Oe+2]+(er-Se[Oe+2])*et)}};Ze.push($e)}if((Ge=o.enhancements)!=null&&Ge.autoWhiteBalance){const $e=function(Ke){const Se=Ke.data,ut=Ke.width,xt=Ke.height;let it=0,tt=0,ht=0;const ct=ut*xt;for(let et=0;et<Se.length;et+=4)it+=Se[et],tt+=Se[et+1],ht+=Se[et+2];it/=ct,tt/=ct,ht/=ct;const Oe=tt/(it||1),on=tt/(ht||1);for(let et=0;et<Se.length;et+=4)Se[et]=Math.min(255,Math.max(0,Se[et]*Oe)),Se[et+1]=Se[et+1],Se[et+2]=Math.min(255,Math.max(0,Se[et+2]*on))};Ze.push($e)}if(ze.filters(Ze),ze.brightness(o.brightness/100),ze.contrast(o.contrast),Ze.length>0)try{ze.cache({pixelRatio:1})}catch($e){console.error("Failed to cache image:",$e)}(Je=ze.getLayer())==null||Je.batchDraw()}return()=>{_.current&&_.current.clearCache()}},[o,w]),W.useEffect(()=>{N.current&&k.current&&V&&requestAnimationFrame(()=>{var De;N.current&&k.current&&(N.current.nodes([k.current]),(De=N.current.getLayer())==null||De.batchDraw())})},[V]),W.useEffect(()=>{var Ke;const De=(Ke=o.crop)==null?void 0:Ke.aspectRatio;if(!De){T.current=void 0;return}if(De===T.current||I.current||!w||w.width===0||w.height===0)return;T.current=De;let Fe=w.width,Ge=w.height;o.resize&&o.resize.width>0&&o.resize.height>0&&(Fe=o.resize.width,Ge=o.resize.height);let Je=0,ze=0;if(o.border){const{size:Se=0,applyHorizontal:ut=!0,applyVertical:xt=!1}=o.border;Se>0&&(ut&&(Je=Fe*(Se/100)),xt&&(ze=Ge*(Se/100)))}const Ze=Fe+Je*2,$e=Ge+ze*2;if(De==="Free")g({x:Math.round(Ze*.1),y:Math.round($e*.1),width:Math.round(Ze*.8),height:Math.round($e*.8)});else{const Se=De.split(":"),ut=parseInt(Se[0]),xt=parseInt(Se[1]),it=ut/xt,tt=Ze/$e;let ht,ct;tt>it?(ct=$e,ht=Math.round($e*it)):(ht=Ze,ct=Math.round(Ze/it)),g({x:Math.round((Ze-ht)/2),y:Math.round(($e-ct)/2),width:ht,height:ct})}},[(rt=o.crop)==null?void 0:rt.aspectRatio,w==null?void 0:w.width,w==null?void 0:w.height,o.border,o.resize]);const xe=De=>{var Ge;if(!y)return;const Fe=(Ge=De.target.getStage())==null?void 0:Ge.getPointerPosition();Fe&&(j.current=!0,B({start:Fe,end:Fe}))},Ee=De=>{var Ge;if(!j.current||!z)return;const Fe=(Ge=De.target.getStage())==null?void 0:Ge.getPointerPosition();Fe&&B(Je=>Je?{...Je,end:Fe}:null)},Pe=()=>{if(!j.current||!z)return;j.current=!1;const De=z.end.x-z.start.x,Fe=z.end.y-z.start.y;if(Math.sqrt(De*De+Fe*Fe)>10){let Je=Math.atan2(Fe,De)*(180/Math.PI),ze=o.rotation-Je;ze=ze%360,ze>180&&(ze-=360),ze<=-180&&(ze+=360),m({rotation:ze})}B(null)};return r?$.jsx("div",{"trae-inspector-start-line":"596","trae-inspector-start-column":"4","trae-inspector-end-line":"872","trae-inspector-end-column":"10","trae-inspector-file-path":"src/components/layout/CanvasArea.tsx","trae-inspector-static-props":"%7B%22cwd%22%3A%22%2FUsers%2Fchinakr%2Fworkspace%2Ftrae%2Fmjpic%22%7D",className:"flex-1 bg-zinc-950 overflow-hidden relative",ref:F,onDragOver:ie,onDrop:de,children:$.jsx(Ax,{width:E.width,height:E.height,ref:n,onMouseDown:xe,onMouseMove:Ee,onMouseUp:Pe,style:{cursor:y?"crosshair":"default"},children:$.jsxs(Ex,{children:[w&&$.jsxs(sh,{id:"content-group",x:E.width/2,y:E.height/2,rotation:o.rotation,children:[(pe>0||Q>0)&&$.jsx(oh,{width:G+pe*2,height:q+Q*2,offsetX:(G+pe*2)/2,offsetY:(q+Q*2)/2,fill:((Ye=o.border)==null?void 0:Ye.color)||"#ffffff",listening:!1}),$.jsx(bx,{image:w,ref:_,x:0,y:0,width:A,height:O,scaleX:L,scaleY:L,offsetX:A/2,offsetY:O/2})]}),w&&V&&te>0&&re>0&&$.jsxs(sh,{children:[$.jsx(oh,{x:Y,y:oe,width:te,height:re,fill:"rgba(0, 0, 0, 0.5)",listening:!1}),$.jsxs(sh,{ref:k,x:Y+f.x*L,y:oe+f.y*L,draggable:!0,dragBoundFunc:De=>{var ut,xt;const Fe=Y,Ge=oe,Je=Y+te,ze=oe+re,Ze=((ut=k.current)==null?void 0:ut.scaleX())||1,$e=((xt=k.current)==null?void 0:xt.scaleY())||1,Ke=f.width*L*Ze,Se=f.height*L*$e;return{x:Math.max(Fe,Math.min(De.x,Je-Ke)),y:Math.max(Ge,Math.min(De.y,ze-Se))}},onDragStart:()=>{I.current=!0},onDragMove:De=>{const Fe=De.target,Ge=(Fe.x()-Y)/L,Je=(Fe.y()-oe)/L;g({...f,x:Ge,y:Je})},onDragEnd:()=>{setTimeout(()=>{I.current=!1},50)},onTransformStart:()=>{I.current=!0},onTransformEnd:De=>{var tt,ht;const Fe=De.target,Ge=Fe.scaleX(),Je=Fe.scaleY();Fe.scaleX(1),Fe.scaleY(1);const ze=f.width*L,Ze=f.height*L;let $e=Math.max(20,ze*Ge),Ke=Math.max(20,Ze*Je);if(!J&&((tt=o.crop)!=null&&tt.aspectRatio)){const ct=o.crop.aspectRatio.split(":"),Oe=parseInt(ct[0]),on=parseInt(ct[1]),et=Oe/on;Ge>Je?Ke=$e/et:$e=Ke*et}const Se=ne-$e/L,ut=K-Ke/L,xt=Math.min(Math.max(0,(Fe.x()-Y)/L),Se),it=Math.min(Math.max(0,(Fe.y()-oe)/L),ut);g({x:xt,y:it,width:$e/L,height:Ke/L}),T.current=(ht=o.crop)==null?void 0:ht.aspectRatio,setTimeout(()=>{I.current=!1},50)},children:[$.jsx(oh,{width:f.width*L,height:f.height*L,stroke:"#3b82f6",strokeWidth:2,fill:"transparent"}),$.jsx(Hs,{points:[0,f.height*L/3,f.width*L,f.height*L/3],stroke:"rgba(255, 255, 255, 0.5)",strokeWidth:1,listening:!1}),$.jsx(Hs,{points:[0,f.height*L*2/3,f.width*L,f.height*L*2/3],stroke:"rgba(255, 255, 255, 0.5)",strokeWidth:1,listening:!1}),$.jsx(Hs,{points:[f.width*L/3,0,f.width*L/3,f.height*L],stroke:"rgba(255, 255, 255, 0.5)",strokeWidth:1,listening:!1}),$.jsx(Hs,{points:[f.width*L*2/3,0,f.width*L*2/3,f.height*L],stroke:"rgba(255, 255, 255, 0.5)",strokeWidth:1,listening:!1})]}),$.jsx(Px,{ref:N,enabledAnchors:J?["top-left","top-right","bottom-left","bottom-right","middle-left","middle-right","top-center","bottom-center"]:["top-left","top-right","bottom-left","bottom-right"],boundBoxFunc:(De,Fe)=>{var ze;if(Fe.width<20||Fe.height<20)return De;if(!J&&((ze=o.crop)!=null&&ze.aspectRatio)){const Ze=o.crop.aspectRatio.split(":"),$e=parseInt(Ze[0]),Ke=parseInt(Ze[1]),Se=$e/Ke;Math.abs(Fe.width-De.width)>Math.abs(Fe.height-De.height)?Fe.height=Fe.width/Se:Fe.width=Fe.height*Se}const Ge=Fe.x-Y,Je=Fe.y-oe;return Ge<-5||Je<-5||Ge+Fe.width>te+5||Je+Fe.height>re+5?De:Fe}})]}),R==="rotate"&&te>0&&re>0&&$.jsxs(sh,{x:Y,y:oe,width:te,height:re,listening:!1,children:[$.jsx(oh,{width:te,height:re,stroke:"rgba(255, 255, 255, 0.5)",strokeWidth:1}),$.jsx(Hs,{points:[0,re/3,te,re/3],stroke:"rgba(255, 255, 255, 0.3)",strokeWidth:1}),$.jsx(Hs,{points:[0,re*2/3,te,re*2/3],stroke:"rgba(255, 255, 255, 0.3)",strokeWidth:1}),$.jsx(Hs,{points:[te/3,0,te/3,re],stroke:"rgba(255, 255, 255, 0.3)",strokeWidth:1}),$.jsx(Hs,{points:[te*2/3,0,te*2/3,re],stroke:"rgba(255, 255, 255, 0.3)",strokeWidth:1})]}),z&&$.jsx(Hs,{points:[z.start.x,z.start.y,z.end.x,z.end.y],stroke:"#3b82f6",strokeWidth:2,dash:[5,5]})]})})}):$.jsx("div",{"trae-inspector-start-line":"585","trae-inspector-start-column":"6","trae-inspector-end-line":"591","trae-inspector-end-column":"12","trae-inspector-file-path":"src/components/layout/CanvasArea.tsx","trae-inspector-static-props":"%7B%22cwd%22%3A%22%2FUsers%2Fchinakr%2Fworkspace%2Ftrae%2Fmjpic%22%7D",className:"flex-1 flex items-center justify-center bg-zinc-950 text-zinc-500",onDragOver:ie,onDrop:de,children:b("common.dragDrop")})};function Mx(n,r){let o;try{o=n()}catch{return}return{getItem:c=>{var u;const d=g=>g===null?null:JSON.parse(g,void 0),f=(u=o.getItem(c))!=null?u:null;return f instanceof Promise?f.then(d):d(f)},setItem:(c,u)=>o.setItem(c,JSON.stringify(u,void 0)),removeItem:c=>o.removeItem(c)}}const sp=n=>r=>{try{const o=n(r);return o instanceof Promise?o:{then(l){return sp(l)(o)},catch(l){return this}}}catch(o){return{then(l){return this},catch(l){return sp(l)(o)}}}},zx=(n,r)=>(o,l,c)=>{let u={storage:Mx(()=>window.localStorage),partialize:E=>E,version:0,merge:(E,M)=>({...M,...E}),...r},d=!1,f=0;const g=new Set,m=new Set;let y=u.storage;if(!y)return n((...E)=>{console.warn(`[zustand persist middleware] Unable to update item '${u.name}', the given storage is currently unavailable.`),o(...E)},l,c);const x=()=>{const E=u.partialize({...l()});return y.setItem(u.name,{state:E,version:u.version})},R=c.setState;c.setState=(E,M)=>(R(E,M),x());const w=n((...E)=>(o(...E),x()),l,c);c.getInitialState=()=>w;let _;const b=()=>{var E,M;if(!y)return;const F=++f;d=!1,g.forEach(N=>{var T;return N((T=l())!=null?T:w)});const k=((M=u.onRehydrateStorage)==null?void 0:M.call(u,(E=l())!=null?E:w))||void 0;return sp(y.getItem.bind(y))(u.name).then(N=>{if(N)if(typeof N.version=="number"&&N.version!==u.version){if(u.migrate){const T=u.migrate(N.state,N.version);return T instanceof Promise?T.then(I=>[!0,I]):[!0,T]}console.error("State loaded from storage couldn't be migrated since no migrate function was provided")}else return[!1,N.state];return[!1,void 0]}).then(N=>{var T;if(F!==f)return;const[I,X]=N;if(_=u.merge(X,(T=l())!=null?T:w),o(_,!0),I)return x()}).then(()=>{F===f&&(k==null||k(_,void 0),_=l(),d=!0,m.forEach(N=>N(_)))}).catch(N=>{F===f&&(k==null||k(void 0,N))})};return c.persist={setOptions:E=>{u={...u,...E},E.storage&&(y=E.storage)},clearStorage:()=>{y==null||y.removeItem(u.name)},getOptions:()=>u,rehydrate:()=>b(),hasHydrated:()=>d,onHydrate:E=>(g.add(E),()=>{g.delete(E)}),onFinishHydration:E=>(m.add(E),()=>{m.delete(E)})},u.skipHydration||b(),_||w},Ox=zx,vg=[{id:"free",label:"Free",value:"Free",isDefault:!0},{id:"1:1",label:"1:1",value:"1:1",isDefault:!1},{id:"4:3",label:"4:3",value:"4:3",isDefault:!1},{id:"3:4",label:"3:4",value:"3:4",isDefault:!1},{id:"16:9",label:"16:9",value:"16:9",isDefault:!1},{id:"9:16",label:"9:16",value:"9:16",isDefault:!1},{id:"3:2",label:"3:2",value:"3:2",isDefault:!1},{id:"2:3",label:"2:3",value:"2:3",isDefault:!1}],Im=vp()(Ox(n=>({aspectRatios:vg,addAspectRatio:r=>n(o=>({aspectRatios:[...o.aspectRatios,{...r,id:crypto.randomUUID(),isDefault:!1}]})),removeAspectRatio:r=>n(o=>({aspectRatios:o.aspectRatios.filter(l=>l.id!==r||l.isDefault)})),updateAspectRatio:(r,o)=>n(l=>({aspectRatios:l.aspectRatios.map(c=>c.id===r&&!c.isDefault?{...c,...o}:c)})),reorderAspectRatios:r=>n({aspectRatios:r}),resetToDefaults:()=>n({aspectRatios:vg})}),{name:"敏捷图片-presets-v2"}));function Ix(){for(var n=arguments.length,r=new Array(n),o=0;o<n;o++)r[o]=arguments[o];return W.useMemo(()=>l=>{r.forEach(c=>c(l))},r)}const bh=typeof window<"u"&&typeof window.document<"u"&&typeof window.document.createElement<"u";function Tl(n){const r=Object.prototype.toString.call(n);return r==="[object Window]"||r==="[object global]"}function Rp(n){return"nodeType"in n}function Yr(n){var r,o;return n?Tl(n)?n:Rp(n)&&(r=(o=n.ownerDocument)==null?void 0:o.defaultView)!=null?r:window:window}function Ep(n){const{Document:r}=Yr(n);return n instanceof r}function Gu(n){return Tl(n)?!1:n instanceof Yr(n).HTMLElement}function jm(n){return n instanceof Yr(n).SVGElement}function Ml(n){return n?Tl(n)?n.document:Rp(n)?Ep(n)?n:Gu(n)||jm(n)?n.ownerDocument:document:document:document}const cs=bh?W.useLayoutEffect:W.useEffect;function bp(n){const r=W.useRef(n);return cs(()=>{r.current=n}),W.useCallback(function(){for(var o=arguments.length,l=new Array(o),c=0;c<o;c++)l[c]=arguments[c];return r.current==null?void 0:r.current(...l)},[])}function jx(){const n=W.useRef(null),r=W.useCallback((l,c)=>{n.current=setInterval(l,c)},[]),o=W.useCallback(()=>{n.current!==null&&(clearInterval(n.current),n.current=null)},[]);return[r,o]}function Lu(n,r){r===void 0&&(r=[n]);const o=W.useRef(n);return cs(()=>{o.current!==n&&(o.current=n)},r),o}function Hu(n,r){const o=W.useRef();return W.useMemo(()=>{const l=n(o.current);return o.current=l,l},[...r])}function yh(n){const r=bp(n),o=W.useRef(null),l=W.useCallback(c=>{c!==o.current&&(r==null||r(c,o.current)),o.current=c},[]);return[o,l]}function op(n){const r=W.useRef();return W.useEffect(()=>{r.current=n},[n]),r.current}let Wf={};function Vu(n,r){return W.useMemo(()=>{if(r)return r;const o=Wf[n]==null?0:Wf[n]+1;return Wf[n]=o,n+"-"+o},[n,r])}function Um(n){return function(r){for(var o=arguments.length,l=new Array(o>1?o-1:0),c=1;c<o;c++)l[c-1]=arguments[c];return l.reduce((u,d)=>{const f=Object.entries(d);for(const[g,m]of f){const y=u[g];y!=null&&(u[g]=y+n*m)}return u},{...r})}}const El=Um(1),Tu=Um(-1);function Ux(n){return"clientX"in n&&"clientY"in n}function Pp(n){if(!n)return!1;const{KeyboardEvent:r}=Yr(n.target);return r&&n instanceof r}function Bx(n){if(!n)return!1;const{TouchEvent:r}=Yr(n.target);return r&&n instanceof r}function ap(n){if(Bx(n)){if(n.touches&&n.touches.length){const{clientX:r,clientY:o}=n.touches[0];return{x:r,y:o}}else if(n.changedTouches&&n.changedTouches.length){const{clientX:r,clientY:o}=n.changedTouches[0];return{x:r,y:o}}}return Ux(n)?{x:n.clientX,y:n.clientY}:null}const Mu=Object.freeze({Translate:{toString(n){if(!n)return;const{x:r,y:o}=n;return"translate3d("+(r?Math.round(r):0)+"px, "+(o?Math.round(o):0)+"px, 0)"}},Scale:{toString(n){if(!n)return;const{scaleX:r,scaleY:o}=n;return"scaleX("+r+") scaleY("+o+")"}},Transform:{toString(n){if(n)return[Mu.Translate.toString(n),Mu.Scale.toString(n)].join(" ")}},Transition:{toString(n){let{property:r,duration:o,easing:l}=n;return r+" "+o+"ms "+l}}}),yg="a,frame,iframe,input:not([type=hidden]):not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),*[tabindex]";function Gx(n){return n.matches(yg)?n:n.querySelector(yg)}const Hx={display:"none"};function Vx(n){let{id:r,value:o}=n;return Et.createElement("div",{id:r,style:Hx},o)}function Wx(n){let{id:r,announcement:o,ariaLiveType:l="assertive"}=n;const c={position:"fixed",top:0,left:0,width:1,height:1,margin:-1,border:0,padding:0,overflow:"hidden",clip:"rect(0 0 0 0)",clipPath:"inset(100%)",whiteSpace:"nowrap"};return Et.createElement("div",{id:r,style:c,role:"status","aria-live":l,"aria-atomic":!0},o)}function Kx(){const[n,r]=W.useState("");return{announce:W.useCallback(l=>{l!=null&&r(l)},[]),announcement:n}}const Bm=W.createContext(null);function qx(n){const r=W.useContext(Bm);W.useEffect(()=>{if(!r)throw new Error("useDndMonitor must be used within a children of <DndContext>");return r(n)},[n,r])}function Yx(){const[n]=W.useState(()=>new Set),r=W.useCallback(l=>(n.add(l),()=>n.delete(l)),[n]);return[W.useCallback(l=>{let{type:c,event:u}=l;n.forEach(d=>{var f;return(f=d[c])==null?void 0:f.call(d,u)})},[n]),r]}const Xx={draggable:`
     To pick up a draggable item, press the space bar.
     While dragging, use the arrow keys to move the item.
     Press space again to drop the item in its new position, or press escape to cancel.

package/dist/client/index.html

@@ -1,11 +1,11 @@
 <!doctype html>
-<html lang="en">
+<html lang="zh">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>My Trae Project</title>
-    <script type="module" crossorigin src="/assets/index-BUIYLOn-.js"></script>
+    <title>敏捷图片 - mjpic</title>
+    <script type="module" crossorigin src="/assets/index-Bn7l1ZSh.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-BoiS81Ei.css">
   </head>
   <body>

package/index.html

@@ -1,10 +1,10 @@
 <!doctype html>
-<html lang="en">
+<html lang="zh">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>My Trae Project</title>
+    <title>敏捷图片 - mjpic</title>
     <script type="module">
       if (import.meta.hot?.on) {
         import.meta.hot.on('vite:error', (error) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mjpic",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "type": "module",
   "bin": {
     "mjpic": "./dist/cli/cli.js"

package/src/components/layout/CanvasArea.tsx

@@ -129,7 +129,7 @@ export const CanvasArea = ({ stageRef }: CanvasAreaProps) => {
         const reader = new FileReader();
         reader.onload = (event) => {
           if (event.target?.result) {
-            loadImage(event.target.result as string);
+            loadImage(event.target.result as string, file.name);
           }
         };
         reader.readAsDataURL(file);

package/src/components/layout/Header.tsx

@@ -81,7 +81,7 @@ export const Header = ({ stageRef }: HeaderProps) => {
         } else {
             // Browser Mode or API fail: Download
             const link = document.createElement('a');
-            link.download = saveFileName || 'mjpic-edit.png'; // Use provided filename
+            link.download = saveFileName || 'mjpic-edit.png';
             link.href = dataUrl;
             document.body.appendChild(link);
             link.click();

package/src/store/usePresetStore.ts

@@ -59,7 +59,7 @@ export const usePresetStore = create<PresetState>()(
       resetToDefaults: () => set({ aspectRatios: defaultAspectRatios }),
     }),
     {
-      name: 'mjpic-presets-v2', // Increment version to force reset defaults
+      name: '敏捷图片-presets-v2', // Increment version to force reset defaults
     }
   )
 );