From 7c73bb745259859daf7d880b32598e2fce285a9c Mon Sep 17 00:00:00 2001 From: Mark Taipan Date: Fri, 3 Jan 2025 13:28:56 -0500 Subject: [PATCH] - Pass in annotator into canvas applets - Call canvas frame applet update when a frame change occurs --- ui/src/js/annotation/annotation-page.js | 28 ++++++++++++++++--- ui/src/js/annotation/canvas-applet-element.js | 13 ++++++--- ui/src/js/annotation/canvas-applet-wrapper.js | 12 ++++++++ 3 files changed, 45 insertions(+), 8 deletions(-) diff --git a/ui/src/js/annotation/annotation-page.js b/ui/src/js/annotation/annotation-page.js index f271e8461..7a265444b 100644 --- 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 index fc9da7946..061d725ef 100644 --- 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 index 2ceb64cce..7c867de10 100644 --- 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