store rename

front/src/components/Promo/index.vue

@@ -42,7 +42,7 @@ const controlsState = reactive({
     minAzimuthAngle: (Math.PI / 2) - 0.20,
 })
 
-const raw_data = useRawData()
+const raw_dataStore = useRawData()
 const route = useRoute()
 
 const source = ref(route.params.target)
@@ -65,18 +65,18 @@ const sidebarFunc = () => {
 </script>
 <template>
     <div>
-        <div v-if="raw_data.loading"
+        <div v-if="raw_dataStore.data.loading"
             style="position: absolute;z-index: 10;font-size: 6rem;text-align: center;top: 50%;left: 50%;transform: translate3d(-50%, -50%, 0);">
             {{ loading_store.getStatus() }}
         </div>
-        <div :class="[{ 'loading': raw_data.loading }, 'canvas-wrapper']">
+        <div :class="[{ 'loading': raw_dataStore.data.loading }, 'canvas-wrapper']">
             <TresCanvas window-size :alpha="false" power-preference="high-performance" :clear-color="PROMOBG"
                 :shadows="false">
                 <Stats />
                 <TresPerspectiveCamera :position="cameraPosition" ref="camera" />
                 <OrbitControls v-bind="controlsState" @change="onChange" make-default />
                 <Suspense>
-                    <LoadModels :source="source" :loaded_pan="loadedPan" :key="source as string" />
+                    <LoadModels :source="source" :loaded_pan="loadedPan" />
                 </Suspense>
             </TresCanvas>
             <div class="homelink" :class="[{ open: sidebar.is_open }]">

front/src/components/Promo/load_models.vue

@@ -46,7 +46,7 @@ const sidebar = usePromoSidebar();
 const sidebar_scene = usePromoScene();
 const clickable = useClickable()
 const loading_store = useLoading()
-const raw_data = useRawData()
+const raw_dataStore = useRawData()
 
 const { controls, camera, scene, raycaster, renderer } = useTresContext()
 const { seekByName, seekAllByName } = useSeek()
@@ -59,9 +59,9 @@ const pointerTexture = await useTexture({
 })
 
 const setEnv = async () => {
-    envVars.focus = raw_data.max_distance * 0.5
-    if (raw_data.env) {
-        Object.assign(envVars, raw_data.env)
+    envVars.focus = raw_dataStore.data.max_distance * 0.5
+    if (raw_dataStore.data.env) {
+        Object.assign(envVars, raw_dataStore.data.env)
     } else {
         delete envVars.env_displacementmap
         delete envVars.env_normalmap
@@ -88,8 +88,8 @@ const setEnv = async () => {
 const setControls = () => {
     if (!controls.value) return;
     controls.value.enabled = false;
-    (controls.value as any).minDistance = mobileAndTabletCheck() ? raw_data.min_distance * 0.5 : raw_data.min_distance;
-    (controls.value as any).maxDistance = raw_data.max_distance;
+    (controls.value as any).minDistance = mobileAndTabletCheck() ? raw_dataStore.data.min_distance * 0.5 : raw_dataStore.data.min_distance;
+    (controls.value as any).maxDistance = raw_dataStore.data.max_distance;
 
     camera.value?.position.set(
         (controls.value as any).maxDistance * 0.5,
@@ -138,8 +138,8 @@ const loadModels = async () => {
     
     loading_store.status = 'loading'
     process_loading.value = props.source
-    await raw_data.load(props)
-    raw_data.loading = true
+    await raw_dataStore.load(props)
+    raw_dataStore.data.loading = true
 
     loading_store.status = 'env'
     await setEnv()
@@ -147,13 +147,13 @@ const loadModels = async () => {
     loading_store.status = 'other'
     setControls()
 
-    sidebar_scene.setName({ name: raw_data.name, description: raw_data.name })
+    sidebar_scene.setName({ name: raw_dataStore.data.name, description: raw_dataStore.data.name })
 
     loading_store.status = 'model'
-    for (let index = 0; index < raw_data.elements.length; index++) {
+    for (let index = 0; index < raw_dataStore.data.elements.length; index++) {
         if (process_loading.value !== props.source) return
         loading_store.count = index
-        const element = raw_data.elements[index];
+        const element = raw_dataStore.data.elements[index];
         const item = {} as model3DType
 
         item.modelUrl = `${IMAGE_URL}/${element.model_file}`
@@ -201,7 +201,7 @@ const loadModels = async () => {
             ((find_element as Mesh).geometry.boundingBox as any).getCenter(world_position);
             (find_element as Mesh).localToWorld(world_position);
 
-            const p = raw_data.min_distance * 0.05
+            const p = raw_dataStore.data.min_distance * 0.05
 
             const point_mesh = new Mesh(
                 new CircleGeometry(2, 32),
@@ -249,7 +249,7 @@ const loadModels = async () => {
         new Vector3(box_size.x * -0.25, box_size.y * -0.25, box_size.z * -0.25),
     );
     (controls.value as any).enabled = true;
-    raw_data.loading = false;
+    raw_dataStore.data.loading = false;
 
     timer.startTimer()
     if (controls.value && (controls.value as any).autoRotate) {
@@ -260,13 +260,13 @@ const loadModels = async () => {
 }
 
 const gotoCenterAndDistance = () => {
-    (controls.value as any).minDistance = mobileAndTabletCheck() ? raw_data.min_distance * 0.5 : raw_data.min_distance;
-    (controls.value as any).maxDistance = raw_data.max_distance;
+    (controls.value as any).minDistance = mobileAndTabletCheck() ? raw_dataStore.data.min_distance * 0.5 : raw_dataStore.data.min_distance;
+    (controls.value as any).maxDistance = raw_dataStore.data.max_distance;
     controls_targetto.value = new Vector3(0, 0, 0);
     camera_moveto.value = new Vector3(
-        raw_data.max_distance * 0.5,
-        raw_data.max_distance * 0.5,
-        raw_data.max_distance * 0.5
+        raw_dataStore.data.max_distance * 0.5,
+        raw_dataStore.data.max_distance * 0.5,
+        raw_dataStore.data.max_distance * 0.5
     );
 
     clickable.list.forEach(element => {
@@ -279,7 +279,7 @@ const gotoCenterAndDistance = () => {
 
 watch(() => [props.source, process_loading.value], ([source, process]) => {
     if (source !== process) {
-        raw_data.$reset()
+        raw_dataStore.$reset()
         const loaded = seekByName(scene.value, 'loaded')
         if (loaded) {
             loaded.children = []

front/src/stores/loading.ts

@@ -22,10 +22,11 @@ export const useLoading = defineStore('loading', {
     },
     actions: {
         getStatus() {
-            if (this.status == 'model') {
-                return `${lines[this.status]}${this.count ? (' ' + (this.count + 1)) : ''}`
+            const key = this.status as keyof typeof lines;
+            if (key == 'model') {
+                return `${lines[key]}${this.count ? (' ' + (this.count + 1)) : ''}`
             }
-            return lines[this.status]
+            return lines[key]
         }
     }
 })

front/src/stores/raw_data.ts

@@ -4,16 +4,14 @@ import { SERVER_URL } from '../constants'
 export const useRawData = defineStore('raw_data', {
     state: () => {
         return {
-        } as scene3D
+            data: {} as scene3D
+        }
     },
     actions: {
         async load(params: any) {
             const res = await fetch(`${SERVER_URL}/api/obj/scene/${params.source}/`)
             const raw_data = await res.json() as scene3D
-            // this.$state = Object.assign(this.$state, page)
-            for (const key in raw_data) {
-                this[key] = raw_data[key]
-            }
+            this.data = raw_data
             return raw_data
         }
     }