From c3aff706f0e55d1860f04c8e70de70be591e66d9 Mon Sep 17 00:00:00 2001
From: Colin Kallemein <kallemein@redkiwi.nl>
Date: Sat, 20 Jul 2024 17:12:14 +0200
Subject: [PATCH] Applied to object list as well

---
 .../utilities/assetManager/AssetManager.vue   |  1 -
 .../assetManager/partials/ObjectList.vue      | 70 +++++++++++++++----
 2 files changed, 56 insertions(+), 15 deletions(-)

diff --git a/src/components/utilities/assetManager/AssetManager.vue b/src/components/utilities/assetManager/AssetManager.vue
index 897a05b..f8f48f3 100644
--- a/src/components/utilities/assetManager/AssetManager.vue
+++ b/src/components/utilities/assetManager/AssetManager.vue
@@ -41,7 +41,6 @@
     <div class="overflow-auto h-full w-[35%] flex flex-col relative">
       <TileList v-if="selectedCategory === 'tiles'" />
       <ObjectList v-if="selectedCategory === 'objects'" />
-      <ObjectList v-if="selectedCategory === 'objects'" />
     </div>
 
     <div class="absolute w-[1px] bg-cyan-200 h-full top-0 left-1/2"></div>
diff --git a/src/components/utilities/assetManager/partials/ObjectList.vue b/src/components/utilities/assetManager/partials/ObjectList.vue
index a3e97f8..f63fc92 100644
--- a/src/components/utilities/assetManager/partials/ObjectList.vue
+++ b/src/components/utilities/assetManager/partials/ObjectList.vue
@@ -7,15 +7,28 @@
     <input v-model="searchQuery" class="input-cyan w-full" placeholder="Search..." @input="handleSearch" />
     <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
   </div>
-  <a class="relative p-2.5 cursor-pointer" :class="{ 'bg-cyan/80': assetManagerStore.selectedObject?.id === object.id }" v-for="(object, index) in filteredObjects" :key="index" @click="assetManagerStore.setSelectedObject(object as Object)">
-    <div class="flex items-center gap-2.5">
-      <div class="h-[28px] w-[75px] max-w-[75px] flex justify-center">
-        <img class="h-[28px]" :src="`${config.server_endpoint}/assets/objects/${object.id}.png`" alt="Object" />
-      </div>
-      <span>{{ object.name }}</span>
+  <div v-bind="containerProps" class="overflow-y-auto relative" @scroll="onScroll">
+    <div v-bind="wrapperProps" ref="elementToScroll">
+      <a 
+        v-for="{ data: object } in list" 
+        :key="object.id" 
+        class="relative p-2.5 cursor-pointer block" 
+        :class="{ 'bg-cyan/80': assetManagerStore.selectedObject?.id === object.id }" 
+        @click="assetManagerStore.setSelectedObject(object as Object)"
+      >
+        <div class="flex items-center gap-2.5">
+          <div class="h-[28px] w-[75px] max-w-[75px] flex justify-center">
+            <img class="h-[28px]" :src="`${config.server_endpoint}/assets/objects/${object.id}.png`" alt="Object" />
+          </div>
+          <span>{{ object.name }}</span>
+        </div>
+        <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
+      </a>
     </div>
-    <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
-  </a>
+    <button class="left-[calc(50%_-_60px)] fixed bottom-2.5 min-w-[unset] w-[50px] h-[50px] rounded-lg bg-cyan/50 p-0 hover:bg-cyan" v-show="hasScrolled" @click="toTop">
+      <img class="absolute invert w-[30px] h-[30px] left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
+    </button>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -25,6 +38,7 @@ import { onMounted, ref, computed } from 'vue'
 import { useAssetManagerStore } from '@/stores/assetManager'
 import { useAssetStore } from '@/stores/assets'
 import type { Object } from '@/types'
+import { useVirtualList } from '@vueuse/core'
 
 const gameStore = useGameStore()
 const objectUploadField = ref(null)
@@ -33,10 +47,13 @@ const assetStore = useAssetStore()
 
 const searchQuery = ref('')
 
+const hasScrolled = ref(false)
+const elementToScroll = ref()
+
 const handleFileUpload = (e: Event) => {
   const files = (e.target as HTMLInputElement).files
   if (!files) return
-  gameStore.connection.emit('gm:object:upload', files, (response: boolean) => {
+  gameStore.connection?.emit('gm:object:upload', files, (response: boolean) => {
     if (!response) {
       if (config.development) console.error('Failed to upload object')
       return
@@ -44,26 +61,51 @@ const handleFileUpload = (e: Event) => {
 
     assetStore.fetchAssets()
 
-    gameStore.connection.emit('gm:object:list', {}, (response: Object[]) => {
+    gameStore.connection?.emit('gm:object:list', {}, (response: Object[]) => {
       assetManagerStore.setObjectList(response)
     })
   })
 }
 
 const handleSearch = () => {
-  // The filtering is handled by the computed property, so we don't need to do anything here
-  // This function is kept in case you want to add debounce or other functionality later
+  // Trigger a re-render of the virtual list
+  virtualList.value?.scrollTo(0)
 }
 
 const filteredObjects = computed(() => {
   if (!searchQuery.value) {
     return assetManagerStore.objectList
   }
-  return assetManagerStore.objectList.filter((object) => object.name.toLowerCase().includes(searchQuery.value.toLowerCase()))
+  return assetManagerStore.objectList.filter((object) => 
+    object.name.toLowerCase().includes(searchQuery.value.toLowerCase())
+  )
 })
 
+const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(
+  filteredObjects,
+  {
+    itemHeight: 48,
+  },
+)
+
+const virtualList = ref({ scrollTo })
+
+const onScroll = () => {
+  let scrollTop = elementToScroll.value.style.marginTop.replace('px', '');
+
+  if (scrollTop > 80) {
+    hasScrolled.value = true
+  } else if (scrollTop <= 80) {
+    hasScrolled.value = false
+  }
+}
+
+function toTop() {
+  virtualList.value?.scrollTo(0)
+}
+
 onMounted(() => {
-  gameStore.connection.emit('gm:object:list', {}, (response: Object[]) => {
+  gameStore.connection?.emit('gm:object:list', {}, (response: Object[]) => {
     assetManagerStore.setObjectList(response)
   })
 })