From 455a9887acba2c62afd58c4b81b123436be1d30c Mon Sep 17 00:00:00 2001
From: kts of kettek <kts@kettek.net>
Date: Thu, 15 Feb 2024 16:39:32 -0800
Subject: [PATCH] Add function key file swap

---
 frontend/src/App.svelte                  | 10 ++++++++--
 frontend/src/components/Shortcuts.svelte |  2 +-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index 5a2726e..eca72ac 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -57,6 +57,7 @@
   $: focusedFile = files[focusedFileIndex] ?? null
   
   function selectFile(file: LoadedFile, index: number) {
+    if (index < 0 || index >= files.length) return
     focusedFileIndex = index
     refresh = {}
   }
@@ -70,6 +71,9 @@
   }
   function closeFile(index: number) {
     files = files.filter((_,i)=>i!==index)
+    if (focusedFileIndex === index) {
+      focusedFileIndex = Math.min(files.length-1, focusedFileIndex)
+    }
   }
 </script>
 
@@ -123,7 +127,7 @@
           <NumberInput size="sm" min={1} max={100} step={1} bind:value={brushSize}/>
         {/if}
       </menu>
-      <Tabs>
+      <Tabs bind:selected={focusedFileIndex}>
         {#each files as file, index}
           <Tab on:click={()=>selectFile(file, index)}>
             <span class='tab'>
@@ -133,10 +137,11 @@
           </Tab>
         {/each}
         <svelte:fragment slot="content">
-          {#each files as file}
+          {#each files as file, index}
             <Shortcuts group='editor2D' active={focusedFile===file}>
               <Shortcut cmd='undo' keys={['ctrl+z']} on:trigger={()=>file.undo()} />
               <Shortcut cmd='redo' keys={['ctrl+y', 'ctrl+shift+z']} on:trigger={()=>file.redo()} />
+              <Shortcut global cmd={'swapFile'+index} keys={['F'+(index+1)]} on:trigger={()=>selectFile(file, index)} />
             </Shortcuts>
             <TabContent>
               <Editor2D bind:file={file} refresh={refresh} bind:primaryColorIndex={primaryColorIndex} bind:secondaryColorIndex={secondaryColorIndex} bind:currentTool={currentTool} brushSize={brushSize} brushType={brushType} />
@@ -228,6 +233,7 @@
     text-overflow: ellipsis;
   }
   :global(.middle .bx--tabs__nav-link) {
+    position: relative;
     height: 1rem;
   }
   :global(.middle .bx--tabs) {
diff --git a/frontend/src/components/Shortcuts.svelte b/frontend/src/components/Shortcuts.svelte
index 6c06256..a4a2ea9 100644
--- a/frontend/src/components/Shortcuts.svelte
+++ b/frontend/src/components/Shortcuts.svelte
@@ -92,7 +92,7 @@
         let keys = opts.keys.map(v => {
           return v.replaceAll('ctrl', 'control')
         })
-        shortcuts.push({id, cmd: opts.cmd, group: group, global: opts.global, keys: keys.map(v=>keysToString(v.split('+'))), callback: opts.callback})
+        shortcuts.push({id, cmd: opts.cmd, group: group, global: opts.global, keys: keys.map(v=>keysToString(v.toLowerCase().split('+'))), callback: opts.callback})
         return shortcuts
       })