kitchen-simulator 4.1.0-react-18 → 4.1.1

package/lib/class/hole.js

@@ -783,11 +783,9 @@ var Hole = exports["default"] = /*#__PURE__*/function () {
         scene: scene.mergeIn(['layers', layerID, 'holes', holeID], hole)
       });
       state = state.updateIn(['scene', 'layers', layerID, 'lines', hole.line, 'holes'], function (holes) {
-        console.log(holes, 'holes');
         var index = holes.findIndex(function (ID) {
           return holeID === ID;
         });
-        console.log(index, 'index');
         return index === -1 ? holes.push(holeID) : holes;
       });
       return {

package/lib/class/item.js

@@ -36,9 +36,11 @@ var Item = exports["default"] = /*#__PURE__*/function () {
   return (0, _createClass2["default"])(Item, null, [{
     key: "create",
     value: function create(state, layerID, type, x, y, width, height, rotation, isDuplication) {
+      var _item;
       var molding = arguments.length > 9 && arguments[9] !== undefined ? arguments[9] : [];
       var isInitialPos = arguments.length > 10 && arguments[10] !== undefined ? arguments[10] : false;
       var refItem = arguments.length > 11 && arguments[11] !== undefined ? arguments[11] : null;
+      var counterTopURI = arguments.length > 12 && arguments[12] !== undefined ? arguments[12] : null;
       var itemID = _export2.IDBroker.acquireID();
       var item = state.catalog.factoryElement(type, {
         id: itemID,
@@ -64,13 +66,20 @@ var Item = exports["default"] = /*#__PURE__*/function () {
             doorStyle: refItem.doorStyle
           });
         } else {
-          var _state$doorStyle;
+          var _state$doorStyle, _ref, _temp$doorStyles$cds$, _temp$doorStyles, _temp$cds, _state3;
           var layer = state.getIn(['scene', 'layers', layerID]);
           var temp = layer.doorStyle || ((_state$doorStyle = state.doorStyle) === null || _state$doorStyle === void 0 ? void 0 : _state$doorStyle.toJS());
-          var cds = state.catalog.getIn(['elements', type, 'cds']);
+          var cds = (_ref = (_temp$doorStyles$cds$ = temp === null || temp === void 0 || (_temp$doorStyles = temp.doorStyles) === null || _temp$doorStyles === void 0 || (_temp$doorStyles = _temp$doorStyles.cds) === null || _temp$doorStyles === void 0 ? void 0 : _temp$doorStyles.find(function (elem) {
+            var _state;
+            return elem.itemID === ((_state = state) === null || _state === void 0 || (_state = _state.catalog) === null || _state === void 0 ? void 0 : _state.getIn(['elements', type, 'itemID']));
+          })) !== null && _temp$doorStyles$cds$ !== void 0 ? _temp$doorStyles$cds$ : temp === null || temp === void 0 || (_temp$cds = temp.cds) === null || _temp$cds === void 0 ? void 0 : _temp$cds.find(function (elem) {
+            var _state2;
+            return elem.itemID === ((_state2 = state) === null || _state2 === void 0 || (_state2 = _state2.catalog) === null || _state2 === void 0 ? void 0 : _state2.getIn(['elements', type, 'itemID']));
+          })) !== null && _ref !== void 0 ? _ref : (_state3 = state) === null || _state3 === void 0 || (_state3 = _state3.catalog) === null || _state3 === void 0 ? void 0 : _state3.getIn(['elements', type, 'cds']);
           if (cds) {
-            var updatedDoorStyles = _objectSpread(_objectSpread({}, temp.doorStyles), {}, {
-              cds: [cds]
+            var updatedDoorStyles = _objectSpread(_objectSpread({}, temp === null || temp === void 0 ? void 0 : temp.doorStyles), {}, {
+              cds: [cds],
+              cabinet_door_style_id: cds.cabinet_door_style_id
             });
             item = item.merge({
               doorStyle: (0, _immutable.fromJS)(_objectSpread(_objectSpread({}, temp), {}, {
@@ -167,6 +176,9 @@ var Item = exports["default"] = /*#__PURE__*/function () {
         }
       };
       item.category === 'cabinet' && setSizeOfItemByDoorStyle();
+      if (!(0, _utils.isEmpty)(counterTopURI) && !(0, _utils.isEmpty)((_item = item) === null || _item === void 0 ? void 0 : _item.counterTop)) {
+        item.counterTop.uri = counterTopURI;
+      }
       item = this.updateDoorHandle(item, state.getIn(['scene', 'layers', layerID]));
       state = state.setIn(['scene', 'layers', layerID, 'items', itemID], item);
       if (item.type.includes('Light')) {
@@ -338,17 +350,17 @@ var Item = exports["default"] = /*#__PURE__*/function () {
             if (isRect) {
               var _this$create2 = this.create(state, layerID, sceneComponentType, x - width * Math.cos(rotRad), y - width * Math.sin(rotRad), 200, 100, rotRad * 180 / Math.PI, true, myObject.molding, false, myObject),
                 _stateI = _this$create2.updatedState,
-                _item = _this$create2.item;
-              duplicatedElement = _item;
-              if (_item === null) {
+                _item2 = _this$create2.item;
+              duplicatedElement = _item2;
+              if (_item2 === null) {
                 alert('There are no Door Colors in this cabinet.');
                 state = state.merge({
                   mode: _constants.MODE_IDLE,
                   drawingSupport: new _immutable.Map()
                 });
               } else {
-                state = Item.select(_stateI, layerID, _item.id).updatedState;
-                state = state.setIn(['drawingSupport', 'currentID'], _item.id);
+                state = Item.select(_stateI, layerID, _item2.id).updatedState;
+                state = state.setIn(['drawingSupport', 'currentID'], _item2.id);
               }
             } else {
               var _val2 = {
@@ -365,17 +377,17 @@ var Item = exports["default"] = /*#__PURE__*/function () {
               if (isRectDown) {
                 var _this$create3 = this.create(state, layerID, sceneComponentType, x - depth * Math.sin(rotRad), y - depth * Math.cos(rotRad), 200, 100, rotRad * 180 / Math.PI, true, myObject.molding, false, myObject),
                   _stateI2 = _this$create3.updatedState,
-                  _item2 = _this$create3.item;
-                duplicatedElement = _item2;
-                if (_item2 === null) {
+                  _item3 = _this$create3.item;
+                duplicatedElement = _item3;
+                if (_item3 === null) {
                   alert('There are no Door Colors in this cabinet.');
                   state = state.merge({
                     mode: _constants.MODE_IDLE,
                     drawingSupport: new _immutable.Map()
                   });
                 } else {
-                  state = Item.select(_stateI2, layerID, _item2.id).updatedState;
-                  state = state.setIn(['drawingSupport', 'currentID'], _item2.id);
+                  state = Item.select(_stateI2, layerID, _item3.id).updatedState;
+                  state = state.setIn(['drawingSupport', 'currentID'], _item3.id);
                 }
               } else {
                 var _val3 = {
@@ -392,17 +404,17 @@ var Item = exports["default"] = /*#__PURE__*/function () {
                 if (isRectUp) {
                   var _this$create4 = this.create(state, layerID, sceneComponentType, x + depth * Math.sin(rotRad), y + depth * Math.cos(rotRad), 200, 100, rotRad * 180 / Math.PI, true, myObject.molding, false, myObject),
                     _stateI3 = _this$create4.updatedState,
-                    _item3 = _this$create4.item;
-                  duplicatedElement = _item3;
-                  if (_item3 === null) {
+                    _item4 = _this$create4.item;
+                  duplicatedElement = _item4;
+                  if (_item4 === null) {
                     alert('There are no Door Colors in this cabinet.');
                     state = state.merge({
                       mode: _constants.MODE_IDLE,
                       drawingSupport: new _immutable.Map()
                     });
                   } else {
-                    state = Item.select(_stateI3, layerID, _item3.id).updatedState;
-                    state = state.setIn(['drawingSupport', 'currentID'], _item3.id);
+                    state = Item.select(_stateI3, layerID, _item4.id).updatedState;
+                    state = state.setIn(['drawingSupport', 'currentID'], _item4.id);
                   }
                 } else {
                   console.log('there is no space');
@@ -472,8 +484,9 @@ var Item = exports["default"] = /*#__PURE__*/function () {
           break;
       }
       if (onInternalEvent && duplicatedElement) {
-        var jsElement = duplicatedElement.toJS();
-        if (jsElement.prototype === 'items') jsElement.isWarning = (0, _utils.isWarningItem)(duplicatedElement);
+        var _state$get;
+        var catalog = (_state$get = state.get('catalog')) === null || _state$get === void 0 ? void 0 : _state$get.toJS();
+        var jsElement = (0, _helper.updatePayloadOfInternalEvent)(duplicatedElement, layer, catalog);
         onInternalEvent({
           type: _constants.INTERNAL_EVENT_DRAW_ELEMENT,
           value: jsElement
@@ -538,8 +551,14 @@ var Item = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "replaceItem",
     value: function replaceItem(state, selectedPos, currentObject, selectedObject) {
+      var _currentObject$counte;
+      var counterTopURI = '';
+      if (!(0, _utils.isEmpty)(currentObject === null || currentObject === void 0 || (_currentObject$counte = currentObject.counterTop) === null || _currentObject$counte === void 0 ? void 0 : _currentObject$counte.uri)) {
+        var _currentObject$counte2;
+        counterTopURI = currentObject === null || currentObject === void 0 || (_currentObject$counte2 = currentObject.counterTop) === null || _currentObject$counte2 === void 0 ? void 0 : _currentObject$counte2.uri;
+      } else if (!(0, _utils.isEmpty)(state.getIn(['scene', 'layers', 'layer-1', 'counterTop']))) counterTopURI = state.getIn(['scene', 'layers', 'layer-1', 'counterTop']).uri;else counterTopURI = 'https://media.test.diydesignspace.com/uploads/CountTop/202105074107_5/texture/Unique_Calcatta_texture.jpg';
       state = this.remove(state, state.scene.selectedLayer, selectedPos.selectedItemId).updatedState;
-      state = this.create(state, state.scene.selectedLayer, selectedObject.name, selectedPos.x, selectedPos.y, selectedObject.info.width, selectedObject.info.height, selectedPos.rotation, false).updatedState;
+      state = this.create(state, state.scene.selectedLayer, selectedObject.name, selectedPos.x, selectedPos.y, selectedObject.info.width, selectedObject.info.height, selectedPos.rotation, false, [], false, null, counterTopURI).updatedState;
       // state = this.select(state, state.scene.selectedLayer, selectedPos.selectedItemId).updatedState;
       return {
         updatedState: state
@@ -657,8 +676,8 @@ var Item = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "updateDraggingItemChanged",
     value: function updateDraggingItemChanged(state, x, y, layerID, itemID) {
-      var _state = state,
-        scene = _state.scene;
+      var _state4 = state,
+        scene = _state4.scene;
       // let originalX = draggingSupport.get('originalX');
       // let originalY = draggingSupport.get('originalY');
 
@@ -750,9 +769,9 @@ var Item = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "updateDraggingItem",
     value: function updateDraggingItem(state, x, y) {
-      var _state2 = state,
-        draggingSupport = _state2.draggingSupport,
-        scene = _state2.scene;
+      var _state5 = state,
+        draggingSupport = _state5.draggingSupport,
+        scene = _state5.scene;
       var layerID = draggingSupport.get('layerID');
       var itemID = draggingSupport.get('itemID');
       var startPointX = draggingSupport.get('startPointX');
@@ -784,9 +803,9 @@ var Item = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "updateDraggingItem3DX",
     value: function updateDraggingItem3DX(state, x) {
-      var _state3 = state,
-        draggingSupport = _state3.draggingSupport,
-        scene = _state3.scene;
+      var _state6 = state,
+        draggingSupport = _state6.draggingSupport,
+        scene = _state6.scene;
       var layerID = draggingSupport.get('layerID');
       var itemID = draggingSupport.get('itemID');
       var startPointX = draggingSupport.get('startPointX');
@@ -806,9 +825,9 @@ var Item = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "updateDraggingItem3DY",
     value: function updateDraggingItem3DY(state, y) {
-      var _state4 = state,
-        draggingSupport = _state4.draggingSupport,
-        scene = _state4.scene;
+      var _state7 = state,
+        draggingSupport = _state7.draggingSupport,
+        scene = _state7.scene;
       var layerID = draggingSupport.get('layerID');
       var itemID = draggingSupport.get('itemID');
       var startPointY = draggingSupport.get('startPointY');
@@ -889,9 +908,9 @@ var Item = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "updateRotatingItem",
     value: function updateRotatingItem(state, x, y) {
-      var _state5 = state,
-        rotatingSupport = _state5.rotatingSupport,
-        scene = _state5.scene;
+      var _state8 = state,
+        rotatingSupport = _state8.rotatingSupport,
+        scene = _state8.scene;
       var layerID = rotatingSupport.get('layerID');
       var itemID = rotatingSupport.get('itemID');
       var item = state.getIn(['scene', 'layers', layerID, 'items', itemID]);
@@ -974,9 +993,9 @@ var Item = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "replaceSubmodule",
     value: function replaceSubmodule(state, url) {
-      var _state6 = state,
-        replacingSupport = _state6.replacingSupport,
-        scene = _state6.scene;
+      var _state9 = state,
+        replacingSupport = _state9.replacingSupport,
+        scene = _state9.scene;
       url = 'catalog/texture.png';
       var urlData = url.split('/');
       var newURL = '';
@@ -1077,9 +1096,9 @@ var Item = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "animateObject",
     value: function animateObject(state, value) {
-      var _state7 = state,
-        replacingSupport = _state7.replacingSupport,
-        scene = _state7.scene;
+      var _state0 = state,
+        replacingSupport = _state0.replacingSupport,
+        scene = _state0.scene;
       var layerID = replacingSupport.get('layerID');
       var itemID = replacingSupport.get('itemID');
       var item = state.getIn(['scene', 'layers', layerID, 'items', itemID]);
@@ -1116,8 +1135,8 @@ var Item = exports["default"] = /*#__PURE__*/function () {
       state = state.merge({
         doorStyle: doorStyle
       });
-      var _state8 = state,
-        scene = _state8.scene;
+      var _state1 = state,
+        scene = _state1.scene;
       var layerID = scene.get('selectedLayer');
       var layers = scene.layers.get(layerID);
       var items = layers.items;
@@ -1314,8 +1333,8 @@ var Item = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "setCounterTop",
     value: function setCounterTop(state, counterTop) {
-      var _state9 = state,
-        scene = _state9.scene;
+      var _state10 = state,
+        scene = _state10.scene;
       var layerID = scene.get('selectedLayer');
       var layers = scene.layers.get(layerID);
       layers = layers.mergeIn(['counterTop'], counterTop);
@@ -1359,8 +1378,8 @@ var Item = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "setDoorHandle",
     value: function setDoorHandle(state, doorHandle) {
-      var _state0 = state,
-        scene = _state0.scene;
+      var _state11 = state,
+        scene = _state11.scene;
       var layerID = scene.get('selectedLayer');
       var layer = scene.layers.get(layerID);
       layer = layer.mergeIn(['doorHandle'], doorHandle);
@@ -1384,8 +1403,8 @@ var Item = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "setHandleMaterial",
     value: function setHandleMaterial(state, material) {
-      var _state1 = state,
-        scene = _state1.scene;
+      var _state12 = state,
+        scene = _state12.scene;
       var layerID = scene.get('selectedLayer');
       var layers = scene.layers.get(layerID);
       var items = layers.items;
@@ -1410,8 +1429,8 @@ var Item = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "setWallColor",
     value: function setWallColor(state, wallColor) {
-      var _state10 = state,
-        scene = _state10.scene;
+      var _state13 = state,
+        scene = _state13.scene;
       var layerID = scene.get('selectedLayer');
       var layer = scene.layers.get(layerID);
       layer = layer.merge({
@@ -1437,8 +1456,8 @@ var Item = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "setBacksplash",
     value: function setBacksplash(state, backsplash) {
-      var _state11 = state,
-        scene = _state11.scene;
+      var _state14 = state,
+        scene = _state14.scene;
       var layerID = scene.get('selectedLayer');
       var layer = scene.layers.get(layerID);
       var dataJSON = layer.toJS();
@@ -1466,8 +1485,8 @@ var Item = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "setMolding",
     value: function setMolding(state, molding, isAll) {
-      var _state12 = state,
-        scene = _state12.scene;
+      var _state15 = state,
+        scene = _state15.scene;
       var layerID = scene.get('selectedLayer');
       var layer = scene.layers.get(layerID);
       if (isAll) {
@@ -1559,8 +1578,8 @@ var Item = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "updateMolding",
     value: function updateMolding(state) {
-      var _state13 = state,
-        scene = _state13.scene;
+      var _state16 = state,
+        scene = _state16.scene;
       var layerID = scene.get('selectedLayer');
       var layer = scene.layers.get(layerID);
       var selectedItem = layer.getIn(['items', layer.selected.toJS().items[0]]);
@@ -1684,8 +1703,8 @@ var Item = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "setBacksplashVisible",
     value: function setBacksplashVisible(state, itemID, backsplashVisible) {
-      var _state14 = state,
-        scene = _state14.scene;
+      var _state17 = state,
+        scene = _state17.scene;
       var layerID = scene.get('selectedLayer');
       var layer = scene.layers.get(layerID);
       layer = layer.mergeIn(['items', itemID, 'backsplashVisible'], backsplashVisible);
@@ -1705,8 +1724,8 @@ var Item = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "setApplianceMaterial",
     value: function setApplianceMaterial(state, material) {
-      var _state15 = state,
-        scene = _state15.scene;
+      var _state18 = state,
+        scene = _state18.scene;
       var layerID = scene.get('selectedLayer');
       var layers = scene.layers.get(layerID);
       var items = layers.items;
@@ -1730,8 +1749,8 @@ var Item = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "setModelling",
     value: function setModelling(state, molding) {
-      var _state16 = state,
-        scene = _state16.scene;
+      var _state19 = state,
+        scene = _state19.scene;
       var layerID = scene.get('selectedLayer');
       var layers = scene.layers.get(layerID);
       var items = layers.items;
@@ -1841,8 +1860,8 @@ var Item = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "toggleLoadingCabinet",
     value: function toggleLoadingCabinet(state) {
-      var _state17 = state,
-        scene = _state17.scene;
+      var _state20 = state,
+        scene = _state20.scene;
       console.log('scene.isLoadingCabinet: ', !scene.isLoadingCabinet);
       // scene = scene.set('isLoadingCabinet', !scene.isLoadingCabinet);
       // state = state.set('scene', scene);
@@ -1854,8 +1873,8 @@ var Item = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "endLoading",
     value: function endLoading(state) {
-      var _state18 = state,
-        scene = _state18.scene;
+      var _state21 = state,
+        scene = _state21.scene;
       state = state.setIn(['scene', 'loadFlag'], true);
       return {
         updatedState: state

package/lib/class/layer.js

@@ -574,7 +574,7 @@ var Layer = exports["default"] = /*#__PURE__*/function () {
         return v.id !== vertexID && _export2.GeometryUtils.samePoints(vertex, v) // &&
         //!v.lines.contains( vertexID ) &&
         //!v.areas.contains( vertexID )
-        ;
+;
       });
       if (doubleVertices.isEmpty()) return {
         updatedState: state

package/lib/class/line.js

@@ -15,7 +15,6 @@ var _export2 = require("../utils/export");
 var Three = _interopRequireWildcard(require("three"));
 var _constants = require("../constants");
 var _helper = require("../utils/helper");
-var _convertUnitsLite = require("../utils/convert-units-lite");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var timeGlobal = 0;
 var TimeRecorder = /*#__PURE__*/function () {
@@ -437,6 +436,7 @@ var Line = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "beginDrawingLine",
     value: function beginDrawingLine(state, layerID, x, y, onInternalEvent) {
+      var _state$get;
       // if end drawing by created area
       if (state.mode == _constants.MODE_IDLE) {
         return {
@@ -490,12 +490,8 @@ var Line = exports["default"] = /*#__PURE__*/function () {
         drawingSupport: drawingSupport
       });
       var layer = state.getIn(['scene', 'layers', layerID]);
-      var payload = line.toJS();
-      var v_a = layer.vertices.get(line.vertices.get(0));
-      var v_b = layer.vertices.get(line.vertices.get(1));
-      var distance = _export2.GeometryUtils.pointsDistance(v_a.x, v_a.y, v_b.x, v_b.y);
-      var _length = (0, _convertUnitsLite.convert)(distance).from('cm').to('in');
-      payload.length = _length;
+      var catalog = (_state$get = state.get('catalog')) === null || _state$get === void 0 ? void 0 : _state$get.toJS();
+      var payload = (0, _helper.updatePayloadOfInternalEvent)(line, layer, catalog);
       if (onInternalEvent) onInternalEvent({
         type: _constants.INTERNAL_EVENT_START_DRAW_WALL,
         value: payload

package/lib/class/project.js

@@ -43,7 +43,8 @@ var Project = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "newProject",
     value: function newProject(state) {
-      var doorStyle = state.toJS().doorStyle === null ? null : state.toJS().doorStyle;
+      var _state$toJS$doorStyle, _state;
+      var doorStyle = (_state$toJS$doorStyle = (_state = state) === null || _state === void 0 || (_state = _state.toJS()) === null || _state === void 0 ? void 0 : _state.doorStyle) !== null && _state$toJS$doorStyle !== void 0 ? _state$toJS$doorStyle : null;
       // let counterTop = state.getIn(['scene', 'layers', layerID, 'counterTop']);
       // let floorStyle = state.getIn(['scene', 'layers', layerID, 'floorStyle']);
       var _viewer2D = state.viewer2D;
@@ -83,9 +84,9 @@ var Project = exports["default"] = /*#__PURE__*/function () {
         a: 0.99,
         d: 0.99
       });
-      var _state = state,
-        oldScene = _state.scene,
-        oldSceneHistory = _state.sceneHistory;
+      var _state2 = state,
+        oldScene = _state2.scene,
+        oldSceneHistory = _state2.sceneHistory;
       var json_items = sceneJSON.layers[sceneJSON.selectedLayer].items;
       var elements = state.catalog.get('elements').toArray();
       var _loop = function _loop(x) {
@@ -111,6 +112,8 @@ var Project = exports["default"] = /*#__PURE__*/function () {
       //   sceneJSON && (sceneJSON.layers[layerID] = newlayer);
       // }
 
+      // check type of ceilHeight and make it to Number
+      if (typeof sceneJSON.layers[layerID].ceilHeight !== 'number') sceneJSON.layers[layerID].ceilHeight = Number(sceneJSON.layers[layerID].ceilHeight);
       var newScene = new _models.Scene(sceneJSON);
       state = new _models.State({
         scene: newScene.toJS(),
@@ -176,6 +179,8 @@ var Project = exports["default"] = /*#__PURE__*/function () {
       // Matching state.doorStyle with layer.doorStyle
       if (state.getIn(['scene', 'layers', layerID, 'doorStyle'])) {
         doorStyle = state.getIn(['scene', 'layers', layerID, 'doorStyle']);
+      } else if (!(0, _helper.isEmpty)(doorStyle)) {
+        state = state.setIn(['scene', 'layers', layerID, 'doorStyle'], doorStyle);
       }
       state = state.merge({
         doorStyle: doorStyle,
@@ -838,89 +843,101 @@ var Project = exports["default"] = /*#__PURE__*/function () {
     key: "createRoomWithShape",
     value: function createRoomWithShape(state, roomShapeType, width, height, doorStyle) {
       var catalog = state.catalog;
+      // keep measurement unit, sceneHistory
+      var curLayerID = state.scene.selectedLayer;
+      var layerUnit = state.getIn(['scene', 'layers', curLayerID, 'unit']);
+      var ceilHeight = state.getIn(['scene', 'layers', curLayerID, 'ceilHeight']);
+      var sceneHistory = state.getIn(['sceneHistory']);
       state = this.newProject(state).updatedState;
       state = state.merge({
         catalog: catalog
       });
-      var _viewer2D = state.viewer2D;
-      var viewer = _viewer2D.toJS();
-      width = (0, _convertUnitsLite.convert)(width).from('in').to('cm');
-      height = (0, _convertUnitsLite.convert)(height).from('in').to('cm');
-      var layerID = state.scene.selectedLayer;
       state = _export2.Item.setInitialDoorStyle(state, doorStyle).updatedState;
-      if ((0, _helper.isEmpty)(viewer)) return {
-        updatedState: state
-      };
-      var halfWidth = width / 2;
-      var halfHeight = height / 2;
-      var viewerWidth = viewer.SVGWidth;
-      var viewerHeight = viewer.SVGHeight;
-      var centerPos = {
-        x: viewerWidth / 2,
-        y: viewerHeight / 2
-      };
-      var vtLB = {
-        x: centerPos.x - halfWidth,
-        y: centerPos.y - halfHeight
-      };
-      var vtRB = {
-        x: centerPos.x + halfWidth,
-        y: centerPos.y - halfHeight
-      };
-      var vtRT = {
-        x: centerPos.x + halfWidth,
-        y: centerPos.y + halfHeight
-      };
-      var vtLT = {
-        x: centerPos.x - halfWidth,
-        y: centerPos.y + halfHeight
-      };
-      var vertices = [];
-      switch (roomShapeType) {
-        case 'rectangle':
-          vertices = [vtLB, vtLT, vtRT, vtRB];
-          break;
-        case constants.ROOM_SHAPE_TYPE.TWO_WALLS_RIGHT_BOTTOM:
-          vertices = [vtLB, vtRB, vtRT];
-          break;
-        case constants.ROOM_SHAPE_TYPE.TWO_WALLS_RIGHT_TOP:
-          vertices = [vtRB, vtRT, vtLT];
-          break;
-        case constants.ROOM_SHAPE_TYPE.TWO_WALLS_LEFT_TOP:
-          vertices = [vtRT, vtLT, vtLB];
-          break;
-        case constants.ROOM_SHAPE_TYPE.TWO_WALLS_LEFT_BOTTOM:
-          vertices = [vtLT, vtLB, vtRB];
-          break;
-        case constants.ROOM_SHAPE_TYPE.THREE_WALLS_LEFT_TOP_RIGHT:
-          vertices = [vtRB, vtRT, vtLT, vtLB];
-          break;
-        case constants.ROOM_SHAPE_TYPE.THREE_WALLS_TOP_RIGHT_BOTTOM:
-          vertices = [vtLB, vtRB, vtRT, vtLT];
-          break;
-        case constants.ROOM_SHAPE_TYPE.THREE_WALLS_RIGHT_BOTTOM_LEFT:
-          vertices = [vtLT, vtLB, vtRB, vtRT];
-          break;
-        case constants.ROOM_SHAPE_TYPE.THREE_WALLS_BOTTOM_LEFT_TOP:
-          vertices = [vtRT, vtLT, vtLB, vtRB];
-          break;
-      }
-      for (var i = 0; i < vertices.length - 1; i++) {
-        state = _export2.Line.create(state, layerID, 'wall', vertices[i].x, vertices[i].y, vertices[i + 1].x, vertices[i + 1].y).updatedState;
-      }
-      if (roomShapeType === constants.ROOM_SHAPE_TYPE.RECTANGLE) {
-        state = _export2.Line.create(state, layerID, 'wall', vertices[vertices.length - 1].x, vertices[vertices.length - 1].y, vertices[0].x, vertices[0].y).updatedState;
-      }
-      var layer = state.getIn(['scene', 'layers', layerID]);
-      var lines = layer.getIn(['lines']).toJS();
-      var drawingInfo = {};
-      var lineKey = Object.keys(lines);
-      for (var _i = 0; _i < lineKey.length; _i++) {
-        if (!(0, _helper.isEmpty)(lineKey)) {
-          drawingInfo.drawingLine = layer.getIn(['lines', lineKey[_i]]);
+      var layerID = state.scene.selectedLayer;
+      if (roomShapeType !== constants.ROOM_SHAPE_TYPE.CUSTOM && !(0, _helper.isEmpty)(width) && !(0, _helper.isEmpty)(height) && width !== 0 && height !== 0) {
+        var _viewer2D = state.viewer2D;
+        var viewer = _viewer2D.toJS();
+        if ((0, _helper.isEmpty)(viewer)) return {
+          updatedState: state
+        };
+        width = (0, _convertUnitsLite.convert)(width).from(state.getIn(['scene', 'layers', 'layer-1', 'unit'])).to('cm');
+        height = (0, _convertUnitsLite.convert)(height).from(state.getIn(['scene', 'layers', 'layer-1', 'unit'])).to('cm');
+        var halfWidth = width / 2;
+        var halfHeight = height / 2;
+        var viewerWidth = viewer.SVGWidth;
+        var viewerHeight = viewer.SVGHeight;
+        var centerPos = {
+          x: viewerWidth / 2,
+          y: viewerHeight / 2
+        };
+        var vtLB = {
+          x: centerPos.x - halfWidth,
+          y: centerPos.y - halfHeight
+        };
+        var vtRB = {
+          x: centerPos.x + halfWidth,
+          y: centerPos.y - halfHeight
+        };
+        var vtRT = {
+          x: centerPos.x + halfWidth,
+          y: centerPos.y + halfHeight
+        };
+        var vtLT = {
+          x: centerPos.x - halfWidth,
+          y: centerPos.y + halfHeight
+        };
+        var vertices = [];
+        switch (roomShapeType) {
+          case 'rectangle':
+            vertices = [vtLB, vtLT, vtRT, vtRB];
+            break;
+          case constants.ROOM_SHAPE_TYPE.TWO_WALLS_RIGHT_BOTTOM:
+            vertices = [vtLB, vtRB, vtRT];
+            break;
+          case constants.ROOM_SHAPE_TYPE.TWO_WALLS_RIGHT_TOP:
+            vertices = [vtRB, vtRT, vtLT];
+            break;
+          case constants.ROOM_SHAPE_TYPE.TWO_WALLS_LEFT_TOP:
+            vertices = [vtRT, vtLT, vtLB];
+            break;
+          case constants.ROOM_SHAPE_TYPE.TWO_WALLS_LEFT_BOTTOM:
+            vertices = [vtLT, vtLB, vtRB];
+            break;
+          case constants.ROOM_SHAPE_TYPE.THREE_WALLS_LEFT_TOP_RIGHT:
+            vertices = [vtRB, vtRT, vtLT, vtLB];
+            break;
+          case constants.ROOM_SHAPE_TYPE.THREE_WALLS_TOP_RIGHT_BOTTOM:
+            vertices = [vtLB, vtRB, vtRT, vtLT];
+            break;
+          case constants.ROOM_SHAPE_TYPE.THREE_WALLS_RIGHT_BOTTOM_LEFT:
+            vertices = [vtLT, vtLB, vtRB, vtRT];
+            break;
+          case constants.ROOM_SHAPE_TYPE.THREE_WALLS_BOTTOM_LEFT_TOP:
+            vertices = [vtRT, vtLT, vtLB, vtRB];
+            break;
+        }
+        for (var i = 0; i < vertices.length - 1; i++) {
+          state = _export2.Line.create(state, layerID, 'wall', vertices[i].x, vertices[i].y, vertices[i + 1].x, vertices[i + 1].y).updatedState;
+        }
+        if (roomShapeType === constants.ROOM_SHAPE_TYPE.RECTANGLE) {
+          state = _export2.Line.create(state, layerID, 'wall', vertices[vertices.length - 1].x, vertices[vertices.length - 1].y, vertices[0].x, vertices[0].y).updatedState;
+        }
+        var layer = state.getIn(['scene', 'layers', layerID]);
+        var lines = layer.getIn(['lines']).toJS();
+        var drawingInfo = {};
+        var lineKey = Object.keys(lines);
+        for (var _i = 0; _i < lineKey.length; _i++) {
+          if (!(0, _helper.isEmpty)(lineKey)) {
+            drawingInfo.drawingLine = layer.getIn(['lines', lineKey[_i]]);
+          }
+          state = _export2.Layer.detectAndUpdateAreas(state, layerID, drawingInfo).updatedState;
         }
-        state = _export2.Layer.detectAndUpdateAreas(state, layerID, drawingInfo).updatedState;
       }
+
+      // copy keeped measurement unit, sceneHistory
+      state = state.setIn(['scene', 'layers', layerID, 'unit'], layerUnit);
+      state = state.setIn(['scene', 'layers', layerID, 'ceilHeight'], ceilHeight);
+      state = state.setIn(['sceneHistory'], sceneHistory);
       state = (0, _helper.centering2D)(state);
       return {
         updatedState: state