vue-data-ui 3.12.0 → 3.13.0

package/README.md

@@ -271,6 +271,47 @@ It is recommended to set the show legend config attribute to false, to hide the
 </VueUiDonut>
 ```
 
+## Legend toggle
+
+An opt-in config option displays a toggle button to hide/show all series, when the number of series > 2.
+This attribute can be found in the `legend.selectAllToggle` config section:
+
+```js
+legend: {
+  selectAllToggle: {
+    show: false,
+    backgroundColor: '#E1E5E8',
+    color: '#2D353C'
+  }
+}
+```
+
+This legend toggle option is available for the following components:
+
+- VueUiDonut
+- VueUiDonutEvolution
+- VueUiGalaxy
+- VueUiHistoryPlot
+- VueUiHorizontalBar
+- VueUiNestedDonuts
+- VueUiOnion
+- VueUiParallelCoordinatePlot
+- VueUiQuadrant
+- VueUiQuickChart
+- VueUiRadar
+- VueUiRidgeline
+- VueUiRings
+- VueUiRings
+- VueUiScatter
+- VueUiSparkStackbar
+- VueUiStackbar
+- VueUiStackline
+- VueUiTreemap
+- VueUiWaffle
+- VueUiWorld
+- VueUiXy
+- VueUiXyCanvas
+
 ## Tooltip #tooltip-before & #tooltip-after slots
 
 Customize tooltip contents with #tooltip-before and #tooltip-after slots, to include an image, another chart or any other rich content into your tooltips.

package/dist/BaseLegendToggle-B4-hdikk.js

@@ -0,0 +1,46 @@
+import { createElementBlock as l, openBlock as r, createElementVNode as a, normalizeStyle as d, withKeys as s, createVNode as g } from "vue";
+import c from "./BaseIcon-BwSqZoOr.js";
+import { _ as m } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const u = {
+  class: "vue-ui-legend-toggle-wrapper",
+  "data-dom-to-png-ignore": ""
+}, f = {
+  __name: "BaseLegendToggle",
+  props: {
+    backgroundColor: { type: String, default: "#CCCCCC" },
+    color: { type: String, default: "#2D353C" },
+    fontSize: { type: Number, default: 14 },
+    checked: { type: Boolean }
+  },
+  emits: ["toggle"],
+  setup(e, { emit: n }) {
+    const o = n;
+    return (k, t) => (r(), l("div", u, [
+      a("div", {
+        class: "vue-ui-legend-toggle",
+        role: "button",
+        tabindex: "0",
+        onClick: t[0] || (t[0] = (i) => o("toggle")),
+        onKeydown: t[1] || (t[1] = s((i) => o("toggle"), ["enter"])),
+        style: d({
+          position: "relative",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: e.backgroundColor,
+          padding: e.fontSize / 4 + "px"
+        })
+      }, [
+        g(c, {
+          name: e.checked ? "minus" : "check",
+          stroke: e.color,
+          size: e.fontSize * 0.6,
+          "stroke-width": e.fontSize / 4
+        }, null, 8, ["name", "stroke", "size", "stroke-width"])
+      ], 36)
+    ]));
+  }
+}, v = /* @__PURE__ */ m(f, [["__scopeId", "data-v-f7a735b9"]]);
+export {
+  v as B
+};

package/dist/{Legend-DN5UJOBH.js → Legend-DUESGUtH.js}

@@ -1,7 +1,7 @@
-import { createElementBlock as n, openBlock as a, normalizeStyle as d, renderSlot as r, Fragment as u, renderList as m, normalizeClass as g, createCommentVNode as p, createVNode as h, mergeProps as k, unref as v } from "vue";
+import { createElementBlock as n, openBlock as a, normalizeStyle as d, renderSlot as r, Fragment as f, renderList as m, normalizeClass as g, createCommentVNode as p, createVNode as h, mergeProps as k, unref as v } from "vue";
 import { E as y } from "./lib-CVHM9FhP.js";
-import { _ as x } from "./Shape-PzdCMGsP.js";
-import { _ as b } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import { _ as b } from "./Shape-PzdCMGsP.js";
+import { _ as x } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const S = ["id"], $ = ["onClick", "viewBox"], B = {
   __name: "Legend",
   props: {
@@ -27,10 +27,10 @@ const S = ["id"], $ = ["onClick", "viewBox"], B = {
     }
   },
   emits: ["clickMarker"],
-  setup(t, { emit: c }) {
-    const s = c;
-    function f(o, l) {
-      s("clickMarker", { legend: o, i: l });
+  setup(t, { emit: s }) {
+    const c = s;
+    function u(o, l) {
+      c("clickMarker", { legend: o, i: l });
     }
     return (o, l) => (a(), n("div", {
       id: t.id,
@@ -45,19 +45,20 @@ const S = ["id"], $ = ["onClick", "viewBox"], B = {
       })
     }, [
       r(o.$slots, "legendTitle", { titleSet: t.legendSet }, void 0, !0),
-      (a(!0), n(u, null, m(t.legendSet, (e, i) => (a(), n("div", {
+      r(o.$slots, "legendToggle", {}, void 0, !0),
+      (a(!0), n(f, null, m(t.legendSet, (e, i) => (a(), n("div", {
         key: `legend_${i}`,
         class: g({ "vue-data-ui-legend-item": !0, active: t.clickable })
       }, [
         e.shape ? (a(), n("svg", {
           key: 0,
-          onClick: (C) => f(e, i),
+          onClick: (C) => u(e, i),
           height: "1em",
           width: "1em",
           viewBox: e.shape && e.shape === "star" ? "-10 -10 80 80" : "0 0 60 60",
           style: d(`overflow: visible; opacity:${e.opacity}`)
         }, [
-          h(x, {
+          h(b, {
             stroke: "none",
             shape: e.shape,
             radius: 30,
@@ -79,7 +80,7 @@ const S = ["id"], $ = ["onClick", "viewBox"], B = {
       ], 2))), 128))
     ], 12, S));
   }
-}, L = /* @__PURE__ */ b(B, [["__scopeId", "data-v-5f2d7b2f"]]);
+}, I = /* @__PURE__ */ x(B, [["__scopeId", "data-v-b4d6e4f6"]]);
 export {
-  L as default
+  I as default
 };

package/dist/{PackageVersion-DwFCG_4i.js → PackageVersion-BUiZH7T6.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as t, toDisplayString as o, unref as r } from "vue";
-const n = "3.12.0", a = { "aria-hidden": "true" }, p = {
+const n = "3.13.0", a = { "aria-hidden": "true" }, p = {
   __name: "PackageVersion",
   setup(s) {
     return (c, i) => (t(), e("desc", a, "Composed with Vue Data UI " + o(r(n)), 1));

package/dist/{PenAndPaper-Cs8cXbUN.js → PenAndPaper-D7T0cXZC.js}

@@ -1,11 +1,11 @@
-import { ref as i, computed as he, watch as te, nextTick as Ae, onMounted as Me, onBeforeUnmount as Pe, createElementBlock as se, createCommentVNode as Fe, openBlock as re, normalizeStyle as k, createElementVNode as B, withDirectives as be, renderSlot as M, createVNode as P, withCtx as Ie, normalizeProps as U, guardReactiveProps as K, normalizeClass as ne, toDisplayString as Qe, unref as Ve, vModelText as we } from "vue";
+import { ref as i, computed as he, watch as te, nextTick as Ae, onMounted as Pe, onBeforeUnmount as Fe, createElementBlock as se, createCommentVNode as Ie, openBlock as re, normalizeStyle as k, createElementVNode as B, withDirectives as be, renderSlot as T, createVNode as P, withCtx as Qe, normalizeProps as U, guardReactiveProps as K, normalizeClass as ne, toDisplayString as Ve, unref as Ue, vModelText as we } from "vue";
 import X from "./BaseIcon-BwSqZoOr.js";
-import { C as Ue } from "./ColorPicker-CeEDMD2O.js";
-import { c as xe, q as Ke, d as Xe, X as Y } from "./lib-CVHM9FhP.js";
-const Ye = {
+import { C as Ke } from "./ColorPicker-CeEDMD2O.js";
+import { c as ye, q as Xe, d as Ye, X as Y } from "./lib-CVHM9FhP.js";
+const qe = {
   class: "vue-ui-pen-and-paper-action",
   style: { padding: "0 !important" }
-}, qe = ["disabled"], Oe = {
+}, Ge = ["disabled"], je = {
   __name: "PenAndPaper",
   props: {
     svgRef: {
@@ -30,28 +30,28 @@ const Ye = {
     }
   },
   emits: ["close"],
-  setup(f, { emit: ye }) {
-    const l = f, ke = ye, w = i([]), y = i([]), E = i(l.color), N = i(2), C = i(!1), q = i(""), s = i(null), x = i(null), d = i(null), F = i(null);
+  setup(g, { emit: xe }) {
+    const l = g, ke = xe, w = i([]), x = i([]), E = i(l.color), N = i(2), C = i(!1), q = i(""), s = i(null), y = i(null), d = i(null), F = i(null);
     i(null);
-    const ae = i(`arrow-${xe()}`), ue = i(`arrow-def-${xe()}`), G = i(!1), p = i(null), le = i({ x: 0, y: 0 }), I = i([""]), Q = i({ row: 0, col: 0 }), D = i(16), V = i(!1), ie = ["arrow", "text", "line", "draw"], z = i(0), g = he(() => ie[z.value]), Ce = {
+    const ae = i(`arrow-${ye()}`), ue = i(`arrow-def-${ye()}`), G = i(!1), p = i(null), le = i({ x: 0, y: 0 }), I = i([""]), Q = i({ row: 0, col: 0 }), D = i(16), V = i(!1), ie = ["arrow", "text", "line", "draw"], z = i(0), f = he(() => ie[z.value]), Ce = {
       arrow: "plotArrow",
       text: "text",
       line: "plotLine",
       draw: "annotator"
-    }, ve = i("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");
-    function Le() {
+    }, Le = i("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");
+    function Ee() {
       z.value + 1 >= ie.length ? z.value = 0 : z.value += 1;
     }
     function H(t) {
-      if (!s.value || g.value !== "text" || G.value) return;
+      if (!s.value || f.value !== "text" || G.value) return;
       const { x: e, y: a } = S(t);
       le.value = { x: e, y: a }, I.value = [""], Q.value = { row: 0, col: 0 }, V.value = !1;
       const n = document.createElementNS("http://www.w3.org/2000/svg", "text");
       n.setAttribute("x", e), n.setAttribute("y", a), n.setAttribute("fill", E.value), n.setAttribute("font-size", D.value * l.scale), n.setAttribute("font-family", "sans-serif"), n.setAttribute("class", "vue-data-ui-doodle"), n.setAttribute("dominant-baseline", "hanging"), n.setAttribute("pointer-events", "all");
       const o = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
-      o.setAttribute("x", e), o.setAttribute("dy", "0"), o.textContent = "", n.appendChild(o), n.style.pointerEvents = "none", n.style.userSelect = "none", s.value.appendChild(n), p.value = n, G.value = !0, window.addEventListener("keydown", ce), window.addEventListener("mousedown", ge, !0), de(), fe();
+      o.setAttribute("x", e), o.setAttribute("dy", "0"), o.textContent = "", n.appendChild(o), n.style.pointerEvents = "none", n.style.userSelect = "none", s.value.appendChild(n), p.value = n, G.value = !0, window.addEventListener("keydown", ve), window.addEventListener("mousedown", fe, !0), ce(), de();
     }
-    function ce(t) {
+    function ve(t) {
       if (!G.value) return;
       let { row: e, col: a } = Q.value, n = I.value.slice(), o = !1;
       if (t.key === "Enter") {
@@ -81,9 +81,9 @@ const Ye = {
         oe(!0);
         return;
       } else t.key === "Tab" && t.preventDefault();
-      o && (I.value = n, Q.value = { row: e, col: a }, n.some((u) => u.length > 0) && !V.value && p.value && (w.value.push(p.value), y.value = [], V.value = !0), de(), fe());
+      o && (I.value = n, Q.value = { row: e, col: a }, n.some((u) => u.length > 0) && !V.value && p.value && (w.value.push(p.value), x.value = [], V.value = !0), ce(), de());
     }
-    function de() {
+    function ce() {
       const t = p.value, { x: e } = le.value;
       for (; t.firstChild; ) t.removeChild(t.firstChild);
       I.value.forEach((a, n) => {
@@ -95,7 +95,7 @@ const Ye = {
     function O() {
       W.value !== null && (clearInterval(W.value), W.value = null);
     }
-    function Ee(t) {
+    function Re(t) {
       O();
       let e = !0;
       t.style.opacity = "1", W.value = setInterval(() => {
@@ -106,7 +106,7 @@ const Ye = {
         e = !e, t.style.opacity = e ? "1" : "0";
       }, 500);
     }
-    function fe() {
+    function de() {
       const t = s.value?.querySelector(".vue-data-ui-svg-caret");
       t && s.value && s.value.removeChild(t);
       const e = p.value;
@@ -120,16 +120,16 @@ const Ye = {
       const A = c.getBBox();
       s.value.removeChild(c);
       const b = n + o * u * 1.2, $ = a + A.width, h = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-      h.setAttribute("x", $), h.setAttribute("y", b), h.setAttribute("rx", 1), h.setAttribute("width", 2), h.setAttribute("height", u), h.setAttribute("fill", E.value), h.setAttribute("class", "vue-data-ui-svg-caret"), s.value.appendChild(h), Ee(h);
+      h.setAttribute("x", $), h.setAttribute("y", b), h.setAttribute("rx", 1), h.setAttribute("width", 2), h.setAttribute("height", u), h.setAttribute("fill", E.value), h.setAttribute("class", "vue-data-ui-svg-caret"), s.value.appendChild(h), Re(h);
     }
-    function ge(t) {
+    function fe(t) {
       if (p.value && !p.value.contains(t.target)) {
         const e = p.value.children;
         e.length === 1 && (e[0].textContent === "" || e[0].textContent === "​") && p.value.remove(), oe(!1);
       }
     }
     function oe(t = !1) {
-      window.removeEventListener("keydown", ce), window.removeEventListener("mousedown", ge, !0), O();
+      window.removeEventListener("keydown", ve), window.removeEventListener("mousedown", fe, !0), O();
       const e = s.value?.querySelector(".vue-data-ui-svg-caret");
       e && s.value && s.value.removeChild(e);
       const a = p.value?.children;
@@ -140,8 +140,8 @@ const Ye = {
       }
       (t || n) && p.value && s.value && s.value.contains(p.value) && s.value.removeChild(p.value), G.value = !1, p.value = null, I.value = [""], Q.value = { row: 0, col: 0 }, V.value = !1;
     }
-    const R = he(() => Ke(l.color, 0.6));
-    function pe() {
+    const R = he(() => Xe(l.color, 0.6));
+    function ge() {
       if (!s.value) return;
       const t = s.value.querySelector(".vue-data-ui-mask");
       if (t && s.value.removeChild(t), l.active) {
@@ -157,14 +157,14 @@ const Ye = {
       const v = e.getScreenCTM()?.inverse();
       return v ? a.matrixTransform(v) : { x: 0, y: 0 };
     }
-    function Re(t) {
+    function Se(t) {
       const e = t.trim().split(/\s+/);
       if (e.length < 4)
         return t;
       const a = e.slice(1).map(Number);
       if (a.length % 2 !== 0)
         return t;
-      const n = Se(a), o = [`M ${n[0]} ${n[1]}`];
+      const n = $e(a), o = [`M ${n[0]} ${n[1]}`];
       for (let v = 2; v < n.length - 2; v += 2) {
         const m = n[v - 2], c = n[v - 1], A = n[v], b = n[v + 1], $ = (m + A) / 2, h = (c + b) / 2;
         o.push(`Q ${m} ${c} ${$} ${h}`);
@@ -172,7 +172,7 @@ const Ye = {
       const r = n[n.length - 2], u = n[n.length - 1];
       return o.push(`L ${r} ${u}`), o.join(" ");
     }
-    function Se(t, e = 1) {
+    function $e(t, e = 1) {
       const a = [...t];
       for (let n = 2; n < t.length - 2; n += 2) {
         const o = t[n], r = t[n + 1], u = t[n - 2], v = t[n - 1], m = t[n + 2], c = t[n + 3];
@@ -180,7 +180,7 @@ const Ye = {
       }
       return a;
     }
-    function $e(t) {
+    function Be(t) {
       const e = t.trim().split(/\s+/);
       let a = "", n = "", o = null, r = null;
       for (let u = 0; u < e.length; u += 1) {
@@ -206,17 +206,17 @@ const Ye = {
       return a;
     }
     function j(t) {
-      if (t.cancelable && t.preventDefault(), g.value !== "draw" || !l.active || !s.value) return;
+      if (t.cancelable && t.preventDefault(), f.value !== "draw" || !l.active || !s.value) return;
       C.value = !0;
       const { x: e, y: a } = S(t);
-      F.value = { x: e, y: a }, q.value = `M ${e} ${a}`, x.value = document.createElementNS(Y, "path"), x.value.setAttribute("stroke", E.value), x.value.setAttribute("stroke-width", N.value * l.scale), x.value.setAttribute("fill", "none"), x.value.setAttribute("stroke-linecap", "round"), x.value.setAttribute("stroke-linejoin", "round"), x.value.setAttribute("class", "vue-data-ui-doodle"), s.value.appendChild(x.value);
+      F.value = { x: e, y: a }, q.value = `M ${e} ${a}`, y.value = document.createElementNS(Y, "path"), y.value.setAttribute("stroke", E.value), y.value.setAttribute("stroke-width", N.value * l.scale), y.value.setAttribute("fill", "none"), y.value.setAttribute("stroke-linecap", "round"), y.value.setAttribute("stroke-linejoin", "round"), y.value.setAttribute("class", "vue-data-ui-doodle"), s.value.appendChild(y.value);
     }
     function J(t) {
-      if (t.cancelable && t.preventDefault(), !C.value || !s.value || !x.value) return;
+      if (t.cancelable && t.preventDefault(), !C.value || !s.value || !y.value) return;
       const { x: e, y: a } = S(t);
-      q.value += ` ${e} ${a}`, x.value.setAttribute("d", q.value);
+      q.value += ` ${e} ${a}`, y.value.setAttribute("d", q.value);
     }
-    function Be() {
+    function Ne() {
       const t = l.svgRef;
       if (!t) return;
       let e = t.querySelector(`defs#${ue.value}`);
@@ -227,66 +227,66 @@ const Ye = {
       o.setAttribute("d", `M 0 0 L ${a} ${a / 2} L 0 ${a} z`), o.setAttribute("fill", "context-stroke"), o.setAttribute("stroke", "none"), n.appendChild(o), e.appendChild(n);
     }
     function Z(t) {
-      if (t.cancelable && t.preventDefault(), !["line", "arrow"].includes(g.value) || !l.active || !s.value) return;
-      g.value === "arrow" && Be(), C.value = !0;
+      if (t.cancelable && t.preventDefault(), !["line", "arrow"].includes(f.value) || !l.active || !s.value) return;
+      f.value === "arrow" && Ne(), C.value = !0;
       const { x: e, y: a } = S(t);
-      F.value = { x: e, y: a }, d.value = document.createElementNS(Y, "line"), d.value.setAttribute("stroke", E.value), d.value.setAttribute("stroke-width", N.value * l.scale), d.value.setAttribute("stroke-linecap", "round"), d.value.setAttribute("class", "vue-data-ui-doodle"), d.value.setAttribute("x1", e), d.value.setAttribute("y1", a), d.value.setAttribute("x2", e), d.value.setAttribute("y2", a), g.value === "arrow" && d.value.setAttribute("marker-end", `url(#${ae.value})`), s.value.appendChild(d.value);
+      F.value = { x: e, y: a }, d.value = document.createElementNS(Y, "line"), d.value.setAttribute("stroke", E.value), d.value.setAttribute("stroke-width", N.value * l.scale), d.value.setAttribute("stroke-linecap", "round"), d.value.setAttribute("class", "vue-data-ui-doodle"), d.value.setAttribute("x1", e), d.value.setAttribute("y1", a), d.value.setAttribute("x2", e), d.value.setAttribute("y2", a), f.value === "arrow" && d.value.setAttribute("marker-end", `url(#${ae.value})`), s.value.appendChild(d.value);
     }
     function _(t) {
-      if (t.cancelable && t.preventDefault(), !["line", "arrow"].includes(g.value) || !C.value || !s.value || !d.value) return;
+      if (t.cancelable && t.preventDefault(), !["line", "arrow"].includes(f.value) || !C.value || !s.value || !d.value) return;
       const { x: e, y: a } = S(t);
       d.value.setAttribute("x2", e), d.value.setAttribute("y2", a);
     }
-    function T(t) {
+    function M(t) {
       if (C.value && s.value && d.value) {
         const { x: e, y: a } = S(t);
-        d.value.setAttribute("x2", e), d.value.setAttribute("y2", a), w.value.push(d.value), y.value = [], d.value = "";
+        d.value.setAttribute("x2", e), d.value.setAttribute("y2", a), w.value.push(d.value), x.value = [], d.value = "";
       }
       C.value = !1;
     }
     function L(t) {
-      if (C.value && s.value && x.value) {
+      if (C.value && s.value && y.value) {
         const { x: e, y: a } = S(t);
         if (F.value && F.value.x === e && F.value.y === a) {
           const n = document.createElementNS("http://www.w3.org/2000/svg", "circle");
           n.setAttribute("cx", e), n.setAttribute("cy", a), n.setAttribute("r", N.value * l.scale / 2), n.setAttribute("fill", E.value), n.setAttribute("class", "vue-data-ui-doodle"), s.value.appendChild(n), w.value.push(n);
         } else {
-          const n = x.value;
-          n.setAttribute("d", $e(Re(q.value))), w.value.push(n);
+          const n = y.value;
+          n.setAttribute("d", Be(Se(q.value))), w.value.push(n);
         }
-        y.value = [], x.value = "";
+        x.value = [], y.value = "";
       }
       C.value = !1;
     }
-    function Ne() {
+    function De() {
       if (w.value.length > 0) {
         const t = w.value.pop();
-        y.value.push(t), t === p.value ? oe(!0) : s.value && s.value.contains(t) && s.value.removeChild(t);
+        x.value.push(t), t === p.value ? oe(!0) : s.value && s.value.contains(t) && s.value.removeChild(t);
       }
     }
-    function De() {
-      if (y.value.length > 0) {
-        const t = y.value.pop();
+    function Me() {
+      if (x.value.length > 0) {
+        const t = x.value.pop();
         w.value.push(t), s.value && s.value.appendChild(t);
       }
     }
     function Te() {
-      s.value && (s.value.innerHTML = ""), w.value = [], y.value = [], V.value = !1, pe();
+      s.value && (s.value.innerHTML = ""), w.value = [], x.value = [], V.value = !1, ge();
     }
-    te(g, () => {
-      l.active && (ee(), me(), g.value === "text" ? s.value.style.cursor = "text" : s.value.style.cursor = ve.value);
+    te(f, (t) => {
+      l.active && (ee(), pe(), me());
     });
-    function me() {
-      !l.svgRef || !l.active || (g.value === "draw" ? (l.svgRef.addEventListener("mousedown", j), l.svgRef.addEventListener("mousemove", J), l.svgRef.addEventListener("mouseup", L), l.svgRef.addEventListener("mouseleave", L), l.svgRef.addEventListener("touchstart", j, { passive: !1 }), l.svgRef.addEventListener("touchmove", J, { passive: !1 }), l.svgRef.addEventListener("touchend", L), l.svgRef.addEventListener("touchcancel", L)) : ["line", "arrow"].includes(g.value) ? (l.svgRef.addEventListener("mousedown", Z), l.svgRef.addEventListener("mousemove", _), l.svgRef.addEventListener("mouseup", T), l.svgRef.addEventListener("touchstart", Z, { passive: !1 }), l.svgRef.addEventListener("touchmove", _, { passive: !1 }), l.svgRef.addEventListener("touchend", T), l.svgRef.addEventListener("touchcancel", T)) : g.value === "text" && (l.svgRef.addEventListener("mousedown", H), l.svgRef.addEventListener("touchstart", H, { passive: !1 })), s.value && (s.value.style.pointerEvents = "auto"));
+    function pe() {
+      !l.svgRef || !l.active || (f.value === "draw" ? (l.svgRef.addEventListener("mousedown", j), l.svgRef.addEventListener("mousemove", J), l.svgRef.addEventListener("mouseup", L), l.svgRef.addEventListener("mouseleave", L), l.svgRef.addEventListener("touchstart", j, { passive: !1 }), l.svgRef.addEventListener("touchmove", J, { passive: !1 }), l.svgRef.addEventListener("touchend", L), l.svgRef.addEventListener("touchcancel", L)) : ["line", "arrow"].includes(f.value) ? (l.svgRef.addEventListener("mousedown", Z), l.svgRef.addEventListener("mousemove", _), l.svgRef.addEventListener("mouseup", M), l.svgRef.addEventListener("touchstart", Z, { passive: !1 }), l.svgRef.addEventListener("touchmove", _, { passive: !1 }), l.svgRef.addEventListener("touchend", M), l.svgRef.addEventListener("touchcancel", M)) : f.value === "text" && (l.svgRef.addEventListener("mousedown", H), l.svgRef.addEventListener("touchstart", H, { passive: !1 })), s.value && (s.value.style.pointerEvents = "auto"));
     }
     function ee() {
-      l.svgRef && (l.svgRef.removeEventListener("mousedown", j), l.svgRef.removeEventListener("mousemove", J), l.svgRef.removeEventListener("mouseup", L), l.svgRef.removeEventListener("mouseleave", L), l.svgRef.removeEventListener("touchstart", j), l.svgRef.removeEventListener("touchmove", J), l.svgRef.removeEventListener("touchend", L), l.svgRef.removeEventListener("touchcancel", L), l.svgRef.removeEventListener("mousedown", Z), l.svgRef.removeEventListener("mousemove", _), l.svgRef.removeEventListener("mouseup", T), l.svgRef.removeEventListener("touchstart", Z), l.svgRef.removeEventListener("touchmove", _), l.svgRef.removeEventListener("touchend", T), l.svgRef.removeEventListener("touchcancel", T), l.svgRef.removeEventListener("mousedown", H), l.svgRef.removeEventListener("touchstart", H), s.value && (s.value.style.pointerEvents = "none"));
+      l.svgRef && (l.svgRef.removeEventListener("mousedown", j), l.svgRef.removeEventListener("mousemove", J), l.svgRef.removeEventListener("mouseup", L), l.svgRef.removeEventListener("mouseleave", L), l.svgRef.removeEventListener("touchstart", j), l.svgRef.removeEventListener("touchmove", J), l.svgRef.removeEventListener("touchend", L), l.svgRef.removeEventListener("touchcancel", L), l.svgRef.removeEventListener("mousedown", Z), l.svgRef.removeEventListener("mousemove", _), l.svgRef.removeEventListener("mouseup", M), l.svgRef.removeEventListener("touchstart", Z), l.svgRef.removeEventListener("touchmove", _), l.svgRef.removeEventListener("touchend", M), l.svgRef.removeEventListener("touchcancel", M), l.svgRef.removeEventListener("mousedown", H), l.svgRef.removeEventListener("touchstart", H), s.value && (s.value.style.pointerEvents = "none"));
     }
-    return te(() => l.active, (t) => {
-      t ? me() : ee();
+    te(() => l.active, (t) => {
+      t ? pe() : ee();
     }), te(() => l.active, () => {
       Ae(() => {
-        pe();
+        ge();
       });
     }), te(
       () => l.active,
@@ -294,58 +294,62 @@ const Ye = {
         l.svgRef && (t ? l.svgRef.style.touchAction = "none" : l.svgRef.style.touchAction = "");
       },
       { immediate: !0 }
-    ), Me(() => {
+    );
+    function me() {
+      s.value && (f.value === "text" ? s.value.style.cursor = "text" : ["line", "arrow"].includes(f.value) ? s.value.style.cursor = "crosshair" : s.value.style.cursor = Le.value);
+    }
+    return Pe(() => {
       Ae(() => {
-        l.svgRef && (s.value = document.createElementNS("http://www.w3.org/2000/svg", "g"), s.value.setAttribute("class", "vue-data-ui-doodles"), s.value.style.cursor = ve.value, l.svgRef.appendChild(s.value), ee());
+        l.svgRef && (s.value = document.createElementNS("http://www.w3.org/2000/svg", "g"), s.value.setAttribute("class", "vue-data-ui-doodles"), l.svgRef.appendChild(s.value), me(), ee());
       });
-    }), Pe(() => {
+    }), Fe(() => {
       O(), s.value && l.svgRef && (s.value.remove(), ee());
-    }), (t, e) => f.active ? (re(), se("div", {
+    }), (t, e) => g.active ? (re(), se("div", {
       key: 0,
       "data-dom-to-png-ignore": "",
       class: "vue-ui-pen-and-paper-actions",
-      style: k({ backgroundColor: f.backgroundColor })
+      style: k({ backgroundColor: g.backgroundColor })
     }, [
       B("button", {
         class: "vue-ui-pen-and-paper-action",
         onClick: e[0] || (e[0] = (a) => ke("close")),
         style: k({
-          backgroundColor: f.backgroundColor,
+          backgroundColor: g.backgroundColor,
           border: `1px solid ${R.value}`
         })
       }, [
-        M(t.$slots, "annotator-action-close", {}, () => [
+        T(t.$slots, "annotator-action-close", {}, () => [
           P(X, {
             name: "close",
-            stroke: f.color
+            stroke: g.color
           }, null, 8, ["stroke"])
         ])
       ], 4),
-      B("button", Ye, [
-        P(Ue, {
+      B("button", qe, [
+        P(Ke, {
           value: E.value,
           "onUpdate:value": e[1] || (e[1] = (a) => E.value = a),
-          backgroundColor: f.backgroundColor,
+          backgroundColor: g.backgroundColor,
           buttonBorderColor: R.value
         }, {
-          "annotator-action-color": Ie(({ color: a }) => [
-            M(t.$slots, "annotator-action-color", U(K({ color: a })))
+          "annotator-action-color": Qe(({ color: a }) => [
+            T(t.$slots, "annotator-action-color", U(K({ color: a })))
           ]),
           _: 3
         }, 8, ["value", "backgroundColor", "buttonBorderColor"])
       ]),
       B("button", {
-        class: ne(["vue-ui-pen-and-paper-action", { "vue-ui-pen-and-paper-action-active": g.value === "text" }]),
-        onClick: e[2] || (e[2] = (a) => Le()),
+        class: ne(["vue-ui-pen-and-paper-action", { "vue-ui-pen-and-paper-action-active": f.value === "text" }]),
+        onClick: e[2] || (e[2] = (a) => Ee()),
         style: k({
-          backgroundColor: f.backgroundColor,
+          backgroundColor: g.backgroundColor,
           border: `1px solid ${R.value}`
         })
       }, [
-        M(t.$slots, "annotator-action-draw", U(K({ mode: g.value })), () => [
+        T(t.$slots, "annotator-action-draw", U(K({ mode: f.value })), () => [
           P(X, {
-            name: Ce[g.value],
-            stroke: f.color
+            name: Ce[f.value],
+            stroke: g.color
           }, null, 8, ["name", "stroke"])
         ]),
         B("div", {
@@ -358,8 +362,8 @@ const Ye = {
             fontSize: "12px",
             fontVariantNumeric: "tabular-nums"
           })
-        }, Qe(Ve(Xe)({
-          v: g.value === "text" ? D.value : N.value,
+        }, Ve(Ue(Ye)({
+          v: f.value === "text" ? D.value : N.value,
           s: "px",
           r: 1
         })), 5)
@@ -367,32 +371,32 @@ const Ye = {
       B("button", {
         class: ne(["vue-ui-pen-and-paper-action", { "vue-ui-pen-and-paper-action-disabled": !w.value.length }]),
         disabled: !w.value.length,
-        onClick: Ne,
+        onClick: De,
         style: k({
-          backgroundColor: f.backgroundColor,
+          backgroundColor: g.backgroundColor,
           border: `1px solid ${R.value}`,
           marginTop: "20px"
         })
       }, [
-        M(t.$slots, "annotator-action-undo", U(K({ disabled: !w.value.length })), () => [
+        T(t.$slots, "annotator-action-undo", U(K({ disabled: !w.value.length })), () => [
           P(X, {
             name: "refresh",
-            stroke: f.color
+            stroke: g.color
           }, null, 8, ["stroke"])
         ])
-      ], 14, qe),
+      ], 14, Ge),
       B("button", {
-        class: ne(["vue-ui-pen-and-paper-action", { "vue-ui-pen-and-paper-action-disabled": !y.value.length }]),
-        onClick: De,
+        class: ne(["vue-ui-pen-and-paper-action", { "vue-ui-pen-and-paper-action-disabled": !x.value.length }]),
+        onClick: Me,
         style: k({
-          backgroundColor: f.backgroundColor,
+          backgroundColor: g.backgroundColor,
           border: `1px solid ${R.value}`
         })
       }, [
-        M(t.$slots, "annotator-action-redo", U(K({ disabled: !y.value.length })), () => [
+        T(t.$slots, "annotator-action-redo", U(K({ disabled: !x.value.length })), () => [
           P(X, {
             name: "refresh",
-            stroke: f.color,
+            stroke: g.color,
             style: { transform: "scaleX(-1)" }
           }, null, 8, ["stroke"])
         ])
@@ -401,18 +405,18 @@ const Ye = {
         class: ne(["vue-ui-pen-and-paper-action", { "vue-ui-pen-and-paper-action-disabled": !w.value.length }]),
         onClick: Te,
         style: k({
-          backgroundColor: f.backgroundColor,
+          backgroundColor: g.backgroundColor,
           border: `1px solid ${R.value}`
         })
       }, [
-        M(t.$slots, "annotator-action-delete", U(K({ disabled: !w.value.length })), () => [
+        T(t.$slots, "annotator-action-delete", U(K({ disabled: !w.value.length })), () => [
           P(X, {
             name: "trash",
-            stroke: f.color
+            stroke: g.color
           }, null, 8, ["stroke"])
         ])
       ], 6),
-      g.value === "text" ? be((re(), se("input", {
+      f.value === "text" ? be((re(), se("input", {
         key: 0,
         ref: "range",
         type: "range",
@@ -421,7 +425,7 @@ const Ye = {
         max: 48,
         step: 0.1,
         "onUpdate:modelValue": e[3] || (e[3] = (a) => D.value = a),
-        style: k({ accentColor: f.color })
+        style: k({ accentColor: g.color })
       }, null, 4)), [
         [we, D.value]
       ]) : be((re(), se("input", {
@@ -433,13 +437,13 @@ const Ye = {
         max: 12,
         step: 0.1,
         "onUpdate:modelValue": e[4] || (e[4] = (a) => N.value = a),
-        style: k({ accentColor: f.color })
+        style: k({ accentColor: g.color })
       }, null, 4)), [
         [we, N.value]
       ])
-    ], 4)) : Fe("", !0);
+    ], 4)) : Ie("", !0);
   }
 };
 export {
-  Oe as default
+  je as default
 };