fix: 1

src/components/drawing/hook.ts

@@ -20,6 +20,7 @@ import { Transform } from "konva/lib/Util";
 import { lineLen } from "./math";
 import { Viewer } from "./viewer";
 import { KonvaEventObject } from "konva/lib/Node";
+import { asyncTimeout } from "@/utils";
 
 export const rendererName = "renderer";
 export const rendererMap = new WeakMap<any, { unmounteds: (() => void)[] }>();
@@ -158,7 +159,7 @@ export const listener = <
 export const useGlobalResize = installGlobalVar(() => {
   const stage = useStage();
   const size = ref<Size>();
-  const setSize = () => {
+  const setSize = async () => {
     if (fix.value) return;
     const container = stage.value?.getStage().container();
     if (container) {
@@ -166,6 +167,8 @@ export const useGlobalResize = installGlobalVar(() => {
     }
 
     const dom = stage.value!.getNode().container().parentElement!;
+    await asyncTimeout(16)
+    
     size.value = {
       width: dom.offsetWidth,
       height: dom.offsetHeight,

src/components/drawing/renderer.vue

@@ -1,5 +1,10 @@
 <template>
-  <div class="draw-layout" id="draw-renderer" ref="layout" :style="{ cursor: cursorStyle }">
+  <div
+    class="draw-layout"
+    id="draw-renderer"
+    ref="layout"
+    :style="{ cursor: cursorStyle }"
+  >
     <template v-if="layout">
       <v-stage ref="stage" :config="size">
         <v-layer :config="viewerConfig" id="formal">
@@ -79,6 +84,10 @@ const config = computed(
       ...size.value,
     }
 );
+const { updateSize } = useGlobalResize();
+defineExpose({
+  updateSize,
+});
 </script>
 
 <style scoped lang="scss">

src/components/tagging/sign-new.vue

@@ -219,7 +219,7 @@ const iconClickHandler = () => {
 };
 
 onUnmounted(() => {
-  tag.destory();
+  tag.destroy();
 });
 
 defineExpose(tag);

src/sdk/association/animation.ts

@@ -48,10 +48,10 @@ export const addAM = (data: AnimationModel): Promise<AnimationModel3D> => {
       if (!exixts) {
         const des = amMap[key];
         if (!des) return;
-        Object.values(des.frames || {}).forEach((frame) => frame.destory());
-        Object.values(des.actions || {}).forEach((frame) => frame.destory());
-        Object.values(des.paths || {}).forEach((frame) => frame.destory());
-        des.am?.destory();
+        Object.values(des.frames || {}).forEach((frame) => frame.destroy());
+        Object.values(des.actions || {}).forEach((frame) => frame.destroy());
+        Object.values(des.paths || {}).forEach((frame) => frame.destroy());
+        des.am?.destroy();
         delete amMap[key];
       } else if (!amMap[key]) {
         amMap[key] = {
@@ -122,7 +122,7 @@ export const addFrame = (
       if (exists && !map.frames[data.id]) {
         map.frames[data.id] = map.am.addFrame(data);
       } else if (!exists && map.frames[data.id]) {
-        map.frames[data.id].destory();
+        map.frames[data.id].destroy();
         delete map.frames[data.id];
       }
     }
@@ -176,7 +176,7 @@ export const addAction = (
       if (exists && !map.actions[data.id]) {
         map.actions[data.id] = map.am.addAction(data);
       } else if (!exists && map.actions[data.id]) {
-        map.actions[data.id].destory();
+        map.actions[data.id].destroy();
         delete map.actions[data.id];
       }
     }
@@ -238,7 +238,7 @@ export const addPath = (
       if (exists && !map.paths[data.id]) {
         map.paths[data.id] = map.am.addPath({ ...data, path });
       } else if (!exists && map.paths[data.id]) {
-        map.paths[data.id].destory();
+        map.paths[data.id].destroy();
         delete map.paths[data.id];
       }
     }

src/sdk/association/index.ts

@@ -12,6 +12,7 @@ import { associationSetting } from "./setting";
 import { associationMessaures } from "./measure";
 import { custom } from "@/env";
 import { associationPaths } from "./path";
+import { associationAnimation } from "./animation";
 
 export const getSupperPanoModel = () => {
   const supperModel = ref<FuseModel | null>(null);
@@ -120,6 +121,7 @@ export const setupAssociation = (mountEl: HTMLDivElement, sdk: SDK) => {
       associationMessaures(sdk);
       associationSetting(sdk, mountEl);
       associationPaths(sdk, mountEl)
+      // associationAnimation(sdk, mountEl)
       nextTick(() => stopWatch());
     }
   });

src/sdk/sdk.ts

@@ -356,7 +356,7 @@ export type Tagging3D = {
   // 距离相机位置
   getCameraDisSquared: () => number;
   // 标注销毁
-  destory: () => void;
+  destroy: () => void;
 };
 
 // 动画组对象
@@ -378,7 +378,7 @@ export type AnimationGroup = {
 
 export type AnimationModel3D = {
   // 销毁动画模型
-  destory: () => void;
+  destroy: () => void;
   // 更改动画模型可见性
   changeShow: (show: boolean) => void;
   // 更改动画可见范围  不传为全局可见
@@ -431,7 +431,7 @@ export type AnimationModel3D = {
 
 export type AnimationModelFrame3D = {
   // 销毁动画模型帧
-  destory: () => void;
+  destroy: () => void;
   // 修改帧播放时间 单位为秒
   changeTime: (s: number) => void;
   setMat: (mat: any) => void
@@ -439,7 +439,7 @@ export type AnimationModelFrame3D = {
 
 export type AnimationModelAction3D = {
   // 销毁动画模型动作
-  destory: () => void;
+  destroy: () => void;
   // 修改动作播放时间 单位为秒
   changeTime: (s: number) => void;
   // 修改动作幅度
@@ -452,7 +452,7 @@ export type AnimationModelAction3D = {
 
 export type AnimationModelPath3D = {
   // 销毁动画模型路径
-  destory: () => void;
+  destroy: () => void;
   // 修改路径 传入参数为你之前返回的路径对象
   changePath: (path: Path | undefined) => void;
   // 修改播放是否要反向

src/views/animation/bottom.vue

@@ -37,33 +37,37 @@
       </div>
     </div>
     <div class="oper-bar" :class="{ disabled: play }">
-      <Renderer v-model:scale="scale">
+      <Renderer v-model:scale="scale" ref="renderer">
         <v-group>
-          <template v-for="prop in tlProps">
-            <TimeLine
-              v-if="am[prop.attr].length"
-              :items="am[prop.attr]"
-              :height="prop.height"
-              :background="prop.background"
-              :opacity="prop.opacity"
-              :top="prop.top"
-              :itemsRenderer="prop.component"
-              @update="({ ndx, time }) => (am[prop.attr][ndx].time = time)"
-              @add="
-                (item) => {
-                  am[prop.attr].push(item);
-                  $emit('update:active', {
-                    key: prop.attr,
-                    ndx: am[prop.attr].length - 1,
-                  });
-                }
-              "
-              @del="(ndx) => am[prop.attr].splice(ndx, 1)"
-              :active="prop.attr === active?.key ? am[prop.attr][active.ndx] : undefined"
-              @update:active="(active: any) => $emit('update:active', active && { key: prop.attr, ndx: am[prop.attr].indexOf(active) })"
-            />
+          <template v-if="am">
+            <template v-for="prop in tlProps">
+              <TimeLine
+                v-if="am[prop.attr].length"
+                :items="am[prop.attr]"
+                :height="prop.height"
+                :background="prop.background"
+                :opacity="prop.opacity"
+                :top="prop.top"
+                :itemsRenderer="prop.component"
+                @update="({ ndx, time }) => (am![prop.attr][ndx].time = time)"
+                @add="
+                  (item) => {
+                    am![prop.attr].push(item);
+                    $emit('update:active', {
+                      key: prop.attr,
+                      ndx: am![prop.attr].length - 1,
+                    });
+                  }
+                "
+                @del="(ndx) => am![prop.attr].splice(ndx, 1)"
+                :active="
+                  prop.attr === active?.key ? am[prop.attr][active.ndx] : undefined
+                "
+                @update:active="(active: any) => $emit('update:active', active && { key: prop.attr, ndx: am![prop.attr].indexOf(active) })"
+              />
+            </template>
+            <empty v-if="!count" />
           </template>
-          <empty v-if="!count" />
         </v-group>
         <v-group>
           <Time @update-current-time="(time) => $emit('update:currentTime', time)">
@@ -81,7 +85,7 @@
 
 <script lang="ts" setup>
 import { Slider } from "ant-design-vue";
-import { computed, ref, watch } from "vue";
+import { computed, ref, watch, watchEffect } from "vue";
 import { AnimationModel } from "@/store/animation";
 import Renderer from "@/components/drawing/renderer.vue";
 import Time from "@/components/drawing-time/time.vue";
@@ -93,7 +97,7 @@ import empty from "@/components/drawing-time-line/empty.vue";
 import { Active } from "./type";
 
 const props = defineProps<{
-  am: AnimationModel;
+  am?: AnimationModel;
   active?: Active;
   currentTime: number;
   follow: boolean;
@@ -142,7 +146,7 @@ const tlProps = [
 ] as const;
 
 const count = computed(() =>
-  Object.values(tlProps).reduce((t, c) => t + props.am[c.attr].length, 0)
+  Object.values(tlProps).reduce((t, c) => (props.am ? t + props.am[c.attr].length : 0), 0)
 );
 
 const play = ref(false);
@@ -161,6 +165,12 @@ watch(play, (_a, _b, onCleanup) => {
   animation();
   onCleanup(() => (isDes = true));
 });
+
+const renderer = ref<any>();
+watch(
+  () => props.am,
+  () => renderer.value.updateSize()
+);
 </script>
 
 <style scoped lang="scss">

src/views/animation/index.vue

@@ -21,7 +21,6 @@
       @apply-global="k => ams.forEach((am: any) => (am[k] = focusAM![k]))"
     />
     <Bottom
-      v-if="focusAM"
       :am="focusAM"
       v-model:follow="follow"
       v-model:current-time="currentTime"
@@ -51,7 +50,7 @@ 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 } from "@/sdk/association/animation";
+import { amMap, getAMKey, currentTime } from "@/sdk/association/animation";
 
 enterEdit(() => router.back());
 initialAnimationModels();
@@ -60,7 +59,7 @@ useViewStack(autoSaveAnimationModel);
 
 const focusAM = ref<AnimationModel>();
 const activeAttrib = ref<Active>();
-const currentTime = ref(0);
+
 const follow = ref(false);
 const frameAction = ref<string>();
 
@@ -155,7 +154,7 @@ const deleteAm = (am: AnimationModel) => {
 
 <style lang="scss" scoped>
 .animation-layout {
-  --bottom-height: 0px;
+  --bottom-height: 70px;
 
   &.focusAM {
     --bottom-height: 225px;