react-screenshots 0.0.17 → 0.2.0-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +97 -88
- package/electron/assets/index.6377aa3e.css +1 -0
- package/electron/assets/index.fbe41cdd.js +14 -0
- package/electron/assets/vendor.ea3156d9.js +209 -0
- package/electron/electron.html +15 -0
- package/lib/react-screenshots.cjs.js +14 -0
- package/lib/react-screenshots.es.js +3058 -0
- package/lib/style.css +1 -0
- package/lib/types/Screenshots/index.d.ts +13 -0
- package/lib/types/ScreenshotsBackground/getBoundsByPoints.d.ts +2 -0
- package/lib/types/ScreenshotsBackground/index.d.ts +3 -0
- package/lib/types/ScreenshotsButton/index.d.ts +11 -0
- package/lib/types/ScreenshotsCanvas/getBoundsByPoints.d.ts +2 -0
- package/lib/types/ScreenshotsCanvas/getPoints.d.ts +2 -0
- package/lib/types/ScreenshotsCanvas/index.d.ts +15 -0
- package/lib/types/ScreenshotsCanvas/isPointInDraw.d.ts +2 -0
- package/lib/types/ScreenshotsColor/index.d.ts +7 -0
- package/lib/types/ScreenshotsContext.d.ts +29 -0
- package/lib/types/ScreenshotsMagnifier/index.d.ts +7 -0
- package/lib/types/ScreenshotsOperations/index.d.ts +5 -0
- package/lib/types/ScreenshotsOption/index.d.ts +14 -0
- package/lib/types/ScreenshotsSize/index.d.ts +7 -0
- package/lib/types/ScreenshotsSizeColor/index.d.ts +9 -0
- package/lib/types/ScreenshotsTextarea/calculateNodeSize.d.ts +17 -0
- package/lib/types/ScreenshotsTextarea/index.d.ts +14 -0
- package/lib/types/dpr.d.ts +2 -0
- package/lib/types/exports.d.ts +3 -0
- package/lib/types/hooks/useBounds.d.ts +7 -0
- package/lib/types/hooks/useCall.d.ts +2 -0
- package/lib/types/hooks/useCanvasContextRef.d.ts +2 -0
- package/lib/types/hooks/useCanvasMousedown.d.ts +1 -0
- package/lib/types/hooks/useCanvasMousemove.d.ts +1 -0
- package/lib/types/hooks/useCanvasMouseup.d.ts +1 -0
- package/lib/types/hooks/useCursor.d.ts +6 -0
- package/lib/types/hooks/useDispatcher.d.ts +2 -0
- package/lib/types/hooks/useDrawSelect.d.ts +2 -0
- package/lib/types/hooks/useEmiter.d.ts +8 -0
- package/lib/types/hooks/useHistory.d.ts +16 -0
- package/lib/types/hooks/useLang.d.ts +2 -0
- package/lib/types/hooks/useOperation.d.ts +6 -0
- package/lib/types/hooks/useReset.d.ts +2 -0
- package/lib/types/hooks/useStore.d.ts +2 -0
- package/lib/types/index.d.ts +13 -0
- package/lib/types/operations/Arrow/draw.d.ts +11 -0
- package/lib/types/operations/Arrow/index.d.ts +22 -0
- package/lib/types/operations/Brush/draw.d.ts +3 -0
- package/lib/types/operations/Brush/index.d.ts +14 -0
- package/lib/types/operations/Cancel/index.d.ts +2 -0
- package/lib/types/operations/Ellipse/draw.d.ts +11 -0
- package/lib/types/operations/Ellipse/index.d.ts +28 -0
- package/lib/types/operations/Mosaic/index.d.ts +11 -0
- package/lib/types/operations/Ok/index.d.ts +2 -0
- package/lib/types/operations/Rectangle/draw.d.ts +11 -0
- package/lib/types/operations/Rectangle/index.d.ts +28 -0
- package/lib/types/operations/Redo/index.d.ts +2 -0
- package/lib/types/operations/Save/index.d.ts +2 -0
- package/lib/types/operations/Text/index.d.ts +22 -0
- package/lib/types/operations/Undo/index.d.ts +2 -0
- package/lib/types/operations/index.d.ts +3 -0
- package/lib/types/operations/utils.d.ts +4 -0
- package/lib/types/types.d.ts +39 -0
- package/lib/types/useGetLoadedImage.d.ts +1 -0
- package/lib/types/zh_CN.d.ts +16 -0
- package/package.json +40 -59
- package/dist/css/app.1c781f1bca03bf3517f6.css +0 -3
- package/dist/css/app.e66743f7e9bb7f4c3202.css +0 -3
- package/dist/index.html +0 -1
- package/dist/js/app.01b47f81a1286d89a7d9.js +0 -2
- package/dist/js/app.01b47f81a1286d89a7d9.js.LICENSE.txt +0 -32
- package/dist/js/app.047c8c22ccf49ba2b1d7.js +0 -2
- package/dist/js/app.047c8c22ccf49ba2b1d7.js.LICENSE.txt +0 -32
- package/dist/js/app.0910cea9128463e9f0d2.js +0 -2
- package/dist/js/app.0910cea9128463e9f0d2.js.LICENSE.txt +0 -32
- package/dist/js/app.1c0d0d80e583c32ef2db.js +0 -2
- package/dist/js/app.1c0d0d80e583c32ef2db.js.LICENSE.txt +0 -32
- package/dist/js/app.23a83e5bf2ca4a292ad6.js +0 -2
- package/dist/js/app.23a83e5bf2ca4a292ad6.js.LICENSE.txt +0 -32
- package/dist/js/app.267d13079b8af7e1dd76.js +0 -2
- package/dist/js/app.267d13079b8af7e1dd76.js.LICENSE.txt +0 -32
- package/dist/js/app.2735150c87ae453ee439.js +0 -2
- package/dist/js/app.2735150c87ae453ee439.js.LICENSE.txt +0 -32
- package/dist/js/app.2e6ada7ebe29d78de07b.js +0 -2
- package/dist/js/app.2e6ada7ebe29d78de07b.js.LICENSE.txt +0 -32
- package/dist/js/app.34635b43ca0307bf4615.js +0 -2
- package/dist/js/app.34635b43ca0307bf4615.js.LICENSE.txt +0 -32
- package/dist/js/app.3a5f376b2dae7284878b.js +0 -2
- package/dist/js/app.3a5f376b2dae7284878b.js.LICENSE.txt +0 -32
- package/dist/js/app.6856f1c4d4c6846705ff.js +0 -2
- package/dist/js/app.6856f1c4d4c6846705ff.js.LICENSE.txt +0 -32
- package/dist/js/app.758c8b2f2a8ccf6b1c3c.js +0 -2
- package/dist/js/app.758c8b2f2a8ccf6b1c3c.js.LICENSE.txt +0 -32
- package/dist/js/app.7cbd97e8ce1d08f1bd80.js +0 -2
- package/dist/js/app.7cbd97e8ce1d08f1bd80.js.LICENSE.txt +0 -32
- package/dist/js/app.7e24d295c7128703cf2b.js +0 -2
- package/dist/js/app.7e24d295c7128703cf2b.js.LICENSE.txt +0 -32
- package/dist/js/app.912ce3a16854e72bccb3.js +0 -2
- package/dist/js/app.912ce3a16854e72bccb3.js.LICENSE.txt +0 -32
- package/dist/js/app.9e2b61e62399f65fd600.js +0 -2
- package/dist/js/app.9e2b61e62399f65fd600.js.LICENSE.txt +0 -32
- package/dist/js/app.a2217b046f549c529f48.js +0 -2
- package/dist/js/app.a2217b046f549c529f48.js.LICENSE.txt +0 -32
- package/dist/js/app.a8d205b093abb2929de9.js +0 -2
- package/dist/js/app.a8d205b093abb2929de9.js.LICENSE.txt +0 -32
- package/dist/js/app.a9a7577692d56038a7dc.js +0 -2
- package/dist/js/app.a9a7577692d56038a7dc.js.LICENSE.txt +0 -32
- package/dist/js/app.aed9a05fb8f84df41483.js +0 -2
- package/dist/js/app.aed9a05fb8f84df41483.js.LICENSE.txt +0 -32
- package/dist/js/app.b7af6e629134f9201f64.js +0 -2
- package/dist/js/app.b7af6e629134f9201f64.js.LICENSE.txt +0 -32
- package/dist/js/app.c03bf2bbdb513f9c8452.js +0 -2
- package/dist/js/app.c03bf2bbdb513f9c8452.js.LICENSE.txt +0 -32
- package/dist/js/app.c37b7d9d42ab1e25882c.js +0 -2
- package/dist/js/app.c37b7d9d42ab1e25882c.js.LICENSE.txt +0 -32
- package/dist/js/app.ccfceab7eaf11230369d.js +0 -2
- package/dist/js/app.ccfceab7eaf11230369d.js.LICENSE.txt +0 -32
- package/dist/screenshots.css +0 -1
- package/dist/screenshots.js +0 -2
- package/dist/screenshots.js.LICENSE.txt +0 -23
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
6
|
+
<title>react-screenshots</title>
|
|
7
|
+
<script type="module" crossorigin src="./assets/index.fbe41cdd.js"></script>
|
|
8
|
+
<link rel="modulepreload" href="./assets/vendor.ea3156d9.js">
|
|
9
|
+
<link rel="stylesheet" href="./assets/index.6377aa3e.css">
|
|
10
|
+
</head>
|
|
11
|
+
<body>
|
|
12
|
+
<div id="app"></div>
|
|
13
|
+
|
|
14
|
+
</body>
|
|
15
|
+
</html>
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
"use strict";var qe=Object.defineProperty,Je=Object.defineProperties;var Qe=Object.getOwnPropertyDescriptors;var he=Object.getOwnPropertySymbols;var Ee=Object.prototype.hasOwnProperty,Be=Object.prototype.propertyIsEnumerable;var De=(e,t,s)=>t in e?qe(e,t,{enumerable:!0,configurable:!0,writable:!0,value:s}):e[t]=s,U=(e,t)=>{for(var s in t||(t={}))Ee.call(t,s)&&De(e,s,t[s]);if(he)for(var s of he(t))Be.call(t,s)&&De(e,s,t[s]);return e},me=(e,t)=>Je(e,Qe(t));var Me=(e,t)=>{var s={};for(var o in e)Ee.call(e,o)&&t.indexOf(o)<0&&(s[o]=e[o]);if(e!=null&&he)for(var o of he(e))t.indexOf(o)<0&&Be.call(e,o)&&(s[o]=e[o]);return s};var i=require("react"),$e=require("react-dom");function Ke(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var _=Ke(i);const Le={magnifier_position_label:"\u5750\u6807",operation_ok_title:"\u786E\u5B9A",operation_cancel_title:"\u53D6\u6D88",operation_save_title:"\u4FDD\u5B58",operation_redo_title:"\u91CD\u505A",operation_undo_title:"\u64A4\u9500",operation_mosaic_title:"\u9A6C\u8D5B\u514B",operation_text_title:"\u6587\u672C",operation_brush_title:"\u753B\u7B14",operation_arrow_title:"\u7BAD\u5934",operation_ellipse_title:"\u692D\u5706",operation_rectangle_title:"\u77E9\u5F62"};var ye=_.default.createContext({store:{url:void 0,image:null,width:0,height:0,lang:Le,emiterRef:{current:{}},canvasContextRef:{current:null},history:{index:-1,stack:[]},bounds:null,cursor:"move",operation:void 0},dispatcher:{call:void 0,setHistory:void 0,setBounds:void 0,setCursor:void 0,setOperation:void 0}});function H(){const{store:e}=i.useContext(ye);return e}function X(){const{lang:e}=H();return e}var J="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsMagnifier/index.tsx";const Q=100,K=80;function Ze({x:e,y:t}){const{width:s,height:o,image:c}=H(),r=X(),[n,u]=i.useState(null),p=i.useRef(null),l=i.useRef(null),h=i.useRef(null),[a,f]=i.useState("000000");return i.useLayoutEffect(()=>{if(!p.current)return;const m=p.current.getBoundingClientRect();let g=e+20,x=t+20;g+m.width>s&&(g=e-m.width-20),x+m.height>o&&(x=t-m.height-20),g<0&&(g=0),x<0&&(x=0),u({x:g,y:x})},[s,o,e,t]),i.useEffect(()=>{if(!c||!l.current){h.current=null;return}if(h.current||(h.current=l.current.getContext("2d")),!h.current)return;const m=h.current;m.clearRect(0,0,Q,K);const g=c.naturalWidth/s,x=c.naturalHeight/o;m.drawImage(c,e*g-Q/2,t*x-K/2,Q,K,0,0,Q,K);const{data:v}=m.getImageData(Math.floor(Q/2),Math.floor(K/2),1,1),S=Array.from(v.slice(0,3)).map(C=>C>=16?C.toString(16):`0${C.toString(16)}`).join("").toUpperCase();f(S)},[s,o,c,e,t]),_.default.createElement("div",{ref:p,className:"screenshots-magnifier",style:{transform:`translate(${n==null?void 0:n.x}px, ${n==null?void 0:n.y}px)`},__self:this,__source:{fileName:J,lineNumber:89,columnNumber:5}},_.default.createElement("div",{className:"screenshots-magnifier-body",__self:this,__source:{fileName:J,lineNumber:96,columnNumber:7}},_.default.createElement("canvas",{ref:l,className:"screenshots-magnifier-body-canvas",width:Q,height:K,__self:this,__source:{fileName:J,lineNumber:97,columnNumber:9}})),_.default.createElement("div",{className:"screenshots-magnifier-footer",__self:this,__source:{fileName:J,lineNumber:104,columnNumber:7}},_.default.createElement("div",{className:"screenshots-magnifier-footer-item",__self:this,__source:{fileName:J,lineNumber:105,columnNumber:9}},r.magnifier_position_label,": (",e,",",t,")"),_.default.createElement("div",{className:"screenshots-magnifier-footer-item",__self:this,__source:{fileName:J,lineNumber:108,columnNumber:9}},"RGB: #",a)))}function et({x:e,y:t},{x:s,y:o},c,r){return e>s&&([e,s]=[s,e]),t>o&&([t,o]=[o,t]),e<0&&(e=0),s>c&&(s=c),t<0&&(t=0),o>r&&(o=r),{x:e,y:t,width:s-e,height:o-t}}function oe(){const{dispatcher:e}=i.useContext(ye);return e}function G(){const{bounds:e}=H(),{setBounds:t}=oe(),s=i.useCallback(c=>{t==null||t(c)},[t]),o=i.useCallback(()=>{t==null||t(null)},[t]);return[e,{set:s,reset:o}]}var xe="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsBackground/index.tsx";function tt(){const{url:e,width:t,height:s}=H(),[o,c]=G(),r=i.useRef(null),n=i.useRef(null),[u,p]=i.useState(null),l=i.useCallback((a,f)=>{if(!r.current)return;const{x:m,y:g}=r.current.getBoundingClientRect();c.set(et({x:a.x-m,y:a.y-g},{x:f.x-m,y:f.y-g},t,s))},[t,s,c]),h=i.useCallback(a=>{n.current||o||a.button!==0||(n.current={x:a.clientX,y:a.clientY})},[o]);return i.useEffect(()=>{const a=m=>{if(r.current){const g=r.current.getBoundingClientRect();m.clientX<g.left||m.clientY<g.top||m.clientX>g.right||m.clientY>g.bottom?p(null):p({x:m.clientX-g.x,y:m.clientY-g.y})}!n.current||l(n.current,{x:m.clientX,y:m.clientY})},f=m=>{!n.current||(l(n.current,{x:m.clientX,y:m.clientY}),n.current=null)};return window.addEventListener("mousemove",a),window.addEventListener("mouseup",f),()=>{window.removeEventListener("mousemove",a),window.removeEventListener("mouseup",f)}},[l]),e?_.default.createElement("div",{ref:r,className:"screenshots-background",style:{backgroundImage:`url("${e}")`},onMouseDown:h,__self:this,__source:{fileName:xe,lineNumber:104,columnNumber:5}},_.default.createElement("div",{className:"screenshots-background-mask",__self:this,__source:{fileName:xe,lineNumber:112,columnNumber:7}}),u&&!o&&_.default.createElement(Ze,{x:u==null?void 0:u.x,y:u==null?void 0:u.y,__self:this,__source:{fileName:xe,lineNumber:113,columnNumber:31}})):null}var Ve;const He=(Ve=window.devicePixelRatio)!=null?Ve:2;var de=He<2?2:He;function nt(e,t,s,o){const c=e.clientX-s.x,r=e.clientY-s.y;let n=o.x,u=o.y,p=o.x+o.width,l=o.y+o.height;switch(t){case"top":u+=r;break;case"top-right":p+=c,u+=r;break;case"right":p+=c;break;case"right-bottom":p+=c,l+=r;break;case"bottom":l+=r;break;case"bottom-left":n+=c,l+=r;break;case"left":n+=c;break;case"left-top":n+=c,u+=r;break;case"move":n+=c,u+=r,p+=c,l+=r;break}return[{x:n,y:u},{x:p,y:l}]}function st({x:e,y:t},{x:s,y:o},c,r,n,u){return e>s&&([e,s]=[s,e]),t>o&&([t,o]=[o,t]),e<0&&(e=0,u==="move"&&(s=c.width)),s>r&&(s=r,u==="move"&&(e=s-c.width)),t<0&&(t=0,u==="move"&&(o=c.height)),o>n&&(o=n,u==="move"&&(t=o-c.height)),{x:e,y:t,width:Math.max(s-e,1),height:Math.max(o-t,1)}}var B;(function(e){e[e.Edit=0]="Edit",e[e.Source=1]="Source"})(B||(B={}));function Z(){const{emiterRef:e}=H(),t=i.useCallback((r,n)=>{const u=e.current;Array.isArray(u[r])?u[r].push(n):u[r]=[n]},[e]),s=i.useCallback((r,n)=>{const u=e.current;if(Array.isArray(u[r])){const p=u[r].findIndex(l=>l===n);p!==-1&&u[r].splice(p,1)}},[e]),o=i.useCallback((r,...n)=>{const u=e.current;Array.isArray(u[r])&&u[r].forEach(p=>p(...n))},[e]),c=i.useCallback(()=>{e.current={}},[e]);return{on:t,off:s,emit:o,reset:c}}function Y(){const{history:e}=H(),{setHistory:t}=oe(),s=i.useCallback(h=>{const{index:a,stack:f}=e;f.forEach(m=>{m.type===B.Source&&(m.isSelected=!1)}),h.type===B.Source?h.isSelected=!0:h.type===B.Edit&&(h.source.isSelected=!0),f.splice(a+1),f.push(h),t==null||t({index:f.length-1,stack:f})},[e,t]),o=i.useCallback(()=>{const{stack:h}=e;h.pop(),t==null||t({index:h.length-1,stack:h})},[e,t]),c=i.useCallback(()=>{const{index:h,stack:a}=e,f=a[h];f&&(f.type===B.Source?f.isSelected=!1:f.type===B.Edit&&f.source.editHistory.pop()),t==null||t({index:h<=0?-1:h-1,stack:a})},[e,t]),r=i.useCallback(()=>{const{index:h,stack:a}=e,f=a[h+1];f&&(f.type===B.Source?f.isSelected=!1:f.type===B.Edit&&f.source.editHistory.push(f)),t==null||t({index:h>=a.length-1?a.length-1:h+1,stack:a})},[e,t]),n=i.useCallback(h=>{t==null||t(U({},h))},[t]),u=i.useCallback(h=>{e.stack.forEach(a=>{a.type===B.Source&&(a===h?a.isSelected=!0:a.isSelected=!1)}),t==null||t(U({},e))},[e,t]),p=i.useCallback(()=>{e.stack.forEach(h=>{h.type===B.Source&&(h.isSelected=!1)}),t==null||t(U({},e))},[e,t]),l=i.useCallback(()=>{t==null||t({index:-1,stack:[]})},[t]);return[{index:e.index,stack:e.stack,top:e.stack.slice(e.index,e.index+1)[0]},{push:s,pop:o,undo:c,redo:r,set:n,select:u,clearSelect:p,reset:l}]}function A(){const{cursor:e}=H(),{setCursor:t}=oe(),s=i.useCallback(c=>{t==null||t(c)},[t]),o=i.useCallback(()=>{t==null||t("move")},[t]);return[e,{set:s,reset:o}]}function I(){const{operation:e}=H(),{setOperation:t}=oe(),s=i.useCallback(c=>{t==null||t(c)},[t]),o=i.useCallback(()=>{t==null||t(void 0)},[t]);return[e,{set:s,reset:o}]}function rt(e,t,s,o){if(!t)return!1;const c=document.createElement("canvas");c.width=e.width,c.height=e.height;const r=c.getContext("2d");if(!r)return!1;const{left:n,top:u}=t.getBoundingClientRect(),p=o.clientX-n,l=o.clientY-u;return[...s.stack.slice(0,s.index+1)].reverse().find(a=>{var f;return a.type!==B.Source?!1:(r.clearRect(0,0,e.width,e.height),(f=a.isHit)==null?void 0:f.call(a,r,a,{x:p,y:l}))})}var ce="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsCanvas/index.tsx";const ot=["top","right","bottom","left"];var j;(function(e){e.ResizeTop="top",e.ResizetopRight="top-right",e.ResizeRight="right",e.ResizeRightBottom="right-bottom",e.ResizeBottom="bottom",e.ResizeBottomLeft="bottom-left",e.ResizeLeft="left",e.ResizeLeftTop="left-top",e.Move="move"})(j||(j={}));const ct=[j.ResizeTop,j.ResizetopRight,j.ResizeRight,j.ResizeRightBottom,j.ResizeBottom,j.ResizeBottomLeft,j.ResizeLeft,j.ResizeLeftTop];var it=i.forwardRef(function(t,s){const{image:o,width:c,height:r}=H(),n=Z(),[u]=Y(),[p]=A(),[l,h]=G(),[a]=I(),f=i.useRef(),m=i.useRef(null),g=i.useRef(null),x=i.useRef(null),v=i.useRef(null),S=i.useCallback(()=>{if(!o||!l||!v.current)return;const d=o.naturalWidth/c,b=o.naturalHeight/r,y=v.current;y.imageSmoothingEnabled=!0,y.imageSmoothingQuality="high",y.setTransform(de,0,0,de,0,0),y.clearRect(0,0,l.width,l.height),y.drawImage(o,l.x*d,l.y*b,l.width*d,l.height*b,0,0,l.width,l.height),u.stack.slice(0,u.index+1).forEach(N=>{N.type===B.Source&&N.draw(y,N)})},[o,c,r,l,v,u]),C=i.useCallback((d,b)=>{if(!(d.button!==0||!l))if(!a)f.current=b,m.current={x:d.clientX,y:d.clientY},g.current={x:l.x,y:l.y,width:l.width,height:l.height};else{const y=rt(l,x.current,u,d.nativeEvent);y?n.emit("drawselect",y,d.nativeEvent):n.emit("mousedown",d.nativeEvent)}},[l,a,n,u]),z=i.useCallback(d=>{if(!f.current||!m.current||!g.current||!l)return;const b=nt(d,f.current,m.current,g.current);h.set(st(b[0],b[1],l,c,r,f.current))},[c,r,l,h]);return i.useLayoutEffect(()=>{if(!o||!l||!x.current){v.current=null;return}v.current||(v.current=x.current.getContext("2d")),S()},[o,l,S]),i.useEffect(()=>{const d=y=>{if(a)n.emit("mousemove",y);else{if(!f.current||!m.current||!g.current)return;z(y)}},b=y=>{if(a)n.emit("mouseup",y);else{if(!f.current||!m.current||!g.current)return;z(y),f.current=void 0,m.current=null,g.current=null}};return window.addEventListener("mousemove",d),window.addEventListener("mouseup",b),()=>{window.removeEventListener("mousemove",d),window.removeEventListener("mouseup",b)}},[z,a,n]),i.useImperativeHandle(s,()=>v.current),l?_.default.createElement("div",{className:"screenshots-canvas",style:{left:l.x,top:l.y,width:l.width,height:l.height},__self:this,__source:{fileName:ce,lineNumber:190,columnNumber:5}},_.default.createElement("canvas",{ref:x,width:l.width*de,height:l.height*de,style:{width:l.width,height:l.height},__self:this,__source:{fileName:ce,lineNumber:199,columnNumber:7}}),_.default.createElement("div",{className:"screenshots-canvas-body",style:{cursor:p},onMouseDown:d=>C(d,"move"),__self:this,__source:{fileName:ce,lineNumber:208,columnNumber:7}}),ot.map(d=>_.default.createElement("div",{key:d,className:`screenshots-canvas-border-${d}`,__self:this,__source:{fileName:ce,lineNumber:216,columnNumber:16}})),ct.map(d=>_.default.createElement("div",{key:d,className:`screenshots-canvas-point-${d}`,onMouseDown:b=>C(b,d),__self:this,__source:{fileName:ce,lineNumber:220,columnNumber:11}}))):null});function ve(){const e=oe();return i.useCallback((s,...o)=>{var c;(c=e.call)==null||c.call(e,s,...o)},[e])}function W(){const{canvasContextRef:e}=H();return e}function Ne(){const e=Z(),[,t]=G(),[,s]=A(),[,o]=Y(),[,c]=I();return i.useCallback(()=>{e.reset(),o.reset(),t.reset(),s.reset(),c.reset()},[e,o,t,s,c])}var Ce="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsOption/index.tsx",q;(function(e){e.Bottom="bottom",e.Top="top"})(q||(q={}));function ut({open:e,content:t,children:s}){const o=i.useRef(null),c=i.useRef(null),r=i.useRef(null),n=i.useContext(Oe),[u,p]=i.useState(q.Bottom),[l,h]=i.useState(null),[a,f]=i.useState(0),m=()=>(c.current||(c.current=document.createElement("div")),c.current);return i.useEffect(()=>{const g=m();return e&&document.body.appendChild(g),()=>{g.remove()}},[e]),i.useEffect(()=>{if(!e||!n||!o.current||!r.current)return;const g=o.current.getBoundingClientRect(),x=r.current.getBoundingClientRect();let v=u,S=g.left+g.width/2,C=g.top+g.height,z=a;if(S+x.width/2>n.x+n.width){const d=S;S=n.x+n.width-x.width/2,z=d-S}if(S<n.x+x.width/2){const d=S;S=n.x+x.width/2,z=d-S}C>window.innerHeight-x.height&&(v===q.Bottom&&(v=q.Top),C=g.top-x.height),C<0&&(v===q.Top&&(v=q.Bottom),C=g.top+g.height),v!==u&&p(v),((l==null?void 0:l.x)!==S||l.y!==C)&&h({x:S,y:C}),z!==a&&f(z)}),_.default.createElement(_.default.Fragment,null,i.cloneElement(s,{ref:o}),e&&t&&$e.createPortal(_.default.createElement("div",{ref:r,className:"screenshots-option",style:{visibility:l?"visible":"hidden",left:l==null?void 0:l.x,top:l==null?void 0:l.y},"data-placement":u,__self:this,__source:{fileName:Ce,lineNumber:111,columnNumber:11}},_.default.createElement("div",{className:"screenshots-option-container",__self:this,__source:{fileName:Ce,lineNumber:121,columnNumber:13}},t),_.default.createElement("div",{className:"screenshots-option-arrow",style:{marginLeft:a},__self:this,__source:{fileName:Ce,lineNumber:122,columnNumber:13}})),m()))}var ke="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsButton/index.tsx";function F({title:e,icon:t,checked:s,disabled:o,option:c,onClick:r}){const n=["screenshots-button"],u=i.useCallback(p=>{o||!r||r(p)},[o,r]);return s&&n.push("screenshots-button-checked"),o&&n.push("screenshots-button-disabled"),_.default.createElement(ut,{open:s,content:c,__self:this,__source:{fileName:ke,lineNumber:42,columnNumber:5}},_.default.createElement("div",{className:n.join(" "),title:e,onClick:u,__self:this,__source:{fileName:ke,lineNumber:43,columnNumber:7}},_.default.createElement("span",{className:t,__self:this,__source:{fileName:ke,lineNumber:44,columnNumber:9}})))}var lt="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Ok/index.tsx";function at(){const e=X(),t=W(),[,s]=Y(),o=ve(),[c]=G(),r=Ne(),n=i.useCallback(()=>{s.clearSelect(),setTimeout(()=>{!t.current||t.current.canvas.toBlob(u=>{o("onOk",u,c),r()},"image/png")})},[t,s,o,c,r]);return _.default.createElement(F,{title:e.operation_ok_title,icon:"icon-ok",onClick:n,__self:this,__source:{fileName:lt,lineNumber:31,columnNumber:10}})}var ft="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Cancel/index.tsx";function ht(){const e=ve(),t=Ne(),s=X(),o=i.useCallback(()=>{e("onCancel"),t()},[e,t]);return _.default.createElement(F,{title:s.operation_cancel_title,icon:"icon-cancel",onClick:o,__self:this,__source:{fileName:ft,lineNumber:17,columnNumber:10}})}var mt="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Save/index.tsx";function dt(){const e=X(),t=W(),[,s]=Y(),[o]=G(),c=ve(),r=Ne(),n=i.useCallback(()=>{s.clearSelect(),setTimeout(()=>{!t.current||t.current.canvas.toBlob(u=>{c("onSave",u,o),r()},"image/png")})},[t,s,o,c,r]);return _.default.createElement(F,{title:e.operation_save_title,icon:"icon-save",onClick:n,__self:this,__source:{fileName:mt,lineNumber:31,columnNumber:10}})}var pt="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Redo/index.tsx";function bt(){const e=X(),[t,s]=Y(),o=i.useCallback(()=>{s.redo()},[s]);return _.default.createElement(F,{title:e.operation_redo_title,icon:"icon-redo",disabled:!t.stack.length||t.stack.length-1===t.index,onClick:o,__self:this,__source:{fileName:pt,lineNumber:15,columnNumber:5}})}var gt="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Undo/index.tsx";function _t(){const e=X(),[t,s]=Y(),o=i.useCallback(()=>{s.undo()},[s]);return _.default.createElement(F,{title:e.operation_undo_title,icon:"icon-undo",disabled:t.index===-1,onClick:o,__self:this,__source:{fileName:gt,lineNumber:15,columnNumber:5}})}var Re="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsSize/index.tsx";function Xe({value:e,onChange:t}){const s=[3,6,9];return _.default.createElement("div",{className:"screenshots-size",__self:this,__source:{fileName:Re,lineNumber:12,columnNumber:5}},s.map(o=>{const c=["screenshots-size-item"];return o===e&&c.push("screenshots-size-active"),_.default.createElement("div",{key:o,className:c.join(" "),onClick:()=>t&&t(o),__self:this,__source:{fileName:Re,lineNumber:21,columnNumber:11}},_.default.createElement("div",{className:"screenshots-size-pointer",style:{width:o*1.8,height:o*1.8},__self:this,__source:{fileName:Re,lineNumber:22,columnNumber:13}}))}))}function ee(e){const t=Z();i.useEffect(()=>(t.on("mousedown",e),()=>{t.off("mousedown",e)}),[e,t])}function te(e){const t=Z();i.useEffect(()=>(t.on("mousemove",e),()=>{t.off("mousemove",e)}),[e,t])}function ne(e){const t=Z();i.useEffect(()=>(t.on("mouseup",e),()=>{t.off("mouseup",e)}),[e,t])}var Ye="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Mosaic/index.tsx";function pe(e,t,s){if(!s)return[0,0,0,0];const{data:o,width:c}=s,r=t*c*4+e*4;return Array.from(o.slice(r,r+4))}function yt(e,t){const{tiles:s,size:o}=t.data;s.forEach(c=>{const r=Math.round(c.color[0]),n=Math.round(c.color[1]),u=Math.round(c.color[2]),p=c.color[3]/255;e.fillStyle=`rgba(${r}, ${n}, ${u}, ${p})`,e.fillRect(c.x-o/2,c.y-o/2,o,o)})}function xt(){const e=X(),{image:t,width:s,height:o}=H(),[c,r]=I(),n=W(),[u,p]=Y(),[l]=G(),[,h]=A(),[a,f]=i.useState(3),m=i.useRef(null),g=i.useRef(null),x=c==="Mosaic",v=i.useCallback(()=>{r.set("Mosaic"),h.set("crosshair")},[r,h]),S=i.useCallback(()=>{x||(v(),p.clearSelect())},[x,v,p]),C=i.useCallback(b=>{if(!x||g.current||!m.current||!n.current)return;const y=n.current.canvas.getBoundingClientRect(),N=b.clientX-y.x,R=b.clientY-y.y,E=a*2;g.current={name:"Mosaic",type:B.Source,data:{size:E,tiles:[{x:N,y:R,color:pe(N,R,m.current)}]},editHistory:[],draw:yt}},[x,a,n]),z=i.useCallback(b=>{if(!x||!g.current||!n.current||!m.current)return;const y=n.current.canvas.getBoundingClientRect(),N=b.clientX-y.x,R=b.clientY-y.y,E=g.current.data.size,w=g.current.data.tiles;let k=w[w.length-1];if(!k)w.push({x:N,y:R,color:pe(N,R,m.current)});else{const V=k.x-N,D=k.y-R;let L=Math.sqrt(V**2+D**2);const ge=-D/L,_e=-V/L;for(;L>E;){const se=Math.floor(k.x+E*_e),re=Math.floor(k.y+E*ge);k={x:se,y:re,color:pe(se,re,m.current)},w.push(k),L-=E}L>E/2&&w.push({x:N,y:R,color:pe(N,R,m.current)})}u.top!==g.current?p.push(g.current):p.set(u)},[x,n,u,p]),d=i.useCallback(()=>{!x||(g.current=null)},[x]);return ee(C),te(z),ne(d),i.useEffect(()=>{if(!l||!t||!x)return;const b=document.createElement("canvas"),y=b.getContext("2d");if(!y)return;b.width=l.width,b.height=l.height;const N=t.naturalWidth/s,R=t.naturalHeight/o;y.drawImage(t,l.x*N,l.y*R,l.width*N,l.height*R,0,0,l.width,l.height),m.current=y.getImageData(0,0,l.width,l.height)},[s,o,l,t,x]),_.default.createElement(F,{title:e.operation_mosaic_title,icon:"icon-mosaic",checked:x,onClick:S,option:_.default.createElement(Xe,{value:a,onChange:f,__self:this,__source:{fileName:Ye,lineNumber:220,columnNumber:15}}),__self:this,__source:{fileName:Ye,lineNumber:215,columnNumber:5}})}var Fe="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsColor/index.tsx";function vt({value:e,onChange:t}){const s=["#ee5126","#fceb4d","#90e746","#51c0fa","#7a7a7a","#ffffff"];return _.default.createElement("div",{className:"screenshots-color",__self:this,__source:{fileName:Fe,lineNumber:12,columnNumber:5}},s.map(o=>{const c=["screenshots-color-item"];return o===e&&c.push("screenshots-color-active"),_.default.createElement("div",{key:o,className:c.join(" "),style:{backgroundColor:o},onClick:()=>t&&t(o),__self:this,__source:{fileName:Fe,lineNumber:19,columnNumber:11}})}))}var Se="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsSizeColor/index.tsx";function ie({size:e,color:t,onSizeChange:s,onColorChange:o}){return _.default.createElement("div",{className:"screenshots-sizecolor",__self:this,__source:{fileName:Se,lineNumber:15,columnNumber:5}},_.default.createElement(Xe,{value:e,onChange:s,__self:this,__source:{fileName:Se,lineNumber:16,columnNumber:7}}),_.default.createElement(vt,{value:t,onChange:o,__self:this,__source:{fileName:Se,lineNumber:17,columnNumber:7}}))}const Nt=`
|
|
2
|
+
min-width: 0 !important;
|
|
3
|
+
width: 0 !important;
|
|
4
|
+
min-height: 0 !important;
|
|
5
|
+
height:0 !important;
|
|
6
|
+
visibility: hidden !important;
|
|
7
|
+
overflow: hidden !important;
|
|
8
|
+
position: absolute !important;
|
|
9
|
+
z-index: -1000 !important;
|
|
10
|
+
top:0 !important;
|
|
11
|
+
right:0 !important;
|
|
12
|
+
`,Ct=["letter-spacing","line-height","padding-top","padding-bottom","font-family","font-weight","font-size","font-variant","text-rendering","text-transform","text-indent","padding-left","padding-right","border-width","box-sizing","white-space","word-break"];let O;function kt(e){const t=window.getComputedStyle(e),s=t.getPropertyValue("box-sizing")||t.getPropertyValue("-moz-box-sizing")||t.getPropertyValue("-webkit-box-sizing"),o=parseFloat(t.getPropertyValue("padding-bottom"))+parseFloat(t.getPropertyValue("padding-top")),c=parseFloat(t.getPropertyValue("border-bottom-width"))+parseFloat(t.getPropertyValue("border-top-width"));return{sizingStyle:Ct.map(n=>`${n}:${t.getPropertyValue(n)}`).join(";"),paddingSize:o,borderSize:c,boxSizing:s}}function Rt(e,t,s,o){O||(O=document.createElement("textarea"),O.setAttribute("tab-index","-1"),document.body.appendChild(O));const{paddingSize:c,borderSize:r,boxSizing:n,sizingStyle:u}=kt(e);O.setAttribute("style",`${u};${Nt};max-width:${s}px;max-height:${o}px`),O.value=t||" ";let p=O.scrollWidth,l=O.scrollHeight;return n==="border-box"?(p+=r,l+=r):n==="content-box"&&(p-=c,l-=c),{width:Math.min(p,s),height:Math.min(l,o)}}var St="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsTextarea/index.tsx";function wt({x:e,y:t,maxWidth:s,maxHeight:o,size:c,color:r,value:n,onChange:u,onBlur:p}){const l=i.useRef(null),h=i.useRef(null),[a,f]=i.useState(0),[m,g]=i.useState(0),x=()=>(l.current||(l.current=document.createElement("div")),l.current);return i.useLayoutEffect(()=>(l.current&&(document.body.appendChild(l.current),requestAnimationFrame(()=>{var v;(v=h.current)==null||v.focus()})),()=>{var v;(v=l.current)==null||v.remove()}),[]),i.useLayoutEffect(()=>{if(!h.current)return;const{width:v,height:S}=Rt(h.current,n,s,o);f(v),g(S)},[n,s,o]),$e.createPortal(_.default.createElement("textarea",{ref:h,className:"screenshots-textarea",style:{left:e,top:t,color:r,width:a,height:m,maxWidth:s,maxHeight:o,fontSize:c,lineHeight:`${c}px`},value:n,onChange:v=>u&&u(v.target.value),onBlur:v=>p&&p(v),__self:this,__source:{fileName:St,lineNumber:65,columnNumber:5}}),x())}function ue(e){const t=Z();i.useEffect(()=>(t.on("drawselect",e),()=>{t.off("drawselect",e)}),[e,t])}var we="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Text/index.tsx";const ze={3:18,6:32,9:46};function zt(e,t){const{size:s,color:o,fontFamily:c,x:r,y:n,text:u}=t.data;e.fillStyle=o,e.textAlign="left",e.textBaseline="top",e.font=`${s}px ${c}`;const p=t.editHistory.reduce((l,{data:h})=>({x:l.x+h.x2-h.x1,y:l.y+h.y2-h.y1}),{x:0,y:0});u.split(`
|
|
13
|
+
`).forEach((l,h)=>{e.fillText(l,r+p.x,n+p.y+h*s)})}function Et(e,t,s){e.textAlign="left",e.textBaseline="top",e.font=`${t.data.size}px ${t.data.fontFamily}`;let o=0,c=0;t.data.text.split(`
|
|
14
|
+
`).forEach(a=>{const f=e.measureText(a);o<f.width&&(o=f.width),c+=t.data.size});const{x:r,y:n}=t.editHistory.reduce((a,{data:f})=>({x:a.x+f.x2-f.x1,y:a.y+f.y2-f.y1}),{x:0,y:0}),u=t.data.x+r,p=t.data.y+n,l=u+o,h=p+c;return s.x>=u&&s.x<=l&&s.y>=p&&s.y<=h}function Bt(){const e=X(),[t,s]=Y(),[o]=G(),[c,r]=I(),[,n]=A(),u=W(),[p,l]=i.useState(3),[h,a]=i.useState("#ee5126"),f=i.useRef(null),m=i.useRef(null),[g,x]=i.useState(null),[v,S]=i.useState(""),C=c==="Text",z=i.useCallback(()=>{r.set("Text"),n.set("default")},[r,n]),d=i.useCallback(()=>{C||(z(),s.clearSelect())},[C,z,s]),b=i.useCallback(D=>{f.current&&(f.current.data.size=ze[D]),l(D)},[]),y=i.useCallback(D=>{f.current&&(f.current.data.color=D),a(D)},[]),N=i.useCallback(D=>{S(D),C&&f.current&&(f.current.data.text=D)},[C]),R=i.useCallback(()=>{f.current&&f.current.data.text&&s.push(f.current),f.current=null,S(""),x(null)},[s]),E=i.useCallback((D,L)=>{D.name==="Text"&&(z(),m.current={type:B.Edit,data:{x1:L.clientX,y1:L.clientY,x2:L.clientX,y2:L.clientY},source:D},s.select(D))},[z,s]),w=i.useCallback(D=>{if(!C||!u.current||f.current||!o)return;const{left:L,top:ge}=u.current.canvas.getBoundingClientRect(),_e=window.getComputedStyle(u.current.canvas).fontFamily,se=D.clientX-L,re=D.clientY-ge;f.current={name:"Text",type:B.Source,data:{size:ze[p],color:h,fontFamily:_e,x:se,y:re,text:""},editHistory:[],draw:zt,isHit:Et},x({x:D.clientX,y:D.clientY,maxWidth:o.width-se,maxHeight:o.height-re})},[C,p,h,o,u]),k=i.useCallback(D=>{!C||m.current&&(m.current.data.x2=D.clientX,m.current.data.y2=D.clientY,t.top!==m.current?(m.current.source.editHistory.push(m.current),s.push(m.current)):s.set(t))},[C,t,s]),V=i.useCallback(()=>{!C||(m.current=null)},[C]);return ue(E),ee(w),te(k),ne(V),_.default.createElement(_.default.Fragment,null,_.default.createElement(F,{title:e.operation_text_title,icon:"icon-text",checked:C,onClick:d,option:_.default.createElement(ie,{size:p,color:h,onSizeChange:b,onColorChange:y,__self:this,__source:{fileName:we,lineNumber:261,columnNumber:11}}),__self:this,__source:{fileName:we,lineNumber:255,columnNumber:7}}),C&&g&&_.default.createElement(wt,{x:g.x,y:g.y,maxWidth:g.maxWidth,maxHeight:g.maxHeight,size:ze[p],color:h,value:v,onChange:N,onBlur:R,__self:this,__source:{fileName:we,lineNumber:265,columnNumber:9}}))}const Pe=4;function M(e,t,s){e.lineWidth=1,e.strokeStyle="#000000",e.fillStyle="#ffffff",e.beginPath(),e.arc(t,s,Pe,0,2*Math.PI),e.fill(),e.stroke()}function be(e,t,s){t.draw(e,t);const{data:o}=e.getImageData(s.x,s.y,1,1);return o.some(c=>c!==0)}function $(e,t,s){if(!e)return!1;const{left:o,top:c}=e.getBoundingClientRect(),r=t.clientX-o,n=t.clientY-c;return(s.x-r)**2+(s.y-n)**2<Pe**2}function Dt(e,t){const{size:s,color:o,points:c}=t.data;e.lineCap="round",e.lineJoin="round",e.lineWidth=s,e.strokeStyle=o;const r=t.editHistory.reduce((n,{data:u})=>({x:n.x+u.x2-u.x1,y:n.y+u.y2-u.y1}),{x:0,y:0});e.beginPath(),c.forEach((n,u)=>{u===0?e.moveTo(n.x+r.x,n.y+r.y):e.lineTo(n.x+r.x,n.y+r.y)}),e.stroke(),t.isSelected&&(e.lineWidth=1,e.strokeStyle="#000000",e.beginPath(),c.forEach((n,u)=>{u===0?e.moveTo(n.x+r.x,n.y+r.y):e.lineTo(n.x+r.x,n.y+r.y)}),e.stroke())}var Te="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Brush/index.tsx";function Mt(){const e=X(),[,t]=A(),[s,o]=I(),c=W(),[r,n]=Y(),[u,p]=i.useState(3),[l,h]=i.useState("#ee5126"),a=i.useRef(null),f=i.useRef(null),m=s==="Brush",g=i.useCallback(()=>{o.set("Brush"),t.set("default")},[o,t]),x=i.useCallback(()=>{m||(g(),n.clearSelect())},[m,g,n]),v=i.useCallback((d,b)=>{d.name==="Brush"&&(g(),f.current={type:B.Edit,data:{x1:b.clientX,y1:b.clientY,x2:b.clientX,y2:b.clientY},source:d},n.select(d))},[g,n]),S=i.useCallback(d=>{if(!m||a.current||!c.current)return;const{left:b,top:y}=c.current.canvas.getBoundingClientRect();a.current={name:"Brush",type:B.Source,data:{size:u,color:l,points:[{x:d.clientX-b,y:d.clientY-y}]},editHistory:[],draw:Dt,isHit:be}},[m,c,u,l]),C=i.useCallback(d=>{if(!(!m||!c.current)){if(f.current)f.current.data.x2=d.clientX,f.current.data.y2=d.clientY,r.top!==f.current?(f.current.source.editHistory.push(f.current),n.push(f.current)):n.set(r);else if(a.current){const{left:b,top:y}=c.current.canvas.getBoundingClientRect();a.current.data.points.push({x:d.clientX-b,y:d.clientY-y}),r.top!==a.current?n.push(a.current):n.set(r)}}},[m,r,c,n]),z=i.useCallback(()=>{!m||(a.current&&n.clearSelect(),a.current=null,f.current=null)},[m,n]);return ue(v),ee(S),te(C),ne(z),_.default.createElement(F,{title:e.operation_brush_title,icon:"icon-brush",checked:m,onClick:x,option:_.default.createElement(ie,{size:u,color:l,onSizeChange:p,onColorChange:h,__self:this,__source:{fileName:Te,lineNumber:166,columnNumber:15}}),__self:this,__source:{fileName:Te,lineNumber:161,columnNumber:5}})}function je(e){let{x1:t,y1:s,x2:o,y2:c}=e.data;return e.editHistory.forEach(({data:r})=>{const n=r.x2-r.x1,u=r.y2-r.y1;r.type===le.Move?(t+=n,s+=u,o+=n,c+=u):r.type===le.MoveStart?(t+=n,s+=u):r.type===le.MoveEnd&&(o+=n,c+=u)}),me(U({},e.data),{x1:t,x2:o,y1:s,y2:c})}function $t(e,t){const{size:s,color:o,x1:c,x2:r,y1:n,y2:u}=je(t);e.lineCap="round",e.lineJoin="bevel",e.lineWidth=s,e.strokeStyle=o;const p=r-c,l=u-n,h=s*3,a=Math.atan2(l,p);e.beginPath(),e.moveTo(c,n),e.lineTo(r,u),e.lineTo(r-h*Math.cos(a-Math.PI/6),u-h*Math.sin(a-Math.PI/6)),e.moveTo(r,u),e.lineTo(r-h*Math.cos(a+Math.PI/6),u-h*Math.sin(a+Math.PI/6)),e.stroke(),t.isSelected&&(M(e,c,n),M(e,r,u))}var Ue="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Arrow/index.tsx",le;(function(e){e[e.Move=0]="Move",e[e.MoveStart=1]="MoveStart",e[e.MoveEnd=2]="MoveEnd"})(le||(le={}));function Lt(){const e=X(),[,t]=A(),[s,o]=I(),[c,r]=Y(),n=W(),[u,p]=i.useState(3),[l,h]=i.useState("#ee5126"),a=i.useRef(null),f=i.useRef(null),m=s==="Arrow",g=i.useCallback(()=>{o.set("Arrow"),t.set("default")},[o,t]),x=i.useCallback(()=>{m||(g(),r.clearSelect())},[m,g,r]),v=i.useCallback((d,b)=>{if(d.name!=="Arrow"||!n.current)return;const y=d;g();const{x1:N,y1:R,x2:E,y2:w}=je(y);let k=0;$(n.current.canvas,b,{x:N,y:R})?k=1:$(n.current.canvas,b,{x:E,y:w})&&(k=2),f.current={type:B.Edit,data:{type:k,x1:b.clientX,y1:b.clientY,x2:b.clientX,y2:b.clientY},source:y},r.select(d)},[n,g,r]),S=i.useCallback(d=>{if(!m||a.current||!n.current)return;const{left:b,top:y}=n.current.canvas.getBoundingClientRect();a.current={name:"Arrow",type:B.Source,data:{size:u,color:l,x1:d.clientX-b,y1:d.clientY-y,x2:d.clientX-b,y2:d.clientY-y},editHistory:[],draw:$t,isHit:be}},[m,l,u,n]),C=i.useCallback(d=>{if(!(!m||!n.current)){if(f.current)f.current.data.x2=d.clientX,f.current.data.y2=d.clientY,c.top!==f.current?(f.current.source.editHistory.push(f.current),r.push(f.current)):r.set(c);else if(a.current){const{left:b,top:y}=n.current.canvas.getBoundingClientRect();a.current.data.x2=d.clientX-b,a.current.data.y2=d.clientY-y,c.top!==a.current?r.push(a.current):r.set(c)}}},[m,c,n,r]),z=i.useCallback(()=>{!m||(a.current&&r.clearSelect(),a.current=null,f.current=null)},[m,r]);return ue(v),ee(S),te(C),ne(z),_.default.createElement(F,{title:e.operation_arrow_title,icon:"icon-arrow",checked:m,onClick:x,option:_.default.createElement(ie,{size:u,color:l,onSizeChange:p,onColorChange:h,__self:this,__source:{fileName:Ue,lineNumber:190,columnNumber:15}}),__self:this,__source:{fileName:Ue,lineNumber:185,columnNumber:5}})}function Ge(e){let{x1:t,y1:s,x2:o,y2:c}=e.data;return e.editHistory.forEach(({data:r})=>{const n=r.x2-r.x1,u=r.y2-r.y1;r.type===P.Move?(t+=n,s+=u,o+=n,c+=u):r.type===P.ResizeTop?s+=u:r.type===P.ResizeRightTop?(o+=n,s+=u):r.type===P.ResizeRight?o+=n:r.type===P.ResizeRightBottom?(o+=n,c+=u):r.type===P.ResizeBottom?c+=u:r.type===P.ResizeLeftBottom?(t+=n,c+=u):r.type===P.ResizeLeft?t+=n:r.type===P.ResizeLeftTop&&(t+=n,s+=u)}),me(U({},e.data),{x1:t,x2:o,y1:s,y2:c})}function Ht(e,t){const{size:s,color:o,x1:c,y1:r,x2:n,y2:u}=Ge(t);e.lineCap="butt",e.lineJoin="miter",e.lineWidth=s,e.strokeStyle=o;const p=(c+n)/2,l=(r+u)/2,h=Math.abs(n-c)/2,a=Math.abs(u-r)/2,f=.5522848,m=h*f,g=a*f;e.beginPath(),e.moveTo(p-h,l),e.bezierCurveTo(p-h,l-g,p-m,l-a,p,l-a),e.bezierCurveTo(p+m,l-a,p+h,l-g,p+h,l),e.bezierCurveTo(p+h,l+g,p+m,l+a,p,l+a),e.bezierCurveTo(p-m,l+a,p-h,l+g,p-h,l),e.closePath(),e.stroke(),t.isSelected&&(e.lineWidth=1,e.strokeStyle="#000000",e.fillStyle="#ffffff",e.beginPath(),e.moveTo(c,r),e.lineTo(n,r),e.lineTo(n,u),e.lineTo(c,u),e.closePath(),e.stroke(),M(e,(c+n)/2,r),M(e,n,r),M(e,n,(r+u)/2),M(e,n,u),M(e,(c+n)/2,u),M(e,c,u),M(e,c,(r+u)/2),M(e,c,r))}var Ae="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Ellipse/index.tsx",P;(function(e){e[e.Move=0]="Move",e[e.ResizeTop=1]="ResizeTop",e[e.ResizeRightTop=2]="ResizeRightTop",e[e.ResizeRight=3]="ResizeRight",e[e.ResizeRightBottom=4]="ResizeRightBottom",e[e.ResizeBottom=5]="ResizeBottom",e[e.ResizeLeftBottom=6]="ResizeLeftBottom",e[e.ResizeLeft=7]="ResizeLeft",e[e.ResizeLeftTop=8]="ResizeLeftTop"})(P||(P={}));function Xt(){const e=X(),[t,s]=Y(),[o,c]=I(),[,r]=A(),n=W(),[u,p]=i.useState(3),[l,h]=i.useState("#ee5126"),a=i.useRef(null),f=i.useRef(null),m=o==="Ellipse",g=i.useCallback(()=>{c.set("Ellipse"),r.set("crosshair")},[c,r]),x=i.useCallback(()=>{m||(g(),s.clearSelect())},[m,g,s]),v=i.useCallback((d,b)=>{if(d.name!=="Ellipse"||!n.current)return;const y=d;g();const{x1:N,y1:R,x2:E,y2:w}=Ge(y);let k=0;$(n.current.canvas,b,{x:(N+E)/2,y:R})?k=1:$(n.current.canvas,b,{x:E,y:R})?k=2:$(n.current.canvas,b,{x:E,y:(R+w)/2})?k=3:$(n.current.canvas,b,{x:E,y:w})?k=4:$(n.current.canvas,b,{x:(N+E)/2,y:w})?k=5:$(n.current.canvas,b,{x:N,y:w})?k=6:$(n.current.canvas,b,{x:N,y:(R+w)/2})?k=7:$(n.current.canvas,b,{x:N,y:R})&&(k=8),f.current={type:B.Edit,data:{type:k,x1:b.clientX,y1:b.clientY,x2:b.clientX,y2:b.clientY},source:y},s.select(d)},[n,g,s]),S=i.useCallback(d=>{if(!m||!n.current||a.current)return;const{left:b,top:y}=n.current.canvas.getBoundingClientRect(),N=d.clientX-b,R=d.clientY-y;a.current={name:"Ellipse",type:B.Source,data:{size:u,color:l,x1:N,y1:R,x2:N,y2:R},editHistory:[],draw:Ht,isHit:be}},[m,u,l,n]),C=i.useCallback(d=>{if(!(!m||!n.current)){if(f.current)f.current.data.x2=d.clientX,f.current.data.y2=d.clientY,t.top!==f.current?(f.current.source.editHistory.push(f.current),s.push(f.current)):s.set(t);else if(a.current){const{left:b,top:y}=n.current.canvas.getBoundingClientRect();a.current.data.x2=d.clientX-b,a.current.data.y2=d.clientY-y,t.top!==a.current?s.push(a.current):s.set(t)}}},[m,n,t,s]),z=i.useCallback(()=>{!m||(a.current&&s.clearSelect(),a.current=null,f.current=null)},[m,s]);return ue(v),ee(S),te(C),ne(z),_.default.createElement(F,{title:e.operation_ellipse_title,icon:"icon-ellipse",checked:m,onClick:x,option:_.default.createElement(ie,{size:u,color:l,onSizeChange:p,onColorChange:h,__self:this,__source:{fileName:Ae,lineNumber:242,columnNumber:15}}),__self:this,__source:{fileName:Ae,lineNumber:237,columnNumber:5}})}function Ie(e){let{x1:t,y1:s,x2:o,y2:c}=e.data;return e.editHistory.forEach(({data:r})=>{const n=r.x2-r.x1,u=r.y2-r.y1;r.type===T.Move?(t+=n,s+=u,o+=n,c+=u):r.type===T.ResizeTop?s+=u:r.type===T.ResizeRightTop?(o+=n,s+=u):r.type===T.ResizeRight?o+=n:r.type===T.ResizeRightBottom?(o+=n,c+=u):r.type===T.ResizeBottom?c+=u:r.type===T.ResizeLeftBottom?(t+=n,c+=u):r.type===T.ResizeLeft?t+=n:r.type===T.ResizeLeftTop&&(t+=n,s+=u)}),me(U({},e.data),{x1:t,x2:o,y1:s,y2:c})}function Yt(e,t){const{size:s,color:o,x1:c,y1:r,x2:n,y2:u}=Ie(t);e.lineCap="butt",e.lineJoin="miter",e.lineWidth=s,e.strokeStyle=o,e.beginPath(),e.moveTo(c,r),e.lineTo(n,r),e.lineTo(n,u),e.lineTo(c,u),e.closePath(),e.stroke(),t.isSelected&&(e.lineWidth=1,e.strokeStyle="#000000",e.fillStyle="#ffffff",M(e,(c+n)/2,r),M(e,n,r),M(e,n,(r+u)/2),M(e,n,u),M(e,(c+n)/2,u),M(e,c,u),M(e,c,(r+u)/2),M(e,c,r))}var We="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/operations/Rectangle/index.tsx",T;(function(e){e[e.Move=0]="Move",e[e.ResizeTop=1]="ResizeTop",e[e.ResizeRightTop=2]="ResizeRightTop",e[e.ResizeRight=3]="ResizeRight",e[e.ResizeRightBottom=4]="ResizeRightBottom",e[e.ResizeBottom=5]="ResizeBottom",e[e.ResizeLeftBottom=6]="ResizeLeftBottom",e[e.ResizeLeft=7]="ResizeLeft",e[e.ResizeLeftTop=8]="ResizeLeftTop"})(T||(T={}));function Ft(){const e=X(),[t,s]=Y(),[o,c]=I(),[,r]=A(),n=W(),[u,p]=i.useState(3),[l,h]=i.useState("#ee5126"),a=i.useRef(null),f=i.useRef(null),m=o==="Rectangle",g=i.useCallback(()=>{c.set("Rectangle"),r.set("crosshair")},[c,r]),x=i.useCallback(()=>{m||(g(),s.clearSelect())},[m,g,s]),v=i.useCallback((d,b)=>{if(d.name!=="Rectangle"||!n.current)return;const y=d;g();const{x1:N,y1:R,x2:E,y2:w}=Ie(y);let k=0;$(n.current.canvas,b,{x:(N+E)/2,y:R})?k=1:$(n.current.canvas,b,{x:E,y:R})?k=2:$(n.current.canvas,b,{x:E,y:(R+w)/2})?k=3:$(n.current.canvas,b,{x:E,y:w})?k=4:$(n.current.canvas,b,{x:(N+E)/2,y:w})?k=5:$(n.current.canvas,b,{x:N,y:w})?k=6:$(n.current.canvas,b,{x:N,y:(R+w)/2})?k=7:$(n.current.canvas,b,{x:N,y:R})&&(k=8),f.current={type:B.Edit,data:{type:k,x1:b.clientX,y1:b.clientY,x2:b.clientX,y2:b.clientY},source:d},s.select(d)},[n,g,s]),S=i.useCallback(d=>{if(!m||!n.current||a.current)return;const{left:b,top:y}=n.current.canvas.getBoundingClientRect(),N=d.clientX-b,R=d.clientY-y;a.current={name:"Rectangle",type:B.Source,data:{size:u,color:l,x1:N,y1:R,x2:N,y2:R},editHistory:[],draw:Yt,isHit:be}},[m,u,l,n]),C=i.useCallback(d=>{if(!(!m||!n.current)){if(f.current)f.current.data.x2=d.clientX,f.current.data.y2=d.clientY,t.top!==f.current?(f.current.source.editHistory.push(f.current),s.push(f.current)):s.set(t);else if(a.current){const{left:b,top:y}=n.current.canvas.getBoundingClientRect(),N=a.current.data;N.x2=d.clientX-b,N.y2=d.clientY-y,t.top!==a.current?s.push(a.current):s.set(t)}}},[m,n,t,s]),z=i.useCallback(()=>{!m||(a.current&&s.clearSelect(),a.current=null,f.current=null)},[m,s]);return ue(v),ee(S),te(C),ne(z),_.default.createElement(F,{title:e.operation_rectangle_title,icon:"icon-rectangle",checked:m,onClick:x,option:_.default.createElement(ie,{size:u,color:l,onSizeChange:p,onColorChange:h,__self:this,__source:{fileName:We,lineNumber:242,columnNumber:15}}),__self:this,__source:{fileName:We,lineNumber:237,columnNumber:5}})}var Pt=[Ft,Xt,Lt,Mt,Bt,xt,"|",_t,bt,"|",dt,ht,at];var ae="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/ScreenshotsOperations/index.tsx";const Oe=_.default.createContext(null);function Tt(){const{width:e,height:t}=H(),[s]=G(),[o,c]=i.useState(null),[r,n]=i.useState(null),u=i.useRef(null),p=i.useCallback(h=>{h.stopPropagation()},[]),l=i.useCallback(h=>{h.preventDefault(),h.stopPropagation()},[]);return i.useEffect(()=>{if(!s||!u.current)return;const h=u.current.getBoundingClientRect();let a=s.x+s.width-h.width,f=s.y+s.height+10;a<0&&(a=0),a>e-h.width&&(a=e-h.width),f>t-h.height&&(f=t-h.height-10),((r==null?void 0:r.x)!==a||r.y!==f)&&n({x:a,y:f}),((o==null?void 0:o.x)!==h.x||o.y!==h.y||o.width!==h.width||o.height!==h.height)&&c({x:h.x,y:h.y,width:h.width,height:h.height})}),s?_.default.createElement(Oe.Provider,{value:o,__self:this,__source:{fileName:ae,lineNumber:76,columnNumber:5}},_.default.createElement("div",{ref:u,className:"screenshots-operations",style:{visibility:r?"visible":"hidden",left:r==null?void 0:r.x,top:r==null?void 0:r.y},onDoubleClick:p,onContextMenu:l,__self:this,__source:{fileName:ae,lineNumber:77,columnNumber:7}},_.default.createElement("div",{className:"screenshots-operations-buttons",__self:this,__source:{fileName:ae,lineNumber:88,columnNumber:9}},Pt.map((h,a)=>h==="|"?_.default.createElement("div",{key:a,className:"screenshots-operations-divider",__self:this,__source:{fileName:ae,lineNumber:91,columnNumber:22}}):_.default.createElement(h,{key:a,__self:this,__source:{fileName:ae,lineNumber:93,columnNumber:22}}))))):null}function jt(e){const[t,s]=i.useState(null);return i.useEffect(()=>{if(e==null)return;const o=document.createElement("img"),c=()=>s(o),r=()=>s(null);return o.addEventListener("load",c),o.addEventListener("error",r),o.src=e,()=>{o.removeEventListener("load",c),o.removeEventListener("error",r)}},[e]),t}var fe="/Users/nashaofu/Documents/GitHub/screenshots/packages/react-screenshots/src/Screenshots/index.tsx";function Ut(n){var u=n,{url:e,width:t,height:s,lang:o,className:c}=u,r=Me(u,["url","width","height","lang","className"]);const p=jt(e),l=i.useRef(null),h=i.useRef({}),[a,f]=i.useState({index:-1,stack:[]}),[m,g]=i.useState(null),[x,v]=i.useState("move"),[S,C]=i.useState(void 0),z={url:e,width:t,height:s,image:p,lang:U(U({},Le),o),emiterRef:h,canvasContextRef:l,history:a,bounds:m,cursor:x,operation:S},d=i.useCallback((w,...k)=>{const V=r[w];typeof V=="function"&&V(...k)},[r]),b={call:d,setHistory:f,setBounds:g,setCursor:v,setOperation:C},y=["screenshots"];c&&y.push(c);const N=()=>{h.current={},f({index:-1,stack:[]}),g(null),v("move"),C(void 0)},R=i.useCallback(w=>{w.button!==0||!m||!l.current||l.current.canvas.toBlob(k=>{d("onOk",k,m),N()},"image/png")},[m,d]),E=i.useCallback(w=>{w.button===2&&(w.preventDefault(),d("onCancel"),N())},[d]);return _.default.createElement(ye.Provider,{value:{store:z,dispatcher:b},__self:this,__source:{fileName:fe,lineNumber:111,columnNumber:5}},_.default.createElement("div",{className:y.join(" "),style:{width:t,height:s},onDoubleClick:R,onContextMenu:E,__self:this,__source:{fileName:fe,lineNumber:112,columnNumber:7}},_.default.createElement(tt,{__self:this,__source:{fileName:fe,lineNumber:118,columnNumber:9}}),_.default.createElement(it,{ref:l,__self:this,__source:{fileName:fe,lineNumber:119,columnNumber:9}}),_.default.createElement(Tt,{__self:this,__source:{fileName:fe,lineNumber:120,columnNumber:9}})))}module.exports=Ut;
|