From f79ebedc62da7f215f518025c282cbf4caeb3513 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Sun, 9 Feb 2025 21:27:02 +0100
Subject: [PATCH] Improvement

---
 .../mapEditor/partials/ListPanel.vue          |  78 --------
 .../mapEditor/partials/MapObjectList.vue      | 107 +++++++++++
 .../mapEditor/partials/TileList.vue           | 173 ++++++++++++++++++
 .../gameMaster/mapEditor/partials/Toolbar.vue |  20 +-
 .../partials/lists/MapObjectList.vue          |  84 ---------
 .../mapEditor/partials/lists/TileList.vue     | 151 ---------------
 src/components/screens/MapEditor.vue          |  11 +-
 .../useTileProcessingComposable.ts            |  37 ++--
 src/workers/tileAnalyzerWorker.ts             |  13 +-
 9 files changed, 318 insertions(+), 356 deletions(-)
 delete mode 100644 src/components/gameMaster/mapEditor/partials/ListPanel.vue
 create mode 100644 src/components/gameMaster/mapEditor/partials/MapObjectList.vue
 create mode 100644 src/components/gameMaster/mapEditor/partials/TileList.vue
 delete mode 100644 src/components/gameMaster/mapEditor/partials/lists/MapObjectList.vue
 delete mode 100644 src/components/gameMaster/mapEditor/partials/lists/TileList.vue

diff --git a/src/components/gameMaster/mapEditor/partials/ListPanel.vue b/src/components/gameMaster/mapEditor/partials/ListPanel.vue
deleted file mode 100644
index 9b2a99a..0000000
--- a/src/components/gameMaster/mapEditor/partials/ListPanel.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template>
-  <div class="absolute border-0 border-l-2 border-solid border-gray-500 w-1/4 min-w-80 flex flex-col top-0 right-0 z-10 h-dvh bg-gray-800" v-if="isOpen">
-    <div class="flex flex-col gap-2.5 p-2.5">
-      <div class="relative flex">
-        <img src="/assets/icons/mapEditor/search.svg" class="w-4 h-4 py-0.5 absolute top-1/2 -translate-y-1/2 left-2.5" alt="Search icon" />
-        <label class="mb-1.5 font-titles hidden" for="search">Search</label>
-        <input @mousedown.stop class="!pl-7 input-field w-full" type="text" name="search" placeholder="Search" v-model="searchQuery" />
-      </div>
-      <div class="flex">
-        <select class="input-field w-full" name="lists" v-model="lists">
-          <option value="tile">Tiles</option>
-          <option value="map_object">Objects</option>
-        </select>
-      </div>
-    </div>
-    <div class="h-full overflow-auto relative border-0 border-t border-solid border-gray-500 p-2.5">
-      <TileList v-if="mapEditor.drawMode.value === 'tile'" />
-      <ObjectList v-if="mapEditor.drawMode.value === 'map_object'" />
-    </div>
-    <div class="flex flex-col h-40 gap-2.5 p-3.5 border-t border-0 border-solid border-gray-500">
-      <span>Tags:</span>
-      <div class="flex grow items-center flex-wrap gap-1.5 overflow-auto">
-        <span class="m-auto">No tags selected</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { Tile } from '@/application/types'
-import ObjectList from '@/components/gameMaster/mapEditor/partials/lists/MapObjectList.vue'
-import TileList from '@/components/gameMaster/mapEditor/partials/lists/TileList.vue'
-import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
-import { TileStorage } from '@/storage/storages'
-import { liveQuery } from 'dexie'
-import { onMounted, onUnmounted, ref, watch } from 'vue'
-
-const mapEditor = useMapEditorComposable()
-
-const isOpen = ref(false)
-const tileStorage = new TileStorage()
-const searchQuery = ref('')
-const tiles = ref<Tile[]>([])
-const lists = ref<string>(mapEditor.drawMode.value)
-
-defineExpose({
-  open: () => (isOpen.value = true),
-  close: () => (isOpen.value = false),
-  toggle: () => (isOpen.value = !isOpen.value)
-})
-
-watch(lists, (list) => {
-  mapEditor.setDrawMode(list)
-})
-
-watch(mapEditor.drawMode, (list) => {
-  lists.value = list
-})
-
-let subscription: any = null
-
-onMounted(() => {
-  subscription = liveQuery(() => tileStorage.liveQuery()).subscribe({
-    next: (result) => {
-      tiles.value = result
-    },
-    error: (error) => {
-      console.error('Failed to fetch tiles:', error)
-    }
-  })
-})
-
-onUnmounted(() => {
-  if (subscription) {
-    subscription.unsubscribe()
-  }
-})
-</script>
diff --git a/src/components/gameMaster/mapEditor/partials/MapObjectList.vue b/src/components/gameMaster/mapEditor/partials/MapObjectList.vue
new file mode 100644
index 0000000..619ca5c
--- /dev/null
+++ b/src/components/gameMaster/mapEditor/partials/MapObjectList.vue
@@ -0,0 +1,107 @@
+<template>
+  <div class="absolute border-0 border-l-2 border-solid border-gray-500 w-1/4 min-w-80 flex flex-col top-0 right-0 z-10 h-dvh bg-gray-800" v-if="isOpen">
+    <div class="flex flex-col gap-2.5 p-2.5">
+      <div class="relative flex">
+        <img src="/assets/icons/mapEditor/search.svg" class="w-4 h-4 py-0.5 absolute top-1/2 -translate-y-1/2 left-2.5" alt="Search icon" />
+        <label class="mb-1.5 font-titles hidden" for="search">Search</label>
+        <input @mousedown.stop class="!pl-7 input-field w-full" type="text" name="search" placeholder="Search" v-model="searchQuery" />
+      </div>
+      <div class="flex">
+        <select class="input-field w-full" name="lists">
+          <option value="tile">Tiles</option>
+          <option value="map_object">Objects</option>
+        </select>
+      </div>
+    </div>
+    <div class="h-full overflow-auto relative border-0 border-t border-solid border-gray-500 p-2.5">
+      <div class="h-full overflow-auto">
+        <div class="flex justify-between flex-wrap gap-2.5 items-center">
+          <div v-for="(mapObject, index) in filteredMapObjects" :key="index" class="max-w-1/4 inline-block">
+            <img
+              class="border-2 border-solid rounded max-w-full"
+              :src="`${config.server_endpoint}/textures/map_objects/${mapObject.id}.png`"
+              alt="Object"
+              @click="mapEditor.setSelectedMapObject(mapObject)"
+              :class="{
+                'cursor-pointer transition-all duration-300': true,
+                'border-cyan shadow-lg': mapEditor.selectedMapObject.value?.id === mapObject.id,
+                'border-transparent hover:border-gray-300': mapEditor.selectedMapObject.value?.id !== mapObject.id
+              }"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="flex flex-col h-40 gap-2.5 p-3.5 border-t border-0 border-solid border-gray-500">
+      <span>Tags:</span>
+      <div class="flex grow items-center flex-wrap gap-1.5 overflow-auto">
+        <span class="m-auto">No tags selected</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import config from '@/application/config'
+import type { MapObject } from '@/application/types'
+import Modal from '@/components/utilities/Modal.vue'
+import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
+import { MapObjectStorage } from '@/storage/storages'
+import { liveQuery } from 'dexie'
+import { computed, onMounted, onUnmounted, ref, useTemplateRef } from 'vue'
+
+const isOpen = ref(false)
+const mapObjectStorage = new MapObjectStorage()
+const isModalOpen = ref(false)
+const mapEditor = useMapEditorComposable()
+const searchQuery = ref('')
+const selectedTags = ref<string[]>([])
+const mapObjectList = ref<MapObject[]>([])
+
+defineExpose({
+  open: () => (isOpen.value = true),
+  close: () => (isOpen.value = false),
+  toggle: () => (isOpen.value = !isOpen.value)
+})
+
+const uniqueTags = computed(() => {
+  const allTags = mapObjectList.value.flatMap((obj) => obj.tags || [])
+  return Array.from(new Set(allTags))
+})
+
+const filteredMapObjects = computed(() => {
+  return mapObjectList.value.filter((object) => {
+    const matchesSearch = !searchQuery.value || object.name.toLowerCase().includes(searchQuery.value.toLowerCase())
+    const matchesTags = selectedTags.value.length === 0 || (object.tags && selectedTags.value.some((tag) => object.tags.includes(tag)))
+    return matchesSearch && matchesTags
+  })
+})
+
+const toggleTag = (tag: string) => {
+  if (selectedTags.value.includes(tag)) {
+    selectedTags.value = selectedTags.value.filter((t) => t !== tag)
+  } else {
+    selectedTags.value.push(tag)
+  }
+}
+
+let subscription: any = null
+
+onMounted(() => {
+  isModalOpen.value = true
+  subscription = liveQuery(() => mapObjectStorage.liveQuery()).subscribe({
+    next: (result) => {
+      mapObjectList.value = result
+    },
+    error: (error) => {
+      console.error('Failed to fetch tiles:', error)
+    }
+  })
+})
+
+onUnmounted(() => {
+  if (subscription) {
+    subscription.unsubscribe()
+  }
+})
+</script>
diff --git a/src/components/gameMaster/mapEditor/partials/TileList.vue b/src/components/gameMaster/mapEditor/partials/TileList.vue
new file mode 100644
index 0000000..322a318
--- /dev/null
+++ b/src/components/gameMaster/mapEditor/partials/TileList.vue
@@ -0,0 +1,173 @@
+<template>
+  <div class="absolute border-0 border-l-2 border-solid border-gray-500 w-1/4 min-w-80 flex flex-col top-0 right-0 z-10 h-dvh bg-gray-800">
+    <div class="flex flex-col gap-2.5 p-2.5">
+      <div class="relative flex">
+        <img src="/assets/icons/mapEditor/search.svg" class="w-4 h-4 py-0.5 absolute top-1/2 -translate-y-1/2 left-2.5" alt="Search icon" />
+        <label class="mb-1.5 font-titles hidden" for="search">Search</label>
+        <input @mousedown.stop class="!pl-7 input-field w-full" type="text" name="search" placeholder="Search" v-model="searchQuery" />
+      </div>
+      <div class="flex">
+        <select class="input-field w-full" name="lists">
+          <option value="tile">Tiles</option>
+          <option value="map_object">Objects</option>
+        </select>
+      </div>
+    </div>
+    <div class="h-full overflow-auto relative border-0 border-t border-solid border-gray-500 p-2.5">
+      <div class="h-full" v-if="!selectedGroup">
+        <div class="grid grid-cols-4 gap-2 justify-items-center">
+          <div v-for="group in groupedTiles" :key="group.parent.id" class="flex flex-col items-center justify-center relative">
+            <img
+              class="max-w-full max-h-full border-2 border-solid rounded cursor-pointer transition-all duration-300"
+              :src="`${config.server_endpoint}/textures/tiles/${group.parent.id}.png`"
+              :alt="group.parent.name"
+              @click="openGroup(group)"
+              @load="() => tileProcessor.processTile(group.parent)"
+              :class="{
+                'border-cyan shadow-lg': isActiveTile(group.parent),
+                'border-transparent hover:border-gray-300': !isActiveTile(group.parent)
+              }"
+            />
+            <span class="text-xs mt-1">{{ getTileCategory(group.parent) }}</span>
+            <span v-if="group.children.length > 0" class="absolute top-0 right-0 bg-cyan text-white rounded-full w-5 h-5 flex items-center justify-center text-xs">
+              {{ group.children.length + 1 }}
+            </span>
+          </div>
+        </div>
+      </div>
+      <div v-else class="h-full overflow-auto">
+        <div class="p-4">
+          <button @click="closeGroup" class="btn-cyan mb-4">Back to All Tiles</button>
+          <h4 class="text-lg mb-4">{{ selectedGroup.parent.name }} Group</h4>
+          <div class="grid grid-cols-4 gap-2 justify-items-center">
+            <div class="flex flex-col items-center justify-center">
+              <img
+                class="max-w-full max-h-full border-2 border-solid rounded cursor-pointer transition-all duration-300"
+                :src="`${config.server_endpoint}/textures/tiles/${selectedGroup.parent.id}.png`"
+                :alt="selectedGroup.parent.name"
+                @click="selectTile(selectedGroup.parent.id)"
+                :class="{
+                  'border-cyan shadow-lg': isActiveTile(selectedGroup.parent),
+                  'border-transparent hover:border-gray-300': !isActiveTile(selectedGroup.parent)
+                }"
+              />
+              <span class="text-xs mt-1">{{ getTileCategory(selectedGroup.parent) }}</span>
+            </div>
+            <div v-for="childTile in selectedGroup.children" :key="childTile.id" class="flex flex-col items-center justify-center">
+              <img
+                class="max-w-full max-h-full border-2 border-solid rounded cursor-pointer transition-all duration-300"
+                :src="`${config.server_endpoint}/textures/tiles/${childTile.id}.png`"
+                :alt="childTile.name"
+                @click="selectTile(childTile.id)"
+                :class="{
+                  'border-cyan shadow-lg': isActiveTile(childTile),
+                  'border-transparent hover:border-gray-300': !isActiveTile(childTile)
+                }"
+              />
+              <span class="text-xs mt-1">{{ getTileCategory(childTile) }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="flex flex-col h-40 gap-2.5 p-3.5 border-t border-0 border-solid border-gray-500">
+      <span>Tags:</span>
+      <div class="flex grow items-center flex-wrap gap-1.5 overflow-auto">
+        <span class="m-auto">No tags selected</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import config from '@/application/config'
+import type { Tile } from '@/application/types'
+import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
+import { useTileProcessingComposable } from '@/composables/useTileProcessingComposable'
+import { TileStorage } from '@/storage/storages'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+
+const tileStorage = new TileStorage()
+const mapEditor = useMapEditorComposable()
+const tileProcessor = useTileProcessingComposable()
+const searchQuery = ref('')
+const selectedTags = ref<string[]>([])
+const tileCategories = ref<Map<string, string>>(new Map())
+const selectedGroup = ref<{ parent: Tile; children: Tile[] } | null>(null)
+const tiles = ref<Tile[]>([])
+
+defineExpose({
+  open: () => (isOpen.value = true),
+  close: () => (isOpen.value = false),
+  toggle: () => (isOpen.value = !isOpen.value)
+})
+
+const uniqueTags = computed(() => {
+  const allTags = tiles.value.flatMap((tile) => tile.tags || [])
+  return Array.from(new Set(allTags))
+})
+
+const groupedTiles = computed(() => {
+  const groups: { parent: Tile; children: Tile[] }[] = []
+  const filteredTiles = tiles.value.filter((tile) => {
+    const matchesSearch = !searchQuery.value || tile.name.toLowerCase().includes(searchQuery.value.toLowerCase())
+    const matchesTags = selectedTags.value.length === 0 || (tile.tags && selectedTags.value.some((tag) => tile.tags.includes(tag)))
+    return matchesSearch && matchesTags
+  })
+
+  filteredTiles.forEach((tile) => {
+    const parentGroup = groups.find((group) => tileProcessor.areTilesRelated(group.parent, tile))
+    if (parentGroup && parentGroup.parent.id !== tile.id) {
+      parentGroup.children.push(tile)
+    } else {
+      groups.push({ parent: tile, children: [] })
+    }
+  })
+
+  return groups
+})
+
+const toggleTag = (tag: string) => {
+  if (selectedTags.value.includes(tag)) {
+    selectedTags.value = selectedTags.value.filter((t) => t !== tag)
+  } else {
+    selectedTags.value.push(tag)
+  }
+}
+
+function getTileCategory(tile: Tile): string {
+  return tileCategories.value.get(tile.id) || ''
+}
+
+function openGroup(group: { parent: Tile; children: Tile[] }) {
+  selectedGroup.value = group
+}
+
+function closeGroup() {
+  selectedGroup.value = null
+}
+
+function selectTile(tile: string) {
+  mapEditor.setSelectedTile(tile)
+}
+
+function isActiveTile(tile: Tile): boolean {
+  return mapEditor.selectedTile.value === tile.id
+}
+
+onMounted(async () => {
+  tiles.value = await tileStorage.getAll()
+  const initialBatchSize = 20
+  const initialTiles = tiles.value.slice(0, initialBatchSize)
+  initialTiles.forEach((tile) => tileProcessor.processTile(tile))
+
+  // Process remaining tiles in background
+  setTimeout(() => {
+    tiles.value.slice(initialBatchSize).forEach((tile) => tileProcessor.processTile(tile))
+  }, 1000)
+})
+
+onUnmounted(() => {
+  tileProcessor.cleanup()
+})
+</script>
diff --git a/src/components/gameMaster/mapEditor/partials/Toolbar.vue b/src/components/gameMaster/mapEditor/partials/Toolbar.vue
index 35587ef..e1661b2 100644
--- a/src/components/gameMaster/mapEditor/partials/Toolbar.vue
+++ b/src/components/gameMaster/mapEditor/partials/Toolbar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex justify-between p-5 w-[calc(100%_-_40px)] fixed bottom-0 left-0 z-20" :class="{ 'list-open' : listOpen }">
+  <div class="flex justify-between p-5 w-[calc(100%_-_40px)] fixed bottom-0 left-0 z-20" :class="{ 'list-open': listOpen }">
     <div class="toolbar rounded flex bg-gray solid border-solid border-2 border-gray-500 text-gray-300 p-1.5 px-3 h-10">
       <div ref="toolbar" class="tools flex gap-2.5" v-if="mapEditor.currentMap.value">
         <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan gap-2.5': mapEditor.tool.value === 'move' }" @click="handleClick('move')">
@@ -104,7 +104,7 @@ import { onBeforeUnmount, onMounted, ref } from 'vue'
 
 const mapEditor = useMapEditorComposable()
 
-const emit = defineEmits(['save', 'clear', 'open-maps', 'open-settings', 'close-editor', 'open-lists', 'close-lists'])
+const emit = defineEmits(['save', 'clear', 'open-maps', 'open-settings', 'close-editor'])
 
 // States
 const toolbar = ref(null)
@@ -116,15 +116,6 @@ const listOpen = ref(false)
 
 // drawMode
 function setDrawMode(value: string) {
-  if (mapEditor.tool.value === 'paint' || mapEditor.tool.value === 'pencil' || mapEditor.tool.value === 'eraser') {
-    listOpen.value = false
-    emit('close-lists')
-    if (value === 'tile' || value === 'map_object') {
-      listOpen.value = true
-      emit('open-lists')
-    }
-  }
-
   mapEditor.setDrawMode(value)
   selectPencilOpen.value = false
   selectEraserOpen.value = false
@@ -154,15 +145,10 @@ function handleClick(tool: string) {
   if (tool === 'mapEditorSettings') {
     isMapEditorSettingsModalOpen.value = true
     listOpen.value = false
-    emit('close-lists')
-  }
-  if (tool === 'settings') {
+  } else if (tool === 'settings') {
     listOpen.value = false
-    emit('open-settings')
-    emit('close-lists')
   } else if (tool === 'move') {
     listOpen.value = false
-    emit('close-lists')
     mapEditor.setTool(tool)
   } else {
     mapEditor.setTool(tool)
diff --git a/src/components/gameMaster/mapEditor/partials/lists/MapObjectList.vue b/src/components/gameMaster/mapEditor/partials/lists/MapObjectList.vue
deleted file mode 100644
index 0b785aa..0000000
--- a/src/components/gameMaster/mapEditor/partials/lists/MapObjectList.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <div class="h-full overflow-auto">
-    <div class="flex justify-between flex-wrap gap-2.5 items-center">
-      <div v-for="(mapObject, index) in filteredMapObjects" :key="index" class="max-w-1/4 inline-block">
-        <img
-          class="border-2 border-solid rounded max-w-full"
-          :src="`${config.server_endpoint}/textures/map_objects/${mapObject.id}.png`"
-          alt="Object"
-          @click="mapEditor.setSelectedMapObject(mapObject)"
-          :class="{
-            'cursor-pointer transition-all duration-300': true,
-            'border-cyan shadow-lg': mapEditor.selectedMapObject.value?.id === mapObject.id,
-            'border-transparent hover:border-gray-300': mapEditor.selectedMapObject.value?.id !== mapObject.id
-          }"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import config from '@/application/config'
-import type { MapObject } from '@/application/types'
-import Modal from '@/components/utilities/Modal.vue'
-import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
-import { MapObjectStorage } from '@/storage/storages'
-import { liveQuery } from 'dexie'
-import { computed, onMounted, onUnmounted, ref, useTemplateRef } from 'vue'
-
-const isOpen = ref(false)
-const mapObjectStorage = new MapObjectStorage()
-const isModalOpen = ref(false)
-const mapEditor = useMapEditorComposable()
-const searchQuery = ref('')
-const selectedTags = ref<string[]>([])
-const mapObjectList = ref<MapObject[]>([])
-
-defineExpose({
-  open: () => (isOpen.value = true),
-  close: () => (isOpen.value = false),
-  toggle: () => (isOpen.value = !isOpen.value)
-})
-
-const uniqueTags = computed(() => {
-  const allTags = mapObjectList.value.flatMap((obj) => obj.tags || [])
-  return Array.from(new Set(allTags))
-})
-
-const filteredMapObjects = computed(() => {
-  return mapObjectList.value.filter((object) => {
-    const matchesSearch = !searchQuery.value || object.name.toLowerCase().includes(searchQuery.value.toLowerCase())
-    const matchesTags = selectedTags.value.length === 0 || (object.tags && selectedTags.value.some((tag) => object.tags.includes(tag)))
-    return matchesSearch && matchesTags
-  })
-})
-
-const toggleTag = (tag: string) => {
-  if (selectedTags.value.includes(tag)) {
-    selectedTags.value = selectedTags.value.filter((t) => t !== tag)
-  } else {
-    selectedTags.value.push(tag)
-  }
-}
-
-let subscription: any = null
-
-onMounted(() => {
-  isModalOpen.value = true
-  subscription = liveQuery(() => mapObjectStorage.liveQuery()).subscribe({
-    next: (result) => {
-      mapObjectList.value = result
-    },
-    error: (error) => {
-      console.error('Failed to fetch tiles:', error)
-    }
-  })
-})
-
-onUnmounted(() => {
-  if (subscription) {
-    subscription.unsubscribe()
-  }
-})
-</script>
diff --git a/src/components/gameMaster/mapEditor/partials/lists/TileList.vue b/src/components/gameMaster/mapEditor/partials/lists/TileList.vue
deleted file mode 100644
index f7f24b1..0000000
--- a/src/components/gameMaster/mapEditor/partials/lists/TileList.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-<template>
-  <div class="h-full" v-if="!selectedGroup">
-    <div class="grid grid-cols-4 gap-2 justify-items-center">
-      <div v-for="group in groupedTiles" :key="group.parent.id" class="flex flex-col items-center justify-center relative">
-        <img
-          class="max-w-full max-h-full border-2 border-solid rounded cursor-pointer transition-all duration-300"
-          :src="`${config.server_endpoint}/textures/tiles/${group.parent.id}.png`"
-          :alt="group.parent.name"
-          @click="openGroup(group)"
-          @load="() => tileProcessor.processTile(group.parent)"
-          :class="{
-            'border-cyan shadow-lg': isActiveTile(group.parent),
-            'border-transparent hover:border-gray-300': !isActiveTile(group.parent)
-          }"
-        />
-        <span class="text-xs mt-1">{{ getTileCategory(group.parent) }}</span>
-        <span v-if="group.children.length > 0" class="absolute top-0 right-0 bg-cyan text-white rounded-full w-5 h-5 flex items-center justify-center text-xs">
-          {{ group.children.length + 1 }}
-        </span>
-      </div>
-    </div>
-  </div>
-  <div v-else class="h-full overflow-auto">
-    <div class="p-4">
-      <button @click="closeGroup" class="btn-cyan mb-4">Back to All Tiles</button>
-      <h4 class="text-lg mb-4">{{ selectedGroup.parent.name }} Group</h4>
-      <div class="grid grid-cols-4 gap-2 justify-items-center">
-        <div class="flex flex-col items-center justify-center">
-          <img
-            class="max-w-full max-h-full border-2 border-solid rounded cursor-pointer transition-all duration-300"
-            :src="`${config.server_endpoint}/textures/tiles/${selectedGroup.parent.id}.png`"
-            :alt="selectedGroup.parent.name"
-            @click="selectTile(selectedGroup.parent.id)"
-            :class="{
-              'border-cyan shadow-lg': isActiveTile(selectedGroup.parent),
-              'border-transparent hover:border-gray-300': !isActiveTile(selectedGroup.parent)
-            }"
-          />
-          <span class="text-xs mt-1">{{ getTileCategory(selectedGroup.parent) }}</span>
-        </div>
-        <div v-for="childTile in selectedGroup.children" :key="childTile.id" class="flex flex-col items-center justify-center">
-          <img
-            class="max-w-full max-h-full border-2 border-solid rounded cursor-pointer transition-all duration-300"
-            :src="`${config.server_endpoint}/textures/tiles/${childTile.id}.png`"
-            :alt="childTile.name"
-            @click="selectTile(childTile.id)"
-            :class="{
-              'border-cyan shadow-lg': isActiveTile(childTile),
-              'border-transparent hover:border-gray-300': !isActiveTile(childTile)
-            }"
-          />
-          <span class="text-xs mt-1">{{ getTileCategory(childTile) }}</span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import config from '@/application/config'
-import type { Tile } from '@/application/types'
-import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
-import { useTileProcessingComposable } from '@/composables/useTileProcessingComposable'
-import { TileStorage } from '@/storage/storages'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
-
-const isOpen = ref(false)
-const tileStorage = new TileStorage()
-const mapEditor = useMapEditorComposable()
-const tileProcessor = useTileProcessingComposable()
-const searchQuery = ref('')
-const selectedTags = ref<string[]>([])
-const tileCategories = ref<Map<string, string>>(new Map())
-const selectedGroup = ref<{ parent: Tile; children: Tile[] } | null>(null)
-const tiles = ref<Tile[]>([])
-
-defineExpose({
-  open: () => (isOpen.value = true),
-  close: () => (isOpen.value = false),
-  toggle: () => (isOpen.value = !isOpen.value)
-})
-
-const uniqueTags = computed(() => {
-  const allTags = tiles.value.flatMap((tile) => tile.tags || [])
-  return Array.from(new Set(allTags))
-})
-
-const groupedTiles = computed(() => {
-  const groups: { parent: Tile; children: Tile[] }[] = []
-  const filteredTiles = tiles.value.filter((tile) => {
-    const matchesSearch = !searchQuery.value || tile.name.toLowerCase().includes(searchQuery.value.toLowerCase())
-    const matchesTags = selectedTags.value.length === 0 || (tile.tags && selectedTags.value.some((tag) => tile.tags.includes(tag)))
-    return matchesSearch && matchesTags
-  })
-
-  filteredTiles.forEach((tile) => {
-    const parentGroup = groups.find((group) => tileProcessor.areTilesRelated(group.parent, tile))
-    if (parentGroup && parentGroup.parent.id !== tile.id) {
-      parentGroup.children.push(tile)
-    } else {
-      groups.push({ parent: tile, children: [] })
-    }
-  })
-
-  return groups
-})
-
-const toggleTag = (tag: string) => {
-  if (selectedTags.value.includes(tag)) {
-    selectedTags.value = selectedTags.value.filter((t) => t !== tag)
-  } else {
-    selectedTags.value.push(tag)
-  }
-}
-
-function getTileCategory(tile: Tile): string {
-  return tileCategories.value.get(tile.id) || ''
-}
-
-function openGroup(group: { parent: Tile; children: Tile[] }) {
-  selectedGroup.value = group
-}
-
-function closeGroup() {
-  selectedGroup.value = null
-}
-
-function selectTile(tile: string) {
-  mapEditor.setSelectedTile(tile)
-}
-
-function isActiveTile(tile: Tile): boolean {
-  return mapEditor.selectedTile.value === tile.id
-}
-
-onMounted(async () => {
-  tiles.value = await tileStorage.getAll()
-  const initialBatchSize = 20
-  const initialTiles = tiles.value.slice(0, initialBatchSize)
-  initialTiles.forEach((tile) => tileProcessor.processTile(tile))
-
-  // Process remaining tiles in background
-  setTimeout(() => {
-    tiles.value.slice(initialBatchSize).forEach((tile) => tileProcessor.processTile(tile))
-  }, 1000)
-})
-
-onUnmounted(() => {
-  tileProcessor.cleanup()
-})
-</script>
diff --git a/src/components/screens/MapEditor.vue b/src/components/screens/MapEditor.vue
index c72202f..c559fee 100644
--- a/src/components/screens/MapEditor.vue
+++ b/src/components/screens/MapEditor.vue
@@ -5,9 +5,10 @@
         <div v-if="!isLoaded" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white text-3xl font-ui">Loading...</div>
         <div v-else>
           <Map v-if="mapEditor.currentMap.value" :key="mapEditor.currentMap.value?.id" />
-          <Toolbar ref="toolbar" @save="save" @clear="clear" @open-maps="mapModal?.open" @open-settings="mapSettingsModal?.open" @close-editor="mapEditor.toggleActive" @close-lists="list?.close" @open-lists="list?.open" />
+          <Toolbar ref="toolbar" @save="save" @clear="clear" @open-maps="mapModal?.open" @open-settings="mapSettingsModal?.open" @close-editor="mapEditor.toggleActive" />
           <MapList ref="mapModal" @open-create-map="mapSettingsModal?.open" />
-          <ListPanel ref="list" />
+          <TileList v-if="mapEditor.tool.value === 'pencil' && mapEditor.drawMode.value === 'tile'" />
+          <MapObjectList v-if="mapEditor.tool.value === 'pencil' && mapEditor.drawMode.value === 'map_object'" />
           <MapSettings ref="mapSettingsModal" />
           <TeleportModal ref="teleportModal" />
         </div>
@@ -21,10 +22,11 @@ import config from '@/application/config'
 import 'phaser'
 import type { Map as MapT } from '@/application/types'
 import Map from '@/components/gameMaster/mapEditor/Map.vue'
-import ListPanel from '@/components/gameMaster/mapEditor/partials/ListPanel.vue'
 import MapList from '@/components/gameMaster/mapEditor/partials/MapList.vue'
+import MapObjectList from '@/components/gameMaster/mapEditor/partials/MapObjectList.vue'
 import MapSettings from '@/components/gameMaster/mapEditor/partials/MapSettings.vue'
 import TeleportModal from '@/components/gameMaster/mapEditor/partials/TeleportModal.vue'
+import TileList from '@/components/gameMaster/mapEditor/partials/TileList.vue'
 import Toolbar from '@/components/gameMaster/mapEditor/partials/Toolbar.vue'
 import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
 import { loadAllTileTextures } from '@/services/mapService'
@@ -38,7 +40,6 @@ const mapEditor = useMapEditorComposable()
 const gameStore = useGameStore()
 
 const mapModal = useTemplateRef('mapModal')
-const list = useTemplateRef('list')
 const mapSettingsModal = useTemplateRef('mapSettingsModal')
 
 const isLoaded = ref(false)
@@ -93,7 +94,7 @@ function save() {
     pvp: currentMap.pvp,
     mapEffects: currentMap.mapEffects,
     mapEventTiles: currentMap.mapEventTiles,
-    placedMapObjects: currentMap.placedMapObjects.map(({ id, mapObject, depth, isRotated, positionX, positionY }) => ({ id, mapObject, depth, isRotated, positionX, positionY })) ?? []
+    placedMapObjects: currentMap.placedMapObjects.map(({ id, mapObject, isRotated, positionX, positionY }) => ({ id, mapObject, isRotated, positionX, positionY })) ?? []
   }
 
   gameStore.connection?.emit('gm:map:update', data, (response: MapT) => {
diff --git a/src/composables/useTileProcessingComposable.ts b/src/composables/useTileProcessingComposable.ts
index 3b3d0b0..d67dd5f 100644
--- a/src/composables/useTileProcessingComposable.ts
+++ b/src/composables/useTileProcessingComposable.ts
@@ -4,26 +4,32 @@ import type { TileAnalysisResult, TileWorkerMessage } from '@/types/tileTypes'
 import { ref } from 'vue'
 
 // Constants for image processing
-const DOWNSCALE_WIDTH = 32
-const DOWNSCALE_HEIGHT = 16
+const DOWNSCALE_WIDTH = 16
+const DOWNSCALE_HEIGHT = 8
 const COLOR_SIMILARITY_THRESHOLD = 30
 const EDGE_SIMILARITY_THRESHOLD = 20
-const BATCH_SIZE = 4
+const BATCH_SIZE = 8
 
 export function useTileProcessingComposable() {
   const tileAnalysisCache = ref<Map<string, { color: { r: number; g: number; b: number }; edge: number; namePrefix: string }>>(new Map())
   const processingQueue = ref<Tile[]>([])
   let isProcessing = false
-  const worker = new Worker(new URL('@/workers/tileAnalyzerWorker.ts', import.meta.url), { type: 'module' })
 
-  worker.onmessage = (e: MessageEvent<TileAnalysisResult>) => {
-    const { tileId, color, edge, namePrefix } = e.data
-    tileAnalysisCache.value.set(tileId, { color, edge, namePrefix })
-    isProcessing = false
-    processBatch()
-  }
+  const NUM_WORKERS = 4
+  const workers = Array.from({ length: NUM_WORKERS }, () => new Worker(new URL('@/workers/tileAnalyzerWorker.ts', import.meta.url), { type: 'module' }))
+  let currentWorker = 0
 
-  async function processTileAsync(tile: Tile): Promise<void> {
+  // Modify worker message handling
+  workers.forEach((worker) => {
+    worker.onmessage = (e: MessageEvent<TileAnalysisResult>) => {
+      const { tileId, color, edge, namePrefix } = e.data
+      tileAnalysisCache.value.set(tileId, { color, edge, namePrefix })
+      isProcessing = false
+      processBatch()
+    }
+  })
+
+  async function processTileAsync(tile: Tile, worker: Worker): Promise<void> {
     if (tileAnalysisCache.value.has(tile.id)) return
 
     return new Promise((resolve) => {
@@ -60,7 +66,12 @@ export function useTileProcessingComposable() {
     isProcessing = true
 
     const batch = processingQueue.value.splice(0, BATCH_SIZE)
-    Promise.all(batch.map((tile) => processTileAsync(tile))).then(() => {
+    Promise.all(
+      batch.map((tile) => {
+        currentWorker = (currentWorker + 1) % NUM_WORKERS
+        return processTileAsync(tile, workers[currentWorker])
+      })
+    ).then(() => {
       isProcessing = false
       if (processingQueue.value.length > 0) {
         setTimeout(processBatch, 0)
@@ -87,7 +98,7 @@ export function useTileProcessingComposable() {
   }
 
   function cleanup() {
-    worker.terminate()
+    workers.forEach((worker) => worker.terminate())
   }
 
   return {
diff --git a/src/workers/tileAnalyzerWorker.ts b/src/workers/tileAnalyzerWorker.ts
index 752e7a4..4ead142 100644
--- a/src/workers/tileAnalyzerWorker.ts
+++ b/src/workers/tileAnalyzerWorker.ts
@@ -12,7 +12,6 @@ function analyzeTile(imageData: ImageData, tileId: string, tileName: string): Ti
   const { r, g, b } = getDominantColorFast(imageData)
   const edge = getEdgeComplexityFast(imageData)
   const namePrefix = tileName.split('_')[0]
-
   return {
     tileId,
     color: { r, g, b },
@@ -53,16 +52,14 @@ function getEdgeComplexityFast(imageData: ImageData) {
   const height = imageData.height
   let edgePixels = 0
 
-  for (let y = 0; y < height; y += PIXEL_SAMPLE_RATE) {
-    for (let x = 0; x < width; x += PIXEL_SAMPLE_RATE) {
+  // Only check every other row/column
+  for (let y = 0; y < height; y += PIXEL_SAMPLE_RATE * 2) {
+    for (let x = 0; x < width; x += PIXEL_SAMPLE_RATE * 2) {
       const i = (y * width + x) * 4
-      if (
-        data[i + 3] > 0 &&
-        (x === 0 || y === 0 || x >= width - PIXEL_SAMPLE_RATE || y >= height - PIXEL_SAMPLE_RATE || data[i - 4 * PIXEL_SAMPLE_RATE + 3] === 0 || data[i + 4 * PIXEL_SAMPLE_RATE + 3] === 0 || data[i - width * 4 * PIXEL_SAMPLE_RATE + 3] === 0 || data[i + width * 4 * PIXEL_SAMPLE_RATE + 3] === 0)
-      ) {
+      if (data[i + 3] > 0 && (x === 0 || y === 0 || x >= width - PIXEL_SAMPLE_RATE || y >= height - PIXEL_SAMPLE_RATE || data[i - 4 * PIXEL_SAMPLE_RATE + 3] === 0)) {
         edgePixels++
       }
     }
   }
-  return edgePixels * PIXEL_SAMPLE_RATE
+  return edgePixels * PIXEL_SAMPLE_RATE * 2
 }