vuux
Version:
Vue3 Nuxt3 Nuxt4 组件库
51 lines (50 loc) • 2.39 kB
JavaScript
import { computed as g, ref as v, onMounted as C, onBeforeUnmount as X } from "vue";
import { HUEtoRGB as Y } from "../utils.mjs";
const y = (t, n, l, r) => {
const $ = g(() => {
const { r: e, g: o, b: s } = Y(t.hue);
return `rgba(${e}, ${o}, ${s}, 1)`;
}), h = g(() => t.width), L = g(() => t.height), i = v(0), d = v(0), p = v(0), M = v(0), m = v(!1), x = (e, o) => {
if (l.value) {
l.value.style.transform = `translate(${e}px, ${o}px)`;
const s = e / h.value, a = 1 - o / L.value;
r("update:sat", s), r("update:val", a), r("update:cursor", e, o);
}
}, u = (e) => {
m.value && (e.cancelable && e.preventDefault(), requestAnimationFrame(() => {
let o = 0, s = 0;
if (n.value) {
const a = n.value.getBoundingClientRect();
e instanceof MouseEvent ? (o = e.clientX - a.left, s = e.clientY - a.top) : (o = e.touches[0].clientX - a.left, s = e.touches[0].clientY - a.top), x(o, s);
}
}));
}, f = () => {
m.value = !1, document.removeEventListener("mousemove", u), document.removeEventListener("touchmove", u);
}, E = () => {
document.removeEventListener("mousemove", u), document.removeEventListener("touchmove", u), document.removeEventListener("touchend", f);
}, b = () => {
document.addEventListener("mouseup", f, { once: !0 }), document.addEventListener("mousemove", u), document.addEventListener("touchend", f, { once: !0, passive: !1 }), document.addEventListener("touchmove", u, { passive: !1 });
}, B = () => {
if (n.value) {
const e = n.value.getBoundingClientRect();
p.value = e.left, M.value = e.top;
}
}, w = () => {
l.value && (t.x === 0 && t.y === 0 || t.isPreset ? (i.value = h.value * t.sat, d.value = L.value * (1 - t.val)) : (i.value = t.x, d.value = t.y), l.value.style.transform = `translate(${i.value}px, ${d.value}px)`);
}, c = (e) => {
e.cancelable && e.preventDefault(), m.value = !0, B(), u(e), b();
};
return C(() => {
n.value && (n.value.addEventListener("mousedown", c), n.value.addEventListener("touchstart", c, { passive: !1, capture: !0 }));
}), X(() => {
n.value && (n.value.removeEventListener("mousedown", c), n.value.removeEventListener("touchstart", c, { capture: !0 })), E();
}), {
panelBgColor: $,
setSizePoses: B,
setCursor: w,
unregisterListeners: E
};
};
export {
y as usePanel
};