From d2a1d836337e9886fb0eb7bf7e9c5e4454ee63b1 Mon Sep 17 00:00:00 2001
From: Dirk van Zon <dirk.v.zon@outlook.com>
Date: Mon, 4 May 2026 14:50:45 +0200
Subject: [PATCH] Added debounce to calculate layout function

---
 src/App.vue                                | 4 ++--
 src/components.d.ts                        | 2 +-
 src/components/AlbumList.vue               | 2 +-
 src/components/CassetteActionsBar.vue      | 6 +++---
 src/components/PlaylistList.vue            | 2 +-
 src/components/UnavailableCassetteItem.vue | 2 +-
 src/components/UnavailableTracksList.vue   | 2 +-
 src/components/cassette/Cassette.vue       | 8 ++++----
 src/components/cassette/CassetteItem.vue   | 2 +-
 src/components/cassette/CassetteSide.vue   | 2 +-
 src/pages/index.vue                        | 2 +-
 src/stores/cassette.alert.rules.ts         | 6 +++---
 src/stores/layout.ts                       | 7 ++++++-
 13 files changed, 26 insertions(+), 21 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 6d26210..e77311d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -47,7 +47,7 @@ function anchor() {
       position: trackLayout.position
     })
   }
-  layoutStore.calculateLayout()
+  layoutStore.calculateLayoutDebounced()
   if (trackStore.lastSelectedTrackId) {
     trackStore.selectedTracks = [trackStore.lastSelectedTrackId]
   }
@@ -57,7 +57,7 @@ function unanchor() {
   for (const id of trackStore.selectedTracks) {
     anchorStore.removeAnchor(id)
   }
-  layoutStore.calculateLayout()
+  layoutStore.calculateLayoutDebounced()
   if (trackStore.lastSelectedTrackId) {
     trackStore.selectedTracks = [trackStore.lastSelectedTrackId]
   }
diff --git a/src/components.d.ts b/src/components.d.ts
index ff0cf3b..0386c36 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -1,4 +1,4 @@
- 
+/* eslint-disable */
 // @ts-nocheck
 // biome-ignore lint: disable
 // oxlint-disable
diff --git a/src/components/AlbumList.vue b/src/components/AlbumList.vue
index 4bde27c..5c2de65 100644
--- a/src/components/AlbumList.vue
+++ b/src/components/AlbumList.vue
@@ -17,7 +17,7 @@ const infiniteScrollRef = useTemplateRef<InstanceType<typeof VInfiniteScroll>>('
 
 async function SelectItem(id: string) {
   await albumsStore.FetchAlbumTracks(id)
-  layoutStore.calculateLayout()
+  layoutStore.calculateLayoutDebounced()
 }
 
 function reset() {
diff --git a/src/components/CassetteActionsBar.vue b/src/components/CassetteActionsBar.vue
index bcc660e..2f2736a 100644
--- a/src/components/CassetteActionsBar.vue
+++ b/src/components/CassetteActionsBar.vue
@@ -18,7 +18,7 @@ const selectedSortType = computed({
 
 function addCassette() {
   cassetteStore.addCassette()
-  layoutStore.calculateLayout()
+  layoutStore.calculateLayoutDebounced()
 }
 
 function removeSource(sourceId: string) {
@@ -27,7 +27,7 @@ function removeSource(sourceId: string) {
   removedTracks.forEach(trackId => {
     anchorStore.removeAnchor(trackId)
   })
-  layoutStore.calculateLayout()
+  layoutStore.calculateLayoutDebounced()
 }
 
 const sources = computed(() => {
@@ -63,7 +63,7 @@ const menuBadgeContent = computed(() => trackStore.unavailableTrackIds.length >
         <!-- Remove items -->
         <v-select :items="sources" item-value="id" item-title="name" label="Sources" chips multiple density="compact"
           variant="outlined" hide-details v-model="projectStore.selectedSources"
-          @update:modelValue="layoutStore.calculateLayout" :disabled="!projectStore.hasSources">
+          @update:modelValue="layoutStore.calculateLayoutDebounced" :disabled="!projectStore.hasSources">
           <template v-slot:item="{ props: itemProps, item }">
             <v-list-item v-bind="itemProps" :title="item.raw.name">
               <template v-slot:prepend="{ isSelected, select }">
diff --git a/src/components/PlaylistList.vue b/src/components/PlaylistList.vue
index e022884..e2d6c3e 100644
--- a/src/components/PlaylistList.vue
+++ b/src/components/PlaylistList.vue
@@ -17,7 +17,7 @@ const infiniteScrollRef = useTemplateRef<InstanceType<typeof VInfiniteScroll>>('
 
 async function SelectItem(id: string) {
   await playlistStore.FetchPlaylistTracks(id)
-    layoutStore.calculateLayout()
+    layoutStore.calculateLayoutDebounced()
 }
 
 function reset() {
diff --git a/src/components/UnavailableCassetteItem.vue b/src/components/UnavailableCassetteItem.vue
index 942fc8c..4f22426 100644
--- a/src/components/UnavailableCassetteItem.vue
+++ b/src/components/UnavailableCassetteItem.vue
@@ -13,7 +13,7 @@ const track = computed(() => tracksStore.GetTrackById(props.trackId))
 
 function makeTrackAvailable() {
   tracksStore.MarkTrackAsAvailable(props.trackId)
-  layoutStore.calculateLayout()
+  layoutStore.calculateLayoutDebounced()
 }
 </script>
 
diff --git a/src/components/UnavailableTracksList.vue b/src/components/UnavailableTracksList.vue
index ee4b4c2..39e2c7b 100644
--- a/src/components/UnavailableTracksList.vue
+++ b/src/components/UnavailableTracksList.vue
@@ -32,7 +32,7 @@ function clearUnavailableTracks() {
     for (const trackId of tracksStore.unavailableTrackIds) {
         tracksStore.MarkTrackAsAvailable(trackId)
     }
-    layoutStore.calculateLayout()
+    layoutStore.calculateLayoutDebounced()
 }
 </script>
 
diff --git a/src/components/cassette/Cassette.vue b/src/components/cassette/Cassette.vue
index ad5f4be..66393d1 100644
--- a/src/components/cassette/Cassette.vue
+++ b/src/components/cassette/Cassette.vue
@@ -24,13 +24,13 @@ const topAlert = computed(() => {
 function removeCassette() {
   cassetteStore.removeCassette(props.cassetteId)
   anchorsStore.removeAnchoresByCassetteId(props.cassetteId)
-  layoutStore.calculateLayout()
+  layoutStore.calculateLayoutDebounced()
 }
 
 function addSide() {
   if (cassette.value == undefined) return
   cassetteStore.updateSidesCount(props.cassetteId, cassette.value.sidesCount + 1)
-  layoutStore.calculateLayout()
+  layoutStore.calculateLayoutDebounced()
 }
 
 function removeSide() {
@@ -38,7 +38,7 @@ function removeSide() {
   if (cassette.value.sidesCount <= 1) return
   cassetteStore.updateSidesCount(props.cassetteId, cassette.value.sidesCount - 1)
   anchorsStore.removeAnchorsByTapeSide(props.cassetteId, cassette.value.sidesCount)
-  layoutStore.calculateLayout()
+  layoutStore.calculateLayoutDebounced()
 }
 
 const capacityMinutes = computed<number>({
@@ -49,7 +49,7 @@ const capacityMinutes = computed<number>({
   set(mins: number) {
     if (!cassette.value) return
     cassetteStore.updateCapacity(cassette.value.id, mins * 60000)
-    layoutStore.calculateLayout()
+    layoutStore.calculateLayoutDebounced()
   }
 })
 
diff --git a/src/components/cassette/CassetteItem.vue b/src/components/cassette/CassetteItem.vue
index 699b128..18f7cf2 100644
--- a/src/components/cassette/CassetteItem.vue
+++ b/src/components/cassette/CassetteItem.vue
@@ -44,7 +44,7 @@ function toggleAnchor(anchored: boolean) {
     })
   }
 
-  layoutStore.calculateLayout()
+  layoutStore.calculateLayoutDebounced()
 
   const trackSelected = tracksStore.selectedTracks.includes(props.trackId)
   tracksStore.ClearSelectedTracks()
diff --git a/src/components/cassette/CassetteSide.vue b/src/components/cassette/CassetteSide.vue
index 035c550..ceff332 100644
--- a/src/components/cassette/CassetteSide.vue
+++ b/src/components/cassette/CassetteSide.vue
@@ -54,7 +54,7 @@ async function onChanged(event: DragChangeEvent<string>) {
     }
   }
 
-  layoutStore.calculateLayout()
+  layoutStore.calculateLayoutDebounced()
   tracksCache.value = []
 }
 
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 0e81b4c..1c92400 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -35,7 +35,7 @@ onMounted(() => {
     source: item.source
   }))
   tracks.forEach((track) => trackStore.AddTrack(track))
-  layoutStore.calculateLayout()
+  layoutStore.calculateLayoutDebounced()
 })
 projectStore.addSource({
   type: 'playlist',
diff --git a/src/stores/cassette.alert.rules.ts b/src/stores/cassette.alert.rules.ts
index 79f1e9c..3fb35be 100644
--- a/src/stores/cassette.alert.rules.ts
+++ b/src/stores/cassette.alert.rules.ts
@@ -75,7 +75,7 @@ const shorterCassetteRule: AlertRule<ShorterCassettePayload> = {
     fn: () => {
       const layoutStore = useLayoutStore();
       cassette.capacityMs = payload!.suggestedCapacityMs;
-      layoutStore.calculateLayout();
+      layoutStore.calculateLayoutDebounced();
     },
     message: `Set capacity to ${payload!.label}`,
   }),
@@ -121,7 +121,7 @@ const expandCassetteRule: AlertRule<ExpandCassettePayload> = {
     fn: () => {
       const layoutStore = useLayoutStore();
       cassette.capacityMs = payload!.suggestedCapacityMs;
-      layoutStore.calculateLayout();
+      layoutStore.calculateLayoutDebounced();
     },
     message: `Expand to ${payload!.label}`,
   }),
@@ -169,7 +169,7 @@ const needsNewCassetteRule: AlertRule<AddCassettePayload> = {
       const layoutStore = useLayoutStore();
 
       cassetteStore.addCassette();
-      layoutStore.calculateLayout();
+      layoutStore.calculateLayoutDebounced();
     },
     message: "Add another cassette",
   }),
diff --git a/src/stores/layout.ts b/src/stores/layout.ts
index 8386b0d..c6c4ed0 100644
--- a/src/stores/layout.ts
+++ b/src/stores/layout.ts
@@ -6,6 +6,7 @@ import { useTracksStore } from "./tracks";
 import { useAnchorsStore } from "./anchor";
 import { TapeSide } from "@/sorting/tapeSideLayout";
 import { useProjectStore } from "./project";
+import { debounce } from "lodash";
 
 export const useLayoutStore = defineStore('layout', {
     state: () => ({
@@ -55,12 +56,13 @@ export const useLayoutStore = defineStore('layout', {
                 throw new Error(`Unknown sorter type: ${type}`);
             }
             this.selectedSortType = type;
-            this.calculateLayout();
+            this.calculateLayoutDebounced();
         },
         getAvailableSorters() {
             return trackSorterRegistry.list();
         },
         calculateLayout() {
+            console.log("Calculating layout...") // --- IGNORE ---
             const cassetteStore = useCassettesStore()
             const trackStore = useTracksStore()
             const anchorsStore = useAnchorsStore()
@@ -92,6 +94,9 @@ export const useLayoutStore = defineStore('layout', {
             this._calculate_ordered_tracks(sides)
             this._calculate_track_locations(sides)
         },
+        calculateLayoutDebounced: debounce(function (this: any) {
+            this.calculateLayout()
+        }, 2),
         _calculate_ordered_tracks(sides: TapeSide[]) {
             sides.forEach(side => {
                 this.orderedTracks.push(...side.toArray())