raw data to store

front/src/components/Promo/load_models.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { getCurrentInstance, onMounted, onUnmounted, reactive, Ref, ref, watch } from 'vue';
+import { onMounted, onUnmounted, reactive, Ref, ref, watch } from 'vue';
 import {
     Box3, Color, DoubleSide, Group, Mesh, PlaneGeometry,
     MeshStandardMaterial, MeshStandardMaterialParameters,
@@ -20,6 +20,7 @@ import { useClickable } from '../../stores/clickable';
 import { useLoading } from '../../stores/loading';
 import { mobileAndTabletCheck } from '../../helpers';
 import { useTimer } from '../../stores/timer';
+import { useRawData } from '../../stores/raw_data';
 
 const props = defineProps(['source', 'loaded', 'loaded_pan'])
 const CON_MOVETO_COUNT = 150;
@@ -43,6 +44,7 @@ const sidebar = usePromoSidebar();
 const sidebar_scene = usePromoScene();
 const clickable = useClickable()
 const loading_store = useLoading()
+const raw_data = useRawData()
 
 const { controls, camera, scene, raycaster, renderer } = useTresContext()
 const { seekByName, seekAllByName } = useSeek()
@@ -53,15 +55,10 @@ const groundTexture = await useTexture({
 const pointerTexture = await useTexture({
     map: '/pointer_texture.png'
 })
-const clearData = () => {
-    models.value = []
-    clickable_items.value = []
-    clickable_refs.value = []
-}
+
 const loadModels = async () => {
     process_loading.value = props.source
-    const res = await fetch(`${SERVER_URL}/api/obj/scene/${props.source}/`)
-    const raw_data = await res.json() as scene3D
+    await raw_data.load(props)
     loading_store.status = 'other'
 
     def_distance.max = raw_data.max_distance
@@ -80,11 +77,9 @@ const loadModels = async () => {
     }
 
     loading_store.status = 'env'
-    const data = raw_data.elements
+
     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;
 
@@ -106,9 +101,10 @@ const loadModels = async () => {
     sidebar_scene.setName({ name: raw_data.name, description: raw_data.name })
 
     loading_store.status = 'model'
-    for (let index = 0; index < data.length; index++) {
+    for (let index = 0; index < raw_data.elements.length; index++) {
+        if (process_loading.value !== props.source) return
         loading_store.count = index
-        const element = data[index];
+        const element = raw_data.elements[index];
         const item = {} as model3DType
 
         item.modelUrl = `${IMAGE_URL}/${element.model_file}`
@@ -143,6 +139,8 @@ const loadModels = async () => {
     }
     sidebar_scene.setVisible(sidebar_visible)
 
+    if (process_loading.value !== props.source) return
+
     let c = new Color()
     if (envVars.clear_color) {
         c.set(envVars.clear_color)
@@ -236,7 +234,7 @@ const loadModels = async () => {
     });
     const box_size = new Vector3();
     box.getSize(box_size)
-    // console.log(box_size)
+
     props.loaded_pan(
         new Vector3(box_size.x * 0.5, box_size.y * 0.5, box_size.z * 0.5),
         new Vector3(box_size.x * -0.25, box_size.y * -0.25, box_size.z * -0.25),
@@ -272,6 +270,7 @@ const gotoCenterAndDistance = () => {
 
 watch(() => [props.source, process_loading.value], ([source, process]) => {
     if (source !== process) {
+        raw_data.$reset()
         const loaded = seekByName(scene.value, 'loaded')
         if (loaded) {
             loaded.children = []
@@ -360,6 +359,7 @@ onAfterRender(() => {
         }
     }
 })
+
 const timer = useTimer()
 timer.timer_func = () => {
     if (timer.seconds_left == 0 && !(controls.value as any).autoRotate && (controls.value as any).enabled) {
@@ -392,8 +392,13 @@ const clickEvent = (event: MouseEvent) => {
     const intersects = raycaster.value.intersectObjects(clickable_objects);
     const names = intersects
         .map(el => (el.object.parent ? el.object.parent.name : el.object.name) ?? false)
-        .filter(el =>
-            clickable_objects.find(item => item.name == el).visible == true ?? false
+        .filter(el => {
+            if (clickable_objects) {
+                const f = clickable_objects.find(item => item.name == el);
+                return f ? f.visible == true : false
+            }
+            return false
+        }
         ).filter(Boolean)
     if (names.length) {
         sidebar.open(parseInt(names[0].replace('_clickable', '')))
@@ -426,7 +431,7 @@ onUnmounted(() => {
         <!-- <PostProcessing /> -->
         <template v-for="item in models">
             <TresGroup :name="item.name"
-                :visible="sidebar_scene.visible.find(el => el.id == item.id) ? sidebar_scene.visible.find(el => el.id == item.id).is_enabled : true">
+                :visible="sidebar_scene.visible.find(el => el.id == item.id)?.is_enabled ?? true">
                 <TresObject3D v-bind="item.modelFile.clone()" />
             </TresGroup>
         </template>

front/src/index.d.ts

@@ -39,6 +39,7 @@ interface element3DType {
     z_pos: number
 }
 interface model3DType {
+    id?: number
     modelUrl?: string,
     modelFile?: any,
     name: string
@@ -68,6 +69,7 @@ interface PromoSidebar extends PromoSidebarData {
 interface PromoScene {
     id: number
     name: string
+    is_enabled?: boolean
 }
 interface EnvVars {
     focus: number,

front/src/stores/raw_data.ts

@@ -0,0 +1,20 @@
+import { defineStore } from 'pinia'
+import { SERVER_URL } from '../constants'
+
+export const useRawData = defineStore('raw_data', {
+    state: () => {
+        return {
+        } 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]
+            }
+            return raw_data
+        }
+    }
+})