vue3-scale-ruler
Version:
133 lines (132 loc) • 4.46 kB
JavaScript
import { defineComponent as I, mergeDefaults as _, ref as c, reactive as p, watchEffect as B, onUnmounted as E, resolveComponent as U, openBlock as i, createElementBlock as a, createVNode as u, mergeProps as g, createElementVNode as D, normalizeStyle as N, withCtx as O, Fragment as d, createBlock as y, resolveDynamicComponent as m } from "vue";
import { SketchRulePropsDefaultValeue as P } from "./props.js";
import v from "./components/RulerCanvas.vue.js";
const $ = { key: 0 }, M = { key: 1 }, A = /* @__PURE__ */ I({
__name: "ScaleRule",
props: /* @__PURE__ */ _({
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: {}
}, {
...P
}),
setup(k, { expose: b }) {
const o = k, f = c(), s = c(o.isShowReferLine);
let n;
const w = c(o.autoUpdateCssVar || !1), L = p({
longLineColor: o.longLineColor,
shortLineColor: o.shortLineColor || o.fontColor,
bgColor: o.bgColor,
borderColor: o.borderColor,
fontColor: o.fontColor,
lineColor: o.lineColor || o.longLineColor,
activeColor: o.activeColor || o.longLineColor,
blockColor: o.blockColor || o.longLineColor
}), r = p({
longLineColor: o.longLineColor,
shortLineColor: o.shortLineColor || o.fontColor,
bgColor: o.bgColor,
borderColor: o.borderColor,
fontColor: o.fontColor,
lineColor: o.lineColor || o.longLineColor,
activeColor: o.activeColor || o.longLineColor,
blockColor: o.blockColor || o.longLineColor
}), V = ["longLineColor", "shortLineColor"], R = () => {
Object.keys(r).forEach(
(e) => {
var l;
let t = "--ruler-" + e.replace(/([A-Z])/g, (C) => `-${C.toLocaleLowerCase()}`);
(l = f.value) == null || l.style.setProperty(t, r[e]);
}
);
}, S = () => {
n || (n = new MutationObserver(() => {
const e = getComputedStyle(document.documentElement);
let t = !1;
Object.keys(r).forEach(
(l) => {
if (l && L[l].substring(0, 2) === "--") {
let C = e.getPropertyValue(L[l]);
C !== r[l] && (r[l] = C, V.includes(l) === !1 && (t = !0));
}
}
), t && R();
}));
}, h = () => {
S(), n == null || n.observe(document.body, { attributes: !0, childList: !0, subtree: !0 });
};
return B(() => {
w.value === !0 && h();
}), E(() => {
n == null || n.disconnect();
}), b({
updateColorVar: (e) => {
h(), e && typeof e == "function" && e();
}
}), (e, t) => {
const l = U("el-icon");
return i(), a("div", {
ref_key: "mainRef",
ref: f,
class: "ibsp-nextui-ruler"
}, [
u(v, g(o, {
key: "h",
h: !0,
isShowReferLine: s.value,
longLineColor: r.longLineColor,
shortLineColor: r.shortLineColor,
fontColor: r.fontColor
}), null, 16, ["isShowReferLine", "longLineColor", "shortLineColor", "fontColor"]),
u(v, g(o, {
key: "v",
h: !1,
isShowReferLine: s.value,
longLineColor: r.longLineColor,
shortLineColor: r.shortLineColor,
fontColor: r.fontColor
}), null, 16, ["isShowReferLine", "longLineColor", "shortLineColor", "fontColor"]),
D("div", {
class: "ruler-icon",
style: N({ width: `${e.thick}px`, height: `${e.thick}px` }),
onClick: t[0] || (t[0] = (C) => s.value = !s.value)
}, [
u(l, null, {
default: O(() => [
e.cornerIcon && e.cornerCloseIcon ? (i(), a(d, { key: 0 }, [
s.value ? (i(), y(m(e.cornerCloseIcon), { key: 1 })) : (i(), y(m(e.cornerIcon), { key: 0 }))
], 64)) : (i(), a(d, { key: 1 }, [
s.value ? (i(), a("span", $, "N")) : (i(), a("span", M, "Y"))
], 64))
]),
_: 1
})
], 4)
], 512);
};
}
});
export {
A as default
};