front/src/components/Promo/load_models.vue

@@ -175,6 +175,16 @@ const clickEvent = (event: MouseEvent) => {
         openSidebar(parseInt(names[0].replace('_clickable', '')))
     }
 }
+
+watch(() => sidebar_scene.list, () => {
+    sidebar_scene.list.forEach(element => {
+        const el = seekByName(scene.value, element.name)
+        if (!el) return
+        if (el.visible !== element.is_enabled) {
+            el.visible = element.is_enabled
+        }
+    });
+}, { deep: true })
 </script>
 <template>
     <TresGroup name="loaded">
@@ -185,7 +195,7 @@ const clickEvent = (event: MouseEvent) => {
             </TresGroup>
         </template>
         <template v-for="(item, i) in clickable_items">
-            <TresMesh v-bind="item" :ref="clickable_refs[i]"/>
+            <TresMesh v-bind="item" :ref="clickable_refs[i]" />
         </template>
     </TresGroup>
 </template>

front/src/components/Promo/sidebar.vue

@@ -6,9 +6,10 @@ import { usePromoSidebar } from '../../stores/promo_sidebar';
 import { usePromoScene } from '../../stores/promo_scene';
 
 const sidebar = usePromoSidebar()
-const scene = usePromoScene()
+const sidebar_scene = usePromoScene()
 const sidebar_obj = ref()
 // onClickOutside(sidebar_obj, () => sidebar.close())
+
 </script>
 <template>
     <div class="sidebar" :class="[{ 'open': sidebar.is_open }]" ref="sidebar_obj">
@@ -27,17 +28,21 @@ const sidebar_obj = ref()
                 </RouterLink>
             </template>
             <template v-else>
-                <template v-for="item in scene.list">
-                    <h3>{{ item.name }}</h3>
-                    <template v-for="p in item.description.split('\n')">
-                        <p>{{ p }}</p>
-                    </template>
-                </template>
+                <span class="sidebar-list-item" v-for="item in sidebar_scene.list">
+                    <input type="checkbox" v-model="item.is_enabled" :id="item.name" />
+                    <label :for="item.name">
+                        <h3>{{ item.name }}</h3>
+                        <template v-for="p in item.description.split('\n')">
+                            <p>{{ p }}</p>
+                        </template>
+                    </label>
+                </span>
             </template>
         </div>
     </div>
 </template>
 <style scoped lang="scss">
+
 .sidebar {
     width: 23vw;
     background-color: #fff;
@@ -67,6 +72,14 @@ const sidebar_obj = ref()
         overflow: auto;
     }
 
+    &-list-item {
+        display: flex;
+        label {
+            flex-grow: 1;
+            margin-left: 0.25rem
+        }
+    }
+
     h2 {
         text-align: center;
         font-size: 2rem;
@@ -75,7 +88,7 @@ const sidebar_obj = ref()
 
     p,
     h3 {
-        margin: 1rem 0;
+        margin: 0.5rem 0;
     }
 
     p {