Wait for custom element definition before using applet

cvisionai · Nov 21, 2024 · b2f4de9 · b2f4de9
1 parent 7cd55e4
commit b2f4de9
Showing 1 changed file with 33 additions and 26 deletions.
diff --git 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"));
   }
 }