kitchen-simulator 3.1.15 → 4.0.0-alpha.12

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

@@ -1,429 +1,15 @@
 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 { 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 { 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 exporter from "../catalog/utils/exporter";
-import { render2DItem, render3DItem, render3DApplianceItem, render3DLightingItem } from "../catalog/utils/item-loader";
-import { convert } from "./convert-units-lite";
-import { GeometryUtils, MathUtils } from "./export";
-import { returnReplaceableDeepSearchType } from "../components/viewer2d/utils";
-import { SVGLoader } from 'three/addons/loaders/SVGLoader';
-import { getMoldingDataOfScene } from "./molding";
-var PRECISION = 2;
-function loadJSON(_x) {
-  return _loadJSON.apply(this, arguments);
-}
-/********Parse TempPlaceholder from cabinetPayloadData **************/
-function _loadJSON() {
-  _loadJSON = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(path) {
-    return _regeneratorRuntime.wrap(function (_context2) {
-      while (1) switch (_context2.prev = _context2.next) {
-        case 0:
-          return _context2.abrupt("return", 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();
-          }));
-        case 1:
-        case "end":
-          return _context2.stop();
-      }
-    }, _callee2);
-  }));
-  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 _callee3(cabinetPayload) {
-    var link, keys, temp, i, _cabinetPayload$struc, _cabinetPayload$struc2, el, tempPlaceholdersData, tempData, doorKey, drawerKey, fixedKey, doorPHs, drawerPHs, has_single_door, fixedPHs, _t2, _t3, _t4;
-    return _regeneratorRuntime.wrap(function (_context3) {
-      while (1) switch (_context3.prev = _context3.next) {
-        case 0:
-          link = '';
-          keys = Object.keys(cabinetPayload.structure_json);
-          temp = [];
-          i = 0;
-        case 1:
-          if (!(i < keys.length)) {
-            _context3.next = 4;
-            break;
-          }
-          if (!((_cabinetPayload$struc = cabinetPayload.structure_json[keys[i]]) !== null && _cabinetPayload$struc !== void 0 && (_cabinetPayload$struc = _cabinetPayload$struc.toString()) !== null && _cabinetPayload$struc !== void 0 && _cabinetPayload$struc.includes('.gltf') && (_cabinetPayload$struc2 = cabinetPayload.structure_json[keys[i]]) !== null && _cabinetPayload$struc2 !== void 0 && (_cabinetPayload$struc2 = _cabinetPayload$struc2.toString()) !== null && _cabinetPayload$struc2 !== void 0 && _cabinetPayload$struc2.startsWith('http'))) {
-            _context3.next = 3;
-            break;
-          }
-          link = cabinetPayload.structure_json[keys[i]];
-          _t2 = temp;
-          _t3 = keys[i];
-          _context3.next = 2;
-          return loadJSON(link);
-        case 2:
-          _t4 = _context3.sent;
-          _t2.push.call(_t2, {
-            name: _t3,
-            data: _t4
-          });
-        case 3:
-          i++;
-          _context3.next = 1;
-          break;
-        case 4:
-          el = cabinetPayload.structure_json.tempPlaceholders[0].id;
-          tempPlaceholdersData = [];
-          tempData = {};
-          doorKey = 0;
-          drawerKey = 0;
-          fixedKey = 0;
-          doorPHs = 0;
-          drawerPHs = 0;
-          has_single_door = false;
-          fixedPHs = 0;
-          temp.forEach(function (t, index) {
-            var nodes = t.data.nodes;
-            if (nodes === undefined) {
-              nodes = [];
-            }
-            var tempPlaceholders = nodes.filter(function (element) {
-              return element.name.startsWith('ph_');
-            });
-            tempPlaceholders.sort(function (a, b) {
-              return a.name > b.name ? 1 : -1;
-            });
-            if (tempPlaceholders.length > 0) {
-              if (t.name === 'base') {
-                tempPlaceholders.map(function (element) {
-                  var sink_match = element.name.match(/\d_(sink_[^LR12]*)(_[LR12])?$/);
-                  if (sink_match && sink_match.length >= 2) {
-                    var _process$env$API_URL, _cabinetPayload$struc3;
-                    tempData['sink'] = tempData['sink'] || [];
-                    tempData['sink'].push(element.name);
-                    var sink_url = (_process$env$API_URL = process.env.API_URL) !== null && _process$env$API_URL !== void 0 ? _process$env$API_URL :
-                    // server url from 3DTool env
-                    import.meta.env.VITE_APP_API_URL + // server url from Host env
-                    "/uploads/assets/default/".concat(sink_match[1], ".gltf");
-                    if (cabinetPayload !== null && cabinetPayload !== void 0 && (_cabinetPayload$struc3 = cabinetPayload.structure_json) !== null && _cabinetPayload$struc3 !== void 0 && (_cabinetPayload$struc3 = _cabinetPayload$struc3.tempPlaceholders[0]) !== null && _cabinetPayload$struc3 !== void 0 && _cabinetPayload$struc3.structure) cabinetPayload.structure_json.tempPlaceholders[0].structure.sink = sink_url;
-                  } else if (temp.some(function (felement) {
-                    return felement.name.includes('base_drawer');
-                  }) && element.name.includes('interior_drawer')) {
-                    var objCnt = temp.filter(function (felement) {
-                      return felement.name.includes('base_drawer') && !felement.name.includes('_door');
-                    }).length;
-                    var phCnt = tempPlaceholders.filter(function (felement) {
-                      return felement.name.includes('interior');
-                    }).length;
-                    drawerPHs = phCnt;
-                    if (objCnt === 1 || phCnt % objCnt !== 0) {
-                      if (tempData['base_drawer_1'] === undefined) {
-                        tempData['base_drawer_1'] = [];
-                      }
-                      tempData['base_drawer_1'].push(element.name);
-                      drawerKey++;
-                    } else if (objCnt > 1 && phCnt % objCnt === 0) {
-                      if (tempData['base_drawer_' + (drawerKey % objCnt + 1)] === undefined) {
-                        tempData['base_drawer_' + (drawerKey % objCnt + 1)] = [];
-                      }
-                      tempData['base_drawer_' + (drawerKey % objCnt + 1)].push(element.name);
-                      drawerKey++;
-                    }
-                  } else if (temp.some(function (felement) {
-                    return felement.name.includes('base_door');
-                  }) && !element.name.includes('interior_drawer') && !element.name.includes('drawer') && element.name.includes('door')) {
-                    var _objCnt = temp.filter(function (felement) {
-                      return felement.name.includes('base_door');
-                    }).length;
-                    var _phCnt = tempPlaceholders.filter(function (felement) {
-                      return !felement.name.includes('interior') && !felement.name.includes('drawer') && felement.name.includes('door');
-                    }).length;
-                    doorPHs = _phCnt;
-                    if (_objCnt === 1 || _phCnt % _objCnt !== 0) {
-                      if (tempData['base_door_1'] === undefined) {
-                        tempData['base_door_1'] = [];
-                      }
-                      tempData['base_door_1'].push(element.name);
-                      doorKey++;
-                    } else if (_objCnt > 1) {
-                      if (tempData['base_door_' + (doorKey % _objCnt + 1)] === undefined) {
-                        tempData['base_door_' + (doorKey % _objCnt + 1)] = [];
-                      }
-                      tempData['base_door_' + (doorKey % _objCnt + 1)].push(element.name);
-                      doorKey++;
-                    }
-                  } else if (temp.some(function (felement) {
-                    return felement.name.includes('base_fixed_drawer_door');
-                  }) && element.name.includes('_drawer_door_fixed')) {
-                    var _objCnt2 = temp.filter(function (felement) {
-                      return felement.name.includes('base_fixed_drawer_door');
-                    }).length;
-                    var _phCnt2 = tempPlaceholders.filter(function (felement) {
-                      return felement.name.includes('_drawer_door_fixed');
-                    }).length;
-                    fixedPHs = _phCnt2;
-                    if (_objCnt2 === 1 || _phCnt2 % _objCnt2 !== 0) {
-                      if (tempData['base_fixed_drawer_door_1'] === undefined) {
-                        tempData['base_fixed_drawer_door_1'] = [];
-                      }
-                      tempData['base_fixed_drawer_door_1'].push(element.name);
-                      fixedKey++;
-                    } else if (_objCnt2 > 1) {
-                      if (tempData['base_fixed_drawer_door_' + (fixedKey % _objCnt2 + 1)] === undefined) {
-                        tempData['base_fixed_drawer_door_' + (fixedKey % _objCnt2 + 1)] = [];
-                      }
-                      tempData['base_fixed_drawer_door_' + (fixedKey % _objCnt2 + 1)].push(element.name);
-                      fixedKey++;
-                    }
-                  }
-                });
-              } 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 _loop = function _loop() {
-                    var phname = tempPlaceholders[0].name;
-                    var newph = undefined;
-                    if (tempData['base_door_1'][_w].isLeftPlaceholder()) {
-                      newph = tempPlaceholders.find(function (el) {
-                        return el.name.isRightPlaceholder();
-                      });
-                    }
-                    if (tempData['base_door_1'][_w].isRightPlaceholder()) {
-                      newph = tempPlaceholders.find(function (el) {
-                        return el.name.isLeftPlaceholder();
-                      });
-                    }
-                    if (newph != undefined) {
-                      phname = newph.name;
-                    }
-                    if (doorPHs === 1 && tempPlaceholders.find(function (el) {
-                      return el.name.isLeftPlaceholder();
-                    }) != undefined && tempPlaceholders.find(function (el) {
-                      return el.name.isRightPlaceholder();
-                    }) != undefined) {
-                      has_single_door = true;
-                    }
-                    if (!tempData['door_handle_1'].some(function (el) {
-                      return el === 'door_handle_1/' + phname;
-                    })) {
-                      tempData['door_handle_1'].push('base_door_1/' + phname);
-                    }
-                  };
-                  for (var _w = 0; _w < doorPHs; _w++) {
-                    _loop();
-                  }
-                } else if (_objCnt3 > 1 && doorPHs > 0 && doorPHs % _objCnt3 === 0) {
-                  if (tempData['door_handle' + t.name.slice(-2)] === undefined) tempData['door_handle' + t.name.slice(-2)] = [];
-                  var phname = tempPlaceholders[0].name;
-                  var newph = undefined;
-                  var blAdd = true;
-                  if (cabinetPayload.is_corner) {
-                    if (tempData['base_door' + t.name.slice(-2)][0].isLeftPlaceholder()) {
-                      newph = tempPlaceholders.find(function (el) {
-                        return el.name.isLeftPlaceholder();
-                      });
-                    } else {
-                      blAdd = false;
-                    }
-                  } else {
-                    if (tempData['base_door' + t.name.slice(-2)][0].isLeftPlaceholder()) {
-                      newph = tempPlaceholders.find(function (el) {
-                        return el.name.isRightPlaceholder();
-                      });
-                    }
-                    if (tempData['base_door' + t.name.slice(-2)][0].isRightPlaceholder()) {
-                      newph = tempPlaceholders.find(function (el) {
-                        return el.name.isLeftPlaceholder();
-                      });
-                    }
-                  }
-                  if (blAdd) {
-                    if (newph != undefined) {
-                      phname = newph.name;
-                    }
-                    if (!tempData['door_handle' + t.name.slice(-2)].some(function (el) {
-                      return el === t.name + '/' + phname;
-                    })) {
-                      tempData['door_handle' + t.name.slice(-2)].push(t.name + '/' + phname);
-                    }
-                  }
-                }
-              } else if (t.name.includes('base_fixed_drawer_door')) {
-                var _objCnt4 = temp.filter(function (felement) {
-                  return felement.name.includes('base_fixed_drawer_door');
-                }).length;
-                tempPlaceholders = tempPlaceholders.filter(function (el) {
-                  return el.name.includes('handle');
-                });
-                if (tempPlaceholders.length > 0) if (_objCnt4 === 1 || fixedPHs % _objCnt4 !== 0) {
-                  if (tempData['fixed_drawer_door_handle_1'] === undefined) tempData['fixed_drawer_door_handle_1'] = [];
-                  var _loop2 = function _loop2() {
-                    var phname = tempPlaceholders[0].name;
-                    var newph = undefined;
-                    if (tempData['base_fixed_drawer_door_1'][_w2].isLeftPlaceholder()) {
-                      newph = tempPlaceholders.find(function (el) {
-                        return el.name.isRightPlaceholder();
-                      });
-                    }
-                    if (tempData['base_fixed_drawer_door_1'][_w2].isRightPlaceholder()) {
-                      newph = tempPlaceholders.find(function (el) {
-                        return el.name.isLeftPlaceholder();
-                      });
-                    }
-                    if (newph != undefined) {
-                      phname = newph.name;
-                    }
-                    if (!tempData['fixed_drawer_door_handle_1'].some(function (el) {
-                      return el === 'fixed_drawer_door_handle_1/' + phname;
-                    })) {
-                      tempData['fixed_drawer_door_handle_1'].push('base_fixed_drawer_door_1/' + phname);
-                    }
-                  };
-                  for (var _w2 = 0; _w2 < fixedPHs; _w2++) {
-                    _loop2();
-                  }
-                } else if (_objCnt4 > 1 && fixedPHs > 0 && fixedPHs % _objCnt4 === 0) {
-                  if (tempData['fixed_drawer_door_handle' + t.name.slice(-2)] === undefined) {
-                    tempData['fixed_drawer_door_handle' + t.name.slice(-2)] = [];
-                  }
-                  var _phname = tempPlaceholders[0].name;
-                  var _newph = undefined;
-                  if (tempData['base_fixed_drawer_door' + t.name.slice(-2)][0].isLeftPlaceholder()) {
-                    _newph = tempPlaceholders.find(function (el) {
-                      return el.name.isRightPlaceholder();
-                    });
-                  }
-                  if (tempData['base_fixed_drawer_door' + t.name.slice(-2)][0].isRightPlaceholder()) {
-                    _newph = tempPlaceholders.find(function (el) {
-                      return el.name.isLeftPlaceholder();
-                    });
-                  }
-                  if (_newph != undefined) {
-                    _phname = _newph.name;
-                  }
-                  if (!tempData['fixed_drawer_door_handle' + t.name.slice(-2)].some(function (el) {
-                    return el === t.name + '/' + _phname;
-                  })) {
-                    tempData['fixed_drawer_door_handle' + t.name.slice(-2)].push(t.name + '/' + _phname);
-                  }
-                }
-              }
-            }
-          });
-          tempPlaceholdersData.push({
-            id: parseInt(el, 10),
-            placeholders: tempData,
-            structure: cabinetPayload.structure_json.tempPlaceholders[0].structure
-          });
-          return _context3.abrupt("return", tempPlaceholdersData);
-        case 5:
-        case "end":
-          return _context3.stop();
-      }
-    }, _callee3);
-  }));
-  return _parseTempPlaceholdersFromCabinetPayload.apply(this, arguments);
-}
-function updateCabinetPayload(_x3) {
-  return _updateCabinetPayload.apply(this, arguments);
-}
-function _updateCabinetPayload() {
-  _updateCabinetPayload = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4(cabinetPayload) {
-    var tempPlaceholders, cabinetPayloadKeys, i;
-    return _regeneratorRuntime.wrap(function (_context4) {
-      while (1) switch (_context4.prev = _context4.next) {
-        case 0:
-          tempPlaceholders = [];
-          _context4.next = 1;
-          return parseTempPlaceholdersFromCabinetPayload(cabinetPayload);
-        case 1:
-          tempPlaceholders = _context4.sent;
-          cabinetPayloadKeys = Object.keys(cabinetPayload);
-          for (i = 0; i < cabinetPayloadKeys.length; i++) {
-            if (cabinetPayloadKeys[i] === 'structure_json') {
-              cabinetPayload[cabinetPayloadKeys[i]]['placeholders'] = tempPlaceholders[0].placeholders;
-              cabinetPayload[cabinetPayloadKeys[i]]['tempPlaceholders'] = tempPlaceholders;
-            }
-          }
-          return _context4.abrupt("return", cabinetPayload);
-        case 2:
-        case "end":
-          return _context4.stop();
-      }
-    }, _callee4);
-  }));
-  return _updateCabinetPayload.apply(this, arguments);
-}
+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;
@@ -472,1000 +58,171 @@ var loadSVGsByItem = /*#__PURE__*/function () {
       }
     }, _callee, null, [[1, 5]]);
   }));
-  return function loadSVGsByItem(_x4) {
+  return function loadSVGsByItem(_x) {
     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 _callee5(element, state, catalogInstance, projectActions) {
-    var _element, _element2;
-    var elementJs, catalog, outlineSVGData, _element$structure_js, _element$structure_js2, _element$structure_js3, updatedStructureJson;
-    return _regeneratorRuntime.wrap(function (_context5) {
-      while (1) switch (_context5.prev = _context5.next) {
-        case 0:
-          if (!isEmpty((_element = element) === null || _element === void 0 ? void 0 : _element.name)) {
-            _context5.next = 1;
-            break;
-          }
-          return _context5.abrupt("return");
-        case 1:
-          elementJs = element;
-          catalog = state.getIn(['catalog']).toJS(); // add item to catalog of state
-          // if (isEmpty(catalog?.elements[element.name])) {
-          _context5.next = 2;
-          return loadSVGsByItem(element);
-        case 2:
-          outlineSVGData = _context5.sent;
-          if (!(((_element2 = element) === null || _element2 === void 0 ? void 0 : _element2.type) === 'cabinet')) {
-            _context5.next = 4;
-            break;
-          }
-          // make placeholders of element and tempPlaceholder
-          updatedStructureJson = _objectSpread(_objectSpread({}, element.structure_json), (_element$structure_js = (_element$structure_js2 = element.structure_json) === null || _element$structure_js2 === void 0 || (_element$structure_js2 = _element$structure_js2.tempPlaceholders[0]) === null || _element$structure_js2 === void 0 ? void 0 : _element$structure_js2.structure) !== null && _element$structure_js !== void 0 ? _element$structure_js : {});
-          element.structure_json = updatedStructureJson;
-          element = _objectSpread(_objectSpread({}, element), {}, {
-            cds: {
-              data: [_objectSpread({}, element.customer_property)],
-              itemID: element.itemID
-            }
-          });
-          if (isEmpty((_element$structure_js3 = element.structure_json) === null || _element$structure_js3 === void 0 ? void 0 : _element$structure_js3.tempPlaceholders)) {
-            _context5.next = 4;
-            break;
-          }
-          _context5.next = 3;
-          return updateCabinetPayload(element);
-        case 3:
-          elementJs = _context5.sent;
-        case 4:
-          elementJs = _objectSpread(_objectSpread({}, elementJs), {}, {
-            outlineSVGData: outlineSVGData,
-            type: element.type,
-            render2DItem: render2DItem
-          });
-          if (element.type === 'appliance' || element.type === 'furnishing') elementJs.render3DItem = render3DApplianceItem;else if (element.type === 'lighting') elementJs.render3DItem = render3DLightingItem;else elementJs.render3DItem = render3DItem;
-          elementJs = exporter(elementJs);
-          if (catalogInstance !== null && catalogInstance !== void 0 && catalogInstance.validateElement(elementJs)) {
-            catalogInstance.registerElement(elementJs);
-            projectActions.addElementToCatalog(elementJs);
-          }
-          // }
-        case 5:
-        case "end":
-          return _context5.stop();
-      }
-    }, _callee5);
-  }));
-  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 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('in').to('cm');
-    var newY = element.y + convert((value.oldDistance - value.newDistance) * Math.sin(rotRad)).from('in').to('cm');
-    // const reversedDirection =
-    //   value.directionAng === LEFT_DIST_ANG
-    //     ? RIGHT_DIST_ANG
-    //     : value.directionAng === RIGHT_DIST_ANG
-    //     ? LEFT_DIST_ANG
-    //     : value.directionAng === BACK_DIST_ANG
-    //     ? FRONT_DIST_ANG
-    //     : BACK_DIST_ANG;
-    // let dist = convert(
-    //   element.distArray?.find(v => v[1] === reversedDirection)
-    //     ? element.distArray?.find(v => v[1] === reversedDirection)[0]
-    //     : 0
-    // )
-    //   .from('cm')
-    //   .to('in');
-    // if (dist + (value.oldDistance - value.newDistance) <= 0 || value.newDistance < 0) {
-    //   // confirm "The item will be placed outside the floor plan. Are you sure?"
-    //   setPopupOpen(true);
-    //   return;
-    // }
-    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: UNIT_INCH,
-      length: convert(value).from(UNIT_INCH).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 _callee6(molding) {
-    return _regeneratorRuntime.wrap(function (_context6) {
-      while (1) switch (_context6.prev = _context6.next) {
-        case 0:
-          return _context6.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 _context6.stop();
-      }
-    }, _callee6);
-  }));
-  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;
-    }
-  }
-}
-export function handleExternalEvent(_x10) {
+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) {
   return _handleExternalEvent.apply(this, arguments);
 }
 function _handleExternalEvent() {
-  _handleExternalEvent = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee9(props) {
-    var _evt$payload3, _evt$payload4;
-    var evt, state, layerId, layer, _evt$payload, cdsItems, itemKeys, _loop3, i, _props$onInternalEven, sLineCnt, _state$getIn, element, cds, _cds$find, currentCdsId, _state$viewer2D, _evt$payload$initialP, mouseX, mouseY, v2d, vPosX, vPosY, layerID, defaulTitle, _Object$keys, _evt$payload5, doorStyle, itemCDS, isAll, _layerId, _cdsItems, allItems, selectedItemId, _itemKeys, _loop4, _i2, _props$onInternalEven2, _evt$payload6, roomShapeType, width, height, _doorStyle, value, _value, _evt$payload7, moldingInfo, isGlobal, distElement, _distElement, _evt$payload8, option, _value2, _layerId2, _layer, _layer$getIn, selectedLines, selectedHoles, selectedItems, _i4, _i5, _i6, _evt$payload9, _evt$payload0, _evt$payload1, _evt$payload10, _layerID, _layer2, orginalItemInfo, originalItem, originalItemPos, replaceItem, _props$onInternalEven3, sceneData, currentTexture, _t5, _t6;
-    return _regeneratorRuntime.wrap(function (_context1) {
-      while (1) switch (_context1.prev = _context1.next) {
+  _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) {
         case 0:
-          // console.log('***external event****', props);
           evt = props.externalEvent;
           state = props.state.get('KitchenConfigurator');
-          layerId = state.getIn(['scene', 'selectedLayer']);
-          layer = state.getIn(['scene', 'layers', layerId]);
-          _t5 = evt === null || evt === void 0 ? void 0 : evt.type;
-          _context1.next = _t5 === EXTERNAL_EVENT_LOAD_PROJECT ? 1 : _t5 === EXTERNAL_EVENT_TOGGLE_TO_3D ? 5 : _t5 === EXTERNAL_EVENT_TOGGLE_TO_2D ? 6 : _t5 === EXTERNAL_EVENT_TOGGLE_TO_ELEVATION ? 7 : _t5 === EXTERNAL_EVENT_ADD_WALL ? 8 : _t5 === EXTERNAL_EVENT_ADD_ITEM ? 9 : _t5 === EXTERNAL_EVENT_ADD_HOLE ? 12 : _t5 === EXTERNAL_EVENT_ROTATE_PAN ? 13 : _t5 === EXTERNAL_EVENT_MOVE_PAN ? 13 : _t5 === EXTERNAL_EVENT_NEW_PROJECT ? 14 : _t5 === EXTERNAL_EVENT_CHANGE_DOORSTYLE ? 15 : _t5 === EXTERNAL_EVENT_ADD_ROOM_SHAPE ? 19 : _t5 === EXTERNAL_EVENT_ZOOM_IN ? 20 : _t5 === EXTERNAL_EVENT_ZOOM_OUT ? 21 : _t5 === EXTERNAL_EVENT_CENTERING_2D ? 22 : _t5 === EXTERNAL_EVENT_UNDO ? 23 : _t5 === EXTERNAL_EVENT_REDO ? 24 : _t5 === EXTERNAL_EVENT_SET_MOLDING ? 25 : _t5 === EXTERNAL_EVENT_DUPLICATE_ELEMENT ? 27 : _t5 === EXTERNAL_EVENT_DELETE_ELEMENT ? 28 : _t5 === EXTERNAL_EVENT_PROJECT_SETTING ? 29 : _t5 === EXTERNAL_EVENT_UPDATE_ATTRIBUTE ? 38 : _t5 === EXTERNAL_EVENT_UPDATE_PROPERTY ? 38 : _t5 === EXTERNAL_EVENT_REPLACE_CABINET ? 39 : _t5 === EXTERNAL_EVENT_SET_FINISHING ? 41 : _t5 === EXTERNAL_EVENT_SYNC_SCENE ? 42 : 43;
+          _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;
         case 1:
-          // prepare item data request
-          cdsItems = [];
-          itemKeys = Object.keys(evt === null || evt === void 0 || (_evt$payload = evt.payload) === null || _evt$payload === void 0 || (_evt$payload = _evt$payload.layers['layer-1']) === null || _evt$payload === void 0 ? void 0 : _evt$payload.items) || [];
-          _loop3 = /*#__PURE__*/_regeneratorRuntime.mark(function _loop3() {
-            var _evt$payload2, _it$doorStyle2;
-            var it;
-            return _regeneratorRuntime.wrap(function (_context8) {
-              while (1) switch (_context8.prev = _context8.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 _context8.stop();
-              }
-            }, _loop3);
-          });
-          i = 0;
-        case 2:
-          if (!(i < itemKeys.length)) {
-            _context1.next = 4;
-            break;
-          }
-          return _context1.delegateYield(_loop3(), "t0", 3);
-        case 3:
-          i++;
-          _context1.next = 2;
-          break;
-        case 4:
-          // 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 _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee7(result) {
-                var _i, _result$elements;
-                return _regeneratorRuntime.wrap(function (_context7) {
-                  while (1) switch (_context7.prev = _context7.next) {
-                    case 0:
-                      _i = 0;
-                    case 1:
-                      if (!(_i < (result === null || result === void 0 || (_result$elements = result.elements) === null || _result$elements === void 0 ? void 0 : _result$elements.length))) {
-                        _context7.next = 3;
-                        break;
-                      }
-                      _context7.next = 2;
-                      return addItemToCatalog(result.elements[_i], state, props.catalog, props.projectActions);
-                    case 2:
-                      _i++;
-                      _context7.next = 1;
-                      break;
-                    case 3:
-                      props.projectActions.loadProject(evt.payload);
-                    case 4:
-                    case "end":
-                      return _context7.stop();
-                  }
-                }, _callee7);
-              }));
-              return function (_x11) {
-                return _ref2.apply(this, arguments);
-              };
-            }());
-          }
-          return _context1.abrupt("continue", 43);
-        case 5:
           props.projectActions.setMode(MODE_IDLE_3D);
-          return _context1.abrupt("continue", 43);
-        case 6:
+          return _context2.abrupt("continue", 25);
+        case 2:
           props.projectActions.setMode(MODE_IDLE);
-          return _context1.abrupt("continue", 43);
-        case 7:
-          sLineCnt = layer.selected.lines.size;
+          return _context2.abrupt("continue", 25);
+        case 3:
+          sLineCnt = state.getIn(['scene', 'layers', 'layer-1', 'selected', 'lines']).size;
           if (sLineCnt > 0) props.projectActions.setMode(MODE_ELEVATION_VIEW);
-          return _context1.abrupt("continue", 43);
-        case 8:
+          return _context2.abrupt("continue", 25);
+        case 4:
           if (state.mode === MODE_IDLE || state.mode === MODE_2D_PAN) props.linesActions.selectToolDrawingLine('wall');else {
             props.projectActions.setMode(MODE_IDLE);
             props.linesActions.selectToolDrawingLine('wall');
           }
-          return _context1.abrupt("continue", 43);
-        case 9:
+          return _context2.abrupt("continue", 25);
+        case 5:
           if (isEmpty(evt === null || evt === void 0 ? void 0 : evt.payload)) {
-            _context1.next = 11;
+            _context2.next = 8;
+            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;
           }
-          element = evt.payload; ///// filter the tempPlaceholders using layer-doorstyle-cds
-          cds = (_state$getIn = state.getIn(['scene', 'layers', 'layer-1', 'doorStyle'])) === null || _state$getIn === void 0 ? void 0 : _state$getIn.cds;
-          if (cds) {
-            currentCdsId = (_cds$find = cds.find(function (c) {
-              return c.itemID === element.itemID;
-            })) === null || _cds$find === void 0 ? void 0 : _cds$find.cabinet_door_style_id;
-            if (currentCdsId && element.structure_json.tempPlaceholders.length > 0) {
-              element.structure_json.tempPlaceholders[0] = element.structure_json.tempPlaceholders.find(function (tPlaceholder) {
-                return tPlaceholder.id === currentCdsId;
-              });
-            }
+          _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);
           }
-          /////
-          _context1.next = 10;
-          return addItemToCatalog(element, state, props.catalog, props.projectActions);
-        case 10:
+        case 7:
           // start drawing item
-          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);
-            }
-          }
+          ARRAY_3D_MODES.includes(state.mode) ? props.itemsActions.selectToolDrawingItem3D(element.name) : props.itemsActions.selectToolDrawingItem(element.name);
           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:
-          return _context1.abrupt("continue", 43);
+          value.f += moveValue;
+          return _context2.abrupt("continue", 14);
         case 12:
-          ARRAY_3D_MODES.includes(state.mode) ? props.holesActions.selectToolDrawingHole3D(evt === null || evt === void 0 || (_evt$payload3 = evt.payload) === null || _evt$payload3 === void 0 ? void 0 : _evt$payload3.holeName) : props.holesActions.selectToolDrawingHole(evt === null || evt === void 0 || (_evt$payload4 = evt.payload) === null || _evt$payload4 === void 0 ? void 0 : _evt$payload4.holeName);
-          return _context1.abrupt("continue", 43);
+          value.e += moveValue;
+          return _context2.abrupt("continue", 14);
         case 13:
-          moveAndRotatePan2D3D(evt.type, props, evt.payload, state);
-          return _context1.abrupt("continue", 43);
+          value.e -= moveValue;
+          return _context2.abrupt("continue", 14);
         case 14:
+          if (compareSVGRect(value)) props.viewer2DActions.updateCameraView(value);
+          return _context2.abrupt("continue", 25);
+        case 15:
           defaulTitle = 'Untitle';
           props.projectActions.newProject();
           props.projectActions.rename(defaulTitle);
-          return _context1.abrupt("continue", 43);
-        case 15:
-          _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];
-          _loop4 = /*#__PURE__*/_regeneratorRuntime.mark(function _loop4() {
-            var _itemCDS$find;
-            var item, cdsId;
-            return _regeneratorRuntime.wrap(function (_context0) {
-              while (1) switch (_context0.prev = _context0.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 _context0.stop();
-              }
-            }, _loop4);
-          });
-          _i2 = 0;
+          return _context2.abrupt("continue", 25);
         case 16:
-          if (!(_i2 < _itemKeys.length)) {
-            _context1.next = 18;
-            break;
-          }
-          return _context1.delegateYield(_loop4(), "t1", 17);
+          _evt$payload2 = evt.payload, doorStyle = _evt$payload2.doorStyle, isAll = _evt$payload2.isAll;
+          props.itemsActions.setDoorStyle(doorStyle, isAll);
+          return _context2.abrupt("continue", 25);
         case 17:
-          _i2++;
-          _context1.next = 16;
-          break;
+          _doorStyle = evt.payload.doorStyle;
+          props.itemsActions.setInitialDoorStyle(_doorStyle.doorStyle, _doorStyle.oStyle);
+          return _context2.abrupt("continue", 25);
         case 18:
-          // 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 _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee8(result) {
-                var _i3, _result$elements2;
-                return _regeneratorRuntime.wrap(function (_context9) {
-                  while (1) switch (_context9.prev = _context9.next) {
-                    case 0:
-                      _i3 = 0;
-                    case 1:
-                      if (!(_i3 < (result === null || result === void 0 || (_result$elements2 = result.elements) === null || _result$elements2 === void 0 ? void 0 : _result$elements2.length))) {
-                        _context9.next = 3;
-                        break;
-                      }
-                      _context9.next = 2;
-                      return addItemToCatalog(result.elements[_i3], state, props.catalog, props.projectActions);
-                    case 2:
-                      _i3++;
-                      _context9.next = 1;
-                      break;
-                    case 3:
-                      props.itemsActions.setDoorStyle(doorStyle, itemCDS, isAll);
-                    case 4:
-                    case "end":
-                      return _context9.stop();
-                  }
-                }, _callee8);
-              }));
-              return function (_x12) {
-                return _ref3.apply(this, arguments);
-              };
-            }());
-          } else props.itemsActions.setDoorStyle(doorStyle, itemCDS, isAll);
-          return _context1.abrupt("continue", 43);
+          props.projectActions.loadProject(evt.payload, props.categoryData);
+          return _context2.abrupt("continue", 25);
         case 19:
-          _evt$payload6 = evt.payload, roomShapeType = _evt$payload6.roomShapeType, width = _evt$payload6.width, height = _evt$payload6.height, _doorStyle = _evt$payload6.doorStyle;
-          props.projectActions.createRoomWithShape(roomShapeType, width, height, _doorStyle);
-          return _context1.abrupt("continue", 43);
-        case 20:
-          value = state.getIn(['viewer2D']).toJS();
-          value.a += 0.1;
-          value.d += 0.1;
-          value.e -= value.SVGWidth * 0.1 / 2;
-          value.f -= value.SVGHeight * 0.1 / 2;
-          updateViwer2D(value, props.viewer2DActions);
-          return _context1.abrupt("continue", 43);
-        case 21:
           _value = state.getIn(['viewer2D']).toJS();
           _value.a -= 0.1;
           _value.d -= 0.1;
           _value.e += _value.SVGWidth * 0.1 / 2;
           _value.f += _value.SVGHeight * 0.1 / 2;
-          updateViwer2D(_value, props.viewer2DActions);
-          return _context1.abrupt("continue", 43);
+          _zoomValue = parseInt((_value.a - 0.5) / ZOOM_VARIABLE);
+          if (!(_zoomValue > 404)) {
+            _context2.next = 20;
+            break;
+          }
+          return _context2.abrupt("return");
+        case 20:
+          if (!(_zoomValue < 35 || Number.isNaN(_zoomValue))) {
+            _context2.next = 21;
+            break;
+          }
+          return _context2.abrupt("return");
+        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);
         case 22:
-          centering2D(state, props.viewer2DActions);
-          return _context1.abrupt("continue", 43);
+          _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");
         case 23:
-          props.projectActions.undo();
-          return _context1.abrupt("continue", 43);
+          if (!(_zoomValue2 < 35 || Number.isNaN(_zoomValue2))) {
+            _context2.next = 24;
+            break;
+          }
+          return _context2.abrupt("return");
         case 24:
-          props.projectActions.redo();
-          return _context1.abrupt("continue", 43);
+          if (compareSVGRect(_value2)) props.viewer2DActions.updateCameraView(_value2);
+          return _context2.abrupt("continue", 25);
         case 25:
-          _evt$payload7 = evt.payload, moldingInfo = _evt$payload7.moldingInfo, isGlobal = _evt$payload7.isGlobal;
-          _context1.next = 26;
-          return loadMoldingSvg(moldingInfo);
-        case 26:
-          props.itemsActions.setMolding(moldingInfo, isGlobal);
-          return _context1.abrupt("continue", 43);
-        case 27:
-          distElement = getElement(evt.payload, state);
-          if (distElement) props.itemsActions.duplicateSelected(distElement, props.onInternalEvent);
-          return _context1.abrupt("continue", 43);
-        case 28:
-          _distElement = getElement(evt.payload, state);
-          if (_distElement) props.projectActions.remove(_distElement);
-          return _context1.abrupt("continue", 43);
-        case 29:
-          _evt$payload8 = evt.payload, option = _evt$payload8.option, _value2 = _evt$payload8.value;
-          _t6 = option;
-          _context1.next = _t6 === PROJECT_SETTING_OPTION.CHANGE_MEASUREMENT_UNIT ? 30 : _t6 === PROJECT_SETTING_OPTION.UPDATE_CEIL_HEIGHT ? 31 : _t6 === PROJECT_SETTING_OPTION.CHANGE_WALL_LENGTH_MEASURE ? 32 : _t6 === PROJECT_SETTING_OPTION.CHANGE_BASE_CABINET_MEASURE ? 33 : _t6 === PROJECT_SETTING_OPTION.CHANGE_WALL_CABINET_MEASURE ? 34 : _t6 === PROJECT_SETTING_OPTION.CHANGE_WINDOW_DOOR_MEASURE ? 35 : 36;
-          break;
-        case 30:
-          props.viewer2DActions.updateCeilHeightUnit(_value2);
-        case 31:
-          props.viewer2DActions.updateCeilHeight(_value2);
-          props.viewer3DActions.update3DCeilHeight(_value2);
-          return _context1.abrupt("continue", 37);
-        case 32:
-          props.viewer2DActions.changeWallLengthMeasure(_value2);
-          return _context1.abrupt("continue", 37);
-        case 33:
-          props.viewer2DActions.changeBaseCabinetMeasure(_value2);
-          return _context1.abrupt("continue", 37);
-        case 34:
-          props.viewer2DActions.changeWallCabinetMeasure(_value2);
-          return _context1.abrupt("continue", 37);
-        case 35:
-          props.viewer2DActions.changeWindowDoorMeasure(_value2);
-          return _context1.abrupt("continue", 37);
-        case 36:
-          return _context1.abrupt("continue", 37);
-        case 37:
-          return _context1.abrupt("continue", 43);
-        case 38:
-          _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 _context1.abrupt("continue", 43);
-        case 39:
-          _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];
-          _context1.next = 40;
-          return addItemToCatalog(evt.payload.replaceItemInfo, state, props.catalog, props.projectActions);
-        case 40:
-          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 _context1.abrupt("continue", 43);
-        case 41:
-          setFinishing(props, state, evt.payload);
-          return _context1.abrupt("continue", 43);
-        case 42:
-          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 = getMoldingDataOfScene(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 _context1.abrupt("continue", 43);
-        case 43:
         case "end":
-          return _context1.stop();
+          return _context2.stop();
       }
-    }, _callee9);
+    }, _callee2);
   }));
   return _handleExternalEvent.apply(this, arguments);
 }