fix: player

packages/core/src/player.ts

@@ -2,6 +2,8 @@ import type { App, Ref } from "vue";
 import { inject, ref } from "vue";
 import { AnimationManager } from "./animation";
 
+const studioListenerAdded = { value: false };
+
 export function createPlayer(options: {
   studio?: boolean;
   fps?: number;
@@ -24,8 +26,11 @@ export function usePlayer() {
   const fps = inject("fps") as number;
   const playing = ref(false);
 
-  if (studio) {
-    document.addEventListener("click", () => {
+  if (studio && !studioListenerAdded.value) {
+    studioListenerAdded.value = true;
+    document.addEventListener("click", (e) => {
+      console.log(elapsed.value);
+      e.stopImmediatePropagation();
       elapsed.value += 1 / fps;
     });
   }

test/src/App.vue

@@ -17,7 +17,7 @@ const rect = useWidget<RectIns>();
 const line = useWidget<LineIns>();
 const arrow = useWidget<ArrowIns>();
 
-const { play } = usePlayer();
+const { play, elapsed } = usePlayer();
 
 onMounted(() => {
   rect.move(100, 100);
@@ -49,6 +49,10 @@ onMounted(() => {
   line.grow();
   arrow.grow();
   play();
+
+  document.addEventListener("click", () => {
+    console.log(elapsed.value);
+  });
 });
 </script>
 

test/src/main.ts

@@ -3,4 +3,10 @@ import "./style.css";
 import { createPlayer } from "@vue-motion/core";
 import App from "./App.vue";
 
-createApp(App).use(createPlayer({})).mount("#app");
+createApp(App)
+  .use(
+    createPlayer({
+      studio: true,
+    }),
+  )
+  .mount("#app");