vue3-sketch-ruler
Version:
> 是一个基于 Vue 3 + TypeScript 的标尺组件库，适用于低代码平台、大屏可视化、做图工具等场景，提供类似 Photoshop 的缩放与标尺辅助线体验。
1 lines • 48.2 kB
JavaScript
Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});let e=require("vue");function t(e,t,n){return new Float64Array([e,0,0,e,t,n])}function n(e,t,n){let r=e[0]*e[3]-e[1]*e[2];if(Math.abs(r)<1e-10)return{x:0,y:0};let i=1/r,a=t-e[4],o=n-e[5];return{x:(e[3]*a-e[2]*o)*i,y:(-e[1]*a+e[0]*o)*i}}function r(e,t,n){return{x:e[0]*t+e[2]*n+e[4],y:e[1]*t+e[3]*n+e[5]}}function i(e){let{mode:t,viewportSize:n,contentSize:r,offset:i,scale:a,pointerPosition:o}=e;switch(t){case`viewport-center`:return{x:n.width/2,y:n.height/2};case`content-center`:return{x:i.x+r.width*a/2,y:i.y+r.height*a/2};default:return o?{x:o.x,y:o.y}:{x:n.width/2,y:n.height/2}}}function a(e,t,n=`contain`,r=0){if(e.width<=0||e.height<=0)return{scale:1,x:t.x,y:t.y};let i={x:t.x+t.width*r/2,y:t.y+t.height*r/2,width:t.width*(1-r),height:t.height*(1-r)},a=i.width/e.width,o=i.height/e.height,s;s=n===`contain`?Math.min(a,o):n===`cover`?Math.max(a,o):1;let c=i.x+(i.width-e.width*s)/2,l=i.y+(i.height-e.height*s)/2;return{scale:s,x:c,y:l}}var o=class{matrix;targetState;currentState;minZoom;maxZoom;enableAnimation;animationDuration;animationMode;dampingRatio;naturalFrequency;timeConstant;pendingTransform=!1;rafId=null;callbacks=new Set;lastFrameTime=0;velocity={x:0,y:0,scale:0};constructor(e={x:0,y:0,scale:1},n={}){this.minZoom=n.minZoom??.1,this.maxZoom=n.maxZoom??10,this.enableAnimation=n.enableAnimation??!1,this.animationDuration=n.animationDuration??200,this.animationMode=n.animationMode??`ease-out`,this.dampingRatio=n.dampingRatio??.8,this.naturalFrequency=n.naturalFrequency??20,this.timeConstant=n.timeConstant??80;let r=this.clampScale(e.scale);this.currentState={...e,scale:r},this.targetState={...this.currentState},this.matrix=t(r,e.x,e.y)}onUpdate(e){return this.callbacks.add(e),e({...this.currentState}),()=>{this.callbacks.delete(e)}}setTransform(e){e.scale!==void 0&&(this.targetState.scale=this.clampScale(e.scale)),e.x!==void 0&&(this.targetState.x=e.x),e.y!==void 0&&(this.targetState.y=e.y),this.enableAnimation?this.scheduleUpdate():(this.currentState={...this.targetState},this.updateMatrix(),this.notify())}panBy(e,t){this.targetState.x+=e,this.targetState.y+=t,this.enableAnimation?this.scheduleUpdate():(this.currentState={...this.targetState},this.updateMatrix(),this.notify())}zoomBy(e,t,n){let r=this.targetState.scale,i=this.clampScale(r+e),a=i/r;Math.abs(a-1)<1e-6||(this.targetState.x=t-(t-this.targetState.x)*a,this.targetState.y=n-(n-this.targetState.y)*a,this.targetState.scale=i,this.enableAnimation?this.scheduleUpdate():(this.currentState={...this.targetState},this.updateMatrix(),this.notify()))}zoomTo(e,t,n){let r=this.clampScale(e)-this.targetState.scale;this.zoomBy(r,t,n)}toWorldPoint(e,t){return n(this.matrix,e,t)}toScreenPoint(e,t){return r(this.matrix,e,t)}getState(){return{...this.currentState}}getMatrix(){return new Float64Array(this.matrix)}setAnimationMode(e){this.animationMode=e,this.lastFrameTime=0,this.velocity={x:0,y:0,scale:0}}destroy(){this.rafId!==null&&(cancelAnimationFrame(this.rafId),this.rafId=null),this.callbacks.clear()}clampScale(e){return Math.max(this.minZoom,Math.min(this.maxZoom,e))}updateMatrix(){this.matrix=t(this.currentState.scale,this.currentState.x,this.currentState.y)}scheduleUpdate(){this.pendingTransform=!0,this.rafId===null&&(this.rafId=requestAnimationFrame(e=>this.onFrame(e)))}onFrame(e){if(this.rafId=null,!this.pendingTransform)return;if(this.pendingTransform=!1,!this.enableAnimation){this.currentState={...this.targetState},this.updateMatrix(),this.notify();return}let t=this.lastFrameTime===0?16:e-this.lastFrameTime;this.lastFrameTime=e;let n=t/1e3;switch(this.animationMode){case`direct`:this.currentState={...this.targetState};break;case`ease-out`:{let e=1-(1-Math.min(1,t/this.animationDuration))**3;this.currentState.x=this.lerp(this.currentState.x,this.targetState.x,e),this.currentState.y=this.lerp(this.currentState.y,this.targetState.y,e),this.currentState.scale=this.lerp(this.currentState.scale,this.targetState.scale,e);break}case`exponential`:{let e=this.timeConstant/1e3,t=1-Math.exp(-n/e);this.currentState.x=this.lerp(this.currentState.x,this.targetState.x,t),this.currentState.y=this.lerp(this.currentState.y,this.targetState.y,t),this.currentState.scale=this.lerp(this.currentState.scale,this.targetState.scale,t);break}case`damped`:{let e=this.dampingRatio,t=this.naturalFrequency,r=t*t,i=r*(this.targetState.x-this.currentState.x)-2*e*t*this.velocity.x;this.velocity.x+=i*n,this.currentState.x+=this.velocity.x*n;let a=r*(this.targetState.y-this.currentState.y)-2*e*t*this.velocity.y;this.velocity.y+=a*n,this.currentState.y+=this.velocity.y*n;let o=r*(this.targetState.scale-this.currentState.scale)-2*e*t*this.velocity.scale;this.velocity.scale+=o*n,this.currentState.scale+=this.velocity.scale*n;break}}this.currentState.scale=this.clampScale(this.currentState.scale);let r=this.animationMode===`damped`?.01:1e-4,i=Math.abs(this.currentState.x-this.targetState.x)>r||Math.abs(this.currentState.y-this.targetState.y)>r||Math.abs(this.currentState.scale-this.targetState.scale)>r||this.animationMode===`damped`&&(Math.abs(this.velocity.x)>r||Math.abs(this.velocity.y)>r||Math.abs(this.velocity.scale)>r);this.updateMatrix(),this.notify(),i?this.scheduleUpdate():(this.currentState={...this.targetState},this.velocity={x:0,y:0,scale:0},this.lastFrameTime=0)}lerp(e,t,n){return e+(t-e)*n}notify(){let e={...this.currentState};this.callbacks.forEach(t=>t(e))}};function s(){return{lines:[],palette:{bgColor:`#f6f7f9`,tickColor:`#BABBBC`,labelColor:`#7D8694`,guideLineColor:`#51d6a9`,guideLineLockedColor:`#d4d7dc`,hoverBg:`#000`,hoverColor:`#fff`,borderColor:`#eeeeef`,shadowColor:`#e9f7fe`,guideLineStyle:`dashed`,guideLineWidth:1,labelEnabled:!0,labelPosition:`end`},snapConfig:{enabled:!0,threshold:5,strength:.5},showReferLine:!0}}function c(e,t){switch(t.type){case`addLine`:return{...e,lines:[...e.lines,t.line]};case`removeLine`:{let n=e.lines.filter(e=>e.id!==t.id);return n.length===e.lines.length?e:{...e,lines:n}}case`moveLine`:{let n=e.lines.findIndex(e=>e.id===t.id);if(n===-1)return e;let r=[...e.lines];return r[n]={...r[n],position:t.position},{...e,lines:r}}case`updateLine`:{let n=e.lines.findIndex(e=>e.id===t.id);if(n===-1)return e;let r=[...e.lines];return r[n]={...r[n],...t.updates},{...e,lines:r}}case`setLines`:return t.lines===e.lines?e:{...e,lines:t.lines};case`setPalette`:return{...e,palette:{...e.palette,...t.palette}};case`setSnapConfig`:return{...e,snapConfig:{...e.snapConfig,...t.config}};case`toggleReferLine`:return{...e,showReferLine:t.value===void 0?!e.showReferLine:t.value};default:return e}}var l=class{plugins=[];renderers=new Map;rendererOwners=new WeakMap;activeRenderer=null;api=null;setApi(e){this.api=e}register(e){if(this.plugins.push(e),this.sortPlugins(),e.registerRenderer){let t=e.registerRenderer();this.renderers.set(t.name,t.renderer),this.rendererOwners.set(e,t),this.activeRenderer===null&&(this.activeRenderer=t.name)}return()=>this.unregister(e)}unregister(e){let t=this.plugins.indexOf(e);t!==-1&&this.plugins.splice(t,1);let n=this.rendererOwners.get(e);n&&(this.renderers.delete(n.name),this.rendererOwners.delete(e),this.activeRenderer===n.name&&(this.activeRenderer=this.renderers.keys().next().value??null))}sortPlugins(){this.plugins.sort((e,t)=>(t.priority??0)-(e.priority??0))}getContext(e){if(!this.api)throw Error(`[PluginManager] api not set. Call setApi() before dispatching hooks.`);return{...e,api:this.api}}safeCall(e,t,n){try{e()}catch(e){console.error(`[PluginManager] Plugin "${t}" ${n} threw:`,e)}}async safeCallAsync(e,t,n){try{await e()}catch(e){console.error(`[PluginManager] Plugin "${t}" ${n} threw:`,e)}}async beforeZoom(e){let t=!1,n=()=>{t=!0},r=this.getContext({...e,cancel:n});for(let e of this.plugins)if(e.beforeZoom&&(await this.safeCallAsync(()=>e.beforeZoom(r),e.name,`beforeZoom`),t))return!1;return!0}afterZoom(e){let t=this.getContext(e);for(let e of this.plugins)e.afterZoom&&this.safeCall(()=>e.afterZoom(t),e.name,`afterZoom`)}async beforePan(e){let t=!1,n=()=>{t=!0},r=this.getContext({...e,cancel:n});for(let e of this.plugins)if(e.beforePan&&(await this.safeCallAsync(()=>e.beforePan(r),e.name,`beforePan`),t))return!1;return!0}afterPan(e){let t=this.getContext(e);for(let e of this.plugins)e.afterPan&&this.safeCall(()=>e.afterPan(t),e.name,`afterPan`)}onSnap(e){let t=this.getContext(e);for(let e of this.plugins)e.onSnap&&this.safeCall(()=>e.onSnap(t),e.name,`onSnap`)}onLineCreate(e){let t=this.getContext(e);for(let e of this.plugins)e.onLineCreate&&this.safeCall(()=>e.onLineCreate(t),e.name,`onLineCreate`)}onLineDelete(e){let t=this.getContext(e);for(let e of this.plugins)e.onLineDelete&&this.safeCall(()=>e.onLineDelete(t),e.name,`onLineDelete`)}onLineMove(e){let t=this.getContext(e);for(let e of this.plugins)e.onLineMove&&this.safeCall(()=>e.onLineMove(t),e.name,`onLineMove`)}setActiveRenderer(e){return this.renderers.has(e)?(this.activeRenderer=e,!0):!1}getActiveRenderer(){return this.activeRenderer?this.renderers.get(this.activeRenderer)??null:null}getRendererNames(){return Array.from(this.renderers.keys())}hasRenderer(e){return this.renderers.has(e)}clear(){this.plugins=[],this.renderers.clear(),this.rendererOwners=new WeakMap,this.activeRenderer=null}},u=[{maxScale:.2,interval:500,subdivisions:5,showLabel:!0,formatLabel:e=>`${Math.round(e/1e3)}k`},{maxScale:.5,interval:200,subdivisions:4,showLabel:!0},{maxScale:1,interval:100,subdivisions:5,showLabel:!0},{maxScale:2,interval:50,subdivisions:5,showLabel:!0},{maxScale:5,interval:20,subdivisions:4,showLabel:!0},{maxScale:10,interval:10,subdivisions:5,showLabel:!0},{maxScale:1/0,interval:5,subdivisions:5,showLabel:!0}],d=1.1,f=.9;function p(e){let t=u.findIndex(t=>e<t.maxScale);return u[t===-1?u.length-1:t]}function m(e,t){let n=e;for(;n<u.length-1&&t>=u[n].maxScale*d;)n++;for(;n>0&&t<u[n-1].maxScale*f;)n--;return n}function h(e){let{scale:t,offset:n,viewportSize:r,thick:i,canvasSize:a,showMinorTicks:o}=e;if(r<=0||t<=0)return[];let s=p(t),c=s.interval,l=s.subdivisions,u=c/l,d=-n/t,f=(r-n)/t,m=r/t,h=d-m*.5,g=f+m*.5,_=Math.floor(h/c)*c,v=[],y=a??1/0;for(let e=_;e<=g;e+=c){let a=e*t+n;if(a>=-i&&a<=r+i){let t=e>=0&&e<=y&&(y===1/0||e===y||y-e>=c);v.push({position:a,length:i*.6,isMajor:!0,label:t?s.formatLabel?s.formatLabel(e):`${Math.round(e)}`:void 0,value:e})}if(o)for(let a=1;a<l;a++){let o=e+a*u,s=o*t+n;s>=-i&&s<=r+i&&v.push({position:s,length:i*.3,isMajor:!1,value:o})}}if(y!==1/0&&y>0&&!v.some(e=>e.isMajor&&e.value===y)){let e=y*t+n;e>=-i&&e<=r+i*2&&(v.push({position:e,length:i*.6,isMajor:!0,label:`${Math.round(y)}`,value:y}),v.sort((e,t)=>e.position-t.position))}return v}var g=0,_=0;function v(){return`line-${++g}-${Date.now()}`}function y(){return`canvas-${++_}-${Date.now()}`}function b(e){if(!e)return[];let t=[],n=0;for(let r of e.h)t.push({id:`h-${n++}-${Date.now()}`,orientation:`h`,position:r,visible:!0,locked:!1});for(let r of e.v)t.push({id:`v-${n++}-${Date.now()}`,orientation:`v`,position:r,visible:!0,locked:!1});return t}var x={"A4 Portrait":{name:`A4 纵向`,width:794,height:1123},"A4 Landscape":{name:`A4 横向`,width:1123,height:794},"Web 1920":{name:`Web 1920`,width:1920,height:1080},"Web 1440":{name:`Web 1440`,width:1440,height:900},"Mobile 375":{name:`Mobile 375`,width:375,height:812},"Mobile 414":{name:`Mobile 414`,width:414,height:896}},S=class{canvases=[];activeId=``;templates=new Map;globalLines=[];listeners=new Set;constructor(e=[]){for(let[e,t]of Object.entries(x))this.templates.set(e,t);for(let t of e)this.addCanvas(t)}notify(){let e={canvases:[...this.canvases],activeId:this.activeId};this.listeners.forEach(t=>t(e))}onUpdate(e){return this.listeners.add(e),()=>this.listeners.delete(e)}getState(){return{canvases:[...this.canvases],activeId:this.activeId}}get activeCanvas(){return this.canvases.find(e=>e.id===this.activeId)??null}addCanvas(e){let t=e?.id??y(),n={id:t,name:e?.name??`画布 ${this.canvases.length+1}`,width:e?.width??1920,height:e?.height??1080,scale:e?.scale??1,offsetX:e?.offsetX??0,offsetY:e?.offsetY??0,lines:b(e?.lines),thumbnail:null};return this.canvases=[...this.canvases,n],this.activeId||=t,this.notify(),t}removeCanvas(e){let t=this.canvases.findIndex(t=>t.id===e);if(t===-1)return;let n=[...this.canvases];n.splice(t,1),this.canvases=n,this.activeId===e&&n.length>0&&(this.activeId=n[0].id),this.notify()}switchCanvas(e){if(!this.canvases.some(t=>t.id===e))return;let t=this.activeCanvas;t&&t.id!==e&&this.captureThumbnail(t.id),this.activeId=e;let n=this.canvases.find(t=>t.id===e);n&&(n.thumbnail=null),this.notify()}updateCanvasState(e,t){this.canvases=this.canvases.map(n=>n.id===e?{...n,...t}:n),this.notify()}updateCanvasLines(e,t){this.canvases=this.canvases.map(n=>n.id===e?{...n,lines:[...t]}:n),this.notify()}registerTemplate(e,t){this.templates.set(e,t)}getTemplateNames(){return Array.from(this.templates.keys())}applyTemplate(e){let t=this.templates.get(e);return t?this.addCanvas(t):null}setGlobalLines(e){this.globalLines=b(e)}getGlobalLines(){return[...this.globalLines]}getMergedLines(e){let t=this.canvases.find(t=>t.id===e);return t?[...this.globalLines,...t.lines]:[]}exportCanvas(e){let t=this.canvases.find(t=>t.id===e);return t?{...t}:null}importCanvas(e){this.canvases.some(t=>t.id===e.id)?this.canvases=this.canvases.map(t=>t.id===e.id?{...e}:t):this.canvases=[...this.canvases,{...e}],this.notify()}captureThumbnail(e){let t=this.canvases.find(t=>t.id===e);t&&(t.thumbnail=`data:image/png;base64,placeholder`)}};function C(t={}){let{initialScale:n=1,initialOffset:r={x:0,y:0},minZoom:i=.1,maxZoom:s=10,enableAnimation:c=!1,animationMode:l,dampingRatio:u,naturalFrequency:d,timeConstant:f,autoCenter:p=!1,canvasSize:m,viewportSize:h,paddingRatio:g=.2}=t,_=n,v={x:r.x,y:r.y};if(p&&m&&h){let e=a({x:0,y:0,width:m.width,height:m.height},{x:0,y:0,width:h.width,height:h.height},`contain`,g);_=e.scale,v={x:e.x,y:e.y}}let y=(0,e.ref)(_),b=(0,e.ref)({x:v.x,y:v.y}),x=(0,e.markRaw)(new o({x:v.x,y:v.y,scale:_},{minZoom:i,maxZoom:s,enableAnimation:c,animationMode:l,dampingRatio:u,naturalFrequency:d,timeConstant:f}));return x.onUpdate(e=>{y.value=e.scale,b.value={x:e.x,y:e.y}}),(0,e.watch)(y,e=>{let t=x.getState();Math.abs(t.scale-e)>1e-10&&x.setTransform({scale:e})}),(0,e.watch)(()=>b.value,e=>{let t=x.getState();(Math.abs(t.x-e.x)>1e-10||Math.abs(t.y-e.y)>1e-10)&&x.setTransform({x:e.x,y:e.y})},{deep:!0}),{scale:y,offset:b,engine:x,setTransform:e=>{x.setTransform(e)},panBy:(e,t)=>{x.panBy(e,t)},zoomBy:(e,t,n)=>{x.zoomBy(e,t,n)},zoomTo:(e,t,n)=>{x.zoomTo(e,t,n)},toWorldPoint:(e,t)=>x.toWorldPoint(e,t),toScreenPoint:(e,t)=>x.toScreenPoint(e,t),reset:()=>{x.setTransform({scale:_,x:v.x,y:v.y})}}}var w=class{canvas=null;ctx=null;lastFingerprint=``;drawStatic(e,t,n){let r=this.buildFingerprint(t,n);return(r!==this.lastFingerprint||!this.canvas)&&(this.rebuild(t,n),this.lastFingerprint=r),this.canvas?(e.drawImage(this.canvas,0,0),!0):!1}rebuild(e,t){let{width:n,height:r,ratio:i,palette:a,thick:o,vertical:s}=t;this.canvas||=document.createElement(`canvas`),this.canvas.width=Math.round(n*i),this.canvas.height=Math.round(r*i);let c=this.canvas.getContext(`2d`);this.ctx=c,c.setTransform(1,0,0,1,0,0),c.scale(i,i),c.clearRect(0,0,n,r),c.fillStyle=a.bgColor,c.fillRect(0,0,n,r),c.strokeStyle=a.tickColor,c.lineWidth=1,c.beginPath();for(let i of e){let e=i.position;i.isMajor?i.value===0||i.value===t.canvasSize?s?(c.moveTo(0,e),c.lineTo(n,e)):(c.moveTo(e,0),c.lineTo(e,r)):s?(c.moveTo(n,e),c.lineTo(n*.65,e)):(c.moveTo(e,r),c.lineTo(e,r*.65)):s?(c.moveTo(n,e),c.lineTo(n*.8,e)):(c.moveTo(e,r),c.lineTo(e,r*.8))}c.stroke(),c.closePath()}buildFingerprint(e,t){let{thick:n,palette:r,vertical:i,width:a,height:o}=t,s=e.length>1?e[1].value-e[0].value:0,c=1,l=0;if(e.length>=2){let t=e[0],n=e.find(e=>e.value!==t.value)??e[1];n&&n.value!==t.value&&(c=(n.position-t.position)/(n.value-t.value),l=t.position-t.value*c)}return`${n}:${r.bgColor}:${r.tickColor}:${r.labelColor}:${i}:${a}:${o}:${s}:${c.toFixed(4)}:${l.toFixed(2)}`}clear(){this.canvas=null,this.ctx=null,this.lastFingerprint=``}},T=class{cache=new Map;maxSize;constructor(e=500){this.maxSize=e}get(e,t){let n=this.hashKey(t),r=this.cache.get(n);if(r)return this.cache.delete(n),this.cache.set(n,r),r;let i=this.createEntry(e,t);return this.cache.set(n,i),this.evictIfNeeded(),i}createEntry(e,t){let{text:n,font:r,color:i}=t;e.font=r;let a=e.measureText(n),o=Math.ceil(a.width),s=Math.ceil(a.actualBoundingBoxAscent+a.actualBoundingBoxDescent)||12;if(o===0||s===0)return{canvas:document.createElement(`canvas`),width:0,height:0};let c=document.createElement(`canvas`);c.width=o+2,c.height=s+2;let l=c.getContext(`2d`);return l.font=r,l.fillStyle=i,l.textBaseline=`alphabetic`,l.fillText(n,1,1+a.actualBoundingBoxAscent),{canvas:c,width:o,height:s}}evictIfNeeded(){if(this.cache.size<=this.maxSize)return;let e=this.cache.keys().next().value;e!==void 0&&this.cache.delete(e)}hashKey(e){return`${e.text}:${e.font}:${e.color}`}clear(){this.cache.clear()}size(){return this.cache.size}},E=`#e9f7fe`,D=class{offscreenCache=new w;labelCache=new T;render(e,t,n){for(let r of t)r.type===`ruler`&&this.renderRuler(e,r,n)}renderRuler(e,t,n){let{marks:r,vertical:i,thick:a,width:o,height:s,ratio:c,palette:l,shadowStart:u,shadowLength:d,showShadowText:f}=t;e.setTransform(1,0,0,1,0,0),e.scale(c,c),e.clearRect(0,0,o,s),this.offscreenCache.drawStatic(e,r,t);let p=[];if(d&&r.length>0){let t=u??0,n=r[0],c=r.find(e=>e.value!==n.value)??n,m=c&&c.value!==n.value?(c.position-n.position)/(c.value-n.value):1,h=n.position-n.value*m,g=t*m+h,_=d*m;if(_>0&&(e.fillStyle=l.shadowColor??E,i?e.fillRect(0,g,o,_):e.fillRect(g,0,_,s),f)){this.renderShadowText(e,t,g,a,i,l,!1);let n=t+d,r=n*m+h;this.renderShadowText(e,n,r,a,i,l,!0),p.push(g,r)}}for(let n of r)if(n.isMajor&&n.label){if(p.some(e=>Math.abs(n.position-e)<a*1.5))continue;e.save(),e.fillStyle=l.labelColor,e.font=`${Math.max(11,Math.floor(a*.5)+2)}px -apple-system, "Helvetica Neue", ".SFNSDisplay-Regular", "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif`,i?(n.value===0?e.translate(o*.4,n.position-3):n.value===t.canvasSize?e.translate(o*.2,n.position+32):e.translate(o*.15,n.position+14),e.rotate(-90*Math.PI/180),e.fillText(n.label,4,9)):(n.value===0?e.translate(n.position-15,s*.13):n.value===t.canvasSize?e.translate(n.position+5,s*.3):e.translate(n.position-12,s*.18),e.fillText(n.label,4,9)),e.restore()}}renderShadowText(e,t,n,r,i,a,o){e.save(),e.fillStyle=a.labelColor,e.font=`bold 12px sans-serif`,i?(e.translate(r*.6,n+(o?-8:8)),e.rotate(-Math.PI/2)):e.translate(n+(o?-8:8),r*.6),e.fillText(Math.round(t).toString(),0,0),e.restore()}destroy(){this.offscreenCache.clear(),this.labelCache.clear()}};function O(e){let t=e.deltaX,n=e.deltaY,r=e.deltaZ||0,i=e.deltaMode;return i===WheelEvent.DOM_DELTA_LINE?(t*=40,n*=40,r*=40):i===WheelEvent.DOM_DELTA_PAGE&&(t*=800,n*=800,r*=800),{deltaX:t,deltaY:n,deltaZ:r,deltaMode:i}}var k=class{container;callbacks;boundWheel;boundMouseDown;boundMouseMove;boundMouseUp;boundMouseEnter;boundMouseLeave;isBound=!1;constructor(e,t){this.container=e,this.callbacks=t,this.boundWheel=this.handleWheel.bind(this),this.boundMouseDown=this.handleMouseDown.bind(this),this.boundMouseMove=this.handleMouseMove.bind(this),this.boundMouseUp=this.handleMouseUp.bind(this),this.boundMouseEnter=()=>this.callbacks.onMouseEnter?.(),this.boundMouseLeave=()=>this.callbacks.onMouseLeave?.()}bind(){this.isBound||(this.isBound=!0,this.container.addEventListener(`wheel`,this.boundWheel,{passive:!1}),this.container.addEventListener(`mousedown`,this.boundMouseDown),document.addEventListener(`mousemove`,this.boundMouseMove),document.addEventListener(`mouseup`,this.boundMouseUp),this.container.addEventListener(`mouseenter`,this.boundMouseEnter),this.container.addEventListener(`mouseleave`,this.boundMouseLeave))}unbind(){this.isBound&&(this.isBound=!1,this.container.removeEventListener(`wheel`,this.boundWheel),this.container.removeEventListener(`mousedown`,this.boundMouseDown),document.removeEventListener(`mousemove`,this.boundMouseMove),document.removeEventListener(`mouseup`,this.boundMouseUp),this.container.removeEventListener(`mouseenter`,this.boundMouseEnter),this.container.removeEventListener(`mouseleave`,this.boundMouseLeave))}handleWheel(e){let t=O(e);this.callbacks.onWheel?.(e,t)}handleMouseDown(e){this.callbacks.onMouseDown?.(e)}handleMouseMove(e){this.callbacks.onMouseMove?.(e)}handleMouseUp(e){this.callbacks.onMouseUp?.(e)}},A=class{callbacks;boundKeyDown;isBound=!1;constructor(e){this.callbacks=e,this.boundKeyDown=this.handleKeyDown.bind(this)}bind(){this.isBound||(this.isBound=!0,document.addEventListener(`keydown`,this.boundKeyDown))}unbind(){this.isBound&&(this.isBound=!1,document.removeEventListener(`keydown`,this.boundKeyDown))}handleKeyDown(e){if(e.repeat)return;let t=document.activeElement;if(t?.closest(`.monaco-editor`)||t?.tagName===`INPUT`||t?.tagName===`TEXTAREA`||t?.getAttribute(`contenteditable`)===`true`)return;let n=this.parseCombo(e);this.callbacks.onShortcut?.(n,e)}parseCombo(e){let t=[];(e.ctrlKey||e.metaKey)&&t.push(`ctrl`),e.altKey&&t.push(`alt`),e.shiftKey&&t.push(`shift`);let n=e.key.toLowerCase();return n===` `&&(n=`space`),n===`+`&&(n=`plus`),n===`-`&&(n=`minus`),n===`=`&&(n=`equal`),t.push(n),t.join(`+`)}},j=class{engine;zoomStep;selfHandle;zoomMode;viewportSize;contentSize;container=null;mouseAdapter=null;isSpacePressed=!1;isDragging=!1;dragStart={x:0,y:0};lastMouse={x:0,y:0};isHovered=!1;boundKeyUp;keyboardAdapter=null;pendingWheelDelta=0;wheelRafId=null;onCursorChange=null;zoomInterceptor=null;panInterceptor=null;constructor(e,t={}){this.engine=e,this.zoomStep=t.zoomStep??.25,this.selfHandle=t.selfHandle??!1,this.zoomMode=t.zoomMode??`pointer`,this.viewportSize=t.viewportSize??{width:0,height:0},this.contentSize=t.contentSize??{width:0,height:0},this.onCursorChange=t.onCursorChange??null,this.zoomInterceptor=t.zoomInterceptor??null,this.panInterceptor=t.panInterceptor??null,this.boundKeyUp=this.handleKeyUp.bind(this)}bind(e){if(this.selfHandle)return;this.unbind(),this.container=e;let t=e.parentElement;if(!t)return;document.addEventListener(`keyup`,this.boundKeyUp);let n={onWheel:this.handleWheel.bind(this),onMouseDown:this.handleMouseDown.bind(this),onMouseMove:this.handleMouseMove.bind(this),onMouseUp:this.handleMouseUp.bind(this),onMouseEnter:()=>{this.isHovered=!0},onMouseLeave:()=>{this.isHovered=!1}};this.mouseAdapter=new k(t,n),this.mouseAdapter.bind(),this.keyboardAdapter=new A({onShortcut:this.handleShortcut.bind(this)}),this.keyboardAdapter.bind()}unbind(){this.mouseAdapter?.unbind(),this.mouseAdapter=null,this.keyboardAdapter?.unbind(),this.keyboardAdapter=null,document.removeEventListener(`keyup`,this.boundKeyUp),this.container=null}destroy(){this.wheelRafId!==null&&(cancelAnimationFrame(this.wheelRafId),this.wheelRafId=null),this.unbind()}setZoomMode(e){this.zoomMode=e}handleWheel(e){if(e.ctrlKey||e.metaKey){e.preventDefault();let t=this.container?.parentElement,n=t?t.getBoundingClientRect():new DOMRect(0,0,0,0),r=this.engine.getState(),a=i({mode:this.zoomMode,viewportSize:this.viewportSize,contentSize:this.contentSize,offset:{x:r.x,y:r.y},scale:r.scale,pointerPosition:{x:e.clientX-n.left,y:e.clientY-n.top}}),o=a.x,s=a.y,c=e.deltaY===0?e.deltaX:e.deltaY;this.pendingWheelDelta+=c<0?1:-1,this.wheelRafId===null&&(this.wheelRafId=requestAnimationFrame(()=>{if(this.wheelRafId=null,this.pendingWheelDelta===0)return;let e=this.engine.getState().scale,t=e*Math.exp(this.pendingWheelDelta*this.zoomStep/3);this.pendingWheelDelta=0,this.executeZoom(()=>this.engine.zoomTo(t,o,s),e,t,o,s)}))}}handleShortcut(e,t){if(!this.isHovered)return;let n=this.viewportSize.width/2,r=this.viewportSize.height/2,i=e=>{e()};switch(e){case`ctrl+0`:t.preventDefault(),i(()=>this.executeZoom(()=>this.engine.zoomTo(1,n,r),this.engine.getState().scale,1,n,r));break;case`ctrl+minus`:{t.preventDefault();let e=this.engine.getState().scale,a=e-this.zoomStep;i(()=>this.executeZoom(()=>this.engine.zoomBy(-this.zoomStep,n,r),e,a,n,r));break}case`ctrl+equal`:case`ctrl+plus`:{t.preventDefault();let e=this.engine.getState().scale,a=e+this.zoomStep;i(()=>this.executeZoom(()=>this.engine.zoomBy(this.zoomStep,n,r),e,a,n,r));break}case`ctrl+1`:{t.preventDefault();let e=this.viewportSize.width,a=this.viewportSize.height,o=this.contentSize.width,s=this.contentSize.height;if(e>0&&a>0&&o>0&&s>0){let t=e*.9/o,c=a*.9/s,l=Math.min(t,c),u=(e-o*l)/2,d=(a-s*l)/2,f=this.engine.getState().scale;i(()=>this.executeZoom(()=>this.engine.setTransform({scale:l,x:u,y:d}),f,l,n,r))}break}case`space`:this.isSpacePressed||(this.isSpacePressed=!0,t.preventDefault(),this.notifyCursorChange());break;default:break}}handleKeyUp(e){e.key===` `&&(this.isSpacePressed=!1,this.isDragging=!1,this.notifyCursorChange())}handleMouseDown(e){this.isSpacePressed&&e.button===0&&(this.isDragging=!0,this.dragStart={x:e.clientX,y:e.clientY},this.lastMouse={x:e.clientX,y:e.clientY},e.preventDefault(),this.notifyCursorChange())}async handleMouseMove(e){if(this.isDragging&&this.isSpacePressed){let t=e.clientX-this.lastMouse.x,n=e.clientY-this.lastMouse.y;(!this.panInterceptor?.beforePan||await this.panInterceptor.beforePan(t,n))&&(this.engine.panBy(t,n),this.panInterceptor?.afterPan?.(t,n)),this.lastMouse={x:e.clientX,y:e.clientY}}}handleMouseUp(){this.isDragging=!1,this.notifyCursorChange()}async executeZoom(e,t,n,r,i){(!this.zoomInterceptor?.beforeZoom||await this.zoomInterceptor.beforeZoom(t,n,r,i))&&(e(),this.zoomInterceptor?.afterZoom?.(t,this.engine.getState().scale,r,i))}getCursorClass(){return this.isSpacePressed?this.isDragging?`grabbing`:`grab`:`default`}notifyCursorChange(){this.onCursorChange?.(this.getCursorClass())}},M=Symbol(`RulerContext`);function N(t){let{thick:n,viewportSize:r,scale:i,offset:a,vertical:o=!1,canvasSize:s,showMinorTicks:c}=t,l=(0,e.ref)(0);return(0,e.watch)(i,e=>{l.value=m(l.value,e)},{immediate:!0}),{ticks:(0,e.computed)(()=>h({scale:i.value,offset:o?a.value.y:a.value.x,viewportSize:o?r.value.height:r.value.width,thick:n,canvasSize:s?.value,showMinorTicks:c?.value})),currentConfig:(0,e.computed)(()=>p(i.value))}}var P={class:`preview-label`},F={class:`lines`},I=[`onMouseenter`,`onMousedown`],L={key:0,class:`line-label`},R=(0,e.defineComponent)({__name:`RulerWrapperV3`,props:{vertical:{type:Boolean},width:{},height:{},thick:{},scale:{},offset:{},lines:{},palette:{},showReferLine:{type:Boolean},renderLinesInCanvas:{type:Boolean,default:!1},shadowStart:{},shadowLength:{},canvasSize:{},showMinorTicks:{type:Boolean},canvasWidth:{default:1e3},canvasHeight:{default:1e3},deleteLabel:{default:`放开删除`},lockLine:{type:Boolean,default:!1}},emits:[`addLine`,`updateLine`,`deleteLine`],setup(t,{emit:n}){(0,e.useCssVars)(e=>({v6f4fe4e5:e.palette.hoverColor}));let r=t,i=n,a=(0,e.ref)(null),o=(0,e.ref)(typeof window<`u`?window.devicePixelRatio:1),s=(0,e.computed)(()=>r.vertical?`v-container`:`h-container`),c=(0,e.computed)(()=>({width:r.width+`px`,height:r.height+`px`,cursor:r.lockLine?`default`:r.vertical?`ew-resize`:`ns-resize`,[r.vertical?`borderRight`:`borderBottom`]:`1px solid ${r.palette.borderColor}`})),l=(0,e.computed)(()=>r.lines),u=(0,e.ref)(null),d=(0,e.ref)(null),f=(0,e.ref)(!1),m=null,h=()=>{m&&clearTimeout(m),m=setTimeout(()=>{f.value=!1},1e3)};(0,e.watch)(()=>r.scale,()=>{f.value=!0,h()});function g(e){e.locked||r.lockLine||(u.value=e.id)}function _(){u.value=null}function v(e){if(u.value===e.id&&d.value!==null){let e=r.vertical?r.canvasWidth:r.canvasHeight,t=d.value<0||d.value>e,n=d.value*r.scale+(r.vertical?r.offset.x:r.offset.y)<=r.thick;if(t||n)return r.deleteLabel}return String(Math.round(e.position))}function y(e,t){if(e.locked||r.lockLine)return;t.preventDefault(),u.value=e.id,d.value=e.position;let n=a.value?.getBoundingClientRect();if(!n)return;let o=r.vertical?t.clientX-n.left:t.clientY-n.top,s=e.position,c=!1,l=t=>{let a=s+((r.vertical?t.clientX-n.left:t.clientY-n.top)-o)/r.scale,l=10/r.scale,u=p(r.scale).interval,f=Math.round(a/u)*u;Math.abs(a-f)<l&&(a=f);let m=r.vertical?r.canvasWidth:r.canvasHeight,h=a<0||a>m,g=a*r.scale+(r.vertical?r.offset.x:r.offset.y)<=r.thick;c=h||g,d.value=a,i(`updateLine`,e.id,Math.round(a))},f=()=>{c&&i(`deleteLine`,e.id),document.removeEventListener(`mousemove`,l),document.removeEventListener(`mouseup`,f),u.value=null,d.value=null};document.addEventListener(`mousemove`,l),document.addEventListener(`mouseup`,f)}let b=(0,e.ref)(!1),x=(0,e.ref)(0),S=(0,e.ref)(0),C=(0,e.computed)(()=>{let e=x.value,t=`1px dashed ${r.palette.guideLineColor}`;return r.vertical?{left:`${e}px`,top:0,height:`100%`,width:`1px`,borderLeft:t}:{top:`${e}px`,left:0,width:`100%`,height:`1px`,borderBottom:t}});function w(e){if(r.lockLine)return;b.value=!0,T(e);let t=e=>{T(e)},n=()=>{if(document.removeEventListener(`mousemove`,t),document.removeEventListener(`mouseup`,n),b.value){let e=S.value,t=r.vertical?r.canvasWidth:r.canvasHeight,n=x.value<=r.thick;e>=0&&e<=t&&!n&&i(`addLine`,{orientation:r.vertical?`v`:`h`,position:Math.round(e),visible:!0,locked:!1})}b.value=!1};document.addEventListener(`mousemove`,t),document.addEventListener(`mouseup`,n)}function T(e){let t=a.value?.getBoundingClientRect();if(!t)return;let n=r.vertical?e.clientX-t.left:e.clientY-t.top,i=r.vertical?r.offset.x:r.offset.y,o=(n-i)/r.scale,s=10/r.scale,c=p(r.scale).interval,l=Math.round(o/c)*c;Math.abs(o-l)<s&&(o=l),x.value=o*r.scale+i,S.value=o}let E=e=>{let t=r.vertical?r.offset.x:r.offset.y,n=e.position*r.scale+t,i=e.locked||r.lockLine?`default`:r.vertical?`ew-resize`:`ns-resize`,a=e.locked||r.lockLine||f.value?`none`:`auto`;return r.vertical?{left:`${n}px`,top:0,height:`100vh`,width:`1px`,borderLeft:`1px dashed ${r.palette.guideLineColor}`,cursor:i,pointerEvents:a}:{top:`${n}px`,left:0,width:`100vw`,height:`1px`,borderBottom:`1px dashed ${r.palette.guideLineColor}`,cursor:i,pointerEvents:a}},O=(0,e.computed)(()=>({width:r.width,height:r.height})),k=(0,e.computed)(()=>r.scale),A=(0,e.computed)(()=>({x:r.vertical?0:r.offset.x,y:r.vertical?r.offset.y:0})),j=(0,e.computed)(()=>r.canvasSize??1/0),M=(0,e.computed)(()=>r.showMinorTicks??!1),{ticks:R}=N({thick:r.thick,viewportSize:O,scale:k,offset:A,vertical:r.vertical,canvasSize:j,showMinorTicks:M}),z=new D;function B(){let e=a.value;if(!e)return;let t=e.getContext(`2d`);if(!t)return;let n=o.value;e.width=Math.round(r.width*n),e.height=Math.round(r.height*n),z.render(t,[{type:`ruler`,marks:R.value,vertical:r.vertical,thick:r.thick,width:r.width,height:r.height,ratio:n,palette:r.palette,shadowStart:r.shadowStart,shadowLength:r.shadowLength,showShadowText:!0,canvasSize:r.canvasSize}],{x:0,y:0,width:r.width,height:r.height})}return(0,e.onMounted)(()=>{B()}),(0,e.watch)(()=>[r.scale,r.offset,r.width,r.height,r.palette,r.shadowStart,r.shadowLength,r.showMinorTicks],()=>{B()},{deep:!0}),(n,r)=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{class:(0,e.normalizeClass)(s.value)},[(0,e.createElementVNode)(`canvas`,{ref_key:`canvasRef`,ref:a,class:`ruler`,style:(0,e.normalizeStyle)(c.value),onMousedown:(0,e.withModifiers)(w,[`stop`])},null,36),b.value?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:0,class:`preview-line`,style:(0,e.normalizeStyle)(C.value)},[(0,e.createElementVNode)(`span`,P,(0,e.toDisplayString)(Math.round(S.value)),1)],4)):(0,e.createCommentVNode)(``,!0),(0,e.withDirectives)((0,e.createElementVNode)(`div`,F,[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(l.value,t=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:t.id,class:(0,e.normalizeClass)([`line`,{active:u.value===t.id}]),style:(0,e.normalizeStyle)(E(t)),onMouseenter:(0,e.withModifiers)(e=>g(t),[`stop`]),onMouseleave:(0,e.withModifiers)(_,[`stop`]),onMousedown:(0,e.withModifiers)(e=>y(t,e),[`stop`])},[t.locked?(0,e.createCommentVNode)(``,!0):((0,e.openBlock)(),(0,e.createElementBlock)(`span`,L,(0,e.toDisplayString)(v(t)),1))],46,I))),128))],512),[[e.vShow,t.showReferLine&&!t.renderLinesInCanvas]])],2))}}),z=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n},B=z(R,[[`__scopeId`,`data-v-8e5d5262`]]),V=`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`,ee=`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+BS4l7ZqLVIZ2BhzuFKpvMsDVXXWGPMxFdAedOfcKeCRqj7MYrUhpz09PfXl5eXfectFWXXODQHpOq2qd/95o/JXr6ura3J1dXU6SZIfwKKIHAD2tVYMPBGRx77vN10UXtO85fTkmZmZHUtLSzUR2QXsBhaAL6r6DXhbrVYXi1yss59GqOgub/bN3Z7v6X/tb9Zmp/q/kN8s+lJb8oEAAAAASUVORK5CYII=`,H=(0,e.defineComponent)({__name:`SketchRuler`,props:{showRuler:{type:Boolean,default:!0},scale:{default:1},thick:{default:16},width:{default:1400},height:{default:800},canvasWidth:{default:700},canvasHeight:{default:700},palette:{default:()=>({})},lines:{default:()=>({h:[],v:[]})},isShowReferLine:{type:Boolean,default:!0},snapThreshold:{default:5},lockLine:{type:Boolean,default:!1},selfHandle:{type:Boolean,default:!1},zoomStep:{default:.25},minZoom:{default:.1},maxZoom:{default:10},animationMode:{default:`ease-out`},zoomMode:{default:`pointer`},enableAnimation:{type:Boolean,default:!1},plugins:{default:()=>[]},autoCenter:{type:Boolean,default:!0},shadow:{default:()=>({x:0,y:0,width:0,height:0})},initialOffset:{default:()=>({x:0,y:0})},showMinorTicks:{type:Boolean,default:!1},paddingRatio:{default:.2},eyeIcon:{},closeEyeIcon:{},deleteLabel:{default:`放开删除`}},emits:[`update:scale`,`update:offset`,`zoomchange`,`update:lines`,`update:lockLine`,`onCornerClick`],setup(t,{expose:n,emit:r}){let o=t,s=r,c=(0,e.computed)(()=>o.width),u=(0,e.computed)(()=>o.height),{scale:d,offset:f,engine:p,setTransform:m,zoomBy:h,zoomTo:g,panBy:_,reset:y}=C({initialScale:o.scale,initialOffset:o.initialOffset,minZoom:o.minZoom,maxZoom:o.maxZoom,enableAnimation:o.enableAnimation,animationMode:o.animationMode,autoCenter:o.autoCenter,canvasSize:{width:o.canvasWidth,height:o.canvasHeight},viewportSize:{width:c.value,height:u.value},paddingRatio:o.paddingRatio}),x=(0,e.computed)(()=>d.value);(0,e.watch)(()=>o.scale,e=>{if(e!==void 0&&Math.abs(e-d.value)>1e-10){let t=i({mode:o.zoomMode,viewportSize:{width:c.value,height:u.value},contentSize:{width:o.canvasWidth,height:o.canvasHeight},offset:{x:f.value.x,y:f.value.y},scale:d.value});p.zoomTo(e,t.x,t.y)}}),(0,e.watch)(()=>o.zoomMode,e=>{D?.setZoomMode(e)}),(0,e.watch)(()=>o.animationMode,e=>{e&&p.setAnimationMode(e)}),(0,e.watch)(()=>o.paddingRatio,()=>{if(o.autoCenter){let e=a({x:0,y:0,width:o.canvasWidth,height:o.canvasHeight},{x:0,y:0,width:c.value,height:u.value},`contain`,o.paddingRatio);m({scale:e.scale,x:e.x,y:e.y})}});let S=!1;(0,e.watch)(d,e=>{S||(S=!0,s(`update:scale`,e),requestAnimationFrame(()=>{S=!1}))});let w=!1;(0,e.watch)(f,e=>{w||(w=!0,s(`zoomchange`,{scale:d.value,x:e.x,y:e.y}),s(`update:offset`,{x:e.x,y:e.y}),T.value&&(T.value.style.transform=`matrix(${d.value}, 0, 0, ${d.value}, ${e.x}, ${e.y})`),requestAnimationFrame(()=>{w=!1}))},{deep:!0});let T=(0,e.ref)(null),E=(0,e.ref)(!1),D=null;(0,e.onMounted)(()=>{if(T.value){let e=d.value,t=f.value;T.value.style.transform=`matrix(${e}, 0, 0, ${e}, ${t.x}, ${t.y})`}T.value&&!o.selfHandle&&(D=new j(p,{zoomStep:o.zoomStep,selfHandle:!1,zoomMode:o.zoomMode,viewportSize:{width:c.value,height:u.value},contentSize:{width:o.canvasWidth,height:o.canvasHeight},onCursorChange:e=>{O.value=e},zoomInterceptor:{beforeZoom:async(e,t,n,r)=>await P.beforeZoom({from:e,to:t,center:{x:n,y:r},cancel:()=>{}}),afterZoom:(e,t,n,r)=>{P.afterZoom({from:e,to:t,center:{x:n,y:r}})}},panInterceptor:{beforePan:async(e,t)=>await P.beforePan({offset:{...f.value},delta:{x:e,y:t},cancel:()=>{}}),afterPan:(e,t)=>{P.afterPan({offset:{...f.value},delta:{x:e,y:t}})}}}),D.bind(T.value),O.value=D.getCursorClass())}),(0,e.onUnmounted)(()=>{D?.destroy(),D=null});let O=(0,e.ref)(`default`),k=(0,e.ref)(b(o.lines)),A=(0,e.computed)(()=>k.value.filter(e=>e.orientation===`h`&&e.visible!==!1)),N=(0,e.computed)(()=>k.value.filter(e=>e.orientation===`v`&&e.visible!==!1)),P=new l,F={getState:()=>({scale:d.value,offset:{...f.value},lines:k.value}),zoomBy:h,zoomTo:g,panBy:_,setTransform:m};P.setApi(F),(0,e.watch)(()=>o.plugins,(e,t)=>{if(e!==t){P.clear();for(let t of e??[])P.register(t)}},{immediate:!0});function I(e){let t=k.value,n=[],r=t.filter(e=>e.orientation===`h`);e.h.forEach((e,t)=>{t<r.length?n.push({...r[t],position:e}):n.push({id:v(),orientation:`h`,position:e,visible:!0,locked:!1})});let i=t.filter(e=>e.orientation===`v`);e.v.forEach((e,t)=>{t<i.length?n.push({...i[t],position:e}):n.push({id:v(),orientation:`v`,position:e,visible:!0,locked:!1})}),k.value=n}(0,e.watch)(()=>o.lines,e=>{e&&I(e)},{deep:!0}),(0,e.watch)([()=>o.canvasWidth,()=>o.canvasHeight,()=>o.width,()=>o.height],()=>{if(!o.autoCenter)return;let e=o.width,t=o.height,n=o.canvasWidth,r=o.canvasHeight;if(e>0&&t>0&&n>0&&r>0){let i=a({x:0,y:0,width:n,height:r},{x:0,y:0,width:e,height:t},`contain`,o.paddingRatio);m({scale:i.scale,x:i.x,y:i.y})}});let L=(0,e.ref)(o.isShowReferLine);(0,e.watch)(()=>o.isShowReferLine,e=>{L.value=e}),(0,e.watch)(()=>o.showRuler,e=>{q.showRuler.value=e});function R(){let e=[],t=[];for(let n of k.value)n.visible!==!1&&(n.orientation===`h`?e.push(n.position):t.push(n.position));return{h:e,v:t}}let z=e=>{let t={...e,id:v()};k.value=[...k.value,t],P.onLineCreate({line:t}),s(`update:lines`,R())},H=(e,t)=>{let n=k.value.find(t=>t.id===e);if(!n)return;let r=n.position;k.value=k.value.map(n=>n.id===e?{...n,position:t}:n),P.onLineMove({line:{...n,position:t},from:r,to:t}),s(`update:lines`,R())},U=e=>{let t=k.value.find(t=>t.id===e);k.value=k.value.filter(t=>t.id!==e),t&&P.onLineDelete({line:t}),s(`update:lines`,R())},W=(0,e.ref)({width:o.width,height:o.height}),G=(0,e.ref)({width:o.canvasWidth,height:o.canvasHeight}),K=(0,e.computed)(()=>({bgColor:`#f6f7f9`,tickColor:`#BABBBC`,labelColor:`#7D8694`,guideLineColor:`#51d6a9`,guideLineLockedColor:`#d4d7dc`,hoverBg:`transparent`,hoverColor:`#000`,borderColor:`#eeeeef`,shadowColor:`#e9f7fe`,...o.palette})),q={scale:d,offset:f,viewportSize:W,contentSize:G,lines:k,snapConfig:{enabled:!0,threshold:o.snapThreshold,strength:.5},palette:K.value,engine:(0,e.markRaw)(p),showRuler:(0,e.ref)(o.showRuler),showReferLine:L};(0,e.provide)(M,q);let te=(0,e.computed)(()=>({background:K.value.bgColor,width:c.value+`px`,height:u.value+`px`,left:0,top:0})),ne=(0,e.computed)(()=>({width:o.canvasWidth+`px`,height:o.canvasHeight+`px`})),re=(0,e.computed)(()=>({width:o.thick+`px`,height:o.thick+`px`,borderRight:`1px solid ${K.value.borderColor}`,borderBottom:`1px solid ${K.value.borderColor}`,backgroundImage:L.value?`url(${o.eyeIcon??V})`:`url(${o.closeEyeIcon??ee})`})),J=()=>{let e=T.value?.parentElement,t=e?e.getBoundingClientRect():new DOMRect(0,0,0,0);return{x:t.width/2,y:t.height/2}},Y=async()=>{let{x:e,y:t}=J(),n=d.value,r=n+o.zoomStep;await P.beforeZoom({from:n,to:r,center:{x:e,y:t},cancel:()=>{}})&&(h(o.zoomStep,e,t),P.afterZoom({from:n,to:r,center:{x:e,y:t}}))},X=async()=>{let{x:e,y:t}=J(),n=d.value,r=n-o.zoomStep;await P.beforeZoom({from:n,to:r,center:{x:e,y:t},cancel:()=>{}})&&(h(-o.zoomStep,e,t),P.afterZoom({from:n,to:r,center:{x:e,y:t}}))},Z=()=>{L.value=!L.value,s(`onCornerClick`,L.value)},ie=(0,e.computed)(()=>({scale:x.value,offset:f.value,zoomMode:o.zoomMode,showReferLine:L.value})),Q=e=>{D&&D.setZoomMode(e)},$=async e=>{let{x:t,y:n}=J(),r=d.value;await P.beforeZoom({from:r,to:e,center:{x:t,y:n},cancel:()=>{}})&&(g(e,t,n),P.afterZoom({from:r,to:e,center:{x:t,y:n}}))};return n({engine:p,reset:y,zoomIn:Y,zoomOut:X,cursorClass:O,setTransform:m,guideLines:k,setZoomMode:Q,zoomToPreset:$}),(n,r)=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{class:`sketch-ruler`,onMouseenter:r[0]||=e=>E.value=!0,onMouseleave:r[1]||=e=>E.value=!1},[(0,e.renderSlot)(n.$slots,`toolbar`,{tools:{zoomIn:Y,zoomOut:X,reset:(0,e.unref)(y),setZoomMode:Q,zoomToPreset:$,toggleReferLine:Z},state:ie.value}),(0,e.createElementVNode)(`div`,{class:(0,e.normalizeClass)([`canvasedit-parent`,O.value]),style:(0,e.normalizeStyle)(te.value)},[(0,e.createElementVNode)(`div`,{ref_key:`canvasRef`,ref:T,class:(0,e.normalizeClass)([`canvasedit`,O.value]),style:(0,e.normalizeStyle)(ne.value)},[(0,e.renderSlot)(n.$slots,`default`)],6)],6),(0,e.withDirectives)((0,e.createVNode)(B,{style:(0,e.normalizeStyle)({width:c.value+`px`}),vertical:!1,width:t.width,height:t.thick,thick:t.thick,scale:x.value,offset:(0,e.unref)(f),lines:A.value,palette:K.value,"show-refer-line":L.value,"shadow-start":t.shadow.x,"shadow-length":t.shadow.width,"render-lines-in-canvas":!1,"canvas-size":t.canvasWidth,"show-minor-ticks":t.showMinorTicks,"canvas-width":t.canvasWidth,"canvas-height":t.canvasHeight,"delete-label":t.deleteLabel,"lock-line":t.lockLine,onAddLine:z,onUpdateLine:H,onDeleteLine:U},null,8,[`style`,`width`,`height`,`thick`,`scale`,`offset`,`lines`,`palette`,`show-refer-line`,`shadow-start`,`shadow-length`,`canvas-size`,`show-minor-ticks`,`canvas-width`,`canvas-height`,`delete-label`,`lock-line`]),[[e.vShow,t.showRuler]]),(0,e.withDirectives)((0,e.createVNode)(B,{style:(0,e.normalizeStyle)({height:u.value+`px`}),vertical:!0,width:t.thick,height:t.height,thick:t.thick,scale:x.value,offset:(0,e.unref)(f),lines:N.value,palette:K.value,"show-refer-line":L.value,"shadow-start":t.shadow.y,"shadow-length":t.shadow.height,"render-lines-in-canvas":!1,"canvas-size":t.canvasHeight,"show-minor-ticks":t.showMinorTicks,"canvas-width":t.canvasWidth,"canvas-height":t.canvasHeight,"delete-label":t.deleteLabel,"lock-line":t.lockLine,onAddLine:z,onUpdateLine:H,onDeleteLine:U},null,8,[`style`,`width`,`height`,`thick`,`scale`,`offset`,`lines`,`palette`,`show-refer-line`,`shadow-start`,`shadow-length`,`canvas-size`,`show-minor-ticks`,`canvas-width`,`canvas-height`,`delete-label`,`lock-line`]),[[e.vShow,t.showRuler]]),(0,e.withDirectives)((0,e.createElementVNode)(`a`,{class:`corner`,style:(0,e.normalizeStyle)(re.value),onClick:Z},null,4),[[e.vShow,t.showRuler]])],32))}}),U=[`width`,`height`],W=z((0,e.defineComponent)({__name:`Minimap`,props:{contentWidth:{},contentHeight:{},viewportX:{},viewportY:{},viewportWidth:{},viewportHeight:{},scale:{},width:{default:200},height:{default:150},bgColor:{default:`#fff`}},emits:[`navigate`,`dragstart`,`dragend`],setup(t,{emit:n}){let r=t,i=n,a=(0,e.ref)(null),o=(0,e.ref)(null),s=(0,e.ref)(!1),c=(0,e.ref)({left:0,top:0,width:0,height:0}),l=(0,e.computed)(()=>({width:r.width+`px`,height:r.height+`px`,background:r.bgColor})),u=(0,e.computed)(()=>{let e=r.width/r.contentWidth,t=r.height/r.contentHeight;return Math.min(e,t)}),d=(0,e.computed)(()=>{let e=u.value,t=r.contentWidth*e,n=r.contentHeight*e;return{x:(r.width-t)/2,y:(r.height-n)/2}}),f=(0,e.computed)(()=>{let e=u.value,t=d.value.x,n=d.value.y;return{left:t+-r.viewportX/r.scale*e,top:n+-r.viewportY/r.scale*e,width:r.viewportWidth/r.scale*e,height:r.viewportHeight/r.scale*e}}),p=(0,e.computed)(()=>{let e=s.value?c.value:f.value;return{left:e.left+`px`,top:e.top+`px`,width:e.width+`px`,height:e.height+`px`}});function m(e,t){let n=r.contentWidth*r.scale,i=r.contentHeight*r.scale,a=e,o=t;return a=n<=r.viewportWidth?(r.viewportWidth-n)/2:Math.min(0,Math.max(r.viewportWidth-n,e)),o=i<=r.viewportHeight?(r.viewportHeight-i)/2:Math.min(0,Math.max(r.viewportHeight-i,t)),{x:a,y:o}}function h(){return r.contentWidth*r.scale>r.viewportWidth||r.contentHeight*r.scale>r.viewportHeight}function g(){let e=a.value;if(!e)return;let t=e.getContext(`2d`);if(!t)return;let n=r.width,i=r.height;t.clearRect(0,0,n,i),t.fillStyle=r.bgColor,t.fillRect(0,0,n,i);let o=u.value,s=r.contentWidth*o,c=r.contentHeight*o,l=(n-s)/2,d=(i-c)/2;t.strokeStyle=`#e0e0e0`,t.lineWidth=1,t.strokeRect(l,d,s,c)}(0,e.watch)(()=>[r.contentWidth,r.contentHeight,r.viewportX,r.viewportY,r.scale,r.width,r.height,r.bgColor],()=>{g()},{deep:!0,flush:`post`}),(0,e.onMounted)(()=>{g()});function _(e,t){let n=a.value.getBoundingClientRect(),o=d.value.x,s=d.value.y,c=(e-n.left-o)/u.value,l=(t-n.top-s)/u.value,f=m(r.viewportWidth/2-c*r.scale,r.viewportHeight/2-l*r.scale);i(`navigate`,f.x,f.y)}function v(e){if(!h()){b(e,`canvas`,!1);return}b(e,`canvas`,!0)}function y(e){e.stopPropagation(),h()&&b(e,`viewport`,!0)}function b(e,t,n){let a=e.currentTarget;a.setPointerCapture(e.pointerId);let o=r.viewportX,l=r.viewportY,d=f.value.left,p=f.value.top,h=r.scale/u.value,g=0,v=0,y=!1,b=!1,x=o,S=l,C=null;function w(){C===null&&(C=requestAnimationFrame(()=>{C=null,i(`navigate`,x,S)}))}n&&(c.value={...f.value},s.value=!0,i(`dragstart`));let T=e=>{if(g+=e.movementX,v+=e.movementY,(Math.abs(g)>3||Math.abs(v)>3)&&(b=!0,!y&&n&&(y=!0)),n){let e=m(o-g*h,l-v*h),t=(o-e.x)/h,n=(l-e.y)/h;c.value.left=d+t,c.value.top=p+n,x=e.x,S=e.y,w()}},E=e=>{a.releasePointerCapture(e.pointerId),a.removeEventListener(`pointermove`,T),a.removeEventListener(`pointerup`,E),a.removeEventListener(`pointercancel`,E),C!==null&&(cancelAnimationFrame(C),C=null),n?(i(`navigate`,x,S),setTimeout(()=>{s.value=!1,i(`dragend`)},50)):!b&&t===`canvas`&&_(e.clientX,e.clientY)};a.addEventListener(`pointermove`,T),a.addEventListener(`pointerup`,E),a.addEventListener(`pointercancel`,E)}return(t,n)=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{class:`minimap-container`,style:(0,e.normalizeStyle)(l.value)},[(0,e.createElementVNode)(`canvas`,{ref_key:`canvasRef`,ref:a,class:`minimap-canvas`,width:r.width,height:r.height,onPointerdown:v},null,40,U),(0,e.createElementVNode)(`div`,{ref_key:`viewportRef`,ref:o,class:`minimap-viewport`,style:(0,e.normalizeStyle)(p.value),onPointerdown:y},null,36)],4))}}),[[`__scopeId`,`data-v-9b8a0b2b`]]);function G(t){let{threshold:n,scale:r,tickTargets:i,guideLineTargets:a,customTargets:o,strength:s}=t,c=(0,e.computed)(()=>s?.value??.5);function l(e,t){let s=r.value;if(s<=0)return null;let l=[];if(i?.value)for(let e of i.value)l.push({type:`tick`,position:e,priority:1});if(a?.value)for(let e of a.value)l.push({type:`guide-line`,position:e,priority:2});if(o?.value)for(let e of o.value)l.push({type:`custom`,position:e,priority:3});if(l.length===0)return null;let u=e*s,d=n.value,f=null,p=1/0;for(let e of l){let t=e.position*s,n=Math.abs(u-t);n<=d&&n<p&&(p=n,f=e)}if(!f)return null;let m=c.value;return{position:e*(1-m)+f.position*m,target:f,original:e}}return{snap:l}}function K(e){return t=>e(t)}var q=H;exports.BUILTIN_TEMPLATES=x,exports.CanvasManager=S,exports.InputManager=j,exports.Minimap=W,exports.PluginManager=l,exports.RulerContextKey=M,exports.SketchRuler=H,exports.TransformEngine=o,exports.createDefaultState=s,exports.default=q,exports.definePlugin=K,exports.getTickConfig=p,exports.produceState=c,exports.useCanvasTransform=C,exports.useRulerScale=N,exports.useSnapDetection=G;