front/components.d.ts

@@ -33,6 +33,11 @@ declare module 'vue' {
     IMdiShop: typeof import('~icons/mdi/shop')['default']
     IMdiVideo3d: typeof import('~icons/mdi/video3d')['default']
     Item: typeof import('./src/components/Floorplan/item.vue')['default']
+    IUilAngleLeft: typeof import('~icons/uil/angle-left')['default']
+    IUilAngleLeftB: typeof import('~icons/uil/angle-left-b')['default']
+    IUilAngleRightB: typeof import('~icons/uil/angle-right-b')['default']
+    IUilCompressArrows: typeof import('~icons/uil/compress-arrows')['default']
+    IUilTimes: typeof import('~icons/uil/times')['default']
     Load: typeof import('./src/components/load.vue')['default']
     Load_models: typeof import('./src/components/Promo/load_models.vue')['default']
     Main: typeof import('./src/components/Main/index.vue')['default']

front/package-lock.json

@@ -11,6 +11,7 @@
         "@fireworks-js/vue": "^2.10.7",
         "@iconify-json/icon-park": "^1.1.14",
         "@iconify-json/icon-park-solid": "^1.1.15",
+        "@iconify-json/uil": "^1.2.0",
         "@iconify/vue": "^4.1.2",
         "@monogrid/gainmap-js": "^3.0.5",
         "@tresjs/cientos": "^3.9.0",
@@ -464,6 +465,15 @@
         "@iconify/types": "*"
       }
     },
+    "node_modules/@iconify-json/uil": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@iconify-json/uil/-/uil-1.2.0.tgz",
+      "integrity": "sha512-DFhJYbp/H2BGQ2oBS0DmqhvgkdUXpBTgCErhqwLEeRhkt8+MuTKlivpQf/gPgD5/6wHH37gPX4BhlqU4eH372w==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
     "node_modules/@iconify/types": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",

front/package.json

@@ -13,6 +13,7 @@
     "@fireworks-js/vue": "^2.10.7",
     "@iconify-json/icon-park": "^1.1.14",
     "@iconify-json/icon-park-solid": "^1.1.15",
+    "@iconify-json/uil": "^1.2.0",
     "@iconify/vue": "^4.1.2",
     "@monogrid/gainmap-js": "^3.0.5",
     "@tresjs/cientos": "^3.9.0",

front/src/assets/sidebar.scss

@@ -32,6 +32,57 @@ $boxShadow: 0px 0px 8px rgba(0, 0, 0, .25);
     }
 }
 
+.itemnav {
+    position: absolute;
+    top: calc(100vh - 15rem);
+    left: 50%;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+    // flex-wrap: wrap;
+    column-gap: 1rem;
+    max-width: 8rem;
+    align-items: center;
+    justify-content: center;
+
+    >* {
+        line-height: 1;
+        font-size: 2.5rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        border-radius: 50%;
+        background-color: $bg;
+        color: var(--primary-color);
+
+        width: 2.5rem;
+        height: 2.5rem;
+        filter: drop-shadow($boxShadow);
+
+        &.invisible {
+            visibility: hidden;
+            pointer-events: none;
+        }
+
+        > a {
+            line-height: 1;
+            color: inherit;
+        }
+    }
+
+    &-close {
+        grid-column-start: 2;
+        grid-column-end: 4;
+        margin: 1rem 0.75rem;
+    }
+
+    &-deep {
+        width: 4rem;
+        height: 4rem;
+    }
+}
+
 .sidebar {
     position: fixed;
     width: 30vw;
@@ -145,10 +196,13 @@ $boxShadow: 0px 0px 8px rgba(0, 0, 0, .25);
             input[type=checkbox] {
                 order: 10
             }
+
             label {
                 flex-grow: 1;
             }
+
             $r: 0.5rem;
+
             &:before,
             &::after {
                 content: '';

front/src/components/Promo/index.vue

@@ -16,6 +16,7 @@ import { useLoading } from '../../stores/loading';
 import { useRawData } from '../../stores/raw_data';
 
 import { Pixelation, EffectComposer } from '@tresjs/post-processing'
+import { useClickable } from '../../stores/clickable';
 
 const minPan = ref(new Vector3(-2, -2, -2))
 const maxPan = ref(new Vector3(2, 2, 2))
@@ -46,6 +47,7 @@ const controlsState = reactive({
 
 const raw_dataStore = useRawData()
 const route = useRoute()
+const clickable = useClickable()
 
 watch(() => route.params.target, sidebar.close)
 const sidebarFunc = () => {
@@ -56,15 +58,22 @@ const sidebarFunc = () => {
     }
 }
 
-const bloomParams = reactive({
+const prevClickableId = () => {
-    luminanceThreshold: 0.1,
+    const item = clickable.list.findIndex(el => el.id == sidebar.id_clickable)
-    luminanceSmoothing: 0.3,
+    if (item == 0) {
-    mipmapBlur: true,
+        return clickable.list[clickable.list.length - 1].id
-    intensity: 0.4,
+    } else {
-    radius: 0.5,
+        return clickable.list[item - 1].id
-    disableRender: true,
+    }
-    // blendFunction: BlendFunction.ADD,
+}
-})
+const nextClickableId = () => {
+    const item = clickable.list.findIndex(el => el.id == sidebar.id_clickable)
+    if (item == (clickable.list.length - 1)) {
+        return clickable.list[0].id
+    } else {
+        return clickable.list[item + 1].id
+    }
+} 
 </script>
 <template>
     <div>
@@ -80,12 +89,29 @@ const bloomParams = reactive({
                 <Suspense>
                     <LoadModels :source="route.params.target" :loaded_pan="loadedPan" />
                 </Suspense>
-                <!-- <Suspense>
-                    <EffectComposer>
-                        <Pixelation />
-                    </EffectComposer>
-                </Suspense> -->
             </TresCanvas>
+            <div class="itemnav" v-if="sidebar.is_open">
+                <div class="itemnav-close">
+                    <a href="#" @click.prevent="sidebar.close()">
+                        <i-uil-times />
+                    </a>
+                </div>
+                <div class="itemnav-back">
+                    <a href="#" @click.prevent="sidebar.open(prevClickableId())">
+                        <i-uil-angle-left-b />
+                    </a>
+                </div>
+                <div class="itemnav-deep">
+                    <RouterLink :to="`/${route.params.item}/${sidebar.target}`">
+                        <i-uil-compress-arrows />
+                    </RouterLink>
+                </div>
+                <div class="itemnav-forward">
+                    <a href="#" @click.prevent="sidebar.open(nextClickableId())">
+                        <i-uil-angle-right-b />
+                    </a>
+                </div>
+            </div>
             <div class="homelink" :class="[{ open: sidebar.is_open }]">
                 <a href="#" @click.prevent="sidebarFunc">
                     <i-icon-park-solid-left-c />