react-screenshots 0.5.18 → 0.5.19

package/lib/react-screenshots.cjs.js

@@ -1,4 +1,4 @@
-"use strict";var i=require("react"),De=require("react-dom");function Fe(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var _=Fe(i),D=(e=>(e[e.Edit=0]="Edit",e[e.Source=1]="Source",e))(D||{});function fe({image:e,width:t,height:o,history:a,bounds:s}){return new Promise((r,n)=>{const c=document.createElement("canvas"),p=s.width*window.devicePixelRatio,d=s.height*window.devicePixelRatio;c.width=p,c.height=d;const l=c.getContext("2d");if(!l)return n(new Error("convert image to blob fail"));const u=e.naturalWidth/t,f=e.naturalHeight/o;l.imageSmoothingEnabled=!0,l.imageSmoothingQuality="low",l.setTransform(window.devicePixelRatio,0,0,window.devicePixelRatio,0,0),l.clearRect(0,0,s.width,s.height),l.drawImage(e,s.x*u,s.y*f,s.width*u,s.height*f,0,0,s.width,s.height),a.stack.slice(0,a.index+1).forEach(h=>{h.type===D.Source&&h.draw(l,h)}),c.toBlob(h=>{if(!h)return n(new Error("canvas toBlob fail"));r(h)},"image/png")})}const Me={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:Me,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 re(){const{dispatcher:e}=i.useContext(ye);return e}function P(){const{store:e}=i.useContext(ye);return e}function q(){const{bounds:e}=P(),{setBounds:t}=re(),o=i.useCallback(s=>{t==null||t(s)},[t]),a=i.useCallback(()=>{t==null||t(null)},[t]);return[e,{set:o,reset:a}]}function U(){const{lang:e}=P();return e}var W="C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\ScreenshotsMagnifier\\index.tsx";const O=100,V=80;var je=i.memo(function({x:t,y:o}){const{width:a,height:s,image:r}=P(),n=U(),[c,p]=i.useState(null),d=i.useRef(null),l=i.useRef(null),u=i.useRef(null),[f,h]=i.useState("000000");return i.useLayoutEffect(()=>{if(!d.current)return;const b=d.current.getBoundingClientRect();let y=t+20,C=o+20;y+b.width>a&&(y=t-b.width-20),C+b.height>s&&(C=o-b.height-20),y<0&&(y=0),C<0&&(C=0),p({x:y,y:C})},[a,s,t,o]),i.useEffect(()=>{if(!r||!l.current){u.current=null;return}if(u.current||(u.current=l.current.getContext("2d")),!u.current)return;const b=u.current;b.clearRect(0,0,O,V);const y=r.naturalWidth/a,C=r.naturalHeight/s;b.drawImage(r,t*y-O/2,o*C-V/2,O,V,0,0,O,V);const{data:x}=b.getImageData(Math.floor(O/2),Math.floor(V/2),1,1),S=Array.from(x.slice(0,3)).map(w=>w>=16?w.toString(16):`0${w.toString(16)}`).join("").toUpperCase();h(S)},[a,s,r,t,o]),_.default.createElement("div",{ref:d,className:"screenshots-magnifier",style:{transform:`translate(${c==null?void 0:c.x}px, ${c==null?void 0:c.y}px)`},__self:this,__source:{fileName:W,lineNumber:89,columnNumber:5}},_.default.createElement("div",{className:"screenshots-magnifier-body",__self:this,__source:{fileName:W,lineNumber:96,columnNumber:7}},_.default.createElement("canvas",{ref:l,className:"screenshots-magnifier-body-canvas",width:O,height:V,__self:this,__source:{fileName:W,lineNumber:97,columnNumber:9}})),_.default.createElement("div",{className:"screenshots-magnifier-footer",__self:this,__source:{fileName:W,lineNumber:104,columnNumber:7}},_.default.createElement("div",{className:"screenshots-magnifier-footer-item",__self:this,__source:{fileName:W,lineNumber:105,columnNumber:9}},n.magnifier_position_label,": (",t,",",o,")"),_.default.createElement("div",{className:"screenshots-magnifier-footer-item",__self:this,__source:{fileName:W,lineNumber:108,columnNumber:9}},"RGB: #",f)))});function Ue({x:e,y:t},{x:o,y:a},s,r){return e>o&&([e,o]=[o,e]),t>a&&([t,a]=[a,t]),e<0&&(e=0),o>s&&(o=s),t<0&&(t=0),a>r&&(a=r),{x:e,y:t,width:o-e,height:a-t}}var ae="C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\ScreenshotsBackground\\index.tsx",Ge=i.memo(function(){const{url:t,image:o,width:a,height:s}=P(),[r,n]=q(),c=i.useRef(null),p=i.useRef(null),d=i.useRef(!1),[l,u]=i.useState(null),f=i.useCallback((b,y)=>{if(!c.current)return;const{x:C,y:x}=c.current.getBoundingClientRect();n.set(Ue({x:b.x-C,y:b.y-x},{x:y.x-C,y:y.y-x},a,s))},[a,s,n]),h=i.useCallback(b=>{p.current||r||b.button!==0||(p.current={x:b.clientX,y:b.clientY},d.current=!1)},[r]);return i.useEffect(()=>{const b=C=>{if(c.current){const x=c.current.getBoundingClientRect();C.clientX<x.left||C.clientY<x.top||C.clientX>x.right||C.clientY>x.bottom?u(null):u({x:C.clientX-x.x,y:C.clientY-x.y})}!p.current||(f(p.current,{x:C.clientX,y:C.clientY}),d.current=!0)},y=C=>{!p.current||(d.current&&f(p.current,{x:C.clientX,y:C.clientY}),p.current=null,d.current=!1)};return window.addEventListener("mousemove",b),window.addEventListener("mouseup",y),()=>{window.removeEventListener("mousemove",b),window.removeEventListener("mouseup",y)}},[f]),i.useLayoutEffect(()=>{(!o||r)&&u(null)},[o,r]),!t||!o?null:_.default.createElement("div",{ref:c,className:"screenshots-background",onMouseDown:h,__self:this,__source:{fileName:ae,lineNumber:120,columnNumber:5}},_.default.createElement("img",{className:"screenshots-background-image",src:t,__self:this,__source:{fileName:ae,lineNumber:121,columnNumber:7}}),_.default.createElement("div",{className:"screenshots-background-mask",__self:this,__source:{fileName:ae,lineNumber:122,columnNumber:7}}),l&&!r&&_.default.createElement(je,{x:l==null?void 0:l.x,y:l==null?void 0:l.y,__self:this,__source:{fileName:ae,lineNumber:123,columnNumber:31}}))});function A(){const{cursor:e}=P(),{setCursor:t}=re(),o=i.useCallback(s=>{t==null||t(s)},[t]),a=i.useCallback(()=>{t==null||t("move")},[t]);return[e,{set:o,reset:a}]}function J(){const{emiterRef:e}=P(),t=i.useCallback((r,n)=>{const c=e.current;Array.isArray(c[r])?c[r].push(n):c[r]=[n]},[e]),o=i.useCallback((r,n)=>{const c=e.current;if(Array.isArray(c[r])){const p=c[r].findIndex(d=>d===n);p!==-1&&c[r].splice(p,1)}},[e]),a=i.useCallback((r,...n)=>{const c=e.current;Array.isArray(c[r])&&c[r].forEach(p=>p(...n))},[e]),s=i.useCallback(()=>{e.current={}},[e]);return{on:t,off:o,emit:a,reset:s}}function X(){const{history:e}=P(),{setHistory:t}=re(),o=i.useCallback(l=>{const{index:u,stack:f}=e;f.forEach(h=>{h.type===D.Source&&(h.isSelected=!1)}),l.type===D.Source?l.isSelected=!0:l.type===D.Edit&&(l.source.isSelected=!0),f.splice(u+1),f.push(l),t==null||t({index:f.length-1,stack:f})},[e,t]),a=i.useCallback(()=>{const{stack:l}=e;l.pop(),t==null||t({index:l.length-1,stack:l})},[e,t]),s=i.useCallback(()=>{const{index:l,stack:u}=e,f=u[l];f&&(f.type===D.Source?f.isSelected=!1:f.type===D.Edit&&f.source.editHistory.pop()),t==null||t({index:l<=0?-1:l-1,stack:u})},[e,t]),r=i.useCallback(()=>{const{index:l,stack:u}=e,f=u[l+1];f&&(f.type===D.Source?f.isSelected=!1:f.type===D.Edit&&f.source.editHistory.push(f)),t==null||t({index:l>=u.length-1?u.length-1:l+1,stack:u})},[e,t]),n=i.useCallback(l=>{t==null||t({...l})},[t]),c=i.useCallback(l=>{e.stack.forEach(u=>{u.type===D.Source&&(u===l?u.isSelected=!0:u.isSelected=!1)}),t==null||t({...e})},[e,t]),p=i.useCallback(()=>{e.stack.forEach(l=>{l.type===D.Source&&(l.isSelected=!1)}),t==null||t({...e})},[e,t]),d=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:o,pop:a,undo:s,redo:r,set:n,select:c,clearSelect:p,reset:d}]}function T(){const{operation:e}=P(),{setOperation:t}=re(),o=i.useCallback(s=>{t==null||t(s)},[t]),a=i.useCallback(()=>{t==null||t(void 0)},[t]);return[e,{set:o,reset:a}]}function Ae({x:e,y:t},{x:o,y:a},s,r,n,c){return e>o&&([e,o]=[o,e]),t>a&&([t,a]=[a,t]),e<0&&(e=0,c==="move"&&(o=s.width)),o>r&&(o=r,c==="move"&&(e=o-s.width)),t<0&&(t=0,c==="move"&&(a=s.height)),a>n&&(a=n,c==="move"&&(t=a-s.height)),{x:e,y:t,width:Math.max(o-e,1),height:Math.max(a-t,1)}}function Te(e,t,o,a){const s=e.clientX-o.x,r=e.clientY-o.y;let n=a.x,c=a.y,p=a.x+a.width,d=a.y+a.height;switch(t){case"top":c+=r;break;case"top-right":p+=s,c+=r;break;case"right":p+=s;break;case"right-bottom":p+=s,d+=r;break;case"bottom":d+=r;break;case"bottom-left":n+=s,d+=r;break;case"left":n+=s;break;case"left-top":n+=s,c+=r;break;case"move":n+=s,c+=r,p+=s,d+=r;break}return[{x:n,y:c},{x:p,y:d}]}function He(e,t,o,a){if(!t)return!1;const s=document.createElement("canvas");s.width=e.width,s.height=e.height;const r=s.getContext("2d");if(!r)return!1;const{left:n,top:c}=t.getBoundingClientRect(),p=a.clientX-n,d=a.clientY-c;return[...o.stack.slice(0,o.index+1)].reverse().find(u=>{var f;return u.type!==D.Source?!1:(r.clearRect(0,0,e.width,e.height),(f=u.isHit)==null?void 0:f.call(u,r,u,{x:p,y:d}))})}var I="C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\ScreenshotsCanvas\\index.tsx";const Ie=["top","right","bottom","left"],We=["top","top-right","right","right-bottom","bottom","bottom-left","left","left-top"];var Oe=i.memo(i.forwardRef(function(t,o){const{url:a,image:s,width:r,height:n}=P(),c=J(),[p]=X(),[d]=A(),[l,u]=q(),[f]=T(),h=i.useRef(),b=i.useRef(null),y=i.useRef(null),C=i.useRef(null),x=i.useRef(null),S=i.useCallback(()=>{if(!l||!x.current)return;const m=x.current;m.imageSmoothingEnabled=!0,m.imageSmoothingQuality="low",m.clearRect(0,0,l.width,l.height),p.stack.slice(0,p.index+1).forEach(v=>{v.type===D.Source&&v.draw(m,v)})},[l,x,p]),w=i.useCallback((m,v)=>{if(!(m.button!==0||!l))if(!f)h.current=v,b.current={x:m.clientX,y:m.clientY},y.current={x:l.x,y:l.y,width:l.width,height:l.height};else{const N=He(l,C.current,p,m.nativeEvent);N?c.emit("drawselect",N,m.nativeEvent):c.emit("mousedown",m.nativeEvent)}},[l,f,c,p]),g=i.useCallback(m=>{if(!h.current||!b.current||!y.current||!l)return;const v=Te(m,h.current,b.current,y.current);u.set(Ae(v[0],v[1],l,r,n,h.current))},[r,n,l,u]);return i.useLayoutEffect(()=>{if(!s||!l||!C.current){x.current=null;return}x.current||(x.current=C.current.getContext("2d")),S()},[s,l,S]),i.useEffect(()=>{const m=N=>{if(f)c.emit("mousemove",N);else{if(!h.current||!b.current||!y.current)return;g(N)}},v=N=>{if(f)c.emit("mouseup",N);else{if(!h.current||!b.current||!y.current)return;g(N),h.current=void 0,b.current=null,y.current=null}};return window.addEventListener("mousemove",m),window.addEventListener("mouseup",v),()=>{window.removeEventListener("mousemove",m),window.removeEventListener("mouseup",v)}},[g,f,c]),i.useImperativeHandle(o,()=>x.current),_.default.createElement("div",{className:"screenshots-canvas",style:{width:(l==null?void 0:l.width)||0,height:(l==null?void 0:l.height)||0,transform:l?`translate(${l.x}px, ${l.y}px)`:"none"},__self:this,__source:{fileName:I,lineNumber:173,columnNumber:7}},_.default.createElement("div",{className:"screenshots-canvas-body",__self:this,__source:{fileName:I,lineNumber:181,columnNumber:9}},_.default.createElement("img",{className:"screenshots-canvas-image",src:a,style:{width:r,height:n,transform:l?`translate(${-l.x}px, ${-l.y}px)`:"none"},__self:this,__source:{fileName:I,lineNumber:183,columnNumber:11}}),_.default.createElement("canvas",{ref:C,className:"screenshots-canvas-panel",width:(l==null?void 0:l.width)||0,height:(l==null?void 0:l.height)||0,__self:this,__source:{fileName:I,lineNumber:192,columnNumber:11}})),_.default.createElement("div",{className:"screenshots-canvas-mask",style:{cursor:d},onMouseDown:m=>w(m,"move"),__self:this,__source:{fileName:I,lineNumber:199,columnNumber:9}}),Ie.map(m=>_.default.createElement("div",{key:m,className:`screenshots-canvas-border-${m}`,__self:this,__source:{fileName:I,lineNumber:207,columnNumber:18}})),l&&We.map(m=>_.default.createElement("div",{key:m,className:`screenshots-canvas-point-${m}`,onMouseDown:v=>w(v,m),__self:this,__source:{fileName:I,lineNumber:211,columnNumber:13}})))}));function Ne(){const e=re();return i.useCallback((o,...a)=>{var s;(s=e.call)==null||s.call(e,o,...a)},[e])}function H(){const{canvasContextRef:e}=P();return e}function Ce(){const e=J(),[,t]=q(),[,o]=A(),[,a]=X(),[,s]=T();return i.useCallback(()=>{e.reset(),a.reset(),t.reset(),o.reset(),s.reset()},[e,a,t,o,s])}var pe="C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\ScreenshotsOption\\index.tsx",Ve=i.memo(function({open:t,content:o,children:a}){var y,C;const s=i.useRef(null),r=i.useRef(null),n=i.useRef(null),c=i.useContext(Ye),[p,d]=i.useState("bottom"),[l,u]=i.useState(null),[f,h]=i.useState(0),b=()=>(r.current||(r.current=document.createElement("div")),r.current);return i.useEffect(()=>{const x=b();return t&&document.body.appendChild(x),()=>{x.remove()}},[t]),i.useEffect(()=>{if(!t||!c||!s.current||!n.current)return;const x=s.current.getBoundingClientRect(),S=n.current.getBoundingClientRect();let w=p,g=x.left+x.width/2,m=x.top+x.height,v=f;if(g+S.width/2>c.x+c.width){const N=g;g=c.x+c.width-S.width/2,v=N-g}if(g<c.x+S.width/2){const N=g;g=c.x+S.width/2,v=N-g}m>window.innerHeight-S.height&&(w==="bottom"&&(w="top"),m=x.top-S.height),m<0&&(w==="top"&&(w="bottom"),m=x.top+x.height),w!==p&&d(w),((l==null?void 0:l.x)!==g||l.y!==m)&&u({x:g,y:m}),v!==f&&h(v)}),_.default.createElement(_.default.Fragment,null,i.cloneElement(a,{ref:s}),t&&o&&De.createPortal(_.default.createElement("div",{ref:n,className:"screenshots-option",style:{visibility:l?"visible":"hidden",transform:`translate(${(y=l==null?void 0:l.x)!=null?y:0}px, ${(C=l==null?void 0:l.y)!=null?C:0}px)`},"data-placement":p,__self:this,__source:{fileName:pe,lineNumber:111,columnNumber:11}},_.default.createElement("div",{className:"screenshots-option-container",__self:this,__source:{fileName:pe,lineNumber:120,columnNumber:13}},o),_.default.createElement("div",{className:"screenshots-option-arrow",style:{marginLeft:f},__self:this,__source:{fileName:pe,lineNumber:121,columnNumber:13}})),b()))});var be="C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\ScreenshotsButton\\index.tsx",Y=i.memo(function({title:t,icon:o,checked:a,disabled:s,option:r,onClick:n}){const c=["screenshots-button"],p=i.useCallback(d=>{s||!n||n(d)},[s,n]);return a&&c.push("screenshots-button-checked"),s&&c.push("screenshots-button-disabled"),_.default.createElement(Ve,{open:a,content:r,__self:this,__source:{fileName:be,lineNumber:42,columnNumber:5}},_.default.createElement("div",{className:c.join(" "),title:t,onClick:p,__self:this,__source:{fileName:be,lineNumber:43,columnNumber:7}},_.default.createElement("span",{className:o,__self:this,__source:{fileName:be,lineNumber:44,columnNumber:9}})))}),qe="C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\operations\\Ok\\index.tsx";function Je(){const{image:e,width:t,height:o,history:a,bounds:s,lang:r}=P(),n=H(),[,c]=X(),p=Ne(),d=Ce(),l=i.useCallback(()=>{c.clearSelect(),setTimeout(()=>{!n.current||!e||!s||fe({image:e,width:t,height:o,history:a,bounds:s}).then(u=>{p("onOk",u,s),d()})})},[n,c,e,t,o,a,s,p,d]);return _.default.createElement(Y,{title:r.operation_ok_title,icon:"icon-ok",onClick:l,__self:this,__source:{fileName:qe,lineNumber:36,columnNumber:10}})}var Qe="C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\operations\\Cancel\\index.tsx";function Ke(){const e=Ne(),t=Ce(),o=U(),a=i.useCallback(()=>{e("onCancel"),t()},[e,t]);return _.default.createElement(Y,{title:o.operation_cancel_title,icon:"icon-cancel",onClick:a,__self:this,__source:{fileName:Qe,lineNumber:17,columnNumber:10}})}var Ze="C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\operations\\Save\\index.tsx";function et(){const{image:e,width:t,height:o,history:a,bounds:s,lang:r}=P(),n=H(),[,c]=X(),p=Ne(),d=Ce(),l=i.useCallback(()=>{c.clearSelect(),setTimeout(()=>{!n.current||!e||!s||fe({image:e,width:t,height:o,history:a,bounds:s}).then(u=>{p("onSave",u,s),d()})})},[n,c,e,t,o,a,s,p,d]);return _.default.createElement(Y,{title:r.operation_save_title,icon:"icon-save",onClick:l,__self:this,__source:{fileName:Ze,lineNumber:36,columnNumber:10}})}var tt="C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\operations\\Redo\\index.tsx";function nt(){const e=U(),[t,o]=X(),a=i.useCallback(()=>{o.redo()},[o]);return _.default.createElement(Y,{title:e.operation_redo_title,icon:"icon-redo",disabled:!t.stack.length||t.stack.length-1===t.index,onClick:a,__self:this,__source:{fileName:tt,lineNumber:15,columnNumber:5}})}var st="C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\operations\\Undo\\index.tsx";function rt(){const e=U(),[t,o]=X(),a=i.useCallback(()=>{o.undo()},[o]);return _.default.createElement(Y,{title:e.operation_undo_title,icon:"icon-undo",disabled:t.index===-1,onClick:a,__self:this,__source:{fileName:st,lineNumber:15,columnNumber:5}})}var ge="C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\ScreenshotsSize\\index.tsx",Be=i.memo(function({value:t,onChange:o}){const a=[3,6,9];return _.default.createElement("div",{className:"screenshots-size",__self:this,__source:{fileName:ge,lineNumber:12,columnNumber:5}},a.map(s=>{const r=["screenshots-size-item"];return s===t&&r.push("screenshots-size-active"),_.default.createElement("div",{key:s,className:r.join(" "),onClick:()=>o&&o(s),__self:this,__source:{fileName:ge,lineNumber:21,columnNumber:11}},_.default.createElement("div",{className:"screenshots-size-pointer",style:{width:s*1.8,height:s*1.8},__self:this,__source:{fileName:ge,lineNumber:22,columnNumber:13}}))}))});function Q(e){const t=J();i.useEffect(()=>(t.on("mousedown",e),()=>{t.off("mousedown",e)}),[e,t])}function K(e){const t=J();i.useEffect(()=>(t.on("mousemove",e),()=>{t.off("mousemove",e)}),[e,t])}function Z(e){const t=J();i.useEffect(()=>(t.on("mouseup",e),()=>{t.off("mouseup",e)}),[e,t])}var Se="C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\operations\\Mosaic\\index.tsx";function le(e,t,o){if(!o)return[0,0,0,0];const{data:a,width:s}=o,r=t*s*4+e*4;return Array.from(a.slice(r,r+4))}function ot(e,t){const{tiles:o,size:a}=t.data;o.forEach(s=>{const r=Math.round(s.color[0]),n=Math.round(s.color[1]),c=Math.round(s.color[2]),p=s.color[3]/255;e.fillStyle=`rgba(${r}, ${n}, ${c}, ${p})`,e.fillRect(s.x-a/2,s.y-a/2,a,a)})}function ct(){const e=U(),{image:t,width:o,height:a}=P(),[s,r]=T(),n=H(),[c,p]=X(),[d]=q(),[,l]=A(),[u,f]=i.useState(3),h=i.useRef(null),b=i.useRef(null),y=s==="Mosaic",C=i.useCallback(()=>{r.set("Mosaic"),l.set("crosshair")},[r,l]),x=i.useCallback(()=>{y||(C(),p.clearSelect())},[y,C,p]),S=i.useCallback(m=>{if(!y||b.current||!h.current||!n.current)return;const v=n.current.canvas.getBoundingClientRect(),N=m.clientX-v.x,k=m.clientY-v.y,z=u*2;b.current={name:"Mosaic",type:D.Source,data:{size:z,tiles:[{x:N,y:k,color:le(N,k,h.current)}]},editHistory:[],draw:ot}},[y,u,n]),w=i.useCallback(m=>{if(!y||!b.current||!n.current||!h.current)return;const v=n.current.canvas.getBoundingClientRect(),N=m.clientX-v.x,k=m.clientY-v.y,z=b.current.data.size,E=b.current.data.tiles;let R=E[E.length-1];if(!R)E.push({x:N,y:k,color:le(N,k,h.current)});else{const ie=R.x-N,M=R.y-k;let L=Math.sqrt(ie**2+M**2);const me=-M/L,de=-ie/L;for(;L>z;){const ee=Math.floor(R.x+z*de),te=Math.floor(R.y+z*me);R={x:ee,y:te,color:le(ee,te,h.current)},E.push(R),L-=z}L>z/2&&E.push({x:N,y:k,color:le(N,k,h.current)})}c.top!==b.current?p.push(b.current):p.set(c)},[y,n,c,p]),g=i.useCallback(()=>{!y||(b.current=null)},[y]);return Q(S),K(w),Z(g),i.useEffect(()=>{if(!d||!t||!y)return;const m=document.createElement("canvas"),v=m.getContext("2d");if(!v)return;m.width=d.width,m.height=d.height;const N=t.naturalWidth/o,k=t.naturalHeight/a;v.drawImage(t,d.x*N,d.y*k,d.width*N,d.height*k,0,0,d.width,d.height),h.current=v.getImageData(0,0,d.width,d.height)},[o,a,d,t,y]),_.default.createElement(Y,{title:e.operation_mosaic_title,icon:"icon-mosaic",checked:y,onClick:x,option:_.default.createElement(Be,{value:u,onChange:f,__self:this,__source:{fileName:Se,lineNumber:220,columnNumber:15}}),__self:this,__source:{fileName:Se,lineNumber:215,columnNumber:5}})}var ke="C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\ScreenshotsColor\\index.tsx",it=i.memo(function({value:t,onChange:o}){const a=["#ee5126","#fceb4d","#90e746","#51c0fa","#7a7a7a","#ffffff"];return _.default.createElement("div",{className:"screenshots-color",__self:this,__source:{fileName:ke,lineNumber:12,columnNumber:5}},a.map(s=>{const r=["screenshots-color-item"];return s===t&&r.push("screenshots-color-active"),_.default.createElement("div",{key:s,className:r.join(" "),style:{backgroundColor:s},onClick:()=>o&&o(s),__self:this,__source:{fileName:ke,lineNumber:19,columnNumber:11}})}))});var _e="C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\ScreenshotsSizeColor\\index.tsx",oe=i.memo(function({size:t,color:o,onSizeChange:a,onColorChange:s}){return _.default.createElement("div",{className:"screenshots-sizecolor",__self:this,__source:{fileName:_e,lineNumber:20,columnNumber:5}},_.default.createElement(Be,{value:t,onChange:a,__self:this,__source:{fileName:_e,lineNumber:21,columnNumber:7}}),_.default.createElement(it,{value:o,onChange:s,__self:this,__source:{fileName:_e,lineNumber:22,columnNumber:7}}))});const at=`
+"use strict";const n=require("react"),de=require("react-dom");var B=(e=>(e[e.Edit=0]="Edit",e[e.Source=1]="Source",e))(B||{});function oe({image:e,width:t,height:c,history:a,bounds:s}){return new Promise((o,r)=>{const i=document.createElement("canvas"),h=s.width*window.devicePixelRatio,d=s.height*window.devicePixelRatio;i.width=h,i.height=d;const l=i.getContext("2d");if(!l)return r(new Error("convert image to blob fail"));const u=e.naturalWidth/t,f=e.naturalHeight/c;l.imageSmoothingEnabled=!0,l.imageSmoothingQuality="low",l.setTransform(window.devicePixelRatio,0,0,window.devicePixelRatio,0,0),l.clearRect(0,0,s.width,s.height),l.drawImage(e,s.x*u,s.y*f,s.width*u,s.height*f,0,0,s.width,s.height),a.stack.slice(0,a.index+1).forEach(m=>{m.type===B.Source&&m.draw(l,m)}),i.toBlob(m=>{if(!m)return r(new Error("canvas toBlob fail"));o(m)},"image/png")})}const me={magnifier_position_label:"坐标",operation_ok_title:"确定",operation_cancel_title:"取消",operation_save_title:"保存",operation_redo_title:"重做",operation_undo_title:"撤销",operation_mosaic_title:"马赛克",operation_text_title:"文本",operation_brush_title:"画笔",operation_arrow_title:"箭头",operation_ellipse_title:"椭圆",operation_rectangle_title:"矩形"},ue=n.createContext({store:{url:void 0,image:null,width:0,height:0,lang:me,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 Z(){const{dispatcher:e}=n.useContext(ue);return e}function P(){const{store:e}=n.useContext(ue);return e}function j(){const{bounds:e}=P(),{setBounds:t}=Z(),c=n.useCallback(s=>{t==null||t(s)},[t]),a=n.useCallback(()=>{t==null||t(null)},[t]);return[e,{set:c,reset:a}]}function H(){const{lang:e}=P();return e}const O=100,V=80,Re=n.memo(function({x:t,y:c}){const{width:a,height:s,image:o}=P(),r=H(),[i,h]=n.useState(null),d=n.useRef(null),l=n.useRef(null),u=n.useRef(null),[f,m]=n.useState("000000");return n.useLayoutEffect(()=>{if(!d.current)return;const p=d.current.getBoundingClientRect();let x=t+20,R=c+20;x+p.width>a&&(x=t-p.width-20),R+p.height>s&&(R=c-p.height-20),x<0&&(x=0),R<0&&(R=0),h({x,y:R})},[a,s,t,c]),n.useEffect(()=>{if(!o||!l.current){u.current=null;return}if(u.current||(u.current=l.current.getContext("2d")),!u.current)return;const p=u.current;p.clearRect(0,0,O,V);const x=o.naturalWidth/a,R=o.naturalHeight/s;p.drawImage(o,t*x-O/2,c*R-V/2,O,V,0,0,O,V);const{data:C}=p.getImageData(Math.floor(O/2),Math.floor(V/2),1,1),S=Array.from(C.slice(0,3)).map(z=>z>=16?z.toString(16):`0${z.toString(16)}`).join("").toUpperCase();m(S)},[a,s,o,t,c]),n.createElement("div",{ref:d,className:"screenshots-magnifier",style:{transform:`translate(${i==null?void 0:i.x}px, ${i==null?void 0:i.y}px)`}},n.createElement("div",{className:"screenshots-magnifier-body"},n.createElement("canvas",{ref:l,className:"screenshots-magnifier-body-canvas",width:O,height:V})),n.createElement("div",{className:"screenshots-magnifier-footer"},n.createElement("div",{className:"screenshots-magnifier-footer-item"},r.magnifier_position_label,": (",t,",",c,")"),n.createElement("div",{className:"screenshots-magnifier-footer-item"},"RGB: #",f)))});function be({x:e,y:t},{x:c,y:a},s,o){return e>c&&([e,c]=[c,e]),t>a&&([t,a]=[a,t]),e<0&&(e=0),c>s&&(c=s),t<0&&(t=0),a>o&&(a=o),{x:e,y:t,width:c-e,height:a-t}}const ke=n.memo(function(){const{url:t,image:c,width:a,height:s}=P(),[o,r]=j(),i=n.useRef(null),h=n.useRef(null),d=n.useRef(!1),[l,u]=n.useState(null),f=n.useCallback((p,x)=>{if(!i.current)return;const{x:R,y:C}=i.current.getBoundingClientRect();r.set(be({x:p.x-R,y:p.y-C},{x:x.x-R,y:x.y-C},a,s))},[a,s,r]),m=n.useCallback(p=>{h.current||o||p.button!==0||(h.current={x:p.clientX,y:p.clientY},d.current=!1)},[o]);return n.useEffect(()=>{const p=R=>{if(i.current){const C=i.current.getBoundingClientRect();R.clientX<C.left||R.clientY<C.top||R.clientX>C.right||R.clientY>C.bottom?u(null):u({x:R.clientX-C.x,y:R.clientY-C.y})}h.current&&(f(h.current,{x:R.clientX,y:R.clientY}),d.current=!0)},x=R=>{h.current&&(d.current&&f(h.current,{x:R.clientX,y:R.clientY}),h.current=null,d.current=!1)};return window.addEventListener("mousemove",p),window.addEventListener("mouseup",x),()=>{window.removeEventListener("mousemove",p),window.removeEventListener("mouseup",x)}},[f]),n.useLayoutEffect(()=>{(!c||o)&&u(null)},[c,o]),!t||!c?null:n.createElement("div",{ref:i,className:"screenshots-background",onMouseDown:m},n.createElement("img",{className:"screenshots-background-image",src:t}),n.createElement("div",{className:"screenshots-background-mask"}),l&&!o&&n.createElement(Re,{x:l==null?void 0:l.x,y:l==null?void 0:l.y}))});function I(){const{cursor:e}=P(),{setCursor:t}=Z(),c=n.useCallback(s=>{t==null||t(s)},[t]),a=n.useCallback(()=>{t==null||t("move")},[t]);return[e,{set:c,reset:a}]}function q(){const{emiterRef:e}=P(),t=n.useCallback((o,r)=>{const i=e.current;Array.isArray(i[o])?i[o].push(r):i[o]=[r]},[e]),c=n.useCallback((o,r)=>{const i=e.current;if(Array.isArray(i[o])){const h=i[o].findIndex(d=>d===r);h!==-1&&i[o].splice(h,1)}},[e]),a=n.useCallback((o,...r)=>{const i=e.current;Array.isArray(i[o])&&i[o].forEach(h=>h(...r))},[e]),s=n.useCallback(()=>{e.current={}},[e]);return{on:t,off:c,emit:a,reset:s}}function L(){const{history:e}=P(),{setHistory:t}=Z(),c=n.useCallback(l=>{const{index:u,stack:f}=e;f.forEach(m=>{m.type===B.Source&&(m.isSelected=!1)}),l.type===B.Source?l.isSelected=!0:l.type===B.Edit&&(l.source.isSelected=!0),f.splice(u+1),f.push(l),t==null||t({index:f.length-1,stack:f})},[e,t]),a=n.useCallback(()=>{const{stack:l}=e;l.pop(),t==null||t({index:l.length-1,stack:l})},[e,t]),s=n.useCallback(()=>{const{index:l,stack:u}=e,f=u[l];f&&(f.type===B.Source?f.isSelected=!1:f.type===B.Edit&&f.source.editHistory.pop()),t==null||t({index:l<=0?-1:l-1,stack:u})},[e,t]),o=n.useCallback(()=>{const{index:l,stack:u}=e,f=u[l+1];f&&(f.type===B.Source?f.isSelected=!1:f.type===B.Edit&&f.source.editHistory.push(f)),t==null||t({index:l>=u.length-1?u.length-1:l+1,stack:u})},[e,t]),r=n.useCallback(l=>{t==null||t({...l})},[t]),i=n.useCallback(l=>{e.stack.forEach(u=>{u.type===B.Source&&(u===l?u.isSelected=!0:u.isSelected=!1)}),t==null||t({...e})},[e,t]),h=n.useCallback(()=>{e.stack.forEach(l=>{l.type===B.Source&&(l.isSelected=!1)}),t==null||t({...e})},[e,t]),d=n.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:c,pop:a,undo:s,redo:o,set:r,select:i,clearSelect:h,reset:d}]}function W(){const{operation:e}=P(),{setOperation:t}=Z(),c=n.useCallback(s=>{t==null||t(s)},[t]),a=n.useCallback(()=>{t==null||t(void 0)},[t]);return[e,{set:c,reset:a}]}function Se({x:e,y:t},{x:c,y:a},s,o,r,i){return e>c&&([e,c]=[c,e]),t>a&&([t,a]=[a,t]),e<0&&(e=0,i==="move"&&(c=s.width)),c>o&&(c=o,i==="move"&&(e=c-s.width)),t<0&&(t=0,i==="move"&&(a=s.height)),a>r&&(a=r,i==="move"&&(t=a-s.height)),{x:e,y:t,width:Math.max(c-e,1),height:Math.max(a-t,1)}}function we(e,t,c,a){const s=e.clientX-c.x,o=e.clientY-c.y;let r=a.x,i=a.y,h=a.x+a.width,d=a.y+a.height;switch(t){case"top":i+=o;break;case"top-right":h+=s,i+=o;break;case"right":h+=s;break;case"right-bottom":h+=s,d+=o;break;case"bottom":d+=o;break;case"bottom-left":r+=s,d+=o;break;case"left":r+=s;break;case"left-top":r+=s,i+=o;break;case"move":r+=s,i+=o,h+=s,d+=o;break}return[{x:r,y:i},{x:h,y:d}]}function ze(e,t,c,a){if(!t)return!1;const s=document.createElement("canvas");s.width=e.width,s.height=e.height;const o=s.getContext("2d");if(!o)return!1;const{left:r,top:i}=t.getBoundingClientRect(),h=a.clientX-r,d=a.clientY-i;return[...c.stack.slice(0,c.index+1)].reverse().find(u=>{var f;return u.type!==B.Source?!1:(o.clearRect(0,0,e.width,e.height),(f=u.isHit)==null?void 0:f.call(u,o,u,{x:h,y:d}))})}const Ee=["top","right","bottom","left"],Me=["top","top-right","right","right-bottom","bottom","bottom-left","left","left-top"],Be=n.memo(n.forwardRef(function(t,c){const{url:a,image:s,width:o,height:r}=P(),i=q(),[h]=L(),[d]=I(),[l,u]=j(),[f]=W(),m=n.useRef(),p=n.useRef(null),x=n.useRef(null),R=n.useRef(null),C=n.useRef(null),S=l&&!h.stack.length&&!f,z=n.useCallback(()=>{if(!l||!C.current)return;const v=C.current;v.imageSmoothingEnabled=!0,v.imageSmoothingQuality="low",v.clearRect(0,0,l.width,l.height),h.stack.slice(0,h.index+1).forEach(b=>{b.type===B.Source&&b.draw(v,b)})},[l,C,h]),y=n.useCallback((v,b)=>{if(!(v.button!==0||!l))if(!f)m.current=b,p.current={x:v.clientX,y:v.clientY},x.current={x:l.x,y:l.y,width:l.width,height:l.height};else{const k=ze(l,R.current,h,v.nativeEvent);k?i.emit("drawselect",k,v.nativeEvent):i.emit("mousedown",v.nativeEvent)}},[l,f,i,h]),g=n.useCallback(v=>{if(!m.current||!p.current||!x.current||!l)return;const b=we(v,m.current,p.current,x.current);u.set(Se(b[0],b[1],l,o,r,m.current))},[o,r,l,u]);return n.useLayoutEffect(()=>{if(!s||!l||!R.current){C.current=null;return}C.current||(C.current=R.current.getContext("2d")),z()},[s,l,z]),n.useEffect(()=>{const v=k=>{if(f)i.emit("mousemove",k);else{if(!m.current||!p.current||!x.current)return;g(k)}},b=k=>{if(f)i.emit("mouseup",k);else{if(!m.current||!p.current||!x.current)return;g(k),m.current=void 0,p.current=null,x.current=null}};return window.addEventListener("mousemove",v),window.addEventListener("mouseup",b),()=>{window.removeEventListener("mousemove",v),window.removeEventListener("mouseup",b)}},[g,f,i]),n.useImperativeHandle(c,()=>C.current),n.createElement("div",{className:"screenshots-canvas",style:{width:(l==null?void 0:l.width)||0,height:(l==null?void 0:l.height)||0,transform:l?`translate(${l.x}px, ${l.y}px)`:"none"}},n.createElement("div",{className:"screenshots-canvas-body"},n.createElement("img",{className:"screenshots-canvas-image",src:a,style:{width:o,height:r,transform:l?`translate(${-l.x}px, ${-l.y}px)`:"none"}}),n.createElement("canvas",{ref:R,className:"screenshots-canvas-panel",width:(l==null?void 0:l.width)||0,height:(l==null?void 0:l.height)||0})),n.createElement("div",{className:"screenshots-canvas-mask",style:{cursor:d},onMouseDown:v=>y(v,"move")},S&&n.createElement("div",{className:"screenshots-canvas-size"},l.width," × ",l.height)),Ee.map(v=>n.createElement("div",{key:v,className:`screenshots-canvas-border-${v}`})),S&&Me.map(v=>n.createElement("div",{key:v,className:`screenshots-canvas-point-${v}`,onMouseDown:b=>y(b,v)})))}));function fe(){const e=Z();return n.useCallback((c,...a)=>{var s;(s=e.call)==null||s.call(e,c,...a)},[e])}function F(){const{canvasContextRef:e}=P();return e}function he(){const e=q(),[,t]=j(),[,c]=I(),[,a]=L(),[,s]=W();return n.useCallback(()=>{e.reset(),a.reset(),t.reset(),c.reset(),s.reset()},[e,a,t,c,s])}const $e=n.memo(function({open:t,content:c,children:a}){const s=n.useRef(null),o=n.useRef(null),r=n.useRef(null),i=n.useContext(Ce),[h,d]=n.useState("bottom"),[l,u]=n.useState(null),[f,m]=n.useState(0),p=()=>(o.current||(o.current=document.createElement("div")),o.current);return n.useEffect(()=>{const x=p();return t&&document.body.appendChild(x),()=>{x.remove()}},[t]),n.useEffect(()=>{if(!t||!i||!s.current||!r.current)return;const x=s.current.getBoundingClientRect(),R=r.current.getBoundingClientRect();let C=h,S=x.left+x.width/2,z=x.top+x.height,y=f;if(S+R.width/2>i.x+i.width){const g=S;S=i.x+i.width-R.width/2,y=g-S}if(S<i.x+R.width/2){const g=S;S=i.x+R.width/2,y=g-S}z>window.innerHeight-R.height&&(C==="bottom"&&(C="top"),z=x.top-R.height),z<0&&(C==="top"&&(C="bottom"),z=x.top+x.height),C!==h&&d(C),((l==null?void 0:l.x)!==S||l.y!==z)&&u({x:S,y:z}),y!==f&&m(y)}),n.createElement(n.Fragment,null,n.cloneElement(a,{ref:s}),t&&c&&de.createPortal(n.createElement("div",{ref:r,className:"screenshots-option",style:{visibility:l?"visible":"hidden",transform:`translate(${(l==null?void 0:l.x)??0}px, ${(l==null?void 0:l.y)??0}px)`},"data-placement":h},n.createElement("div",{className:"screenshots-option-container"},c),n.createElement("div",{className:"screenshots-option-arrow",style:{marginLeft:f}})),p()))});const N=n.memo(function({title:t,icon:c,checked:a,disabled:s,option:o,onClick:r}){const i=["screenshots-button"],h=n.useCallback(d=>{s||!r||r(d)},[s,r]);return a&&i.push("screenshots-button-checked"),s&&i.push("screenshots-button-disabled"),n.createElement($e,{open:a,content:o},n.createElement("div",{className:i.join(" "),title:t,onClick:h},n.createElement("span",{className:c})))});function De(){const{image:e,width:t,height:c,history:a,bounds:s,lang:o}=P(),r=F(),[,i]=L(),h=fe(),d=he(),l=n.useCallback(()=>{i.clearSelect(),setTimeout(()=>{!r.current||!e||!s||oe({image:e,width:t,height:c,history:a,bounds:s}).then(u=>{h("onOk",u,s),d()})})},[r,i,e,t,c,a,s,h,d]);return n.createElement(N,{title:o.operation_ok_title,icon:"icon-ok",onClick:l})}function _e(){const e=fe(),t=he(),c=H(),a=n.useCallback(()=>{e("onCancel"),t()},[e,t]);return n.createElement(N,{title:c.operation_cancel_title,icon:"icon-cancel",onClick:a})}function Pe(){const{image:e,width:t,height:c,history:a,bounds:s,lang:o}=P(),r=F(),[,i]=L(),h=fe(),d=he(),l=n.useCallback(()=>{i.clearSelect(),setTimeout(()=>{!r.current||!e||!s||oe({image:e,width:t,height:c,history:a,bounds:s}).then(u=>{h("onSave",u,s),d()})})},[r,i,e,t,c,a,s,h,d]);return n.createElement(N,{title:o.operation_save_title,icon:"icon-save",onClick:l})}function Xe(){const e=H(),[t,c]=L(),a=n.useCallback(()=>{c.redo()},[c]);return n.createElement(N,{title:e.operation_redo_title,icon:"icon-redo",disabled:!t.stack.length||t.stack.length-1===t.index,onClick:a})}function Le(){const e=H(),[t,c]=L(),a=n.useCallback(()=>{c.undo()},[c]);return n.createElement(N,{title:e.operation_undo_title,icon:"icon-undo",disabled:t.index===-1,onClick:a})}const ge=n.memo(function({value:t,onChange:c}){const a=[3,6,9];return n.createElement("div",{className:"screenshots-size"},a.map(s=>{const o=["screenshots-size-item"];return s===t&&o.push("screenshots-size-active"),n.createElement("div",{key:s,className:o.join(" "),onClick:()=>c&&c(s)},n.createElement("div",{className:"screenshots-size-pointer",style:{width:s*1.8,height:s*1.8}}))}))});function J(e){const t=q();n.useEffect(()=>(t.on("mousedown",e),()=>{t.off("mousedown",e)}),[e,t])}function U(e){const t=q();n.useEffect(()=>(t.on("mousemove",e),()=>{t.off("mousemove",e)}),[e,t])}function G(e){const t=q();n.useEffect(()=>(t.on("mouseup",e),()=>{t.off("mouseup",e)}),[e,t])}function re(e,t,c){if(!c)return[0,0,0,0];const{data:a,width:s}=c,o=t*s*4+e*4;return Array.from(a.slice(o,o+4))}function Ne(e,t){const{tiles:c,size:a}=t.data;c.forEach(s=>{const o=Math.round(s.color[0]),r=Math.round(s.color[1]),i=Math.round(s.color[2]),h=s.color[3]/255;e.fillStyle=`rgba(${o}, ${r}, ${i}, ${h})`,e.fillRect(s.x-a/2,s.y-a/2,a,a)})}function Ye(){const e=H(),{image:t,width:c,height:a}=P(),[s,o]=W(),r=F(),[i,h]=L(),[d]=j(),[,l]=I(),[u,f]=n.useState(3),m=n.useRef(null),p=n.useRef(null),x=s==="Mosaic",R=n.useCallback(()=>{o.set("Mosaic"),l.set("crosshair")},[o,l]),C=n.useCallback(()=>{x||(R(),h.clearSelect())},[x,R,h]),S=n.useCallback(g=>{if(!x||p.current||!m.current||!r.current)return;const v=r.current.canvas.getBoundingClientRect(),b=g.clientX-v.x,k=g.clientY-v.y,E=u*2;p.current={name:"Mosaic",type:B.Source,data:{size:E,tiles:[{x:b,y:k,color:re(b,k,m.current)}]},editHistory:[],draw:Ne}},[x,u,r]),z=n.useCallback(g=>{if(!x||!p.current||!r.current||!m.current)return;const v=r.current.canvas.getBoundingClientRect(),b=g.clientX-v.x,k=g.clientY-v.y,E=p.current.data.size,M=p.current.data.tiles;let w=M[M.length-1];if(!w)M.push({x:b,y:k,color:re(b,k,m.current)});else{const ne=w.x-b,$=w.y-k;let X=Math.sqrt(ne**2+$**2);const ie=-$/X,ae=-ne/X;for(;X>E;){const Q=Math.floor(w.x+E*ae),K=Math.floor(w.y+E*ie);w={x:Q,y:K,color:re(Q,K,m.current)},M.push(w),X-=E}X>E/2&&M.push({x:b,y:k,color:re(b,k,m.current)})}i.top!==p.current?h.push(p.current):h.set(i)},[x,r,i,h]),y=n.useCallback(()=>{x&&(p.current=null)},[x]);return J(S),U(z),G(y),n.useEffect(()=>{if(!d||!t||!x)return;const g=document.createElement("canvas"),v=g.getContext("2d");if(!v)return;g.width=d.width,g.height=d.height;const b=t.naturalWidth/c,k=t.naturalHeight/a;v.drawImage(t,d.x*b,d.y*k,d.width*b,d.height*k,0,0,d.width,d.height),m.current=v.getImageData(0,0,d.width,d.height)},[c,a,d,t,x]),n.createElement(N,{title:e.operation_mosaic_title,icon:"icon-mosaic",checked:x,onClick:C,option:n.createElement(ge,{value:u,onChange:f})})}const Te=n.memo(function({value:t,onChange:c}){const a=["#ee5126","#fceb4d","#90e746","#51c0fa","#7a7a7a","#ffffff"];return n.createElement("div",{className:"screenshots-color"},a.map(s=>{const o=["screenshots-color-item"];return s===t&&o.push("screenshots-color-active"),n.createElement("div",{key:s,className:o.join(" "),style:{backgroundColor:s},onClick:()=>c&&c(s)})}))});const ee=n.memo(function({size:t,color:c,onSizeChange:a,onColorChange:s}){return n.createElement("div",{className:"screenshots-sizecolor"},n.createElement(ge,{value:t,onChange:a}),n.createElement(Te,{value:c,onChange:s}))}),He=`
 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;
-`,lt=["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 G;function ut(e){const t=window.getComputedStyle(e),o=t.getPropertyValue("box-sizing")||t.getPropertyValue("-moz-box-sizing")||t.getPropertyValue("-webkit-box-sizing"),a=parseFloat(t.getPropertyValue("padding-bottom"))+parseFloat(t.getPropertyValue("padding-top")),s=parseFloat(t.getPropertyValue("border-bottom-width"))+parseFloat(t.getPropertyValue("border-top-width"));return{sizingStyle:lt.map(n=>`${n}:${t.getPropertyValue(n)}`).join(";"),paddingSize:a,borderSize:s,boxSizing:o}}function ft(e,t,o,a){G||(G=document.createElement("textarea"),G.setAttribute("tab-index","-1"),document.body.appendChild(G));const{paddingSize:s,borderSize:r,boxSizing:n,sizingStyle:c}=ut(e);G.setAttribute("style",`${c};${at};max-width:${o}px;max-height:${a}px`),G.value=t||" ";let p=G.scrollWidth,d=G.scrollHeight;return n==="border-box"?(p+=r,d+=r):n==="content-box"&&(p-=s,d-=s),{width:Math.min(p,o),height:Math.min(d,a)}}var ht="C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\ScreenshotsTextarea\\index.tsx",mt=i.memo(function({x:t,y:o,maxWidth:a,maxHeight:s,size:r,color:n,value:c,onChange:p,onBlur:d}){const l=i.useRef(null),u=i.useRef(null),[f,h]=i.useState(0),[b,y]=i.useState(0),C=()=>(l.current||(l.current=document.createElement("div")),l.current);return i.useLayoutEffect(()=>(l.current&&(document.body.appendChild(l.current),requestAnimationFrame(()=>{var x;(x=u.current)==null||x.focus()})),()=>{var x;(x=l.current)==null||x.remove()}),[]),i.useLayoutEffect(()=>{if(!u.current)return;const{width:x,height:S}=ft(u.current,c,a,s);h(x),y(S)},[c,a,s]),De.createPortal(_.default.createElement("textarea",{ref:u,className:"screenshots-textarea",style:{color:n,width:f,height:b,maxWidth:a,maxHeight:s,fontSize:r,lineHeight:`${r}px`,transform:`translate(${t}px, ${o}px)`},value:c,onChange:x=>p&&p(x.target.value),onBlur:x=>d&&d(x),__self:this,__source:{fileName:ht,lineNumber:65,columnNumber:5}}),C())});function ce(e){const t=J();i.useEffect(()=>(t.on("drawselect",e),()=>{t.off("drawselect",e)}),[e,t])}var xe="C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\operations\\Text\\index.tsx";const ve={3:18,6:32,9:46};function dt(e,t){const{size:o,color:a,fontFamily:s,x:r,y:n,text:c}=t.data;e.fillStyle=a,e.textAlign="left",e.textBaseline="top",e.font=`${o}px ${s}`;const p=t.editHistory.reduce((d,{data:l})=>({x:d.x+l.x2-l.x1,y:d.y+l.y2-l.y1}),{x:0,y:0});c.split(`
-`).forEach((d,l)=>{e.fillText(d,r+p.x,n+p.y+l*o)})}function pt(e,t,o){e.textAlign="left",e.textBaseline="top",e.font=`${t.data.size}px ${t.data.fontFamily}`;let a=0,s=0;t.data.text.split(`
-`).forEach(u=>{const f=e.measureText(u);a<f.width&&(a=f.width),s+=t.data.size});const{x:r,y:n}=t.editHistory.reduce((u,{data:f})=>({x:u.x+f.x2-f.x1,y:u.y+f.y2-f.y1}),{x:0,y:0}),c=t.data.x+r,p=t.data.y+n,d=c+a,l=p+s;return o.x>=c&&o.x<=d&&o.y>=p&&o.y<=l}function bt(){const e=U(),[t,o]=X(),[a]=q(),[s,r]=T(),[,n]=A(),c=H(),[p,d]=i.useState(3),[l,u]=i.useState("#ee5126"),f=i.useRef(null),h=i.useRef(null),[b,y]=i.useState(null),[C,x]=i.useState(""),S=s==="Text",w=i.useCallback(()=>{r.set("Text"),n.set("default")},[r,n]),g=i.useCallback(()=>{S||(w(),o.clearSelect())},[S,w,o]),m=i.useCallback(M=>{f.current&&(f.current.data.size=ve[M]),d(M)},[]),v=i.useCallback(M=>{f.current&&(f.current.data.color=M),u(M)},[]),N=i.useCallback(M=>{x(M),S&&f.current&&(f.current.data.text=M)},[S]),k=i.useCallback(()=>{f.current&&f.current.data.text&&o.push(f.current),f.current=null,x(""),y(null)},[o]),z=i.useCallback((M,L)=>{M.name==="Text"&&(w(),h.current={type:D.Edit,data:{x1:L.clientX,y1:L.clientY,x2:L.clientX,y2:L.clientY},source:M},o.select(M))},[w,o]),E=i.useCallback(M=>{if(!S||!c.current||f.current||!a)return;const{left:L,top:me}=c.current.canvas.getBoundingClientRect(),de=window.getComputedStyle(c.current.canvas).fontFamily,ee=M.clientX-L,te=M.clientY-me;f.current={name:"Text",type:D.Source,data:{size:ve[p],color:l,fontFamily:de,x:ee,y:te,text:""},editHistory:[],draw:dt,isHit:pt},y({x:M.clientX,y:M.clientY,maxWidth:a.width-ee,maxHeight:a.height-te})},[S,p,l,a,c]),R=i.useCallback(M=>{!S||h.current&&(h.current.data.x2=M.clientX,h.current.data.y2=M.clientY,t.top!==h.current?(h.current.source.editHistory.push(h.current),o.push(h.current)):o.set(t))},[S,t,o]),ie=i.useCallback(()=>{!S||(h.current=null)},[S]);return ce(z),Q(E),K(R),Z(ie),_.default.createElement(_.default.Fragment,null,_.default.createElement(Y,{title:e.operation_text_title,icon:"icon-text",checked:S,onClick:g,option:_.default.createElement(oe,{size:p,color:l,onSizeChange:m,onColorChange:v,__self:this,__source:{fileName:xe,lineNumber:261,columnNumber:11}}),__self:this,__source:{fileName:xe,lineNumber:255,columnNumber:7}}),S&&b&&_.default.createElement(mt,{x:b.x,y:b.y,maxWidth:b.maxWidth,maxHeight:b.maxHeight,size:ve[p],color:l,value:C,onChange:N,onBlur:k,__self:this,__source:{fileName:xe,lineNumber:265,columnNumber:9}}))}const $e=4;function B(e,t,o){e.lineWidth=1,e.strokeStyle="#000000",e.fillStyle="#ffffff",e.beginPath(),e.arc(t,o,$e,0,2*Math.PI),e.fill(),e.stroke()}function he(e,t,o){t.draw(e,t);const{data:a}=e.getImageData(o.x,o.y,1,1);return a.some(s=>s!==0)}function $(e,t,o){if(!e)return!1;const{left:a,top:s}=e.getBoundingClientRect(),r=t.clientX-a,n=t.clientY-s;return(o.x-r)**2+(o.y-n)**2<$e**2}function gt(e,t){const{size:o,color:a,points:s}=t.data;e.lineCap="round",e.lineJoin="round",e.lineWidth=o,e.strokeStyle=a;const r=t.editHistory.reduce((n,{data:c})=>({x:n.x+c.x2-c.x1,y:n.y+c.y2-c.y1}),{x:0,y:0});e.beginPath(),s.forEach((n,c)=>{c===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(),s.forEach((n,c)=>{c===0?e.moveTo(n.x+r.x,n.y+r.y):e.lineTo(n.x+r.x,n.y+r.y)}),e.stroke())}var Re="C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\operations\\Brush\\index.tsx";function _t(){const e=U(),[,t]=A(),[o,a]=T(),s=H(),[r,n]=X(),[c,p]=i.useState(3),[d,l]=i.useState("#ee5126"),u=i.useRef(null),f=i.useRef(null),h=o==="Brush",b=i.useCallback(()=>{a.set("Brush"),t.set("default")},[a,t]),y=i.useCallback(()=>{h||(b(),n.clearSelect())},[h,b,n]),C=i.useCallback((g,m)=>{g.name==="Brush"&&(b(),f.current={type:D.Edit,data:{x1:m.clientX,y1:m.clientY,x2:m.clientX,y2:m.clientY},source:g},n.select(g))},[b,n]),x=i.useCallback(g=>{if(!h||u.current||!s.current)return;const{left:m,top:v}=s.current.canvas.getBoundingClientRect();u.current={name:"Brush",type:D.Source,data:{size:c,color:d,points:[{x:g.clientX-m,y:g.clientY-v}]},editHistory:[],draw:gt,isHit:he}},[h,s,c,d]),S=i.useCallback(g=>{if(!(!h||!s.current)){if(f.current)f.current.data.x2=g.clientX,f.current.data.y2=g.clientY,r.top!==f.current?(f.current.source.editHistory.push(f.current),n.push(f.current)):n.set(r);else if(u.current){const{left:m,top:v}=s.current.canvas.getBoundingClientRect();u.current.data.points.push({x:g.clientX-m,y:g.clientY-v}),r.top!==u.current?n.push(u.current):n.set(r)}}},[h,r,s,n]),w=i.useCallback(()=>{!h||(u.current&&n.clearSelect(),u.current=null,f.current=null)},[h,n]);return ce(C),Q(x),K(S),Z(w),_.default.createElement(Y,{title:e.operation_brush_title,icon:"icon-brush",checked:h,onClick:y,option:_.default.createElement(oe,{size:c,color:d,onSizeChange:p,onColorChange:l,__self:this,__source:{fileName:Re,lineNumber:166,columnNumber:15}}),__self:this,__source:{fileName:Re,lineNumber:161,columnNumber:5}})}function Pe(e){let{x1:t,y1:o,x2:a,y2:s}=e.data;return e.editHistory.forEach(({data:r})=>{const n=r.x2-r.x1,c=r.y2-r.y1;r.type===ue.Move?(t+=n,o+=c,a+=n,s+=c):r.type===ue.MoveStart?(t+=n,o+=c):r.type===ue.MoveEnd&&(a+=n,s+=c)}),{...e.data,x1:t,x2:a,y1:o,y2:s}}function xt(e,t){const{size:o,color:a,x1:s,x2:r,y1:n,y2:c}=Pe(t);e.lineCap="round",e.lineJoin="bevel",e.lineWidth=o,e.strokeStyle=a;const p=r-s,d=c-n,l=o*3,u=Math.atan2(d,p);e.beginPath(),e.moveTo(s,n),e.lineTo(r,c),e.lineTo(r-l*Math.cos(u-Math.PI/6),c-l*Math.sin(u-Math.PI/6)),e.moveTo(r,c),e.lineTo(r-l*Math.cos(u+Math.PI/6),c-l*Math.sin(u+Math.PI/6)),e.stroke(),t.isSelected&&(B(e,s,n),B(e,r,c))}var we="C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\operations\\Arrow\\index.tsx",ue=(e=>(e[e.Move=0]="Move",e[e.MoveStart=1]="MoveStart",e[e.MoveEnd=2]="MoveEnd",e))(ue||{});function vt(){const e=U(),[,t]=A(),[o,a]=T(),[s,r]=X(),n=H(),[c,p]=i.useState(3),[d,l]=i.useState("#ee5126"),u=i.useRef(null),f=i.useRef(null),h=o==="Arrow",b=i.useCallback(()=>{a.set("Arrow"),t.set("default")},[a,t]),y=i.useCallback(()=>{h||(b(),r.clearSelect())},[h,b,r]),C=i.useCallback((g,m)=>{if(g.name!=="Arrow"||!n.current)return;const v=g;b();const{x1:N,y1:k,x2:z,y2:E}=Pe(v);let R=0;$(n.current.canvas,m,{x:N,y:k})?R=1:$(n.current.canvas,m,{x:z,y:E})&&(R=2),f.current={type:D.Edit,data:{type:R,x1:m.clientX,y1:m.clientY,x2:m.clientX,y2:m.clientY},source:v},r.select(g)},[n,b,r]),x=i.useCallback(g=>{if(!h||u.current||!n.current)return;const{left:m,top:v}=n.current.canvas.getBoundingClientRect();u.current={name:"Arrow",type:D.Source,data:{size:c,color:d,x1:g.clientX-m,y1:g.clientY-v,x2:g.clientX-m,y2:g.clientY-v},editHistory:[],draw:xt,isHit:he}},[h,d,c,n]),S=i.useCallback(g=>{if(!(!h||!n.current)){if(f.current)f.current.data.x2=g.clientX,f.current.data.y2=g.clientY,s.top!==f.current?(f.current.source.editHistory.push(f.current),r.push(f.current)):r.set(s);else if(u.current){const{left:m,top:v}=n.current.canvas.getBoundingClientRect();u.current.data.x2=g.clientX-m,u.current.data.y2=g.clientY-v,s.top!==u.current?r.push(u.current):r.set(s)}}},[h,s,n,r]),w=i.useCallback(()=>{!h||(u.current&&r.clearSelect(),u.current=null,f.current=null)},[h,r]);return ce(C),Q(x),K(S),Z(w),_.default.createElement(Y,{title:e.operation_arrow_title,icon:"icon-arrow",checked:h,onClick:y,option:_.default.createElement(oe,{size:c,color:d,onSizeChange:p,onColorChange:l,__self:this,__source:{fileName:we,lineNumber:190,columnNumber:15}}),__self:this,__source:{fileName:we,lineNumber:185,columnNumber:5}})}function Le(e){let{x1:t,y1:o,x2:a,y2:s}=e.data;return e.editHistory.forEach(({data:r})=>{const n=r.x2-r.x1,c=r.y2-r.y1;r.type===F.Move?(t+=n,o+=c,a+=n,s+=c):r.type===F.ResizeTop?o+=c:r.type===F.ResizeRightTop?(a+=n,o+=c):r.type===F.ResizeRight?a+=n:r.type===F.ResizeRightBottom?(a+=n,s+=c):r.type===F.ResizeBottom?s+=c:r.type===F.ResizeLeftBottom?(t+=n,s+=c):r.type===F.ResizeLeft?t+=n:r.type===F.ResizeLeftTop&&(t+=n,o+=c)}),{...e.data,x1:t,x2:a,y1:o,y2:s}}function yt(e,t){const{size:o,color:a,x1:s,y1:r,x2:n,y2:c}=Le(t);e.lineCap="butt",e.lineJoin="miter",e.lineWidth=o,e.strokeStyle=a;const p=(s+n)/2,d=(r+c)/2,l=Math.abs(n-s)/2,u=Math.abs(c-r)/2,f=.5522848,h=l*f,b=u*f;e.beginPath(),e.moveTo(p-l,d),e.bezierCurveTo(p-l,d-b,p-h,d-u,p,d-u),e.bezierCurveTo(p+h,d-u,p+l,d-b,p+l,d),e.bezierCurveTo(p+l,d+b,p+h,d+u,p,d+u),e.bezierCurveTo(p-h,d+u,p-l,d+b,p-l,d),e.closePath(),e.stroke(),t.isSelected&&(e.lineWidth=1,e.strokeStyle="#000000",e.fillStyle="#ffffff",e.beginPath(),e.moveTo(s,r),e.lineTo(n,r),e.lineTo(n,c),e.lineTo(s,c),e.closePath(),e.stroke(),B(e,(s+n)/2,r),B(e,n,r),B(e,n,(r+c)/2),B(e,n,c),B(e,(s+n)/2,c),B(e,s,c),B(e,s,(r+c)/2),B(e,s,r))}var ze="C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\operations\\Ellipse\\index.tsx",F=(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",e))(F||{});function Nt(){const e=U(),[t,o]=X(),[a,s]=T(),[,r]=A(),n=H(),[c,p]=i.useState(3),[d,l]=i.useState("#ee5126"),u=i.useRef(null),f=i.useRef(null),h=a==="Ellipse",b=i.useCallback(()=>{s.set("Ellipse"),r.set("crosshair")},[s,r]),y=i.useCallback(()=>{h||(b(),o.clearSelect())},[h,b,o]),C=i.useCallback((g,m)=>{if(g.name!=="Ellipse"||!n.current)return;const v=g;b();const{x1:N,y1:k,x2:z,y2:E}=Le(v);let R=0;$(n.current.canvas,m,{x:(N+z)/2,y:k})?R=1:$(n.current.canvas,m,{x:z,y:k})?R=2:$(n.current.canvas,m,{x:z,y:(k+E)/2})?R=3:$(n.current.canvas,m,{x:z,y:E})?R=4:$(n.current.canvas,m,{x:(N+z)/2,y:E})?R=5:$(n.current.canvas,m,{x:N,y:E})?R=6:$(n.current.canvas,m,{x:N,y:(k+E)/2})?R=7:$(n.current.canvas,m,{x:N,y:k})&&(R=8),f.current={type:D.Edit,data:{type:R,x1:m.clientX,y1:m.clientY,x2:m.clientX,y2:m.clientY},source:v},o.select(g)},[n,b,o]),x=i.useCallback(g=>{if(!h||!n.current||u.current)return;const{left:m,top:v}=n.current.canvas.getBoundingClientRect(),N=g.clientX-m,k=g.clientY-v;u.current={name:"Ellipse",type:D.Source,data:{size:c,color:d,x1:N,y1:k,x2:N,y2:k},editHistory:[],draw:yt,isHit:he}},[h,c,d,n]),S=i.useCallback(g=>{if(!(!h||!n.current)){if(f.current)f.current.data.x2=g.clientX,f.current.data.y2=g.clientY,t.top!==f.current?(f.current.source.editHistory.push(f.current),o.push(f.current)):o.set(t);else if(u.current){const{left:m,top:v}=n.current.canvas.getBoundingClientRect();u.current.data.x2=g.clientX-m,u.current.data.y2=g.clientY-v,t.top!==u.current?o.push(u.current):o.set(t)}}},[h,n,t,o]),w=i.useCallback(()=>{!h||(u.current&&o.clearSelect(),u.current=null,f.current=null)},[h,o]);return ce(C),Q(x),K(S),Z(w),_.default.createElement(Y,{title:e.operation_ellipse_title,icon:"icon-ellipse",checked:h,onClick:y,option:_.default.createElement(oe,{size:c,color:d,onSizeChange:p,onColorChange:l,__self:this,__source:{fileName:ze,lineNumber:242,columnNumber:15}}),__self:this,__source:{fileName:ze,lineNumber:237,columnNumber:5}})}function Xe(e){let{x1:t,y1:o,x2:a,y2:s}=e.data;return e.editHistory.forEach(({data:r})=>{const n=r.x2-r.x1,c=r.y2-r.y1;r.type===j.Move?(t+=n,o+=c,a+=n,s+=c):r.type===j.ResizeTop?o+=c:r.type===j.ResizeRightTop?(a+=n,o+=c):r.type===j.ResizeRight?a+=n:r.type===j.ResizeRightBottom?(a+=n,s+=c):r.type===j.ResizeBottom?s+=c:r.type===j.ResizeLeftBottom?(t+=n,s+=c):r.type===j.ResizeLeft?t+=n:r.type===j.ResizeLeftTop&&(t+=n,o+=c)}),{...e.data,x1:t,x2:a,y1:o,y2:s}}function Ct(e,t){const{size:o,color:a,x1:s,y1:r,x2:n,y2:c}=Xe(t);e.lineCap="butt",e.lineJoin="miter",e.lineWidth=o,e.strokeStyle=a,e.beginPath(),e.moveTo(s,r),e.lineTo(n,r),e.lineTo(n,c),e.lineTo(s,c),e.closePath(),e.stroke(),t.isSelected&&(e.lineWidth=1,e.strokeStyle="#000000",e.fillStyle="#ffffff",B(e,(s+n)/2,r),B(e,n,r),B(e,n,(r+c)/2),B(e,n,c),B(e,(s+n)/2,c),B(e,s,c),B(e,s,(r+c)/2),B(e,s,r))}var Ee="C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\operations\\Rectangle\\index.tsx",j=(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",e))(j||{});function St(){const e=U(),[t,o]=X(),[a,s]=T(),[,r]=A(),n=H(),[c,p]=i.useState(3),[d,l]=i.useState("#ee5126"),u=i.useRef(null),f=i.useRef(null),h=a==="Rectangle",b=i.useCallback(()=>{s.set("Rectangle"),r.set("crosshair")},[s,r]),y=i.useCallback(()=>{h||(b(),o.clearSelect())},[h,b,o]),C=i.useCallback((g,m)=>{if(g.name!=="Rectangle"||!n.current)return;const v=g;b();const{x1:N,y1:k,x2:z,y2:E}=Xe(v);let R=0;$(n.current.canvas,m,{x:(N+z)/2,y:k})?R=1:$(n.current.canvas,m,{x:z,y:k})?R=2:$(n.current.canvas,m,{x:z,y:(k+E)/2})?R=3:$(n.current.canvas,m,{x:z,y:E})?R=4:$(n.current.canvas,m,{x:(N+z)/2,y:E})?R=5:$(n.current.canvas,m,{x:N,y:E})?R=6:$(n.current.canvas,m,{x:N,y:(k+E)/2})?R=7:$(n.current.canvas,m,{x:N,y:k})&&(R=8),f.current={type:D.Edit,data:{type:R,x1:m.clientX,y1:m.clientY,x2:m.clientX,y2:m.clientY},source:g},o.select(g)},[n,b,o]),x=i.useCallback(g=>{if(!h||!n.current||u.current)return;const{left:m,top:v}=n.current.canvas.getBoundingClientRect(),N=g.clientX-m,k=g.clientY-v;u.current={name:"Rectangle",type:D.Source,data:{size:c,color:d,x1:N,y1:k,x2:N,y2:k},editHistory:[],draw:Ct,isHit:he}},[h,c,d,n]),S=i.useCallback(g=>{if(!(!h||!n.current)){if(f.current)f.current.data.x2=g.clientX,f.current.data.y2=g.clientY,t.top!==f.current?(f.current.source.editHistory.push(f.current),o.push(f.current)):o.set(t);else if(u.current){const{left:m,top:v}=n.current.canvas.getBoundingClientRect(),N=u.current.data;N.x2=g.clientX-m,N.y2=g.clientY-v,t.top!==u.current?o.push(u.current):o.set(t)}}},[h,n,t,o]),w=i.useCallback(()=>{!h||(u.current&&o.clearSelect(),u.current=null,f.current=null)},[h,o]);return ce(C),Q(x),K(S),Z(w),_.default.createElement(Y,{title:e.operation_rectangle_title,icon:"icon-rectangle",checked:h,onClick:y,option:_.default.createElement(oe,{size:c,color:d,onSizeChange:p,onColorChange:l,__self:this,__source:{fileName:Ee,lineNumber:242,columnNumber:15}}),__self:this,__source:{fileName:Ee,lineNumber:237,columnNumber:5}})}var kt=[St,Nt,vt,_t,bt,ct,"|",rt,nt,"|",et,Ke,Je];var ne="C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\ScreenshotsOperations\\index.tsx";const Ye=_.default.createContext(null);var Rt=i.memo(function(){var u,f;const{width:t,height:o}=P(),[a]=q(),[s,r]=i.useState(null),[n,c]=i.useState(null),p=i.useRef(null),d=i.useCallback(h=>{h.stopPropagation()},[]),l=i.useCallback(h=>{h.preventDefault(),h.stopPropagation()},[]);return i.useEffect(()=>{if(!a||!p.current)return;const h=p.current.getBoundingClientRect();let b=a.x+a.width-h.width,y=a.y+a.height+10;b<0&&(b=0),b>t-h.width&&(b=t-h.width),y>o-h.height&&(y=o-h.height-10),(!n||Math.abs(n.x-b)>1||Math.abs(n.y-y)>1)&&c({x:b,y}),(!s||Math.abs(s.x-h.x)>1||Math.abs(s.y-h.y)>1||Math.abs(s.width-h.width)>1||Math.abs(s.height-h.height)>1)&&r({x:h.x,y:h.y,width:h.width,height:h.height})}),a?_.default.createElement(Ye.Provider,{value:s,__self:this,__source:{fileName:ne,lineNumber:79,columnNumber:5}},_.default.createElement("div",{ref:p,className:"screenshots-operations",style:{visibility:n?"visible":"hidden",transform:`translate(${(u=n==null?void 0:n.x)!=null?u:0}px, ${(f=n==null?void 0:n.y)!=null?f:0}px)`},onDoubleClick:d,onContextMenu:l,__self:this,__source:{fileName:ne,lineNumber:80,columnNumber:7}},_.default.createElement("div",{className:"screenshots-operations-buttons",__self:this,__source:{fileName:ne,lineNumber:90,columnNumber:9}},kt.map((h,b)=>h==="|"?_.default.createElement("div",{key:b,className:"screenshots-operations-divider",__self:this,__source:{fileName:ne,lineNumber:93,columnNumber:22}}):_.default.createElement(h,{key:b,__self:this,__source:{fileName:ne,lineNumber:95,columnNumber:22}}))))):null});function wt(e){const[t,o]=i.useState(null);return i.useEffect(()=>{if(o(null),e==null)return;const a=document.createElement("img"),s=()=>o(a),r=()=>o(null);return a.addEventListener("load",s),a.addEventListener("error",r),a.src=e,()=>{a.removeEventListener("load",s),a.removeEventListener("error",r)}},[e]),t}var se="C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\index.tsx";function zt({url:e,width:t,height:o,lang:a,className:s,...r}){const n=wt(e),c=i.useRef(null),p=i.useRef({}),[d,l]=i.useState({index:-1,stack:[]}),[u,f]=i.useState(null),[h,b]=i.useState("move"),[y,C]=i.useState(void 0),x={url:e,width:t,height:o,image:n,lang:{...Me,...a},emiterRef:p,canvasContextRef:c,history:d,bounds:u,cursor:h,operation:y},S=i.useCallback((k,...z)=>{const E=r[k];typeof E=="function"&&E(...z)},[r]),w={call:S,setHistory:l,setBounds:f,setCursor:b,setOperation:C},g=["screenshots"];s&&g.push(s);const m=()=>{p.current={},l({index:-1,stack:[]}),f(null),b("move"),C(void 0)},v=i.useCallback(async k=>{if(!(k.button!==0||!n))if(u&&c.current)fe({image:n,width:t,height:o,history:d,bounds:u}).then(z=>{S("onOk",z,u),m()});else{const z={x:0,y:0,width:t,height:o};fe({image:n,width:t,height:o,history:d,bounds:z}).then(E=>{S("onOk",E,z),m()})}},[n,d,u,t,o,S]),N=i.useCallback(k=>{k.button===2&&(k.preventDefault(),S("onCancel"),m())},[S]);return i.useLayoutEffect(()=>{m()},[e]),_.default.createElement(ye.Provider,{value:{store:x,dispatcher:w},__self:this,__source:{fileName:se,lineNumber:142,columnNumber:5}},_.default.createElement("div",{className:g.join(" "),style:{width:t,height:o},onDoubleClick:v,onContextMenu:N,__self:this,__source:{fileName:se,lineNumber:143,columnNumber:7}},_.default.createElement(Ge,{__self:this,__source:{fileName:se,lineNumber:149,columnNumber:9}}),_.default.createElement(Oe,{ref:c,__self:this,__source:{fileName:se,lineNumber:150,columnNumber:9}}),_.default.createElement(Rt,{__self:this,__source:{fileName:se,lineNumber:151,columnNumber:9}})))}module.exports=zt;
+`,Ae=["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 A;function Ie(e){const t=window.getComputedStyle(e),c=t.getPropertyValue("box-sizing")||t.getPropertyValue("-moz-box-sizing")||t.getPropertyValue("-webkit-box-sizing"),a=parseFloat(t.getPropertyValue("padding-bottom"))+parseFloat(t.getPropertyValue("padding-top")),s=parseFloat(t.getPropertyValue("border-bottom-width"))+parseFloat(t.getPropertyValue("border-top-width"));return{sizingStyle:Ae.map(r=>`${r}:${t.getPropertyValue(r)}`).join(";"),paddingSize:a,borderSize:s,boxSizing:c}}function We(e,t,c,a){A||(A=document.createElement("textarea"),A.setAttribute("tab-index","-1"),document.body.appendChild(A));const{paddingSize:s,borderSize:o,boxSizing:r,sizingStyle:i}=Ie(e);A.setAttribute("style",`${i};${He};max-width:${c}px;max-height:${a}px`),A.value=t||" ";let h=A.scrollWidth,d=A.scrollHeight;return r==="border-box"?(h+=o,d+=o):r==="content-box"&&(h-=s,d-=s),{width:Math.min(h,c),height:Math.min(d,a)}}const Fe=n.memo(function({x:t,y:c,maxWidth:a,maxHeight:s,size:o,color:r,value:i,onChange:h,onBlur:d}){const l=n.useRef(null),u=n.useRef(null),[f,m]=n.useState(0),[p,x]=n.useState(0),R=()=>(l.current||(l.current=document.createElement("div")),l.current);return n.useLayoutEffect(()=>(l.current&&(document.body.appendChild(l.current),requestAnimationFrame(()=>{var C;(C=u.current)==null||C.focus()})),()=>{var C;(C=l.current)==null||C.remove()}),[]),n.useLayoutEffect(()=>{if(!u.current)return;const{width:C,height:S}=We(u.current,i,a,s);m(C),x(S)},[i,a,s]),de.createPortal(n.createElement("textarea",{ref:u,className:"screenshots-textarea",style:{color:r,width:f,height:p,maxWidth:a,maxHeight:s,fontSize:o,lineHeight:`${o}px`,transform:`translate(${t}px, ${c}px)`},value:i,onChange:C=>h&&h(C.target.value),onBlur:C=>d&&d(C)}),R())});function te(e){const t=q();n.useEffect(()=>(t.on("drawselect",e),()=>{t.off("drawselect",e)}),[e,t])}const le={3:18,6:32,9:46};function Oe(e,t){const{size:c,color:a,fontFamily:s,x:o,y:r,text:i}=t.data;e.fillStyle=a,e.textAlign="left",e.textBaseline="top",e.font=`${c}px ${s}`;const h=t.editHistory.reduce((d,{data:l})=>({x:d.x+l.x2-l.x1,y:d.y+l.y2-l.y1}),{x:0,y:0});i.split(`
+`).forEach((d,l)=>{e.fillText(d,o+h.x,r+h.y+l*c)})}function Ve(e,t,c){e.textAlign="left",e.textBaseline="top",e.font=`${t.data.size}px ${t.data.fontFamily}`;let a=0,s=0;t.data.text.split(`
+`).forEach(u=>{const f=e.measureText(u);a<f.width&&(a=f.width),s+=t.data.size});const{x:o,y:r}=t.editHistory.reduce((u,{data:f})=>({x:u.x+f.x2-f.x1,y:u.y+f.y2-f.y1}),{x:0,y:0}),i=t.data.x+o,h=t.data.y+r,d=i+a,l=h+s;return c.x>=i&&c.x<=d&&c.y>=h&&c.y<=l}function je(){const e=H(),[t,c]=L(),[a]=j(),[s,o]=W(),[,r]=I(),i=F(),[h,d]=n.useState(3),[l,u]=n.useState("#ee5126"),f=n.useRef(null),m=n.useRef(null),[p,x]=n.useState(null),[R,C]=n.useState(""),S=s==="Text",z=n.useCallback(()=>{o.set("Text"),r.set("default")},[o,r]),y=n.useCallback(()=>{S||(z(),c.clearSelect())},[S,z,c]),g=n.useCallback($=>{f.current&&(f.current.data.size=le[$]),d($)},[]),v=n.useCallback($=>{f.current&&(f.current.data.color=$),u($)},[]),b=n.useCallback($=>{C($),S&&f.current&&(f.current.data.text=$)},[S]),k=n.useCallback(()=>{f.current&&f.current.data.text&&c.push(f.current),f.current=null,C(""),x(null)},[c]),E=n.useCallback(($,X)=>{$.name==="Text"&&(z(),m.current={type:B.Edit,data:{x1:X.clientX,y1:X.clientY,x2:X.clientX,y2:X.clientY},source:$},c.select($))},[z,c]),M=n.useCallback($=>{if(!S||!i.current||f.current||!a)return;const{left:X,top:ie}=i.current.canvas.getBoundingClientRect(),ae=window.getComputedStyle(i.current.canvas).fontFamily,Q=$.clientX-X,K=$.clientY-ie;f.current={name:"Text",type:B.Source,data:{size:le[h],color:l,fontFamily:ae,x:Q,y:K,text:""},editHistory:[],draw:Oe,isHit:Ve},x({x:$.clientX,y:$.clientY,maxWidth:a.width-Q,maxHeight:a.height-K})},[S,h,l,a,i]),w=n.useCallback($=>{S&&m.current&&(m.current.data.x2=$.clientX,m.current.data.y2=$.clientY,t.top!==m.current?(m.current.source.editHistory.push(m.current),c.push(m.current)):c.set(t))},[S,t,c]),ne=n.useCallback(()=>{S&&(m.current=null)},[S]);return te(E),J(M),U(w),G(ne),n.createElement(n.Fragment,null,n.createElement(N,{title:e.operation_text_title,icon:"icon-text",checked:S,onClick:y,option:n.createElement(ee,{size:h,color:l,onSizeChange:g,onColorChange:v})}),S&&p&&n.createElement(Fe,{x:p.x,y:p.y,maxWidth:p.maxWidth,maxHeight:p.maxHeight,size:le[h],color:l,value:R,onChange:b,onBlur:k}))}const pe=4;function D(e,t,c){e.lineWidth=1,e.strokeStyle="#000000",e.fillStyle="#ffffff",e.beginPath(),e.arc(t,c,pe,0,2*Math.PI),e.fill(),e.stroke()}function ce(e,t,c){t.draw(e,t);const{data:a}=e.getImageData(c.x,c.y,1,1);return a.some(s=>s!==0)}function _(e,t,c){if(!e)return!1;const{left:a,top:s}=e.getBoundingClientRect(),o=t.clientX-a,r=t.clientY-s;return(c.x-o)**2+(c.y-r)**2<pe**2}function qe(e,t){const{size:c,color:a,points:s}=t.data;e.lineCap="round",e.lineJoin="round",e.lineWidth=c,e.strokeStyle=a;const o=t.editHistory.reduce((r,{data:i})=>({x:r.x+i.x2-i.x1,y:r.y+i.y2-i.y1}),{x:0,y:0});e.beginPath(),s.forEach((r,i)=>{i===0?e.moveTo(r.x+o.x,r.y+o.y):e.lineTo(r.x+o.x,r.y+o.y)}),e.stroke(),t.isSelected&&(e.lineWidth=1,e.strokeStyle="#000000",e.beginPath(),s.forEach((r,i)=>{i===0?e.moveTo(r.x+o.x,r.y+o.y):e.lineTo(r.x+o.x,r.y+o.y)}),e.stroke())}function Je(){const e=H(),[,t]=I(),[c,a]=W(),s=F(),[o,r]=L(),[i,h]=n.useState(3),[d,l]=n.useState("#ee5126"),u=n.useRef(null),f=n.useRef(null),m=c==="Brush",p=n.useCallback(()=>{a.set("Brush"),t.set("default")},[a,t]),x=n.useCallback(()=>{m||(p(),r.clearSelect())},[m,p,r]),R=n.useCallback((y,g)=>{y.name==="Brush"&&(p(),f.current={type:B.Edit,data:{x1:g.clientX,y1:g.clientY,x2:g.clientX,y2:g.clientY},source:y},r.select(y))},[p,r]),C=n.useCallback(y=>{if(!m||u.current||!s.current)return;const{left:g,top:v}=s.current.canvas.getBoundingClientRect();u.current={name:"Brush",type:B.Source,data:{size:i,color:d,points:[{x:y.clientX-g,y:y.clientY-v}]},editHistory:[],draw:qe,isHit:ce}},[m,s,i,d]),S=n.useCallback(y=>{if(!(!m||!s.current)){if(f.current)f.current.data.x2=y.clientX,f.current.data.y2=y.clientY,o.top!==f.current?(f.current.source.editHistory.push(f.current),r.push(f.current)):r.set(o);else if(u.current){const{left:g,top:v}=s.current.canvas.getBoundingClientRect();u.current.data.points.push({x:y.clientX-g,y:y.clientY-v}),o.top!==u.current?r.push(u.current):r.set(o)}}},[m,o,s,r]),z=n.useCallback(()=>{m&&(u.current&&r.clearSelect(),u.current=null,f.current=null)},[m,r]);return te(R),J(C),U(S),G(z),n.createElement(N,{title:e.operation_brush_title,icon:"icon-brush",checked:m,onClick:x,option:n.createElement(ee,{size:i,color:d,onSizeChange:h,onColorChange:l})})}function ye(e){let{x1:t,y1:c,x2:a,y2:s}=e.data;return e.editHistory.forEach(({data:o})=>{const r=o.x2-o.x1,i=o.y2-o.y1;o.type===se.Move?(t+=r,c+=i,a+=r,s+=i):o.type===se.MoveStart?(t+=r,c+=i):o.type===se.MoveEnd&&(a+=r,s+=i)}),{...e.data,x1:t,x2:a,y1:c,y2:s}}function Ue(e,t){const{size:c,color:a,x1:s,x2:o,y1:r,y2:i}=ye(t);e.lineCap="round",e.lineJoin="bevel",e.lineWidth=c,e.strokeStyle=a;const h=o-s,d=i-r,l=c*3,u=Math.atan2(d,h);e.beginPath(),e.moveTo(s,r),e.lineTo(o,i),e.lineTo(o-l*Math.cos(u-Math.PI/6),i-l*Math.sin(u-Math.PI/6)),e.moveTo(o,i),e.lineTo(o-l*Math.cos(u+Math.PI/6),i-l*Math.sin(u+Math.PI/6)),e.stroke(),t.isSelected&&(D(e,s,r),D(e,o,i))}var se=(e=>(e[e.Move=0]="Move",e[e.MoveStart=1]="MoveStart",e[e.MoveEnd=2]="MoveEnd",e))(se||{});function Ge(){const e=H(),[,t]=I(),[c,a]=W(),[s,o]=L(),r=F(),[i,h]=n.useState(3),[d,l]=n.useState("#ee5126"),u=n.useRef(null),f=n.useRef(null),m=c==="Arrow",p=n.useCallback(()=>{a.set("Arrow"),t.set("default")},[a,t]),x=n.useCallback(()=>{m||(p(),o.clearSelect())},[m,p,o]),R=n.useCallback((y,g)=>{if(y.name!=="Arrow"||!r.current)return;const v=y;p();const{x1:b,y1:k,x2:E,y2:M}=ye(v);let w=0;_(r.current.canvas,g,{x:b,y:k})?w=1:_(r.current.canvas,g,{x:E,y:M})&&(w=2),f.current={type:B.Edit,data:{type:w,x1:g.clientX,y1:g.clientY,x2:g.clientX,y2:g.clientY},source:v},o.select(y)},[r,p,o]),C=n.useCallback(y=>{if(!m||u.current||!r.current)return;const{left:g,top:v}=r.current.canvas.getBoundingClientRect();u.current={name:"Arrow",type:B.Source,data:{size:i,color:d,x1:y.clientX-g,y1:y.clientY-v,x2:y.clientX-g,y2:y.clientY-v},editHistory:[],draw:Ue,isHit:ce}},[m,d,i,r]),S=n.useCallback(y=>{if(!(!m||!r.current)){if(f.current)f.current.data.x2=y.clientX,f.current.data.y2=y.clientY,s.top!==f.current?(f.current.source.editHistory.push(f.current),o.push(f.current)):o.set(s);else if(u.current){const{left:g,top:v}=r.current.canvas.getBoundingClientRect();u.current.data.x2=y.clientX-g,u.current.data.y2=y.clientY-v,s.top!==u.current?o.push(u.current):o.set(s)}}},[m,s,r,o]),z=n.useCallback(()=>{m&&(u.current&&o.clearSelect(),u.current=null,f.current=null)},[m,o]);return te(R),J(C),U(S),G(z),n.createElement(N,{title:e.operation_arrow_title,icon:"icon-arrow",checked:m,onClick:x,option:n.createElement(ee,{size:i,color:d,onSizeChange:h,onColorChange:l})})}function ve(e){let{x1:t,y1:c,x2:a,y2:s}=e.data;return e.editHistory.forEach(({data:o})=>{const r=o.x2-o.x1,i=o.y2-o.y1;o.type===Y.Move?(t+=r,c+=i,a+=r,s+=i):o.type===Y.ResizeTop?c+=i:o.type===Y.ResizeRightTop?(a+=r,c+=i):o.type===Y.ResizeRight?a+=r:o.type===Y.ResizeRightBottom?(a+=r,s+=i):o.type===Y.ResizeBottom?s+=i:o.type===Y.ResizeLeftBottom?(t+=r,s+=i):o.type===Y.ResizeLeft?t+=r:o.type===Y.ResizeLeftTop&&(t+=r,c+=i)}),{...e.data,x1:t,x2:a,y1:c,y2:s}}function Qe(e,t){const{size:c,color:a,x1:s,y1:o,x2:r,y2:i}=ve(t);e.lineCap="butt",e.lineJoin="miter",e.lineWidth=c,e.strokeStyle=a;const h=(s+r)/2,d=(o+i)/2,l=Math.abs(r-s)/2,u=Math.abs(i-o)/2,f=.5522848,m=l*f,p=u*f;e.beginPath(),e.moveTo(h-l,d),e.bezierCurveTo(h-l,d-p,h-m,d-u,h,d-u),e.bezierCurveTo(h+m,d-u,h+l,d-p,h+l,d),e.bezierCurveTo(h+l,d+p,h+m,d+u,h,d+u),e.bezierCurveTo(h-m,d+u,h-l,d+p,h-l,d),e.closePath(),e.stroke(),t.isSelected&&(e.lineWidth=1,e.strokeStyle="#000000",e.fillStyle="#ffffff",e.beginPath(),e.moveTo(s,o),e.lineTo(r,o),e.lineTo(r,i),e.lineTo(s,i),e.closePath(),e.stroke(),D(e,(s+r)/2,o),D(e,r,o),D(e,r,(o+i)/2),D(e,r,i),D(e,(s+r)/2,i),D(e,s,i),D(e,s,(o+i)/2),D(e,s,o))}var Y=(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",e))(Y||{});function Ke(){const e=H(),[t,c]=L(),[a,s]=W(),[,o]=I(),r=F(),[i,h]=n.useState(3),[d,l]=n.useState("#ee5126"),u=n.useRef(null),f=n.useRef(null),m=a==="Ellipse",p=n.useCallback(()=>{s.set("Ellipse"),o.set("crosshair")},[s,o]),x=n.useCallback(()=>{m||(p(),c.clearSelect())},[m,p,c]),R=n.useCallback((y,g)=>{if(y.name!=="Ellipse"||!r.current)return;const v=y;p();const{x1:b,y1:k,x2:E,y2:M}=ve(v);let w=0;_(r.current.canvas,g,{x:(b+E)/2,y:k})?w=1:_(r.current.canvas,g,{x:E,y:k})?w=2:_(r.current.canvas,g,{x:E,y:(k+M)/2})?w=3:_(r.current.canvas,g,{x:E,y:M})?w=4:_(r.current.canvas,g,{x:(b+E)/2,y:M})?w=5:_(r.current.canvas,g,{x:b,y:M})?w=6:_(r.current.canvas,g,{x:b,y:(k+M)/2})?w=7:_(r.current.canvas,g,{x:b,y:k})&&(w=8),f.current={type:B.Edit,data:{type:w,x1:g.clientX,y1:g.clientY,x2:g.clientX,y2:g.clientY},source:v},c.select(y)},[r,p,c]),C=n.useCallback(y=>{if(!m||!r.current||u.current)return;const{left:g,top:v}=r.current.canvas.getBoundingClientRect(),b=y.clientX-g,k=y.clientY-v;u.current={name:"Ellipse",type:B.Source,data:{size:i,color:d,x1:b,y1:k,x2:b,y2:k},editHistory:[],draw:Qe,isHit:ce}},[m,i,d,r]),S=n.useCallback(y=>{if(!(!m||!r.current)){if(f.current)f.current.data.x2=y.clientX,f.current.data.y2=y.clientY,t.top!==f.current?(f.current.source.editHistory.push(f.current),c.push(f.current)):c.set(t);else if(u.current){const{left:g,top:v}=r.current.canvas.getBoundingClientRect();u.current.data.x2=y.clientX-g,u.current.data.y2=y.clientY-v,t.top!==u.current?c.push(u.current):c.set(t)}}},[m,r,t,c]),z=n.useCallback(()=>{m&&(u.current&&c.clearSelect(),u.current=null,f.current=null)},[m,c]);return te(R),J(C),U(S),G(z),n.createElement(N,{title:e.operation_ellipse_title,icon:"icon-ellipse",checked:m,onClick:x,option:n.createElement(ee,{size:i,color:d,onSizeChange:h,onColorChange:l})})}function xe(e){let{x1:t,y1:c,x2:a,y2:s}=e.data;return e.editHistory.forEach(({data:o})=>{const r=o.x2-o.x1,i=o.y2-o.y1;o.type===T.Move?(t+=r,c+=i,a+=r,s+=i):o.type===T.ResizeTop?c+=i:o.type===T.ResizeRightTop?(a+=r,c+=i):o.type===T.ResizeRight?a+=r:o.type===T.ResizeRightBottom?(a+=r,s+=i):o.type===T.ResizeBottom?s+=i:o.type===T.ResizeLeftBottom?(t+=r,s+=i):o.type===T.ResizeLeft?t+=r:o.type===T.ResizeLeftTop&&(t+=r,c+=i)}),{...e.data,x1:t,x2:a,y1:c,y2:s}}function Ze(e,t){const{size:c,color:a,x1:s,y1:o,x2:r,y2:i}=xe(t);e.lineCap="butt",e.lineJoin="miter",e.lineWidth=c,e.strokeStyle=a,e.beginPath(),e.moveTo(s,o),e.lineTo(r,o),e.lineTo(r,i),e.lineTo(s,i),e.closePath(),e.stroke(),t.isSelected&&(e.lineWidth=1,e.strokeStyle="#000000",e.fillStyle="#ffffff",D(e,(s+r)/2,o),D(e,r,o),D(e,r,(o+i)/2),D(e,r,i),D(e,(s+r)/2,i),D(e,s,i),D(e,s,(o+i)/2),D(e,s,o))}var T=(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",e))(T||{});function et(){const e=H(),[t,c]=L(),[a,s]=W(),[,o]=I(),r=F(),[i,h]=n.useState(3),[d,l]=n.useState("#ee5126"),u=n.useRef(null),f=n.useRef(null),m=a==="Rectangle",p=n.useCallback(()=>{s.set("Rectangle"),o.set("crosshair")},[s,o]),x=n.useCallback(()=>{m||(p(),c.clearSelect())},[m,p,c]),R=n.useCallback((y,g)=>{if(y.name!=="Rectangle"||!r.current)return;const v=y;p();const{x1:b,y1:k,x2:E,y2:M}=xe(v);let w=0;_(r.current.canvas,g,{x:(b+E)/2,y:k})?w=1:_(r.current.canvas,g,{x:E,y:k})?w=2:_(r.current.canvas,g,{x:E,y:(k+M)/2})?w=3:_(r.current.canvas,g,{x:E,y:M})?w=4:_(r.current.canvas,g,{x:(b+E)/2,y:M})?w=5:_(r.current.canvas,g,{x:b,y:M})?w=6:_(r.current.canvas,g,{x:b,y:(k+M)/2})?w=7:_(r.current.canvas,g,{x:b,y:k})&&(w=8),f.current={type:B.Edit,data:{type:w,x1:g.clientX,y1:g.clientY,x2:g.clientX,y2:g.clientY},source:y},c.select(y)},[r,p,c]),C=n.useCallback(y=>{if(!m||!r.current||u.current)return;const{left:g,top:v}=r.current.canvas.getBoundingClientRect(),b=y.clientX-g,k=y.clientY-v;u.current={name:"Rectangle",type:B.Source,data:{size:i,color:d,x1:b,y1:k,x2:b,y2:k},editHistory:[],draw:Ze,isHit:ce}},[m,i,d,r]),S=n.useCallback(y=>{if(!(!m||!r.current)){if(f.current)f.current.data.x2=y.clientX,f.current.data.y2=y.clientY,t.top!==f.current?(f.current.source.editHistory.push(f.current),c.push(f.current)):c.set(t);else if(u.current){const{left:g,top:v}=r.current.canvas.getBoundingClientRect(),b=u.current.data;b.x2=y.clientX-g,b.y2=y.clientY-v,t.top!==u.current?c.push(u.current):c.set(t)}}},[m,r,t,c]),z=n.useCallback(()=>{m&&(u.current&&c.clearSelect(),u.current=null,f.current=null)},[m,c]);return te(R),J(C),U(S),G(z),n.createElement(N,{title:e.operation_rectangle_title,icon:"icon-rectangle",checked:m,onClick:x,option:n.createElement(ee,{size:i,color:d,onSizeChange:h,onColorChange:l})})}const tt=[et,Ke,Ge,Je,je,Ye,"|",Le,Xe,"|",Pe,_e,De];const Ce=n.createContext(null),nt=n.memo(function(){const{width:t,height:c}=P(),[a]=j(),[s,o]=n.useState(null),[r,i]=n.useState(null),h=n.useRef(null),d=n.useCallback(u=>{u.stopPropagation()},[]),l=n.useCallback(u=>{u.preventDefault(),u.stopPropagation()},[]);return n.useEffect(()=>{if(!a||!h.current)return;const u=h.current.getBoundingClientRect();let f=a.x+a.width-u.width,m=a.y+a.height+10;f<0&&(f=0),f>t-u.width&&(f=t-u.width),m>c-u.height&&(m=c-u.height-10),(!r||Math.abs(r.x-f)>1||Math.abs(r.y-m)>1)&&i({x:f,y:m}),(!s||Math.abs(s.x-u.x)>1||Math.abs(s.y-u.y)>1||Math.abs(s.width-u.width)>1||Math.abs(s.height-u.height)>1)&&o({x:u.x,y:u.y,width:u.width,height:u.height})}),a?n.createElement(Ce.Provider,{value:s},n.createElement("div",{ref:h,className:"screenshots-operations",style:{visibility:r?"visible":"hidden",transform:`translate(${(r==null?void 0:r.x)??0}px, ${(r==null?void 0:r.y)??0}px)`},onDoubleClick:d,onContextMenu:l},n.createElement("div",{className:"screenshots-operations-buttons"},tt.map((u,f)=>u==="|"?n.createElement("div",{key:f,className:"screenshots-operations-divider"}):n.createElement(u,{key:f}))))):null});function rt(e){const[t,c]=n.useState(null);return n.useEffect(()=>{if(c(null),e==null)return;const a=document.createElement("img"),s=()=>c(a),o=()=>c(null);return a.addEventListener("load",s),a.addEventListener("error",o),a.src=e,()=>{a.removeEventListener("load",s),a.removeEventListener("error",o)}},[e]),t}function st({url:e,width:t,height:c,lang:a,className:s,...o}){const r=rt(e),i=n.useRef(null),h=n.useRef({}),[d,l]=n.useState({index:-1,stack:[]}),[u,f]=n.useState(null),[m,p]=n.useState("move"),[x,R]=n.useState(void 0),C={url:e,width:t,height:c,image:r,lang:{...me,...a},emiterRef:h,canvasContextRef:i,history:d,bounds:u,cursor:m,operation:x},S=n.useCallback((k,...E)=>{const M=o[k];typeof M=="function"&&M(...E)},[o]),z={call:S,setHistory:l,setBounds:f,setCursor:p,setOperation:R},y=["screenshots"];s&&y.push(s);const g=()=>{h.current={},l({index:-1,stack:[]}),f(null),p("move"),R(void 0)},v=n.useCallback(async k=>{if(!(k.button!==0||!r))if(u&&i.current)oe({image:r,width:t,height:c,history:d,bounds:u}).then(E=>{S("onOk",E,u),g()});else{const E={x:0,y:0,width:t,height:c};oe({image:r,width:t,height:c,history:d,bounds:E}).then(M=>{S("onOk",M,E),g()})}},[r,d,u,t,c,S]),b=n.useCallback(k=>{k.button===2&&(k.preventDefault(),S("onCancel"),g())},[S]);return n.useLayoutEffect(()=>{g()},[e]),n.createElement(ue.Provider,{value:{store:C,dispatcher:z}},n.createElement("div",{className:y.join(" "),style:{width:t,height:c},onDoubleClick:v,onContextMenu:b},n.createElement(ke,null),n.createElement(Be,{ref:i}),n.createElement(nt,null)))}module.exports=st;