vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
117 lines (116 loc) • 4.62 kB
JavaScript
import { ref as h, computed as O, onMounted as Q, onUnmounted as U, watchEffect as W } from "vue";
function J(f, s = { x: 0, y: 0, width: 100, height: 100 }, q = 1, z) {
const o = h({ ...s }), l = h(1), E = h(!1), y = h({ x: 0, y: 0 }), x = h(0), D = h(null), L = h(!1), k = O(() => o.value.x !== s.x || o.value.y !== s.y || o.value.width !== s.width || o.value.height !== s.height);
let v = { x: 0, y: 0 }, F = null, g = null;
function M(e) {
if (e.length < 2) return 0;
const t = e[0].clientX - e[1].clientX, n = e[0].clientY - e[1].clientY;
return Math.sqrt(t * t + n * n);
}
function d(e) {
var a;
const t = f.value;
if (!t) return { x: 0, y: 0 };
const n = t.createSVGPoint();
n.x = e.clientX, n.y = e.clientY;
const u = (a = t.getScreenCTM()) == null ? void 0 : a.inverse();
return u ? n.matrixTransform(u) : { x: 0, y: 0 };
}
function P(e) {
E.value = !0;
const t = d(e.touches ? e.touches[0] : e);
y.value = { x: t.x, y: t.y }, v = { x: 0, y: 0 };
}
function S(e) {
if (!E.value) return;
const t = d(e.touches ? e.touches[0] : e);
let n = t.x - y.value.x, u = t.y - y.value.y;
Math.abs(n) < 0.3 && Math.abs(u) < 0.3 || (v.x = n * 0.8 + v.x * 0.2, v.y = u * 0.8 + v.y * 0.2, y.value = t, F || (F = requestAnimationFrame(C)));
}
function C() {
o.value.x -= v.x, o.value.y -= v.y, F = null;
}
function m() {
E.value = !1;
}
function G(e = !1) {
if (!e) {
o.value = { ...s }, l.value = 1;
return;
}
const t = { ...o.value }, n = l.value, u = 300;
let a = null;
function r(i) {
a || (a = i);
const c = Math.min((i - a) / u, 1);
o.value = {
x: t.x + (s.x - t.x) * c,
y: t.y + (s.y - t.y) * c,
width: t.width + (s.width - t.width) * c,
height: t.height + (s.height - t.height) * c
}, l.value = n + (1 - n) * c, c < 1 ? requestAnimationFrame(r) : (o.value = { ...s }, l.value = 1);
}
requestAnimationFrame(r);
}
function X(e) {
e.preventDefault();
const t = e.deltaY > 0 ? 0.9 : 1.1;
w(t, d(e));
}
function A(e) {
e.preventDefault();
const t = d(e), n = 1.02 * (1 + q / 100);
H(n, t);
}
function H(e, t) {
g && cancelAnimationFrame(g);
let n = l.value, u = n * e, a = 0;
const r = () => {
a += 0.02;
let i = n + (u - n) * I(a);
if (a >= 1) {
l.value = u, g = null;
return;
}
w(i / n, t), g = requestAnimationFrame(r);
};
r();
}
const I = (e) => e < 0.5 ? 2 * e * e : -1 + (4 - 2 * e) * e;
function w(e, t) {
const n = l.value * e, u = n / l.value, a = o.value.width / u, r = o.value.height / u, i = (t.x - o.value.x) * (1 - 1 / u), c = (t.y - o.value.y) * (1 - 1 / u);
o.value.x += i, o.value.y += c, o.value.width = a, o.value.height = r, l.value = n;
}
function T(e) {
e.touches.length === 2 ? (L.value = !0, x.value = M(e.touches), D.value = { ...o.value }) : (e.preventDefault(), P(e));
}
function Z(e) {
if (L.value && e.touches.length === 2) {
e.preventDefault();
const t = M(e.touches);
if (x.value) {
const n = t / x.value, a = f.value.getBoundingClientRect(), r = (e.touches[0].clientX + e.touches[1].clientX) / 2 - a.left, i = (e.touches[0].clientY + e.touches[1].clientY) / 2 - a.top, c = d({ clientX: r + a.left, clientY: i + a.top });
o.value = { ...D.value }, w(n, c);
}
} else
e.preventDefault(), S(e);
}
function p(e) {
e.touches.length < 2 && (L.value = !1), m();
}
Q(b), U(Y);
function b() {
const e = f.value;
e && (e.addEventListener("mousedown", P), e.addEventListener("mousemove", S), e.addEventListener("mouseup", m), e.addEventListener("mouseleave", m), e.addEventListener("wheel", X, { passive: !1 }), e.addEventListener("dblclick", A), e.addEventListener("touchstart", T, { passive: !1 }), e.addEventListener("touchmove", Z, { passive: !1 }), e.addEventListener("touchend", p), e.addEventListener("touchcancel", p));
}
function Y() {
const e = f.value;
e && (e.removeEventListener("mousedown", P), e.removeEventListener("mousemove", S), e.removeEventListener("mouseup", m), e.removeEventListener("mouseleave", m), e.removeEventListener("wheel", X), e.removeEventListener("dblclick", A), e.removeEventListener("touchstart", T), e.removeEventListener("touchmove", Z), e.removeEventListener("touchend", p), e.removeEventListener("touchcancel", p));
}
return W(() => (z.value ? b() : Y(), () => {
Y();
})), { viewBox: o, resetZoom: G, isZoom: k };
}
export {
J as u
};