vue-data-ui-hq/dist/PenAndPaper-PL3bp4ud.cjs

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

"use strict";const e=require("vue"),X=require("./index-ZfICPrrM.cjs"),E=require("./BaseIcon-DO69J5Rk.cjs"),W=require("./usePrinter-B-gh2f22.cjs"),R=require("./_plugin-vue_export-helper-BHFhmbuH.cjs"),A={style:{height:"100%",width:"100%",position:"relative"}},H={class:"icon"},Q=["onClick"],_={style:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -46%)"}},j=["value"],G={__name:"ColorPicker",props:{value:{type:String,default:"#ffffff"},size:{type:String,default:"50px"},backgroundColor:{type:String,default:"#FFFFFF"},buttonBorderColor:{type:String,default:"#FFFFFF"}},emits:["update:value"],setup(a,{emit:S}){const p=a,P=S,v=e.computed(()=>({backgroundColor:p.value,width:"100%",height:"100%",cursor:"pointer"})),g=e.ref(null),h=e.ref(!1),y=()=>{var u;(u=g.value)==null||u.click()};function F(u){P("update:value",u),h.value=!1}function $(){h.value=!1}function N(){h.value&&$()}const x=u=>{const B=u.target.value;P("update:value",B)},C=e.computed(()=>X.adaptColorToBackground(p.value));e.watch(()=>p.value,u=>{g.value.value=u});const b=e.ref(["#000000","#FFFFFF","#FF5733","#33FF57","#3357FF","#FFC300","#800080","#FF1493","#00CED1"]);return(u,B)=>e.withDirectives((e.openBlock(),e.createElementBlock("div",A,[e.createElementVNode("div",{onClick:B[0]||(B[0]=w=>h.value=!e.unref(h)),style:e.normalizeStyle(e.unref(v))},[e.createElementVNode("div",H,[e.createVNode(E.default,{name:"palette",stroke:e.unref(C),size:22},null,8,["stroke"])])],4),e.unref(h)?(e.openBlock(),e.createElementBlock("div",{key:0,class:"vue-ui-color-picker",style:e.normalizeStyle({backgroundColor:a.backgroundColor})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(b),w=>(e.openBlock(),e.createElementBlock("div",{class:"vue-ui-color-picker-option",style:e.normalizeStyle({backgroundColor:w,outline:`1px solid ${a.buttonBorderColor}`}),onClick:()=>F(w)},null,12,Q))),256)),e.createElementVNode("div",{class:"vue-ui-color-picker-option",onClick:y,style:e.normalizeStyle({backgroundColor:a.value,outline:`1px solid ${a.buttonBorderColor}`})},[e.createElementVNode("div",_,[e.createVNode(E.default,{name:"colorPicker",stroke:e.unref(C),size:22},null,8,["stroke"])]),e.createElementVNode("input",{ref_key:"colorInput",ref:g,type:"color",value:a.value,class:"hidden-input",onInput:x},null,40,j)],4)],4)):e.createCommentVNode("",!0)])),[[e.unref(W.vClickOutside),N]])}},J=R._export_sfc(G,[["__scopeId","data-v-4a91affd"]]),K={class:e.normalizeClass({"vue-ui-pen-and-paper-action":!0}),style:{padding:"0 !important"}},Z=["disabled"],ee=["xmlns","viewBox"],te=["cx","cy","r","fill"],oe=["d","stroke","stroke-width"],ne=["d","stroke","stroke-width"],le={__name:"PenAndPaper",props:{parent:{type:HTMLElement},backgroundColor:{type:String,default:"#FFFFFF"},color:{type:String,default:"#2D353C"},active:{type:Boolean,default:!1}},emits:["close"],setup(a,{emit:S}){const p=a,P=S,v=e.ref([]),g=e.ref([]),h=e.ref("0 0 0 0"),y=e.ref(p.color),F=e.ref(1),$=e.computed(()=>X.lightenHexColor(p.color,.6));function N({width:n,height:o}){h.value=`0 0 ${n} ${o}`}const x=e.ref(null);e.onMounted(()=>{e.nextTick(()=>{if(p.parent){x.value=new ResizeObserver(t=>{for(const l of t){const{width:r,height:c}=l.contentRect;N({width:r,height:c})}}),x.value.observe(p.parent);const{width:n,height:o}=p.parent.getBoundingClientRect();N({width:n,height:o})}})}),e.onBeforeUnmount(()=>{x.value&&x.value.disconnect()}),e.watch(()=>p.parent,n=>{if(!n)return;const{width:o,height:t}=p.parent.getBoundingClientRect();N({width:o,height:t})},{immediate:!0});const C=e.ref(!1),b=e.ref(""),u=e.ref(null);function B(n){if(!u.value)return;C.value=!0;const{x:o,y:t}=L(n);b.value=`M ${o} ${t}`}function w(n){if(!C.value||!u.value)return;const{x:o,y:t}=L(n);b.value+=` ${o} ${t}`}function D(n){const o=n.trim().split(/\s+/);if(o.length<4)return n;const t=o.slice(1).map(Number);if(t.length%2!==0)return n;const l=Y(t),r=[`M ${l[0]} ${l[1]}`];for(let i=2;i<l.length-2;i+=2){const m=l[i-2],k=l[i-1],d=l[i],f=l[i+1],V=(m+d)/2,z=(k+f)/2;r.push(`Q ${m} ${k} ${V} ${z}`)}const c=l[l.length-2],s=l[l.length-1];return r.push(`L ${c} ${s}`),r.join(" ")}function Y(n,o=1){const t=[...n];for(let l=2;l<n.length-2;l+=2){const r=n[l],c=n[l+1],s=n[l-2],i=n[l-1],m=n[l+2],k=n[l+3];t[l]=r+o*((s+m)/2-r),t[l+1]=c+o*((i+k)/2-c)}return t}function q(n){const o=n.trim().split(/\s+/);let t="",l="",r=null,c=null;for(let s=0;s<o.length;s+=1){const i=o[s];if(isNaN(i)){if(l=i,l==="M"||l==="L")r=parseFloat(o[++s]),c=parseFloat(o[++s]),t+=`${l}${r} ${c}`;else if(l==="Q"){const m=parseFloat(o[++s]),k=parseFloat(o[++s]),d=parseFloat(o[++s]),f=parseFloat(o[++s]);m===r&&k===c?t+=`t${d-r} ${f-c}`:t+=`q${m-r} ${k-c} ${d-r} ${f-c}`,r=d,c=f}}else{const m=parseFloat(i),k=parseFloat(o[++s]);if(l==="L"){const d=m-r,f=k-c;d===0?t+=`v${f}`:f===0?t+=`h${d}`:t+=`l${d} ${f}`,r=m,c=k}else if(l==="Q"){const d=m,f=k,V=parseFloat(o[++s]),z=parseFloat(o[++s]);d===r&&f===c?t+=`t${V-r} ${z-c}`:t+=`q${d-r} ${f-c} ${V-r} ${z-c}`,r=V,c=z}}}return t}function M(){C.value&&(v.value.push({strokeWidth:F.value,path:q(D(b.value)),color:y.value}),g.value=[],b.value=""),C.value=!1}function L(n){if(!u.value)return{x:0,y:0};const o=u.value.getBoundingClientRect();let t,l;return n.touches&&n.touches.length?(t=n.touches[0].clientX,l=n.touches[0].clientY):(t=n.clientX,l=n.clientY),{x:t-o.left,y:l-o.top}}e.ref(!1);function I(){if(v.value.length>0){const n=v.value.pop();g.value.push(n)}}function T(){if(g.value.length>0){const n=g.value.pop();v.value.push(n)}}function O(){v.value=[],g.value=[]}const U=e.ref(null);return(n,o)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[a.active?(e.openBlock(),e.createElementBlock("div",{key:0,"data-html2canvas-ignore":"",class:e.normalizeClass({"vue-ui-pen-and-paper-actions":!0,visible:a.active})},[e.createElementVNode("button",{class:"vue-ui-pen-and-paper-action",style:e.normalizeStyle({backgroundColor:a.backgroundColor,border:`1px solid ${e.unref($)}`}),onClick:o[0]||(o[0]=t=>P("close"))},[e.createVNode(E.default,{name:"close",stroke:a.color},null,8,["stroke"])],4),e.createElementVNode("button",K,[e.createVNode(J,{value:e.unref(y),"onUpdate:value":o[1]||(o[1]=t=>e.isRef(y)?y.value=t:null),backgroundColor:a.backgroundColor,buttonBorderColor:e.unref($)},null,8,["value","backgroundColor","buttonBorderColor"])]),e.createElementVNode("button",{class:e.normalizeClass({"vue-ui-pen-and-paper-action":!0,"vue-ui-pen-and-paper-action-disabled":!e.unref(v).length}),disabled:!e.unref(v).length,style:e.normalizeStyle({backgroundColor:a.backgroundColor,border:`1px solid ${e.unref($)}`}),onClick:I},[e.createVNode(E.default,{name:"restart",stroke:a.color},null,8,["stroke"])],14,Z),e.createElementVNode("button",{class:e.normalizeClass({"vue-ui-pen-and-paper-action":!0,"vue-ui-pen-and-paper-action-disabled":!e.unref(g).length}),style:e.normalizeStyle({backgroundColor:a.backgroundColor,border:`1px solid ${e.unref($)}`}),onClick:T},[e.createVNode(E.default,{name:"restart",stroke:a.color,style:{transform:"scaleX(-1)"}},null,8,["stroke"])],6),e.createElementVNode("button",{class:e.normalizeClass([{"vue-ui-pen-and-paper-action":!0,"vue-ui-pen-and-paper-action-disabled":!e.unref(v).length},"vue-ui-pen-and-paper-action"]),style:e.normalizeStyle({backgroundColor:a.backgroundColor,border:`1px solid ${e.unref($)}`}),onClick:O},[e.createVNode(E.default,{name:"trash",stroke:a.color},null,8,["stroke"])],6),e.withDirectives(e.createElementVNode("input",{ref_key:"range",ref:U,type:"range",class:"vertical-range",min:.5,max:12,step:.1,"onUpdate:modelValue":o[2]||(o[2]=t=>e.isRef(F)?F.value=t:null),style:e.normalizeStyle({accentColor:a.color})},null,4),[[e.vModelText,e.unref(F)]])],2)):e.createCommentVNode("",!0),(e.openBlock(),e.createElementBlock("svg",{ref_key:"svgElement",ref:u,xmlns:e.unref(X.XMLNS),viewBox:e.unref(h),class:e.normalizeClass({"vue-ui-pen-and-paper":!0,inactive:!a.active}),onMousedown:B,onMousemove:w,onMouseup:M,onMouseleave:M,onTouchstart:e.withModifiers(B,["prevent"]),onTouchmove:e.withModifiers(w,["prevent"]),onTouchend:M},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(v),t=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:t},[t.path.replace("M","").split(" ").length===2?(e.openBlock(),e.createElementBlock("circle",{key:0,cx:t.path.replace("M","").split(" ")[0],cy:t.path.replace("M","").split(" ")[1],r:t.strokeWidth/2,fill:t.color},null,8,te)):(e.openBlock(),e.createElementBlock("path",{key:1,class:"vue-ui-pen-and-paper-path",d:t.path,stroke:t.color,"stroke-width":t.strokeWidth,fill:"none"},null,8,oe))],64))),128)),e.unref(C)?(e.openBlock(),e.createElementBlock("path",{key:0,class:"vue-ui-pen-and-paper-path vue-ui-pen-and-paper-path-drawing",d:D(e.unref(b)),stroke:e.unref(y),"stroke-width":e.unref(F)*1.1,fill:"none"},null,8,ne)):e.createCommentVNode("",!0)],42,ee))],64))}},re=R._export_sfc(le,[["__scopeId","data-v-aa57055a"]]);exports.PenAndPaper=re;