@kangwuyi/vue3-sketch-ruler/bundle/index.cjs.js

A sketch ruler for VueJS 3

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),Y=require("lodash");/**
 * @license @tabler/icons-vue v3.31.0 - MIT
 *
 * This source code is licensed under the MIT license.
 * See the LICENSE file in the root directory of this source tree.
 */var z={outline:{xmlns:"http://www.w3.org/2000/svg",width:24,height:24,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":2,"stroke-linecap":"round","stroke-linejoin":"round"},filled:{xmlns:"http://www.w3.org/2000/svg",width:24,height:24,viewBox:"0 0 24 24",fill:"currentColor",stroke:"none"}};/**
 * @license @tabler/icons-vue v3.31.0 - MIT
 *
 * This source code is licensed under the MIT license.
 * See the LICENSE file in the root directory of this source tree.
 */const x=(t,i,d,c)=>({color:v="currentColor",size:n=24,stroke:f=2,title:a,class:h,...b},{attrs:o,slots:g})=>{let r=[...c.map(s=>e.h(...s)),...g.default?[g.default()]:[]];return a&&(r=[e.h("title",a),...r]),e.h("svg",{...z[t],width:n,height:n,...o,class:["tabler-icon",`tabler-icon-${i}`],...t==="filled"?{fill:v}:{"stroke-width":f??z[t]["stroke-width"],stroke:v},...b},r)};/**
 * @license @tabler/icons-vue v3.31.0 - MIT
 *
 * This source code is licensed under the MIT license.
 * See the LICENSE file in the root directory of this source tree.
 */var H=x("outline","eye-x","IconEyeX",[["path",{d:"M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0",key:"svg-0"}],["path",{d:"M13.048 17.942a9.298 9.298 0 0 1 -1.048 .058c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6a17.986 17.986 0 0 1 -1.362 1.975",key:"svg-1"}],["path",{d:"M22 22l-5 -5",key:"svg-2"}],["path",{d:"M17 22l5 -5",key:"svg-3"}]]);/**
 * @license @tabler/icons-vue v3.31.0 - MIT
 *
 * This source code is licensed under the MIT license.
 * See the LICENSE file in the root directory of this source tree.
 */var K=x("outline","eye","IconEye",[["path",{d:"M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0",key:"svg-0"}],["path",{d:"M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6",key:"svg-1"}]]);const T={bgColor:"#171a24",longfgColor:"#3B3B3B",shortfgColor:"#3B3B3B",fontColor:"#f3f3f3",shadowColor:"#3275ff1a",lineColor:"#E02020",borderColor:"#3B3B3B",cornerActiveColor:"rgb(235, 86, 72, 0.6)"};var B=(t=>(t.DEL="del",t.ADD="add",t.UPDATE="update",t))(B||{}),C=(t=>(t.HORIZONTAL="horizontal",t.VERTICAL="vertical",t))(C||{});const R=Symbol("lineListCb"),Z={lineList:{horizontal:[],vertical:[]},updateLineList:()=>{}},I={x:0,y:0,width:0,height:0},F=Symbol("rect"),$=window.devicePixelRatio||1,O=Symbol("wdpRatio"),D=1,N=Symbol("scaleFigure"),G=["tabindex"],W={class:"value"},J=e.defineComponent({__name:"line",props:{start:{type:Number,required:!0},isVertical:{type:Boolean,required:!0},rollback:{type:Number,required:!0},value:{type:Number,required:!0},thick:{type:Number,required:!0}},emits:["onIsMovingStart","onIsMovingEnd","onUpdateLine"],setup(t,{emit:i}){const d=e.inject(N,e.ref(D)),c=e.inject(R,()=>{}),v=i,n=e.ref(t.value),f=e.computed(()=>({[t.isVertical?"top":"left"]:`${(n.value-t.start)*d.value}px`,[t.isVertical?"borderTop":"borderLeft"]:`1px solid ${T.lineColor}`,cursor:t.isVertical?"ns-resize":"ew-resize",[t.isVertical?"width":"height"]:`${t.rollback+t.thick}px`})),a=e.computed(()=>({[t.isVertical?"left":"top"]:`${t.thick-(t.isVertical,22)}px`})),h=o=>{v("onIsMovingStart");const g=t.isVertical?o.clientY:o.clientX,r=n.value,s=p=>{const V=t.isVertical?p.clientY:p.clientX,l=Math.round(r+(V-g)/d.value);n.value=l},u=()=>{v("onIsMovingEnd"),v("onUpdateLine",n.value),document.removeEventListener("mousemove",s),document.removeEventListener("mouseup",u)};document.addEventListener("mousemove",s),document.addEventListener("mouseup",u)},b=()=>c(t.isVertical?C.VERTICAL:C.HORIZONTAL,B.DEL,t.value);return(o,g)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass({"ruler-_-line":!0,"ruler-_-line-v":t.isVertical,"ruler-_-line-h":!t.isVertical}),style:e.normalizeStyle(f.value),onDblclick:e.withModifiers(b,["stop","prevent"]),onMousedown:e.withModifiers(h,["stop","prevent"]),tabindex:t.value},[e.createElementVNode("div",{class:"action",style:e.normalizeStyle(a.value)},[e.createElementVNode("span",W,e.toDisplayString(n.value),1)],4)],46,G))}}),Q=t=>t<=.25?40:t<=.5?20:t<=1?10:t<=2?5:t<=4?2:1,U=.83,_=(t,i,d,c,v)=>{const{scale:n,width:f,height:a,ratio:h}=v,{bgColor:b,fontColor:o,shadowColor:g,longfgColor:r,shortfgColor:s}=T;if(i.scale(h,h),i.clearRect(0,0,f,a),i.fillStyle=b,i.fillRect(0,0,f,a),c){const k=((t?c.y:c.x)-d)*n,E=(t?c.height:c.width)*n;i.fillStyle=g;const w=t?0:k,P=t?k:0,j=t?f:E,X=t?E:a;i.fillRect(w,P,j,X)}const u=Q(n),p=u*n,V=u*10,l=V*n,L=Math.floor(d/u)*u,y=Math.floor(d/V)*V,m=(L-d)/u*p,M=(y-d)/V*l,S=d+Math.ceil((t?a:f)/n);i.beginPath(),i.fillStyle=o,i.strokeStyle=r,i.font='"PingFang SC","Microsoft YaHei"';for(let k=y,E=0;k<S;k+=V,E+=1){const w=M+E*l+.5;t?i.moveTo(0,w):i.moveTo(w,0),i.save(),t?i.translate(f*.4,w):i.translate(w,a*.4),t&&i.rotate(-Math.PI/2),i.scale(U/h,U/h),i.fillText(String(k),4*h,9*h),i.restore(),t?i.lineTo(f*15/16,w):i.lineTo(w,a*15/16)}i.stroke(),i.closePath(),i.beginPath(),i.strokeStyle=s;for(let k=L,E=0;k<S;k+=u,E+=1){const w=m+E*p+.5;t?i.moveTo(0,w):i.moveTo(w,0),k%V!==0&&(t?i.lineTo(f*1/4,w):i.lineTo(w,a*1/4))}i.stroke(),i.closePath(),i.setTransform(1,0,0,1,0,0)},ee=e.defineComponent({__name:"canvas",props:{isVertical:{type:Boolean,required:!0},lineVisible:{type:Boolean,required:!0},start:{type:Number,required:!0},width:{type:Number,required:!0},height:{type:Number,required:!0}},emits:["onLineVisible","onLineMove","onLineDisable","onLineMoveEnd"],setup(t,{emit:i}){const d=i,c=e.inject(O,e.ref($));e.watch(c,l=>{},{deep:!0});const v=e.inject(N,e.ref(D)),n=e.inject(F,e.computed(()=>I));e.watch([n,v],([l,L])=>{r()},{deep:!0});const f=e.inject(R,()=>{}),a=(l,L,y)=>Math.round(L+l/y),h=e.ref(null),b=e.ref(null),o=t;e.watch(()=>[o.start],()=>{r()}),e.watch(()=>[o.width,o.height],()=>{g(),r()}),e.onMounted(()=>{g(),r()});const g=()=>{if(!h.value)return;h.value.width=o.width*c.value,h.value.height=o.height*c.value;const l=h.value.getContext("2d");l.font=`normal ${12*c.value}px   'PingFang SC', 'Microsoft YaHei', monospace, sans-serif`,l.lineWidth=1,l.textBaseline="middle",b.value=l},r=()=>{if(!b.value)return;const l={scale:v.value,ratio:c.value,width:o.width,height:o.height};_(o.isVertical,b.value,o.start,{x:o.isVertical?0:n.value.x,width:o.isVertical?0:n.value.width,y:o.isVertical?n.value.y:0,height:o.isVertical?n.value.height:0},l)},s=l=>{const L=o.isVertical?l.offsetY:l.offsetX,y=a(L,o.start,v.value);f(o.isVertical?C.VERTICAL:C.HORIZONTAL,B.ADD,y)},u=l=>{const L=o.isVertical?l.offsetY:l.offsetX,y=a(L,o.start,v.value);d("onLineVisible",y)},p=l=>{const L=o.isVertical?l.offsetY:l.offsetX,y=a(L,o.start,v.value);d("onLineMove",y)},V=()=>d("onLineMoveEnd",!1);return(l,L)=>(e.openBlock(),e.createElementBlock("canvas",{class:e.normalizeClass({"ruler-_-canvas":!0,"ruler-_-canvas-noevent":!t.lineVisible}),ref_key:"canvasRef",ref:h,onClick:s,onMouseenter:u,onMousemove:p,onMouseleave:V},null,34))}}),te={key:0,class:"ruler-_-line-box"},ie={class:"value"},q=e.defineComponent({__name:"wrapper",props:{isVertical:{type:Boolean,required:!0},width:{type:Number,required:!0},height:{type:Number,required:!0},thick:{type:Number,required:!0},rollback:{type:Number,required:!0,defalut:0},start:{type:Number,required:!0},lineVisible:{type:Boolean,required:!0},markLineList:Array},emits:["update:lineVisible"],setup(t,{emit:i}){const d=e.inject(R,()=>{}),c=e.inject(N,e.ref(D)),v=i,n=t,f=e.computed(()=>{const m={width:`calc(100% - ${n.thick}px)`,height:`${n.thick}px`,left:`${n.thick}px`},M={width:`${n.thick}px`,height:`calc(100% - ${n.thick}px)`,top:`${n.thick}px`};return n.isVertical?M:m}),a=e.ref(0),h=e.computed(()=>({[n.isVertical?"top":"left"]:`${(a.value-n.start)*c.value}px`,[n.isVertical?"borderTop":"borderLeft"]:`1px dashed ${T.cornerActiveColor}`,[n.isVertical?"width":"height"]:`${n.rollback+n.thick}px`})),b=m=>{V.value||(a.value=m),p(!0)},o=Y.debounce(m=>{a.value=m},1),g=()=>p(!1),r=()=>v("update:lineVisible",!1),s=m=>{const M=m-n.start,S=(n.isVertical?n.height:n.width)/c.value,k=n.isVertical?C.VERTICAL:C.HORIZONTAL;M<0||M>S?d(k,B.DEL,m):d(k,B.UPDATE,m)},u=e.ref(!1),p=m=>u.value=m,V=e.ref(!1),l=m=>V.value=m,L=()=>{l(!0),p(!1)},y=()=>{l(!1)};return(m,M)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass({"ruler-_-wrapper":!0,"ruler-_-wrapper-v":t.isVertical,"ruler-_-wrapper-h":!t.isVertical}),style:e.normalizeStyle(f.value)},[e.createVNode(ee,{lineVisible:t.lineVisible,isVertical:t.isVertical,width:t.width,height:t.height,start:t.start,onOnLineMove:e.unref(o),onOnLineMoveEnd:g,onOnLineVisible:b,onOnLineDisable:r},null,8,["lineVisible","isVertical","width","height","start","onOnLineMove"]),t.lineVisible?(e.openBlock(),e.createElementBlock("div",te,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.markLineList,(S,k)=>(e.openBlock(),e.createBlock(J,{key:"line"+S,index:k,start:t.start,isVertical:t.isVertical,rollback:t.rollback,thick:t.thick,value:S>>0,onOnIsMovingEnd:y,onOnIsMovingStart:L,onOnUpdateLine:s},null,8,["index","start","isVertical","rollback","thick","value"]))),128))])):e.createCommentVNode("",!0),u.value?e.withDirectives((e.openBlock(),e.createElementBlock("div",{key:1,class:"indicator",style:e.normalizeStyle(h.value)},[e.createElementVNode("div",ie,e.toDisplayString(a.value),1)],4)),[[e.vShow,t.lineVisible]]):e.createCommentVNode("",!0)],6))}}),A=e.defineComponent({__name:"ruler",props:e.mergeDefaults({wdpRatio:Number,scaleFigure:Number,rect:Object,thick:Number,width:Number,height:Number,startX:Number,startY:Number,markLineList:Array},{wdpRatio:$,__skip_wdpRatio:!0,scaleFigure:D,__skip_scaleFigure:!0,rect:I,__skip_rect:!0,thick:24,width:0,height:0,startX:0,startY:0,markLineList:()=>[]}),emits:["onMarkLineList"],setup(t,{emit:i}){const d=i,c=e.computed(()=>t.wdpRatio);e.provide(O,c);const v=e.computed(()=>t.scaleFigure);e.provide(N,v);const n=()=>{};e.provide("updateRect",n);const f=e.computed(()=>t.rect);e.provide(F,f);const a=e.computed(()=>t.markLineList.reduce((r,s)=>(r.horizontal||(r.horizontal=[]),r.vertical||(r.vertical=[]),s.type==="horizontal"?r.horizontal.push(s.value):s.type==="vertical"&&r.vertical.push(s.value),r),{})),h=(r,s,u)=>{d("onMarkLineList",r,s,u)};e.provide(R,h);const b=e.computed(()=>({backgroundColor:T.bgColor,width:`${t.thick}px`,height:`${t.thick}px`,borderRight:`1px solid ${T.borderColor}`,borderBottom:`1px solid ${T.borderColor}`})),o=e.ref(!1),g=()=>o.value=!o.value;return(r,s)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createVNode(q,{isVertical:!1,markLineList:a.value.horizontal,width:t.width,height:t.thick,thick:t.thick,rollback:t.height,start:t.startX,lineVisible:o.value,"onUpdate:lineVisible":s[0]||(s[0]=u=>o.value=u)},null,8,["markLineList","width","height","thick","rollback","start","lineVisible"]),e.createVNode(q,{isVertical:!0,markLineList:a.value.vertical,width:t.thick,height:t.height,thick:t.thick,rollback:t.width,start:t.startY,lineVisible:o.value,"onUpdate:lineVisible":s[1]||(s[1]=u=>o.value=u)},null,8,["markLineList","width","height","thick","rollback","start","lineVisible"]),e.createElementVNode("span",{class:e.normalizeClass(["",{"ruler-_-corner":!0}]),style:e.normalizeStyle(b.value),onClick:g},[o.value?(e.openBlock(),e.createBlock(e.unref(K),{key:0,class:"ruler-_-corner-icon"})):(e.openBlock(),e.createBlock(e.unref(H),{key:1,class:"ruler-_-corner-icon"}))],4)],64))}});A.install=function(t){t.component("imp-sketch-ruler",A)};const ne=[A],oe=function(t){ne.forEach(i=>{t.component("imp-sketch-ruler",i)})},le={install:oe,SketchRuler:A};exports.DEFAULT_LINELIST=Z;exports.DEFAULT_RECT=I;exports.DEFAULT_SCALE_FIGURE=D;exports.DEFAULT_THEME=T;exports.DEFAULT_WDP_RATIO=$;exports.ELineActionType=B;exports.ELineDirectionType=C;exports.default=le;exports.lineListCbKey=R;exports.rectKey=F;exports.scaleFigureKey=N;exports.wdpRatioKey=O;