fix: 1

src/hook/useGraphic.ts

@@ -1,37 +1,45 @@
-import {computed, reactive, Ref, ref, watch, watchEffect} from "vue";
+import {
+  computed,
+  nextTick,
+  reactive,
+  Ref,
+  ref,
+  watch,
+  watchEffect,
+} from "vue";
 import { structureDraw } from "@/graphic";
-import VectorType from '@/graphic/enum/VectorType'
-import UIType from '@/graphic/enum/UIEvents'
-import type {RoadPhoto} from '@/store/roadPhotos'
-import type {AccidentPhoto} from '@/store/accidentPhotos'
-import {api} from "@/store/sync";
+import VectorType from "@/graphic/enum/VectorType";
+import UIType from "@/graphic/enum/UIEvents";
+import type { RoadPhoto } from "@/store/roadPhotos";
+import type { AccidentPhoto } from "@/store/accidentPhotos";
+import { api } from "@/store/sync";
 
-export type UITypeT = typeof UIType
-export type VectorTypeT = typeof VectorType
+export type UITypeT = typeof UIType;
+export type VectorTypeT = typeof VectorType;
 export type FocusVector = {
-  type: VectorTypeT[keyof VectorTypeT],
-  category?: VectorTypeT[keyof VectorTypeT],
-  vectorId: string
-}
+  type: VectorTypeT[keyof VectorTypeT];
+  category?: VectorTypeT[keyof VectorTypeT];
+  vectorId: string;
+};
 
 const newsletter = ref<{
-  selectUI?: UITypeT[keyof UITypeT]
-  focusVector?: FocusVector
+  selectUI?: UITypeT[keyof UITypeT];
+  focusVector?: FocusVector;
 }>({ selectUI: null, focusVector: null });
 
-const changeIndex = ref(0)
+const changeIndex = ref(0);
 export const changeStore = () => {
-  changeIndex.value++
-}
+  changeIndex.value++;
+};
 export const useChange = (fn: () => void) => {
-  let old
+  let old;
   return watchEffect(() => {
     if (old !== changeIndex.value) {
       old = changeIndex.value;
-      fn()
+      fn();
     }
-  })
-}
+  });
+};
 
 export const graphicState = ref({
   canRevoke: false,
@@ -41,28 +49,32 @@ export const graphicState = ref({
   canVerticalMeasure: false,
   canAllLocationMode: false,
   existsBaseLine: false,
-  continuedMode: false
-})
+  continuedMode: false,
+});
 
-export const setCanvas = async (canvas: HTMLCanvasElement, data: Ref<AccidentPhoto | RoadPhoto>) => {
+export const setCanvas = async (
+  canvas: HTMLCanvasElement,
+  data: Ref<AccidentPhoto | RoadPhoto>
+) => {
   await import("../graphic/index.js").then((model) => {
     drawRef.value = model.structureDraw(canvas, newsletter, graphicState);
     watch(
       () => data.value?.id,
       async (id, oldId) => {
         if (data.value) {
-          oldId && drawRef.value.load.clear()
-          console.log("load", data.value)
+          oldId && drawRef.value.load.clear();
+          console.log("load", data.value);
+
           drawRef.value.load.load(data.value.data, {
             ...data.value.sceneData,
-            backImage: data.value.photoUrl
-          })
+            backImage: data.value.photoUrl,
+          });
         } else {
-          drawRef.value.load.clear()
+          drawRef.value.load.clear();
         }
       },
-      { immediate: true }
-    )
+      { immediate: true, flush: "post" }
+    );
   });
 };
 
@@ -71,9 +83,9 @@ export const drawRef = ref<ReturnType<typeof structureDraw>>();
 export const uiType = reactive({
   current: computed(() => newsletter.value.selectUI),
   change: (type: UITypeT[keyof UITypeT]) => {
-    drawRef.value.uiControl.selectUI = type
-  }
-})
-export const currentVector = computed(() => newsletter.value.focusVector)
+    drawRef.value.uiControl.selectUI = type;
+  },
+});
+export const currentVector = computed(() => newsletter.value.focusVector);
 
-export { VectorType, UIType }
+export { VectorType, UIType };