Added debounce to calculate layout function

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]
   }

src/components.d.ts

@@ -1,4 +1,4 @@
- 
+/* eslint-disable */
 // @ts-nocheck
 // biome-ignore lint: disable
 // oxlint-disable

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() {

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 }">

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() {

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>
 

src/components/UnavailableTracksList.vue

@@ -32,7 +32,7 @@ function clearUnavailableTracks() {
     for (const trackId of tracksStore.unavailableTrackIds) {
         tracksStore.MarkTrackAsAvailable(trackId)
     }
-    layoutStore.calculateLayout()
+    layoutStore.calculateLayoutDebounced()
 }
 </script>
 

src/components/cassette/Cassette.vue

@@ -24,21 +24,21 @@ 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() {
   if (cassette.value == undefined) return
   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()
   }
 })
 

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()

src/components/cassette/CassetteSide.vue

@@ -54,7 +54,7 @@ async function onChanged(event: DragChangeEvent<string>) {
     }
   }
 
-  layoutStore.calculateLayout()
+  layoutStore.calculateLayoutDebounced()
   tracksCache.value = []
 }
 

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',

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",
   }),

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())