add functionality that users must confirm annotation befor sending/sa…

…ving

index.html

@@ -41,6 +41,8 @@ <h5 class="mt-4">File</h5>
                   class="bi bi-folder2-open"></i> Open Annotations</a>
                 <a id="saveAnno" class="nav-link btn btn-light" href="#" aria-keyshortcuts="Control+S"><i
                   class="bi bi-download"></i> Download</a>
+                <a id="sendAnno" class="nav-link btn btn-light" href="#" aria-keyshortcuts="Control+Shift+S">
+                    <i class="bi bi-floppy"></i>Save</a>
                 <!-- Edit Options-->
                 <h5 class="mt-4">Edit</h5>
                 <a id="undo" class="nav-link btn btn-light" href="#" aria-keyshortcuts="Control+Z"><i
@@ -113,8 +115,10 @@ <h5 class="mt-4">About</h5>
                 >
                     <div class="toast-body text-center">
                         <h2>
-                            <i class="bi bi-check "></i>
-                            <span class="visually-hidden">Checkmark to commit a annotation</span>
+                            <a id="commitCheckmark" href="#">
+                                <i class="bi bi-check "></i>
+                                <span class="visually-hidden">Checkmark to commit a annotation</span>
+                            </a>
                         </h2>
                     </div>
                 </div>

project-words.txt

@@ -16,4 +16,5 @@ unproject
 Unprojects
 Webservice
 webservice
-jssha
+jssha
+Checkmark

src/app.ts

@@ -18,7 +18,6 @@ import { ModelApi } from './model/modelApi';
 import { MediapipeModel } from './model/mediapipe';
 import { ModelType } from './model/models';
 import { urlError, WebServiceModel } from './model/webservice';
-import { calculateSHA } from './util/sha';
 
 export class App {
   private featureDrag: Slider;
@@ -50,9 +49,10 @@ export class App {
       'thumbnailgallery',
     ) as HTMLDivElement;
     this.numImages = document.getElementById('num_images') as HTMLOutputElement;
-    this.editor.setOnPointsEditedCallback((graph) =>
-      this.getSelectedFileHistory()?.add(graph),
-    );
+    this.editor.setOnPointsEditedCallback((graph) => {
+      this.getSelectedFileHistory()?.add(graph);
+      $('#toastCommit').toast('show');
+    });
     this.editor.setOnBackgroundLoadedCallback((_) => {
       if (this.getSelectedFileHistory()?.isEmpty()) {
         this.runDetection();
@@ -134,36 +134,56 @@ export class App {
     return false;
   }
 
-  saveAnnotation(): boolean {
-    if (this.fileCache.length > 0) {
-      const result = {};
-      const promises = [];
-      for (const c of this.fileCache) {
-        const graph = c.get();
-        result[c.file.name] = {};
-        if (graph) {
-          result[c.file.name]['points'] = graph.toDictArray();
-          const promise = calculateSHA(c.file).then((sha256) => {
-            result[c.file.name]['sha256'] = sha256;
-          });
-          promises.push(promise);
-        }
+  private collectAnnotation() {
+    const result = {};
+    for (const c of this.fileCache) {
+      if (!c.readyToSend()) {
+        continue;
       }
-      Promise.all(promises)
-        .then(() => {
-          const jsonData: string = JSON.stringify(result);
-          this.getModel().uploadAnnotations(jsonData);
-          const dataStr: string =
-            'data:text/json;charset=utf-8,' + encodeURIComponent(jsonData);
-          const a: HTMLAnchorElement = document.createElement('a');
-          a.href = dataStr;
-          a.download = Date.now() + '_face_mesh_annotations.json';
-          a.click();
-        })
-        .catch((error) => {
-          console.error('An error occurred:', error);
-        });
+      c.markAsSent();
+      const graph = c.get();
+      result[c.file.name] = {};
+      if (graph) {
+        result[c.file.name]['points'] = graph.toDictArray();
+        result[c.file.name]['sha256'] = c.hash;
+      }
+    }
+    return result;
+  }
+
+  saveAnnotation(): boolean {
+    if (this.fileCache.length <= 0) {
+      return false;
+    }
+
+    const result = this.collectAnnotation();
+    if (Object.keys(result).length <= 0) {
+      return false;
     }
+
+    const jsonData: string = JSON.stringify(result);
+    this.getModel().uploadAnnotations(jsonData);
+    const dataStr: string =
+      'data:text/json;charset=utf-8,' + encodeURIComponent(jsonData);
+    const a: HTMLAnchorElement = document.createElement('a');
+    a.href = dataStr;
+    a.download = Date.now() + '_face_mesh_annotations.json';
+    a.click();
+    return false;
+  }
+
+  sendAnnotation(): boolean {
+    if (this.fileCache.length <= 0) {
+      return false;
+    }
+
+    const result = this.collectAnnotation();
+    if (Object.keys(result).length <= 0) {
+      return false;
+    }
+
+    const jsonData: string = JSON.stringify(result);
+    this.getModel().uploadAnnotations(jsonData);
     return false;
   }
 
@@ -316,7 +336,7 @@ export class App {
       });
   }
 
-  private getSelectedFileHistory(): FileAnnotationHistory<Point2D> | undefined {
+  getSelectedFileHistory(): FileAnnotationHistory<Point2D> | undefined {
     return this.fileCache.find((c) => c.file.name === this.selectedFile);
   }
 
@@ -398,4 +418,13 @@ window.onload = (_) => {
       app.addFeatureDrag(e.deltaY / 100);
     }
   };
+
+  $('#commitCheckmark').on('click', () => {
+    app.getSelectedFileHistory().markAsReady();
+    $('#toastCommit').toast('hide');
+  });
+
+  $('#sendAnno').on('click', () => {
+    app.sendAnnotation();
+  });
 };

src/cache/fileAnnotationHistory.ts

@@ -13,6 +13,7 @@ export class FileAnnotationHistory<T extends Point2D> {
   private currentHistoryIndex: number = 0;
   private readonly _file: File;
   private _hash: string;
+  private _readyToSend: boolean;
 
   /**
    * Creates a new FileAnnotationHistory instance.
@@ -23,6 +24,7 @@ export class FileAnnotationHistory<T extends Point2D> {
     this._file = file;
     this.cacheSize = cacheSize;
     calculateSHA(this._file).then((sha) => (this._hash = sha));
+    this._readyToSend = false;
   }
 
   /**
@@ -106,5 +108,27 @@ export class FileAnnotationHistory<T extends Point2D> {
   clear() {
     this.history.length = 0;
     this.currentHistoryIndex = 0;
+    this._readyToSend = false;
+  }
+
+  /**
+   * marks the file as ready to send
+   */
+  markAsReady() {
+    this._readyToSend = true;
+  }
+
+  /**
+   * Checks whether the object is ready to send.
+   */
+  readyToSend(): boolean {
+    return this._readyToSend;
+  }
+
+  /**
+   * Resets the status if item is sent
+   */
+  markAsSent(): void {
+    this._readyToSend = false;
   }
 }

src/editor2d.ts

@@ -124,10 +124,9 @@ export class Editor2D {
   }
 
   clearAndFitToWindow() {
-    this.canvas.width = $('#canvas').innerWidth();
-    this.canvas.height = $('#canvas').innerHeight();
-
-    console.log(this.canvas.width, ' ', this.canvas.height);
+    const canvas = $('#canvas');
+    this.canvas.width = canvas.innerWidth();
+    this.canvas.height = canvas.innerHeight();
   }
 
   center() {
@@ -320,8 +319,11 @@ export class Editor2D {
     this.prevMouseY = this.mouseY;
     this.mouseX = event.clientX;
     this.mouseY = event.clientY;
-    const relativeMouseX = (this.mouseX - this.offsetX) / this.zoomScale;
-    const relativeMouseY = (this.mouseY - this.offsetY) / this.zoomScale;
+    const canvasPos = $('#canvas').offset();
+    const relativeMouseX =
+      (this.mouseX - this.offsetX - canvasPos.left) / this.zoomScale;
+    const relativeMouseY =
+      (this.mouseY - this.offsetY - canvasPos.top) / this.zoomScale;
     if (this.isMoving) {
       this.canvas.style.cursor = 'pointer';
       // Update normalized coordinates based on mouse position