@mml-io/mml-web-client 0.19.5 → 0.19.7

package/build/index.js

@@ -909,7 +909,8 @@
     handleEvent(element, event) {
       const nodeId = this.elementToId.get(element);
       if (nodeId === void 0 || nodeId === null) {
-        throw new Error("Element not found");
+        console.error("Element not found for event", { nodeId, element, event });
+        return;
       }
       const detailWithoutElement = {
         ...event.detail
@@ -1330,10 +1331,11 @@
     }
     createWebsocketWithTimeout(timeout) {
       return new Promise((resolve, reject) => {
+        const websocket = this.websocketFactory(this.url);
         const timeoutId = setTimeout(() => {
           reject(new Error("websocket connection timed out"));
+          websocket.close();
         }, timeout);
-        const websocket = this.websocketFactory(this.url);
         websocket.binaryType = "arraybuffer";
         websocket.addEventListener("open", () => {
           clearTimeout(timeoutId);
@@ -1722,9 +1724,53 @@
       return false;
     }
   };
+  function parseRGB(value) {
+    value = value.trim();
+    const validStart = value.startsWith("rgb(") || value.startsWith("rgba(");
+    const validEnd = value.endsWith(")");
+    if (!validStart || !validEnd) return null;
+    const content = value.substring(value.indexOf("(") + 1, value.length - 1).split(",");
+    if (content.length < 3 || content.length > 4) return null;
+    if (value.startsWith("rgb(") && content.length !== 3) return null;
+    if (value.startsWith("rgba(") && content.length !== 4) return null;
+    const numbers = content.map((n) => parseFloat(n.trim()));
+    if (numbers.some((n) => isNaN(n))) return null;
+    return {
+      r: Math.min(255, Math.max(0, numbers[0])) / 255,
+      g: Math.min(255, Math.max(0, numbers[1])) / 255,
+      b: Math.min(255, Math.max(0, numbers[2])) / 255,
+      a: numbers.length === 4 ? Math.min(1, Math.max(0, numbers[3])) : void 0
+    };
+  }
+  function parseHSL(value) {
+    value = value.trim();
+    const validStart = value.startsWith("hsl(") || value.startsWith("hsla(");
+    const validEnd = value.endsWith(")");
+    if (!validStart || !validEnd) return null;
+    const content = value.substring(value.indexOf("(") + 1, value.length - 1).split(",");
+    if (content.length < 3 || content.length > 4) return null;
+    if (value.startsWith("hsl(") && content.length !== 3) return null;
+    if (value.startsWith("hsla(") && content.length !== 4) return null;
+    const numbers = content.map((n) => parseFloat(n.trim()));
+    if (numbers.some((n) => isNaN(n))) return null;
+    let [h, s, l] = numbers;
+    h = h / 360;
+    h = h === 0 ? 1e-4 : h === 1 ? 0.9999 : h;
+    s = s / 100;
+    s = s === 0 ? 1e-4 : s === 1 ? 0.9999 : s;
+    l = l / 100;
+    l = l === 0 ? 1e-4 : l === 1 ? 0.9999 : l;
+    const rgb = hslToRGB(h, s, l);
+    return {
+      r: rgb.r,
+      g: rgb.g,
+      b: rgb.b,
+      a: numbers.length === 4 ? Math.min(1, Math.max(0, numbers[3])) : void 0
+    };
+  }
   function parseColorAttribute(value, defaultValue) {
     return parseAttribute(value, defaultValue, (value2) => {
-      const colorNameValues = colors[value2];
+      const colorNameValues = colors[value2.trim()];
       if (colorNameValues) {
         return {
           r: colorNameValues[0],
@@ -1753,75 +1799,16 @@
         }
       }
       if (value2.indexOf("rgb(") === 0) {
-        const rgb = /^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/.exec(value2);
-        if (rgb) {
-          return {
-            r: parseInt(rgb[1], 10) / 255,
-            g: parseInt(rgb[2], 10) / 255,
-            b: parseInt(rgb[3], 10) / 255
-          };
-        }
+        return parseRGB(value2);
       }
       if (value2.indexOf("rgba(") === 0) {
-        const rgba = /^rgba\((\d+),\s*(\d+),\s*(\d+),\s*(\d*\.?\d+)\)$/.exec(value2);
-        if (rgba) {
-          return {
-            r: parseInt(rgba[1], 10) / 255,
-            g: parseInt(rgba[2], 10) / 255,
-            b: parseInt(rgba[3], 10) / 255,
-            a: parseFloat(rgba[4])
-          };
-        }
+        return parseRGB(value2);
       }
       if (value2.indexOf("hsl(") === 0) {
-        const hsl = /^hsl\(\s*(\d+)\s*,\s*(\d+(?:\.\d+)?%)\s*,\s*(\d+(?:\.\d+)?%)\)$/.exec(value2);
-        if (hsl) {
-          let h = parseFloat(hsl[1]) / 360;
-          if (h === 0) {
-            h = 1e-4;
-          } else if (h === 1) {
-            h = 0.9999;
-          }
-          let s = parseFloat(hsl[2]) / 100;
-          if (s === 0) {
-            s = 1e-4;
-          } else if (s === 1) {
-            s = 0.9999;
-          }
-          let l = parseFloat(hsl[3]) / 100;
-          if (l === 0) {
-            l = 1e-4;
-          } else if (l === 1) {
-            l = 0.9999;
-          }
-          return hslToRGB(h, s, l);
-        }
+        return parseHSL(value2);
       }
       if (value2.indexOf("hsla(") === 0) {
-        const hsla = /^hsla\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?%)\s*,\s*(\d+(?:\.\d+)?%),\s*(\d+(?:\.\d+)?)\)$/.exec(
-          value2
-        );
-        if (hsla) {
-          let h = parseFloat(hsla[1]) / 360;
-          if (h === 0) {
-            h = 1e-4;
-          } else if (h === 1) {
-            h = 0.9999;
-          }
-          let s = parseFloat(hsla[2]) / 100;
-          if (s === 0) {
-            s = 1e-4;
-          } else if (s === 1) {
-            s = 0.9999;
-          }
-          let l = parseFloat(hsla[3]) / 100;
-          if (l === 0) {
-            l = 1e-4;
-          } else if (l === 1) {
-            l = 0.9999;
-          }
-          return hslToRGB(h, s, l);
-        }
+        return parseHSL(value2);
       }
       return null;
     });
@@ -5431,6 +5418,7 @@
   var _Frame = class _Frame2 extends TransformableElement {
     constructor() {
       super();
+      this.hasInitialized = false;
       this.frameContentsInstance = null;
       this.isActivelyLoaded = false;
       this.timer = null;
@@ -5469,6 +5457,9 @@
       }
     }
     shouldBeLoaded() {
+      if (!this.hasInitialized) {
+        return false;
+      }
       if (!this.isConnected) {
         return false;
       }
@@ -5580,8 +5571,6 @@
         return;
       }
       const graphicsAdapter = this.getScene().getGraphicsAdapter();
-      this.startEmitting();
-      this.syncLoadState();
       this.frameGraphics = graphicsAdapter.getGraphicsAdapterFactory().MMLFrameGraphicsInterface(this);
       for (const name of _Frame2.observedAttributes) {
         const value = this.getAttribute(name);
@@ -5589,6 +5578,9 @@
           this.attributeChangedCallback(name, null, value);
         }
       }
+      this.hasInitialized = true;
+      this.startEmitting();
+      this.syncLoadState();
       this.applyBounds();
     }
     disconnectedCallback() {
@@ -97901,6 +97893,22 @@ void main() {
       });
     }
     setAnimEnabled() {
+      if (this.model.props.animEnabled) {
+        if (this.animState && !this.animState.appliedAnimation) {
+          for (const [attachment] of this.attachments) {
+            this.registerAttachment(attachment);
+          }
+          this.playAnimation(this.animState.currentAnimationClip);
+        }
+      } else if (!this.model.props.animEnabled) {
+        for (const [attachment, animState] of this.attachments) {
+          if (animState) {
+            animState.animationMixer.stopAllAction();
+          }
+          this.attachments.set(attachment, null);
+          this.model.getContainer().add(attachment.getContainer());
+        }
+      }
     }
     setAnimLoop() {
     }
@@ -97995,7 +98003,6 @@ void main() {
         if (this.animState) {
           this.playAnimation(this.animState.currentAnimationClip);
         }
-        console.log("Loaded model", this.loadedState);
         this.srcLoadingInstanceManager.finish();
         this.updateDebugVisualisation();
       }).catch((err2) => {