@mml-io/mml-web-client 0.19.2 → 0.19.4

package/build/index.js

@@ -985,6 +985,8 @@
         case "changeHiddenFrom":
           this.handleChangeHiddenFrom(message);
           break;
+        case "changeVisibleTo":
+          break;
         case "childrenRemoved":
           this.handleChildrenRemoved(message);
           break;
@@ -1895,6 +1897,7 @@
     constructor() {
       super();
       this.mElementGraphics = null;
+      this.isMElement = true;
     }
     // This allows switching which document this HTMLElement subclass extends so that it can be placed into iframes
     static overwriteSuperclass(newSuperclass) {
@@ -1903,6 +1906,9 @@
     static get observedAttributes() {
       return [];
     }
+    static isMElement(element) {
+      return element.isMElement;
+    }
     static getMElementFromObject(object) {
       return object[MELEMENT_PROPERTY_NAME] || null;
     }
@@ -2076,7 +2082,7 @@
     getMElementParent() {
       let parentNode = this.parentNode;
       while (parentNode != null) {
-        if (parentNode instanceof _MElement) {
+        if (_MElement.isMElement(parentNode)) {
           return parentNode;
         }
         parentNode = parentNode.parentNode;
@@ -2123,6 +2129,10 @@
         animDuration: defaultAnimDuration
       };
       this.registeredParentAttachment = null;
+      this.isAttributeAnimation = true;
+    }
+    static isAttributeAnimation(element) {
+      return element.isAttributeAnimation;
     }
     static get observedAttributes() {
       return [..._AttributeAnimation2.attributeHandler.getAttributes()];
@@ -2148,7 +2158,7 @@
     }
     connectedCallback() {
       super.connectedCallback();
-      if (this.parentElement && this.parentElement instanceof MElement) {
+      if (this.parentElement && MElement.isMElement(this.parentElement)) {
         this.registeredParentAttachment = this.parentElement;
         if (this.props.attr) {
           this.registeredParentAttachment.addSideEffectChild(this);
@@ -2259,6 +2269,10 @@
         lerpDuration: defaultLerpDuration
       };
       this.registeredParentAttachment = null;
+      this.isAttributeLerp = true;
+    }
+    static isAttributeLerp(element) {
+      return element.isAttributeLerp;
     }
     static get observedAttributes() {
       return [..._AttributeLerp2.attributeHandler.getAttributes()];
@@ -2284,7 +2298,7 @@
     }
     connectedCallback() {
       super.connectedCallback();
-      if (this.parentElement && this.parentElement instanceof MElement) {
+      if (this.parentElement && MElement.isMElement(this.parentElement)) {
         this.registeredParentAttachment = this.parentElement;
         this.registeredParentAttachment.addSideEffectChild(this);
       }
@@ -2303,13 +2317,20 @@
       }
       return lerpHSL(previousValue, elementValue, ratio);
     }
-    getFloatValueForTime(windowTime, elementValueSetTime, elementValue, previousValue) {
-      const from = previousValue;
+    getFloatValueForTime(windowTime, elementValueSetTime, elementValue, previousValue, isDegrees) {
+      let from = previousValue;
       const to = elementValue;
       const ratio = this.getLerpRatio(windowTime, elementValueSetTime);
       if (ratio >= 1) {
         return to;
       }
+      if (isDegrees) {
+        if (to - from > 180) {
+          from += 360;
+        } else if (from - to > 180) {
+          from -= 360;
+        }
+      }
       return from + (to - from) * ratio;
     }
     getLerpRatio(windowTime, elementValueSetTime) {
@@ -2367,6 +2388,9 @@
     }
   }
   function isColorAttribute(attributeState) {
+    return attributeState.type === 2;
+  }
+  function isDegreesAttribute(attributeState) {
     return attributeState.type === 1;
   }
   function isNumberAttribute(attributeState) {
@@ -2385,12 +2409,12 @@
       this.reset();
     }
     addSideEffectChild(child) {
-      if (child instanceof AttributeAnimation) {
+      if (AttributeAnimation.isAttributeAnimation(child)) {
         const attr = child.getAnimatedAttributeName();
         if (attr) {
           this.addAnimation(child, attr);
         }
-      } else if (child instanceof AttributeLerp) {
+      } else if (AttributeLerp.isAttributeLerp(child)) {
         const attr = child.getAnimatedAttributeName();
         if (attr) {
           this.addLerp(child, attr);
@@ -2398,12 +2422,12 @@
       }
     }
     removeSideEffectChild(child) {
-      if (child instanceof AttributeAnimation) {
+      if (AttributeAnimation.isAttributeAnimation(child)) {
         const attr = child.getAnimatedAttributeName();
         if (attr) {
           this.removeAnimation(child, attr);
         }
-      } else if (child instanceof AttributeLerp) {
+      } else if (AttributeLerp.isAttributeLerp(child)) {
         const attr = child.getAnimatedAttributeName();
         if (attr) {
           this.removeLerp(child, attr);
@@ -2525,7 +2549,7 @@
         let stale = null;
         const state = this.stateByAttribute[key];
         for (const animation of state.animationsInOrder) {
-          const [newValue, active] = state.attributeState.type === 1 ? animation.getColorValueForTime(documentTime) : animation.getFloatValueForTime(documentTime);
+          const [newValue, active] = state.attributeState.type === 2 ? animation.getColorValueForTime(documentTime) : animation.getFloatValueForTime(documentTime);
           if (active === 0) {
             updateIfChangedValue(state, newValue);
             stale = null;
@@ -2561,6 +2585,17 @@
                   config.previousValue
                 )
               );
+            } else if (isDegreesAttribute(config)) {
+              updateIfChangedValue(
+                state,
+                lerp2.getFloatValueForTime(
+                  this.element.getWindowTime(),
+                  config.elementValueSetTime,
+                  config.elementValue,
+                  config.previousValue,
+                  true
+                )
+              );
             } else if (isNumberAttribute(config)) {
               updateIfChangedValue(
                 state,
@@ -2568,7 +2603,8 @@
                   this.element.getWindowTime(),
                   config.elementValueSetTime,
                   config.elementValue,
-                  config.previousValue
+                  config.previousValue,
+                  false
                 )
               );
             }
@@ -3530,6 +3566,7 @@
   var _TransformableElement = class _TransformableElement2 extends MElement {
     constructor() {
       super(...arguments);
+      this.isTransformableElement = true;
       this.transformableElementProps = {
         socket: null,
         x: 0,
@@ -3579,7 +3616,7 @@
           }
         ],
         rx: [
-          0,
+          1,
           0,
           (newValue) => {
             var _a2;
@@ -3589,7 +3626,7 @@
           }
         ],
         ry: [
-          0,
+          1,
           0,
           (newValue) => {
             var _a2;
@@ -3599,7 +3636,7 @@
           }
         ],
         rz: [
-          0,
+          1,
           0,
           (newValue) => {
             var _a2;
@@ -3650,10 +3687,13 @@
       });
       this.debugHelper = new DebugHelper(this);
     }
+    static isTransformableElement(element) {
+      return element.isTransformableElement;
+    }
     getTransformableElementParent() {
       let parentNode = this.parentNode;
       while (parentNode != null) {
-        if (parentNode instanceof _TransformableElement2) {
+        if (_TransformableElement2.isTransformableElement(parentNode)) {
           return parentNode;
         }
         parentNode = parentNode.parentNode;
@@ -3906,7 +3946,7 @@
   var TransformableElement = _TransformableElement;
   function traverseImmediateTransformableElementChildren(element, callback) {
     element.childNodes.forEach((child) => {
-      if (child instanceof TransformableElement) {
+      if (TransformableElement.isTransformableElement(child)) {
         callback(child);
       } else {
         traverseImmediateTransformableElementChildren(child, callback);
@@ -4116,9 +4156,12 @@
         castShadows: defaultModelCastShadows,
         debug: defaultModelDebug
       };
-      this.isModel = true;
       this.collideableHelper = new CollideableHelper(this);
       this.modelGraphics = null;
+      this.isModel = true;
+    }
+    static isModel(element) {
+      return element.isModel;
     }
     enable() {
       this.collideableHelper.enable();
@@ -4269,7 +4312,7 @@
     tempContainerMatrix.identity();
     const tempMatr4 = new Matr4();
     for (let obj = container; obj; obj = obj.parentNode) {
-      if (obj instanceof TransformableElement) {
+      if (TransformableElement.isTransformableElement(obj)) {
         obj.calculateLocalMatrix(tempMatr4);
         tempContainerMatrix.premultiply(tempMatr4);
       }
@@ -4455,7 +4498,7 @@
       };
       this.cubeAnimatedAttributeHelper = new AnimatedAttributeHelper(this, {
         color: [
-          1,
+          2,
           defaultCubeColor,
           (newValue) => {
             var _a2;
@@ -4634,7 +4677,7 @@
       };
       this.cylinderAnimatedAttributeHelper = new AnimatedAttributeHelper(this, {
         color: [
-          1,
+          2,
           defaultCylinderColor,
           (newValue) => {
             var _a2;
@@ -6005,7 +6048,7 @@
       this.collideableHelper = new CollideableHelper(this);
       this.labelAnimatedAttributeHelper = new AnimatedAttributeHelper(this, {
         color: [
-          1,
+          2,
           defaultLabelColor,
           (newValue) => {
             var _a2;
@@ -6014,7 +6057,7 @@
           }
         ],
         "font-color": [
-          1,
+          2,
           defaultFontColor,
           (newValue) => {
             var _a2;
@@ -6217,7 +6260,7 @@
       super();
       this.lightAnimatedAttributeHelper = new AnimatedAttributeHelper(this, {
         color: [
-          1,
+          2,
           defaultLightColor,
           (newValue) => {
             var _a2;
@@ -6278,7 +6321,7 @@
       return OrientedBoundingBox.fromMatrixWorld(this.transformableElementGraphics.getWorldMatrix());
     }
     addSideEffectChild(child) {
-      if (child instanceof AttributeAnimation) {
+      if (AttributeAnimation.isAttributeAnimation(child)) {
         const attr = child.getAnimatedAttributeName();
         if (attr) {
           this.lightAnimatedAttributeHelper.addAnimation(child, attr);
@@ -6287,7 +6330,7 @@
       super.addSideEffectChild(child);
     }
     removeSideEffectChild(child) {
-      if (child instanceof AttributeAnimation) {
+      if (AttributeAnimation.isAttributeAnimation(child)) {
         const attr = child.getAnimatedAttributeName();
         if (attr) {
           this.lightAnimatedAttributeHelper.removeAnimation(child, attr);
@@ -6490,7 +6533,7 @@
       };
       this.planeAnimatedAttributeHelper = new AnimatedAttributeHelper(this, {
         color: [
-          1,
+          2,
           defaultPlaneColor,
           (newValue) => {
             var _a2;
@@ -7072,7 +7115,7 @@
       };
       this.sphereAnimatedAttributeHelper = new AnimatedAttributeHelper(this, {
         color: [
-          1,
+          2,
           defaultSphereColor,
           (newValue) => {
             var _a2;
@@ -8186,7 +8229,7 @@
         var _a2;
         for (const i in element.children) {
           const child = element.children[i];
-          if (child instanceof MElement) {
+          if (MElement.isMElement(child)) {
             (_a2 = child.connectedCallback) == null ? void 0 : _a2.call(child);
           }
           traverse(child);
@@ -63477,7 +63520,7 @@ ${DracoWorker.toString()}
             break;
           }
         }
-        if (mElement && mElement instanceof TransformableElement && mElement.isClickable()) {
+        if (mElement && TransformableElement.isTransformableElement(mElement) && mElement.isClickable()) {
           const elementRelative = getRelativePositionAndRotationRelativeToObject(
             {
               position: result.point,
@@ -64914,7 +64957,7 @@ ${DracoWorker.toString()}
         this.latestAnimPromise = null;
         if (this.loadedState && !this.registeredParentAttachment) {
           const parent = this.model.parentElement;
-          if (parent instanceof Model) {
+          if (parent && Model.isModel(parent)) {
             this.registeredParentAttachment = parent;
             parent.modelGraphics.registerAttachment(this.model);
           }
@@ -65111,7 +65154,7 @@ ${DracoWorker.toString()}
         this.connectAnimationToModel();
         this.updateMeshCallback();
         const parent = this.model.parentElement;
-        if (parent instanceof Model) {
+        if (parent && Model.isModel(parent)) {
           if (!this.latestAnimPromise && !this.animState) {
             this.registeredParentAttachment = parent;
             parent.modelGraphics.registerAttachment(this.model);
@@ -65210,7 +65253,7 @@ ${DracoWorker.toString()}
     triggerSocketedChildrenTransformed() {
       this.socketChildrenByBone.forEach((children) => {
         children.forEach((child) => {
-          if (child instanceof TransformableElement) {
+          if (TransformableElement.isTransformableElement(child)) {
             child.didUpdateTransformation();
           }
         });
@@ -66534,7 +66577,7 @@ ${DracoWorker.toString()}
       return this.playcanvasApp.root;
     }
     getBoundingBoxForElement(element) {
-      if (!(element instanceof TransformableElement)) {
+      if (!TransformableElement.isTransformableElement(element)) {
         return null;
       }
       const bounds = element.getContentBounds();
@@ -97212,10 +97255,13 @@ void main() {
       this.mesh.castShadow = castShadows;
     }
     setOpacity(opacity) {
-      const needsUpdate = this.material.transparent === (opacity === 1);
-      this.material.transparent = opacity !== 1;
-      this.material.needsUpdate = needsUpdate;
+      const shouldBeTransparent = opacity !== 1 || this.loadedImageHasTransparency;
+      const needsUpdate = this.material.transparent !== shouldBeTransparent;
+      this.material.transparent = shouldBeTransparent;
       this.material.opacity = opacity;
+      if (needsUpdate) {
+        this.material.needsUpdate = true;
+      }
     }
     setEmissive() {
       this.updateMaterialEmissiveIntensity();
@@ -97308,15 +97354,9 @@ void main() {
       if (!this.material) {
         return;
       }
-      if (this.loadedImageHasTransparency) {
-        this.material.alphaMap = new CanvasTexture(this.loadedImage);
-        this.material.alphaTest = 0.01;
-      } else {
-        this.material.alphaMap = null;
-        this.material.alphaTest = 0;
-      }
-      this.material.transparent = this.image.props.opacity !== 1 || this.loadedImageHasTransparency;
       this.material.map = new CanvasTexture(this.loadedImage);
+      this.material.transparent = this.image.props.opacity !== 1 || this.loadedImageHasTransparency;
+      this.material.alphaTest = 0.01;
       this.material.needsUpdate = true;
       this.updateMaterialEmissiveIntensity();
       this.updateWidthAndHeight();
@@ -97610,7 +97650,7 @@ void main() {
         this.threeLight.castShadow = this.light.props.castShadows;
         this.threeLight.shadow.mapSize.width = 512;
         this.threeLight.shadow.mapSize.height = 512;
-        if (this.threeLight.shadow.camera instanceof PerspectiveCamera) {
+        if (this.threeLight.shadow.camera.isPerspectiveCamera) {
           this.threeLight.shadow.camera.near = 0.5;
           this.threeLight.shadow.camera.far = 500;
         }
@@ -97665,7 +97705,7 @@ void main() {
       this.threeLight.castShadow = castShadows;
     }
     setAngle(angle) {
-      if (this.threeLight instanceof SpotLight) {
+      if (this.threeLight.isSpotLight) {
         this.threeLight.angle = MathUtils.degToRad(angle);
       }
     }
@@ -97816,7 +97856,7 @@ void main() {
         this.animLoadingInstanceManager.abortIfLoading();
         if (this.loadedState && !this.registeredParentAttachment) {
           const parent = this.model.parentElement;
-          if (parent instanceof Model) {
+          if (parent && Model.isModel(parent)) {
             this.registeredParentAttachment = parent;
             parent.modelGraphics.registerAttachment(this.model);
           }
@@ -97933,7 +97973,7 @@ void main() {
         }
         this.updateMeshCallback();
         const parent = this.model.parentElement;
-        if (parent instanceof Model) {
+        if (parent && Model.isModel(parent)) {
           if (!this.latestAnimPromise && !this.animState) {
             this.registeredParentAttachment = parent;
             parent.modelGraphics.registerAttachment(this.model);
@@ -98053,7 +98093,7 @@ void main() {
     triggerSocketedChildrenTransformed() {
       this.socketChildrenByBone.forEach((children) => {
         children.forEach((child) => {
-          if (child instanceof TransformableElement) {
+          if (TransformableElement.isTransformableElement(child)) {
             child.didUpdateTransformation();
           }
         });
@@ -98764,7 +98804,7 @@ void main() {
               break;
             }
             const mElement = MElement.getMElementFromObject(obj);
-            if (mElement && mElement instanceof TransformableElement && mElement.isClickable()) {
+            if (mElement && TransformableElement.isTransformableElement(mElement) && mElement.isClickable()) {
               const elementRelative = getRelativePositionAndRotationRelativeToObject(
                 {
                   position: intersection.point,
@@ -99395,7 +99435,7 @@ void main() {
     getBoundingBoxForElement(element) {
       const camera = this.camera;
       const renderer = this.renderer;
-      if (!(element instanceof MElement)) {
+      if (!MElement.isMElement(element)) {
         return null;
       }
       const object = element.getContainer();