react-screenshots 0.5.15 → 0.5.18
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.
|
@@ -206,7 +206,7 @@ Check the render method of \``+g+"`."}return""}}function Xe(g){{if(g!==void 0){v
|
|
|
206
206
|
|
|
207
207
|
Check your code at `+B+":"+ae+"."}return""}}var en={};function Ir(g){{var B=_t();if(!B){var ae=typeof g=="string"?g:g.displayName||g.name;ae&&(B=`
|
|
208
208
|
|
|
209
|
-
Check the top-level render call using <`+ae+">.")}return B}}function ar(g,B){{if(!g._store||g._store.validated||g.key!=null)return;g._store.validated=!0;var ae=Ir(B);if(en[ae])return;en[ae]=!0;var me="";g&&g._owner&&g._owner!==Se.current&&(me=" It was passed a child from "+De(g._owner.type)+"."),$e(g),K('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',ae,me),$e(null)}}function Er(g,B){{if(typeof g!="object")return;if(Array.isArray(g))for(var ae=0;ae<g.length;ae++){var me=g[ae];ot(me)&&ar(me,B)}else if(ot(g))g._store&&(g._store.validated=!0);else if(g){var Oe=Y(g);if(typeof Oe=="function"&&Oe!==g.entries)for(var Ae=Oe.call(g),_e;!(_e=Ae.next()).done;)ot(_e.value)&&ar(_e.value,B)}}}function qr(g){{var B=g.type;if(B==null||typeof B=="string")return;var ae;if(typeof B=="function")ae=B.propTypes;else if(typeof B=="object"&&(B.$$typeof===k||B.$$typeof===N))ae=B.propTypes;else return;if(ae){var me=De(B);Pr(ae,g.props,"prop",me,g)}else if(B.PropTypes!==void 0&&!it){it=!0;var Oe=De(B);K("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",Oe||"Unknown")}typeof B.getDefaultProps=="function"&&!B.getDefaultProps.isReactClassApproved&&K("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}function Wn(g){{for(var B=Object.keys(g.props),ae=0;ae<B.length;ae++){var me=B[ae];if(me!=="children"&&me!=="key"){$e(g),K("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",me),$e(null);break}}g.ref!==null&&($e(g),K("Invalid attribute `ref` supplied to `React.Fragment`."),$e(null))}}function ir(g,B,ae,me,Oe,Ae){{var _e=ce(g);if(!_e){var Ee="";(g===void 0||typeof g=="object"&&g!==null&&Object.keys(g).length===0)&&(Ee+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");var we=Xe(Oe);we?Ee+=we:Ee+=_t();var Qe;g===null?Qe="null":Array.isArray(g)?Qe="array":g!==void 0&&g.$$typeof===x?(Qe="<"+(De(g.type)||"Unknown")+" />",Ee=" Did you accidentally export a JSX literal instead of a component?"):Qe=typeof g,K("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",Qe,Ee)}var ut=fe(g,B,ae,Oe,Ae);if(ut==null)return ut;if(_e){var At=B.children;if(At!==void 0)if(me)if(Array.isArray(At)){for(var Ut=0;Ut<At.length;Ut++)Er(At[Ut],g);Object.freeze&&Object.freeze(At)}else K("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else Er(At,g)}return g===l.Fragment?Wn(ut):qr(ut),ut}}var In=ir;l.jsxDEV=In})()})(tb);ue.exports=tb;var qi="C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\ScreenshotsMagnifier\\index.tsx";const Gi=100,Xi=80;var M0=R.exports.memo(function({x:d,y}){const{width:x,height:h,image:m}=mn(),s=Cr(),[S,z]=R.exports.useState(null),k=R.exports.useRef(null),T=R.exports.useRef(null),D=R.exports.useRef(null),[N,E]=R.exports.useState("000000");return R.exports.useLayoutEffect(()=>{if(!k.current)return;const L=k.current.getBoundingClientRect();let te=d+20,G=y+20;te+L.width>x&&(te=d-L.width-20),G+L.height>h&&(G=y-L.height-20),te<0&&(te=0),G<0&&(G=0),z({x:te,y:G})},[x,h,d,y]),R.exports.useEffect(()=>{if(!m||!T.current){D.current=null;return}if(D.current||(D.current=T.current.getContext("2d")),!D.current)return;const L=D.current;L.clearRect(0,0,Gi,Xi);const te=m.naturalWidth/x,G=m.naturalHeight/h;L.drawImage(m,d*te-Gi/2,y*G-Xi/2,Gi,Xi,0,0,Gi,Xi);const{data:re}=L.getImageData(Math.floor(Gi/2),Math.floor(Xi/2),1,1),X=Array.from(re.slice(0,3)).map(W=>W>=16?W.toString(16):`0${W.toString(16)}`).join("").toUpperCase();E(X)},[x,h,m,d,y]),ue.exports.jsxDEV("div",{ref:k,className:"screenshots-magnifier",style:{transform:`translate(${S==null?void 0:S.x}px, ${S==null?void 0:S.y}px)`},children:[ue.exports.jsxDEV("div",{className:"screenshots-magnifier-body",children:ue.exports.jsxDEV("canvas",{ref:T,className:"screenshots-magnifier-body-canvas",width:Gi,height:Xi},void 0,!1,{fileName:qi,lineNumber:97,columnNumber:9},this)},void 0,!1,{fileName:qi,lineNumber:96,columnNumber:7},this),ue.exports.jsxDEV("div",{className:"screenshots-magnifier-footer",children:[ue.exports.jsxDEV("div",{className:"screenshots-magnifier-footer-item",children:[s.magnifier_position_label,": (",d,",",y,")"]},void 0,!0,{fileName:qi,lineNumber:105,columnNumber:9},this),ue.exports.jsxDEV("div",{className:"screenshots-magnifier-footer-item",children:["RGB: #",N]},void 0,!0,{fileName:qi,lineNumber:108,columnNumber:9},this)]},void 0,!0,{fileName:qi,lineNumber:104,columnNumber:7},this)]},void 0,!0,{fileName:qi,lineNumber:89,columnNumber:5},this)});function A0({x:l,y:d},{x:y,y:x},h,m){return l>y&&([l,y]=[y,l]),d>x&&([d,x]=[x,d]),l<0&&(l=0),y>h&&(y=h),d<0&&(d=0),x>m&&(x=m),{x:l,y:d,width:y-l,height:x-d}}var Ns="C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\ScreenshotsBackground\\index.tsx",U0=R.exports.memo(function(){const{url:d,image:y,width:x,height:h}=mn(),[m,s]=Qi(),S=R.exports.useRef(null),z=R.exports.useRef(null),k=R.exports.useRef(!1),[T,D]=R.exports.useState(null),N=R.exports.useCallback((L,te)=>{if(!S.current)return;const{x:G,y:re}=S.current.getBoundingClientRect();s.set(A0({x:L.x-G,y:L.y-re},{x:te.x-G,y:te.y-re},x,h))},[x,h,s]),E=R.exports.useCallback(L=>{z.current||m||L.button!==0||(z.current={x:L.clientX,y:L.clientY},k.current=!1)},[m]);return R.exports.useEffect(()=>{const L=G=>{if(S.current){const re=S.current.getBoundingClientRect();G.clientX<re.left||G.clientY<re.top||G.clientX>re.right||G.clientY>re.bottom?D(null):D({x:G.clientX-re.x,y:G.clientY-re.y})}!z.current||(N(z.current,{x:G.clientX,y:G.clientY}),k.current=!0)},te=G=>{!z.current||(k.current&&N(z.current,{x:G.clientX,y:G.clientY}),z.current=null,k.current=!1)};return window.addEventListener("mousemove",L),window.addEventListener("mouseup",te),()=>{window.removeEventListener("mousemove",L),window.removeEventListener("mouseup",te)}},[N]),R.exports.useLayoutEffect(()=>{(!y||m)&&D(null)},[y,m]),!d||!y?null:ue.exports.jsxDEV("div",{ref:S,className:"screenshots-background",onMouseDown:E,children:[ue.exports.jsxDEV("img",{className:"screenshots-background-image",src:d},void 0,!1,{fileName:Ns,lineNumber:121,columnNumber:7},this),ue.exports.jsxDEV("div",{className:"screenshots-background-mask"},void 0,!1,{fileName:Ns,lineNumber:122,columnNumber:7},this),T&&!m&&ue.exports.jsxDEV(M0,{x:T==null?void 0:T.x,y:T==null?void 0:T.y},void 0,!1,{fileName:Ns,lineNumber:123,columnNumber:31},this)]},void 0,!0,{fileName:Ns,lineNumber:120,columnNumber:5},this)});function ya(){const{cursor:l}=mn(),{setCursor:d}=Du(),y=R.exports.useCallback(h=>{d==null||d(h)},[d]),x=R.exports.useCallback(()=>{d==null||d("move")},[d]);return[l,{set:y,reset:x}]}function Ki(){const{emiterRef:l}=mn(),d=R.exports.useCallback((m,s)=>{const S=l.current;Array.isArray(S[m])?S[m].push(s):S[m]=[s]},[l]),y=R.exports.useCallback((m,s)=>{const S=l.current;if(Array.isArray(S[m])){const z=S[m].findIndex(k=>k===s);z!==-1&&S[m].splice(z,1)}},[l]),x=R.exports.useCallback((m,...s)=>{const S=l.current;Array.isArray(S[m])&&S[m].forEach(z=>z(...s))},[l]),h=R.exports.useCallback(()=>{l.current={}},[l]);return{on:d,off:y,emit:x,reset:h}}function Pn(){const{history:l}=mn(),{setHistory:d}=Du(),y=R.exports.useCallback(T=>{const{index:D,stack:N}=l;N.forEach(E=>{E.type===ft.Source&&(E.isSelected=!1)}),T.type===ft.Source?T.isSelected=!0:T.type===ft.Edit&&(T.source.isSelected=!0),N.splice(D+1),N.push(T),d==null||d({index:N.length-1,stack:N})},[l,d]),x=R.exports.useCallback(()=>{const{stack:T}=l;T.pop(),d==null||d({index:T.length-1,stack:T})},[l,d]),h=R.exports.useCallback(()=>{const{index:T,stack:D}=l,N=D[T];N&&(N.type===ft.Source?N.isSelected=!1:N.type===ft.Edit&&N.source.editHistory.pop()),d==null||d({index:T<=0?-1:T-1,stack:D})},[l,d]),m=R.exports.useCallback(()=>{const{index:T,stack:D}=l,N=D[T+1];N&&(N.type===ft.Source?N.isSelected=!1:N.type===ft.Edit&&N.source.editHistory.push(N)),d==null||d({index:T>=D.length-1?D.length-1:T+1,stack:D})},[l,d]),s=R.exports.useCallback(T=>{d==null||d({...T})},[d]),S=R.exports.useCallback(T=>{l.stack.forEach(D=>{D.type===ft.Source&&(D===T?D.isSelected=!0:D.isSelected=!1)}),d==null||d({...l})},[l,d]),z=R.exports.useCallback(()=>{l.stack.forEach(T=>{T.type===ft.Source&&(T.isSelected=!1)}),d==null||d({...l})},[l,d]),k=R.exports.useCallback(()=>{d==null||d({index:-1,stack:[]})},[d]);return[{index:l.index,stack:l.stack,top:l.stack.slice(l.index,l.index+1)[0]},{push:y,pop:x,undo:h,redo:m,set:s,select:S,clearSelect:z,reset:k}]}function ga(){const{operation:l}=mn(),{setOperation:d}=Du(),y=R.exports.useCallback(h=>{d==null||d(h)},[d]),x=R.exports.useCallback(()=>{d==null||d(void 0)},[d]);return[l,{set:y,reset:x}]}function z0({x:l,y:d},{x:y,y:x},h,m,s,S){return l>y&&([l,y]=[y,l]),d>x&&([d,x]=[x,d]),l<0&&(l=0,S==="move"&&(y=h.width)),y>m&&(y=m,S==="move"&&(l=y-h.width)),d<0&&(d=0,S==="move"&&(x=h.height)),x>s&&(x=s,S==="move"&&(d=x-h.height)),{x:l,y:d,width:Math.max(y-l,1),height:Math.max(x-d,1)}}function L0(l,d,y,x){const h=l.clientX-y.x,m=l.clientY-y.y;let s=x.x,S=x.y,z=x.x+x.width,k=x.y+x.height;switch(d){case"top":S+=m;break;case"top-right":z+=h,S+=m;break;case"right":z+=h;break;case"right-bottom":z+=h,k+=m;break;case"bottom":k+=m;break;case"bottom-left":s+=h,k+=m;break;case"left":s+=h;break;case"left-top":s+=h,S+=m;break;case"move":s+=h,S+=m,z+=h,k+=m;break}return[{x:s,y:S},{x:z,y:k}]}function j0(l,d,y,x){if(!d)return!1;const h=document.createElement("canvas");h.width=l.width,h.height=l.height;const m=h.getContext("2d");if(!m)return!1;const{left:s,top:S}=d.getBoundingClientRect(),z=x.clientX-s,k=x.clientY-S;return[...y.stack.slice(0,y.index+1)].reverse().find(D=>{var N;return D.type!==ft.Source?!1:(m.clearRect(0,0,l.width,l.height),(N=D.isHit)==null?void 0:N.call(D,m,D,{x:z,y:k}))})}var Za="C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\ScreenshotsCanvas\\index.tsx";const H0=["top","right","bottom","left"],V0=["top","top-right","right","right-bottom","bottom","bottom-left","left","left-top"];var B0=R.exports.memo(R.exports.forwardRef(function(d,y){const{url:x,image:h,width:m,height:s}=mn(),S=Ki(),[z]=Pn(),[k]=ya(),[T,D]=Qi(),[N]=ga(),E=R.exports.useRef(),L=R.exports.useRef(null),te=R.exports.useRef(null),G=R.exports.useRef(null),re=R.exports.useRef(null),X=R.exports.useCallback(()=>{if(!T||!re.current)return;const _=re.current;_.imageSmoothingEnabled=!0,_.imageSmoothingQuality="low",_.clearRect(0,0,T.width,T.height),z.stack.slice(0,z.index+1).forEach(Y=>{Y.type===ft.Source&&Y.draw(_,Y)})},[T,re,z]),W=R.exports.useCallback((_,Y)=>{if(!(_.button!==0||!T))if(!N)E.current=Y,L.current={x:_.clientX,y:_.clientY},te.current={x:T.x,y:T.y,width:T.width,height:T.height};else{const q=j0(T,G.current,z,_.nativeEvent);q?S.emit("drawselect",q,_.nativeEvent):S.emit("mousedown",_.nativeEvent)}},[T,N,S,z]),H=R.exports.useCallback(_=>{if(!E.current||!L.current||!te.current||!T)return;const Y=L0(_,E.current,L.current,te.current);D.set(z0(Y[0],Y[1],T,m,s,E.current))},[m,s,T,D]);return R.exports.useLayoutEffect(()=>{if(!h||!T||!G.current){re.current=null;return}re.current||(re.current=G.current.getContext("2d")),X()},[h,T,X]),R.exports.useEffect(()=>{const _=q=>{if(N)S.emit("mousemove",q);else{if(!E.current||!L.current||!te.current)return;H(q)}},Y=q=>{if(N)S.emit("mouseup",q);else{if(!E.current||!L.current||!te.current)return;H(q),E.current=void 0,L.current=null,te.current=null}};return window.addEventListener("mousemove",_),window.addEventListener("mouseup",Y),()=>{window.removeEventListener("mousemove",_),window.removeEventListener("mouseup",Y)}},[H,N,S]),R.exports.useImperativeHandle(y,()=>re.current),ue.exports.jsxDEV("div",{className:"screenshots-canvas",style:{width:(T==null?void 0:T.width)||0,height:(T==null?void 0:T.height)||0,transform:T?`translate(${T.x}px, ${T.y}px)`:"none"},children:[ue.exports.jsxDEV("div",{className:"screenshots-canvas-body",children:[ue.exports.jsxDEV("img",{className:"screenshots-canvas-image",src:x,style:{width:m,height:s,transform:T?`translate(${-T.x}px, ${-T.y}px)`:"none"}},void 0,!1,{fileName:Za,lineNumber:183,columnNumber:11},this),ue.exports.jsxDEV("canvas",{ref:G,className:"screenshots-canvas-panel",width:(T==null?void 0:T.width)||0,height:(T==null?void 0:T.height)||0},void 0,!1,{fileName:Za,lineNumber:192,columnNumber:11},this)]},void 0,!0,{fileName:Za,lineNumber:181,columnNumber:9},this),ue.exports.jsxDEV("div",{className:"screenshots-canvas-mask",style:{cursor:k},onMouseDown:_=>W(_,"move")},void 0,!1,{fileName:Za,lineNumber:199,columnNumber:9},this),H0.map(_=>ue.exports.jsxDEV("div",{className:`screenshots-canvas-border-${_}`},_,!1,{fileName:Za,lineNumber:207,columnNumber:18},this)),V0.map(_=>ue.exports.jsxDEV("div",{className:`screenshots-canvas-point-${_}`,onMouseDown:Y=>W(Y,_)},_,!1,{fileName:Za,lineNumber:211,columnNumber:13},this))]},void 0,!0,{fileName:Za,lineNumber:173,columnNumber:7},this)}));function vp(){const l=Du();return R.exports.useCallback((y,...x)=>{var h;(h=l.call)==null||h.call(l,y,...x)},[l])}function ba(){const{canvasContextRef:l}=mn();return l}function hp(){const l=Ki(),[,d]=Qi(),[,y]=ya(),[,x]=Pn(),[,h]=ga();return R.exports.useCallback(()=>{l.reset(),x.reset(),d.reset(),y.reset(),h.reset()},[l,x,d,y,h])}var op="C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\ScreenshotsOption\\index.tsx",F0=R.exports.memo(function({open:d,content:y,children:x}){var te,G;const h=R.exports.useRef(null),m=R.exports.useRef(null),s=R.exports.useRef(null),S=R.exports.useContext(ub),[z,k]=R.exports.useState("bottom"),[T,D]=R.exports.useState(null),[N,E]=R.exports.useState(0),L=()=>(m.current||(m.current=document.createElement("div")),m.current);return R.exports.useEffect(()=>{const re=L();return d&&document.body.appendChild(re),()=>{re.remove()}},[d]),R.exports.useEffect(()=>{if(!d||!S||!h.current||!s.current)return;const re=h.current.getBoundingClientRect(),X=s.current.getBoundingClientRect();let W=z,H=re.left+re.width/2,_=re.top+re.height,Y=N;if(H+X.width/2>S.x+S.width){const q=H;H=S.x+S.width-X.width/2,Y=q-H}if(H<S.x+X.width/2){const q=H;H=S.x+X.width/2,Y=q-H}_>window.innerHeight-X.height&&(W==="bottom"&&(W="top"),_=re.top-X.height),_<0&&(W==="top"&&(W="bottom"),_=re.top+re.height),W!==z&&k(W),((T==null?void 0:T.x)!==H||T.y!==_)&&D({x:H,y:_}),Y!==N&&E(Y)}),ue.exports.jsxDEV(ue.exports.Fragment,{children:[R.exports.cloneElement(x,{ref:h}),d&&y&&zs.exports.createPortal(ue.exports.jsxDEV("div",{ref:s,className:"screenshots-option",style:{visibility:T?"visible":"hidden",transform:`translate(${(te=T==null?void 0:T.x)!=null?te:0}px, ${(G=T==null?void 0:T.y)!=null?G:0}px)`},"data-placement":z,children:[ue.exports.jsxDEV("div",{className:"screenshots-option-container",children:y},void 0,!1,{fileName:op,lineNumber:120,columnNumber:13},this),ue.exports.jsxDEV("div",{className:"screenshots-option-arrow",style:{marginLeft:N}},void 0,!1,{fileName:op,lineNumber:121,columnNumber:13},this)]},void 0,!0,{fileName:op,lineNumber:111,columnNumber:11},this),L())]},void 0,!0)});var up="C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\ScreenshotsButton\\index.tsx",Zn=R.exports.memo(function({title:d,icon:y,checked:x,disabled:h,option:m,onClick:s}){const S=["screenshots-button"],z=R.exports.useCallback(k=>{h||!s||s(k)},[h,s]);return x&&S.push("screenshots-button-checked"),h&&S.push("screenshots-button-disabled"),ue.exports.jsxDEV(F0,{open:x,content:m,children:ue.exports.jsxDEV("div",{className:S.join(" "),title:d,onClick:z,children:ue.exports.jsxDEV("span",{className:y},void 0,!1,{fileName:up,lineNumber:44,columnNumber:9},this)},void 0,!1,{fileName:up,lineNumber:43,columnNumber:7},this)},void 0,!1,{fileName:up,lineNumber:42,columnNumber:5},this)}),$0="C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\operations\\Ok\\index.tsx";function P0(){const{image:l,width:d,height:y,history:x,bounds:h,lang:m}=mn(),s=ba(),[,S]=Pn(),z=vp(),k=hp(),T=R.exports.useCallback(()=>{S.clearSelect(),setTimeout(()=>{!s.current||!l||!h||Us({image:l,width:d,height:y,history:x,bounds:h}).then(D=>{z("onOk",D,h),k()})})},[s,S,l,d,y,x,h,z,k]);return ue.exports.jsxDEV(Zn,{title:m.operation_ok_title,icon:"icon-ok",onClick:T},void 0,!1,{fileName:$0,lineNumber:36,columnNumber:10},this)}var Y0="C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\operations\\Cancel\\index.tsx";function W0(){const l=vp(),d=hp(),y=Cr(),x=R.exports.useCallback(()=>{l("onCancel"),d()},[l,d]);return ue.exports.jsxDEV(Zn,{title:y.operation_cancel_title,icon:"icon-cancel",onClick:x},void 0,!1,{fileName:Y0,lineNumber:17,columnNumber:10},this)}var I0="C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\operations\\Save\\index.tsx";function q0(){const{image:l,width:d,height:y,history:x,bounds:h,lang:m}=mn(),s=ba(),[,S]=Pn(),z=vp(),k=hp(),T=R.exports.useCallback(()=>{S.clearSelect(),setTimeout(()=>{!s.current||!l||!h||Us({image:l,width:d,height:y,history:x,bounds:h}).then(D=>{z("onSave",D,h),k()})})},[s,S,l,d,y,x,h,z,k]);return ue.exports.jsxDEV(Zn,{title:m.operation_save_title,icon:"icon-save",onClick:T},void 0,!1,{fileName:I0,lineNumber:36,columnNumber:10},this)}var G0="C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\operations\\Redo\\index.tsx";function X0(){const l=Cr(),[d,y]=Pn(),x=R.exports.useCallback(()=>{y.redo()},[y]);return ue.exports.jsxDEV(Zn,{title:l.operation_redo_title,icon:"icon-redo",disabled:!d.stack.length||d.stack.length-1===d.index,onClick:x},void 0,!1,{fileName:G0,lineNumber:15,columnNumber:5},this)}var Q0="C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\operations\\Undo\\index.tsx";function K0(){const l=Cr(),[d,y]=Pn(),x=R.exports.useCallback(()=>{y.undo()},[y]);return ue.exports.jsxDEV(Zn,{title:l.operation_undo_title,icon:"icon-undo",disabled:d.index===-1,onClick:x},void 0,!1,{fileName:Q0,lineNumber:15,columnNumber:5},this)}var lp="C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\ScreenshotsSize\\index.tsx",nb=R.exports.memo(function({value:d,onChange:y}){const x=[3,6,9];return ue.exports.jsxDEV("div",{className:"screenshots-size",children:x.map(h=>{const m=["screenshots-size-item"];return h===d&&m.push("screenshots-size-active"),ue.exports.jsxDEV("div",{className:m.join(" "),onClick:()=>y&&y(h),children:ue.exports.jsxDEV("div",{className:"screenshots-size-pointer",style:{width:h*1.8,height:h*1.8}},void 0,!1,{fileName:lp,lineNumber:22,columnNumber:13},this)},h,!1,{fileName:lp,lineNumber:21,columnNumber:11},this)})},void 0,!1,{fileName:lp,lineNumber:12,columnNumber:5},this)});function Ji(l){const d=Ki();R.exports.useEffect(()=>(d.on("mousedown",l),()=>{d.off("mousedown",l)}),[l,d])}function Zi(l){const d=Ki();R.exports.useEffect(()=>(d.on("mousemove",l),()=>{d.off("mousemove",l)}),[l,d])}function eo(l){const d=Ki();R.exports.useEffect(()=>(d.on("mouseup",l),()=>{d.off("mouseup",l)}),[l,d])}var Bg="C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\operations\\Mosaic\\index.tsx";function Ms(l,d,y){if(!y)return[0,0,0,0];const{data:x,width:h}=y,m=d*h*4+l*4;return Array.from(x.slice(m,m+4))}function J0(l,d){const{tiles:y,size:x}=d.data;y.forEach(h=>{const m=Math.round(h.color[0]),s=Math.round(h.color[1]),S=Math.round(h.color[2]),z=h.color[3]/255;l.fillStyle=`rgba(${m}, ${s}, ${S}, ${z})`,l.fillRect(h.x-x/2,h.y-x/2,x,x)})}function Z0(){const l=Cr(),{image:d,width:y,height:x}=mn(),[h,m]=ga(),s=ba(),[S,z]=Pn(),[k]=Qi(),[,T]=ya(),[D,N]=R.exports.useState(3),E=R.exports.useRef(null),L=R.exports.useRef(null),te=h==="Mosaic",G=R.exports.useCallback(()=>{m.set("Mosaic"),T.set("crosshair")},[m,T]),re=R.exports.useCallback(()=>{te||(G(),z.clearSelect())},[te,G,z]),X=R.exports.useCallback(_=>{if(!te||L.current||!E.current||!s.current)return;const Y=s.current.canvas.getBoundingClientRect(),q=_.clientX-Y.x,K=_.clientY-Y.y,pe=D*2;L.current={name:"Mosaic",type:ft.Source,data:{size:pe,tiles:[{x:q,y:K,color:Ms(q,K,E.current)}]},editHistory:[],draw:J0}},[te,D,s]),W=R.exports.useCallback(_=>{if(!te||!L.current||!s.current||!E.current)return;const Y=s.current.canvas.getBoundingClientRect(),q=_.clientX-Y.x,K=_.clientY-Y.y,pe=L.current.data.size,Ce=L.current.data.tiles;let ce=Ce[Ce.length-1];if(!ce)Ce.push({x:q,y:K,color:Ms(q,K,E.current)});else{const Ze=ce.x-q,de=ce.y-K;let De=Math.sqrt(Ze**2+de**2);const He=-de/De,Ie=-Ze/De;for(;De>pe;){const Ot=Math.floor(ce.x+pe*Ie),at=Math.floor(ce.y+pe*He);ce={x:Ot,y:at,color:Ms(Ot,at,E.current)},Ce.push(ce),De-=pe}De>pe/2&&Ce.push({x:q,y:K,color:Ms(q,K,E.current)})}S.top!==L.current?z.push(L.current):z.set(S)},[te,s,S,z]),H=R.exports.useCallback(()=>{!te||(L.current=null)},[te]);return Ji(X),Zi(W),eo(H),R.exports.useEffect(()=>{if(!k||!d||!te)return;const _=document.createElement("canvas"),Y=_.getContext("2d");if(!Y)return;_.width=k.width,_.height=k.height;const q=d.naturalWidth/y,K=d.naturalHeight/x;Y.drawImage(d,k.x*q,k.y*K,k.width*q,k.height*K,0,0,k.width,k.height),E.current=Y.getImageData(0,0,k.width,k.height)},[y,x,k,d,te]),ue.exports.jsxDEV(Zn,{title:l.operation_mosaic_title,icon:"icon-mosaic",checked:te,onClick:re,option:ue.exports.jsxDEV(nb,{value:D,onChange:N},void 0,!1,{fileName:Bg,lineNumber:220,columnNumber:15},this)},void 0,!1,{fileName:Bg,lineNumber:215,columnNumber:5},this)}var Fg="C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\ScreenshotsColor\\index.tsx",e_=R.exports.memo(function({value:d,onChange:y}){const x=["#ee5126","#fceb4d","#90e746","#51c0fa","#7a7a7a","#ffffff"];return ue.exports.jsxDEV("div",{className:"screenshots-color",children:x.map(h=>{const m=["screenshots-color-item"];return h===d&&m.push("screenshots-color-active"),ue.exports.jsxDEV("div",{className:m.join(" "),style:{backgroundColor:h},onClick:()=>y&&y(h)},h,!1,{fileName:Fg,lineNumber:19,columnNumber:11},this)})},void 0,!1,{fileName:Fg,lineNumber:12,columnNumber:5},this)});var sp="C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\ScreenshotsSizeColor\\index.tsx",_u=R.exports.memo(function({size:d,color:y,onSizeChange:x,onColorChange:h}){return ue.exports.jsxDEV("div",{className:"screenshots-sizecolor",children:[ue.exports.jsxDEV(nb,{value:d,onChange:x},void 0,!1,{fileName:sp,lineNumber:21,columnNumber:7},this),ue.exports.jsxDEV(e_,{value:y,onChange:h},void 0,!1,{fileName:sp,lineNumber:22,columnNumber:7},this)]},void 0,!0,{fileName:sp,lineNumber:20,columnNumber:5},this)});const t_=`
|
|
209
|
+
Check the top-level render call using <`+ae+">.")}return B}}function ar(g,B){{if(!g._store||g._store.validated||g.key!=null)return;g._store.validated=!0;var ae=Ir(B);if(en[ae])return;en[ae]=!0;var me="";g&&g._owner&&g._owner!==Se.current&&(me=" It was passed a child from "+De(g._owner.type)+"."),$e(g),K('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',ae,me),$e(null)}}function Er(g,B){{if(typeof g!="object")return;if(Array.isArray(g))for(var ae=0;ae<g.length;ae++){var me=g[ae];ot(me)&&ar(me,B)}else if(ot(g))g._store&&(g._store.validated=!0);else if(g){var Oe=Y(g);if(typeof Oe=="function"&&Oe!==g.entries)for(var Ae=Oe.call(g),_e;!(_e=Ae.next()).done;)ot(_e.value)&&ar(_e.value,B)}}}function qr(g){{var B=g.type;if(B==null||typeof B=="string")return;var ae;if(typeof B=="function")ae=B.propTypes;else if(typeof B=="object"&&(B.$$typeof===k||B.$$typeof===N))ae=B.propTypes;else return;if(ae){var me=De(B);Pr(ae,g.props,"prop",me,g)}else if(B.PropTypes!==void 0&&!it){it=!0;var Oe=De(B);K("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",Oe||"Unknown")}typeof B.getDefaultProps=="function"&&!B.getDefaultProps.isReactClassApproved&&K("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}function Wn(g){{for(var B=Object.keys(g.props),ae=0;ae<B.length;ae++){var me=B[ae];if(me!=="children"&&me!=="key"){$e(g),K("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",me),$e(null);break}}g.ref!==null&&($e(g),K("Invalid attribute `ref` supplied to `React.Fragment`."),$e(null))}}function ir(g,B,ae,me,Oe,Ae){{var _e=ce(g);if(!_e){var Ee="";(g===void 0||typeof g=="object"&&g!==null&&Object.keys(g).length===0)&&(Ee+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");var we=Xe(Oe);we?Ee+=we:Ee+=_t();var Qe;g===null?Qe="null":Array.isArray(g)?Qe="array":g!==void 0&&g.$$typeof===x?(Qe="<"+(De(g.type)||"Unknown")+" />",Ee=" Did you accidentally export a JSX literal instead of a component?"):Qe=typeof g,K("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",Qe,Ee)}var ut=fe(g,B,ae,Oe,Ae);if(ut==null)return ut;if(_e){var At=B.children;if(At!==void 0)if(me)if(Array.isArray(At)){for(var Ut=0;Ut<At.length;Ut++)Er(At[Ut],g);Object.freeze&&Object.freeze(At)}else K("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else Er(At,g)}return g===l.Fragment?Wn(ut):qr(ut),ut}}var In=ir;l.jsxDEV=In})()})(tb);ue.exports=tb;var qi="C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\ScreenshotsMagnifier\\index.tsx";const Gi=100,Xi=80;var M0=R.exports.memo(function({x:d,y}){const{width:x,height:h,image:m}=mn(),s=Cr(),[S,z]=R.exports.useState(null),k=R.exports.useRef(null),T=R.exports.useRef(null),D=R.exports.useRef(null),[N,E]=R.exports.useState("000000");return R.exports.useLayoutEffect(()=>{if(!k.current)return;const L=k.current.getBoundingClientRect();let te=d+20,G=y+20;te+L.width>x&&(te=d-L.width-20),G+L.height>h&&(G=y-L.height-20),te<0&&(te=0),G<0&&(G=0),z({x:te,y:G})},[x,h,d,y]),R.exports.useEffect(()=>{if(!m||!T.current){D.current=null;return}if(D.current||(D.current=T.current.getContext("2d")),!D.current)return;const L=D.current;L.clearRect(0,0,Gi,Xi);const te=m.naturalWidth/x,G=m.naturalHeight/h;L.drawImage(m,d*te-Gi/2,y*G-Xi/2,Gi,Xi,0,0,Gi,Xi);const{data:re}=L.getImageData(Math.floor(Gi/2),Math.floor(Xi/2),1,1),X=Array.from(re.slice(0,3)).map(W=>W>=16?W.toString(16):`0${W.toString(16)}`).join("").toUpperCase();E(X)},[x,h,m,d,y]),ue.exports.jsxDEV("div",{ref:k,className:"screenshots-magnifier",style:{transform:`translate(${S==null?void 0:S.x}px, ${S==null?void 0:S.y}px)`},children:[ue.exports.jsxDEV("div",{className:"screenshots-magnifier-body",children:ue.exports.jsxDEV("canvas",{ref:T,className:"screenshots-magnifier-body-canvas",width:Gi,height:Xi},void 0,!1,{fileName:qi,lineNumber:97,columnNumber:9},this)},void 0,!1,{fileName:qi,lineNumber:96,columnNumber:7},this),ue.exports.jsxDEV("div",{className:"screenshots-magnifier-footer",children:[ue.exports.jsxDEV("div",{className:"screenshots-magnifier-footer-item",children:[s.magnifier_position_label,": (",d,",",y,")"]},void 0,!0,{fileName:qi,lineNumber:105,columnNumber:9},this),ue.exports.jsxDEV("div",{className:"screenshots-magnifier-footer-item",children:["RGB: #",N]},void 0,!0,{fileName:qi,lineNumber:108,columnNumber:9},this)]},void 0,!0,{fileName:qi,lineNumber:104,columnNumber:7},this)]},void 0,!0,{fileName:qi,lineNumber:89,columnNumber:5},this)});function A0({x:l,y:d},{x:y,y:x},h,m){return l>y&&([l,y]=[y,l]),d>x&&([d,x]=[x,d]),l<0&&(l=0),y>h&&(y=h),d<0&&(d=0),x>m&&(x=m),{x:l,y:d,width:y-l,height:x-d}}var Ns="C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\ScreenshotsBackground\\index.tsx",U0=R.exports.memo(function(){const{url:d,image:y,width:x,height:h}=mn(),[m,s]=Qi(),S=R.exports.useRef(null),z=R.exports.useRef(null),k=R.exports.useRef(!1),[T,D]=R.exports.useState(null),N=R.exports.useCallback((L,te)=>{if(!S.current)return;const{x:G,y:re}=S.current.getBoundingClientRect();s.set(A0({x:L.x-G,y:L.y-re},{x:te.x-G,y:te.y-re},x,h))},[x,h,s]),E=R.exports.useCallback(L=>{z.current||m||L.button!==0||(z.current={x:L.clientX,y:L.clientY},k.current=!1)},[m]);return R.exports.useEffect(()=>{const L=G=>{if(S.current){const re=S.current.getBoundingClientRect();G.clientX<re.left||G.clientY<re.top||G.clientX>re.right||G.clientY>re.bottom?D(null):D({x:G.clientX-re.x,y:G.clientY-re.y})}!z.current||(N(z.current,{x:G.clientX,y:G.clientY}),k.current=!0)},te=G=>{!z.current||(k.current&&N(z.current,{x:G.clientX,y:G.clientY}),z.current=null,k.current=!1)};return window.addEventListener("mousemove",L),window.addEventListener("mouseup",te),()=>{window.removeEventListener("mousemove",L),window.removeEventListener("mouseup",te)}},[N]),R.exports.useLayoutEffect(()=>{(!y||m)&&D(null)},[y,m]),!d||!y?null:ue.exports.jsxDEV("div",{ref:S,className:"screenshots-background",onMouseDown:E,children:[ue.exports.jsxDEV("img",{className:"screenshots-background-image",src:d},void 0,!1,{fileName:Ns,lineNumber:121,columnNumber:7},this),ue.exports.jsxDEV("div",{className:"screenshots-background-mask"},void 0,!1,{fileName:Ns,lineNumber:122,columnNumber:7},this),T&&!m&&ue.exports.jsxDEV(M0,{x:T==null?void 0:T.x,y:T==null?void 0:T.y},void 0,!1,{fileName:Ns,lineNumber:123,columnNumber:31},this)]},void 0,!0,{fileName:Ns,lineNumber:120,columnNumber:5},this)});function ya(){const{cursor:l}=mn(),{setCursor:d}=Du(),y=R.exports.useCallback(h=>{d==null||d(h)},[d]),x=R.exports.useCallback(()=>{d==null||d("move")},[d]);return[l,{set:y,reset:x}]}function Ki(){const{emiterRef:l}=mn(),d=R.exports.useCallback((m,s)=>{const S=l.current;Array.isArray(S[m])?S[m].push(s):S[m]=[s]},[l]),y=R.exports.useCallback((m,s)=>{const S=l.current;if(Array.isArray(S[m])){const z=S[m].findIndex(k=>k===s);z!==-1&&S[m].splice(z,1)}},[l]),x=R.exports.useCallback((m,...s)=>{const S=l.current;Array.isArray(S[m])&&S[m].forEach(z=>z(...s))},[l]),h=R.exports.useCallback(()=>{l.current={}},[l]);return{on:d,off:y,emit:x,reset:h}}function Pn(){const{history:l}=mn(),{setHistory:d}=Du(),y=R.exports.useCallback(T=>{const{index:D,stack:N}=l;N.forEach(E=>{E.type===ft.Source&&(E.isSelected=!1)}),T.type===ft.Source?T.isSelected=!0:T.type===ft.Edit&&(T.source.isSelected=!0),N.splice(D+1),N.push(T),d==null||d({index:N.length-1,stack:N})},[l,d]),x=R.exports.useCallback(()=>{const{stack:T}=l;T.pop(),d==null||d({index:T.length-1,stack:T})},[l,d]),h=R.exports.useCallback(()=>{const{index:T,stack:D}=l,N=D[T];N&&(N.type===ft.Source?N.isSelected=!1:N.type===ft.Edit&&N.source.editHistory.pop()),d==null||d({index:T<=0?-1:T-1,stack:D})},[l,d]),m=R.exports.useCallback(()=>{const{index:T,stack:D}=l,N=D[T+1];N&&(N.type===ft.Source?N.isSelected=!1:N.type===ft.Edit&&N.source.editHistory.push(N)),d==null||d({index:T>=D.length-1?D.length-1:T+1,stack:D})},[l,d]),s=R.exports.useCallback(T=>{d==null||d({...T})},[d]),S=R.exports.useCallback(T=>{l.stack.forEach(D=>{D.type===ft.Source&&(D===T?D.isSelected=!0:D.isSelected=!1)}),d==null||d({...l})},[l,d]),z=R.exports.useCallback(()=>{l.stack.forEach(T=>{T.type===ft.Source&&(T.isSelected=!1)}),d==null||d({...l})},[l,d]),k=R.exports.useCallback(()=>{d==null||d({index:-1,stack:[]})},[d]);return[{index:l.index,stack:l.stack,top:l.stack.slice(l.index,l.index+1)[0]},{push:y,pop:x,undo:h,redo:m,set:s,select:S,clearSelect:z,reset:k}]}function ga(){const{operation:l}=mn(),{setOperation:d}=Du(),y=R.exports.useCallback(h=>{d==null||d(h)},[d]),x=R.exports.useCallback(()=>{d==null||d(void 0)},[d]);return[l,{set:y,reset:x}]}function z0({x:l,y:d},{x:y,y:x},h,m,s,S){return l>y&&([l,y]=[y,l]),d>x&&([d,x]=[x,d]),l<0&&(l=0,S==="move"&&(y=h.width)),y>m&&(y=m,S==="move"&&(l=y-h.width)),d<0&&(d=0,S==="move"&&(x=h.height)),x>s&&(x=s,S==="move"&&(d=x-h.height)),{x:l,y:d,width:Math.max(y-l,1),height:Math.max(x-d,1)}}function L0(l,d,y,x){const h=l.clientX-y.x,m=l.clientY-y.y;let s=x.x,S=x.y,z=x.x+x.width,k=x.y+x.height;switch(d){case"top":S+=m;break;case"top-right":z+=h,S+=m;break;case"right":z+=h;break;case"right-bottom":z+=h,k+=m;break;case"bottom":k+=m;break;case"bottom-left":s+=h,k+=m;break;case"left":s+=h;break;case"left-top":s+=h,S+=m;break;case"move":s+=h,S+=m,z+=h,k+=m;break}return[{x:s,y:S},{x:z,y:k}]}function j0(l,d,y,x){if(!d)return!1;const h=document.createElement("canvas");h.width=l.width,h.height=l.height;const m=h.getContext("2d");if(!m)return!1;const{left:s,top:S}=d.getBoundingClientRect(),z=x.clientX-s,k=x.clientY-S;return[...y.stack.slice(0,y.index+1)].reverse().find(D=>{var N;return D.type!==ft.Source?!1:(m.clearRect(0,0,l.width,l.height),(N=D.isHit)==null?void 0:N.call(D,m,D,{x:z,y:k}))})}var Za="C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\ScreenshotsCanvas\\index.tsx";const H0=["top","right","bottom","left"],V0=["top","top-right","right","right-bottom","bottom","bottom-left","left","left-top"];var B0=R.exports.memo(R.exports.forwardRef(function(d,y){const{url:x,image:h,width:m,height:s}=mn(),S=Ki(),[z]=Pn(),[k]=ya(),[T,D]=Qi(),[N]=ga(),E=R.exports.useRef(),L=R.exports.useRef(null),te=R.exports.useRef(null),G=R.exports.useRef(null),re=R.exports.useRef(null),X=R.exports.useCallback(()=>{if(!T||!re.current)return;const _=re.current;_.imageSmoothingEnabled=!0,_.imageSmoothingQuality="low",_.clearRect(0,0,T.width,T.height),z.stack.slice(0,z.index+1).forEach(Y=>{Y.type===ft.Source&&Y.draw(_,Y)})},[T,re,z]),W=R.exports.useCallback((_,Y)=>{if(!(_.button!==0||!T))if(!N)E.current=Y,L.current={x:_.clientX,y:_.clientY},te.current={x:T.x,y:T.y,width:T.width,height:T.height};else{const q=j0(T,G.current,z,_.nativeEvent);q?S.emit("drawselect",q,_.nativeEvent):S.emit("mousedown",_.nativeEvent)}},[T,N,S,z]),H=R.exports.useCallback(_=>{if(!E.current||!L.current||!te.current||!T)return;const Y=L0(_,E.current,L.current,te.current);D.set(z0(Y[0],Y[1],T,m,s,E.current))},[m,s,T,D]);return R.exports.useLayoutEffect(()=>{if(!h||!T||!G.current){re.current=null;return}re.current||(re.current=G.current.getContext("2d")),X()},[h,T,X]),R.exports.useEffect(()=>{const _=q=>{if(N)S.emit("mousemove",q);else{if(!E.current||!L.current||!te.current)return;H(q)}},Y=q=>{if(N)S.emit("mouseup",q);else{if(!E.current||!L.current||!te.current)return;H(q),E.current=void 0,L.current=null,te.current=null}};return window.addEventListener("mousemove",_),window.addEventListener("mouseup",Y),()=>{window.removeEventListener("mousemove",_),window.removeEventListener("mouseup",Y)}},[H,N,S]),R.exports.useImperativeHandle(y,()=>re.current),ue.exports.jsxDEV("div",{className:"screenshots-canvas",style:{width:(T==null?void 0:T.width)||0,height:(T==null?void 0:T.height)||0,transform:T?`translate(${T.x}px, ${T.y}px)`:"none"},children:[ue.exports.jsxDEV("div",{className:"screenshots-canvas-body",children:[ue.exports.jsxDEV("img",{className:"screenshots-canvas-image",src:x,style:{width:m,height:s,transform:T?`translate(${-T.x}px, ${-T.y}px)`:"none"}},void 0,!1,{fileName:Za,lineNumber:183,columnNumber:11},this),ue.exports.jsxDEV("canvas",{ref:G,className:"screenshots-canvas-panel",width:(T==null?void 0:T.width)||0,height:(T==null?void 0:T.height)||0},void 0,!1,{fileName:Za,lineNumber:192,columnNumber:11},this)]},void 0,!0,{fileName:Za,lineNumber:181,columnNumber:9},this),ue.exports.jsxDEV("div",{className:"screenshots-canvas-mask",style:{cursor:k},onMouseDown:_=>W(_,"move")},void 0,!1,{fileName:Za,lineNumber:199,columnNumber:9},this),H0.map(_=>ue.exports.jsxDEV("div",{className:`screenshots-canvas-border-${_}`},_,!1,{fileName:Za,lineNumber:207,columnNumber:18},this)),T&&V0.map(_=>ue.exports.jsxDEV("div",{className:`screenshots-canvas-point-${_}`,onMouseDown:Y=>W(Y,_)},_,!1,{fileName:Za,lineNumber:211,columnNumber:13},this))]},void 0,!0,{fileName:Za,lineNumber:173,columnNumber:7},this)}));function vp(){const l=Du();return R.exports.useCallback((y,...x)=>{var h;(h=l.call)==null||h.call(l,y,...x)},[l])}function ba(){const{canvasContextRef:l}=mn();return l}function hp(){const l=Ki(),[,d]=Qi(),[,y]=ya(),[,x]=Pn(),[,h]=ga();return R.exports.useCallback(()=>{l.reset(),x.reset(),d.reset(),y.reset(),h.reset()},[l,x,d,y,h])}var op="C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\ScreenshotsOption\\index.tsx",F0=R.exports.memo(function({open:d,content:y,children:x}){var te,G;const h=R.exports.useRef(null),m=R.exports.useRef(null),s=R.exports.useRef(null),S=R.exports.useContext(ub),[z,k]=R.exports.useState("bottom"),[T,D]=R.exports.useState(null),[N,E]=R.exports.useState(0),L=()=>(m.current||(m.current=document.createElement("div")),m.current);return R.exports.useEffect(()=>{const re=L();return d&&document.body.appendChild(re),()=>{re.remove()}},[d]),R.exports.useEffect(()=>{if(!d||!S||!h.current||!s.current)return;const re=h.current.getBoundingClientRect(),X=s.current.getBoundingClientRect();let W=z,H=re.left+re.width/2,_=re.top+re.height,Y=N;if(H+X.width/2>S.x+S.width){const q=H;H=S.x+S.width-X.width/2,Y=q-H}if(H<S.x+X.width/2){const q=H;H=S.x+X.width/2,Y=q-H}_>window.innerHeight-X.height&&(W==="bottom"&&(W="top"),_=re.top-X.height),_<0&&(W==="top"&&(W="bottom"),_=re.top+re.height),W!==z&&k(W),((T==null?void 0:T.x)!==H||T.y!==_)&&D({x:H,y:_}),Y!==N&&E(Y)}),ue.exports.jsxDEV(ue.exports.Fragment,{children:[R.exports.cloneElement(x,{ref:h}),d&&y&&zs.exports.createPortal(ue.exports.jsxDEV("div",{ref:s,className:"screenshots-option",style:{visibility:T?"visible":"hidden",transform:`translate(${(te=T==null?void 0:T.x)!=null?te:0}px, ${(G=T==null?void 0:T.y)!=null?G:0}px)`},"data-placement":z,children:[ue.exports.jsxDEV("div",{className:"screenshots-option-container",children:y},void 0,!1,{fileName:op,lineNumber:120,columnNumber:13},this),ue.exports.jsxDEV("div",{className:"screenshots-option-arrow",style:{marginLeft:N}},void 0,!1,{fileName:op,lineNumber:121,columnNumber:13},this)]},void 0,!0,{fileName:op,lineNumber:111,columnNumber:11},this),L())]},void 0,!0)});var up="C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\ScreenshotsButton\\index.tsx",Zn=R.exports.memo(function({title:d,icon:y,checked:x,disabled:h,option:m,onClick:s}){const S=["screenshots-button"],z=R.exports.useCallback(k=>{h||!s||s(k)},[h,s]);return x&&S.push("screenshots-button-checked"),h&&S.push("screenshots-button-disabled"),ue.exports.jsxDEV(F0,{open:x,content:m,children:ue.exports.jsxDEV("div",{className:S.join(" "),title:d,onClick:z,children:ue.exports.jsxDEV("span",{className:y},void 0,!1,{fileName:up,lineNumber:44,columnNumber:9},this)},void 0,!1,{fileName:up,lineNumber:43,columnNumber:7},this)},void 0,!1,{fileName:up,lineNumber:42,columnNumber:5},this)}),$0="C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\operations\\Ok\\index.tsx";function P0(){const{image:l,width:d,height:y,history:x,bounds:h,lang:m}=mn(),s=ba(),[,S]=Pn(),z=vp(),k=hp(),T=R.exports.useCallback(()=>{S.clearSelect(),setTimeout(()=>{!s.current||!l||!h||Us({image:l,width:d,height:y,history:x,bounds:h}).then(D=>{z("onOk",D,h),k()})})},[s,S,l,d,y,x,h,z,k]);return ue.exports.jsxDEV(Zn,{title:m.operation_ok_title,icon:"icon-ok",onClick:T},void 0,!1,{fileName:$0,lineNumber:36,columnNumber:10},this)}var Y0="C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\operations\\Cancel\\index.tsx";function W0(){const l=vp(),d=hp(),y=Cr(),x=R.exports.useCallback(()=>{l("onCancel"),d()},[l,d]);return ue.exports.jsxDEV(Zn,{title:y.operation_cancel_title,icon:"icon-cancel",onClick:x},void 0,!1,{fileName:Y0,lineNumber:17,columnNumber:10},this)}var I0="C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\operations\\Save\\index.tsx";function q0(){const{image:l,width:d,height:y,history:x,bounds:h,lang:m}=mn(),s=ba(),[,S]=Pn(),z=vp(),k=hp(),T=R.exports.useCallback(()=>{S.clearSelect(),setTimeout(()=>{!s.current||!l||!h||Us({image:l,width:d,height:y,history:x,bounds:h}).then(D=>{z("onSave",D,h),k()})})},[s,S,l,d,y,x,h,z,k]);return ue.exports.jsxDEV(Zn,{title:m.operation_save_title,icon:"icon-save",onClick:T},void 0,!1,{fileName:I0,lineNumber:36,columnNumber:10},this)}var G0="C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\operations\\Redo\\index.tsx";function X0(){const l=Cr(),[d,y]=Pn(),x=R.exports.useCallback(()=>{y.redo()},[y]);return ue.exports.jsxDEV(Zn,{title:l.operation_redo_title,icon:"icon-redo",disabled:!d.stack.length||d.stack.length-1===d.index,onClick:x},void 0,!1,{fileName:G0,lineNumber:15,columnNumber:5},this)}var Q0="C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\operations\\Undo\\index.tsx";function K0(){const l=Cr(),[d,y]=Pn(),x=R.exports.useCallback(()=>{y.undo()},[y]);return ue.exports.jsxDEV(Zn,{title:l.operation_undo_title,icon:"icon-undo",disabled:d.index===-1,onClick:x},void 0,!1,{fileName:Q0,lineNumber:15,columnNumber:5},this)}var lp="C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\ScreenshotsSize\\index.tsx",nb=R.exports.memo(function({value:d,onChange:y}){const x=[3,6,9];return ue.exports.jsxDEV("div",{className:"screenshots-size",children:x.map(h=>{const m=["screenshots-size-item"];return h===d&&m.push("screenshots-size-active"),ue.exports.jsxDEV("div",{className:m.join(" "),onClick:()=>y&&y(h),children:ue.exports.jsxDEV("div",{className:"screenshots-size-pointer",style:{width:h*1.8,height:h*1.8}},void 0,!1,{fileName:lp,lineNumber:22,columnNumber:13},this)},h,!1,{fileName:lp,lineNumber:21,columnNumber:11},this)})},void 0,!1,{fileName:lp,lineNumber:12,columnNumber:5},this)});function Ji(l){const d=Ki();R.exports.useEffect(()=>(d.on("mousedown",l),()=>{d.off("mousedown",l)}),[l,d])}function Zi(l){const d=Ki();R.exports.useEffect(()=>(d.on("mousemove",l),()=>{d.off("mousemove",l)}),[l,d])}function eo(l){const d=Ki();R.exports.useEffect(()=>(d.on("mouseup",l),()=>{d.off("mouseup",l)}),[l,d])}var Bg="C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\operations\\Mosaic\\index.tsx";function Ms(l,d,y){if(!y)return[0,0,0,0];const{data:x,width:h}=y,m=d*h*4+l*4;return Array.from(x.slice(m,m+4))}function J0(l,d){const{tiles:y,size:x}=d.data;y.forEach(h=>{const m=Math.round(h.color[0]),s=Math.round(h.color[1]),S=Math.round(h.color[2]),z=h.color[3]/255;l.fillStyle=`rgba(${m}, ${s}, ${S}, ${z})`,l.fillRect(h.x-x/2,h.y-x/2,x,x)})}function Z0(){const l=Cr(),{image:d,width:y,height:x}=mn(),[h,m]=ga(),s=ba(),[S,z]=Pn(),[k]=Qi(),[,T]=ya(),[D,N]=R.exports.useState(3),E=R.exports.useRef(null),L=R.exports.useRef(null),te=h==="Mosaic",G=R.exports.useCallback(()=>{m.set("Mosaic"),T.set("crosshair")},[m,T]),re=R.exports.useCallback(()=>{te||(G(),z.clearSelect())},[te,G,z]),X=R.exports.useCallback(_=>{if(!te||L.current||!E.current||!s.current)return;const Y=s.current.canvas.getBoundingClientRect(),q=_.clientX-Y.x,K=_.clientY-Y.y,pe=D*2;L.current={name:"Mosaic",type:ft.Source,data:{size:pe,tiles:[{x:q,y:K,color:Ms(q,K,E.current)}]},editHistory:[],draw:J0}},[te,D,s]),W=R.exports.useCallback(_=>{if(!te||!L.current||!s.current||!E.current)return;const Y=s.current.canvas.getBoundingClientRect(),q=_.clientX-Y.x,K=_.clientY-Y.y,pe=L.current.data.size,Ce=L.current.data.tiles;let ce=Ce[Ce.length-1];if(!ce)Ce.push({x:q,y:K,color:Ms(q,K,E.current)});else{const Ze=ce.x-q,de=ce.y-K;let De=Math.sqrt(Ze**2+de**2);const He=-de/De,Ie=-Ze/De;for(;De>pe;){const Ot=Math.floor(ce.x+pe*Ie),at=Math.floor(ce.y+pe*He);ce={x:Ot,y:at,color:Ms(Ot,at,E.current)},Ce.push(ce),De-=pe}De>pe/2&&Ce.push({x:q,y:K,color:Ms(q,K,E.current)})}S.top!==L.current?z.push(L.current):z.set(S)},[te,s,S,z]),H=R.exports.useCallback(()=>{!te||(L.current=null)},[te]);return Ji(X),Zi(W),eo(H),R.exports.useEffect(()=>{if(!k||!d||!te)return;const _=document.createElement("canvas"),Y=_.getContext("2d");if(!Y)return;_.width=k.width,_.height=k.height;const q=d.naturalWidth/y,K=d.naturalHeight/x;Y.drawImage(d,k.x*q,k.y*K,k.width*q,k.height*K,0,0,k.width,k.height),E.current=Y.getImageData(0,0,k.width,k.height)},[y,x,k,d,te]),ue.exports.jsxDEV(Zn,{title:l.operation_mosaic_title,icon:"icon-mosaic",checked:te,onClick:re,option:ue.exports.jsxDEV(nb,{value:D,onChange:N},void 0,!1,{fileName:Bg,lineNumber:220,columnNumber:15},this)},void 0,!1,{fileName:Bg,lineNumber:215,columnNumber:5},this)}var Fg="C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\ScreenshotsColor\\index.tsx",e_=R.exports.memo(function({value:d,onChange:y}){const x=["#ee5126","#fceb4d","#90e746","#51c0fa","#7a7a7a","#ffffff"];return ue.exports.jsxDEV("div",{className:"screenshots-color",children:x.map(h=>{const m=["screenshots-color-item"];return h===d&&m.push("screenshots-color-active"),ue.exports.jsxDEV("div",{className:m.join(" "),style:{backgroundColor:h},onClick:()=>y&&y(h)},h,!1,{fileName:Fg,lineNumber:19,columnNumber:11},this)})},void 0,!1,{fileName:Fg,lineNumber:12,columnNumber:5},this)});var sp="C:\\Users\\nashaofu\\Documents\\Github\\screenshots\\packages\\react-screenshots\\src\\Screenshots\\ScreenshotsSizeColor\\index.tsx",_u=R.exports.memo(function({size:d,color:y,onSizeChange:x,onColorChange:h}){return ue.exports.jsxDEV("div",{className:"screenshots-sizecolor",children:[ue.exports.jsxDEV(nb,{value:d,onChange:x},void 0,!1,{fileName:sp,lineNumber:21,columnNumber:7},this),ue.exports.jsxDEV(e_,{value:y,onChange:h},void 0,!1,{fileName:sp,lineNumber:22,columnNumber:7},this)]},void 0,!0,{fileName:sp,lineNumber:20,columnNumber:5},this)});const t_=`
|
|
210
210
|
min-width: 0 !important;
|
|
211
211
|
width: 0 !important;
|
|
212
212
|
min-height: 0 !important;
|
package/electron/electron.html
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
<meta charset="utf-8" />
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
6
6
|
<title>react-screenshots</title>
|
|
7
|
-
<script type="module" crossorigin src="./assets/index.
|
|
7
|
+
<script type="module" crossorigin src="./assets/index.0d61ff16.js"></script>
|
|
8
8
|
<link rel="stylesheet" href="./assets/index.78c5dcbf.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"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}})),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=`
|
|
1
|
+
"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=`
|
|
2
2
|
min-width: 0 !important;
|
|
3
3
|
width: 0 !important;
|
|
4
4
|
min-height: 0 !important;
|
|
@@ -889,7 +889,7 @@ var ScreenshotsCanvas = memo(forwardRef(function ScreenshotsCanvas2(props, ref)
|
|
|
889
889
|
columnNumber: 18
|
|
890
890
|
}
|
|
891
891
|
});
|
|
892
|
-
}), resizePoints.map((resizePoint) => {
|
|
892
|
+
}), bounds && resizePoints.map((resizePoint) => {
|
|
893
893
|
return /* @__PURE__ */ React.createElement("div", {
|
|
894
894
|
key: resizePoint,
|
|
895
895
|
className: `screenshots-canvas-point-${resizePoint}`,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-screenshots",
|
|
3
|
-
"version": "0.5.
|
|
3
|
+
"version": "0.5.18",
|
|
4
4
|
"description": "a screenshot cropper tool by react",
|
|
5
5
|
"main": "./lib/react-screenshots.cjs.js",
|
|
6
6
|
"module": "./lib/react-screenshots.es.js",
|
|
@@ -39,8 +39,8 @@
|
|
|
39
39
|
"registry": "https://registry.npmjs.org/"
|
|
40
40
|
},
|
|
41
41
|
"peerDependencies": {
|
|
42
|
-
"react": "^17.0
|
|
43
|
-
"react-dom": "^17.0
|
|
42
|
+
"react": "^16.8 || ^17.0",
|
|
43
|
+
"react-dom": "^16.8 || ^17.0"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@types/react": "^17.0.38",
|
|
@@ -64,5 +64,5 @@
|
|
|
64
64
|
"typescript": "^4.5.5",
|
|
65
65
|
"vite": "^2.7.13"
|
|
66
66
|
},
|
|
67
|
-
"gitHead": "
|
|
67
|
+
"gitHead": "f4324d64f0d8952205d68cd1de999ab7f67a47b6"
|
|
68
68
|
}
|