kitchen-simulator 4.0.3-react-18 → 4.0.4-react-18

package/es/LiteKitchenConfigurator.js

@@ -306,18 +306,19 @@ var LiteKitchenConfigurator = /*#__PURE__*/function (_Component) {
       window.forRedo = [];
     }
   }, {
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps) {
-      var stateExtractor = nextProps.stateExtractor,
-        state = nextProps.state,
-        projectActions = nextProps.projectActions,
-        catalog = nextProps.catalog,
-        externalEvent = nextProps.externalEvent,
-        onInternalEvent = nextProps.onInternalEvent;
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var _this$props = this.props,
+        stateExtractor = _this$props.stateExtractor,
+        state = _this$props.state,
+        projectActions = _this$props.projectActions,
+        catalog = _this$props.catalog,
+        externalEvent = _this$props.externalEvent,
+        onInternalEvent = _this$props.onInternalEvent;
 
       // handle external events
-      if (this.props.externalEvent !== externalEvent) {
-        handleExternalEvent(nextProps);
+      if (prevProps.externalEvent !== externalEvent) {
+        handleExternalEvent(this.props);
       }
       var plannerState = stateExtractor(state);
       var catalogReady = plannerState.getIn(['catalog', 'ready']);
@@ -337,12 +338,12 @@ var LiteKitchenConfigurator = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-      var _this$props = this.props,
-        width = _this$props.width,
-        height = _this$props.height,
-        state = _this$props.state,
-        stateExtractor = _this$props.stateExtractor,
-        props = _objectWithoutProperties(_this$props, _excluded);
+      var _this$props2 = this.props,
+        width = _this$props2.width,
+        height = _this$props2.height,
+        state = _this$props2.state,
+        stateExtractor = _this$props2.stateExtractor,
+        props = _objectWithoutProperties(_this$props2, _excluded);
       var actionsFromProps = objectsMap(actions, function (ns) {
         return _this2.props[ns];
       });

package/es/components/style/form-number-input.js

@@ -29,26 +29,14 @@ var FormNumberInput = /*#__PURE__*/function (_Component) {
   }
   _inherits(FormNumberInput, _Component);
   return _createClass(FormNumberInput, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      if (this.input.current && ['width', 'length'].includes(this.props.labelName.toLowerCase())) {
-        this.input.current.focus();
-        this.input.current.select();
-      }
-    }
-  }, {
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps) {
-      if (this.props.value !== nextProps.value || this.props.focus !== nextProps.focus) {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (this.props.value !== prevProps.value || this.props.focus !== prevProps.focus) {
         this.setState({
-          showedValue: nextProps.value,
-          focusOn: nextProps.focus
+          showedValue: this.props.value,
+          focusOn: this.props.focus
         });
       }
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, preprevState) {
       if (this.props.value !== prevProps.value && prevProps.labelName !== 'Ceiling Height') {
         this.input.current.focus();
         this.input.current.select();
@@ -69,7 +57,6 @@ var FormNumberInput = /*#__PURE__*/function (_Component) {
           });
         }
       }
-      return null;
     }
   }, {
     key: "render",

package/es/components/viewer2d/scene.js

@@ -19,16 +19,15 @@ var Scene = /*#__PURE__*/function (_Component) {
   }
   _inherits(Scene, _Component);
   return _createClass(Scene, [{
-    key: "componentWillReceiveProps",
+    key: "componentDidUpdate",
     value: function () {
-      var _componentWillReceiveProps = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(nextProps) {
-        var scene, catalog, height, layers, selectedLayer, msg, isNotFoundInElements, itemType;
+      var _componentDidUpdate = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(prevProps) {
+        var _this$props, scene, catalog, height, layers, selectedLayer, msg, isNotFoundInElements, itemType;
         return _regeneratorRuntime.wrap(function (_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
-              // console.log("componentDidMount", this.props.scene.hashCode(), nextProps.scene.hashCode());
-              if (this.props.scene.hashCode() !== nextProps.scene.hashCode()) {
-                scene = nextProps.scene, catalog = nextProps.catalog;
+              if (this.props.scene.hashCode() !== prevProps.scene.hashCode()) {
+                _this$props = this.props, scene = _this$props.scene, catalog = _this$props.catalog;
                 height = scene.height, layers = scene.layers;
                 selectedLayer = layers.get(scene.selectedLayer);
                 msg = '';
@@ -60,10 +59,10 @@ var Scene = /*#__PURE__*/function (_Component) {
           }
         }, _callee, this);
       }));
-      function componentWillReceiveProps(_x) {
-        return _componentWillReceiveProps.apply(this, arguments);
+      function componentDidUpdate(_x) {
+        return _componentDidUpdate.apply(this, arguments);
       }
-      return componentWillReceiveProps;
+      return componentDidUpdate;
     }()
   }, {
     key: "shouldComponentUpdate",
@@ -74,10 +73,9 @@ var Scene = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this = this;
-      // console.log("scene", this);
-      var _this$props = this.props,
-        scene = _this$props.scene,
-        catalog = _this$props.catalog;
+      var _this$props2 = this.props,
+        scene = _this$props2.scene,
+        catalog = _this$props2.catalog;
       var height = scene.height,
         layers = scene.layers;
       var selectedLayer = layers.get(scene.selectedLayer);

package/es/components/viewer2d/viewer2d.js

@@ -1451,6 +1451,9 @@ export default function Viewer2D(_ref) {
     detectPinchGesture: false,
     disableDoubleClickZoomWithToolAuto: true,
     ref: Viewer,
+    miniatureProps: {
+      position: POSITION_NONE
+    },
     toolbarProps: {
       position: POSITION_NONE
     }

package/es/components/viewer3d/viewer3d-first-person.js

@@ -254,10 +254,12 @@ var Viewer3DFirstPerson = /*#__PURE__*/function (_React$Component) {
       this.renderer.renderLists.dispose();
     }
   }, {
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps) {
-      var width = nextProps.width,
-        height = nextProps.height;
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var _this$props = this.props,
+        width = _this$props.width,
+        height = _this$props.height,
+        state = _this$props.state;
       var camera = this.camera,
         renderer = this.renderer,
         scene3D = this.scene3D,
@@ -270,19 +272,27 @@ var Viewer3DFirstPerson = /*#__PURE__*/function (_React$Component) {
         linesActions: this.context.linesActions,
         projectActions: this.context.projectActions
       };
-      this.width = width;
-      this.height = height;
-      camera.aspect = width / height;
-      camera.updateProjectionMatrix();
-      if (nextProps.scene !== this.props.state.scene) {
-        var changedValues = diff(this.props.state.scene, nextProps.state.scene);
-        updateScene(planData, nextProps.state.scene, this.props.state.scene, changedValues.toJS(), actions, this.context.catalog);
+
+      // Handle width/height changes
+      if (width !== prevProps.width || height !== prevProps.height) {
+        this.width = width;
+        this.height = height;
+        camera.aspect = width / height;
+        camera.updateProjectionMatrix();
+        renderer.setSize(width, height);
+      }
+
+      // Handle scene changes
+      if (state.scene !== prevProps.state.scene) {
+        var changedValues = diff(prevProps.state.scene, state.scene);
+        updateScene(planData, state.scene, prevProps.state.scene, changedValues.toJS(), actions, this.context.catalog);
       }
-      renderer.setSize(width, height);
-      renderer.clear(); // clear buffers
-      renderer.render(scene3D, camera); // render scene 1
-      renderer.clearDepth(); // clear depth buffer
-      renderer.render(sceneOnTop, camera); // render scene 2
+
+      // Always re-render after updates
+      renderer.clear();
+      renderer.render(scene3D, camera);
+      renderer.clearDepth();
+      renderer.render(sceneOnTop, camera);
     }
   }, {
     key: "render",

package/es/components/viewer3d/viewer3d.js

@@ -2445,14 +2445,18 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
       this.renderer.renderLists.dispose();
     }
   }, {
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps) {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
       var _this4 = this;
-      if (this.props.downloadFlag && diff(this.props.state, nextProps.state).toJS().length == 0 || isEmpty(nextProps.state.scene)) return;
-      var width = nextProps.width,
-        height = nextProps.height;
-      var selectedLayer = nextProps.state.getIn(['scene', 'layers', nextProps.state.scene.selectedLayer]);
-      var ceilHeight = convert(selectedLayer.ceilHeight).from(selectedLayer.unit).to(nextProps.state.scene.unit);
+      // Early return if downloadFlag and state are unchanged or scene is empty
+      if (this.props.downloadFlag && diff(prevProps.state, this.props.state).toJS().length == 0 || isEmpty(this.props.state.scene)) {
+        return;
+      }
+      var _this$props = this.props,
+        width = _this$props.width,
+        height = _this$props.height;
+      var selectedLayer = this.props.state.getIn(['scene', 'layers', this.props.state.scene.selectedLayer]);
+      var ceilHeight = convert(selectedLayer.ceilHeight).from(selectedLayer.unit).to(this.props.state.scene.unit);
       var actions = {
         areaActions: this.context.areaActions,
         holesActions: this.context.holesActions,
@@ -2462,7 +2466,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
         projectActions: this.context.projectActions,
         catalog: this.context.catalog
       };
-      var isLoadingCabinet = nextProps.state.scene.isLoadingCabinet;
+      var isLoadingCabinet = this.props.state.scene.isLoadingCabinet;
       if (this.state.isLoadingCabinet !== isLoadingCabinet) this.setState({
         isLoadingCabinet: isLoadingCabinet
       });
@@ -2473,7 +2477,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
       var allItemRect;
 
       // handle camera setting
-      switch (this.props.state.mode) {
+      switch (prevProps.state.mode) {
         case MODE_ELEVATION_VIEW:
           // when Elevation mode (camera: Orthographic)
           var cameraRect = handleCamRect(width, height, ceilHeight, this.state.lineLength);
@@ -2491,12 +2495,12 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
           break;
       }
       this.camera.updateProjectionMatrix();
-      var data = nextProps.state.scene;
+      var data = this.props.state.scene;
       var layer = data.getIn(['layers', data.selectedLayer]);
       var self = this;
       function implementBacksplash() {
-        if (isElevationView(self.props.state.mode)) return; // apply backsplash when just 3D_mode, not elevation_mode
-        var allItems = GeometryUtils.getAllItemSpecified(nextProps.state.scene, actions.catalog, BASE_CABINET_LAYOUTPOS);
+        if (isElevationView(self.props.state.mode)) return;
+        var allItems = GeometryUtils.getAllItemSpecified(self.props.state.scene, actions.catalog, BASE_CABINET_LAYOUTPOS);
         var i,
           items = [];
         for (i = 0; i < allItems.others.length; i++) items.push(allItems.others[i]);
@@ -2505,7 +2509,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
           var calcRect = GeometryUtils.getCalcRectFromItem3D(items[i]);
           var visible = GeometryUtils.isSnappedLine(calcRect, allLineRects);
           actions.itemsActions.setBacksplashVisible(items[i].itemInfo.id, visible);
-          createBacksplash(items[i], nextProps.state.scene.getIn(['layers', nextProps.state.scene.selectedLayer]), planData, nextProps.state.scene);
+          createBacksplash(items[i], self.props.state.scene.getIn(['layers', self.props.state.scene.selectedLayer]), planData, self.props.state.scene);
         }
       }
       function implementWarningBox() {
@@ -2533,10 +2537,10 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
           showflag: false
         });
       }
-      if (nextProps.state.scene !== this.props.state.scene || nextProps.state.doorStyle && nextProps.state.doorStyle.get('name') !== this.props.state.doorStyle.get('name')) {
-        var changedValues = diff(this.props.state.scene, nextProps.state.scene);
+      if (this.props.state.scene !== prevProps.state.scene || this.props.state.doorStyle && this.props.state.doorStyle.get('name') !== prevProps.state.doorStyle.get('name')) {
+        var changedValues = diff(prevProps.state.scene, this.props.state.scene);
         prepareSnapSpec(layer);
-        if (nextProps.state.doorStyle && nextProps.state.doorStyle.get('name') === this.props.state.doorStyle.get('name')) {
+        if (this.props.state.doorStyle && this.props.state.doorStyle.get('name') === prevProps.state.doorStyle.get('name')) {
           self.setState({
             isLoading: true
           });
@@ -2555,7 +2559,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
           }
           self.renderer.domElement.style.display = 'none';
         }
-        if (nextProps.state.scene.showfg == true) {
+        if (this.props.state.scene.showfg == true) {
           implementBacksplash();
           implementWarningBox();
         } else {
@@ -2564,7 +2568,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
         var _this$state = this.state,
           toolObj = _this$state.toolObj,
           angleObj = _this$state.angleObj;
-        var _updateScene = updateScene(this.planData, nextProps.state.scene, this.props.state.scene, changedValues.toJS(), actions, this.context.catalog, nextProps.state.mode, toolObj, angleObj, nextProps.state.draggingSupport),
+        var _updateScene = updateScene(this.planData, this.props.state.scene, prevProps.state.scene, changedValues.toJS(), actions, this.context.catalog, this.props.state.mode, toolObj, angleObj, this.props.state.draggingSupport),
           promise = _updateScene.promise;
         self.setState();
         promise.then(function (p1Value) {
@@ -2576,8 +2580,8 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
           });
           self.renderer.domElement.style.display = 'block';
         });
-        if (nextProps.state.getIn(['scene', 'isEndDragging'])) {
-          nextProps.state.setIn(['scene', 'isEndDragging'], false);
+        if (this.props.state.getIn(['scene', 'isEndDragging'])) {
+          this.props.state.setIn(['scene', 'isEndDragging'], false);
         }
       }
       this.renderer.setSize(width, height);

package/lib/LiteKitchenConfigurator.js

@@ -315,18 +315,19 @@ var LiteKitchenConfigurator = /*#__PURE__*/function (_Component) {
       window.forRedo = [];
     }
   }, {
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps) {
-      var stateExtractor = nextProps.stateExtractor,
-        state = nextProps.state,
-        projectActions = nextProps.projectActions,
-        catalog = nextProps.catalog,
-        externalEvent = nextProps.externalEvent,
-        onInternalEvent = nextProps.onInternalEvent;
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var _this$props = this.props,
+        stateExtractor = _this$props.stateExtractor,
+        state = _this$props.state,
+        projectActions = _this$props.projectActions,
+        catalog = _this$props.catalog,
+        externalEvent = _this$props.externalEvent,
+        onInternalEvent = _this$props.onInternalEvent;
 
       // handle external events
-      if (this.props.externalEvent !== externalEvent) {
-        (0, _isolateEventHandler.handleExternalEvent)(nextProps);
+      if (prevProps.externalEvent !== externalEvent) {
+        (0, _isolateEventHandler.handleExternalEvent)(this.props);
       }
       var plannerState = stateExtractor(state);
       var catalogReady = plannerState.getIn(['catalog', 'ready']);
@@ -346,12 +347,12 @@ var LiteKitchenConfigurator = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-      var _this$props = this.props,
-        width = _this$props.width,
-        height = _this$props.height,
-        state = _this$props.state,
-        stateExtractor = _this$props.stateExtractor,
-        props = (0, _objectWithoutProperties2["default"])(_this$props, _excluded);
+      var _this$props2 = this.props,
+        width = _this$props2.width,
+        height = _this$props2.height,
+        state = _this$props2.state,
+        stateExtractor = _this$props2.stateExtractor,
+        props = (0, _objectWithoutProperties2["default"])(_this$props2, _excluded);
       var actionsFromProps = (0, _objectsUtils.objectsMap)(_export["default"], function (ns) {
         return _this2.props[ns];
       });

package/lib/components/style/form-number-input.js

@@ -38,26 +38,14 @@ var FormNumberInput = exports["default"] = /*#__PURE__*/function (_Component) {
   }
   (0, _inherits2["default"])(FormNumberInput, _Component);
   return (0, _createClass2["default"])(FormNumberInput, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      if (this.input.current && ['width', 'length'].includes(this.props.labelName.toLowerCase())) {
-        this.input.current.focus();
-        this.input.current.select();
-      }
-    }
-  }, {
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps) {
-      if (this.props.value !== nextProps.value || this.props.focus !== nextProps.focus) {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (this.props.value !== prevProps.value || this.props.focus !== prevProps.focus) {
         this.setState({
-          showedValue: nextProps.value,
-          focusOn: nextProps.focus
+          showedValue: this.props.value,
+          focusOn: this.props.focus
         });
       }
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, preprevState) {
       if (this.props.value !== prevProps.value && prevProps.labelName !== 'Ceiling Height') {
         this.input.current.focus();
         this.input.current.select();
@@ -78,7 +66,6 @@ var FormNumberInput = exports["default"] = /*#__PURE__*/function (_Component) {
           });
         }
       }
-      return null;
     }
   }, {
     key: "render",

package/lib/components/viewer2d/scene.js

@@ -28,16 +28,15 @@ var Scene = exports["default"] = /*#__PURE__*/function (_Component) {
   }
   (0, _inherits2["default"])(Scene, _Component);
   return (0, _createClass2["default"])(Scene, [{
-    key: "componentWillReceiveProps",
+    key: "componentDidUpdate",
     value: function () {
-      var _componentWillReceiveProps = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(nextProps) {
-        var scene, catalog, height, layers, selectedLayer, msg, isNotFoundInElements, itemType;
+      var _componentDidUpdate = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(prevProps) {
+        var _this$props, scene, catalog, height, layers, selectedLayer, msg, isNotFoundInElements, itemType;
         return _regenerator["default"].wrap(function (_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
-              // console.log("componentDidMount", this.props.scene.hashCode(), nextProps.scene.hashCode());
-              if (this.props.scene.hashCode() !== nextProps.scene.hashCode()) {
-                scene = nextProps.scene, catalog = nextProps.catalog;
+              if (this.props.scene.hashCode() !== prevProps.scene.hashCode()) {
+                _this$props = this.props, scene = _this$props.scene, catalog = _this$props.catalog;
                 height = scene.height, layers = scene.layers;
                 selectedLayer = layers.get(scene.selectedLayer);
                 msg = '';
@@ -69,10 +68,10 @@ var Scene = exports["default"] = /*#__PURE__*/function (_Component) {
           }
         }, _callee, this);
       }));
-      function componentWillReceiveProps(_x) {
-        return _componentWillReceiveProps.apply(this, arguments);
+      function componentDidUpdate(_x) {
+        return _componentDidUpdate.apply(this, arguments);
       }
-      return componentWillReceiveProps;
+      return componentDidUpdate;
     }()
   }, {
     key: "shouldComponentUpdate",
@@ -83,10 +82,9 @@ var Scene = exports["default"] = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this = this;
-      // console.log("scene", this);
-      var _this$props = this.props,
-        scene = _this$props.scene,
-        catalog = _this$props.catalog;
+      var _this$props2 = this.props,
+        scene = _this$props2.scene,
+        catalog = _this$props2.catalog;
       var height = scene.height,
         layers = scene.layers;
       var selectedLayer = layers.get(scene.selectedLayer);

package/lib/components/viewer2d/viewer2d.js

@@ -1459,6 +1459,9 @@ function Viewer2D(_ref) {
     detectPinchGesture: false,
     disableDoubleClickZoomWithToolAuto: true,
     ref: Viewer,
+    miniatureProps: {
+      position: _reactSvgPanZoom.POSITION_NONE
+    },
     toolbarProps: {
       position: _reactSvgPanZoom.POSITION_NONE
     }

package/lib/components/viewer3d/viewer3d-first-person.js

@@ -261,10 +261,12 @@ var Viewer3DFirstPerson = exports["default"] = /*#__PURE__*/function (_React$Com
       this.renderer.renderLists.dispose();
     }
   }, {
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps) {
-      var width = nextProps.width,
-        height = nextProps.height;
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var _this$props = this.props,
+        width = _this$props.width,
+        height = _this$props.height,
+        state = _this$props.state;
       var camera = this.camera,
         renderer = this.renderer,
         scene3D = this.scene3D,
@@ -277,19 +279,27 @@ var Viewer3DFirstPerson = exports["default"] = /*#__PURE__*/function (_React$Com
         linesActions: this.context.linesActions,
         projectActions: this.context.projectActions
       };
-      this.width = width;
-      this.height = height;
-      camera.aspect = width / height;
-      camera.updateProjectionMatrix();
-      if (nextProps.scene !== this.props.state.scene) {
-        var changedValues = (0, _immutablediff["default"])(this.props.state.scene, nextProps.state.scene);
-        (0, _sceneCreator.updateScene)(planData, nextProps.state.scene, this.props.state.scene, changedValues.toJS(), actions, this.context.catalog);
+
+      // Handle width/height changes
+      if (width !== prevProps.width || height !== prevProps.height) {
+        this.width = width;
+        this.height = height;
+        camera.aspect = width / height;
+        camera.updateProjectionMatrix();
+        renderer.setSize(width, height);
+      }
+
+      // Handle scene changes
+      if (state.scene !== prevProps.state.scene) {
+        var changedValues = (0, _immutablediff["default"])(prevProps.state.scene, state.scene);
+        (0, _sceneCreator.updateScene)(planData, state.scene, prevProps.state.scene, changedValues.toJS(), actions, this.context.catalog);
       }
-      renderer.setSize(width, height);
-      renderer.clear(); // clear buffers
-      renderer.render(scene3D, camera); // render scene 1
-      renderer.clearDepth(); // clear depth buffer
-      renderer.render(sceneOnTop, camera); // render scene 2
+
+      // Always re-render after updates
+      renderer.clear();
+      renderer.render(scene3D, camera);
+      renderer.clearDepth();
+      renderer.render(sceneOnTop, camera);
     }
   }, {
     key: "render",

package/lib/components/viewer3d/viewer3d.js

@@ -2451,14 +2451,18 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
       this.renderer.renderLists.dispose();
     }
   }, {
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps) {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
       var _this4 = this;
-      if (this.props.downloadFlag && (0, _immutablediff["default"])(this.props.state, nextProps.state).toJS().length == 0 || (0, _helper.isEmpty)(nextProps.state.scene)) return;
-      var width = nextProps.width,
-        height = nextProps.height;
-      var selectedLayer = nextProps.state.getIn(['scene', 'layers', nextProps.state.scene.selectedLayer]);
-      var ceilHeight = (0, _convertUnitsLite.convert)(selectedLayer.ceilHeight).from(selectedLayer.unit).to(nextProps.state.scene.unit);
+      // Early return if downloadFlag and state are unchanged or scene is empty
+      if (this.props.downloadFlag && (0, _immutablediff["default"])(prevProps.state, this.props.state).toJS().length == 0 || (0, _helper.isEmpty)(this.props.state.scene)) {
+        return;
+      }
+      var _this$props = this.props,
+        width = _this$props.width,
+        height = _this$props.height;
+      var selectedLayer = this.props.state.getIn(['scene', 'layers', this.props.state.scene.selectedLayer]);
+      var ceilHeight = (0, _convertUnitsLite.convert)(selectedLayer.ceilHeight).from(selectedLayer.unit).to(this.props.state.scene.unit);
       var actions = {
         areaActions: this.context.areaActions,
         holesActions: this.context.holesActions,
@@ -2468,7 +2472,7 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
         projectActions: this.context.projectActions,
         catalog: this.context.catalog
       };
-      var isLoadingCabinet = nextProps.state.scene.isLoadingCabinet;
+      var isLoadingCabinet = this.props.state.scene.isLoadingCabinet;
       if (this.state.isLoadingCabinet !== isLoadingCabinet) this.setState({
         isLoadingCabinet: isLoadingCabinet
       });
@@ -2479,7 +2483,7 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
       var allItemRect;
 
       // handle camera setting
-      switch (this.props.state.mode) {
+      switch (prevProps.state.mode) {
         case _constants.MODE_ELEVATION_VIEW:
           // when Elevation mode (camera: Orthographic)
           var cameraRect = (0, _helper.handleCamRect)(width, height, ceilHeight, this.state.lineLength);
@@ -2497,12 +2501,12 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
           break;
       }
       this.camera.updateProjectionMatrix();
-      var data = nextProps.state.scene;
+      var data = this.props.state.scene;
       var layer = data.getIn(['layers', data.selectedLayer]);
       var self = this;
       function implementBacksplash() {
-        if ((0, _helper.isElevationView)(self.props.state.mode)) return; // apply backsplash when just 3D_mode, not elevation_mode
-        var allItems = _export.GeometryUtils.getAllItemSpecified(nextProps.state.scene, actions.catalog, _constants.BASE_CABINET_LAYOUTPOS);
+        if ((0, _helper.isElevationView)(self.props.state.mode)) return;
+        var allItems = _export.GeometryUtils.getAllItemSpecified(self.props.state.scene, actions.catalog, _constants.BASE_CABINET_LAYOUTPOS);
         var i,
           items = [];
         for (i = 0; i < allItems.others.length; i++) items.push(allItems.others[i]);
@@ -2511,7 +2515,7 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
           var calcRect = _export.GeometryUtils.getCalcRectFromItem3D(items[i]);
           var visible = _export.GeometryUtils.isSnappedLine(calcRect, allLineRects);
           actions.itemsActions.setBacksplashVisible(items[i].itemInfo.id, visible);
-          (0, _sceneCreator.createBacksplash)(items[i], nextProps.state.scene.getIn(['layers', nextProps.state.scene.selectedLayer]), planData, nextProps.state.scene);
+          (0, _sceneCreator.createBacksplash)(items[i], self.props.state.scene.getIn(['layers', self.props.state.scene.selectedLayer]), planData, self.props.state.scene);
         }
       }
       function implementWarningBox() {
@@ -2539,10 +2543,10 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
           showflag: false
         });
       }
-      if (nextProps.state.scene !== this.props.state.scene || nextProps.state.doorStyle && nextProps.state.doorStyle.get('name') !== this.props.state.doorStyle.get('name')) {
-        var changedValues = (0, _immutablediff["default"])(this.props.state.scene, nextProps.state.scene);
+      if (this.props.state.scene !== prevProps.state.scene || this.props.state.doorStyle && this.props.state.doorStyle.get('name') !== prevProps.state.doorStyle.get('name')) {
+        var changedValues = (0, _immutablediff["default"])(prevProps.state.scene, this.props.state.scene);
         prepareSnapSpec(layer);
-        if (nextProps.state.doorStyle && nextProps.state.doorStyle.get('name') === this.props.state.doorStyle.get('name')) {
+        if (this.props.state.doorStyle && this.props.state.doorStyle.get('name') === prevProps.state.doorStyle.get('name')) {
           self.setState({
             isLoading: true
           });
@@ -2561,7 +2565,7 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
           }
           self.renderer.domElement.style.display = 'none';
         }
-        if (nextProps.state.scene.showfg == true) {
+        if (this.props.state.scene.showfg == true) {
           implementBacksplash();
           implementWarningBox();
         } else {
@@ -2570,7 +2574,7 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
         var _this$state = this.state,
           toolObj = _this$state.toolObj,
           angleObj = _this$state.angleObj;
-        var _updateScene = (0, _sceneCreator.updateScene)(this.planData, nextProps.state.scene, this.props.state.scene, changedValues.toJS(), actions, this.context.catalog, nextProps.state.mode, toolObj, angleObj, nextProps.state.draggingSupport),
+        var _updateScene = (0, _sceneCreator.updateScene)(this.planData, this.props.state.scene, prevProps.state.scene, changedValues.toJS(), actions, this.context.catalog, this.props.state.mode, toolObj, angleObj, this.props.state.draggingSupport),
           promise = _updateScene.promise;
         self.setState();
         promise.then(function (p1Value) {
@@ -2582,8 +2586,8 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
           });
           self.renderer.domElement.style.display = 'block';
         });
-        if (nextProps.state.getIn(['scene', 'isEndDragging'])) {
-          nextProps.state.setIn(['scene', 'isEndDragging'], false);
+        if (this.props.state.getIn(['scene', 'isEndDragging'])) {
+          this.props.state.setIn(['scene', 'isEndDragging'], false);
         }
       }
       this.renderer.setSize(width, height);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kitchen-simulator",
-  "version": "4.0.3-react-18",
+  "version": "4.0.4-react-18",
   "description": "It is a kitchen simulator (self-contained micro-frontend).",
   "license": "MIT",
   "main": "lib/index.js",