@lottiefiles/dotlottie-vue 0.3.6 → 0.4.0

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.
Files changed (5) hide show
  1. package/README.md +6 -0
  2. package/dist/dotlottie.d.ts +57 -0
  3. package/dist/dotlottie.js +108 -14
  4. package/dist/index.js +108 -14
  5. package/package.json +2 -2
package/README.md CHANGED
@@ -72,6 +72,12 @@ import { DotLottieVue } from '@lottiefiles/dotlottie-vue'
72
72
  | `segment` | \[number, number] | | \[0, totalFrames - 1] | Animation segment. Accepts an array of two numbers, where the first number is the start frame and the second number is the end frame. |
73
73
  | `renderConfig` | RenderConfig | | `{}` | Configuration for rendering the animation. |
74
74
  | `useFrameInterpolation` | boolean | | false | Determines if the animation should update on subframes. If set to false, the original AE frame rate will be maintained. If set to true, it will refresh at each requestAnimationFrame, including intermediate values. The default setting is true. |
75
+ | `marker` | string | | undefined | Sets a specific marker to be played |
76
+ | `autoResizeCanvas` | boolean | | true | Enable or disable auto resize of canvas |
77
+ | `playOnHover` | boolean | | false | When enabled it plays animation only on hover |
78
+ | `animationId` | string | | undefined | Plays specific animation within .lottie |
79
+ | `themeId` | string | | undefined | Loads a specific theme within .lottie |
80
+ | `themeData` | string | | undefined | Load theme data. |
75
81
 
76
82
  #### RenderConfig
77
83
 
package/dist/dotlottie.d.ts CHANGED
@@ -4,11 +4,20 @@ import { Config, Mode, DotLottie } from '@lottiefiles/dotlottie-web';
4
4
  export { DotLottie } from '@lottiefiles/dotlottie-web';
5
5
 
6
6
  interface DotLottieVueProps extends Omit<Config, 'canvas'> {
7
+ animationId?: string;
8
+ autoResizeCanvas?: boolean;
9
+ playOnHover?: boolean;
10
+ themeData?: string;
11
+ themeId?: string;
7
12
  }
8
13
  interface DotLottieVueExposed {
9
14
  getDotLottieInstance: () => DotLottie | null;
10
15
  }
11
16
  declare const DotLottieVue: vue.DefineComponent<{
17
+ animationId: {
18
+ type: StringConstructor;
19
+ required: false;
20
+ };
12
21
  autoplay: {
13
22
  type: BooleanConstructor;
14
23
  required: false;
@@ -49,7 +58,32 @@ declare const DotLottieVue: vue.DefineComponent<{
49
58
  type: BooleanConstructor;
50
59
  required: false;
51
60
  };
61
+ marker: {
62
+ type: StringConstructor;
63
+ required: false;
64
+ };
65
+ autoResizeCanvas: {
66
+ type: BooleanConstructor;
67
+ required: false;
68
+ default: boolean;
69
+ };
70
+ playOnHover: {
71
+ type: BooleanConstructor;
72
+ required: false;
73
+ };
74
+ themeData: {
75
+ type: StringConstructor;
76
+ required: false;
77
+ };
78
+ themeId: {
79
+ type: StringConstructor;
80
+ required: false;
81
+ };
52
82
  }, () => VNode, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, vue.EmitsOptions, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
83
+ animationId: {
84
+ type: StringConstructor;
85
+ required: false;
86
+ };
53
87
  autoplay: {
54
88
  type: BooleanConstructor;
55
89
  required: false;
@@ -90,10 +124,33 @@ declare const DotLottieVue: vue.DefineComponent<{
90
124
  type: BooleanConstructor;
91
125
  required: false;
92
126
  };
127
+ marker: {
128
+ type: StringConstructor;
129
+ required: false;
130
+ };
131
+ autoResizeCanvas: {
132
+ type: BooleanConstructor;
133
+ required: false;
134
+ default: boolean;
135
+ };
136
+ playOnHover: {
137
+ type: BooleanConstructor;
138
+ required: false;
139
+ };
140
+ themeData: {
141
+ type: StringConstructor;
142
+ required: false;
143
+ };
144
+ themeId: {
145
+ type: StringConstructor;
146
+ required: false;
147
+ };
93
148
  }>>, {
94
149
  autoplay: boolean;
95
150
  loop: boolean;
96
151
  useFrameInterpolation: boolean;
152
+ autoResizeCanvas: boolean;
153
+ playOnHover: boolean;
97
154
  }, {}>;
98
155
  type DotLottieVueInstance = InstanceType<typeof DotLottieVue> & DotLottieVueExposed;
99
156
  declare const setWasmUrl: (url: string) => void;
package/dist/dotlottie.js CHANGED
@@ -2,8 +2,23 @@ import { DotLottie } from '@lottiefiles/dotlottie-web';
2
2
  import { defineComponent, ref, toRefs, watch, onMounted, onBeforeUnmount, h } from 'vue';
3
3
 
4
4
  // src/dotlottie.ts
5
+ var getCanvasViewport = (canvas, dpr) => {
6
+ const rect = canvas.getBoundingClientRect();
7
+ const windowWidth = window.innerWidth;
8
+ const windowHeight = window.innerHeight;
9
+ const visibleLeft = Math.max(0, -rect.left);
10
+ const visibleTop = Math.max(0, -rect.top);
11
+ const visibleRight = Math.min(rect.width, windowWidth - rect.left);
12
+ const visibleBottom = Math.min(rect.height, windowHeight - rect.top);
13
+ const x = visibleLeft * dpr;
14
+ const y = visibleTop * dpr;
15
+ const width = (visibleRight - visibleLeft) * dpr;
16
+ const height = (visibleBottom - visibleTop) * dpr;
17
+ return { x, y, width, height };
18
+ };
5
19
  var DotLottieVue = defineComponent({
6
20
  props: {
21
+ animationId: { type: String, required: false },
7
22
  autoplay: { type: Boolean, required: false },
8
23
  backgroundColor: { type: String, required: false },
9
24
  data: { type: [String, ArrayBuffer], required: false },
@@ -13,11 +28,26 @@ var DotLottieVue = defineComponent({
13
28
  segment: { type: Array, required: false },
14
29
  speed: { type: Number, required: false },
15
30
  src: { type: String, required: false },
16
- useFrameInterpolation: { type: Boolean, required: false }
31
+ useFrameInterpolation: { type: Boolean, required: false },
32
+ marker: { type: String, required: false },
33
+ autoResizeCanvas: { type: Boolean, required: false, default: true },
34
+ playOnHover: { type: Boolean, required: false },
35
+ themeData: { type: String, required: false },
36
+ themeId: { type: String, required: false }
17
37
  },
18
38
  setup(props, { attrs, expose }) {
19
39
  const canvas = ref(void 0);
20
- const { backgroundColor, loop, mode, segment, speed, useFrameInterpolation } = toRefs(props);
40
+ const {
41
+ autoResizeCanvas,
42
+ backgroundColor,
43
+ loop,
44
+ marker,
45
+ mode,
46
+ playOnHover,
47
+ segment,
48
+ speed,
49
+ useFrameInterpolation
50
+ } = toRefs(props);
21
51
  let dotLottie = null;
22
52
  let intersectionObserver = null;
23
53
  let resizeObserver = null;
@@ -29,6 +59,14 @@ var DotLottieVue = defineComponent({
29
59
  }
30
60
  }
31
61
  );
62
+ watch(
63
+ () => marker?.value,
64
+ (newVal) => {
65
+ if (dotLottie && typeof newVal !== "undefined") {
66
+ dotLottie.setMarker(newVal);
67
+ }
68
+ }
69
+ );
32
70
  watch(
33
71
  () => loop?.value,
34
72
  (newVal) => {
@@ -69,6 +107,56 @@ var DotLottieVue = defineComponent({
69
107
  }
70
108
  }
71
109
  );
110
+ watch(
111
+ () => props.animationId,
112
+ (newVal) => {
113
+ if (dotLottie && dotLottie.isLoaded && typeof newVal !== "undefined" && newVal !== dotLottie.activeAnimationId) {
114
+ dotLottie.loadAnimation(newVal);
115
+ }
116
+ }
117
+ );
118
+ watch(
119
+ () => props.themeData,
120
+ (newVal) => {
121
+ if (dotLottie && typeof newVal !== "undefined") {
122
+ dotLottie.loadTheme(newVal);
123
+ }
124
+ }
125
+ );
126
+ watch(
127
+ () => props.themeId,
128
+ (newVal) => {
129
+ if (dotLottie && typeof newVal !== "undefined") {
130
+ dotLottie.loadThemeData(newVal);
131
+ }
132
+ }
133
+ );
134
+ function hoverHandler(event) {
135
+ if (event.type === "mouseenter") {
136
+ dotLottie?.play();
137
+ } else {
138
+ dotLottie?.pause();
139
+ }
140
+ }
141
+ watch(
142
+ () => playOnHover?.value,
143
+ (newVal) => {
144
+ if (dotLottie && typeof newVal !== "undefined" && newVal) {
145
+ canvas.value?.addEventListener("mouseenter", hoverHandler);
146
+ canvas.value?.addEventListener("mouseleave", hoverHandler);
147
+ } else {
148
+ canvas.value?.removeEventListener("mouseenter", hoverHandler);
149
+ canvas.value?.removeEventListener("mouseleave", hoverHandler);
150
+ }
151
+ }
152
+ );
153
+ function updateViewport() {
154
+ if (!canvas.value || !dotLottie)
155
+ return;
156
+ const dpr = props.renderConfig?.devicePixelRatio || window.devicePixelRatio || 1;
157
+ const { height, width, x, y } = getCanvasViewport(canvas.value, dpr);
158
+ dotLottie.setViewport(x, y, width, height);
159
+ }
72
160
  function getIntersectionObserver() {
73
161
  return new IntersectionObserver(
74
162
  (entries) => {
@@ -92,30 +180,36 @@ var DotLottieVue = defineComponent({
92
180
  });
93
181
  });
94
182
  }
95
- function onVisibilityChange() {
96
- if (document.hidden) {
97
- dotLottie?.freeze();
98
- } else {
99
- dotLottie?.unfreeze();
100
- }
101
- }
102
183
  onMounted(() => {
103
184
  if (!canvas.value)
104
185
  return;
186
+ let shouldAutoplay = props.autoplay;
187
+ if (typeof playOnHover?.value !== "undefined" && playOnHover.value) {
188
+ shouldAutoplay = false;
189
+ }
105
190
  dotLottie = new DotLottie({
106
191
  canvas: canvas.value,
107
- ...props
192
+ ...props,
193
+ autoplay: shouldAutoplay
108
194
  });
109
195
  intersectionObserver = getIntersectionObserver();
110
- resizeObserver = getResizeObserver();
111
196
  intersectionObserver.observe(canvas.value);
112
- resizeObserver.observe(canvas.value);
113
- document.addEventListener("visibilitychange", onVisibilityChange);
197
+ if (typeof autoResizeCanvas?.value === "boolean" && autoResizeCanvas.value) {
198
+ resizeObserver = getResizeObserver();
199
+ resizeObserver.observe(canvas.value);
200
+ }
201
+ if (playOnHover?.value) {
202
+ canvas.value.addEventListener("mouseenter", hoverHandler);
203
+ canvas.value.addEventListener("mouseleave", hoverHandler);
204
+ }
205
+ dotLottie.addEventListener("frame", updateViewport);
114
206
  });
115
207
  onBeforeUnmount(() => {
116
208
  resizeObserver?.disconnect();
117
209
  intersectionObserver?.disconnect();
118
- document.removeEventListener("visibilitychange", onVisibilityChange);
210
+ canvas.value?.addEventListener("mouseenter", hoverHandler);
211
+ canvas.value?.addEventListener("mouseleave", hoverHandler);
212
+ dotLottie?.removeEventListener("frame", updateViewport);
119
213
  dotLottie?.destroy();
120
214
  });
121
215
  expose({
package/dist/index.js CHANGED
@@ -2,8 +2,23 @@ import { DotLottie } from '@lottiefiles/dotlottie-web';
2
2
  import { defineComponent, ref, toRefs, watch, onMounted, onBeforeUnmount, h } from 'vue';
3
3
 
4
4
  // src/dotlottie.ts
5
+ var getCanvasViewport = (canvas, dpr) => {
6
+ const rect = canvas.getBoundingClientRect();
7
+ const windowWidth = window.innerWidth;
8
+ const windowHeight = window.innerHeight;
9
+ const visibleLeft = Math.max(0, -rect.left);
10
+ const visibleTop = Math.max(0, -rect.top);
11
+ const visibleRight = Math.min(rect.width, windowWidth - rect.left);
12
+ const visibleBottom = Math.min(rect.height, windowHeight - rect.top);
13
+ const x = visibleLeft * dpr;
14
+ const y = visibleTop * dpr;
15
+ const width = (visibleRight - visibleLeft) * dpr;
16
+ const height = (visibleBottom - visibleTop) * dpr;
17
+ return { x, y, width, height };
18
+ };
5
19
  var DotLottieVue = defineComponent({
6
20
  props: {
21
+ animationId: { type: String, required: false },
7
22
  autoplay: { type: Boolean, required: false },
8
23
  backgroundColor: { type: String, required: false },
9
24
  data: { type: [String, ArrayBuffer], required: false },
@@ -13,11 +28,26 @@ var DotLottieVue = defineComponent({
13
28
  segment: { type: Array, required: false },
14
29
  speed: { type: Number, required: false },
15
30
  src: { type: String, required: false },
16
- useFrameInterpolation: { type: Boolean, required: false }
31
+ useFrameInterpolation: { type: Boolean, required: false },
32
+ marker: { type: String, required: false },
33
+ autoResizeCanvas: { type: Boolean, required: false, default: true },
34
+ playOnHover: { type: Boolean, required: false },
35
+ themeData: { type: String, required: false },
36
+ themeId: { type: String, required: false }
17
37
  },
18
38
  setup(props, { attrs, expose }) {
19
39
  const canvas = ref(void 0);
20
- const { backgroundColor, loop, mode, segment, speed, useFrameInterpolation } = toRefs(props);
40
+ const {
41
+ autoResizeCanvas,
42
+ backgroundColor,
43
+ loop,
44
+ marker,
45
+ mode,
46
+ playOnHover,
47
+ segment,
48
+ speed,
49
+ useFrameInterpolation
50
+ } = toRefs(props);
21
51
  let dotLottie = null;
22
52
  let intersectionObserver = null;
23
53
  let resizeObserver = null;
@@ -29,6 +59,14 @@ var DotLottieVue = defineComponent({
29
59
  }
30
60
  }
31
61
  );
62
+ watch(
63
+ () => marker?.value,
64
+ (newVal) => {
65
+ if (dotLottie && typeof newVal !== "undefined") {
66
+ dotLottie.setMarker(newVal);
67
+ }
68
+ }
69
+ );
32
70
  watch(
33
71
  () => loop?.value,
34
72
  (newVal) => {
@@ -69,6 +107,56 @@ var DotLottieVue = defineComponent({
69
107
  }
70
108
  }
71
109
  );
110
+ watch(
111
+ () => props.animationId,
112
+ (newVal) => {
113
+ if (dotLottie && dotLottie.isLoaded && typeof newVal !== "undefined" && newVal !== dotLottie.activeAnimationId) {
114
+ dotLottie.loadAnimation(newVal);
115
+ }
116
+ }
117
+ );
118
+ watch(
119
+ () => props.themeData,
120
+ (newVal) => {
121
+ if (dotLottie && typeof newVal !== "undefined") {
122
+ dotLottie.loadTheme(newVal);
123
+ }
124
+ }
125
+ );
126
+ watch(
127
+ () => props.themeId,
128
+ (newVal) => {
129
+ if (dotLottie && typeof newVal !== "undefined") {
130
+ dotLottie.loadThemeData(newVal);
131
+ }
132
+ }
133
+ );
134
+ function hoverHandler(event) {
135
+ if (event.type === "mouseenter") {
136
+ dotLottie?.play();
137
+ } else {
138
+ dotLottie?.pause();
139
+ }
140
+ }
141
+ watch(
142
+ () => playOnHover?.value,
143
+ (newVal) => {
144
+ if (dotLottie && typeof newVal !== "undefined" && newVal) {
145
+ canvas.value?.addEventListener("mouseenter", hoverHandler);
146
+ canvas.value?.addEventListener("mouseleave", hoverHandler);
147
+ } else {
148
+ canvas.value?.removeEventListener("mouseenter", hoverHandler);
149
+ canvas.value?.removeEventListener("mouseleave", hoverHandler);
150
+ }
151
+ }
152
+ );
153
+ function updateViewport() {
154
+ if (!canvas.value || !dotLottie)
155
+ return;
156
+ const dpr = props.renderConfig?.devicePixelRatio || window.devicePixelRatio || 1;
157
+ const { height, width, x, y } = getCanvasViewport(canvas.value, dpr);
158
+ dotLottie.setViewport(x, y, width, height);
159
+ }
72
160
  function getIntersectionObserver() {
73
161
  return new IntersectionObserver(
74
162
  (entries) => {
@@ -92,30 +180,36 @@ var DotLottieVue = defineComponent({
92
180
  });
93
181
  });
94
182
  }
95
- function onVisibilityChange() {
96
- if (document.hidden) {
97
- dotLottie?.freeze();
98
- } else {
99
- dotLottie?.unfreeze();
100
- }
101
- }
102
183
  onMounted(() => {
103
184
  if (!canvas.value)
104
185
  return;
186
+ let shouldAutoplay = props.autoplay;
187
+ if (typeof playOnHover?.value !== "undefined" && playOnHover.value) {
188
+ shouldAutoplay = false;
189
+ }
105
190
  dotLottie = new DotLottie({
106
191
  canvas: canvas.value,
107
- ...props
192
+ ...props,
193
+ autoplay: shouldAutoplay
108
194
  });
109
195
  intersectionObserver = getIntersectionObserver();
110
- resizeObserver = getResizeObserver();
111
196
  intersectionObserver.observe(canvas.value);
112
- resizeObserver.observe(canvas.value);
113
- document.addEventListener("visibilitychange", onVisibilityChange);
197
+ if (typeof autoResizeCanvas?.value === "boolean" && autoResizeCanvas.value) {
198
+ resizeObserver = getResizeObserver();
199
+ resizeObserver.observe(canvas.value);
200
+ }
201
+ if (playOnHover?.value) {
202
+ canvas.value.addEventListener("mouseenter", hoverHandler);
203
+ canvas.value.addEventListener("mouseleave", hoverHandler);
204
+ }
205
+ dotLottie.addEventListener("frame", updateViewport);
114
206
  });
115
207
  onBeforeUnmount(() => {
116
208
  resizeObserver?.disconnect();
117
209
  intersectionObserver?.disconnect();
118
- document.removeEventListener("visibilitychange", onVisibilityChange);
210
+ canvas.value?.addEventListener("mouseenter", hoverHandler);
211
+ canvas.value?.addEventListener("mouseleave", hoverHandler);
212
+ dotLottie?.removeEventListener("frame", updateViewport);
119
213
  dotLottie?.destroy();
120
214
  });
121
215
  expose({
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lottiefiles/dotlottie-vue",
3
- "version": "0.3.6",
3
+ "version": "0.4.0",
4
4
  "type": "module",
5
5
  "description": "Vue wrapper around the dotlottie-web library",
6
6
  "repository": {
@@ -35,7 +35,7 @@
35
35
  "vue": "^3.3.4"
36
36
  },
37
37
  "dependencies": {
38
- "@lottiefiles/dotlottie-web": "0.25.0"
38
+ "@lottiefiles/dotlottie-web": "0.26.0"
39
39
  },
40
40
  "devDependencies": {
41
41
  "@vue/runtime-dom": "^3.4.6",