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