fix: 1

src/components/drawing-time/current.vue

@@ -69,7 +69,6 @@ watch(drag, (drag) => {
 const invConfig = useViewerInvertTransformConfig();
 const currentX = computed(() => props.currentTime * misPixel);
 const currentMat = computed(() => {
-  console.log(currentX.value);
   return new Transform()
     .translate(currentX.value, 0)
     .scale(invConfig.value.scaleX, 1)

src/sdk/association/animation.ts

@@ -74,10 +74,13 @@ export const addAM = (data: AnimationModel): Promise<AnimationModel3D> => {
           paths: {},
           subtitles: {},
         };
-        const am = animationGroup.addAnimationModel({...data, quaAtPath: data.mat?.quaAtPath});
+        const am = animationGroup.addAnimationModel({
+          ...data,
+          quaAtPath: data.mat?.quaAtPath,
+        });
         am.bus.on("loadDone", () => {
           amMap[key].am = am;
-          am.putInFrontOfCam()
+          am.putInFrontOfCam();
           console.log("0.0", am);
         });
       }
@@ -321,8 +324,8 @@ export const addSubtitle = (data: AnimationModelSubtitle) => {
   const size = ref({ width: 0, height: 0 });
   const show = ref(false);
   const pixel = ref<Pos>();
-  const modelShow = ref(true)
-  const textShow = ref(true)
+  const modelShow = ref(true);
+  const textShow = ref(true);
   const stopLoad = watch(
     () => {
       const exists = am.subtitles.some(({ id }) => id === data.id);
@@ -332,12 +335,12 @@ export const addSubtitle = (data: AnimationModelSubtitle) => {
     ([map, exists], _, onCleanup) => {
       if (!map?.am) return;
       if (exists && !map.subtitles[data.id]) {
-        const rawChangeShow = map?.am.changeShow
+        const rawChangeShow = map?.am.changeShow;
         map.am.changeShow = (f: boolean) => {
-          modelShow.value = f
-          return rawChangeShow(f)
-        }
-        onCleanup(() => map.am!.changeShow = rawChangeShow)
+          modelShow.value = f;
+          return rawChangeShow(f);
+        };
+        onCleanup(() => (map.am!.changeShow = rawChangeShow));
 
         const mountEl = document.querySelector("#app")!;
         const layer = document.createElement("div");
@@ -346,7 +349,7 @@ export const addSubtitle = (data: AnimationModelSubtitle) => {
         const cleanups = [
           watchEffect(() => {
             layer.innerHTML = data.content;
-            textShow.value = !!layer.textContent?.trim()?.length
+            textShow.value = !!layer.textContent?.trim()?.length;
             size.value = {
               width: layer.offsetWidth,
               height: layer.offsetHeight,
@@ -364,18 +367,30 @@ export const addSubtitle = (data: AnimationModelSubtitle) => {
             )},${round(rgb.g * 255, 2)},${round(rgb.b * 255, 2)},0.5)`;
           }),
           watchEffect(() => {
-            console.log(pixel.value, show.value, modelShow.value, textShow.value)
+            // console.log(pixel.value, show.value, modelShow.value, textShow.value)
             layer.style.visibility =
-              pixel.value && show.value && modelShow.value && textShow.value ? "visible" : "hidden";
+              pixel.value && show.value && modelShow.value && textShow.value
+                ? "visible"
+                : "hidden";
           }),
           watchEffect(() => {
             if (pixel.value) {
-              layer.style.transform = `translate(${round(pixel.value.x, 0)}px, calc(${round(pixel.value.y, 0)}px - 50%))`;
+              layer.style.transform = `translate(${round(
+                pixel.value.x,
+                0
+              )}px, calc(${round(pixel.value.y, 0)}px - 50%))`;
             }
           }),
-          () => mountEl.removeChild(layer),
+          () => {
+            console.error("rm dom", data.id);
+            layer.parentNode?.removeChild(layer);
+          },
         ];
-        map.subtitles[data.id] = mergeFuns(cleanups);
+        // map.subtitles[data.id] = mergeFuns(cleanups);
+        onCleanup(() => {
+          mergeFuns(cleanups)();
+          delete map.subtitles[data.id];
+        });
       } else if (!exists && map.subtitles[data.id]) {
         map.subtitles[data.id]();
         delete map.subtitles[data.id];
@@ -422,15 +437,26 @@ export const addSubtitle = (data: AnimationModelSubtitle) => {
           show.value = true;
 
           onCleanup(
-            watch(
-              play,
-              (play, _a, onCleanup) => {
-                if (!play && _sdk) {
-                  _sdk.sceneBus.on("cameraChange", update);
-                  onCleanup(() => _sdk.sceneBus.off("cameraChange", update));
-                }
-              },
-              { immediate: true }
+            mergeFuns(
+              watch(
+                play,
+                (play, _a, onCleanup) => {
+                  if (!play && _sdk) {
+                    _sdk.sceneBus.on("cameraChange", update);
+
+                    onCleanup(() => _sdk.sceneBus.off("cameraChange", update));
+                  }
+                },
+                { immediate: true }
+              ),
+              watch(
+                () => amMap[getAMKey(am)]?.am,
+                (am, _, onCleanup) => {
+                  am && am.bus.on("transformChanged", update);
+                  onCleanup(() => am && am.bus.off("transformChanged", update))
+                },
+                { immediate: true }
+              )
             )
           );
         } else {
@@ -457,7 +483,7 @@ export const addSubtitle = (data: AnimationModelSubtitle) => {
 export const endTime = computed(() => {
   const amsEndTime = ams.value.map((am) => {
     const endPoints = [
-      ...am.frames.map(item => ({...item, duration: 0})),
+      ...am.frames.map((item) => ({ ...item, duration: 0 })),
       ...am.actions,
       ...am.subtitles,
       ...am.paths,
@@ -490,9 +516,12 @@ export const currentTime = ref(0);
 export const associationAnimation = (sdk: SDK, el: HTMLDivElement) => {
   animationGroup = sdk.createAnimationGroup();
 
-  watchEffect(() => {
-    animationGroup.setCurrentTime(currentTime.value);
-  }, {flush: 'sync'});
+  watchEffect(
+    () => {
+      animationGroup.setCurrentTime(currentTime.value);
+    },
+    { flush: "sync" }
+  );
 
   animationGroup.bus.on("currentTime", (time) => {
     currentTime.value = time;
@@ -557,10 +586,12 @@ export const associationAnimation = (sdk: SDK, el: HTMLDivElement) => {
         if (!am3d || !am3d.am) continue;
 
         const getMat = () => {
-          return (am.mat && 'position' in am.mat) ? am.mat : am3d.am!.getModelPose()
-        }
+          return am.mat && "position" in am.mat
+            ? am.mat
+            : am3d.am!.getModelPose();
+        };
 
-        am3d.am.setDefaultPose && am3d.am.setDefaultPose(getMat())
+        am3d.am.setDefaultPose && am3d.am.setDefaultPose(getMat());
 
         const mat = am.mat || am3d.am.getModelPose();
         am3d.am.changePosition(mat.position!);
@@ -570,7 +601,7 @@ export const associationAnimation = (sdk: SDK, el: HTMLDivElement) => {
         cleanupMap[getAMKey(am)] = mergeFuns(
           watchEffect(() => {
             if (am.mat && am3d.am) {
-              am3d.am.setDefaultPose && am3d.am.setDefaultPose(getMat())
+              am3d.am.setDefaultPose && am3d.am.setDefaultPose(getMat());
             }
             console.log("set-default-pose", am.mat);
           }),
@@ -592,7 +623,7 @@ export const associationAnimation = (sdk: SDK, el: HTMLDivElement) => {
     () =>
       [Object.values(amMap).map((item) => item.am), custom.showAMs] as const,
     ([ams, show]) => {
-      console.error(ams, 'show', show)
+      console.error(ams, "show", show);
       ams.forEach((am) => {
         am?.changeShow(show);
       });
@@ -600,5 +631,4 @@ export const associationAnimation = (sdk: SDK, el: HTMLDivElement) => {
   );
 };
 
-
-showAMsStack.push(play)
+showAMsStack.push(play);

src/views/login.vue

@@ -85,7 +85,7 @@ const login = (username: string, password: string) => {
 };
 
 if (import.meta.env.DEV) {
-  // login("super-admin", "Aa123456");
+  login("super-admin", "Aa123456");
 }
 </script>