[Editor] Various bug fixes

Author: janishutz

notes.md

@@ -55,3 +55,5 @@
 - [X] survey export -- TODO: Testing
 - [X] on index errors open parser settings panel
 - [X] How to get reader id for one file per reader import scheme for fixations?
+
+http://localhost:8081/login?magic=JTdCJTIydXNlcm5hbWUlMjIlM0ElMjJCcmlza1NlYWwyMDklMjIlMkMlMjJwYXNzd29yZCUyMiUzQSUyMiUzRE9Ccy03cEIlMjIlN0Q=

src/editor/EditorComponent.vue

@@ -1,12 +1,17 @@
 <script setup lang="ts">
     import '../scss/components/tour.scss';
+    import {
+        type Ref,
+        ref
+    } from 'vue';
+    import {
+        VTour,
+        type VTourExposedMethods
+    } from '@globalhive/vuejs-tour';
     import AnnotationCompletion from './components/AnnotationCompletion.vue';
     import EditorView from './components/EditorView.vue';
     import PageTour from './tour/PageTour.vue';
     import SidePane from './components/SidePane.vue';
-    import {
-        VTour
-    } from '@globalhive/vuejs-tour';
     import {
         useAnnotationNavigation
     } from './composables/useAnnotationNavigation';
@@ -18,11 +23,12 @@
     const {
         goToNextAnnotation, isAnnotationComplete
     } = useAnnotationNavigation();
+    const tour: Ref<VTourExposedMethods | null> = ref( null );
     const {
         steps,
         showWelcomeTour,
         startFullTour
-    } = useEditorTour();
+    } = useEditorTour( tour );
 
 </script>
 

src/editor/io/mouse.ts

@@ -10,7 +10,8 @@ import {
 } from '../data';
 import {
     canvasToOriginalCoordinates,
-    scaleInverse
+    scaleInverse,
+    scalingFactor
 } from '../render/scaling';
 import {
     isMouseDragging,
@@ -35,8 +36,6 @@ export const mouseHandler = ( target: Ref<HTMLElement | null> ) => {
     let rect: DOMRect = new DOMRect( 0, 0, 0, 0 );
 
     const mouseDownHandler = ( ev: MouseEvent ) => {
-        updateRect();
-
         if ( ev.ctrlKey )
             zoomPanStartHandler( ev );
         else if ( ev.button === 0 ) {
@@ -49,8 +48,6 @@ export const mouseHandler = ( target: Ref<HTMLElement | null> ) => {
     };
 
     const mouseUpHandler = ( ev: MouseEvent ) => {
-        updateRect();
-
         if ( ev.button === 0 ) {
             isMouseDragging.value = false;
             isZoomDragging.value = false;
@@ -134,7 +131,10 @@ export const mouseHandler = ( target: Ref<HTMLElement | null> ) => {
         } catch { /* empty */ }
     } );
 
-    watch( canvasSize, updateRect );
+    watch( [
+        canvasSize,
+        scalingFactor
+    ], updateRect );
     watch( isSideBarCollapsed, () => {
         setTimeout( () => {
             updateRect();

src/editor/loaders/backend.ts

@@ -47,13 +47,13 @@ export const loadEditorDataFromBackend = async ( renderer: Renderer ) => {
 
     fixations.value = [];
     fix.forEach( f => {
-        const isInavlid = sessionData.value.removedFixations?.includes( f.id! ) ?? false;
+        const isInvalid = sessionData.value.removedFixations?.includes( f.id! ) ?? false;
 
         fixations.value.push( {
             'x': f.x!,
             'y': f.y!,
             'id': f.id!,
-            'assigned': isInavlid ? 'invalid' : 'unassigned',
+            'assigned': isInvalid ? 'invalid' : 'unassigned',
             'disagreement': f.disagreement
         } );
     } );
@@ -106,15 +106,18 @@ export const loadEditorDataFromBackend = async ( renderer: Renderer ) => {
 
         algos.forEach( algo => {
             const details = additionalAnnotationLoad[ algo ]! as AnnotationDto;
-            const ann: EditorAnnotation = {
-                'fixationIdx': getFixIdxFromId( details.fixation!.id! ),
-                'boxIdx': getBoxIdxFromId( details.characterBoundingBox!.id! ),
-                'algorithm': algo
-            };
 
-            fixations.value[ ann.fixationIdx ]!.assigned = details.annotationType === 'ANNOTATED' ? 'assigned' : 'machine';
+            if ( details.fixation && details.characterBoundingBox ) {
+                const ann: EditorAnnotation = {
+                    'fixationIdx': getFixIdxFromId( details.fixation!.id! ),
+                    'boxIdx': getBoxIdxFromId( details.characterBoundingBox!.id! ),
+                    'algorithm': algo
+                };
 
-            annotations.value.push( ann );
+                fixations.value[ ann.fixationIdx ]!.assigned = details.annotationType === 'ANNOTATED' ? 'assigned' : 'machine';
+
+                annotations.value.push( ann );
+            }
         } );
     }
 

src/editor/manager/annotations.ts

@@ -39,6 +39,7 @@ export const annotationManager = ( renderer: Renderer ): AnnotationManager => {
                 'boxIdx': boundingBoxIndex
             };
 
+            // Try to delete by fix id
             deleteByFixID( annotation.fixationIdx );
 
             annotations.value.push( annotation );

src/editor/manager/boxes.ts

@@ -22,6 +22,7 @@ import {
 } from '../render/manager';
 
 let previousIdx = -1;
+let previouslyRendered = false;
 
 export const boxHighlightHandler = ( renderer: Renderer ) => {
     return ( pos: EditorPoint, highlightCurrent: boolean ) => {
@@ -36,7 +37,7 @@ export const boxHighlightHandler = ( renderer: Renderer ) => {
                 setHighlightClass( previousIdx, 'none' );
             }
         } else {
-            if ( idx !== previousIdx ) {
+            if ( idx !== previousIdx || ( !previouslyRendered && highlightCurrent ) ) {
                 needToRedraw = true;
 
                 if ( previousIdx > -1 )
@@ -46,8 +47,11 @@ export const boxHighlightHandler = ( renderer: Renderer ) => {
             }
 
             if ( highlightCurrent === false ) {
+                previouslyRendered = false;
                 setHighlightClass( idx, 'none' );
                 needToRedraw = true;
+            } else {
+                previouslyRendered = true;
             }
         }
 

src/editor/manager/click.ts

@@ -9,6 +9,7 @@ import {
 import {
     isMouseDragging,
     lineStart,
+    mouseDragEnd,
     mousePos
 } from '../data/io';
 import type {
@@ -57,15 +58,14 @@ export const mouseClickHandler = ( renderer: Renderer ) => {
 
             renderer.renderIO.render();
         } else {
-            if ( distanceBetweenPoints( {
+            const distance = distanceBetweenPoints( {
                 'x': fixations.value[ selectedFixation.value ]!.x!,
                 'y': fixations.value[ selectedFixation.value ]!.y!
-            }, mousePos.value ) > fixationRadius.value ) {
-            // Get bounding box that was hovered at mouseUp
-                const bb = getBoxIdFromCoordinate( mousePos.value );
+            }, mouseDragEnd.value );
 
-                // Try to delete the annotation if it was present
-                annotation.deleteByFixID( selectedFixation.value );
+            if ( distance > fixationRadius.value ) {
+                // Get bounding box that was hovered at mouseUp
+                const bb = getBoxIdFromCoordinate( mousePos.value );
 
                 annotation.create( bb, selectedFixation.value );
             }

src/editor/render/scaling.ts

@@ -95,10 +95,7 @@ export const useScaler = ( elementToGetParentFrom: Ref<HTMLElement | null>, rend
         canvasPosition
     ], renderer.renderAll );
 
-    const observer = new ResizeObserver( () => {
-        console.log( 'scaling' );
-        scaler();
-    } );
+    const observer = new ResizeObserver( scaler );
 
     onMounted( () => {
         target = elementToGetParentFrom.value!.parentElement!;

src/editor/tour/PageTour.vue

@@ -1,4 +1,3 @@
-
 <script setup lang="ts">
     import {
         isSideBarCollapsed
@@ -10,8 +9,6 @@
     };
 
     const show = defineModel<boolean>();
-
-    show.value = true;
     const emit = defineEmits<{
         ( e: 'launch-tour' ): void
     }>();

src/editor/tour/editorTour.ts

@@ -9,8 +9,7 @@ import {
 // TODO: To change theme, follow this guide: https://globalhive.github.io/vuejs-tour/guide/css-theme.html
 
 
-export const useEditorTour = () => {
-    const tour: Ref<VTourExposedMethods | null> = ref( null );
+export const useEditorTour = ( tour: Ref<VTourExposedMethods | null> ) => {
     const showWelcomeTour = ref( !localStorage.getItem( 'welcomeTourViewed' ) );
     const steps: ITourStep[] = [
         {
@@ -72,13 +71,14 @@ export const useEditorTour = () => {
             tour.value.startTour();
             localStorage.setItem( 'welcomeTourViewed', 'true' );
             showWelcomeTour.value = false;
+        } else {
+            console.log( 'Tour element missing' );
         }
     };
 
     return {
-        tour,
         steps,
         showWelcomeTour,
         startFullTour
     };
-};
+};