import { defineComponent as h, openBlock as r, createElementBlock as c, createElementVNode as o, normalizeClass as l, unref as e, normalizeStyle as _, Fragment as y, renderList as f, withDirectives as b, vShow as v, createCommentVNode as k, pushScopeId as w, popScopeId as x } from "vue";
import { useDraw as C } from "./composables-5f691338.js";
import { _export_sfc as $ } from "./_plugin-vue_export-helper-6a641814.js";
const i = (u) => (w("data-v-316a0565"), u = u(), x(), u), z = { class: "z-10 absolute top-4 left-4 right-4" }, S = /* @__PURE__ */ i(() => /* @__PURE__ */ o("div", { class: "i-carbon-pen" }, null, -1)), D = [
  S
], B = { class: "is-group flex gap-2 px-2 py-1" }, I = /* @__PURE__ */ i(() => /* @__PURE__ */ o("div", { class: "i-carbon-pen" }, null, -1)), M = [
  I
], j = /* @__PURE__ */ i(() => /* @__PURE__ */ o("svg", {
  class: "-mt-1",
  width: "1em",
  height: "1em",
  preserveAspectRatio: "xMidYMid meet",
  viewBox: "0 0 24 24"
}, [
  /* @__PURE__ */ o("path", {
    d: "M21.71 3.29a1 1 0 0 0-1.42 0l-18 18a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0l18-18a1 1 0 0 0 0-1.42z",
    fill: "currentColor"
  })
], -1)), E = [
  j
], N = /* @__PURE__ */ i(() => /* @__PURE__ */ o("div", { class: "i-carbon-arrow-up-right" }, null, -1)), R = [
  N
], V = /* @__PURE__ */ i(() => /* @__PURE__ */ o("div", { class: "i-carbon-radio-button" }, null, -1)), A = [
  V
], F = /* @__PURE__ */ i(() => /* @__PURE__ */ o("div", { class: "i-carbon-checkbox" }, null, -1)), L = [
  F
], U = { class: "is-group flex flex-wrap" }, Y = ["onClick"], q = /* @__PURE__ */ i(() => /* @__PURE__ */ o("div", { class: "i-carbon-undo" }, null, -1)), G = [
  q
], H = /* @__PURE__ */ i(() => /* @__PURE__ */ o("div", { class: "i-carbon-redo" }, null, -1)), J = [
  H
], K = /* @__PURE__ */ i(() => /* @__PURE__ */ o("div", { class: "i-carbon-delete" }, null, -1)), O = [
  K
], P = { class: "i-carbon-pin-filled transform -rotate-45" }, Q = { class: "i-carbon-pin" }, T = { class: "i-carbon-error" }, W = { class: "i-carbon-close-outline" }, X = /* @__PURE__ */ h({
  __name: "SpaceDraw",
  setup(u) {
    const { brush: d, drauu: m, draw: t } = C();
    function a(p) {
      t.mode = p, t.enabled = !0;
    }
    function g(p) {
      d.color = p, t.enabled = !0;
    }
    return (p, n) => (r(), c("div", z, [
      o("button", {
        class: l(["text-6xl absolute", { active: e(t).enabled }]),
        style: _({ opacity: e(t).enabled ? 0.2 : 1 }),
        onClick: n[0] || (n[0] = (s) => e(t).enabled = !e(t).enabled)
      }, D, 6),
      e(t).enabled ? (r(), c("div", {
        key: 0,
        class: l(["flex flex-wrap text-xl p-2 gap-2 justify-center rounded-md bg-main shadow transition-opacity duration-200 dark-border dark-border-gray-400 dark-border-opacity-10 bg-light-300 dark-bg-dark-300 bg-opacity-90", e(t).enabled ? "" : e(t).pinned ? "opacity-40 hover-opacity-90" : "pointer-events-none"]),
        "storage-key": "slidev-drawing-pos",
        "initial-x": 10,
        "initial-y": 10
      }, [
        o("button", {
          class: "w-6 flex items-center justify-center",
          onClick: n[1] || (n[1] = (s) => e(d).size = e(t).sizes.next())
        }, [
          o("div", {
            class: "bg-current rounded-full",
            style: _({ width: e(d).size + 4 + "px", height: e(d).size + 4 + "px", backgroundColor: e(d).color })
          }, null, 4)
        ]),
        o("div", B, [
          o("button", {
            class: l({ active: e(t).mode == "stylus" }),
            onClick: n[2] || (n[2] = (s) => a("stylus"))
          }, M, 2),
          o("button", {
            class: l({ active: e(t).mode == "line" }),
            onClick: n[3] || (n[3] = (s) => a("line"))
          }, E, 2),
          o("button", {
            class: l({ active: e(t).mode == "arrow" }),
            onClick: n[4] || (n[4] = (s) => a("arrow"))
          }, R, 2),
          o("button", {
            class: l({ active: e(t).mode == "ellipse" }),
            onClick: n[5] || (n[5] = (s) => a("ellipse"))
          }, A, 2),
          o("button", {
            class: l({ active: e(t).mode == "rectangle" }),
            onClick: n[6] || (n[6] = (s) => a("rectangle"))
          }, L, 2)
        ]),
        o("div", U, [
          (r(!0), c(y, null, f(e(t).colors, (s) => (r(), c("button", {
            key: s,
            class: l(e(d).color === s ? "active" : "shallow"),
            onClick: (Z) => g(s)
          }, [
            o("div", {
              class: l(["w-6 h-6 transition-all transform border border-gray-400 border-opacity-50", e(d).color !== s ? "rounded-1/2 scale-85" : "rounded-md"]),
              style: _(e(t).enabled ? { background: s } : { borderColor: s })
            }, null, 6)
          ], 10, Y))), 128))
        ]),
        o("button", {
          class: l({ disabled: !e(t).canUndo }),
          onClick: n[7] || (n[7] = (s) => e(m).undo())
        }, G, 2),
        o("button", {
          class: l({ disabled: !e(t).canRedo }),
          onClick: n[8] || (n[8] = (s) => e(m).redo())
        }, J, 2),
        o("button", {
          class: l({ disabled: !e(t).canClear }),
          onClick: n[9] || (n[9] = (s) => e(t).clear())
        }, O, 2),
        o("button", {
          class: l({ shallow: !e(t).pinned }),
          onClick: n[10] || (n[10] = (s) => e(t).pinned = !e(t).pinned)
        }, [
          b(o("div", P, null, 512), [
            [v, e(t).pinned]
          ]),
          b(o("div", Q, null, 512), [
            [v, !e(t).pinned]
          ])
        ], 2),
        e(t).enabled ? (r(), c("button", {
          key: 0,
          class: l({ shallow: !e(t).enabled }),
          onClick: n[11] || (n[11] = (s) => e(t).enabled = !e(t).enabled)
        }, [
          b(o("div", T, null, 512), [
            [v, e(t).pinned]
          ]),
          b(o("div", W, null, 512), [
            [v, !e(t).pinned]
          ])
        ], 2)) : k("", !0)
      ], 2)) : k("", !0)
    ]));
  }
});
const ne = /* @__PURE__ */ $(X, [["__scopeId", "data-v-316a0565"]]);
export {
  ne as default
};
//# sourceMappingURL=SpaceDraw-852644c6.js.map
