|
@@ -320,15 +320,23 @@ 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 stopLoad = watch(
|
|
|
() => {
|
|
|
const exists = am.subtitles.some(({ id }) => id === data.id);
|
|
|
amMap[key]?.am;
|
|
|
return [amMap[key], exists] as const;
|
|
|
},
|
|
|
- ([map, exists]) => {
|
|
|
+ ([map, exists], _, onCleanup) => {
|
|
|
if (!map?.am) return;
|
|
|
if (exists && !map.subtitles[data.id]) {
|
|
|
+ const rawChangeShow = map?.am.changeShow
|
|
|
+ map.am.changeShow = (f: boolean) => {
|
|
|
+ modelShow.value = f
|
|
|
+ return rawChangeShow(f)
|
|
|
+ }
|
|
|
+ onCleanup(() => map.am!.changeShow = rawChangeShow)
|
|
|
+
|
|
|
const mountEl = document.querySelector("#app")!;
|
|
|
const layer = document.createElement("div");
|
|
|
layer.className = "subtitle";
|
|
@@ -354,11 +362,11 @@ export const addSubtitle = (data: AnimationModelSubtitle) => {
|
|
|
}),
|
|
|
watchEffect(() => {
|
|
|
layer.style.visibility =
|
|
|
- pixel.value && show.value ? "visible" : "hidden";
|
|
|
+ pixel.value && show.value && modelShow.value ? "visible" : "hidden";
|
|
|
}),
|
|
|
watchEffect(() => {
|
|
|
if (pixel.value) {
|
|
|
- layer.style.transform = `translate(${pixel.value.x}px, calc(${pixel.value.y}px - 50%))`;
|
|
|
+ layer.style.transform = `translate(${round(pixel.value.x, 0)}px, calc(${round(pixel.value.y, 0)}px - 50%))`;
|
|
|
}
|
|
|
}),
|
|
|
() => mountEl.removeChild(layer),
|