[Editor] Add auto scroll for fixations and zoom to fixation instead of origin

Author: janishutz

notes.md

@@ -45,8 +45,8 @@
 - [X] Backspace moves backwards if no annotation present
 - [X] Space bar assignment doesn't work (on Mac at least) --> TODO: Verify
 - [ ] Optional: Show zoom box if lots of fixations close by
-- [ ] Zoom to fixation
-- [ ] Move to fixation when moving around (and zoom factor > 1)
+- [X] Zoom to fixation
+- [X] Move to fixation when moving around (and zoom factor > 1)
 - [ ] **Render hovered boxes above everything else (to make it more legible, maybe add condition to this)**
 
 

src/editor/data/index.ts

@@ -3,7 +3,8 @@ import {
     ref
 } from 'vue';
 import type {
-    EditorAnnotation
+    EditorAnnotation,
+    EditorPoint
 } from '../types/annotation';
 import type {
     EditorCharacterBoundingBox
@@ -52,6 +53,9 @@ export const canvasSize = ref( {
     ...referenceCanvasSize
 } );
 
-export const originalSize = ref( {
+export const originalSize: Ref<{
+    'width': number;
+    'height': number;
+}> = ref( {
     ...referenceCanvasSize
 } );

src/editor/io/keyboard.ts

@@ -7,9 +7,12 @@ import {
 } from '../config';
 import {
     annotations,
-    fixations,
     selectedFixation
 } from '../data';
+import {
+    goToNextFixation,
+    goToPrevFixation
+} from '../manager/fixations';
 import {
     onMounted,
     onUnmounted
@@ -72,9 +75,7 @@ export const keyboardHandler = ( renderer: Renderer ) => {
             } else if ( ( ev.key === 'Backspace' || ev.key === 'Delete' ) && !ev.shiftKey ) {
                 // Delete annotation or move back
                 if ( !annotation.deleteByFixID( selectedFixation.value, true ) ) {
-                    if ( selectedFixation.value > -1 ) {
-                        selectedFixation.value = mod( selectedFixation.value - 1, fixations.value.length );
-                    }
+                    goToPrevFixation();
                 }
             } else if ( ev.key === 's' && ( ev.ctrlKey || ev.metaKey ) ) {
                 // Save
@@ -103,14 +104,10 @@ export const keyboardHandler = ( renderer: Renderer ) => {
                 }
             } else if ( ev.key === 'ArrowRight' ) {
                 // Move to next fixation
-                if ( selectedFixation.value > -1 ) {
-                    selectedFixation.value = mod( selectedFixation.value + 1, fixations.value.length );
-                }
+                goToNextFixation();
             } else if ( ev.key === 'ArrowLeft' ) {
                 // Move to previous fixation
-                if ( selectedFixation.value > -1 ) {
-                    selectedFixation.value = mod( selectedFixation.value - 1, fixations.value.length );
-                }
+                goToPrevFixation();
             } else if ( ( ev.key === 'Delete' || ev.key === 'Backspace' ) && ev.shiftKey ) {
                 // Mark a fixation as invalid
                 ev.preventDefault();
@@ -175,11 +172,3 @@ const isRedoCmd = ( event: KeyboardEvent ) => {
     return ( ( event.ctrlKey || event.metaKey ) && event.key.toLowerCase() === 'y' )
         || ( ( event.ctrlKey || event.metaKey ) && event.shiftKey && event.key.toLowerCase() === 'z' );
 };
-
-/**
- * Computes the modulo of a number because JS is too stupid to do it properly
- * @param val - The value to compute for
- */
-const mod = ( val: number, mod: number ) => {
-    return ( ( val % mod ) + mod ) % mod;
-};

src/editor/manager/fixations.ts

@@ -1,12 +1,19 @@
+import {
+    fixations,
+    hoveredFixation,
+    selectedFixation,
+    zoomFactor
+} from '../data';
 import type {
     EditorPoint
 } from '../types/annotation';
 import {
     getFixationIdByCoodianate
 } from '../association/fixations';
 import {
-    hoveredFixation
-} from '../data';
+    mod
+} from '../util/arithmetic';
+import zoom from './zoom';
 
 // Sets the hovered fixation and returns if false if one is hovered
 // (Why? See move manager)
@@ -17,3 +24,24 @@ export const fixationHighlightHandler = ( pos: EditorPoint ): boolean => {
 
     return false;
 };
+
+export const goToNextFixation = () => {
+    selectFixation( selectedFixation.value + 1 );
+};
+
+export const goToPrevFixation = () => {
+    selectFixation( selectedFixation.value - 1 );
+};
+
+const selectFixation = ( val: number ) => {
+    if ( selectedFixation.value > -1 ) {
+        selectedFixation.value = mod( val, fixations.value.length );
+
+        if ( zoomFactor.value > 1 ) {
+            zoom.setViewPortOriginFromCenter( {
+                'x': fixations.value[ selectedFixation.value ]!.x!,
+                'y': fixations.value[ selectedFixation.value ]!.y!
+            } );
+        }
+    }
+};

src/editor/manager/zoom.ts

@@ -1,6 +1,8 @@
 import {
     canvasPosition,
+    fixations,
     originalSize,
+    selectedFixation,
     zoomFactor
 } from '../data';
 import {
@@ -36,9 +38,12 @@ const setViewPortOriginFromCenter = ( target: EditorPoint ) => {
     // translate to percentages (canvasPosition is in percentages)
     // Try to center target in the viewport
     canvasPosition.value = {
-        'x': toPercentageOfOriginal( limiter( originFromCenter( target.x, 'width' ), 'width' ), 'width' ),
-        'y': toPercentageOfOriginal( limiter( originFromCenter( target.y, 'height' ), 'height' ), 'height' )
+        'x': roundToDigits( toPercentageOfOriginal( limiter( centerCoordinateInViewPort( target.x, 'width' ), 'width' ), 'width' ) ),
+        'y': roundToDigits( toPercentageOfOriginal( limiter( centerCoordinateInViewPort( target.y, 'height' ), 'height' ), 'height' ) )
     };
+    console.log( {
+        ...canvasPosition.value
+    } );
 };
 
 /**
@@ -68,8 +73,10 @@ const toPercentageOfOriginal = ( val: number, side: 'width' | 'height' ) => {
 };
 
 /** Get the origin coordinate of the text from the center */
-const originFromCenter = ( val: number, side: 'width' | 'height' ) => {
-    return val - ( originalSize.value[ side ] / 2 );
+const centerCoordinateInViewPort = ( val: number, side: 'width' | 'height' ) => {
+    const shownPixels = originalSize.value[ side ] / zoomFactor.value;
+
+    return val - ( shownPixels / 2 );
 };
 
 /** Sets limits for the zoom move (i.e. so you can't move the entire text out of view */
@@ -106,7 +113,13 @@ const setFactor = ( factor: number ) => {
 
     // NOTE: If you want to do relative to mouse position,
     // add a mouse position in here and use setViewPortOriginFromCenter
-    setViewPortOrigin( getViewPortOrigin() );
+    if ( selectedFixation.value < 0 )
+        setViewPortOrigin( getViewPortOrigin() );
+    else
+        setViewPortOriginFromCenter( {
+            'x': fixations.value[ selectedFixation.value ]!.x!,
+            'y': fixations.value[ selectedFixation.value ]!.y!
+        } );
 };
 
 /** Returns the zoom factor */

src/editor/util/arithmetic.ts

@@ -5,3 +5,12 @@ import type {
 export const distanceBetweenPoints = ( p1: EditorPoint, p2: EditorPoint ) => {
     return Math.sqrt( Math.pow( p1.x - p2.x, 2 ) + Math.pow( p1.y - p2.y, 2 ) );
 };
+
+
+/**
+ * Computes the modulo of a number because JS is too stupid to do it properly
+ * @param val - The value to compute for
+ */
+export const mod = ( val: number, mod: number ) => {
+    return ( ( val % mod ) + mod ) % mod;
+};