kitchen-simulator 7.0.9-react-18 → 10.0.0-unique-id

package/es/class/item.js

@@ -8,12 +8,14 @@ import { convert } from "../utils/convert-units-lite";
 import { Group, Hole, Layer } from "./export";
 import { GeometryUtils, IDBroker, MoldingUtils, NameGenerator } from "../utils/export";
 import { fromJS, Map } from 'immutable';
-import { INSTALLATION_SUFFIX_TYPE, INTERNAL_EVENT_DRAW_ELEMENT, MODE_DRAGGING_ITEM, MODE_DRAGGING_ITEM_3D, MODE_DRAWING_ITEM, MODE_DRAWING_ITEM_3D, MODE_IDLE, MODE_IDLE_3D, MODE_ROTATING_ITEM, MODE_ROTATING_ITEM_3D, MOLDING_LOCATIONS } from "../constants";
+import { DOORSTYLE_SCOPE_ALL, DOORSTYLE_SCOPE_MULTIPLE, DOORSTYLE_SCOPE_SINGLE, INSTALLATION_SUFFIX_TYPE, INTERNAL_EVENT_DRAW_ELEMENT, MODE_DRAGGING_ITEM, MODE_DRAGGING_ITEM_3D, MODE_DRAWING_ITEM, MODE_DRAWING_ITEM_3D, MODE_IDLE, MODE_IDLE_3D, MODE_ROTATING_ITEM, MODE_ROTATING_ITEM_3D, MOLDING_LOCATIONS } from "../constants";
 import { debugUtil, updatePayloadOfInternalEvent } from "../utils/helper";
 import { isUndefined } from 'util';
 import { hasMoldingLayout } from "../utils/molding";
 import { getInstallationSuffix, isEmpty } from "../components/viewer2d/utils";
 import { historyPush } from "../utils/history";
+import { toJSIfNeeded } from "../shared/objects/immutable";
+import { normalizeLongName } from "../shared/domain/cabinet-identity";
 var allItemRect;
 var allItemSnap;
 var allLines;
@@ -27,6 +29,31 @@ var Item = /*#__PURE__*/function () {
     _classCallCheck(this, Item);
   }
   return _createClass(Item, null, [{
+    key: "__getDesiredDoorFinishId",
+    value: function __getDesiredDoorFinishId(layer) {
+      var _layer$doorFinish, _js$id;
+      // Transitional naming: prefer future `doorFinish`, fall back to legacy `doorStyle`.
+      // IMPORTANT: use `doorStyle.id` as door_finish_id (ignore doorStyle.door_style_id).
+      var lf = (_layer$doorFinish = layer === null || layer === void 0 ? void 0 : layer.doorFinish) !== null && _layer$doorFinish !== void 0 ? _layer$doorFinish : layer === null || layer === void 0 ? void 0 : layer.doorStyle;
+      var js = toJSIfNeeded(lf);
+      return (_js$id = js === null || js === void 0 ? void 0 : js.id) !== null && _js$id !== void 0 ? _js$id : null;
+    }
+  }, {
+    key: "__pickCCDFForDoorFinish",
+    value: function __pickCCDFForDoorFinish(definitionCCDFList, desiredDoorFinishId, itemID) {
+      var _match$door_finish_id;
+      if (!Array.isArray(definitionCCDFList) || !desiredDoorFinishId) return null;
+      // Host ccdf_list entries may NOT include `door_finish_id` (only `cabinet_id`).
+      // When missing, we can still pick by cabinet_id and then *stamp* door_finish_id from scene context.
+      var match = definitionCCDFList.find(function (c) {
+        return itemID == null || (c === null || c === void 0 ? void 0 : c.cabinet_id) == null || (c === null || c === void 0 ? void 0 : c.cabinet_id) === itemID;
+      });
+      if (!match) return null;
+      return _objectSpread(_objectSpread({}, match), {}, {
+        door_finish_id: (_match$door_finish_id = match === null || match === void 0 ? void 0 : match.door_finish_id) !== null && _match$door_finish_id !== void 0 ? _match$door_finish_id : desiredDoorFinishId
+      });
+    }
+  }, {
     key: "create",
     value: function create(state, layerID, type, x, y, width, height, rotation, isDuplication) {
       var _item;
@@ -39,7 +66,16 @@ var Item = /*#__PURE__*/function () {
         id: itemID,
         itemID: state.catalog.getIn(['elements', type, 'itemID']),
         name: NameGenerator.generateName('items', state.catalog.getIn(['elements', type, 'info', 'title'])),
+        long_name: state.catalog.getIn(['elements', type, 'long_name']),
+        sizeinfo: state.catalog.getIn(['elements', type, 'info', 'sizeinfo']),
+        description: state.catalog.getIn(['elements', type, 'info', 'description']),
+        base: state.catalog.getIn(['elements', type, 'info', 'image']),
+        shape_svg: state.catalog.getIn(['elements', type, 'info', 'shape_svg']),
+        gltf: state.catalog.getIn(['elements', type, 'gltf']),
+        is_corner: state.catalog.getIn(['elements', type, 'info', 'is_corner']),
+        obj_property: state.catalog.getIn(['elements', type, 'obj']),
         sku_number: state.catalog.getIn(['elements', type, 'obj']).toJS().sku_number,
+        outline: state.catalog.getIn(['elements', type, 'info', 'outline']),
         //style: state.catalog.getIn(['elements', type, 'info', 'door']),
         category: state.catalog.getIn(['elements', type, 'type']),
         layoutpos: state.catalog.getIn(['elements', type, 'info', 'layoutpos']),
@@ -53,24 +89,41 @@ var Item = /*#__PURE__*/function () {
         isDuplication: isDuplication,
         isInitialPos: isInitialPos ? isInitialPos : false
       }, null, state);
+      // Attach selected ccdf onto the placed instance so SYNC can return it.
+      // This does not affect legacy `structure_json/tempPlaceholders` behavior.
+      try {
+        var _state, _definitions$get$toJS, _definitions$get, _definitions$get$toJS2, _state2;
+        var layerForFinish = state.getIn(['scene', 'layers', layerID]);
+        var desiredDoorFinishId = this.__getDesiredDoorFinishId(layerForFinish);
+        var definitions = (_state = state) === null || _state === void 0 || (_state = _state.catalog) === null || _state === void 0 ? void 0 : _state.getIn(['elements', type]);
+        var definitionCCDFList = definitions !== null && definitions !== void 0 && definitions.get ? (_definitions$get$toJS = (_definitions$get = definitions.get('ccdf_list')) === null || _definitions$get === void 0 || (_definitions$get$toJS2 = _definitions$get.toJS) === null || _definitions$get$toJS2 === void 0 ? void 0 : _definitions$get$toJS2.call(_definitions$get)) !== null && _definitions$get$toJS !== void 0 ? _definitions$get$toJS : definitions.get('ccdf_list') : definitions === null || definitions === void 0 ? void 0 : definitions.ccdf_list;
+        var picked = this.__pickCCDFForDoorFinish(definitionCCDFList, desiredDoorFinishId, (_state2 = state) === null || _state2 === void 0 || (_state2 = _state2.catalog) === null || _state2 === void 0 ? void 0 : _state2.getIn(['elements', type, 'itemID']));
+        if (picked) item = item.merge({
+          ccdf: picked
+        });
+      } catch (e) {
+        // best-effort only; never block item creation
+      }
       if (item.category === 'cabinet') {
         if (isDuplication && refItem) {
           item = item.merge({
             doorStyle: refItem.doorStyle
           });
         } else {
-          var _state$doorStyle, _ref, _temp$doorStyles$cds$, _temp$doorStyles, _temp$cds, _state3;
+          var _layer$doorStyle, _temp, _ref, _temp$doorStyles$cds$, _temp2, _temp3, _state5;
           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']);
+          var temp = (_layer$doorStyle = layer === null || layer === void 0 ? void 0 : layer.doorStyle) !== null && _layer$doorStyle !== void 0 ? _layer$doorStyle : state.doorStyle;
+          if (!isEmpty(temp) && Map.isMap(temp)) temp = (_temp = temp) === null || _temp === void 0 ? void 0 : _temp.toJS();
+          var cds = (_ref = (_temp$doorStyles$cds$ = (_temp2 = temp) === null || _temp2 === void 0 || (_temp2 = _temp2.doorStyles) === null || _temp2 === void 0 || (_temp2 = _temp2.cds) === null || _temp2 === void 0 ? void 0 : _temp2.find(function (elem) {
+            var _state3;
+            return elem.itemID === ((_state3 = state) === null || _state3 === void 0 || (_state3 = _state3.catalog) === null || _state3 === void 0 ? void 0 : _state3.getIn(['elements', type, 'itemID']));
+          })) !== null && _temp$doorStyles$cds$ !== void 0 ? _temp$doorStyles$cds$ : (_temp3 = temp) === null || _temp3 === void 0 || (_temp3 = _temp3.cds) === null || _temp3 === void 0 ? void 0 : _temp3.find(function (elem) {
+            var _state4;
+            return elem.itemID === ((_state4 = state) === null || _state4 === void 0 || (_state4 = _state4.catalog) === null || _state4 === void 0 ? void 0 : _state4.getIn(['elements', type, 'itemID']));
+          })) !== null && _ref !== void 0 ? _ref : (_state5 = state) === null || _state5 === void 0 || (_state5 = _state5.catalog) === null || _state5 === void 0 ? void 0 : _state5.getIn(['elements', type, 'cds']);
           if (cds) {
-            var updatedDoorStyles = _objectSpread(_objectSpread({}, temp === null || temp === void 0 ? void 0 : temp.doorStyles), {}, {
+            var _temp4;
+            var updatedDoorStyles = _objectSpread(_objectSpread({}, (_temp4 = temp) === null || _temp4 === void 0 ? void 0 : _temp4.doorStyles), {}, {
               cds: [cds],
               cabinet_door_style_id: cds.cabinet_door_style_id
             });
@@ -195,6 +248,46 @@ var Item = /*#__PURE__*/function () {
         item: item
       };
     }
+  }, {
+    key: "setItemsCCDF",
+    value: function setItemsCCDF(state, ccdf_list, applyScope) {
+      var targetItemIDs = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
+      var doorFinishId = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
+      var layerID = state.getIn(['scene', 'selectedLayer']);
+      var layer = state.getIn(['scene', 'layers', layerID]);
+      var desiredDoorFinishId = doorFinishId !== null && doorFinishId !== void 0 ? doorFinishId : this.__getDesiredDoorFinishId(layer);
+      if (!Array.isArray(ccdf_list) || !desiredDoorFinishId) return {
+        updatedState: state
+      };
+
+      // resolve which instance IDs to process
+      var idSet = null;
+      if (applyScope === DOORSTYLE_SCOPE_SINGLE) {
+        var selectedItemIds = state.getIn(['scene', 'layers', layerID, 'selected', 'items']).toJS();
+        idSet = new Set(selectedItemIds);
+      } else if (applyScope === DOORSTYLE_SCOPE_MULTIPLE) {
+        idSet = new Set(targetItemIDs);
+      }
+      layer.items.forEach(function (it) {
+        var _idSet, _ccdf_list$find, _picked$door_finish_i;
+        var should = applyScope === DOORSTYLE_SCOPE_ALL ? true : (_idSet = idSet) === null || _idSet === void 0 ? void 0 : _idSet.has(it.id);
+        if (!should) return;
+
+        // Prefer stable join key: long_name. Fall back to cabinet_id for older payloads.
+        var picked = (_ccdf_list$find = ccdf_list.find(function (c) {
+          return (c === null || c === void 0 ? void 0 : c.long_name) && (it === null || it === void 0 ? void 0 : it.long_name) && normalizeLongName(c.long_name) === normalizeLongName(it.long_name);
+        })) !== null && _ccdf_list$find !== void 0 ? _ccdf_list$find : ccdf_list.find(function (c) {
+          return (c === null || c === void 0 ? void 0 : c.cabinet_id) === it.itemID;
+        });
+        if (!picked) return;
+        state = state.setIn(['scene', 'layers', layerID, 'items', it.id, 'ccdf'], _objectSpread(_objectSpread({}, picked), {}, {
+          door_finish_id: (_picked$door_finish_i = picked === null || picked === void 0 ? void 0 : picked.door_finish_id) !== null && _picked$door_finish_i !== void 0 ? _picked$door_finish_i : desiredDoorFinishId
+        }));
+      });
+      return {
+        updatedState: state
+      };
+    }
   }, {
     key: "updateDoorHandle",
     value: function updateDoorHandle(item, layer) {
@@ -552,7 +645,7 @@ var Item = /*#__PURE__*/function () {
       if (!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 (!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';
+      } else if (!isEmpty(state.getIn(['scene', 'layers', 'layer-1', 'counterTop']))) counterTopURI = state.getIn(['scene', 'layers', 'layer-1', 'counterTop']).uri;
       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, [], false, null, counterTopURI).updatedState;
       // state = this.select(state, state.scene.selectedLayer, selectedPos.selectedItemId).updatedState;
@@ -672,8 +765,8 @@ var Item = /*#__PURE__*/function () {
   }, {
     key: "updateDraggingItemChanged",
     value: function updateDraggingItemChanged(state, x, y, layerID, itemID) {
-      var _state4 = state,
-        scene = _state4.scene;
+      var _state6 = state,
+        scene = _state6.scene;
       // let originalX = draggingSupport.get('originalX');
       // let originalY = draggingSupport.get('originalY');
 
@@ -765,9 +858,9 @@ var Item = /*#__PURE__*/function () {
   }, {
     key: "updateDraggingItem",
     value: function updateDraggingItem(state, x, y) {
-      var _state5 = state,
-        draggingSupport = _state5.draggingSupport,
-        scene = _state5.scene;
+      var _state7 = state,
+        draggingSupport = _state7.draggingSupport,
+        scene = _state7.scene;
       var layerID = draggingSupport.get('layerID');
       var itemID = draggingSupport.get('itemID');
       var startPointX = draggingSupport.get('startPointX');
@@ -799,9 +892,9 @@ var Item = /*#__PURE__*/function () {
   }, {
     key: "updateDraggingItem3DX",
     value: function updateDraggingItem3DX(state, x) {
-      var _state6 = state,
-        draggingSupport = _state6.draggingSupport,
-        scene = _state6.scene;
+      var _state8 = state,
+        draggingSupport = _state8.draggingSupport,
+        scene = _state8.scene;
       var layerID = draggingSupport.get('layerID');
       var itemID = draggingSupport.get('itemID');
       var startPointX = draggingSupport.get('startPointX');
@@ -821,9 +914,9 @@ var Item = /*#__PURE__*/function () {
   }, {
     key: "updateDraggingItem3DY",
     value: function updateDraggingItem3DY(state, y) {
-      var _state7 = state,
-        draggingSupport = _state7.draggingSupport,
-        scene = _state7.scene;
+      var _state9 = state,
+        draggingSupport = _state9.draggingSupport,
+        scene = _state9.scene;
       var layerID = draggingSupport.get('layerID');
       var itemID = draggingSupport.get('itemID');
       var startPointY = draggingSupport.get('startPointY');
@@ -904,9 +997,9 @@ var Item = /*#__PURE__*/function () {
   }, {
     key: "updateRotatingItem",
     value: function updateRotatingItem(state, x, y) {
-      var _state8 = state,
-        rotatingSupport = _state8.rotatingSupport,
-        scene = _state8.scene;
+      var _state0 = state,
+        rotatingSupport = _state0.rotatingSupport,
+        scene = _state0.scene;
       var layerID = rotatingSupport.get('layerID');
       var itemID = rotatingSupport.get('itemID');
       var item = state.getIn(['scene', 'layers', layerID, 'items', itemID]);
@@ -989,9 +1082,9 @@ var Item = /*#__PURE__*/function () {
   }, {
     key: "replaceSubmodule",
     value: function replaceSubmodule(state, url) {
-      var _state9 = state,
-        replacingSupport = _state9.replacingSupport,
-        scene = _state9.scene;
+      var _state1 = state,
+        replacingSupport = _state1.replacingSupport,
+        scene = _state1.scene;
       url = 'catalog/texture.png';
       var urlData = url.split('/');
       var newURL = '';
@@ -1092,9 +1185,9 @@ var Item = /*#__PURE__*/function () {
   }, {
     key: "animateObject",
     value: function animateObject(state, value) {
-      var _state0 = state,
-        replacingSupport = _state0.replacingSupport,
-        scene = _state0.scene;
+      var _state10 = state,
+        replacingSupport = _state10.replacingSupport,
+        scene = _state10.scene;
       var layerID = replacingSupport.get('layerID');
       var itemID = replacingSupport.get('itemID');
       var item = state.getIn(['scene', 'layers', layerID, 'items', itemID]);
@@ -1131,8 +1224,8 @@ var Item = /*#__PURE__*/function () {
       state = state.merge({
         doorStyle: doorStyle
       });
-      var _state1 = state,
-        scene = _state1.scene;
+      var _state11 = state,
+        scene = _state11.scene;
       var layerID = scene.get('selectedLayer');
       var layers = scene.layers.get(layerID);
       var items = layers.items;
@@ -1161,8 +1254,9 @@ var Item = /*#__PURE__*/function () {
     }
   }, {
     key: "setDoorStyle",
-    value: function setDoorStyle(state, doorStyle, itemCDS, isAll) {
+    value: function setDoorStyle(state, doorStyle, itemCDS, applyScope) {
       var _this2 = this;
+      var targetItemIDs = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [];
       if (isEmpty(doorStyle)) return {
         updatedState: state
       };
@@ -1187,10 +1281,33 @@ var Item = /*#__PURE__*/function () {
         });
       });
       state = state.setIn(['scene', 'layers', layerID, 'molding'], temp_layer_molding);
-      var itemIDs = state.scene.layers.getIn([layerID, 'selected', 'items']).toJS();
+
+      // 🔥 Determine which items to update
+      var items = state.scene.layers.get(layerID).items;
+      var itemsToProcess = [];
+      var idSet = null;
+      if (applyScope === DOORSTYLE_SCOPE_SINGLE) {
+        var selectedItemIds = state.scene.layers.getIn([layerID, 'selected', 'items']).toJS();
+        idSet = new Set(selectedItemIds);
+      }
+      if (applyScope === DOORSTYLE_SCOPE_MULTIPLE) {
+        // targetItemIds contains item.id (instance IDs)
+        idSet = new Set(targetItemIDs);
+      }
+      if (applyScope === DOORSTYLE_SCOPE_ALL) {
+        items.forEach(function (item) {
+          itemsToProcess.push(item);
+        });
+      } else if (idSet) {
+        items.forEach(function (item) {
+          if (idSet.has(item.id)) {
+            itemsToProcess.push(item);
+          }
+        });
+      }
       var setDoorStyleOfItem = function setDoorStyleOfItem(data) {
         var _cds$data;
-        if (data.category !== 'cabinet') return; //CDS should effect to cabinets
+        if (data.category !== 'cabinet') return;
         var itemID = data.id;
         var curItem = state.getIn(['scene', 'layers', layerID, 'items', itemID]);
         var layer = state.getIn(['scene', 'layers', layerID]);
@@ -1214,9 +1331,7 @@ var Item = /*#__PURE__*/function () {
           return element && element.is_euro_cds;
         })) || [];
         var cds_data = cds ? [cds] : [];
-        if (
-        // doorStyle.door_style_name === 'Euro & Frameless' &&
-        euro_cds.length > 0) {
+        if (euro_cds.length > 0) {
           var newProperties = state.scene.getIn(['layers', layerID, 'items', itemID, 'properties']).toJS();
           if (newProperties.hasOwnProperty('depth')) {
             if (!newProperties.hasOwnProperty('oldDepth')) {
@@ -1293,12 +1408,12 @@ var Item = /*#__PURE__*/function () {
           glossness: doorStyle.glossness,
           name: doorStyle.name,
           door_style_name: doorStyle.door_style_name,
+          door_style_id: doorStyle.door_style_id,
           texture: doorStyle.texture,
           thumbnail: doorStyle.thumbnail,
           type: doorStyle.type,
           sku: doorStyle.sku,
           color_sku_alias: doorStyle.color_sku_alias,
-          // alias name of color_sku for the current dealer
           install: getInstallationSuffix(INSTALLATION_SUFFIX_TYPE.NAME, doorStyle),
           doorStyles: _objectSpread(_objectSpread({}, tmp), {}, {
             cds: cds_data
@@ -1306,25 +1421,9 @@ var Item = /*#__PURE__*/function () {
         };
         state = state.mergeIn(['scene', 'layers', layerID, 'items', itemID, 'doorStyle'], fromJS(tmpDS));
       };
-      if (isAll) {
-        var items = state.scene.layers.get(layerID).items;
-        items.forEach(setDoorStyleOfItem);
-      } else {
-        if (itemIDs.length > 0) {
-          var _loop = function _loop() {
-            var itemID = itemIDs[i];
-            var items = state.scene.layers.get(layerID).items;
-            items.forEach(function (data) {
-              if (itemID === data.id) {
-                setDoorStyleOfItem(data);
-              }
-            });
-          };
-          for (var i = 0; i < itemIDs.length; i++) {
-            _loop();
-          }
-        }
-      }
+
+      // 🔥 Apply to resolved items
+      itemsToProcess.forEach(setDoorStyleOfItem);
       return {
         updatedState: state
       };
@@ -1332,8 +1431,8 @@ var Item = /*#__PURE__*/function () {
   }, {
     key: "setCounterTop",
     value: function setCounterTop(state, counterTop) {
-      var _state10 = state,
-        scene = _state10.scene;
+      var _state12 = state,
+        scene = _state12.scene;
       var layerID = scene.get('selectedLayer');
       var layers = scene.layers.get(layerID);
       layers = layers.mergeIn(['counterTop'], counterTop);
@@ -1377,8 +1476,8 @@ var Item = /*#__PURE__*/function () {
   }, {
     key: "setDoorHandle",
     value: function setDoorHandle(state, doorHandle) {
-      var _state11 = state,
-        scene = _state11.scene;
+      var _state13 = state,
+        scene = _state13.scene;
       var layerID = scene.get('selectedLayer');
       var layer = scene.layers.get(layerID);
       layer = layer.mergeIn(['doorHandle'], doorHandle);
@@ -1402,8 +1501,8 @@ var Item = /*#__PURE__*/function () {
   }, {
     key: "setHandleMaterial",
     value: function setHandleMaterial(state, material) {
-      var _state12 = state,
-        scene = _state12.scene;
+      var _state14 = state,
+        scene = _state14.scene;
       var layerID = scene.get('selectedLayer');
       var layers = scene.layers.get(layerID);
       var items = layers.items;
@@ -1428,8 +1527,8 @@ var Item = /*#__PURE__*/function () {
   }, {
     key: "setWallColor",
     value: function setWallColor(state, wallColor) {
-      var _state13 = state,
-        scene = _state13.scene;
+      var _state15 = state,
+        scene = _state15.scene;
       var layerID = scene.get('selectedLayer');
       var layer = scene.layers.get(layerID);
       layer = layer.merge({
@@ -1455,8 +1554,8 @@ var Item = /*#__PURE__*/function () {
   }, {
     key: "setBacksplash",
     value: function setBacksplash(state, backsplash) {
-      var _state14 = state,
-        scene = _state14.scene;
+      var _state16 = state,
+        scene = _state16.scene;
       var layerID = scene.get('selectedLayer');
       var layer = scene.layers.get(layerID);
       var dataJSON = layer.toJS();
@@ -1484,8 +1583,8 @@ var Item = /*#__PURE__*/function () {
   }, {
     key: "setMolding",
     value: function setMolding(state, molding, isAll) {
-      var _state15 = state,
-        scene = _state15.scene;
+      var _state17 = state,
+        scene = _state17.scene;
       var layerID = scene.get('selectedLayer');
       var layer = scene.layers.get(layerID);
       if (isAll) {
@@ -1577,8 +1676,8 @@ var Item = /*#__PURE__*/function () {
   }, {
     key: "updateMolding",
     value: function updateMolding(state) {
-      var _state16 = state,
-        scene = _state16.scene;
+      var _state18 = state,
+        scene = _state18.scene;
       var layerID = scene.get('selectedLayer');
       var layer = scene.layers.get(layerID);
       var selectedItem = layer.getIn(['items', layer.selected.toJS().items[0]]);
@@ -1606,7 +1705,7 @@ var Item = /*#__PURE__*/function () {
           }
         });
         var updateSelectItemMolding = function updateSelectItemMolding() {
-          var _loop2 = function _loop2() {
+          var _loop = function _loop() {
             // check whether snapped item is same as selected item in layoutpos(Wall, Tall, Base)
             if (MoldingUtils.isSameMoldingLayoutpos(selectedItem, snappedItemGroup[i])) {
               // check whether snapped item is same in location(same location type and height).
@@ -1628,7 +1727,7 @@ var Item = /*#__PURE__*/function () {
             }
           };
           for (var i = 0; i < snappedItemGroup.length; i++) {
-            _loop2();
+            _loop();
           }
         };
         var emptyMoldingArray = function emptyMoldingArray() {
@@ -1702,8 +1801,8 @@ var Item = /*#__PURE__*/function () {
   }, {
     key: "setBacksplashVisible",
     value: function setBacksplashVisible(state, itemID, backsplashVisible) {
-      var _state17 = state,
-        scene = _state17.scene;
+      var _state19 = state,
+        scene = _state19.scene;
       var layerID = scene.get('selectedLayer');
       var layer = scene.layers.get(layerID);
       layer = layer.mergeIn(['items', itemID, 'backsplashVisible'], backsplashVisible);
@@ -1723,8 +1822,8 @@ var Item = /*#__PURE__*/function () {
   }, {
     key: "setApplianceMaterial",
     value: function setApplianceMaterial(state, material) {
-      var _state18 = state,
-        scene = _state18.scene;
+      var _state20 = state,
+        scene = _state20.scene;
       var layerID = scene.get('selectedLayer');
       var layers = scene.layers.get(layerID);
       var items = layers.items;
@@ -1748,8 +1847,8 @@ var Item = /*#__PURE__*/function () {
   }, {
     key: "setModelling",
     value: function setModelling(state, molding) {
-      var _state19 = state,
-        scene = _state19.scene;
+      var _state21 = state,
+        scene = _state21.scene;
       var layerID = scene.get('selectedLayer');
       var layers = scene.layers.get(layerID);
       var items = layers.items;
@@ -1859,8 +1958,8 @@ var Item = /*#__PURE__*/function () {
   }, {
     key: "toggleLoadingCabinet",
     value: function toggleLoadingCabinet(state) {
-      var _state20 = state,
-        scene = _state20.scene;
+      var _state22 = state,
+        scene = _state22.scene;
       console.log('scene.isLoadingCabinet: ', !scene.isLoadingCabinet);
       // scene = scene.set('isLoadingCabinet', !scene.isLoadingCabinet);
       // state = state.set('scene', scene);
@@ -1872,8 +1971,8 @@ var Item = /*#__PURE__*/function () {
   }, {
     key: "endLoading",
     value: function endLoading(state) {
-      var _state21 = state,
-        scene = _state21.scene;
+      var _state23 = state,
+        scene = _state23.scene;
       state = state.setIn(['scene', 'loadFlag'], true);
       return {
         updatedState: state

package/es/class/project.js

@@ -105,6 +105,9 @@ var Project = /*#__PURE__*/function () {
 
       // 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);
+
+      // force change the [isLoadingCabinet] to [false], otherwise 3D view will be stay in loading
+      if (sceneJSON.isLoadingCabinet !== false) sceneJSON.isLoadingCabinet = false;
       var newScene = new Scene(sceneJSON);
       state = new State({
         scene: newScene.toJS(),
@@ -145,25 +148,19 @@ var Project = /*#__PURE__*/function () {
       var h = bb.maxY - bb.minY;
       if (w != 0 && Math.abs(w) != Infinity && h != 0 && Math.abs(h) != Infinity) {
         a = viewer.viewerHeight < h ? viewer.viewerHeight / h : (viewer.viewerHeight / h * 3 / 5 - 0.5) / constants.ZOOM_VARIABLE > 400 ? viewer.viewerHeight / h * 400 / ((viewer.viewerHeight / h - 0.5) / constants.ZOOM_VARIABLE) : viewer.viewerHeight / h * 3 / 5;
-        var scaledWidth = a * viewer.SVGWidth;
-        var scaledHeight = a * viewer.SVGHeight;
-
-        // Horizontal
-        if (scaledWidth <= viewer.viewerWidth) {
-          e = (viewer.viewerWidth - scaledWidth) / 2;
-        } else {
-          var maxE = 10;
-          var minE = viewer.viewerWidth - (scaledWidth + 10);
-          e = Math.min(maxE, Math.max(minE, e));
+        e = (viewer.viewerWidth - (bb.maxX + bb.minX) * a) / 2;
+        f = (viewer.viewerHeight - (viewer.SVGHeight * 2 - bb.maxY - bb.minY) * a) / 2;
+        while (!(e <= 10)) {
+          e -= 0.1;
         }
-
-        // Vertical
-        if (scaledHeight <= viewer.viewerHeight) {
-          f = (viewer.viewerHeight - scaledHeight) / 2;
-        } else {
-          var maxF = 80;
-          var minF = viewer.viewerHeight - (scaledHeight + 10);
-          f = Math.min(maxF, Math.max(minF, f));
+        while (!(e + a * viewer.SVGWidth + 10 >= viewer.viewerWidth)) {
+          e += 0.1;
+        }
+        while (!(f <= 80)) {
+          f -= 0.1;
+        }
+        while (!(f + a * viewer.SVGHeight + 10 >= viewer.viewerHeight)) {
+          f += 0.1;
         }
         _viewer2D = _viewer2D.merge({
           a: a,
@@ -183,7 +180,6 @@ var Project = /*#__PURE__*/function () {
         doorStyle: doorStyle,
         viewer2D: _viewer2D
       });
-      state = centering2D(state, viewer2DActions);
       state = Item.setCounterTop(state, counterTop).updatedState;
       state = Area.setFloorStyles(state, floorStyle).updatedState;
       this.updateZoomScale(state, a);
@@ -857,8 +853,8 @@ var Project = /*#__PURE__*/function () {
         if (isEmpty(viewer)) return {
           updatedState: state
         };
-        width = convert(width).from(measurementUnit).to('cm');
-        height = convert(height).from(measurementUnit).to('cm');
+        width = convert(width).from(measurementUnit !== null && measurementUnit !== void 0 ? measurementUnit : 'in').to('cm');
+        height = convert(height).from(measurementUnit !== null && measurementUnit !== void 0 ? measurementUnit : 'in').to('cm');
         var halfWidth = width / 2;
         var halfHeight = height / 2;
         var viewerWidth = viewer.SVGWidth;

package/es/components/content.js

@@ -12,7 +12,6 @@ export default function Content(_ref) {
     height = _ref.height,
     state = _ref.state,
     customContents = _ref.customContents,
-    match = _ref.match,
     setToolbar = _ref.setToolbar,
     replaceCabinet = _ref.replaceCabinet,
     keyDownEnable = _ref.keyDownEnable,
@@ -132,4 +131,7 @@ Content.propTypes = {
   height: PropTypes.number.isRequired,
   replaceCabinet: PropTypes.func.isRequired,
   onInternalEvent: PropTypes.func.isRequired
+};
+Content.contextTypes = {
+  projectActions: PropTypes.object.isRequired
 };

package/es/components/export.js

@@ -1,9 +1,7 @@
 import Content from "./content";
 import Viewer2DComponents from "./viewer2d/export";
 import StyleComponents from "./style/export";
+
 export { Content, Viewer2DComponents, StyleComponents };
-export default {
-  Content: Content,
-  Viewer2DComponents: Viewer2DComponents,
-  StyleComponents: StyleComponents
-};
+
+export default { Content, Viewer2DComponents, StyleComponents };

package/es/components/style/export.js

@@ -1,31 +1,5 @@
-import Button from "./button";
-import CancelButton from "./cancel-button";
-import ContentContainer from "./content-container";
-import ContentTitle from "./content-title";
-import DeleteButton from "./delete-button";
-import FormBlock from "./form-block";
-import FormColorInput from "./form-color-input";
-import FormLabel from "./form-label";
 import FormNumberInput from "./form-number-input";
-import FormSelect from "./form-select";
-import FormSlider from "./form-slider";
-import FormSubmitButton from "./form-submit-button";
-import FormTextInput from "./form-text-input";
-import FormNumberInput2 from "./form-number-input_2";
-export { Button, CancelButton, ContentContainer, ContentTitle, DeleteButton, FormBlock, FormColorInput, FormLabel, FormNumberInput, FormSelect, FormSlider, FormSubmitButton, FormTextInput, FormNumberInput2 };
+export { FormNumberInput };
 export default {
-  Button: Button,
-  CancelButton: CancelButton,
-  ContentContainer: ContentContainer,
-  ContentTitle: ContentTitle,
-  DeleteButton: DeleteButton,
-  FormBlock: FormBlock,
-  FormColorInput: FormColorInput,
-  FormLabel: FormLabel,
-  FormNumberInput: FormNumberInput,
-  FormSelect: FormSelect,
-  FormSlider: FormSlider,
-  FormSubmitButton: FormSubmitButton,
-  FormTextInput: FormTextInput,
-  FormNumberInput2: FormNumberInput2
+  FormNumberInput: FormNumberInput
 };