kitchen-simulator 4.0.3-react-18 → 4.0.6-react-18

package/es/LiteKitchenConfigurator.js

@@ -306,18 +306,21 @@ 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);
+      var prevId = prevProps.externalEvent && prevProps.externalEvent.id;
+      var nextId = externalEvent && externalEvent.id;
+      if (nextId != null && prevId !== nextId) {
+        handleExternalEvent(this.props);
       }
       var plannerState = stateExtractor(state);
       var catalogReady = plannerState.getIn(['catalog', 'ready']);
@@ -337,12 +340,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/LiteRenderer.js

@@ -145,6 +145,13 @@ export default function LiteRenderer(props) {
     onInternalEvent = props.onInternalEvent,
     onError = props.onError,
     passThrough = _objectWithoutProperties(props, _excluded);
+  var normalizedExternalEvent = React.useMemo(function () {
+    if (!externalEvent) return null;
+    if (externalEvent.id != null) return externalEvent;
+    return _objectSpread(_objectSpread({}, externalEvent), {}, {
+      id: "".concat(Date.now(), "-").concat(Math.random())
+    });
+  }, [externalEvent]);
 
   /* ---------- track last external event ---------- */
   var lastExternalEventRef = useRef(null);
@@ -291,7 +298,7 @@ export default function LiteRenderer(props) {
       return state.get('KitchenConfigurator');
     },
     configData: configData,
-    externalEvent: externalEvent,
+    externalEvent: normalizedExternalEvent,
     onInternalEvent: onInternalEvent
   }, passThrough))));
 }

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/es/index.js

@@ -1,65 +1 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-import LiteRenderer from "./LiteRenderer";
-export function renderKitchenSimulator(container) {
-  var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  if (!container) {
-    throw new Error('renderKitchenSimulator: container is required');
-  }
-
-  // cache the root on the container so we never call createRoot twice
-  if (!container.__kitchenRoot) {
-    container.__kitchenRoot = createRoot(container);
-  }
-  var setExternalEventFn = null;
-  var Wrapper = /*#__PURE__*/function (_React$Component) {
-    function Wrapper(p) {
-      var _this;
-      _classCallCheck(this, Wrapper);
-      _this = _callSuper(this, Wrapper, [p]);
-      _this.state = {
-        externalEvent: p.externalEvent || null
-      };
-      setExternalEventFn = _this.setExternalEvent.bind(_this);
-      return _this;
-    }
-    _inherits(Wrapper, _React$Component);
-    return _createClass(Wrapper, [{
-      key: "setExternalEvent",
-      value: function setExternalEvent(newEvent) {
-        this.setState({
-          externalEvent: newEvent
-        });
-      }
-    }, {
-      key: "render",
-      value: function render() {
-        return /*#__PURE__*/React.createElement(LiteRenderer, _extends({}, this.props, {
-          externalEvent: this.state.externalEvent
-        }));
-      }
-    }]);
-  }(React.Component);
-  container.__kitchenRoot.render(/*#__PURE__*/React.createElement(Wrapper, props));
-  return {
-    updateExternalEvent: function updateExternalEvent(newExternalEvent) {
-      setExternalEventFn && setExternalEventFn(newExternalEvent);
-    },
-    unmount: function unmount() {
-      if (container.__kitchenRoot) {
-        container.__kitchenRoot.unmount();
-        container.__kitchenRoot = null;
-      }
-      setExternalEventFn = null;
-    }
-  };
-}
-export default renderKitchenSimulator;
+export { default as LiteRenderer } from "./LiteRenderer";

package/lib/LiteKitchenConfigurator.js

@@ -315,18 +315,21 @@ 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);
+      var prevId = prevProps.externalEvent && prevProps.externalEvent.id;
+      var nextId = externalEvent && externalEvent.id;
+      if (nextId != null && prevId !== nextId) {
+        (0, _isolateEventHandler.handleExternalEvent)(this.props);
       }
       var plannerState = stateExtractor(state);
       var catalogReady = plannerState.getIn(['catalog', 'ready']);
@@ -346,12 +349,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/LiteRenderer.js

@@ -154,6 +154,13 @@ function LiteRenderer(props) {
     onInternalEvent = props.onInternalEvent,
     onError = props.onError,
     passThrough = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var normalizedExternalEvent = _react["default"].useMemo(function () {
+    if (!externalEvent) return null;
+    if (externalEvent.id != null) return externalEvent;
+    return _objectSpread(_objectSpread({}, externalEvent), {}, {
+      id: "".concat(Date.now(), "-").concat(Math.random())
+    });
+  }, [externalEvent]);
 
   /* ---------- track last external event ---------- */
   var lastExternalEventRef = (0, _react.useRef)(null);
@@ -300,7 +307,7 @@ function LiteRenderer(props) {
       return state.get('KitchenConfigurator');
     },
     configData: configData,
-    externalEvent: externalEvent,
+    externalEvent: normalizedExternalEvent,
     onInternalEvent: onInternalEvent
   }, passThrough))));
 }

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/lib/index.js

@@ -4,70 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-exports.renderKitchenSimulator = renderKitchenSimulator;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _react = _interopRequireDefault(require("react"));
-var _client = require("react-dom/client");
-var _LiteRenderer = _interopRequireDefault(require("./LiteRenderer"));
-function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-function renderKitchenSimulator(container) {
-  var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  if (!container) {
-    throw new Error('renderKitchenSimulator: container is required');
+Object.defineProperty(exports, "LiteRenderer", {
+  enumerable: true,
+  get: function get() {
+    return _LiteRenderer["default"];
   }
-
-  // cache the root on the container so we never call createRoot twice
-  if (!container.__kitchenRoot) {
-    container.__kitchenRoot = (0, _client.createRoot)(container);
-  }
-  var setExternalEventFn = null;
-  var Wrapper = /*#__PURE__*/function (_React$Component) {
-    function Wrapper(p) {
-      var _this;
-      (0, _classCallCheck2["default"])(this, Wrapper);
-      _this = _callSuper(this, Wrapper, [p]);
-      _this.state = {
-        externalEvent: p.externalEvent || null
-      };
-      setExternalEventFn = _this.setExternalEvent.bind(_this);
-      return _this;
-    }
-    (0, _inherits2["default"])(Wrapper, _React$Component);
-    return (0, _createClass2["default"])(Wrapper, [{
-      key: "setExternalEvent",
-      value: function setExternalEvent(newEvent) {
-        this.setState({
-          externalEvent: newEvent
-        });
-      }
-    }, {
-      key: "render",
-      value: function render() {
-        return /*#__PURE__*/_react["default"].createElement(_LiteRenderer["default"], (0, _extends2["default"])({}, this.props, {
-          externalEvent: this.state.externalEvent
-        }));
-      }
-    }]);
-  }(_react["default"].Component);
-  container.__kitchenRoot.render(/*#__PURE__*/_react["default"].createElement(Wrapper, props));
-  return {
-    updateExternalEvent: function updateExternalEvent(newExternalEvent) {
-      setExternalEventFn && setExternalEventFn(newExternalEvent);
-    },
-    unmount: function unmount() {
-      if (container.__kitchenRoot) {
-        container.__kitchenRoot.unmount();
-        container.__kitchenRoot = null;
-      }
-      setExternalEventFn = null;
-    }
-  };
-}
-var _default = exports["default"] = renderKitchenSimulator;
+});
+var _LiteRenderer = _interopRequireDefault(require("./LiteRenderer"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kitchen-simulator",
-  "version": "4.0.3-react-18",
+  "version": "4.0.6-react-18",
   "description": "It is a kitchen simulator (self-contained micro-frontend).",
   "license": "MIT",
   "main": "lib/index.js",
@@ -78,8 +78,6 @@
     "polylabel": "1.0.2",
     "posthog-js": "^1.271.0",
     "prop-types": "^15.8.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
     "react-ga4": "^1.4.1",
     "react-hotjar": "^1.0.11",
     "react-icons": "3.5.0",
@@ -89,7 +87,13 @@
     "redux": "^5.0.1",
     "three": "0.166.0"
   },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
   "devDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "@babel/cli": "^7.28.3",
     "@babel/core": "^7.28.4",
     "@babel/plugin-transform-modules-commonjs": "^7.27.1",