kitchen-simulator 4.1.7-react-18 → 5.0.0-react.18

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";
@@ -5,43 +6,74 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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) { _defineProperty(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; }
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { Map } from 'immutable';
-import { EXTERNAL_EVENT_ADD_WALL, EXTERNAL_EVENT_TOGGLE_TO_3D, EXTERNAL_EVENT_TOGGLE_TO_2D, EXTERNAL_EVENT_TOGGLE_TO_ELEVATION, EXTERNAL_EVENT_MOVE_PAN, MODE_IDLE, MODE_2D_PAN, EXTERNAL_EVENT_ADD_ITEM, ARRAY_3D_MODES, MODE_IDLE_3D, MODE_ELEVATION_VIEW, MODE_DRAWING_LINE, TOP, BOTTOM, LEFT, RIGHT, EXTERNAL_EVENT_NEW_PROJECT, EXTERNAL_EVENT_CHANGE_DOORSTYLE, EXTERNAL_EVENT_ADD_ROOM_SHAPE, EXTERNAL_EVENT_ZOOM_IN, EXTERNAL_EVENT_ZOOM_OUT, EXTERNAL_EVENT_UNDO, EXTERNAL_EVENT_REDO, EXTERNAL_EVENT_SET_MOLDING, EXTERNAL_EVENT_PROJECT_SETTING, PROJECT_SETTING_OPTION, EXTERNAL_EVENT_SYNC_SCENE, INTERNAL_EVENT_SYNC_SCENE, EXTERNAL_EVENT_UPDATE_ATTRIBUTE, ATT_ITEM_POS, ATT_LINE_LENGTH, ATT_VERTEXT_ONE, ATT_VERTEXT_TWO, ATT_HOLE_OFFSET_A, ATT_HOLE_OFFSET_B, UNIT_CENTIMETER, UNIT_INCH, EXTERNAL_EVENT_UPDATE_PROPERTY, PROP_FLIP_DOOR_HANDLE, PROP_OPEN_DOORS, EXTERNAL_EVENT_LOAD_PROJECT, INTERNAL_EVENT_ITEMS_CATALOG, EXTERNAL_EVENT_ADD_HOLE, EXTERNAL_EVENT_CENTERING_2D, EXTERNAL_EVENT_DUPLICATE_ELEMENT, EXTERNAL_EVENT_DELETE_ELEMENT, ELEMENT_HOLE, ELEMENT_ITEM, ELEMENT_LINE, EXTERNAL_EVENT_REPLACE_CABINET, FINISHING_TYPE, EXTERNAL_EVENT_SET_FINISHING } from "../constants";
+import { EXTERNAL_EVENT_ADD_WALL, EXTERNAL_EVENT_TOGGLE_TO_3D, EXTERNAL_EVENT_TOGGLE_TO_2D, EXTERNAL_EVENT_TOGGLE_TO_ELEVATION, EXTERNAL_EVENT_MOVE_PAN, MODE_IDLE, MODE_2D_PAN, EXTERNAL_EVENT_ADD_ITEM, ARRAY_3D_MODES, MODE_IDLE_3D, MODE_ELEVATION_VIEW, MODE_DRAWING_LINE, TOP, BOTTOM, LEFT, RIGHT, EXTERNAL_EVENT_NEW_PROJECT, EXTERNAL_EVENT_CHANGE_DOORSTYLE, EXTERNAL_EVENT_ADD_ROOM_SHAPE, EXTERNAL_EVENT_ZOOM_IN, EXTERNAL_EVENT_ZOOM_OUT, EXTERNAL_EVENT_UNDO, EXTERNAL_EVENT_REDO, EXTERNAL_EVENT_SET_MOLDING, EXTERNAL_EVENT_PROJECT_SETTING, PROJECT_SETTING_OPTION, EXTERNAL_EVENT_SYNC_SCENE, INTERNAL_EVENT_SYNC_SCENE, EXTERNAL_EVENT_UPDATE_ATTRIBUTE, ATT_ITEM_POS, ATT_LINE_LENGTH, ATT_VERTEXT_ONE, ATT_VERTEXT_TWO, ATT_HOLE_OFFSET_A, ATT_HOLE_OFFSET_B, UNIT_CENTIMETER, UNIT_INCH, EXTERNAL_EVENT_UPDATE_PROPERTY, PROP_FLIP_DOOR_HANDLE, PROP_OPEN_DOORS, EXTERNAL_EVENT_LOAD_PROJECT, INTERNAL_EVENT_ITEMS_CATALOG, EXTERNAL_EVENT_ADD_HOLE, EXTERNAL_EVENT_CENTERING_2D, EXTERNAL_EVENT_DUPLICATE_ELEMENT, EXTERNAL_EVENT_DELETE_ELEMENT, ELEMENT_HOLE, ELEMENT_ITEM, ELEMENT_LINE, EXTERNAL_EVENT_REPLACE_CABINET, FINISHING_TYPE, EXTERNAL_EVENT_SET_FINISHING, EXTERNAL_EVENT_ROTATE_PAN } from "../constants";
 import { isEmpty, updateViwer2D, centering2D } from "./helper";
 import exporter from "../catalog/utils/exporter";
 import { render2DItem, render3DItem, render3DApplianceItem, render3DLightingItem } from "../catalog/utils/item-loader";
 import { convert } from "./convert-units-lite";
 import { GeometryUtils, MathUtils } from "./export";
 import { returnReplaceableDeepSearchType } from "../components/viewer2d/utils";
-import { SVGLoader } from 'three/addons/loaders/SVGLoader';
+import { SVGLoader } from 'three/addons/loaders/SVGLoader.js';
+import { getMoldingDataOfScene2 } from "./molding";
+import { Scene, State } from "../models";
 var PRECISION = 2;
+
+// ---- compatibility: supports old + optimized props shapes ----
+export function getPlannerStateFromProps(props) {
+  var _props$state;
+  // New optimized path
+  if (props !== null && props !== void 0 && props.extractedState) return props.extractedState;
+
+  // Old path
+  if (props !== null && props !== void 0 && (_props$state = props.state) !== null && _props$state !== void 0 && _props$state.get) {
+    var kc = props.state.get('KitchenConfigurator');
+    if (kc) return kc;
+  }
+  return null;
+}
+
+// ---- caches: avoid re-fetch/re-parse costs (no behavior change) ----
+var __jsonCache = new Map(); // url -> Promise<any>
+var __svgCache = new Map(); // url -> Promise<svgData|null>
 function loadJSON(_x) {
   return _loadJSON.apply(this, arguments);
 }
 /********Parse TempPlaceholder from cabinetPayloadData **************/
 function _loadJSON() {
-  _loadJSON = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(path) {
-    return _regeneratorRuntime.wrap(function (_context2) {
-      while (1) switch (_context2.prev = _context2.next) {
+  _loadJSON = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3(path) {
+    var p;
+    return _regeneratorRuntime.wrap(function (_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
         case 0:
-          return _context2.abrupt("return", new Promise(function (resolve, reject) {
+          if (path) {
+            _context3.next = 1;
+            break;
+          }
+          return _context3.abrupt("return", null);
+        case 1:
+          if (!__jsonCache.has(path)) {
+            _context3.next = 2;
+            break;
+          }
+          return _context3.abrupt("return", __jsonCache.get(path));
+        case 2:
+          p = new Promise(function (resolve, reject) {
             var xhr = new XMLHttpRequest();
             xhr.onreadystatechange = function () {
               if (xhr.readyState === XMLHttpRequest.DONE) {
-                if (xhr.status === 200) {
-                  resolve(JSON.parse(xhr.responseText));
-                } else {
-                  reject(xhr);
-                }
+                if (xhr.status === 200) resolve(JSON.parse(xhr.responseText));else reject(xhr);
               }
             };
             xhr.open('GET', path, true);
             xhr.send();
-          }));
-        case 1:
+          });
+          __jsonCache.set(path, p);
+          return _context3.abrupt("return", p);
+        case 3:
         case "end":
-          return _context2.stop();
+          return _context3.stop();
       }
-    }, _callee2);
+    }, _callee3);
   }));
   return _loadJSON.apply(this, arguments);
 }
@@ -50,10 +82,10 @@ function parseTempPlaceholdersFromCabinetPayload(_x2) {
 }
 /***** Update cabinetPayloadData with updatedTempPlaceholders *****/
 function _parseTempPlaceholdersFromCabinetPayload() {
-  _parseTempPlaceholdersFromCabinetPayload = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3(cabinetPayload) {
-    var link, keys, temp, i, _cabinetPayload$struc, _cabinetPayload$struc2, el, tempPlaceholdersData, tempData, doorKey, drawerKey, fixedKey, doorPHs, drawerPHs, has_single_door, fixedPHs, _t2, _t3, _t4;
-    return _regeneratorRuntime.wrap(function (_context3) {
-      while (1) switch (_context3.prev = _context3.next) {
+  _parseTempPlaceholdersFromCabinetPayload = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4(cabinetPayload) {
+    var link, keys, temp, i, _cabinetPayload$struc, _cabinetPayload$struc2, tempPlaceholdersData, _loop3, tempData, doorKey, drawerKey, fixedKey, doorPHs, drawerPHs, has_single_door, fixedPHs, k, _cabinetPayload$struc3, _t2, _t3, _t4;
+    return _regeneratorRuntime.wrap(function (_context5) {
+      while (1) switch (_context5.prev = _context5.next) {
         case 0:
           link = '';
           keys = Object.keys(cabinetPayload.structure_json);
@@ -61,335 +93,358 @@ function _parseTempPlaceholdersFromCabinetPayload() {
           i = 0;
         case 1:
           if (!(i < keys.length)) {
-            _context3.next = 4;
+            _context5.next = 4;
             break;
           }
           if (!((_cabinetPayload$struc = cabinetPayload.structure_json[keys[i]]) !== null && _cabinetPayload$struc !== void 0 && (_cabinetPayload$struc = _cabinetPayload$struc.toString()) !== null && _cabinetPayload$struc !== void 0 && _cabinetPayload$struc.includes('.gltf') && (_cabinetPayload$struc2 = cabinetPayload.structure_json[keys[i]]) !== null && _cabinetPayload$struc2 !== void 0 && (_cabinetPayload$struc2 = _cabinetPayload$struc2.toString()) !== null && _cabinetPayload$struc2 !== void 0 && _cabinetPayload$struc2.startsWith('http'))) {
-            _context3.next = 3;
+            _context5.next = 3;
             break;
           }
           link = cabinetPayload.structure_json[keys[i]];
           _t2 = temp;
           _t3 = keys[i];
-          _context3.next = 2;
+          _context5.next = 2;
           return loadJSON(link);
         case 2:
-          _t4 = _context3.sent;
+          _t4 = _context5.sent;
           _t2.push.call(_t2, {
             name: _t3,
             data: _t4
           });
         case 3:
           i++;
-          _context3.next = 1;
+          _context5.next = 1;
           break;
         case 4:
-          el = cabinetPayload.structure_json.tempPlaceholders[0].id;
           tempPlaceholdersData = [];
-          tempData = {};
-          doorKey = 0;
-          drawerKey = 0;
-          fixedKey = 0;
-          doorPHs = 0;
-          drawerPHs = 0;
-          has_single_door = false;
-          fixedPHs = 0;
-          temp.forEach(function (t, index) {
-            var nodes = t.data.nodes;
-            if (nodes === undefined) {
-              nodes = [];
-            }
-            var tempPlaceholders = nodes.filter(function (element) {
-              return element.name.startsWith('ph_');
-            });
-            tempPlaceholders.sort(function (a, b) {
-              return a.name > b.name ? 1 : -1;
-            });
-            if (tempPlaceholders.length > 0) {
-              if (t.name === 'base') {
-                tempPlaceholders.map(function (element) {
-                  var sink_match = element.name.match(/\d_(sink_[^LR12]*)(_[LR12])?$/);
-                  if (sink_match && sink_match.length >= 2) {
-                    var _process$env$API_URL, _cabinetPayload$struc3;
-                    tempData['sink'] = tempData['sink'] || [];
-                    tempData['sink'].push(element.name);
-                    var sink_url = (_process$env$API_URL = process.env.API_URL) !== null && _process$env$API_URL !== void 0 ? _process$env$API_URL :
-                    // server url from 3DTool env
-                    import.meta.env.VITE_APP_API_URL + // server url from Host env
-                    "/uploads/assets/default/".concat(sink_match[1], ".gltf");
-                    if (cabinetPayload !== null && cabinetPayload !== void 0 && (_cabinetPayload$struc3 = cabinetPayload.structure_json) !== null && _cabinetPayload$struc3 !== void 0 && (_cabinetPayload$struc3 = _cabinetPayload$struc3.tempPlaceholders[0]) !== null && _cabinetPayload$struc3 !== void 0 && _cabinetPayload$struc3.structure) cabinetPayload.structure_json.tempPlaceholders[0].structure.sink = sink_url;
-                  } else if (temp.some(function (felement) {
-                    return felement.name.includes('base_drawer');
-                  }) && element.name.includes('interior_drawer')) {
-                    var objCnt = temp.filter(function (felement) {
-                      return felement.name.includes('base_drawer') && !felement.name.includes('_door');
-                    }).length;
-                    var phCnt = tempPlaceholders.filter(function (felement) {
-                      return felement.name.includes('interior');
-                    }).length;
-                    drawerPHs = phCnt;
-                    if (objCnt === 1 || phCnt % objCnt !== 0) {
-                      if (tempData['base_drawer_1'] === undefined) {
-                        tempData['base_drawer_1'] = [];
-                      }
-                      tempData['base_drawer_1'].push(element.name);
-                      drawerKey++;
-                    } else if (objCnt > 1 && phCnt % objCnt === 0) {
-                      if (tempData['base_drawer_' + (drawerKey % objCnt + 1)] === undefined) {
-                        tempData['base_drawer_' + (drawerKey % objCnt + 1)] = [];
-                      }
-                      tempData['base_drawer_' + (drawerKey % objCnt + 1)].push(element.name);
-                      drawerKey++;
-                    }
-                  } else if (temp.some(function (felement) {
-                    return felement.name.includes('base_door');
-                  }) && !element.name.includes('interior_drawer') && !element.name.includes('drawer') && element.name.includes('door')) {
-                    var _objCnt = temp.filter(function (felement) {
-                      return felement.name.includes('base_door');
-                    }).length;
-                    var _phCnt = tempPlaceholders.filter(function (felement) {
-                      return !felement.name.includes('interior') && !felement.name.includes('drawer') && felement.name.includes('door');
-                    }).length;
-                    doorPHs = _phCnt;
-                    if (_objCnt === 1 || _phCnt % _objCnt !== 0) {
-                      if (tempData['base_door_1'] === undefined) {
-                        tempData['base_door_1'] = [];
-                      }
-                      tempData['base_door_1'].push(element.name);
-                      doorKey++;
-                    } else if (_objCnt > 1) {
-                      if (tempData['base_door_' + (doorKey % _objCnt + 1)] === undefined) {
-                        tempData['base_door_' + (doorKey % _objCnt + 1)] = [];
-                      }
-                      tempData['base_door_' + (doorKey % _objCnt + 1)].push(element.name);
-                      doorKey++;
-                    }
-                  } else if (temp.some(function (felement) {
-                    return felement.name.includes('base_fixed_drawer_door');
-                  }) && element.name.includes('_drawer_door_fixed')) {
-                    var _objCnt2 = temp.filter(function (felement) {
-                      return felement.name.includes('base_fixed_drawer_door');
-                    }).length;
-                    var _phCnt2 = tempPlaceholders.filter(function (felement) {
-                      return felement.name.includes('_drawer_door_fixed');
-                    }).length;
-                    fixedPHs = _phCnt2;
-                    if (_objCnt2 === 1 || _phCnt2 % _objCnt2 !== 0) {
-                      if (tempData['base_fixed_drawer_door_1'] === undefined) {
-                        tempData['base_fixed_drawer_door_1'] = [];
-                      }
-                      tempData['base_fixed_drawer_door_1'].push(element.name);
-                      fixedKey++;
-                    } else if (_objCnt2 > 1) {
-                      if (tempData['base_fixed_drawer_door_' + (fixedKey % _objCnt2 + 1)] === undefined) {
-                        tempData['base_fixed_drawer_door_' + (fixedKey % _objCnt2 + 1)] = [];
-                      }
-                      tempData['base_fixed_drawer_door_' + (fixedKey % _objCnt2 + 1)].push(element.name);
-                      fixedKey++;
+          _loop3 = /*#__PURE__*/_regeneratorRuntime.mark(function _loop3(k) {
+            var el;
+            return _regeneratorRuntime.wrap(function (_context4) {
+              while (1) switch (_context4.prev = _context4.next) {
+                case 0:
+                  el = cabinetPayload.structure_json.tempPlaceholders[k].id;
+                  tempData = {};
+                  doorKey = 0;
+                  drawerKey = 0;
+                  fixedKey = 0;
+                  doorPHs = 0;
+                  drawerPHs = 0;
+                  has_single_door = false;
+                  fixedPHs = 0;
+                  temp.forEach(function (t, index) {
+                    var nodes = t.data.nodes;
+                    if (nodes === undefined) {
+                      nodes = [];
                     }
-                  }
-                });
-              } else if (t.name.includes('base_drawer') && !t.name.includes('_door')) {
-                var objCnt = temp.filter(function (felement) {
-                  return felement.name.includes('base_drawer') && !felement.name.includes('_door');
-                }).length;
-                if (objCnt === 1 || drawerPHs % objCnt !== 0) {
-                  if (tempData['base_drawer_door_1'] === undefined) tempData['base_drawer_door_1'] = [];
-                  //get drawer door handle placeholders
-                  var ph_temp = temp.find(function (felement) {
-                    return felement.name === 'base_drawer_door_1';
-                  });
-                  if (ph_temp != undefined) {
-                    var ph_drawer_door_handle = ph_temp.data.nodes;
-                    ph_drawer_door_handle = ph_drawer_door_handle.filter(function (element) {
-                      return element.name.startsWith('ph_') && element.name.includes('handle');
+                    var tempPlaceholders = nodes.filter(function (element) {
+                      return element.name.startsWith('ph_');
                     });
-                    for (var w = 0; w < drawerPHs; w++) {
-                      if (!tempData['base_drawer_door_1'].some(function (el) {
-                        return el === 'base_drawer_door_1/' + tempPlaceholders[0].name;
-                      })) {
-                        tempData['base_drawer_door_1'].push('base_drawer_1/' + tempPlaceholders[0].name);
-                        //add drawer door handle placeholders
-                        if (tempData['drawer_door_handle_1'] === undefined) tempData['drawer_door_handle_1'] = [];
-                        if (ph_drawer_door_handle.length > 0) tempData['drawer_door_handle_1'].push('base_drawer_door_1/' + ph_drawer_door_handle[0].name);
-                      }
-                    }
-                  }
-                } else if (objCnt > 1 && drawerPHs > 0 && drawerPHs % objCnt === 0) {
-                  if (tempData['base_drawer_door' + t.name.slice(-2)] === undefined) tempData['base_drawer_door' + t.name.slice(-2)] = [];
-                  //get drawer door handle placeholders
-                  var ph_temp = temp.find(function (felement) {
-                    return felement.name === 'base_drawer_door' + t.name.slice(-2);
-                  });
-                  if (ph_temp != undefined) {
-                    var ph_drawer_door_handle = ph_temp.data.nodes;
-                    ph_drawer_door_handle = ph_drawer_door_handle.filter(function (element) {
-                      return element.name.startsWith('ph_') && element.name.includes('handle');
+                    tempPlaceholders.sort(function (a, b) {
+                      return a.name > b.name ? 1 : -1;
                     });
-                    tempPlaceholders.forEach(function (element) {
-                      if (!tempData['base_drawer_door' + t.name.slice(-2)].some(function (el) {
-                        return el === t.name + '/' + element.name;
-                      })) {
-                        tempData['base_drawer_door' + t.name.slice(-2)].push(t.name + '/' + element.name);
-                        //add drawer door handle placeholders
-                        if (tempData['drawer_door_handle' + t.name.slice(-2)] === undefined) tempData['drawer_door_handle' + t.name.slice(-2)] = [];
-                        if (ph_drawer_door_handle.length > 0) tempData['drawer_door_handle' + t.name.slice(-2)].push('base_drawer_door' + t.name.slice(-2) + '/' + ph_drawer_door_handle[0].name);
+                    if (tempPlaceholders.length > 0) {
+                      if (t.name === 'base') {
+                        tempPlaceholders.map(function (element) {
+                          var sink_match = element.name.match(/\d_(sink_[^LR12]*)(_[LR12])?$/);
+                          if (sink_match && sink_match.length >= 2) {
+                            var _process$env$API_URL, _cabinetPayload$struc4;
+                            tempData['sink'] = tempData['sink'] || [];
+                            tempData['sink'].push(element.name);
+                            var sink_url = (_process$env$API_URL = process.env.API_URL) !== null && _process$env$API_URL !== void 0 ? _process$env$API_URL :
+                            // server url from 3DTool env
+                            import.meta.env.VITE_APP_API_URL + // server url from Host env
+                            "/uploads/assets/default/".concat(sink_match[1], ".gltf");
+                            if (cabinetPayload !== null && cabinetPayload !== void 0 && (_cabinetPayload$struc4 = cabinetPayload.structure_json) !== null && _cabinetPayload$struc4 !== void 0 && (_cabinetPayload$struc4 = _cabinetPayload$struc4.tempPlaceholders[k]) !== null && _cabinetPayload$struc4 !== void 0 && _cabinetPayload$struc4.structure) cabinetPayload.structure_json.tempPlaceholders[k].structure.sink = sink_url;
+                          } else if (temp.some(function (felement) {
+                            return felement.name.includes('base_drawer');
+                          }) && element.name.includes('interior_drawer')) {
+                            var objCnt = temp.filter(function (felement) {
+                              return felement.name.includes('base_drawer') && !felement.name.includes('_door');
+                            }).length;
+                            var phCnt = tempPlaceholders.filter(function (felement) {
+                              return felement.name.includes('interior');
+                            }).length;
+                            drawerPHs = phCnt;
+                            if (objCnt === 1 || phCnt % objCnt !== 0) {
+                              if (tempData['base_drawer_1'] === undefined) {
+                                tempData['base_drawer_1'] = [];
+                              }
+                              tempData['base_drawer_1'].push(element.name);
+                              drawerKey++;
+                            } else if (objCnt > 1 && phCnt % objCnt === 0) {
+                              if (tempData['base_drawer_' + (drawerKey % objCnt + 1)] === undefined) {
+                                tempData['base_drawer_' + (drawerKey % objCnt + 1)] = [];
+                              }
+                              tempData['base_drawer_' + (drawerKey % objCnt + 1)].push(element.name);
+                              drawerKey++;
+                            }
+                          } else if (temp.some(function (felement) {
+                            return felement.name.includes('base_door');
+                          }) && !element.name.includes('interior_drawer') && !element.name.includes('drawer') && element.name.includes('door')) {
+                            var _objCnt = temp.filter(function (felement) {
+                              return felement.name.includes('base_door');
+                            }).length;
+                            var _phCnt = tempPlaceholders.filter(function (felement) {
+                              return !felement.name.includes('interior') && !felement.name.includes('drawer') && felement.name.includes('door');
+                            }).length;
+                            doorPHs = _phCnt;
+                            if (_objCnt === 1 || _phCnt % _objCnt !== 0) {
+                              if (tempData['base_door_1'] === undefined) {
+                                tempData['base_door_1'] = [];
+                              }
+                              tempData['base_door_1'].push(element.name);
+                              doorKey++;
+                            } else if (_objCnt > 1) {
+                              if (tempData['base_door_' + (doorKey % _objCnt + 1)] === undefined) {
+                                tempData['base_door_' + (doorKey % _objCnt + 1)] = [];
+                              }
+                              tempData['base_door_' + (doorKey % _objCnt + 1)].push(element.name);
+                              doorKey++;
+                            }
+                          } else if (temp.some(function (felement) {
+                            return felement.name.includes('base_fixed_drawer_door');
+                          }) && element.name.includes('_drawer_door_fixed')) {
+                            var _objCnt2 = temp.filter(function (felement) {
+                              return felement.name.includes('base_fixed_drawer_door');
+                            }).length;
+                            var _phCnt2 = tempPlaceholders.filter(function (felement) {
+                              return felement.name.includes('_drawer_door_fixed');
+                            }).length;
+                            fixedPHs = _phCnt2;
+                            if (_objCnt2 === 1 || _phCnt2 % _objCnt2 !== 0) {
+                              if (tempData['base_fixed_drawer_door_1'] === undefined) {
+                                tempData['base_fixed_drawer_door_1'] = [];
+                              }
+                              tempData['base_fixed_drawer_door_1'].push(element.name);
+                              fixedKey++;
+                            } else if (_objCnt2 > 1) {
+                              if (tempData['base_fixed_drawer_door_' + (fixedKey % _objCnt2 + 1)] === undefined) {
+                                tempData['base_fixed_drawer_door_' + (fixedKey % _objCnt2 + 1)] = [];
+                              }
+                              tempData['base_fixed_drawer_door_' + (fixedKey % _objCnt2 + 1)].push(element.name);
+                              fixedKey++;
+                            }
+                          }
+                        });
+                      } else if (t.name.includes('base_drawer') && !t.name.includes('_door')) {
+                        var objCnt = temp.filter(function (felement) {
+                          return felement.name.includes('base_drawer') && !felement.name.includes('_door');
+                        }).length;
+                        if (objCnt === 1 || drawerPHs % objCnt !== 0) {
+                          if (tempData['base_drawer_door_1'] === undefined) tempData['base_drawer_door_1'] = [];
+                          //get drawer door handle placeholders
+                          var ph_temp = temp.find(function (felement) {
+                            return felement.name === 'base_drawer_door_1';
+                          });
+                          if (ph_temp != undefined) {
+                            var ph_drawer_door_handle = ph_temp.data.nodes;
+                            ph_drawer_door_handle = ph_drawer_door_handle.filter(function (element) {
+                              return element.name.startsWith('ph_') && element.name.includes('handle');
+                            });
+                            for (var w = 0; w < drawerPHs; w++) {
+                              if (!tempData['base_drawer_door_1'].some(function (el) {
+                                return el === 'base_drawer_door_1/' + tempPlaceholders[0].name;
+                              })) {
+                                tempData['base_drawer_door_1'].push('base_drawer_1/' + tempPlaceholders[0].name);
+                                //add drawer door handle placeholders
+                                if (tempData['drawer_door_handle_1'] === undefined) tempData['drawer_door_handle_1'] = [];
+                                if (ph_drawer_door_handle.length > 0) tempData['drawer_door_handle_1'].push('base_drawer_door_1/' + ph_drawer_door_handle[0].name);
+                              }
+                            }
+                          }
+                        } else if (objCnt > 1 && drawerPHs > 0 && drawerPHs % objCnt === 0) {
+                          if (tempData['base_drawer_door' + t.name.slice(-2)] === undefined) tempData['base_drawer_door' + t.name.slice(-2)] = [];
+                          //get drawer door handle placeholders
+                          var ph_temp = temp.find(function (felement) {
+                            return felement.name === 'base_drawer_door' + t.name.slice(-2);
+                          });
+                          if (ph_temp != undefined) {
+                            var ph_drawer_door_handle = ph_temp.data.nodes;
+                            ph_drawer_door_handle = ph_drawer_door_handle.filter(function (element) {
+                              return element.name.startsWith('ph_') && element.name.includes('handle');
+                            });
+                            tempPlaceholders.forEach(function (element) {
+                              if (!tempData['base_drawer_door' + t.name.slice(-2)].some(function (el) {
+                                return el === t.name + '/' + element.name;
+                              })) {
+                                tempData['base_drawer_door' + t.name.slice(-2)].push(t.name + '/' + element.name);
+                                //add drawer door handle placeholders
+                                if (tempData['drawer_door_handle' + t.name.slice(-2)] === undefined) tempData['drawer_door_handle' + t.name.slice(-2)] = [];
+                                if (ph_drawer_door_handle.length > 0) tempData['drawer_door_handle' + t.name.slice(-2)].push('base_drawer_door' + t.name.slice(-2) + '/' + ph_drawer_door_handle[0].name);
+                              }
+                            });
+                          }
+                        }
+                      } else if (t.name.includes('base_door')) {
+                        var _objCnt3 = temp.filter(function (felement) {
+                          return felement.name.includes('base_door');
+                        }).length;
+                        tempPlaceholders = tempPlaceholders.filter(function (el) {
+                          return el.name.includes('handle');
+                        });
+                        if (tempPlaceholders.length > 0) if (_objCnt3 === 1 || doorPHs % _objCnt3 !== 0) {
+                          if (tempData['door_handle_1'] === undefined) {
+                            tempData['door_handle_1'] = [];
+                          }
+                          var _loop4 = function _loop4() {
+                            var phname = tempPlaceholders[0].name;
+                            var newph = undefined;
+                            if (tempData['base_door_1'][_w].isLeftPlaceholder()) {
+                              newph = tempPlaceholders.find(function (el) {
+                                return el.name.isRightPlaceholder();
+                              });
+                            }
+                            if (tempData['base_door_1'][_w].isRightPlaceholder()) {
+                              newph = tempPlaceholders.find(function (el) {
+                                return el.name.isLeftPlaceholder();
+                              });
+                            }
+                            if (newph != undefined) {
+                              phname = newph.name;
+                            }
+                            if (doorPHs === 1 && tempPlaceholders.find(function (el) {
+                              return el.name.isLeftPlaceholder();
+                            }) != undefined && tempPlaceholders.find(function (el) {
+                              return el.name.isRightPlaceholder();
+                            }) != undefined) {
+                              has_single_door = true;
+                            }
+                            if (!tempData['door_handle_1'].some(function (el) {
+                              return el === 'door_handle_1/' + phname;
+                            })) {
+                              tempData['door_handle_1'].push('base_door_1/' + phname);
+                            }
+                          };
+                          for (var _w = 0; _w < doorPHs; _w++) {
+                            _loop4();
+                          }
+                        } else if (_objCnt3 > 1 && doorPHs > 0 && doorPHs % _objCnt3 === 0) {
+                          if (tempData['door_handle' + t.name.slice(-2)] === undefined) tempData['door_handle' + t.name.slice(-2)] = [];
+                          var phname = tempPlaceholders[0].name;
+                          var newph = undefined;
+                          var blAdd = true;
+                          if (cabinetPayload.is_corner) {
+                            if (tempData['base_door' + t.name.slice(-2)][0].isLeftPlaceholder()) {
+                              newph = tempPlaceholders.find(function (el) {
+                                return el.name.isLeftPlaceholder();
+                              });
+                            } else {
+                              blAdd = false;
+                            }
+                          } else {
+                            if (tempData['base_door' + t.name.slice(-2)][0].isLeftPlaceholder()) {
+                              newph = tempPlaceholders.find(function (el) {
+                                return el.name.isRightPlaceholder();
+                              });
+                            }
+                            if (tempData['base_door' + t.name.slice(-2)][0].isRightPlaceholder()) {
+                              newph = tempPlaceholders.find(function (el) {
+                                return el.name.isLeftPlaceholder();
+                              });
+                            }
+                          }
+                          if (blAdd) {
+                            if (newph != undefined) {
+                              phname = newph.name;
+                            }
+                            if (!tempData['door_handle' + t.name.slice(-2)].some(function (el) {
+                              return el === t.name + '/' + phname;
+                            })) {
+                              tempData['door_handle' + t.name.slice(-2)].push(t.name + '/' + phname);
+                            }
+                          }
+                        }
+                      } else if (t.name.includes('base_fixed_drawer_door')) {
+                        var _objCnt4 = temp.filter(function (felement) {
+                          return felement.name.includes('base_fixed_drawer_door');
+                        }).length;
+                        tempPlaceholders = tempPlaceholders.filter(function (el) {
+                          return el.name.includes('handle');
+                        });
+                        if (tempPlaceholders.length > 0) if (_objCnt4 === 1 || fixedPHs % _objCnt4 !== 0) {
+                          if (tempData['fixed_drawer_door_handle_1'] === undefined) tempData['fixed_drawer_door_handle_1'] = [];
+                          var _loop5 = function _loop5() {
+                            var phname = tempPlaceholders[0].name;
+                            var newph = undefined;
+                            if (tempData['base_fixed_drawer_door_1'][_w2].isLeftPlaceholder()) {
+                              newph = tempPlaceholders.find(function (el) {
+                                return el.name.isRightPlaceholder();
+                              });
+                            }
+                            if (tempData['base_fixed_drawer_door_1'][_w2].isRightPlaceholder()) {
+                              newph = tempPlaceholders.find(function (el) {
+                                return el.name.isLeftPlaceholder();
+                              });
+                            }
+                            if (newph != undefined) {
+                              phname = newph.name;
+                            }
+                            if (!tempData['fixed_drawer_door_handle_1'].some(function (el) {
+                              return el === 'fixed_drawer_door_handle_1/' + phname;
+                            })) {
+                              tempData['fixed_drawer_door_handle_1'].push('base_fixed_drawer_door_1/' + phname);
+                            }
+                          };
+                          for (var _w2 = 0; _w2 < fixedPHs; _w2++) {
+                            _loop5();
+                          }
+                        } else if (_objCnt4 > 1 && fixedPHs > 0 && fixedPHs % _objCnt4 === 0) {
+                          if (tempData['fixed_drawer_door_handle' + t.name.slice(-2)] === undefined) {
+                            tempData['fixed_drawer_door_handle' + t.name.slice(-2)] = [];
+                          }
+                          var _phname = tempPlaceholders[0].name;
+                          var _newph = undefined;
+                          if (tempData['base_fixed_drawer_door' + t.name.slice(-2)][0].isLeftPlaceholder()) {
+                            _newph = tempPlaceholders.find(function (el) {
+                              return el.name.isRightPlaceholder();
+                            });
+                          }
+                          if (tempData['base_fixed_drawer_door' + t.name.slice(-2)][0].isRightPlaceholder()) {
+                            _newph = tempPlaceholders.find(function (el) {
+                              return el.name.isLeftPlaceholder();
+                            });
+                          }
+                          if (_newph != undefined) {
+                            _phname = _newph.name;
+                          }
+                          if (!tempData['fixed_drawer_door_handle' + t.name.slice(-2)].some(function (el) {
+                            return el === t.name + '/' + _phname;
+                          })) {
+                            tempData['fixed_drawer_door_handle' + t.name.slice(-2)].push(t.name + '/' + _phname);
+                          }
+                        }
                       }
-                    });
-                  }
-                }
-              } else if (t.name.includes('base_door')) {
-                var _objCnt3 = temp.filter(function (felement) {
-                  return felement.name.includes('base_door');
-                }).length;
-                tempPlaceholders = tempPlaceholders.filter(function (el) {
-                  return el.name.includes('handle');
-                });
-                if (tempPlaceholders.length > 0) if (_objCnt3 === 1 || doorPHs % _objCnt3 !== 0) {
-                  if (tempData['door_handle_1'] === undefined) {
-                    tempData['door_handle_1'] = [];
-                  }
-                  var _loop = function _loop() {
-                    var phname = tempPlaceholders[0].name;
-                    var newph = undefined;
-                    if (tempData['base_door_1'][_w].isLeftPlaceholder()) {
-                      newph = tempPlaceholders.find(function (el) {
-                        return el.name.isRightPlaceholder();
-                      });
-                    }
-                    if (tempData['base_door_1'][_w].isRightPlaceholder()) {
-                      newph = tempPlaceholders.find(function (el) {
-                        return el.name.isLeftPlaceholder();
-                      });
-                    }
-                    if (newph != undefined) {
-                      phname = newph.name;
-                    }
-                    if (doorPHs === 1 && tempPlaceholders.find(function (el) {
-                      return el.name.isLeftPlaceholder();
-                    }) != undefined && tempPlaceholders.find(function (el) {
-                      return el.name.isRightPlaceholder();
-                    }) != undefined) {
-                      has_single_door = true;
-                    }
-                    if (!tempData['door_handle_1'].some(function (el) {
-                      return el === 'door_handle_1/' + phname;
-                    })) {
-                      tempData['door_handle_1'].push('base_door_1/' + phname);
                     }
-                  };
-                  for (var _w = 0; _w < doorPHs; _w++) {
-                    _loop();
-                  }
-                } else if (_objCnt3 > 1 && doorPHs > 0 && doorPHs % _objCnt3 === 0) {
-                  if (tempData['door_handle' + t.name.slice(-2)] === undefined) tempData['door_handle' + t.name.slice(-2)] = [];
-                  var phname = tempPlaceholders[0].name;
-                  var newph = undefined;
-                  var blAdd = true;
-                  if (cabinetPayload.is_corner) {
-                    if (tempData['base_door' + t.name.slice(-2)][0].isLeftPlaceholder()) {
-                      newph = tempPlaceholders.find(function (el) {
-                        return el.name.isLeftPlaceholder();
-                      });
-                    } else {
-                      blAdd = false;
-                    }
-                  } else {
-                    if (tempData['base_door' + t.name.slice(-2)][0].isLeftPlaceholder()) {
-                      newph = tempPlaceholders.find(function (el) {
-                        return el.name.isRightPlaceholder();
-                      });
-                    }
-                    if (tempData['base_door' + t.name.slice(-2)][0].isRightPlaceholder()) {
-                      newph = tempPlaceholders.find(function (el) {
-                        return el.name.isLeftPlaceholder();
-                      });
-                    }
-                  }
-                  if (blAdd) {
-                    if (newph != undefined) {
-                      phname = newph.name;
-                    }
-                    if (!tempData['door_handle' + t.name.slice(-2)].some(function (el) {
-                      return el === t.name + '/' + phname;
-                    })) {
-                      tempData['door_handle' + t.name.slice(-2)].push(t.name + '/' + phname);
-                    }
-                  }
-                }
-              } else if (t.name.includes('base_fixed_drawer_door')) {
-                var _objCnt4 = temp.filter(function (felement) {
-                  return felement.name.includes('base_fixed_drawer_door');
-                }).length;
-                tempPlaceholders = tempPlaceholders.filter(function (el) {
-                  return el.name.includes('handle');
-                });
-                if (tempPlaceholders.length > 0) if (_objCnt4 === 1 || fixedPHs % _objCnt4 !== 0) {
-                  if (tempData['fixed_drawer_door_handle_1'] === undefined) tempData['fixed_drawer_door_handle_1'] = [];
-                  var _loop2 = function _loop2() {
-                    var phname = tempPlaceholders[0].name;
-                    var newph = undefined;
-                    if (tempData['base_fixed_drawer_door_1'][_w2].isLeftPlaceholder()) {
-                      newph = tempPlaceholders.find(function (el) {
-                        return el.name.isRightPlaceholder();
-                      });
-                    }
-                    if (tempData['base_fixed_drawer_door_1'][_w2].isRightPlaceholder()) {
-                      newph = tempPlaceholders.find(function (el) {
-                        return el.name.isLeftPlaceholder();
-                      });
-                    }
-                    if (newph != undefined) {
-                      phname = newph.name;
-                    }
-                    if (!tempData['fixed_drawer_door_handle_1'].some(function (el) {
-                      return el === 'fixed_drawer_door_handle_1/' + phname;
-                    })) {
-                      tempData['fixed_drawer_door_handle_1'].push('base_fixed_drawer_door_1/' + phname);
-                    }
-                  };
-                  for (var _w2 = 0; _w2 < fixedPHs; _w2++) {
-                    _loop2();
-                  }
-                } else if (_objCnt4 > 1 && fixedPHs > 0 && fixedPHs % _objCnt4 === 0) {
-                  if (tempData['fixed_drawer_door_handle' + t.name.slice(-2)] === undefined) {
-                    tempData['fixed_drawer_door_handle' + t.name.slice(-2)] = [];
-                  }
-                  var _phname = tempPlaceholders[0].name;
-                  var _newph = undefined;
-                  if (tempData['base_fixed_drawer_door' + t.name.slice(-2)][0].isLeftPlaceholder()) {
-                    _newph = tempPlaceholders.find(function (el) {
-                      return el.name.isRightPlaceholder();
-                    });
-                  }
-                  if (tempData['base_fixed_drawer_door' + t.name.slice(-2)][0].isRightPlaceholder()) {
-                    _newph = tempPlaceholders.find(function (el) {
-                      return el.name.isLeftPlaceholder();
-                    });
-                  }
-                  if (_newph != undefined) {
-                    _phname = _newph.name;
-                  }
-                  if (!tempData['fixed_drawer_door_handle' + t.name.slice(-2)].some(function (el) {
-                    return el === t.name + '/' + _phname;
-                  })) {
-                    tempData['fixed_drawer_door_handle' + t.name.slice(-2)].push(t.name + '/' + _phname);
-                  }
-                }
+                  });
+                  tempPlaceholdersData.push({
+                    id: parseInt(el, 10),
+                    placeholders: tempData,
+                    structure: cabinetPayload.structure_json.tempPlaceholders[k].structure
+                  });
+                case 1:
+                case "end":
+                  return _context4.stop();
               }
-            }
-          });
-          tempPlaceholdersData.push({
-            id: parseInt(el, 10),
-            placeholders: tempData,
-            structure: cabinetPayload.structure_json.tempPlaceholders[0].structure
+            }, _loop3);
           });
-          return _context3.abrupt("return", tempPlaceholdersData);
+          k = 0;
         case 5:
+          if (!(k < (cabinetPayload === null || cabinetPayload === void 0 || (_cabinetPayload$struc3 = cabinetPayload.structure_json) === null || _cabinetPayload$struc3 === void 0 || (_cabinetPayload$struc3 = _cabinetPayload$struc3.tempPlaceholders) === null || _cabinetPayload$struc3 === void 0 ? void 0 : _cabinetPayload$struc3.length))) {
+            _context5.next = 7;
+            break;
+          }
+          return _context5.delegateYield(_loop3(k), "t0", 6);
+        case 6:
+          k++;
+          _context5.next = 5;
+          break;
+        case 7:
+          return _context5.abrupt("return", tempPlaceholdersData);
+        case 8:
         case "end":
-          return _context3.stop();
+          return _context5.stop();
       }
-    }, _callee3);
+    }, _callee4);
   }));
   return _parseTempPlaceholdersFromCabinetPayload.apply(this, arguments);
 }
@@ -397,79 +452,102 @@ function updateCabinetPayload(_x3) {
   return _updateCabinetPayload.apply(this, arguments);
 }
 function _updateCabinetPayload() {
-  _updateCabinetPayload = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4(cabinetPayload) {
-    var tempPlaceholders, cabinetPayloadKeys, i;
-    return _regeneratorRuntime.wrap(function (_context4) {
-      while (1) switch (_context4.prev = _context4.next) {
+  _updateCabinetPayload = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee5(cabinetPayload) {
+    var cabinetPayloadKeys, i, _cabinetPayload$cabin, _cabinetPayload$cabin2;
+    return _regeneratorRuntime.wrap(function (_context6) {
+      while (1) switch (_context6.prev = _context6.next) {
         case 0:
-          tempPlaceholders = [];
-          _context4.next = 1;
-          return parseTempPlaceholdersFromCabinetPayload(cabinetPayload);
-        case 1:
-          tempPlaceholders = _context4.sent;
+          // let tempPlaceholders = [];
+          // tempPlaceholders = await parseTempPlaceholdersFromCabinetPayload(
+          //   cabinetPayload
+          // );
           cabinetPayloadKeys = Object.keys(cabinetPayload);
           for (i = 0; i < cabinetPayloadKeys.length; i++) {
             if (cabinetPayloadKeys[i] === 'structure_json') {
-              cabinetPayload[cabinetPayloadKeys[i]]['placeholders'] = tempPlaceholders[0].placeholders;
-              cabinetPayload[cabinetPayloadKeys[i]]['tempPlaceholders'] = tempPlaceholders;
+              cabinetPayload[cabinetPayloadKeys[i]]['placeholders'] = (_cabinetPayload$cabin = (_cabinetPayload$cabin2 = cabinetPayload[cabinetPayloadKeys[i]]['tempPlaceholders'][0]) === null || _cabinetPayload$cabin2 === void 0 ? void 0 : _cabinetPayload$cabin2.placeholders) !== null && _cabinetPayload$cabin !== void 0 ? _cabinetPayload$cabin : [];
+
+              // cabinetPayload[cabinetPayloadKeys[i]]['placeholders'] =
+              //   tempPlaceholders[0].placeholders;
+              // cabinetPayload[cabinetPayloadKeys[i]]['tempPlaceholders'] =
+              //   tempPlaceholders;
             }
           }
-          return _context4.abrupt("return", cabinetPayload);
-        case 2:
+          return _context6.abrupt("return", cabinetPayload);
+        case 1:
         case "end":
-          return _context4.stop();
+          return _context6.stop();
       }
-    }, _callee4);
+    }, _callee5);
   }));
   return _updateCabinetPayload.apply(this, arguments);
 }
 var loadSVGsByItem = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(item) {
-    var _parsed$xml$viewBox, _parsed$xml$viewBox2, response, svgText, loader, parsed, _t;
-    return _regeneratorRuntime.wrap(function (_context) {
-      while (1) switch (_context.prev = _context.next) {
+  var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(item) {
+    var url, p;
+    return _regeneratorRuntime.wrap(function (_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
         case 0:
-          if (item.outline) {
-            _context.next = 1;
+          if (item !== null && item !== void 0 && item.outline) {
+            _context2.next = 1;
             break;
           }
-          return _context.abrupt("return", null);
+          return _context2.abrupt("return", null);
         case 1:
-          _context.prev = 1;
-          _context.next = 2;
-          return fetch(item.outline, {
-            cache: 'no-store'
-          });
-        case 2:
-          response = _context.sent;
-          _context.next = 3;
-          return response.text();
-        case 3:
-          svgText = _context.sent;
-          loader = new SVGLoader();
-          parsed = loader.parse(svgText);
-          if (!isEmpty(parsed.paths)) {
-            _context.next = 4;
+          url = item.outline;
+          if (!__svgCache.has(url)) {
+            _context2.next = 2;
             break;
           }
-          return _context.abrupt("return", null);
-        case 4:
-          return _context.abrupt("return", {
-            paths: parsed.paths,
-            svgWidth: parseFloat(parsed.xml.getAttribute('width')) || ((_parsed$xml$viewBox = parsed.xml.viewBox) === null || _parsed$xml$viewBox === void 0 || (_parsed$xml$viewBox = _parsed$xml$viewBox.animVal) === null || _parsed$xml$viewBox === void 0 ? void 0 : _parsed$xml$viewBox.width) || 0,
-            svgHeight: parseFloat(parsed.xml.getAttribute('height')) || ((_parsed$xml$viewBox2 = parsed.xml.viewBox) === null || _parsed$xml$viewBox2 === void 0 || (_parsed$xml$viewBox2 = _parsed$xml$viewBox2.animVal) === null || _parsed$xml$viewBox2 === void 0 ? void 0 : _parsed$xml$viewBox2.height) || 0,
-            reverse: !parseFloat(parsed.xml.getAttribute('height'))
-          });
-        case 5:
-          _context.prev = 5;
-          _t = _context["catch"](1);
-          console.error('Failed to load SVG:', item.outline, _t);
-          return _context.abrupt("return", null);
-        case 6:
+          return _context2.abrupt("return", __svgCache.get(url));
+        case 2:
+          p = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+            var _parsed$xml$viewBox, _parsed$xml$viewBox2, response, svgText, loader, parsed, _t;
+            return _regeneratorRuntime.wrap(function (_context) {
+              while (1) switch (_context.prev = _context.next) {
+                case 0:
+                  _context.prev = 0;
+                  _context.next = 1;
+                  return fetch(url, {
+                    cache: 'force-cache'
+                  });
+                case 1:
+                  response = _context.sent;
+                  _context.next = 2;
+                  return response.text();
+                case 2:
+                  svgText = _context.sent;
+                  loader = new SVGLoader();
+                  parsed = loader.parse(svgText);
+                  if (!isEmpty(parsed.paths)) {
+                    _context.next = 3;
+                    break;
+                  }
+                  return _context.abrupt("return", null);
+                case 3:
+                  return _context.abrupt("return", {
+                    paths: parsed.paths,
+                    svgWidth: parseFloat(parsed.xml.getAttribute('width')) || ((_parsed$xml$viewBox = parsed.xml.viewBox) === null || _parsed$xml$viewBox === void 0 || (_parsed$xml$viewBox = _parsed$xml$viewBox.animVal) === null || _parsed$xml$viewBox === void 0 ? void 0 : _parsed$xml$viewBox.width) || 0,
+                    svgHeight: parseFloat(parsed.xml.getAttribute('height')) || ((_parsed$xml$viewBox2 = parsed.xml.viewBox) === null || _parsed$xml$viewBox2 === void 0 || (_parsed$xml$viewBox2 = _parsed$xml$viewBox2.animVal) === null || _parsed$xml$viewBox2 === void 0 ? void 0 : _parsed$xml$viewBox2.height) || 0,
+                    reverse: !parseFloat(parsed.xml.getAttribute('height'))
+                  });
+                case 4:
+                  _context.prev = 4;
+                  _t = _context["catch"](0);
+                  console.error('Failed to load SVG:', url, _t);
+                  return _context.abrupt("return", null);
+                case 5:
+                case "end":
+                  return _context.stop();
+              }
+            }, _callee, null, [[0, 4]]);
+          }))();
+          __svgCache.set(url, p);
+          return _context2.abrupt("return", p);
+        case 3:
         case "end":
-          return _context.stop();
+          return _context2.stop();
       }
-    }, _callee, null, [[1, 5]]);
+    }, _callee2);
   }));
   return function loadSVGsByItem(_x4) {
     return _ref.apply(this, arguments);
@@ -479,64 +557,121 @@ function addItemToCatalog(_x5, _x6, _x7, _x8) {
   return _addItemToCatalog.apply(this, arguments);
 } // 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;
-    return _regeneratorRuntime.wrap(function (_context5) {
-      while (1) switch (_context5.prev = _context5.next) {
+  _addItemToCatalog = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee6(element, state, catalogInstance, projectActions) {
+    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 (_context7) {
+      while (1) switch (_context7.prev = _context7.next) {
         case 0:
-          if (!isEmpty((_element = element) === null || _element === void 0 ? void 0 : _element.name)) {
-            _context5.next = 1;
+          if (!isEmpty(element === null || element === void 0 ? void 0 : element.name)) {
+            _context7.next = 1;
             break;
           }
-          return _context5.abrupt("return");
+          return _context7.abrupt("return");
         case 1:
-          elementJs = element;
-          catalog = state.getIn(['catalog']).toJS(); // add item to catalog of state
-          // if (isEmpty(catalog?.elements[element.name])) {
-          _context5.next = 2;
-          return loadSVGsByItem(element);
+          // clone element
+          elementJs = Object.assign({}, element); // if (isEmpty(catalog?.elements[element.name])) {
+          _context7.next = 2;
+          return loadSVGsByItem(elementJs);
         case 2:
-          outlineSVGData = _context5.sent;
-          if (!(((_element2 = element) === null || _element2 === void 0 ? void 0 : _element2.type) === 'cabinet')) {
-            _context5.next = 4;
+          outlineSVGData = _context7.sent;
+          if (!(((_elementJs = elementJs) === null || _elementJs === void 0 ? void 0 : _elementJs.type) === 'cabinet')) {
+            _context7.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)) {
-            _context5.next = 4;
+          if (isEmpty((_elementJs$structure_3 = elementJs.structure_json) === null || _elementJs$structure_3 === void 0 ? void 0 : _elementJs$structure_3.tempPlaceholders)) {
+            _context7.next = 4;
             break;
           }
-          _context5.next = 3;
-          return updateCabinetPayload(element);
+          _context7.next = 3;
+          return updateCabinetPayload(elementJs);
         case 3:
-          elementJs = _context5.sent;
+          elementJs = _context7.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)) {
+            _context7.next = 7;
+            break;
+          }
+          if (!(((_catalogElements$cata = catalogElements[catalogElementKeys[k]]) === null || _catalogElements$cata === void 0 ? void 0 : _catalogElements$cata.itemID) === elementJs.itemID)) {
+            _context7.next = 6;
+            break;
+          }
+          catalogItem = catalogElements[catalogElementKeys[k]];
+          return _context7.abrupt("continue", 7);
+        case 6:
+          k++;
+          _context7.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();
+          return _context7.stop();
       }
-    }, _callee5);
+    }, _callee6);
   }));
   return _addItemToCatalog.apply(this, arguments);
 }
@@ -669,6 +804,8 @@ function initPropData(element, catalog) {
 function updateAttributeOfSelectedElement(element, attrPayload, state, layer, catalog, projectActions) {
   var _attributesFormData;
   var callback = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : null;
+  var layerID = state.scene.selectedLayer;
+  var layerUnit = state.getIn(['scene', 'layers', layerID, 'unit']);
   var attributesFormData = initAttrData(element, layer, state);
   var value = attrPayload.value;
   var attributeName = attrPayload.attributeName;
@@ -676,28 +813,8 @@ function updateAttributeOfSelectedElement(element, attrPayload, state, layer, ca
   if (attributeName === ATT_ITEM_POS) {
     // calculate the new position of movement
     var rotRad = (value.directionAng + element.rotation) / 180 * Math.PI;
-    var newX = element.x + convert((value.oldDistance - value.newDistance) * Math.cos(rotRad)).from('in').to('cm');
-    var newY = element.y + convert((value.oldDistance - value.newDistance) * Math.sin(rotRad)).from('in').to('cm');
-    // const reversedDirection =
-    //   value.directionAng === LEFT_DIST_ANG
-    //     ? RIGHT_DIST_ANG
-    //     : value.directionAng === RIGHT_DIST_ANG
-    //     ? LEFT_DIST_ANG
-    //     : value.directionAng === BACK_DIST_ANG
-    //     ? FRONT_DIST_ANG
-    //     : BACK_DIST_ANG;
-    // let dist = convert(
-    //   element.distArray?.find(v => v[1] === reversedDirection)
-    //     ? element.distArray?.find(v => v[1] === reversedDirection)[0]
-    //     : 0
-    // )
-    //   .from('cm')
-    //   .to('in');
-    // if (dist + (value.oldDistance - value.newDistance) <= 0 || value.newDistance < 0) {
-    //   // confirm "The item will be placed outside the floor plan. Are you sure?"
-    //   setPopupOpen(true);
-    //   return;
-    // }
+    var newX = element.x + convert((value.oldDistance - value.newDistance) * Math.cos(rotRad)).from(layerUnit).to('cm');
+    var newY = element.y + convert((value.oldDistance - value.newDistance) * Math.sin(rotRad)).from(layerUnit).to('cm');
     value = {
       x: newX,
       y: newY
@@ -706,8 +823,8 @@ function updateAttributeOfSelectedElement(element, attrPayload, state, layer, ca
     var att = attributesFormData.has(attributeName) ? attributesFormData.get(attributeName) : element[attributeName];
     if (att) value = att.merge({
       _length: value,
-      _unit: UNIT_INCH,
-      length: convert(value).from(UNIT_INCH).to(UNIT_CENTIMETER)
+      _unit: layerUnit,
+      length: convert(value).from(layerUnit).to(UNIT_CENTIMETER)
     });
   }
   // make the new attrivutes
@@ -721,11 +838,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, catalog),
-            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':
@@ -785,8 +902,8 @@ function updateAttributeOfSelectedElement(element, attrPayload, state, layer, ca
               var xp = (lengthValue + halfWidthLength) * Math.cos(alpha) + x0;
               var yp = (lengthValue + halfWidthLength) * Math.sin(alpha) + y0;
               var offset = GeometryUtils.pointPositionOnLineSegment(x0, y0, x1, y1, xp, yp);
-              /*
-              if (x0 > x1) offset = 1 - offset;
+              /*
+              if (x0 > x1) offset = 1 - offset;
               */
               var endAt = MathUtils.toFixedFloat(lineLength - lineLength * offset - halfWidthLength, PRECISION);
               var offsetUnit = attributesFormData.getIn(['offsetB', '_unit']);
@@ -823,8 +940,8 @@ function updateAttributeOfSelectedElement(element, attrPayload, state, layer, ca
               var _xp = _x0 - (_lengthValue + _halfWidthLength) * Math.cos(_alpha);
               var _yp = _y2 - (_lengthValue + _halfWidthLength) * Math.sin(_alpha);
               var _offset = GeometryUtils.pointPositionOnLineSegment(_x9, _y, _x0, _y2, _xp, _yp);
-              /*
-              if (x0 > x1) offset = 1 - offset;
+              /*
+              if (x0 > x1) offset = 1 - offset;
               */
               var startAt = MathUtils.toFixedFloat(_lineLength * _offset - _halfWidthLength, PRECISION);
               var _offsetUnit = attributesFormData.getIn(['offsetA', '_unit']);
@@ -942,11 +1059,11 @@ function loadMoldingSvg(_x1) {
   return _loadMoldingSvg.apply(this, arguments);
 }
 function _loadMoldingSvg() {
-  _loadMoldingSvg = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee6(molding) {
-    return _regeneratorRuntime.wrap(function (_context6) {
-      while (1) switch (_context6.prev = _context6.next) {
+  _loadMoldingSvg = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee7(molding) {
+    return _regeneratorRuntime.wrap(function (_context8) {
+      while (1) switch (_context8.prev = _context8.next) {
         case 0:
-          return _context6.abrupt("return", new Promise(function (resolve, reject) {
+          return _context8.abrupt("return", new Promise(function (resolve, reject) {
             var url = molding === null || molding === void 0 ? void 0 : molding.shape_svg;
             if (!url) {
               // Skip if no SVG URL available
@@ -968,9 +1085,9 @@ function _loadMoldingSvg() {
           }));
         case 1:
         case "end":
-          return _context6.stop();
+          return _context8.stop();
       }
-    }, _callee6);
+    }, _callee7);
   }));
   return _loadMoldingSvg.apply(this, arguments);
 }
@@ -999,86 +1116,161 @@ function setFinishing(props, state, payload) {
       break;
   }
 }
-function movePan2D3D(props, payload, state) {
-  var moveType = payload.moveType,
-    moveValue = payload.moveValue;
-  var value = state.getIn(['viewer2D']).toJS();
-  if (state.mode === MODE_IDLE) {
-    switch (moveType) {
-      case TOP:
-        value.f -= moveValue;
-        break;
-      case BOTTOM:
-        value.f += moveValue;
-        break;
-      case RIGHT:
-        value.e += moveValue;
-        break;
-      case LEFT:
-        value.e -= moveValue;
-        break;
+function moveAndRotatePan2D3D(eventType, props, payload, state) {
+  if (eventType === EXTERNAL_EVENT_MOVE_PAN) {
+    var moveType = payload.moveType,
+      moveValue = payload.moveValue;
+    var value = state.getIn(['viewer2D']).toJS();
+    if (state.mode === MODE_IDLE) {
+      switch (moveType) {
+        case TOP:
+          value.f -= moveValue;
+          break;
+        case BOTTOM:
+          value.f += moveValue;
+          break;
+        case RIGHT:
+          value.e += moveValue;
+          break;
+        case LEFT:
+          value.e -= moveValue;
+          break;
+      }
+      updateViwer2D(value, props.viewer2DActions);
+    } else if (state.mode === MODE_IDLE_3D) {
+      switch (moveType) {
+        case TOP:
+          window.interval = setTimeout(function () {
+            window.tDKeyDown({
+              keyCode: 38
+            });
+          }, 50);
+          break;
+        case BOTTOM:
+          window.interval = setTimeout(function () {
+            window.tDKeyDown({
+              keyCode: 40
+            });
+          }, 50);
+          break;
+        case RIGHT:
+          window.interval = setTimeout(function () {
+            window.tDKeyDown({
+              keyCode: 37
+            });
+          }, 50);
+          break;
+        case LEFT:
+          window.interval = setTimeout(function () {
+            window.tDKeyDown({
+              keyCode: 39
+            });
+          }, 50);
+          break;
+      }
     }
-    updateViwer2D(value, props.viewer2DActions);
-  } else if (state.mode === MODE_IDLE_3D) {
-    switch (moveType) {
+  } else if (eventType === EXTERNAL_EVENT_ROTATE_PAN) {
+    var rotateType = payload.rotateType;
+    switch (rotateType) {
       case TOP:
         window.interval = setTimeout(function () {
-          window.tDKeyDown({
-            keyCode: 38
+          window.SPKeyDown({
+            keyCode: 87
           });
         }, 50);
         break;
       case BOTTOM:
         window.interval = setTimeout(function () {
-          window.tDKeyDown({
-            keyCode: 40
+          window.SPKeyDown({
+            keyCode: 83
           });
         }, 50);
         break;
       case RIGHT:
         window.interval = setTimeout(function () {
-          window.tDKeyDown({
-            keyCode: 39
+          window.SPKeyDown({
+            keyCode: 68
           });
         }, 50);
         break;
       case LEFT:
         window.interval = setTimeout(function () {
-          window.tDKeyDown({
-            keyCode: 37
+          window.SPKeyDown({
+            keyCode: 65
           });
         }, 50);
         break;
     }
   }
 }
+function mergeSameElements(projectItemsCatalog) {
+  var result = [];
+  var _loop = function _loop(i) {
+    var idx = result.findIndex(function (v) {
+      return v.itemID === projectItemsCatalog[i].itemID;
+    });
+    if (idx < 0) result.push(projectItemsCatalog[i]);else {
+      var _loop2 = function _loop2(j) {
+        var _result$idx$structure, _result$idx$structure2;
+        var idx2 = (_result$idx$structure = result[idx].structure_json) === null || _result$idx$structure === void 0 || (_result$idx$structure = _result$idx$structure.tempPlaceholders) === null || _result$idx$structure === void 0 ? void 0 : _result$idx$structure.findIndex(function (v) {
+          return v.id === projectItemsCatalog[i].structure_json.tempPlaceholders[j].id;
+        });
+        if (idx2 < 0) (_result$idx$structure2 = result[idx].structure_json) === null || _result$idx$structure2 === void 0 || (_result$idx$structure2 = _result$idx$structure2.tempPlaceholders) === null || _result$idx$structure2 === void 0 || _result$idx$structure2.push(projectItemsCatalog[i].structure_json.tempPlaceholders[j]);else result[idx].structure_json.tempPlaceholders[idx2] = projectItemsCatalog[i].structure_json.tempPlaceholders[j];
+      };
+      for (var j = 0; j < ((_projectItemsCatalog$ = projectItemsCatalog[i].structure_json) === null || _projectItemsCatalog$ === void 0 || (_projectItemsCatalog$ = _projectItemsCatalog$.tempPlaceholders) === null || _projectItemsCatalog$ === void 0 ? void 0 : _projectItemsCatalog$.length); j++) {
+        var _projectItemsCatalog$;
+        _loop2(j);
+      }
+    }
+  };
+  for (var i = 0; i < (projectItemsCatalog === null || projectItemsCatalog === void 0 ? void 0 : projectItemsCatalog.length); i++) {
+    _loop(i);
+  }
+  return result;
+}
 export function handleExternalEvent(_x10) {
   return _handleExternalEvent.apply(this, arguments);
 }
 function _handleExternalEvent() {
-  _handleExternalEvent = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee9(props) {
+  _handleExternalEvent = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee0(props) {
     var _evt$payload3, _evt$payload4;
-    var evt, state, _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, _layerId, layer, _layer$getIn, selectedLines, selectedHoles, selectedItems, _i4, _i5, _i6, _evt$payload9, _evt$payload0, _evt$payload1, _evt$payload10, _layerID, _layer, orginalItemInfo, originalItem, originalItemPos, replaceItem, _props$onInternalEven3, _t5;
-    return _regeneratorRuntime.wrap(function (_context1) {
-      while (1) switch (_context1.prev = _context1.next) {
+    var evt, state, layerId, layer, _evt$payload, cdsItems, itemKeys, _loop6, i, newScene, _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, _loop7, _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 (_context11) {
+      while (1) switch (_context11.prev = _context11.next) {
         case 0:
-          // console.log('***external event****', props);
+          // console.log('***external event****', props.externalEvent);
           evt = props.externalEvent;
-          state = props.state.get('KitchenConfigurator');
+          state = getPlannerStateFromProps(props);
+          if (state) {
+            _context11.next = 1;
+            break;
+          }
+          return _context11.abrupt("return");
+        case 1:
+          layerId = state.getIn(['scene', 'selectedLayer']);
+          layer = state.getIn(['scene', 'layers', layerId]);
           _t5 = evt === null || evt === void 0 ? void 0 : evt.type;
-          _context1.next = _t5 === EXTERNAL_EVENT_LOAD_PROJECT ? 1 : _t5 === EXTERNAL_EVENT_TOGGLE_TO_3D ? 5 : _t5 === EXTERNAL_EVENT_TOGGLE_TO_2D ? 6 : _t5 === EXTERNAL_EVENT_TOGGLE_TO_ELEVATION ? 7 : _t5 === EXTERNAL_EVENT_ADD_WALL ? 8 : _t5 === EXTERNAL_EVENT_ADD_ITEM ? 9 : _t5 === EXTERNAL_EVENT_ADD_HOLE ? 12 : _t5 === EXTERNAL_EVENT_MOVE_PAN ? 13 : _t5 === EXTERNAL_EVENT_NEW_PROJECT ? 14 : _t5 === EXTERNAL_EVENT_CHANGE_DOORSTYLE ? 15 : _t5 === EXTERNAL_EVENT_ADD_ROOM_SHAPE ? 19 : _t5 === EXTERNAL_EVENT_ZOOM_IN ? 20 : _t5 === EXTERNAL_EVENT_ZOOM_OUT ? 21 : _t5 === EXTERNAL_EVENT_CENTERING_2D ? 22 : _t5 === EXTERNAL_EVENT_UNDO ? 23 : _t5 === EXTERNAL_EVENT_REDO ? 24 : _t5 === EXTERNAL_EVENT_SET_MOLDING ? 25 : _t5 === EXTERNAL_EVENT_DUPLICATE_ELEMENT ? 27 : _t5 === EXTERNAL_EVENT_DELETE_ELEMENT ? 28 : _t5 === EXTERNAL_EVENT_PROJECT_SETTING ? 29 : _t5 === EXTERNAL_EVENT_UPDATE_ATTRIBUTE ? 30 : _t5 === EXTERNAL_EVENT_UPDATE_PROPERTY ? 30 : _t5 === EXTERNAL_EVENT_REPLACE_CABINET ? 31 : _t5 === EXTERNAL_EVENT_SET_FINISHING ? 33 : _t5 === EXTERNAL_EVENT_SYNC_SCENE ? 34 : 35;
+          _context11.next = _t5 === EXTERNAL_EVENT_LOAD_PROJECT ? 2 : _t5 === EXTERNAL_EVENT_TOGGLE_TO_3D ? 7 : _t5 === EXTERNAL_EVENT_TOGGLE_TO_2D ? 8 : _t5 === EXTERNAL_EVENT_TOGGLE_TO_ELEVATION ? 9 : _t5 === EXTERNAL_EVENT_ADD_WALL ? 10 : _t5 === EXTERNAL_EVENT_ADD_ITEM ? 11 : _t5 === EXTERNAL_EVENT_ADD_HOLE ? 14 : _t5 === EXTERNAL_EVENT_ROTATE_PAN ? 15 : _t5 === EXTERNAL_EVENT_MOVE_PAN ? 15 : _t5 === EXTERNAL_EVENT_NEW_PROJECT ? 16 : _t5 === EXTERNAL_EVENT_CHANGE_DOORSTYLE ? 17 : _t5 === EXTERNAL_EVENT_ADD_ROOM_SHAPE ? 21 : _t5 === EXTERNAL_EVENT_ZOOM_IN ? 22 : _t5 === EXTERNAL_EVENT_ZOOM_OUT ? 23 : _t5 === EXTERNAL_EVENT_CENTERING_2D ? 24 : _t5 === EXTERNAL_EVENT_UNDO ? 25 : _t5 === EXTERNAL_EVENT_REDO ? 26 : _t5 === EXTERNAL_EVENT_SET_MOLDING ? 27 : _t5 === EXTERNAL_EVENT_DUPLICATE_ELEMENT ? 29 : _t5 === EXTERNAL_EVENT_DELETE_ELEMENT ? 30 : _t5 === EXTERNAL_EVENT_PROJECT_SETTING ? 31 : _t5 === EXTERNAL_EVENT_UPDATE_ATTRIBUTE ? 40 : _t5 === EXTERNAL_EVENT_UPDATE_PROPERTY ? 40 : _t5 === EXTERNAL_EVENT_REPLACE_CABINET ? 41 : _t5 === EXTERNAL_EVENT_SET_FINISHING ? 43 : _t5 === EXTERNAL_EVENT_SYNC_SCENE ? 44 : 45;
           break;
-        case 1:
+        case 2:
+          if (!(evt !== null && evt !== void 0 && evt.payload)) {
+            _context11.next = 6;
+            break;
+          }
           // prepare item data request
           cdsItems = [];
           itemKeys = Object.keys(evt === null || evt === void 0 || (_evt$payload = evt.payload) === null || _evt$payload === void 0 || (_evt$payload = _evt$payload.layers['layer-1']) === null || _evt$payload === void 0 ? void 0 : _evt$payload.items) || [];
-          _loop3 = /*#__PURE__*/_regeneratorRuntime.mark(function _loop3() {
-            var _evt$payload2, _it$doorStyle2;
+          _loop6 = /*#__PURE__*/_regeneratorRuntime.mark(function _loop6() {
+            var _evt$payload2, _it$properties, _it$properties2, _it$properties3, _it$doorStyle2;
             var it;
-            return _regeneratorRuntime.wrap(function (_context8) {
-              while (1) switch (_context8.prev = _context8.next) {
+            return _regeneratorRuntime.wrap(function (_context0) {
+              while (1) switch (_context0.prev = _context0.next) {
                 case 0:
-                  it = evt === null || evt === void 0 || (_evt$payload2 = evt.payload) === null || _evt$payload2 === void 0 || (_evt$payload2 = _evt$payload2.layers['layer-1']) === null || _evt$payload2 === void 0 ? void 0 : _evt$payload2.items[itemKeys[i]];
+                  it = evt === null || evt === void 0 || (_evt$payload2 = evt.payload) === null || _evt$payload2 === void 0 || (_evt$payload2 = _evt$payload2.layers['layer-1']) === null || _evt$payload2 === void 0 ? void 0 : _evt$payload2.items[itemKeys[i]]; //////// check altitude of item property and change length from _length (convert length from 'in' fo 'cm')
+                  if (it !== null && it !== void 0 && (_it$properties = it.properties) !== null && _it$properties !== void 0 && (_it$properties = _it$properties.altitude) !== null && _it$properties !== void 0 && _it$properties.length && it !== null && it !== void 0 && (_it$properties2 = it.properties) !== null && _it$properties2 !== void 0 && (_it$properties2 = _it$properties2.altitude) !== null && _it$properties2 !== void 0 && _it$properties2._unit && it !== null && it !== void 0 && (_it$properties3 = it.properties) !== null && _it$properties3 !== void 0 && (_it$properties3 = _it$properties3.altitude) !== null && _it$properties3 !== void 0 && _it$properties3._length && it.properties.altitude.length !== convert(it.properties.altitude._length).from(it.properties.altitude._unit).to('cm')) {
+                    it.properties.altitude.length = convert(it.properties.altitude._length).from(it.properties.altitude._unit).to('cm');
+                  }
+                  /////////
                   if (!cdsItems.some(function (v) {
                     var _it$doorStyle;
                     return it.itemID === v.itemID && it.name === v.name && ((_it$doorStyle = it.doorStyle) === null || _it$doorStyle === void 0 || (_it$doorStyle = _it$doorStyle.doorStyles) === null || _it$doorStyle === void 0 ? void 0 : _it$doorStyle.cabinet_door_style_id) === v.cdsId;
@@ -1093,22 +1285,26 @@ function _handleExternalEvent() {
                   });
                 case 1:
                 case "end":
-                  return _context8.stop();
+                  return _context0.stop();
               }
-            }, _loop3);
+            }, _loop6);
           });
           i = 0;
-        case 2:
+        case 3:
           if (!(i < itemKeys.length)) {
-            _context1.next = 4;
+            _context11.next = 5;
             break;
           }
-          return _context1.delegateYield(_loop3(), "t0", 3);
-        case 3:
+          return _context11.delegateYield(_loop6(), "t0", 4);
+        case 4:
           i++;
-          _context1.next = 2;
+          _context11.next = 3;
           break;
-        case 4:
+        case 5:
+          newScene = new Scene(evt === null || evt === void 0 ? void 0 : evt.payload);
+          state = new State({
+            scene: newScene.toJS()
+          });
           // request item catalog data to host app
           if (cdsItems.length > 0) {
             (_props$onInternalEven = props.onInternalEvent) === null || _props$onInternalEven === void 0 || _props$onInternalEven.call(props, {
@@ -1117,62 +1313,65 @@ function _handleExternalEvent() {
                 cdsItems: cdsItems
               }
             }, /*#__PURE__*/function () {
-              var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee7(result) {
-                var _i, _result$elements;
-                return _regeneratorRuntime.wrap(function (_context7) {
-                  while (1) switch (_context7.prev = _context7.next) {
+              var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee8(result) {
+                var rt, _i;
+                return _regeneratorRuntime.wrap(function (_context9) {
+                  while (1) switch (_context9.prev = _context9.next) {
                     case 0:
+                      rt = mergeSameElements(result === null || result === void 0 ? void 0 : result.elements);
                       _i = 0;
                     case 1:
-                      if (!(_i < (result === null || result === void 0 || (_result$elements = result.elements) === null || _result$elements === void 0 ? void 0 : _result$elements.length))) {
-                        _context7.next = 3;
+                      if (!(_i < (rt === null || rt === void 0 ? void 0 : rt.length))) {
+                        _context9.next = 3;
                         break;
                       }
-                      _context7.next = 2;
-                      return addItemToCatalog(result.elements[_i], state, props.catalog, props.projectActions);
+                      _context9.next = 2;
+                      return addItemToCatalog(rt[_i], state, props.catalog, props.projectActions);
                     case 2:
                       _i++;
-                      _context7.next = 1;
+                      _context9.next = 1;
                       break;
                     case 3:
                       props.projectActions.loadProject(evt.payload);
                     case 4:
                     case "end":
-                      return _context7.stop();
+                      return _context9.stop();
                   }
-                }, _callee7);
+                }, _callee8);
               }));
               return function (_x11) {
-                return _ref2.apply(this, arguments);
+                return _ref3.apply(this, arguments);
               };
             }());
-          }
-          return _context1.abrupt("continue", 35);
-        case 5:
-          props.projectActions.setMode(MODE_IDLE_3D);
-          return _context1.abrupt("continue", 35);
+          } else props.projectActions.loadProject(evt.payload);
         case 6:
-          props.projectActions.setMode(MODE_IDLE);
-          return _context1.abrupt("continue", 35);
+          return _context11.abrupt("continue", 45);
         case 7:
-          sLineCnt = state.getIn(['scene', 'layers', 'layer-1', 'selected', 'lines']).size;
-          if (sLineCnt > 0) props.projectActions.setMode(MODE_ELEVATION_VIEW);
-          return _context1.abrupt("continue", 35);
+          props.projectActions.unselectAll();
+          props.projectActions.setMode(MODE_IDLE_3D);
+          return _context11.abrupt("continue", 45);
         case 8:
+          props.projectActions.setMode(MODE_IDLE);
+          return _context11.abrupt("continue", 45);
+        case 9:
+          sLineCnt = layer.selected.lines.size;
+          if (sLineCnt > 0) props.projectActions.setMode(MODE_ELEVATION_VIEW);
+          return _context11.abrupt("continue", 45);
+        case 10:
           if (state.mode === MODE_IDLE || state.mode === MODE_2D_PAN) props.linesActions.selectToolDrawingLine('wall');else {
             props.projectActions.setMode(MODE_IDLE);
             props.linesActions.selectToolDrawingLine('wall');
           }
-          return _context1.abrupt("continue", 35);
-        case 9:
+          return _context11.abrupt("continue", 45);
+        case 11:
           if (isEmpty(evt === null || evt === void 0 ? void 0 : evt.payload)) {
-            _context1.next = 11;
+            _context11.next = 13;
             break;
           }
           element = evt.payload;
-          _context1.next = 10;
+          _context11.next = 12;
           return addItemToCatalog(element, state, props.catalog, props.projectActions);
-        case 10:
+        case 12:
           // start drawing item
           if (ARRAY_3D_MODES.includes(state.mode)) {
             // in 3d view
@@ -1193,38 +1392,38 @@ function _handleExternalEvent() {
           }
           props.projectActions.pushLastSelectedCatalogElementToHistory(element);
           props.projectActions.setIsCabinetDrawing(true);
-        case 11:
-          return _context1.abrupt("continue", 35);
-        case 12:
-          ARRAY_3D_MODES.includes(state.mode) ? props.holesActions.selectToolDrawingHole3D(evt === null || evt === void 0 || (_evt$payload3 = evt.payload) === null || _evt$payload3 === void 0 ? void 0 : _evt$payload3.holeName) : props.holesActions.selectToolDrawingHole(evt === null || evt === void 0 || (_evt$payload4 = evt.payload) === null || _evt$payload4 === void 0 ? void 0 : _evt$payload4.holeName);
-          return _context1.abrupt("continue", 35);
         case 13:
-          movePan2D3D(props, evt.payload, state);
-          return _context1.abrupt("continue", 35);
+          return _context11.abrupt("continue", 45);
         case 14:
+          ARRAY_3D_MODES.includes(state.mode) ? props.holesActions.selectToolDrawingHole3D(evt === null || evt === void 0 || (_evt$payload3 = evt.payload) === null || _evt$payload3 === void 0 ? void 0 : _evt$payload3.holeName) : props.holesActions.selectToolDrawingHole(evt === null || evt === void 0 || (_evt$payload4 = evt.payload) === null || _evt$payload4 === void 0 ? void 0 : _evt$payload4.holeName);
+          return _context11.abrupt("continue", 45);
+        case 15:
+          moveAndRotatePan2D3D(evt.type, props, evt.payload, state);
+          return _context11.abrupt("continue", 45);
+        case 16:
           defaulTitle = 'Untitle';
           props.projectActions.newProject();
           props.projectActions.rename(defaulTitle);
-          return _context1.abrupt("continue", 35);
-        case 15:
+          return _context11.abrupt("continue", 45);
+        case 17:
           _evt$payload5 = evt.payload, doorStyle = _evt$payload5.doorStyle, itemCDS = _evt$payload5.itemCDS, isAll = _evt$payload5.isAll; // prepare item data request
-          layerId = state.getIn(['scene', 'selectedLayer']);
+          _layerId = state.getIn(['scene', 'selectedLayer']);
           _cdsItems = [];
-          allItems = state.getIn(['scene', 'layers', layerId, 'items']).toJS();
-          selectedItemId = state.getIn(['scene', 'layers', layerId]).selected.items.toJS()[0];
+          allItems = state.getIn(['scene', 'layers', _layerId, 'items']).toJS();
+          selectedItemId = state.getIn(['scene', 'layers', _layerId]).selected.items.toJS()[0];
           _itemKeys = isAll ? (_Object$keys = Object.keys(allItems)) !== null && _Object$keys !== void 0 ? _Object$keys : [] : [selectedItemId];
-          _loop4 = /*#__PURE__*/_regeneratorRuntime.mark(function _loop4() {
+          _loop7 = /*#__PURE__*/_regeneratorRuntime.mark(function _loop7() {
             var _itemCDS$find;
             var item, cdsId;
-            return _regeneratorRuntime.wrap(function (_context0) {
-              while (1) switch (_context0.prev = _context0.next) {
+            return _regeneratorRuntime.wrap(function (_context10) {
+              while (1) switch (_context10.prev = _context10.next) {
                 case 0:
                   item = allItems[_itemKeys[_i2]];
                   cdsId = (_itemCDS$find = itemCDS.find(function (itCDS) {
                     return itCDS.itemID === item.itemID;
                   })) === null || _itemCDS$find === void 0 ? void 0 : _itemCDS$find.cabinet_door_style_id;
                   if (cdsId && !_cdsItems.some(function (v) {
-                    return it.itemID === v.itemID && it.name === v.name && cdsId === v.cdsId;
+                    return item.itemID === v.itemID && item.name === v.name && cdsId === v.cdsId;
                   })) _cdsItems.push({
                     itemID: item.itemID,
                     prototype: item.prototype,
@@ -1236,22 +1435,22 @@ function _handleExternalEvent() {
                   });
                 case 1:
                 case "end":
-                  return _context0.stop();
+                  return _context10.stop();
               }
-            }, _loop4);
+            }, _loop7);
           });
           _i2 = 0;
-        case 16:
+        case 18:
           if (!(_i2 < _itemKeys.length)) {
-            _context1.next = 18;
+            _context11.next = 20;
             break;
           }
-          return _context1.delegateYield(_loop4(), "t1", 17);
-        case 17:
+          return _context11.delegateYield(_loop7(), "t1", 19);
+        case 19:
           _i2++;
-          _context1.next = 16;
+          _context11.next = 18;
           break;
-        case 18:
+        case 20:
           // request item catalog data to host app
           if (_cdsItems.length > 0) {
             (_props$onInternalEven2 = props.onInternalEvent) === null || _props$onInternalEven2 === void 0 || _props$onInternalEven2.call(props, {
@@ -1260,112 +1459,129 @@ function _handleExternalEvent() {
                 cdsItems: _cdsItems
               }
             }, /*#__PURE__*/function () {
-              var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee8(result) {
-                var _i3, _result$elements2;
-                return _regeneratorRuntime.wrap(function (_context9) {
-                  while (1) switch (_context9.prev = _context9.next) {
+              var _ref4 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee9(result) {
+                var rt, _i3;
+                return _regeneratorRuntime.wrap(function (_context1) {
+                  while (1) switch (_context1.prev = _context1.next) {
                     case 0:
+                      rt = mergeSameElements(result === null || result === void 0 ? void 0 : result.elements);
                       _i3 = 0;
                     case 1:
-                      if (!(_i3 < (result === null || result === void 0 || (_result$elements2 = result.elements) === null || _result$elements2 === void 0 ? void 0 : _result$elements2.length))) {
-                        _context9.next = 3;
+                      if (!(_i3 < (rt === null || rt === void 0 ? void 0 : rt.length))) {
+                        _context1.next = 3;
                         break;
                       }
-                      _context9.next = 2;
-                      return addItemToCatalog(result.elements[_i3], state, props.catalog, props.projectActions);
+                      _context1.next = 2;
+                      return addItemToCatalog(rt[_i3], state, props.catalog, props.projectActions);
                     case 2:
                       _i3++;
-                      _context9.next = 1;
+                      _context1.next = 1;
                       break;
                     case 3:
                       props.itemsActions.setDoorStyle(doorStyle, itemCDS, isAll);
                     case 4:
                     case "end":
-                      return _context9.stop();
+                      return _context1.stop();
                   }
-                }, _callee8);
+                }, _callee9);
               }));
               return function (_x12) {
-                return _ref3.apply(this, arguments);
+                return _ref4.apply(this, arguments);
               };
             }());
           } else props.itemsActions.setDoorStyle(doorStyle, itemCDS, isAll);
-          return _context1.abrupt("continue", 35);
-        case 19:
+          return _context11.abrupt("continue", 45);
+        case 21:
           _evt$payload6 = evt.payload, roomShapeType = _evt$payload6.roomShapeType, width = _evt$payload6.width, height = _evt$payload6.height, _doorStyle = _evt$payload6.doorStyle;
           props.projectActions.createRoomWithShape(roomShapeType, width, height, _doorStyle);
-          return _context1.abrupt("continue", 35);
-        case 20:
+          return _context11.abrupt("continue", 45);
+        case 22:
           value = state.getIn(['viewer2D']).toJS();
           value.a += 0.1;
           value.d += 0.1;
           value.e -= value.SVGWidth * 0.1 / 2;
           value.f -= value.SVGHeight * 0.1 / 2;
           updateViwer2D(value, props.viewer2DActions);
-          return _context1.abrupt("continue", 35);
-        case 21:
+          return _context11.abrupt("continue", 45);
+        case 23:
           _value = state.getIn(['viewer2D']).toJS();
           _value.a -= 0.1;
           _value.d -= 0.1;
           _value.e += _value.SVGWidth * 0.1 / 2;
           _value.f += _value.SVGHeight * 0.1 / 2;
           updateViwer2D(_value, props.viewer2DActions);
-          return _context1.abrupt("continue", 35);
-        case 22:
+          return _context11.abrupt("continue", 45);
+        case 24:
           centering2D(state, props.viewer2DActions);
-          return _context1.abrupt("continue", 35);
-        case 23:
+          return _context11.abrupt("continue", 45);
+        case 25:
           props.projectActions.undo();
-          return _context1.abrupt("continue", 35);
-        case 24:
+          return _context11.abrupt("continue", 45);
+        case 26:
           props.projectActions.redo();
-          return _context1.abrupt("continue", 35);
-        case 25:
+          return _context11.abrupt("continue", 45);
+        case 27:
           _evt$payload7 = evt.payload, moldingInfo = _evt$payload7.moldingInfo, isGlobal = _evt$payload7.isGlobal;
-          _context1.next = 26;
+          _context11.next = 28;
           return loadMoldingSvg(moldingInfo);
-        case 26:
+        case 28:
           props.itemsActions.setMolding(moldingInfo, isGlobal);
-          return _context1.abrupt("continue", 35);
-        case 27:
+          return _context11.abrupt("continue", 45);
+        case 29:
           distElement = getElement(evt.payload, state);
           if (distElement) props.itemsActions.duplicateSelected(distElement, props.onInternalEvent);
-          return _context1.abrupt("continue", 35);
-        case 28:
+          return _context11.abrupt("continue", 45);
+        case 30:
           _distElement = getElement(evt.payload, state);
           if (_distElement) props.projectActions.remove(_distElement);
-          return _context1.abrupt("continue", 35);
-        case 29:
-          _evt$payload8 = evt.payload, option = _evt$payload8.option, _value2 = _evt$payload8.value;
-          if (option === PROJECT_SETTING_OPTION.UPDATE_CEIL_HEIGHT) {
-            props.viewer2DActions.updateCeilHeight(_value2);
-            props.viewer3DActions.update3DCeilHeight(_value2);
-          } else if (option === PROJECT_SETTING_OPTION.CHANGE_WALL_LENGTH_MEASURE) {
-            props.viewer2DActions.changeWallLengthMeasure(_value2);
-          } else if (option === PROJECT_SETTING_OPTION.CHANGE_BASE_CABINET_MEASURE) {
-            props.viewer2DActions.changeBaseCabinetMeasure(_value2);
-          } else if (option === PROJECT_SETTING_OPTION.CHANGE_WALL_CABINET_MEASURE) {
-            props.viewer2DActions.changeWallCabinetMeasure(_value2);
-          } else if (option === PROJECT_SETTING_OPTION.CHANGE_WINDOW_DOOR_MEASURE) {
-            props.viewer2DActions.changeWindowDoorMeasure(_value2);
-          }
-          return _context1.abrupt("continue", 35);
-        case 30:
-          _layerId = state.getIn(['scene', 'selectedLayer']);
-          layer = state.getIn(['scene', 'layers', _layerId]);
-          _layer$getIn = layer.getIn(['selected']), selectedLines = _layer$getIn.lines, selectedHoles = _layer$getIn.holes, selectedItems = _layer$getIn.items;
-          for (_i4 = 0; _i4 < selectedLines.size; _i4++) (evt === null || evt === void 0 ? void 0 : evt.type) === EXTERNAL_EVENT_UPDATE_ATTRIBUTE ? updateAttributeOfSelectedElement(layer.getIn(['lines', selectedLines.get(_i4)]), evt.payload, state, layer, props.catalog, props.projectActions, evt.callback) : updatePropertyOfSelectedElement(layer.getIn(['lines', selectedLines.get(_i4)]), evt.payload, props.catalog, props.projectActions, evt.callback);
-          for (_i5 = 0; _i5 < selectedHoles.size; _i5++) (evt === null || evt === void 0 ? void 0 : evt.type) === EXTERNAL_EVENT_UPDATE_ATTRIBUTE ? updateAttributeOfSelectedElement(layer.getIn(['holes', selectedHoles.get(_i5)]), evt.payload, state, layer, props.catalog, props.projectActions, evt.callback) : updatePropertyOfSelectedElement(layer.getIn(['holes', selectedHoles.get(_i5)]), evt.payload, props.catalog, props.projectActions, evt.callback);
-          for (_i6 = 0; _i6 < selectedItems.size; _i6++) (evt === null || evt === void 0 ? void 0 : evt.type) === EXTERNAL_EVENT_UPDATE_ATTRIBUTE ? updateAttributeOfSelectedElement(layer.getIn(['items', selectedItems.get(_i6)]), evt.payload, state, layer, props.catalog, props.projectActions, evt.callback) : updatePropertyOfSelectedElement(layer.getIn(['items', selectedItems.get(_i6)]), evt.payload, props.catalog, props.projectActions, evt.callback);
-          return _context1.abrupt("continue", 35);
+          return _context11.abrupt("continue", 45);
         case 31:
+          _evt$payload8 = evt.payload, option = _evt$payload8.option, _value2 = _evt$payload8.value;
+          _t6 = option;
+          _context11.next = _t6 === PROJECT_SETTING_OPTION.CHANGE_MEASUREMENT_UNIT ? 32 : _t6 === PROJECT_SETTING_OPTION.UPDATE_CEIL_HEIGHT ? 33 : _t6 === PROJECT_SETTING_OPTION.CHANGE_WALL_LENGTH_MEASURE ? 34 : _t6 === PROJECT_SETTING_OPTION.CHANGE_BASE_CABINET_MEASURE ? 35 : _t6 === PROJECT_SETTING_OPTION.CHANGE_WALL_CABINET_MEASURE ? 36 : _t6 === PROJECT_SETTING_OPTION.CHANGE_WINDOW_DOOR_MEASURE ? 37 : 38;
+          break;
+        case 32:
+          props.viewer2DActions.updateCeilHeight(convert(layer.ceilHeight).from(layer.unit).to(_value2));
+          props.viewer2DActions.updateCeilHeightUnit(_value2);
+          props.viewer3DActions.update3DCeilHeightUnit(_value2);
+          props.viewer3DActions.update3DCeilHeight(convert(layer.ceilHeight).from(layer.unit).to(_value2));
+          return _context11.abrupt("continue", 39);
+        case 33:
+          props.viewer2DActions.updateCeilHeight(_value2);
+          props.viewer3DActions.update3DCeilHeight(_value2);
+          return _context11.abrupt("continue", 39);
+        case 34:
+          props.viewer2DActions.changeWallLengthMeasure(_value2);
+          return _context11.abrupt("continue", 39);
+        case 35:
+          props.viewer2DActions.changeBaseCabinetMeasure(_value2);
+          return _context11.abrupt("continue", 39);
+        case 36:
+          props.viewer2DActions.changeWallCabinetMeasure(_value2);
+          return _context11.abrupt("continue", 39);
+        case 37:
+          props.viewer2DActions.changeWindowDoorMeasure(_value2);
+          return _context11.abrupt("continue", 39);
+        case 38:
+          return _context11.abrupt("continue", 39);
+        case 39:
+          return _context11.abrupt("continue", 45);
+        case 40:
+          _layerId2 = state.getIn(['scene', 'selectedLayer']);
+          _layer = state.getIn(['scene', 'layers', _layerId2]);
+          _layer$getIn = _layer.getIn(['selected']), selectedLines = _layer$getIn.lines, selectedHoles = _layer$getIn.holes, selectedItems = _layer$getIn.items;
+          for (_i4 = 0; _i4 < selectedLines.size; _i4++) (evt === null || evt === void 0 ? void 0 : evt.type) === EXTERNAL_EVENT_UPDATE_ATTRIBUTE ? updateAttributeOfSelectedElement(_layer.getIn(['lines', selectedLines.get(_i4)]), evt.payload, state, _layer, props.catalog, props.projectActions, evt.callback) : updatePropertyOfSelectedElement(_layer.getIn(['lines', selectedLines.get(_i4)]), evt.payload, props.catalog, props.projectActions, evt.callback);
+          for (_i5 = 0; _i5 < selectedHoles.size; _i5++) (evt === null || evt === void 0 ? void 0 : evt.type) === EXTERNAL_EVENT_UPDATE_ATTRIBUTE ? updateAttributeOfSelectedElement(_layer.getIn(['holes', selectedHoles.get(_i5)]), evt.payload, state, _layer, props.catalog, props.projectActions, evt.callback) : updatePropertyOfSelectedElement(_layer.getIn(['holes', selectedHoles.get(_i5)]), evt.payload, props.catalog, props.projectActions, evt.callback);
+          for (_i6 = 0; _i6 < selectedItems.size; _i6++) (evt === null || evt === void 0 ? void 0 : evt.type) === EXTERNAL_EVENT_UPDATE_ATTRIBUTE ? updateAttributeOfSelectedElement(_layer.getIn(['items', selectedItems.get(_i6)]), evt.payload, state, _layer, props.catalog, props.projectActions, evt.callback) : updatePropertyOfSelectedElement(_layer.getIn(['items', selectedItems.get(_i6)]), evt.payload, props.catalog, props.projectActions, evt.callback);
+          return _context11.abrupt("continue", 45);
+        case 41:
           _layerID = state.scene.selectedLayer;
-          _layer = state.scene.getIn(['layers', _layerID]).toJS();
+          _layer2 = state.scene.getIn(['layers', _layerID]).toJS();
           orginalItemInfo = evt === null || evt === void 0 || (_evt$payload9 = evt.payload) === null || _evt$payload9 === void 0 ? void 0 : _evt$payload9.orginalItemInfo;
-          originalItem = _layer === null || _layer === void 0 ? void 0 : _layer.items[orginalItemInfo.id];
-          _context1.next = 32;
+          originalItem = _layer2 === null || _layer2 === void 0 ? void 0 : _layer2.items[orginalItemInfo.id];
+          _context11.next = 42;
           return addItemToCatalog(evt.payload.replaceItemInfo, state, props.catalog, props.projectActions);
-        case 32:
+        case 42:
           originalItemPos = {
             rotation: originalItem.rotation,
             selectedItemId: originalItem.id,
@@ -1380,23 +1596,27 @@ function _handleExternalEvent() {
             }
           };
           props.itemsActions.replaceItem(originalItemPos, originalItem, replaceItem);
-          return _context1.abrupt("continue", 35);
-        case 33:
+          return _context11.abrupt("continue", 45);
+        case 43:
           setFinishing(props, state, evt.payload);
-        case 34:
+          return _context11.abrupt("continue", 45);
+        case 44:
+          sceneData = state.scene.toJS(); // get molding data for "ReviewForQuote"
+          currentTexture = layer.doorStyle !== null || layer.doorStyle !== undefined ? layer.doorStyle : props.state.doorStyle.toJS();
+          sceneData.layers[layerId].moldingData = getMoldingDataOfScene2(layer, props.catalog, currentTexture);
           // send scene object from 3DTool to HostApp using internalEvent
           (_props$onInternalEven3 = props.onInternalEvent) === null || _props$onInternalEven3 === void 0 || _props$onInternalEven3.call(props, {
             type: INTERNAL_EVENT_SYNC_SCENE,
             value: {
-              scene: state.scene.toJS()
+              scene: sceneData
             }
           });
-          return _context1.abrupt("continue", 35);
-        case 35:
+          return _context11.abrupt("continue", 45);
+        case 45:
         case "end":
-          return _context1.stop();
+          return _context11.stop();
       }
-    }, _callee9);
+    }, _callee0);
   }));
   return _handleExternalEvent.apply(this, arguments);
 }