redhotmagma-visualization 1.45.0 → 1.45.1

package/VisualizationContainer.js

@@ -112,12 +112,35 @@ var VisualizationContainer = exports.VisualizationContainer = /*#__PURE__*/funct
       this.resizeSensor = new _cssElementQueries.ResizeSensor(container, this.onSizeChange);
     }
   }, {
-    key: "updateVisualization",
-    value: function updateVisualization() {
-      var prevProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    key: "initMutationObserver",
+    value: function initMutationObserver() {
+      if (this.mutationObserver) {
+        this.mutationObserver.disconnect();
+      }
       var _this$props2 = this.props,
         visualization = _this$props2.visualization,
         alignTargetElement = _this$props2.alignTargetElement;
+      if (!alignTargetElement) {
+        return;
+      }
+      this.mutationObserver = new MutationObserver(function () {
+        (0, _updateFitSizeToElement.updateFitSizeToElement)(visualization, alignTargetElement).updateCameraPosition({
+          animate: true
+        });
+        visualization.render();
+      });
+      // do the update only when attributes have changed (e.g. style)
+      this.mutationObserver.observe(alignTargetElement, {
+        attributes: true
+      });
+    }
+  }, {
+    key: "updateVisualization",
+    value: function updateVisualization() {
+      var prevProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      var _this$props3 = this.props,
+        visualization = _this$props3.visualization,
+        alignTargetElement = _this$props3.alignTargetElement;
       var container = this.containerRef.current;
       if (visualization !== prevProps.visualization) {
         if (prevProps.visualization) {
@@ -139,13 +162,14 @@ var VisualizationContainer = exports.VisualizationContainer = /*#__PURE__*/funct
         });
         visualization.render();
       }
+      this.initMutationObserver();
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      var _this$props3 = this.props,
-        autoDispose = _this$props3.autoDispose,
-        visualization = _this$props3.visualization;
+      var _this$props4 = this.props,
+        autoDispose = _this$props4.autoDispose,
+        visualization = _this$props4.visualization;
       autoDispose && visualization.dispose();
       this.resizeSensor && this.resizeSensor.detach();
       this.offObservers && this.offObservers();
@@ -177,10 +201,10 @@ var VisualizationContainer = exports.VisualizationContainer = /*#__PURE__*/funct
   }, {
     key: "render",
     value: function render() {
-      var _this$props4 = this.props,
-        className = _this$props4.className,
-        ProgressComponent = _this$props4.ProgressComponent,
-        BrokenComponent = _this$props4.BrokenComponent;
+      var _this$props5 = this.props,
+        className = _this$props5.className,
+        ProgressComponent = _this$props5.ProgressComponent,
+        BrokenComponent = _this$props5.BrokenComponent;
       var broken = this.state.broken;
       var style = _objectSpread(_objectSpread({}, className ? {} : defaultContainerStyle), broken && BrokenComponent && {
         display: "none"

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "redhotmagma-visualization",
-  "version": "1.45.0",
+  "version": "1.45.1",
   "license": "UNLICENSED",
   "private": false,
   "main": "./index.js",
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
-    "@configuratorware/scripts": "1.45.0",
+    "@configuratorware/scripts": "1.45.1",
     "@tweenjs/tween.js": "^17.6.0",
     "console-polyfill": "^0.3.0",
     "css-element-queries": "^1.2.3",

package/src/VisualizationContainer.js

@@ -75,6 +75,24 @@ export class VisualizationContainer extends React.Component {
     this.resizeSensor = new ResizeSensor(container, this.onSizeChange);
   }
 
+  initMutationObserver() {
+    if (this.mutationObserver) {
+      this.mutationObserver.disconnect();
+    }
+    const { visualization, alignTargetElement } = this.props;
+    if (!alignTargetElement) {
+      return;
+    }
+    this.mutationObserver = new MutationObserver(() => {
+      updateFitSizeToElement(visualization, alignTargetElement).updateCameraPosition({
+        animate: true,
+      });
+      visualization.render();
+    });
+    // do the update only when attributes have changed (e.g. style)
+    this.mutationObserver.observe(alignTargetElement, { attributes: true });
+  }
+
   updateVisualization(prevProps = {}) {
     const { visualization, alignTargetElement } = this.props;
     const container = this.containerRef.current;
@@ -105,6 +123,7 @@ export class VisualizationContainer extends React.Component {
       });
       visualization.render();
     }
+    this.initMutationObserver();
   }
 
   componentWillUnmount() {