vue3-scale-ruler/lib/components/RulerCanvas.vue2.js

"use strict";const e=require("vue"),$=require("../props.js"),d=require("./RulerLine.vue.js"),V=require("../hooks/useCanvas.js"),D=e.defineComponent({__name:"RulerCanvas",props:e.mergeDefaults({width:{},height:{},thick:{},scale:{},ratio:{},lines:{},isShowReferLine:{type:Boolean},startX:{},startY:{},rect:{},useMoveLine:{type:Boolean},autoUpdateCssVar:{type:Boolean},longLineColor:{},shortLineColor:{},fontColor:{},lineColor:{},bgColor:{},borderColor:{},activeColor:{},blockColor:{},step:{},cornerIcon:{},cornerCloseIcon:{},lineCloseIcon:{},h:{type:Boolean}},{...$.SketchRulePropsDefaultValeue,h:!0}),setup(m){const t=m,h=t.h?"h":"v",i=e.ref(!1),n=e.ref(0),v=`ruler-${Math.round(Math.random()*Date.now())}`,C=e.ref(),y=e.ref(),a=V(t,v,t.h),f=o=>o*t.scale,p=e.computed(()=>f(0-a.start.value)+t.thick),w=o=>{t.h?n.value=o.offsetX:n.value=o.offsetY},B=e.computed(()=>({[t.h?"height":"width"]:`${t.thick}px`,[t.h?"paddingLeft":"paddingTop"]:`${t.thick}px`})),L=e.computed(()=>{var r,s,c,k;let o=t.h?(r=t.rect)==null?void 0:r.width:(s=t.rect)==null?void 0:s.height,l=t.h?(c=t.rect)==null?void 0:c.x:(k=t.rect)==null?void 0:k.y;return t.rect?{[t.h?"width":"height"]:`${o}px`,[t.h?"left":"top"]:`${p.value+(l||0)}px`}:null}),g=e.computed(()=>Math.ceil(n.value/t.scale+a.start.value)),u=e.reactive({v:[...t.lines.v||[]],h:[...t.lines.h||[]]}),M=()=>{u[h].push(n.value/t.scale+a.start.value)},R=e.computed(()=>t.h?u.h:u.v),S=o=>{u[h].splice(o,1)};return e.watch(t,()=>{a.draw(t)}),(o,l)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",{class:e.normalizeClass(["ruler",[o.h?"ruler-h":"ruler-v"]]),id:v,style:e.normalizeStyle(B.value),ref_key:"mainRef",ref:C},[o.rect?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["ruler-block",[o.h?"ruler-block-h":"ruler-block-v"]]),style:e.normalizeStyle(L.value)},null,6)):e.createCommentVNode("",!0),e.createElementVNode("canvas",{ref_key:"canvasRef",ref:y,onMouseenter:l[0]||(l[0]=r=>i.value=!0),onMousemove:l[1]||(l[1]=r=>w(r)),onMouseleave:l[2]||(l[2]=r=>i.value=!1),onClick:l[3]||(l[3]=r=>M())},null,544)],6),e.withDirectives(e.createVNode(d,{start:0,offset:n.value+o.thick,h:o.h,value:g.value,isHover:!0,thick:o.thick},null,8,["offset","h","value","thick"]),[[e.vShow,i.value&&o.useMoveLine]]),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(R.value,(r,s)=>e.withDirectives((e.openBlock(),e.createBlock(d,{key:s,start:p.value,offset:f(r),h:o.h,value:r,thick:o.thick,onDel:c=>S(s),lineCloseIcon:o.lineCloseIcon},null,8,["start","offset","h","value","thick","onDel","lineCloseIcon"])),[[e.vShow,o.isShowReferLine]])),128))],64))}});module.exports=D;