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