react-screenshots 0.5.21 → 0.6.0

package/lib/react-screenshots.cjs.js

@@ -1,14 +0,0 @@
-"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;
-height:0 !important;
-visibility: hidden !important;
-overflow: hidden !important;
-position: absolute !important;
-z-index: -1000 !important;
-top:0 !important;
-right:0 !important;
-`,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;