diff --git a/ui/src/js/annotation/tools-applet-panel.js b/ui/src/js/annotation/tools-applet-panel.js index 12e45a346..150f5af61 100644 --- a/ui/src/js/annotation/tools-applet-panel.js +++ b/ui/src/js/annotation/tools-applet-panel.js @@ -93,37 +93,44 @@ export class ToolsAppletPanel extends TatorElement { initApplet() { // if (this._appletData == null) { return; } - this._appletElement = - this._appletView.contentWindow.document.getElementById("toolsApplet"); - if (this._appletElement == null) { + const appletElement = this._appletView.contentWindow.document.getElementById("toolsApplet"); + if (appletElement == null) { return; } - - this._appletElement.addEventListener( - "closeApplet", - this.togglePanel.bind(this) - ); - - // Listen for html registration, and page event with svg as detail - this._appletElement.addEventListener("icon-ready", (evt) => { - if (this._appletTrigger !== null && evt.detail.icon !== null) { - this._appletTrigger.setIcon(evt.detail.icon); - } else { - console.warn( - "Event icon ready heard, but not enough data to set icon." - ); + const appletTagName = appletElement.tagName.toLowerCase(); + this._appletView.contentWindow.customElements.whenDefined(appletTagName).then(() => { + this._appletElement = + this._appletView.contentWindow.document.getElementById("toolsApplet"); + if (this._appletElement == null) { + return; } - }); - // RUN THIS LAST! listeners need to be in place above first - this._appletElement.init({ - canvas: this._canvas, - canvasElement: this._canvasElement, - data: this._page._data, + this._appletElement.addEventListener( + "closeApplet", + this.togglePanel.bind(this) + ); + + // Listen for html registration, and page event with svg as detail + this._appletElement.addEventListener("icon-ready", (evt) => { + if (this._appletTrigger !== null && evt.detail.icon !== null) { + this._appletTrigger.setIcon(evt.detail.icon); + } else { + console.warn( + "Event icon ready heard, but not enough data to set icon." + ); + } + }); + + // RUN THIS LAST! listeners need to be in place above first + this._appletElement.init({ + canvas: this._canvas, + canvasElement: this._canvasElement, + data: this._page._data, + }); + + // + this.dispatchEvent(new Event("appletReady")); }); - - // - this.dispatchEvent(new Event("appletReady")); } }