react-screenshots 0.4.5 → 0.5.0

package/electron/assets/index.77e4c335.js

@@ -0,0 +1,14 @@
+var qe=Object.defineProperty,Je=Object.defineProperties;var Qe=Object.getOwnPropertyDescriptors;var he=Object.getOwnPropertySymbols;var ze=Object.prototype.hasOwnProperty,Ee=Object.prototype.propertyIsEnumerable;var je=(e,t,r)=>t in e?qe(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,T=(e,t)=>{for(var r in t||(t={}))ze.call(t,r)&&je(e,r,t[r]);if(he)for(var r of he(t))Ee.call(t,r)&&je(e,r,t[r]);return e},pe=(e,t)=>Je(e,Qe(t));var Be=(e,t)=>{var r={};for(var o in e)ze.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(e!=null&&he)for(var o of he(e))t.indexOf(o)<0&&Ee.call(e,o)&&(r[o]=e[o]);return r};import{R as Me,r as c,j as b,a as Ve,b as Ke}from"./vendor.e3c417b2.js";const Ze=function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const i of document.querySelectorAll('link[rel="modulepreload"]'))o(i);new MutationObserver(i=>{for(const n of i)if(n.type==="childList")for(const s of n.addedNodes)s.tagName==="LINK"&&s.rel==="modulepreload"&&o(s)}).observe(document,{childList:!0,subtree:!0});function r(i){const n={};return i.integrity&&(n.integrity=i.integrity),i.referrerpolicy&&(n.referrerPolicy=i.referrerpolicy),i.crossorigin==="use-credentials"?n.credentials="include":i.crossorigin==="anonymous"?n.credentials="omit":n.credentials="same-origin",n}function o(i){if(i.ep)return;i.ep=!0;const n=r(i);fetch(i.href,n)}};Ze();function et(e,{width:t,height:r}){return new Promise((o,i)=>{if(!e.complete)return i(new Error("image is not fully loaded"));const n=document.createElement("canvas"),s=t*window.devicePixelRatio,a=r*window.devicePixelRatio;n.width=s,n.height=a;const m=n.getContext("2d");if(!m)return i(new Error("convert image to blob fail"));m.imageSmoothingEnabled=!0,m.imageSmoothingQuality="low",m.drawImage(e,0,0,e.naturalWidth,e.naturalHeight,0,0,s,a),n.toBlob(u=>{if(!u)return i(new Error("canvas toBlob fail"));o(u)},"image/png")})}const _e={magnifier_position_label:"\u5750\u6807",operation_ok_title:"\u786E\u5B9A",operation_cancel_title:"\u53D6\u6D88",operation_save_title:"\u4FDD\u5B58",operation_redo_title:"\u91CD\u505A",operation_undo_title:"\u64A4\u9500",operation_mosaic_title:"\u9A6C\u8D5B\u514B",operation_text_title:"\u6587\u672C",operation_brush_title:"\u753B\u7B14",operation_arrow_title:"\u7BAD\u5934",operation_ellipse_title:"\u692D\u5706",operation_rectangle_title:"\u77E9\u5F62"};var ve=Me.createContext({store:{url:void 0,image:null,width:0,height:0,lang:_e,emiterRef:{current:{}},canvasContextRef:{current:null},history:{index:-1,stack:[]},bounds:null,cursor:"move",operation:void 0},dispatcher:{call:void 0,setHistory:void 0,setBounds:void 0,setCursor:void 0,setOperation:void 0}});function oe(){const{dispatcher:e}=c.exports.useContext(ve);return e}function $(){const{store:e}=c.exports.useContext(ve);return e}function U(){const{bounds:e}=$(),{setBounds:t}=oe(),r=c.exports.useCallback(i=>{t==null||t(i)},[t]),o=c.exports.useCallback(()=>{t==null||t(null)},[t]);return[e,{set:r,reset:o}]}function L(){const{lang:e}=$();return e}var J="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsMagnifier/index.tsx";const Q=100,K=80;function tt({x:e,y:t}){const{width:r,height:o,image:i}=$(),n=L(),[s,a]=c.exports.useState(null),m=c.exports.useRef(null),u=c.exports.useRef(null),p=c.exports.useRef(null),[l,f]=c.exports.useState("000000");return c.exports.useLayoutEffect(()=>{if(!m.current)return;const h=m.current.getBoundingClientRect();let x=e+20,v=t+20;x+h.width>r&&(x=e-h.width-20),v+h.height>o&&(v=t-h.height-20),x<0&&(x=0),v<0&&(v=0),a({x,y:v})},[r,o,e,t]),c.exports.useEffect(()=>{if(!i||!u.current){p.current=null;return}if(p.current||(p.current=u.current.getContext("2d")),!p.current)return;const h=p.current;h.clearRect(0,0,Q,K);const x=i.naturalWidth/r,v=i.naturalHeight/o;h.drawImage(i,e*x-Q/2,t*v-K/2,Q,K,0,0,Q,K);const{data:y}=h.getImageData(Math.floor(Q/2),Math.floor(K/2),1,1),k=Array.from(y.slice(0,3)).map(w=>w>=16?w.toString(16):`0${w.toString(16)}`).join("").toUpperCase();f(k)},[r,o,i,e,t]),b.exports.jsxDEV("div",{ref:m,className:"screenshots-magnifier",style:{transform:`translate(${s==null?void 0:s.x}px, ${s==null?void 0:s.y}px)`},children:[b.exports.jsxDEV("div",{className:"screenshots-magnifier-body",children:b.exports.jsxDEV("canvas",{ref:u,className:"screenshots-magnifier-body-canvas",width:Q,height:K},void 0,!1,{fileName:J,lineNumber:97,columnNumber:9},this)},void 0,!1,{fileName:J,lineNumber:96,columnNumber:7},this),b.exports.jsxDEV("div",{className:"screenshots-magnifier-footer",children:[b.exports.jsxDEV("div",{className:"screenshots-magnifier-footer-item",children:[n.magnifier_position_label,": (",e,",",t,")"]},void 0,!0,{fileName:J,lineNumber:105,columnNumber:9},this),b.exports.jsxDEV("div",{className:"screenshots-magnifier-footer-item",children:["RGB: #",l]},void 0,!0,{fileName:J,lineNumber:108,columnNumber:9},this)]},void 0,!0,{fileName:J,lineNumber:104,columnNumber:7},this)]},void 0,!0,{fileName:J,lineNumber:89,columnNumber:5},this)}function st({x:e,y:t},{x:r,y:o},i,n){return e>r&&([e,r]=[r,e]),t>o&&([t,o]=[o,t]),e<0&&(e=0),r>i&&(r=i),t<0&&(t=0),o>n&&(o=n),{x:e,y:t,width:r-e,height:o-t}}var me="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsBackground/index.tsx";function nt(){const{url:e,image:t,width:r,height:o}=$(),[i,n]=U(),s=c.exports.useRef(null),a=c.exports.useRef(null),m=c.exports.useRef(!1),[u,p]=c.exports.useState(null),l=c.exports.useCallback((h,x)=>{if(!s.current)return;const{x:v,y}=s.current.getBoundingClientRect();n.set(st({x:h.x-v,y:h.y-y},{x:x.x-v,y:x.y-y},r,o))},[r,o,n]),f=c.exports.useCallback(h=>{a.current||i||h.button!==0||(a.current={x:h.clientX,y:h.clientY},m.current=!1)},[i]);return c.exports.useEffect(()=>{const h=v=>{if(s.current){const y=s.current.getBoundingClientRect();v.clientX<y.left||v.clientY<y.top||v.clientX>y.right||v.clientY>y.bottom?p(null):p({x:v.clientX-y.x,y:v.clientY-y.y})}!a.current||(l(a.current,{x:v.clientX,y:v.clientY}),m.current=!0)},x=v=>{!a.current||(m.current&&l(a.current,{x:v.clientX,y:v.clientY}),a.current=null,m.current=!1)};return window.addEventListener("mousemove",h),window.addEventListener("mouseup",x),()=>{window.removeEventListener("mousemove",h),window.removeEventListener("mouseup",x)}},[l]),c.exports.useLayoutEffect(()=>{(!t||i)&&p(null)},[t,i]),!e||!t?null:b.exports.jsxDEV("div",{ref:s,className:"screenshots-background",onMouseDown:f,children:[b.exports.jsxDEV("img",{className:"screenshots-background-image",src:e},void 0,!1,{fileName:me,lineNumber:121,columnNumber:7},this),b.exports.jsxDEV("div",{className:"screenshots-background-mask"},void 0,!1,{fileName:me,lineNumber:122,columnNumber:7},this),u&&!i&&b.exports.jsxDEV(tt,{x:u==null?void 0:u.x,y:u==null?void 0:u.y},void 0,!1,{fileName:me,lineNumber:123,columnNumber:31},this)]},void 0,!0,{fileName:me,lineNumber:120,columnNumber:5},this)}function A(){const{cursor:e}=$(),{setCursor:t}=oe(),r=c.exports.useCallback(i=>{t==null||t(i)},[t]),o=c.exports.useCallback(()=>{t==null||t("move")},[t]);return[e,{set:r,reset:o}]}function Z(){const{emiterRef:e}=$(),t=c.exports.useCallback((n,s)=>{const a=e.current;Array.isArray(a[n])?a[n].push(s):a[n]=[s]},[e]),r=c.exports.useCallback((n,s)=>{const a=e.current;if(Array.isArray(a[n])){const m=a[n].findIndex(u=>u===s);m!==-1&&a[n].splice(m,1)}},[e]),o=c.exports.useCallback((n,...s)=>{const a=e.current;Array.isArray(a[n])&&a[n].forEach(m=>m(...s))},[e]),i=c.exports.useCallback(()=>{e.current={}},[e]);return{on:t,off:r,emit:o,reset:i}}var j;(function(e){e[e.Edit=0]="Edit",e[e.Source=1]="Source"})(j||(j={}));function H(){const{history:e}=$(),{setHistory:t}=oe(),r=c.exports.useCallback(p=>{const{index:l,stack:f}=e;f.forEach(h=>{h.type===j.Source&&(h.isSelected=!1)}),p.type===j.Source?p.isSelected=!0:p.type===j.Edit&&(p.source.isSelected=!0),f.splice(l+1),f.push(p),t==null||t({index:f.length-1,stack:f})},[e,t]),o=c.exports.useCallback(()=>{const{stack:p}=e;p.pop(),t==null||t({index:p.length-1,stack:p})},[e,t]),i=c.exports.useCallback(()=>{const{index:p,stack:l}=e,f=l[p];f&&(f.type===j.Source?f.isSelected=!1:f.type===j.Edit&&f.source.editHistory.pop()),t==null||t({index:p<=0?-1:p-1,stack:l})},[e,t]),n=c.exports.useCallback(()=>{const{index:p,stack:l}=e,f=l[p+1];f&&(f.type===j.Source?f.isSelected=!1:f.type===j.Edit&&f.source.editHistory.push(f)),t==null||t({index:p>=l.length-1?l.length-1:p+1,stack:l})},[e,t]),s=c.exports.useCallback(p=>{t==null||t(T({},p))},[t]),a=c.exports.useCallback(p=>{e.stack.forEach(l=>{l.type===j.Source&&(l===p?l.isSelected=!0:l.isSelected=!1)}),t==null||t(T({},e))},[e,t]),m=c.exports.useCallback(()=>{e.stack.forEach(p=>{p.type===j.Source&&(p.isSelected=!1)}),t==null||t(T({},e))},[e,t]),u=c.exports.useCallback(()=>{t==null||t({index:-1,stack:[]})},[t]);return[{index:e.index,stack:e.stack,top:e.stack.slice(e.index,e.index+1)[0]},{push:r,pop:o,undo:i,redo:n,set:s,select:a,clearSelect:m,reset:u}]}function G(){const{operation:e}=$(),{setOperation:t}=oe(),r=c.exports.useCallback(i=>{t==null||t(i)},[t]),o=c.exports.useCallback(()=>{t==null||t(void 0)},[t]);return[e,{set:r,reset:o}]}function rt({x:e,y:t},{x:r,y:o},i,n,s,a){return e>r&&([e,r]=[r,e]),t>o&&([t,o]=[o,t]),e<0&&(e=0,a==="move"&&(r=i.width)),r>n&&(r=n,a==="move"&&(e=r-i.width)),t<0&&(t=0,a==="move"&&(o=i.height)),o>s&&(o=s,a==="move"&&(t=o-i.height)),{x:e,y:t,width:Math.max(r-e,1),height:Math.max(o-t,1)}}function ot(e,t,r,o){const i=e.clientX-r.x,n=e.clientY-r.y;let s=o.x,a=o.y,m=o.x+o.width,u=o.y+o.height;switch(t){case"top":a+=n;break;case"top-right":m+=i,a+=n;break;case"right":m+=i;break;case"right-bottom":m+=i,u+=n;break;case"bottom":u+=n;break;case"bottom-left":s+=i,u+=n;break;case"left":s+=i;break;case"left-top":s+=i,a+=n;break;case"move":s+=i,a+=n,m+=i,u+=n;break}return[{x:s,y:a},{x:m,y:u}]}function it(e,t,r,o){if(!t)return!1;const i=document.createElement("canvas");i.width=e.width,i.height=e.height;const n=i.getContext("2d");if(!n)return!1;const{left:s,top:a}=t.getBoundingClientRect(),m=o.clientX-s,u=o.clientY-a;return[...r.stack.slice(0,r.index+1)].reverse().find(l=>{var f;return l.type!==j.Source?!1:(n.clearRect(0,0,e.width,e.height),(f=l.isHit)==null?void 0:f.call(l,n,l,{x:m,y:u}))})}var ie="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsCanvas/index.tsx";const ct=["top","right","bottom","left"];var Y;(function(e){e.ResizeTop="top",e.ResizetopRight="top-right",e.ResizeRight="right",e.ResizeRightBottom="right-bottom",e.ResizeBottom="bottom",e.ResizeBottomLeft="bottom-left",e.ResizeLeft="left",e.ResizeLeftTop="left-top",e.Move="move"})(Y||(Y={}));const at=[Y.ResizeTop,Y.ResizetopRight,Y.ResizeRight,Y.ResizeRightBottom,Y.ResizeBottom,Y.ResizeBottomLeft,Y.ResizeLeft,Y.ResizeLeftTop];var ut=c.exports.forwardRef(function(t,r){const{image:o,width:i,height:n}=$(),s=Z(),[a]=H(),[m]=A(),[u,p]=U(),[l]=G(),f=c.exports.useRef(),h=c.exports.useRef(null),x=c.exports.useRef(null),v=c.exports.useRef(null),y=c.exports.useRef(null),k=c.exports.useCallback(()=>{if(!o||!u||!y.current)return;const d=o.naturalWidth/i,g=o.naturalHeight/n,N=y.current;N.imageSmoothingEnabled=!0,N.imageSmoothingQuality="low",N.setTransform(window.devicePixelRatio,0,0,window.devicePixelRatio,0,0),N.clearRect(0,0,u.width,u.height),N.drawImage(o,u.x*d,u.y*g,u.width*d,u.height*g,0,0,u.width,u.height),a.stack.slice(0,a.index+1).forEach(C=>{C.type===j.Source&&C.draw(N,C)})},[o,i,n,u,y,a]),w=c.exports.useCallback((d,g)=>{if(!(d.button!==0||!u))if(!l)f.current=g,h.current={x:d.clientX,y:d.clientY},x.current={x:u.x,y:u.y,width:u.width,height:u.height};else{const N=it(u,v.current,a,d.nativeEvent);N?s.emit("drawselect",N,d.nativeEvent):s.emit("mousedown",d.nativeEvent)}},[u,l,s,a]),z=c.exports.useCallback(d=>{if(!f.current||!h.current||!x.current||!u)return;const g=ot(d,f.current,h.current,x.current);p.set(rt(g[0],g[1],u,i,n,f.current))},[i,n,u,p]);return c.exports.useLayoutEffect(()=>{if(!o||!u||!v.current){y.current=null;return}y.current||(y.current=v.current.getContext("2d")),k()},[o,u,k]),c.exports.useEffect(()=>{const d=N=>{if(l)s.emit("mousemove",N);else{if(!f.current||!h.current||!x.current)return;z(N)}},g=N=>{if(l)s.emit("mouseup",N);else{if(!f.current||!h.current||!x.current)return;z(N),f.current=void 0,h.current=null,x.current=null}};return window.addEventListener("mousemove",d),window.addEventListener("mouseup",g),()=>{window.removeEventListener("mousemove",d),window.removeEventListener("mouseup",g)}},[z,l,s]),c.exports.useImperativeHandle(r,()=>y.current),u?b.exports.jsxDEV("div",{className:"screenshots-canvas",style:{left:u.x,top:u.y,width:u.width,height:u.height},children:[b.exports.jsxDEV("canvas",{ref:v,width:u.width*window.devicePixelRatio,height:u.height*window.devicePixelRatio,style:{width:u.width,height:u.height}},void 0,!1,{fileName:ie,lineNumber:199,columnNumber:7},this),b.exports.jsxDEV("div",{className:"screenshots-canvas-body",style:{cursor:m},onMouseDown:d=>w(d,"move")},void 0,!1,{fileName:ie,lineNumber:208,columnNumber:7},this),ct.map(d=>b.exports.jsxDEV("div",{className:`screenshots-canvas-border-${d}`},d,!1,{fileName:ie,lineNumber:216,columnNumber:16},this)),at.map(d=>b.exports.jsxDEV("div",{className:`screenshots-canvas-point-${d}`,onMouseDown:g=>w(g,d)},d,!1,{fileName:ie,lineNumber:220,columnNumber:11},this))]},void 0,!0,{fileName:ie,lineNumber:190,columnNumber:5},this):null});function ye(){const e=oe();return c.exports.useCallback((r,...o)=>{var i;(i=e.call)==null||i.call(e,r,...o)},[e])}function W(){const{canvasContextRef:e}=$();return e}function Ne(){const e=Z(),[,t]=U(),[,r]=A(),[,o]=H(),[,i]=G();return c.exports.useCallback(()=>{e.reset(),o.reset(),t.reset(),r.reset(),i.reset()},[e,o,t,r,i])}var Ce="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsOption/index.tsx",q;(function(e){e.Bottom="bottom",e.Top="top"})(q||(q={}));function lt({open:e,content:t,children:r}){const o=c.exports.useRef(null),i=c.exports.useRef(null),n=c.exports.useRef(null),s=c.exports.useContext(We),[a,m]=c.exports.useState(q.Bottom),[u,p]=c.exports.useState(null),[l,f]=c.exports.useState(0),h=()=>(i.current||(i.current=document.createElement("div")),i.current);return c.exports.useEffect(()=>{const x=h();return e&&document.body.appendChild(x),()=>{x.remove()}},[e]),c.exports.useEffect(()=>{if(!e||!s||!o.current||!n.current)return;const x=o.current.getBoundingClientRect(),v=n.current.getBoundingClientRect();let y=a,k=x.left+x.width/2,w=x.top+x.height,z=l;if(k+v.width/2>s.x+s.width){const d=k;k=s.x+s.width-v.width/2,z=d-k}if(k<s.x+v.width/2){const d=k;k=s.x+v.width/2,z=d-k}w>window.innerHeight-v.height&&(y===q.Bottom&&(y=q.Top),w=x.top-v.height),w<0&&(y===q.Top&&(y=q.Bottom),w=x.top+x.height),y!==a&&m(y),((u==null?void 0:u.x)!==k||u.y!==w)&&p({x:k,y:w}),z!==l&&f(z)}),b.exports.jsxDEV(b.exports.Fragment,{children:[c.exports.cloneElement(r,{ref:o}),e&&t&&Ve.exports.createPortal(b.exports.jsxDEV("div",{ref:n,className:"screenshots-option",style:{visibility:u?"visible":"hidden",left:u==null?void 0:u.x,top:u==null?void 0:u.y},"data-placement":a,children:[b.exports.jsxDEV("div",{className:"screenshots-option-container",children:t},void 0,!1,{fileName:Ce,lineNumber:121,columnNumber:13},this),b.exports.jsxDEV("div",{className:"screenshots-option-arrow",style:{marginLeft:l}},void 0,!1,{fileName:Ce,lineNumber:122,columnNumber:13},this)]},void 0,!0,{fileName:Ce,lineNumber:111,columnNumber:11},this),h())]},void 0,!0)}var we="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsButton/index.tsx";function P({title:e,icon:t,checked:r,disabled:o,option:i,onClick:n}){const s=["screenshots-button"],a=c.exports.useCallback(m=>{o||!n||n(m)},[o,n]);return r&&s.push("screenshots-button-checked"),o&&s.push("screenshots-button-disabled"),b.exports.jsxDEV(lt,{open:r,content:i,children:b.exports.jsxDEV("div",{className:s.join(" "),title:e,onClick:a,children:b.exports.jsxDEV("span",{className:t},void 0,!1,{fileName:we,lineNumber:44,columnNumber:9},this)},void 0,!1,{fileName:we,lineNumber:43,columnNumber:7},this)},void 0,!1,{fileName:we,lineNumber:42,columnNumber:5},this)}var ft="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Ok/index.tsx";function ht(){const e=L(),t=W(),[,r]=H(),o=ye(),[i]=U(),n=Ne(),s=c.exports.useCallback(()=>{r.clearSelect(),setTimeout(()=>{!t.current||t.current.canvas.toBlob(a=>{o("onOk",a,i),n()},"image/png")})},[t,r,o,i,n]);return b.exports.jsxDEV(P,{title:e.operation_ok_title,icon:"icon-ok",onClick:s},void 0,!1,{fileName:ft,lineNumber:31,columnNumber:10},this)}var pt="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Cancel/index.tsx";function mt(){const e=ye(),t=Ne(),r=L(),o=c.exports.useCallback(()=>{e("onCancel"),t()},[e,t]);return b.exports.jsxDEV(P,{title:r.operation_cancel_title,icon:"icon-cancel",onClick:o},void 0,!1,{fileName:pt,lineNumber:17,columnNumber:10},this)}var dt="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Save/index.tsx";function xt(){const e=L(),t=W(),[,r]=H(),[o]=U(),i=ye(),n=Ne(),s=c.exports.useCallback(()=>{r.clearSelect(),setTimeout(()=>{!t.current||t.current.canvas.toBlob(a=>{i("onSave",a,o),n()},"image/png")})},[t,r,o,i,n]);return b.exports.jsxDEV(P,{title:e.operation_save_title,icon:"icon-save",onClick:s},void 0,!1,{fileName:dt,lineNumber:31,columnNumber:10},this)}var gt="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Redo/index.tsx";function bt(){const e=L(),[t,r]=H(),o=c.exports.useCallback(()=>{r.redo()},[r]);return b.exports.jsxDEV(P,{title:e.operation_redo_title,icon:"icon-redo",disabled:!t.stack.length||t.stack.length-1===t.index,onClick:o},void 0,!1,{fileName:gt,lineNumber:15,columnNumber:5},this)}var vt="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Undo/index.tsx";function yt(){const e=L(),[t,r]=H(),o=c.exports.useCallback(()=>{r.undo()},[r]);return b.exports.jsxDEV(P,{title:e.operation_undo_title,icon:"icon-undo",disabled:t.index===-1,onClick:o},void 0,!1,{fileName:vt,lineNumber:15,columnNumber:5},this)}var Re="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsSize/index.tsx";function $e({value:e,onChange:t}){const r=[3,6,9];return b.exports.jsxDEV("div",{className:"screenshots-size",children:r.map(o=>{const i=["screenshots-size-item"];return o===e&&i.push("screenshots-size-active"),b.exports.jsxDEV("div",{className:i.join(" "),onClick:()=>t&&t(o),children:b.exports.jsxDEV("div",{className:"screenshots-size-pointer",style:{width:o*1.8,height:o*1.8}},void 0,!1,{fileName:Re,lineNumber:22,columnNumber:13},this)},o,!1,{fileName:Re,lineNumber:21,columnNumber:11},this)})},void 0,!1,{fileName:Re,lineNumber:12,columnNumber:5},this)}function ee(e){const t=Z();c.exports.useEffect(()=>(t.on("mousedown",e),()=>{t.off("mousedown",e)}),[e,t])}function te(e){const t=Z();c.exports.useEffect(()=>(t.on("mousemove",e),()=>{t.off("mousemove",e)}),[e,t])}function se(e){const t=Z();c.exports.useEffect(()=>(t.on("mouseup",e),()=>{t.off("mouseup",e)}),[e,t])}var Le="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Mosaic/index.tsx";function de(e,t,r){if(!r)return[0,0,0,0];const{data:o,width:i}=r,n=t*i*4+e*4;return Array.from(o.slice(n,n+4))}function Nt(e,t){const{tiles:r,size:o}=t.data;r.forEach(i=>{const n=Math.round(i.color[0]),s=Math.round(i.color[1]),a=Math.round(i.color[2]),m=i.color[3]/255;e.fillStyle=`rgba(${n}, ${s}, ${a}, ${m})`,e.fillRect(i.x-o/2,i.y-o/2,o,o)})}function Ct(){const e=L(),{image:t,width:r,height:o}=$(),[i,n]=G(),s=W(),[a,m]=H(),[u]=U(),[,p]=A(),[l,f]=c.exports.useState(3),h=c.exports.useRef(null),x=c.exports.useRef(null),v=i==="Mosaic",y=c.exports.useCallback(()=>{n.set("Mosaic"),p.set("crosshair")},[n,p]),k=c.exports.useCallback(()=>{v||(y(),m.clearSelect())},[v,y,m]),w=c.exports.useCallback(g=>{if(!v||x.current||!h.current||!s.current)return;const N=s.current.canvas.getBoundingClientRect(),C=g.clientX-N.x,S=g.clientY-N.y,E=l*2;x.current={name:"Mosaic",type:j.Source,data:{size:E,tiles:[{x:C,y:S,color:de(C,S,h.current)}]},editHistory:[],draw:Nt}},[v,l,s]),z=c.exports.useCallback(g=>{if(!v||!x.current||!s.current||!h.current)return;const N=s.current.canvas.getBoundingClientRect(),C=g.clientX-N.x,S=g.clientY-N.y,E=x.current.data.size,D=x.current.data.tiles;let R=D[D.length-1];if(!R)D.push({x:C,y:S,color:de(C,S,h.current)});else{const O=R.x-C,B=R.y-S;let _=Math.sqrt(O**2+B**2);const ge=-B/_,be=-O/_;for(;_>E;){const ne=Math.floor(R.x+E*be),re=Math.floor(R.y+E*ge);R={x:ne,y:re,color:de(ne,re,h.current)},D.push(R),_-=E}_>E/2&&D.push({x:C,y:S,color:de(C,S,h.current)})}a.top!==x.current?m.push(x.current):m.set(a)},[v,s,a,m]),d=c.exports.useCallback(()=>{!v||(x.current=null)},[v]);return ee(w),te(z),se(d),c.exports.useEffect(()=>{if(!u||!t||!v)return;const g=document.createElement("canvas"),N=g.getContext("2d");if(!N)return;g.width=u.width,g.height=u.height;const C=t.naturalWidth/r,S=t.naturalHeight/o;N.drawImage(t,u.x*C,u.y*S,u.width*C,u.height*S,0,0,u.width,u.height),h.current=N.getImageData(0,0,u.width,u.height)},[r,o,u,t,v]),b.exports.jsxDEV(P,{title:e.operation_mosaic_title,icon:"icon-mosaic",checked:v,onClick:k,option:b.exports.jsxDEV($e,{value:l,onChange:f},void 0,!1,{fileName:Le,lineNumber:220,columnNumber:15},this)},void 0,!1,{fileName:Le,lineNumber:215,columnNumber:5},this)}var He="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsColor/index.tsx";function wt({value:e,onChange:t}){const r=["#ee5126","#fceb4d","#90e746","#51c0fa","#7a7a7a","#ffffff"];return b.exports.jsxDEV("div",{className:"screenshots-color",children:r.map(o=>{const i=["screenshots-color-item"];return o===e&&i.push("screenshots-color-active"),b.exports.jsxDEV("div",{className:i.join(" "),style:{backgroundColor:o},onClick:()=>t&&t(o)},o,!1,{fileName:He,lineNumber:19,columnNumber:11},this)})},void 0,!1,{fileName:He,lineNumber:12,columnNumber:5},this)}var Se="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsSizeColor/index.tsx";function ce({size:e,color:t,onSizeChange:r,onColorChange:o}){return b.exports.jsxDEV("div",{className:"screenshots-sizecolor",children:[b.exports.jsxDEV($e,{value:e,onChange:r},void 0,!1,{fileName:Se,lineNumber:16,columnNumber:7},this),b.exports.jsxDEV(wt,{value:t,onChange:o},void 0,!1,{fileName:Se,lineNumber:17,columnNumber:7},this)]},void 0,!0,{fileName:Se,lineNumber:15,columnNumber:5},this)}const Rt=`
+min-width: 0 !important;
+width: 0 !important;
+min-height: 0 !important;
+height:0 !important;
+visibility: hidden !important;
+overflow: hidden !important;
+position: absolute !important;
+z-index: -1000 !important;
+top:0 !important;
+right:0 !important;
+`,St=["letter-spacing","line-height","padding-top","padding-bottom","font-family","font-weight","font-size","font-variant","text-rendering","text-transform","text-indent","padding-left","padding-right","border-width","box-sizing","white-space","word-break"];let I;function kt(e){const t=window.getComputedStyle(e),r=t.getPropertyValue("box-sizing")||t.getPropertyValue("-moz-box-sizing")||t.getPropertyValue("-webkit-box-sizing"),o=parseFloat(t.getPropertyValue("padding-bottom"))+parseFloat(t.getPropertyValue("padding-top")),i=parseFloat(t.getPropertyValue("border-bottom-width"))+parseFloat(t.getPropertyValue("border-top-width"));return{sizingStyle:St.map(s=>`${s}:${t.getPropertyValue(s)}`).join(";"),paddingSize:o,borderSize:i,boxSizing:r}}function Dt(e,t,r,o){I||(I=document.createElement("textarea"),I.setAttribute("tab-index","-1"),document.body.appendChild(I));const{paddingSize:i,borderSize:n,boxSizing:s,sizingStyle:a}=kt(e);I.setAttribute("style",`${a};${Rt};max-width:${r}px;max-height:${o}px`),I.value=t||" ";let m=I.scrollWidth,u=I.scrollHeight;return s==="border-box"?(m+=n,u+=n):s==="content-box"&&(m-=i,u-=i),{width:Math.min(m,r),height:Math.min(u,o)}}var zt="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsTextarea/index.tsx";function Et({x:e,y:t,maxWidth:r,maxHeight:o,size:i,color:n,value:s,onChange:a,onBlur:m}){const u=c.exports.useRef(null),p=c.exports.useRef(null),[l,f]=c.exports.useState(0),[h,x]=c.exports.useState(0),v=()=>(u.current||(u.current=document.createElement("div")),u.current);return c.exports.useLayoutEffect(()=>(u.current&&(document.body.appendChild(u.current),requestAnimationFrame(()=>{var y;(y=p.current)==null||y.focus()})),()=>{var y;(y=u.current)==null||y.remove()}),[]),c.exports.useLayoutEffect(()=>{if(!p.current)return;const{width:y,height:k}=Dt(p.current,s,r,o);f(y),x(k)},[s,r,o]),Ve.exports.createPortal(b.exports.jsxDEV("textarea",{ref:p,className:"screenshots-textarea",style:{left:e,top:t,color:n,width:l,height:h,maxWidth:r,maxHeight:o,fontSize:i,lineHeight:`${i}px`},value:s,onChange:y=>a&&a(y.target.value),onBlur:y=>m&&m(y)},void 0,!1,{fileName:zt,lineNumber:65,columnNumber:5},this),v())}function ae(e){const t=Z();c.exports.useEffect(()=>(t.on("drawselect",e),()=>{t.off("drawselect",e)}),[e,t])}var ke="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Text/index.tsx";const De={3:18,6:32,9:46};function jt(e,t){const{size:r,color:o,fontFamily:i,x:n,y:s,text:a}=t.data;e.fillStyle=o,e.textAlign="left",e.textBaseline="top",e.font=`${r}px ${i}`;const m=t.editHistory.reduce((u,{data:p})=>({x:u.x+p.x2-p.x1,y:u.y+p.y2-p.y1}),{x:0,y:0});a.split(`
+`).forEach((u,p)=>{e.fillText(u,n+m.x,s+m.y+p*r)})}function Bt(e,t,r){e.textAlign="left",e.textBaseline="top",e.font=`${t.data.size}px ${t.data.fontFamily}`;let o=0,i=0;t.data.text.split(`
+`).forEach(l=>{const f=e.measureText(l);o<f.width&&(o=f.width),i+=t.data.size});const{x:n,y:s}=t.editHistory.reduce((l,{data:f})=>({x:l.x+f.x2-f.x1,y:l.y+f.y2-f.y1}),{x:0,y:0}),a=t.data.x+n,m=t.data.y+s,u=a+o,p=m+i;return r.x>=a&&r.x<=u&&r.y>=m&&r.y<=p}function Mt(){const e=L(),[t,r]=H(),[o]=U(),[i,n]=G(),[,s]=A(),a=W(),[m,u]=c.exports.useState(3),[p,l]=c.exports.useState("#ee5126"),f=c.exports.useRef(null),h=c.exports.useRef(null),[x,v]=c.exports.useState(null),[y,k]=c.exports.useState(""),w=i==="Text",z=c.exports.useCallback(()=>{n.set("Text"),s.set("default")},[n,s]),d=c.exports.useCallback(()=>{w||(z(),r.clearSelect())},[w,z,r]),g=c.exports.useCallback(B=>{f.current&&(f.current.data.size=De[B]),u(B)},[]),N=c.exports.useCallback(B=>{f.current&&(f.current.data.color=B),l(B)},[]),C=c.exports.useCallback(B=>{k(B),w&&f.current&&(f.current.data.text=B)},[w]),S=c.exports.useCallback(()=>{f.current&&f.current.data.text&&r.push(f.current),f.current=null,k(""),v(null)},[r]),E=c.exports.useCallback((B,_)=>{B.name==="Text"&&(z(),h.current={type:j.Edit,data:{x1:_.clientX,y1:_.clientY,x2:_.clientX,y2:_.clientY},source:B},r.select(B))},[z,r]),D=c.exports.useCallback(B=>{if(!w||!a.current||f.current||!o)return;const{left:_,top:ge}=a.current.canvas.getBoundingClientRect(),be=window.getComputedStyle(a.current.canvas).fontFamily,ne=B.clientX-_,re=B.clientY-ge;f.current={name:"Text",type:j.Source,data:{size:De[m],color:p,fontFamily:be,x:ne,y:re,text:""},editHistory:[],draw:jt,isHit:Bt},v({x:B.clientX,y:B.clientY,maxWidth:o.width-ne,maxHeight:o.height-re})},[w,m,p,o,a]),R=c.exports.useCallback(B=>{!w||h.current&&(h.current.data.x2=B.clientX,h.current.data.y2=B.clientY,t.top!==h.current?(h.current.source.editHistory.push(h.current),r.push(h.current)):r.set(t))},[w,t,r]),O=c.exports.useCallback(()=>{!w||(h.current=null)},[w]);return ae(E),ee(D),te(R),se(O),b.exports.jsxDEV(b.exports.Fragment,{children:[b.exports.jsxDEV(P,{title:e.operation_text_title,icon:"icon-text",checked:w,onClick:d,option:b.exports.jsxDEV(ce,{size:m,color:p,onSizeChange:g,onColorChange:N},void 0,!1,{fileName:ke,lineNumber:261,columnNumber:11},this)},void 0,!1,{fileName:ke,lineNumber:255,columnNumber:7},this),w&&x&&b.exports.jsxDEV(Et,{x:x.x,y:x.y,maxWidth:x.maxWidth,maxHeight:x.maxHeight,size:De[m],color:p,value:y,onChange:C,onBlur:S},void 0,!1,{fileName:ke,lineNumber:265,columnNumber:9},this)]},void 0,!0)}const Pe=4;function M(e,t,r){e.lineWidth=1,e.strokeStyle="#000000",e.fillStyle="#ffffff",e.beginPath(),e.arc(t,r,Pe,0,2*Math.PI),e.fill(),e.stroke()}function xe(e,t,r){t.draw(e,t);const{data:o}=e.getImageData(r.x,r.y,1,1);return o.some(i=>i!==0)}function V(e,t,r){if(!e)return!1;const{left:o,top:i}=e.getBoundingClientRect(),n=t.clientX-o,s=t.clientY-i;return(r.x-n)**2+(r.y-s)**2<Pe**2}function Vt(e,t){const{size:r,color:o,points:i}=t.data;e.lineCap="round",e.lineJoin="round",e.lineWidth=r,e.strokeStyle=o;const n=t.editHistory.reduce((s,{data:a})=>({x:s.x+a.x2-a.x1,y:s.y+a.y2-a.y1}),{x:0,y:0});e.beginPath(),i.forEach((s,a)=>{a===0?e.moveTo(s.x+n.x,s.y+n.y):e.lineTo(s.x+n.x,s.y+n.y)}),e.stroke(),t.isSelected&&(e.lineWidth=1,e.strokeStyle="#000000",e.beginPath(),i.forEach((s,a)=>{a===0?e.moveTo(s.x+n.x,s.y+n.y):e.lineTo(s.x+n.x,s.y+n.y)}),e.stroke())}var Xe="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Brush/index.tsx";function _t(){const e=L(),[,t]=A(),[r,o]=G(),i=W(),[n,s]=H(),[a,m]=c.exports.useState(3),[u,p]=c.exports.useState("#ee5126"),l=c.exports.useRef(null),f=c.exports.useRef(null),h=r==="Brush",x=c.exports.useCallback(()=>{o.set("Brush"),t.set("default")},[o,t]),v=c.exports.useCallback(()=>{h||(x(),s.clearSelect())},[h,x,s]),y=c.exports.useCallback((d,g)=>{d.name==="Brush"&&(x(),f.current={type:j.Edit,data:{x1:g.clientX,y1:g.clientY,x2:g.clientX,y2:g.clientY},source:d},s.select(d))},[x,s]),k=c.exports.useCallback(d=>{if(!h||l.current||!i.current)return;const{left:g,top:N}=i.current.canvas.getBoundingClientRect();l.current={name:"Brush",type:j.Source,data:{size:a,color:u,points:[{x:d.clientX-g,y:d.clientY-N}]},editHistory:[],draw:Vt,isHit:xe}},[h,i,a,u]),w=c.exports.useCallback(d=>{if(!(!h||!i.current)){if(f.current)f.current.data.x2=d.clientX,f.current.data.y2=d.clientY,n.top!==f.current?(f.current.source.editHistory.push(f.current),s.push(f.current)):s.set(n);else if(l.current){const{left:g,top:N}=i.current.canvas.getBoundingClientRect();l.current.data.points.push({x:d.clientX-g,y:d.clientY-N}),n.top!==l.current?s.push(l.current):s.set(n)}}},[h,n,i,s]),z=c.exports.useCallback(()=>{!h||(l.current&&s.clearSelect(),l.current=null,f.current=null)},[h,s]);return ae(y),ee(k),te(w),se(z),b.exports.jsxDEV(P,{title:e.operation_brush_title,icon:"icon-brush",checked:h,onClick:v,option:b.exports.jsxDEV(ce,{size:a,color:u,onSizeChange:m,onColorChange:p},void 0,!1,{fileName:Xe,lineNumber:166,columnNumber:15},this)},void 0,!1,{fileName:Xe,lineNumber:161,columnNumber:5},this)}function Fe(e){let{x1:t,y1:r,x2:o,y2:i}=e.data;return e.editHistory.forEach(({data:n})=>{const s=n.x2-n.x1,a=n.y2-n.y1;n.type===ue.Move?(t+=s,r+=a,o+=s,i+=a):n.type===ue.MoveStart?(t+=s,r+=a):n.type===ue.MoveEnd&&(o+=s,i+=a)}),pe(T({},e.data),{x1:t,x2:o,y1:r,y2:i})}function $t(e,t){const{size:r,color:o,x1:i,x2:n,y1:s,y2:a}=Fe(t);e.lineCap="round",e.lineJoin="bevel",e.lineWidth=r,e.strokeStyle=o;const m=n-i,u=a-s,p=r*3,l=Math.atan2(u,m);e.beginPath(),e.moveTo(i,s),e.lineTo(n,a),e.lineTo(n-p*Math.cos(l-Math.PI/6),a-p*Math.sin(l-Math.PI/6)),e.moveTo(n,a),e.lineTo(n-p*Math.cos(l+Math.PI/6),a-p*Math.sin(l+Math.PI/6)),e.stroke(),t.isSelected&&(M(e,i,s),M(e,n,a))}var Ye="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Arrow/index.tsx",ue;(function(e){e[e.Move=0]="Move",e[e.MoveStart=1]="MoveStart",e[e.MoveEnd=2]="MoveEnd"})(ue||(ue={}));function Lt(){const e=L(),[,t]=A(),[r,o]=G(),[i,n]=H(),s=W(),[a,m]=c.exports.useState(3),[u,p]=c.exports.useState("#ee5126"),l=c.exports.useRef(null),f=c.exports.useRef(null),h=r==="Arrow",x=c.exports.useCallback(()=>{o.set("Arrow"),t.set("default")},[o,t]),v=c.exports.useCallback(()=>{h||(x(),n.clearSelect())},[h,x,n]),y=c.exports.useCallback((d,g)=>{if(d.name!=="Arrow"||!s.current)return;const N=d;x();const{x1:C,y1:S,x2:E,y2:D}=Fe(N);let R=0;V(s.current.canvas,g,{x:C,y:S})?R=1:V(s.current.canvas,g,{x:E,y:D})&&(R=2),f.current={type:j.Edit,data:{type:R,x1:g.clientX,y1:g.clientY,x2:g.clientX,y2:g.clientY},source:N},n.select(d)},[s,x,n]),k=c.exports.useCallback(d=>{if(!h||l.current||!s.current)return;const{left:g,top:N}=s.current.canvas.getBoundingClientRect();l.current={name:"Arrow",type:j.Source,data:{size:a,color:u,x1:d.clientX-g,y1:d.clientY-N,x2:d.clientX-g,y2:d.clientY-N},editHistory:[],draw:$t,isHit:xe}},[h,u,a,s]),w=c.exports.useCallback(d=>{if(!(!h||!s.current)){if(f.current)f.current.data.x2=d.clientX,f.current.data.y2=d.clientY,i.top!==f.current?(f.current.source.editHistory.push(f.current),n.push(f.current)):n.set(i);else if(l.current){const{left:g,top:N}=s.current.canvas.getBoundingClientRect();l.current.data.x2=d.clientX-g,l.current.data.y2=d.clientY-N,i.top!==l.current?n.push(l.current):n.set(i)}}},[h,i,s,n]),z=c.exports.useCallback(()=>{!h||(l.current&&n.clearSelect(),l.current=null,f.current=null)},[h,n]);return ae(y),ee(k),te(w),se(z),b.exports.jsxDEV(P,{title:e.operation_arrow_title,icon:"icon-arrow",checked:h,onClick:v,option:b.exports.jsxDEV(ce,{size:a,color:u,onSizeChange:m,onColorChange:p},void 0,!1,{fileName:Ye,lineNumber:190,columnNumber:15},this)},void 0,!1,{fileName:Ye,lineNumber:185,columnNumber:5},this)}function Te(e){let{x1:t,y1:r,x2:o,y2:i}=e.data;return e.editHistory.forEach(({data:n})=>{const s=n.x2-n.x1,a=n.y2-n.y1;n.type===X.Move?(t+=s,r+=a,o+=s,i+=a):n.type===X.ResizeTop?r+=a:n.type===X.ResizeRightTop?(o+=s,r+=a):n.type===X.ResizeRight?o+=s:n.type===X.ResizeRightBottom?(o+=s,i+=a):n.type===X.ResizeBottom?i+=a:n.type===X.ResizeLeftBottom?(t+=s,i+=a):n.type===X.ResizeLeft?t+=s:n.type===X.ResizeLeftTop&&(t+=s,r+=a)}),pe(T({},e.data),{x1:t,x2:o,y1:r,y2:i})}function Ht(e,t){const{size:r,color:o,x1:i,y1:n,x2:s,y2:a}=Te(t);e.lineCap="butt",e.lineJoin="miter",e.lineWidth=r,e.strokeStyle=o;const m=(i+s)/2,u=(n+a)/2,p=Math.abs(s-i)/2,l=Math.abs(a-n)/2,f=.5522848,h=p*f,x=l*f;e.beginPath(),e.moveTo(m-p,u),e.bezierCurveTo(m-p,u-x,m-h,u-l,m,u-l),e.bezierCurveTo(m+h,u-l,m+p,u-x,m+p,u),e.bezierCurveTo(m+p,u+x,m+h,u+l,m,u+l),e.bezierCurveTo(m-h,u+l,m-p,u+x,m-p,u),e.closePath(),e.stroke(),t.isSelected&&(e.lineWidth=1,e.strokeStyle="#000000",e.fillStyle="#ffffff",e.beginPath(),e.moveTo(i,n),e.lineTo(s,n),e.lineTo(s,a),e.lineTo(i,a),e.closePath(),e.stroke(),M(e,(i+s)/2,n),M(e,s,n),M(e,s,(n+a)/2),M(e,s,a),M(e,(i+s)/2,a),M(e,i,a),M(e,i,(n+a)/2),M(e,i,n))}var Ue="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Ellipse/index.tsx",X;(function(e){e[e.Move=0]="Move",e[e.ResizeTop=1]="ResizeTop",e[e.ResizeRightTop=2]="ResizeRightTop",e[e.ResizeRight=3]="ResizeRight",e[e.ResizeRightBottom=4]="ResizeRightBottom",e[e.ResizeBottom=5]="ResizeBottom",e[e.ResizeLeftBottom=6]="ResizeLeftBottom",e[e.ResizeLeft=7]="ResizeLeft",e[e.ResizeLeftTop=8]="ResizeLeftTop"})(X||(X={}));function Pt(){const e=L(),[t,r]=H(),[o,i]=G(),[,n]=A(),s=W(),[a,m]=c.exports.useState(3),[u,p]=c.exports.useState("#ee5126"),l=c.exports.useRef(null),f=c.exports.useRef(null),h=o==="Ellipse",x=c.exports.useCallback(()=>{i.set("Ellipse"),n.set("crosshair")},[i,n]),v=c.exports.useCallback(()=>{h||(x(),r.clearSelect())},[h,x,r]),y=c.exports.useCallback((d,g)=>{if(d.name!=="Ellipse"||!s.current)return;const N=d;x();const{x1:C,y1:S,x2:E,y2:D}=Te(N);let R=0;V(s.current.canvas,g,{x:(C+E)/2,y:S})?R=1:V(s.current.canvas,g,{x:E,y:S})?R=2:V(s.current.canvas,g,{x:E,y:(S+D)/2})?R=3:V(s.current.canvas,g,{x:E,y:D})?R=4:V(s.current.canvas,g,{x:(C+E)/2,y:D})?R=5:V(s.current.canvas,g,{x:C,y:D})?R=6:V(s.current.canvas,g,{x:C,y:(S+D)/2})?R=7:V(s.current.canvas,g,{x:C,y:S})&&(R=8),f.current={type:j.Edit,data:{type:R,x1:g.clientX,y1:g.clientY,x2:g.clientX,y2:g.clientY},source:N},r.select(d)},[s,x,r]),k=c.exports.useCallback(d=>{if(!h||!s.current||l.current)return;const{left:g,top:N}=s.current.canvas.getBoundingClientRect(),C=d.clientX-g,S=d.clientY-N;l.current={name:"Ellipse",type:j.Source,data:{size:a,color:u,x1:C,y1:S,x2:C,y2:S},editHistory:[],draw:Ht,isHit:xe}},[h,a,u,s]),w=c.exports.useCallback(d=>{if(!(!h||!s.current)){if(f.current)f.current.data.x2=d.clientX,f.current.data.y2=d.clientY,t.top!==f.current?(f.current.source.editHistory.push(f.current),r.push(f.current)):r.set(t);else if(l.current){const{left:g,top:N}=s.current.canvas.getBoundingClientRect();l.current.data.x2=d.clientX-g,l.current.data.y2=d.clientY-N,t.top!==l.current?r.push(l.current):r.set(t)}}},[h,s,t,r]),z=c.exports.useCallback(()=>{!h||(l.current&&r.clearSelect(),l.current=null,f.current=null)},[h,r]);return ae(y),ee(k),te(w),se(z),b.exports.jsxDEV(P,{title:e.operation_ellipse_title,icon:"icon-ellipse",checked:h,onClick:v,option:b.exports.jsxDEV(ce,{size:a,color:u,onSizeChange:m,onColorChange:p},void 0,!1,{fileName:Ue,lineNumber:242,columnNumber:15},this)},void 0,!1,{fileName:Ue,lineNumber:237,columnNumber:5},this)}function Ae(e){let{x1:t,y1:r,x2:o,y2:i}=e.data;return e.editHistory.forEach(({data:n})=>{const s=n.x2-n.x1,a=n.y2-n.y1;n.type===F.Move?(t+=s,r+=a,o+=s,i+=a):n.type===F.ResizeTop?r+=a:n.type===F.ResizeRightTop?(o+=s,r+=a):n.type===F.ResizeRight?o+=s:n.type===F.ResizeRightBottom?(o+=s,i+=a):n.type===F.ResizeBottom?i+=a:n.type===F.ResizeLeftBottom?(t+=s,i+=a):n.type===F.ResizeLeft?t+=s:n.type===F.ResizeLeftTop&&(t+=s,r+=a)}),pe(T({},e.data),{x1:t,x2:o,y1:r,y2:i})}function Xt(e,t){const{size:r,color:o,x1:i,y1:n,x2:s,y2:a}=Ae(t);e.lineCap="butt",e.lineJoin="miter",e.lineWidth=r,e.strokeStyle=o,e.beginPath(),e.moveTo(i,n),e.lineTo(s,n),e.lineTo(s,a),e.lineTo(i,a),e.closePath(),e.stroke(),t.isSelected&&(e.lineWidth=1,e.strokeStyle="#000000",e.fillStyle="#ffffff",M(e,(i+s)/2,n),M(e,s,n),M(e,s,(n+a)/2),M(e,s,a),M(e,(i+s)/2,a),M(e,i,a),M(e,i,(n+a)/2),M(e,i,n))}var Ge="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Rectangle/index.tsx",F;(function(e){e[e.Move=0]="Move",e[e.ResizeTop=1]="ResizeTop",e[e.ResizeRightTop=2]="ResizeRightTop",e[e.ResizeRight=3]="ResizeRight",e[e.ResizeRightBottom=4]="ResizeRightBottom",e[e.ResizeBottom=5]="ResizeBottom",e[e.ResizeLeftBottom=6]="ResizeLeftBottom",e[e.ResizeLeft=7]="ResizeLeft",e[e.ResizeLeftTop=8]="ResizeLeftTop"})(F||(F={}));function Ft(){const e=L(),[t,r]=H(),[o,i]=G(),[,n]=A(),s=W(),[a,m]=c.exports.useState(3),[u,p]=c.exports.useState("#ee5126"),l=c.exports.useRef(null),f=c.exports.useRef(null),h=o==="Rectangle",x=c.exports.useCallback(()=>{i.set("Rectangle"),n.set("crosshair")},[i,n]),v=c.exports.useCallback(()=>{h||(x(),r.clearSelect())},[h,x,r]),y=c.exports.useCallback((d,g)=>{if(d.name!=="Rectangle"||!s.current)return;const N=d;x();const{x1:C,y1:S,x2:E,y2:D}=Ae(N);let R=0;V(s.current.canvas,g,{x:(C+E)/2,y:S})?R=1:V(s.current.canvas,g,{x:E,y:S})?R=2:V(s.current.canvas,g,{x:E,y:(S+D)/2})?R=3:V(s.current.canvas,g,{x:E,y:D})?R=4:V(s.current.canvas,g,{x:(C+E)/2,y:D})?R=5:V(s.current.canvas,g,{x:C,y:D})?R=6:V(s.current.canvas,g,{x:C,y:(S+D)/2})?R=7:V(s.current.canvas,g,{x:C,y:S})&&(R=8),f.current={type:j.Edit,data:{type:R,x1:g.clientX,y1:g.clientY,x2:g.clientX,y2:g.clientY},source:d},r.select(d)},[s,x,r]),k=c.exports.useCallback(d=>{if(!h||!s.current||l.current)return;const{left:g,top:N}=s.current.canvas.getBoundingClientRect(),C=d.clientX-g,S=d.clientY-N;l.current={name:"Rectangle",type:j.Source,data:{size:a,color:u,x1:C,y1:S,x2:C,y2:S},editHistory:[],draw:Xt,isHit:xe}},[h,a,u,s]),w=c.exports.useCallback(d=>{if(!(!h||!s.current)){if(f.current)f.current.data.x2=d.clientX,f.current.data.y2=d.clientY,t.top!==f.current?(f.current.source.editHistory.push(f.current),r.push(f.current)):r.set(t);else if(l.current){const{left:g,top:N}=s.current.canvas.getBoundingClientRect(),C=l.current.data;C.x2=d.clientX-g,C.y2=d.clientY-N,t.top!==l.current?r.push(l.current):r.set(t)}}},[h,s,t,r]),z=c.exports.useCallback(()=>{!h||(l.current&&r.clearSelect(),l.current=null,f.current=null)},[h,r]);return ae(y),ee(k),te(w),se(z),b.exports.jsxDEV(P,{title:e.operation_rectangle_title,icon:"icon-rectangle",checked:h,onClick:v,option:b.exports.jsxDEV(ce,{size:a,color:u,onSizeChange:m,onColorChange:p},void 0,!1,{fileName:Ge,lineNumber:242,columnNumber:15},this)},void 0,!1,{fileName:Ge,lineNumber:237,columnNumber:5},this)}var Yt=[Ft,Pt,Lt,_t,Mt,Ct,"|",yt,bt,"|",xt,mt,ht];var le="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsOperations/index.tsx";const We=Me.createContext(null);function Tt(){const{width:e,height:t}=$(),[r]=U(),[o,i]=c.exports.useState(null),[n,s]=c.exports.useState(null),a=c.exports.useRef(null),m=c.exports.useCallback(p=>{p.stopPropagation()},[]),u=c.exports.useCallback(p=>{p.preventDefault(),p.stopPropagation()},[]);return c.exports.useEffect(()=>{if(!r||!a.current)return;const p=a.current.getBoundingClientRect();let l=r.x+r.width-p.width,f=r.y+r.height+10;l<0&&(l=0),l>e-p.width&&(l=e-p.width),f>t-p.height&&(f=t-p.height-10),((n==null?void 0:n.x)!==l||n.y!==f)&&s({x:l,y:f}),((o==null?void 0:o.x)!==p.x||o.y!==p.y||o.width!==p.width||o.height!==p.height)&&i({x:p.x,y:p.y,width:p.width,height:p.height})}),r?b.exports.jsxDEV(We.Provider,{value:o,children:b.exports.jsxDEV("div",{ref:a,className:"screenshots-operations",style:{visibility:n?"visible":"hidden",left:n==null?void 0:n.x,top:n==null?void 0:n.y},onDoubleClick:m,onContextMenu:u,children:b.exports.jsxDEV("div",{className:"screenshots-operations-buttons",children:Yt.map((p,l)=>p==="|"?b.exports.jsxDEV("div",{className:"screenshots-operations-divider"},l,!1,{fileName:le,lineNumber:91,columnNumber:22},this):b.exports.jsxDEV(p,{},l,!1,{fileName:le,lineNumber:93,columnNumber:22},this))},void 0,!1,{fileName:le,lineNumber:88,columnNumber:9},this)},void 0,!1,{fileName:le,lineNumber:77,columnNumber:7},this)},void 0,!1,{fileName:le,lineNumber:76,columnNumber:5},this):null}function Ut(e){const[t,r]=c.exports.useState(null);return c.exports.useEffect(()=>{if(r(null),e==null)return;const o=document.createElement("img"),i=()=>r(o),n=()=>r(null);return o.addEventListener("load",i),o.addEventListener("error",n),o.src=e,()=>{o.removeEventListener("load",i),o.removeEventListener("error",n)}},[e]),t}var fe="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/index.tsx";function At(s){var a=s,{url:e,width:t,height:r,lang:o,className:i}=a,n=Be(a,["url","width","height","lang","className"]);const m=Ut(e),u=c.exports.useRef(null),p=c.exports.useRef({}),[l,f]=c.exports.useState({index:-1,stack:[]}),[h,x]=c.exports.useState(null),[v,y]=c.exports.useState("move"),[k,w]=c.exports.useState(void 0),z={url:e,width:t,height:r,image:m,lang:T(T({},_e),o),emiterRef:p,canvasContextRef:u,history:l,bounds:h,cursor:v,operation:k},d=c.exports.useCallback((D,...R)=>{const O=n[D];typeof O=="function"&&O(...R)},[n]),g={call:d,setHistory:f,setBounds:x,setCursor:y,setOperation:w},N=["screenshots"];i&&N.push(i);const C=()=>{p.current={},f({index:-1,stack:[]}),x(null),y("move"),w(void 0)},S=c.exports.useCallback(async D=>{if(!(D.button!==0||!m))if(h&&u.current)u.current.canvas.toBlob(R=>{d("onOk",R,h),C()},"image/png");else{const R=await et(m,{width:t,height:r});d("onOk",R,{x:0,y:0,width:t,height:r}),C()}},[m,h,t,r,d]),E=c.exports.useCallback(D=>{D.button===2&&(D.preventDefault(),d("onCancel"),C())},[d]);return c.exports.useLayoutEffect(()=>{C()},[e]),b.exports.jsxDEV(ve.Provider,{value:{store:z,dispatcher:g},children:b.exports.jsxDEV("div",{className:N.join(" "),style:{width:t,height:r},onDoubleClick:S,onContextMenu:E,children:[b.exports.jsxDEV(nt,{},void 0,!1,{fileName:fe,lineNumber:135,columnNumber:9},this),b.exports.jsxDEV(ut,{ref:u},void 0,!1,{fileName:fe,lineNumber:136,columnNumber:9},this),b.exports.jsxDEV(Tt,{},void 0,!1,{fileName:fe,lineNumber:137,columnNumber:9},this)]},void 0,!0,{fileName:fe,lineNumber:129,columnNumber:7},this)},void 0,!1,{fileName:fe,lineNumber:128,columnNumber:5},this)}var Ie="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/electron/app.tsx";function Gt(){const[e,t]=c.exports.useState(void 0),[r,o]=c.exports.useState(window.innerWidth),[i,n]=c.exports.useState(window.innerHeight),[s,a]=c.exports.useState(void 0),[m,u]=c.exports.useState(void 0),p=c.exports.useCallback(async(h,x)=>{!s||!h||window.screenshots.save(await h.arrayBuffer(),{bounds:x,display:s})},[s]),l=c.exports.useCallback(()=>{window.screenshots.cancel()},[]),f=c.exports.useCallback(async(h,x)=>{!s||!h||window.screenshots.ok(await h.arrayBuffer(),{bounds:x,display:s})},[s]);return c.exports.useEffect(()=>{const h=y=>{u(y)},x=(y,k)=>{a(y),t(k)},v=()=>{t(void 0),a(void 0),requestAnimationFrame(()=>window.screenshots.reset())};return window.screenshots.on("setLang",h),window.screenshots.on("capture",x),window.screenshots.on("reset",v),window.screenshots.ready(),()=>{window.screenshots.off("capture",x),window.screenshots.off("setLang",h),window.screenshots.off("reset",v)}},[]),c.exports.useEffect(()=>{const h=()=>{o(window.innerWidth),n(window.innerHeight)};return window.addEventListener("resize",h),()=>{window.removeEventListener("resize",h)}},[l]),b.exports.jsxDEV("div",{className:"body",children:b.exports.jsxDEV(At,{url:e,width:r,height:i,lang:m,onSave:p,onCancel:l,onOk:f},void 0,!1,{fileName:Ie,lineNumber:89,columnNumber:7},this)},void 0,!1,{fileName:Ie,lineNumber:88,columnNumber:5},this)}var Oe="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/electron/index.tsx";Ke.render(b.exports.jsxDEV(c.exports.StrictMode,{children:b.exports.jsxDEV(Gt,{},void 0,!1,{fileName:Oe,lineNumber:7,columnNumber:5},globalThis)},void 0,!1,{fileName:Oe,lineNumber:6,columnNumber:3},globalThis),document.getElementById("app"));

package/electron/electron.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>react-screenshots</title>
-    <script type="module" crossorigin src="./assets/index.6be07a29.js"></script>
+    <script type="module" crossorigin src="./assets/index.77e4c335.js"></script>
     <link rel="modulepreload" href="./assets/vendor.e3c417b2.js">
     <link rel="stylesheet" href="./assets/index.72e90af8.css">
   </head>

package/lib/react-screenshots.cjs.js

@@ -1,4 +1,4 @@
-"use strict";var qe=Object.defineProperty,Je=Object.defineProperties;var Qe=Object.getOwnPropertyDescriptors;var he=Object.getOwnPropertySymbols;var Ee=Object.prototype.hasOwnProperty,Be=Object.prototype.propertyIsEnumerable;var De=(e,t,s)=>t in e?qe(e,t,{enumerable:!0,configurable:!0,writable:!0,value:s}):e[t]=s,U=(e,t)=>{for(var s in t||(t={}))Ee.call(t,s)&&De(e,s,t[s]);if(he)for(var s of he(t))Be.call(t,s)&&De(e,s,t[s]);return e},me=(e,t)=>Je(e,Qe(t));var Me=(e,t)=>{var s={};for(var o in e)Ee.call(e,o)&&t.indexOf(o)<0&&(s[o]=e[o]);if(e!=null&&he)for(var o of he(e))t.indexOf(o)<0&&Be.call(e,o)&&(s[o]=e[o]);return s};var i=require("react"),$e=require("react-dom");function Ke(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var _=Ke(i);const Le={magnifier_position_label:"\u5750\u6807",operation_ok_title:"\u786E\u5B9A",operation_cancel_title:"\u53D6\u6D88",operation_save_title:"\u4FDD\u5B58",operation_redo_title:"\u91CD\u505A",operation_undo_title:"\u64A4\u9500",operation_mosaic_title:"\u9A6C\u8D5B\u514B",operation_text_title:"\u6587\u672C",operation_brush_title:"\u753B\u7B14",operation_arrow_title:"\u7BAD\u5934",operation_ellipse_title:"\u692D\u5706",operation_rectangle_title:"\u77E9\u5F62"};var xe=_.default.createContext({store:{url:void 0,image:null,width:0,height:0,lang:Le,emiterRef:{current:{}},canvasContextRef:{current:null},history:{index:-1,stack:[]},bounds:null,cursor:"move",operation:void 0},dispatcher:{call:void 0,setHistory:void 0,setBounds:void 0,setCursor:void 0,setOperation:void 0}});function oe(){const{dispatcher:e}=i.useContext(xe);return e}function H(){const{store:e}=i.useContext(xe);return e}function G(){const{bounds:e}=H(),{setBounds:t}=oe(),s=i.useCallback(c=>{t==null||t(c)},[t]),o=i.useCallback(()=>{t==null||t(null)},[t]);return[e,{set:s,reset:o}]}function X(){const{lang:e}=H();return e}var J="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsMagnifier/index.tsx";const Q=100,K=80;function Ze({x:e,y:t}){const{width:s,height:o,image:c}=H(),r=X(),[n,u]=i.useState(null),p=i.useRef(null),l=i.useRef(null),h=i.useRef(null),[a,f]=i.useState("000000");return i.useLayoutEffect(()=>{if(!p.current)return;const m=p.current.getBoundingClientRect();let g=e+20,y=t+20;g+m.width>s&&(g=e-m.width-20),y+m.height>o&&(y=t-m.height-20),g<0&&(g=0),y<0&&(y=0),u({x:g,y})},[s,o,e,t]),i.useEffect(()=>{if(!c||!l.current){h.current=null;return}if(h.current||(h.current=l.current.getContext("2d")),!h.current)return;const m=h.current;m.clearRect(0,0,Q,K);const g=c.naturalWidth/s,y=c.naturalHeight/o;m.drawImage(c,e*g-Q/2,t*y-K/2,Q,K,0,0,Q,K);const{data:v}=m.getImageData(Math.floor(Q/2),Math.floor(K/2),1,1),S=Array.from(v.slice(0,3)).map(C=>C>=16?C.toString(16):`0${C.toString(16)}`).join("").toUpperCase();f(S)},[s,o,c,e,t]),_.default.createElement("div",{ref:p,className:"screenshots-magnifier",style:{transform:`translate(${n==null?void 0:n.x}px, ${n==null?void 0:n.y}px)`},__self:this,__source:{fileName:J,lineNumber:89,columnNumber:5}},_.default.createElement("div",{className:"screenshots-magnifier-body",__self:this,__source:{fileName:J,lineNumber:96,columnNumber:7}},_.default.createElement("canvas",{ref:l,className:"screenshots-magnifier-body-canvas",width:Q,height:K,__self:this,__source:{fileName:J,lineNumber:97,columnNumber:9}})),_.default.createElement("div",{className:"screenshots-magnifier-footer",__self:this,__source:{fileName:J,lineNumber:104,columnNumber:7}},_.default.createElement("div",{className:"screenshots-magnifier-footer-item",__self:this,__source:{fileName:J,lineNumber:105,columnNumber:9}},r.magnifier_position_label,": (",e,",",t,")"),_.default.createElement("div",{className:"screenshots-magnifier-footer-item",__self:this,__source:{fileName:J,lineNumber:108,columnNumber:9}},"RGB: #",a)))}function et({x:e,y:t},{x:s,y:o},c,r){return e>s&&([e,s]=[s,e]),t>o&&([t,o]=[o,t]),e<0&&(e=0),s>c&&(s=c),t<0&&(t=0),o>r&&(o=r),{x:e,y:t,width:s-e,height:o-t}}var de="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsBackground/index.tsx";function tt(){const{url:e,image:t,width:s,height:o}=H(),[c,r]=G(),n=i.useRef(null),u=i.useRef(null),p=i.useRef(!1),[l,h]=i.useState(null),a=i.useCallback((m,g)=>{if(!n.current)return;const{x:y,y:v}=n.current.getBoundingClientRect();r.set(et({x:m.x-y,y:m.y-v},{x:g.x-y,y:g.y-v},s,o))},[s,o,r]),f=i.useCallback(m=>{u.current||c||m.button!==0||(u.current={x:m.clientX,y:m.clientY},p.current=!1)},[c]);return i.useEffect(()=>{const m=y=>{if(n.current){const v=n.current.getBoundingClientRect();y.clientX<v.left||y.clientY<v.top||y.clientX>v.right||y.clientY>v.bottom?h(null):h({x:y.clientX-v.x,y:y.clientY-v.y})}!u.current||(a(u.current,{x:y.clientX,y:y.clientY}),p.current=!0)},g=y=>{!u.current||(p.current&&a(u.current,{x:y.clientX,y:y.clientY}),u.current=null,p.current=!1)};return window.addEventListener("mousemove",m),window.addEventListener("mouseup",g),()=>{window.removeEventListener("mousemove",m),window.removeEventListener("mouseup",g)}},[a]),!e||!t?null:_.default.createElement("div",{ref:n,className:"screenshots-background",onMouseDown:f,__self:this,__source:{fileName:de,lineNumber:113,columnNumber:5}},_.default.createElement("img",{className:"screenshots-background-image",src:e,__self:this,__source:{fileName:de,lineNumber:114,columnNumber:7}}),_.default.createElement("div",{className:"screenshots-background-mask",__self:this,__source:{fileName:de,lineNumber:115,columnNumber:7}}),l&&!c&&_.default.createElement(Ze,{x:l==null?void 0:l.x,y:l==null?void 0:l.y,__self:this,__source:{fileName:de,lineNumber:116,columnNumber:31}}))}var Ve;const He=(Ve=window.devicePixelRatio)!=null?Ve:2;var pe=He<2?2:He;function nt(e,t,s,o){const c=e.clientX-s.x,r=e.clientY-s.y;let n=o.x,u=o.y,p=o.x+o.width,l=o.y+o.height;switch(t){case"top":u+=r;break;case"top-right":p+=c,u+=r;break;case"right":p+=c;break;case"right-bottom":p+=c,l+=r;break;case"bottom":l+=r;break;case"bottom-left":n+=c,l+=r;break;case"left":n+=c;break;case"left-top":n+=c,u+=r;break;case"move":n+=c,u+=r,p+=c,l+=r;break}return[{x:n,y:u},{x:p,y:l}]}function st({x:e,y:t},{x:s,y:o},c,r,n,u){return e>s&&([e,s]=[s,e]),t>o&&([t,o]=[o,t]),e<0&&(e=0,u==="move"&&(s=c.width)),s>r&&(s=r,u==="move"&&(e=s-c.width)),t<0&&(t=0,u==="move"&&(o=c.height)),o>n&&(o=n,u==="move"&&(t=o-c.height)),{x:e,y:t,width:Math.max(s-e,1),height:Math.max(o-t,1)}}var B;(function(e){e[e.Edit=0]="Edit",e[e.Source=1]="Source"})(B||(B={}));function Z(){const{emiterRef:e}=H(),t=i.useCallback((r,n)=>{const u=e.current;Array.isArray(u[r])?u[r].push(n):u[r]=[n]},[e]),s=i.useCallback((r,n)=>{const u=e.current;if(Array.isArray(u[r])){const p=u[r].findIndex(l=>l===n);p!==-1&&u[r].splice(p,1)}},[e]),o=i.useCallback((r,...n)=>{const u=e.current;Array.isArray(u[r])&&u[r].forEach(p=>p(...n))},[e]),c=i.useCallback(()=>{e.current={}},[e]);return{on:t,off:s,emit:o,reset:c}}function Y(){const{history:e}=H(),{setHistory:t}=oe(),s=i.useCallback(h=>{const{index:a,stack:f}=e;f.forEach(m=>{m.type===B.Source&&(m.isSelected=!1)}),h.type===B.Source?h.isSelected=!0:h.type===B.Edit&&(h.source.isSelected=!0),f.splice(a+1),f.push(h),t==null||t({index:f.length-1,stack:f})},[e,t]),o=i.useCallback(()=>{const{stack:h}=e;h.pop(),t==null||t({index:h.length-1,stack:h})},[e,t]),c=i.useCallback(()=>{const{index:h,stack:a}=e,f=a[h];f&&(f.type===B.Source?f.isSelected=!1:f.type===B.Edit&&f.source.editHistory.pop()),t==null||t({index:h<=0?-1:h-1,stack:a})},[e,t]),r=i.useCallback(()=>{const{index:h,stack:a}=e,f=a[h+1];f&&(f.type===B.Source?f.isSelected=!1:f.type===B.Edit&&f.source.editHistory.push(f)),t==null||t({index:h>=a.length-1?a.length-1:h+1,stack:a})},[e,t]),n=i.useCallback(h=>{t==null||t(U({},h))},[t]),u=i.useCallback(h=>{e.stack.forEach(a=>{a.type===B.Source&&(a===h?a.isSelected=!0:a.isSelected=!1)}),t==null||t(U({},e))},[e,t]),p=i.useCallback(()=>{e.stack.forEach(h=>{h.type===B.Source&&(h.isSelected=!1)}),t==null||t(U({},e))},[e,t]),l=i.useCallback(()=>{t==null||t({index:-1,stack:[]})},[t]);return[{index:e.index,stack:e.stack,top:e.stack.slice(e.index,e.index+1)[0]},{push:s,pop:o,undo:c,redo:r,set:n,select:u,clearSelect:p,reset:l}]}function A(){const{cursor:e}=H(),{setCursor:t}=oe(),s=i.useCallback(c=>{t==null||t(c)},[t]),o=i.useCallback(()=>{t==null||t("move")},[t]);return[e,{set:s,reset:o}]}function I(){const{operation:e}=H(),{setOperation:t}=oe(),s=i.useCallback(c=>{t==null||t(c)},[t]),o=i.useCallback(()=>{t==null||t(void 0)},[t]);return[e,{set:s,reset:o}]}function rt(e,t,s,o){if(!t)return!1;const c=document.createElement("canvas");c.width=e.width,c.height=e.height;const r=c.getContext("2d");if(!r)return!1;const{left:n,top:u}=t.getBoundingClientRect(),p=o.clientX-n,l=o.clientY-u;return[...s.stack.slice(0,s.index+1)].reverse().find(a=>{var f;return a.type!==B.Source?!1:(r.clearRect(0,0,e.width,e.height),(f=a.isHit)==null?void 0:f.call(a,r,a,{x:p,y:l}))})}var ce="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsCanvas/index.tsx";const ot=["top","right","bottom","left"];var j;(function(e){e.ResizeTop="top",e.ResizetopRight="top-right",e.ResizeRight="right",e.ResizeRightBottom="right-bottom",e.ResizeBottom="bottom",e.ResizeBottomLeft="bottom-left",e.ResizeLeft="left",e.ResizeLeftTop="left-top",e.Move="move"})(j||(j={}));const ct=[j.ResizeTop,j.ResizetopRight,j.ResizeRight,j.ResizeRightBottom,j.ResizeBottom,j.ResizeBottomLeft,j.ResizeLeft,j.ResizeLeftTop];var it=i.forwardRef(function(t,s){const{image:o,width:c,height:r}=H(),n=Z(),[u]=Y(),[p]=A(),[l,h]=G(),[a]=I(),f=i.useRef(),m=i.useRef(null),g=i.useRef(null),y=i.useRef(null),v=i.useRef(null),S=i.useCallback(()=>{if(!o||!l||!v.current)return;const d=o.naturalWidth/c,b=o.naturalHeight/r,x=v.current;x.imageSmoothingEnabled=!0,x.imageSmoothingQuality="low",x.setTransform(pe,0,0,pe,0,0),x.clearRect(0,0,l.width,l.height),x.drawImage(o,l.x*d,l.y*b,l.width*d,l.height*b,0,0,l.width,l.height),u.stack.slice(0,u.index+1).forEach(N=>{N.type===B.Source&&N.draw(x,N)})},[o,c,r,l,v,u]),C=i.useCallback((d,b)=>{if(!(d.button!==0||!l))if(!a)f.current=b,m.current={x:d.clientX,y:d.clientY},g.current={x:l.x,y:l.y,width:l.width,height:l.height};else{const x=rt(l,y.current,u,d.nativeEvent);x?n.emit("drawselect",x,d.nativeEvent):n.emit("mousedown",d.nativeEvent)}},[l,a,n,u]),z=i.useCallback(d=>{if(!f.current||!m.current||!g.current||!l)return;const b=nt(d,f.current,m.current,g.current);h.set(st(b[0],b[1],l,c,r,f.current))},[c,r,l,h]);return i.useLayoutEffect(()=>{if(!o||!l||!y.current){v.current=null;return}v.current||(v.current=y.current.getContext("2d")),S()},[o,l,S]),i.useEffect(()=>{const d=x=>{if(a)n.emit("mousemove",x);else{if(!f.current||!m.current||!g.current)return;z(x)}},b=x=>{if(a)n.emit("mouseup",x);else{if(!f.current||!m.current||!g.current)return;z(x),f.current=void 0,m.current=null,g.current=null}};return window.addEventListener("mousemove",d),window.addEventListener("mouseup",b),()=>{window.removeEventListener("mousemove",d),window.removeEventListener("mouseup",b)}},[z,a,n]),i.useImperativeHandle(s,()=>v.current),l?_.default.createElement("div",{className:"screenshots-canvas",style:{left:l.x,top:l.y,width:l.width,height:l.height},__self:this,__source:{fileName:ce,lineNumber:191,columnNumber:5}},_.default.createElement("canvas",{ref:y,width:l.width*pe,height:l.height*pe,style:{width:l.width,height:l.height},__self:this,__source:{fileName:ce,lineNumber:200,columnNumber:7}}),_.default.createElement("div",{className:"screenshots-canvas-body",style:{cursor:p},onMouseDown:d=>C(d,"move"),__self:this,__source:{fileName:ce,lineNumber:209,columnNumber:7}}),ot.map(d=>_.default.createElement("div",{key:d,className:`screenshots-canvas-border-${d}`,__self:this,__source:{fileName:ce,lineNumber:217,columnNumber:16}})),ct.map(d=>_.default.createElement("div",{key:d,className:`screenshots-canvas-point-${d}`,onMouseDown:b=>C(b,d),__self:this,__source:{fileName:ce,lineNumber:221,columnNumber:11}}))):null});function ve(){const e=oe();return i.useCallback((s,...o)=>{var c;(c=e.call)==null||c.call(e,s,...o)},[e])}function W(){const{canvasContextRef:e}=H();return e}function Ne(){const e=Z(),[,t]=G(),[,s]=A(),[,o]=Y(),[,c]=I();return i.useCallback(()=>{e.reset(),o.reset(),t.reset(),s.reset(),c.reset()},[e,o,t,s,c])}var Ce="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsOption/index.tsx",q;(function(e){e.Bottom="bottom",e.Top="top"})(q||(q={}));function ut({open:e,content:t,children:s}){const o=i.useRef(null),c=i.useRef(null),r=i.useRef(null),n=i.useContext(Oe),[u,p]=i.useState(q.Bottom),[l,h]=i.useState(null),[a,f]=i.useState(0),m=()=>(c.current||(c.current=document.createElement("div")),c.current);return i.useEffect(()=>{const g=m();return e&&document.body.appendChild(g),()=>{g.remove()}},[e]),i.useEffect(()=>{if(!e||!n||!o.current||!r.current)return;const g=o.current.getBoundingClientRect(),y=r.current.getBoundingClientRect();let v=u,S=g.left+g.width/2,C=g.top+g.height,z=a;if(S+y.width/2>n.x+n.width){const d=S;S=n.x+n.width-y.width/2,z=d-S}if(S<n.x+y.width/2){const d=S;S=n.x+y.width/2,z=d-S}C>window.innerHeight-y.height&&(v===q.Bottom&&(v=q.Top),C=g.top-y.height),C<0&&(v===q.Top&&(v=q.Bottom),C=g.top+g.height),v!==u&&p(v),((l==null?void 0:l.x)!==S||l.y!==C)&&h({x:S,y:C}),z!==a&&f(z)}),_.default.createElement(_.default.Fragment,null,i.cloneElement(s,{ref:o}),e&&t&&$e.createPortal(_.default.createElement("div",{ref:r,className:"screenshots-option",style:{visibility:l?"visible":"hidden",left:l==null?void 0:l.x,top:l==null?void 0:l.y},"data-placement":u,__self:this,__source:{fileName:Ce,lineNumber:111,columnNumber:11}},_.default.createElement("div",{className:"screenshots-option-container",__self:this,__source:{fileName:Ce,lineNumber:121,columnNumber:13}},t),_.default.createElement("div",{className:"screenshots-option-arrow",style:{marginLeft:a},__self:this,__source:{fileName:Ce,lineNumber:122,columnNumber:13}})),m()))}var Re="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsButton/index.tsx";function F({title:e,icon:t,checked:s,disabled:o,option:c,onClick:r}){const n=["screenshots-button"],u=i.useCallback(p=>{o||!r||r(p)},[o,r]);return s&&n.push("screenshots-button-checked"),o&&n.push("screenshots-button-disabled"),_.default.createElement(ut,{open:s,content:c,__self:this,__source:{fileName:Re,lineNumber:42,columnNumber:5}},_.default.createElement("div",{className:n.join(" "),title:e,onClick:u,__self:this,__source:{fileName:Re,lineNumber:43,columnNumber:7}},_.default.createElement("span",{className:t,__self:this,__source:{fileName:Re,lineNumber:44,columnNumber:9}})))}var lt="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Ok/index.tsx";function at(){const e=X(),t=W(),[,s]=Y(),o=ve(),[c]=G(),r=Ne(),n=i.useCallback(()=>{s.clearSelect(),setTimeout(()=>{!t.current||t.current.canvas.toBlob(u=>{o("onOk",u,c),r()},"image/png")})},[t,s,o,c,r]);return _.default.createElement(F,{title:e.operation_ok_title,icon:"icon-ok",onClick:n,__self:this,__source:{fileName:lt,lineNumber:31,columnNumber:10}})}var ft="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Cancel/index.tsx";function ht(){const e=ve(),t=Ne(),s=X(),o=i.useCallback(()=>{e("onCancel"),t()},[e,t]);return _.default.createElement(F,{title:s.operation_cancel_title,icon:"icon-cancel",onClick:o,__self:this,__source:{fileName:ft,lineNumber:17,columnNumber:10}})}var mt="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Save/index.tsx";function dt(){const e=X(),t=W(),[,s]=Y(),[o]=G(),c=ve(),r=Ne(),n=i.useCallback(()=>{s.clearSelect(),setTimeout(()=>{!t.current||t.current.canvas.toBlob(u=>{c("onSave",u,o),r()},"image/png")})},[t,s,o,c,r]);return _.default.createElement(F,{title:e.operation_save_title,icon:"icon-save",onClick:n,__self:this,__source:{fileName:mt,lineNumber:31,columnNumber:10}})}var pt="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Redo/index.tsx";function bt(){const e=X(),[t,s]=Y(),o=i.useCallback(()=>{s.redo()},[s]);return _.default.createElement(F,{title:e.operation_redo_title,icon:"icon-redo",disabled:!t.stack.length||t.stack.length-1===t.index,onClick:o,__self:this,__source:{fileName:pt,lineNumber:15,columnNumber:5}})}var gt="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Undo/index.tsx";function _t(){const e=X(),[t,s]=Y(),o=i.useCallback(()=>{s.undo()},[s]);return _.default.createElement(F,{title:e.operation_undo_title,icon:"icon-undo",disabled:t.index===-1,onClick:o,__self:this,__source:{fileName:gt,lineNumber:15,columnNumber:5}})}var ke="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsSize/index.tsx";function Xe({value:e,onChange:t}){const s=[3,6,9];return _.default.createElement("div",{className:"screenshots-size",__self:this,__source:{fileName:ke,lineNumber:12,columnNumber:5}},s.map(o=>{const c=["screenshots-size-item"];return o===e&&c.push("screenshots-size-active"),_.default.createElement("div",{key:o,className:c.join(" "),onClick:()=>t&&t(o),__self:this,__source:{fileName:ke,lineNumber:21,columnNumber:11}},_.default.createElement("div",{className:"screenshots-size-pointer",style:{width:o*1.8,height:o*1.8},__self:this,__source:{fileName:ke,lineNumber:22,columnNumber:13}}))}))}function ee(e){const t=Z();i.useEffect(()=>(t.on("mousedown",e),()=>{t.off("mousedown",e)}),[e,t])}function te(e){const t=Z();i.useEffect(()=>(t.on("mousemove",e),()=>{t.off("mousemove",e)}),[e,t])}function ne(e){const t=Z();i.useEffect(()=>(t.on("mouseup",e),()=>{t.off("mouseup",e)}),[e,t])}var Ye="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Mosaic/index.tsx";function be(e,t,s){if(!s)return[0,0,0,0];const{data:o,width:c}=s,r=t*c*4+e*4;return Array.from(o.slice(r,r+4))}function yt(e,t){const{tiles:s,size:o}=t.data;s.forEach(c=>{const r=Math.round(c.color[0]),n=Math.round(c.color[1]),u=Math.round(c.color[2]),p=c.color[3]/255;e.fillStyle=`rgba(${r}, ${n}, ${u}, ${p})`,e.fillRect(c.x-o/2,c.y-o/2,o,o)})}function xt(){const e=X(),{image:t,width:s,height:o}=H(),[c,r]=I(),n=W(),[u,p]=Y(),[l]=G(),[,h]=A(),[a,f]=i.useState(3),m=i.useRef(null),g=i.useRef(null),y=c==="Mosaic",v=i.useCallback(()=>{r.set("Mosaic"),h.set("crosshair")},[r,h]),S=i.useCallback(()=>{y||(v(),p.clearSelect())},[y,v,p]),C=i.useCallback(b=>{if(!y||g.current||!m.current||!n.current)return;const x=n.current.canvas.getBoundingClientRect(),N=b.clientX-x.x,k=b.clientY-x.y,E=a*2;g.current={name:"Mosaic",type:B.Source,data:{size:E,tiles:[{x:N,y:k,color:be(N,k,m.current)}]},editHistory:[],draw:yt}},[y,a,n]),z=i.useCallback(b=>{if(!y||!g.current||!n.current||!m.current)return;const x=n.current.canvas.getBoundingClientRect(),N=b.clientX-x.x,k=b.clientY-x.y,E=g.current.data.size,w=g.current.data.tiles;let R=w[w.length-1];if(!R)w.push({x:N,y:k,color:be(N,k,m.current)});else{const V=R.x-N,D=R.y-k;let L=Math.sqrt(V**2+D**2);const _e=-D/L,ye=-V/L;for(;L>E;){const se=Math.floor(R.x+E*ye),re=Math.floor(R.y+E*_e);R={x:se,y:re,color:be(se,re,m.current)},w.push(R),L-=E}L>E/2&&w.push({x:N,y:k,color:be(N,k,m.current)})}u.top!==g.current?p.push(g.current):p.set(u)},[y,n,u,p]),d=i.useCallback(()=>{!y||(g.current=null)},[y]);return ee(C),te(z),ne(d),i.useEffect(()=>{if(!l||!t||!y)return;const b=document.createElement("canvas"),x=b.getContext("2d");if(!x)return;b.width=l.width,b.height=l.height;const N=t.naturalWidth/s,k=t.naturalHeight/o;x.drawImage(t,l.x*N,l.y*k,l.width*N,l.height*k,0,0,l.width,l.height),m.current=x.getImageData(0,0,l.width,l.height)},[s,o,l,t,y]),_.default.createElement(F,{title:e.operation_mosaic_title,icon:"icon-mosaic",checked:y,onClick:S,option:_.default.createElement(Xe,{value:a,onChange:f,__self:this,__source:{fileName:Ye,lineNumber:220,columnNumber:15}}),__self:this,__source:{fileName:Ye,lineNumber:215,columnNumber:5}})}var Fe="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsColor/index.tsx";function vt({value:e,onChange:t}){const s=["#ee5126","#fceb4d","#90e746","#51c0fa","#7a7a7a","#ffffff"];return _.default.createElement("div",{className:"screenshots-color",__self:this,__source:{fileName:Fe,lineNumber:12,columnNumber:5}},s.map(o=>{const c=["screenshots-color-item"];return o===e&&c.push("screenshots-color-active"),_.default.createElement("div",{key:o,className:c.join(" "),style:{backgroundColor:o},onClick:()=>t&&t(o),__self:this,__source:{fileName:Fe,lineNumber:19,columnNumber:11}})}))}var Se="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsSizeColor/index.tsx";function ie({size:e,color:t,onSizeChange:s,onColorChange:o}){return _.default.createElement("div",{className:"screenshots-sizecolor",__self:this,__source:{fileName:Se,lineNumber:15,columnNumber:5}},_.default.createElement(Xe,{value:e,onChange:s,__self:this,__source:{fileName:Se,lineNumber:16,columnNumber:7}}),_.default.createElement(vt,{value:t,onChange:o,__self:this,__source:{fileName:Se,lineNumber:17,columnNumber:7}}))}const Nt=`
+"use strict";var We=Object.defineProperty,Oe=Object.defineProperties;var Ve=Object.getOwnPropertyDescriptors;var he=Object.getOwnPropertySymbols;var ze=Object.prototype.hasOwnProperty,Ee=Object.prototype.propertyIsEnumerable;var Be=(e,t,s)=>t in e?We(e,t,{enumerable:!0,configurable:!0,writable:!0,value:s}):e[t]=s,U=(e,t)=>{for(var s in t||(t={}))ze.call(t,s)&&Be(e,s,t[s]);if(he)for(var s of he(t))Ee.call(t,s)&&Be(e,s,t[s]);return e},me=(e,t)=>Oe(e,Ve(t));var De=(e,t)=>{var s={};for(var o in e)ze.call(e,o)&&t.indexOf(o)<0&&(s[o]=e[o]);if(e!=null&&he)for(var o of he(e))t.indexOf(o)<0&&Ee.call(e,o)&&(s[o]=e[o]);return s};var i=require("react"),Me=require("react-dom");function qe(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var _=qe(i);function Je(e,{width:t,height:s}){return new Promise((o,c)=>{if(!e.complete)return c(new Error("image is not fully loaded"));const r=document.createElement("canvas"),n=t*window.devicePixelRatio,u=s*window.devicePixelRatio;r.width=n,r.height=u;const d=r.getContext("2d");if(!d)return c(new Error("convert image to blob fail"));d.imageSmoothingEnabled=!0,d.imageSmoothingQuality="low",d.drawImage(e,0,0,e.naturalWidth,e.naturalHeight,0,0,n,u),r.toBlob(l=>{if(!l)return c(new Error("canvas toBlob fail"));o(l)},"image/png")})}const $e={magnifier_position_label:"\u5750\u6807",operation_ok_title:"\u786E\u5B9A",operation_cancel_title:"\u53D6\u6D88",operation_save_title:"\u4FDD\u5B58",operation_redo_title:"\u91CD\u505A",operation_undo_title:"\u64A4\u9500",operation_mosaic_title:"\u9A6C\u8D5B\u514B",operation_text_title:"\u6587\u672C",operation_brush_title:"\u753B\u7B14",operation_arrow_title:"\u7BAD\u5934",operation_ellipse_title:"\u692D\u5706",operation_rectangle_title:"\u77E9\u5F62"};var ye=_.default.createContext({store:{url:void 0,image:null,width:0,height:0,lang:$e,emiterRef:{current:{}},canvasContextRef:{current:null},history:{index:-1,stack:[]},bounds:null,cursor:"move",operation:void 0},dispatcher:{call:void 0,setHistory:void 0,setBounds:void 0,setCursor:void 0,setOperation:void 0}});function oe(){const{dispatcher:e}=i.useContext(ye);return e}function H(){const{store:e}=i.useContext(ye);return e}function G(){const{bounds:e}=H(),{setBounds:t}=oe(),s=i.useCallback(c=>{t==null||t(c)},[t]),o=i.useCallback(()=>{t==null||t(null)},[t]);return[e,{set:s,reset:o}]}function X(){const{lang:e}=H();return e}var J="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsMagnifier/index.tsx";const Q=100,K=80;function Qe({x:e,y:t}){const{width:s,height:o,image:c}=H(),r=X(),[n,u]=i.useState(null),d=i.useRef(null),l=i.useRef(null),h=i.useRef(null),[a,f]=i.useState("000000");return i.useLayoutEffect(()=>{if(!d.current)return;const m=d.current.getBoundingClientRect();let g=e+20,y=t+20;g+m.width>s&&(g=e-m.width-20),y+m.height>o&&(y=t-m.height-20),g<0&&(g=0),y<0&&(y=0),u({x:g,y})},[s,o,e,t]),i.useEffect(()=>{if(!c||!l.current){h.current=null;return}if(h.current||(h.current=l.current.getContext("2d")),!h.current)return;const m=h.current;m.clearRect(0,0,Q,K);const g=c.naturalWidth/s,y=c.naturalHeight/o;m.drawImage(c,e*g-Q/2,t*y-K/2,Q,K,0,0,Q,K);const{data:v}=m.getImageData(Math.floor(Q/2),Math.floor(K/2),1,1),S=Array.from(v.slice(0,3)).map(C=>C>=16?C.toString(16):`0${C.toString(16)}`).join("").toUpperCase();f(S)},[s,o,c,e,t]),_.default.createElement("div",{ref:d,className:"screenshots-magnifier",style:{transform:`translate(${n==null?void 0:n.x}px, ${n==null?void 0:n.y}px)`},__self:this,__source:{fileName:J,lineNumber:89,columnNumber:5}},_.default.createElement("div",{className:"screenshots-magnifier-body",__self:this,__source:{fileName:J,lineNumber:96,columnNumber:7}},_.default.createElement("canvas",{ref:l,className:"screenshots-magnifier-body-canvas",width:Q,height:K,__self:this,__source:{fileName:J,lineNumber:97,columnNumber:9}})),_.default.createElement("div",{className:"screenshots-magnifier-footer",__self:this,__source:{fileName:J,lineNumber:104,columnNumber:7}},_.default.createElement("div",{className:"screenshots-magnifier-footer-item",__self:this,__source:{fileName:J,lineNumber:105,columnNumber:9}},r.magnifier_position_label,": (",e,",",t,")"),_.default.createElement("div",{className:"screenshots-magnifier-footer-item",__self:this,__source:{fileName:J,lineNumber:108,columnNumber:9}},"RGB: #",a)))}function Ke({x:e,y:t},{x:s,y:o},c,r){return e>s&&([e,s]=[s,e]),t>o&&([t,o]=[o,t]),e<0&&(e=0),s>c&&(s=c),t<0&&(t=0),o>r&&(o=r),{x:e,y:t,width:s-e,height:o-t}}var de="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsBackground/index.tsx";function Ze(){const{url:e,image:t,width:s,height:o}=H(),[c,r]=G(),n=i.useRef(null),u=i.useRef(null),d=i.useRef(!1),[l,h]=i.useState(null),a=i.useCallback((m,g)=>{if(!n.current)return;const{x:y,y:v}=n.current.getBoundingClientRect();r.set(Ke({x:m.x-y,y:m.y-v},{x:g.x-y,y:g.y-v},s,o))},[s,o,r]),f=i.useCallback(m=>{u.current||c||m.button!==0||(u.current={x:m.clientX,y:m.clientY},d.current=!1)},[c]);return i.useEffect(()=>{const m=y=>{if(n.current){const v=n.current.getBoundingClientRect();y.clientX<v.left||y.clientY<v.top||y.clientX>v.right||y.clientY>v.bottom?h(null):h({x:y.clientX-v.x,y:y.clientY-v.y})}!u.current||(a(u.current,{x:y.clientX,y:y.clientY}),d.current=!0)},g=y=>{!u.current||(d.current&&a(u.current,{x:y.clientX,y:y.clientY}),u.current=null,d.current=!1)};return window.addEventListener("mousemove",m),window.addEventListener("mouseup",g),()=>{window.removeEventListener("mousemove",m),window.removeEventListener("mouseup",g)}},[a]),i.useLayoutEffect(()=>{(!t||c)&&h(null)},[t,c]),!e||!t?null:_.default.createElement("div",{ref:n,className:"screenshots-background",onMouseDown:f,__self:this,__source:{fileName:de,lineNumber:120,columnNumber:5}},_.default.createElement("img",{className:"screenshots-background-image",src:e,__self:this,__source:{fileName:de,lineNumber:121,columnNumber:7}}),_.default.createElement("div",{className:"screenshots-background-mask",__self:this,__source:{fileName:de,lineNumber:122,columnNumber:7}}),l&&!c&&_.default.createElement(Qe,{x:l==null?void 0:l.x,y:l==null?void 0:l.y,__self:this,__source:{fileName:de,lineNumber:123,columnNumber:31}}))}function A(){const{cursor:e}=H(),{setCursor:t}=oe(),s=i.useCallback(c=>{t==null||t(c)},[t]),o=i.useCallback(()=>{t==null||t("move")},[t]);return[e,{set:s,reset:o}]}function Z(){const{emiterRef:e}=H(),t=i.useCallback((r,n)=>{const u=e.current;Array.isArray(u[r])?u[r].push(n):u[r]=[n]},[e]),s=i.useCallback((r,n)=>{const u=e.current;if(Array.isArray(u[r])){const d=u[r].findIndex(l=>l===n);d!==-1&&u[r].splice(d,1)}},[e]),o=i.useCallback((r,...n)=>{const u=e.current;Array.isArray(u[r])&&u[r].forEach(d=>d(...n))},[e]),c=i.useCallback(()=>{e.current={}},[e]);return{on:t,off:s,emit:o,reset:c}}var B;(function(e){e[e.Edit=0]="Edit",e[e.Source=1]="Source"})(B||(B={}));function P(){const{history:e}=H(),{setHistory:t}=oe(),s=i.useCallback(h=>{const{index:a,stack:f}=e;f.forEach(m=>{m.type===B.Source&&(m.isSelected=!1)}),h.type===B.Source?h.isSelected=!0:h.type===B.Edit&&(h.source.isSelected=!0),f.splice(a+1),f.push(h),t==null||t({index:f.length-1,stack:f})},[e,t]),o=i.useCallback(()=>{const{stack:h}=e;h.pop(),t==null||t({index:h.length-1,stack:h})},[e,t]),c=i.useCallback(()=>{const{index:h,stack:a}=e,f=a[h];f&&(f.type===B.Source?f.isSelected=!1:f.type===B.Edit&&f.source.editHistory.pop()),t==null||t({index:h<=0?-1:h-1,stack:a})},[e,t]),r=i.useCallback(()=>{const{index:h,stack:a}=e,f=a[h+1];f&&(f.type===B.Source?f.isSelected=!1:f.type===B.Edit&&f.source.editHistory.push(f)),t==null||t({index:h>=a.length-1?a.length-1:h+1,stack:a})},[e,t]),n=i.useCallback(h=>{t==null||t(U({},h))},[t]),u=i.useCallback(h=>{e.stack.forEach(a=>{a.type===B.Source&&(a===h?a.isSelected=!0:a.isSelected=!1)}),t==null||t(U({},e))},[e,t]),d=i.useCallback(()=>{e.stack.forEach(h=>{h.type===B.Source&&(h.isSelected=!1)}),t==null||t(U({},e))},[e,t]),l=i.useCallback(()=>{t==null||t({index:-1,stack:[]})},[t]);return[{index:e.index,stack:e.stack,top:e.stack.slice(e.index,e.index+1)[0]},{push:s,pop:o,undo:c,redo:r,set:n,select:u,clearSelect:d,reset:l}]}function I(){const{operation:e}=H(),{setOperation:t}=oe(),s=i.useCallback(c=>{t==null||t(c)},[t]),o=i.useCallback(()=>{t==null||t(void 0)},[t]);return[e,{set:s,reset:o}]}function et({x:e,y:t},{x:s,y:o},c,r,n,u){return e>s&&([e,s]=[s,e]),t>o&&([t,o]=[o,t]),e<0&&(e=0,u==="move"&&(s=c.width)),s>r&&(s=r,u==="move"&&(e=s-c.width)),t<0&&(t=0,u==="move"&&(o=c.height)),o>n&&(o=n,u==="move"&&(t=o-c.height)),{x:e,y:t,width:Math.max(s-e,1),height:Math.max(o-t,1)}}function tt(e,t,s,o){const c=e.clientX-s.x,r=e.clientY-s.y;let n=o.x,u=o.y,d=o.x+o.width,l=o.y+o.height;switch(t){case"top":u+=r;break;case"top-right":d+=c,u+=r;break;case"right":d+=c;break;case"right-bottom":d+=c,l+=r;break;case"bottom":l+=r;break;case"bottom-left":n+=c,l+=r;break;case"left":n+=c;break;case"left-top":n+=c,u+=r;break;case"move":n+=c,u+=r,d+=c,l+=r;break}return[{x:n,y:u},{x:d,y:l}]}function nt(e,t,s,o){if(!t)return!1;const c=document.createElement("canvas");c.width=e.width,c.height=e.height;const r=c.getContext("2d");if(!r)return!1;const{left:n,top:u}=t.getBoundingClientRect(),d=o.clientX-n,l=o.clientY-u;return[...s.stack.slice(0,s.index+1)].reverse().find(a=>{var f;return a.type!==B.Source?!1:(r.clearRect(0,0,e.width,e.height),(f=a.isHit)==null?void 0:f.call(a,r,a,{x:d,y:l}))})}var ce="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsCanvas/index.tsx";const st=["top","right","bottom","left"];var j;(function(e){e.ResizeTop="top",e.ResizetopRight="top-right",e.ResizeRight="right",e.ResizeRightBottom="right-bottom",e.ResizeBottom="bottom",e.ResizeBottomLeft="bottom-left",e.ResizeLeft="left",e.ResizeLeftTop="left-top",e.Move="move"})(j||(j={}));const rt=[j.ResizeTop,j.ResizetopRight,j.ResizeRight,j.ResizeRightBottom,j.ResizeBottom,j.ResizeBottomLeft,j.ResizeLeft,j.ResizeLeftTop];var ot=i.forwardRef(function(t,s){const{image:o,width:c,height:r}=H(),n=Z(),[u]=P(),[d]=A(),[l,h]=G(),[a]=I(),f=i.useRef(),m=i.useRef(null),g=i.useRef(null),y=i.useRef(null),v=i.useRef(null),S=i.useCallback(()=>{if(!o||!l||!v.current)return;const b=o.naturalWidth/c,p=o.naturalHeight/r,x=v.current;x.imageSmoothingEnabled=!0,x.imageSmoothingQuality="low",x.setTransform(window.devicePixelRatio,0,0,window.devicePixelRatio,0,0),x.clearRect(0,0,l.width,l.height),x.drawImage(o,l.x*b,l.y*p,l.width*b,l.height*p,0,0,l.width,l.height),u.stack.slice(0,u.index+1).forEach(N=>{N.type===B.Source&&N.draw(x,N)})},[o,c,r,l,v,u]),C=i.useCallback((b,p)=>{if(!(b.button!==0||!l))if(!a)f.current=p,m.current={x:b.clientX,y:b.clientY},g.current={x:l.x,y:l.y,width:l.width,height:l.height};else{const x=nt(l,y.current,u,b.nativeEvent);x?n.emit("drawselect",x,b.nativeEvent):n.emit("mousedown",b.nativeEvent)}},[l,a,n,u]),z=i.useCallback(b=>{if(!f.current||!m.current||!g.current||!l)return;const p=tt(b,f.current,m.current,g.current);h.set(et(p[0],p[1],l,c,r,f.current))},[c,r,l,h]);return i.useLayoutEffect(()=>{if(!o||!l||!y.current){v.current=null;return}v.current||(v.current=y.current.getContext("2d")),S()},[o,l,S]),i.useEffect(()=>{const b=x=>{if(a)n.emit("mousemove",x);else{if(!f.current||!m.current||!g.current)return;z(x)}},p=x=>{if(a)n.emit("mouseup",x);else{if(!f.current||!m.current||!g.current)return;z(x),f.current=void 0,m.current=null,g.current=null}};return window.addEventListener("mousemove",b),window.addEventListener("mouseup",p),()=>{window.removeEventListener("mousemove",b),window.removeEventListener("mouseup",p)}},[z,a,n]),i.useImperativeHandle(s,()=>v.current),l?_.default.createElement("div",{className:"screenshots-canvas",style:{left:l.x,top:l.y,width:l.width,height:l.height},__self:this,__source:{fileName:ce,lineNumber:190,columnNumber:5}},_.default.createElement("canvas",{ref:y,width:l.width*window.devicePixelRatio,height:l.height*window.devicePixelRatio,style:{width:l.width,height:l.height},__self:this,__source:{fileName:ce,lineNumber:199,columnNumber:7}}),_.default.createElement("div",{className:"screenshots-canvas-body",style:{cursor:d},onMouseDown:b=>C(b,"move"),__self:this,__source:{fileName:ce,lineNumber:208,columnNumber:7}}),st.map(b=>_.default.createElement("div",{key:b,className:`screenshots-canvas-border-${b}`,__self:this,__source:{fileName:ce,lineNumber:216,columnNumber:16}})),rt.map(b=>_.default.createElement("div",{key:b,className:`screenshots-canvas-point-${b}`,onMouseDown:p=>C(p,b),__self:this,__source:{fileName:ce,lineNumber:220,columnNumber:11}}))):null});function xe(){const e=oe();return i.useCallback((s,...o)=>{var c;(c=e.call)==null||c.call(e,s,...o)},[e])}function W(){const{canvasContextRef:e}=H();return e}function ve(){const e=Z(),[,t]=G(),[,s]=A(),[,o]=P(),[,c]=I();return i.useCallback(()=>{e.reset(),o.reset(),t.reset(),s.reset(),c.reset()},[e,o,t,s,c])}var Ne="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsOption/index.tsx",q;(function(e){e.Bottom="bottom",e.Top="top"})(q||(q={}));function ct({open:e,content:t,children:s}){const o=i.useRef(null),c=i.useRef(null),r=i.useRef(null),n=i.useContext(Ie),[u,d]=i.useState(q.Bottom),[l,h]=i.useState(null),[a,f]=i.useState(0),m=()=>(c.current||(c.current=document.createElement("div")),c.current);return i.useEffect(()=>{const g=m();return e&&document.body.appendChild(g),()=>{g.remove()}},[e]),i.useEffect(()=>{if(!e||!n||!o.current||!r.current)return;const g=o.current.getBoundingClientRect(),y=r.current.getBoundingClientRect();let v=u,S=g.left+g.width/2,C=g.top+g.height,z=a;if(S+y.width/2>n.x+n.width){const b=S;S=n.x+n.width-y.width/2,z=b-S}if(S<n.x+y.width/2){const b=S;S=n.x+y.width/2,z=b-S}C>window.innerHeight-y.height&&(v===q.Bottom&&(v=q.Top),C=g.top-y.height),C<0&&(v===q.Top&&(v=q.Bottom),C=g.top+g.height),v!==u&&d(v),((l==null?void 0:l.x)!==S||l.y!==C)&&h({x:S,y:C}),z!==a&&f(z)}),_.default.createElement(_.default.Fragment,null,i.cloneElement(s,{ref:o}),e&&t&&Me.createPortal(_.default.createElement("div",{ref:r,className:"screenshots-option",style:{visibility:l?"visible":"hidden",left:l==null?void 0:l.x,top:l==null?void 0:l.y},"data-placement":u,__self:this,__source:{fileName:Ne,lineNumber:111,columnNumber:11}},_.default.createElement("div",{className:"screenshots-option-container",__self:this,__source:{fileName:Ne,lineNumber:121,columnNumber:13}},t),_.default.createElement("div",{className:"screenshots-option-arrow",style:{marginLeft:a},__self:this,__source:{fileName:Ne,lineNumber:122,columnNumber:13}})),m()))}var Ce="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsButton/index.tsx";function Y({title:e,icon:t,checked:s,disabled:o,option:c,onClick:r}){const n=["screenshots-button"],u=i.useCallback(d=>{o||!r||r(d)},[o,r]);return s&&n.push("screenshots-button-checked"),o&&n.push("screenshots-button-disabled"),_.default.createElement(ct,{open:s,content:c,__self:this,__source:{fileName:Ce,lineNumber:42,columnNumber:5}},_.default.createElement("div",{className:n.join(" "),title:e,onClick:u,__self:this,__source:{fileName:Ce,lineNumber:43,columnNumber:7}},_.default.createElement("span",{className:t,__self:this,__source:{fileName:Ce,lineNumber:44,columnNumber:9}})))}var it="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Ok/index.tsx";function ut(){const e=X(),t=W(),[,s]=P(),o=xe(),[c]=G(),r=ve(),n=i.useCallback(()=>{s.clearSelect(),setTimeout(()=>{!t.current||t.current.canvas.toBlob(u=>{o("onOk",u,c),r()},"image/png")})},[t,s,o,c,r]);return _.default.createElement(Y,{title:e.operation_ok_title,icon:"icon-ok",onClick:n,__self:this,__source:{fileName:it,lineNumber:31,columnNumber:10}})}var lt="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Cancel/index.tsx";function at(){const e=xe(),t=ve(),s=X(),o=i.useCallback(()=>{e("onCancel"),t()},[e,t]);return _.default.createElement(Y,{title:s.operation_cancel_title,icon:"icon-cancel",onClick:o,__self:this,__source:{fileName:lt,lineNumber:17,columnNumber:10}})}var ft="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Save/index.tsx";function ht(){const e=X(),t=W(),[,s]=P(),[o]=G(),c=xe(),r=ve(),n=i.useCallback(()=>{s.clearSelect(),setTimeout(()=>{!t.current||t.current.canvas.toBlob(u=>{c("onSave",u,o),r()},"image/png")})},[t,s,o,c,r]);return _.default.createElement(Y,{title:e.operation_save_title,icon:"icon-save",onClick:n,__self:this,__source:{fileName:ft,lineNumber:31,columnNumber:10}})}var mt="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Redo/index.tsx";function dt(){const e=X(),[t,s]=P(),o=i.useCallback(()=>{s.redo()},[s]);return _.default.createElement(Y,{title:e.operation_redo_title,icon:"icon-redo",disabled:!t.stack.length||t.stack.length-1===t.index,onClick:o,__self:this,__source:{fileName:mt,lineNumber:15,columnNumber:5}})}var bt="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Undo/index.tsx";function pt(){const e=X(),[t,s]=P(),o=i.useCallback(()=>{s.undo()},[s]);return _.default.createElement(Y,{title:e.operation_undo_title,icon:"icon-undo",disabled:t.index===-1,onClick:o,__self:this,__source:{fileName:bt,lineNumber:15,columnNumber:5}})}var Re="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsSize/index.tsx";function Le({value:e,onChange:t}){const s=[3,6,9];return _.default.createElement("div",{className:"screenshots-size",__self:this,__source:{fileName:Re,lineNumber:12,columnNumber:5}},s.map(o=>{const c=["screenshots-size-item"];return o===e&&c.push("screenshots-size-active"),_.default.createElement("div",{key:o,className:c.join(" "),onClick:()=>t&&t(o),__self:this,__source:{fileName:Re,lineNumber:21,columnNumber:11}},_.default.createElement("div",{className:"screenshots-size-pointer",style:{width:o*1.8,height:o*1.8},__self:this,__source:{fileName:Re,lineNumber:22,columnNumber:13}}))}))}function ee(e){const t=Z();i.useEffect(()=>(t.on("mousedown",e),()=>{t.off("mousedown",e)}),[e,t])}function te(e){const t=Z();i.useEffect(()=>(t.on("mousemove",e),()=>{t.off("mousemove",e)}),[e,t])}function ne(e){const t=Z();i.useEffect(()=>(t.on("mouseup",e),()=>{t.off("mouseup",e)}),[e,t])}var He="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Mosaic/index.tsx";function be(e,t,s){if(!s)return[0,0,0,0];const{data:o,width:c}=s,r=t*c*4+e*4;return Array.from(o.slice(r,r+4))}function gt(e,t){const{tiles:s,size:o}=t.data;s.forEach(c=>{const r=Math.round(c.color[0]),n=Math.round(c.color[1]),u=Math.round(c.color[2]),d=c.color[3]/255;e.fillStyle=`rgba(${r}, ${n}, ${u}, ${d})`,e.fillRect(c.x-o/2,c.y-o/2,o,o)})}function _t(){const e=X(),{image:t,width:s,height:o}=H(),[c,r]=I(),n=W(),[u,d]=P(),[l]=G(),[,h]=A(),[a,f]=i.useState(3),m=i.useRef(null),g=i.useRef(null),y=c==="Mosaic",v=i.useCallback(()=>{r.set("Mosaic"),h.set("crosshair")},[r,h]),S=i.useCallback(()=>{y||(v(),d.clearSelect())},[y,v,d]),C=i.useCallback(p=>{if(!y||g.current||!m.current||!n.current)return;const x=n.current.canvas.getBoundingClientRect(),N=p.clientX-x.x,k=p.clientY-x.y,E=a*2;g.current={name:"Mosaic",type:B.Source,data:{size:E,tiles:[{x:N,y:k,color:be(N,k,m.current)}]},editHistory:[],draw:gt}},[y,a,n]),z=i.useCallback(p=>{if(!y||!g.current||!n.current||!m.current)return;const x=n.current.canvas.getBoundingClientRect(),N=p.clientX-x.x,k=p.clientY-x.y,E=g.current.data.size,w=g.current.data.tiles;let R=w[w.length-1];if(!R)w.push({x:N,y:k,color:be(N,k,m.current)});else{const V=R.x-N,D=R.y-k;let L=Math.sqrt(V**2+D**2);const ge=-D/L,_e=-V/L;for(;L>E;){const se=Math.floor(R.x+E*_e),re=Math.floor(R.y+E*ge);R={x:se,y:re,color:be(se,re,m.current)},w.push(R),L-=E}L>E/2&&w.push({x:N,y:k,color:be(N,k,m.current)})}u.top!==g.current?d.push(g.current):d.set(u)},[y,n,u,d]),b=i.useCallback(()=>{!y||(g.current=null)},[y]);return ee(C),te(z),ne(b),i.useEffect(()=>{if(!l||!t||!y)return;const p=document.createElement("canvas"),x=p.getContext("2d");if(!x)return;p.width=l.width,p.height=l.height;const N=t.naturalWidth/s,k=t.naturalHeight/o;x.drawImage(t,l.x*N,l.y*k,l.width*N,l.height*k,0,0,l.width,l.height),m.current=x.getImageData(0,0,l.width,l.height)},[s,o,l,t,y]),_.default.createElement(Y,{title:e.operation_mosaic_title,icon:"icon-mosaic",checked:y,onClick:S,option:_.default.createElement(Le,{value:a,onChange:f,__self:this,__source:{fileName:He,lineNumber:220,columnNumber:15}}),__self:this,__source:{fileName:He,lineNumber:215,columnNumber:5}})}var Xe="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsColor/index.tsx";function yt({value:e,onChange:t}){const s=["#ee5126","#fceb4d","#90e746","#51c0fa","#7a7a7a","#ffffff"];return _.default.createElement("div",{className:"screenshots-color",__self:this,__source:{fileName:Xe,lineNumber:12,columnNumber:5}},s.map(o=>{const c=["screenshots-color-item"];return o===e&&c.push("screenshots-color-active"),_.default.createElement("div",{key:o,className:c.join(" "),style:{backgroundColor:o},onClick:()=>t&&t(o),__self:this,__source:{fileName:Xe,lineNumber:19,columnNumber:11}})}))}var ke="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsSizeColor/index.tsx";function ie({size:e,color:t,onSizeChange:s,onColorChange:o}){return _.default.createElement("div",{className:"screenshots-sizecolor",__self:this,__source:{fileName:ke,lineNumber:15,columnNumber:5}},_.default.createElement(Le,{value:e,onChange:s,__self:this,__source:{fileName:ke,lineNumber:16,columnNumber:7}}),_.default.createElement(yt,{value:t,onChange:o,__self:this,__source:{fileName:ke,lineNumber:17,columnNumber:7}}))}const xt=`
 min-width: 0 !important;
 width: 0 !important;
 min-height: 0 !important;
@@ -9,6 +9,6 @@ position: absolute !important;
 z-index: -1000 !important;
 top:0 !important;
 right:0 !important;
-`,Ct=["letter-spacing","line-height","padding-top","padding-bottom","font-family","font-weight","font-size","font-variant","text-rendering","text-transform","text-indent","padding-left","padding-right","border-width","box-sizing","white-space","word-break"];let O;function Rt(e){const t=window.getComputedStyle(e),s=t.getPropertyValue("box-sizing")||t.getPropertyValue("-moz-box-sizing")||t.getPropertyValue("-webkit-box-sizing"),o=parseFloat(t.getPropertyValue("padding-bottom"))+parseFloat(t.getPropertyValue("padding-top")),c=parseFloat(t.getPropertyValue("border-bottom-width"))+parseFloat(t.getPropertyValue("border-top-width"));return{sizingStyle:Ct.map(n=>`${n}:${t.getPropertyValue(n)}`).join(";"),paddingSize:o,borderSize:c,boxSizing:s}}function kt(e,t,s,o){O||(O=document.createElement("textarea"),O.setAttribute("tab-index","-1"),document.body.appendChild(O));const{paddingSize:c,borderSize:r,boxSizing:n,sizingStyle:u}=Rt(e);O.setAttribute("style",`${u};${Nt};max-width:${s}px;max-height:${o}px`),O.value=t||" ";let p=O.scrollWidth,l=O.scrollHeight;return n==="border-box"?(p+=r,l+=r):n==="content-box"&&(p-=c,l-=c),{width:Math.min(p,s),height:Math.min(l,o)}}var St="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsTextarea/index.tsx";function wt({x:e,y:t,maxWidth:s,maxHeight:o,size:c,color:r,value:n,onChange:u,onBlur:p}){const l=i.useRef(null),h=i.useRef(null),[a,f]=i.useState(0),[m,g]=i.useState(0),y=()=>(l.current||(l.current=document.createElement("div")),l.current);return i.useLayoutEffect(()=>(l.current&&(document.body.appendChild(l.current),requestAnimationFrame(()=>{var v;(v=h.current)==null||v.focus()})),()=>{var v;(v=l.current)==null||v.remove()}),[]),i.useLayoutEffect(()=>{if(!h.current)return;const{width:v,height:S}=kt(h.current,n,s,o);f(v),g(S)},[n,s,o]),$e.createPortal(_.default.createElement("textarea",{ref:h,className:"screenshots-textarea",style:{left:e,top:t,color:r,width:a,height:m,maxWidth:s,maxHeight:o,fontSize:c,lineHeight:`${c}px`},value:n,onChange:v=>u&&u(v.target.value),onBlur:v=>p&&p(v),__self:this,__source:{fileName:St,lineNumber:65,columnNumber:5}}),y())}function ue(e){const t=Z();i.useEffect(()=>(t.on("drawselect",e),()=>{t.off("drawselect",e)}),[e,t])}var we="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Text/index.tsx";const ze={3:18,6:32,9:46};function zt(e,t){const{size:s,color:o,fontFamily:c,x:r,y:n,text:u}=t.data;e.fillStyle=o,e.textAlign="left",e.textBaseline="top",e.font=`${s}px ${c}`;const p=t.editHistory.reduce((l,{data:h})=>({x:l.x+h.x2-h.x1,y:l.y+h.y2-h.y1}),{x:0,y:0});u.split(`
-`).forEach((l,h)=>{e.fillText(l,r+p.x,n+p.y+h*s)})}function Et(e,t,s){e.textAlign="left",e.textBaseline="top",e.font=`${t.data.size}px ${t.data.fontFamily}`;let o=0,c=0;t.data.text.split(`
-`).forEach(a=>{const f=e.measureText(a);o<f.width&&(o=f.width),c+=t.data.size});const{x:r,y:n}=t.editHistory.reduce((a,{data:f})=>({x:a.x+f.x2-f.x1,y:a.y+f.y2-f.y1}),{x:0,y:0}),u=t.data.x+r,p=t.data.y+n,l=u+o,h=p+c;return s.x>=u&&s.x<=l&&s.y>=p&&s.y<=h}function Bt(){const e=X(),[t,s]=Y(),[o]=G(),[c,r]=I(),[,n]=A(),u=W(),[p,l]=i.useState(3),[h,a]=i.useState("#ee5126"),f=i.useRef(null),m=i.useRef(null),[g,y]=i.useState(null),[v,S]=i.useState(""),C=c==="Text",z=i.useCallback(()=>{r.set("Text"),n.set("default")},[r,n]),d=i.useCallback(()=>{C||(z(),s.clearSelect())},[C,z,s]),b=i.useCallback(D=>{f.current&&(f.current.data.size=ze[D]),l(D)},[]),x=i.useCallback(D=>{f.current&&(f.current.data.color=D),a(D)},[]),N=i.useCallback(D=>{S(D),C&&f.current&&(f.current.data.text=D)},[C]),k=i.useCallback(()=>{f.current&&f.current.data.text&&s.push(f.current),f.current=null,S(""),y(null)},[s]),E=i.useCallback((D,L)=>{D.name==="Text"&&(z(),m.current={type:B.Edit,data:{x1:L.clientX,y1:L.clientY,x2:L.clientX,y2:L.clientY},source:D},s.select(D))},[z,s]),w=i.useCallback(D=>{if(!C||!u.current||f.current||!o)return;const{left:L,top:_e}=u.current.canvas.getBoundingClientRect(),ye=window.getComputedStyle(u.current.canvas).fontFamily,se=D.clientX-L,re=D.clientY-_e;f.current={name:"Text",type:B.Source,data:{size:ze[p],color:h,fontFamily:ye,x:se,y:re,text:""},editHistory:[],draw:zt,isHit:Et},y({x:D.clientX,y:D.clientY,maxWidth:o.width-se,maxHeight:o.height-re})},[C,p,h,o,u]),R=i.useCallback(D=>{!C||m.current&&(m.current.data.x2=D.clientX,m.current.data.y2=D.clientY,t.top!==m.current?(m.current.source.editHistory.push(m.current),s.push(m.current)):s.set(t))},[C,t,s]),V=i.useCallback(()=>{!C||(m.current=null)},[C]);return ue(E),ee(w),te(R),ne(V),_.default.createElement(_.default.Fragment,null,_.default.createElement(F,{title:e.operation_text_title,icon:"icon-text",checked:C,onClick:d,option:_.default.createElement(ie,{size:p,color:h,onSizeChange:b,onColorChange:x,__self:this,__source:{fileName:we,lineNumber:261,columnNumber:11}}),__self:this,__source:{fileName:we,lineNumber:255,columnNumber:7}}),C&&g&&_.default.createElement(wt,{x:g.x,y:g.y,maxWidth:g.maxWidth,maxHeight:g.maxHeight,size:ze[p],color:h,value:v,onChange:N,onBlur:k,__self:this,__source:{fileName:we,lineNumber:265,columnNumber:9}}))}const Pe=4;function M(e,t,s){e.lineWidth=1,e.strokeStyle="#000000",e.fillStyle="#ffffff",e.beginPath(),e.arc(t,s,Pe,0,2*Math.PI),e.fill(),e.stroke()}function ge(e,t,s){t.draw(e,t);const{data:o}=e.getImageData(s.x,s.y,1,1);return o.some(c=>c!==0)}function $(e,t,s){if(!e)return!1;const{left:o,top:c}=e.getBoundingClientRect(),r=t.clientX-o,n=t.clientY-c;return(s.x-r)**2+(s.y-n)**2<Pe**2}function Dt(e,t){const{size:s,color:o,points:c}=t.data;e.lineCap="round",e.lineJoin="round",e.lineWidth=s,e.strokeStyle=o;const r=t.editHistory.reduce((n,{data:u})=>({x:n.x+u.x2-u.x1,y:n.y+u.y2-u.y1}),{x:0,y:0});e.beginPath(),c.forEach((n,u)=>{u===0?e.moveTo(n.x+r.x,n.y+r.y):e.lineTo(n.x+r.x,n.y+r.y)}),e.stroke(),t.isSelected&&(e.lineWidth=1,e.strokeStyle="#000000",e.beginPath(),c.forEach((n,u)=>{u===0?e.moveTo(n.x+r.x,n.y+r.y):e.lineTo(n.x+r.x,n.y+r.y)}),e.stroke())}var Te="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Brush/index.tsx";function Mt(){const e=X(),[,t]=A(),[s,o]=I(),c=W(),[r,n]=Y(),[u,p]=i.useState(3),[l,h]=i.useState("#ee5126"),a=i.useRef(null),f=i.useRef(null),m=s==="Brush",g=i.useCallback(()=>{o.set("Brush"),t.set("default")},[o,t]),y=i.useCallback(()=>{m||(g(),n.clearSelect())},[m,g,n]),v=i.useCallback((d,b)=>{d.name==="Brush"&&(g(),f.current={type:B.Edit,data:{x1:b.clientX,y1:b.clientY,x2:b.clientX,y2:b.clientY},source:d},n.select(d))},[g,n]),S=i.useCallback(d=>{if(!m||a.current||!c.current)return;const{left:b,top:x}=c.current.canvas.getBoundingClientRect();a.current={name:"Brush",type:B.Source,data:{size:u,color:l,points:[{x:d.clientX-b,y:d.clientY-x}]},editHistory:[],draw:Dt,isHit:ge}},[m,c,u,l]),C=i.useCallback(d=>{if(!(!m||!c.current)){if(f.current)f.current.data.x2=d.clientX,f.current.data.y2=d.clientY,r.top!==f.current?(f.current.source.editHistory.push(f.current),n.push(f.current)):n.set(r);else if(a.current){const{left:b,top:x}=c.current.canvas.getBoundingClientRect();a.current.data.points.push({x:d.clientX-b,y:d.clientY-x}),r.top!==a.current?n.push(a.current):n.set(r)}}},[m,r,c,n]),z=i.useCallback(()=>{!m||(a.current&&n.clearSelect(),a.current=null,f.current=null)},[m,n]);return ue(v),ee(S),te(C),ne(z),_.default.createElement(F,{title:e.operation_brush_title,icon:"icon-brush",checked:m,onClick:y,option:_.default.createElement(ie,{size:u,color:l,onSizeChange:p,onColorChange:h,__self:this,__source:{fileName:Te,lineNumber:166,columnNumber:15}}),__self:this,__source:{fileName:Te,lineNumber:161,columnNumber:5}})}function je(e){let{x1:t,y1:s,x2:o,y2:c}=e.data;return e.editHistory.forEach(({data:r})=>{const n=r.x2-r.x1,u=r.y2-r.y1;r.type===le.Move?(t+=n,s+=u,o+=n,c+=u):r.type===le.MoveStart?(t+=n,s+=u):r.type===le.MoveEnd&&(o+=n,c+=u)}),me(U({},e.data),{x1:t,x2:o,y1:s,y2:c})}function $t(e,t){const{size:s,color:o,x1:c,x2:r,y1:n,y2:u}=je(t);e.lineCap="round",e.lineJoin="bevel",e.lineWidth=s,e.strokeStyle=o;const p=r-c,l=u-n,h=s*3,a=Math.atan2(l,p);e.beginPath(),e.moveTo(c,n),e.lineTo(r,u),e.lineTo(r-h*Math.cos(a-Math.PI/6),u-h*Math.sin(a-Math.PI/6)),e.moveTo(r,u),e.lineTo(r-h*Math.cos(a+Math.PI/6),u-h*Math.sin(a+Math.PI/6)),e.stroke(),t.isSelected&&(M(e,c,n),M(e,r,u))}var Ue="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Arrow/index.tsx",le;(function(e){e[e.Move=0]="Move",e[e.MoveStart=1]="MoveStart",e[e.MoveEnd=2]="MoveEnd"})(le||(le={}));function Lt(){const e=X(),[,t]=A(),[s,o]=I(),[c,r]=Y(),n=W(),[u,p]=i.useState(3),[l,h]=i.useState("#ee5126"),a=i.useRef(null),f=i.useRef(null),m=s==="Arrow",g=i.useCallback(()=>{o.set("Arrow"),t.set("default")},[o,t]),y=i.useCallback(()=>{m||(g(),r.clearSelect())},[m,g,r]),v=i.useCallback((d,b)=>{if(d.name!=="Arrow"||!n.current)return;const x=d;g();const{x1:N,y1:k,x2:E,y2:w}=je(x);let R=0;$(n.current.canvas,b,{x:N,y:k})?R=1:$(n.current.canvas,b,{x:E,y:w})&&(R=2),f.current={type:B.Edit,data:{type:R,x1:b.clientX,y1:b.clientY,x2:b.clientX,y2:b.clientY},source:x},r.select(d)},[n,g,r]),S=i.useCallback(d=>{if(!m||a.current||!n.current)return;const{left:b,top:x}=n.current.canvas.getBoundingClientRect();a.current={name:"Arrow",type:B.Source,data:{size:u,color:l,x1:d.clientX-b,y1:d.clientY-x,x2:d.clientX-b,y2:d.clientY-x},editHistory:[],draw:$t,isHit:ge}},[m,l,u,n]),C=i.useCallback(d=>{if(!(!m||!n.current)){if(f.current)f.current.data.x2=d.clientX,f.current.data.y2=d.clientY,c.top!==f.current?(f.current.source.editHistory.push(f.current),r.push(f.current)):r.set(c);else if(a.current){const{left:b,top:x}=n.current.canvas.getBoundingClientRect();a.current.data.x2=d.clientX-b,a.current.data.y2=d.clientY-x,c.top!==a.current?r.push(a.current):r.set(c)}}},[m,c,n,r]),z=i.useCallback(()=>{!m||(a.current&&r.clearSelect(),a.current=null,f.current=null)},[m,r]);return ue(v),ee(S),te(C),ne(z),_.default.createElement(F,{title:e.operation_arrow_title,icon:"icon-arrow",checked:m,onClick:y,option:_.default.createElement(ie,{size:u,color:l,onSizeChange:p,onColorChange:h,__self:this,__source:{fileName:Ue,lineNumber:190,columnNumber:15}}),__self:this,__source:{fileName:Ue,lineNumber:185,columnNumber:5}})}function Ge(e){let{x1:t,y1:s,x2:o,y2:c}=e.data;return e.editHistory.forEach(({data:r})=>{const n=r.x2-r.x1,u=r.y2-r.y1;r.type===P.Move?(t+=n,s+=u,o+=n,c+=u):r.type===P.ResizeTop?s+=u:r.type===P.ResizeRightTop?(o+=n,s+=u):r.type===P.ResizeRight?o+=n:r.type===P.ResizeRightBottom?(o+=n,c+=u):r.type===P.ResizeBottom?c+=u:r.type===P.ResizeLeftBottom?(t+=n,c+=u):r.type===P.ResizeLeft?t+=n:r.type===P.ResizeLeftTop&&(t+=n,s+=u)}),me(U({},e.data),{x1:t,x2:o,y1:s,y2:c})}function Ht(e,t){const{size:s,color:o,x1:c,y1:r,x2:n,y2:u}=Ge(t);e.lineCap="butt",e.lineJoin="miter",e.lineWidth=s,e.strokeStyle=o;const p=(c+n)/2,l=(r+u)/2,h=Math.abs(n-c)/2,a=Math.abs(u-r)/2,f=.5522848,m=h*f,g=a*f;e.beginPath(),e.moveTo(p-h,l),e.bezierCurveTo(p-h,l-g,p-m,l-a,p,l-a),e.bezierCurveTo(p+m,l-a,p+h,l-g,p+h,l),e.bezierCurveTo(p+h,l+g,p+m,l+a,p,l+a),e.bezierCurveTo(p-m,l+a,p-h,l+g,p-h,l),e.closePath(),e.stroke(),t.isSelected&&(e.lineWidth=1,e.strokeStyle="#000000",e.fillStyle="#ffffff",e.beginPath(),e.moveTo(c,r),e.lineTo(n,r),e.lineTo(n,u),e.lineTo(c,u),e.closePath(),e.stroke(),M(e,(c+n)/2,r),M(e,n,r),M(e,n,(r+u)/2),M(e,n,u),M(e,(c+n)/2,u),M(e,c,u),M(e,c,(r+u)/2),M(e,c,r))}var Ae="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Ellipse/index.tsx",P;(function(e){e[e.Move=0]="Move",e[e.ResizeTop=1]="ResizeTop",e[e.ResizeRightTop=2]="ResizeRightTop",e[e.ResizeRight=3]="ResizeRight",e[e.ResizeRightBottom=4]="ResizeRightBottom",e[e.ResizeBottom=5]="ResizeBottom",e[e.ResizeLeftBottom=6]="ResizeLeftBottom",e[e.ResizeLeft=7]="ResizeLeft",e[e.ResizeLeftTop=8]="ResizeLeftTop"})(P||(P={}));function Xt(){const e=X(),[t,s]=Y(),[o,c]=I(),[,r]=A(),n=W(),[u,p]=i.useState(3),[l,h]=i.useState("#ee5126"),a=i.useRef(null),f=i.useRef(null),m=o==="Ellipse",g=i.useCallback(()=>{c.set("Ellipse"),r.set("crosshair")},[c,r]),y=i.useCallback(()=>{m||(g(),s.clearSelect())},[m,g,s]),v=i.useCallback((d,b)=>{if(d.name!=="Ellipse"||!n.current)return;const x=d;g();const{x1:N,y1:k,x2:E,y2:w}=Ge(x);let R=0;$(n.current.canvas,b,{x:(N+E)/2,y:k})?R=1:$(n.current.canvas,b,{x:E,y:k})?R=2:$(n.current.canvas,b,{x:E,y:(k+w)/2})?R=3:$(n.current.canvas,b,{x:E,y:w})?R=4:$(n.current.canvas,b,{x:(N+E)/2,y:w})?R=5:$(n.current.canvas,b,{x:N,y:w})?R=6:$(n.current.canvas,b,{x:N,y:(k+w)/2})?R=7:$(n.current.canvas,b,{x:N,y:k})&&(R=8),f.current={type:B.Edit,data:{type:R,x1:b.clientX,y1:b.clientY,x2:b.clientX,y2:b.clientY},source:x},s.select(d)},[n,g,s]),S=i.useCallback(d=>{if(!m||!n.current||a.current)return;const{left:b,top:x}=n.current.canvas.getBoundingClientRect(),N=d.clientX-b,k=d.clientY-x;a.current={name:"Ellipse",type:B.Source,data:{size:u,color:l,x1:N,y1:k,x2:N,y2:k},editHistory:[],draw:Ht,isHit:ge}},[m,u,l,n]),C=i.useCallback(d=>{if(!(!m||!n.current)){if(f.current)f.current.data.x2=d.clientX,f.current.data.y2=d.clientY,t.top!==f.current?(f.current.source.editHistory.push(f.current),s.push(f.current)):s.set(t);else if(a.current){const{left:b,top:x}=n.current.canvas.getBoundingClientRect();a.current.data.x2=d.clientX-b,a.current.data.y2=d.clientY-x,t.top!==a.current?s.push(a.current):s.set(t)}}},[m,n,t,s]),z=i.useCallback(()=>{!m||(a.current&&s.clearSelect(),a.current=null,f.current=null)},[m,s]);return ue(v),ee(S),te(C),ne(z),_.default.createElement(F,{title:e.operation_ellipse_title,icon:"icon-ellipse",checked:m,onClick:y,option:_.default.createElement(ie,{size:u,color:l,onSizeChange:p,onColorChange:h,__self:this,__source:{fileName:Ae,lineNumber:242,columnNumber:15}}),__self:this,__source:{fileName:Ae,lineNumber:237,columnNumber:5}})}function Ie(e){let{x1:t,y1:s,x2:o,y2:c}=e.data;return e.editHistory.forEach(({data:r})=>{const n=r.x2-r.x1,u=r.y2-r.y1;r.type===T.Move?(t+=n,s+=u,o+=n,c+=u):r.type===T.ResizeTop?s+=u:r.type===T.ResizeRightTop?(o+=n,s+=u):r.type===T.ResizeRight?o+=n:r.type===T.ResizeRightBottom?(o+=n,c+=u):r.type===T.ResizeBottom?c+=u:r.type===T.ResizeLeftBottom?(t+=n,c+=u):r.type===T.ResizeLeft?t+=n:r.type===T.ResizeLeftTop&&(t+=n,s+=u)}),me(U({},e.data),{x1:t,x2:o,y1:s,y2:c})}function Yt(e,t){const{size:s,color:o,x1:c,y1:r,x2:n,y2:u}=Ie(t);e.lineCap="butt",e.lineJoin="miter",e.lineWidth=s,e.strokeStyle=o,e.beginPath(),e.moveTo(c,r),e.lineTo(n,r),e.lineTo(n,u),e.lineTo(c,u),e.closePath(),e.stroke(),t.isSelected&&(e.lineWidth=1,e.strokeStyle="#000000",e.fillStyle="#ffffff",M(e,(c+n)/2,r),M(e,n,r),M(e,n,(r+u)/2),M(e,n,u),M(e,(c+n)/2,u),M(e,c,u),M(e,c,(r+u)/2),M(e,c,r))}var We="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Rectangle/index.tsx",T;(function(e){e[e.Move=0]="Move",e[e.ResizeTop=1]="ResizeTop",e[e.ResizeRightTop=2]="ResizeRightTop",e[e.ResizeRight=3]="ResizeRight",e[e.ResizeRightBottom=4]="ResizeRightBottom",e[e.ResizeBottom=5]="ResizeBottom",e[e.ResizeLeftBottom=6]="ResizeLeftBottom",e[e.ResizeLeft=7]="ResizeLeft",e[e.ResizeLeftTop=8]="ResizeLeftTop"})(T||(T={}));function Ft(){const e=X(),[t,s]=Y(),[o,c]=I(),[,r]=A(),n=W(),[u,p]=i.useState(3),[l,h]=i.useState("#ee5126"),a=i.useRef(null),f=i.useRef(null),m=o==="Rectangle",g=i.useCallback(()=>{c.set("Rectangle"),r.set("crosshair")},[c,r]),y=i.useCallback(()=>{m||(g(),s.clearSelect())},[m,g,s]),v=i.useCallback((d,b)=>{if(d.name!=="Rectangle"||!n.current)return;const x=d;g();const{x1:N,y1:k,x2:E,y2:w}=Ie(x);let R=0;$(n.current.canvas,b,{x:(N+E)/2,y:k})?R=1:$(n.current.canvas,b,{x:E,y:k})?R=2:$(n.current.canvas,b,{x:E,y:(k+w)/2})?R=3:$(n.current.canvas,b,{x:E,y:w})?R=4:$(n.current.canvas,b,{x:(N+E)/2,y:w})?R=5:$(n.current.canvas,b,{x:N,y:w})?R=6:$(n.current.canvas,b,{x:N,y:(k+w)/2})?R=7:$(n.current.canvas,b,{x:N,y:k})&&(R=8),f.current={type:B.Edit,data:{type:R,x1:b.clientX,y1:b.clientY,x2:b.clientX,y2:b.clientY},source:d},s.select(d)},[n,g,s]),S=i.useCallback(d=>{if(!m||!n.current||a.current)return;const{left:b,top:x}=n.current.canvas.getBoundingClientRect(),N=d.clientX-b,k=d.clientY-x;a.current={name:"Rectangle",type:B.Source,data:{size:u,color:l,x1:N,y1:k,x2:N,y2:k},editHistory:[],draw:Yt,isHit:ge}},[m,u,l,n]),C=i.useCallback(d=>{if(!(!m||!n.current)){if(f.current)f.current.data.x2=d.clientX,f.current.data.y2=d.clientY,t.top!==f.current?(f.current.source.editHistory.push(f.current),s.push(f.current)):s.set(t);else if(a.current){const{left:b,top:x}=n.current.canvas.getBoundingClientRect(),N=a.current.data;N.x2=d.clientX-b,N.y2=d.clientY-x,t.top!==a.current?s.push(a.current):s.set(t)}}},[m,n,t,s]),z=i.useCallback(()=>{!m||(a.current&&s.clearSelect(),a.current=null,f.current=null)},[m,s]);return ue(v),ee(S),te(C),ne(z),_.default.createElement(F,{title:e.operation_rectangle_title,icon:"icon-rectangle",checked:m,onClick:y,option:_.default.createElement(ie,{size:u,color:l,onSizeChange:p,onColorChange:h,__self:this,__source:{fileName:We,lineNumber:242,columnNumber:15}}),__self:this,__source:{fileName:We,lineNumber:237,columnNumber:5}})}var Pt=[Ft,Xt,Lt,Mt,Bt,xt,"|",_t,bt,"|",dt,ht,at];var ae="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsOperations/index.tsx";const Oe=_.default.createContext(null);function Tt(){const{width:e,height:t}=H(),[s]=G(),[o,c]=i.useState(null),[r,n]=i.useState(null),u=i.useRef(null),p=i.useCallback(h=>{h.stopPropagation()},[]),l=i.useCallback(h=>{h.preventDefault(),h.stopPropagation()},[]);return i.useEffect(()=>{if(!s||!u.current)return;const h=u.current.getBoundingClientRect();let a=s.x+s.width-h.width,f=s.y+s.height+10;a<0&&(a=0),a>e-h.width&&(a=e-h.width),f>t-h.height&&(f=t-h.height-10),((r==null?void 0:r.x)!==a||r.y!==f)&&n({x:a,y:f}),((o==null?void 0:o.x)!==h.x||o.y!==h.y||o.width!==h.width||o.height!==h.height)&&c({x:h.x,y:h.y,width:h.width,height:h.height})}),s?_.default.createElement(Oe.Provider,{value:o,__self:this,__source:{fileName:ae,lineNumber:76,columnNumber:5}},_.default.createElement("div",{ref:u,className:"screenshots-operations",style:{visibility:r?"visible":"hidden",left:r==null?void 0:r.x,top:r==null?void 0:r.y},onDoubleClick:p,onContextMenu:l,__self:this,__source:{fileName:ae,lineNumber:77,columnNumber:7}},_.default.createElement("div",{className:"screenshots-operations-buttons",__self:this,__source:{fileName:ae,lineNumber:88,columnNumber:9}},Pt.map((h,a)=>h==="|"?_.default.createElement("div",{key:a,className:"screenshots-operations-divider",__self:this,__source:{fileName:ae,lineNumber:91,columnNumber:22}}):_.default.createElement(h,{key:a,__self:this,__source:{fileName:ae,lineNumber:93,columnNumber:22}}))))):null}function jt(e){const[t,s]=i.useState(null);return i.useEffect(()=>{if(s(null),e==null)return;const o=document.createElement("img"),c=()=>s(o),r=()=>s(null);return o.addEventListener("load",c),o.addEventListener("error",r),o.src=e,()=>{o.removeEventListener("load",c),o.removeEventListener("error",r)}},[e]),t}var fe="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/index.tsx";function Ut(n){var u=n,{url:e,width:t,height:s,lang:o,className:c}=u,r=Me(u,["url","width","height","lang","className"]);const p=jt(e),l=i.useRef(null),h=i.useRef({}),[a,f]=i.useState({index:-1,stack:[]}),[m,g]=i.useState(null),[y,v]=i.useState("move"),[S,C]=i.useState(void 0),z={url:e,width:t,height:s,image:p,lang:U(U({},Le),o),emiterRef:h,canvasContextRef:l,history:a,bounds:m,cursor:y,operation:S},d=i.useCallback((w,...R)=>{const V=r[w];typeof V=="function"&&V(...R)},[r]),b={call:d,setHistory:f,setBounds:g,setCursor:v,setOperation:C},x=["screenshots"];c&&x.push(c);const N=()=>{h.current={},f({index:-1,stack:[]}),g(null),v("move"),C(void 0)},k=i.useCallback(w=>{w.button!==0||!m||!l.current||l.current.canvas.toBlob(R=>{d("onOk",R,m),N()},"image/png")},[m,d]),E=i.useCallback(w=>{w.button===2&&(w.preventDefault(),d("onCancel"),N())},[d]);return i.useLayoutEffect(()=>{N()},[e]),_.default.createElement(xe.Provider,{value:{store:z,dispatcher:b},__self:this,__source:{fileName:fe,lineNumber:116,columnNumber:5}},_.default.createElement("div",{className:x.join(" "),style:{width:t,height:s},onDoubleClick:k,onContextMenu:E,__self:this,__source:{fileName:fe,lineNumber:117,columnNumber:7}},_.default.createElement(tt,{__self:this,__source:{fileName:fe,lineNumber:123,columnNumber:9}}),_.default.createElement(it,{ref:l,__self:this,__source:{fileName:fe,lineNumber:124,columnNumber:9}}),_.default.createElement(Tt,{__self:this,__source:{fileName:fe,lineNumber:125,columnNumber:9}})))}module.exports=Ut;
+`,vt=["letter-spacing","line-height","padding-top","padding-bottom","font-family","font-weight","font-size","font-variant","text-rendering","text-transform","text-indent","padding-left","padding-right","border-width","box-sizing","white-space","word-break"];let O;function Nt(e){const t=window.getComputedStyle(e),s=t.getPropertyValue("box-sizing")||t.getPropertyValue("-moz-box-sizing")||t.getPropertyValue("-webkit-box-sizing"),o=parseFloat(t.getPropertyValue("padding-bottom"))+parseFloat(t.getPropertyValue("padding-top")),c=parseFloat(t.getPropertyValue("border-bottom-width"))+parseFloat(t.getPropertyValue("border-top-width"));return{sizingStyle:vt.map(n=>`${n}:${t.getPropertyValue(n)}`).join(";"),paddingSize:o,borderSize:c,boxSizing:s}}function Ct(e,t,s,o){O||(O=document.createElement("textarea"),O.setAttribute("tab-index","-1"),document.body.appendChild(O));const{paddingSize:c,borderSize:r,boxSizing:n,sizingStyle:u}=Nt(e);O.setAttribute("style",`${u};${xt};max-width:${s}px;max-height:${o}px`),O.value=t||" ";let d=O.scrollWidth,l=O.scrollHeight;return n==="border-box"?(d+=r,l+=r):n==="content-box"&&(d-=c,l-=c),{width:Math.min(d,s),height:Math.min(l,o)}}var Rt="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsTextarea/index.tsx";function kt({x:e,y:t,maxWidth:s,maxHeight:o,size:c,color:r,value:n,onChange:u,onBlur:d}){const l=i.useRef(null),h=i.useRef(null),[a,f]=i.useState(0),[m,g]=i.useState(0),y=()=>(l.current||(l.current=document.createElement("div")),l.current);return i.useLayoutEffect(()=>(l.current&&(document.body.appendChild(l.current),requestAnimationFrame(()=>{var v;(v=h.current)==null||v.focus()})),()=>{var v;(v=l.current)==null||v.remove()}),[]),i.useLayoutEffect(()=>{if(!h.current)return;const{width:v,height:S}=Ct(h.current,n,s,o);f(v),g(S)},[n,s,o]),Me.createPortal(_.default.createElement("textarea",{ref:h,className:"screenshots-textarea",style:{left:e,top:t,color:r,width:a,height:m,maxWidth:s,maxHeight:o,fontSize:c,lineHeight:`${c}px`},value:n,onChange:v=>u&&u(v.target.value),onBlur:v=>d&&d(v),__self:this,__source:{fileName:Rt,lineNumber:65,columnNumber:5}}),y())}function ue(e){const t=Z();i.useEffect(()=>(t.on("drawselect",e),()=>{t.off("drawselect",e)}),[e,t])}var Se="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Text/index.tsx";const we={3:18,6:32,9:46};function St(e,t){const{size:s,color:o,fontFamily:c,x:r,y:n,text:u}=t.data;e.fillStyle=o,e.textAlign="left",e.textBaseline="top",e.font=`${s}px ${c}`;const d=t.editHistory.reduce((l,{data:h})=>({x:l.x+h.x2-h.x1,y:l.y+h.y2-h.y1}),{x:0,y:0});u.split(`
+`).forEach((l,h)=>{e.fillText(l,r+d.x,n+d.y+h*s)})}function wt(e,t,s){e.textAlign="left",e.textBaseline="top",e.font=`${t.data.size}px ${t.data.fontFamily}`;let o=0,c=0;t.data.text.split(`
+`).forEach(a=>{const f=e.measureText(a);o<f.width&&(o=f.width),c+=t.data.size});const{x:r,y:n}=t.editHistory.reduce((a,{data:f})=>({x:a.x+f.x2-f.x1,y:a.y+f.y2-f.y1}),{x:0,y:0}),u=t.data.x+r,d=t.data.y+n,l=u+o,h=d+c;return s.x>=u&&s.x<=l&&s.y>=d&&s.y<=h}function zt(){const e=X(),[t,s]=P(),[o]=G(),[c,r]=I(),[,n]=A(),u=W(),[d,l]=i.useState(3),[h,a]=i.useState("#ee5126"),f=i.useRef(null),m=i.useRef(null),[g,y]=i.useState(null),[v,S]=i.useState(""),C=c==="Text",z=i.useCallback(()=>{r.set("Text"),n.set("default")},[r,n]),b=i.useCallback(()=>{C||(z(),s.clearSelect())},[C,z,s]),p=i.useCallback(D=>{f.current&&(f.current.data.size=we[D]),l(D)},[]),x=i.useCallback(D=>{f.current&&(f.current.data.color=D),a(D)},[]),N=i.useCallback(D=>{S(D),C&&f.current&&(f.current.data.text=D)},[C]),k=i.useCallback(()=>{f.current&&f.current.data.text&&s.push(f.current),f.current=null,S(""),y(null)},[s]),E=i.useCallback((D,L)=>{D.name==="Text"&&(z(),m.current={type:B.Edit,data:{x1:L.clientX,y1:L.clientY,x2:L.clientX,y2:L.clientY},source:D},s.select(D))},[z,s]),w=i.useCallback(D=>{if(!C||!u.current||f.current||!o)return;const{left:L,top:ge}=u.current.canvas.getBoundingClientRect(),_e=window.getComputedStyle(u.current.canvas).fontFamily,se=D.clientX-L,re=D.clientY-ge;f.current={name:"Text",type:B.Source,data:{size:we[d],color:h,fontFamily:_e,x:se,y:re,text:""},editHistory:[],draw:St,isHit:wt},y({x:D.clientX,y:D.clientY,maxWidth:o.width-se,maxHeight:o.height-re})},[C,d,h,o,u]),R=i.useCallback(D=>{!C||m.current&&(m.current.data.x2=D.clientX,m.current.data.y2=D.clientY,t.top!==m.current?(m.current.source.editHistory.push(m.current),s.push(m.current)):s.set(t))},[C,t,s]),V=i.useCallback(()=>{!C||(m.current=null)},[C]);return ue(E),ee(w),te(R),ne(V),_.default.createElement(_.default.Fragment,null,_.default.createElement(Y,{title:e.operation_text_title,icon:"icon-text",checked:C,onClick:b,option:_.default.createElement(ie,{size:d,color:h,onSizeChange:p,onColorChange:x,__self:this,__source:{fileName:Se,lineNumber:261,columnNumber:11}}),__self:this,__source:{fileName:Se,lineNumber:255,columnNumber:7}}),C&&g&&_.default.createElement(kt,{x:g.x,y:g.y,maxWidth:g.maxWidth,maxHeight:g.maxHeight,size:we[d],color:h,value:v,onChange:N,onBlur:k,__self:this,__source:{fileName:Se,lineNumber:265,columnNumber:9}}))}const Pe=4;function M(e,t,s){e.lineWidth=1,e.strokeStyle="#000000",e.fillStyle="#ffffff",e.beginPath(),e.arc(t,s,Pe,0,2*Math.PI),e.fill(),e.stroke()}function pe(e,t,s){t.draw(e,t);const{data:o}=e.getImageData(s.x,s.y,1,1);return o.some(c=>c!==0)}function $(e,t,s){if(!e)return!1;const{left:o,top:c}=e.getBoundingClientRect(),r=t.clientX-o,n=t.clientY-c;return(s.x-r)**2+(s.y-n)**2<Pe**2}function Et(e,t){const{size:s,color:o,points:c}=t.data;e.lineCap="round",e.lineJoin="round",e.lineWidth=s,e.strokeStyle=o;const r=t.editHistory.reduce((n,{data:u})=>({x:n.x+u.x2-u.x1,y:n.y+u.y2-u.y1}),{x:0,y:0});e.beginPath(),c.forEach((n,u)=>{u===0?e.moveTo(n.x+r.x,n.y+r.y):e.lineTo(n.x+r.x,n.y+r.y)}),e.stroke(),t.isSelected&&(e.lineWidth=1,e.strokeStyle="#000000",e.beginPath(),c.forEach((n,u)=>{u===0?e.moveTo(n.x+r.x,n.y+r.y):e.lineTo(n.x+r.x,n.y+r.y)}),e.stroke())}var Ye="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Brush/index.tsx";function Bt(){const e=X(),[,t]=A(),[s,o]=I(),c=W(),[r,n]=P(),[u,d]=i.useState(3),[l,h]=i.useState("#ee5126"),a=i.useRef(null),f=i.useRef(null),m=s==="Brush",g=i.useCallback(()=>{o.set("Brush"),t.set("default")},[o,t]),y=i.useCallback(()=>{m||(g(),n.clearSelect())},[m,g,n]),v=i.useCallback((b,p)=>{b.name==="Brush"&&(g(),f.current={type:B.Edit,data:{x1:p.clientX,y1:p.clientY,x2:p.clientX,y2:p.clientY},source:b},n.select(b))},[g,n]),S=i.useCallback(b=>{if(!m||a.current||!c.current)return;const{left:p,top:x}=c.current.canvas.getBoundingClientRect();a.current={name:"Brush",type:B.Source,data:{size:u,color:l,points:[{x:b.clientX-p,y:b.clientY-x}]},editHistory:[],draw:Et,isHit:pe}},[m,c,u,l]),C=i.useCallback(b=>{if(!(!m||!c.current)){if(f.current)f.current.data.x2=b.clientX,f.current.data.y2=b.clientY,r.top!==f.current?(f.current.source.editHistory.push(f.current),n.push(f.current)):n.set(r);else if(a.current){const{left:p,top:x}=c.current.canvas.getBoundingClientRect();a.current.data.points.push({x:b.clientX-p,y:b.clientY-x}),r.top!==a.current?n.push(a.current):n.set(r)}}},[m,r,c,n]),z=i.useCallback(()=>{!m||(a.current&&n.clearSelect(),a.current=null,f.current=null)},[m,n]);return ue(v),ee(S),te(C),ne(z),_.default.createElement(Y,{title:e.operation_brush_title,icon:"icon-brush",checked:m,onClick:y,option:_.default.createElement(ie,{size:u,color:l,onSizeChange:d,onColorChange:h,__self:this,__source:{fileName:Ye,lineNumber:166,columnNumber:15}}),__self:this,__source:{fileName:Ye,lineNumber:161,columnNumber:5}})}function Fe(e){let{x1:t,y1:s,x2:o,y2:c}=e.data;return e.editHistory.forEach(({data:r})=>{const n=r.x2-r.x1,u=r.y2-r.y1;r.type===le.Move?(t+=n,s+=u,o+=n,c+=u):r.type===le.MoveStart?(t+=n,s+=u):r.type===le.MoveEnd&&(o+=n,c+=u)}),me(U({},e.data),{x1:t,x2:o,y1:s,y2:c})}function Dt(e,t){const{size:s,color:o,x1:c,x2:r,y1:n,y2:u}=Fe(t);e.lineCap="round",e.lineJoin="bevel",e.lineWidth=s,e.strokeStyle=o;const d=r-c,l=u-n,h=s*3,a=Math.atan2(l,d);e.beginPath(),e.moveTo(c,n),e.lineTo(r,u),e.lineTo(r-h*Math.cos(a-Math.PI/6),u-h*Math.sin(a-Math.PI/6)),e.moveTo(r,u),e.lineTo(r-h*Math.cos(a+Math.PI/6),u-h*Math.sin(a+Math.PI/6)),e.stroke(),t.isSelected&&(M(e,c,n),M(e,r,u))}var Te="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Arrow/index.tsx",le;(function(e){e[e.Move=0]="Move",e[e.MoveStart=1]="MoveStart",e[e.MoveEnd=2]="MoveEnd"})(le||(le={}));function Mt(){const e=X(),[,t]=A(),[s,o]=I(),[c,r]=P(),n=W(),[u,d]=i.useState(3),[l,h]=i.useState("#ee5126"),a=i.useRef(null),f=i.useRef(null),m=s==="Arrow",g=i.useCallback(()=>{o.set("Arrow"),t.set("default")},[o,t]),y=i.useCallback(()=>{m||(g(),r.clearSelect())},[m,g,r]),v=i.useCallback((b,p)=>{if(b.name!=="Arrow"||!n.current)return;const x=b;g();const{x1:N,y1:k,x2:E,y2:w}=Fe(x);let R=0;$(n.current.canvas,p,{x:N,y:k})?R=1:$(n.current.canvas,p,{x:E,y:w})&&(R=2),f.current={type:B.Edit,data:{type:R,x1:p.clientX,y1:p.clientY,x2:p.clientX,y2:p.clientY},source:x},r.select(b)},[n,g,r]),S=i.useCallback(b=>{if(!m||a.current||!n.current)return;const{left:p,top:x}=n.current.canvas.getBoundingClientRect();a.current={name:"Arrow",type:B.Source,data:{size:u,color:l,x1:b.clientX-p,y1:b.clientY-x,x2:b.clientX-p,y2:b.clientY-x},editHistory:[],draw:Dt,isHit:pe}},[m,l,u,n]),C=i.useCallback(b=>{if(!(!m||!n.current)){if(f.current)f.current.data.x2=b.clientX,f.current.data.y2=b.clientY,c.top!==f.current?(f.current.source.editHistory.push(f.current),r.push(f.current)):r.set(c);else if(a.current){const{left:p,top:x}=n.current.canvas.getBoundingClientRect();a.current.data.x2=b.clientX-p,a.current.data.y2=b.clientY-x,c.top!==a.current?r.push(a.current):r.set(c)}}},[m,c,n,r]),z=i.useCallback(()=>{!m||(a.current&&r.clearSelect(),a.current=null,f.current=null)},[m,r]);return ue(v),ee(S),te(C),ne(z),_.default.createElement(Y,{title:e.operation_arrow_title,icon:"icon-arrow",checked:m,onClick:y,option:_.default.createElement(ie,{size:u,color:l,onSizeChange:d,onColorChange:h,__self:this,__source:{fileName:Te,lineNumber:190,columnNumber:15}}),__self:this,__source:{fileName:Te,lineNumber:185,columnNumber:5}})}function je(e){let{x1:t,y1:s,x2:o,y2:c}=e.data;return e.editHistory.forEach(({data:r})=>{const n=r.x2-r.x1,u=r.y2-r.y1;r.type===F.Move?(t+=n,s+=u,o+=n,c+=u):r.type===F.ResizeTop?s+=u:r.type===F.ResizeRightTop?(o+=n,s+=u):r.type===F.ResizeRight?o+=n:r.type===F.ResizeRightBottom?(o+=n,c+=u):r.type===F.ResizeBottom?c+=u:r.type===F.ResizeLeftBottom?(t+=n,c+=u):r.type===F.ResizeLeft?t+=n:r.type===F.ResizeLeftTop&&(t+=n,s+=u)}),me(U({},e.data),{x1:t,x2:o,y1:s,y2:c})}function $t(e,t){const{size:s,color:o,x1:c,y1:r,x2:n,y2:u}=je(t);e.lineCap="butt",e.lineJoin="miter",e.lineWidth=s,e.strokeStyle=o;const d=(c+n)/2,l=(r+u)/2,h=Math.abs(n-c)/2,a=Math.abs(u-r)/2,f=.5522848,m=h*f,g=a*f;e.beginPath(),e.moveTo(d-h,l),e.bezierCurveTo(d-h,l-g,d-m,l-a,d,l-a),e.bezierCurveTo(d+m,l-a,d+h,l-g,d+h,l),e.bezierCurveTo(d+h,l+g,d+m,l+a,d,l+a),e.bezierCurveTo(d-m,l+a,d-h,l+g,d-h,l),e.closePath(),e.stroke(),t.isSelected&&(e.lineWidth=1,e.strokeStyle="#000000",e.fillStyle="#ffffff",e.beginPath(),e.moveTo(c,r),e.lineTo(n,r),e.lineTo(n,u),e.lineTo(c,u),e.closePath(),e.stroke(),M(e,(c+n)/2,r),M(e,n,r),M(e,n,(r+u)/2),M(e,n,u),M(e,(c+n)/2,u),M(e,c,u),M(e,c,(r+u)/2),M(e,c,r))}var Ue="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Ellipse/index.tsx",F;(function(e){e[e.Move=0]="Move",e[e.ResizeTop=1]="ResizeTop",e[e.ResizeRightTop=2]="ResizeRightTop",e[e.ResizeRight=3]="ResizeRight",e[e.ResizeRightBottom=4]="ResizeRightBottom",e[e.ResizeBottom=5]="ResizeBottom",e[e.ResizeLeftBottom=6]="ResizeLeftBottom",e[e.ResizeLeft=7]="ResizeLeft",e[e.ResizeLeftTop=8]="ResizeLeftTop"})(F||(F={}));function Lt(){const e=X(),[t,s]=P(),[o,c]=I(),[,r]=A(),n=W(),[u,d]=i.useState(3),[l,h]=i.useState("#ee5126"),a=i.useRef(null),f=i.useRef(null),m=o==="Ellipse",g=i.useCallback(()=>{c.set("Ellipse"),r.set("crosshair")},[c,r]),y=i.useCallback(()=>{m||(g(),s.clearSelect())},[m,g,s]),v=i.useCallback((b,p)=>{if(b.name!=="Ellipse"||!n.current)return;const x=b;g();const{x1:N,y1:k,x2:E,y2:w}=je(x);let R=0;$(n.current.canvas,p,{x:(N+E)/2,y:k})?R=1:$(n.current.canvas,p,{x:E,y:k})?R=2:$(n.current.canvas,p,{x:E,y:(k+w)/2})?R=3:$(n.current.canvas,p,{x:E,y:w})?R=4:$(n.current.canvas,p,{x:(N+E)/2,y:w})?R=5:$(n.current.canvas,p,{x:N,y:w})?R=6:$(n.current.canvas,p,{x:N,y:(k+w)/2})?R=7:$(n.current.canvas,p,{x:N,y:k})&&(R=8),f.current={type:B.Edit,data:{type:R,x1:p.clientX,y1:p.clientY,x2:p.clientX,y2:p.clientY},source:x},s.select(b)},[n,g,s]),S=i.useCallback(b=>{if(!m||!n.current||a.current)return;const{left:p,top:x}=n.current.canvas.getBoundingClientRect(),N=b.clientX-p,k=b.clientY-x;a.current={name:"Ellipse",type:B.Source,data:{size:u,color:l,x1:N,y1:k,x2:N,y2:k},editHistory:[],draw:$t,isHit:pe}},[m,u,l,n]),C=i.useCallback(b=>{if(!(!m||!n.current)){if(f.current)f.current.data.x2=b.clientX,f.current.data.y2=b.clientY,t.top!==f.current?(f.current.source.editHistory.push(f.current),s.push(f.current)):s.set(t);else if(a.current){const{left:p,top:x}=n.current.canvas.getBoundingClientRect();a.current.data.x2=b.clientX-p,a.current.data.y2=b.clientY-x,t.top!==a.current?s.push(a.current):s.set(t)}}},[m,n,t,s]),z=i.useCallback(()=>{!m||(a.current&&s.clearSelect(),a.current=null,f.current=null)},[m,s]);return ue(v),ee(S),te(C),ne(z),_.default.createElement(Y,{title:e.operation_ellipse_title,icon:"icon-ellipse",checked:m,onClick:y,option:_.default.createElement(ie,{size:u,color:l,onSizeChange:d,onColorChange:h,__self:this,__source:{fileName:Ue,lineNumber:242,columnNumber:15}}),__self:this,__source:{fileName:Ue,lineNumber:237,columnNumber:5}})}function Ge(e){let{x1:t,y1:s,x2:o,y2:c}=e.data;return e.editHistory.forEach(({data:r})=>{const n=r.x2-r.x1,u=r.y2-r.y1;r.type===T.Move?(t+=n,s+=u,o+=n,c+=u):r.type===T.ResizeTop?s+=u:r.type===T.ResizeRightTop?(o+=n,s+=u):r.type===T.ResizeRight?o+=n:r.type===T.ResizeRightBottom?(o+=n,c+=u):r.type===T.ResizeBottom?c+=u:r.type===T.ResizeLeftBottom?(t+=n,c+=u):r.type===T.ResizeLeft?t+=n:r.type===T.ResizeLeftTop&&(t+=n,s+=u)}),me(U({},e.data),{x1:t,x2:o,y1:s,y2:c})}function Ht(e,t){const{size:s,color:o,x1:c,y1:r,x2:n,y2:u}=Ge(t);e.lineCap="butt",e.lineJoin="miter",e.lineWidth=s,e.strokeStyle=o,e.beginPath(),e.moveTo(c,r),e.lineTo(n,r),e.lineTo(n,u),e.lineTo(c,u),e.closePath(),e.stroke(),t.isSelected&&(e.lineWidth=1,e.strokeStyle="#000000",e.fillStyle="#ffffff",M(e,(c+n)/2,r),M(e,n,r),M(e,n,(r+u)/2),M(e,n,u),M(e,(c+n)/2,u),M(e,c,u),M(e,c,(r+u)/2),M(e,c,r))}var Ae="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Rectangle/index.tsx",T;(function(e){e[e.Move=0]="Move",e[e.ResizeTop=1]="ResizeTop",e[e.ResizeRightTop=2]="ResizeRightTop",e[e.ResizeRight=3]="ResizeRight",e[e.ResizeRightBottom=4]="ResizeRightBottom",e[e.ResizeBottom=5]="ResizeBottom",e[e.ResizeLeftBottom=6]="ResizeLeftBottom",e[e.ResizeLeft=7]="ResizeLeft",e[e.ResizeLeftTop=8]="ResizeLeftTop"})(T||(T={}));function Xt(){const e=X(),[t,s]=P(),[o,c]=I(),[,r]=A(),n=W(),[u,d]=i.useState(3),[l,h]=i.useState("#ee5126"),a=i.useRef(null),f=i.useRef(null),m=o==="Rectangle",g=i.useCallback(()=>{c.set("Rectangle"),r.set("crosshair")},[c,r]),y=i.useCallback(()=>{m||(g(),s.clearSelect())},[m,g,s]),v=i.useCallback((b,p)=>{if(b.name!=="Rectangle"||!n.current)return;const x=b;g();const{x1:N,y1:k,x2:E,y2:w}=Ge(x);let R=0;$(n.current.canvas,p,{x:(N+E)/2,y:k})?R=1:$(n.current.canvas,p,{x:E,y:k})?R=2:$(n.current.canvas,p,{x:E,y:(k+w)/2})?R=3:$(n.current.canvas,p,{x:E,y:w})?R=4:$(n.current.canvas,p,{x:(N+E)/2,y:w})?R=5:$(n.current.canvas,p,{x:N,y:w})?R=6:$(n.current.canvas,p,{x:N,y:(k+w)/2})?R=7:$(n.current.canvas,p,{x:N,y:k})&&(R=8),f.current={type:B.Edit,data:{type:R,x1:p.clientX,y1:p.clientY,x2:p.clientX,y2:p.clientY},source:b},s.select(b)},[n,g,s]),S=i.useCallback(b=>{if(!m||!n.current||a.current)return;const{left:p,top:x}=n.current.canvas.getBoundingClientRect(),N=b.clientX-p,k=b.clientY-x;a.current={name:"Rectangle",type:B.Source,data:{size:u,color:l,x1:N,y1:k,x2:N,y2:k},editHistory:[],draw:Ht,isHit:pe}},[m,u,l,n]),C=i.useCallback(b=>{if(!(!m||!n.current)){if(f.current)f.current.data.x2=b.clientX,f.current.data.y2=b.clientY,t.top!==f.current?(f.current.source.editHistory.push(f.current),s.push(f.current)):s.set(t);else if(a.current){const{left:p,top:x}=n.current.canvas.getBoundingClientRect(),N=a.current.data;N.x2=b.clientX-p,N.y2=b.clientY-x,t.top!==a.current?s.push(a.current):s.set(t)}}},[m,n,t,s]),z=i.useCallback(()=>{!m||(a.current&&s.clearSelect(),a.current=null,f.current=null)},[m,s]);return ue(v),ee(S),te(C),ne(z),_.default.createElement(Y,{title:e.operation_rectangle_title,icon:"icon-rectangle",checked:m,onClick:y,option:_.default.createElement(ie,{size:u,color:l,onSizeChange:d,onColorChange:h,__self:this,__source:{fileName:Ae,lineNumber:242,columnNumber:15}}),__self:this,__source:{fileName:Ae,lineNumber:237,columnNumber:5}})}var Pt=[Xt,Lt,Mt,Bt,zt,_t,"|",pt,dt,"|",ht,at,ut];var ae="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsOperations/index.tsx";const Ie=_.default.createContext(null);function Yt(){const{width:e,height:t}=H(),[s]=G(),[o,c]=i.useState(null),[r,n]=i.useState(null),u=i.useRef(null),d=i.useCallback(h=>{h.stopPropagation()},[]),l=i.useCallback(h=>{h.preventDefault(),h.stopPropagation()},[]);return i.useEffect(()=>{if(!s||!u.current)return;const h=u.current.getBoundingClientRect();let a=s.x+s.width-h.width,f=s.y+s.height+10;a<0&&(a=0),a>e-h.width&&(a=e-h.width),f>t-h.height&&(f=t-h.height-10),((r==null?void 0:r.x)!==a||r.y!==f)&&n({x:a,y:f}),((o==null?void 0:o.x)!==h.x||o.y!==h.y||o.width!==h.width||o.height!==h.height)&&c({x:h.x,y:h.y,width:h.width,height:h.height})}),s?_.default.createElement(Ie.Provider,{value:o,__self:this,__source:{fileName:ae,lineNumber:76,columnNumber:5}},_.default.createElement("div",{ref:u,className:"screenshots-operations",style:{visibility:r?"visible":"hidden",left:r==null?void 0:r.x,top:r==null?void 0:r.y},onDoubleClick:d,onContextMenu:l,__self:this,__source:{fileName:ae,lineNumber:77,columnNumber:7}},_.default.createElement("div",{className:"screenshots-operations-buttons",__self:this,__source:{fileName:ae,lineNumber:88,columnNumber:9}},Pt.map((h,a)=>h==="|"?_.default.createElement("div",{key:a,className:"screenshots-operations-divider",__self:this,__source:{fileName:ae,lineNumber:91,columnNumber:22}}):_.default.createElement(h,{key:a,__self:this,__source:{fileName:ae,lineNumber:93,columnNumber:22}}))))):null}function Ft(e){const[t,s]=i.useState(null);return i.useEffect(()=>{if(s(null),e==null)return;const o=document.createElement("img"),c=()=>s(o),r=()=>s(null);return o.addEventListener("load",c),o.addEventListener("error",r),o.src=e,()=>{o.removeEventListener("load",c),o.removeEventListener("error",r)}},[e]),t}var fe="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/index.tsx";function Tt(n){var u=n,{url:e,width:t,height:s,lang:o,className:c}=u,r=De(u,["url","width","height","lang","className"]);const d=Ft(e),l=i.useRef(null),h=i.useRef({}),[a,f]=i.useState({index:-1,stack:[]}),[m,g]=i.useState(null),[y,v]=i.useState("move"),[S,C]=i.useState(void 0),z={url:e,width:t,height:s,image:d,lang:U(U({},$e),o),emiterRef:h,canvasContextRef:l,history:a,bounds:m,cursor:y,operation:S},b=i.useCallback((w,...R)=>{const V=r[w];typeof V=="function"&&V(...R)},[r]),p={call:b,setHistory:f,setBounds:g,setCursor:v,setOperation:C},x=["screenshots"];c&&x.push(c);const N=()=>{h.current={},f({index:-1,stack:[]}),g(null),v("move"),C(void 0)},k=i.useCallback(async w=>{if(!(w.button!==0||!d))if(m&&l.current)l.current.canvas.toBlob(R=>{b("onOk",R,m),N()},"image/png");else{const R=await Je(d,{width:t,height:s});b("onOk",R,{x:0,y:0,width:t,height:s}),N()}},[d,m,t,s,b]),E=i.useCallback(w=>{w.button===2&&(w.preventDefault(),b("onCancel"),N())},[b]);return i.useLayoutEffect(()=>{N()},[e]),_.default.createElement(ye.Provider,{value:{store:z,dispatcher:p},__self:this,__source:{fileName:fe,lineNumber:128,columnNumber:5}},_.default.createElement("div",{className:x.join(" "),style:{width:t,height:s},onDoubleClick:k,onContextMenu:E,__self:this,__source:{fileName:fe,lineNumber:129,columnNumber:7}},_.default.createElement(Ze,{__self:this,__source:{fileName:fe,lineNumber:135,columnNumber:9}}),_.default.createElement(ot,{ref:l,__self:this,__source:{fileName:fe,lineNumber:136,columnNumber:9}}),_.default.createElement(Yt,{__self:this,__source:{fileName:fe,lineNumber:137,columnNumber:9}})))}module.exports=Tt;

package/lib/react-screenshots.es.js

@@ -29,10 +29,34 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-var _a;
 import React, { useContext, useCallback, useState, useRef, useLayoutEffect, useEffect, forwardRef, useImperativeHandle, cloneElement } from "react";
 import { createPortal } from "react-dom";
 var iconfont = "";
+function imageToBlob(image, { width, height }) {
+  return new Promise((resolve, reject) => {
+    if (!image.complete) {
+      return reject(new Error("image is not fully loaded"));
+    }
+    const $canvas = document.createElement("canvas");
+    const targetWidth = width * window.devicePixelRatio;
+    const targetHeight = height * window.devicePixelRatio;
+    $canvas.width = targetWidth;
+    $canvas.height = targetHeight;
+    const ctx = $canvas.getContext("2d");
+    if (!ctx) {
+      return reject(new Error("convert image to blob fail"));
+    }
+    ctx.imageSmoothingEnabled = true;
+    ctx.imageSmoothingQuality = "low";
+    ctx.drawImage(image, 0, 0, image.naturalWidth, image.naturalHeight, 0, 0, targetWidth, targetHeight);
+    $canvas.toBlob((blob) => {
+      if (!blob) {
+        return reject(new Error("canvas toBlob fail"));
+      }
+      resolve(blob);
+    }, "image/png");
+  });
+}
 var screenshots = "";
 const zhCN = {
   magnifier_position_label: "\u5750\u6807",
@@ -332,6 +356,11 @@ function ScreenshotsBackground() {
       window.removeEventListener("mouseup", onMouseUp);
     };
   }, [updateBounds]);
+  useLayoutEffect(() => {
+    if (!image || bounds) {
+      setPosition(null);
+    }
+  }, [image, bounds]);
   if (!url || !image) {
     return null;
   }
@@ -342,7 +371,7 @@ function ScreenshotsBackground() {
     __self: this,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 113,
+      lineNumber: 120,
       columnNumber: 5
     }
   }, /* @__PURE__ */ React.createElement("img", {
@@ -351,7 +380,7 @@ function ScreenshotsBackground() {
     __self: this,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 114,
+      lineNumber: 121,
       columnNumber: 7
     }
   }), /* @__PURE__ */ React.createElement("div", {
@@ -359,7 +388,7 @@ function ScreenshotsBackground() {
     __self: this,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 115,
+      lineNumber: 122,
       columnNumber: 7
     }
   }), position && !bounds && /* @__PURE__ */ React.createElement(ScreenshotsMagnifier, {
@@ -368,110 +397,28 @@ function ScreenshotsBackground() {
     __self: this,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 116,
+      lineNumber: 123,
       columnNumber: 31
     }
   }));
 }
-const dpr = (_a = window.devicePixelRatio) != null ? _a : 2;
-var dpr$1 = dpr < 2 ? 2 : dpr;
-function getBoundsByPoints$1(e, resizeOrMove, point, bounds) {
-  const x = e.clientX - point.x;
-  const y = e.clientY - point.y;
-  let x1 = bounds.x;
-  let y1 = bounds.y;
-  let x2 = bounds.x + bounds.width;
-  let y2 = bounds.y + bounds.height;
-  switch (resizeOrMove) {
-    case "top":
-      y1 += y;
-      break;
-    case "top-right":
-      x2 += x;
-      y1 += y;
-      break;
-    case "right":
-      x2 += x;
-      break;
-    case "right-bottom":
-      x2 += x;
-      y2 += y;
-      break;
-    case "bottom":
-      y2 += y;
-      break;
-    case "bottom-left":
-      x1 += x;
-      y2 += y;
-      break;
-    case "left":
-      x1 += x;
-      break;
-    case "left-top":
-      x1 += x;
-      y1 += y;
-      break;
-    case "move":
-      x1 += x;
-      y1 += y;
-      x2 += x;
-      y2 += y;
-      break;
-  }
+function useCursor() {
+  const { cursor } = useStore();
+  const { setCursor } = useDispatcher();
+  const set = useCallback((cursor2) => {
+    setCursor == null ? void 0 : setCursor(cursor2);
+  }, [setCursor]);
+  const reset = useCallback(() => {
+    setCursor == null ? void 0 : setCursor("move");
+  }, [setCursor]);
   return [
+    cursor,
     {
-      x: x1,
-      y: y1
-    },
-    {
-      x: x2,
-      y: y2
+      set,
+      reset
     }
   ];
 }
-function getBoundsByPoints({ x: x1, y: y1 }, { x: x2, y: y2 }, bounds, width, height, resizeOrMove) {
-  if (x1 > x2) {
-    [x1, x2] = [x2, x1];
-  }
-  if (y1 > y2) {
-    [y1, y2] = [y2, y1];
-  }
-  if (x1 < 0) {
-    x1 = 0;
-    if (resizeOrMove === "move") {
-      x2 = bounds.width;
-    }
-  }
-  if (x2 > width) {
-    x2 = width;
-    if (resizeOrMove === "move") {
-      x1 = x2 - bounds.width;
-    }
-  }
-  if (y1 < 0) {
-    y1 = 0;
-    if (resizeOrMove === "move") {
-      y2 = bounds.height;
-    }
-  }
-  if (y2 > height) {
-    y2 = height;
-    if (resizeOrMove === "move") {
-      y1 = y2 - bounds.height;
-    }
-  }
-  return {
-    x: x1,
-    y: y1,
-    width: Math.max(x2 - x1, 1),
-    height: Math.max(y2 - y1, 1)
-  };
-}
-var HistoryItemType;
-(function(HistoryItemType2) {
-  HistoryItemType2[HistoryItemType2["Edit"] = 0] = "Edit";
-  HistoryItemType2[HistoryItemType2["Source"] = 1] = "Source";
-})(HistoryItemType || (HistoryItemType = {}));
 function useEmiter() {
   const { emiterRef } = useStore();
   const on = useCallback((event, listener) => {
@@ -507,6 +454,11 @@ function useEmiter() {
     reset
   };
 }
+var HistoryItemType;
+(function(HistoryItemType2) {
+  HistoryItemType2[HistoryItemType2["Edit"] = 0] = "Edit";
+  HistoryItemType2[HistoryItemType2["Source"] = 1] = "Source";
+})(HistoryItemType || (HistoryItemType = {}));
 function useHistory() {
   const { history } = useStore();
   const { setHistory } = useDispatcher();
@@ -614,23 +566,6 @@ function useHistory() {
     }
   ];
 }
-function useCursor() {
-  const { cursor } = useStore();
-  const { setCursor } = useDispatcher();
-  const set = useCallback((cursor2) => {
-    setCursor == null ? void 0 : setCursor(cursor2);
-  }, [setCursor]);
-  const reset = useCallback(() => {
-    setCursor == null ? void 0 : setCursor("move");
-  }, [setCursor]);
-  return [
-    cursor,
-    {
-      set,
-      reset
-    }
-  ];
-}
 function useOperation() {
   const { operation } = useStore();
   const { setOperation } = useDispatcher();
@@ -648,6 +583,98 @@ function useOperation() {
     }
   ];
 }
+function getBoundsByPoints$1({ x: x1, y: y1 }, { x: x2, y: y2 }, bounds, width, height, resizeOrMove) {
+  if (x1 > x2) {
+    [x1, x2] = [x2, x1];
+  }
+  if (y1 > y2) {
+    [y1, y2] = [y2, y1];
+  }
+  if (x1 < 0) {
+    x1 = 0;
+    if (resizeOrMove === "move") {
+      x2 = bounds.width;
+    }
+  }
+  if (x2 > width) {
+    x2 = width;
+    if (resizeOrMove === "move") {
+      x1 = x2 - bounds.width;
+    }
+  }
+  if (y1 < 0) {
+    y1 = 0;
+    if (resizeOrMove === "move") {
+      y2 = bounds.height;
+    }
+  }
+  if (y2 > height) {
+    y2 = height;
+    if (resizeOrMove === "move") {
+      y1 = y2 - bounds.height;
+    }
+  }
+  return {
+    x: x1,
+    y: y1,
+    width: Math.max(x2 - x1, 1),
+    height: Math.max(y2 - y1, 1)
+  };
+}
+function getBoundsByPoints(e, resizeOrMove, point, bounds) {
+  const x = e.clientX - point.x;
+  const y = e.clientY - point.y;
+  let x1 = bounds.x;
+  let y1 = bounds.y;
+  let x2 = bounds.x + bounds.width;
+  let y2 = bounds.y + bounds.height;
+  switch (resizeOrMove) {
+    case "top":
+      y1 += y;
+      break;
+    case "top-right":
+      x2 += x;
+      y1 += y;
+      break;
+    case "right":
+      x2 += x;
+      break;
+    case "right-bottom":
+      x2 += x;
+      y2 += y;
+      break;
+    case "bottom":
+      y2 += y;
+      break;
+    case "bottom-left":
+      x1 += x;
+      y2 += y;
+      break;
+    case "left":
+      x1 += x;
+      break;
+    case "left-top":
+      x1 += x;
+      y1 += y;
+      break;
+    case "move":
+      x1 += x;
+      y1 += y;
+      x2 += x;
+      y2 += y;
+      break;
+  }
+  return [
+    {
+      x: x1,
+      y: y1
+    },
+    {
+      x: x2,
+      y: y2
+    }
+  ];
+}
 var index$7 = "";
 function isPointInDraw(bounds, canvas, history, e) {
   if (!canvas) {
@@ -665,12 +692,12 @@ function isPointInDraw(bounds, canvas, history, e) {
   const y = e.clientY - top;
   const stack = [...history.stack.slice(0, history.index + 1)];
   return stack.reverse().find((item) => {
-    var _a2;
+    var _a;
     if (item.type !== HistoryItemType.Source) {
       return false;
     }
     ctx.clearRect(0, 0, bounds.width, bounds.height);
-    return (_a2 = item.isHit) == null ? void 0 : _a2.call(item, ctx, item, { x, y });
+    return (_a = item.isHit) == null ? void 0 : _a.call(item, ctx, item, { x, y });
   });
 }
 var _jsxFileName$j = "/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsCanvas/index.tsx";
@@ -713,7 +740,7 @@ var ScreenshotsCanvas = forwardRef(function ScreenshotsCanvas2(props, ref) {
     const ctx = ctxRef.current;
     ctx.imageSmoothingEnabled = true;
     ctx.imageSmoothingQuality = "low";
-    ctx.setTransform(dpr$1, 0, 0, dpr$1, 0, 0);
+    ctx.setTransform(window.devicePixelRatio, 0, 0, window.devicePixelRatio, 0, 0);
     ctx.clearRect(0, 0, bounds.width, bounds.height);
     ctx.drawImage(image, bounds.x * rx, bounds.y * ry, bounds.width * rx, bounds.height * ry, 0, 0, bounds.width, bounds.height);
     history.stack.slice(0, history.index + 1).forEach((item) => {
@@ -751,8 +778,8 @@ var ScreenshotsCanvas = forwardRef(function ScreenshotsCanvas2(props, ref) {
     if (!resizeOrMoveRef.current || !pointRef.current || !boundsRef.current || !bounds) {
       return;
     }
-    const points = getBoundsByPoints$1(e, resizeOrMoveRef.current, pointRef.current, boundsRef.current);
-    boundsDispatcher.set(getBoundsByPoints(points[0], points[1], bounds, width, height, resizeOrMoveRef.current));
+    const points = getBoundsByPoints(e, resizeOrMoveRef.current, pointRef.current, boundsRef.current);
+    boundsDispatcher.set(getBoundsByPoints$1(points[0], points[1], bounds, width, height, resizeOrMoveRef.current));
   }, [width, height, bounds, boundsDispatcher]);
   useLayoutEffect(() => {
     if (!image || !bounds || !canvasRef.current) {
@@ -810,13 +837,13 @@ var ScreenshotsCanvas = forwardRef(function ScreenshotsCanvas2(props, ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 191,
+      lineNumber: 190,
       columnNumber: 5
     }
   }, /* @__PURE__ */ React.createElement("canvas", {
     ref: canvasRef,
-    width: bounds.width * dpr$1,
-    height: bounds.height * dpr$1,
+    width: bounds.width * window.devicePixelRatio,
+    height: bounds.height * window.devicePixelRatio,
     style: {
       width: bounds.width,
       height: bounds.height
@@ -824,7 +851,7 @@ var ScreenshotsCanvas = forwardRef(function ScreenshotsCanvas2(props, ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 200,
+      lineNumber: 199,
       columnNumber: 7
     }
   }), /* @__PURE__ */ React.createElement("div", {
@@ -836,7 +863,7 @@ var ScreenshotsCanvas = forwardRef(function ScreenshotsCanvas2(props, ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 209,
+      lineNumber: 208,
       columnNumber: 7
     }
   }), borders.map((border) => {
@@ -846,7 +873,7 @@ var ScreenshotsCanvas = forwardRef(function ScreenshotsCanvas2(props, ref) {
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 217,
+        lineNumber: 216,
         columnNumber: 16
       }
     });
@@ -858,7 +885,7 @@ var ScreenshotsCanvas = forwardRef(function ScreenshotsCanvas2(props, ref) {
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 221,
+        lineNumber: 220,
         columnNumber: 11
       }
     });
@@ -867,8 +894,8 @@ var ScreenshotsCanvas = forwardRef(function ScreenshotsCanvas2(props, ref) {
 function useCall() {
   const dispatcher = useDispatcher();
   const call = useCallback((funcName, ...args) => {
-    var _a2;
-    (_a2 = dispatcher.call) == null ? void 0 : _a2.call(dispatcher, funcName, ...args);
+    var _a;
+    (_a = dispatcher.call) == null ? void 0 : _a.call(dispatcher, funcName, ...args);
   }, [dispatcher]);
   return call;
 }
@@ -1595,13 +1622,13 @@ function ScreenshotsTextarea({
     if (popoverRef.current) {
       document.body.appendChild(popoverRef.current);
       requestAnimationFrame(() => {
-        var _a2;
-        (_a2 = textareaRef.current) == null ? void 0 : _a2.focus();
+        var _a;
+        (_a = textareaRef.current) == null ? void 0 : _a.focus();
       });
     }
     return () => {
-      var _a2;
-      (_a2 = popoverRef.current) == null ? void 0 : _a2.remove();
+      var _a;
+      (_a = popoverRef.current) == null ? void 0 : _a.remove();
     };
   }, []);
   useLayoutEffect(() => {
@@ -2939,14 +2966,14 @@ function useGetLoadedImage(url) {
   return image;
 }
 var _jsxFileName = "/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/index.tsx";
-function Screenshots(_b) {
-  var _c = _b, {
+function Screenshots(_a) {
+  var _b = _a, {
     url,
     width,
     height,
     lang,
     className
-  } = _c, props = __objRest(_c, [
+  } = _b, props = __objRest(_b, [
     "url",
     "width",
     "height",
@@ -3003,15 +3030,29 @@ function Screenshots(_b) {
     setCursor("move");
     setOperation(void 0);
   };
-  const onDoubleClick = useCallback((e) => {
-    if (e.button !== 0 || !bounds || !canvasContextRef.current) {
+  const onDoubleClick = useCallback(async (e) => {
+    if (e.button !== 0 || !image) {
       return;
     }
-    canvasContextRef.current.canvas.toBlob((blob) => {
-      call("onOk", blob, bounds);
+    if (bounds && canvasContextRef.current) {
+      canvasContextRef.current.canvas.toBlob((blob) => {
+        call("onOk", blob, bounds);
+        reset();
+      }, "image/png");
+    } else {
+      const blob = await imageToBlob(image, {
+        width,
+        height
+      });
+      call("onOk", blob, {
+        x: 0,
+        y: 0,
+        width,
+        height
+      });
       reset();
-    }, "image/png");
-  }, [bounds, call]);
+    }
+  }, [image, bounds, width, height, call]);
   const onContextMenu = useCallback((e) => {
     if (e.button !== 2) {
       return;
@@ -3031,7 +3072,7 @@ function Screenshots(_b) {
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 116,
+      lineNumber: 128,
       columnNumber: 5
     }
   }, /* @__PURE__ */ React.createElement("div", {
@@ -3045,14 +3086,14 @@ function Screenshots(_b) {
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 117,
+      lineNumber: 129,
       columnNumber: 7
     }
   }, /* @__PURE__ */ React.createElement(ScreenshotsBackground, {
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 123,
+      lineNumber: 135,
       columnNumber: 9
     }
   }), /* @__PURE__ */ React.createElement(ScreenshotsCanvas, {
@@ -3060,14 +3101,14 @@ function Screenshots(_b) {
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 124,
+      lineNumber: 136,
       columnNumber: 9
     }
   }), /* @__PURE__ */ React.createElement(ScreenshotsOperations, {
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 125,
+      lineNumber: 137,
       columnNumber: 9
     }
   })));

package/lib/types/imageToBlob.d.ts

@@ -0,0 +1,5 @@
+export interface TargetSize {
+    width: number;
+    height: number;
+}
+export default function imageToBlob(image: HTMLImageElement, { width, height }: TargetSize): Promise<Blob>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-screenshots",
-  "version": "0.4.5",
+  "version": "0.5.0",
   "description": "a screenshot cropper tool by react",
   "main": "./lib/react-screenshots.cjs.js",
   "module": "./lib/react-screenshots.es.js",
@@ -64,5 +64,5 @@
     "typescript": "^4.5.5",
     "vite": "^2.7.13"
   },
-  "gitHead": "83c063ecd6b84c75cea303543e01949b352d148c"
+  "gitHead": "e85cde9348d04d108f2e865cfea7f4ac87b11c43"
 }

package/electron/assets/index.6be07a29.js

@@ -1,14 +0,0 @@
-var Qe=Object.defineProperty,Ze=Object.defineProperties;var et=Object.getOwnPropertyDescriptors;var he=Object.getOwnPropertySymbols;var Ee=Object.prototype.hasOwnProperty,je=Object.prototype.propertyIsEnumerable;var Be=(e,t,r)=>t in e?Qe(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,T=(e,t)=>{for(var r in t||(t={}))Ee.call(t,r)&&Be(e,r,t[r]);if(he)for(var r of he(t))je.call(t,r)&&Be(e,r,t[r]);return e},pe=(e,t)=>Ze(e,et(t));var Me=(e,t)=>{var r={};for(var o in e)Ee.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(e!=null&&he)for(var o of he(e))t.indexOf(o)<0&&je.call(e,o)&&(r[o]=e[o]);return r};import{R as Ve,r as c,j as g,a as _e,b as tt}from"./vendor.e3c417b2.js";const st=function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const i of document.querySelectorAll('link[rel="modulepreload"]'))o(i);new MutationObserver(i=>{for(const n of i)if(n.type==="childList")for(const s of n.addedNodes)s.tagName==="LINK"&&s.rel==="modulepreload"&&o(s)}).observe(document,{childList:!0,subtree:!0});function r(i){const n={};return i.integrity&&(n.integrity=i.integrity),i.referrerpolicy&&(n.referrerPolicy=i.referrerpolicy),i.crossorigin==="use-credentials"?n.credentials="include":i.crossorigin==="anonymous"?n.credentials="omit":n.credentials="same-origin",n}function o(i){if(i.ep)return;i.ep=!0;const n=r(i);fetch(i.href,n)}};st();const $e={magnifier_position_label:"\u5750\u6807",operation_ok_title:"\u786E\u5B9A",operation_cancel_title:"\u53D6\u6D88",operation_save_title:"\u4FDD\u5B58",operation_redo_title:"\u91CD\u505A",operation_undo_title:"\u64A4\u9500",operation_mosaic_title:"\u9A6C\u8D5B\u514B",operation_text_title:"\u6587\u672C",operation_brush_title:"\u753B\u7B14",operation_arrow_title:"\u7BAD\u5934",operation_ellipse_title:"\u692D\u5706",operation_rectangle_title:"\u77E9\u5F62"};var ye=Ve.createContext({store:{url:void 0,image:null,width:0,height:0,lang:$e,emiterRef:{current:{}},canvasContextRef:{current:null},history:{index:-1,stack:[]},bounds:null,cursor:"move",operation:void 0},dispatcher:{call:void 0,setHistory:void 0,setBounds:void 0,setCursor:void 0,setOperation:void 0}});function oe(){const{dispatcher:e}=c.exports.useContext(ye);return e}function $(){const{store:e}=c.exports.useContext(ye);return e}function U(){const{bounds:e}=$(),{setBounds:t}=oe(),r=c.exports.useCallback(i=>{t==null||t(i)},[t]),o=c.exports.useCallback(()=>{t==null||t(null)},[t]);return[e,{set:r,reset:o}]}function L(){const{lang:e}=$();return e}var J="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsMagnifier/index.tsx";const K=100,Q=80;function nt({x:e,y:t}){const{width:r,height:o,image:i}=$(),n=L(),[s,a]=c.exports.useState(null),d=c.exports.useRef(null),u=c.exports.useRef(null),p=c.exports.useRef(null),[l,f]=c.exports.useState("000000");return c.exports.useLayoutEffect(()=>{if(!d.current)return;const h=d.current.getBoundingClientRect();let x=e+20,v=t+20;x+h.width>r&&(x=e-h.width-20),v+h.height>o&&(v=t-h.height-20),x<0&&(x=0),v<0&&(v=0),a({x,y:v})},[r,o,e,t]),c.exports.useEffect(()=>{if(!i||!u.current){p.current=null;return}if(p.current||(p.current=u.current.getContext("2d")),!p.current)return;const h=p.current;h.clearRect(0,0,K,Q);const x=i.naturalWidth/r,v=i.naturalHeight/o;h.drawImage(i,e*x-K/2,t*v-Q/2,K,Q,0,0,K,Q);const{data:y}=h.getImageData(Math.floor(K/2),Math.floor(Q/2),1,1),w=Array.from(y.slice(0,3)).map(R=>R>=16?R.toString(16):`0${R.toString(16)}`).join("").toUpperCase();f(w)},[r,o,i,e,t]),g.exports.jsxDEV("div",{ref:d,className:"screenshots-magnifier",style:{transform:`translate(${s==null?void 0:s.x}px, ${s==null?void 0:s.y}px)`},children:[g.exports.jsxDEV("div",{className:"screenshots-magnifier-body",children:g.exports.jsxDEV("canvas",{ref:u,className:"screenshots-magnifier-body-canvas",width:K,height:Q},void 0,!1,{fileName:J,lineNumber:97,columnNumber:9},this)},void 0,!1,{fileName:J,lineNumber:96,columnNumber:7},this),g.exports.jsxDEV("div",{className:"screenshots-magnifier-footer",children:[g.exports.jsxDEV("div",{className:"screenshots-magnifier-footer-item",children:[n.magnifier_position_label,": (",e,",",t,")"]},void 0,!0,{fileName:J,lineNumber:105,columnNumber:9},this),g.exports.jsxDEV("div",{className:"screenshots-magnifier-footer-item",children:["RGB: #",l]},void 0,!0,{fileName:J,lineNumber:108,columnNumber:9},this)]},void 0,!0,{fileName:J,lineNumber:104,columnNumber:7},this)]},void 0,!0,{fileName:J,lineNumber:89,columnNumber:5},this)}function rt({x:e,y:t},{x:r,y:o},i,n){return e>r&&([e,r]=[r,e]),t>o&&([t,o]=[o,t]),e<0&&(e=0),r>i&&(r=i),t<0&&(t=0),o>n&&(o=n),{x:e,y:t,width:r-e,height:o-t}}var me="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsBackground/index.tsx";function ot(){const{url:e,image:t,width:r,height:o}=$(),[i,n]=U(),s=c.exports.useRef(null),a=c.exports.useRef(null),d=c.exports.useRef(!1),[u,p]=c.exports.useState(null),l=c.exports.useCallback((h,x)=>{if(!s.current)return;const{x:v,y}=s.current.getBoundingClientRect();n.set(rt({x:h.x-v,y:h.y-y},{x:x.x-v,y:x.y-y},r,o))},[r,o,n]),f=c.exports.useCallback(h=>{a.current||i||h.button!==0||(a.current={x:h.clientX,y:h.clientY},d.current=!1)},[i]);return c.exports.useEffect(()=>{const h=v=>{if(s.current){const y=s.current.getBoundingClientRect();v.clientX<y.left||v.clientY<y.top||v.clientX>y.right||v.clientY>y.bottom?p(null):p({x:v.clientX-y.x,y:v.clientY-y.y})}!a.current||(l(a.current,{x:v.clientX,y:v.clientY}),d.current=!0)},x=v=>{!a.current||(d.current&&l(a.current,{x:v.clientX,y:v.clientY}),a.current=null,d.current=!1)};return window.addEventListener("mousemove",h),window.addEventListener("mouseup",x),()=>{window.removeEventListener("mousemove",h),window.removeEventListener("mouseup",x)}},[l]),!e||!t?null:g.exports.jsxDEV("div",{ref:s,className:"screenshots-background",onMouseDown:f,children:[g.exports.jsxDEV("img",{className:"screenshots-background-image",src:e},void 0,!1,{fileName:me,lineNumber:114,columnNumber:7},this),g.exports.jsxDEV("div",{className:"screenshots-background-mask"},void 0,!1,{fileName:me,lineNumber:115,columnNumber:7},this),u&&!i&&g.exports.jsxDEV(nt,{x:u==null?void 0:u.x,y:u==null?void 0:u.y},void 0,!1,{fileName:me,lineNumber:116,columnNumber:31},this)]},void 0,!0,{fileName:me,lineNumber:113,columnNumber:5},this)}var Ke;const Le=(Ke=window.devicePixelRatio)!=null?Ke:2;var de=Le<2?2:Le;function it(e,t,r,o){const i=e.clientX-r.x,n=e.clientY-r.y;let s=o.x,a=o.y,d=o.x+o.width,u=o.y+o.height;switch(t){case"top":a+=n;break;case"top-right":d+=i,a+=n;break;case"right":d+=i;break;case"right-bottom":d+=i,u+=n;break;case"bottom":u+=n;break;case"bottom-left":s+=i,u+=n;break;case"left":s+=i;break;case"left-top":s+=i,a+=n;break;case"move":s+=i,a+=n,d+=i,u+=n;break}return[{x:s,y:a},{x:d,y:u}]}function ct({x:e,y:t},{x:r,y:o},i,n,s,a){return e>r&&([e,r]=[r,e]),t>o&&([t,o]=[o,t]),e<0&&(e=0,a==="move"&&(r=i.width)),r>n&&(r=n,a==="move"&&(e=r-i.width)),t<0&&(t=0,a==="move"&&(o=i.height)),o>s&&(o=s,a==="move"&&(t=o-i.height)),{x:e,y:t,width:Math.max(r-e,1),height:Math.max(o-t,1)}}var j;(function(e){e[e.Edit=0]="Edit",e[e.Source=1]="Source"})(j||(j={}));function Z(){const{emiterRef:e}=$(),t=c.exports.useCallback((n,s)=>{const a=e.current;Array.isArray(a[n])?a[n].push(s):a[n]=[s]},[e]),r=c.exports.useCallback((n,s)=>{const a=e.current;if(Array.isArray(a[n])){const d=a[n].findIndex(u=>u===s);d!==-1&&a[n].splice(d,1)}},[e]),o=c.exports.useCallback((n,...s)=>{const a=e.current;Array.isArray(a[n])&&a[n].forEach(d=>d(...s))},[e]),i=c.exports.useCallback(()=>{e.current={}},[e]);return{on:t,off:r,emit:o,reset:i}}function H(){const{history:e}=$(),{setHistory:t}=oe(),r=c.exports.useCallback(p=>{const{index:l,stack:f}=e;f.forEach(h=>{h.type===j.Source&&(h.isSelected=!1)}),p.type===j.Source?p.isSelected=!0:p.type===j.Edit&&(p.source.isSelected=!0),f.splice(l+1),f.push(p),t==null||t({index:f.length-1,stack:f})},[e,t]),o=c.exports.useCallback(()=>{const{stack:p}=e;p.pop(),t==null||t({index:p.length-1,stack:p})},[e,t]),i=c.exports.useCallback(()=>{const{index:p,stack:l}=e,f=l[p];f&&(f.type===j.Source?f.isSelected=!1:f.type===j.Edit&&f.source.editHistory.pop()),t==null||t({index:p<=0?-1:p-1,stack:l})},[e,t]),n=c.exports.useCallback(()=>{const{index:p,stack:l}=e,f=l[p+1];f&&(f.type===j.Source?f.isSelected=!1:f.type===j.Edit&&f.source.editHistory.push(f)),t==null||t({index:p>=l.length-1?l.length-1:p+1,stack:l})},[e,t]),s=c.exports.useCallback(p=>{t==null||t(T({},p))},[t]),a=c.exports.useCallback(p=>{e.stack.forEach(l=>{l.type===j.Source&&(l===p?l.isSelected=!0:l.isSelected=!1)}),t==null||t(T({},e))},[e,t]),d=c.exports.useCallback(()=>{e.stack.forEach(p=>{p.type===j.Source&&(p.isSelected=!1)}),t==null||t(T({},e))},[e,t]),u=c.exports.useCallback(()=>{t==null||t({index:-1,stack:[]})},[t]);return[{index:e.index,stack:e.stack,top:e.stack.slice(e.index,e.index+1)[0]},{push:r,pop:o,undo:i,redo:n,set:s,select:a,clearSelect:d,reset:u}]}function A(){const{cursor:e}=$(),{setCursor:t}=oe(),r=c.exports.useCallback(i=>{t==null||t(i)},[t]),o=c.exports.useCallback(()=>{t==null||t("move")},[t]);return[e,{set:r,reset:o}]}function G(){const{operation:e}=$(),{setOperation:t}=oe(),r=c.exports.useCallback(i=>{t==null||t(i)},[t]),o=c.exports.useCallback(()=>{t==null||t(void 0)},[t]);return[e,{set:r,reset:o}]}function at(e,t,r,o){if(!t)return!1;const i=document.createElement("canvas");i.width=e.width,i.height=e.height;const n=i.getContext("2d");if(!n)return!1;const{left:s,top:a}=t.getBoundingClientRect(),d=o.clientX-s,u=o.clientY-a;return[...r.stack.slice(0,r.index+1)].reverse().find(l=>{var f;return l.type!==j.Source?!1:(n.clearRect(0,0,e.width,e.height),(f=l.isHit)==null?void 0:f.call(l,n,l,{x:d,y:u}))})}var ie="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsCanvas/index.tsx";const ut=["top","right","bottom","left"];var P;(function(e){e.ResizeTop="top",e.ResizetopRight="top-right",e.ResizeRight="right",e.ResizeRightBottom="right-bottom",e.ResizeBottom="bottom",e.ResizeBottomLeft="bottom-left",e.ResizeLeft="left",e.ResizeLeftTop="left-top",e.Move="move"})(P||(P={}));const lt=[P.ResizeTop,P.ResizetopRight,P.ResizeRight,P.ResizeRightBottom,P.ResizeBottom,P.ResizeBottomLeft,P.ResizeLeft,P.ResizeLeftTop];var ft=c.exports.forwardRef(function(t,r){const{image:o,width:i,height:n}=$(),s=Z(),[a]=H(),[d]=A(),[u,p]=U(),[l]=G(),f=c.exports.useRef(),h=c.exports.useRef(null),x=c.exports.useRef(null),v=c.exports.useRef(null),y=c.exports.useRef(null),w=c.exports.useCallback(()=>{if(!o||!u||!y.current)return;const m=o.naturalWidth/i,b=o.naturalHeight/n,N=y.current;N.imageSmoothingEnabled=!0,N.imageSmoothingQuality="low",N.setTransform(de,0,0,de,0,0),N.clearRect(0,0,u.width,u.height),N.drawImage(o,u.x*m,u.y*b,u.width*m,u.height*b,0,0,u.width,u.height),a.stack.slice(0,a.index+1).forEach(C=>{C.type===j.Source&&C.draw(N,C)})},[o,i,n,u,y,a]),R=c.exports.useCallback((m,b)=>{if(!(m.button!==0||!u))if(!l)f.current=b,h.current={x:m.clientX,y:m.clientY},x.current={x:u.x,y:u.y,width:u.width,height:u.height};else{const N=at(u,v.current,a,m.nativeEvent);N?s.emit("drawselect",N,m.nativeEvent):s.emit("mousedown",m.nativeEvent)}},[u,l,s,a]),z=c.exports.useCallback(m=>{if(!f.current||!h.current||!x.current||!u)return;const b=it(m,f.current,h.current,x.current);p.set(ct(b[0],b[1],u,i,n,f.current))},[i,n,u,p]);return c.exports.useLayoutEffect(()=>{if(!o||!u||!v.current){y.current=null;return}y.current||(y.current=v.current.getContext("2d")),w()},[o,u,w]),c.exports.useEffect(()=>{const m=N=>{if(l)s.emit("mousemove",N);else{if(!f.current||!h.current||!x.current)return;z(N)}},b=N=>{if(l)s.emit("mouseup",N);else{if(!f.current||!h.current||!x.current)return;z(N),f.current=void 0,h.current=null,x.current=null}};return window.addEventListener("mousemove",m),window.addEventListener("mouseup",b),()=>{window.removeEventListener("mousemove",m),window.removeEventListener("mouseup",b)}},[z,l,s]),c.exports.useImperativeHandle(r,()=>y.current),u?g.exports.jsxDEV("div",{className:"screenshots-canvas",style:{left:u.x,top:u.y,width:u.width,height:u.height},children:[g.exports.jsxDEV("canvas",{ref:v,width:u.width*de,height:u.height*de,style:{width:u.width,height:u.height}},void 0,!1,{fileName:ie,lineNumber:200,columnNumber:7},this),g.exports.jsxDEV("div",{className:"screenshots-canvas-body",style:{cursor:d},onMouseDown:m=>R(m,"move")},void 0,!1,{fileName:ie,lineNumber:209,columnNumber:7},this),ut.map(m=>g.exports.jsxDEV("div",{className:`screenshots-canvas-border-${m}`},m,!1,{fileName:ie,lineNumber:217,columnNumber:16},this)),lt.map(m=>g.exports.jsxDEV("div",{className:`screenshots-canvas-point-${m}`,onMouseDown:b=>R(b,m)},m,!1,{fileName:ie,lineNumber:221,columnNumber:11},this))]},void 0,!0,{fileName:ie,lineNumber:191,columnNumber:5},this):null});function Ne(){const e=oe();return c.exports.useCallback((r,...o)=>{var i;(i=e.call)==null||i.call(e,r,...o)},[e])}function I(){const{canvasContextRef:e}=$();return e}function Ce(){const e=Z(),[,t]=U(),[,r]=A(),[,o]=H(),[,i]=G();return c.exports.useCallback(()=>{e.reset(),o.reset(),t.reset(),r.reset(),i.reset()},[e,o,t,r,i])}var Re="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsOption/index.tsx",q;(function(e){e.Bottom="bottom",e.Top="top"})(q||(q={}));function ht({open:e,content:t,children:r}){const o=c.exports.useRef(null),i=c.exports.useRef(null),n=c.exports.useRef(null),s=c.exports.useContext(Oe),[a,d]=c.exports.useState(q.Bottom),[u,p]=c.exports.useState(null),[l,f]=c.exports.useState(0),h=()=>(i.current||(i.current=document.createElement("div")),i.current);return c.exports.useEffect(()=>{const x=h();return e&&document.body.appendChild(x),()=>{x.remove()}},[e]),c.exports.useEffect(()=>{if(!e||!s||!o.current||!n.current)return;const x=o.current.getBoundingClientRect(),v=n.current.getBoundingClientRect();let y=a,w=x.left+x.width/2,R=x.top+x.height,z=l;if(w+v.width/2>s.x+s.width){const m=w;w=s.x+s.width-v.width/2,z=m-w}if(w<s.x+v.width/2){const m=w;w=s.x+v.width/2,z=m-w}R>window.innerHeight-v.height&&(y===q.Bottom&&(y=q.Top),R=x.top-v.height),R<0&&(y===q.Top&&(y=q.Bottom),R=x.top+x.height),y!==a&&d(y),((u==null?void 0:u.x)!==w||u.y!==R)&&p({x:w,y:R}),z!==l&&f(z)}),g.exports.jsxDEV(g.exports.Fragment,{children:[c.exports.cloneElement(r,{ref:o}),e&&t&&_e.exports.createPortal(g.exports.jsxDEV("div",{ref:n,className:"screenshots-option",style:{visibility:u?"visible":"hidden",left:u==null?void 0:u.x,top:u==null?void 0:u.y},"data-placement":a,children:[g.exports.jsxDEV("div",{className:"screenshots-option-container",children:t},void 0,!1,{fileName:Re,lineNumber:121,columnNumber:13},this),g.exports.jsxDEV("div",{className:"screenshots-option-arrow",style:{marginLeft:l}},void 0,!1,{fileName:Re,lineNumber:122,columnNumber:13},this)]},void 0,!0,{fileName:Re,lineNumber:111,columnNumber:11},this),h())]},void 0,!0)}var Se="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsButton/index.tsx";function X({title:e,icon:t,checked:r,disabled:o,option:i,onClick:n}){const s=["screenshots-button"],a=c.exports.useCallback(d=>{o||!n||n(d)},[o,n]);return r&&s.push("screenshots-button-checked"),o&&s.push("screenshots-button-disabled"),g.exports.jsxDEV(ht,{open:r,content:i,children:g.exports.jsxDEV("div",{className:s.join(" "),title:e,onClick:a,children:g.exports.jsxDEV("span",{className:t},void 0,!1,{fileName:Se,lineNumber:44,columnNumber:9},this)},void 0,!1,{fileName:Se,lineNumber:43,columnNumber:7},this)},void 0,!1,{fileName:Se,lineNumber:42,columnNumber:5},this)}var pt="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Ok/index.tsx";function mt(){const e=L(),t=I(),[,r]=H(),o=Ne(),[i]=U(),n=Ce(),s=c.exports.useCallback(()=>{r.clearSelect(),setTimeout(()=>{!t.current||t.current.canvas.toBlob(a=>{o("onOk",a,i),n()},"image/png")})},[t,r,o,i,n]);return g.exports.jsxDEV(X,{title:e.operation_ok_title,icon:"icon-ok",onClick:s},void 0,!1,{fileName:pt,lineNumber:31,columnNumber:10},this)}var dt="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Cancel/index.tsx";function xt(){const e=Ne(),t=Ce(),r=L(),o=c.exports.useCallback(()=>{e("onCancel"),t()},[e,t]);return g.exports.jsxDEV(X,{title:r.operation_cancel_title,icon:"icon-cancel",onClick:o},void 0,!1,{fileName:dt,lineNumber:17,columnNumber:10},this)}var bt="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Save/index.tsx";function gt(){const e=L(),t=I(),[,r]=H(),[o]=U(),i=Ne(),n=Ce(),s=c.exports.useCallback(()=>{r.clearSelect(),setTimeout(()=>{!t.current||t.current.canvas.toBlob(a=>{i("onSave",a,o),n()},"image/png")})},[t,r,o,i,n]);return g.exports.jsxDEV(X,{title:e.operation_save_title,icon:"icon-save",onClick:s},void 0,!1,{fileName:bt,lineNumber:31,columnNumber:10},this)}var vt="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Redo/index.tsx";function yt(){const e=L(),[t,r]=H(),o=c.exports.useCallback(()=>{r.redo()},[r]);return g.exports.jsxDEV(X,{title:e.operation_redo_title,icon:"icon-redo",disabled:!t.stack.length||t.stack.length-1===t.index,onClick:o},void 0,!1,{fileName:vt,lineNumber:15,columnNumber:5},this)}var Nt="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Undo/index.tsx";function Ct(){const e=L(),[t,r]=H(),o=c.exports.useCallback(()=>{r.undo()},[r]);return g.exports.jsxDEV(X,{title:e.operation_undo_title,icon:"icon-undo",disabled:t.index===-1,onClick:o},void 0,!1,{fileName:Nt,lineNumber:15,columnNumber:5},this)}var ke="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsSize/index.tsx";function He({value:e,onChange:t}){const r=[3,6,9];return g.exports.jsxDEV("div",{className:"screenshots-size",children:r.map(o=>{const i=["screenshots-size-item"];return o===e&&i.push("screenshots-size-active"),g.exports.jsxDEV("div",{className:i.join(" "),onClick:()=>t&&t(o),children:g.exports.jsxDEV("div",{className:"screenshots-size-pointer",style:{width:o*1.8,height:o*1.8}},void 0,!1,{fileName:ke,lineNumber:22,columnNumber:13},this)},o,!1,{fileName:ke,lineNumber:21,columnNumber:11},this)})},void 0,!1,{fileName:ke,lineNumber:12,columnNumber:5},this)}function ee(e){const t=Z();c.exports.useEffect(()=>(t.on("mousedown",e),()=>{t.off("mousedown",e)}),[e,t])}function te(e){const t=Z();c.exports.useEffect(()=>(t.on("mousemove",e),()=>{t.off("mousemove",e)}),[e,t])}function se(e){const t=Z();c.exports.useEffect(()=>(t.on("mouseup",e),()=>{t.off("mouseup",e)}),[e,t])}var Xe="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Mosaic/index.tsx";function xe(e,t,r){if(!r)return[0,0,0,0];const{data:o,width:i}=r,n=t*i*4+e*4;return Array.from(o.slice(n,n+4))}function Rt(e,t){const{tiles:r,size:o}=t.data;r.forEach(i=>{const n=Math.round(i.color[0]),s=Math.round(i.color[1]),a=Math.round(i.color[2]),d=i.color[3]/255;e.fillStyle=`rgba(${n}, ${s}, ${a}, ${d})`,e.fillRect(i.x-o/2,i.y-o/2,o,o)})}function St(){const e=L(),{image:t,width:r,height:o}=$(),[i,n]=G(),s=I(),[a,d]=H(),[u]=U(),[,p]=A(),[l,f]=c.exports.useState(3),h=c.exports.useRef(null),x=c.exports.useRef(null),v=i==="Mosaic",y=c.exports.useCallback(()=>{n.set("Mosaic"),p.set("crosshair")},[n,p]),w=c.exports.useCallback(()=>{v||(y(),d.clearSelect())},[v,y,d]),R=c.exports.useCallback(b=>{if(!v||x.current||!h.current||!s.current)return;const N=s.current.canvas.getBoundingClientRect(),C=b.clientX-N.x,k=b.clientY-N.y,E=l*2;x.current={name:"Mosaic",type:j.Source,data:{size:E,tiles:[{x:C,y:k,color:xe(C,k,h.current)}]},editHistory:[],draw:Rt}},[v,l,s]),z=c.exports.useCallback(b=>{if(!v||!x.current||!s.current||!h.current)return;const N=s.current.canvas.getBoundingClientRect(),C=b.clientX-N.x,k=b.clientY-N.y,E=x.current.data.size,D=x.current.data.tiles;let S=D[D.length-1];if(!S)D.push({x:C,y:k,color:xe(C,k,h.current)});else{const O=S.x-C,B=S.y-k;let _=Math.sqrt(O**2+B**2);const ge=-B/_,ve=-O/_;for(;_>E;){const ne=Math.floor(S.x+E*ve),re=Math.floor(S.y+E*ge);S={x:ne,y:re,color:xe(ne,re,h.current)},D.push(S),_-=E}_>E/2&&D.push({x:C,y:k,color:xe(C,k,h.current)})}a.top!==x.current?d.push(x.current):d.set(a)},[v,s,a,d]),m=c.exports.useCallback(()=>{!v||(x.current=null)},[v]);return ee(R),te(z),se(m),c.exports.useEffect(()=>{if(!u||!t||!v)return;const b=document.createElement("canvas"),N=b.getContext("2d");if(!N)return;b.width=u.width,b.height=u.height;const C=t.naturalWidth/r,k=t.naturalHeight/o;N.drawImage(t,u.x*C,u.y*k,u.width*C,u.height*k,0,0,u.width,u.height),h.current=N.getImageData(0,0,u.width,u.height)},[r,o,u,t,v]),g.exports.jsxDEV(X,{title:e.operation_mosaic_title,icon:"icon-mosaic",checked:v,onClick:w,option:g.exports.jsxDEV(He,{value:l,onChange:f},void 0,!1,{fileName:Xe,lineNumber:220,columnNumber:15},this)},void 0,!1,{fileName:Xe,lineNumber:215,columnNumber:5},this)}var Fe="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsColor/index.tsx";function kt({value:e,onChange:t}){const r=["#ee5126","#fceb4d","#90e746","#51c0fa","#7a7a7a","#ffffff"];return g.exports.jsxDEV("div",{className:"screenshots-color",children:r.map(o=>{const i=["screenshots-color-item"];return o===e&&i.push("screenshots-color-active"),g.exports.jsxDEV("div",{className:i.join(" "),style:{backgroundColor:o},onClick:()=>t&&t(o)},o,!1,{fileName:Fe,lineNumber:19,columnNumber:11},this)})},void 0,!1,{fileName:Fe,lineNumber:12,columnNumber:5},this)}var we="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsSizeColor/index.tsx";function ce({size:e,color:t,onSizeChange:r,onColorChange:o}){return g.exports.jsxDEV("div",{className:"screenshots-sizecolor",children:[g.exports.jsxDEV(He,{value:e,onChange:r},void 0,!1,{fileName:we,lineNumber:16,columnNumber:7},this),g.exports.jsxDEV(kt,{value:t,onChange:o},void 0,!1,{fileName:we,lineNumber:17,columnNumber:7},this)]},void 0,!0,{fileName:we,lineNumber:15,columnNumber:5},this)}const wt=`
-min-width: 0 !important;
-width: 0 !important;
-min-height: 0 !important;
-height:0 !important;
-visibility: hidden !important;
-overflow: hidden !important;
-position: absolute !important;
-z-index: -1000 !important;
-top:0 !important;
-right:0 !important;
-`,Dt=["letter-spacing","line-height","padding-top","padding-bottom","font-family","font-weight","font-size","font-variant","text-rendering","text-transform","text-indent","padding-left","padding-right","border-width","box-sizing","white-space","word-break"];let W;function zt(e){const t=window.getComputedStyle(e),r=t.getPropertyValue("box-sizing")||t.getPropertyValue("-moz-box-sizing")||t.getPropertyValue("-webkit-box-sizing"),o=parseFloat(t.getPropertyValue("padding-bottom"))+parseFloat(t.getPropertyValue("padding-top")),i=parseFloat(t.getPropertyValue("border-bottom-width"))+parseFloat(t.getPropertyValue("border-top-width"));return{sizingStyle:Dt.map(s=>`${s}:${t.getPropertyValue(s)}`).join(";"),paddingSize:o,borderSize:i,boxSizing:r}}function Et(e,t,r,o){W||(W=document.createElement("textarea"),W.setAttribute("tab-index","-1"),document.body.appendChild(W));const{paddingSize:i,borderSize:n,boxSizing:s,sizingStyle:a}=zt(e);W.setAttribute("style",`${a};${wt};max-width:${r}px;max-height:${o}px`),W.value=t||" ";let d=W.scrollWidth,u=W.scrollHeight;return s==="border-box"?(d+=n,u+=n):s==="content-box"&&(d-=i,u-=i),{width:Math.min(d,r),height:Math.min(u,o)}}var jt="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsTextarea/index.tsx";function Bt({x:e,y:t,maxWidth:r,maxHeight:o,size:i,color:n,value:s,onChange:a,onBlur:d}){const u=c.exports.useRef(null),p=c.exports.useRef(null),[l,f]=c.exports.useState(0),[h,x]=c.exports.useState(0),v=()=>(u.current||(u.current=document.createElement("div")),u.current);return c.exports.useLayoutEffect(()=>(u.current&&(document.body.appendChild(u.current),requestAnimationFrame(()=>{var y;(y=p.current)==null||y.focus()})),()=>{var y;(y=u.current)==null||y.remove()}),[]),c.exports.useLayoutEffect(()=>{if(!p.current)return;const{width:y,height:w}=Et(p.current,s,r,o);f(y),x(w)},[s,r,o]),_e.exports.createPortal(g.exports.jsxDEV("textarea",{ref:p,className:"screenshots-textarea",style:{left:e,top:t,color:n,width:l,height:h,maxWidth:r,maxHeight:o,fontSize:i,lineHeight:`${i}px`},value:s,onChange:y=>a&&a(y.target.value),onBlur:y=>d&&d(y)},void 0,!1,{fileName:jt,lineNumber:65,columnNumber:5},this),v())}function ae(e){const t=Z();c.exports.useEffect(()=>(t.on("drawselect",e),()=>{t.off("drawselect",e)}),[e,t])}var De="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Text/index.tsx";const ze={3:18,6:32,9:46};function Mt(e,t){const{size:r,color:o,fontFamily:i,x:n,y:s,text:a}=t.data;e.fillStyle=o,e.textAlign="left",e.textBaseline="top",e.font=`${r}px ${i}`;const d=t.editHistory.reduce((u,{data:p})=>({x:u.x+p.x2-p.x1,y:u.y+p.y2-p.y1}),{x:0,y:0});a.split(`
-`).forEach((u,p)=>{e.fillText(u,n+d.x,s+d.y+p*r)})}function Vt(e,t,r){e.textAlign="left",e.textBaseline="top",e.font=`${t.data.size}px ${t.data.fontFamily}`;let o=0,i=0;t.data.text.split(`
-`).forEach(l=>{const f=e.measureText(l);o<f.width&&(o=f.width),i+=t.data.size});const{x:n,y:s}=t.editHistory.reduce((l,{data:f})=>({x:l.x+f.x2-f.x1,y:l.y+f.y2-f.y1}),{x:0,y:0}),a=t.data.x+n,d=t.data.y+s,u=a+o,p=d+i;return r.x>=a&&r.x<=u&&r.y>=d&&r.y<=p}function _t(){const e=L(),[t,r]=H(),[o]=U(),[i,n]=G(),[,s]=A(),a=I(),[d,u]=c.exports.useState(3),[p,l]=c.exports.useState("#ee5126"),f=c.exports.useRef(null),h=c.exports.useRef(null),[x,v]=c.exports.useState(null),[y,w]=c.exports.useState(""),R=i==="Text",z=c.exports.useCallback(()=>{n.set("Text"),s.set("default")},[n,s]),m=c.exports.useCallback(()=>{R||(z(),r.clearSelect())},[R,z,r]),b=c.exports.useCallback(B=>{f.current&&(f.current.data.size=ze[B]),u(B)},[]),N=c.exports.useCallback(B=>{f.current&&(f.current.data.color=B),l(B)},[]),C=c.exports.useCallback(B=>{w(B),R&&f.current&&(f.current.data.text=B)},[R]),k=c.exports.useCallback(()=>{f.current&&f.current.data.text&&r.push(f.current),f.current=null,w(""),v(null)},[r]),E=c.exports.useCallback((B,_)=>{B.name==="Text"&&(z(),h.current={type:j.Edit,data:{x1:_.clientX,y1:_.clientY,x2:_.clientX,y2:_.clientY},source:B},r.select(B))},[z,r]),D=c.exports.useCallback(B=>{if(!R||!a.current||f.current||!o)return;const{left:_,top:ge}=a.current.canvas.getBoundingClientRect(),ve=window.getComputedStyle(a.current.canvas).fontFamily,ne=B.clientX-_,re=B.clientY-ge;f.current={name:"Text",type:j.Source,data:{size:ze[d],color:p,fontFamily:ve,x:ne,y:re,text:""},editHistory:[],draw:Mt,isHit:Vt},v({x:B.clientX,y:B.clientY,maxWidth:o.width-ne,maxHeight:o.height-re})},[R,d,p,o,a]),S=c.exports.useCallback(B=>{!R||h.current&&(h.current.data.x2=B.clientX,h.current.data.y2=B.clientY,t.top!==h.current?(h.current.source.editHistory.push(h.current),r.push(h.current)):r.set(t))},[R,t,r]),O=c.exports.useCallback(()=>{!R||(h.current=null)},[R]);return ae(E),ee(D),te(S),se(O),g.exports.jsxDEV(g.exports.Fragment,{children:[g.exports.jsxDEV(X,{title:e.operation_text_title,icon:"icon-text",checked:R,onClick:m,option:g.exports.jsxDEV(ce,{size:d,color:p,onSizeChange:b,onColorChange:N},void 0,!1,{fileName:De,lineNumber:261,columnNumber:11},this)},void 0,!1,{fileName:De,lineNumber:255,columnNumber:7},this),R&&x&&g.exports.jsxDEV(Bt,{x:x.x,y:x.y,maxWidth:x.maxWidth,maxHeight:x.maxHeight,size:ze[d],color:p,value:y,onChange:C,onBlur:k},void 0,!1,{fileName:De,lineNumber:265,columnNumber:9},this)]},void 0,!0)}const Ye=4;function M(e,t,r){e.lineWidth=1,e.strokeStyle="#000000",e.fillStyle="#ffffff",e.beginPath(),e.arc(t,r,Ye,0,2*Math.PI),e.fill(),e.stroke()}function be(e,t,r){t.draw(e,t);const{data:o}=e.getImageData(r.x,r.y,1,1);return o.some(i=>i!==0)}function V(e,t,r){if(!e)return!1;const{left:o,top:i}=e.getBoundingClientRect(),n=t.clientX-o,s=t.clientY-i;return(r.x-n)**2+(r.y-s)**2<Ye**2}function $t(e,t){const{size:r,color:o,points:i}=t.data;e.lineCap="round",e.lineJoin="round",e.lineWidth=r,e.strokeStyle=o;const n=t.editHistory.reduce((s,{data:a})=>({x:s.x+a.x2-a.x1,y:s.y+a.y2-a.y1}),{x:0,y:0});e.beginPath(),i.forEach((s,a)=>{a===0?e.moveTo(s.x+n.x,s.y+n.y):e.lineTo(s.x+n.x,s.y+n.y)}),e.stroke(),t.isSelected&&(e.lineWidth=1,e.strokeStyle="#000000",e.beginPath(),i.forEach((s,a)=>{a===0?e.moveTo(s.x+n.x,s.y+n.y):e.lineTo(s.x+n.x,s.y+n.y)}),e.stroke())}var Pe="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Brush/index.tsx";function Lt(){const e=L(),[,t]=A(),[r,o]=G(),i=I(),[n,s]=H(),[a,d]=c.exports.useState(3),[u,p]=c.exports.useState("#ee5126"),l=c.exports.useRef(null),f=c.exports.useRef(null),h=r==="Brush",x=c.exports.useCallback(()=>{o.set("Brush"),t.set("default")},[o,t]),v=c.exports.useCallback(()=>{h||(x(),s.clearSelect())},[h,x,s]),y=c.exports.useCallback((m,b)=>{m.name==="Brush"&&(x(),f.current={type:j.Edit,data:{x1:b.clientX,y1:b.clientY,x2:b.clientX,y2:b.clientY},source:m},s.select(m))},[x,s]),w=c.exports.useCallback(m=>{if(!h||l.current||!i.current)return;const{left:b,top:N}=i.current.canvas.getBoundingClientRect();l.current={name:"Brush",type:j.Source,data:{size:a,color:u,points:[{x:m.clientX-b,y:m.clientY-N}]},editHistory:[],draw:$t,isHit:be}},[h,i,a,u]),R=c.exports.useCallback(m=>{if(!(!h||!i.current)){if(f.current)f.current.data.x2=m.clientX,f.current.data.y2=m.clientY,n.top!==f.current?(f.current.source.editHistory.push(f.current),s.push(f.current)):s.set(n);else if(l.current){const{left:b,top:N}=i.current.canvas.getBoundingClientRect();l.current.data.points.push({x:m.clientX-b,y:m.clientY-N}),n.top!==l.current?s.push(l.current):s.set(n)}}},[h,n,i,s]),z=c.exports.useCallback(()=>{!h||(l.current&&s.clearSelect(),l.current=null,f.current=null)},[h,s]);return ae(y),ee(w),te(R),se(z),g.exports.jsxDEV(X,{title:e.operation_brush_title,icon:"icon-brush",checked:h,onClick:v,option:g.exports.jsxDEV(ce,{size:a,color:u,onSizeChange:d,onColorChange:p},void 0,!1,{fileName:Pe,lineNumber:166,columnNumber:15},this)},void 0,!1,{fileName:Pe,lineNumber:161,columnNumber:5},this)}function Te(e){let{x1:t,y1:r,x2:o,y2:i}=e.data;return e.editHistory.forEach(({data:n})=>{const s=n.x2-n.x1,a=n.y2-n.y1;n.type===ue.Move?(t+=s,r+=a,o+=s,i+=a):n.type===ue.MoveStart?(t+=s,r+=a):n.type===ue.MoveEnd&&(o+=s,i+=a)}),pe(T({},e.data),{x1:t,x2:o,y1:r,y2:i})}function Ht(e,t){const{size:r,color:o,x1:i,x2:n,y1:s,y2:a}=Te(t);e.lineCap="round",e.lineJoin="bevel",e.lineWidth=r,e.strokeStyle=o;const d=n-i,u=a-s,p=r*3,l=Math.atan2(u,d);e.beginPath(),e.moveTo(i,s),e.lineTo(n,a),e.lineTo(n-p*Math.cos(l-Math.PI/6),a-p*Math.sin(l-Math.PI/6)),e.moveTo(n,a),e.lineTo(n-p*Math.cos(l+Math.PI/6),a-p*Math.sin(l+Math.PI/6)),e.stroke(),t.isSelected&&(M(e,i,s),M(e,n,a))}var Ue="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Arrow/index.tsx",ue;(function(e){e[e.Move=0]="Move",e[e.MoveStart=1]="MoveStart",e[e.MoveEnd=2]="MoveEnd"})(ue||(ue={}));function Xt(){const e=L(),[,t]=A(),[r,o]=G(),[i,n]=H(),s=I(),[a,d]=c.exports.useState(3),[u,p]=c.exports.useState("#ee5126"),l=c.exports.useRef(null),f=c.exports.useRef(null),h=r==="Arrow",x=c.exports.useCallback(()=>{o.set("Arrow"),t.set("default")},[o,t]),v=c.exports.useCallback(()=>{h||(x(),n.clearSelect())},[h,x,n]),y=c.exports.useCallback((m,b)=>{if(m.name!=="Arrow"||!s.current)return;const N=m;x();const{x1:C,y1:k,x2:E,y2:D}=Te(N);let S=0;V(s.current.canvas,b,{x:C,y:k})?S=1:V(s.current.canvas,b,{x:E,y:D})&&(S=2),f.current={type:j.Edit,data:{type:S,x1:b.clientX,y1:b.clientY,x2:b.clientX,y2:b.clientY},source:N},n.select(m)},[s,x,n]),w=c.exports.useCallback(m=>{if(!h||l.current||!s.current)return;const{left:b,top:N}=s.current.canvas.getBoundingClientRect();l.current={name:"Arrow",type:j.Source,data:{size:a,color:u,x1:m.clientX-b,y1:m.clientY-N,x2:m.clientX-b,y2:m.clientY-N},editHistory:[],draw:Ht,isHit:be}},[h,u,a,s]),R=c.exports.useCallback(m=>{if(!(!h||!s.current)){if(f.current)f.current.data.x2=m.clientX,f.current.data.y2=m.clientY,i.top!==f.current?(f.current.source.editHistory.push(f.current),n.push(f.current)):n.set(i);else if(l.current){const{left:b,top:N}=s.current.canvas.getBoundingClientRect();l.current.data.x2=m.clientX-b,l.current.data.y2=m.clientY-N,i.top!==l.current?n.push(l.current):n.set(i)}}},[h,i,s,n]),z=c.exports.useCallback(()=>{!h||(l.current&&n.clearSelect(),l.current=null,f.current=null)},[h,n]);return ae(y),ee(w),te(R),se(z),g.exports.jsxDEV(X,{title:e.operation_arrow_title,icon:"icon-arrow",checked:h,onClick:v,option:g.exports.jsxDEV(ce,{size:a,color:u,onSizeChange:d,onColorChange:p},void 0,!1,{fileName:Ue,lineNumber:190,columnNumber:15},this)},void 0,!1,{fileName:Ue,lineNumber:185,columnNumber:5},this)}function Ae(e){let{x1:t,y1:r,x2:o,y2:i}=e.data;return e.editHistory.forEach(({data:n})=>{const s=n.x2-n.x1,a=n.y2-n.y1;n.type===F.Move?(t+=s,r+=a,o+=s,i+=a):n.type===F.ResizeTop?r+=a:n.type===F.ResizeRightTop?(o+=s,r+=a):n.type===F.ResizeRight?o+=s:n.type===F.ResizeRightBottom?(o+=s,i+=a):n.type===F.ResizeBottom?i+=a:n.type===F.ResizeLeftBottom?(t+=s,i+=a):n.type===F.ResizeLeft?t+=s:n.type===F.ResizeLeftTop&&(t+=s,r+=a)}),pe(T({},e.data),{x1:t,x2:o,y1:r,y2:i})}function Ft(e,t){const{size:r,color:o,x1:i,y1:n,x2:s,y2:a}=Ae(t);e.lineCap="butt",e.lineJoin="miter",e.lineWidth=r,e.strokeStyle=o;const d=(i+s)/2,u=(n+a)/2,p=Math.abs(s-i)/2,l=Math.abs(a-n)/2,f=.5522848,h=p*f,x=l*f;e.beginPath(),e.moveTo(d-p,u),e.bezierCurveTo(d-p,u-x,d-h,u-l,d,u-l),e.bezierCurveTo(d+h,u-l,d+p,u-x,d+p,u),e.bezierCurveTo(d+p,u+x,d+h,u+l,d,u+l),e.bezierCurveTo(d-h,u+l,d-p,u+x,d-p,u),e.closePath(),e.stroke(),t.isSelected&&(e.lineWidth=1,e.strokeStyle="#000000",e.fillStyle="#ffffff",e.beginPath(),e.moveTo(i,n),e.lineTo(s,n),e.lineTo(s,a),e.lineTo(i,a),e.closePath(),e.stroke(),M(e,(i+s)/2,n),M(e,s,n),M(e,s,(n+a)/2),M(e,s,a),M(e,(i+s)/2,a),M(e,i,a),M(e,i,(n+a)/2),M(e,i,n))}var Ge="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Ellipse/index.tsx",F;(function(e){e[e.Move=0]="Move",e[e.ResizeTop=1]="ResizeTop",e[e.ResizeRightTop=2]="ResizeRightTop",e[e.ResizeRight=3]="ResizeRight",e[e.ResizeRightBottom=4]="ResizeRightBottom",e[e.ResizeBottom=5]="ResizeBottom",e[e.ResizeLeftBottom=6]="ResizeLeftBottom",e[e.ResizeLeft=7]="ResizeLeft",e[e.ResizeLeftTop=8]="ResizeLeftTop"})(F||(F={}));function Yt(){const e=L(),[t,r]=H(),[o,i]=G(),[,n]=A(),s=I(),[a,d]=c.exports.useState(3),[u,p]=c.exports.useState("#ee5126"),l=c.exports.useRef(null),f=c.exports.useRef(null),h=o==="Ellipse",x=c.exports.useCallback(()=>{i.set("Ellipse"),n.set("crosshair")},[i,n]),v=c.exports.useCallback(()=>{h||(x(),r.clearSelect())},[h,x,r]),y=c.exports.useCallback((m,b)=>{if(m.name!=="Ellipse"||!s.current)return;const N=m;x();const{x1:C,y1:k,x2:E,y2:D}=Ae(N);let S=0;V(s.current.canvas,b,{x:(C+E)/2,y:k})?S=1:V(s.current.canvas,b,{x:E,y:k})?S=2:V(s.current.canvas,b,{x:E,y:(k+D)/2})?S=3:V(s.current.canvas,b,{x:E,y:D})?S=4:V(s.current.canvas,b,{x:(C+E)/2,y:D})?S=5:V(s.current.canvas,b,{x:C,y:D})?S=6:V(s.current.canvas,b,{x:C,y:(k+D)/2})?S=7:V(s.current.canvas,b,{x:C,y:k})&&(S=8),f.current={type:j.Edit,data:{type:S,x1:b.clientX,y1:b.clientY,x2:b.clientX,y2:b.clientY},source:N},r.select(m)},[s,x,r]),w=c.exports.useCallback(m=>{if(!h||!s.current||l.current)return;const{left:b,top:N}=s.current.canvas.getBoundingClientRect(),C=m.clientX-b,k=m.clientY-N;l.current={name:"Ellipse",type:j.Source,data:{size:a,color:u,x1:C,y1:k,x2:C,y2:k},editHistory:[],draw:Ft,isHit:be}},[h,a,u,s]),R=c.exports.useCallback(m=>{if(!(!h||!s.current)){if(f.current)f.current.data.x2=m.clientX,f.current.data.y2=m.clientY,t.top!==f.current?(f.current.source.editHistory.push(f.current),r.push(f.current)):r.set(t);else if(l.current){const{left:b,top:N}=s.current.canvas.getBoundingClientRect();l.current.data.x2=m.clientX-b,l.current.data.y2=m.clientY-N,t.top!==l.current?r.push(l.current):r.set(t)}}},[h,s,t,r]),z=c.exports.useCallback(()=>{!h||(l.current&&r.clearSelect(),l.current=null,f.current=null)},[h,r]);return ae(y),ee(w),te(R),se(z),g.exports.jsxDEV(X,{title:e.operation_ellipse_title,icon:"icon-ellipse",checked:h,onClick:v,option:g.exports.jsxDEV(ce,{size:a,color:u,onSizeChange:d,onColorChange:p},void 0,!1,{fileName:Ge,lineNumber:242,columnNumber:15},this)},void 0,!1,{fileName:Ge,lineNumber:237,columnNumber:5},this)}function Ie(e){let{x1:t,y1:r,x2:o,y2:i}=e.data;return e.editHistory.forEach(({data:n})=>{const s=n.x2-n.x1,a=n.y2-n.y1;n.type===Y.Move?(t+=s,r+=a,o+=s,i+=a):n.type===Y.ResizeTop?r+=a:n.type===Y.ResizeRightTop?(o+=s,r+=a):n.type===Y.ResizeRight?o+=s:n.type===Y.ResizeRightBottom?(o+=s,i+=a):n.type===Y.ResizeBottom?i+=a:n.type===Y.ResizeLeftBottom?(t+=s,i+=a):n.type===Y.ResizeLeft?t+=s:n.type===Y.ResizeLeftTop&&(t+=s,r+=a)}),pe(T({},e.data),{x1:t,x2:o,y1:r,y2:i})}function Pt(e,t){const{size:r,color:o,x1:i,y1:n,x2:s,y2:a}=Ie(t);e.lineCap="butt",e.lineJoin="miter",e.lineWidth=r,e.strokeStyle=o,e.beginPath(),e.moveTo(i,n),e.lineTo(s,n),e.lineTo(s,a),e.lineTo(i,a),e.closePath(),e.stroke(),t.isSelected&&(e.lineWidth=1,e.strokeStyle="#000000",e.fillStyle="#ffffff",M(e,(i+s)/2,n),M(e,s,n),M(e,s,(n+a)/2),M(e,s,a),M(e,(i+s)/2,a),M(e,i,a),M(e,i,(n+a)/2),M(e,i,n))}var We="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Rectangle/index.tsx",Y;(function(e){e[e.Move=0]="Move",e[e.ResizeTop=1]="ResizeTop",e[e.ResizeRightTop=2]="ResizeRightTop",e[e.ResizeRight=3]="ResizeRight",e[e.ResizeRightBottom=4]="ResizeRightBottom",e[e.ResizeBottom=5]="ResizeBottom",e[e.ResizeLeftBottom=6]="ResizeLeftBottom",e[e.ResizeLeft=7]="ResizeLeft",e[e.ResizeLeftTop=8]="ResizeLeftTop"})(Y||(Y={}));function Tt(){const e=L(),[t,r]=H(),[o,i]=G(),[,n]=A(),s=I(),[a,d]=c.exports.useState(3),[u,p]=c.exports.useState("#ee5126"),l=c.exports.useRef(null),f=c.exports.useRef(null),h=o==="Rectangle",x=c.exports.useCallback(()=>{i.set("Rectangle"),n.set("crosshair")},[i,n]),v=c.exports.useCallback(()=>{h||(x(),r.clearSelect())},[h,x,r]),y=c.exports.useCallback((m,b)=>{if(m.name!=="Rectangle"||!s.current)return;const N=m;x();const{x1:C,y1:k,x2:E,y2:D}=Ie(N);let S=0;V(s.current.canvas,b,{x:(C+E)/2,y:k})?S=1:V(s.current.canvas,b,{x:E,y:k})?S=2:V(s.current.canvas,b,{x:E,y:(k+D)/2})?S=3:V(s.current.canvas,b,{x:E,y:D})?S=4:V(s.current.canvas,b,{x:(C+E)/2,y:D})?S=5:V(s.current.canvas,b,{x:C,y:D})?S=6:V(s.current.canvas,b,{x:C,y:(k+D)/2})?S=7:V(s.current.canvas,b,{x:C,y:k})&&(S=8),f.current={type:j.Edit,data:{type:S,x1:b.clientX,y1:b.clientY,x2:b.clientX,y2:b.clientY},source:m},r.select(m)},[s,x,r]),w=c.exports.useCallback(m=>{if(!h||!s.current||l.current)return;const{left:b,top:N}=s.current.canvas.getBoundingClientRect(),C=m.clientX-b,k=m.clientY-N;l.current={name:"Rectangle",type:j.Source,data:{size:a,color:u,x1:C,y1:k,x2:C,y2:k},editHistory:[],draw:Pt,isHit:be}},[h,a,u,s]),R=c.exports.useCallback(m=>{if(!(!h||!s.current)){if(f.current)f.current.data.x2=m.clientX,f.current.data.y2=m.clientY,t.top!==f.current?(f.current.source.editHistory.push(f.current),r.push(f.current)):r.set(t);else if(l.current){const{left:b,top:N}=s.current.canvas.getBoundingClientRect(),C=l.current.data;C.x2=m.clientX-b,C.y2=m.clientY-N,t.top!==l.current?r.push(l.current):r.set(t)}}},[h,s,t,r]),z=c.exports.useCallback(()=>{!h||(l.current&&r.clearSelect(),l.current=null,f.current=null)},[h,r]);return ae(y),ee(w),te(R),se(z),g.exports.jsxDEV(X,{title:e.operation_rectangle_title,icon:"icon-rectangle",checked:h,onClick:v,option:g.exports.jsxDEV(ce,{size:a,color:u,onSizeChange:d,onColorChange:p},void 0,!1,{fileName:We,lineNumber:242,columnNumber:15},this)},void 0,!1,{fileName:We,lineNumber:237,columnNumber:5},this)}var Ut=[Tt,Yt,Xt,Lt,_t,St,"|",Ct,yt,"|",gt,xt,mt];var le="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsOperations/index.tsx";const Oe=Ve.createContext(null);function At(){const{width:e,height:t}=$(),[r]=U(),[o,i]=c.exports.useState(null),[n,s]=c.exports.useState(null),a=c.exports.useRef(null),d=c.exports.useCallback(p=>{p.stopPropagation()},[]),u=c.exports.useCallback(p=>{p.preventDefault(),p.stopPropagation()},[]);return c.exports.useEffect(()=>{if(!r||!a.current)return;const p=a.current.getBoundingClientRect();let l=r.x+r.width-p.width,f=r.y+r.height+10;l<0&&(l=0),l>e-p.width&&(l=e-p.width),f>t-p.height&&(f=t-p.height-10),((n==null?void 0:n.x)!==l||n.y!==f)&&s({x:l,y:f}),((o==null?void 0:o.x)!==p.x||o.y!==p.y||o.width!==p.width||o.height!==p.height)&&i({x:p.x,y:p.y,width:p.width,height:p.height})}),r?g.exports.jsxDEV(Oe.Provider,{value:o,children:g.exports.jsxDEV("div",{ref:a,className:"screenshots-operations",style:{visibility:n?"visible":"hidden",left:n==null?void 0:n.x,top:n==null?void 0:n.y},onDoubleClick:d,onContextMenu:u,children:g.exports.jsxDEV("div",{className:"screenshots-operations-buttons",children:Ut.map((p,l)=>p==="|"?g.exports.jsxDEV("div",{className:"screenshots-operations-divider"},l,!1,{fileName:le,lineNumber:91,columnNumber:22},this):g.exports.jsxDEV(p,{},l,!1,{fileName:le,lineNumber:93,columnNumber:22},this))},void 0,!1,{fileName:le,lineNumber:88,columnNumber:9},this)},void 0,!1,{fileName:le,lineNumber:77,columnNumber:7},this)},void 0,!1,{fileName:le,lineNumber:76,columnNumber:5},this):null}function Gt(e){const[t,r]=c.exports.useState(null);return c.exports.useEffect(()=>{if(r(null),e==null)return;const o=document.createElement("img"),i=()=>r(o),n=()=>r(null);return o.addEventListener("load",i),o.addEventListener("error",n),o.src=e,()=>{o.removeEventListener("load",i),o.removeEventListener("error",n)}},[e]),t}var fe="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/index.tsx";function It(s){var a=s,{url:e,width:t,height:r,lang:o,className:i}=a,n=Me(a,["url","width","height","lang","className"]);const d=Gt(e),u=c.exports.useRef(null),p=c.exports.useRef({}),[l,f]=c.exports.useState({index:-1,stack:[]}),[h,x]=c.exports.useState(null),[v,y]=c.exports.useState("move"),[w,R]=c.exports.useState(void 0),z={url:e,width:t,height:r,image:d,lang:T(T({},$e),o),emiterRef:p,canvasContextRef:u,history:l,bounds:h,cursor:v,operation:w},m=c.exports.useCallback((D,...S)=>{const O=n[D];typeof O=="function"&&O(...S)},[n]),b={call:m,setHistory:f,setBounds:x,setCursor:y,setOperation:R},N=["screenshots"];i&&N.push(i);const C=()=>{p.current={},f({index:-1,stack:[]}),x(null),y("move"),R(void 0)},k=c.exports.useCallback(D=>{D.button!==0||!h||!u.current||u.current.canvas.toBlob(S=>{m("onOk",S,h),C()},"image/png")},[h,m]),E=c.exports.useCallback(D=>{D.button===2&&(D.preventDefault(),m("onCancel"),C())},[m]);return c.exports.useLayoutEffect(()=>{C()},[e]),g.exports.jsxDEV(ye.Provider,{value:{store:z,dispatcher:b},children:g.exports.jsxDEV("div",{className:N.join(" "),style:{width:t,height:r},onDoubleClick:k,onContextMenu:E,children:[g.exports.jsxDEV(ot,{},void 0,!1,{fileName:fe,lineNumber:123,columnNumber:9},this),g.exports.jsxDEV(ft,{ref:u},void 0,!1,{fileName:fe,lineNumber:124,columnNumber:9},this),g.exports.jsxDEV(At,{},void 0,!1,{fileName:fe,lineNumber:125,columnNumber:9},this)]},void 0,!0,{fileName:fe,lineNumber:117,columnNumber:7},this)},void 0,!1,{fileName:fe,lineNumber:116,columnNumber:5},this)}var qe="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/electron/app.tsx";function Wt(){const[e,t]=c.exports.useState(void 0),[r,o]=c.exports.useState(window.innerWidth),[i,n]=c.exports.useState(window.innerHeight),[s,a]=c.exports.useState(void 0),[d,u]=c.exports.useState(void 0),p=c.exports.useCallback(async(h,x)=>{!s||!h||window.screenshots.save(await h.arrayBuffer(),{bounds:x,display:s})},[s]),l=c.exports.useCallback(()=>{window.screenshots.cancel()},[]),f=c.exports.useCallback(async(h,x)=>{!s||!h||window.screenshots.ok(await h.arrayBuffer(),{bounds:x,display:s})},[s]);return c.exports.useEffect(()=>{const h=y=>{u(y)},x=(y,w)=>{a(y),t(w)},v=()=>{t(void 0),a(void 0),requestAnimationFrame(()=>window.screenshots.reset())};return window.screenshots.on("setLang",h),window.screenshots.on("capture",x),window.screenshots.on("reset",v),window.screenshots.ready(),()=>{window.screenshots.off("capture",x),window.screenshots.off("setLang",h),window.screenshots.off("reset",v)}},[]),c.exports.useEffect(()=>{const h=()=>{o(window.innerWidth),n(window.innerHeight)};return window.addEventListener("resize",h),()=>{window.removeEventListener("resize",h)}},[l]),g.exports.jsxDEV("div",{className:"body",children:g.exports.jsxDEV(It,{url:e,width:r,height:i,lang:d,onSave:p,onCancel:l,onOk:f},void 0,!1,{fileName:qe,lineNumber:89,columnNumber:7},this)},void 0,!1,{fileName:qe,lineNumber:88,columnNumber:5},this)}var Je="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/electron/index.tsx";tt.render(g.exports.jsxDEV(c.exports.StrictMode,{children:g.exports.jsxDEV(Wt,{},void 0,!1,{fileName:Je,lineNumber:7,columnNumber:5},globalThis)},void 0,!1,{fileName:Je,lineNumber:6,columnNumber:3},globalThis),document.getElementById("app"));

package/lib/types/dpr.d.ts

@@ -1,2 +0,0 @@
-declare const _default: number;
-export default _default;