react-sketch-ruler/lib/index.umd.cjs

> In using react, the zoom operation used for page presentation

(function(u,_){typeof exports=="object"&&typeof module<"u"?module.exports=_(require("react")):typeof define=="function"&&define.amd?define(["react"],_):(u=typeof globalThis<"u"?globalThis:u||self,u.SketchRuler=_(u.React))})(this,(function(u){"use strict";var _={exports:{}},oe={};var we;function Be(){if(we)return oe;we=1;var e=Symbol.for("react.transitional.element"),t=Symbol.for("react.fragment");function n(o,r,a){var m=null;if(a!==void 0&&(m=""+a),r.key!==void 0&&(m=""+r.key),"key"in r){a={};for(var p in r)p!=="key"&&(a[p]=r[p])}else a=r;return r=a.ref,{$$typeof:e,type:o,key:m,ref:r!==void 0?r:null,props:a}}return oe.Fragment=t,oe.jsx=n,oe.jsxs=n,oe}var be;function Ye(){return be||(be=1,_.exports=Be()),_.exports}var U=Ye();const Ue="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAAAXNSR0IArs4c6QAAAopJREFUOE/FlE9IVEEcx7+/N9ouds1Mu0QUSFZYdIgoUqQoKPBQHsKozpXE7jbTO/U8xLJvn6usBHWQ6hBFXupSkQeVbh0KJEPp0sH+eLGTsKs77xcj78m0ax0E8cHjzZv5zef3/c33xxA24KENYGJzoEEQbNNaN4Zh2OQ4znwYhr9c1/39vwrXVDo0NNS0tLR0GYB5D64BmAMwzMyvlFKz1es10Hw+f4mZ7wHYBeA9gNdENFepVOaEEM3M3OI4Thczn41gt6WUgQ3+C+r7/h0AWQD3mXnYqPA8L9nQ0HCemduIaFpKOWoAhUJhT6VSuQXgOjP3K6W8GLwKzeVyp4jonR0QBEErM48w8zFLyayUsjX+z+VyHhHdZebTSqkxM78CHRgYOKS1/ghgVErZY214RkQ7ADyRUj72ff8qgCtmXUrZGcf5vv8CwEUhxOF0Ov1pBRpla5dSdseBhUJhpznH6tIsZb1KqacW+BGArUaUXX63UuplHJTNZjuEEONSyhozfd/n6mQ1RkXZL2itz7mu+80EDA4ONi8vL/8AcM2UbikyR2BU9cSmmTU70YqKIAj2hWFo2uenlHK/BRg3Y2aeNO5GyU8S0ZbFxcUuz/NKEXAGQKPjOCcymcyX1dIi8DSAiWQyeaavr68cbSgCuBknYubnQoj+TCYzUywWE6VS6S2ADsdx2gxw1X3L7SNENMbMnwE8qK+vf5NKpRaMaeVyeW8ikfiaSqW+R7BuZr5BRMe11p2u607U9Gk8kc/ntzPzQwCmExYATDLzVBiGE0KIowAOADDf3QA+aK2VDaxRajto3K+rq+tl5nYAzQBamHmeiOYBTGmtR6ph/1Rqg9c73pz7dD1qN0TpHyNQRCUDJXrAAAAAAElFTkSuQmCC",ze="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAAAXNSR0IArs4c6QAAAjtJREFUOE/NlD9oFEEUxn9v9ghC0hpRUogIAUmniGAT/5Q2FrETPSNRJILg7RwimI0ox85eQFCEBGIUO1PYpFM0jSConQoBEZGgGPsgl+w+2eM2bC57SopAFqYZ3v7m+977ZoQt+GQLmGxPaBiGgYiMWWvXBHZUGoZhH3BERPYC+4F+4Keq/urt7b1RLpf/ZEBVHa9Wq0HWyg3QKIoGVPU8cA7wgK/pUtXPQJ8xZk+pVBpuNBqXUoUiEvi+P56fzTpo6+SbwHNg1lo7WzTITGEKXFlZeeB53tVCpa3CK8AFa+1cBgvD8LKIXAQOJkkyICJDeYVBEJS6u7s/qeoLa+1o+l9TqXNuBLhmjDlbqVQ+5ICjInIfOBPH8W9jzGCR5YmJiRNxHM+papgqzqDvgSlr7VTernPuO3An3c9bBt74vv+yrdaKyLDv+/1Sq9UGPc97nY9EVuycU2AQOA7cAm4Dr4D5TvVxHB9rKo2iaEFVp621Ln96FEUngaOqGmSxabVqsh3a2h+x1h5qQjNrae/yE4+iaCwDJkky73neTuBZe129Xk+H+BS4l7ZqLVIZ2BhzuFKpvMsDVXXWGPMxFdAedOfcKeCRqj7MYrUhpz09PfXl5eXrectFWXXODQHpOq2qd/95o/JXr6ura3J1dXU6SZIfwKKIHAD2tVYMPBGRx77vN10UXtO85fTkmZmZHUtLSzUR2QXsBhaAL6r6DXhbrVYXi1yss59GqOgub/bN3Z7v6X/tb9Zmp/q/kN8s+lJb8oEAAAAASUVORK5CYII=";typeof window<"u"&&(window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),typeof window.CustomEvent!="function"&&(window.CustomEvent=function(e,t){t=t||{bubbles:!1,cancelable:!1,detail:null};var n=document.createEvent("CustomEvent");return n.initCustomEvent(e,t.bubbles,t.cancelable,t.detail),n}));function Ae(e,t){let n=e.length;for(;n--;)if(e[n].pointerId===t.pointerId)return n;return-1}function me(e,t){let n;if(t.touches){n=0;for(const o of t.touches)o.pointerId=n++,me(e,o);return}n=Ae(e,t),n>-1&&e.splice(n,1),e.push(t)}function Ve(e,t){if(t.touches){for(;e.length;)e.pop();return}const n=Ae(e,t);n>-1&&e.splice(n,1)}function Ee(e){e=e.slice(0);let t=e.pop(),n;for(;n=e.pop();)t={clientX:(n.clientX-t.clientX)/2+t.clientX,clientY:(n.clientY-t.clientY)/2+t.clientY};return t}function pe(e){if(e.length<2)return 0;const t=e[0],n=e[1];return Math.sqrt(Math.pow(Math.abs(n.clientX-t.clientX),2)+Math.pow(Math.abs(n.clientY-t.clientY),2))}let re={down:"mousedown",move:"mousemove",up:"mouseup mouseleave"};typeof window<"u"&&(typeof window.PointerEvent=="function"?re={down:"pointerdown",move:"pointermove",up:"pointerup pointerleave pointercancel"}:typeof window.TouchEvent=="function"&&(re={down:"touchstart",move:"touchmove",up:"touchend touchcancel"}));function he(e,t,n,o){re[e].split(" ").forEach(r=>{t.addEventListener(r,n,o)})}function ye(e,t,n){re[e].split(" ").forEach(o=>{t.removeEventListener(o,n)})}const Ie=typeof document<"u"&&!!document.documentMode;let Se;function je(){return Se||(Se=document.createElement("div").style)}const Ce=["webkit","moz","ms"],le={};function ge(e){if(le[e])return le[e];const t=je();if(e in t)return le[e]=e;const n=e[0].toUpperCase()+e.slice(1);let o=Ce.length;for(;o--;){const r=`${Ce[o]}${n}`;if(r in t)return le[e]=r}}function ue(e,t){return parseFloat(t[ge(e)])||0}function ce(e,t,n=window.getComputedStyle(e)){const o=t==="border"?"Width":"";return{left:ue(`${t}Left${o}`,n),right:ue(`${t}Right${o}`,n),top:ue(`${t}Top${o}`,n),bottom:ue(`${t}Bottom${o}`,n)}}function ee(e,t,n){e.style[ge(t)]=n}function De(e,t){const n=ge("transform");ee(e,"transition",`${n} ${t.duration}ms ${t.easing}`)}function qe(e,{x:t,y:n,scale:o,isSVG:r},a){if(ee(e,"transform",`scale(${o}) translate(${t}px, ${n}px)`),r&&Ie){const m=window.getComputedStyle(e).getPropertyValue("transform");e.setAttribute("transform",m)}}function fe(e){const t=e.parentNode,n=window.getComputedStyle(e),o=window.getComputedStyle(t),r=e.getBoundingClientRect(),a=t.getBoundingClientRect();return{elem:{style:n,width:r.width,height:r.height,top:r.top,bottom:r.bottom,left:r.left,right:r.right,margin:ce(e,"margin",n),border:ce(e,"border",n)},parent:{style:o,width:a.width,height:a.height,top:a.top,bottom:a.bottom,left:a.left,right:a.right,padding:ce(t,"padding",o),border:ce(t,"border",o)}}}function Fe(e){let t=e;for(;t&&t.parentNode;){if(t.parentNode===document)return!0;t=t.parentNode instanceof ShadowRoot?t.parentNode.host:t.parentNode}return!1}function $e(e){return(e.getAttribute("class")||"").trim()}function Ge(e,t){return e.nodeType===1&&` ${$e(e)} `.indexOf(` ${t} `)>-1}function Qe(e,t){for(let n=e;n!=null;n=n.parentNode)if(Ge(n,t.excludeClass)||t.exclude.indexOf(n)>-1)return!0;return!1}const Ke=/^http:[\w\.\/]+svg$/;function Re(e){return Ke.test(e.namespaceURI)&&e.nodeName.toLowerCase()!=="svg"}function ke(e){const t={};for(const n in e)e.hasOwnProperty(n)&&(t[n]=e[n]);return t}const Me={animate:!1,canvas:!1,cursor:"move",disablePan:!1,disableZoom:!1,disableXAxis:!1,disableYAxis:!1,duration:200,easing:"ease-in-out",exclude:[],excludeClass:"panzoom-exclude",handleStartEvent:e=>{e.preventDefault(),e.stopPropagation()},maxScale:4,minScale:.125,overflow:"hidden",panOnlyWhenZoomed:!1,pinchAndPan:!1,relative:!1,setTransform:qe,startX:0,startY:0,startScale:1,step:.3,touchAction:"none"};function xe(e,t){if(!e)throw new Error("Panzoom requires an element as an argument");if(e.nodeType!==1)throw new Error("Panzoom requires an element with a nodeType of 1");if(!Fe(e))throw new Error("Panzoom should be called on elements that have been attached to the DOM");t={...Me,...t};const n=Re(e),o=e.parentNode;o.style.overflow=t.overflow,o.style.userSelect="none",o.style.touchAction=t.touchAction,(t.canvas?o:e).style.cursor=t.cursor,e.style.userSelect="none",e.style.touchAction=t.touchAction,ee(e,"transformOrigin",typeof t.origin=="string"?t.origin:n?"0 0":"50% 50%");function r(){o.style.overflow="",o.style.userSelect="",o.style.touchAction="",o.style.cursor="",e.style.cursor="",e.style.userSelect="",e.style.touchAction="",ee(e,"transformOrigin","")}function a(s={}){for(const l in s)s.hasOwnProperty(l)&&(t[l]=s[l]);(s.hasOwnProperty("cursor")||s.hasOwnProperty("canvas"))&&(o.style.cursor=e.style.cursor="",(t.canvas?o:e).style.cursor=t.cursor),s.hasOwnProperty("overflow")&&(o.style.overflow=s.overflow),s.hasOwnProperty("touchAction")&&(o.style.touchAction=s.touchAction,e.style.touchAction=s.touchAction)}let m=0,p=0,f=1,L=!1;b(t.startScale,{animate:!1,force:!0}),setTimeout(()=>{w(t.startX,t.startY,{animate:!1,force:!0})});function E(s,l,d){if(d.silent)return;const y=new CustomEvent(s,{detail:l});e.dispatchEvent(y)}function B(s,l,d){const y={x:m,y:p,scale:f,isSVG:n,originalEvent:d,dimsOut:{}};typeof l.animate=="boolean"&&(l.animate?De(e,l):ee(e,"transition","none")),l.setTransform(e,y,l);function i(){const h=fe(e);y.dimsOut=h,E(s,y,l),E("panzoomchange",y,l)}return l.animate?setTimeout(()=>{i()},l.duration+50):requestAnimationFrame(()=>{i()}),y}function C(s,l,d,y){const i={...t,...y},h={x:m,y:p,opts:i};if(!i.force&&(i.disablePan||i.panOnlyWhenZoomed&&f===i.startScale))return h;if(s=parseFloat(s),l=parseFloat(l),i.disableXAxis||(h.x=(i.relative?m:0)+s),i.disableYAxis||(h.y=(i.relative?p:0)+l),i.contain){const c=fe(e),A=c.elem.width/f,F=c.elem.height/f,Q=A*d,R=F*d,$=(Q-A)/2,W=(R-F)/2;if(i.contain==="inside"){const se=(-c.elem.margin.left-c.parent.padding.left+$)/d,ae=(c.parent.width-Q-c.parent.padding.left-c.elem.margin.left-c.parent.border.left-c.parent.border.right+$)/d;h.x=Math.max(Math.min(h.x,ae),se);const te=(-c.elem.margin.top-c.parent.padding.top+W)/d,ne=(c.parent.height-R-c.parent.padding.top-c.elem.margin.top-c.parent.border.top-c.parent.border.bottom+W)/d;h.y=Math.max(Math.min(h.y,ne),te)}else if(i.contain==="outside"){const se=(-(Q-c.parent.width)-c.parent.padding.left-c.parent.border.left-c.parent.border.right+$)/d,ae=($-c.parent.padding.left)/d;h.x=Math.max(Math.min(h.x,ae),se);const te=(-(R-c.parent.height)-c.parent.padding.top-c.parent.border.top-c.parent.border.bottom+W)/d,ne=(W-c.parent.padding.top)/d;h.y=Math.max(Math.min(h.y,ne),te)}}return i.roundPixels&&(h.x=Math.round(h.x),h.y=Math.round(h.y)),h}function v(s,l){const d={...t,...l},y={scale:f,opts:d};if(!d.force&&d.disableZoom)return y;let i=t.minScale,h=t.maxScale;if(d.contain){const c=fe(e),A=c.elem.width/f,F=c.elem.height/f;if(A>1&&F>1){const Q=c.parent.width-c.parent.border.left-c.parent.border.right,R=c.parent.height-c.parent.border.top-c.parent.border.bottom,$=Q/A,W=R/F;t.contain==="inside"?h=Math.min(h,$,W):t.contain==="outside"&&(i=Math.max(i,$,W))}}return y.scale=Math.min(Math.max(s,i),h),y}function w(s,l,d,y){const i=C(s,l,f,d);return m!==i.x||p!==i.y?(m=i.x,p=i.y,B("panzoompan",i.opts,y)):{x:m,y:p,scale:f,isSVG:n,originalEvent:y}}function b(s,l,d){const y=v(s,l),i=y.opts;if(!i.force&&i.disableZoom)return;s=y.scale;let h=m,c=p;if(i.focal){const F=i.focal;h=(F.x/s-F.x/f+m*s)/s,c=(F.y/s-F.y/f+p*s)/s}const A=C(h,c,s,{relative:!1,force:!0});return m=A.x,p=A.y,f=s,B("panzoomzoom",i,d)}function z(s,l){const d={...t,animate:!0,...l};return b(f*Math.exp((s?1:-1)*d.step),d)}function x(s){return z(!0,s)}function I(s){return z(!1,s)}function M(s,l,d,y){const i=fe(e),h={width:i.parent.width-i.parent.padding.left-i.parent.padding.right-i.parent.border.left-i.parent.border.right,height:i.parent.height-i.parent.padding.top-i.parent.padding.bottom-i.parent.border.top-i.parent.border.bottom};let c=l.clientX-i.parent.left-i.parent.padding.left-i.parent.border.left-i.elem.margin.left,A=l.clientY-i.parent.top-i.parent.padding.top-i.parent.border.top-i.elem.margin.top;n||(c-=i.elem.width/f/2,A-=i.elem.height/f/2);const F={x:c/h.width*(h.width*s),y:A/h.height*(h.height*s)};return b(s,{...d,animate:!1,focal:F},y)}function X(s,l){s.preventDefault();const d={...t,...l,animate:!1},y=(s.deltaY===0&&s.deltaX?s.deltaX:s.deltaY)<0?1:-1,i=v(f*Math.exp(y*d.step/3),d).scale;return M(i,s,d,s)}function G(s){const l={...t,animate:!0,force:!0,...s};f=v(l.startScale,l).scale;const d=C(l.startX,l.startY,f,l);return m=d.x,p=d.y,B("panzoomreset",l)}let j,O,g,N,S,q;const Y=[];function D(s){if(Qe(s.target,t))return;me(Y,s),L=!0,t.handleStartEvent(s),j=m,O=p,E("panzoomstart",{x:m,y:p,scale:f,isSVG:n,originalEvent:s},t);const l=Ee(Y);g=l.clientX,N=l.clientY,S=f,q=pe(Y)}function k(s){if(!L||j===void 0||O===void 0||g===void 0||N===void 0)return;me(Y,s);const l=Ee(Y),d=Y.length>1;let y=f;if(d){q===0&&(q=pe(Y));const i=pe(Y)-q;y=v(i*t.step/80+S).scale,M(y,l,{animate:!1},s)}(!d||t.pinchAndPan)&&w(j+(l.clientX-g)/y,O+(l.clientY-N)/y,{animate:!1},s)}function Z(s){Y.length===1&&E("panzoomend",{x:m,y:p,scale:f,isSVG:n,originalEvent:s},t),Ve(Y,s),L&&(L=!1,j=O=g=N=void 0)}let K=!1;function J(){K||(K=!0,he("down",t.canvas?o:e,D),he("move",document,k,{passive:!0}),he("up",document,Z,{passive:!0}))}function H(){K=!1,ye("down",t.canvas?o:e,D),ye("move",document,k),ye("up",document,Z)}return t.noBind||J(),{bind:J,destroy:H,eventNames:re,getPan:()=>({x:m,y:p}),getScale:()=>f,getOptions:()=>ke(t),handleDown:D,handleMove:k,handleUp:Z,pan:w,reset:G,resetStyle:r,setOptions:a,setStyle:(s,l)=>ee(e,s,l),zoom:b,zoomIn:x,zoomOut:I,zoomToPoint:M,zoomWithWheel:X}}xe.defaultOptions=Me;function Te(e,t){const[n,o]=u.useState(0),[r,a]=u.useState(0),m={backgroundColor:e.palette.hoverBg,color:e.palette.hoverColor,[t?"top":"left"]:"-8px",[t?"left":"top"]:`${n+10}px`},p=C=>{const v=C.nativeEvent.offsetX,w=C.nativeEvent.offsetY;o(t?v:w)},f=(C,v)=>(C.stopPropagation(),new Promise(w=>{if(e.lockLine)return;const b=t?C.clientY:C.clientX,z=v||r;let x=z;const I=X=>{let O=((t?X.clientY:X.clientX)-b)/e.scale+z,g=O;const S=[...t?e.snapsObj.h:e.snapsObj.v].sort((q,Y)=>Math.abs(g-q)-Math.abs(g-Y));S.length&&Math.abs(S[0]-O)<e.snapThreshold/e.scale&&(g=S[0],O=g),x=Math.round(O),a(Math.round(O))},M=()=>{document.removeEventListener("mousemove",I),L(x,e.index),w()};document.addEventListener("mousemove",I),document.addEventListener("mouseup",M,{once:!0})})),L=(C,v)=>{const w=t?e.lines.h:e.lines.v,b=E(C);if(w)if(b)if(typeof v=="number")w.splice(v,1),e.handleLine&&e.handleLine(e.lines);else return;else typeof v!="number"?(w.push(C),e.handleLine&&e.handleLine(e.lines)):(w[v]=C,e.handleLine&&e.handleLine({...e.lines,[t?"h":"v"]:w}))},E=C=>{const v=t?e.canvasHeight:e.canvasWidth;return C<0||C>v},B=E(r)?"放开删除":`${t?"Y":"X"}: ${r*e.rate}`;return{startValue:r,setStartValue:a,actionStyle:m,labelContent:B,handleMouseMove:p,handleMouseDown:f}}const We=e=>e<=.25?40:e<=.5?20:e<=1?10:e<=2?5:e<=4?2:1;function Ze(e,t,n,o,r,a){a?r.moveTo(e,0):r.moveTo(0,e),r.save(),a?r.translate(e+5,o*.2):r.translate(n*.1,e+32),a||r.rotate(-Math.PI/2),r.fillText(Math.round(t).toString(),4,7),r.restore(),a?r.lineTo(e,o):r.lineTo(n,e),r.stroke(),r.closePath(),r.setTransform(1,0,0,1,0,0)}function de(e,t,n,o,r,a){o.fillStyle=r.fontShadowColor,o.strokeStyle=r.longfgColor,o.save(),o.translate(e,t),a||o.rotate(-Math.PI/2),o.strokeText(String(n),0,0),o.fillText(String(n),0,0),o.restore()}const Je=(e,t,n,o,r,a)=>{const{scale:m,width:p,height:f,ratio:L,palette:E,gridRatio:B,showShadowText:C}=r,{bgColor:v,fontColor:w,shadowColor:b,longfgColor:z}=E,x=a?r.canvasWidth:r.canvasHeight;e.setTransform(1,0,0,1,0,0),e.scale(L,L),e.clearRect(0,0,p,f),e.fillStyle=v,e.fillRect(0,0,p,f);const M=We(m)*B*10,X=M*m,G=Math.floor(t/M)*M,j=(G-t)/M*X,O=t+Math.ceil((a?p:f)/m);if(o){const g=(n-t)*m,N=o*m;if(e.fillStyle=b,a?e.fillRect(g,0,N,f):e.fillRect(0,g,p,N),C)if(a){de(g,f*.4,Math.round(n),e,E,a);const S=(n+o-t)*m;de(S,f*.4,Math.round(n+o),e,E,a)}else{de(p*.4,g,Math.round(n),e,E,a);const S=(n+o-t)*m;de(p*.4,S,Math.round(n+o),e,E,a)}}e.beginPath(),e.fillStyle=w,e.strokeStyle=z;for(let g=G,N=0;g<O;g+=M,N++){const S=j+N*X+.5;if(g-M<x&&g>x||g==x){const q=j+N*X+.5+(x-g)*m;Ze(q,x,p,f,e,a);return}g>=0&&g<=x&&(g==0?a?(e.moveTo(S,0),e.lineTo(S,f)):(e.moveTo(0,S),e.lineTo(p,S)):a?(e.moveTo(S,20),e.lineTo(S,f/1.3)):(e.moveTo(20,S),e.lineTo(p/1.3,S)),e.save(),g==0?a?e.translate(S-15,f*.2):e.translate(p*.3,S-5):a?e.translate(S-12,f*.05):e.translate(p*.05,S+12),a||e.rotate(-Math.PI/2),x-g>M/2&&(!C||o==0||Math.abs(g-n)>M/2&&Math.abs(g-(n+o))>M/2)&&e.fillText(g.toString(),4,9),e.restore())}e.stroke(),e.closePath()};function He(e,t){let n;return function(){clearTimeout(n),n=setTimeout(()=>{e()},t)}}const _e=({scale:e,rate:t,palette:n,index:o,start:r,vertical:a,value:m,canvasWidth:p,canvasHeight:f,lines:L,isShowReferLine:E,snapThreshold:B,snapsObj:C,lockLine:v,handleLine:w})=>{const[b,z]=u.useState(!1),[x,I]=u.useState(!1),{startValue:M,setStartValue:X,actionStyle:G,handleMouseMove:j,handleMouseDown:O,labelContent:g}=Te({palette:n,scale:e,snapsObj:C,lines:L,canvasWidth:p,canvasHeight:f,snapThreshold:B,lockLine:v,index:o,value:m,rate:t,handleLine:w},a),N=u.useMemo(()=>M>=r,[r,M,a]),S=u.useMemo(()=>{const{lineType:D,lockLineColor:k,lineColor:Z}=n,K=v?k:Z??"black",J=v||x?"none":"auto",H=E&&!v?a?"ns-resize":"ew-resize":"default",s=a?"borderTop":"borderLeft",l=(M-r)*e;return{[s]:`1px ${D} ${K}`,pointerEvents:J,cursor:H,[a?"top":"left"]:`${l}px`}},[n,v,x,E,a,M,r,e]),q=u.useCallback(He(()=>{I(!1)},1e3),[]);u.useEffect(()=>{I(!0),q()},[e]),u.useEffect(()=>{X(m)},[m]);const Y=D=>{D.stopPropagation(),v||z(!0)};return U.jsx("div",{style:S,className:"line",onMouseEnter:Y,onMouseMove:j,onMouseLeave:()=>z(!1),onMouseDown:O,hidden:!N,children:U.jsx("div",{className:"action",style:G,children:b&&U.jsx("span",{className:"value",children:g})})})},et=u.memo(_e),tt=({scale:e,palette:t,vertical:n,start:o,width:r,height:a,selectStart:m,selectLength:p,canvasWidth:f,canvasHeight:L,rate:E,showShadowText:B,gridRatio:C,onDragStart:v})=>{const w=u.useRef(null),[b,z]=u.useState(null),x=u.useRef(null);u.useEffect(()=>{if(w.current){const X=w.current.getContext("2d");z(X)}},[w]),u.useEffect(()=>{if(w.current&&b){const X=typeof window<"u"&&window.devicePixelRatio||1;w.current.width=r*X,w.current.height=a*X,b.font='11px -apple-system, "Helvetica Neue", ".SFNSText-Regular", "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Zen Hei", sans-serif',b.lineWidth=1,b.textBaseline="middle"}},[b,r,a]),u.useEffect(()=>{const X={scale:e/E,width:r,height:a,palette:t,canvasWidth:f*E,canvasHeight:L*E,ratio:typeof window<"u"&&window.devicePixelRatio||1,gridRatio:C,showShadowText:B};b&&(x.current!==null&&cancelAnimationFrame(x.current),x.current=requestAnimationFrame(()=>{Je(b,o*E,m,p,X,!n)}))},[e,E,r,a,t,f,L,C,b,o,m,p,n]),u.useEffect(()=>()=>{x.current!==null&&cancelAnimationFrame(x.current)},[]);const I=u.useMemo(()=>({width:r+"px",height:a+"px",cursor:n?"ew-resize":"ns-resize",[n?"borderRight":"borderBottom"]:`1px solid ${t.borderColor||"#eeeeef"}`}),[n,t.borderColor]),M=X=>v(X);return U.jsx("canvas",{ref:w,className:"ruler",style:I,onMouseDown:M})},nt=u.memo(tt),ot=({scale:e,thick:t,canvasWidth:n,canvasHeight:o,palette:r,vertical:a,width:m,height:p,start:f,startOther:L,lines:E,selectStart:B,selectLength:C,isShowReferLine:v,rate:w,snapThreshold:b,snapsObj:z,gridRatio:x,lockLine:I,propStyle:M,showShadowText:X,handleLine:G})=>{const[j,O]=u.useState(I),[g,N]=u.useState(!1),[S,q]=u.useState(!1),{actionStyle:Y,handleMouseMove:D,handleMouseDown:k,labelContent:Z,startValue:K,setStartValue:J}=Te({palette:r,scale:e,snapsObj:z,lines:E,canvasWidth:n,canvasHeight:o,snapThreshold:b,lockLine:j,rate:w,handleLine:G},!a),H=a?"v-container":"h-container",s=u.useMemo(()=>a?E.h:E.v,[a,E]),l=u.useMemo(()=>{const y=r.lineType,i=a?"left":"top",h=a?"top":"left",c=a?"borderLeft":"borderBottom",A=(K-L)*e+t;return{[i]:A+"px",[h]:-t+"px",cursor:a?"ew-resize":"ns-resize",[c]:`1px ${y} ${r.lineColor}`}},[K,L,a,r.lineType,e,r.lineColor,t]),d=async y=>{const{offsetX:i,offsetY:h}=y.nativeEvent;N(!0),O(!1);const c=Math.round(L-t/e+(a?i:h)/e);J(c),await k(y,c),N(!1)};return u.useEffect(()=>{O(I)},[I]),U.jsxs("div",{className:H,style:M,children:[U.jsx(nt,{vertical:a,scale:e,width:m,height:p,start:f,showShadowText:X,canvasWidth:n,canvasHeight:o,selectStart:B,selectLength:C,palette:r,rate:w,onDragStart:d,gridRatio:x}),v&&U.jsx("div",{className:"lines",children:s.map((y,i)=>U.jsx(et,{lockLine:j,index:i,value:Math.floor(y),scale:e,start:f,canvasWidth:n,snapThreshold:b,snapsObj:z,canvasHeight:o,lines:E,palette:r,vertical:a,isShowReferLine:v,handleLine:G,rate:w},`${y}-${i}`))}),v&&U.jsx("div",{className:"indicator",onMouseEnter:()=>q(!0),onMouseMove:D,onMouseLeave:()=>q(!1),hidden:!g,style:l,children:U.jsx("div",{className:"action",style:Y,children:S&&U.jsx("span",{className:"value",children:Z})})})]})},Pe=u.memo(ot),rt=e=>u.useMemo(()=>({bgColor:"#f6f7f9",longfgColor:"#BABBBC",fontColor:"#7D8694",fontShadowColor:"#106ebe",shadowColor:"#e9f7fe",lineColor:"#51d6a9",lineType:"solid",lockLineColor:"#d4d7dc",hoverBg:"#000",hoverColor:"#fff",borderColor:"#eeeeef",...e}),[e]);return u.forwardRef(({showRuler:e=!0,scale:t=1,rate:n=1,thick:o=16,width:r=1400,height:a=800,eyeIcon:m,closeEyeIcon:p,paddingRatio:f=.2,autoCenter:L=!0,showShadowText:E=!0,shadow:B={x:0,y:0,width:0,height:0},lines:C={h:[],v:[]},isShowReferLine:v=!0,canvasWidth:w=1e3,canvasHeight:b=700,snapsObj:z={h:[],v:[]},palette:x,snapThreshold:I=5,gridRatio:M=1,lockLine:X=!1,selfHandle:G=!1,panzoomOption:j,children:O,onHandleCornerClick:g,updateScale:N,onZoomChange:S,handleLine:q},Y)=>{const D=rt(x||{}),[k,Z]=u.useState(0),[K,J]=u.useState(0),[H,s]=u.useState("defaultCursor"),l=u.useRef(0),d=u.useRef(0),[y,i]=u.useState(1),[h,c]=u.useState(v),A=u.useRef(null),F=u.useRef(null),Q=u.useRef(null),R=u.useMemo(()=>r-o,[r,o]),$=u.useMemo(()=>a-o,[a,o]),W={thick:o,lines:C,snapThreshold:I,snapsObj:z,isShowReferLine:h,canvasWidth:w,canvasHeight:b,rate:n,palette:D,gridRatio:M,showShadowText:E,lockLine:X,scale:y,handleLine:q},se=u.useMemo(()=>({backgroundImage:h?`url(${m||Ue})`:`url(${p||ze})`,width:`${o}px`,height:`${o}px`,borderRight:`1px solid ${D.borderColor}`,borderBottom:`1px solid ${D.borderColor}`}),[h,m,p,D]),ae=u.useMemo(()=>({background:D.bgColor,left:o+"px",top:o+"px",width:R+"px",height:$+"px"}),[$,R,D]),te=P=>{(P.ctrlKey||P.metaKey)&&A.current&&A.current.zoomWithWheel(P)},ne=P=>{const V=document.activeElement;V instanceof HTMLInputElement||V instanceof HTMLTextAreaElement||V?.classList.contains("monaco-editor")||V?.getAttribute("contenteditable")==="true"||P.key===" "&&(A.current&&(s("grabCursor"),A.current.bind()),P.preventDefault())},Xe=P=>{P.key===" "&&A.current&&(s("defaultCursor"),A.current.destroy())},Ne=P=>({noBind:!0,startScale:P,startX:l.current,startY:d.current,smoothScroll:!0,canvas:!0,...j}),ve=P=>{const V=P.detail,{scale:T,dimsOut:ie}=V;if(ie){i(T),N&&N(T);const dt=(ie.parent.left-ie.elem.left)/T,mt=(ie.parent.top-ie.elem.top)/T;Z(dt),S&&S(V),J(mt)}},Le=()=>{const P=F.current;Q.current&&Q.current.removeEventListener("panzoomchange",ve),A.current&&A.current.destroy();let V=t;L&&(V=Oe(),i(V),N&&N(V));const T=xe(P,Ne(V));A.current=T,P&&(Q.current=P,Q.current.addEventListener("panzoomchange",ve))},Oe=()=>{const P=R*(1-f)/w,V=$*(1-f)/b,T=Math.min(P,V);return l.current=R/2-w/2,T<1?d.current=(b*T/2-b/2)/T-(b*T-$)/T/2:T>1?d.current=(b*T-b)/2/T+($-b*T)/T/2:d.current=0,T},st=()=>A.current?.reset(),at=()=>A.current?.zoomIn(),it=()=>A.current?.zoomOut(),lt=()=>{const P=Oe();A.current?.setOptions(Ne(P))},ut=()=>{c(!h),g&&g(!h)};u.useImperativeHandle(Y,()=>({reset:st,zoomIn:at,zoomOut:it,initPanzoom:Le,panzoomInstance:A})),u.useEffect(()=>{c(v)},[v]),u.useEffect(()=>(Le(),G||(document.addEventListener("wheel",te,{passive:!1}),document.addEventListener("keydown",ne),document.addEventListener("keyup",Xe)),()=>{document.removeEventListener("wheel",te),document.removeEventListener("keydown",ne),document.removeEventListener("keyup",Xe),Q.current&&Q.current.removeEventListener("panzoomchange",ve),A.current&&(A.current.destroy(),A.current=null)}),[w,b,r,a,G]),u.useEffect(()=>{lt()},[j]);const[ct,ft]=u.Children.toArray(O).reduce((P,V)=>{if(u.isValidElement(V)){const T=V;T.props.slot==="default"||!T.props.slot?P[0]=T:T.props.slot==="btn"&&(P[1]=T)}return P},[null,null]);return U.jsxs("div",{className:"sketch-ruler",id:"sketch-ruler",children:[ft,U.jsx("div",{className:"canvasedit-parent "+H,style:ae,children:U.jsx("div",{ref:F,className:"canvasedit "+H,children:ct})}),e&&U.jsx(Pe,{...W,width:r,propStyle:{marginLeft:o+"px",width:R+"px"},height:o,start:k,startOther:K,selectStart:B.x,selectLength:B.width,vertical:!1}),e&&U.jsx(Pe,{...W,propStyle:{marginTop:o+"px",top:0,height:$+"px"},width:o,height:a,start:K,startOther:k,selectStart:B.y,selectLength:B.height,vertical:!0}),e&&U.jsx("a",{className:"corner",style:se,onClick:ut})]})})}));
//# sourceMappingURL=index.umd.cjs.map