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