fuse-code/src/views/animation/index.vue

<template>
  <div :class="{ focusAM: focusAM }" class="animation-layout">
    <Left
      :focus="focusAM"
      @update:focus="updateFocus"
      class="animation-left"
      @change-select="changeSelect"
      @delete="deleteAm"
    />
    <Right
      v-if="focusAM"
      :am="focusAM"
      :frameAction="frameAction"
      @change-frame-action="(f) => (frameAction = f.action)"
      class="animation-right"
      v-model:activeAttrib="activeAttrib"
      @add-frame="add('frames')"
      @add-path="(preset) => add('paths', { reverse: false, ...preset })"
      @add-subtitle="add('subtitles', { content: '', background: '#fff' })"
      @add-action="(preset) => add('actions', preset)"
      @apply-global="k => ams.forEach((am: any) => (am[k] = focusAM![k]))"
    />
    <Bottom
      :am="focusAM"
      v-model:follow="follow"
      v-model:current-time="currentTime"
      class="animation-toolbar"
      v-model:active="activeAttrib"
    />
  </div>
</template>

<script lang="ts" setup>
import Left from "./left.vue";
import Right from "./right/index.vue";
import Bottom from "./bottom.vue";
import router from "@/router";
import { enterEdit } from "@/store";
import { useViewStack } from "@/hook";
import {
  ams,
  AnimationModel,
  autoSaveAnimationModel,
  initAnimationActions,
  initialAnimationModels,
} from "@/store/animation";
import { computed, nextTick, reactive, ref, watch, watchEffect } from "vue";
import { Active } from "./type";
import { getAddTLItemAttr } from "@/components/drawing-time-line/check";
import { Message } from "bill/expose-common";
import { uuid } from "@/components/drawing/hook";
import { title } from "./type";
import { amMap, getAMKey, currentTime } from "@/sdk/association/animation";

enterEdit(() => router.back());
initialAnimationModels();
initAnimationActions();
useViewStack(autoSaveAnimationModel);

const focusAM = ref<AnimationModel>();
const activeAttrib = ref<Active>();

const follow = ref(false);
const frameAction = ref<string>();

const amM = computed(() => focusAM.value && amMap[getAMKey(focusAM.value)]);

watchEffect((onCleanup) => {
  if (!amM.value || activeAttrib.value?.key !== "frames") return;
  const frame = focusAM.value!.frames[activeAttrib.value.ndx];
  const am3d = amM.value.am;
  if (!am3d) return;

  am3d.bus.on("transformChanged", (mat) => {
    frame.mat = JSON.parse(JSON.stringify(mat));
  });

  switch (frameAction.value) {
    case "translate":
      am3d.enterMoveMode();
      break;
    case "rotate":
      am3d.enterRotateMode();
      break;
    case "scale":
      am3d.enterScaleMode();
      break;
  }
  onCleanup(() => am3d.leaveTransform());
});

const updateFocus = (am?: AnimationModel) => {
  activeAttrib.value = undefined;
  focusAM.value = am;
};

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;
    }
  };

  follow.value = true;
  currentTime.value = cur.time!;
  nextTick(() => (follow.value = false));

  onCleanup(
    watch(
      () => [currentTime.value, cur.time, cur.time + (cur.duration || 0)],
      updateFocus
    )
  );
});

const add = <T extends Active["key"]>(
  key: T,
  preset: Partial<AnimationModel[T][0]> = {}
) => {
  const attr = getAddTLItemAttr(focusAM.value![key], currentTime.value, 10, 1);
  if (!attr) {
    Message.error("当前时间已存在其他" + title[key]);
  } else {
    const item = reactive({
      id: uuid(),
      name: title[key],
      ...attr,
      ...preset,
    } as any);
    focusAM.value![key].push(item);
    activeAttrib.value = {
      ndx: focusAM.value![key].length - 1,
      key,
    };
  }
};

const changeSelect = ({ select, unSelect }: Record<string, AnimationModel[]>) => {
  select.forEach((item) => amMap[getAMKey(item)].am?.changeShow(true));
  unSelect.forEach((item) => amMap[getAMKey(item)].am?.changeShow(false));
};

const deleteAm = (am: AnimationModel) => {
  if (am === focusAM.value) {
    activeAttrib.value = undefined;
    focusAM.value = undefined;
  }
  ams.value.splice(ams.value.indexOf(am), 1);
};
</script>

<style lang="scss" scoped>
.animation-layout {
  --bottom-height: 70px;

  &.focusAM {
    --bottom-height: 225px;
  }
}

.animation-left {
  height: calc(100vh - var(--bottom-height));
  position: absolute;
  width: var(--left-pano-width);
}

.animation-right {
  height: calc(100vh - var(--bottom-height));
  padding-top: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.animation-toolbar {
  height: var(--bottom-height);
  width: 100vw;
  display: block;
}
</style>