fix: 1

src/components/actions-merge/index.vue

@@ -2,9 +2,9 @@
   <div class="actions">
     <span
       v-for="(action, i) in items"
-      :class="{ active: equal(selected, action), disabled: action.disabled }"
+      :class="{ active: equal(current as any, action), disabled: action.disabled }"
       :key="action.key || i"
-      @click="clickHandler(action)"
+      @click="emit('update:current', current === action ? null : action)"
     >
       <ui-icon :type="action.icon" class="icon" :tip="action.text" />
     </span>
@@ -31,42 +31,24 @@ export type ActionsProps = {
 const props = defineProps<ActionsProps>();
 const emit = defineEmits<{ (e: "update:current", data: ActionsItem | null): void }>();
 const equal = (a: ActionsItem | null, b: ActionsItem | null) => toRaw(a) === toRaw(b);
-const selected = ref<ActionsItem | null>(null);
-const clickHandler = (select: ActionsItem) => {
-  selected.value = equal(selected.value, select) ? null : select;
-  emit("update:current", selected.value);
-  if (props.single) {
-    nextTick(() => selected.value && clickHandler(selected.value));
-  }
-};
 
 watch(
-  selected,
-  (_n, _o, onCleanup) => {
-    console.error("click", selected.value?.action);
-    if (selected.value?.action) {
-      const cleanup = selected.value.action();
-      cleanup && onCleanup(cleanup);
+  () => props.current,
+  (current) => {
+    if (!current) return;
+    if (props.single) {
+      emit("update:current", null);
     }
-  },
-  { flush: "sync" }
+  }
 );
 watch(
   () => props.current,
-  () => {
-    if (!props.current && selected.value) {
-      clickHandler(selected.value);
-    }
+  (current, p, onCleanup) => {
+    if (!current) return;
+    const fn = current.action && current.action();
+    fn && onCleanup(fn);
   }
 );
-
-if (props.current) {
-  clickHandler(props.current);
-}
-
-onBeforeUnmount(() => {
-  selected.value = null;
-});
 </script>
 
 <style lang="scss" scoped>

src/components/drawing-time-line/check.ts

@@ -81,3 +81,17 @@ export const getAddTLItemTime = (items: TLItem[], refNdx = 0, dur = 0.5) => {
 
   return time;
 };
+
+
+export const getAddTLItemTimeByTime = (items: TLItem[], curTime: number, dur: number): ReturnType<typeof getAddTLItemAttr> => {
+  let tl
+  if (tl = getAddTLItemAttr(items, curTime, dur, 1)) {
+    return tl
+  }
+
+  items = [...items].sort((a, b) => a.time - b.time);
+  let refNdx = items.findIndex(item => item.time >= curTime)
+  refNdx = ~refNdx ? refNdx : items.length - 1
+  console.log(refNdx, curTime, items[refNdx].time + (items[refNdx].duration || 0.01))
+  return getAddTLItemTimeByTime(items, items[refNdx].time + (items[refNdx].duration || 0.01) + 0.001, dur)
+};

src/components/drawing/hook.ts

@@ -554,7 +554,6 @@ export const useDrag = (
   const invMat = useViewerInvertTransform();
 
   const init = (shape: EntityShape, dom: HTMLDivElement, ndx: number) => {
-    console.log(shape)
     shape.on("pointerenter.drag", () => {
       if (downing) return;
       const pop = cursor.push("pointer");

src/sdk/association/animation.ts

@@ -476,7 +476,7 @@ export const associationAnimation = (sdk: SDK, el: HTMLDivElement) => {
 
   watchEffect(() => {
     animationGroup.setCurrentTime(currentTime.value);
-  });
+  }, {flush: 'sync'});
 
   animationGroup.bus.on("currentTime", (time) => {
     currentTime.value = time;

src/views/animation/index.vue

@@ -51,7 +51,10 @@ import { useViewStack } from "@/hook";
 import { ams, AnimationModel, autoSaveAnimationModel } from "@/store/animation";
 import { computed, nextTick, onUnmounted, reactive, ref, watch, watchEffect } from "vue";
 import { Active } from "./type";
-import { getAddTLItemAttr } from "@/components/drawing-time-line/check";
+import {
+  getAddTLItemAttr,
+  getAddTLItemTimeByTime,
+} from "@/components/drawing-time-line/check";
 import { Message } from "bill/expose-common";
 import { mergeFuns, uuid } from "@/components/drawing/hook";
 import { title } from "./type";
@@ -69,6 +72,7 @@ import {
 } from "@/env";
 import { clickListener } from "@/utils/event";
 import { useRMenus } from "@/components/right-menu";
+import { asyncTimeout } from "@/utils";
 
 enterEdit(() => router.back());
 useViewStack(autoSaveAnimationModel);
@@ -199,39 +203,42 @@ watch(
   { immediate: true }
 );
 
-watch(activeAttrib, (_a, _b, onCleanup) => {
-  if (!activeAttrib.value) return;
-  const cur = focusAM.value![activeAttrib.value.key][activeAttrib.value.ndx];
-  const updateFocus = () => {
-    const rang = [cur.time, cur.time + (cur.duration || 0)];
-
-    if (currentTime.value < rang[0] || currentTime.value > rang[1]) {
-      activeAttrib.value = undefined;
-    }
-  };
+watch(
+  activeAttrib,
+  async (_a, _b, onCleanup) => {
+    console.error("activeAttrib", activeAttrib.value);
+    if (!activeAttrib.value) return;
+    const cur = focusAM.value![activeAttrib.value.key][activeAttrib.value.ndx];
+    const updateFocus = () => {
+      const rang = [cur.time, cur.time + (cur.duration || 0)];
 
-  follow.value = true;
-  currentTime.value = cur.time!;
-  nextTick(() => (follow.value = false));
+      if (currentTime.value < rang[0] || currentTime.value > rang[1]) {
+        activeAttrib.value = undefined;
+      }
+    };
 
-  onCleanup(
-    watch(
-      () => [currentTime.value, cur.time, cur.time + (cur.duration || 0)],
-      updateFocus,
-      { flush: "sync" }
-    )
-  );
-});
+    follow.value = true;
+    currentTime.value = cur.time!;
+    nextTick(() => (follow.value = false));
+    onCleanup(
+      watch(
+        () => [currentTime.value, cur.time, cur.time + (cur.duration || 0)],
+        updateFocus,
+        { flush: "sync" }
+      )
+    );
+  },
+  { flush: "sync" }
+);
 
 const add = <T extends Active["key"]>(
   key: T,
   preset: Partial<AnimationModel[T][0]> = {}
 ) => {
-  const attr = getAddTLItemAttr(
+  const attr = getAddTLItemTimeByTime(
     focusAM.value![key],
     currentTime.value,
-    preset.duration || 10,
-    1
+    preset.duration || 10
   );
   if (!attr) {
     Message.error("同一时间内请勿重复添加");
@@ -239,8 +246,8 @@ const add = <T extends Active["key"]>(
     const item = reactive({
       id: uuid(),
       name: title[key],
-      ...attr,
       ...preset,
+      ...attr,
     } as any);
     if (key === "frames") {
       asyncOper(
@@ -249,6 +256,7 @@ const add = <T extends Active["key"]>(
       );
     }
     focusAM.value![key].push(item);
+    // currentTime.value = item.time;
     activeAttrib.value = {
       ndx: focusAM.value![key].length - 1,
       key,

src/views/merge/index.vue

@@ -35,6 +35,7 @@
         </ui-input>
       </ui-group-option>
       <ui-group-option label="不透明度">
+        {{ currentItem?.text }}---
         <ui-input
           type="range"
           v-model="custom.currentModel.opacity"
@@ -53,7 +54,7 @@
 import { RoutesName, router } from "@/router";
 import { RightPano } from "@/layout";
 import { autoSaveFuseModels, defaultFuseModelAttrs, isOld } from "@/store";
-import { togetherCallback } from "@/utils";
+import { asyncTimeout, togetherCallback } from "@/utils";
 import { sdk, getSceneModel, modelRange, getFuseModel } from "@/sdk";
 import { useViewStack, useActive } from "@/hook";
 import {
@@ -104,12 +105,19 @@ watchEffect(() => {
   }
 });
 
-// watch(
-//   () => custom.currentModel,
-//   () => {
-//     currentItem.value = null;
-//   }
-// );
+watch(
+  () => custom.currentModel,
+  () => {
+    let old = currentItem.value;
+    currentItem.value = null;
+    console.error("currentItem", currentItem.value, old);
+    asyncTimeout(16).then(() => {
+      currentItem.value = old;
+      console.log("change", currentItem.value);
+    });
+  },
+  { flush: "post" }
+);
 
 const reset = async () => {
   if (custom.currentModel && (await Dialog.confirm("确定恢复默认？此操作无法撤销"))) {
@@ -156,6 +164,8 @@ useViewStack(() =>
     () => (currentItem.value = null),
   ])
 );
+
+watchEffect(() => console.error(currentItem.value), { flush: "sync" });
 useViewStack(autoSaveFuseModels);
 useViewStack(() => {
   const stopWatch = watchEffect(() => {