kitchen-simulator 4.0.0-queuedEvents → 4.0.0

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

@@ -1,228 +1,1606 @@
+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";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _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 { fromJS, List, Map, Record } 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, TOP, BOTTOM, LEFT, RIGHT, EXTERNAL_EVENT_NEW_PROJECT, EXTERNAL_EVENT_CHANGE_DOORSTYLE, EXTERNAL_EVENT_SET_INITIAL_DATA, EXTERNAL_EVENT_ADD_ROOM_SHAPE, EXTERNAL_EVENT_ZOOM_IN, EXTERNAL_EVENT_ZOOM_OUT, ZOOM_VARIABLE } from "../constants";
-import { isEmpty } from "./helper";
+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, EXTERNAL_EVENT_ROTATE_PAN } from "../constants";
+import { isEmpty, updateViwer2D, centering2D } from "./helper";
 import exporter from "../catalog/utils/exporter";
-import { render2DItem, render3DItem } from "../catalog/utils/item-loader";
-import Catalog from "../catalog/catalog";
-import { CatalogElement, safeLoadMapList } from "../models";
-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) {
+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 { 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 _callee3(path) {
+    var p;
+    return _regeneratorRuntime.wrap(function (_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
         case 0:
-          if (item.outline) {
-            _context.next = 1;
+          if (path) {
+            _context3.next = 1;
             break;
           }
-          return _context.abrupt("return", null);
+          return _context3.abrupt("return", null);
         case 1:
-          _context.prev = 1;
-          _context.next = 2;
-          return fetch(item.outline, {
-            cache: 'no-store'
+          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);
+              }
+            };
+            xhr.open('GET', path, true);
+            xhr.send();
           });
+          __jsonCache.set(path, p);
+          return _context3.abrupt("return", p);
+        case 3:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  }));
+  return _loadJSON.apply(this, arguments);
+}
+function parseTempPlaceholdersFromCabinetPayload(_x2) {
+  return _parseTempPlaceholdersFromCabinetPayload.apply(this, arguments);
+}
+/***** Update cabinetPayloadData with updatedTempPlaceholders *****/
+function _parseTempPlaceholdersFromCabinetPayload() {
+  _parseTempPlaceholdersFromCabinetPayload = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4(cabinetPayload) {
+    var link, keys, temp, i, _cabinetPayload$struc, _cabinetPayload$struc2, tempPlaceholdersData, k, _cabinetPayload$struc3, el, tempData, doorKey, drawerKey, fixedKey, doorPHs, drawerPHs, has_single_door, fixedPHs, _t2, _t3, _t4;
+    return _regeneratorRuntime.wrap(function (_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          link = '';
+          keys = Object.keys(cabinetPayload.structure_json);
+          temp = [];
+          i = 0;
+        case 1:
+          if (!(i < keys.length)) {
+            _context4.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'))) {
+            _context4.next = 3;
+            break;
+          }
+          link = cabinetPayload.structure_json[keys[i]];
+          _t2 = temp;
+          _t3 = keys[i];
+          _context4.next = 2;
+          return loadJSON(link);
         case 2:
-          response = _context.sent;
-          _context.next = 3;
-          return response.text();
+          _t4 = _context4.sent;
+          _t2.push.call(_t2, {
+            name: _t3,
+            data: _t4
+          });
         case 3:
-          svgText = _context.sent;
-          loader = new SVGLoader();
-          parsed = loader.parse(svgText);
-          if (!isEmpty(parsed.paths)) {
-            _context.next = 4;
+          i++;
+          _context4.next = 1;
+          break;
+        case 4:
+          tempPlaceholdersData = [];
+          for (k = 0; 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); k++) {
+            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 = [];
+              }
+              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$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[0]) !== null && _cabinetPayload$struc4 !== void 0 && _cabinetPayload$struc4.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++;
+                      }
+                    }
+                  });
+                } 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 _loop3 = function _loop3() {
+                      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++) {
+                      _loop3();
+                    }
+                  } 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 _loop4 = function _loop4() {
+                      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++) {
+                      _loop4();
+                    }
+                  } 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[0].structure
+            });
+          }
+          return _context4.abrupt("return", tempPlaceholdersData);
+        case 5:
+        case "end":
+          return _context4.stop();
+      }
+    }, _callee4);
+  }));
+  return _parseTempPlaceholdersFromCabinetPayload.apply(this, arguments);
+}
+function updateCabinetPayload(_x3) {
+  return _updateCabinetPayload.apply(this, arguments);
+}
+function _updateCabinetPayload() {
+  _updateCabinetPayload = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee5(cabinetPayload) {
+    var cabinetPayloadKeys, i, _cabinetPayload$cabin, _cabinetPayload$cabin2;
+    return _regeneratorRuntime.wrap(function (_context5) {
+      while (1) switch (_context5.prev = _context5.next) {
+        case 0:
+          // 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'] = (_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 _context5.abrupt("return", cabinetPayload);
+        case 1:
+        case "end":
+          return _context5.stop();
+      }
+    }, _callee5);
+  }));
+  return _updateCabinetPayload.apply(this, arguments);
+}
+var loadSVGsByItem = /*#__PURE__*/function () {
+  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 !== null && item !== void 0 && item.outline) {
+            _context2.next = 1;
+            break;
+          }
+          return _context2.abrupt("return", null);
+        case 1:
+          url = item.outline;
+          if (!__svgCache.has(url)) {
+            _context2.next = 2;
+            break;
+          }
+          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 _context2.stop();
+      }
+    }, _callee2);
+  }));
+  return function loadSVGsByItem(_x4) {
+    return _ref.apply(this, arguments);
+  };
+}();
+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 _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 (_context6) {
+      while (1) switch (_context6.prev = _context6.next) {
+        case 0:
+          if (!isEmpty(element === null || element === void 0 ? void 0 : element.name)) {
+            _context6.next = 1;
+            break;
+          }
+          return _context6.abrupt("return");
+        case 1:
+          // clone element
+          elementJs = Object.assign({}, element); // if (isEmpty(catalog?.elements[element.name])) {
+          _context6.next = 2;
+          return loadSVGsByItem(elementJs);
+        case 2:
+          outlineSVGData = _context6.sent;
+          if (!(((_elementJs = elementJs) === null || _elementJs === void 0 ? void 0 : _elementJs.type) === 'cabinet')) {
+            _context6.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({}, 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({}, elementJs.customer_property)],
+              itemID: elementJs.itemID
+            }
+          });
+          if (isEmpty((_elementJs$structure_3 = elementJs.structure_json) === null || _elementJs$structure_3 === void 0 ? void 0 : _elementJs$structure_3.tempPlaceholders)) {
+            _context6.next = 4;
             break;
           }
-          return _context.abrupt("return", null);
+          _context6.next = 3;
+          return updateCabinetPayload(elementJs);
+        case 3:
+          elementJs = _context6.sent;
         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'))
+          elementJs = _objectSpread(_objectSpread({}, elementJs), {}, {
+            outlineSVGData: outlineSVGData,
+            type: elementJs.type,
+            render2DItem: render2DItem
           });
+          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:
-          _context.prev = 5;
-          _t = _context["catch"](1);
-          console.error('Failed to load SVG:', item.outline, _t);
-          return _context.abrupt("return", null);
+          if (!(k < catalogElementKeys.length)) {
+            _context6.next = 7;
+            break;
+          }
+          if (!(((_catalogElements$cata = catalogElements[catalogElementKeys[k]]) === null || _catalogElements$cata === void 0 ? void 0 : _catalogElements$cata.itemID) === elementJs.itemID)) {
+            _context6.next = 6;
+            break;
+          }
+          catalogItem = catalogElements[catalogElementKeys[k]];
+          return _context6.abrupt("continue", 7);
         case 6:
+          k++;
+          _context6.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 8:
         case "end":
-          return _context.stop();
+          return _context6.stop();
       }
-    }, _callee, null, [[1, 5]]);
+    }, _callee6);
   }));
-  return function loadSVGsByItem(_x) {
-    return _ref.apply(this, arguments);
+  return _addItemToCatalog.apply(this, arguments);
+}
+function initAttrData(element, layer, state) {
+  element = _typeof(element.misc) === 'object' ? element.set('misc', new Map(element.misc)) : element;
+  switch (element.prototype) {
+    case 'items':
+      {
+        return new Map(element);
+      }
+    case 'lines':
+      {
+        var v_a = layer.vertices.get(element.vertices.get(0));
+        var v_b = layer.vertices.get(element.vertices.get(1));
+        var distance = GeometryUtils.pointsDistance(v_a.x, v_a.y, v_b.x, v_b.y);
+        var _unit = element.misc.get('_unitLength') || UNIT_INCH;
+        var _length = convert(distance).from(UNIT_CENTIMETER).to(_unit);
+        if (state.mode == MODE_DRAWING_LINE) {
+          return new Map({
+            vertexOne: v_a,
+            vertexTwo: v_b,
+            lineLength: new Map({
+              length: distance,
+              _length: _length,
+              _unit: _unit
+            }),
+            focus: element.focus
+          });
+        } else {
+          var allLines = layer.lines.toArray();
+          var relatedLine = allLines.filter(function (line) {
+            return line.vertices.toArray().includes(v_b.id) && line.id != element.id;
+          })[0];
+          var relatedVertexID = relatedLine && (relatedLine.vertices.toArray()[0] == v_b.id ? relatedLine.vertices.toArray()[1] : relatedLine.vertices.toArray()[0]);
+          var v_d = relatedVertexID && layer.getIn(['vertices', relatedVertexID]);
+          var lineToExtend = relatedVertexID && allLines.filter(function (line) {
+            return line.vertices.toArray().includes(relatedVertexID) && line.id != relatedLine.id;
+          })[0];
+          var v_c = lineToExtend && layer.getIn(['vertices', lineToExtend.vertices.toArray()[0] == v_d.id ? lineToExtend.vertices.toArray()[1] : lineToExtend.vertices.toArray()[0]]);
+          return new Map({
+            vertexOne: v_a,
+            vertexTwo: v_b,
+            vertexThree: v_c,
+            vertexFour: v_d,
+            lineToExtend: lineToExtend,
+            lineLength: new Map({
+              length: distance,
+              _length: _length,
+              _unit: _unit
+            }),
+            focus: element.focus
+          });
+        }
+      }
+    case 'holes':
+      {
+        var line = layer.lines.get(element.line);
+        var _layer$vertices$get = layer.vertices.get(line.vertices.get(0)),
+          x0 = _layer$vertices$get.x,
+          y0 = _layer$vertices$get.y;
+        var _layer$vertices$get2 = layer.vertices.get(line.vertices.get(1)),
+          x1 = _layer$vertices$get2.x,
+          y1 = _layer$vertices$get2.y;
+        var lineLength = GeometryUtils.pointsDistance(x0, y0, x1, y1);
+        var startAt = lineLength * element.offset - element.properties.get('width').get('length') / 2;
+        var endAt = lineLength - lineLength * element.offset - element.properties.get('width').get('length') / 2;
+        var _unitA = element.misc.get('_unitA') || UNIT_INCH;
+        var _lengthA = convert(x0 > x1 ? endAt : startAt).from(UNIT_CENTIMETER).to(_unitA);
+        var _unitB = element.misc.get('_unitB') || UNIT_INCH;
+        var _lengthB = convert(x0 > x1 ? startAt : endAt).from(UNIT_CENTIMETER).to(_unitB);
+        return new Map({
+          offset: element.offset,
+          offsetA: new Map({
+            length: MathUtils.toFixedFloat(x0 > x1 ? endAt : startAt, PRECISION),
+            _length: MathUtils.toFixedFloat(_lengthA, PRECISION),
+            _unit: _unitA
+          }),
+          offsetB: new Map({
+            length: MathUtils.toFixedFloat(x0 > x1 ? startAt : endAt, PRECISION),
+            _length: MathUtils.toFixedFloat(_lengthB, PRECISION),
+            _unit: _unitB
+          })
+        });
+      }
+    case 'areas':
+      {
+        return new Map({});
+      }
+    default:
+      return null;
+  }
+}
+// Get properties of current selected element
+function initPropData(element, catalog) {
+  var mapped = {};
+  if (!catalog.elements.hasOwnProperty(element.type) && !(!catalog.elements[element.type] && !!catalog.elements[returnReplaceableDeepSearchType(element.type)])) {
+    console.log("Last Selected ".concat(element.type, " Element does not exist in catalog."));
+    return new Map(mapped);
+  }
+  var catalogElement = catalog.getElement(element.type);
+  var isFiller = catalogElement.long_name ? catalogElement.long_name.toUpperCase().includes('FILLER') : false;
+  if (isFiller) {
+    var height = {
+      defaultValue: element.properties.get('height').toJS(),
+      label: 'Height',
+      type: 'length-measure'
+    };
+    var depth = {
+      defaultValue: element.properties.get('depth').toJS(),
+      label: 'Depth',
+      type: 'length-measure'
+    };
+    catalogElement.properties = {
+      altitude: catalogElement.properties.altitude,
+      width: catalogElement.properties.width,
+      height: height,
+      depth: depth,
+      flip_doorhandle: catalogElement.properties.flip_doorhandle,
+      resize_and_scaling: catalogElement.properties.resize_and_scaling
+    };
+  }
+  for (var name in catalogElement.properties) {
+    mapped[name] = new Map({
+      currentValue: element.properties.has(name) ? element.properties.get(name) : fromJS(catalogElement.properties[name].defaultValue),
+      configs: catalogElement.properties[name]
+    });
+  }
+  return new Map(mapped);
+}
+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;
+  // pre process
+  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(layerUnit).to('cm');
+    var newY = element.y + convert((value.oldDistance - value.newDistance) * Math.sin(rotRad)).from(layerUnit).to('cm');
+    value = {
+      x: newX,
+      y: newY
+    };
+  } else if (attributeName === ATT_LINE_LENGTH || attributeName === ATT_HOLE_OFFSET_A || attributeName === ATT_HOLE_OFFSET_B) {
+    var att = attributesFormData.has(attributeName) ? attributesFormData.get(attributeName) : element[attributeName];
+    if (att) value = att.merge({
+      _length: value,
+      _unit: layerUnit,
+      length: convert(value).from(layerUnit).to(UNIT_CENTIMETER)
+    });
+  }
+  // make the new attrivutes
+  switch (element.prototype) {
+    case 'items':
+      {
+        if (attributeName == ATT_ITEM_POS) {
+          var xVal = value.x;
+          var yVal = value.y;
+          attributesFormData = attributesFormData.set('x', xVal);
+          attributesFormData = attributesFormData.set('y', yVal);
+        } else {
+          attributesFormData = attributesFormData.set(attributeName, value);
+        }
+        // update the distances from wall
+        var _GeometryUtils$calcDi = GeometryUtils.calcDistancesFromItemToWalls(attributesFormData, layer),
+          PointArray = _GeometryUtils$calcDi.PointArray;
+        attributesFormData = attributesFormData.set('distArray', PointArray);
+        break;
+      }
+    case 'lines':
+      {
+        switch (attributeName) {
+          case ATT_LINE_LENGTH:
+            {
+              var v_0 = attributesFormData.get('vertexOne');
+              var v_1 = attributesFormData.get('vertexTwo');
+              var v_b_new = GeometryUtils.extendLine(v_0.x, v_0.y, v_1.x, v_1.y, value.get('length'), PRECISION);
+              attributesFormData = attributesFormData.withMutations(function (attr) {
+                attr.set('vertexTwo', v_1.merge(v_b_new));
+                attr.set('lineLength', value);
+              });
+              break;
+            }
+          case ATT_VERTEXT_ONE:
+          case ATT_VERTEXT_TWO:
+            {
+              attributesFormData = attributesFormData.withMutations(function (attr) {
+                attr.set(attributeName, attr.get(attributeName).merge(value));
+                var newDistance = GeometryUtils.verticesDistance(attr.get('vertexOne'), attr.get('vertexTwo'));
+                attr.mergeIn(['lineLength'], attr.get('lineLength').merge({
+                  length: newDistance,
+                  _length: convert(newDistance).from(UNIT_CENTIMETER).to(attr.get('lineLength').get('_unit'))
+                }));
+              });
+              break;
+            }
+          default:
+            {
+              attributesFormData = attributesFormData.set(attributeName, value);
+              break;
+            }
+        }
+        break;
+      }
+    case 'holes':
+      {
+        switch (attributeName) {
+          case ATT_HOLE_OFFSET_A:
+            {
+              var line = layer.lines.get(element.line);
+              var _layer$vertices$get3 = layer.vertices.get(line.vertices.get(0)),
+                x0 = _layer$vertices$get3.x,
+                y0 = _layer$vertices$get3.y;
+              var _layer$vertices$get4 = layer.vertices.get(line.vertices.get(1)),
+                x1 = _layer$vertices$get4.x,
+                y1 = _layer$vertices$get4.y;
+              var alpha = GeometryUtils.angleBetweenTwoPoints(x0, y0, x1, y1);
+              var lineLength = GeometryUtils.pointsDistance(x0, y0, x1, y1);
+              var widthLength = element.properties.get('width').get('length');
+              var halfWidthLength = widthLength / 2;
+              var lengthValue = value.get('length');
+              lengthValue = Math.max(lengthValue, 0);
+              lengthValue = Math.min(lengthValue, lineLength - widthLength);
+              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;
+              */
+              var endAt = MathUtils.toFixedFloat(lineLength - lineLength * offset - halfWidthLength, PRECISION);
+              var offsetUnit = attributesFormData.getIn(['offsetB', '_unit']);
+              var offsetB = new Map({
+                length: endAt,
+                _length: convert(endAt).from(UNIT_CENTIMETER).to(offsetUnit),
+                _unit: offsetUnit
+              });
+              attributesFormData = attributesFormData.set('offsetB', offsetB).set('offset', offset);
+              var offsetAttribute = new Map({
+                length: MathUtils.toFixedFloat(lengthValue, PRECISION),
+                _unit: value.get('_unit'),
+                _length: MathUtils.toFixedFloat(convert(lengthValue).from(UNIT_CENTIMETER).to(value.get('_unit')), PRECISION)
+              });
+              attributesFormData = attributesFormData.set(attributeName, offsetAttribute);
+              break;
+            }
+          case ATT_HOLE_OFFSET_B:
+            {
+              var _line = layer.lines.get(element.line);
+              var _layer$vertices$get5 = layer.vertices.get(_line.vertices.get(0)),
+                _x9 = _layer$vertices$get5.x,
+                _y = _layer$vertices$get5.y;
+              var _layer$vertices$get6 = layer.vertices.get(_line.vertices.get(1)),
+                _x0 = _layer$vertices$get6.x,
+                _y2 = _layer$vertices$get6.y;
+              var _alpha = GeometryUtils.angleBetweenTwoPoints(_x9, _y, _x0, _y2);
+              var _lineLength = GeometryUtils.pointsDistance(_x9, _y, _x0, _y2);
+              var _widthLength = element.properties.get('width').get('length');
+              var _halfWidthLength = _widthLength / 2;
+              var _lengthValue = value.get('length');
+              _lengthValue = Math.max(_lengthValue, 0);
+              _lengthValue = Math.min(_lengthValue, _lineLength - _widthLength);
+              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;
+              */
+              var startAt = MathUtils.toFixedFloat(_lineLength * _offset - _halfWidthLength, PRECISION);
+              var _offsetUnit = attributesFormData.getIn(['offsetA', '_unit']);
+              var offsetA = new Map({
+                length: startAt,
+                _length: convert(startAt).from(UNIT_CENTIMETER).to(_offsetUnit),
+                _unit: _offsetUnit
+              });
+              attributesFormData = attributesFormData.set('offsetA', offsetA).set('offset', _offset);
+              var _offsetAttribute = new Map({
+                length: MathUtils.toFixedFloat(_lengthValue, PRECISION),
+                _unit: value.get('_unit'),
+                _length: MathUtils.toFixedFloat(convert(_lengthValue).from(UNIT_CENTIMETER).to(value.get('_unit')), PRECISION)
+              });
+              attributesFormData = attributesFormData.set(attributeName, _offsetAttribute);
+              break;
+            }
+          default:
+            {
+              attributesFormData = attributesFormData.set(attributeName, value);
+              break;
+            }
+        }
+        break;
+      }
+    default:
+      break;
+  }
+
+  // update attribute action
+  switch (element.prototype) {
+    case 'items':
+      {
+        projectActions.setItemsAttributes(attributesFormData);
+        break;
+      }
+    case 'lines':
+      {
+        projectActions.setLinesAttributes(attributesFormData);
+        break;
+      }
+    case 'holes':
+      {
+        projectActions.setHolesAttributes(attributesFormData);
+        break;
+      }
+  }
+
+  // invoke callback
+  if (callback) callback((_attributesFormData = attributesFormData) === null || _attributesFormData === void 0 ? void 0 : _attributesFormData.toJS());
+}
+function updatePropertyOfSelectedElement(element, propertyPayload, catalog,
+// class instance of Catalog, get from props
+projectActions) {
+  var _propertiesFormData;
+  var callback = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
+  var propertiesFormData = initPropData(element, catalog);
+  var value = propertyPayload.value;
+  var propertyName = propertyPayload.propertyName;
+  // make new properties
+  if (propertyName === PROP_FLIP_DOOR_HANDLE && element.properties.get(PROP_OPEN_DOORS)) {
+    alert('Doors are already open.');
+    return;
+  }
+  propertiesFormData = propertiesFormData.setIn([propertyName, 'currentValue'], value);
+
+  // update property action
+  if (propertiesFormData) {
+    var properties = propertiesFormData.map(function (data) {
+      return data.get('currentValue');
+    });
+    projectActions.setProperties(properties);
+  }
+
+  // invoke callback
+  if (callback) callback((_propertiesFormData = propertiesFormData) === null || _propertiesFormData === void 0 ? void 0 : _propertiesFormData.toJS());
+}
+function getElement(objProps, state) {
+  var layerID = state.scene.selectedLayer;
+  var curObject = null;
+  if (!isEmpty(objProps === null || objProps === void 0 ? void 0 : objProps.elementPrototype) && !isEmpty(objProps === null || objProps === void 0 ? void 0 : objProps.elementId)) curObject = state.getIn(['scene', 'layers', layerID, objProps.elementPrototype, objProps.elementId]);else {
+    // if no specified object property then get the first selected element
+    var layer = state.scene.layers.get(state.scene.selectedLayer);
+    var selected = [];
+    layer.selected.forEach(function (data, prototype) {
+      if (prototype == 'vertices') return;
+      if (data.size > 0) {
+        var values = data.toJS();
+        for (var i = 0; i < values.length; i++) {
+          selected.push({
+            type: prototype,
+            id: values[i]
+          });
+        }
+      }
+    });
+    if (selected.length === 1) {
+      var selData = selected[0];
+      switch (selData.type) {
+        case ELEMENT_HOLE:
+          curObject = layer.holes.get(selData.id);
+          break;
+        case ELEMENT_ITEM:
+          curObject = layer.items.get(selData.id);
+          break;
+        case ELEMENT_LINE:
+          curObject = layer.lines.get(selData.id);
+          break;
+      }
+    }
+  }
+  return curObject;
+}
+function loadMoldingSvg(_x1) {
+  return _loadMoldingSvg.apply(this, arguments);
+}
+function _loadMoldingSvg() {
+  _loadMoldingSvg = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee7(molding) {
+    return _regeneratorRuntime.wrap(function (_context7) {
+      while (1) switch (_context7.prev = _context7.next) {
+        case 0:
+          return _context7.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
+              return resolve();
+            }
+            var loader = new SVGLoader();
+            loader.load(url, function (data) {
+              var _data$xml$viewBox$ani, _data$xml, _data$xml$viewBox$ani2, _data$xml2;
+              molding.data = {
+                paths: data.paths,
+                svg_width: (_data$xml$viewBox$ani = (_data$xml = data.xml) === null || _data$xml === void 0 || (_data$xml = _data$xml.viewBox) === null || _data$xml === void 0 || (_data$xml = _data$xml.animVal) === null || _data$xml === void 0 ? void 0 : _data$xml.width) !== null && _data$xml$viewBox$ani !== void 0 ? _data$xml$viewBox$ani : 0,
+                svg_height: (_data$xml$viewBox$ani2 = (_data$xml2 = data.xml) === null || _data$xml2 === void 0 || (_data$xml2 = _data$xml2.viewBox) === null || _data$xml2 === void 0 || (_data$xml2 = _data$xml2.animVal) === null || _data$xml2 === void 0 ? void 0 : _data$xml2.height) !== null && _data$xml$viewBox$ani2 !== void 0 ? _data$xml$viewBox$ani2 : 0
+              };
+              resolve();
+            }, null, function (error) {
+              console.error(error);
+              reject(error);
+            });
+          }));
+        case 1:
+        case "end":
+          return _context7.stop();
+      }
+    }, _callee7);
+  }));
+  return _loadMoldingSvg.apply(this, arguments);
+}
+function setFinishing(props, state, payload) {
+  switch (payload.category) {
+    case FINISHING_TYPE.WALL_COLOR:
+      if (state.mode !== MODE_ELEVATION_VIEW) props.itemsActions.setWallColor(payload.color);
+      break;
+    case FINISHING_TYPE.COUNTER_TOP:
+      props.itemsActions.setCounterTop({
+        uri: payload.texture
+      });
+      break;
+    case FINISHING_TYPE.FLOOR_STYLE:
+      if (state.mode !== MODE_ELEVATION_VIEW) props.areaActions.setFloorStyles({
+        uri: payload.texture
+      });
+      break;
+    case FINISHING_TYPE.BACKSPLASH:
+      if (state.mode !== MODE_ELEVATION_VIEW) props.itemsActions.setBacksplash({
+        uri: payload.texture
+      });
+      break;
+    case FINISHING_TYPE.DOOR_HANDLE:
+      props.itemsActions.setDoorHandle(payload.gltf);
+      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;
+      }
+    }
+  } else if (eventType === EXTERNAL_EVENT_ROTATE_PAN) {
+    var rotateType = payload.rotateType;
+    switch (rotateType) {
+      case TOP:
+        window.interval = setTimeout(function () {
+          window.SPKeyDown({
+            keyCode: 87
+          });
+        }, 50);
+        break;
+      case BOTTOM:
+        window.interval = setTimeout(function () {
+          window.SPKeyDown({
+            keyCode: 83
+          });
+        }, 50);
+        break;
+      case RIGHT:
+        window.interval = setTimeout(function () {
+          window.SPKeyDown({
+            keyCode: 68
+          });
+        }, 50);
+        break;
+      case LEFT:
+        window.interval = setTimeout(function () {
+          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);
+      }
+    }
   };
-}();
-var compareSVGRect = function compareSVGRect(value) {
-  return value.e <= 10 && value.e + value.a * value.SVGWidth + 10 >= value.viewerWidth && value.f <= 80 && value.f + value.d * value.SVGHeight + 10 >= value.viewerHeight ? true : false;
-};
-export function handleExternalEvent(_x2) {
+  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 _callee2(props) {
-    var evt, state, sLineCnt, element, catalog, outlineSVGData, catalogInstance, elementJs, _evt$payload, moveType, moveValue, value, defaulTitle, _evt$payload2, doorStyle, isAll, _doorStyle, _value, _zoomValue, _value2, _zoomValue2, _t2, _t3;
-    return _regeneratorRuntime.wrap(function (_context2) {
-      while (1) switch (_context2.prev = _context2.next) {
+  _handleExternalEvent = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee0(props) {
+    var _evt$payload3, _evt$payload4;
+    var evt, state, layerId, layer, _evt$payload, cdsItems, itemKeys, _loop5, 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, _loop6, _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 (_context10) {
+      while (1) switch (_context10.prev = _context10.next) {
         case 0:
+          // console.log('***external event****', props);
           evt = props.externalEvent;
-          state = props.state.get('KitchenConfigurator');
-          _t2 = evt === null || evt === void 0 ? void 0 : evt.type;
-          _context2.next = _t2 === EXTERNAL_EVENT_TOGGLE_TO_3D ? 1 : _t2 === EXTERNAL_EVENT_TOGGLE_TO_2D ? 2 : _t2 === EXTERNAL_EVENT_TOGGLE_TO_ELEVATION ? 3 : _t2 === EXTERNAL_EVENT_ADD_WALL ? 4 : _t2 === EXTERNAL_EVENT_ADD_ITEM ? 5 : _t2 === EXTERNAL_EVENT_MOVE_PAN ? 9 : _t2 === EXTERNAL_EVENT_NEW_PROJECT ? 15 : _t2 === EXTERNAL_EVENT_CHANGE_DOORSTYLE ? 16 : _t2 === EXTERNAL_EVENT_SET_INITIAL_DATA ? 17 : _t2 === EXTERNAL_EVENT_ADD_ROOM_SHAPE ? 18 : _t2 === EXTERNAL_EVENT_ZOOM_IN ? 19 : _t2 === EXTERNAL_EVENT_ZOOM_OUT ? 22 : 25;
-          break;
+          state = getPlannerStateFromProps(props);
+          if (state) {
+            _context10.next = 1;
+            break;
+          }
+          return _context10.abrupt("return");
         case 1:
-          props.projectActions.setMode(MODE_IDLE_3D);
-          return _context2.abrupt("continue", 25);
+          layerId = state.getIn(['scene', 'selectedLayer']);
+          layer = state.getIn(['scene', 'layers', layerId]);
+          _t5 = evt === null || evt === void 0 ? void 0 : evt.type;
+          _context10.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 2:
-          props.projectActions.setMode(MODE_IDLE);
-          return _context2.abrupt("continue", 25);
+          if (!(evt !== null && evt !== void 0 && evt.payload)) {
+            _context10.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) || [];
+          _loop5 = /*#__PURE__*/_regeneratorRuntime.mark(function _loop5() {
+            var _evt$payload2, _it$doorStyle2;
+            var it;
+            return _regeneratorRuntime.wrap(function (_context9) {
+              while (1) switch (_context9.prev = _context9.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]]; //////// check altitude of item property and change length from _length (convert length from 'in' fo 'cm')
+                  // if (
+                  //   it.properties.altitude.length !==
+                  //   convert(it.properties.altitude._length).from('in').to('cm')
+                  // ) {
+                  //   it.properties.altitude.length = convert(
+                  //     it.properties.altitude._length
+                  //   )
+                  //     .from('in')
+                  //     .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;
+                  })) cdsItems.push({
+                    itemID: it.itemID,
+                    prototype: it.prototype,
+                    category: it.category,
+                    name: it.name,
+                    type: it.type,
+                    sku_number: it.sku_number,
+                    cdsId: (_it$doorStyle2 = it.doorStyle) === null || _it$doorStyle2 === void 0 || (_it$doorStyle2 = _it$doorStyle2.doorStyles) === null || _it$doorStyle2 === void 0 ? void 0 : _it$doorStyle2.cabinet_door_style_id
+                  });
+                case 1:
+                case "end":
+                  return _context9.stop();
+              }
+            }, _loop5);
+          });
+          i = 0;
         case 3:
-          sLineCnt = state.getIn(['scene', 'layers', 'layer-1', 'selected', 'lines']).size;
-          if (sLineCnt > 0) props.projectActions.setMode(MODE_ELEVATION_VIEW);
-          return _context2.abrupt("continue", 25);
+          if (!(i < itemKeys.length)) {
+            _context10.next = 5;
+            break;
+          }
+          return _context10.delegateYield(_loop5(), "t0", 4);
         case 4:
+          i++;
+          _context10.next = 3;
+          break;
+        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, {
+              type: INTERNAL_EVENT_ITEMS_CATALOG,
+              value: {
+                cdsItems: cdsItems
+              }
+            }, /*#__PURE__*/function () {
+              var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee8(result) {
+                var rt, _i;
+                return _regeneratorRuntime.wrap(function (_context8) {
+                  while (1) switch (_context8.prev = _context8.next) {
+                    case 0:
+                      rt = mergeSameElements(result === null || result === void 0 ? void 0 : result.elements);
+                      _i = 0;
+                    case 1:
+                      if (!(_i < (rt === null || rt === void 0 ? void 0 : rt.length))) {
+                        _context8.next = 3;
+                        break;
+                      }
+                      _context8.next = 2;
+                      return addItemToCatalog(rt[_i], state, props.catalog, props.projectActions);
+                    case 2:
+                      _i++;
+                      _context8.next = 1;
+                      break;
+                    case 3:
+                      props.projectActions.loadProject(evt.payload);
+                    case 4:
+                    case "end":
+                      return _context8.stop();
+                  }
+                }, _callee8);
+              }));
+              return function (_x11) {
+                return _ref3.apply(this, arguments);
+              };
+            }());
+          } else props.projectActions.loadProject(evt.payload);
+        case 6:
+          return _context10.abrupt("continue", 45);
+        case 7:
+          props.projectActions.setMode(MODE_IDLE_3D);
+          return _context10.abrupt("continue", 45);
+        case 8:
+          props.projectActions.setMode(MODE_IDLE);
+          return _context10.abrupt("continue", 45);
+        case 9:
+          sLineCnt = layer.selected.lines.size;
+          if (sLineCnt > 0) props.projectActions.setMode(MODE_ELEVATION_VIEW);
+          return _context10.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 _context2.abrupt("continue", 25);
-        case 5:
+          return _context10.abrupt("continue", 45);
+        case 11:
           if (isEmpty(evt === null || evt === void 0 ? void 0 : evt.payload)) {
-            _context2.next = 8;
+            _context10.next = 13;
             break;
           }
           element = evt.payload;
-          catalog = state.getIn(['catalog']).toJS(); // add item to catalog of state
-          if (!isEmpty(catalog === null || catalog === void 0 ? void 0 : catalog.elements[element.name])) {
-            _context2.next = 7;
-            break;
-          }
-          _context2.next = 6;
-          return loadSVGsByItem(element);
-        case 6:
-          outlineSVGData = _context2.sent;
-          catalogInstance = props.catalog;
-          elementJs = exporter(_objectSpread(_objectSpread({}, element), {}, {
-            outlineSVGData: outlineSVGData,
-            type: 'cabinet',
-            render2DItem: render2DItem,
-            render3DItem: render3DItem
-          }));
-          if (catalogInstance !== null && catalogInstance !== void 0 && catalogInstance.validateElement(elementJs)) {
-            props.projectActions.addElementToCatalog(elementJs);
-          }
-        case 7:
+          _context10.next = 12;
+          return addItemToCatalog(element, state, props.catalog, props.projectActions);
+        case 12:
           // start drawing item
-          ARRAY_3D_MODES.includes(state.mode) ? props.itemsActions.selectToolDrawingItem3D(element.name) : props.itemsActions.selectToolDrawingItem(element.name);
+          if (ARRAY_3D_MODES.includes(state.mode)) {
+            // in 3d view
+            props.itemsActions.selectToolDrawingItem3D(element.name);
+          } else {
+            // in 2d view
+            // create cabinet
+            props.itemsActions.selectToolDrawingItem(element.name);
+            // mapping the initial position of client coord to viewer2D coord
+            _evt$payload$initialP = evt.payload.initialPosition, mouseX = _evt$payload$initialP.mouseX, mouseY = _evt$payload$initialP.mouseY;
+            v2d = (_state$viewer2D = state.viewer2D) === null || _state$viewer2D === void 0 ? void 0 : _state$viewer2D.toJS();
+            if (mouseX && mouseY && v2d) {
+              vPosX = (mouseX - v2d.e) / v2d.a;
+              vPosY = (mouseY - v2d.f) / v2d.d;
+              layerID = state.scene.selectedLayer; // move cabinet to initial position
+              props.itemsActions.updateDrawingItem(layerID, vPosX, -vPosY + state.scene.height, true);
+            }
+          }
           props.projectActions.pushLastSelectedCatalogElementToHistory(element);
           props.projectActions.setIsCabinetDrawing(true);
-        case 8:
-          return _context2.abrupt("continue", 25);
-        case 9:
-          _evt$payload = evt.payload, moveType = _evt$payload.moveType, moveValue = _evt$payload.moveValue;
-          value = state.getIn(['viewer2D']).toJS();
-          _t3 = moveType;
-          _context2.next = _t3 === TOP ? 10 : _t3 === BOTTOM ? 11 : _t3 === RIGHT ? 12 : _t3 === LEFT ? 13 : 14;
-          break;
-        case 10:
-          value.f -= moveValue;
-          return _context2.abrupt("continue", 14);
-        case 11:
-          value.f += moveValue;
-          return _context2.abrupt("continue", 14);
-        case 12:
-          value.e += moveValue;
-          return _context2.abrupt("continue", 14);
         case 13:
-          value.e -= moveValue;
-          return _context2.abrupt("continue", 14);
+          return _context10.abrupt("continue", 45);
         case 14:
-          if (compareSVGRect(value)) props.viewer2DActions.updateCameraView(value);
-          return _context2.abrupt("continue", 25);
+          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 _context10.abrupt("continue", 45);
         case 15:
+          moveAndRotatePan2D3D(evt.type, props, evt.payload, state);
+          return _context10.abrupt("continue", 45);
+        case 16:
           defaulTitle = 'Untitle';
           props.projectActions.newProject();
           props.projectActions.rename(defaulTitle);
-          return _context2.abrupt("continue", 25);
-        case 16:
-          _evt$payload2 = evt.payload, doorStyle = _evt$payload2.doorStyle, isAll = _evt$payload2.isAll;
-          props.itemsActions.setDoorStyle(doorStyle, isAll);
-          return _context2.abrupt("continue", 25);
+          return _context10.abrupt("continue", 45);
         case 17:
-          _doorStyle = evt.payload.doorStyle;
-          props.itemsActions.setInitialDoorStyle(_doorStyle.doorStyle, _doorStyle.oStyle);
-          return _context2.abrupt("continue", 25);
+          _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']);
+          _cdsItems = [];
+          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];
+          _loop6 = /*#__PURE__*/_regeneratorRuntime.mark(function _loop6() {
+            var _itemCDS$find;
+            var item, cdsId;
+            return _regeneratorRuntime.wrap(function (_context1) {
+              while (1) switch (_context1.prev = _context1.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 item.itemID === v.itemID && item.name === v.name && cdsId === v.cdsId;
+                  })) _cdsItems.push({
+                    itemID: item.itemID,
+                    prototype: item.prototype,
+                    category: item.category,
+                    name: item.name,
+                    type: item.type,
+                    sku_number: item.sku_number,
+                    cdsId: cdsId
+                  });
+                case 1:
+                case "end":
+                  return _context1.stop();
+              }
+            }, _loop6);
+          });
+          _i2 = 0;
         case 18:
-          props.projectActions.loadProject(evt.payload, props.categoryData);
-          return _context2.abrupt("continue", 25);
-        case 19:
-          _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;
-          _zoomValue = parseInt((_value.a - 0.5) / ZOOM_VARIABLE);
-          if (!(_zoomValue > 404)) {
-            _context2.next = 20;
+          if (!(_i2 < _itemKeys.length)) {
+            _context10.next = 20;
             break;
           }
-          return _context2.abrupt("return");
+          return _context10.delegateYield(_loop6(), "t1", 19);
+        case 19:
+          _i2++;
+          _context10.next = 18;
+          break;
         case 20:
-          if (!(_zoomValue < 35 || Number.isNaN(_zoomValue))) {
-            _context2.next = 21;
-            break;
-          }
-          return _context2.abrupt("return");
+          // request item catalog data to host app
+          if (_cdsItems.length > 0) {
+            (_props$onInternalEven2 = props.onInternalEvent) === null || _props$onInternalEven2 === void 0 || _props$onInternalEven2.call(props, {
+              type: INTERNAL_EVENT_ITEMS_CATALOG,
+              value: {
+                cdsItems: _cdsItems
+              }
+            }, /*#__PURE__*/function () {
+              var _ref4 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee9(result) {
+                var rt, _i3;
+                return _regeneratorRuntime.wrap(function (_context0) {
+                  while (1) switch (_context0.prev = _context0.next) {
+                    case 0:
+                      rt = mergeSameElements(result === null || result === void 0 ? void 0 : result.elements);
+                      _i3 = 0;
+                    case 1:
+                      if (!(_i3 < (rt === null || rt === void 0 ? void 0 : rt.length))) {
+                        _context0.next = 3;
+                        break;
+                      }
+                      _context0.next = 2;
+                      return addItemToCatalog(rt[_i3], state, props.catalog, props.projectActions);
+                    case 2:
+                      _i3++;
+                      _context0.next = 1;
+                      break;
+                    case 3:
+                      props.itemsActions.setDoorStyle(doorStyle, itemCDS, isAll);
+                    case 4:
+                    case "end":
+                      return _context0.stop();
+                  }
+                }, _callee9);
+              }));
+              return function (_x12) {
+                return _ref4.apply(this, arguments);
+              };
+            }());
+          } else props.itemsActions.setDoorStyle(doorStyle, itemCDS, isAll);
+          return _context10.abrupt("continue", 45);
         case 21:
-          while (!(_value.e <= 10)) {
-            _value.e -= 0.1;
-          }
-          while (!(_value.e + _value.a * _value.SVGWidth + 10 >= _value.viewerWidth)) {
-            _value.e += 0.1;
-          }
-          while (!(_value.f <= 80)) {
-            _value.f -= 0.1;
-          }
-          while (!(_value.f + _value.a * _value.SVGHeight + 10 >= _value.viewerHeight)) {
-            _value.f += 0.1;
-          }
-          if (compareSVGRect(_value)) props.viewer2DActions.updateCameraView(_value);
-          return _context2.abrupt("continue", 25);
+          _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 _context10.abrupt("continue", 45);
         case 22:
-          _value2 = state.getIn(['viewer2D']).toJS();
-          _value2.a += 0.1;
-          _value2.d += 0.1;
-          _value2.e -= _value2.SVGWidth * 0.1 / 2;
-          _value2.f -= _value2.SVGHeight * 0.1 / 2;
-          _zoomValue2 = parseInt((_value2.a - 0.5) / ZOOM_VARIABLE);
-          if (!(_zoomValue2 > 404)) {
-            _context2.next = 23;
-            break;
-          }
-          return _context2.abrupt("return");
+          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 _context10.abrupt("continue", 45);
         case 23:
-          if (!(_zoomValue2 < 35 || Number.isNaN(_zoomValue2))) {
-            _context2.next = 24;
-            break;
-          }
-          return _context2.abrupt("return");
+          _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 _context10.abrupt("continue", 45);
         case 24:
-          if (compareSVGRect(_value2)) props.viewer2DActions.updateCameraView(_value2);
-          return _context2.abrupt("continue", 25);
+          centering2D(state, props.viewer2DActions);
+          return _context10.abrupt("continue", 45);
         case 25:
+          props.projectActions.undo();
+          return _context10.abrupt("continue", 45);
+        case 26:
+          props.projectActions.redo();
+          return _context10.abrupt("continue", 45);
+        case 27:
+          _evt$payload7 = evt.payload, moldingInfo = _evt$payload7.moldingInfo, isGlobal = _evt$payload7.isGlobal;
+          _context10.next = 28;
+          return loadMoldingSvg(moldingInfo);
+        case 28:
+          props.itemsActions.setMolding(moldingInfo, isGlobal);
+          return _context10.abrupt("continue", 45);
+        case 29:
+          distElement = getElement(evt.payload, state);
+          if (distElement) props.itemsActions.duplicateSelected(distElement, props.onInternalEvent);
+          return _context10.abrupt("continue", 45);
+        case 30:
+          _distElement = getElement(evt.payload, state);
+          if (_distElement) props.projectActions.remove(_distElement);
+          return _context10.abrupt("continue", 45);
+        case 31:
+          _evt$payload8 = evt.payload, option = _evt$payload8.option, _value2 = _evt$payload8.value;
+          _t6 = option;
+          _context10.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));
+        case 33:
+          props.viewer2DActions.updateCeilHeight(_value2);
+          props.viewer3DActions.update3DCeilHeight(_value2);
+          return _context10.abrupt("continue", 39);
+        case 34:
+          props.viewer2DActions.changeWallLengthMeasure(_value2);
+          return _context10.abrupt("continue", 39);
+        case 35:
+          props.viewer2DActions.changeBaseCabinetMeasure(_value2);
+          return _context10.abrupt("continue", 39);
+        case 36:
+          props.viewer2DActions.changeWallCabinetMeasure(_value2);
+          return _context10.abrupt("continue", 39);
+        case 37:
+          props.viewer2DActions.changeWindowDoorMeasure(_value2);
+          return _context10.abrupt("continue", 39);
+        case 38:
+          return _context10.abrupt("continue", 39);
+        case 39:
+          return _context10.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 _context10.abrupt("continue", 45);
+        case 41:
+          _layerID = state.scene.selectedLayer;
+          _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 = _layer2 === null || _layer2 === void 0 ? void 0 : _layer2.items[orginalItemInfo.id];
+          _context10.next = 42;
+          return addItemToCatalog(evt.payload.replaceItemInfo, state, props.catalog, props.projectActions);
+        case 42:
+          originalItemPos = {
+            rotation: originalItem.rotation,
+            selectedItemId: originalItem.id,
+            x: originalItem.x,
+            y: originalItem.y
+          };
+          replaceItem = {
+            name: evt === null || evt === void 0 || (_evt$payload0 = evt.payload) === null || _evt$payload0 === void 0 || (_evt$payload0 = _evt$payload0.replaceItemInfo) === null || _evt$payload0 === void 0 ? void 0 : _evt$payload0.name,
+            info: {
+              width: evt === null || evt === void 0 || (_evt$payload1 = evt.payload) === null || _evt$payload1 === void 0 || (_evt$payload1 = _evt$payload1.replaceItemInfo) === null || _evt$payload1 === void 0 || (_evt$payload1 = _evt$payload1.sizeinfo) === null || _evt$payload1 === void 0 ? void 0 : _evt$payload1.width,
+              height: evt === null || evt === void 0 || (_evt$payload10 = evt.payload) === null || _evt$payload10 === void 0 || (_evt$payload10 = _evt$payload10.replaceItemInfo) === null || _evt$payload10 === void 0 || (_evt$payload10 = _evt$payload10.sizeinfo) === null || _evt$payload10 === void 0 ? void 0 : _evt$payload10.height
+            }
+          };
+          props.itemsActions.replaceItem(originalItemPos, originalItem, replaceItem);
+          return _context10.abrupt("continue", 45);
+        case 43:
+          setFinishing(props, state, evt.payload);
+          return _context10.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: sceneData
+            }
+          });
+          return _context10.abrupt("continue", 45);
+        case 45:
         case "end":
-          return _context2.stop();
+          return _context10.stop();
       }
-    }, _callee2);
+    }, _callee0);
   }));
   return _handleExternalEvent.apply(this, arguments);
 }