handle deletion cases

website/src/repl/panel/PatternsTab.jsx

@@ -54,7 +54,6 @@ export function PatternsTab({ context }) {
   const { userPatterns } = useSettings();
   const activePattern = useActivePattern();
   const viewingPattern = useViewingPattern();
-  // const isExample = useMemo(() => activePattern && !!tunes[activePattern], [activePattern]);
   const onPatternClick = (pattern, data) => {
     // display selected pattern code in the window
     context.handleUpdate({ pattern, code: data.code, evaluate: false });
@@ -89,7 +88,14 @@ export function PatternsTab({ context }) {
                 <DocumentDuplicateIcon className="w-5 h-5" />
               </button>
               {!isExample && (
-                <button className="hover:opacity-50" onClick={() => deletePattern(viewingPattern)} title="Delete">
+                <button
+                  className="hover:opacity-50"
+                  onClick={() => {
+                    const { code, pattern } = deletePattern(viewingPattern);
+                    context.handleUpdate({ code, pattern, evaluate: false });
+                  }}
+                  title="Delete"
+                >
                   <TrashIcon className="w-5 h-5" />
                 </button>
               )}

website/src/settings.mjs

@@ -27,7 +27,6 @@ export const defaultSettings = {
 
 export const settingsMap = persistentMap('strudel-settings', defaultSettings);
 
-
 //pattern that the use is currently viewing in the window
 const $viewingPattern = persistentAtom('viewingPattern', '', { listen: false });
 export function setViewingPattern(key) {
@@ -127,7 +126,7 @@ export function createNewUserPattern() {
   const num = String(todays.length + 1).padStart(3, '0');
   const pattern = date + '_' + num;
   const code = 's("hh")';
-  return {pattern, code}
+  return { pattern, code };
 }
 
 export function clearUserPatterns() {
@@ -170,13 +169,12 @@ export function renamePattern(pattern) {
   setViewingPattern(newName);
 }
 
-export function updateUserCode(pattern, code ) {
+export function updateUserCode(pattern, code) {
   const userPatterns = getUserPatterns();
   setUserPatterns({ ...userPatterns, [pattern]: { code } });
 }
 
 export function deletePattern(pattern) {
-
   if (!pattern) {
     console.warn('cannot delete: no pattern selected');
     return;
@@ -189,8 +187,35 @@ export function deletePattern(pattern) {
   if (!confirm(`Really delete the selected pattern "${pattern}"?`)) {
     return;
   }
-  setUserPatterns(Object.fromEntries(Object.entries(userPatterns).filter(([key]) => key !== pattern)));
+  // const updatedPatterns = Object.fromEntries(Object.entries(userPatterns).filter(([key]) => key !== pattern));
-  setViewingPattern('');
+  let patternsArray = Object.entries(userPatterns).sort((a, b) => a[0].localeCompare(b[0]));
+  const deleteIndex = patternsArray.findIndex(([key]) => key === pattern);
+  patternsArray.splice(deleteIndex, 1);
+  const updatedPatterns = Object.fromEntries(patternsArray);
+
+  setUserPatterns(updatedPatterns);
+
+  //create new pattern if no other patterns
+  if (!patternsArray.length) {
+    return createNewUserPattern();
+  }
+  // // or default to active pattern
+  // const activePatternID = getActivePattern();
+  // const activePatternData = updatedPatterns[activePatternID];
+  // if (activePatternData?.code != null) {
+  //   return { pattern: activePatternID, code: activePatternData.code };
+  // }
+  // or find pattern at next index
+
+  const next = patternsArray[deleteIndex];
+  if (next != null) {
+    const [pat, data] = next;
+    return { pattern: pat, code: data.code };
+  }
+  // or find pattern at previous index
+  const previous = patternsArray[deleteIndex - 1];
+  const [pat, data] = previous;
+  return { patttern: pat, code: data.code };
 }
 
 export function createDuplicatePattern(pattern) {
@@ -199,8 +224,8 @@ export function createDuplicatePattern(pattern) {
     console.warn('cannot duplicate: no pattern selected');
     return;
   }
-  const newPattern  = getNextCloneName(pattern);
+  const newPattern = getNextCloneName(pattern);
-  return {pattern: newPattern, code: latestCode}
+  return { pattern: newPattern, code: latestCode };
 }
 
 export async function importPatterns(fileList) {