- Pass in annotator into canvas applets

- Call canvas frame applet update when a frame change occurs
cvisionai · Jan 3, 2025 · 7c73bb7 · 7c73bb7
1 parent 2f361c9
commit 7c73bb7
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 8 deletions.
diff --git a/ui/src/js/annotation/annotation-page.js b/ui/src/js/annotation/annotation-page.js
@@ -1034,7 +1034,7 @@ export class AnnotationPage extends TatorPage {
             }
 
             // If there is a default version pick that one, otherwise use the first one.
-            this._version == null;
+            this._version = null;
             this.setAttribute("user-id", user.id);
             let default_version = versions[0].id;
             for (const membership of memberships) {
@@ -1051,6 +1051,7 @@ export class AnnotationPage extends TatorPage {
                 this._version = version;
               }
             }
+            this._canvasAppletHeader.version = this._version;
 
             // Initialize version dialog.
             this._versionDialog.init(versions, this._version.id);
@@ -1252,6 +1253,7 @@ export class AnnotationPage extends TatorPage {
               this._browser.frameChange(evt.detail.frame);
               this._settings.setAttribute("frame", evt.detail.frame);
               this._currentFrame = evt.detail.frame;
+              this.updateCanvasAppletWithFrameChange();
               // TODO: tempting to call '_updateURL' here but may be a performance bottleneck
             });
             canvas.addEventListener("select", (evt) => {
@@ -1511,6 +1513,7 @@ export class AnnotationPage extends TatorPage {
                   saveDialog.updateFrame(this._currentFrame);
                 }
               }
+              this.updateCanvasAppletWithFrameChange();
             });
 
             canvas.addEventListener("create", (evt) => {
@@ -1691,8 +1694,6 @@ export class AnnotationPage extends TatorPage {
         ) {
           this._sidebar.disableCanvasApplet();
         }
-        this._annotationCanvas = canvas;
-        this._canvasElement = canvasElement;
 
         var canvasAppletInitPromises = [];
         for (const applet of this._canvasApplets) {
@@ -1707,7 +1708,6 @@ export class AnnotationPage extends TatorPage {
           );
           this._canvasAppletPageWrapper.appendChild(appletInterface);
           this._canvasAppletWrappers[applet.id] = appletInterface;
-
           appletInterface.addEventListener("overrideCanvas", (evt) => {
             this.overrideCanvas(evt.detail.bitmap);
           });
@@ -2398,6 +2398,23 @@ export class AnnotationPage extends TatorPage {
     this._sidebar._canvasApplet._button.classList.remove("purple-box-border");
   }
 
+  /**
+   * Force update the canvas applet init with the new frame.
+   * If a canvas applet is not currently open, then do nothing.
+   */
+  updateCanvasAppletWithFrameChange() {
+    if (this._currentCanvasApplet == null) {
+      return;
+    }
+    if (
+      this._currentCanvasApplet._lastFrameUpdate != this._currentFrame &&
+      !this._updatingCanvasAppletWithFrameChange
+    ) {
+      this._updatingCanvasAppletWithFrameChange = true;
+      this.showCanvasApplet(this._currentCanvasApplet._applet.id);
+    }
+  }
+
   /**
    * Bring up the canvas applet to the forefront and hide the main annotation parts.
    * Pass along information about the current state to the applet.
@@ -2427,6 +2444,8 @@ export class AnnotationPage extends TatorPage {
       if (this._player.mediaType.dtype == "multi") {
         this._cameraSelectionBar.style.display = "flex";
       }
+
+      this._updatingCanvasAppletWithFrameChange = false;
     }
 
     this.hideCanvasAppletMenu();
@@ -2460,6 +2479,7 @@ export class AnnotationPage extends TatorPage {
       this._currentCanvasApplet._lastMediaId != selectedCameraMediaId
     ) {
       currentCanvas.getPNGdata(false).then(async (blob) => {
+        await this._currentCanvasApplet.updateAnnotator(this._player);
         await this._currentCanvasApplet.updateMedia(selectedMedia);
         await this._currentCanvasApplet.updateAnnotationCanvas(currentCanvas);
         this._currentCanvasApplet.updateFrame(this._currentFrame, blob);

diff --git a/ui/src/js/annotation/canvas-applet-element.js b/ui/src/js/annotation/canvas-applet-element.js
@@ -37,15 +37,12 @@ export class CanvasAppletElement extends TatorElement {
    *    List of user-associated favorites
    * @param {undo-buffer} undo
    *    Undo buffer for patching/posting required by elements like the save dialog
-   * @param {AnnotationCanvas} canvas
-   *    Image/video canvas associated with the applet
    */
-  init(applet, data, favorites, undo, canvas) {
+  init(applet, data, favorites, undo) {
     this._applet = applet;
     this._data = data;
     this._undo = undo;
     this._favorites = favorites;
-    this._annotationCanvas = canvas;
 
     this._main = document.createElement("main");
     this._main.setAttribute("class", "d-flex flex-justify-center");
@@ -612,6 +609,14 @@ export class CanvasAppletElement extends TatorElement {
     this._media = media;
   }
 
+  /**
+   * @param {AnnotationMulti, AnnotationPlayer, or AnnotationImage} annotator
+   *    Annotation player pointer so that the applet can control the underyling video
+   */
+  async updateAnnotator(annotator) {
+    this._annotator = annotator;
+  }
+
   /**
    * @param {AnnotationCanvas} canvas
    *    Associated video/image canvas

diff --git a/ui/src/js/annotation/canvas-applet-wrapper.js b/ui/src/js/annotation/canvas-applet-wrapper.js
@@ -123,6 +123,18 @@ export class CanvasAppletWrapper extends TatorElement {
     await this._appletElement.updateFrame(frame, blob);
   }
 
+  /**
+   * @param {AnnotationMulti, AnnotationPlayer, or AnnotationImage} annotator
+   *    Annotation player pointer so that the applet can control the underyling video
+   */
+  async updateAnnotator(annotator) {
+    if (typeof this._appletElement.updateAnnotator === "function") {
+      await this._appletElement.updateAnnotator(annotator);
+    } else {
+      return;
+    }
+  }
+
   /**
    * @param {Tator.Media} media
    * @returns Promise