kitchen-simulator 4.0.0-queuedEvents → 4.0.0

package/lib/class/item.js

@@ -18,6 +18,7 @@ var _helper = require("../utils/helper");
 var _util = require("util");
 var _molding = require("../utils/molding");
 var _utils = require("../components/viewer2d/utils");
+var _history = require("../utils/history");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var allItemRect;
@@ -35,7 +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,
@@ -52,18 +57,28 @@ var Item = exports["default"] = /*#__PURE__*/function () {
         x: x,
         y: y,
         rotation: rotation,
-        isDuplication: isDuplication
+        isDuplication: isDuplication,
+        isInitialPos: isInitialPos ? isInitialPos : false
       }, null, state);
       if (item.category === 'cabinet') {
-        var layer = state.getIn(['scene', 'layers', layerID]);
-        if (state.doorStyle !== null && state.doorStyle !== undefined) {
-          var _state$doorStyle, _temp$doorStyles;
-          var temp = layer.doorStyle || ((_state$doorStyle = state.doorStyle) === null || _state$doorStyle === void 0 ? void 0 : _state$doorStyle.toJS());
-          var 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) {
-            return elem.itemID === state.catalog.getIn(['elements', type, 'itemID']);
+        if (isDuplication && refItem) {
+          item = item.merge({
+            doorStyle: refItem.doorStyle
           });
+        } else {
+          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 = (_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(_objectSpread({}, temp.doorStyles), cds.data && cds.data[0] ? cds.data[0] : {}), {}, {
+            var updatedDoorStyles = _objectSpread(_objectSpread({}, temp.doorStyles), {}, {
+              cds: [cds],
               cabinet_door_style_id: cds.cabinet_door_style_id
             });
             item = item.merge({
@@ -71,48 +86,6 @@ var Item = exports["default"] = /*#__PURE__*/function () {
                 doorStyles: updatedDoorStyles
               }))
             });
-          } else {
-            var _state$oStyle;
-            var styleObj = (_state$oStyle = state.oStyle) === null || _state$oStyle === void 0 || (_state$oStyle = _state$oStyle.toJS()) === null || _state$oStyle === void 0 ? void 0 : _state$oStyle.oStyle;
-            if (styleObj) {
-              for (var _x in styleObj) {
-                cds = styleObj[_x].data.doorStyles.cds.find(function (elem) {
-                  return elem.itemID === state.catalog.getIn(['elements', type, 'itemID']);
-                });
-                if (cds) {
-                  var tmpDS = styleObj[_x].data;
-                  tmpDS.doorStyles = _objectSpread(_objectSpread(_objectSpread({}, tmpDS.doorStyles), cds.data && cds.data[0] ? cds.data[0] : {}), {}, {
-                    cabinet_door_style_id: cds.cabinet_door_style_id
-                  });
-                  item = item.merge({
-                    doorStyle: (0, _immutable.fromJS)(tmpDS)
-                  });
-                  break;
-                }
-              }
-            }
-          }
-        } else {
-          var _state$oStyle2;
-          var _styleObj = (_state$oStyle2 = state.oStyle) === null || _state$oStyle2 === void 0 || (_state$oStyle2 = _state$oStyle2.toJS()) === null || _state$oStyle2 === void 0 ? void 0 : _state$oStyle2.oStyle;
-          if (_styleObj) {
-            for (var _x2 in _styleObj) {
-              var _styleObj$_x;
-              var _cds = (_styleObj$_x = _styleObj[_x2]) === null || _styleObj$_x === void 0 || (_styleObj$_x = _styleObj$_x.data) === null || _styleObj$_x === void 0 || (_styleObj$_x = _styleObj$_x.doorStyles) === null || _styleObj$_x === void 0 || (_styleObj$_x = _styleObj$_x.cds) === null || _styleObj$_x === void 0 ? void 0 : _styleObj$_x.find(function (elem) {
-                return elem.itemID === state.catalog.getIn(['elements', type, 'itemID']);
-              });
-              if (_cds) {
-                var _styleObj$_x2;
-                var _tmpDS = (_styleObj$_x2 = _styleObj[_x2]) === null || _styleObj$_x2 === void 0 ? void 0 : _styleObj$_x2.data;
-                _tmpDS.doorStyles = _objectSpread(_objectSpread(_objectSpread({}, _tmpDS.doorStyles), _cds.data && _cds.data[0] ? _cds.data[0] : {}), {}, {
-                  cabinet_door_style_id: _cds.cabinet_door_style_id
-                });
-                item = item.merge({
-                  doorStyle: (0, _immutable.fromJS)(_tmpDS)
-                });
-                break;
-              }
-            }
           }
         }
       }
@@ -123,15 +96,11 @@ var Item = exports["default"] = /*#__PURE__*/function () {
         };
       }
       var setSizeOfItemByDoorStyle = function setSizeOfItemByDoorStyle() {
-        var _doorStyle$doorStyles, _cds$data;
         var doorStyle = item.get('doorStyle').toJS();
-        var cds = doorStyle === null || doorStyle === void 0 || (_doorStyle$doorStyles = doorStyle.doorStyles) === null || _doorStyle$doorStyles === void 0 || (_doorStyle$doorStyles = _doorStyle$doorStyles.cds) === null || _doorStyle$doorStyles === void 0 ? void 0 : _doorStyle$doorStyles.find(function (elem) {
-          return elem.itemID === item.itemID;
-        });
-        var euro_cds = (cds === null || cds === void 0 || (_cds$data = cds.data) === null || _cds$data === void 0 ? void 0 : _cds$data.filter(function (element) {
+        var euroCDS = state.catalog.getIn(['elements', type, 'cds']).data.filter(function (element) {
           return element && element.is_euro_cds;
-        })) || [];
-        if (doorStyle.door_style_name === 'Euro & Frameless' && euro_cds.length > 0) {
+        });
+        if (doorStyle.door_style_name === 'Euro & Frameless' && euroCDS.length > 0) {
           var newProperties = item.get('properties').toJS();
           if (newProperties.hasOwnProperty('depth')) {
             if (!newProperties.hasOwnProperty('oldDepth')) {
@@ -142,8 +111,8 @@ var Item = exports["default"] = /*#__PURE__*/function () {
               });
             }
             newProperties['depth'] = new _immutable.Map({
-              length: (0, _convertUnitsLite.convert)(euro_cds[0].euro_length).from('in').to('cm'),
-              _length: euro_cds[0].euro_length,
+              length: (0, _convertUnitsLite.convert)(euroCDS[0].euro_length).from('in').to('cm'),
+              _length: euroCDS[0].euro_length,
               _unit: 'in'
             });
           }
@@ -156,8 +125,8 @@ var Item = exports["default"] = /*#__PURE__*/function () {
               });
             }
             newProperties['height'] = new _immutable.Map({
-              length: (0, _convertUnitsLite.convert)(euro_cds[0].euro_height).from('in').to('cm'),
-              _length: euro_cds[0].euro_height,
+              length: (0, _convertUnitsLite.convert)(euroCDS[0].euro_height).from('in').to('cm'),
+              _length: euroCDS[0].euro_height,
               _unit: 'in'
             });
           }
@@ -170,8 +139,8 @@ var Item = exports["default"] = /*#__PURE__*/function () {
               });
             }
             newProperties['width'] = new _immutable.Map({
-              length: (0, _convertUnitsLite.convert)(euro_cds[0].euro_width).from('in').to('cm') - 10,
-              _length: euro_cds[0].euro_width,
+              length: (0, _convertUnitsLite.convert)(euroCDS[0].euro_width).from('in').to('cm') - 10,
+              _length: euroCDS[0].euro_width,
               _unit: 'in'
             });
           }
@@ -207,6 +176,9 @@ var Item = exports["default"] = /*#__PURE__*/function () {
         }
       };
       item.category === 'cabinet' && setSizeOfItemByDoorStyle();
+      if (counterTopURI || (_item = item) !== null && _item !== 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')) {
@@ -319,6 +291,7 @@ var Item = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "duplicateSelected",
     value: function duplicateSelected(state, currentObject) {
+      var onInternalEvent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
       var layerID = state.getIn(['scene', 'selectedLayer']);
       var layer = state.getIn(['scene', 'layers', layerID]);
       var objectID = currentObject.id;
@@ -326,6 +299,7 @@ var Item = exports["default"] = /*#__PURE__*/function () {
       var x = currentObject.x;
       var y = currentObject.y;
       var sceneComponentType, width, depth, rotRad;
+      var duplicatedElement = null;
       switch (currentObject.prototype) {
         case 'items':
           myObject = state.getIn(['scene', 'layers', layerID, 'items', objectID]);
@@ -347,9 +321,10 @@ var Item = exports["default"] = /*#__PURE__*/function () {
           var isrectSect = _export2.GeometryUtils.validInterSect(allRect, val);
           if (isrectSect) {
             // Duplicated object has a original object's molding property
-            var _this$create = this.create(state, layerID, sceneComponentType, x + width * Math.cos(rotRad), y + width * Math.sin(rotRad), 200, 100, rotRad * 180 / Math.PI, true, myObject.molding),
+            var _this$create = 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$create.updatedState,
               item = _this$create.item;
+            duplicatedElement = item;
             if (item === null) {
               alert('There are no Door Colors in this cabinet.');
               state = state.merge({
@@ -373,18 +348,19 @@ var Item = exports["default"] = /*#__PURE__*/function () {
             _val.is_corner = allItemRect.cur.is_corner;
             var isRect = _export2.GeometryUtils.validInterSect(allRect, _val);
             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),
+              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;
-              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 = {
@@ -399,18 +375,19 @@ var Item = exports["default"] = /*#__PURE__*/function () {
               _val2.is_corner = allItemRect.cur.is_corner;
               var isRectDown = _export2.GeometryUtils.validInterSect(allRect, _val2);
               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),
+                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;
-                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 = {
@@ -425,18 +402,19 @@ var Item = exports["default"] = /*#__PURE__*/function () {
                 _val3.is_corner = allItemRect.cur.is_corner;
                 var isRectUp = _export2.GeometryUtils.validInterSect(allRect, _val3);
                 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),
+                  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;
-                  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');
@@ -505,6 +483,15 @@ var Item = exports["default"] = /*#__PURE__*/function () {
         default:
           break;
       }
+      if (onInternalEvent && 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
+        });
+      }
       return {
         updatedState: state
       };
@@ -513,6 +500,9 @@ var Item = exports["default"] = /*#__PURE__*/function () {
     key: "storeDistArray",
     value: function storeDistArray(state, layerID, itemID, distArray) {
       var curDistArray = state.getIn(['scene', 'layers', layerID, 'items', itemID, 'distArray']);
+      distArray.forEach(function (dist) {
+        dist[0] < 0 ? dist[0] = 0 : dist[0];
+      });
       var isEqualDist = function isEqualDist(a, b) {
         return a == b;
       };
@@ -561,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
@@ -631,13 +627,15 @@ var Item = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "updateDrawingItem",
     value: function updateDrawingItem(state, layerID, x, y) {
+      var isInitialPos = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
       if (state.hasIn(['drawingSupport', 'currentID'])) {
         var mode = state.get('mode');
         if ([_constants.MODE_DRAWING_ITEM_3D].includes(mode)) {
           state = state.updateIn(['scene', 'layers', layerID, 'items', state.getIn(['drawingSupport', 'currentID'])], function (item) {
             return item && item.merge({
               x: x,
-              y: y
+              y: y,
+              isInitialPos: isInitialPos ? isInitialPos : false
             });
           });
           state = state.merge({
@@ -651,12 +649,13 @@ var Item = exports["default"] = /*#__PURE__*/function () {
           state = state.updateIn(['scene', 'layers', layerID, 'items', state.getIn(['drawingSupport', 'currentID'])], function (item) {
             return item && item.merge({
               x: x,
-              y: y
+              y: y,
+              isInitialPos: isInitialPos ? isInitialPos : false
             });
           });
         }
       } else {
-        var _this$create5 = this.create(state, layerID, state.getIn(['drawingSupport', 'type']), x, y, 200, 100, 0, false),
+        var _this$create5 = this.create(state, layerID, state.getIn(['drawingSupport', 'type']), x, y, 200, 100, 0, false, [], isInitialPos),
           stateI = _this$create5.updatedState,
           item = _this$create5.item;
         if (item === null) {
@@ -677,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');
 
@@ -692,7 +691,8 @@ var Item = exports["default"] = /*#__PURE__*/function () {
       // tY = tY > 500 ? 500 : tY < 0 ? 0 : tY;
       item = item.merge({
         x: x,
-        y: y
+        y: y,
+        isInitialPos: false
       });
       state = state.merge({
         scene: scene.mergeIn(['layers', layerID, 'items', itemID], item)
@@ -706,8 +706,8 @@ var Item = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "endDrawingItem",
     value: function endDrawingItem(state, layerID, x, y) {
-      var catalog = state.catalog;
-      state = this.updateDrawingItem(state, layerID, x, y, catalog).updatedState;
+      // let catalog = state.catalog;
+      state = this.updateDrawingItem(state, layerID, x, y).updatedState;
       state = _export.Layer.unselectAll(state, layerID).updatedState;
       var popup = state.get('popup');
       state = state.merge({
@@ -769,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');
@@ -790,7 +790,8 @@ var Item = exports["default"] = /*#__PURE__*/function () {
       tY = tY > scene.height ? scene.height : tY < 0 ? 0 : tY;
       item = item.merge({
         x: tX,
-        y: tY
+        y: tY,
+        isInitialPos: false
       });
       state = state.merge({
         scene: scene.mergeIn(['layers', layerID, 'items', itemID], item)
@@ -802,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');
@@ -824,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');
@@ -907,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]);
@@ -992,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 = '';
@@ -1095,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]);
@@ -1130,48 +1131,41 @@ var Item = exports["default"] = /*#__PURE__*/function () {
     }
   }, {
     key: "setInitialDoorStyle",
-    value: function setInitialDoorStyle(state, doorStyle, oStyle) {
-      if (doorStyle === undefined) {
-        state = state.merge({
-          oStyle: new _immutable.Map({
-            oStyle: oStyle
-          })
-        });
-      } else {
-        state = state.merge({
-          doorStyle: doorStyle,
-          oStyle: new _immutable.Map({
-            oStyle: oStyle
-          })
-        });
-        var _state8 = state,
-          scene = _state8.scene;
-        var layerID = scene.get('selectedLayer');
-        var layers = scene.layers.get(layerID);
-        var items = layers.items;
-        items.forEach(function (data) {
-          {
-            var itemID = data.id;
-            var tmpDS = _objectSpread(_objectSpread({}, data.doorStyle), {}, {
-              doorStyles: _objectSpread(_objectSpread({}, data.doorStyle.doorStyles), {}, {
-                counttop: doorStyle.doorStyles.counttop
-              })
-            });
-            data = data.mergeIn(['doorStyle'], (0, _immutable.fromJS)(tmpDS));
-            layers = layers.mergeIn(['items', itemID], data);
-            state = state.merge({
-              scene: scene.mergeIn(['layers', layerID], layers)
-            });
-          }
-        });
-      }
+    value: function setInitialDoorStyle(state, doorStyle) {
+      state = state.merge({
+        doorStyle: doorStyle
+      });
+      var _state1 = state,
+        scene = _state1.scene;
+      var layerID = scene.get('selectedLayer');
+      var layers = scene.layers.get(layerID);
+      var items = layers.items;
+      layers = layers.setIn(['doorStyle'], (0, _immutable.fromJS)(doorStyle));
+      state = state.merge({
+        scene: state.scene.mergeIn(['layers', layerID], layers)
+      });
+      items.forEach(function (data) {
+        {
+          var itemID = data.id;
+          var tmpDS = _objectSpread(_objectSpread({}, data.doorStyle), {}, {
+            doorStyles: _objectSpread(_objectSpread({}, data.doorStyle.doorStyles), {}, {
+              counttop: doorStyle.doorStyles.counttop
+            })
+          });
+          data = data.mergeIn(['doorStyle'], (0, _immutable.fromJS)(tmpDS));
+          layers = layers.mergeIn(['items', itemID], data);
+          state = state.merge({
+            scene: scene.mergeIn(['layers', layerID], layers)
+          });
+        }
+      });
       return {
         updatedState: state
       };
     }
   }, {
     key: "setDoorStyle",
-    value: function setDoorStyle(state, doorStyle, isAll) {
+    value: function setDoorStyle(state, doorStyle, itemCDS, isAll) {
       var _this2 = this;
       var keys = Object.keys(doorStyle.doorStyles);
       keys = keys.filter(function (elem) {
@@ -1181,6 +1175,7 @@ var Item = exports["default"] = /*#__PURE__*/function () {
       for (var x in keys) {
         tmp[keys[x]] = doorStyle.doorStyles[keys[x]];
       }
+      doorStyle.cds = itemCDS;
       state = state.setIn(['scene', 'layers', state.scene.selectedLayer, 'doorStyle'], doorStyle);
       state = state.merge({
         doorStyle: doorStyle
@@ -1188,14 +1183,14 @@ var Item = exports["default"] = /*#__PURE__*/function () {
       var layerID = state.scene.get('selectedLayer');
       var temp_layer_molding = state.scene.getIn(['layers', layerID, 'molding']);
       temp_layer_molding = temp_layer_molding.filter(function (md) {
-        return doorStyle.doorStyles.cds.some(function (ds) {
+        return itemCDS === null || itemCDS === void 0 ? void 0 : itemCDS.some(function (ds) {
           return md.itemID === ds.itemID;
         });
       });
       state = state.setIn(['scene', 'layers', layerID, 'molding'], temp_layer_molding);
       var itemIDs = state.scene.layers.getIn([layerID, 'selected', 'items']).toJS();
       var setDoorStyleOfItem = function setDoorStyleOfItem(data) {
-        var _cds$data2;
+        var _cds$data;
         if (data.category !== 'cabinet') return; //CDS should effect to cabinets
         var itemID = data.id;
         var curItem = state.getIn(['scene', 'layers', layerID, 'items', itemID]);
@@ -1203,7 +1198,7 @@ var Item = exports["default"] = /*#__PURE__*/function () {
         var tmpMolding = (0, _toConsumableArray2["default"])(curItem.molding);
         var temp_item_molding = (0, _toConsumableArray2["default"])(curItem.molding);
         temp_item_molding = temp_item_molding.filter(function (md) {
-          return doorStyle.doorStyles.cds.some(function (ds) {
+          return itemCDS === null || itemCDS === void 0 ? void 0 : itemCDS.some(function (ds) {
             return ds.itemID === md.itemID;
           });
         });
@@ -1213,17 +1208,16 @@ var Item = exports["default"] = /*#__PURE__*/function () {
             state = state.setIn(['scene', 'layers', layerID, 'items', it.id, 'molding'], temp_item_molding);
           });
         });
-        var cds = doorStyle.doorStyles.cds.find(function (elem) {
+        var cds = itemCDS === null || itemCDS === void 0 ? void 0 : itemCDS.find(function (elem) {
           return elem.itemID === data.itemID;
         });
-        var euro_cds = (cds === null || cds === void 0 || (_cds$data2 = cds.data) === null || _cds$data2 === void 0 ? void 0 : _cds$data2.filter(function (element) {
+        var euro_cds = (cds === null || cds === void 0 || (_cds$data = cds.data) === null || _cds$data === void 0 ? void 0 : _cds$data.filter(function (element) {
           return element && element.is_euro_cds;
         })) || [];
-        var cds_data;
-        if (doorStyle.door_style_name === 'Euro & Frameless' && euro_cds.length > 0) {
-          cds_data = cds ? _objectSpread(_objectSpread({}, euro_cds[0]), {}, {
-            cabinet_door_style_id: cds.cabinet_door_style_id
-          }) : {};
+        var cds_data = cds ? [cds] : [];
+        if (
+        // doorStyle.door_style_name === 'Euro & Frameless' &&
+        euro_cds.length > 0) {
           var newProperties = state.scene.getIn(['layers', layerID, 'items', itemID, 'properties']).toJS();
           if (newProperties.hasOwnProperty('depth')) {
             if (!newProperties.hasOwnProperty('oldDepth')) {
@@ -1269,9 +1263,6 @@ var Item = exports["default"] = /*#__PURE__*/function () {
           }
           state = _this2.setJsProperties(state, layerID, itemID, newProperties).updatedState;
         } else {
-          cds_data = cds ? _objectSpread(_objectSpread({}, cds.data && cds.data[0] ? cds.data[0] : {}), {}, {
-            cabinet_door_style_id: cds.cabinet_door_style_id
-          }) : {};
           var properties = state.scene.getIn(['layers', layerID, 'items', itemID, 'properties']).toJS();
           if (properties.hasOwnProperty('oldDepth')) {
             properties['depth'] = new _immutable.Map({
@@ -1310,7 +1301,9 @@ var Item = exports["default"] = /*#__PURE__*/function () {
           color_sku_alias: doorStyle.color_sku_alias,
           // alias name of color_sku for the current dealer
           install: (0, _utils.getInstallationSuffix)(_constants.INSTALLATION_SUFFIX_TYPE.NAME, doorStyle),
-          doorStyles: _objectSpread(_objectSpread({}, tmp), cds_data)
+          doorStyles: _objectSpread(_objectSpread({}, tmp), {}, {
+            cds: cds_data
+          })
         };
         state = state.mergeIn(['scene', 'layers', layerID, 'items', itemID, 'doorStyle'], (0, _immutable.fromJS)(tmpDS));
       };
@@ -1340,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);
@@ -1385,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);
@@ -1410,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;
@@ -1436,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({
@@ -1463,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();
@@ -1492,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) {
@@ -1575,6 +1568,9 @@ var Item = exports["default"] = /*#__PURE__*/function () {
           });
         }
       }
+      state = state.merge({
+        sceneHistory: (0, _history.historyPush)(state.sceneHistory, state.scene)
+      });
       return {
         updatedState: state
       };
@@ -1582,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]]);
@@ -1697,6 +1693,9 @@ var Item = exports["default"] = /*#__PURE__*/function () {
           updateSelectItemMolding();
         }
       }
+      state = state.merge({
+        sceneHistory: (0, _history.historyPush)(state.sceneHistory, state.scene)
+      });
       return {
         updatedState: state
       };
@@ -1704,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);
@@ -1725,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;
@@ -1750,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;
@@ -1861,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);
@@ -1874,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