vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
244 lines (243 loc) • 10.6 kB
JavaScript
import { ref as A, computed as j, watch as D, nextTick as U, onMounted as J, onBeforeUnmount as z, createElementBlock as Z, createCommentVNode as _, openBlock as ee, createElementVNode as k, withDirectives as te, normalizeStyle as w, createVNode as R, normalizeClass as I, vModelText as ne } from "vue";
import Q from "./BaseIcon-AmoKryXo.js";
import { C as oe } from "./PenAndPaper.vue_vue_type_style_index_0_scoped_3cea7589_lang-CF1vjG1v.js";
import { l as ae } from "./index-CHWA6Lnw.js";
import { _ as le } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const se = {
key: 0,
"data-html2canvas-ignore": "",
class: "vue-ui-pen-and-paper-actions"
}, re = {
class: "vue-ui-pen-and-paper-action",
style: { padding: "0 !important" }
}, ue = ["disabled"], ie = {
__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(c, { emit: G }) {
const a = c, K = G, m = A([]), h = A([]), $ = A(a.color), B = A(2), L = A(!1), S = A(""), l = A(null), i = A(null), E = A(null), y = j(() => ae(a.color, 0.6));
function V() {
if (!l.value) return;
const n = l.value.querySelector(".vue-data-ui-mask");
if (n && l.value.removeChild(n), a.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"), l.value.insertBefore(t, l.value.firstChild);
}
}
function M(n) {
var s;
const t = a.svgRef;
if (!t) return { x: 0, y: 0 };
const o = t.createSVGPoint();
o.x = n.clientX, o.y = n.clientY;
const e = (s = t.getScreenCTM()) == null ? void 0 : s.inverse();
return e ? o.matrixTransform(e) : { x: 0, y: 0 };
}
function H(n) {
const t = n.trim().split(/\s+/);
if (t.length < 4)
return n;
const o = t.slice(1).map(Number);
if (o.length % 2 !== 0)
return n;
const e = T(o), s = [`M ${e[0]} ${e[1]}`];
for (let v = 2; v < e.length - 2; v += 2) {
const f = e[v - 2], p = e[v - 1], d = e[v], g = e[v + 1], C = (f + d) / 2, x = (p + g) / 2;
s.push(`Q ${f} ${p} ${C} ${x}`);
}
const r = e[e.length - 2], u = e[e.length - 1];
return s.push(`L ${r} ${u}`), s.join(" ");
}
function T(n, t = 1) {
const o = [...n];
for (let e = 2; e < n.length - 2; e += 2) {
const s = n[e], r = n[e + 1], u = n[e - 2], v = n[e - 1], f = n[e + 2], p = n[e + 3];
o[e] = s + t * ((u + f) / 2 - s), o[e + 1] = r + t * ((v + p) / 2 - r);
}
return o;
}
function X(n) {
const t = n.trim().split(/\s+/);
let o = "", e = "", s = null, r = null;
for (let u = 0; u < t.length; u += 1) {
const v = t[u];
if (isNaN(v)) {
if (e = v, e === "M" || e === "L")
s = parseFloat(t[++u]), r = parseFloat(t[++u]), o += `${e}${s} ${r}`;
else if (e === "Q") {
const f = parseFloat(t[++u]), p = parseFloat(t[++u]), d = parseFloat(t[++u]), g = parseFloat(t[++u]);
f === s && p === r ? o += `t${d - s} ${g - r}` : o += `q${f - s} ${p - r} ${d - s} ${g - r}`, s = d, r = g;
}
} else {
const f = parseFloat(v), p = parseFloat(t[++u]);
if (e === "L") {
const d = f - s, g = p - r;
d === 0 ? o += `v${g}` : g === 0 ? o += `h${d}` : o += `l${d} ${g}`, s = f, r = p;
} else if (e === "Q") {
const d = f, g = p, C = parseFloat(t[++u]), x = parseFloat(t[++u]);
d === s && g === r ? o += `t${C - s} ${x - r}` : o += `q${d - s} ${g - r} ${C - s} ${x - r}`, s = C, r = x;
}
}
}
return o;
}
function P(n) {
if (!a.active || !l.value) return;
L.value = !0;
const { x: t, y: o } = M(n);
E.value = { x: t, y: o }, S.value = `M ${t} ${o}`, i.value = document.createElementNS("http://www.w3.org/2000/svg", "path"), i.value.setAttribute("stroke", $.value), i.value.setAttribute("stroke-width", B.value * a.scale), i.value.setAttribute("fill", "none"), i.value.setAttribute("stroke-linecap", "round"), i.value.setAttribute("stroke-linejoin", "round"), i.value.setAttribute("class", "vue-data-ui-doodle"), l.value.appendChild(i.value);
}
function F(n) {
if (!L.value || !l.value || !i.value) return;
const { x: t, y: o } = M(n);
S.value += ` ${t} ${o}`, i.value.setAttribute("d", S.value);
}
function b(n) {
if (L.value && l.value && i.value) {
const { x: t, y: o } = M(n);
if (E.value && E.value.x === t && E.value.y === o) {
const e = document.createElementNS("http://www.w3.org/2000/svg", "circle");
e.setAttribute("cx", t), e.setAttribute("cy", o), e.setAttribute("r", B.value * a.scale / 2), e.setAttribute("fill", $.value), e.setAttribute("class", "vue-data-ui-doodle"), l.value.appendChild(e), m.value.push(e);
} else {
const e = i.value;
e.setAttribute("d", X(H(S.value))), m.value.push(e);
}
h.value = [], i.value = "";
}
L.value = !1;
}
function Y() {
if (m.value.length > 0) {
const n = m.value.pop();
h.value.push(n), l.value && l.value.removeChild(n);
}
}
function q() {
if (h.value.length > 0) {
const n = h.value.pop();
m.value.push(n), l.value && l.value.appendChild(n);
}
}
function O() {
l.value && (l.value.innerHTML = ""), m.value = [], h.value = [], V();
}
function W() {
!a.svgRef || !a.active || (a.svgRef.addEventListener("mousedown", P), a.svgRef.addEventListener("mousemove", F), a.svgRef.addEventListener("mouseup", b), a.svgRef.addEventListener("mouseleave", b), a.svgRef.addEventListener("touchstart", P, { passive: !1 }), a.svgRef.addEventListener("touchmove", F, { passive: !1 }), a.svgRef.addEventListener("touchend", b), l.value && (l.value.style.pointerEvents = "auto"));
}
function N() {
a.svgRef && (a.svgRef.removeEventListener("mousedown", P), a.svgRef.removeEventListener("mousemove", F), a.svgRef.removeEventListener("mouseup", b), a.svgRef.removeEventListener("mouseleave", b), a.svgRef.removeEventListener("touchstart", P), a.svgRef.removeEventListener("touchmove", F), a.svgRef.removeEventListener("touchend", b), l.value && (l.value.style.pointerEvents = "none"));
}
return D(() => a.active, (n) => {
n ? W() : N();
}), D(() => a.active, () => {
U(() => {
V();
});
}), J(() => {
U(() => {
a.svgRef && (l.value = document.createElementNS("http://www.w3.org/2000/svg", "g"), l.value.setAttribute("class", "vue-data-ui-doodles"), l.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", a.svgRef.appendChild(l.value), N());
});
}), z(() => {
l.value && a.svgRef && (a.svgRef.removeChild(l.value), N());
}), (n, t) => c.active ? (ee(), Z("div", se, [
k("button", {
class: "vue-ui-pen-and-paper-action",
onClick: t[0] || (t[0] = (o) => K("close")),
style: w({
backgroundColor: c.backgroundColor,
border: `1px solid ${y.value}`
})
}, [
R(Q, {
name: "close",
stroke: c.color
}, null, 8, ["stroke"])
], 4),
k("button", re, [
R(oe, {
value: $.value,
"onUpdate:value": t[1] || (t[1] = (o) => $.value = o),
backgroundColor: c.backgroundColor,
buttonBorderColor: y.value
}, null, 8, ["value", "backgroundColor", "buttonBorderColor"])
]),
k("button", {
class: I(["vue-ui-pen-and-paper-action", { "vue-ui-pen-and-paper-action-disabled": !m.value.length }]),
disabled: !m.value.length,
onClick: Y,
style: w({
backgroundColor: c.backgroundColor,
border: `1px solid ${y.value}`
})
}, [
R(Q, {
name: "restart",
stroke: c.color
}, null, 8, ["stroke"])
], 14, ue),
k("button", {
class: I(["vue-ui-pen-and-paper-action", { "vue-ui-pen-and-paper-action-disabled": !h.value.length }]),
onClick: q,
style: w({
backgroundColor: c.backgroundColor,
border: `1px solid ${y.value}`
})
}, [
R(Q, {
name: "restart",
stroke: c.color,
style: { transform: "scaleX(-1)" }
}, null, 8, ["stroke"])
], 6),
k("button", {
class: I(["vue-ui-pen-and-paper-action", { "vue-ui-pen-and-paper-action-disabled": !m.value.length }]),
onClick: O,
style: w({
backgroundColor: c.backgroundColor,
border: `1px solid ${y.value}`
})
}, [
R(Q, {
name: "trash",
stroke: c.color
}, null, 8, ["stroke"])
], 6),
te(k("input", {
ref: "range",
type: "range",
class: "vertical-range",
min: 0.5,
max: 12,
step: 0.1,
"onUpdate:modelValue": t[2] || (t[2] = (o) => B.value = o),
style: w({ accentColor: c.color })
}, null, 4), [
[ne, B.value]
])
])) : _("", !0);
}
}, pe = /* @__PURE__ */ le(ie, [["__scopeId", "data-v-3cea7589"]]);
export {
pe as P
};