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-DvoYtRts.js";
import { C as oe } from "./PenAndPaper.vue_vue_type_style_index_0_scoped_3cea7589_lang-Ba5_bVxO.js";
import { l as ae } from "./index-sUrVQKbu.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
};
