@lottiefiles/dotlottie-vue
Version:
Vue wrapper around the dotlottie-web library
209 lines (208 loc) • 6.33 kB
JavaScript
import { DotLottie } from "@lottiefiles/dotlottie-web";
import { computed, defineComponent, h, onBeforeUnmount, onMounted, ref, toRefs, watch } from "vue";
//#region src/dotlottie.ts
const DotLottieVue = defineComponent({
props: {
animationId: {
type: String,
required: false
},
autoplay: {
type: Boolean,
required: false
},
backgroundColor: {
type: String,
required: false
},
data: {
type: [String, ArrayBuffer],
required: false
},
loop: {
type: Boolean,
required: false
},
mode: {
type: String,
required: false
},
renderConfig: {
type: Object,
required: false
},
segment: {
type: Array,
required: false
},
speed: {
type: Number,
required: false
},
src: {
type: String,
required: false
},
useFrameInterpolation: {
type: Boolean,
required: false
},
marker: {
type: String,
required: false
},
playOnHover: {
type: Boolean,
required: false
},
themeData: {
type: String,
required: false
},
themeId: {
type: String,
required: false
},
layout: {
type: Object,
required: false
},
stateMachineId: {
type: String,
required: false
},
stateMachineConfig: {
type: Object,
required: false
}
},
setup(props, { attrs, expose }) {
const canvas = ref(void 0);
const { animationId, backgroundColor, data, layout, loop, marker, mode, playOnHover, renderConfig, segment, speed, src, stateMachineConfig, stateMachineId, themeId, useFrameInterpolation } = toRefs(props);
let dotLottie = null;
const shouldAutoplay = computed(() => {
let _shouldAutoplay = props.autoplay;
if (typeof playOnHover?.value !== "undefined" && playOnHover.value) _shouldAutoplay = false;
return _shouldAutoplay;
});
/**
* Wrap dotLottie-web's load function
*/
const load = (config = {}) => {
if (dotLottie === null) return;
dotLottie.load({
animationId: animationId?.value,
backgroundColor: backgroundColor?.value,
data: data?.value,
layout: layout?.value,
loop: loop?.value,
marker: marker?.value,
mode: mode?.value,
autoplay: shouldAutoplay.value,
renderConfig: renderConfig?.value,
segment: segment?.value,
speed: speed?.value,
src: src?.value,
stateMachineConfig: stateMachineConfig?.value,
stateMachineId: stateMachineId?.value,
themeId: themeId?.value,
useFrameInterpolation: useFrameInterpolation?.value,
...config
});
};
watch(() => backgroundColor?.value, (newVal) => {
if (dotLottie && typeof newVal !== "undefined") dotLottie.setBackgroundColor(newVal);
});
watch(() => marker?.value, (newVal) => {
if (dotLottie && typeof newVal !== "undefined") dotLottie.setMarker(newVal);
});
watch(() => loop?.value, (newVal) => {
if (dotLottie && typeof newVal !== "undefined") dotLottie.setLoop(newVal);
});
watch(() => mode?.value, (newVal) => {
if (dotLottie && typeof newVal !== "undefined") dotLottie.setMode(newVal);
});
watch(() => segment?.value, (newVal) => {
if (!dotLottie) return;
const startFrame = newVal?.[0];
const endFrame = newVal?.[1];
if (typeof startFrame === "number" && typeof endFrame === "number") dotLottie.setSegment(startFrame, endFrame);
});
watch(() => speed?.value, (newVal) => {
if (dotLottie && typeof newVal !== "undefined") dotLottie.setSpeed(newVal);
});
watch(() => useFrameInterpolation?.value, (newVal) => {
if (dotLottie && typeof newVal !== "undefined") dotLottie.setUseFrameInterpolation(newVal);
});
watch(() => animationId?.value, (newVal) => {
if (dotLottie?.isLoaded && typeof newVal !== "undefined" && newVal !== dotLottie.activeAnimationId) dotLottie.loadAnimation(newVal);
});
watch(() => props.themeData, (newVal) => {
if (dotLottie && typeof newVal !== "undefined") dotLottie.setThemeData(newVal);
});
watch(() => themeId?.value, (newVal) => {
if (dotLottie && typeof newVal !== "undefined") dotLottie.setTheme(newVal);
});
function hoverHandler(event) {
if (event.type === "mouseenter") dotLottie?.play();
else dotLottie?.pause();
}
watch(() => playOnHover?.value, (newVal) => {
if (dotLottie && typeof newVal !== "undefined" && newVal) {
canvas.value?.addEventListener("mouseenter", hoverHandler);
canvas.value?.addEventListener("mouseleave", hoverHandler);
} else {
canvas.value?.removeEventListener("mouseenter", hoverHandler);
canvas.value?.removeEventListener("mouseleave", hoverHandler);
}
});
watch(() => layout?.value, (newVal) => {
if (dotLottie && typeof newVal !== "undefined") dotLottie.setLayout(newVal);
}, { deep: true });
watch(() => renderConfig?.value, (newVal) => {
if (dotLottie && typeof newVal !== "undefined") dotLottie.setRenderConfig(newVal);
}, { deep: true });
watch(() => data?.value, (newVal) => {
if (dotLottie && (typeof newVal === "object" || typeof newVal === "string")) load({ data: newVal });
}, { deep: true });
watch(() => src?.value, (newVal) => {
if (dotLottie && typeof newVal !== "undefined") load({ src: newVal });
});
watch(() => stateMachineId?.value, (newVal) => {
if (dotLottie?.isLoaded) if (typeof newVal === "string" && newVal) {
if (dotLottie.stateMachineLoad(newVal)) dotLottie.stateMachineStart();
} else dotLottie.stateMachineStop();
});
watch(() => stateMachineConfig?.value, (newVal) => {
if (dotLottie) dotLottie.stateMachineSetConfig(newVal ?? null);
}, { deep: true });
onMounted(() => {
if (!canvas.value) return;
dotLottie = new DotLottie({
canvas: canvas.value,
...props,
autoplay: shouldAutoplay.value
});
if (playOnHover?.value) {
canvas.value.addEventListener("mouseenter", hoverHandler);
canvas.value.addEventListener("mouseleave", hoverHandler);
}
});
onBeforeUnmount(() => {
canvas.value?.removeEventListener("mouseenter", hoverHandler);
canvas.value?.removeEventListener("mouseleave", hoverHandler);
dotLottie?.destroy();
});
expose({ getDotLottieInstance: () => dotLottie });
return () => h("div", { ...attrs }, h("canvas", {
style: "height: 100%; width: 100%",
ref: canvas
}));
}
});
const setWasmUrl = (url) => {
DotLottie.setWasmUrl(url);
};
//#endregion
export { DotLottieVue, setWasmUrl };
//# sourceMappingURL=dotlottie.js.map