Proper insert location and delete selection behavior (#587)

Author: subdavis

client/dive-common/use/useModeManager.ts

@@ -48,7 +48,7 @@ export default function useModeManager({
   recipes: Recipe[];
   selectTrack: (trackId: TrackId | null, edit: boolean) => void;
   selectNextTrack: (delta?: number) => TrackId | null;
-  addTrack: (frame: number, defaultType: string) => Track;
+  addTrack: (frame: number, defaultType: string, afterId?: TrackId) => Track;
   removeTrack: (trackId: TrackId) => void;
 }) {
   let creating = false;
@@ -135,7 +135,9 @@ export default function useModeManager({
 
   function handleAddTrackOrDetection(): TrackId {
     // Handles adding a new track with the NewTrack Settings
-    const newTrackId = addTrack(frame.value, newTrackSettings.type).trackId;
+    const newTrackId = addTrack(
+      frame.value, newTrackSettings.type, selectedTrackId.value || undefined,
+    ).trackId;
     selectTrack(newTrackId, true);
     creating = true;
     return newTrackId;
@@ -341,15 +343,16 @@ export default function useModeManager({
   }
 
   function handleRemoveTrack(trackIds: TrackId[]) {
+    /* Figure out next track ID */
+    const maybeNextTrackId = selectNextTrack(1);
+    const previousOrNext = maybeNextTrackId !== null
+      ? maybeNextTrackId
+      : selectNextTrack(-1);
+    /* Delete track */
     trackIds.forEach((trackId) => {
       removeTrack(trackId);
     });
-    if (selectedTrackId.value !== null) {
-      if (trackIds.includes(selectedTrackId.value)) {
-        const newTrack = selectNextTrack(1) !== null ? selectNextTrack(1) : selectNextTrack(-1);
-        selectTrack(newTrack, false);
-      }
-    }
+    selectTrack(previousOrNext, false);
   }
 
   /** Toggle editing mode for track */

client/src/use/useTrackStore.ts

@@ -67,20 +67,26 @@ export default function useTrackStore({ markChangesPending }: UseTrackStoreParam
     markChangesPending('upsert', track);
   }
 
-  function insertTrack(track: Track) {
+  function insertTrack(track: Track, afterId?: TrackId) {
     track.bus.$on('notify', onChange);
     trackMap.set(track.trackId, track);
     intervalTree.insert([track.begin, track.end], track.trackId.toString());
-    trackIds.value.push(track.trackId);
+    if (afterId) {
+      /* Insert specifically after another trackId */
+      const insertIndex = trackIds.value.indexOf(afterId) + 1;
+      trackIds.value.splice(insertIndex, 0, track.trackId);
+    } else {
+      trackIds.value.push(track.trackId);
+    }
   }
 
-  function addTrack(frame: number, defaultType: string): Track {
+  function addTrack(frame: number, defaultType: string, afterId?: TrackId): Track {
     const track = new Track(getNewTrackId(), {
       begin: frame,
       end: frame,
       confidencePairs: [[defaultType, 1]],
     });
-    insertTrack(track);
+    insertTrack(track, afterId);
     markChangesPending('upsert', track);
     return track;
   }