kitchen-simulator 11.0.0-react.18 → 11.0.0

package/lib/events/external/handleExternalEvent.util.js

@@ -0,0 +1,1110 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.addItemToCatalog = addItemToCatalog;
+exports.getElement = getElement;
+exports.getPlannerStateFromProps = getPlannerStateFromProps;
+exports.loadMoldingSvg = loadMoldingSvg;
+exports.mergeSameElements = mergeSameElements;
+exports.updateAttributeOfSelectedElement = updateAttributeOfSelectedElement;
+exports.updatePropertyOfSelectedElement = updatePropertyOfSelectedElement;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _immutable = require("immutable");
+var _constants = require("../../constants");
+var _helper = require("../../utils/helper");
+var _exporter = _interopRequireDefault(require("../../catalog/utils/exporter"));
+var _itemLoader = require("../../catalog/utils/item-loader");
+var _convertUnitsLite = require("../../utils/convert-units-lite");
+var _export = require("../../utils/export");
+var _utils = require("../../components/viewer2d/utils");
+var _SVGLoader = require("three/addons/loaders/SVGLoader");
+var _geometry = require("../../utils/geometry");
+var _excluded = ["ccdf"];
+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) { (0, _defineProperty2["default"])(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; }
+var PRECISION = 2;
+
+// ---- compatibility: supports old + optimized props shapes ----
+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 _immutable.Map(); // url -> Promise<any>
+var __svgCache = new _immutable.Map(); // url -> Promise<svgData|null>
+function loadJSON(_x) {
+  return _loadJSON.apply(this, arguments);
+}
+/********Parse TempPlaceholder from cabinetPayloadData **************/
+function _loadJSON() {
+  _loadJSON = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3(path) {
+    var p;
+    return _regenerator["default"].wrap(function (_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          if (path) {
+            _context3.next = 1;
+            break;
+          }
+          return _context3.abrupt("return", null);
+        case 1:
+          if (!__jsonCache.has(path)) {
+            _context3.next = 2;
+            break;
+          }
+          return _context3.abrupt("return", __jsonCache.get(path));
+        case 2:
+          p = new Promise(function (resolve, reject) {
+            var xhr = new XMLHttpRequest();
+            xhr.onreadystatechange = function () {
+              if (xhr.readyState === XMLHttpRequest.DONE) {
+                if (xhr.status === 200) resolve(JSON.parse(xhr.responseText));else reject(xhr);
+              }
+            };
+            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 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].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 _regenerator["default"].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:
+          _t4 = _context4.sent;
+          _t2.push.call(_t2, {
+            name: _t3,
+            data: _t4
+          });
+        case 3:
+          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 _cabinetPayload$ccdf_;
+                      tempData['sink'] = tempData['sink'] || [];
+                      tempData['sink'].push(element.name);
+                      // Resolve sink asset via ccdf.assets3d based on placeholder_name
+                      var sinkPlaceholderName = sink_match[1]; // e.g. sink_farm_large
+                      var assets3d = cabinetPayload === null || cabinetPayload === void 0 || (_cabinetPayload$ccdf_ = cabinetPayload.ccdf_list) === null || _cabinetPayload$ccdf_ === void 0 ? void 0 : _cabinetPayload$ccdf_.find(function (ccdf) {
+                        return ccdf.cabinet_id === cabinetPayload.itemID;
+                      }).assets3d;
+                      var sinkAsset = Array.isArray(assets3d) && assets3d.find(function (a) {
+                        return a && (a.placeholder_name === sinkPlaceholderName || a.placeholder_name.startsWith('sink_')) && a.gltf;
+                      });
+                      if (sinkAsset !== null && sinkAsset !== void 0 && sinkAsset.gltf && cabinetPayload !== null && cabinetPayload !== void 0 && cabinetPayload.structure_json) cabinetPayload.structure_json.sink = sinkAsset.gltf;
+                    } 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[k].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 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee5(cabinetPayload) {
+    var tempPlaceholders, cabinetPayloadKeys, i;
+    return _regenerator["default"].wrap(function (_context5) {
+      while (1) switch (_context5.prev = _context5.next) {
+        case 0:
+          tempPlaceholders = [];
+          _context5.next = 1;
+          return parseTempPlaceholdersFromCabinetPayload(cabinetPayload);
+        case 1:
+          tempPlaceholders = _context5.sent;
+          cabinetPayloadKeys = Object.keys(cabinetPayload);
+          for (i = 0; i < cabinetPayloadKeys.length; i++) {
+            if (cabinetPayloadKeys[i] === 'structure_json') {
+              // cabinetPayload[cabinetPayloadKeys[i]]['placeholders'] =
+              //   cabinetPayload[cabinetPayloadKeys[i]]['tempPlaceholders'][0]
+              //     ?.placeholders ?? [];
+
+              cabinetPayload[cabinetPayloadKeys[i]]['placeholders'] = tempPlaceholders[0].placeholders;
+              cabinetPayload[cabinetPayloadKeys[i]]['tempPlaceholders'] = tempPlaceholders;
+            }
+          }
+          return _context5.abrupt("return", cabinetPayload);
+        case 2:
+        case "end":
+          return _context5.stop();
+      }
+    }, _callee5);
+  }));
+  return _updateCabinetPayload.apply(this, arguments);
+}
+var loadSVGsByItem = /*#__PURE__*/function () {
+  var _ref = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2(item) {
+    var url, p;
+    return _regenerator["default"].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 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
+            var _parsed$xml$viewBox, _parsed$xml$viewBox2, response, svgText, loader, parsed, _t;
+            return _regenerator["default"].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.SVGLoader();
+                  parsed = loader.parse(svgText);
+                  if (!(0, _helper.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);
+  };
+}();
+
+// Keep ccdf variants on the catalog definition as `ccdf_list[]`.
+// External ADD/REPLACE provides a single `ccdf` object; normalize it into `ccdf_list`.
+function populateCCDFList(param) {
+  // clone except ccdf
+  // instead, in catalog definition, ccdf variants are stored in `ccdf_list[]`
+  var ccdf = param.ccdf,
+    definition = (0, _objectWithoutProperties2["default"])(param, _excluded);
+  if (!(0, _helper.isEmpty)(ccdf)) {
+    definition.ccdf_list = Array.isArray(definition.ccdf_list) ? definition.ccdf_list : [];
+    // Merge by ccdf record id when available, else by door_finish_id.
+    if (!definition.ccdf_list.some(function (x) {
+      return !!(ccdf !== null && ccdf !== void 0 && ccdf.id) && (x === null || x === void 0 ? void 0 : x.id) === ccdf.id || !!(ccdf !== null && ccdf !== void 0 && ccdf.door_finish_id) && (x === null || x === void 0 ? void 0 : x.door_finish_id) === ccdf.door_finish_id;
+    })) {
+      definition.ccdf_list.push(ccdf);
+    }
+  }
+  return definition;
+}
+function addItemToCatalog(_x5, _x6, _x7, _x8) {
+  return _addItemToCatalog.apply(this, arguments);
+} // Get attributs of current selected element
+function _addItemToCatalog() {
+  _addItemToCatalog = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].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 _regenerator["default"].wrap(function (_context6) {
+      while (1) switch (_context6.prev = _context6.next) {
+        case 0:
+          if (!(0, _helper.isEmpty)(element === null || element === void 0 ? void 0 : element.name)) {
+            _context6.next = 1;
+            break;
+          }
+          return _context6.abrupt("return");
+        case 1:
+          elementJs = populateCCDFList(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 ((0, _helper.isEmpty)((_elementJs$structure_3 = elementJs.structure_json) === null || _elementJs$structure_3 === void 0 ? void 0 : _elementJs$structure_3.tempPlaceholders)) {
+            _context6.next = 4;
+            break;
+          }
+          _context6.next = 3;
+          return updateCabinetPayload(elementJs);
+        case 3:
+          elementJs = _context6.sent;
+        case 4:
+          elementJs = _objectSpread(_objectSpread({}, elementJs), {}, {
+            outlineSVGData: outlineSVGData,
+            type: elementJs.type,
+            render2DItem: _itemLoader.render2DItem
+          });
+          if (elementJs.type === 'appliance' || elementJs.type === 'furnishing') elementJs.render3DItem = _itemLoader.render3DApplianceItem;else if (elementJs.type === 'lighting') elementJs.render3DItem = _itemLoader.render3DLightingItem;else elementJs.render3DItem = _itemLoader.render3DItem;
+
+          /***** join new tempPlaceholder to the old element - start *****/
+          // get catalog item by itemID
+          catalogElements = state.getIn(['catalog', 'elements']).toJS();
+          catalogElementKeys = Object.keys(catalogElements);
+          catalogItem = null;
+          k = 0;
+        case 5:
+          if (!(k < catalogElementKeys.length)) {
+            _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 (!(0, _helper.isEmpty)(catalogItem)) {
+            tempPlaceholderArray = (_catalogItem$structur = catalogItem.structure_json) === null || _catalogItem$structur === void 0 ? void 0 : _catalogItem$structur.tempPlaceholders;
+          }
+
+          // join new tempPlaceholder array to old one
+          newTempPlaceholderArray = [];
+          (_elementJs3 = elementJs) === null || _elementJs3 === void 0 || (_elementJs3 = _elementJs3.structure_json) === null || _elementJs3 === void 0 || (_elementJs3 = _elementJs3.tempPlaceholders) === null || _elementJs3 === void 0 || _elementJs3.forEach(function (tph) {
+            var _tempPlaceholderArray;
+            if (!((_tempPlaceholderArray = tempPlaceholderArray) !== null && _tempPlaceholderArray !== void 0 && _tempPlaceholderArray.some(function (otph) {
+              return otph.id === tph.id;
+            }))) newTempPlaceholderArray.push(tph);
+          });
+          mergedTempPlaceholder = null;
+          if ((0, _helper.isEmpty)(tempPlaceholderArray)) mergedTempPlaceholder = newTempPlaceholderArray;else if ((0, _helper.isEmpty)(newTempPlaceholderArray)) mergedTempPlaceholder = tempPlaceholderArray;else mergedTempPlaceholder = [].concat((0, _toConsumableArray2["default"])(tempPlaceholderArray), newTempPlaceholderArray);
+
+          // rplace new array to the elementJS
+          if (!(0, _helper.isEmpty)(mergedTempPlaceholder)) elementJs.structure_json.tempPlaceholders = mergedTempPlaceholder;
+          /***** join new tempPlaceholder to the old element - end *****/
+
+          elementJs = (0, _exporter["default"])(elementJs);
+          if (catalogInstance !== null && catalogInstance !== void 0 && catalogInstance.validateElement(elementJs)) {
+            catalogInstance.registerElement(elementJs);
+            projectActions.addElementToCatalog(elementJs);
+          }
+        case 8:
+        case "end":
+          return _context6.stop();
+      }
+    }, _callee6);
+  }));
+  return _addItemToCatalog.apply(this, arguments);
+}
+function initAttrData(element, layer, state) {
+  element = (0, _typeof2["default"])(element.misc) === 'object' ? element.set('misc', new _immutable.Map(element.misc)) : element;
+  switch (element.prototype) {
+    case 'items':
+      {
+        return new _immutable.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 = _export.GeometryUtils.pointsDistance(v_a.x, v_a.y, v_b.x, v_b.y);
+        var _unit = element.misc.get('_unitLength') || _constants.UNIT_INCH;
+        var _length = (0, _convertUnitsLite.convert)(distance).from(_constants.UNIT_CENTIMETER).to(_unit);
+        if (state.mode == _constants.MODE_DRAWING_LINE) {
+          return new _immutable.Map({
+            vertexOne: v_a,
+            vertexTwo: v_b,
+            lineLength: new _immutable.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 _immutable.Map({
+            vertexOne: v_a,
+            vertexTwo: v_b,
+            vertexThree: v_c,
+            vertexFour: v_d,
+            lineToExtend: lineToExtend,
+            lineLength: new _immutable.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 = _export.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') || _constants.UNIT_INCH;
+        var _lengthA = (0, _convertUnitsLite.convert)(x0 > x1 ? endAt : startAt).from(_constants.UNIT_CENTIMETER).to(_unitA);
+        var _unitB = element.misc.get('_unitB') || _constants.UNIT_INCH;
+        var _lengthB = (0, _convertUnitsLite.convert)(x0 > x1 ? startAt : endAt).from(_constants.UNIT_CENTIMETER).to(_unitB);
+        return new _immutable.Map({
+          offset: element.offset,
+          offsetA: new _immutable.Map({
+            length: _export.MathUtils.toFixedFloat(x0 > x1 ? endAt : startAt, PRECISION),
+            _length: _export.MathUtils.toFixedFloat(_lengthA, PRECISION),
+            _unit: _unitA
+          }),
+          offsetB: new _immutable.Map({
+            length: _export.MathUtils.toFixedFloat(x0 > x1 ? startAt : endAt, PRECISION),
+            _length: _export.MathUtils.toFixedFloat(_lengthB, PRECISION),
+            _unit: _unitB
+          })
+        });
+      }
+    case 'areas':
+      {
+        return new _immutable.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[(0, _utils.returnReplaceableDeepSearchType)(element.type)])) {
+    console.log("Last Selected ".concat(element.type, " Element does not exist in catalog."));
+    return new _immutable.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 _immutable.Map({
+      currentValue: element.properties.has(name) ? element.properties.get(name) : fromJS(catalogElement.properties[name].defaultValue),
+      configs: catalogElement.properties[name]
+    });
+  }
+  return new _immutable.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 === _constants.ATT_ITEM_POS) {
+    // calculate the new position of movement
+    var rotRad = (value.directionAng + element.rotation) / 180 * Math.PI;
+    var newX = element.x + (0, _convertUnitsLite.convert)((value.oldDistance - value.newDistance) * Math.cos(rotRad)).from(layerUnit).to('cm');
+    var newY = element.y + (0, _convertUnitsLite.convert)((value.oldDistance - value.newDistance) * Math.sin(rotRad)).from(layerUnit).to('cm');
+    value = {
+      x: newX,
+      y: newY
+    };
+  } else if (attributeName === _constants.ATT_LINE_LENGTH || attributeName === _constants.ATT_HOLE_OFFSET_A || attributeName === _constants.ATT_HOLE_OFFSET_B) {
+    var att = attributesFormData.has(attributeName) ? attributesFormData.get(attributeName) : element[attributeName];
+    if (att) value = att.merge({
+      _length: value,
+      _unit: layerUnit,
+      length: (0, _convertUnitsLite.convert)(value).from(layerUnit).to(_constants.UNIT_CENTIMETER)
+    });
+  }
+  // make the new attrivutes
+  switch (element.prototype) {
+    case 'items':
+      {
+        if (attributeName == _constants.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 = _export.GeometryUtils.calcDistancesFromItemToWalls(attributesFormData, layer),
+          PointArray = _GeometryUtils$calcDi.PointArray;
+        attributesFormData = attributesFormData.set('distArray', PointArray);
+        break;
+      }
+    case 'lines':
+      {
+        switch (attributeName) {
+          case _constants.ATT_LINE_LENGTH:
+            {
+              var v_0 = attributesFormData.get('vertexOne');
+              var v_1 = attributesFormData.get('vertexTwo');
+              var v_b_new = _export.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 _constants.ATT_VERTEXT_ONE:
+          case _constants.ATT_VERTEXT_TWO:
+            {
+              attributesFormData = attributesFormData.withMutations(function (attr) {
+                attr.set(attributeName, attr.get(attributeName).merge(value));
+                var newDistance = _export.GeometryUtils.verticesDistance(attr.get('vertexOne'), attr.get('vertexTwo'));
+                attr.mergeIn(['lineLength'], attr.get('lineLength').merge({
+                  length: newDistance,
+                  _length: (0, _convertUnitsLite.convert)(newDistance).from(_constants.UNIT_CENTIMETER).to(attr.get('lineLength').get('_unit'))
+                }));
+              });
+              break;
+            }
+          default:
+            {
+              attributesFormData = attributesFormData.set(attributeName, value);
+              break;
+            }
+        }
+        break;
+      }
+    case 'holes':
+      {
+        switch (attributeName) {
+          case _constants.ATT_HOLE_OFFSET_A:
+          case _constants.ATT_HOLE_OFFSET_B:
+            {
+              var _curHole$properties$g, _curHole$properties;
+              /**** changing left distance ****/
+              var curHole = element;
+              // parent line of curHole
+              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 = _export.GeometryUtils.angleBetweenTwoPoints(x0, y0, x1, y1);
+              var lineLength = _export.GeometryUtils.pointsDistance(x0, y0, x1, y1);
+              // move curHole
+              var _calcDistancesFromHol = (0, _geometry.calcDistancesFromHoleToNearestOneOrWall)(curHole, layer),
+                distLeft = _calcDistancesFromHol.distLeft,
+                distRight = _calcDistancesFromHol.distRight; // old distArray
+              var mDistance = attributeName === _constants.ATT_HOLE_OFFSET_A ? distLeft - value.get('length') : value.get('length') - distRight; // movement distance
+              var xp = x0 + (lineLength * curHole.offset - mDistance) * Math.cos(alpha);
+              var yp = y0 + (lineLength * curHole.offset - mDistance) * Math.sin(alpha);
+              var offset = _export.GeometryUtils.pointPositionOnLineSegment(x0, y0, x1, y1, xp, yp);
+              // make temp hole for calc new distArray
+              var newHole = {
+                id: curHole.id,
+                line: curHole.line,
+                offset: offset,
+                x: xp,
+                y: yp,
+                properties: new _immutable.Map({
+                  width: new _immutable.Map({
+                    length: (_curHole$properties$g = (_curHole$properties = curHole.properties) === null || _curHole$properties === void 0 || (_curHole$properties = _curHole$properties.get('width')) === null || _curHole$properties === void 0 ? void 0 : _curHole$properties.get('length')) !== null && _curHole$properties$g !== void 0 ? _curHole$properties$g : 0
+                  })
+                })
+              };
+              var newDistArray = (0, _geometry.calcDistancesFromHoleToNearestOneOrWall)(newHole, layer);
+              var offsetUnit = attributesFormData.getIn(['offsetA', '_unit']);
+              var offsetA = new _immutable.Map({
+                length: newDistArray.distLeft,
+                _length: (0, _convertUnitsLite.convert)(newDistArray.distLeft).from(_constants.UNIT_CENTIMETER).to(offsetUnit),
+                _unit: offsetUnit
+              });
+              var offsetB = new _immutable.Map({
+                length: newDistArray.distRight,
+                _length: (0, _convertUnitsLite.convert)(newDistArray.distRight).from(_constants.UNIT_CENTIMETER).to(offsetUnit),
+                _unit: offsetUnit
+              });
+              attributesFormData = attributesFormData.set('offset', offset).set('offsetA', offsetA).set('offsetB', offsetB);
+              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 === _constants.PROP_FLIP_DOOR_HANDLE && element.properties.get(_constants.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 (!(0, _helper.isEmpty)(objProps === null || objProps === void 0 ? void 0 : objProps.elementPrototype) && !(0, _helper.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 _constants.ELEMENT_HOLE:
+          curObject = layer.holes.get(selData.id);
+          break;
+        case _constants.ELEMENT_ITEM:
+          curObject = layer.items.get(selData.id);
+          break;
+        case _constants.ELEMENT_LINE:
+          curObject = layer.lines.get(selData.id);
+          break;
+      }
+    }
+  }
+  return curObject;
+}
+function loadMoldingSvg(_x9) {
+  return _loadMoldingSvg.apply(this, arguments);
+}
+function _loadMoldingSvg() {
+  _loadMoldingSvg = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee7(molding) {
+    return _regenerator["default"].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.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 mergeSameElements(projectItemsCatalog) {
+  var result = [];
+  var _loop = function _loop(i) {
+    var idx = result.findIndex(function (v) {
+      return v.itemID === projectItemsCatalog[i].itemID;
+    });
+    if (idx < 0) result.push(projectItemsCatalog[i]);else {
+      var _loop2 = function _loop2(j) {
+        var _result$idx$structure, _result$idx$structure2;
+        var idx2 = (_result$idx$structure = result[idx].structure_json) === null || _result$idx$structure === void 0 || (_result$idx$structure = _result$idx$structure.tempPlaceholders) === null || _result$idx$structure === void 0 ? void 0 : _result$idx$structure.findIndex(function (v) {
+          return v.id === projectItemsCatalog[i].structure_json.tempPlaceholders[j].id;
+        });
+        if (idx2 < 0) (_result$idx$structure2 = result[idx].structure_json) === null || _result$idx$structure2 === void 0 || (_result$idx$structure2 = _result$idx$structure2.tempPlaceholders) === null || _result$idx$structure2 === void 0 || _result$idx$structure2.push(projectItemsCatalog[i].structure_json.tempPlaceholders[j]);else result[idx].structure_json.tempPlaceholders[idx2] = projectItemsCatalog[i].structure_json.tempPlaceholders[j];
+      };
+      for (var j = 0; j < ((_projectItemsCatalog$ = projectItemsCatalog[i].structure_json) === null || _projectItemsCatalog$ === void 0 || (_projectItemsCatalog$ = _projectItemsCatalog$.tempPlaceholders) === null || _projectItemsCatalog$ === void 0 ? void 0 : _projectItemsCatalog$.length); j++) {
+        var _projectItemsCatalog$;
+        _loop2(j);
+      }
+    }
+  };
+  for (var i = 0; i < (projectItemsCatalog === null || projectItemsCatalog === void 0 ? void 0 : projectItemsCatalog.length); i++) {
+    _loop(i);
+  }
+  return result;
+}