vue3-scale-ruler/es/components/RulerCanvas.vue2.js

import { defineComponent as X, mergeDefaults as Y, ref as i, computed as s, reactive as F, watch as O, openBlock as h, createElementBlock as f, Fragment as y, createElementVNode as w, normalizeClass as L, normalizeStyle as g, createCommentVNode as P, withDirectives as M, createVNode as T, vShow as R, renderList as U, createBlock as j } from "vue";
import { SketchRulePropsDefaultValeue as q } from "../props.js";
import $ from "./RulerLine.vue.js";
import A from "../hooks/useCanvas.js";
const W = /* @__PURE__ */ X({
  __name: "RulerCanvas",
  props: /* @__PURE__ */ Y({
    width: {},
    height: {},
    thick: {},
    scale: {},
    ratio: {},
    lines: {},
    isShowReferLine: { type: Boolean },
    startX: {},
    startY: {},
    rect: {},
    useMoveLine: { type: Boolean },
    autoUpdateCssVar: { type: Boolean },
    longLineColor: {},
    shortLineColor: {},
    fontColor: {},
    lineColor: {},
    bgColor: {},
    borderColor: {},
    activeColor: {},
    blockColor: {},
    step: {},
    cornerIcon: {},
    cornerCloseIcon: {},
    lineCloseIcon: {},
    h: { type: Boolean }
  }, {
    ...q,
    h: !0
  }),
  setup(B) {
    const e = B, p = e.h ? "h" : "v", c = i(!1), r = i(0), d = `ruler-${Math.round(Math.random() * Date.now())}`, S = i(), V = i(), a = A(e, d, e.h), k = (t) => t * e.scale, m = s(() => k(0 - a.start.value) + e.thick), b = (t) => {
      e.h ? r.value = t.offsetX : r.value = t.offsetY;
    }, D = s(() => ({
      [e.h ? "height" : "width"]: `${e.thick}px`,
      [e.h ? "paddingLeft" : "paddingTop"]: `${e.thick}px`
    })), I = s(() => {
      var l, n, v, C;
      let t = e.h ? (l = e.rect) == null ? void 0 : l.width : (n = e.rect) == null ? void 0 : n.height, o = e.h ? (v = e.rect) == null ? void 0 : v.x : (C = e.rect) == null ? void 0 : C.y;
      return e.rect ? {
        [e.h ? "width" : "height"]: `${t}px`,
        [e.h ? "left" : "top"]: `${m.value + (o || 0)}px`
      } : null;
    }), z = s(() => Math.ceil(r.value / e.scale + a.start.value)), u = F({
      v: [...e.lines.v || []],
      h: [...e.lines.h || []]
    }), N = () => {
      u[p].push(r.value / e.scale + a.start.value);
    }, E = s(() => e.h ? u.h : u.v), H = (t) => {
      u[p].splice(t, 1);
    };
    return O(e, () => {
      a.draw(e);
    }), (t, o) => (h(), f(y, null, [
      w("div", {
        class: L(["ruler", [t.h ? "ruler-h" : "ruler-v"]]),
        id: d,
        style: g(D.value),
        ref_key: "mainRef",
        ref: S
      }, [
        t.rect ? (h(), f("div", {
          key: 0,
          class: L(["ruler-block", [t.h ? "ruler-block-h" : "ruler-block-v"]]),
          style: g(I.value)
        }, null, 6)) : P("", !0),
        w("canvas", {
          ref_key: "canvasRef",
          ref: V,
          onMouseenter: o[0] || (o[0] = (l) => c.value = !0),
          onMousemove: o[1] || (o[1] = (l) => b(l)),
          onMouseleave: o[2] || (o[2] = (l) => c.value = !1),
          onClick: o[3] || (o[3] = (l) => N())
        }, null, 544)
      ], 6),
      M(T($, {
        start: 0,
        offset: r.value + t.thick,
        h: t.h,
        value: z.value,
        isHover: !0,
        thick: t.thick
      }, null, 8, ["offset", "h", "value", "thick"]), [
        [R, c.value && t.useMoveLine]
      ]),
      (h(!0), f(y, null, U(E.value, (l, n) => M((h(), j($, {
        key: n,
        start: m.value,
        offset: k(l),
        h: t.h,
        value: l,
        thick: t.thick,
        onDel: (v) => H(n),
        lineCloseIcon: t.lineCloseIcon
      }, null, 8, ["start", "offset", "h", "value", "thick", "onDel", "lineCloseIcon"])), [
        [R, t.isShowReferLine]
      ])), 128))
    ], 64));
  }
});
export {
  W as default
};