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

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

(function(o,G){typeof exports=="object"&&typeof module<"u"?module.exports=G(require("vue")):typeof define=="function"&&define.amd?define(["vue"],G):(o=typeof globalThis<"u"?globalThis:o||self,o.SketchRuler=G(o.Vue))})(this,function(o){"use strict";/*!vue3-sketch-ruler v2.2.102025年6月Wed Jun 18 2025 17:41:08 GMT+0800 (中国标准时间)制作*/const G=e=>e<=.25?40:e<=.5?20:e<=1?10:e<=2?5:e<=4?2:1;function Se(e,t,n,r,l,d){d?l.moveTo(e,0):l.moveTo(0,e),l.save(),d?l.translate(e+5,r*.2):l.translate(n*.1,e+32),d||l.rotate(-Math.PI/2),l.fillText(Math.round(t).toString(),4,7),l.restore(),d?l.lineTo(e,r):l.lineTo(n,e),l.stroke(),l.closePath(),l.setTransform(1,0,0,1,0,0)}function j(e,t,n,r,l,d){r.fillStyle=l.fontShadowColor,r.strokeStyle=l.longfgColor,r.save(),r.translate(e,t),d||r.rotate(-Math.PI/2),r.font="bold 12px  Aria",r.fillText(String(n),0,0),r.restore()}const Ae=(e,t,n,r,l,d)=>{const{scale:u,width:m,height:h,ratio:R,palette:B,gridRatio:k,showShadowText:L}=l,{bgColor:C,fontColor:w,shadowColor:v,longfgColor:O}=B,g=d?l.canvasWidth:l.canvasHeight;e.setTransform(1,0,0,1,0,0),e.scale(R,R),e.clearRect(0,0,m,h),e.fillStyle=C,e.fillRect(0,0,m,h);const y=G(u)*k*10,T=y*u,V=Math.floor(t/y)*y,U=(V-t)/y*T,N=t+Math.ceil((d?m:h)/u);if(r){const b=(n-t)*u,z=r*u;if(e.fillStyle=v,d?e.fillRect(b,0,z,h):e.fillRect(0,b,m,z),L)if(d){j(b,h*.4,Math.round(n),e,B,d);const M=(n+r-t)*u;j(M,h*.4,Math.round(n+r),e,B,d)}else{j(m*.4,b,Math.round(n),e,B,d);const M=(n+r-t)*u;j(m*.4,M,Math.round(n+r),e,B,d)}}e.beginPath(),e.fillStyle=w,e.strokeStyle=O;for(let b=V,z=0;b<N;b+=y,z++){const M=U+z*T+.5;if(b-y<g&&b>g||b==g){const P=U+z*T+.5+(g-b)*u;Se(P,g,m,h,e,d);return}b>=0&&b<=g&&(b==0?d?(e.moveTo(M,0),e.lineTo(M,h)):(e.moveTo(0,M),e.lineTo(m,M)):d?(e.moveTo(M,20),e.lineTo(M,h/1.3)):(e.moveTo(20,M),e.lineTo(m/1.3,M)),e.save(),b==0?d?e.translate(M-15,h*.01):e.translate(m*.3,M-5):d?e.translate(M-12,h*.05):e.translate(m*.05,M+12),d||e.rotate(-Math.PI/2),g-b>y/2&&(!L||r==0||Math.abs(b-n)>y/2&&Math.abs(b-(n+r))>y/2)&&e.fillText(b.toString(),4,9),e.restore())}e.stroke(),e.closePath()};function oe(e,t=100){let n=null;const r=function(...l){n!==null&&clearTimeout(n),n=setTimeout(()=>{e(...l)},t)};return r.cancel=function(){n!==null&&(clearTimeout(n),n=null)},r}function pe(e,t){const n=o.ref(0),r=o.ref(0),l=o.ref(!1),d=o.computed(()=>({backgroundColor:e.palette.hoverBg,color:e.palette.hoverColor,[t?"top":"left"]:"-8px",[t?"left":"top"]:`${n.value+10}px`})),u=({offsetX:v,offsetY:O})=>{n.value=t?v:O},m=(v,O)=>new Promise(g=>{if(e.lockLine)return;const E=t?v.clientY:v.clientX;u(v);const y=O||r.value;let T=y;const V=N=>{let M=((t?N.clientY:N.clientX)-E)/e.scale+y,P=M;const W=(t?e.snapsObj.h:e.snapsObj.v).slice().sort((I,x)=>Math.abs(P-I)-Math.abs(P-x));W.length&&Math.abs(W[0]-M)<e.snapThreshold/e.scale&&(P=W[0],M=P),T=Math.round(M),r.value=T},U=()=>{document.removeEventListener("mousemove",V),h(T,e.index),g()};document.addEventListener("mousemove",V),document.addEventListener("mouseup",U,{once:!0})}),h=(v,O)=>{var y,T;const g=t?(y=e.lines)==null?void 0:y.h:(T=e.lines)==null?void 0:T.v,E=R(v);if(g)if(E)if(typeof O=="number")g.splice(O,1);else return;else typeof O!="number"?g.push(v):g[O]=v},R=v=>{const O=t?e.canvasHeight:e.canvasWidth;return v<0||v>O},B=o.computed(()=>R(r.value)?"放开删除":`${t?"Y":"X"}：${r.value*e.rate}`),k=oe(()=>{l.value=!1},200),L=oe(()=>{l.value=!0},200);return{showLabel:l,startValue:r,actionStyle:d,labelContent:B,handleMouseDown:m,handleMouseenter:v=>{e.lockLine||(u(v),L(),k.cancel())},handleMouseLeave:()=>{k()}}}const Ce={key:0,class:"value"},ke=o.defineComponent({__name:"ruler-line",props:{scale:{},palette:{},index:{},start:{},vertical:{type:Boolean},value:{},canvasWidth:{},canvasHeight:{},lines:{},isShowReferLine:{type:Boolean},rate:{},snapThreshold:{},snapsObj:{},lockLine:{type:Boolean}},setup(e){const t=e,n=o.ref(!1),{actionStyle:r,handleMouseDown:l,labelContent:d,startValue:u,showLabel:m,handleMouseenter:h,handleMouseLeave:R}=pe(t,t.vertical),B=o.computed(()=>u.value>=t.start),k=o.computed(()=>{const{lineType:C,lockLineColor:w,lineColor:v}=t.palette,O=t.lockLine?w:v??"black",g=t.lockLine||n.value?"none":"auto",E=t.isShowReferLine&&!t.lockLine?t.vertical?"ns-resize":"ew-resize":"default",y=t.vertical?"borderTop":"borderLeft",T=(u.value-t.start)*t.scale;return{[y]:`1px ${C} ${O}`,pointerEvents:g,cursor:E,[t.vertical?"top":"left"]:`${T}px`}});o.onMounted(()=>{u.value=t.value??0});const L=oe(()=>{n.value=!1},1e3);return o.watch([()=>t.scale],()=>{n.value=!0,L()}),(C,w)=>o.withDirectives((o.openBlock(),o.createElementBlock("div",{class:"line",style:o.normalizeStyle(k.value),onMouseenter:w[0]||(w[0]=o.withModifiers((...v)=>o.unref(h)&&o.unref(h)(...v),["stop"])),onMouseleave:w[1]||(w[1]=o.withModifiers((...v)=>o.unref(R)&&o.unref(R)(...v),["stop"])),onMousedown:w[2]||(w[2]=o.withModifiers((...v)=>o.unref(l)&&o.unref(l)(...v),["stop"]))},[o.createElementVNode("div",{class:"action",style:o.normalizeStyle(o.unref(r))},[o.unref(m)?(o.openBlock(),o.createElementBlock("span",Ce,o.toDisplayString(o.unref(d)),1)):o.createCommentVNode("",!0)],4)],36)),[[o.vShow,B.value]])}}),Ee=o.defineComponent({__name:"index",props:{scale:{},palette:{},vertical:{type:Boolean},showShadowText:{type:Boolean},start:{},width:{},height:{},selectStart:{},selectLength:{},canvasWidth:{},canvasHeight:{},rate:{},gridRatio:{}},emits:["handleDragStart"],setup(e,{emit:t}){const n=e,r=t,l=o.reactive({isDragging:!1,canvasContext:null});let d=window.devicePixelRatio;const u=o.ref(null);o.onMounted(()=>{window.addEventListener("resize",m),h(),B(d),k(d)});const m=()=>{d=window.devicePixelRatio,B(d),k(d)},h=()=>{var C;l.canvasContext=((C=u.value)==null?void 0:C.getContext("2d"))||null},R=o.computed(()=>({width:n.width+"px",height:n.height+"px",cursor:n.vertical?"ew-resize":"ns-resize",[n.vertical?"borderRight":"borderBottom"]:`1px solid ${n.palette.borderColor||"#eeeeef"} `}));o.onUnmounted(()=>{window.removeEventListener("resize",m)});const B=C=>{if(u.value){u.value.width=Math.round(n.width*C),u.value.height=Math.round(n.height*C);const w=l.canvasContext;w&&(w.font=`11px -apple-system,
                "Helvetica Neue", ".SFNSText-Regular",
                "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB",
                "Microsoft YaHei", "WenQuanYi Zen Hei", sans-serif`,w.lineWidth=1,w.textBaseline="middle")}},k=C=>{const w={scale:n.scale,width:n.width,height:n.height,palette:n.palette,canvasWidth:n.canvasWidth,canvasHeight:n.canvasHeight,ratio:C,rate:n.rate,gridRatio:n.gridRatio,showShadowText:n.showShadowText};w.scale=n.scale/n.rate,w.canvasWidth=n.canvasWidth*n.rate,w.canvasHeight=n.canvasHeight*n.rate,l.canvasContext&&Ae(l.canvasContext,n.start*n.rate,n.selectStart,n.selectLength,w,!n.vertical)};o.watch([()=>n.width,()=>n.height,()=>n.start,()=>n.palette,()=>n.selectStart,()=>n.selectLength],()=>{k(d)}),o.watch([()=>n.width,()=>n.height],()=>{B(d)});const L=C=>{r("handleDragStart",C)};return(C,w)=>(o.openBlock(),o.createElementBlock("canvas",{ref_key:"canvas",ref:u,class:"ruler",style:o.normalizeStyle(R.value),onMousedown:o.withModifiers(L,["stop"])},null,36))}}),Me={class:"lines"},Be={key:0,class:"value"},fe=o.defineComponent({__name:"ruler-wrapper",props:{scale:{},thick:{},canvasWidth:{},canvasHeight:{},palette:{},vertical:{type:Boolean},width:{},height:{},start:{},startOther:{},lines:{},selectStart:{},selectLength:{},isShowReferLine:{type:Boolean},rate:{},snapThreshold:{},snapsObj:{},gridRatio:{},lockLine:{type:Boolean},showShadowText:{type:Boolean}},emits:["changeLineState"],setup(e,{emit:t}){const n=e,{showLabel:r,actionStyle:l,handleMouseenter:d,handleMouseLeave:u,handleMouseDown:m,labelContent:h,startValue:R}=pe(n,!n.vertical),B=o.ref(!1),k=o.ref(!1),L=o.computed(()=>n.vertical?"v-container":"h-container"),C=t,w=o.computed(()=>{var g,E;return n.vertical?(g=n.lines)==null?void 0:g.h:(E=n.lines)==null?void 0:E.v}),v=o.computed(()=>{const g=n.palette.lineType;let E=n.vertical?"left":"top",y=n.vertical?"top":"left",T=n.vertical?"borderLeft":"borderBottom";const V=(R.value-n.startOther)*n.scale+n.thick;return{[E]:V+"px",[y]:-n.thick+"px",cursor:n.vertical?"ew-resize":"ns-resize",[T]:`1px ${g} ${n.palette.lineColor}`}}),O=async g=>{const{offsetX:E,offsetY:y}=g,{scale:T,vertical:V,thick:U,startOther:N}=n;if(!B.value){k.value=!0,C("changeLineState",!1);let b=Math.round(N-U/T+(V?E:y)/T);R.value=b,await m(g,b),k.value=!1}};return o.watch([()=>n.lockLine],()=>{B.value=n.lockLine}),(g,E)=>(o.openBlock(),o.createElementBlock("div",{class:o.normalizeClass(L.value)},[o.createVNode(Ee,o.mergeProps(g.$props,{onHandleDragStart:O}),null,16),o.withDirectives(o.createElementVNode("div",Me,[(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(w.value,(y,T)=>(o.openBlock(),o.createBlock(ke,o.mergeProps({key:y+T,index:T,value:y>>0,ref_for:!0},g.$props),null,16,["index","value"]))),128))],512),[[o.vShow,g.isShowReferLine]]),g.isShowReferLine?o.withDirectives((o.openBlock(),o.createElementBlock("div",{key:0,class:"indicator",style:o.normalizeStyle(v.value),onMouseenter:E[0]||(E[0]=(...y)=>o.unref(d)&&o.unref(d)(...y)),onMouseleave:E[1]||(E[1]=(...y)=>o.unref(u)&&o.unref(u)(...y))},[o.createElementVNode("div",{class:"action",style:o.normalizeStyle(o.unref(l))},[o.unref(r)?(o.openBlock(),o.createElementBlock("span",Be,o.toDisplayString(o.unref(h)),1)):o.createCommentVNode("",!0)],4)],36)),[[o.vShow,k.value]]):o.createCommentVNode("",!0)],2))}}),Le="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",Te="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=";/*!simple-panzoom v1.0.72024年8月Sat Aug 10 2024 16:04:04 GMT+0800 (中国标准时间)制作*/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 me(e,t){let n=e.length;for(;n--;)if(e[n].pointerId===t.pointerId)return n;return-1}function ae(e,t){let n;if(t.touches){n=0;for(const r of t.touches)r.pointerId=n++,ae(e,r);return}n=me(e,t),n>-1&&e.splice(n,1),e.push(t)}function Re(e,t){if(t.touches){for(;e.length;)e.pop();return}const n=me(e,t);n>-1&&e.splice(n,1)}function ge(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 re(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 q={down:"mousedown",move:"mousemove",up:"mouseup mouseleave"};typeof window<"u"&&(typeof window.PointerEvent=="function"?q={down:"pointerdown",move:"pointermove",up:"pointerup pointerleave pointercancel"}:typeof window.TouchEvent=="function"&&(q={down:"touchstart",move:"touchmove",up:"touchend touchcancel"}));function se(e,t,n,r){q[e].split(" ").forEach(l=>{t.addEventListener(l,n,r)})}function ie(e,t,n){q[e].split(" ").forEach(r=>{t.removeEventListener(r,n)})}const Oe=typeof document<"u"&&!!document.documentMode;let we;function ze(){return we||(we=document.createElement("div").style)}const ye=["webkit","moz","ms"],J={};function le(e){if(J[e])return J[e];const t=ze();if(e in t)return J[e]=e;const n=e[0].toUpperCase()+e.slice(1);let r=ye.length;for(;r--;){const l=`${ye[r]}${n}`;if(l in t)return J[e]=l}}function _(e,t){return parseFloat(t[le(e)])||0}function ee(e,t,n=window.getComputedStyle(e)){const r=t==="border"?"Width":"";return{left:_(`${t}Left${r}`,n),right:_(`${t}Right${r}`,n),top:_(`${t}Top${r}`,n),bottom:_(`${t}Bottom${r}`,n)}}function $(e,t,n){e.style[le(t)]=n}function Ne(e,t){const n=le("transform");$(e,"transition",`${n} ${t.duration}ms ${t.easing}`)}function Pe(e,{x:t,y:n,scale:r,isSVG:l},d){if($(e,"transform",`scale(${r}) translate(${t}px, ${n}px)`),l&&Oe){const u=window.getComputedStyle(e).getPropertyValue("transform");e.setAttribute("transform",u)}}function te(e){const t=e.parentNode,n=window.getComputedStyle(e),r=window.getComputedStyle(t),l=e.getBoundingClientRect(),d=t.getBoundingClientRect();return{elem:{style:n,width:l.width,height:l.height,top:l.top,bottom:l.bottom,left:l.left,right:l.right,margin:ee(e,"margin",n),border:ee(e,"border",n)},parent:{style:r,width:d.width,height:d.height,top:d.top,bottom:d.bottom,left:d.left,right:d.right,padding:ee(t,"padding",r),border:ee(t,"border",r)}}}function Xe(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 Ve(e){return(e.getAttribute("class")||"").trim()}function Ue(e,t){return e.nodeType===1&&` ${Ve(e)} `.indexOf(` ${t} `)>-1}function Ye(e,t){for(let n=e;n!=null;n=n.parentNode)if(Ue(n,t.excludeClass)||t.exclude.indexOf(n)>-1)return!0;return!1}const De=/^http:[\w\.\/]+svg$/;function We(e){return De.test(e.namespaceURI)&&e.nodeName.toLowerCase()!=="svg"}function Ie(e){const t={};for(const n in e)e.hasOwnProperty(n)&&(t[n]=e[n]);return t}const ve={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:Pe,startX:0,startY:0,startScale:1,step:.3,touchAction:"none"};function be(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(!Xe(e))throw new Error("Panzoom should be called on elements that have been attached to the DOM");t={...ve,...t};const n=We(e),r=e.parentNode;r.style.overflow=t.overflow,r.style.userSelect="none",r.style.touchAction=t.touchAction,(t.canvas?r:e).style.cursor=t.cursor,e.style.userSelect="none",e.style.touchAction=t.touchAction,$(e,"transformOrigin",typeof t.origin=="string"?t.origin:n?"0 0":"50% 50%");function l(){r.style.overflow="",r.style.userSelect="",r.style.touchAction="",r.style.cursor="",e.style.cursor="",e.style.userSelect="",e.style.touchAction="",$(e,"transformOrigin","")}function d(a={}){for(const i in a)a.hasOwnProperty(i)&&(t[i]=a[i]);(a.hasOwnProperty("cursor")||a.hasOwnProperty("canvas"))&&(r.style.cursor=e.style.cursor="",(t.canvas?r:e).style.cursor=t.cursor),a.hasOwnProperty("overflow")&&(r.style.overflow=a.overflow),a.hasOwnProperty("touchAction")&&(r.style.touchAction=a.touchAction,e.style.touchAction=a.touchAction)}let u=0,m=0,h=1,R=!1;v(t.startScale,{animate:!1,force:!0}),setTimeout(()=>{w(t.startX,t.startY,{animate:!1,force:!0})});function B(a,i,f){if(f.silent)return;const S=new CustomEvent(a,{detail:i});e.dispatchEvent(S)}function k(a,i,f){const S={x:u,y:m,scale:h,isSVG:n,originalEvent:f,dimsOut:{}};typeof i.animate=="boolean"&&(i.animate?Ne(e,i):$(e,"transition","none")),i.setTransform(e,S,i);function c(){const A=te(e);S.dimsOut=A,B(a,S,i),B("panzoomchange",S,i)}return i.animate?setTimeout(()=>{c()},i.duration+50):requestAnimationFrame(()=>{c()}),S}function L(a,i,f,S){const c={...t,...S},A={x:u,y:m,opts:c};if(!c.force&&(c.disablePan||c.panOnlyWhenZoomed&&h===c.startScale))return A;if(a=parseFloat(a),i=parseFloat(i),c.disableXAxis||(A.x=(c.relative?u:0)+a),c.disableYAxis||(A.y=(c.relative?m:0)+i),c.contain){const p=te(e),D=p.elem.width/h,Y=p.elem.height/h,F=D*f,Z=Y*f,H=(F-D)/2,K=(Z-Y)/2;if(c.contain==="inside"){const ce=(-p.elem.margin.left-p.parent.padding.left+H)/f,de=(p.parent.width-F-p.parent.padding.left-p.elem.margin.left-p.parent.border.left-p.parent.border.right+H)/f;A.x=Math.max(Math.min(A.x,de),ce);const he=(-p.elem.margin.top-p.parent.padding.top+K)/f,ue=(p.parent.height-Z-p.parent.padding.top-p.elem.margin.top-p.parent.border.top-p.parent.border.bottom+K)/f;A.y=Math.max(Math.min(A.y,ue),he)}else if(c.contain==="outside"){const ce=(-(F-p.parent.width)-p.parent.padding.left-p.parent.border.left-p.parent.border.right+H)/f,de=(H-p.parent.padding.left)/f;A.x=Math.max(Math.min(A.x,de),ce);const he=(-(Z-p.parent.height)-p.parent.padding.top-p.parent.border.top-p.parent.border.bottom+K)/f,ue=(K-p.parent.padding.top)/f;A.y=Math.max(Math.min(A.y,ue),he)}}return c.roundPixels&&(A.x=Math.round(A.x),A.y=Math.round(A.y)),A}function C(a,i){const f={...t,...i},S={scale:h,opts:f};if(!f.force&&f.disableZoom)return S;let c=t.minScale,A=t.maxScale;if(f.contain){const p=te(e),D=p.elem.width/h,Y=p.elem.height/h;if(D>1&&Y>1){const F=p.parent.width-p.parent.border.left-p.parent.border.right,Z=p.parent.height-p.parent.border.top-p.parent.border.bottom,H=F/D,K=Z/Y;t.contain==="inside"?A=Math.min(A,H,K):t.contain==="outside"&&(c=Math.max(c,H,K))}}return S.scale=Math.min(Math.max(a,c),A),S}function w(a,i,f,S){const c=L(a,i,h,f);return u!==c.x||m!==c.y?(u=c.x,m=c.y,k("panzoompan",c.opts,S)):{x:u,y:m,scale:h,isSVG:n,originalEvent:S}}function v(a,i,f){const S=C(a,i),c=S.opts;if(!c.force&&c.disableZoom)return;a=S.scale;let A=u,p=m;if(c.focal){const Y=c.focal;A=(Y.x/a-Y.x/h+u*a)/a,p=(Y.y/a-Y.y/h+m*a)/a}const D=L(A,p,a,{relative:!1,force:!0});return u=D.x,m=D.y,h=a,k("panzoomzoom",c,f)}function O(a,i){const f={...t,animate:!0,...i};return v(h*Math.exp((a?1:-1)*f.step),f)}function g(a){return O(!0,a)}function E(a){return O(!1,a)}function y(a,i,f,S){const c=te(e),A={width:c.parent.width-c.parent.padding.left-c.parent.padding.right-c.parent.border.left-c.parent.border.right,height:c.parent.height-c.parent.padding.top-c.parent.padding.bottom-c.parent.border.top-c.parent.border.bottom};let p=i.clientX-c.parent.left-c.parent.padding.left-c.parent.border.left-c.elem.margin.left,D=i.clientY-c.parent.top-c.parent.padding.top-c.parent.border.top-c.elem.margin.top;n||(p-=c.elem.width/h/2,D-=c.elem.height/h/2);const Y={x:p/A.width*(A.width*a),y:D/A.height*(A.height*a)};return v(a,{...f,animate:!1,focal:Y},S)}function T(a,i){a.preventDefault();const f={...t,...i,animate:!1},S=(a.deltaY===0&&a.deltaX?a.deltaX:a.deltaY)<0?1:-1,c=C(h*Math.exp(S*f.step/3),f).scale;return y(c,a,f,a)}function V(a){const i={...t,animate:!0,force:!0,...a};h=C(i.startScale,i).scale;const f=L(i.startX,i.startY,h,i);return u=f.x,m=f.y,k("panzoomreset",i)}let U,N,b,z,M,P;const X=[];function W(a){if(Ye(a.target,t))return;ae(X,a),R=!0,t.handleStartEvent(a),U=u,N=m,B("panzoomstart",{x:u,y:m,scale:h,isSVG:n,originalEvent:a},t);const i=ge(X);b=i.clientX,z=i.clientY,M=h,P=re(X)}function I(a){if(!R||U===void 0||N===void 0||b===void 0||z===void 0)return;ae(X,a);const i=ge(X),f=X.length>1;let S=h;if(f){P===0&&(P=re(X));const c=re(X)-P;S=C(c*t.step/80+M).scale,y(S,i,{animate:!1},a)}(!f||t.pinchAndPan)&&w(U+(i.clientX-b)/S,N+(i.clientY-z)/S,{animate:!1},a)}function x(a){X.length===1&&B("panzoomend",{x:u,y:m,scale:h,isSVG:n,originalEvent:a},t),Re(X,a),R&&(R=!1,U=N=b=z=void 0)}let Q=!1;function ne(){Q||(Q=!0,se("down",t.canvas?r:e,W),se("move",document,I,{passive:!0}),se("up",document,x,{passive:!0}))}function s(){Q=!1,ie("down",t.canvas?r:e,W),ie("move",document,I),ie("up",document,x)}return t.noBind||ne(),{bind:ne,destroy:s,eventNames:q,getPan:()=>({x:u,y:m}),getScale:()=>h,getOptions:()=>Ie(t),handleDown:W,handleMove:I,handleUp:x,pan:w,reset:V,resetStyle:l,setOptions:d,setStyle:(a,i)=>$(e,a,i),zoom:v,zoomIn:g,zoomOut:E,zoomToPoint:y,zoomWithWheel:T}}be.defaultOptions=ve;const xe={class:"sketch-ruler"};return o.defineComponent({__name:"index",props:{showRuler:{type:Boolean,default:!0},eyeIcon:{},closeEyeIcon:{},scale:{default:1},rate:{default:1},thick:{default:16},palette:{},width:{default:1400},height:{default:800},paddingRatio:{default:.2},autoCenter:{type:Boolean,default:!0},shadow:{default:()=>({x:0,y:0,width:0,height:0})},lines:{default:()=>({h:[],v:[]})},isShowReferLine:{type:Boolean,default:!0},canvasWidth:{default:700},canvasHeight:{default:700},snapsObj:{default:()=>({h:[],v:[]})},snapThreshold:{default:5},gridRatio:{default:1},lockLine:{type:Boolean,default:!1},selfHandle:{type:Boolean,default:!1},showShadowText:{type:Boolean,default:!0},panzoomOption:{}},emits:["onCornerClick","update:scale","zoomchange","update:lockLine"],setup(e,{expose:t,emit:n}){o.useCssVars(s=>({"89f302c6":ne.value}));const r=e,l=n,d=o.ref(null),u=o.ref(0),m=o.ref(0);let h=0,R=0;const B=o.ref(1),k=o.ref(r.isShowReferLine),L=o.ref(null),C=o.ref("defaultCursor"),w=o.computed(()=>({bgColor:"#f6f7f9",longfgColor:"#BABBBC",fontColor:"#7D8694",fontShadowColor:"#106ebe",shadowColor:"#e9f7fe",lineColor:"#51d6a9",lineType:"solid",lockLineColor:"#d4d7dc",hoverBg:"#000",hoverColor:"#fff",borderColor:"#eeeeef",...r.palette})),v=o.computed(()=>({backgroundImage:k.value?`url(${r.eyeIcon??Le})`:`url(${r.closeEyeIcon??Te})`,width:r.thick+"px",height:r.thick+"px",borderRight:`1px solid ${w.value.borderColor}`,borderBottom:`1px solid ${w.value.borderColor}`})),O=o.computed(()=>({background:w.value.bgColor,width:g.value+"px",height:E.value+"px"})),g=o.computed(()=>r.width-r.thick),E=o.computed(()=>r.height-r.thick),y=s=>{var a;(s.ctrlKey||s.metaKey)&&((a=L.value)==null||a.zoomWithWheel(s))},T=s=>{var i;const a=document.activeElement;a!=null&&a.closest(".monaco-editor")||(a==null?void 0:a.tagName)==="INPUT"||(a==null?void 0:a.tagName)==="TEXTAREA"||(a==null?void 0:a.getAttribute("contenteditable"))==="true"||s.key===" "&&(C.value="grabCursor",(i=L.value)==null||i.bind(),s.preventDefault())},V=s=>{var i;const a=document.activeElement;a!=null&&a.closest(".monaco-editor")||(a==null?void 0:a.tagName)==="INPUT"||(a==null?void 0:a.tagName)==="TEXTAREA"||(a==null?void 0:a.getAttribute("contenteditable"))==="true"||s.key===" "&&((i=L.value)==null||i.destroy(),C.value="defaultCursor")};function U(s){var a;s.preventDefault(),s.stopPropagation(),(a=L.value)==null||a.bind()}o.onMounted(()=>{if(z(),!r.selfHandle&&d.value){const s=d.value.parentElement;if(!s)return;s.addEventListener("wheel",y),document.addEventListener("keydown",T),document.addEventListener("keyup",V),s.addEventListener("touchstart",U)}});const N=s=>({noBind:!0,startScale:s,startX:h,startY:R,smoothScroll:!0,canvas:!0,...r.panzoomOption}),b=s=>{const{scale:a,dimsOut:i}=s.detail;if(i){l("update:scale",a),B.value=a;const f=(i.parent.left-i.elem.left)/a,S=(i.parent.top-i.elem.top)/a;u.value=f,l("zoomchange",s.detail),m.value=S}},z=()=>{if(d.value=document.querySelector(".canvasedit"),d.value){let s=r.scale;r.autoCenter&&(s=M()),L.value=be(d.value,N(s)),d.value&&d.value.addEventListener("panzoomchange",b)}},M=()=>{const s=g.value*(1-r.paddingRatio)/r.canvasWidth,a=E.value*(1-r.paddingRatio)/r.canvasHeight,i=Math.min(s,a);return h=g.value/2-r.canvasWidth/2,i<1?R=(r.canvasHeight*i/2-r.canvasHeight/2)/i-(r.canvasHeight*i-E.value)/i/2:i>1?R=(r.canvasHeight*i-r.canvasHeight)/2/i+(E.value-r.canvasHeight*i)/i/2:R=0,i},P=()=>{var s;return(s=L.value)==null?void 0:s.reset()},X=()=>{var s;return(s=L.value)==null?void 0:s.zoomIn()},W=()=>{var s;return(s=L.value)==null?void 0:s.zoomOut()},I=()=>{var s;(s=L.value)==null||s.setOptions(N(r.scale))},x=()=>{k.value=!k.value,l("onCornerClick",k.value)},Q=s=>{l("update:lockLine",s)},ne=o.computed(()=>r.thick+"px");return o.watch([()=>r.isShowReferLine],()=>{k.value=r.isShowReferLine}),o.watch([()=>r.canvasWidth,()=>r.canvasHeight,()=>r.width,()=>r.height],()=>{z()}),o.watch(()=>r.panzoomOption,()=>{I()},{deep:!0}),t({initPanzoom:z,panzoomInstance:L,reset:P,zoomIn:X,zoomOut:W,cursorClass:C}),(s,a)=>(o.openBlock(),o.createElementBlock("div",xe,[o.renderSlot(s.$slots,"btn",{reset:P,zoomIn:X,zoomOut:W}),o.createElementVNode("div",{class:o.normalizeClass(["canvasedit-parent",C.value]),style:o.normalizeStyle(O.value)},[o.createElementVNode("div",{class:o.normalizeClass(["canvasedit",C.value])},[o.renderSlot(s.$slots,"default")],2)],6),o.withDirectives(o.createVNode(fe,{style:o.normalizeStyle({marginLeft:s.thick+"px",width:g.value+"px"}),vertical:!1,width:s.width,height:s.thick,"is-show-refer-line":k.value,thick:s.thick,start:u.value,"start-other":m.value,lines:s.lines,"select-start":s.shadow.x,"snap-threshold":s.snapThreshold,"snaps-obj":s.snapsObj,"select-length":s.shadow.width,scale:B.value,palette:w.value,"canvas-width":s.canvasWidth,"show-shadow-text":s.showShadowText,"canvas-height":s.canvasHeight,rate:s.rate,"grid-ratio":s.gridRatio,"lock-line":s.lockLine,onChangeLineState:Q},null,8,["style","width","height","is-show-refer-line","thick","start","start-other","lines","select-start","snap-threshold","snaps-obj","select-length","scale","palette","canvas-width","show-shadow-text","canvas-height","rate","grid-ratio","lock-line"]),[[o.vShow,s.showRuler]]),o.withDirectives(o.createVNode(fe,{style:o.normalizeStyle({marginTop:s.thick+"px",top:0,height:E.value+"px"}),vertical:!0,width:s.thick,height:s.height,"is-show-refer-line":k.value,thick:s.thick,start:m.value,"start-other":u.value,lines:s.lines,"select-start":s.shadow.y,"select-length":s.shadow.height,"snap-threshold":s.snapThreshold,"snaps-obj":s.snapsObj,scale:B.value,palette:w.value,"canvas-width":s.canvasWidth,"canvas-height":s.canvasHeight,"show-shadow-text":s.showShadowText,rate:s.rate,"grid-ratio":s.gridRatio,"lock-line":s.lockLine,onChangeLineState:Q},null,8,["style","width","height","is-show-refer-line","thick","start","start-other","lines","select-start","select-length","snap-threshold","snaps-obj","scale","palette","canvas-width","canvas-height","show-shadow-text","rate","grid-ratio","lock-line"]),[[o.vShow,s.showRuler]]),o.withDirectives(o.createElementVNode("a",{class:"corner",style:o.normalizeStyle(v.value),onClick:x},null,4),[[o.vShow,s.showRuler]])]))}})});