@lottiefiles/dotlottie-svelte 0.3.10 → 0.3.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Dotlottie.svelte +0 -24
- package/package.json +1 -1
package/dist/Dotlottie.svelte
CHANGED
|
@@ -23,20 +23,6 @@ export let themeId = "";
|
|
|
23
23
|
export let themeData = "";
|
|
24
24
|
export let dotLottieRefCallback = () => {
|
|
25
25
|
};
|
|
26
|
-
const getCanvasViewport = (canvas2, dpr) => {
|
|
27
|
-
const rect = canvas2.getBoundingClientRect();
|
|
28
|
-
const windowWidth = window.innerWidth;
|
|
29
|
-
const windowHeight = window.innerHeight;
|
|
30
|
-
const visibleLeft = Math.max(0, -rect.left);
|
|
31
|
-
const visibleTop = Math.max(0, -rect.top);
|
|
32
|
-
const visibleRight = Math.min(rect.width, windowWidth - rect.left);
|
|
33
|
-
const visibleBottom = Math.min(rect.height, windowHeight - rect.top);
|
|
34
|
-
const x = visibleLeft * dpr;
|
|
35
|
-
const y = visibleTop * dpr;
|
|
36
|
-
const width = (visibleRight - visibleLeft) * dpr;
|
|
37
|
-
const height = (visibleBottom - visibleTop) * dpr;
|
|
38
|
-
return { x, y, width, height };
|
|
39
|
-
};
|
|
40
26
|
const hoverHandler = (event) => {
|
|
41
27
|
if (!playOnHover || !dotLottie.isLoaded)
|
|
42
28
|
return;
|
|
@@ -50,13 +36,6 @@ let dotLottie;
|
|
|
50
36
|
let canvas;
|
|
51
37
|
let prevSrc = void 0;
|
|
52
38
|
let prevData = void 0;
|
|
53
|
-
const updateViewport = () => {
|
|
54
|
-
if (!dotLottie || !canvas)
|
|
55
|
-
return;
|
|
56
|
-
const dpr = renderConfig?.devicePixelRatio || window.devicePixelRatio || 1;
|
|
57
|
-
const { height, width, x, y } = getCanvasViewport(canvas, dpr);
|
|
58
|
-
dotLottie.setViewport(x, y, width, height);
|
|
59
|
-
};
|
|
60
39
|
onMount(() => {
|
|
61
40
|
const shouldAutoplay = autoplay && !playOnHover;
|
|
62
41
|
dotLottie = new DotLottie({
|
|
@@ -95,14 +74,11 @@ onMount(() => {
|
|
|
95
74
|
intersectionObserver.observe(canvas);
|
|
96
75
|
canvas.addEventListener("mouseenter", hoverHandler);
|
|
97
76
|
canvas.addEventListener("mouseleave", hoverHandler);
|
|
98
|
-
dotLottie.addEventListener("frame", updateViewport);
|
|
99
|
-
updateViewport();
|
|
100
77
|
return () => {
|
|
101
78
|
resizeObserver.disconnect();
|
|
102
79
|
intersectionObserver.disconnect();
|
|
103
80
|
canvas.removeEventListener("mouseenter", hoverHandler);
|
|
104
81
|
canvas.removeEventListener("mouseleave", hoverHandler);
|
|
105
|
-
dotLottie.removeEventListener("frame", updateViewport);
|
|
106
82
|
dotLottie.destroy();
|
|
107
83
|
};
|
|
108
84
|
});
|
package/package.json
CHANGED