|
@@ -18,7 +18,7 @@ import { computed, nextTick, reactive, ref, watch, watchEffect } from "vue";
|
|
import { ams } from "@/store/animation";
|
|
import { ams } from "@/store/animation";
|
|
import { mergeFuns, uuid } from "@/components/drawing/hook";
|
|
import { mergeFuns, uuid } from "@/components/drawing/hook";
|
|
import { getPathNode } from "./path";
|
|
import { getPathNode } from "./path";
|
|
-import { diffArrayChange, mount } from "@/utils";
|
|
|
|
|
|
+import { debounce, diffArrayChange, mount } from "@/utils";
|
|
import { Pos } from "@/utils/event";
|
|
import { Pos } from "@/utils/event";
|
|
import Subtitle from "@/components/subtitle/index.vue";
|
|
import Subtitle from "@/components/subtitle/index.vue";
|
|
import { Size } from "@/components/drawing/dec";
|
|
import { Size } from "@/components/drawing/dec";
|
|
@@ -120,7 +120,7 @@ export const addFrame = (
|
|
const stopLoad = watch(
|
|
const stopLoad = watch(
|
|
() => {
|
|
() => {
|
|
const exists = am.frames.some(({ id }) => id === data.id);
|
|
const exists = am.frames.some(({ id }) => id === data.id);
|
|
- amMap[key]?.am
|
|
|
|
|
|
+ amMap[key]?.am;
|
|
return [amMap[key], exists] as const;
|
|
return [amMap[key], exists] as const;
|
|
},
|
|
},
|
|
([map, exists]) => {
|
|
([map, exists]) => {
|
|
@@ -176,7 +176,7 @@ export const addAction = (
|
|
const stopLoad = watch(
|
|
const stopLoad = watch(
|
|
() => {
|
|
() => {
|
|
const exists = am.actions.some(({ id }) => id === data.id);
|
|
const exists = am.actions.some(({ id }) => id === data.id);
|
|
- amMap[key]?.am
|
|
|
|
|
|
+ amMap[key]?.am;
|
|
return [amMap[key], exists] as const;
|
|
return [amMap[key], exists] as const;
|
|
},
|
|
},
|
|
([map, exists]) => {
|
|
([map, exists]) => {
|
|
@@ -238,13 +238,13 @@ export const addPath = (
|
|
data.pathId ? getPathNode(data.pathId) : undefined
|
|
data.pathId ? getPathNode(data.pathId) : undefined
|
|
);
|
|
);
|
|
const pathData = computed(() =>
|
|
const pathData = computed(() =>
|
|
- paths.value.find(item => item.id === data.pathId)
|
|
|
|
|
|
+ paths.value.find((item) => item.id === data.pathId)
|
|
);
|
|
);
|
|
const key = getAMKey(am);
|
|
const key = getAMKey(am);
|
|
const stopLoad = watch(
|
|
const stopLoad = watch(
|
|
() => {
|
|
() => {
|
|
const exists = am.paths.some(({ id }) => id === data.id);
|
|
const exists = am.paths.some(({ id }) => id === data.id);
|
|
- amMap[key]?.am
|
|
|
|
|
|
+ amMap[key]?.am;
|
|
return [amMap[key], exists, path.value] as const;
|
|
return [amMap[key], exists, path.value] as const;
|
|
},
|
|
},
|
|
([map, exists, path]) => {
|
|
([map, exists, path]) => {
|
|
@@ -262,9 +262,11 @@ export const addPath = (
|
|
const stopAttrib = mergeFuns(
|
|
const stopAttrib = mergeFuns(
|
|
watchEffect(() => amMap[key]?.paths[data.id]?.changeTime(data.time)),
|
|
watchEffect(() => amMap[key]?.paths[data.id]?.changeTime(data.time)),
|
|
watchEffect(() => amMap[key]?.paths[data.id]?.changeReverse(data.reverse)),
|
|
watchEffect(() => amMap[key]?.paths[data.id]?.changeReverse(data.reverse)),
|
|
- watchEffect(() => amMap[key]?.paths[data.id]?.changeDuration(data.duration)),
|
|
|
|
|
|
+ watchEffect(() =>
|
|
|
|
+ amMap[key]?.paths[data.id]?.changeDuration(data.duration)
|
|
|
|
+ ),
|
|
watchEffect(() => {
|
|
watchEffect(() => {
|
|
- path.value &&amMap[key]?.paths[data.id]?.changePath(path.value)
|
|
|
|
|
|
+ path.value && amMap[key]?.paths[data.id]?.changePath(path.value);
|
|
})
|
|
})
|
|
);
|
|
);
|
|
|
|
|
|
@@ -304,7 +306,7 @@ export const addSubtitle = (data: AnimationModelSubtitle) => {
|
|
const stopLoad = watch(
|
|
const stopLoad = watch(
|
|
() => {
|
|
() => {
|
|
const exists = am.subtitles.some(({ id }) => id === data.id);
|
|
const exists = am.subtitles.some(({ id }) => id === data.id);
|
|
- amMap[key]?.am
|
|
|
|
|
|
+ amMap[key]?.am;
|
|
return [amMap[key], exists] as const;
|
|
return [amMap[key], exists] as const;
|
|
},
|
|
},
|
|
([map, exists]) => {
|
|
([map, exists]) => {
|
|
@@ -342,10 +344,17 @@ export const addSubtitle = (data: AnimationModelSubtitle) => {
|
|
currentTime.value >= data.time &&
|
|
currentTime.value >= data.time &&
|
|
currentTime.value <= data.time + data.duration
|
|
currentTime.value <= data.time + data.duration
|
|
) {
|
|
) {
|
|
- const update = () =>
|
|
|
|
- (pixel.value = amMap[am.id]?.am?.getCurrentSubtitlePixel(
|
|
|
|
- size.value
|
|
|
|
- ));
|
|
|
|
|
|
+ let isRun = false
|
|
|
|
+ const update = () => {
|
|
|
|
+ if (isRun) return;
|
|
|
|
+ isRun = true
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ pixel.value = amMap[am.id]?.am?.getCurrentSubtitlePixel(
|
|
|
|
+ size.value
|
|
|
|
+ );
|
|
|
|
+ isRun = false
|
|
|
|
+ }, 160);
|
|
|
|
+ };
|
|
update();
|
|
update();
|
|
show.value = true;
|
|
show.value = true;
|
|
|
|
|
|
@@ -415,11 +424,11 @@ export const associationAnimation = (sdk: SDK, el: HTMLDivElement) => {
|
|
watch(
|
|
watch(
|
|
() => [...ams.value],
|
|
() => [...ams.value],
|
|
(newv, oldv = []) => {
|
|
(newv, oldv = []) => {
|
|
- console.log('diffam', newv, oldv)
|
|
|
|
|
|
+ console.log("diffam", newv, oldv);
|
|
const { added } = diffArrayChange(newv, oldv);
|
|
const { added } = diffArrayChange(newv, oldv);
|
|
added.forEach(addAM);
|
|
added.forEach(addAM);
|
|
},
|
|
},
|
|
- {immediate: true}
|
|
|
|
|
|
+ { immediate: true }
|
|
);
|
|
);
|
|
|
|
|
|
watch(
|
|
watch(
|
|
@@ -428,7 +437,7 @@ export const associationAnimation = (sdk: SDK, el: HTMLDivElement) => {
|
|
const { added } = diffArrayChange(newv, oldv);
|
|
const { added } = diffArrayChange(newv, oldv);
|
|
added.forEach(addFrame);
|
|
added.forEach(addFrame);
|
|
},
|
|
},
|
|
- {immediate: true}
|
|
|
|
|
|
+ { immediate: true }
|
|
);
|
|
);
|
|
|
|
|
|
watch(
|
|
watch(
|
|
@@ -437,7 +446,7 @@ export const associationAnimation = (sdk: SDK, el: HTMLDivElement) => {
|
|
const { added } = diffArrayChange(newv, oldv);
|
|
const { added } = diffArrayChange(newv, oldv);
|
|
added.forEach(addAction);
|
|
added.forEach(addAction);
|
|
},
|
|
},
|
|
- {immediate: true}
|
|
|
|
|
|
+ { immediate: true }
|
|
);
|
|
);
|
|
|
|
|
|
watch(
|
|
watch(
|
|
@@ -446,7 +455,7 @@ export const associationAnimation = (sdk: SDK, el: HTMLDivElement) => {
|
|
const { added } = diffArrayChange(newv, oldv);
|
|
const { added } = diffArrayChange(newv, oldv);
|
|
added.forEach(addPath);
|
|
added.forEach(addPath);
|
|
},
|
|
},
|
|
- {immediate: true}
|
|
|
|
|
|
+ { immediate: true }
|
|
);
|
|
);
|
|
watch(
|
|
watch(
|
|
() => ams.value.flatMap((am) => am.subtitles),
|
|
() => ams.value.flatMap((am) => am.subtitles),
|
|
@@ -454,19 +463,21 @@ export const associationAnimation = (sdk: SDK, el: HTMLDivElement) => {
|
|
const { added } = diffArrayChange(newv, oldv);
|
|
const { added } = diffArrayChange(newv, oldv);
|
|
added.forEach(addSubtitle);
|
|
added.forEach(addSubtitle);
|
|
},
|
|
},
|
|
- {immediate: true}
|
|
|
|
|
|
+ { immediate: true }
|
|
);
|
|
);
|
|
|
|
|
|
- let cleanupMap: Record<string, () => void> = {}
|
|
|
|
|
|
+ let cleanupMap: Record<string, () => void> = {};
|
|
watch(
|
|
watch(
|
|
() => {
|
|
() => {
|
|
- const gAms = ams.value.filter(am => !am.frames.length && amMap[am.id]?.am)
|
|
|
|
- return gAms
|
|
|
|
|
|
+ const gAms = ams.value.filter(
|
|
|
|
+ (am) => !am.frames.length && amMap[am.id]?.am
|
|
|
|
+ );
|
|
|
|
+ return gAms;
|
|
},
|
|
},
|
|
(am3ds, oldAm3ds = []) => {
|
|
(am3ds, oldAm3ds = []) => {
|
|
- const { added, deleted } = diffArrayChange(am3ds, oldAm3ds)
|
|
|
|
|
|
+ const { added, deleted } = diffArrayChange(am3ds, oldAm3ds);
|
|
for (const am of added) {
|
|
for (const am of added) {
|
|
- const am3d = amMap[am.id]
|
|
|
|
|
|
+ const am3d = amMap[am.id];
|
|
if (!am3d || !am3d.am) continue;
|
|
if (!am3d || !am3d.am) continue;
|
|
const frame = am3d.am!.addFrame({
|
|
const frame = am3d.am!.addFrame({
|
|
id: uuid(),
|
|
id: uuid(),
|
|
@@ -474,21 +485,21 @@ export const associationAnimation = (sdk: SDK, el: HTMLDivElement) => {
|
|
name: "global-frame",
|
|
name: "global-frame",
|
|
time: 0,
|
|
time: 0,
|
|
});
|
|
});
|
|
- am3d.globalFrame = frame
|
|
|
|
|
|
+ am3d.globalFrame = frame;
|
|
cleanupMap[am.id] = mergeFuns(
|
|
cleanupMap[am.id] = mergeFuns(
|
|
watchEffect(() => {
|
|
watchEffect(() => {
|
|
- am.mat && frame.setMat(am.mat)
|
|
|
|
- console.log('set-global-frame', am.mat)
|
|
|
|
|
|
+ am.mat && frame.setMat(am.mat);
|
|
|
|
+ console.log("set-global-frame", am.mat);
|
|
}),
|
|
}),
|
|
() => {
|
|
() => {
|
|
frame.destroy();
|
|
frame.destroy();
|
|
am3d.globalFrame = undefined;
|
|
am3d.globalFrame = undefined;
|
|
- delete cleanupMap[am.id]
|
|
|
|
|
|
+ delete cleanupMap[am.id];
|
|
}
|
|
}
|
|
- )
|
|
|
|
|
|
+ );
|
|
}
|
|
}
|
|
for (const am of deleted) {
|
|
for (const am of deleted) {
|
|
- cleanupMap[am.id] && cleanupMap[am.id]()
|
|
|
|
|
|
+ cleanupMap[am.id] && cleanupMap[am.id]();
|
|
}
|
|
}
|
|
},
|
|
},
|
|
{ flush: "post", immediate: true }
|
|
{ flush: "post", immediate: true }
|