[General] Take care of a few todos

Author: janishutz

notes.md

@@ -14,10 +14,11 @@
 - [X] Gradients with three points
 - [ ] Legend displaying what the colours mean
 - [ ] Pick default algorithm
-- [ ] Space to confirm current assignment (i.e. create annotation for it)
-- [ ] Keybind to flag as invalid
+- [X] Space to confirm current assignment (i.e. create annotation for it)
+- [X] Keybind to flag as invalid
+- [X] Shift to show all algorithms for current fixation
+- [ ] Use other combination for the above, as shift key cannot be detected (neither all other modifiers)
 - [ ] Do we need more settings for the above?
-- [ ] Shift to show all algorithms for current fixation
 - [X] Fixation click on fixation in box directly assigning it
 - [ ] Test the above, may need to be changed to a more complex handler
 - [X] Filter annotations by algorithms

src/components/admin/surveys/SurveyBrowser.vue

@@ -1,13 +1,15 @@
 <script setup lang="ts">
+    import {
+        onMounted,
+        onUnmounted,
+        ref
+    } from 'vue';
     import {
         adminBaseRoute
     } from '../adminConfig';
     import {
         listSurveys
     } from '@/ts/surveys';
-    import {
-        ref
-    } from 'vue';
     import testData from '@/ts/dev/SurveyTesData.json';
     import {
         useNotification
@@ -67,7 +69,16 @@
         router.push( adminBaseRoute + 'surveys/create' );
     };
 
-    reloadFromServer();
+    onMounted( () => {
+        reloadFromServer();
+        document.addEventListener( 'eyetap:survey:create', reloadFromServer );
+    } );
+
+    onUnmounted( () => {
+        try {
+            document.removeEventListener( 'eyetap:survey:create', reloadFromServer );
+        } catch { /* empty */ }
+    } );
 </script>
 
 <template>

src/components/admin/surveys/SurveyCreator.vue

@@ -133,6 +133,7 @@
         ).then( links => {
             surveyStore.setLinks( links );
             router.push( adminBaseRoute + 'surveys/magiclinks' );
+            document.dispatchEvent( new CustomEvent( 'eyetap:survey:create' ) );
         } );
     };
 

src/editor/components/KeybindPane.vue

@@ -29,7 +29,7 @@
             'function': 'Undo'
         },
         {
-            'keybind': 'Delete / Backspace',
+            'keybind': 'Backspace',
             'function': 'Undo'
         },
         {
@@ -51,6 +51,10 @@
         {
             'keybind': 'Letters',
             'function': 'Assign the current fixation to the closest box of this letter'
+        },
+        {
+            'keybind': 'Delete',
+            'function': 'Mark fixation as invalid'
         }
     ];
     const show = defineModel<boolean>();

src/editor/components/OptionsPane.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-
     import {
         boxesDisplay,
         boxesDisplayOptions,
@@ -17,6 +16,7 @@
     <div class="options-pane">
         <div class="options-container">
             <div class="options-section">
+                {{ linesDisplay }}
                 <p> Display </p>
                 <SliderOptions
                     v-model="boxesDisplay"

src/editor/io/keyboard.ts

@@ -1,15 +1,17 @@
+import {
+    type LinesDisplay,
+    disableKeyHandler,
+    keyboardZoomPanStep,
+    keyboardZoomStep,
+    linesDisplay
+} from '../config';
 import {
     algorithmsList,
     annotations,
     fixations,
     selectedAlgorithm,
     selectedFixation
 } from '../data';
-import {
-    disableKeyHandler,
-    keyboardZoomPanStep,
-    keyboardZoomStep
-} from '../config';
 import {
     onMounted,
     onUnmounted
@@ -36,6 +38,8 @@ import zoom from '../manager/zoom';
 export const keyboardHandler = ( renderer: Renderer ) => {
     const annotation = annotationManager( renderer );
 
+    let prevSelectedDisplayMode: LinesDisplay = linesDisplay.value;
+
     const handler = ( ev: KeyboardEvent ) => {
         if ( !disableKeyHandler.value ) {
             if ( isCharacterKey( ev.key ) && !ev.ctrlKey && !ev.metaKey && !ev.altKey ) {
@@ -46,7 +50,7 @@ export const keyboardHandler = ( renderer: Renderer ) => {
                     false,
                     true
                 );
-            } else if ( isUndoCmd( ev ) || ev.key === 'Backspace' || ev.key === 'Delete' ) {
+            } else if ( isUndoCmd( ev ) || ev.key === 'Backspace' ) {
                 ev.preventDefault();
                 undo();
             } else if ( isRedoCmd( ev ) ) {
@@ -94,18 +98,37 @@ export const keyboardHandler = ( renderer: Renderer ) => {
                         false
                     );
                 } catch { /* empty */ }
+            } else if ( ev.key === 'Delete' ) {
+                // TODO: Update this keybind if needed
+                annotation.markAsInvalid( selectedFixation.value );
+            } else if ( ev.key === 'Enter' ) {
+                if ( linesDisplay.value !== 'allalgos' ) {
+                    prevSelectedDisplayMode = linesDisplay.value;
+                    linesDisplay.value = 'allalgos';
+                }
             }
         }
     };
 
+    const keyUpHandler = ( ev: KeyboardEvent ) => {
+        if ( ev.key === 'Enter' ) {
+            linesDisplay.value = prevSelectedDisplayMode;
+        }
+    };
+
     onMounted( () => {
         document.addEventListener( 'keydown', handler );
+        document.addEventListener( 'keyup', keyUpHandler );
     } );
 
     onUnmounted( () => {
         try {
             document.removeEventListener( 'keydown', handler );
         } catch { /* empty */ }
+
+        try {
+            document.removeEventListener( 'keyup', keyUpHandler );
+        } catch { /* empty */ }
     } );
 };
 

src/types/globals/events.d.ts

@@ -22,5 +22,6 @@ declare global {
         'eyetap:keys:next': CustomEvent<void>;
         'eyetap:keys:prev': CustomEvent<void>;
         'eyetap:theme': CustomEvent<void>;
+        'eyetap:survey:create': CustomEvent<void>;
     }
 }