vue-data-ui/dist/PenAndPaper-DPoMEHE6.cjs

A user-empowering data visualization Vue 3 components library for eloquent data storytelling

"use strict";const n=require("vue"),S=require("./BaseIcon-q0bEOOzl.cjs"),K=require("./PenAndPaper.vue_vue_type_style_index_0_scoped_3cea7589_lang-B-psJjxF.cjs"),z=require("./index-_gyicZFE.cjs"),T=require("./_plugin-vue_export-helper-BHFhmbuH.cjs"),X={key:0,"data-html2canvas-ignore":"",class:"vue-ui-pen-and-paper-actions"},Y={class:"vue-ui-pen-and-paper-action",style:{padding:"0 !important"}},O=["disabled"],W={__name:"PenAndPaper",props:{svgRef:{type:[Object,null],required:!0},color:{type:String,default:"#2D353C"},backgroundColor:{type:String,default:"#FFFFFF"},active:{type:Boolean,default:!1},scale:{type:Number,default:1}},emits:["close"],setup(v,{emit:F}){const l=v,Q=F,A=n.ref([]),h=n.ref([]),C=n.ref(l.color),w=n.ref(2),R=n.ref(!1),$=n.ref(""),r=n.ref(null),c=n.ref(null),B=n.ref(null),k=n.computed(()=>z.lightenHexColor(l.color,.6));function V(){if(!r.value)return;const o=r.value.querySelector(".vue-data-ui-mask");if(o&&r.value.removeChild(o),l.active){const t=document.createElementNS("http://www.w3.org/2000/svg","rect");t.setAttribute("class","vue-data-ui-mask"),t.setAttribute("width","100%"),t.setAttribute("height","100%"),t.setAttribute("fill","transparent"),t.setAttribute("pointer-events","all"),r.value.insertBefore(t,r.value.firstChild)}}function N(o){var s;const t=l.svgRef;if(!t)return{x:0,y:0};const a=t.createSVGPoint();a.x=o.clientX,a.y=o.clientY;const e=(s=t.getScreenCTM())==null?void 0:s.inverse();return e?a.matrixTransform(e):{x:0,y:0}}function M(o){const t=o.trim().split(/\s+/);if(t.length<4)return o;const a=t.slice(1).map(Number);if(a.length%2!==0)return o;const e=I(a),s=[`M ${e[0]} ${e[1]}`];for(let d=2;d<e.length-2;d+=2){const p=e[d-2],m=e[d-1],f=e[d],g=e[d+1],y=(p+f)/2,x=(m+g)/2;s.push(`Q ${p} ${m} ${y} ${x}`)}const u=e[e.length-2],i=e[e.length-1];return s.push(`L ${u} ${i}`),s.join(" ")}function I(o,t=1){const a=[...o];for(let e=2;e<o.length-2;e+=2){const s=o[e],u=o[e+1],i=o[e-2],d=o[e-1],p=o[e+2],m=o[e+3];a[e]=s+t*((i+p)/2-s),a[e+1]=u+t*((d+m)/2-u)}return a}function D(o){const t=o.trim().split(/\s+/);let a="",e="",s=null,u=null;for(let i=0;i<t.length;i+=1){const d=t[i];if(isNaN(d)){if(e=d,e==="M"||e==="L")s=parseFloat(t[++i]),u=parseFloat(t[++i]),a+=`${e}${s} ${u}`;else if(e==="Q"){const p=parseFloat(t[++i]),m=parseFloat(t[++i]),f=parseFloat(t[++i]),g=parseFloat(t[++i]);p===s&&m===u?a+=`t${f-s} ${g-u}`:a+=`q${p-s} ${m-u} ${f-s} ${g-u}`,s=f,u=g}}else{const p=parseFloat(d),m=parseFloat(t[++i]);if(e==="L"){const f=p-s,g=m-u;f===0?a+=`v${g}`:g===0?a+=`h${f}`:a+=`l${f} ${g}`,s=p,u=m}else if(e==="Q"){const f=p,g=m,y=parseFloat(t[++i]),x=parseFloat(t[++i]);f===s&&g===u?a+=`t${y-s} ${x-u}`:a+=`q${f-s} ${g-u} ${y-s} ${x-u}`,s=y,u=x}}}return a}function E(o){if(!l.active||!r.value)return;R.value=!0;const{x:t,y:a}=N(o);B.value={x:t,y:a},$.value=`M ${t} ${a}`,c.value=document.createElementNS("http://www.w3.org/2000/svg","path"),c.value.setAttribute("stroke",C.value),c.value.setAttribute("stroke-width",w.value*l.scale),c.value.setAttribute("fill","none"),c.value.setAttribute("stroke-linecap","round"),c.value.setAttribute("stroke-linejoin","round"),c.value.setAttribute("class","vue-data-ui-doodle"),r.value.appendChild(c.value)}function L(o){if(!R.value||!r.value||!c.value)return;const{x:t,y:a}=N(o);$.value+=` ${t} ${a}`,c.value.setAttribute("d",$.value)}function b(o){if(R.value&&r.value&&c.value){const{x:t,y:a}=N(o);if(B.value&&B.value.x===t&&B.value.y===a){const e=document.createElementNS("http://www.w3.org/2000/svg","circle");e.setAttribute("cx",t),e.setAttribute("cy",a),e.setAttribute("r",w.value*l.scale/2),e.setAttribute("fill",C.value),e.setAttribute("class","vue-data-ui-doodle"),r.value.appendChild(e),A.value.push(e)}else{const e=c.value;e.setAttribute("d",D(M($.value))),A.value.push(e)}h.value=[],c.value=""}R.value=!1}function U(){if(A.value.length>0){const o=A.value.pop();h.value.push(o),r.value&&r.value.removeChild(o)}}function q(){if(h.value.length>0){const o=h.value.pop();A.value.push(o),r.value&&r.value.appendChild(o)}}function G(){r.value&&(r.value.innerHTML=""),A.value=[],h.value=[],V()}function H(){!l.svgRef||!l.active||(l.svgRef.addEventListener("mousedown",E),l.svgRef.addEventListener("mousemove",L),l.svgRef.addEventListener("mouseup",b),l.svgRef.addEventListener("mouseleave",b),l.svgRef.addEventListener("touchstart",E,{passive:!1}),l.svgRef.addEventListener("touchmove",L,{passive:!1}),l.svgRef.addEventListener("touchend",b),r.value&&(r.value.style.pointerEvents="auto"))}function P(){l.svgRef&&(l.svgRef.removeEventListener("mousedown",E),l.svgRef.removeEventListener("mousemove",L),l.svgRef.removeEventListener("mouseup",b),l.svgRef.removeEventListener("mouseleave",b),l.svgRef.removeEventListener("touchstart",E),l.svgRef.removeEventListener("touchmove",L),l.svgRef.removeEventListener("touchend",b),r.value&&(r.value.style.pointerEvents="none"))}return n.watch(()=>l.active,o=>{o?H():P()}),n.watch(()=>l.active,()=>{n.nextTick(()=>{V()})}),n.onMounted(()=>{n.nextTick(()=>{l.svgRef&&(r.value=document.createElementNS("http://www.w3.org/2000/svg","g"),r.value.setAttribute("class","vue-data-ui-doodles"),r.value.style.cursor="url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAABg2lDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9TpSIVh2YQcchQnSyIijhKFYtgobQVWnUwufQLmjQkKS6OgmvBwY/FqoOLs64OroIg+AHi6OSk6CIl/i8ptIjx4Lgf7+497t4BQrPKNKtnAtB020wn4lIuvyqFXhGGiAhCiMnMMpKZxSx8x9c9Any9i/Es/3N/jgG1YDEgIBHPMcO0iTeIZzZtg/M+scjKskp8Tjxu0gWJH7muePzGueSywDNFM5ueJxaJpVIXK13MyqZGPE0cVTWd8oWcxyrnLc5atc7a9+QvDBf0lQzXaY4ggSUkkYIEBXVUUIWNGK06KRbStB/38Q+7/hS5FHJVwMixgBo0yK4f/A9+d2sVpya9pHAc6H1xnI9RILQLtBqO833sOK0TIPgMXOkdf60JzH6S3uho0SNgcBu4uO5oyh5wuQMMPRmyKbtSkKZQLALvZ/RNeSByC/Sveb2193H6AGSpq+Ub4OAQGCtR9rrPu/u6e/v3TLu/H5C7crM1WjgWAAAABmJLR0QAqwB5AHWF+8OUAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH5gwUExIUagzGcQAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAABfSURBVBjTldAxDoNQDIPhL0+q1L33P1AvAhN7xfK6WAgoLfSfrNiykpQtE+7RLzx2vgF9D3o8lWDmn1QVVMP0LZQGmNtqp1/cmou0XHdG/+sYeGZwFBqPCub8rkcvvAGvsi1VYarR8wAAAABJRU5ErkJggg==') 5 5, auto",l.svgRef.appendChild(r.value),P())})}),n.onBeforeUnmount(()=>{r.value&&l.svgRef&&(l.svgRef.removeChild(r.value),P())}),(o,t)=>v.active?(n.openBlock(),n.createElementBlock("div",X,[n.createElementVNode("button",{class:"vue-ui-pen-and-paper-action",onClick:t[0]||(t[0]=a=>Q("close")),style:n.normalizeStyle({backgroundColor:v.backgroundColor,border:`1px solid ${k.value}`})},[n.createVNode(S.default,{name:"close",stroke:v.color},null,8,["stroke"])],4),n.createElementVNode("button",Y,[n.createVNode(K.ColorPicker,{value:C.value,"onUpdate:value":t[1]||(t[1]=a=>C.value=a),backgroundColor:v.backgroundColor,buttonBorderColor:k.value},null,8,["value","backgroundColor","buttonBorderColor"])]),n.createElementVNode("button",{class:n.normalizeClass(["vue-ui-pen-and-paper-action",{"vue-ui-pen-and-paper-action-disabled":!A.value.length}]),disabled:!A.value.length,onClick:U,style:n.normalizeStyle({backgroundColor:v.backgroundColor,border:`1px solid ${k.value}`})},[n.createVNode(S.default,{name:"restart",stroke:v.color},null,8,["stroke"])],14,O),n.createElementVNode("button",{class:n.normalizeClass(["vue-ui-pen-and-paper-action",{"vue-ui-pen-and-paper-action-disabled":!h.value.length}]),onClick:q,style:n.normalizeStyle({backgroundColor:v.backgroundColor,border:`1px solid ${k.value}`})},[n.createVNode(S.default,{name:"restart",stroke:v.color,style:{transform:"scaleX(-1)"}},null,8,["stroke"])],6),n.createElementVNode("button",{class:n.normalizeClass(["vue-ui-pen-and-paper-action",{"vue-ui-pen-and-paper-action-disabled":!A.value.length}]),onClick:G,style:n.normalizeStyle({backgroundColor:v.backgroundColor,border:`1px solid ${k.value}`})},[n.createVNode(S.default,{name:"trash",stroke:v.color},null,8,["stroke"])],6),n.withDirectives(n.createElementVNode("input",{ref:"range",type:"range",class:"vertical-range",min:.5,max:12,step:.1,"onUpdate:modelValue":t[2]||(t[2]=a=>w.value=a),style:n.normalizeStyle({accentColor:v.color})},null,4),[[n.vModelText,w.value]])])):n.createCommentVNode("",!0)}},j=T._export_sfc(W,[["__scopeId","data-v-3cea7589"]]);exports.PenAndPaper=j;