vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
230 lines (229 loc) • 8.94 kB
JavaScript
import { ref as c, computed as _, onMounted as R, onBeforeUnmount as S, createElementBlock as l, createCommentVNode as o, openBlock as i, normalizeStyle as E, unref as m, createElementVNode as r, normalizeClass as C, toDisplayString as p, nextTick as b } from "vue";
import { u as F } from "./useNestedProp-ByBiJC9_.js";
import { u as L, c as z, X as O, s as I } from "./index-CHWA6Lnw.js";
import { _ as B } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const N = ["xmlns", "height", "width"], T = {
id: "follower",
fy: "30%",
fx: "30%"
}, D = ["stop-color", "stop-opacity"], $ = ["r", "fill", "stroke", "stroke-width", "stroke-dasharray"], W = ["r"], G = {
key: 2,
class: "wave"
}, A = ["id"], U = ["id"], V = ["filter", "stroke"], M = {
key: 3,
class: "crosshair"
}, P = ["x1", "stroke", "stroke-width", "stroke-dasharray"], X = ["x1", "stroke", "stroke-width", "stroke-dasharray"], j = ["y1", "stroke", "stroke-width", "stroke-dasharray"], Y = ["y1", "stroke", "stroke-width", "stroke-dasharray"], q = ["cy", "r", "fill"], H = ["cy", "r", "fill"], J = ["cx", "r", "fill"], K = ["cx", "r", "fill"], Q = {
key: 5,
class: "coordinates"
}, Z = ["x", "y", "font-size", "fill"], ee = ["transform"], te = ["font-size", "fill"], re = {
__name: "vue-ui-cursor",
props: {
config: {
type: Object,
default: {}
}
},
setup(x) {
const { vue_ui_cursor: g } = L(), w = x, d = c(z()), e = _(() => F({
userConfig: w.config,
defaultConfig: g
})), s = c({
x: -100,
y: -100
});
function f({ clientX: t, clientY: a, ...se }) {
s.value.x = t - e.value.centerCircleRadius, s.value.y = a - e.value.centerCircleRadius;
}
function h(t) {
s.value.x = t.targetTouches[0].clientX - e.value.centerCircleRadius, s.value.y = t.targetTouches[0].clientY - e.value.centerCircleRadius;
}
const y = c(!0);
function u(t) {
y.value = t;
}
const n = c(!1), v = c(null);
function k() {
n.value = !1, v.value && clearTimeout(v.value), b(() => {
n.value = !0, v.value = setTimeout(() => {
n.value = !1;
}, 1e3);
});
}
return R(() => {
const t = e.value.parentId ? document.getElementById(e.value.parentId) : document.getElementsByTagName("div")[0];
t.addEventListener("mousemove", f), t.addEventListener("touchmove", h), t.addEventListener("mouseleave", () => u(!1)), t.addEventListener("mouseenter", () => u(!0)), t.addEventListener("click", k);
}), S(() => {
const t = e.value.parentId ? document.getElementById(e.value.parentId) : document.getElementsByTagName("div")[0];
t.removeEventListener("mousemove", f), t.removeEventListener("touchmove", h), t.removeEventListener("mouseleave", () => u(!1)), t.removeEventListener("mouseenter", () => u(!0)), t.removeEventListener("click", k);
}), _(() => e.value.centerCircleRadius / 2.5), (t, a) => y.value ? (i(), l("svg", {
key: 0,
"data-html2canvas-ignore": "",
xmlns: m(O),
style: E(`z-index: 2147483647; overflow: visible; pointer-events: none;background: transparent; position:fixed; top:${s.value.y}px; left:${s.value.x}px;`),
viewBox: "0 0 100 100",
height: e.value.centerCircleRadius * 2,
width: e.value.centerCircleRadius * 2
}, [
r("defs", null, [
r("radialGradient", T, [
r("stop", {
offset: "10%",
"stop-color": e.value.bubbleEffectColor,
"stop-opacity": e.value.bubbleEffectOpacity
}, null, 8, D),
a[0] || (a[0] = r("stop", {
offset: "95%",
"stop-color": "transparent"
}, null, -1))
])
]),
e.value.showCenterCircle ? (i(), l("circle", {
key: 0,
cx: 50,
cy: 50,
r: e.value.centerCircleRadius,
fill: m(I)(e.value.centerCircleColor, e.value.centerCircleOpacity * 100),
stroke: e.value.centerCircleStroke,
"stroke-width": e.value.centerCircleStrokeWidth,
"stroke-dasharray": e.value.centerCircleDasharray
}, null, 8, $)) : o("", !0),
e.value.bubbleEffect ? (i(), l("circle", {
key: 1,
cx: 50,
cy: 50,
r: e.value.centerCircleRadius,
fill: "url(#follower)",
stroke: "none"
}, null, 8, W)) : o("", !0),
e.value.useWaveOnClick ? (i(), l("g", G, [
r("defs", null, [
r("filter", {
id: `blur_${d.value}`,
x: "-50%",
y: "-50%",
width: "200%",
height: "200%"
}, [
r("feGaussianBlur", {
in: "SourceGraphic",
stdDeviation: 4,
id: `blur_std_${d.value}`
}, null, 8, U),
a[1] || (a[1] = r("feColorMatrix", {
type: "saturate",
values: "0"
}, null, -1))
], 8, A)
]),
n.value ? (i(), l("circle", {
key: 0,
class: C({ "circle-wave": n.value }),
cx: 50,
cy: 50,
r: 50,
filter: `url(#blur_${d.value})`,
stroke: e.value.centerCircleStroke,
fill: "none",
"stroke-width": "3"
}, null, 10, V)) : o("", !0)
])) : o("", !0),
e.value.showCrosshair ? (i(), l("g", M, [
r("line", {
x1: -e.value.centerCircleRadius + 50,
x2: -5e3,
y1: 50,
y2: 50,
stroke: e.value.crosshairStroke,
"stroke-width": e.value.crosshairStrokeWidth,
"stroke-dasharray": e.value.crosshairDasharray,
"stroke-linecap": "round"
}, null, 8, P),
r("line", {
x1: 50 + e.value.centerCircleRadius,
x2: 5e3,
y1: 50,
y2: 50,
stroke: e.value.crosshairStroke,
"stroke-width": e.value.crosshairStrokeWidth,
"stroke-dasharray": e.value.crosshairDasharray,
"stroke-linecap": "round"
}, null, 8, X),
r("line", {
x1: 50,
x2: 50,
y1: -e.value.centerCircleRadius + 50,
y2: -5e3,
stroke: e.value.crosshairStroke,
"stroke-width": e.value.crosshairStrokeWidth,
"stroke-dasharray": e.value.crosshairDasharray,
"stroke-linecap": "round"
}, null, 8, j),
r("line", {
x1: 50,
x2: 50,
y1: e.value.centerCircleRadius + 50,
y2: 5e3,
stroke: e.value.crosshairStroke,
"stroke-width": e.value.crosshairStrokeWidth,
"stroke-dasharray": e.value.crosshairDasharray,
"stroke-linecap": "round"
}, null, 8, Y)
])) : o("", !0),
e.value.showIntersectCircles ? (i(), l("g", {
key: 4,
class: C({ "rotating-circles": e.value.isLoading })
}, [
r("circle", {
cx: 50,
cy: e.value.centerCircleRadius + 50,
r: e.value.intersectCirclesRadius,
fill: e.value.intersectCirclesFill
}, null, 8, q),
r("circle", {
cx: 50,
cy: -e.value.centerCircleRadius + 50,
r: e.value.intersectCirclesRadius,
fill: e.value.intersectCirclesFill
}, null, 8, H),
r("circle", {
cx: -e.value.centerCircleRadius + 50,
cy: 50,
r: e.value.intersectCirclesRadius,
fill: e.value.intersectCirclesFill
}, null, 8, J),
r("circle", {
cx: e.value.centerCircleRadius + 50,
cy: 50,
r: e.value.intersectCirclesRadius,
fill: e.value.intersectCirclesFill
}, null, 8, K)
], 2)) : o("", !0),
e.value.showCoordinates ? (i(), l("g", Q, [
r("text", {
"text-anchor": "end",
x: -e.value.centerCircleRadius + 50 - e.value.coordinatesFontSize / 2 + e.value.coordinatesOffset,
y: 50 - e.value.coordinatesFontSize / 2 + e.value.coordinatesOffset,
"font-size": e.value.coordinatesFontSize,
fill: e.value.coordinatesColor,
style: { "font-variant-numeric": "tabular-nums" },
"font-family": "Arial"
}, p(s.value.x.toFixed(0)), 9, Z),
r("g", {
transform: `translate(${50 - e.value.coordinatesFontSize / 2 + e.value.coordinatesOffset}, ${-e.value.centerCircleRadius + 50 - e.value.coordinatesFontSize / 2 + e.value.coordinatesOffset})`
}, [
r("text", {
"text-anchor": "start",
"font-size": e.value.coordinatesFontSize,
fill: e.value.coordinatesColor,
style: { "font-variant-numeric": "tabular-nums" },
transform: "rotate(-90)",
"font-family": "Arial"
}, p(s.value.y.toFixed(0)), 9, te)
], 8, ee)
])) : o("", !0)
], 12, N)) : o("", !0);
}
}, ne = /* @__PURE__ */ B(re, [["__scopeId", "data-v-0cca0d39"]]);
export {
ne as default
};