kitchen-simulator 3.1.14 → 3.2.0

package/es/LiteKitchenConfigurator.js

@@ -405,9 +405,6 @@ var LiteKitchenConfigurator = /*#__PURE__*/function (_Component) {
       extractedState = extractedState.merge({
         viewer2D: _viewer2D
       });
-
-      // set the measurement unit after project setup
-      if (measurementUnit) this.props.viewer2DActions.updateCeilHeightUnit(measurementUnit);
       return /*#__PURE__*/React.createElement("section", null, /*#__PURE__*/React.createElement("div", {
         style: _objectSpread(_objectSpread({}, wrapperStyle), {}, {
           height: height,

package/es/catalog/utils/exporter.js

@@ -137,6 +137,7 @@ export default function (_ref) {
     img: base,
     obj: obj_property,
     cds: cds,
+    structure_json: structure_json,
     render2D: function render2D(element, layer, scene) {
       return render2DItem.call(this, element, layer, scene, sizeinfo, layoutpos, is_corner, shape_svg);
     },

package/es/components/viewer3d/scene-creator.js

@@ -16,7 +16,7 @@ import { verticesDistance } from "../../utils/geometry";
 import * as GeomUtils from "../../catalog/utils/geom-utils";
 import { loadTexture } from "../../catalog/utils/item-loader";
 import { returnReplaceableDeepSearchType } from "../viewer2d/utils";
-import { animateDoor, isElevationView, isEmpty, replaceMeshesWithLineSegments, translateDrawer } from "../../utils/helper";
+import { animateDoor, isElevationView, isEmpty, isImmutable, replaceMeshesWithLineSegments, translateDrawer } from "../../utils/helper";
 import { formatNumber } from "../../utils/math";
 var transformBox;
 export var fVLine = [];
@@ -187,6 +187,31 @@ export function createWarningObject() {
   warningObj.name = 'warningObj';
   return warningObj;
 }
+function swapLengthProperty(diffs) {
+  var idx1 = diffs.findIndex(function (v) {
+    return v.path[v.path.length - 1] === 'length';
+  });
+  var idx2 = diffs.findIndex(function (v) {
+    return v.path[v.path.length - 1] === '_length';
+  });
+  if (idx1 < 0 || idx2 < 0) return diffs;
+  if (idx1 > idx2) return diffs;
+  if (diffs[idx1].op === diffs[idx2].op) {
+    var isSwap = true;
+    for (var i = 0; i < diffs[idx1].path.length - 2; i++) {
+      if (diffs[idx1].path[i] !== diffs[idx2].path[i]) {
+        isSwap = false;
+        break;
+      }
+    }
+    if (isSwap) {
+      var temp = diffs[idx1];
+      diffs[idx1] = diffs[idx2];
+      diffs[idx2] = temp;
+    }
+  }
+  return diffs;
+}
 export function updateScene(planData, sceneData, oldSceneData, diffArray, actions, catalog) {
   var _draggingItem$toJS, _filteredDiffs, _filteredDiffs2;
   var mode = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : null;
@@ -204,6 +229,9 @@ export function updateScene(planData, sceneData, oldSceneData, diffArray, action
       value: el.value
     };
   });
+
+  // move "length" to after "_length"
+  splitted = swapLengthProperty(splitted);
   var filteredDiffs = filterDiffs(splitted, sceneData, oldSceneData);
   //***testing additional filter***
   filteredDiffs = filteredDiffs.filter(function (_ref) {
@@ -3418,9 +3446,11 @@ export function updateMoldingGroupArray(MGArray, selItem, planData, layer) {
       // refresh mesh of the updating molding groups
       new_MGArray.forEach(function (mg, index) {
         if (mg.items[0].molding.some(function (mol) {
-          return mol.location_type === mg.location_type;
+          return isImmutable(mol) ? mol.toJS().location_type === mg.location_type : mol.location_type === mg.location_type;
         })) {
-          var molding = mg.items[0].molding.filter(function (mol) {
+          var molding = isImmutable(mg.items[0].molding) ? mg.items[0].molding.filter(function (mol) {
+            return mol.toJS().location_type === mg.location_type;
+          }).toJS()[0] : mg.items[0].molding.filter(function (mol) {
             return mol.location_type === mg.location_type;
           })[0];
           if (mg.molding === null || mg.molding.itemID !== mol.itemID || mg.lines === null || mg.points === null) {

package/es/components/viewer3d/viewer3d.js

@@ -1490,8 +1490,8 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
           }
           gridMatrix.copy(gridPlane.matrixWorld).invert();
           var addItemToolObj = function addItemToolObj() {
-            var _intersects$_i;
-            var selectedItem = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
+            var _planData$sceneGraph, _selectedObject, _intersects$_i;
+            var selectedItem = (_planData$sceneGraph = planData.sceneGraph) === null || _planData$sceneGraph === void 0 || (_planData$sceneGraph = _planData$sceneGraph.layers[selectedObject.layerID]) === null || _planData$sceneGraph === void 0 ? void 0 : _planData$sceneGraph.items[(_selectedObject = selectedObject) === null || _selectedObject === void 0 ? void 0 : _selectedObject.itemID];
             if (isUndefined(selectedItem)) return;
             selectedElement = _this2.props.state.scene.layers.get(selectedObject.layerID).items.get(selectedObject.itemID);
             var itemPos = selectedItem.position.clone();
@@ -1592,6 +1592,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
               selectedObj = allItemRect.cur;
             }
           } else {
+            var _planData$sceneGraph2, _selectedObject2, _selectedObject3;
             visibleTransformBox(false);
             var alti = 0;
             if (allItemRect && allItemRect.cur && allItemRect.cur.itemInfo !== undefined) {
@@ -1601,16 +1602,17 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
               alti = convert(alti).from(_unit2).to(_this2.props.state.scene.unit);
             }
             getPoint(event, alti);
+            var _selectedItem = planData === null || planData === void 0 || (_planData$sceneGraph2 = planData.sceneGraph) === null || _planData$sceneGraph2 === void 0 || (_planData$sceneGraph2 = _planData$sceneGraph2.layers[(_selectedObject2 = selectedObject) === null || _selectedObject2 === void 0 ? void 0 : _selectedObject2.layerID]) === null || _planData$sceneGraph2 === void 0 ? void 0 : _planData$sceneGraph2.items[(_selectedObject3 = selectedObject) === null || _selectedObject3 === void 0 ? void 0 : _selectedObject3.itemID];
+            if (isSelected && !isEmpty(_selectedItem)) addItemToolObj();
             if (bRotate) {
-              addItemToolObj();
               _this2.setState({
                 toolObj: toolObj
               });
               _this2.context.itemsActions.endRotatingItem3D(Point.x, Point.y);
               bRotate = false;
-            } else if (bMove) {
+            }
+            if (bMove) {
               bMove = false;
-              addItemToolObj();
               _this2.setState({
                 toolObj: toolObj
               });
@@ -1630,7 +1632,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
                 _item3D.position.z = targetPoint.z;
                 _item3D.visible = true;
               }
-            } else {}
+            }
             if (bMoveUP) {
               bMoveUP = false;
             }

package/es/models.js

@@ -341,7 +341,8 @@ export var CatalogElement = /*#__PURE__*/function (_Record1) {
   properties: new Map(),
   obj: new Map(),
   type: '',
-  cds: new Map()
+  cds: new Map(),
+  structure_json: {}
 }, 'CatalogElement'));
 export var Catalog = /*#__PURE__*/function (_Record10) {
   function Catalog() {

package/es/utils/isolate-event-handler.js

@@ -1,3 +1,4 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
@@ -481,59 +482,116 @@ function addItemToCatalog(_x5, _x6, _x7, _x8) {
 } // Get attributs of current selected element
 function _addItemToCatalog() {
   _addItemToCatalog = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee5(element, state, catalogInstance, projectActions) {
-    var _element, _element2;
-    var elementJs, catalog, outlineSVGData, _element$structure_js, _element$structure_js2, _element$structure_js3, updatedStructureJson;
+    var _elementJs, _elementJs3;
+    var elementJs, outlineSVGData, _state$getIn, _elementJs$structure_, _elementJs$structure_2, _elementJs$structure_3, cds, _cds$find, _elementJs2, currentCdsId, cdsIdx, ttph, updatedStructureJson, catalogElements, catalogElementKeys, catalogItem, k, _catalogElements$cata, tempPlaceholderArray, _catalogItem$structur, newTempPlaceholderArray, mergedTempPlaceholder;
     return _regeneratorRuntime.wrap(function (_context5) {
       while (1) switch (_context5.prev = _context5.next) {
         case 0:
-          if (!isEmpty((_element = element) === null || _element === void 0 ? void 0 : _element.name)) {
+          if (!isEmpty(element === null || element === void 0 ? void 0 : element.name)) {
             _context5.next = 1;
             break;
           }
           return _context5.abrupt("return");
         case 1:
-          elementJs = element;
-          catalog = state.getIn(['catalog']).toJS(); // add item to catalog of state
-          // if (isEmpty(catalog?.elements[element.name])) {
+          // clone element
+          elementJs = Object.assign({}, element); // if (isEmpty(catalog?.elements[element.name])) {
           _context5.next = 2;
-          return loadSVGsByItem(element);
+          return loadSVGsByItem(elementJs);
         case 2:
           outlineSVGData = _context5.sent;
-          if (!(((_element2 = element) === null || _element2 === void 0 ? void 0 : _element2.type) === 'cabinet')) {
+          if (!(((_elementJs = elementJs) === null || _elementJs === void 0 ? void 0 : _elementJs.type) === 'cabinet')) {
             _context5.next = 4;
             break;
           }
+          // move the tempPlaceholder of current door style to first of tempPlaceholders array
+          cds = (_state$getIn = state.getIn(['scene', 'layers', 'layer-1', 'doorStyle'])) === null || _state$getIn === void 0 ? void 0 : _state$getIn.cds;
+          if (cds) {
+            currentCdsId = (_cds$find = cds.find(function (c) {
+              return c.itemID === elementJs.itemID;
+            })) === null || _cds$find === void 0 ? void 0 : _cds$find.cabinet_door_style_id;
+            cdsIdx = (_elementJs2 = elementJs) === null || _elementJs2 === void 0 || (_elementJs2 = _elementJs2.structure_json) === null || _elementJs2 === void 0 || (_elementJs2 = _elementJs2.tempPlaceholders) === null || _elementJs2 === void 0 ? void 0 : _elementJs2.findIndex(function (tph) {
+              return tph.id === currentCdsId;
+            }); // swap
+            if (currentCdsId && cdsIdx >= 0) {
+              ttph = elementJs.structure_json.tempPlaceholders[0];
+              elementJs.structure_json.tempPlaceholders[0] = elementJs.structure_json.tempPlaceholders[cdsIdx];
+              elementJs.structure_json.tempPlaceholders[cdsIdx] = ttph;
+            }
+          }
           // make placeholders of element and tempPlaceholder
-          updatedStructureJson = _objectSpread(_objectSpread({}, element.structure_json), (_element$structure_js = (_element$structure_js2 = element.structure_json) === null || _element$structure_js2 === void 0 || (_element$structure_js2 = _element$structure_js2.tempPlaceholders[0]) === null || _element$structure_js2 === void 0 ? void 0 : _element$structure_js2.structure) !== null && _element$structure_js !== void 0 ? _element$structure_js : {});
-          element.structure_json = updatedStructureJson;
-          element = _objectSpread(_objectSpread({}, element), {}, {
+          updatedStructureJson = _objectSpread(_objectSpread({}, elementJs.structure_json), (_elementJs$structure_ = (_elementJs$structure_2 = elementJs.structure_json) === null || _elementJs$structure_2 === void 0 || (_elementJs$structure_2 = _elementJs$structure_2.tempPlaceholders[0]) === null || _elementJs$structure_2 === void 0 ? void 0 : _elementJs$structure_2.structure) !== null && _elementJs$structure_ !== void 0 ? _elementJs$structure_ : {});
+          elementJs.structure_json = updatedStructureJson;
+          elementJs = _objectSpread(_objectSpread({}, elementJs), {}, {
             cds: {
-              data: [_objectSpread({}, element.customer_property)],
-              itemID: element.itemID
+              data: [_objectSpread({}, elementJs.customer_property)],
+              itemID: elementJs.itemID
             }
           });
-          if (isEmpty((_element$structure_js3 = element.structure_json) === null || _element$structure_js3 === void 0 ? void 0 : _element$structure_js3.tempPlaceholders)) {
+          if (isEmpty((_elementJs$structure_3 = elementJs.structure_json) === null || _elementJs$structure_3 === void 0 ? void 0 : _elementJs$structure_3.tempPlaceholders)) {
             _context5.next = 4;
             break;
           }
           _context5.next = 3;
-          return updateCabinetPayload(element);
+          return updateCabinetPayload(elementJs);
         case 3:
           elementJs = _context5.sent;
         case 4:
           elementJs = _objectSpread(_objectSpread({}, elementJs), {}, {
             outlineSVGData: outlineSVGData,
-            type: element.type,
+            type: elementJs.type,
             render2DItem: render2DItem
           });
-          if (element.type === 'appliance' || element.type === 'furnishing') elementJs.render3DItem = render3DApplianceItem;else if (element.type === 'lighting') elementJs.render3DItem = render3DLightingItem;else elementJs.render3DItem = render3DItem;
+          if (elementJs.type === 'appliance' || elementJs.type === 'furnishing') elementJs.render3DItem = render3DApplianceItem;else if (elementJs.type === 'lighting') elementJs.render3DItem = render3DLightingItem;else elementJs.render3DItem = render3DItem;
+
+          /***** join new tempPlaceholder to the old element - start *****/
+          // get catalog item by itemID
+          catalogElements = state.getIn(['catalog', 'elements']).toJS();
+          catalogElementKeys = Object.keys(catalogElements);
+          catalogItem = null;
+          k = 0;
+        case 5:
+          if (!(k < catalogElementKeys.length)) {
+            _context5.next = 7;
+            break;
+          }
+          if (!(((_catalogElements$cata = catalogElements[catalogElementKeys[k]]) === null || _catalogElements$cata === void 0 ? void 0 : _catalogElements$cata.itemID) === elementJs.itemID)) {
+            _context5.next = 6;
+            break;
+          }
+          catalogItem = catalogElements[catalogElementKeys[k]];
+          return _context5.abrupt("continue", 7);
+        case 6:
+          k++;
+          _context5.next = 5;
+          break;
+        case 7:
+          // get old tempPlaceholder array from catalog item
+          tempPlaceholderArray = null;
+          if (!isEmpty(catalogItem)) {
+            tempPlaceholderArray = (_catalogItem$structur = catalogItem.structure_json) === null || _catalogItem$structur === void 0 ? void 0 : _catalogItem$structur.tempPlaceholders;
+          }
+
+          // join new tempPlaceholder array to old one
+          newTempPlaceholderArray = [];
+          (_elementJs3 = elementJs) === null || _elementJs3 === void 0 || (_elementJs3 = _elementJs3.structure_json) === null || _elementJs3 === void 0 || (_elementJs3 = _elementJs3.tempPlaceholders) === null || _elementJs3 === void 0 || _elementJs3.forEach(function (tph) {
+            var _tempPlaceholderArray;
+            if (!((_tempPlaceholderArray = tempPlaceholderArray) !== null && _tempPlaceholderArray !== void 0 && _tempPlaceholderArray.some(function (otph) {
+              return otph.id === tph.id;
+            }))) newTempPlaceholderArray.push(tph);
+          });
+          mergedTempPlaceholder = null;
+          if (isEmpty(tempPlaceholderArray)) mergedTempPlaceholder = newTempPlaceholderArray;else if (isEmpty(newTempPlaceholderArray)) mergedTempPlaceholder = tempPlaceholderArray;else mergedTempPlaceholder = [].concat(_toConsumableArray(tempPlaceholderArray), newTempPlaceholderArray);
+
+          // rplace new array to the elementJS
+          if (!isEmpty(mergedTempPlaceholder)) elementJs.structure_json.tempPlaceholders = mergedTempPlaceholder;
+          /***** join new tempPlaceholder to the old element - end *****/
+
           elementJs = exporter(elementJs);
           if (catalogInstance !== null && catalogInstance !== void 0 && catalogInstance.validateElement(elementJs)) {
             catalogInstance.registerElement(elementJs);
             projectActions.addElementToCatalog(elementJs);
           }
-          // }
-        case 5:
+        case 8:
         case "end":
           return _context5.stop();
       }
@@ -722,11 +780,11 @@ function updateAttributeOfSelectedElement(element, attrPayload, state, layer, ca
           attributesFormData = attributesFormData.set('y', yVal);
         } else {
           attributesFormData = attributesFormData.set(attributeName, value);
-          // update the distances from wall
-          var _GeometryUtils$calcDi = GeometryUtils.calcDistancesFromItemToWalls(attributesFormData, layer),
-            PointArray = _GeometryUtils$calcDi.PointArray;
-          attributesFormData = attributesFormData.set('distArray', PointArray);
         }
+        // update the distances from wall
+        var _GeometryUtils$calcDi = GeometryUtils.calcDistancesFromItemToWalls(attributesFormData, layer),
+          PointArray = _GeometryUtils$calcDi.PointArray;
+        attributesFormData = attributesFormData.set('distArray', PointArray);
         break;
       }
     case 'lines':
@@ -1093,7 +1151,7 @@ export function handleExternalEvent(_x10) {
 function _handleExternalEvent() {
   _handleExternalEvent = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee9(props) {
     var _evt$payload3, _evt$payload4;
-    var evt, state, layerId, layer, _evt$payload, cdsItems, itemKeys, _loop3, i, _props$onInternalEven, sLineCnt, _state$getIn, element, cds, _cds$find, currentCdsId, _state$viewer2D, _evt$payload$initialP, mouseX, mouseY, v2d, vPosX, vPosY, layerID, defaulTitle, _Object$keys, _evt$payload5, doorStyle, itemCDS, isAll, _layerId, _cdsItems, allItems, selectedItemId, _itemKeys, _loop4, _i2, _props$onInternalEven2, _evt$payload6, roomShapeType, width, height, _doorStyle, value, _value, _evt$payload7, moldingInfo, isGlobal, distElement, _distElement, _evt$payload8, option, _value2, _layerId2, _layer, _layer$getIn, selectedLines, selectedHoles, selectedItems, _i4, _i5, _i6, _evt$payload9, _evt$payload0, _evt$payload1, _evt$payload10, _layerID, _layer2, orginalItemInfo, originalItem, originalItemPos, replaceItem, _props$onInternalEven3, sceneData, currentTexture, _t5, _t6;
+    var evt, state, layerId, layer, _evt$payload, cdsItems, itemKeys, _loop3, i, _props$onInternalEven, sLineCnt, element, _state$viewer2D, _evt$payload$initialP, mouseX, mouseY, v2d, vPosX, vPosY, layerID, defaulTitle, _Object$keys, _evt$payload5, doorStyle, itemCDS, isAll, _layerId, _cdsItems, allItems, selectedItemId, _itemKeys, _loop4, _i2, _props$onInternalEven2, _evt$payload6, roomShapeType, width, height, _doorStyle, value, _value, _evt$payload7, moldingInfo, isGlobal, distElement, _distElement, _evt$payload8, option, _value2, _layerId2, _layer, _layer$getIn, selectedLines, selectedHoles, selectedItems, _i4, _i5, _i6, _evt$payload9, _evt$payload0, _evt$payload1, _evt$payload10, _layerID, _layer2, orginalItemInfo, originalItem, originalItemPos, replaceItem, _props$onInternalEven3, sceneData, currentTexture, _t5, _t6;
     return _regeneratorRuntime.wrap(function (_context1) {
       while (1) switch (_context1.prev = _context1.next) {
         case 0:
@@ -1210,19 +1268,7 @@ function _handleExternalEvent() {
             _context1.next = 11;
             break;
           }
-          element = evt.payload; ///// filter the tempPlaceholders using layer-doorstyle-cds
-          cds = (_state$getIn = state.getIn(['scene', 'layers', 'layer-1', 'doorStyle'])) === null || _state$getIn === void 0 ? void 0 : _state$getIn.cds;
-          if (cds) {
-            currentCdsId = (_cds$find = cds.find(function (c) {
-              return c.itemID === element.itemID;
-            })) === null || _cds$find === void 0 ? void 0 : _cds$find.cabinet_door_style_id;
-            if (currentCdsId && element.structure_json.tempPlaceholders.length > 0) {
-              element.structure_json.tempPlaceholders[0] = element.structure_json.tempPlaceholders.find(function (tPlaceholder) {
-                return tPlaceholder.id === currentCdsId;
-              });
-            }
-          }
-          /////
+          element = evt.payload;
           _context1.next = 10;
           return addItemToCatalog(element, state, props.catalog, props.projectActions);
         case 10:

package/lib/LiteKitchenConfigurator.js

@@ -414,9 +414,6 @@ var LiteKitchenConfigurator = /*#__PURE__*/function (_Component) {
       extractedState = extractedState.merge({
         viewer2D: _viewer2D
       });
-
-      // set the measurement unit after project setup
-      if (measurementUnit) this.props.viewer2DActions.updateCeilHeightUnit(measurementUnit);
       return /*#__PURE__*/_react["default"].createElement("section", null, /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread(_objectSpread({}, wrapperStyle), {}, {
           height: height,

package/lib/catalog/utils/exporter.js

@@ -144,6 +144,7 @@ function _default(_ref) {
     img: base,
     obj: obj_property,
     cds: cds,
+    structure_json: structure_json,
     render2D: function render2D(element, layer, scene) {
       return render2DItem.call(this, element, layer, scene, sizeinfo, layoutpos, is_corner, shape_svg);
     },

package/lib/components/viewer3d/scene-creator.js

@@ -222,6 +222,31 @@ function createWarningObject() {
   warningObj.name = 'warningObj';
   return warningObj;
 }
+function swapLengthProperty(diffs) {
+  var idx1 = diffs.findIndex(function (v) {
+    return v.path[v.path.length - 1] === 'length';
+  });
+  var idx2 = diffs.findIndex(function (v) {
+    return v.path[v.path.length - 1] === '_length';
+  });
+  if (idx1 < 0 || idx2 < 0) return diffs;
+  if (idx1 > idx2) return diffs;
+  if (diffs[idx1].op === diffs[idx2].op) {
+    var isSwap = true;
+    for (var i = 0; i < diffs[idx1].path.length - 2; i++) {
+      if (diffs[idx1].path[i] !== diffs[idx2].path[i]) {
+        isSwap = false;
+        break;
+      }
+    }
+    if (isSwap) {
+      var temp = diffs[idx1];
+      diffs[idx1] = diffs[idx2];
+      diffs[idx2] = temp;
+    }
+  }
+  return diffs;
+}
 function updateScene(planData, sceneData, oldSceneData, diffArray, actions, catalog) {
   var _draggingItem$toJS, _filteredDiffs, _filteredDiffs2;
   var mode = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : null;
@@ -239,6 +264,9 @@ function updateScene(planData, sceneData, oldSceneData, diffArray, actions, cata
       value: el.value
     };
   });
+
+  // move "length" to after "_length"
+  splitted = swapLengthProperty(splitted);
   var filteredDiffs = filterDiffs(splitted, sceneData, oldSceneData);
   //***testing additional filter***
   filteredDiffs = filteredDiffs.filter(function (_ref) {
@@ -3453,9 +3481,11 @@ function updateMoldingGroupArray(MGArray, selItem, planData, layer) {
       // refresh mesh of the updating molding groups
       new_MGArray.forEach(function (mg, index) {
         if (mg.items[0].molding.some(function (mol) {
-          return mol.location_type === mg.location_type;
+          return (0, _helper.isImmutable)(mol) ? mol.toJS().location_type === mg.location_type : mol.location_type === mg.location_type;
         })) {
-          var molding = mg.items[0].molding.filter(function (mol) {
+          var molding = (0, _helper.isImmutable)(mg.items[0].molding) ? mg.items[0].molding.filter(function (mol) {
+            return mol.toJS().location_type === mg.location_type;
+          }).toJS()[0] : mg.items[0].molding.filter(function (mol) {
             return mol.location_type === mg.location_type;
           })[0];
           if (mg.molding === null || mg.molding.itemID !== mol.itemID || mg.lines === null || mg.points === null) {

package/lib/components/viewer3d/viewer3d.js

@@ -1496,8 +1496,8 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
           }
           gridMatrix.copy(gridPlane.matrixWorld).invert();
           var addItemToolObj = function addItemToolObj() {
-            var _intersects$_i;
-            var selectedItem = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
+            var _planData$sceneGraph, _selectedObject, _intersects$_i;
+            var selectedItem = (_planData$sceneGraph = planData.sceneGraph) === null || _planData$sceneGraph === void 0 || (_planData$sceneGraph = _planData$sceneGraph.layers[selectedObject.layerID]) === null || _planData$sceneGraph === void 0 ? void 0 : _planData$sceneGraph.items[(_selectedObject = selectedObject) === null || _selectedObject === void 0 ? void 0 : _selectedObject.itemID];
             if ((0, _util.isUndefined)(selectedItem)) return;
             selectedElement = _this2.props.state.scene.layers.get(selectedObject.layerID).items.get(selectedObject.itemID);
             var itemPos = selectedItem.position.clone();
@@ -1598,6 +1598,7 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
               selectedObj = allItemRect.cur;
             }
           } else {
+            var _planData$sceneGraph2, _selectedObject2, _selectedObject3;
             (0, _sceneCreator.visibleTransformBox)(false);
             var alti = 0;
             if (allItemRect && allItemRect.cur && allItemRect.cur.itemInfo !== undefined) {
@@ -1607,16 +1608,17 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
               alti = (0, _convertUnitsLite.convert)(alti).from(_unit2).to(_this2.props.state.scene.unit);
             }
             getPoint(event, alti);
+            var _selectedItem = planData === null || planData === void 0 || (_planData$sceneGraph2 = planData.sceneGraph) === null || _planData$sceneGraph2 === void 0 || (_planData$sceneGraph2 = _planData$sceneGraph2.layers[(_selectedObject2 = selectedObject) === null || _selectedObject2 === void 0 ? void 0 : _selectedObject2.layerID]) === null || _planData$sceneGraph2 === void 0 ? void 0 : _planData$sceneGraph2.items[(_selectedObject3 = selectedObject) === null || _selectedObject3 === void 0 ? void 0 : _selectedObject3.itemID];
+            if (isSelected && !(0, _helper.isEmpty)(_selectedItem)) addItemToolObj();
             if (bRotate) {
-              addItemToolObj();
               _this2.setState({
                 toolObj: toolObj
               });
               _this2.context.itemsActions.endRotatingItem3D(Point.x, Point.y);
               bRotate = false;
-            } else if (bMove) {
+            }
+            if (bMove) {
               bMove = false;
-              addItemToolObj();
               _this2.setState({
                 toolObj: toolObj
               });
@@ -1636,7 +1638,7 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
                 _item3D.position.z = targetPoint.z;
                 _item3D.visible = true;
               }
-            } else {}
+            }
             if (bMoveUP) {
               bMoveUP = false;
             }

package/lib/models.js

@@ -348,7 +348,8 @@ var CatalogElement = exports.CatalogElement = /*#__PURE__*/function (_Record1) {
   properties: new _immutable.Map(),
   obj: new _immutable.Map(),
   type: '',
-  cds: new _immutable.Map()
+  cds: new _immutable.Map(),
+  structure_json: {}
 }, 'CatalogElement'));
 var Catalog = exports.Catalog = /*#__PURE__*/function (_Record10) {
   function Catalog() {

package/lib/utils/isolate-event-handler.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.handleExternalEvent = handleExternalEvent;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
@@ -488,59 +489,116 @@ function addItemToCatalog(_x5, _x6, _x7, _x8) {
 } // Get attributs of current selected element
 function _addItemToCatalog() {
   _addItemToCatalog = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee5(element, state, catalogInstance, projectActions) {
-    var _element, _element2;
-    var elementJs, catalog, outlineSVGData, _element$structure_js, _element$structure_js2, _element$structure_js3, updatedStructureJson;
+    var _elementJs, _elementJs3;
+    var elementJs, outlineSVGData, _state$getIn, _elementJs$structure_, _elementJs$structure_2, _elementJs$structure_3, cds, _cds$find, _elementJs2, currentCdsId, cdsIdx, ttph, updatedStructureJson, catalogElements, catalogElementKeys, catalogItem, k, _catalogElements$cata, tempPlaceholderArray, _catalogItem$structur, newTempPlaceholderArray, mergedTempPlaceholder;
     return _regenerator["default"].wrap(function (_context5) {
       while (1) switch (_context5.prev = _context5.next) {
         case 0:
-          if (!(0, _helper.isEmpty)((_element = element) === null || _element === void 0 ? void 0 : _element.name)) {
+          if (!(0, _helper.isEmpty)(element === null || element === void 0 ? void 0 : element.name)) {
             _context5.next = 1;
             break;
           }
           return _context5.abrupt("return");
         case 1:
-          elementJs = element;
-          catalog = state.getIn(['catalog']).toJS(); // add item to catalog of state
-          // if (isEmpty(catalog?.elements[element.name])) {
+          // clone element
+          elementJs = Object.assign({}, element); // if (isEmpty(catalog?.elements[element.name])) {
           _context5.next = 2;
-          return loadSVGsByItem(element);
+          return loadSVGsByItem(elementJs);
         case 2:
           outlineSVGData = _context5.sent;
-          if (!(((_element2 = element) === null || _element2 === void 0 ? void 0 : _element2.type) === 'cabinet')) {
+          if (!(((_elementJs = elementJs) === null || _elementJs === void 0 ? void 0 : _elementJs.type) === 'cabinet')) {
             _context5.next = 4;
             break;
           }
+          // move the tempPlaceholder of current door style to first of tempPlaceholders array
+          cds = (_state$getIn = state.getIn(['scene', 'layers', 'layer-1', 'doorStyle'])) === null || _state$getIn === void 0 ? void 0 : _state$getIn.cds;
+          if (cds) {
+            currentCdsId = (_cds$find = cds.find(function (c) {
+              return c.itemID === elementJs.itemID;
+            })) === null || _cds$find === void 0 ? void 0 : _cds$find.cabinet_door_style_id;
+            cdsIdx = (_elementJs2 = elementJs) === null || _elementJs2 === void 0 || (_elementJs2 = _elementJs2.structure_json) === null || _elementJs2 === void 0 || (_elementJs2 = _elementJs2.tempPlaceholders) === null || _elementJs2 === void 0 ? void 0 : _elementJs2.findIndex(function (tph) {
+              return tph.id === currentCdsId;
+            }); // swap
+            if (currentCdsId && cdsIdx >= 0) {
+              ttph = elementJs.structure_json.tempPlaceholders[0];
+              elementJs.structure_json.tempPlaceholders[0] = elementJs.structure_json.tempPlaceholders[cdsIdx];
+              elementJs.structure_json.tempPlaceholders[cdsIdx] = ttph;
+            }
+          }
           // make placeholders of element and tempPlaceholder
-          updatedStructureJson = _objectSpread(_objectSpread({}, element.structure_json), (_element$structure_js = (_element$structure_js2 = element.structure_json) === null || _element$structure_js2 === void 0 || (_element$structure_js2 = _element$structure_js2.tempPlaceholders[0]) === null || _element$structure_js2 === void 0 ? void 0 : _element$structure_js2.structure) !== null && _element$structure_js !== void 0 ? _element$structure_js : {});
-          element.structure_json = updatedStructureJson;
-          element = _objectSpread(_objectSpread({}, element), {}, {
+          updatedStructureJson = _objectSpread(_objectSpread({}, elementJs.structure_json), (_elementJs$structure_ = (_elementJs$structure_2 = elementJs.structure_json) === null || _elementJs$structure_2 === void 0 || (_elementJs$structure_2 = _elementJs$structure_2.tempPlaceholders[0]) === null || _elementJs$structure_2 === void 0 ? void 0 : _elementJs$structure_2.structure) !== null && _elementJs$structure_ !== void 0 ? _elementJs$structure_ : {});
+          elementJs.structure_json = updatedStructureJson;
+          elementJs = _objectSpread(_objectSpread({}, elementJs), {}, {
             cds: {
-              data: [_objectSpread({}, element.customer_property)],
-              itemID: element.itemID
+              data: [_objectSpread({}, elementJs.customer_property)],
+              itemID: elementJs.itemID
             }
           });
-          if ((0, _helper.isEmpty)((_element$structure_js3 = element.structure_json) === null || _element$structure_js3 === void 0 ? void 0 : _element$structure_js3.tempPlaceholders)) {
+          if ((0, _helper.isEmpty)((_elementJs$structure_3 = elementJs.structure_json) === null || _elementJs$structure_3 === void 0 ? void 0 : _elementJs$structure_3.tempPlaceholders)) {
             _context5.next = 4;
             break;
           }
           _context5.next = 3;
-          return updateCabinetPayload(element);
+          return updateCabinetPayload(elementJs);
         case 3:
           elementJs = _context5.sent;
         case 4:
           elementJs = _objectSpread(_objectSpread({}, elementJs), {}, {
             outlineSVGData: outlineSVGData,
-            type: element.type,
+            type: elementJs.type,
             render2DItem: _itemLoader.render2DItem
           });
-          if (element.type === 'appliance' || element.type === 'furnishing') elementJs.render3DItem = _itemLoader.render3DApplianceItem;else if (element.type === 'lighting') elementJs.render3DItem = _itemLoader.render3DLightingItem;else elementJs.render3DItem = _itemLoader.render3DItem;
+          if (elementJs.type === 'appliance' || elementJs.type === 'furnishing') elementJs.render3DItem = _itemLoader.render3DApplianceItem;else if (elementJs.type === 'lighting') elementJs.render3DItem = _itemLoader.render3DLightingItem;else elementJs.render3DItem = _itemLoader.render3DItem;
+
+          /***** join new tempPlaceholder to the old element - start *****/
+          // get catalog item by itemID
+          catalogElements = state.getIn(['catalog', 'elements']).toJS();
+          catalogElementKeys = Object.keys(catalogElements);
+          catalogItem = null;
+          k = 0;
+        case 5:
+          if (!(k < catalogElementKeys.length)) {
+            _context5.next = 7;
+            break;
+          }
+          if (!(((_catalogElements$cata = catalogElements[catalogElementKeys[k]]) === null || _catalogElements$cata === void 0 ? void 0 : _catalogElements$cata.itemID) === elementJs.itemID)) {
+            _context5.next = 6;
+            break;
+          }
+          catalogItem = catalogElements[catalogElementKeys[k]];
+          return _context5.abrupt("continue", 7);
+        case 6:
+          k++;
+          _context5.next = 5;
+          break;
+        case 7:
+          // get old tempPlaceholder array from catalog item
+          tempPlaceholderArray = null;
+          if (!(0, _helper.isEmpty)(catalogItem)) {
+            tempPlaceholderArray = (_catalogItem$structur = catalogItem.structure_json) === null || _catalogItem$structur === void 0 ? void 0 : _catalogItem$structur.tempPlaceholders;
+          }
+
+          // join new tempPlaceholder array to old one
+          newTempPlaceholderArray = [];
+          (_elementJs3 = elementJs) === null || _elementJs3 === void 0 || (_elementJs3 = _elementJs3.structure_json) === null || _elementJs3 === void 0 || (_elementJs3 = _elementJs3.tempPlaceholders) === null || _elementJs3 === void 0 || _elementJs3.forEach(function (tph) {
+            var _tempPlaceholderArray;
+            if (!((_tempPlaceholderArray = tempPlaceholderArray) !== null && _tempPlaceholderArray !== void 0 && _tempPlaceholderArray.some(function (otph) {
+              return otph.id === tph.id;
+            }))) newTempPlaceholderArray.push(tph);
+          });
+          mergedTempPlaceholder = null;
+          if ((0, _helper.isEmpty)(tempPlaceholderArray)) mergedTempPlaceholder = newTempPlaceholderArray;else if ((0, _helper.isEmpty)(newTempPlaceholderArray)) mergedTempPlaceholder = tempPlaceholderArray;else mergedTempPlaceholder = [].concat((0, _toConsumableArray2["default"])(tempPlaceholderArray), newTempPlaceholderArray);
+
+          // rplace new array to the elementJS
+          if (!(0, _helper.isEmpty)(mergedTempPlaceholder)) elementJs.structure_json.tempPlaceholders = mergedTempPlaceholder;
+          /***** join new tempPlaceholder to the old element - end *****/
+
           elementJs = (0, _exporter["default"])(elementJs);
           if (catalogInstance !== null && catalogInstance !== void 0 && catalogInstance.validateElement(elementJs)) {
             catalogInstance.registerElement(elementJs);
             projectActions.addElementToCatalog(elementJs);
           }
-          // }
-        case 5:
+        case 8:
         case "end":
           return _context5.stop();
       }
@@ -729,11 +787,11 @@ function updateAttributeOfSelectedElement(element, attrPayload, state, layer, ca
           attributesFormData = attributesFormData.set('y', yVal);
         } else {
           attributesFormData = attributesFormData.set(attributeName, value);
-          // update the distances from wall
-          var _GeometryUtils$calcDi = _export.GeometryUtils.calcDistancesFromItemToWalls(attributesFormData, layer),
-            PointArray = _GeometryUtils$calcDi.PointArray;
-          attributesFormData = attributesFormData.set('distArray', PointArray);
         }
+        // update the distances from wall
+        var _GeometryUtils$calcDi = _export.GeometryUtils.calcDistancesFromItemToWalls(attributesFormData, layer),
+          PointArray = _GeometryUtils$calcDi.PointArray;
+        attributesFormData = attributesFormData.set('distArray', PointArray);
         break;
       }
     case 'lines':
@@ -1100,7 +1158,7 @@ function handleExternalEvent(_x10) {
 function _handleExternalEvent() {
   _handleExternalEvent = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee9(props) {
     var _evt$payload3, _evt$payload4;
-    var evt, state, layerId, layer, _evt$payload, cdsItems, itemKeys, _loop3, i, _props$onInternalEven, sLineCnt, _state$getIn, element, cds, _cds$find, currentCdsId, _state$viewer2D, _evt$payload$initialP, mouseX, mouseY, v2d, vPosX, vPosY, layerID, defaulTitle, _Object$keys, _evt$payload5, doorStyle, itemCDS, isAll, _layerId, _cdsItems, allItems, selectedItemId, _itemKeys, _loop4, _i2, _props$onInternalEven2, _evt$payload6, roomShapeType, width, height, _doorStyle, value, _value, _evt$payload7, moldingInfo, isGlobal, distElement, _distElement, _evt$payload8, option, _value2, _layerId2, _layer, _layer$getIn, selectedLines, selectedHoles, selectedItems, _i4, _i5, _i6, _evt$payload9, _evt$payload0, _evt$payload1, _evt$payload10, _layerID, _layer2, orginalItemInfo, originalItem, originalItemPos, replaceItem, _props$onInternalEven3, sceneData, currentTexture, _t5, _t6;
+    var evt, state, layerId, layer, _evt$payload, cdsItems, itemKeys, _loop3, i, _props$onInternalEven, sLineCnt, element, _state$viewer2D, _evt$payload$initialP, mouseX, mouseY, v2d, vPosX, vPosY, layerID, defaulTitle, _Object$keys, _evt$payload5, doorStyle, itemCDS, isAll, _layerId, _cdsItems, allItems, selectedItemId, _itemKeys, _loop4, _i2, _props$onInternalEven2, _evt$payload6, roomShapeType, width, height, _doorStyle, value, _value, _evt$payload7, moldingInfo, isGlobal, distElement, _distElement, _evt$payload8, option, _value2, _layerId2, _layer, _layer$getIn, selectedLines, selectedHoles, selectedItems, _i4, _i5, _i6, _evt$payload9, _evt$payload0, _evt$payload1, _evt$payload10, _layerID, _layer2, orginalItemInfo, originalItem, originalItemPos, replaceItem, _props$onInternalEven3, sceneData, currentTexture, _t5, _t6;
     return _regenerator["default"].wrap(function (_context1) {
       while (1) switch (_context1.prev = _context1.next) {
         case 0:
@@ -1217,19 +1275,7 @@ function _handleExternalEvent() {
             _context1.next = 11;
             break;
           }
-          element = evt.payload; ///// filter the tempPlaceholders using layer-doorstyle-cds
-          cds = (_state$getIn = state.getIn(['scene', 'layers', 'layer-1', 'doorStyle'])) === null || _state$getIn === void 0 ? void 0 : _state$getIn.cds;
-          if (cds) {
-            currentCdsId = (_cds$find = cds.find(function (c) {
-              return c.itemID === element.itemID;
-            })) === null || _cds$find === void 0 ? void 0 : _cds$find.cabinet_door_style_id;
-            if (currentCdsId && element.structure_json.tempPlaceholders.length > 0) {
-              element.structure_json.tempPlaceholders[0] = element.structure_json.tempPlaceholders.find(function (tPlaceholder) {
-                return tPlaceholder.id === currentCdsId;
-              });
-            }
-          }
-          /////
+          element = evt.payload;
           _context1.next = 10;
           return addItemToCatalog(element, state, props.catalog, props.projectActions);
         case 10:

package/package.json

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