await in load icon and return cIcon

iTowns · Oct 20, 2023 · 5fc0047 · 5fc0047
1 parent 8bc11d4
commit 5fc0047
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 7 deletions.
diff --git a/src/Core/Label.js b/src/Core/Label.js
@@ -100,8 +100,10 @@ class Label extends THREE.Object3D {
                     this.content.classList.add('itowns-stroke-single');
                 }
                 style.applyToHTML(this.content)
-                    .then(() => {
-                        this.icon = this.content.getElementsByClassName('itowns-icon')[0];
+                    .then((icon) => {
+                        if (icon) { // Not sure if that test is needed...
+                            this.icon = icon;
+                        }
                     });
             }
         } else {

diff --git a/src/Core/Style.js b/src/Core/Style.js
@@ -639,6 +639,7 @@ class Style {
      * set Style from (geojson-like) properties.
      * @param {object} properties (geojson-like) properties.
      * @param {number} type
+     *
      * @returns {StyleOptions} containing all properties for itowns.Style
      */
     setFromGeojsonProperties(properties, type) {
@@ -680,6 +681,7 @@ class Style {
      * @param {Object} sprites vector tile layer.
      * @param {number} [order=0]
      * @param {boolean} [symbolToCircle=false]
+     *
      * @returns {StyleOptions} containing all properties for itowns.Style
      */
     setFromVectorTileLayer(layer, sprites, order = 0, symbolToCircle = false) {
@@ -851,6 +853,8 @@ class Style {
      * properties of this style.
      *
      * @param {Element} domElement - The element to set the style to.
+     *
+     * @returns {undefined | HTMLImageElement} - undefined for a text label OR the HTMLImageElement containing the image.
      */
     async applyToHTML(domElement) {
         if (arguments.length > 1) {
@@ -941,16 +945,25 @@ class Style {
             }
 
             cIcon.style['z-index'] = -1;
-            domElement.appendChild(cIcon);
-            icon.removeEventListener('load', addIcon);
+            return cIcon;
         };
 
+        const loadIcon = icon => new Promise((resolve, reject) => {
+            icon.onload = () => {
+                const cIcon = addIcon();
+                resolve(cIcon);
+            };
+            icon.onerror = reject;
+        });
+
+        let cIcon;
         if (icon.complete) {
-            addIcon();
+            cIcon = addIcon();
         } else {
-            icon.addEventListener('load', addIcon);
+            cIcon = await loadIcon(icon);
         }
-        return icon;
+        domElement.appendChild(cIcon);
+        return cIcon;
     }
 
     /**