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