fix: 1

src/sdk/association.ts

@@ -1,227 +1,264 @@
-import { sdk } from './sdk'
-import { models, isEdit, sysBus, getModelShowVariable, ModelType, backupModels } from '@/store'
-import { toRaw, watchEffect, ref, watch, createApp, nextTick } from 'vue'
-import { viewModeStack, custom, getResource, showRightCtrlPanoStack } from '@/env'
-import { 
-  diffArrayChange, 
-  shallowWatchArray, 
+import { sdk } from "./sdk";
+import {
+  models,
+  isEdit,
+  sysBus,
+  getModelShowVariable,
+  ModelType,
+  backupModels,
+} from "@/store";
+import { toRaw, watchEffect, ref, watch, createApp, nextTick } from "vue";
+import {
+  viewModeStack,
+  custom,
+  getResource,
+  showRightCtrlPanoStack,
+} from "@/env";
+import {
+  diffArrayChange,
+  shallowWatchArray,
   arrayChildEffectScope,
   togetherCallback,
   showLoad,
   hideLoad,
-  round
-} from '@/utils'
-import SDKApp from './index.vue'
-import Components from 'bill/index'
-import { Model } from '@/store'
+  round,
+} from "@/utils";
+import SDKApp from "./index.vue";
+import Components from "bill/index";
+import { Model } from "@/store";
 
+import type { SDK, SceneModel, SceneGuidePath, ModelAttrRange } from ".";
 
-import type { SDK, SceneModel, SceneGuidePath, ModelAttrRange } from '.'
-
-export const modelRange: ModelAttrRange  = {
+export const modelRange: ModelAttrRange = {
   opacityRange: { min: 0, max: 100, step: 0.1 },
   bottomRange: { min: -30, max: 70, step: 0.1 },
-  scaleRange: { min: 0, max: 200, step: 0.1 }
-}
+  scaleRange: { min: 0, max: 200, step: 0.1 },
+};
 
-const sceneModelMap = new WeakMap<Model, SceneModel>()
-export const getSceneModel = (model: Model | null) => model && sceneModelMap.get(toRaw(model))
+const sceneModelMap = new WeakMap<Model, SceneModel>();
+export const getSceneModel = (model: Model | null) =>
+  model && sceneModelMap.get(toRaw(model));
 
 const associationModels = (sdk: SDK) => {
-  let selfUpdate = false
-  const getModels = () => models.value
+  let selfUpdate = false;
+  const getModels = () => models.value;
   shallowWatchArray(getModels, (models, oldModels) => {
-    const { added, deleted } = diffArrayChange(models, oldModels)
+    const { added, deleted } = diffArrayChange(models, oldModels);
     for (const item of added) {
       if (getSceneModel(item)) {
         continue;
       }
 
-      const itemRaw = toRaw(item)
-      console.log('加载模型', {
+      const itemRaw = toRaw(item);
+      console.log("加载模型", {
         ...itemRaw,
         ...modelRange,
-        url: item.url.map(getResource)
-      })
+        url: item.url.map(getResource),
+      });
       const sceneModel = sdk.addModel({
         ...itemRaw,
         ...modelRange,
         // type: ModelType.SWMX,
-        url: item.url.map(getResource)
-      })
-      sceneModelMap.set(itemRaw, sceneModel)
+        url: item.url.map(getResource),
+      });
+      sceneModelMap.set(itemRaw, sceneModel);
 
-      let delyLoad = true
-      sceneModel.bus.on('loadDone', () => {
+      let delyLoad = true;
+      sceneModel.bus.on("loadDone", () => {
         setTimeout(() => {
-          delyLoad = false  
-        }, 1000)
-      })
-      sceneModel.bus.on('transformChanged', transform => {
+          delyLoad = false;
+        }, 1000);
+      });
+      sceneModel.bus.on("transformChanged", (transform) => {
         setTimeout(() => {
-          selfUpdate = true
+          selfUpdate = true;
           const data = transform;
           if (transform.rotation) {
             data.rotation = {
               x: round(transform.rotation.x, 5),
               y: round(transform.rotation.y, 5),
-              z: round(transform.rotation.z, 5)
-            }
+              z: round(transform.rotation.z, 5),
+            };
           }
           if (transform.position) {
             data.position = {
               x: transform.position.x,
               y: round(transform.position.y, 5),
-              z: round(transform.position.z, 5)
-            }
+              z: round(transform.position.z, 5),
+            };
           }
           if (transform.bottom) {
-            data.bottom = round(transform.bottom,5)
+            data.bottom = round(transform.bottom, 5);
           }
           if (transform.scale) {
-            data.scale = round(transform.scale,5)
+            data.scale = round(transform.scale, 5);
           }
 
-          Object.assign(delyLoad ? toRaw(item) : item, data)
-          nextTick(() => selfUpdate = false)
-        })
-      })
-      sceneModel.bus.on('changeSelect', select => {
+          Object.assign(delyLoad ? toRaw(item) : item, data);
+          nextTick(() => (selfUpdate = false));
+        });
+      });
+      sceneModel.bus.on("changeSelect", (select) => {
         if (custom.currentModel === item && !select) {
-          custom.currentModel = null
+          custom.currentModel = null;
         } else if (custom.currentModel !== item && select) {
-          custom.currentModel = item
+          custom.currentModel = item;
         }
-      })
-      showLoad()
-      sceneModel.bus.on('loadDone', () => {
-        item.loaded = true
-        backupModels()
-        hideLoad()
-      })
-      sceneModel.bus.on('loadError', () => {
-        item.error = true
-        item.show = false
-        custom.showModelsMap.delete(item)
-        hideLoad()
-      })
-      sceneModel.bus.on('loadProgress', progress => item.progress = progress)
+      });
+      showLoad();
+      sceneModel.bus.on("loadDone", () => {
+        item.loaded = true;
+        backupModels();
+        hideLoad();
+      });
+      sceneModel.bus.on("loadError", () => {
+        item.error = true;
+        item.show = false;
+        custom.showModelsMap.delete(item);
+        hideLoad();
+      });
+      sceneModel.bus.on(
+        "loadProgress",
+        (progress) => (item.progress = progress)
+      );
     }
     for (const item of deleted) {
-      getSceneModel(item)?.destroy()
+      getSceneModel(item)?.destroy();
     }
-  })
-  
-  arrayChildEffectScope(getModels, item => {
+  });
+
+  arrayChildEffectScope(getModels, (item) => {
     const stopLoadedWatch = watch(
       () => item.loaded,
       (loaded) => {
-        console.log("join", item)
+        console.log("join", item);
         if (loaded) {
-          const modelShow = getModelShowVariable(item)
-          watchEffect(() => {
-            selfUpdate || console.log('change bottom')
-            item.bottom
-            selfUpdate || getSceneModel(item)?.changeBottom(item.bottom)
-          }, {flush: 'sync'})
-          watchEffect(() => {
-            item.rotation
-            selfUpdate || getSceneModel(item)?.changeRotation(item.rotation)
-          }, {flush: 'sync'})
-          watchEffect(() => {
-            item.position
-            selfUpdate || console.log('change position')
-            selfUpdate || getSceneModel(item)?.changePosition(item.position)
-          }, {flush: 'sync'})
-          watchEffect(() => {
-            item.opacity
-            selfUpdate || getSceneModel(item)?.changeOpacity(item.opacity)
-          }, {flush: 'sync'})
+          const modelShow = getModelShowVariable(item);
+          watchEffect(
+            () => {
+              selfUpdate || console.log("change bottom");
+              item.bottom;
+              selfUpdate || getSceneModel(item)?.changeBottom(item.bottom);
+            },
+            { flush: "sync" }
+          );
+          watchEffect(
+            () => {
+              item.rotation;
+              selfUpdate || getSceneModel(item)?.changeRotation(item.rotation);
+            },
+            { flush: "sync" }
+          );
+          watchEffect(
+            () => {
+              item.position;
+              selfUpdate || console.log("change position");
+              selfUpdate || getSceneModel(item)?.changePosition(item.position);
+            },
+            { flush: "sync" }
+          );
+          watchEffect(
+            () => {
+              item.opacity;
+              selfUpdate || getSceneModel(item)?.changeOpacity(item.opacity);
+            },
+            { flush: "sync" }
+          );
+          watchEffect(
+            () => {
+              item.scale;
+              selfUpdate || getSceneModel(item)?.changeScale(item.scale);
+            },
+            { flush: "sync" }
+          );
           watchEffect(() => {
-            item.scale
-            selfUpdate || getSceneModel(item)?.changeScale(item.scale)
-          }, {flush: 'sync'})
-          watchEffect(() => {
-            getSceneModel(item)?.changeShow(modelShow.value)
-          })
-          stopLoadedWatch()
+            getSceneModel(item)?.changeShow(modelShow.value);
+          });
+          stopLoadedWatch();
         }
       }
-    )
-  })
-}
-
+    );
+  });
+};
 
 const fullView = async (fn: () => void) => {
   const pop = togetherCallback([
-    viewModeStack.push(ref('full')),
-    showRightCtrlPanoStack.push(ref(false))
-  ]) 
-  await document.documentElement.requestFullscreen()
-  const driving = () => document.fullscreenElement || fn()
+    viewModeStack.push(ref("full")),
+    showRightCtrlPanoStack.push(ref(false)),
+  ]);
+  // await document.documentElement.requestFullscreen()
+  const driving = () => document.fullscreenElement || fn();
+  const keyHandler = (ev: KeyboardEvent) => {
+    if (ev.key === "Escape") {
+      driving();
+    }
+  };
 
-  document.addEventListener('fullscreenchange', driving)
-  document.addEventListener('fullscreenerror', fn)
+  document.documentElement.addEventListener("keydown", keyHandler);
+  document.addEventListener("fullscreenchange", driving);
+  document.addEventListener("fullscreenerror", fn);
 
   return () => {
-    pop()
-    document.fullscreenElement && document.exitFullscreen()
-    document.removeEventListener('fullscreenchange', driving)
-    document.removeEventListener('fullscreenerror', fn)
-    
-  }
-}
+    pop();
+    document.fullscreenElement && document.exitFullscreen();
+    document.documentElement.removeEventListener("keydown", keyHandler);
+    document.removeEventListener("fullscreenchange", driving);
+    document.removeEventListener("fullscreenerror", fn);
+  };
+};
 
-export const isScenePlayIng = ref(false)
-export const playSceneGuide = async (paths: SceneGuidePath[], changeIndexCallback?: (index: number) => void) => {
+export const isScenePlayIng = ref(false);
+export const playSceneGuide = async (
+  paths: SceneGuidePath[],
+  changeIndexCallback?: (index: number) => void
+) => {
   if (isScenePlayIng.value) {
-    throw new Error('导览正在播放')
+    throw new Error("导览正在播放");
   }
-  isScenePlayIng.value = true
+  isScenePlayIng.value = true;
 
-  const sceneGuide = sdk.enterSceneGuide(paths)
+  const sceneGuide = sdk.enterSceneGuide(paths);
 
-  changeIndexCallback && sceneGuide.bus.on('changePoint', changeIndexCallback)
+  changeIndexCallback && sceneGuide.bus.on("changePoint", changeIndexCallback);
 
-  const quitHandler = () => (isScenePlayIng.value = false)
-  const clearHandler = isEdit.value ? null : await fullView(quitHandler)
+  const quitHandler = () => (isScenePlayIng.value = false);
+  const clearHandler = isEdit.value ? null : await fullView(quitHandler);
   if (!clearHandler) {
-    sysBus.on('leave', quitHandler, { last: true })
-    sysBus.on('save', quitHandler, { last: true })
+    sysBus.on("leave", quitHandler, { last: true });
+    sysBus.on("save", quitHandler, { last: true });
   }
 
-  sceneGuide.play()
+  sceneGuide.play();
   const reces = [
-    new Promise(resolve => sceneGuide.bus.on('playComplete', resolve)),
-    new Promise<void>(resolve => {
+    new Promise((resolve) => sceneGuide.bus.on("playComplete", resolve)),
+    new Promise<void>((resolve) => {
       const stop = watch(isScenePlayIng, () => {
         if (!isScenePlayIng.value) {
-          resolve()
-          sceneGuide.pause()
-          stop()
+          resolve();
+          sceneGuide.pause();
+          stop();
         }
-      })
+      });
     }),
-  ]
+  ];
 
-  await Promise.race(reces)
-  isScenePlayIng.value = false
+  await Promise.race(reces);
+  isScenePlayIng.value = false;
   if (clearHandler) {
-    clearHandler()
+    clearHandler();
   } else {
-    sysBus.off('leave', quitHandler)
-    sysBus.off('save', quitHandler)
+    sysBus.off("leave", quitHandler);
+    sysBus.off("save", quitHandler);
   }
-  sceneGuide.clear()
-  sceneGuide.bus.off('changePoint')
-}
-
-export const pauseSceneGuide = () => isScenePlayIng.value = false
+  sceneGuide.clear();
+  sceneGuide.bus.off("changePoint");
+};
 
+export const pauseSceneGuide = () => (isScenePlayIng.value = false);
 
 export const setupAssociation = (mountEl: HTMLDivElement) => {
-  associationModels(sdk)
-  const sdkApp = createApp(SDKApp)
-  sdkApp.mount(mountEl)
-  sdkApp.use(Components)
-}
+  associationModels(sdk);
+  const sdkApp = createApp(SDKApp);
+  sdkApp.mount(mountEl);
+  sdkApp.use(Components);
+};