kitchen-simulator 5.0.0-test.3 → 5.0.0-test.4

package/lib/components/toolbar/main/index.js

@@ -1,4619 +0,0 @@
-"use strict";
-
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
-var _styles = require("@material-ui/core/styles");
-var _Error = _interopRequireDefault(require("@material-ui/icons/Error"));
-var _convertUnits = _interopRequireDefault(require("convert-units"));
-var _immutable = require("immutable");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react = _interopRequireWildcard(require("react"));
-var _fa = require("react-icons/fa");
-var door_closet = _interopRequireWildcard(require("../../../../demo/src/catalog/holes/door-closet/planner-element"));
-var door_exterior = _interopRequireWildcard(require("../../../../demo/src/catalog/holes/door-exterior/planner-element"));
-var door_interior = _interopRequireWildcard(require("../../../../demo/src/catalog/holes/door-interior/planner-element"));
-var door_sliding = _interopRequireWildcard(require("../../../../demo/src/catalog/holes/door-sliding/planner-element"));
-var door_framed = _interopRequireWildcard(require("../../../../demo/src/catalog/holes/doorway-framed/planner-element"));
-var door_frameless = _interopRequireWildcard(require("../../../../demo/src/catalog/holes/doorway-frameless/planner-element"));
-var window_clear = _interopRequireWildcard(require("../../../../demo/src/catalog/holes/window-clear/planner-element"));
-var window_cross = _interopRequireWildcard(require("../../../../demo/src/catalog/holes/window-cross/planner-element"));
-var window_double_hung = _interopRequireWildcard(require("../../../../demo/src/catalog/holes/window-double-hung/planner-element"));
-var window_vertical = _interopRequireWildcard(require("../../../../demo/src/catalog/holes/window-vertical/planner-element"));
-var _math = require("../../../utils/math");
-var _formNumberInput = _interopRequireDefault(require("../../style/form-number-input"));
-var _pluginItem = _interopRequireDefault(require("../plugin-item.jsx"));
-var PS = _interopRequireWildcard(require("../popup/styles"));
-var _panelElementEditor = _interopRequireDefault(require("./../../sidebar/panel-element-editor/panel-element-editor"));
-var _confirmPopup = _interopRequireDefault(require("./confirm-popup"));
-var lShaped = _interopRequireWildcard(require("./lShaped.json"));
-var longNarrow = _interopRequireWildcard(require("./longNarrow.json"));
-var _myComponents = require("./myComponents");
-var oRectangle = _interopRequireWildcard(require("./oRectangle.json"));
-var rectangleData = _interopRequireWildcard(require("./rectangle.json"));
-var _utils = require("../../viewer2d/utils");
-var _constants = require("../../../constants");
-var SharedStyle = _interopRequireWildcard(require("../../../shared-style"));
-var _export = require("../../../utils/export");
-var _helper = require("../../../utils/helper");
-var _index = _interopRequireDefault(require("../../atoms/Snackbar/index"));
-var _ToggleMeasureButton = _interopRequireDefault(require("../../button/ToggleMeasureButton"));
-var _setDoorStyleOption = _interopRequireDefault(require("../popup/setDoorStyleOption"));
-var S = _interopRequireWildcard(require("./styles"));
-var _DoorStyleMenu = _interopRequireDefault(require("../components/DoorStyleMenu"));
-var _ReviewForQuote = require("../../../../src/components/toolbar/components/ReviewForQuote");
-var _Pricing = require("../../../../src/components/toolbar/components/Pricing");
-var _geometry = require("../../../utils/geometry");
-var _processBlackList = require("../../../../src/utils/process-black-list");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t3 in e) "default" !== _t3 && {}.hasOwnProperty.call(e, _t3) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t3)) && (i.get || i.set) ? o(f, _t3, i) : f[_t3] = e[_t3]); return f; })(e, t); }
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
-function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
-function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
-function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
-function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
-function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
-function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
-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; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
-function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
-function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
-function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
-function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
-function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
-function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
-var testJsonData = {};
-Object.freeze(testJsonData);
-var unitData = [{
-  _name: 'inch',
-  _unit: 'in'
-}, {
-  _name: 'centimeter',
-  _unit: 'cm'
-}, {
-  _name: 'millimeter',
-  _unit: 'mm'
-}, {
-  _name: 'meter',
-  _unit: 'm'
-}, {
-  _name: 'feet',
-  _unit: 'ft'
-}];
-var ASIDE_STYLE = {
-  marginTop: '85px'
-};
-var StyledTooltip = (0, _styles.withStyles)(function () {
-  return {
-    tooltip: {
-      backgroundColor: _constants.TEXT_COLOR_NEUTRAL_0,
-      color: _constants.BG_COLOR_1,
-      maxWidth: 180,
-      fontSize: 9,
-      fontFamily: _constants.DEFAULT_FONT_FAMILY,
-      boxShadow: '0px 3px 5px -1px rgba(156, 154, 154, 0.2), 0px 6px 10px 0px rgba(156, 154, 154, 0.39), 0px 1px 18px 0px rgba(156, 154, 154, 0.12)',
-      padding: '2px 15px'
-    }
-  };
-})(_Tooltip["default"]);
-var searchInput = {
-  width: 'calc( 100% - 2em )',
-  height: '2em',
-  marginTop: '15px',
-  padding: '0 1em',
-  margin: '0 1em',
-  border: '1px solid #EEE'
-};
-var hintText = '';
-var Toolbar = exports["default"] = /*#__PURE__*/function (_PureComponent) {
-  function Toolbar(props, context) {
-    var _this;
-    _classCallCheck(this, Toolbar);
-    _this = _callSuper(this, Toolbar, [props, context]);
-    var layer = props.layers.get(props.selectedLayer);
-    var elements = {
-      lines: layer.lines,
-      holes: layer.holes,
-      items: layer.items,
-      molding: layer.molding
-    };
-    var ceilingHeight = props.state.scene.layers.get(props.selectedLayer).ceilHeight;
-    var measurementUnit = unitData.filter(function (unit) {
-      return unit._unit === props.state.scene.layers.get(props.selectedLayer).unit;
-    })[0];
-    _this.state = {
-      elements: elements,
-      appliancesData: [],
-      doorHandle: [],
-      wallColors: [],
-      floorStyles: [],
-      lighting: [],
-      counterTop: [],
-      molding: [],
-      backsplash: [],
-      furnishing: [],
-      opened: false,
-      vData: [],
-      toData: [],
-      vDataArray: [],
-      dData: [],
-      oData: [],
-      DoorStyles: [],
-      dDataArray: [],
-      currentTexture: layer.doorStyle !== null || layer.doorStyle !== undefined ? layer.doorStyle : props.state.doorStyle.toJS(),
-      changeTexture: undefined,
-      doorTitle: [],
-      cabinetTitle: [],
-      cabinetCollapse: true,
-      doorCollapse: true,
-      doorExpand: false,
-      searchCabinet: '',
-      searchDoor: '',
-      floorCollapse: true,
-      animOpened: false,
-      closeover: false,
-      animover: false,
-      plgItems: [],
-      plgUrls: [],
-      filter: '',
-      activeButton: 'Floor Plan',
-      search: '',
-      controlButton: '',
-      topButton: '',
-      recentStyle: [],
-      selectAll: false,
-      cabinetSubCategoryData: [],
-      cabinetExpand: -1,
-      applianceSubCategoryData: [],
-      applianceCategoryCollapse: true,
-      applianceExpand: -1,
-      finishingSubCategoryData: [],
-      finishingCategoryCollapse: true,
-      finishingProductCollapse: true,
-      floorSubCategoryData: [],
-      floorCategoryCollapse: true,
-      floorProductCollapse: true,
-      doorStyleSubCategoryData: [],
-      doorStyleCategoryCollapse: true,
-      doorStyleProductCollapse: true,
-      doorStyleStep: 0,
-      stepSource: [],
-      doorStyleExpand: -1,
-      reviewCollapse: true,
-      isMolding: false,
-      editWidthVisible: false,
-      isModalVisible: false,
-      setDoorStylePopupVisible: false,
-      imageUri: '',
-      image: '',
-      croppedImage: '',
-      isMouseDown: false,
-      firstMousePoint: {
-        x: 0,
-        y: 0
-      },
-      lastMousePoint: {
-        x: 1000,
-        y: 1000
-      },
-      mouse: {
-        p: {
-          x: 0,
-          y: 0
-        },
-        frame: 0,
-        frames: 30
-      },
-      topLeft: {
-        x: _this.percentToPxHor(17.275),
-        y: _this.percentToPxVert(59.691)
-      },
-      bottomLeft: {
-        x: _this.percentToPxHor(17.275),
-        y: _this.percentToPxVert(60.72)
-      },
-      topRight: {
-        x: _this.percentToPxHor(71.459),
-        y: _this.percentToPxVert(61.407)
-      },
-      bottomRight: {
-        x: _this.percentToPxHor(71.352),
-        y: _this.percentToPxVert(62.436)
-      },
-      ceilingHeight: ceilingHeight,
-      measurementUnit: measurementUnit,
-      cabinetCategory: {
-        name: '',
-        data: []
-      },
-      subCabinetCategory: {
-        name: '',
-        data: []
-      },
-      selectedFinishing: '',
-      selectedRoomElement: '',
-      checkedRoomElement: {},
-      selectedProject: '',
-      isPopupOpen: false,
-      resetFilters: false,
-      toggleFilters: false,
-      cabinetStyleChanging: true,
-      cabinetStyle: {
-        name: '',
-        data: []
-      },
-      subCabinetStyle: {
-        name: '',
-        data: []
-      },
-      cabinetColor: {
-        name: '',
-        data: []
-      },
-      install: _constants.INSTALLATION_TYPE_NAME.RTA,
-      viewMoreDoorstyle: false,
-      searchName: '',
-      replaceCabinetFlag: false,
-      chosenReplacedItem: {},
-      isSnackBarOpen: false,
-      snackBarMessage: '',
-      addingJson: false,
-      helpViewNum: 1,
-      notes: '',
-      videoUrl: '',
-      moldingData: []
-    };
-    _this.onMouseUp_On_New_Save_SQ_DA = _this.onMouseUp_On_New_Save_SQ_DA.bind(_this);
-    _this.onMouseDown = _this.onMouseDown.bind(_this);
-    _this.onMouseMove = _this.onMouseMove.bind(_this);
-    _this.onKeyDown = _this.onKeyDown.bind(_this);
-    _this.onMouseUp = _this.onMouseUp.bind(_this);
-    return _this;
-  }
-  _inherits(Toolbar, _PureComponent);
-  return _createClass(Toolbar, [{
-    key: "hideModal",
-    value: function hideModal() {
-      this.setState({
-        isModalVisible: false
-      });
-    }
-  }, {
-    key: "editWidth",
-    value: function editWidth() {
-      this.setState({
-        editWidthVisible: true
-      });
-    }
-  }, {
-    key: "handleEditWidth",
-    value: function handleEditWidth(newWidth, layerID, itemID) {
-      this.setState({
-        editWidthVisible: false
-      });
-      this.context.itemsActions.editWidth(newWidth, layerID, itemID);
-    }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      document.addEventListener('keydown', this.onKeyDown, false);
-      var self = this;
-      var data = self.props.categoryData;
-      if (data.success === true) {
-        var _data$data = data.data,
-          appliances = _data$data.appliances,
-          cabinets = _data$data.cabinets,
-          doorStyles = _data$data.doorStyles,
-          doorHandle = _data$data.doorHandle,
-          wallColors = _data$data.wallColors,
-          floorStyles = _data$data.floorStyles,
-          lighting = _data$data.lighting,
-          counterTop = _data$data.counterTop,
-          backsplash = _data$data.backsplash,
-          furnishing = _data$data.furnishing,
-          doorColorFamily = _data$data.doorColorFamily;
-        var molding = [];
-        data.data.cabinets.forEach(function (cabinet) {
-          cabinet.items.forEach(function (index) {
-            if (index.name.toLowerCase().includes('molding')) {
-              index.items.forEach(function (item) {
-                molding.push(item);
-              });
-            }
-          });
-        });
-        var tmp = [];
-        doorStyles.items.forEach(function (item) {
-          var t = [];
-          item.items.forEach(function (item1) {
-            var t2 = [];
-            item1.items.forEach(function (item2) {
-              t2.push(_objectSpread(_objectSpread({}, item2), {}, {
-                install: item.name
-              }));
-            });
-            t.push(_objectSpread(_objectSpread({}, item1), {}, {
-              items: [].concat(t2)
-            }));
-          });
-          tmp.push(_objectSpread(_objectSpread({}, item), {}, {
-            items: t
-          }));
-        });
-        self.setState({
-          appliancesData: appliances,
-          vData: cabinets,
-          doorHandle: doorHandle,
-          wallColors: wallColors,
-          floorStyles: floorStyles,
-          lighting: lighting,
-          counterTop: counterTop,
-          backsplash: backsplash,
-          furnishing: furnishing,
-          toData: cabinets,
-          molding: molding,
-          DoorStyles: tmp,
-          dData: tmp,
-          stepSource: tmp,
-          cabinetStyle: {
-            name: '',
-            data: tmp[0].items
-          },
-          cabinetColor: {
-            name: '',
-            data: doorColorFamily
-          },
-          subCabinetStyle: {
-            name: '',
-            data: tmp.flatMap(function (item) {
-              return item.items.flatMap(function (sub) {
-                return sub.items;
-              });
-            })
-          }
-        });
-        var _doorCategory = function doorCategory(result, data, path) {
-          if (data.some(function (element) {
-            return element.type === 'door-category';
-          })) {
-            var temp = data.filter(function (element) {
-              return element.type === 'door-category';
-            });
-            temp.forEach(function (t) {
-              if (t.items !== undefined) {
-                _doorCategory(result, t.items, path != '' ? path + ',' + t.name : t.name);
-              }
-            });
-          } else {
-            var _temp = data.filter(function (element) {
-              return element.type !== 'door-category';
-            });
-            _temp.forEach(function (t) {
-              result.push({
-                name: t.name,
-                path: path != '' ? path + ',' + t.name : t.name,
-                data: t
-              });
-            });
-          }
-          return result;
-        };
-        var oStyle = _doorCategory([], tmp, '');
-        if (self.state.currentTexture == null) {
-          var _findDefault = function findDefault(data) {
-            if (!data || data.length === 0) return undefined;
-            var brilliantWhiteShaker = data.find(function (item) {
-              return item.name === 'Brilliant White Shaker';
-            });
-            if (brilliantWhiteShaker) {
-              return _objectSpread({}, brilliantWhiteShaker);
-            }
-            var result = undefined;
-            for (var i = 0; i < data.length; i++) {
-              if (data[i].type === 'door-category') {
-                result = _findDefault(data[i].items);
-                if (result !== undefined) {
-                  break;
-                }
-              } else if (data[i].type === 'door') {
-                if (data[i].install) {
-                  return data[i];
-                }
-              }
-            }
-            return result;
-          };
-          var findFinishing = function findFinishing(data) {
-            var isSelected = false;
-            var temp = {
-              counterTop: [],
-              floorStyles: []
-            };
-            if (data.counterTop) {
-              data.counterTop.forEach(function (element) {
-                if (element.selected) isSelected = true;
-              });
-              if (!isSelected) data.counterTop[0].selected = true;
-              temp.counterTop = data.counterTop;
-            } else {
-              console.log('There are no counterTops.');
-            }
-            isSelected = false;
-            if (data.floorStyles) {
-              data.floorStyles.forEach(function (element) {
-                if (element.selected) isSelected = true;
-              });
-              if (!isSelected) data.floorStyles[0].selected = true;
-              temp.floorStyles = data.floorStyles;
-            } else {
-              console.log('There are no floorStyles.');
-            }
-            temp = {
-              counterTop: temp.counterTop.filter(function (e) {
-                return e.selected == true;
-              }),
-              floorStyles: temp.floorStyles.filter(function (e) {
-                return e.selected == true;
-              })
-            };
-            return temp;
-          };
-          var dStyle = _findDefault(tmp);
-          var finishing = findFinishing({
-            counterTop: counterTop,
-            floorStyles: floorStyles
-          });
-          // let oStyle = doorCategory([], tmp, '');
-          self.context.itemsActions.setInitialDoorStyle(dStyle, oStyle);
-          self.context.itemsActions.setCounterTop({
-            uri: finishing.counterTop[0].texture
-          });
-          self.context.areaActions.setFloorStyles({
-            uri: finishing.floorStyles[0].texture
-          });
-          if (dStyle !== undefined) {
-            self.setState({
-              currentTexture: dStyle,
-              oData: oStyle
-            });
-          } else {
-            self.setState({
-              currentTexture: tmp[0].items[0].items[0],
-              oData: oStyle
-            });
-          }
-        } else {
-          self.context.itemsActions.setInitialDoorStyle(self.state.currentTexture, oStyle);
-        }
-      }
-    }
-  }, {
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps) {
-      var layer = nextProps.layers.get(nextProps.selectedLayer);
-      this.setState({
-        measurementUnit: unitData.filter(function (unit) {
-          return unit._unit === layer.unit;
-        })[0],
-        ceilingHeight: layer.ceilHeight
-      });
-      var tmp = [];
-      this.props.categoryData.data.doorStyles.items.forEach(function (item) {
-        var t = [];
-        item.items.forEach(function (item1) {
-          var t2 = [];
-          item1.items.forEach(function (item2) {
-            t2.push(_objectSpread(_objectSpread({}, item2), {}, {
-              install: item.name
-            }));
-          });
-          t.push(_objectSpread(_objectSpread({}, item1), {}, {
-            items: [].concat(t2)
-          }));
-        });
-        tmp.push(_objectSpread(_objectSpread({}, item), {}, {
-          items: t
-        }));
-      });
-      if (layer.doorStyle !== null && layer.doorStyle !== undefined && this.state.currentTexture !== undefined) {
-        this.setState({
-          currentTexture: layer.doorStyle
-        });
-      } else if (layer.doorStyle === null || layer.doorStyle === undefined) {
-        this.setState({
-          currentTexture: this.props.state.doorStyle === null || this.props.state.doorStyle === undefined ? tmp.filter(function (item) {
-            return item.items.filter(function (item1) {
-              return item1.items.length !== 0;
-            }).length !== 0;
-          })[0].items.filter(function (item) {
-            return item.items.length !== 0;
-          })[0].items[0] : this.props.state.doorStyle.toJS()
-        });
-      }
-      var activeButton = '';
-      if (nextProps.reviewQuotePopupOpened) {
-        activeButton = _constants.REVIEW_AND_QUOTE;
-      } else if (nextProps.floorOpened) {
-        activeButton = _constants.MAKE_FLOOR_PLAN;
-      } else if (nextProps.cabinetOpened) {
-        activeButton = _constants.ADD_CABINETS;
-      } else if (nextProps.applianceOpened) {
-        activeButton = _constants.ADD_APPLIANCES;
-      } else if (nextProps.finishingOpened) {
-        activeButton = _constants.FINISHING_TOUCH;
-      } else if (nextProps.doorStyleOpen) {
-        activeButton = _constants.SELECT_DOOR_STYLE;
-      }
-      this.setState({
-        activeButton: activeButton
-      });
-      var propLayer = this.props.layers.get(this.props.selectedLayer);
-      if (this.props.layers.hashCode() === nextProps.layers.hashCode()) return;
-      var elements = {
-        lines: layer.lines,
-        holes: layer.holes,
-        items: layer.items,
-        molding: layer.molding
-      };
-      this.setState({
-        elements: elements
-      });
-      if (nextProps.state.get('isOpen') === true) {
-        this.context.holesActions.endCreatingHole();
-        this.context.itemsActions.endCreatingCabinet();
-        this.context.projectActions.setIsCabinetDrawing(false);
-      }
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, prevState) {
-      var _this$state$cabinetCo,
-        _this2 = this;
-      var allData = this.state.DoorStyles.flatMap(function (item) {
-        return item.items.flatMap(function (item1) {
-          return item1.items.map(function (item2) {
-            return _objectSpread(_objectSpread({}, item2), {}, {
-              install: item.name
-            });
-          });
-        });
-      });
-      var selectedColorId = ((_this$state$cabinetCo = this.state.cabinetColor.data.find(function (color) {
-        return color.name === _this2.state.cabinetColor.name;
-      })) === null || _this$state$cabinetCo === void 0 ? void 0 : _this$state$cabinetCo.id) || '';
-      var selectedDoorStyleName = this.state.subCabinetStyle.name;
-      var selectedInstallationName = this.state.cabinetStyle.name;
-      var filteredData = !this.state.subCabinetStyle.name && !this.state.cabinetStyle.name && !this.state.cabinetColor.name && !this.state.searchName ? allData : allData.filter(function (item) {
-        var matchesSearch = item.name.toLowerCase().search(_this2.state.searchName.toLowerCase()) !== -1;
-        return (!selectedDoorStyleName || item.door_style_name === selectedDoorStyleName) && (!_this2.state.cabinetStyle.name || item.install === selectedInstallationName) && (!_this2.state.cabinetColor.name || item.color_family === ",".concat(selectedColorId, ",")) && matchesSearch;
-      });
-
-      // Only update state if filteredData actually changed
-      if (JSON.stringify(filteredData) !== JSON.stringify(this.state.subCabinetStyle.data)) {
-        this.setState({
-          subCabinetStyle: _objectSpread(_objectSpread({}, this.state.subCabinetStyle), {}, {
-            data: filteredData
-          })
-        });
-      }
-      if (this.state.resetFilters) {
-        this.setState({
-          cabinetStyle: _objectSpread(_objectSpread({}, this.state.cabinetStyle), {}, {
-            name: ''
-          }),
-          subCabinetStyle: _objectSpread(_objectSpread({}, this.state.subCabinetStyle), {}, {
-            name: ''
-          }),
-          cabinetColor: _objectSpread(_objectSpread({}, this.state.cabinetColor), {}, {
-            name: ''
-          }),
-          searchName: '',
-          resetFilters: false
-        });
-      }
-
-      // sessionStorage.setItem('usedObjects', JSON.stringify(usedObjects));
-    }
-  }, {
-    key: "toggleOpen",
-    value: function toggleOpen() {
-      var replacingSupport = this.props.state.replacingSupport;
-      var layerID = replacingSupport.getIn(['layerID']);
-      var itemID = replacingSupport.getIn(['itemID']);
-      var iName = null;
-      if (layerID !== undefined) {
-        var obj = this.props.state.scene.getIn(['layers', layerID, 'items', itemID]);
-        if (obj === undefined) {
-          this.PanelClose();
-          return;
-        }
-        iName = obj.name;
-        this.setState({
-          plgUrls: [iName]
-        });
-        this.updateplgItems([iName]);
-        if (_constants.ARRAY_3D_MODES.includes(this.props.state.mode) && !this.state.opened) this.PanelOpen();else this.PanelClose();
-      } else {
-        this.PanelClose();
-      }
-    }
-  }, {
-    key: "Animate",
-    value: function Animate() {
-      this.context.itemsActions.animateObject(this.state.animValue);
-    }
-  }, {
-    key: "toggleAnimationOpen",
-    value: function toggleAnimationOpen() {
-      var replacingSupport = this.props.state.replacingSupport;
-      var layerID = replacingSupport.getIn(['layerID']);
-      var itemID = replacingSupport.getIn(['itemID']);
-      var planData = window.planData;
-      var iName = null;
-      if (layerID !== undefined) {
-        var obj = this.props.state.scene.getIn(['layers', layerID, 'items', itemID]);
-        if (obj === undefined) {
-          this.PanelAnimClose();
-          return;
-        }
-        iName = obj.name;
-        var item3D = planData.sceneGraph.layers[layerID].items[itemID];
-        var userData = item3D.children[0].userData;
-        this.setState({
-          animData: userData.animation,
-          animValue: 0
-        });
-        this.setState({
-          plgUrls: [iName]
-        });
-        this.updateplgItems([iName]);
-        if (_constants.ARRAY_3D_MODES.includes(this.props.state.mode) && !this.state.animOpened) this.PanelAnimOpen();else this.PanelAnimClose();
-      } else {
-        this.PanelAnimClose();
-      }
-    }
-  }, {
-    key: "PanelOpen",
-    value: function PanelOpen() {
-      this.setState({
-        opened: true,
-        animOpened: false
-      });
-    }
-  }, {
-    key: "PanelClose",
-    value: function PanelClose() {
-      this.setState({
-        opened: false,
-        closeover: false
-      });
-    }
-  }, {
-    key: "PanelAnimOpen",
-    value: function PanelAnimOpen() {
-      this.setState({
-        animOpened: true,
-        opened: false
-      });
-    }
-  }, {
-    key: "PanelAnimClose",
-    value: function PanelAnimClose() {
-      this.setState({
-        animOpened: false,
-        closeover: false
-      });
-    }
-  }, {
-    key: "getStyle",
-    value: function getStyle(texture) {
-      texture = _objectSpread({}, texture);
-      var doorTitle = this.state.doorTitle;
-      var recentStyle = this.state.recentStyle;
-      var rStyle = {
-        doorTitle: doorTitle,
-        textureData: texture
-      };
-      if (recentStyle.length == 2) {
-        recentStyle[1] = recentStyle[0];
-        recentStyle[0] = rStyle;
-      } else {
-        recentStyle.unshift(rStyle);
-      }
-      this.setState({
-        recentStyle: recentStyle
-      });
-      this.setState({
-        currentTexture: texture,
-        doorStyleStep: 0,
-        doorStyleExpand: -1,
-        doorStyleSubCategoryData: [],
-        stepSource: this.state.DoorStyles,
-        doorTitle: [],
-        changeTexture: texture
-      });
-      var scene = this.props.state.scene;
-      var layerID = scene.get('selectedLayer');
-      var itemIDs = scene.layers.getIn([layerID, 'selected', 'items']).toJS();
-      if (itemIDs.length > 0) {
-        this.setState({
-          setDoorStylePopupVisible: true
-        });
-      } else {
-        this.context.itemsActions.setDoorStyle(texture, doorTitle, true);
-      }
-      this.props.setToolbar('');
-    }
-  }, {
-    key: "applyMaterial",
-    value: function applyMaterial(category, metalness, roughness) {
-      if (category === 'floor_style') this.context.areaActions.setFloorStyles({
-        metalness: metalness,
-        roughness: roughness
-      });else if (category === 'backsplash') this.context.itemsActions.setBacksplash({
-        metalness: metalness,
-        roughness: roughness
-      });else if (category === 'counter_top') this.context.itemsActions.setCounterTop({
-        metalness: metalness,
-        roughness: roughness
-      });else if (category === 'handle') this.context.itemsActions.setHandleMaterial({
-        metalness: metalness,
-        roughness: roughness
-      });else if (category === 'appliance') this.context.itemsActions.setApplianceMaterial({
-        metalness: metalness,
-        roughness: roughness
-      });
-    }
-  }, {
-    key: "setFinishing",
-    value: function setFinishing(texture) {
-      var _texture$category;
-      if (texture.category === 'modelling') {
-        this.context.itemsActions.setModelling(texture.name);
-      } else if (texture !== null && texture !== void 0 && (_texture$category = texture.category) !== null && _texture$category !== void 0 && (_texture$category = _texture$category.toLowerCase()) !== null && _texture$category !== void 0 && _texture$category.includes('molding')) {
-        this.context.itemsActions.setMolding(texture, true);
-      } else if (texture.category === 'wall_color') {
-        // it doesn't have to do this action in elevation mode
-        if ((0, _helper.isElevationView)(this.props.state.mode)) {
-          this.setState({
-            snackBarMessage: _constants.WARNING_MESSAGE.ELEVATION_VIEW_ACTION_DISABLED,
-            isSnackBarOpen: true
-          });
-        } else this.context.itemsActions.setWallColor(texture.color);
-      } else if (texture.category === 'counter_top') {
-        this.context.itemsActions.setCounterTop({
-          uri: texture.texture
-        });
-      } else if (texture.category === 'floor_style') {
-        // it doesn't have to do this action in elevation mode
-        if ((0, _helper.isElevationView)(this.props.state.mode)) {
-          this.setState({
-            snackBarMessage: _constants.WARNING_MESSAGE.ELEVATION_VIEW_ACTION_DISABLED,
-            isSnackBarOpen: true
-          });
-        } else this.context.areaActions.setFloorStyles({
-          uri: texture.texture
-        });
-      } else if (texture.category === 'backsplash') {
-        // it doesn't have to do this action in elevation mode
-        if ((0, _helper.isElevationView)(this.props.state.mode)) {
-          this.setState({
-            snackBarMessage: _constants.WARNING_MESSAGE.ELEVATION_VIEW_ACTION_DISABLED,
-            isSnackBarOpen: true
-          });
-        } else this.context.itemsActions.setBacksplash({
-          uri: texture.texture
-        });
-      } else if (texture.category === 'lighting' || texture.category === 'furnishing') {
-        this.context.itemsActions.updatePopupOpen(2);
-        if (texture.category === 'lighting' && [_constants.MODE_IDLE_3D, _constants.MODE_DRAWING_ITEM_3D, _constants.MODE_DRAGGING_ITEM_3D, _constants.MODE_ROTATING_ITEM_3D].includes(this.props.state.mode))
-          // props.itemsActions.selectToolDrawingItem(dataSource[i].name);
-          this.context.itemsActions.selectToolDrawingItem3D(texture.name);else {
-          [_constants.MODE_IDLE_3D, _constants.MODE_DRAWING_ITEM_3D, _constants.MODE_DRAGGING_ITEM_3D, _constants.MODE_ROTATING_ITEM_3D].includes(this.props.state.mode) ? this.context.itemsActions.selectToolDrawingItem3D(texture.name) : this.context.itemsActions.selectToolDrawingItem(texture.name);
-        }
-        this.context.projectActions.pushLastSelectedCatalogElementToHistory(this.props.catalog.elements[texture.name]);
-        if (document.getElementsByClassName('popup-content').length > 0) document.getElementsByClassName('popup-content')[0].style.display = 'none';
-        this.context.projectActions.setIsCabinetDrawing(true);
-      } else {
-        var gltfJSON = JSON.parse(texture.gltf);
-        if (gltfJSON.gltf.some(function (el) {
-          return el.endsWith('gltf');
-        })) {
-          this.context.itemsActions.setDoorHandle(gltfJSON.gltf.find(function (el) {
-            return el.endsWith('gltf');
-          }));
-          if (document.getElementsByClassName('popup-content').length > 0) document.getElementsByClassName('popup-content')[0].style.display = 'none';
-        } else {
-          this.setState({
-            snackBarMessage: 'Invalid Door Handle!!!',
-            isSnackBarOpen: true
-          });
-          console.log('There are no gltf file in ' + texture.name + 'handle!');
-        }
-      }
-      this.props.setToolbar('');
-    }
-  }, {
-    key: "setDoorStyleOption",
-    value: function setDoorStyleOption(value) {
-      this.setState({
-        setDoorStylePopupVisible: false
-      });
-      this.context.itemsActions.setDoorStyle(this.state.changeTexture, this.state.doorTitle, value);
-    }
-  }, {
-    key: "loadProject",
-    value: function loadProject(data) {
-      this.context.projectActions.loadProject(data || this.state.selectedProject, this.props.categoryData);
-    }
-  }, {
-    key: "_submit",
-    value: function _submit() {
-      this.loadProject();
-      this.handleConfirmLoad();
-    }
-  }, {
-    key: "isProjectEmpty",
-    value: function isProjectEmpty(scene) {
-      var layers = scene.layers,
-        selectedLayer = scene.selectedLayer;
-      var layer = layers.get(selectedLayer);
-      return layer.areas.size + layer.lines.size + layer.holes.size + layer.items.size === 0;
-    }
-  }, {
-    key: "loadProjectFromData",
-    value: function loadProjectFromData(item, event) {
-      event.preventDefault();
-      if (this.isProjectEmpty(this.props.state.scene)) {
-        this.loadProject(item.data, this.props.categoryData);
-      } else {
-        this.setState({
-          selectedProject: item.data,
-          isPopupOpen: true
-        });
-      }
-      this.props.setToolbar('');
-    }
-  }, {
-    key: "handleConfirmLoad",
-    value: function handleConfirmLoad() {
-      this.setState({
-        isPopupOpen: false
-      });
-      this.props.setToolbar('');
-    }
-  }, {
-    key: "cabinetselect",
-    value: function cabinetselect(name) {
-      this.select(this.props.catalog.elements[name]);
-    }
-  }, {
-    key: "select",
-    value: function select(element) {
-      this.context.projectActions.unselectAll();
-      switch (element.prototype) {
-        case 'lines':
-          this.context.linesActions.selectToolDrawingLine(element.name);
-          break;
-        case 'items':
-          _constants.ARRAY_3D_MODES.includes(this.props.state.mode) ? this.context.itemsActions.selectToolDrawingItem3D(element.name) : this.context.itemsActions.selectToolDrawingItem(element.name);
-          break;
-        case 'holes':
-          this.context.holesActions.selectToolDrawingHole(element.name);
-          break;
-      }
-      this.context.projectActions.pushLastSelectedCatalogElementToHistory(element);
-      this.context.projectActions.setIsCabinetDrawing(true);
-    }
-  }, {
-    key: "collapseAction",
-    value: function collapseAction(i) {
-      if (i == 0) {
-        if (this.state.cabinetCollapse == false) this.setState({
-          cabinetCollapse: true,
-          doorCollapse: true
-        });else this.setState({
-          cabinetCollapse: false,
-          doorCollapse: true
-        });
-      }
-      if (i == 1) {
-        if (this.state.doorCollapse == false) this.setState({
-          cabinetCollapse: true,
-          doorCollapse: true
-        });else this.setState({
-          cabinetCollapse: true,
-          doorCollapse: false
-        });
-      }
-      if (i == 2) this.setState({
-        floorCollapse: !this.state.floorCollapse
-      });
-      if (i == 3) this.setState({
-        doorExpand: !this.state.doorExpand
-      });
-      if (i == 4) {}
-    }
-  }, {
-    key: "expandDoorStyleAction",
-    value: function expandDoorStyleAction() {
-      this.setState({
-        doorStyleExpand: (this.state.doorStyleExpand + 1) % 2
-      });
-    }
-  }, {
-    key: "expandCabinetAction",
-    value: function expandCabinetAction() {
-      this.setState({
-        cabinetExpand: (this.state.cabinetExpand + 1) % 2
-      });
-    }
-  }, {
-    key: "expandApplianceAction",
-    value: function expandApplianceAction() {
-      this.setState({
-        applianceExpand: (this.state.applianceExpand + 1) % 2
-      });
-    }
-  }, {
-    key: "plgItemAction",
-    value: function plgItemAction(url, name, gltfUrl, self) {
-      var purls = this.state.plgUrls;
-      if (url == 'dir') {
-        purls.push(name);
-      }
-      if (url == 'before') purls.pop();
-      if (url != 'dir' && url != 'before') {
-        this.context.itemsActions.replaceSubmodule(gltfUrl);
-      }
-      this.updateplgItems(this.state.plgUrls);
-    }
-  }, {
-    key: "updateplgItems",
-    value: function updateplgItems(urls) {
-      var getUrl = '';
-      for (var i = 0; i < urls.length; i++) {
-        getUrl += '/';
-        getUrl += urls[i];
-      }
-    }
-  }, {
-    key: "filterChange",
-    value: function filterChange(self) {
-      var setValue = self.target.value;
-      this.setState({
-        filter: setValue
-      });
-    }
-  }, {
-    key: "setAnimValue",
-    value: function setAnimValue(event) {
-      var value = event.target.value;
-      this.setState({
-        animValue: value
-      });
-    }
-  }, {
-    key: "selectFromRecent",
-    value: function selectFromRecent(i) {
-      var doorTitle = this.state.recentStyle[i].doorTitle;
-      doorTitle.pop();
-      var textureData = this.state.recentStyle[i].textureData;
-      this.context.itemsActions.setDoorStyle(textureData, doorTitle);
-      this.setState({
-        cabinetStyle: 0,
-        currentTexture: textureData,
-        dData: this.state.DoorStyles,
-        doorTitle: [],
-        dDataArray: []
-      });
-    }
-  }, {
-    key: "selected",
-    value: function selected(doorId) {
-      var texture = this.state.currentTexture;
-      if (texture) return texture.id === doorId && (0, _utils.getInstallationSuffix)(_constants.INSTALLATION_SUFFIX_TYPE.NAME, texture) === this.state.install ? 1 : 0;else return 0;
-    }
-  }, {
-    key: "onSearch",
-    value: function onSearch(e, i) {
-      if (i == 0) this.setState({
-        searchCabinet: e.target.value
-      });else this.setState({
-        searchDoor: e.target.value
-      });
-    }
-  }, {
-    key: "onUpdate",
-    value: function onUpdate(e) {
-      this.setState({
-        search: e.target.value
-      });
-    }
-  }, {
-    key: "drawCircle",
-    value: function drawCircle(ctx, p, color, radius) {
-      if (typeof radius == 'undefined') radius = 2;
-      if (typeof color == 'undefined') color = 'red';
-      ctx.beginPath();
-      ctx.fillStyle = color;
-      ctx.arc(p.x, p.y, radius, 0, 2 * Math.PI);
-      ctx.fill();
-    }
-  }, {
-    key: "drawPoly",
-    value: function drawPoly(ctx, points, color) {
-      ctx.globalAlpha = 1;
-      ctx.strokeStyle = color ? color : 'red';
-      ctx.beginPath();
-      var p = points[points.length - 1];
-      ctx.moveTo(p.x, p.y);
-      for (var i = 0; i < points.length; i++) {
-        var p = points[i];
-        ctx.lineTo(p.x, p.y);
-      }
-      ctx.stroke();
-    }
-  }, {
-    key: "percentToPxHor",
-    value: function percentToPxHor(canvas, intPx) {
-      return intPx * canvas.width / 100;
-    }
-  }, {
-    key: "percentToPxVert",
-    value: function percentToPxVert(canvas, intPx) {
-      return intPx * canvas.height / 100;
-    }
-  }, {
-    key: "canvasUpdate",
-    value: function canvasUpdate(ctx, canvas) {
-      var _this3 = this;
-      if (ctx === undefined || this.state.image === '') return;
-      // clear canvas
-      ctx.fillStyle = 'white';
-      ctx.fillRect(0, 0, canvas.width, canvas.height);
-      ctx.globalAlpha = 0.3;
-      ctx.drawImage(this.state.image, 0, 0, canvas.width, canvas.height);
-      if (this.state.isMouseDown) {
-        ctx.globalAlpha = 1;
-        ctx.drawImage(this.state.image, this.state.firstMousePoint.x, this.state.firstMousePoint.y, this.state.mouse.p.x - this.state.firstMousePoint.x, this.state.mouse.p.y - this.state.firstMousePoint.y, this.state.firstMousePoint.x, this.state.firstMousePoint.y, this.state.mouse.p.x - this.state.firstMousePoint.x, this.state.mouse.p.y - this.state.firstMousePoint.y);
-        var img = new Image();
-        img.crossOrigin = 'anonymous';
-        img.src = canvas.toDataURL();
-        img.onload = function () {
-          _this3.setState({
-            croppedImage: img
-          });
-        };
-      }
-
-      // draw points and connect
-      this.drawCircle(ctx, this.state.topLeft, 'blue');
-      this.drawCircle(ctx, this.state.bottomLeft, 'green');
-      this.drawCircle(ctx, this.state.topRight, 'red');
-      this.drawCircle(ctx, this.state.bottomRight, 'orange');
-      this.drawPoly(ctx, [this.state.topLeft, this.state.bottomLeft, this.state.bottomRight, this.state.topRight]);
-
-      // draw mouse circle
-      // this.drawCircle(ctx, this.state.mouse.p, 'rgba(255,200,0,.75)', 10);
-
-      // draw mouse lines
-      var h1 = {
-        x: 0,
-        y: this.state.mouse.p.y
-      };
-      var h2 = {
-        x: canvas.width,
-        y: this.state.mouse.p.y
-      };
-      var v1 = {
-        x: this.state.mouse.p.x,
-        y: 0
-      };
-      var v2 = {
-        x: this.state.mouse.p.x,
-        y: canvas.height
-      };
-      if (Math.abs(this.state.mouse.p.x - this.state.firstMousePoint.x) < 60 && this.state.isMouseDown) {
-        this.drawPoly(ctx, [v1, v2]);
-      } else {
-        this.drawPoly(ctx, [v1, v2], 'rgba(64, 155, 197, 1)');
-      }
-      if (Math.abs(this.state.mouse.p.y - this.state.firstMousePoint.y) < 60 && this.state.isMouseDown) {
-        this.drawPoly(ctx, [h1, h2]);
-      } else {
-        this.drawPoly(ctx, [h1, h2], 'rgba(64, 155, 197, 1)');
-      }
-    }
-  }, {
-    key: "imageBrowserDownload",
-    value: function imageBrowserDownload(canvas, imageUri) {
-      var fileOutputLink = document.createElement('a');
-      var filename = 'output' + Date.now() + '.png';
-      filename = window.prompt('Insert output filename', filename);
-      if (!filename) return;
-      fileOutputLink.setAttribute('download', filename);
-      fileOutputLink.href = imageUri;
-      fileOutputLink.style.display = 'none';
-      document.body.appendChild(fileOutputLink);
-      setTimeout(function () {
-        fileOutputLink.click();
-      }, 100);
-      document.body.removeChild(fileOutputLink);
-      this.setState({
-        isModalVisible: false,
-        imageUri: '',
-        image: ''
-      });
-      canvas.style.zIndex = -1;
-      document.removeEventListener('keydown', this.onKeyDown, false);
-      document.removeEventListener('mouseup', this.onMouseUp_On_New_Save_SQ_DA, false);
-      canvas.style.display = 'none';
-    }
-  }, {
-    key: "makeCroppedImage",
-    value: function makeCroppedImage(ctx, canvas) {
-      // clear canvas
-      ctx.fillStyle = 'white';
-      ctx.fillRect(0, 0, canvas.width, canvas.height);
-      ctx.drawImage(this.state.croppedImage, 0, 0, canvas.width, canvas.height);
-      var croppedCanvas = document.createElement('canvas');
-      var croppedCtx = croppedCanvas.getContext('2d');
-
-      // Set width and height for the new croppedCanvas
-      var heightAtt = document.createAttribute('height');
-      heightAtt.value = Math.abs(this.state.mouse.p.y - this.state.firstMousePoint.y);
-      croppedCanvas.setAttributeNode(heightAtt);
-      var widthAtt = document.createAttribute('width');
-      widthAtt.value = Math.abs(this.state.mouse.p.x - this.state.firstMousePoint.x);
-      croppedCanvas.setAttributeNode(widthAtt);
-      croppedCtx.fillStyle = 'white';
-      croppedCtx.fillRect(0, 0, croppedCanvas.width, croppedCanvas.height);
-      croppedCtx.drawImage(this.state.image, this.state.mouse.p.x - this.state.firstMousePoint.x < 0 ? this.state.mouse.p.x : this.state.firstMousePoint.x, this.state.mouse.p.y - this.state.firstMousePoint.y < 0 ? this.state.mouse.p.y : this.state.firstMousePoint.y, croppedCanvas.width, croppedCanvas.height, 0, 0, croppedCanvas.width, croppedCanvas.height);
-      this.imageBrowserDownload(canvas, croppedCanvas.toDataURL());
-    }
-  }, {
-    key: "setMousePoint",
-    value: function setMousePoint(e, canvas, type) {
-      var ctx = canvas.getContext('2d');
-      var rectCanvas = canvas.getBoundingClientRect();
-      var positionX = Math.round((e.clientX - rectCanvas.left) / canvas.width * 100 * 1000) / 1000;
-      var positionY = Math.round((e.clientY - rectCanvas.top) / canvas.height * 100 * 1000) / 1000;
-      switch (type) {
-        case 'down':
-          this.setState({
-            firstMousePoint: {
-              x: this.percentToPxHor(canvas, positionX),
-              y: this.percentToPxVert(canvas, positionY)
-            }
-          });
-          break;
-        case 'move':
-          this.setState({
-            mouse: {
-              p: {
-                x: this.percentToPxHor(canvas, positionX),
-                y: this.percentToPxVert(canvas, positionY)
-              }
-            }
-          });
-          break;
-        case 'up':
-          this.setState({
-            lastMousePoint: {
-              x: this.percentToPxHor(canvas, positionX),
-              y: this.percentToPxVert(canvas, positionY)
-            }
-          });
-          if (!(Math.abs(this.state.mouse.p.x - this.state.firstMousePoint.x) < 60 || Math.abs(this.state.mouse.p.y - this.state.firstMousePoint.y) < 60) && ctx !== undefined) {
-            this.makeCroppedImage(ctx, canvas);
-          } else {
-            this.setState({
-              isModalVisible: false,
-              imageUri: '',
-              image: ''
-            });
-            canvas.style.zIndex = -1;
-            document.removeEventListener('keydown', this.onKeyDown, false);
-            document.removeEventListener('mouseup', this.onMouseUp_On_New_Save_SQ_DA, false);
-            canvas.style.display = 'none';
-          }
-          break;
-        default:
-          break;
-      }
-    }
-  }, {
-    key: "onMouseUp_On_New_Save_SQ_DA",
-    value: function onMouseUp_On_New_Save_SQ_DA(e) {
-      var canvas = document.getElementById('canvas_crop_image');
-      switch (e.target.textContent) {
-        case 'New':
-        case 'Save':
-        case 'Submit for Quote':
-        case 'Designer Assistance':
-          canvas.style.zIndex = -1;
-          document.removeEventListener('keydown', this.onKeyDown, false);
-          document.removeEventListener('mouseup', this.onMouseUp_On_New_Save_SQ_DA, false);
-          canvas.style.display = 'none';
-          this.setState({
-            isModalVisible: false,
-            isMouseDown: false,
-            imageUri: '',
-            image: ''
-          });
-          break;
-        default:
-          break;
-      }
-      if (e.target.outerHTML.includes('review_quote.svg') || e.target.outerHTML.includes('consult_designer.svg')) {
-        canvas.style.zIndex = -1;
-        document.removeEventListener('keydown', this.onKeyDown, false);
-        document.removeEventListener('mouseup', this.onMouseUp_On_New_Save_SQ_DA, false);
-        canvas.style.display = 'none';
-        this.setState({
-          isModalVisible: false,
-          isMouseDown: false,
-          imageUri: '',
-          image: ''
-        });
-      }
-    }
-  }, {
-    key: "onKeyDown",
-    value: function onKeyDown(e) {
-      if (e.keyCode === _constants.KEYBOARD_BUTTON_CODE.ESC) {
-        // Escape
-        var canvas = document.getElementById('canvas_crop_image');
-        document.removeEventListener('mouseup', this.onMouseUp_On_New_Save_SQ_DA, false);
-        canvas.style.display = 'none';
-        if (this.props.state.isCabinetDrawing) {
-          this.context.projectActions.setIsCabinetDrawing(false);
-        } else {
-          this.props.setToolbar('');
-        }
-        this.setState({
-          isModalVisible: false,
-          isMouseDown: false,
-          imageUri: '',
-          image: ''
-        });
-      }
-      if (e.keyCode == _constants.KEYBOARD_BUTTON_CODE.DELETE) {
-        this.context.projectActions.remove();
-      }
-    }
-  }, {
-    key: "onMouseDown",
-    value: function onMouseDown(e) {
-      var canvas = document.getElementById('canvas_crop_image');
-      this.setMousePoint(e, canvas, 'down');
-      this.setState({
-        isMouseDown: true
-      });
-    }
-  }, {
-    key: "onMouseMove",
-    value: function onMouseMove(e) {
-      var canvas = document.getElementById('canvas_crop_image');
-      var ctx = canvas.getContext('2d');
-      this.setMousePoint(e, canvas, 'move');
-      this.canvasUpdate(ctx, canvas);
-    }
-  }, {
-    key: "onMouseUp",
-    value: function onMouseUp(e) {
-      var canvas = document.getElementById('canvas_crop_image');
-      this.setMousePoint(e, canvas, 'up');
-      this.setState({
-        isMouseDown: false
-      });
-    }
-  }, {
-    key: "openTab",
-    value: function openTab(name) {
-      var i, tabcontent, tablinks;
-      tabcontent = document.getElementsByClassName('tabcontent');
-      for (i = 0; i < tabcontent.length; i++) {
-        tabcontent[i].style.display = 'none';
-      }
-      tablinks = document.getElementsByClassName('tablinks');
-      for (i = 0; i < tablinks.length; i++) {
-        tablinks[i].className = tablinks[i].className.replace(' selected', '');
-      }
-      document.getElementById(name).style.display = 'flex';
-      document.getElementById(name + '_link').className += ' selected';
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this4 = this,
-        _this$state$DoorStyle,
-        _this$state$DoorStyle2,
-        _this$state$DoorStyle3;
-      var _this$props = this.props,
-        state = _this$props.state,
-        width = _this$props.width,
-        height = _this$props.height,
-        isShowProperty = _this$props.isShowProperty,
-        _this$context = this.context,
-        projectActions = _this$context.projectActions,
-        viewer2DActions = _this$context.viewer2DActions,
-        linesActions = _this$context.linesActions,
-        viewer3DActions = _this$context.viewer3DActions,
-        itemsActions = _this$context.itemsActions;
-      var products = this.props.products;
-      var _this$state = this.state,
-        cabinetCategory = _this$state.cabinetCategory,
-        subCabinetCategory = _this$state.subCabinetCategory,
-        selectedFinishing = _this$state.selectedFinishing,
-        cabinetStyleChanging = _this$state.cabinetStyleChanging,
-        cabinetStyle = _this$state.cabinetStyle,
-        subCabinetStyle = _this$state.subCabinetStyle,
-        cabinetColor = _this$state.cabinetColor,
-        currentTexture = _this$state.currentTexture,
-        ceilingHeight = _this$state.ceilingHeight,
-        measurementUnit = _this$state.measurementUnit,
-        viewMoreDoorstyle = _this$state.viewMoreDoorstyle,
-        selectedRoomElement = _this$state.selectedRoomElement,
-        searchName = _this$state.searchName,
-        chosenReplacedItem = _this$state.chosenReplacedItem,
-        helpViewNum = _this$state.helpViewNum,
-        notes = _this$state.notes,
-        videoUrl = _this$state.videoUrl,
-        moldingData = _this$state.moldingData;
-      var scene = state.get('scene');
-      var layerID = scene.get('selectedLayer');
-      var panel;
-      var dirUrl = '';
-      var mode = state.get('mode');
-      var tt = this;
-      this.state.counterTop.forEach(function (data) {
-        var scene = tt.props.state.get('scene');
-        var layerID = scene.get('selectedLayer');
-        var layers = scene.layers.get(layerID);
-        var counterTop = layers.get('counterTop');
-        data.selected = (counterTop && counterTop.uri) == data.texture;
-      });
-      var userInfo = [];
-      if (this.props.match) userInfo = this.props.match.params;
-      var update = function update(LengthInput, unit, type) {
-        var newLength = (0, _math.toFixedFloat)(LengthInput);
-        if (type === 0) {
-          _this4.setState({
-            ceilingHeight: newLength
-          });
-          viewer2DActions.updateCeilHeight(newLength);
-          viewer2DActions.updateCeilHeightUnit(unit._unit);
-          viewer3DActions.update3DCeilHeight(newLength);
-          viewer3DActions.update3DCeilHeightUnit(unit._unit);
-        } else {
-          _this4.setState({
-            ceilingHeight: (0, _convertUnits["default"])(newLength).from(_this4.state.measurementUnit._unit).to(unit._unit),
-            measurementUnit: unit
-          });
-          viewer2DActions.updateCeilHeight((0, _convertUnits["default"])(newLength).from(_this4.state.measurementUnit._unit).to(unit._unit));
-          viewer2DActions.updateCeilHeightUnit(unit._unit);
-          viewer3DActions.update3DCeilHeightUnit(unit._unit);
-          viewer3DActions.update3DCeilHeight((0, _convertUnits["default"])(newLength).from(_this4.state.measurementUnit._unit).to(unit._unit));
-        }
-      };
-      var openReplacedItemToolbar = function openReplacedItemToolbar(oldItems, newItems) {
-        var newItemsIds = Object.keys(newItems);
-        var oldItemIds = Object.keys(oldItems);
-        var replacedItemId = newItemsIds.find(function (id) {
-          return !oldItemIds.includes(id);
-        });
-        // closes the setting dialog
-        document.getElementById('setting_dialog').style.display = 'none';
-        itemsActions.selectItem(layerID, replacedItemId);
-      };
-      this.state.backsplash.forEach(function (data) {
-        var scene = tt.props.state.get('scene');
-        var layerID = scene.get('selectedLayer');
-        var layers = scene.layers.get(layerID);
-        var backsplash = layers.get('backsplash');
-        data.selected = (backsplash && backsplash.uri) == data.texture;
-      });
-      this.state.molding.forEach(function (data) {
-        var scene = tt.props.state.get('scene');
-        var layerID = scene.get('selectedLayer');
-        var layers = scene.layers.get(layerID);
-        var molding = layers.get('molding');
-        data.selected = molding && molding.some(function (m) {
-          return m.name === data.name;
-        });
-      });
-      this.state.wallColors.forEach(function (data) {
-        var scene = tt.props.state.get('scene');
-        var layerID = scene.get('selectedLayer');
-        var layers = scene.layers.get(layerID);
-        var wallColor = layers.get('wallColor');
-        data.selected = wallColor == data.color;
-      });
-      this.state.floorStyles.forEach(function (data) {
-        var scene = tt.props.state.get('scene');
-        var layerID = scene.get('selectedLayer');
-        var layers = scene.layers.get(layerID);
-        var floorStyles = layers.get('floorStyle');
-        data.selected = (floorStyles && floorStyles.uri) == data.texture;
-      });
-      this.state.doorHandle.forEach(function (data) {
-        var scene = tt.props.state.get('scene');
-        var layerID = scene.get('selectedLayer');
-        var layers = scene.layers.get(layerID);
-        var doorHandle = layers.get('doorHandle');
-        data.selected = doorHandle && data.gltf.includes(doorHandle);
-      });
-      var alterate = state.get('alterate');
-      var topBtnAction = state.mode == _constants.MODE_IDLE || state.mode == _constants.MODE_2D_PAN ? function () {
-        linesActions.selectToolDrawingLine('wall');
-        _this4.props.setToolbar('');
-      } : function () {
-        projectActions.setMode(_constants.MODE_IDLE);
-        linesActions.selectToolDrawingLine('wall');
-        _this4.props.setToolbar('');
-      };
-      var saveScreenshotToFile = function saveScreenshotToFile(event) {
-        event.preventDefault();
-        var canvas = document.getElementsByTagName('canvas')[1];
-        var canvas_crop_image = document.getElementById('canvas_crop_image');
-        var ctx = canvas_crop_image.getContext('2d');
-
-        // Set width and height for the new canvas
-        var heightAtt = document.createAttribute('height');
-        heightAtt.value = canvas.height;
-        canvas_crop_image.setAttributeNode(heightAtt);
-        var widthAtt = document.createAttribute('width');
-        widthAtt.value = canvas.width;
-        canvas_crop_image.setAttributeNode(widthAtt);
-        ctx.fillStyle = 'white';
-        ctx.fillRect(0, 0, canvas_crop_image.width, canvas_crop_image.height);
-        var img = new Image();
-        img.crossOrigin = 'anonymous';
-        img.src = canvas.toDataURL();
-        img.onload = function () {
-          ctx.globalAlpha = 0.3;
-          ctx.drawImage(img, 0, 0, canvas_crop_image.width, canvas_crop_image.height);
-          _this4.setState({
-            isModalVisible: true,
-            imageUri: canvas.toDataURL(),
-            image: img
-          });
-          canvas_crop_image.style.zIndex = 11;
-          document.addEventListener('keydown', _this4.onKeyDown, false);
-          document.addEventListener('mouseup', _this4.onMouseUp_On_New_Save_SQ_DA, false);
-          canvas_crop_image.style.display = 'block';
-        };
-      };
-      var saveSVGScreenshotToFile = /*#__PURE__*/function () {
-        var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(event) {
-          var _maxWidthSVGElement;
-          var svgElements, maxWidthSVGElement, i, images, readBlob, _iterator, _step, image, url, response, blob, content, serializer, img, canvas, ctx, heightAtt, widthAtt, _t, _t2;
-          return _regenerator().w(function (_context) {
-            while (1) switch (_context.p = _context.n) {
-              case 0:
-                event.preventDefault();
-                svgElements = document.getElementsByTagName('svg');
-                maxWidthSVGElement = svgElements[0];
-                for (i = 1; i < svgElements.length; i++) {
-                  if (svgElements[i].width.baseVal.value > maxWidthSVGElement.width.baseVal.value) {
-                    maxWidthSVGElement = svgElements[i];
-                  }
-                }
-                images = (_maxWidthSVGElement = maxWidthSVGElement) === null || _maxWidthSVGElement === void 0 ? void 0 : _maxWidthSVGElement.getElementsByTagName('image');
-                readBlob = function readBlob(b) {
-                  return new Promise(function (res) {
-                    var reader = new FileReader();
-                    reader.onloadend = function () {
-                      res(reader.result);
-                    };
-                    reader.onerror = function () {
-                      res(b);
-                    };
-                    reader.readAsDataURL(b);
-                  });
-                };
-                _context.p = 1;
-                _iterator = _createForOfIteratorHelper(images);
-                _context.p = 2;
-                _iterator.s();
-              case 3:
-                if ((_step = _iterator.n()).done) {
-                  _context.n = 8;
-                  break;
-                }
-                image = _step.value;
-                url = (0, _helper.getSignedUrl)(image.getAttribute('href'));
-                _context.n = 4;
-                return fetch(url, {
-                  cache: 'no-store'
-                });
-              case 4:
-                response = _context.v;
-                _context.n = 5;
-                return response.blob();
-              case 5:
-                blob = _context.v;
-                _context.n = 6;
-                return readBlob(blob);
-              case 6:
-                content = _context.v;
-                image.setAttribute('href', content);
-              case 7:
-                _context.n = 3;
-                break;
-              case 8:
-                _context.n = 10;
-                break;
-              case 9:
-                _context.p = 9;
-                _t = _context.v;
-                _iterator.e(_t);
-              case 10:
-                _context.p = 10;
-                _iterator.f();
-                return _context.f(10);
-              case 11:
-                _context.n = 13;
-                break;
-              case 12:
-                _context.p = 12;
-                _t2 = _context.v;
-              case 13:
-                serializer = new XMLSerializer();
-                img = new Image();
-                canvas = document.getElementById('canvas_crop_image');
-                ctx = canvas.getContext('2d');
-                heightAtt = document.createAttribute('height');
-                heightAtt.value = maxWidthSVGElement.height.baseVal.value;
-                canvas.setAttributeNode(heightAtt);
-                widthAtt = document.createAttribute('width');
-                widthAtt.value = maxWidthSVGElement.width.baseVal.value;
-                canvas.setAttributeNode(widthAtt);
-                ctx.fillStyle = 'white';
-                ctx.fillRect(0, 0, canvas.width, canvas.height);
-                img.crossOrigin = 'anonymous';
-                img.src = "data:image/svg+xml;base64,".concat(window.btoa(serializer.serializeToString(maxWidthSVGElement)));
-                img.onload = function () {
-                  ctx.globalAlpha = 0.3;
-                  ctx.drawImage(img, 0, 0, maxWidthSVGElement.width.baseVal.value, maxWidthSVGElement.height.baseVal.value);
-                  _this4.setState({
-                    isModalVisible: true,
-                    imageUri: canvas.toDataURL(),
-                    image: img
-                  });
-                };
-                canvas.style.zIndex = 11;
-                document.addEventListener('keydown', _this4.onKeyDown, false);
-                document.addEventListener('mouseup', _this4.onMouseUp_On_New_Save_SQ_DA, false);
-                canvas_crop_image.style.display = 'block';
-              case 14:
-                return _context.a(2);
-            }
-          }, _callee, null, [[2, 9, 10, 11], [1, 12]]);
-        }));
-        return function saveSVGScreenshotToFile(_x) {
-          return _ref.apply(this, arguments);
-        };
-      }();
-
-      // control button active remove//
-      var control = this.state.controlButton;
-      var objectProperty = '';
-      var item_warning = '';
-      var layer = state.scene.layers.get(state.scene.selectedLayer);
-      var selected = [];
-      layer.selected.forEach(function (data, key) {
-        if (key == 'vertices') return;
-        if (data.size > 0) {
-          var values = data.toJS();
-          for (var i = 0; i < values.length; i++) {
-            selected.push({
-              type: key,
-              id: values[i]
-            });
-          }
-        }
-      });
-      if (mode.indexOf('DRAW') != -1) {
-        // hintText = (<S.hintText>Press ESC key to finish drawing!</S.hintText>);
-        hintText = /*#__PURE__*/_react["default"].createElement(_myComponents.StyledAlert, {
-          text: /*#__PURE__*/_react["default"].createElement("span", {
-            style: {
-              fontSize: 16,
-              fontFamily: _constants.DEFAULT_FONT_FAMILY
-            }
-          }, "Press ", /*#__PURE__*/_react["default"].createElement("strong", null, "Enter"), " key to finish drawing, or", ' ', /*#__PURE__*/_react["default"].createElement("strong", null, "ESC"), " to cancel"),
-          onClose: function onClose() {
-            return hintText = '';
-          }
-        });
-        // if (mode.indexOf("DRAW") != -1) {
-        //   hintText = <StyledAlert text = "Hit ESC to complete the current wall" />;
-      } else if (this.state.isModalVisible) {
-        hintText = /*#__PURE__*/_react["default"].createElement(_myComponents.StyledAlert, {
-          text: /*#__PURE__*/_react["default"].createElement("span", {
-            style: {
-              fontSize: 16,
-              fontFamily: _constants.DEFAULT_FONT_FAMILY
-            }
-          }, "Press ", /*#__PURE__*/_react["default"].createElement("strong", null, "ESC"), " key to stop clipping!"),
-          onClose: function onClose() {
-            return hintText = '';
-          }
-        });
-      } else {
-        hintText = '';
-      }
-      if (selected.length === 1) {
-        var planData = window.planData;
-        var selData = selected[0];
-        var currentObject;
-        switch (selData.type) {
-          case 'holes':
-            currentObject = layer.holes.get(selData.id);
-            break;
-          case 'items':
-            currentObject = layer.items.get(selData.id);
-            break;
-          case 'lines':
-            currentObject = layer.lines.get(selData.id);
-            break;
-        }
-        if (currentObject !== undefined) {
-          var _currentObject2;
-          var select = (0, _geometry.findCatalogElement)(this.props.catalog, (_currentObject2 = currentObject) === null || _currentObject2 === void 0 ? void 0 : _currentObject2.type);
-          var replaceCabinetData;
-          if (select) {
-            var attrPorpSeparatorStyle = {
-              position: 'relative',
-              height: '50px',
-              display: 'flex',
-              alignItems: 'center',
-              width: '100%'
-            };
-            if (select.prototype === 'items') {
-              var _currentTexture$doorS3, _currentTexture$doorS4, _currentTexture$doorS5, _currentTexture$doorS6;
-              this.props.categoryData.data.cabinets.map(function (value) {
-                value.items.map(function (category) {
-                  if (category.name == select.obj.cabinet_category) {
-                    replaceCabinetData = category.items;
-                  }
-                });
-              });
-              var objSKU = select.obj.sku_number;
-              if (this.state.currentTexture !== null && select.obj.skuArray.length !== 0) {
-                var doorStyle = currentObject.doorStyle,
-                  dcId;
-                if (doorStyle instanceof _immutable.Map) {
-                  dcId = currentObject.doorStyle.get('id');
-                } else {
-                  dcId = currentObject.doorStyle.id;
-                }
-                var tempSKU = select.obj.skuArray.find(function (el) {
-                  return el.door_color_id === dcId;
-                });
-                if (tempSKU !== undefined) {
-                  objSKU = tempSKU.sku;
-                }
-              }
-              var isFiller = select.long_name.toUpperCase().includes('FILLER') || select.long_name.toUpperCase().includes('PANEL');
-              var tempWidth = currentObject.properties.get('width');
-              var tempDepth = currentObject.properties.get('depth');
-              var tempHeight = currentObject.properties.get('height');
-              var itemHeight = select.info.sizeinfo.height;
-              var itemWidth = select.info.sizeinfo.width;
-              var itemDepth = select.info.sizeinfo.depth;
-              var _currentObject = currentObject.toJS();
-              if (_currentObject.doorStyle.doorStyles !== undefined) {
-                if (_currentObject.doorStyle.doorStyles.is_euro_cds !== undefined) {
-                  if (_currentObject.doorStyle.doorStyles.is_euro_cds && _currentObject.doorStyle.door_style_name === 'Euro & Frameless') {
-                    tempWidth = new _immutable.Map({
-                      _length: _currentObject.doorStyle.doorStyles.euro_width,
-                      _unit: _currentObject.doorStyle.doorStyles.width_unit.substr(0, 2)
-                    });
-                    tempDepth = new _immutable.Map({
-                      _length: _currentObject.doorStyle.doorStyles.euro_length,
-                      _unit: _currentObject.doorStyle.doorStyles.length_unit.substr(0, 2)
-                    });
-                    tempHeight = new _immutable.Map({
-                      _length: _currentObject.doorStyle.doorStyles.euro_height,
-                      _unit: _currentObject.doorStyle.doorStyles.height_unit.substr(0, 2)
-                    });
-                    itemHeight = tempHeight.get('_length');
-                    itemWidth = tempWidth.get('_length');
-                    itemDepth = tempDepth.get('_length');
-                  }
-                }
-              }
-              var doorStyleThumbnail, doorStyleName, _installation;
-              if (_currentObject.doorStyle.thumbnail) doorStyleThumbnail = _currentObject.doorStyle.thumbnail;
-              if (_currentObject.doorStyle.name) {
-                doorStyleName = _currentObject.doorStyle.name;
-                _installation = (0, _utils.getInstallationSuffix)(_constants.INSTALLATION_SUFFIX_TYPE.NAME, _currentObject.doorStyle);
-              }
-              var _width = tempWidth ? (0, _math.formatNumber)((0, _convertUnits["default"])(tempWidth.get('_length')).from(tempWidth.get('_unit')).to('in'), _constants.DECIMAL_PLACES_2) : itemWidth;
-              if (tempWidth.get('_unit') === 'in') _width = itemWidth;
-              var _height = tempHeight ? (0, _math.formatNumber)((0, _convertUnits["default"])(tempHeight.get('_length')).from(tempHeight.get('_unit')).to('in'), _constants.DECIMAL_PLACES_2) : itemHeight;
-              if (tempHeight.get('_unit') === 'in') _height = itemHeight;
-              var depth = tempDepth ? (0, _math.formatNumber)((0, _convertUnits["default"])(tempDepth.get('_length')).from(tempDepth.get('_unit')).to('in'), _constants.DECIMAL_PLACES_2) : itemDepth;
-              if (tempDepth.get('_unit') === 'in') depth = itemDepth;
-              var doorColor = currentObject.doorStyle;
-              if (currentObject.doorStyle.size) doorColor = currentObject.doorStyle.toJS();
-              var internalSKU = (0, _utils.makeSKUForMagento)(currentObject, this.props.catalog, this.props.categoryData);
-              var shouldHideSkuNumber = select.type === 'appliance' || select.type === 'furnishing' || select.type === 'lighting' || select.long_name.toLowerCase().includes('wall') && select.type !== 'cabinet';
-              item_warning = /*#__PURE__*/_react["default"].createElement(S.ItemCustomImageWrapper, {
-                id: "item_warning"
-              }, /*#__PURE__*/_react["default"].createElement(S.ItemCustomImage, {
-                src: "/assets/img/svg/3d_item_warning_info.svg",
-                onMouseOver: function onMouseOver() {
-                  return document.getElementById('warning_box').style.display = 'flex';
-                },
-                onMouseOut: function onMouseOut() {
-                  return document.getElementById('warning_box').style.display = 'none';
-                }
-              }), /*#__PURE__*/_react["default"].createElement(S.WarningItem, {
-                id: "warning_box"
-              }, /*#__PURE__*/_react["default"].createElement(S.SubCategoryItemImage, {
-                maskImage: "/assets/img/svg/3d_item_warning_info.svg",
-                style: {
-                  backgroundColor: _constants.BG_COLOR_1,
-                  marginRight: 10,
-                  height: 30,
-                  width: 30
-                }
-              }), "This item is not available in the current door style. Replace it with another one."), /*#__PURE__*/_react["default"].createElement(S.ItemCustomImage, {
-                src: "/assets/img/svg/3d_item_warning_edit.svg",
-                style: {
-                  marginTop: 10
-                },
-                onClick: function onClick() {
-                  _this4.props.setToolbar('door-style');
-                  _this4.setState({
-                    cabinetStyleChanging: true
-                  });
-                }
-              }));
-              objectProperty = this.props.replaceCabinetFlag == true ?
-              /*#__PURE__*/
-              // replace cabinet list
-              _react["default"].createElement(PS.ContentObjectWrapper, {
-                headerH: this.props.headerH,
-                style: {
-                  width: 'fit-content',
-                  height: '100%'
-                }
-              }, /*#__PURE__*/_react["default"].createElement(S.SubToolbarWrapper, {
-                style: {
-                  alignItems: 'flex-start',
-                  marginLeft: 20,
-                  minWidth: 250
-                }
-              }, /*#__PURE__*/_react["default"].createElement(PS.DesignValue, {
-                style: {
-                  margin: 0,
-                  fontSize: 20,
-                  fontWeight: 700
-                }
-              }, "Replace Cabinet"), /*#__PURE__*/_react["default"].createElement(S.SubCategoryItemWrapper, {
-                style: {
-                  overflowY: 'scroll',
-                  maxHeight: 'calc(100vh - 320px)'
-                }
-              }, replaceCabinetData ? replaceCabinetData.map(function (item, key) {
-                var _currentTexture$doorS, _currentTexture$doorS2;
-                return ((_currentTexture$doorS = currentTexture === null || currentTexture === void 0 || (_currentTexture$doorS2 = currentTexture.doorStyles) === null || _currentTexture$doorS2 === void 0 ? void 0 : _currentTexture$doorS2.cds) !== null && _currentTexture$doorS !== void 0 ? _currentTexture$doorS : []).filter(function (cd) {
-                  return cd.itemID === item.itemID;
-                }).length != 0 && /*#__PURE__*/_react["default"].createElement(S.SubCategoryItem, {
-                  onClick: function onClick() {
-                    var selectedItemId = _this4.props.layers.get(_this4.props.selectedLayer).selected.items.toJS()[0];
-                    var selectedPos = {
-                      x: _this4.props.layers.get(_this4.props.selectedLayer).items.get(selectedItemId).x,
-                      y: _this4.props.layers.get(_this4.props.selectedLayer).items.get(selectedItemId).y,
-                      rotation: _this4.props.layers.get(_this4.props.selectedLayer).items.get(selectedItemId).rotation,
-                      selectedItemId: selectedItemId
-                    };
-                    _this4.setState({
-                      chosenReplacedItem: {
-                        selectedPos: selectedPos,
-                        select: select,
-                        item: item
-                      }
-                    });
-                  },
-                  style: {
-                    cursor: 'pointer',
-                    paddingLeft: 0,
-                    backgroundColor: chosenReplacedItem.item && chosenReplacedItem.item.itemID === item.itemID && '#D9E8FF'
-                  },
-                  key: key
-                }, /*#__PURE__*/_react["default"].createElement("img", {
-                  style: {
-                    height: 70,
-                    width: 70
-                  },
-                  src: item.thumbnail
-                }), /*#__PURE__*/_react["default"].createElement(S.SubCategoryItemLabel, {
-                  style: {
-                    textAlign: 'left'
-                  }
-                }, item.long_name, " ", /*#__PURE__*/_react["default"].createElement("br", null), "Width: ", item.info.width, "\" ", /*#__PURE__*/_react["default"].createElement("br", null), "Depth: ", item.info.height, "\" ", /*#__PURE__*/_react["default"].createElement("br", null), "Height: ", item.info.tall, "\""));
-              }) : /*#__PURE__*/_react["default"].createElement(S.SubCategoryItemLabel, null, "No options found"))), /*#__PURE__*/_react["default"].createElement(PS.ButtonBox, {
-                style: {
-                  marginTop: 20,
-                  marginLeft: 0,
-                  opacity: !chosenReplacedItem.item && '0.6',
-                  cursor: !chosenReplacedItem.item && 'not-allowed'
-                },
-                onClick: function onClick() {
-                  if (chosenReplacedItem.item) {
-                    var oldItems = _this4.state.elements.items.toJS();
-                    var selectedPos = chosenReplacedItem.selectedPos,
-                      _select = chosenReplacedItem.select,
-                      item = chosenReplacedItem.item;
-                    itemsActions.replaceItem(selectedPos, _select, item);
-                    _this4.props.replaceCabinet(false);
-                    _this4.setState({
-                      chosenReplacedItem: {}
-                    }, function () {
-                      var newItems = _this4.state.elements.items.toJS();
-                      openReplacedItemToolbar(oldItems, newItems);
-                    });
-                  }
-                }
-              }, /*#__PURE__*/_react["default"].createElement("img", {
-                height: 20,
-                width: 20,
-                src: "/assets/img/svg/check.svg"
-              }), /*#__PURE__*/_react["default"].createElement(PS.ButtonTitle, {
-                style: {
-                  color: _constants.SECONDARY_PURPLE_COLOR,
-                  paddingLeft: 10,
-                  margin: 0,
-                  fontSize: 16
-                }
-              }, "Replace"))) :
-              /*#__PURE__*/
-              // normal property window
-              _react["default"].createElement(PS.ContentObjectWrapper, {
-                headerH: this.props.headerH,
-                style: {
-                  height: '100%'
-                }
-              }, /*#__PURE__*/_react["default"].createElement("div", {
-                style: attrPorpSeparatorStyle
-              }, /*#__PURE__*/_react["default"].createElement(PS.ButtonBox, {
-                style: {
-                  width: '100%',
-                  justifyContent: 'center'
-                }
-              }, /*#__PURE__*/_react["default"].createElement("img", {
-                height: 20,
-                width: 20,
-                src: "/assets/img/svg/copy.svg"
-              }), /*#__PURE__*/_react["default"].createElement(PS.ButtonTitle, {
-                style: {
-                  color: _constants.SECONDARY_PURPLE_COLOR,
-                  paddingLeft: 10,
-                  margin: 0,
-                  fontSize: 16
-                },
-                onClick: function onClick() {
-                  return itemsActions.duplicateSelected(currentObject);
-                }
-              }, ' Duplicate')), /*#__PURE__*/_react["default"].createElement(PS.ButtonBox, {
-                style: {
-                  width: '100%'
-                }
-              }, /*#__PURE__*/_react["default"].createElement(PS.ButtonTitle, {
-                style: {
-                  color: _constants.STATUS_NEGATIVE_COLOR,
-                  fontSize: 16
-                },
-                onClick: function onClick() {
-                  projectActions.setIsCabinetDrawing(false);
-                  projectActions.remove();
-                }
-              }, 'Delete'))), /*#__PURE__*/_react["default"].createElement("div", {
-                style: {
-                  overflowY: 'scroll',
-                  paddingRight: 5,
-                  height: 'calc(100% - 85px)'
-                }
-              }, !shouldHideSkuNumber && /*#__PURE__*/_react["default"].createElement(PS.DesignValue, {
-                style: {
-                  margin: 0,
-                  marginTop: '15px'
-                }
-              }, "SKU: ".concat(select.obj.sku_number)), /*#__PURE__*/_react["default"].createElement(PS.SelectedBox, {
-                style: {
-                  position: 'relative',
-                  margin: '15px 0'
-                }
-              }, /*#__PURE__*/_react["default"].createElement("img", {
-                src: select.info.image,
-                style: {
-                  objectFit: 'contain'
-                }
-              }), doorStyleThumbnail && select.type === 'cabinet' && /*#__PURE__*/_react["default"].createElement("img", {
-                src: doorStyleThumbnail,
-                style: {
-                  objectFit: 'contain',
-                  padding: '28px'
-                }
-              }), select.type === 'cabinet' && ((_currentTexture$doorS3 = currentTexture === null || currentTexture === void 0 || (_currentTexture$doorS4 = currentTexture.doorStyles) === null || _currentTexture$doorS4 === void 0 ? void 0 : _currentTexture$doorS4.cds) !== null && _currentTexture$doorS3 !== void 0 ? _currentTexture$doorS3 : []).filter(function (cd) {
-                return cd.itemID === select.itemID;
-              }).length === 0 && /*#__PURE__*/_react["default"].createElement("div", {
-                style: {
-                  position: 'absolute',
-                  width: 'calc(50% - 10px)',
-                  height: 'calc(100% - 10px)',
-                  backgroundColor: 'rgba(232,187,47,0.7)',
-                  left: 0,
-                  borderRadius: '10px',
-                  border: '3px solid orange',
-                  margin: 5
-                }
-              }), select.type === 'cabinet' && ((_currentTexture$doorS5 = currentTexture === null || currentTexture === void 0 || (_currentTexture$doorS6 = currentTexture.doorStyles) === null || _currentTexture$doorS6 === void 0 ? void 0 : _currentTexture$doorS6.cds) !== null && _currentTexture$doorS5 !== void 0 ? _currentTexture$doorS5 : []).filter(function (cd) {
-                return cd.itemID === select.itemID;
-              }).length === 0 && /*#__PURE__*/_react["default"].createElement("img", {
-                src: "/assets/img/svg/3d_item_warning_edit.svg",
-                onClick: function onClick() {
-                  _this4.props.replaceCabinet(true);
-                },
-                style: {
-                  position: 'absolute',
-                  left: 15,
-                  top: 15,
-                  width: 30,
-                  height: 30,
-                  backgroundColor: 'white',
-                  borderRadius: 15,
-                  cursor: 'pointer'
-                }
-              })), /*#__PURE__*/_react["default"].createElement(PS.PropteryValue1, {
-                style: {
-                  fontWeight: 600
-                }
-              }, select.long_name), /*#__PURE__*/_react["default"].createElement(PS.PropteryValue, {
-                style: {
-                  fontWeight: 400
-                }
-              }, "W", ' ', /*#__PURE__*/_react["default"].createElement("strong", null, (0, _math.formatNumber)((0, _convertUnits["default"])(_width).from('in').to(measurementUnit._unit), _constants.DECIMAL_PLACES_2)), measurementUnit._unit === 'in' ? '"' : measurementUnit._unit, ' ', "x D", ' ', /*#__PURE__*/_react["default"].createElement("strong", null, (0, _math.formatNumber)((0, _convertUnits["default"])(depth).from('in').to(measurementUnit._unit), _constants.DECIMAL_PLACES_2)), measurementUnit._unit === 'in' ? '"' : measurementUnit._unit, ' ', "x H", ' ', /*#__PURE__*/_react["default"].createElement("strong", null, (0, _math.formatNumber)((0, _convertUnits["default"])(_height).from('in').to(measurementUnit._unit), _constants.DECIMAL_PLACES_2)), measurementUnit._unit === 'in' ? '"' : measurementUnit._unit), select.type === 'cabinet' && /*#__PURE__*/_react["default"].createElement(PS.PropteryValue1, null, "Door Style: ", /*#__PURE__*/_react["default"].createElement("strong", null, doorStyleName)), select.type === 'cabinet' && /*#__PURE__*/_react["default"].createElement(PS.PropteryValue1, null, "Installation: ", /*#__PURE__*/_react["default"].createElement("strong", null, _installation)), /*#__PURE__*/_react["default"].createElement(_Pricing.Pricing, {
-                internalSKU: internalSKU,
-                accessToken: this.props.accessToken
-              }), isFiller && this.state.editWidthVisible && /*#__PURE__*/_react["default"].createElement(PS.ChildTitle1, null, /*#__PURE__*/_react["default"].createElement(_formNumberInput["default"], {
-                style: {
-                  width: 88,
-                  height: 24.95,
-                  marginTop: 10
-                },
-                value: _width,
-                onChange: function onChange(event) {
-                  return _this4.handleEditWidth(event.target.value, layerID, selData.id);
-                },
-                precision: 2
-              })), /*#__PURE__*/_react["default"].createElement(PS.DesignValue, null, "Design"), /*#__PURE__*/_react["default"].createElement(_panelElementEditor["default"], {
-                state: state,
-                categoryData: this.props.categoryData,
-                getLinearOfMolding: this.getLinearOfMolding,
-                planData: planData
-              })));
-            } else if (select.prototype === 'holes') {
-              objectProperty = /*#__PURE__*/_react["default"].createElement(PS.ContentObjectWrapper, {
-                headerH: this.props.headerH
-              }, /*#__PURE__*/_react["default"].createElement("div", {
-                style: attrPorpSeparatorStyle
-              }, /*#__PURE__*/_react["default"].createElement(PS.ButtonBox, {
-                style: {
-                  width: '100%',
-                  justifyContent: 'center'
-                }
-              }, /*#__PURE__*/_react["default"].createElement("img", {
-                height: 20,
-                width: 20,
-                src: "/assets/img/svg/copy.svg"
-              }), /*#__PURE__*/_react["default"].createElement(PS.ButtonTitle, {
-                style: {
-                  color: '${SECONDARY_PURPLE_COLOR}',
-                  margin: 0,
-                  paddingLeft: 10,
-                  fontSize: 16
-                },
-                onClick: function onClick() {
-                  return itemsActions.duplicateSelected(currentObject);
-                }
-              }, ' Duplicate')), /*#__PURE__*/_react["default"].createElement(PS.ButtonBox, {
-                style: {
-                  width: '100%'
-                }
-              }, /*#__PURE__*/_react["default"].createElement(PS.ButtonTitle, {
-                style: {
-                  color: 'red',
-                  fontSize: 16
-                },
-                onClick: function onClick() {
-                  return projectActions.remove();
-                }
-              }, 'Delete'))), /*#__PURE__*/_react["default"].createElement(PS.SelectedBox, {
-                style: {
-                  margin: 0
-                }
-              }, /*#__PURE__*/_react["default"].createElement("img", {
-                src: select.info.image,
-                style: {
-                  objectFit: 'contain'
-                }
-              })), /*#__PURE__*/_react["default"].createElement(PS.PropteryValue, {
-                style: {
-                  marginTop: 10
-                }
-              }, select.name), /*#__PURE__*/_react["default"].createElement(PS.ChildTitle, null, " "), /*#__PURE__*/_react["default"].createElement(PS.DesignValue, null, "Design"), /*#__PURE__*/_react["default"].createElement(_panelElementEditor["default"], {
-                state: state,
-                categoryData: this.props.categoryData,
-                getLinearOfMolding: this.getLinearOfMolding,
-                planData: planData
-              }));
-            } else if (select.prototype === 'lines') {
-              objectProperty = /*#__PURE__*/_react["default"].createElement(PS.ContentObjectWrapper, {
-                headerH: this.props.headerH
-              }, /*#__PURE__*/_react["default"].createElement("div", {
-                style: attrPorpSeparatorStyle
-              }, /*#__PURE__*/_react["default"].createElement(PS.ButtonBox, {
-                style: {
-                  justifyContent: 'center'
-                }
-              }, /*#__PURE__*/_react["default"].createElement("img", {
-                height: 16,
-                width: 16,
-                src: "/assets/img/svg/bottombar/elevation.svg"
-              }), /*#__PURE__*/_react["default"].createElement(PS.ButtonTitle, {
-                style: {
-                  color: _constants.SECONDARY_PURPLE_COLOR,
-                  paddingLeft: 10,
-                  margin: 0,
-                  fontSize: 16
-                },
-                onClick: function onClick() {
-                  return projectActions.setMode(_constants.MODE_ELEVATION_VIEW);
-                }
-              }, 'Elevation View')), /*#__PURE__*/_react["default"].createElement(PS.ButtonBox, null, /*#__PURE__*/_react["default"].createElement(PS.ButtonTitle, {
-                style: {
-                  color: _constants.STATUS_NEGATIVE_COLOR,
-                  fontSize: 16
-                },
-                onClick: function onClick() {
-                  return projectActions.remove();
-                }
-              }, 'Delete'))), /*#__PURE__*/_react["default"].createElement(PS.SelectedBox, {
-                style: {
-                  margin: 0
-                }
-              }, /*#__PURE__*/_react["default"].createElement("img", {
-                src: select.info.image["default"],
-                style: {
-                  objectFit: 'contain'
-                }
-              })), /*#__PURE__*/_react["default"].createElement(PS.PropteryValue, {
-                style: {
-                  marginTop: 10
-                }
-              }, select.name), /*#__PURE__*/_react["default"].createElement(PS.ChildTitle, null, /*#__PURE__*/_react["default"].createElement("span", {
-                style: {
-                  fontWeight: 600
-                }
-              }, select.info.description)), /*#__PURE__*/_react["default"].createElement(PS.DesignValue, null, "Design"), /*#__PURE__*/_react["default"].createElement(_panelElementEditor["default"], {
-                state: state,
-                categoryData: this.props.categoryData,
-                getLinearOfMolding: this.getLinearOfMolding,
-                planData: planData
-              }));
-            }
-          }
-        }
-      }
-      var plgUrls = this.state.plgUrls;
-      for (var i = 0; i < plgUrls.length; i++) {
-        dirUrl += '>';
-        dirUrl += plgUrls[i];
-      }
-      var beforeItem;
-      var plgItems;
-      if (this.state.filter == '') plgItems = this.state.plgItems;else {
-        plgItems = [];
-        for (var _i = 0; _i < this.state.plgItems.length; _i++) {
-          if (this.state.plgItems[_i].name.indexOf(this.state.filter) != -1) plgItems.push(this.state.plgItems[_i]);
-        }
-      }
-      if (plgUrls.length > 1) beforeItem = /*#__PURE__*/_react["default"].createElement(_pluginItem["default"], {
-        url: "before",
-        gltfUrl: null,
-        onClick: this.plgItemAction.bind(this),
-        name: "..."
-      });
-      if (this.state.opened) {
-        var multiMark = String.fromCharCode(215); //x Mark
-        panel = /*#__PURE__*/_react["default"].createElement(S.PanelWrapper, null, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
-          style: {
-            backgroundColor: SharedStyle.TOOLBAR_COLOR.active
-          }
-        }, /*#__PURE__*/_react["default"].createElement(S.Title, null, /*#__PURE__*/_react["default"].createElement("b", null, "choose room features")), /*#__PURE__*/_react["default"].createElement(S.Head, null, /*#__PURE__*/_react["default"].createElement(S.Close, null, /*#__PURE__*/_react["default"].createElement("a", {
-          onClick: this.PanelClose.bind(this),
-          className: "roundButton",
-          onMouseOut: function onMouseOut() {
-            return _this4.setState({
-              closeover: false
-            });
-          },
-          onMouseOver: function onMouseOver() {
-            return _this4.setState({
-              closeover: true
-            });
-          }
-        }, /*#__PURE__*/_react["default"].createElement("span", null, multiMark)))), /*#__PURE__*/_react["default"].createElement("div", {
-          style: {
-            clear: 'both'
-          }
-        })), /*#__PURE__*/_react["default"].createElement("input", {
-          value: this.state.filter,
-          onChange: this.filterChange.bind(this),
-          placeholder: "filter",
-          style: searchInput,
-          type: "text"
-        }), /*#__PURE__*/_react["default"].createElement("p", {
-          style: {
-            "float": 'left',
-            fontSize: '80%',
-            paddingLeft: '8px'
-          }
-        }, /*#__PURE__*/_react["default"].createElement("b", null, 'features' + dirUrl)), /*#__PURE__*/_react["default"].createElement("div", {
-          style: {
-            clear: 'both'
-          }
-        }), /*#__PURE__*/_react["default"].createElement("div", {
-          style: {
-            padding: '0 12px'
-          }
-        }, beforeItem, plgItems.map(function (data, key) {
-          return /*#__PURE__*/_react["default"].createElement(_pluginItem["default"], {
-            url: data.url,
-            gltfUrl: data.gltf_url,
-            onClick: _this4.plgItemAction.bind(_this4),
-            name: data.name,
-            key: key
-          });
-        }))));
-      }
-      if (this.state.animOpened) {
-        var _multiMark = String.fromCharCode(215);
-        panel = /*#__PURE__*/_react["default"].createElement("div", {
-          style: {
-            position: 'fixed',
-            zIndex: 9,
-            top: '615px',
-            left: '10px',
-            marginLeft: '100px',
-            width: '310px',
-            backgroundColor: SharedStyle.TOOLBAR_COLOR.focus
-          }
-        }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
-          style: {
-            backgroundColor: SharedStyle.TOOLBAR_COLOR.active
-          }
-        }, /*#__PURE__*/_react["default"].createElement("p", {
-          style: {
-            "float": 'left',
-            fontSize: '80%',
-            paddingLeft: '8px',
-            color: 'white'
-          }
-        }, /*#__PURE__*/_react["default"].createElement("b", null, "Animation")), /*#__PURE__*/_react["default"].createElement("p", {
-          style: {
-            display: 'inline-block',
-            "float": 'right',
-            paddingRight: '12px',
-            fontSize: '80%'
-          }
-        }, /*#__PURE__*/_react["default"].createElement("a", {
-          onClick: this.PanelAnimClose.bind(this),
-          className: "roundButton",
-          onMouseOut: function onMouseOut() {
-            return _this4.setState({
-              closeover: false
-            });
-          },
-          onMouseOver: function onMouseOver() {
-            return _this4.setState({
-              closeover: true
-            });
-          },
-          style: {
-            borderRadius: '50%',
-            width: '15px',
-            height: '15px',
-            color: this.state.closeover ? 'black' : 'white',
-            backgroundColor: SharedStyle.MATERIAL_COLORS['500'].red,
-            cursor: 'pointer',
-            display: 'inline-block',
-            textAlign: 'center'
-          }
-        }, /*#__PURE__*/_react["default"].createElement("span", {
-          style: {
-            fontSize: '15px',
-            lineHeight: '15px'
-          }
-        }, _multiMark))), /*#__PURE__*/_react["default"].createElement("div", {
-          style: {
-            clear: 'both'
-          }
-        })), /*#__PURE__*/_react["default"].createElement("div", {
-          style: {
-            marginTop: '15px'
-          }
-        }, /*#__PURE__*/_react["default"].createElement("select", {
-          value: this.state.animValue,
-          onChange: this.setAnimValue.bind(this),
-          style: searchInput
-        }, this.state.animData.map(function (data, key) {
-          return /*#__PURE__*/_react["default"].createElement("option", {
-            key: key,
-            value: key
-          }, data.name + ' animation');
-        }))), /*#__PURE__*/_react["default"].createElement("div", {
-          style: {
-            padding: '0 12px',
-            textAlign: 'center',
-            marginTop: '15px'
-          }
-        }, /*#__PURE__*/_react["default"].createElement("a", {
-          onMouseOut: function onMouseOut() {
-            return _this4.setState({
-              animover: false
-            });
-          },
-          onMouseOver: function onMouseOver() {
-            return _this4.setState({
-              animover: true
-            });
-          },
-          style: {
-            color: this.state.animover ? 'white' : 'black',
-            textAlign: 'center'
-          }
-        }, /*#__PURE__*/_react["default"].createElement(_fa.FaPlayCircle, {
-          onClick: this.Animate.bind(this),
-          style: {
-            fontSize: '40px'
-          }
-        })))));
-      }
-
-      // control buttons of right side
-
-      var regexp = new RegExp("^-?([0-9]+)?\\.?([0-9]{0,2})?$");
-      var settingDialog = /*#__PURE__*/_react["default"].createElement(PS.SettingDialog, {
-        id: "setting_dialog",
-        headerH: this.props.headerH
-      }, /*#__PURE__*/_react["default"].createElement(PS.TitleBarIconButton, {
-        onClick: function onClick() {
-          document.getElementById('setting_dialog').style.display = 'none';
-          // projectActions.unselectAll();
-        }
-      }, /*#__PURE__*/_react["default"].createElement("img", {
-        style: {
-          "float": 'right',
-          height: 35,
-          transform: 'rotate(45deg)'
-        },
-        src: "/assets/img/svg/bottombar/arrow-plus.svg"
-      })), /*#__PURE__*/_react["default"].createElement(S.Title, null, "Settings"), /*#__PURE__*/_react["default"].createElement(S.NumberInputWrapper, null, /*#__PURE__*/_react["default"].createElement(S.NumberInputTitle, null, "Measurement Unit"), /*#__PURE__*/_react["default"].createElement(S.MeasurementUnitSelect, {
-        id: "measurement_select",
-        onClick: function onClick() {
-          document.getElementById('measurement_option').style.display = document.getElementById('measurement_option').style.display === 'none' ? 'flex' : 'none';
-          document.getElementById('measurement_select').style.borderColor = _constants.SECONDARY_PURPLE_COLOR;
-          document.getElementById('arrow-down').style.display = document.getElementById('arrow-down').style.display === 'none' ? 'block' : 'none';
-          document.getElementById('arrow-up').style.display = document.getElementById('arrow-up').style.display === 'block' ? 'none' : 'block';
-        }
-      }, "".concat(measurementUnit._name, "(").concat(measurementUnit._unit !== 'in' ? measurementUnit._unit : '"', ")")), /*#__PURE__*/_react["default"].createElement(S.SelectArrow, {
-        id: "arrow-down",
-        style: {
-          display: 'block'
-        },
-        maskImage: "/assets/img/svg/bottombar/arrow-down.svg"
-      }), /*#__PURE__*/_react["default"].createElement(S.SelectArrow, {
-        id: "arrow-up",
-        style: {
-          display: 'none'
-        },
-        maskImage: "/assets/img/svg/bottombar/arrow-up.svg"
-      }), /*#__PURE__*/_react["default"].createElement("div", {
-        id: "measurement_option",
-        style: {
-          display: 'none',
-          flexDirection: 'column',
-          width: 150,
-          zIndex: 3,
-          top: 55,
-          right: 0,
-          position: 'absolute',
-          borderRadius: 5,
-          backgroundColor: 'white',
-          boxShadow: '0px 3px 5px -1px rgba(156, 154, 154, 0.2), 0px 6px 10px 0px rgba(156, 154, 154, 0.39), 0px 1px 18px 0px rgba(156, 154, 154, 0.12)'
-        }
-      }, unitData.map(function (unit, key) {
-        return /*#__PURE__*/_react["default"].createElement(S.MeasurementUnitOption, {
-          onClick: function onClick() {
-            document.getElementById('measurement_option').style.display = 'none';
-            document.getElementById('arrow-down').style.display = 'block';
-            document.getElementById('arrow-up').style.display = 'none';
-            update(ceilingHeight, unit, 1);
-          },
-          key: key
-        }, "".concat(unit._name, "(").concat(unit._unit, ")"));
-      }))), /*#__PURE__*/_react["default"].createElement(S.NumberInputWrapper, null, /*#__PURE__*/_react["default"].createElement(S.NumberInputTitle, null, "Ceiling Height"), /*#__PURE__*/_react["default"].createElement(_formNumberInput["default"], {
-        style: {
-          width: 167,
-          textAlign: 'left',
-          padding: '15px 15px',
-          color: '#000f33',
-          fontSize: '13px',
-          lineHeight: '18px',
-          border: '2px solid #8791ab',
-          borderRadius: '5px',
-          outline: 0,
-          fontWeight: 600,
-          paddingRight: 90
-        },
-        value: ceilingHeight,
-        isCeiling: true,
-        onChange: function onChange(evt) {
-          if (regexp.test(evt.target.value)) {
-            if ((0, _helper.isCeilLimitation)(_this4.props.state.scene, evt.target.value, measurementUnit)) {
-              _this4.setState({
-                snackBarMessage: _constants.WARNING_MESSAGE.CEILING_HEIGHT_NOT_VALID,
-                isSnackBarOpen: true
-              });
-            } else update(evt.target.value, measurementUnit, 0);
-          } else update(ceilingHeight, measurementUnit, 0);
-        },
-        precision: 2
-      }), /*#__PURE__*/_react["default"].createElement("span", {
-        style: {
-          position: 'absolute',
-          color: _constants.TEXT_COLOR_NEUTRAL_2,
-          fontSize: 16,
-          fontFamily: _constants.DEFAULT_FONT_FAMILY,
-          fontWeight: 400,
-          lineHeight: '22px',
-          textAlign: 'left',
-          right: 15
-        }
-      }, measurementUnit._unit === 'in' ? "".concat(measurementUnit._unit !== 'in' ? measurementUnit._unit : '"', "(default)") : measurementUnit._unit)), /*#__PURE__*/_react["default"].createElement(S.Title, {
-        style: {
-          fontSize: 14
-        }
-      }, "Show/Hide Measurements"), /*#__PURE__*/_react["default"].createElement(S.ToggleWrapper, {
-        style: {
-          display: 'flex',
-          justifyContent: 'space-between'
-        }
-      }, /*#__PURE__*/_react["default"].createElement(S.ToggleLabel, null, "Wall length"), /*#__PURE__*/_react["default"].createElement(_ToggleMeasureButton["default"], {
-        style: {
-          marginRight: 10,
-          height: 30
-        },
-        key: 'S/H Measure',
-        showMeasure: this.props.state.scene.showWallLengthMeasure,
-        active: control === 'show/hide toggle measure ',
-        settingMode: mode,
-        state: this.props.state,
-        backgroundImage: /*#__PURE__*/_react["default"].createElement("img", {
-          src: "/assets/img/svg/bottombar/".concat(this.props.state.scene.showWallLengthMeasure === 0 ? '2d3d_toggle.svg' : '2d3d_toggle_active.svg'),
-          style: {
-            width: '55px',
-            height: '30px'
-          }
-        }),
-        onClick: function onClick() {
-          if (!_this4.props.layers.get(_this4.props.selectedLayer).areas.size) {
-            _this4.setState({
-              snackBarMessage: 'No Floor plan',
-              isSnackBarOpen: true
-            });
-            return;
-          }
-          viewer2DActions.changeWallLengthMeasure(1 - _this4.props.state.scene.get('showWallLengthMeasure'));
-        },
-        icon: /*#__PURE__*/_react["default"].createElement("img", {
-          src: "/assets/img/svg/bottombar/".concat(this.props.state.scene.showWallLengthMeasure === 0 ? '2d3d_button.svg' : '2d3d_button_active.svg'),
-          style: {
-            width: '30px',
-            height: '30px'
-          }
-        })
-      })), /*#__PURE__*/_react["default"].createElement(S.ToggleWrapper, {
-        style: {
-          display: 'flex',
-          justifyContent: 'space-between'
-        }
-      }, /*#__PURE__*/_react["default"].createElement(S.ToggleLabel, null, "Base cabinets"), /*#__PURE__*/_react["default"].createElement(_ToggleMeasureButton["default"], {
-        style: {
-          marginRight: 10,
-          height: 30
-        },
-        key: 'S/H Measure',
-        active: control === 'show/hide toggle measure ',
-        settingMode: mode,
-        showMeasure: this.props.state.scene.showBaseCabinetMeasure,
-        backgroundImage: /*#__PURE__*/_react["default"].createElement("img", {
-          src: "/assets/img/svg/bottombar/".concat(this.props.state.scene.showBaseCabinetMeasure === 0 ? '2d3d_toggle.svg' : '2d3d_toggle_active.svg'),
-          style: {
-            width: '55px',
-            height: '30px'
-          }
-        }),
-        onClick: function onClick() {
-          if (!_this4.props.layers.get(_this4.props.selectedLayer).areas.size) {
-            _this4.setState({
-              snackBarMessage: 'No Floor plan',
-              isSnackBarOpen: true
-            });
-            return;
-          }
-          viewer2DActions.changeBaseCabinetMeasure(1 - _this4.props.state.scene.get('showBaseCabinetMeasure'));
-        },
-        icon: /*#__PURE__*/_react["default"].createElement("img", {
-          src: "/assets/img/svg/bottombar/".concat(this.props.state.scene.showBaseCabinetMeasure === 0 ? '2d3d_button.svg' : '2d3d_button_active.svg'),
-          style: {
-            width: '30px',
-            height: '30px'
-          }
-        })
-      })), /*#__PURE__*/_react["default"].createElement(S.ToggleWrapper, {
-        style: {
-          display: 'flex',
-          justifyContent: 'space-between'
-        }
-      }, /*#__PURE__*/_react["default"].createElement(S.ToggleLabel, null, "Wall cabinets"), /*#__PURE__*/_react["default"].createElement(_ToggleMeasureButton["default"], {
-        style: {
-          marginRight: 10,
-          height: 30
-        },
-        key: 'S/H Measure',
-        active: control === 'show/hide toggle measure ',
-        settingMode: mode,
-        showMeasure: this.props.state.scene.showWallCabinetMeasure,
-        backgroundImage: /*#__PURE__*/_react["default"].createElement("img", {
-          src: "/assets/img/svg/bottombar/".concat(this.props.state.scene.showWallCabinetMeasure === 0 ? '2d3d_toggle.svg' : '2d3d_toggle_active.svg'),
-          style: {
-            width: '55px',
-            height: '30px'
-          }
-        }),
-        onClick: function onClick() {
-          if (!_this4.props.layers.get(_this4.props.selectedLayer).areas.size) {
-            _this4.setState({
-              snackBarMessage: 'No Floor plan',
-              isSnackBarOpen: true
-            });
-            return;
-          }
-          viewer2DActions.changeWallCabinetMeasure(1 - _this4.props.state.scene.get('showWallCabinetMeasure'));
-        },
-        icon: /*#__PURE__*/_react["default"].createElement("img", {
-          src: "/assets/img/svg/bottombar/".concat(this.props.state.scene.showWallCabinetMeasure === 0 ? '2d3d_button.svg' : '2d3d_button_active.svg'),
-          style: {
-            width: '30px',
-            height: '30px'
-          }
-        })
-      })), /*#__PURE__*/_react["default"].createElement(S.ToggleWrapper, {
-        style: {
-          display: 'flex',
-          justifyContent: 'space-between'
-        }
-      }, /*#__PURE__*/_react["default"].createElement(S.ToggleLabel, null, "Windows & Doors"), /*#__PURE__*/_react["default"].createElement(_ToggleMeasureButton["default"], {
-        style: {
-          marginRight: 10,
-          height: 30
-        },
-        key: 'S/H Measure',
-        active: control === 'show/hide toggle measure ',
-        settingMode: mode,
-        showMeasure: this.props.state.scene.showWindowDoorMeasure,
-        backgroundImage: /*#__PURE__*/_react["default"].createElement("img", {
-          src: "/assets/img/svg/bottombar/".concat(this.props.state.scene.showWindowDoorMeasure === 0 ? '2d3d_toggle.svg' : '2d3d_toggle_active.svg'),
-          style: {
-            width: '55px',
-            height: '30px'
-          }
-        }),
-        onClick: function onClick() {
-          if (!_this4.props.layers.get(_this4.props.selectedLayer).areas.size) {
-            _this4.setState({
-              snackBarMessage: 'No Floor plan',
-              isSnackBarOpen: true
-            });
-            return;
-          }
-          viewer2DActions.changeWindowDoorMeasure(1 - _this4.props.state.scene.get('showWindowDoorMeasure'));
-        },
-        icon: /*#__PURE__*/_react["default"].createElement("img", {
-          src: "/assets/img/svg/bottombar/".concat(this.props.state.scene.showWindowDoorMeasure === 0 ? '2d3d_button.svg' : '2d3d_button_active.svg'),
-          style: {
-            width: '30px',
-            height: '30px'
-          }
-        })
-      })));
-      var helpDialog = '';
-      helpDialog = this.props.state.isHelp ? /*#__PURE__*/_react["default"].createElement(PS.HelpDialog, {
-        id: "help_dialog"
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          overflowY: 'auto',
-          maxHeight: 'calc(100vh - 230px)',
-          padding: '10px'
-        }
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          display: 'flex',
-          justifyContent: 'space-between'
-        }
-      }, /*#__PURE__*/_react["default"].createElement(PS.HCTitle, null, "Help Center"), /*#__PURE__*/_react["default"].createElement(PS.Support, {
-        onClick: function onClick() {
-          _this4.setState({
-            helpViewNum: 3
-          });
-        }
-      }, /*#__PURE__*/_react["default"].createElement("img", {
-        src: "/assets/img/svg/lefttoolbar/room-shape-custom.svg"
-      }), "Tech Support")), helpViewNum === 1 ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(PS.Video, null, /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          backgroundImage: 'url("/assets/img/png/helper/video_preview_start.png")',
-          backgroundSize: 'cover',
-          width: '100%',
-          height: '150px',
-          borderRadius: '10px'
-        }
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0))',
-          width: '100%',
-          height: '100%',
-          borderRadius: '10px'
-        }
-      })), /*#__PURE__*/_react["default"].createElement(PS.VideoText, null, /*#__PURE__*/_react["default"].createElement(PS.VideoTitle, null, "How to get Started"), /*#__PURE__*/_react["default"].createElement(PS.VideoTag, null, "Posted 2 days ago")), /*#__PURE__*/_react["default"].createElement(PS.VideoButton, {
-        onClick: function onClick() {
-          _this4.setState({
-            videoUrl: '/assets/001.Welcome-To-The-Course.mp4'
-          });
-          document.getElementById('videoModal').style.display = 'flex';
-        }
-      }, /*#__PURE__*/_react["default"].createElement("img", {
-        src: "/assets/img/svg/lefttoolbar/room-shape-custom.svg",
-        style: {
-          width: '100%',
-          height: '100%'
-        }
-      }))), /*#__PURE__*/_react["default"].createElement(PS.HCCard, null, /*#__PURE__*/_react["default"].createElement(PS.HCCardTitle, null, "Getting Started Tutorial"), /*#__PURE__*/_react["default"].createElement(PS.HCLable, null, "The introductory tutorial showing you the bare bones of the DIY Design Software"), /*#__PURE__*/_react["default"].createElement(PS.HCTag, null, "Posted 2 days ago")), /*#__PURE__*/_react["default"].createElement(PS.HCSubTitle, null, "How can we help?"), /*#__PURE__*/_react["default"].createElement(PS.SearchBox, null, /*#__PURE__*/_react["default"].createElement(PS.SearchInput, {
-        placeholder: "Search for help"
-      }), /*#__PURE__*/_react["default"].createElement(PS.SearchIcon, null, /*#__PURE__*/_react["default"].createElement("img", {
-        src: "/assets/img/svg/help/search.svg"
-      }))), /*#__PURE__*/_react["default"].createElement(PS.HCSubTitle, null, "Tutorials"), /*#__PURE__*/_react["default"].createElement(PS.HCHr, null), /*#__PURE__*/_react["default"].createElement(PS.Video, null, /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          backgroundImage: 'url("/assets/img/png/helper/video_preview_3d.png")',
-          backgroundSize: 'cover',
-          width: '100%',
-          height: '150px',
-          borderRadius: '10px'
-        }
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0))',
-          width: '100%',
-          height: '100%',
-          borderRadius: '10px'
-        }
-      })), /*#__PURE__*/_react["default"].createElement(PS.VideoText, null, /*#__PURE__*/_react["default"].createElement(PS.VideoTitle, null, "3D Viewport"), /*#__PURE__*/_react["default"].createElement(PS.VideoTag, null, "Posted 2 days ago")), /*#__PURE__*/_react["default"].createElement(PS.VideoButton, {
-        onClick: function onClick() {
-          _this4.setState({
-            videoUrl: '/assets/002.A-Look-At-The-Main-App.mp4'
-          });
-          document.getElementById('videoModal').style.display = 'flex';
-        }
-      }, /*#__PURE__*/_react["default"].createElement("img", {
-        src: "/assets/img/svg/lefttoolbar/room-shape-custom.svg",
-        style: {
-          width: '100%',
-          height: '100%'
-        }
-      }))), /*#__PURE__*/_react["default"].createElement(PS.HCCard, null, /*#__PURE__*/_react["default"].createElement(PS.HCCardTitle, null, "3D Tutorial"), /*#__PURE__*/_react["default"].createElement(PS.HCLable, null, "The tutorial showing you the fundamentals of 3D viewport feature."), /*#__PURE__*/_react["default"].createElement(PS.HCTag, null, "Posted 2 days ago")), /*#__PURE__*/_react["default"].createElement(PS.HCHr, null), /*#__PURE__*/_react["default"].createElement(PS.HCCard, null, /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          display: 'flex',
-          justifyContent: 'space-between'
-        }
-      }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(PS.HCCardTitle, null, "Layout Tutorial"), /*#__PURE__*/_react["default"].createElement(PS.HCLable, null, "The tutorial showing you how to create layouts, dynamically and with presets."), /*#__PURE__*/_react["default"].createElement(PS.HCTag, null, "Posted 2 days ago")), /*#__PURE__*/_react["default"].createElement(PS.HCCardButton, null, /*#__PURE__*/_react["default"].createElement("img", {
-        style: {
-          WebkitMaskImage: 'url(/assets/img/svg/help/check.svg)',
-          backgroundColor: _constants.BG_COLOR_1,
-          WebkitMaskSize: '100%',
-          WebkitMaskPosition: 'center',
-          width: '20px',
-          height: '20px'
-        }
-      })))), /*#__PURE__*/_react["default"].createElement(PS.HCHr, null), /*#__PURE__*/_react["default"].createElement(PS.HCCard, null, /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          display: 'flex',
-          justifyContent: 'space-between'
-        }
-      }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(PS.HCCardTitle, null, "Island Walls Tutorial"), /*#__PURE__*/_react["default"].createElement(PS.HCLable, null, "The tutorial showing you how to create island walls."), /*#__PURE__*/_react["default"].createElement(PS.HCTag, null, "Posted 2 days ago")), /*#__PURE__*/_react["default"].createElement(PS.HCCardButton, null, /*#__PURE__*/_react["default"].createElement("img", {
-        style: {
-          WebkitMaskImage: 'url(/assets/img/svg/help/check.svg)',
-          backgroundColor: _constants.BG_COLOR_1,
-          WebkitMaskSize: '100%',
-          WebkitMaskPosition: 'center',
-          width: '20px',
-          height: '20px'
-        }
-      })))), /*#__PURE__*/_react["default"].createElement(PS.HCHr, null), /*#__PURE__*/_react["default"].createElement(PS.HCCard, null, /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          display: 'flex',
-          justifyContent: 'space-between'
-        }
-      }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(PS.HCCardTitle, null, "Measurements Tutorial"), /*#__PURE__*/_react["default"].createElement(PS.HCLable, null, "The tutorial showing you theMeasurementsFeature."), /*#__PURE__*/_react["default"].createElement(PS.HCTag, null, "Posted 2 days ago")), /*#__PURE__*/_react["default"].createElement(PS.HCCardButton, {
-        onClick: function onClick() {
-          _this4.setState({
-            helpViewNum: 2
-          });
-        }
-      }, /*#__PURE__*/_react["default"].createElement("img", {
-        style: {
-          WebkitMaskImage: 'url(/assets/img/svg/help/check.svg)',
-          backgroundColor: _constants.BG_COLOR_1,
-          WebkitMaskSize: '100%',
-          WebkitMaskPosition: 'center',
-          width: '20px',
-          height: '20px'
-        }
-      })))), /*#__PURE__*/_react["default"].createElement(PS.HCSubTitle, null, "FAQ"), /*#__PURE__*/_react["default"].createElement(PS.HCCollapse, null, /*#__PURE__*/_react["default"].createElement(PS.HCHr, null), /*#__PURE__*/_react["default"].createElement("button", {
-        className: "collapsible",
-        type: "button",
-        onClick: function onClick() {
-          var coll = document.getElementsByClassName('collapsible');
-          coll[0].classList.toggle('active');
-          var content = coll[0].nextElementSibling;
-          if (content.style.maxHeight) {
-            content.style.maxHeight = null;
-          } else {
-            content.style.maxHeight = content.scrollHeight + 'px';
-          }
-        }
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          display: 'flex',
-          justifyContent: 'space-between'
-        }
-      }, /*#__PURE__*/_react["default"].createElement("span", null, "Question here"), /*#__PURE__*/_react["default"].createElement("img", {
-        style: {
-          WebkitMaskImage: 'url(/assets/img/svg/help/check.svg)',
-          backgroundColor: _constants.SECONDARY_PURPLE_COLOR,
-          WebkitMaskSize: '100%',
-          WebkitMaskPosition: 'center',
-          width: '20px',
-          height: '20px'
-        }
-      }))), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "content"
-      }, "Answer displayed here... the tutorial showing you how to create layouts, dynamically and with presets...")), /*#__PURE__*/_react["default"].createElement(PS.HCCollapse, null, /*#__PURE__*/_react["default"].createElement(PS.HCHr, null), /*#__PURE__*/_react["default"].createElement("button", {
-        className: "collapsible",
-        type: "button",
-        onClick: function onClick() {
-          var coll = document.getElementsByClassName('collapsible');
-          coll[1].classList.toggle('active');
-          var content = coll[1].nextElementSibling;
-          if (content.style.maxHeight) {
-            content.style.maxHeight = null;
-          } else {
-            content.style.maxHeight = content.scrollHeight + 'px';
-          }
-        }
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          display: 'flex',
-          justifyContent: 'space-between'
-        }
-      }, /*#__PURE__*/_react["default"].createElement("span", null, "Question here"), /*#__PURE__*/_react["default"].createElement("img", {
-        style: {
-          WebkitMaskImage: 'url(/assets/img/svg/help/check.svg)',
-          backgroundColor: _constants.SECONDARY_PURPLE_COLOR,
-          WebkitMaskSize: '100%',
-          WebkitMaskPosition: 'center',
-          width: '20px',
-          height: '20px'
-        }
-      }))), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "content"
-      }, "Answer displayed here... the tutorial showing you how to create layouts, dynamically and with presets...")), /*#__PURE__*/_react["default"].createElement(PS.HCCollapse, null, /*#__PURE__*/_react["default"].createElement(PS.HCHr, null), /*#__PURE__*/_react["default"].createElement("button", {
-        className: "collapsible",
-        type: "button",
-        onClick: function onClick() {
-          var coll = document.getElementsByClassName('collapsible');
-          coll[2].classList.toggle('active');
-          var content = coll[2].nextElementSibling;
-          if (content.style.maxHeight) {
-            content.style.maxHeight = null;
-          } else {
-            content.style.maxHeight = content.scrollHeight + 'px';
-          }
-        }
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          display: 'flex',
-          justifyContent: 'space-between'
-        }
-      }, /*#__PURE__*/_react["default"].createElement("span", null, "Question here"), /*#__PURE__*/_react["default"].createElement("img", {
-        style: {
-          WebkitMaskImage: 'url(/assets/img/svg/help/check.svg)',
-          backgroundColor: _constants.SECONDARY_PURPLE_COLOR,
-          WebkitMaskSize: '100%',
-          WebkitMaskPosition: 'center',
-          width: '20px',
-          height: '20px'
-        }
-      }))), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "content"
-      }, "Answer displayed here... the tutorial showing you how to create layouts, dynamically and with presets..."))) : helpViewNum === 2 ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(PS.TitleBarButton, {
-        onClick: function onClick() {
-          _this4.setState({
-            helpViewNum: 1
-          });
-        }
-      }, /*#__PURE__*/_react["default"].createElement("img", {
-        style: {
-          paddingRight: 10
-        },
-        height: "10px",
-        src: "/assets/img/svg/toolbar/undo_button.svg"
-      }), "Back"), /*#__PURE__*/_react["default"].createElement(PS.HCTitle, null, "Measurements Tutorial"), /*#__PURE__*/_react["default"].createElement(PS.HCLable, null, "Here you willfid how to use theMeasurement Tool"), /*#__PURE__*/_react["default"].createElement(PS.HCSubTitle, null, "1. Defiition"), /*#__PURE__*/_react["default"].createElement(PS.HCLable, null, "Every object has8 red dots around it.Four of them are located on the edges and other four are between the edges"), /*#__PURE__*/_react["default"].createElement(PS.HCSubTitle, null, "2. StartMeasuring"), /*#__PURE__*/_react["default"].createElement(PS.HCLable, null, "To start measuring, click on the starting point. It will turn dark blue."), /*#__PURE__*/_react["default"].createElement(PS.HCSubTitle, null, "3. Measure"), /*#__PURE__*/_react["default"].createElement(PS.HCLable, null, "To measure the distance click on the ending point."), /*#__PURE__*/_react["default"].createElement(PS.HCSubTitle, null, "4. Outcome"), /*#__PURE__*/_react["default"].createElement(PS.HCLable, null, "The measurement tool outputs 2 outcomes."), /*#__PURE__*/_react["default"].createElement(PS.HCLable, null, "The first outcome is when the angle between points is not big. You only see the distance between the points."), /*#__PURE__*/_react["default"].createElement("img", {
-        src: "/assets/img/png/helper/outcome.png",
-        style: {
-          width: '100%'
-        }
-      }), /*#__PURE__*/_react["default"].createElement(PS.HCLable, null, "The second outcome is when the angle between points is bigger. You will see the x and y distance as well as the distance between points."), /*#__PURE__*/_react["default"].createElement(PS.HCHr, {
-        style: {
-          marginTop: '50px'
-        }
-      }), /*#__PURE__*/_react["default"].createElement(PS.HCSubTitle, null, "Related Tutorials"), /*#__PURE__*/_react["default"].createElement(PS.HCHr, {
-        style: {
-          marginTop: '20px'
-        }
-      }), /*#__PURE__*/_react["default"].createElement(PS.HCCard, null, /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          display: 'flex',
-          justifyContent: 'space-between'
-        }
-      }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(PS.HCCardTitle, null, "Layout Tutorial"), /*#__PURE__*/_react["default"].createElement(PS.HCLable, null, "The tutorial showing you how to create layouts, dynamically and with presets."), /*#__PURE__*/_react["default"].createElement(PS.HCTag, null, "Posted 2 days ago")), /*#__PURE__*/_react["default"].createElement(PS.HCCardButton, null, /*#__PURE__*/_react["default"].createElement("img", {
-        style: {
-          WebkitMaskImage: 'url(/assets/img/svg/help/check.svg)',
-          backgroundColor: _constants.BG_COLOR_1,
-          WebkitMaskSize: '100%',
-          WebkitMaskPosition: 'center',
-          width: '20px',
-          height: '20px'
-        }
-      })))), /*#__PURE__*/_react["default"].createElement(PS.HCHr, null), /*#__PURE__*/_react["default"].createElement(PS.HCCard, null, /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          display: 'flex',
-          justifyContent: 'space-between'
-        }
-      }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(PS.HCCardTitle, null, "Island Walls Tutorial"), /*#__PURE__*/_react["default"].createElement(PS.HCLable, null, "The tutorial showing you how to create island walls."), /*#__PURE__*/_react["default"].createElement(PS.HCTag, null, "Posted 2 days ago")), /*#__PURE__*/_react["default"].createElement(PS.HCCardButton, null, /*#__PURE__*/_react["default"].createElement("img", {
-        style: {
-          WebkitMaskImage: 'url(/assets/img/svg/help/check.svg)',
-          backgroundColor: _constants.BG_COLOR_1,
-          WebkitMaskSize: '100%',
-          WebkitMaskPosition: 'center',
-          width: '20px',
-          height: '20px'
-        }
-      })))), /*#__PURE__*/_react["default"].createElement(PS.HCHr, null), /*#__PURE__*/_react["default"].createElement(PS.HCCard, null, /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          display: 'flex',
-          justifyContent: 'space-between'
-        }
-      }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(PS.HCCardTitle, null, "Measurements Tutorial"), /*#__PURE__*/_react["default"].createElement(PS.HCLable, null, "The tutorial showing you theMeasurementsFeature."), /*#__PURE__*/_react["default"].createElement(PS.HCTag, null, "Posted 2 days ago")), /*#__PURE__*/_react["default"].createElement(PS.HCCardButton, {
-        onClick: function onClick() {
-          _this4.setState({
-            helpViewNum: 2
-          });
-        }
-      }, /*#__PURE__*/_react["default"].createElement("img", {
-        style: {
-          WebkitMaskImage: 'url(/assets/img/svg/help/check.svg)',
-          backgroundColor: _constants.BG_COLOR_1,
-          WebkitMaskSize: '100%',
-          WebkitMaskPosition: 'center',
-          width: '20px',
-          height: '20px'
-        }
-      }))))) : /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(PS.TitleBarButton, {
-        onClick: function onClick() {
-          _this4.setState({
-            helpViewNum: 1
-          });
-        }
-      }, /*#__PURE__*/_react["default"].createElement("img", {
-        style: {
-          paddingRight: 10
-        },
-        height: "10px",
-        src: "/assets/img/svg/toolbar/undo_button.svg"
-      }), "Back"), /*#__PURE__*/_react["default"].createElement(PS.HCTitle, null, "Tech Support"), /*#__PURE__*/_react["default"].createElement(PS.HCLable, null, "Support text here."), /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          margin: '0 10px'
-        }
-      }, /*#__PURE__*/_react["default"].createElement(PS.HCSelect, null, /*#__PURE__*/_react["default"].createElement("div", null, "Select Subject"), /*#__PURE__*/_react["default"].createElement("select", {
-        defaultValue: ""
-      }, /*#__PURE__*/_react["default"].createElement("option", {
-        key: 0,
-        value: "",
-        disabled: true
-      }, "What issue do you occur"), /*#__PURE__*/_react["default"].createElement("option", {
-        key: 1,
-        value: "1"
-      }, "Item 1"), /*#__PURE__*/_react["default"].createElement("option", {
-        key: 2,
-        value: "2"
-      }, "Item 2"), /*#__PURE__*/_react["default"].createElement("option", {
-        key: 3,
-        value: "3"
-      }, "Item 3"))), /*#__PURE__*/_react["default"].createElement(PS.HCUpload, null, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "upload"
-      }, /*#__PURE__*/_react["default"].createElement("label", null, /*#__PURE__*/_react["default"].createElement("p", null, "Drag and drop files or ", /*#__PURE__*/_react["default"].createElement("u", null, "Browse")), /*#__PURE__*/_react["default"].createElement("input", {
-        type: "file"
-      }))), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "upload-label"
-      }, "Please upload files under 5MB, other supporting text.")), /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          width: '100%',
-          marginTop: 10
-        }
-      }, /*#__PURE__*/_react["default"].createElement(PS.HCTextArea, {
-        value: notes,
-        maxLength: 200,
-        placeholder: "Describe your problem",
-        onChange: function onChange(e) {
-          return _this4.setState({
-            notes: e.target.value
-          });
-        }
-      }), /*#__PURE__*/_react["default"].createElement("span", {
-        style: {
-          fontSize: 13,
-          color: _constants.TEXT_COLOR_NEUTRAL_1,
-          "float": 'right',
-          lineHeight: '18px',
-          fontWeight: 400,
-          marginRight: '20px'
-        }
-      }, notes.length, "/200 characters"))), /*#__PURE__*/_react["default"].createElement(PS.HCCardButton, {
-        style: {
-          width: '130px'
-        }
-      }, /*#__PURE__*/_react["default"].createElement("p", {
-        style: {
-          margin: 'auto'
-        }
-      }, "Submit Ticket"))))) : '';
-
-      // property window
-      var tabDialog = /*#__PURE__*/_react["default"].createElement(PS.Tab, null, /*#__PURE__*/_react["default"].createElement(PS.TopLine, null, /*#__PURE__*/_react["default"].createElement(PS.TabLine, null, objectProperty === '' ? null : /*#__PURE__*/_react["default"].createElement(PS.TabLabel, {
-        onClick: function onClick() {
-          _this4.openTab('object');
-          projectActions.setIsHelp(false);
-        },
-        id: "object_link",
-        className: "tablinks ".concat(helpDialog === '' ? 'selected' : '')
-      }, /*#__PURE__*/_react["default"].createElement("label", null, "Object Properties"), /*#__PURE__*/_react["default"].createElement("img", {
-        style: {
-          "float": 'right',
-          height: 20,
-          width: 20,
-          transform: 'rotate(45deg)',
-          WebkitMaskImage: 'url(/assets/img/svg/bottombar/arrow-plus.svg)',
-          WebkitMaskSize: '100%',
-          WebkitMaskPosition: 'center'
-        },
-        onClick: function onClick(e) {
-          e.stopPropagation();
-          projectActions.unselectAll();
-          helpDialog !== '' && _this4.openTab('help');
-        }
-      })), helpDialog !== '' ? /*#__PURE__*/_react["default"].createElement(PS.TabLabel, {
-        onClick: function onClick() {
-          return _this4.openTab('help');
-        },
-        id: "help_link",
-        className: "tablinks selected"
-      }, /*#__PURE__*/_react["default"].createElement("label", null, "Help Center"), /*#__PURE__*/_react["default"].createElement("img", {
-        style: {
-          "float": 'right',
-          height: 20,
-          width: 20,
-          transform: 'rotate(45deg)',
-          WebkitMaskImage: 'url(/assets/img/svg/bottombar/arrow-plus.svg)',
-          WebkitMaskSize: '100%',
-          WebkitMaskPosition: 'center'
-        },
-        onClick: function onClick() {
-          return projectActions.setIsHelp(false);
-        }
-      })) : null), helpDialog === '' && objectProperty === '' ? null : /*#__PURE__*/_react["default"].createElement(PS.ToolLine, null, /*#__PURE__*/_react["default"].createElement(PS.TitleBarIconButton, null, /*#__PURE__*/_react["default"].createElement("img", {
-        style: {
-          "float": 'left',
-          height: 24,
-          marginLeft: 10
-        },
-        onClick: function onClick() {
-          _this4.props.setShowProperty(false);
-        },
-        src: "/assets/img/svg/bottombar/collapse.svg"
-      })), /*#__PURE__*/_react["default"].createElement(PS.TitleBarIconButton, null, /*#__PURE__*/_react["default"].createElement("img", {
-        style: {
-          "float": 'right',
-          height: 24,
-          transform: 'rotate(45deg)',
-          marginRight: 10
-        },
-        onClick: function onClick() {
-          if (mode === _constants.MODE_DRAWING_LINE) {
-            projectActions.rollback();
-          }
-          projectActions.unselectAll();
-          projectActions.setIsHelp(false);
-        },
-        src: "/assets/img/svg/bottombar/arrow-plus.svg"
-      })))), /*#__PURE__*/_react["default"].createElement("div", {
-        id: "help",
-        className: "tabcontent",
-        style: {
-          display: helpDialog === '' ? 'none' : 'flex'
-        }
-      }, helpDialog), /*#__PURE__*/_react["default"].createElement("div", {
-        id: "object",
-        className: "tabcontent",
-        style: {
-          display: "".concat(helpDialog === '' ? 'flex' : 'none')
-        }
-      }, objectProperty));
-      var controlView = (0, _helper.isElevationView)(mode) ? [/*#__PURE__*/_react["default"].createElement("div", {
-        key: 'section1',
-        onKeyDown: function onKeyDown(event) {
-          return event.stopPropagation();
-        },
-        onKeyUp: function onKeyUp(event) {
-          return event.stopPropagation();
-        },
-        style: {
-          display: 'flex',
-          position: 'absolute',
-          right: 10,
-          top: this.props.headerH + 10,
-          zIndex: 10,
-          maxHeight: 0
-        }
-      }, settingDialog)] : !_constants.ARRAY_3D_MODES.includes(mode) ? [
-      /*#__PURE__*/
-      /**
-       *undo/redo button
-       */
-      _react["default"].createElement("div", {
-        key: 'section1',
-        onKeyDown: function onKeyDown(event) {
-          return event.stopPropagation();
-        },
-        onKeyUp: function onKeyUp(event) {
-          return event.stopPropagation();
-        },
-        style: {
-          display: 'flex',
-          position: 'absolute',
-          right: 10,
-          top: this.props.headerH + 10,
-          zIndex: 10,
-          maxHeight: 0
-        }
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          textAlign: 'right',
-          display: 'flex'
-        }
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          display: 'flex',
-          left: 10,
-          zIndex: 1,
-          flexDirection: 'row'
-        }
-      }, /*#__PURE__*/_react["default"].createElement(S.RightButton, {
-        style: {
-          padding: '0px 18px',
-          marginLeft: 10,
-          marginRight: 'unset'
-        },
-        onClick: function onClick() {
-          _this4.props.setToolbar('');
-          projectActions.undo();
-        }
-      }, /*#__PURE__*/_react["default"].createElement(S.RightButtonImage, {
-        src: "/assets/img/svg/toolbar/undo_button.svg",
-        style: {
-          height: 10,
-          width: 14
-        }
-      })), /*#__PURE__*/_react["default"].createElement(S.RightButton, {
-        style: {
-          padding: '0px 18px',
-          marginLeft: 10,
-          marginRight: 'unset'
-        },
-        onClick: function onClick() {
-          _this4.props.setToolbar('');
-          projectActions.redo();
-        }
-      }, /*#__PURE__*/_react["default"].createElement(S.RightButtonImage, {
-        src: "/assets/img/svg/toolbar/redo_button.svg",
-        style: {
-          height: 10,
-          width: 14
-        }
-      }))), /*#__PURE__*/_react["default"].createElement(S.RightButton, {
-        onClick: topBtnAction
-      }, /*#__PURE__*/_react["default"].createElement(S.RightButtonImage, {
-        src: "/assets/img/svg/lefttoolbar/room-shape-custom.svg"
-      }), /*#__PURE__*/_react["default"].createElement("span", {
-        style: {
-          color: _constants.SECONDARY_PURPLE_COLOR,
-          fontFamily: _constants.DEFAULT_FONT_FAMILY,
-          textAlign: 'left',
-          fontSize: 16,
-          fontWeight: 600,
-          lineHeight: '18px',
-          paddingLeft: 5
-        }
-      }, "Add Walls")), /*#__PURE__*/_react["default"].createElement(S.RightButton, {
-        onClick: saveSVGScreenshotToFile,
-        style: {
-          padding: '0px 17px'
-        }
-      }, /*#__PURE__*/_react["default"].createElement(S.RightButtonImage, {
-        src: "/assets/img/svg/toolbar/take_picture.svg",
-        style: {
-          height: 14,
-          width: 16
-        }
-      })), !isShowProperty && /*#__PURE__*/_react["default"].createElement(S.RightButton, {
-        onClick: function onClick() {
-          return _this4.props.setShowProperty(true);
-        },
-        style: {
-          padding: '0px 17px'
-        }
-      }, /*#__PURE__*/_react["default"].createElement(S.RightButtonImage, {
-        src: "/assets/img/svg/bottombar/expand.svg",
-        style: {
-          height: 14,
-          width: 16
-        }
-      }))), isShowProperty && tabDialog, settingDialog)] : [/*#__PURE__*/_react["default"].createElement("div", {
-        key: 'section1',
-        onKeyDown: function onKeyDown(event) {
-          return event.stopPropagation();
-        },
-        onKeyUp: function onKeyUp(event) {
-          return event.stopPropagation();
-        },
-        style: {
-          display: 'flex',
-          position: 'absolute',
-          right: 10,
-          top: this.props.headerH + 10,
-          zIndex: 10,
-          maxHeight: 0
-        }
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          display: 'flex',
-          left: 10,
-          zIndex: 1,
-          flexDirection: 'row'
-        }
-      }, /*#__PURE__*/_react["default"].createElement(S.RightButton, {
-        style: {
-          padding: '0px 18px',
-          marginLeft: 10,
-          marginRight: 'unset'
-        },
-        onClick: function onClick() {
-          _this4.props.setToolbar('');
-          projectActions.undo();
-        }
-      }, /*#__PURE__*/_react["default"].createElement(S.RightButtonImage, {
-        src: "/assets/img/svg/toolbar/undo_button.svg",
-        style: {
-          height: 10,
-          width: 14
-        }
-      })), /*#__PURE__*/_react["default"].createElement(S.RightButton, {
-        style: {
-          padding: '0px 18px',
-          marginLeft: 10,
-          marginRight: 'unset'
-        },
-        onClick: function onClick() {
-          _this4.props.setToolbar('');
-          projectActions.redo();
-        }
-      }, /*#__PURE__*/_react["default"].createElement(S.RightButtonImage, {
-        src: "/assets/img/svg/toolbar/redo_button.svg",
-        style: {
-          height: 10,
-          width: 14
-        }
-      }))), /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          textAlign: 'right',
-          display: 'flex'
-        }
-      }, /*#__PURE__*/_react["default"].createElement(S.RightButton, {
-        onClick: saveScreenshotToFile,
-        style: {
-          padding: '0px 16px'
-        }
-      }, /*#__PURE__*/_react["default"].createElement(S.RightButtonImage, {
-        src: "/assets/img/svg/toolbar/take_picture.svg"
-      })), !isShowProperty && /*#__PURE__*/_react["default"].createElement(S.RightButton, {
-        onClick: function onClick() {
-          return _this4.props.setShowProperty(true);
-        },
-        style: {
-          padding: '0px 17px'
-        }
-      }, /*#__PURE__*/_react["default"].createElement(S.RightButtonImage, {
-        src: "/assets/img/svg/bottombar/expand.svg",
-        style: {
-          height: 14,
-          width: 16
-        }
-      }))), isShowProperty && tabDialog, settingDialog)];
-      var temp = [];
-      cabinetCategory.data.forEach(function (type) {
-        (type.type !== 'cabinet_category' || type.name == 'Molding' || type.items.filter(function (item) {
-          var _currentTexture$doorS7, _currentTexture$doorS8;
-          return ((_currentTexture$doorS7 = currentTexture === null || currentTexture === void 0 || (_currentTexture$doorS8 = currentTexture.doorStyles) === null || _currentTexture$doorS8 === void 0 ? void 0 : _currentTexture$doorS8.cds) !== null && _currentTexture$doorS7 !== void 0 ? _currentTexture$doorS7 : []).filter(function (cd) {
-            return cd.itemID === item.itemID;
-          }).length !== 0;
-        }).length !== 0) && temp.push(/*#__PURE__*/_react["default"].createElement(S.SubCategoryItem, {
-          style: {
-            paddingLeft: 50,
-            backgroundColor: subCabinetCategory.name === type.name && _constants.TEXT_COLOR_NEUTRAL_5
-          },
-          onClick: function onClick() {
-            return setSubData(type.name, type.items);
-          }
-        }, /*#__PURE__*/_react["default"].createElement(S.SubCategoryItemLabel, {
-          style: {
-            fontWeight: subCabinetCategory.name === type.name && 700
-          }
-        }, type.name)));
-      });
-      var finishingData = [{
-        name: 'Handles',
-        thumbnail: '/assets/img/svg/toolbar/handles.svg',
-        data: this.props.categoryData.data.doorHandle
-      }, {
-        name: 'Countertop',
-        thumbnail: '/assets/img/svg/toolbar/countertop.svg',
-        data: this.props.categoryData.data.counterTop
-      }, {
-        name: 'Backsplash',
-        thumbnail: '/assets/img/svg/toolbar/backsplash.svg',
-        data: this.props.categoryData.data.backsplash
-      }, {
-        name: 'Wall Color',
-        thumbnail: '/assets/img/svg/toolbar/wall_color_icon.svg',
-        data: this.props.categoryData.data.wallColors
-      }, {
-        name: 'Floor Styles',
-        thumbnail: '/assets/img/svg/toolbar/floorstyle.svg',
-        data: this.props.categoryData.data.floorStyles
-      }, {
-        name: 'Lighting',
-        thumbnail: '/assets/img/svg/toolbar/lighting.svg',
-        data: this.props.categoryData.data.lighting
-      }, {
-        name: 'Furnishing',
-        thumbnail: '/assets/img/svg/toolbar/furnishings_icon.svg',
-        data: this.props.categoryData.data.furnishing
-      }];
-      var roomShapeData = [{
-        title: 'Square',
-        url: '/assets/img/svg/lefttoolbar/room-shape-square.svg',
-        data: rectangleData
-      }, {
-        title: 'L-Shaped',
-        url: '/assets/img/svg/lefttoolbar/room-shape-L.svg',
-        data: lShaped
-      }, {
-        title: 'Irregular',
-        url: '/assets/img/svg/lefttoolbar/room-shape-irregular.svg',
-        data: longNarrow
-      }, {
-        title: 'Open',
-        url: '/assets/img/svg/lefttoolbar/room-shape-open.svg',
-        data: oRectangle
-      }, {
-        title: 'Custom',
-        url: '/assets/img/svg/lefttoolbar/room-shape-custom.svg'
-      }];
-      var roomElementsData = [{
-        title: 'Windows',
-        url: '/assets/img/svg/lefttoolbar/window.svg',
-        data: [window_clear, window_cross, window_double_hung, window_vertical]
-      }, {
-        title: 'Doors',
-        url: '/assets/img/svg/lefttoolbar/door.svg',
-        data: [door_interior, door_exterior, door_closet, door_sliding, door_framed, door_frameless]
-      }];
-      var setSubData = function setSubData(name, data) {
-        if (data.find(function (item) {
-          return item.type === 'cabinet';
-        })) _this4.setState({
-          subCabinetCategory: {
-            name: subCabinetCategory.name === name ? '' : name,
-            data: subCabinetCategory.data === data ? [] : data
-          }
-        });else _this4.setState({
-          cabinetCategory: {
-            name: cabinetCategory.name === name ? '' : name,
-            data: cabinetCategory.data === data ? [] : data
-          },
-          subCabinetCategory: {
-            name: '',
-            data: []
-          }
-        });
-      };
-      var setRoomElement = function setRoomElement() {
-        _this4.context.projectActions.setIsCabinetDrawing(true);
-        if (selectedRoomElement === 'Doors') {}
-      };
-      var testData = [];
-      if (process.env.MODE === 'staging') {
-        var _loop = function _loop(testJson) {
-          testData.push(/*#__PURE__*/_react["default"].createElement(S.testJsonItemWrapper, {
-            onClick: function onClick() {
-              if (window.confirm("Do you really load ".concat(testJson, ".json for KC test?"))) {
-                _this4.context.projectActions.loadProject(JSON.parse(testJsonData[testJson].project_data), _this4.props.categoryData);
-                _this4.setState({
-                  addingJson: false
-                });
-                _this4.props.setToolbar('');
-              }
-            }
-          }, testJson));
-        };
-        for (var testJson in testJsonData) {
-          _loop(testJson);
-        }
-      }
-      var isShowMoldingMenuItem = function isShowMoldingMenuItem(subCabinetCategory, item) {
-        var _currentTexture$doorS9, _currentTexture$doorS0;
-        if (subCabinetCategory.name === _constants.TOE_KICK_MOLDING) {
-          var _this4$state$elements, _this4$state$elements2;
-          var items = (_this4$state$elements = (_this4$state$elements2 = _this4.state.elements.items) === null || _this4$state$elements2 === void 0 ? void 0 : _this4$state$elements2.toArray()) !== null && _this4$state$elements !== void 0 ? _this4$state$elements : [];
-          for (var _i2 = 0; _i2 < items.length; _i2++) {
-            var _items$_i2$toJS$doorS, _items$_i;
-            if (((_items$_i2$toJS$doorS = (_items$_i = items[_i2]) === null || _items$_i === void 0 || (_items$_i = _items$_i.toJS()) === null || _items$_i === void 0 || (_items$_i = _items$_i.doorStyle) === null || _items$_i === void 0 || (_items$_i = _items$_i.doorStyles) === null || _items$_i === void 0 ? void 0 : _items$_i.cds) !== null && _items$_i2$toJS$doorS !== void 0 ? _items$_i2$toJS$doorS : []).filter(function (cd) {
-              return cd.itemID === item.itemID;
-            }).length > 0) return true;
-          }
-        }
-        if (((_currentTexture$doorS9 = currentTexture === null || currentTexture === void 0 || (_currentTexture$doorS0 = currentTexture.doorStyles) === null || _currentTexture$doorS0 === void 0 ? void 0 : _currentTexture$doorS0.cds) !== null && _currentTexture$doorS9 !== void 0 ? _currentTexture$doorS9 : []).filter(function (cd) {
-          return cd.itemID === item.itemID;
-        }).length > 0) return true;
-        return false;
-      };
-      var installation = (0, _utils.getInstallationSuffix)(_constants.INSTALLATION_SUFFIX_TYPE.NAME, currentTexture);
-      var categories = [{
-        toolbar: 'room-shape',
-        content: /*#__PURE__*/_react["default"].createElement("div", {
-          style: {
-            display: 'flex'
-          }
-        }, /*#__PURE__*/_react["default"].createElement(S.SubToolbarWrapper, {
-          style: {
-            alignItems: 'flex-start'
-          }
-        }, /*#__PURE__*/_react["default"].createElement(S.SubCategoryTitle, null, "Change room shape"), /*#__PURE__*/_react["default"].createElement(S.SubCategoryItemWrapper, null, roomShapeData.map(function (item, key) {
-          return /*#__PURE__*/_react["default"].createElement(S.SubCategoryItem, {
-            style: {
-              marginRight: 0
-            },
-            onClick: function onClick(event) {
-              if (item.title === 'Custom') {
-                topBtnAction();
-                _this4.props.setToolbar('');
-              } else _this4.loadProjectFromData(item, event);
-            },
-            key: key
-          }, /*#__PURE__*/_react["default"].createElement(S.SubCategoryItemImage, {
-            style: {
-              height: 25,
-              width: 25
-            },
-            maskImage: item.url
-          }), /*#__PURE__*/_react["default"].createElement(S.SubCategoryItemLabel, null, item.title));
-        })), /*#__PURE__*/_react["default"].createElement(S.SubCategoryTitle, {
-          style: {
-            marginTop: 15
-          }
-        }, "Add room elements"), /*#__PURE__*/_react["default"].createElement(S.SubCategoryItemWrapper, {
-          style: {
-            marginTop: 10
-          }
-        }, roomElementsData.map(function (item, key) {
-          return /*#__PURE__*/_react["default"].createElement(S.SubCategoryItem, {
-            style: {
-              marginRight: 0
-            },
-            onClick: function onClick() {
-              return _this4.setState({
-                selectedRoomElement: selectedRoomElement === item.title ? '' : item.title
-              });
-            },
-            key: key
-          }, /*#__PURE__*/_react["default"].createElement(S.SubCategoryItemImage, {
-            style: {
-              height: 25,
-              width: 25
-            },
-            maskImage: item.url
-          }), /*#__PURE__*/_react["default"].createElement(S.SubCategoryItemLabel, null, item.title));
-        })), process.env.MODE === 'staging' && !!Object.keys(testJsonData).length && /*#__PURE__*/_react["default"].createElement(S.SubCategoryItemWrapper, {
-          onClick: function onClick() {
-            return _this4.setState({
-              addingJson: !_this4.state.addingJson,
-              selectedRoomElement: ''
-            });
-          }
-        }, /*#__PURE__*/_react["default"].createElement(S.SubCategoryItem, null, /*#__PURE__*/_react["default"].createElement(S.SubCategoryItemLabel, {
-          style: {
-            marginLeft: 15,
-            color: _constants.TEXT_COLOR_NEUTRAL_0
-          }
-        }, "Test JSONs")))), selectedRoomElement && /*#__PURE__*/_react["default"].createElement(S.SubToolbarWrapper, {
-          style: {
-            alignItems: 'flex-start',
-            marginLeft: 20,
-            minWidth: 250
-          }
-        }, roomElementsData.find(function (item) {
-          return item.title === selectedRoomElement;
-        }).data.map(function (thing, key) {
-          return /*#__PURE__*/_react["default"].createElement(S.SubCategoryItemWrapper, {
-            onClick: function onClick() {
-              return setRoomElement({
-                type: selectedRoomElement,
-                item: thing
-              });
-            },
-            key: key
-          }, /*#__PURE__*/_react["default"].createElement(S.SubCategoryItem, {
-            style: {
-              minWidth: 250
-            },
-            onClick: function onClick() {
-              return _constants.ARRAY_3D_MODES.includes(mode) ? _this4.props.holesActions.selectToolDrawingHole3D(thing["default"].name) : _this4.props.holesActions.selectToolDrawingHole(thing["default"].name);
-            }
-          }, /*#__PURE__*/_react["default"].createElement(S.SubCategoryItemImage, {
-            style: {
-              height: 50,
-              width: 50
-            },
-            maskImage: thing["default"].info.image
-          }), /*#__PURE__*/_react["default"].createElement(S.SubCategoryItemLabel, {
-            style: {
-              marginLeft: 15
-            }
-          }, thing["default"].info.title)));
-        })), process.env.MODE === 'staging' && !!Object.keys(testJsonData).length && this.state.addingJson && /*#__PURE__*/_react["default"].createElement(S.SubToolbarWrapper, {
-          id: "test_json_datas",
-          style: {
-            alignItems: 'flex-start',
-            marginLeft: 20,
-            minWidth: 250
-          }
-        }, testData))
-      }, {
-        toolbar: 'door-style',
-        content: /*#__PURE__*/_react["default"].createElement("div", {
-          style: {
-            display: 'flex'
-          }
-        }, /*#__PURE__*/_react["default"].createElement(S.SubToolbarWrapper, {
-          style: {
-            justifyContent: cabinetStyleChanging ? 'unset' : 'center'
-          }
-        }, cabinetStyleChanging ? /*#__PURE__*/_react["default"].createElement("div", {
-          style: {
-            width: '100%',
-            display: 'flex',
-            flexDirection: 'column',
-            height: '100%'
-          }
-        }, /*#__PURE__*/_react["default"].createElement(S.SubCategoryTitle, null, "Choose Door Style"), /*#__PURE__*/_react["default"].createElement("div", {
-          style: {
-            marginTop: 15,
-            width: '90%',
-            position: 'relative',
-            display: 'flex',
-            alignItems: 'center'
-          }
-        }, /*#__PURE__*/_react["default"].createElement("input", {
-          style: {
-            height: 50,
-            width: '100%',
-            paddingLeft: 50,
-            border: '1px solid',
-            borderRadius: 7,
-            outline: 0
-          },
-          placeholder: "Search Doors",
-          value: searchName,
-          onChange: function onChange(e) {
-            _this4.setState({
-              searchName: e.target.value
-            });
-          }
-        }), /*#__PURE__*/_react["default"].createElement("img", {
-          src: "/assets/img/svg/lefttoolbar/search.svg",
-          style: {
-            position: 'absolute',
-            left: 0,
-            width: 45,
-            height: 45,
-            padding: 10
-          }
-        }), /*#__PURE__*/_react["default"].createElement("img", {
-          src: this.state.toggleFilters ? '/assets/img/svg/filtersActive.svg' : '/assets/img/svg/toggleFilters.svg',
-          style: {
-            position: 'absolute',
-            right: '10px',
-            top: '50%',
-            transform: 'translateY(-50%)',
-            cursor: 'pointer',
-            width: '35px'
-          },
-          onClick: function onClick() {
-            if (_this4.state.toggleFilters) {
-              _this4.setState({
-                resetFilters: true
-              });
-            }
-            _this4.setState({
-              toggleFilters: !_this4.state.toggleFilters
-            });
-          }
-        })), this.state.toggleFilters && /*#__PURE__*/_react["default"].createElement("div", {
-          style: {
-            marginTop: '2rem',
-            width: '90%',
-            position: 'relative',
-            display: 'flex',
-            alignItems: 'center',
-            flexDirection: 'column',
-            gap: '1rem'
-          }
-        }, /*#__PURE__*/_react["default"].createElement(_DoorStyleMenu["default"], {
-          iconStyle: {
-            marginLeft: 'auto'
-          },
-          placeholder: "Instalation",
-          selected: this.state.cabinetStyle,
-          onChange: function onChange(installationType) {
-            _this4.setState({
-              install: installationType,
-              cabinetStyle: _objectSpread(_objectSpread({}, cabinetStyle), {}, {
-                name: installationType
-              })
-            });
-          },
-          data: this.state.DoorStyles,
-          getValue: function getValue(item) {
-            return item.name;
-          }
-        }), /*#__PURE__*/_react["default"].createElement(_DoorStyleMenu["default"], {
-          iconStyle: {
-            border: '1px solid rgba(193, 202, 228, 1)',
-            borderRadius: '24px',
-            marginLeft: 'auto'
-          },
-          placeholder: "Color",
-          selected: cabinetColor,
-          onChange: function onChange(cabinetColor) {
-            _this4.setState({
-              cabinetColor: _objectSpread(_objectSpread({}, _this4.state.cabinetColor), {}, {
-                name: cabinetColor
-              })
-            });
-          },
-          data: cabinetColor.data,
-          getValue: function getValue(item) {
-            return item.name;
-          }
-        })), /*#__PURE__*/_react["default"].createElement(S.SubCategoryItemWrapper, null, cabinetStyle.data.map(function (type, key) {
-          var removedFilter = type.name === subCabinetStyle.name;
-          return /*#__PURE__*/_react["default"].createElement(S.SubCategoryItem, {
-            style: {
-              backgroundColor: removedFilter && _constants.TEXT_COLOR_NEUTRAL_5
-            },
-            onClick: function onClick() {
-              _this4.setState({
-                subCabinetStyle: _objectSpread(_objectSpread({}, subCabinetStyle), {}, {
-                  name: removedFilter ? '' : type.name
-                })
-              });
-            },
-            key: key
-          }, /*#__PURE__*/_react["default"].createElement(S.SubCategoryItemImage, {
-            maskImage: type.thumbnail
-          }), /*#__PURE__*/_react["default"].createElement(S.SubCategoryItemLabel, {
-            style: {
-              fontWeight: subCabinetStyle.name === type.name && 700
-            }
-          }, type.name));
-        }))) : /*#__PURE__*/_react["default"].createElement(S.SubCategoryItemWrapper, {
-          style: {
-            maxWidth: 250,
-            rowGap: 30,
-            margin: 0
-          }
-        }, /*#__PURE__*/_react["default"].createElement("div", {
-          style: {
-            display: 'flex',
-            flexDirection: 'column',
-            rowGap: 30
-          }
-        }, /*#__PURE__*/_react["default"].createElement(S.SubCategoryTitle, {
-          style: {
-            fontSize: 26,
-            fontWeight: 700,
-            padding: 'unset',
-            lineHeight: '36px',
-            textAlign: 'center',
-            color: '#000F33'
-          }
-        }, currentTexture && currentTexture.name || currentTexture.toJS().name), /*#__PURE__*/_react["default"].createElement("img", {
-          src: currentTexture && (currentTexture.thumbnail || currentTexture.toJS().thumbnail),
-          alt: "door",
-          width: 150,
-          style: {
-            margin: 'auto'
-          }
-        })), /*#__PURE__*/_react["default"].createElement("div", {
-          style: {
-            display: 'block'
-          }
-        }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
-          style: {
-            fontFamily: 'Open Sans',
-            fontSize: 13,
-            fontWeight: 600,
-            padding: '3px 10px',
-            textAlign: 'center',
-            lineHeight: '13px',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            marginBottom: 10,
-            background: '#FAFAFF',
-            width: 'fit-content',
-            margin: '0 auto 2px'
-          }
-        }, /*#__PURE__*/_react["default"].createElement("span", {
-          style: {
-            color: '#565F77'
-          }
-        }, "Installation:"), /*#__PURE__*/_react["default"].createElement("div", {
-          style: {
-            display: 'flex',
-            alignItems: 'center'
-          }
-        }, /*#__PURE__*/_react["default"].createElement("img", {
-          src: this.state.DoorStyles && currentTexture && ((_this$state$DoorStyle = this.state.DoorStyles.filter(function (item) {
-            return item.name === installation;
-          })[0]) === null || _this$state$DoorStyle === void 0 ? void 0 : _this$state$DoorStyle.thumbnail),
-          style: {
-            height: 14,
-            margin: 3
-          }
-        }), /*#__PURE__*/_react["default"].createElement("b", {
-          style: {
-            color: _constants.SECONDARY_PURPLE_COLOR
-          }
-        }, (0, _utils.getInstallationSuffix)(_constants.INSTALLATION_SUFFIX_TYPE.NAME, currentTexture)))), /*#__PURE__*/_react["default"].createElement("div", {
-          style: {
-            fontFamily: 'Open Sans',
-            fontSize: 13,
-            fontWeight: 600,
-            padding: '3px 10px',
-            textAlign: 'center',
-            lineHeight: '13px',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            marginBottom: 10,
-            background: '#FAFAFF',
-            width: 'fit-content',
-            margin: '0 auto 0px'
-          }
-        }, /*#__PURE__*/_react["default"].createElement("span", {
-          style: {
-            color: '#565F77'
-          }
-        }, "Door:"), /*#__PURE__*/_react["default"].createElement("div", {
-          style: {
-            display: 'flex',
-            alignItems: 'center'
-          }
-        }, /*#__PURE__*/_react["default"].createElement("img", {
-          src: this.state.DoorStyles && currentTexture && ((_this$state$DoorStyle2 = this.state.DoorStyles.filter(function (item) {
-            return item.name === installation;
-          })[0]) === null || _this$state$DoorStyle2 === void 0 || (_this$state$DoorStyle2 = _this$state$DoorStyle2.items.filter(function (i) {
-            return i.name === (currentTexture.door_style_name || currentTexture.toJS().door_style_name);
-          })[0]) === null || _this$state$DoorStyle2 === void 0 ? void 0 : _this$state$DoorStyle2.thumbnail),
-          style: {
-            height: 14,
-            margin: 3
-          }
-        }), /*#__PURE__*/_react["default"].createElement("b", {
-          style: {
-            color: _constants.SECONDARY_PURPLE_COLOR
-          }
-        }, currentTexture && (currentTexture.name || currentTexture.toJS().name)))))), /*#__PURE__*/_react["default"].createElement(S.SubCategoryTitle, {
-          style: {
-            fontSize: 13,
-            fontWeight: 400,
-            padding: 'unset',
-            textAlign: 'center',
-            lineHeight: '18px',
-            color: '#000F33'
-          }
-        }, "Door selection for all cabinets. To browse the entire collection of doors see below."), /*#__PURE__*/_react["default"].createElement(S.Button, {
-          style: {
-            width: '95%',
-            border: '1px solid',
-            fontSize: 14
-          },
-          onClick: function onClick() {
-            return _this4.setState({
-              cabinetStyleChanging: true
-            });
-          }
-        }, "Change Door"))), cabinetStyleChanging && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(S.DoorStyleSubToolBarWrapper, {
-          style: {
-            width: viewMoreDoorstyle ? 765 : 500
-          }
-        }, !subCabinetStyle.data.length && /*#__PURE__*/_react["default"].createElement("div", {
-          style: {
-            display: 'flex',
-            flexDirection: 'column',
-            gap: '1rem',
-            margin: 'auto',
-            marginTop: '50%',
-            justifyContent: 'center',
-            alignItems: 'center'
-          }
-        }, /*#__PURE__*/_react["default"].createElement("span", {
-          style: {
-            color: 'lightgray'
-          }
-        }, "No results found. Try changing / resetting the filters."), /*#__PURE__*/_react["default"].createElement("span", {
-          style: {
-            color: '#4C12A1',
-            cursor: 'pointer'
-          },
-          onClick: function onClick() {
-            return _this4.setState({
-              resetFilters: true
-            });
-          }
-        }, "Reset Filters")), this.state.currentTexture && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(S.DoorstyleCategoryItem, {
-          style: {
-            position: 'fixed',
-            zIndex: 1,
-            backgroundColor: 'white'
-          }
-        }, /*#__PURE__*/_react["default"].createElement("img", {
-          style: {
-            width: viewMoreDoorstyle ? 150 : 60,
-            height: viewMoreDoorstyle ? 300 : 120,
-            padding: 5
-          },
-          src: this.state.currentTexture.thumbnail
-        }), /*#__PURE__*/_react["default"].createElement(S.ContentCheckImage, {
-          style: {
-            width: viewMoreDoorstyle ? 150 : 60,
-            height: viewMoreDoorstyle ? 300 : 120,
-            padding: viewMoreDoorstyle ? 57 : 12
-          },
-          src: "/assets/img/svg/wizardstep/check-active.svg"
-        }), /*#__PURE__*/_react["default"].createElement(S.SubCategoryItemLabel, {
-          style: {
-            width: 120,
-            marginLeft: 0,
-            marginTop: 15,
-            fontWeight: 700
-          }
-        }, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, this.state.currentTexture.name, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
-          title: (0, _utils.getInstallationSuffix)(_constants.INSTALLATION_SUFFIX_TYPE.NAME, this.state.currentTexture)
-        }, /*#__PURE__*/_react["default"].createElement("img", {
-          style: {
-            fontWeight: 'normal',
-            marginLeft: '0.5rem'
-          },
-          height: "18",
-          src: (_this$state$DoorStyle3 = this.state.DoorStyles.find(function (doorStyle) {
-            var _getInstallationSuffi;
-            return doorStyle.name.toLowerCase() === ((_getInstallationSuffi = (0, _utils.getInstallationSuffix)(_constants.INSTALLATION_SUFFIX_TYPE.NAME, _this4.state.currentTexture)) === null || _getInstallationSuffi === void 0 ? void 0 : _getInstallationSuffi.toLowerCase());
-          })) === null || _this$state$DoorStyle3 === void 0 ? void 0 : _this$state$DoorStyle3.thumbnail,
-          alt: ""
-        }))))), /*#__PURE__*/_react["default"].createElement(S.DoorstyleCategoryItem, null, /*#__PURE__*/_react["default"].createElement("div", {
-          style: {
-            width: viewMoreDoorstyle ? 150 : 60,
-            height: viewMoreDoorstyle ? 300 : 120,
-            padding: 5
-          }
-        }), /*#__PURE__*/_react["default"].createElement("span", {
-          style: {
-            width: 120
-          }
-        }))), subCabinetStyle.data.filter(function (item) {
-          return !(item.name === _this4.state.currentTexture.name && (0, _utils.isEqualInstallationType)(item, _this4.state.currentTexture));
-        }).map(function (item, key) {
-          var installation = _this4.state.DoorStyles.find(function (doorStyle) {
-            var _doorStyle$name, _getInstallationSuffi2;
-            return ((_doorStyle$name = doorStyle.name) === null || _doorStyle$name === void 0 ? void 0 : _doorStyle$name.toLowerCase()) === ((_getInstallationSuffi2 = (0, _utils.getInstallationSuffix)(_constants.INSTALLATION_SUFFIX_TYPE.NAME, item)) === null || _getInstallationSuffi2 === void 0 ? void 0 : _getInstallationSuffi2.toLowerCase());
-          });
-          var installationThumbnail = installation === null || installation === void 0 ? void 0 : installation.thumbnail;
-          return /*#__PURE__*/_react["default"].createElement(S.DoorstyleCategoryItem, {
-            onClick: function onClick() {
-              _this4.setState({
-                cabinetStyleChanging: false,
-                cabinetStyle: _objectSpread(_objectSpread({}, cabinetStyle), {}, {
-                  name: ''
-                }),
-                subCabinetStyle: _objectSpread(_objectSpread({}, subCabinetStyle), {}, {
-                  name: ''
-                }),
-                cabinetColor: _objectSpread(_objectSpread({}, cabinetColor), {}, {
-                  name: ''
-                }),
-                searchName: ''
-              });
-              _this4.getStyle(item);
-            },
-            key: key
-          }, /*#__PURE__*/_react["default"].createElement("img", {
-            style: {
-              width: viewMoreDoorstyle ? 150 : 60,
-              height: viewMoreDoorstyle ? 300 : 120,
-              padding: 5
-            },
-            src: item.thumbnail
-          }), /*#__PURE__*/_react["default"].createElement(S.ContentCheckImage, {
-            style: {
-              width: viewMoreDoorstyle ? 150 : 60,
-              height: viewMoreDoorstyle ? 300 : 120,
-              padding: viewMoreDoorstyle ? 57 : 12
-            },
-            id: "check",
-            src: "/assets/img/svg/wizardstep/check-normal.svg"
-          }), /*#__PURE__*/_react["default"].createElement(S.SubCategoryItemLabel, {
-            style: {
-              width: 120,
-              marginLeft: 0,
-              marginTop: 15,
-              fontWeight: 'normal'
-            }
-          }, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, item.name, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
-            title: installation === null || installation === void 0 ? void 0 : installation.name
-          }, /*#__PURE__*/_react["default"].createElement("img", {
-            style: {
-              fontWeight: 'normal',
-              marginLeft: '0.5rem'
-            },
-            height: "18",
-            src: installationThumbnail,
-            alt: ""
-          })))));
-        })), subCabinetStyle.data.length > 0 && /*#__PURE__*/_react["default"].createElement(S.Button, {
-          style: {
-            padding: 10,
-            borderRadius: '50%',
-            border: "3px solid ".concat(_constants.BG_COLOR_1),
-            marginTop: 'unset',
-            marginLeft: 10,
-            height: 'max-content'
-          }
-        }, /*#__PURE__*/_react["default"].createElement("img", {
-          src: "\\assets\\img\\svg\\lefttoolbar\\view_more.svg",
-          onClick: function onClick() {
-            return _this4.setState({
-              viewMoreDoorstyle: !viewMoreDoorstyle
-            });
-          },
-          style: {
-            height: 18,
-            transform: "rotate(".concat(viewMoreDoorstyle ? -90 : 90, "deg)")
-          }
-        }))))
-      }, {
-        toolbar: 'cabinet',
-        content: /*#__PURE__*/_react["default"].createElement("div", {
-          style: {
-            display: 'flex'
-          }
-        }, /*#__PURE__*/_react["default"].createElement(S.SubToolbarWrapper, {
-          style: {
-            alignItems: 'flex-start'
-          }
-        }, /*#__PURE__*/_react["default"].createElement(S.SubCategoryTitle, null, "Add Cabinets"), /*#__PURE__*/_react["default"].createElement(S.SubCategoryItemWrapper, null, this.props.categoryData.data.cabinets.map(function (cabinet, key) {
-          return /*#__PURE__*/_react["default"].createElement("div", {
-            style: {
-              display: 'flex',
-              flexDirection: 'column'
-            },
-            key: key
-          }, /*#__PURE__*/_react["default"].createElement(S.SubCategoryItem, {
-            onClick: function onClick() {
-              return setSubData(cabinet.name, cabinet.items);
-            },
-            style: {
-              backgroundColor: cabinetCategory.name === cabinet.name && _constants.TEXT_COLOR_NEUTRAL_5
-            }
-          }, /*#__PURE__*/_react["default"].createElement(S.SubCategoryItemImage, {
-            maskImage: cabinet.thumbnail
-          }), /*#__PURE__*/_react["default"].createElement(S.SubCategoryItemLabel, {
-            style: {
-              fontWeight: cabinetCategory.name === cabinet.name && 700
-            }
-          }, cabinet.name)), cabinetCategory.name === cabinet.name && temp);
-        }))), subCabinetCategory.name && /*#__PURE__*/_react["default"].createElement(S.SubToolbarWrapper, {
-          style: {
-            alignItems: 'flex-start',
-            marginLeft: 20,
-            minWidth: 250
-          }
-        }, /*#__PURE__*/_react["default"].createElement(S.SubCategoryItemWrapper, null, subCabinetCategory.data.filter(function (cabinet) {
-          var _this4$props$configDa;
-          var cabinetObject = (0, _processBlackList.buildCurrentCabinetObject)(cabinet, currentTexture);
-          var internalSKU = (0, _utils.makeSKUForMagento)(cabinetObject, _this4.props.catalog);
-          if (!((_this4$props$configDa = _this4.props.configData) !== null && _this4$props$configDa !== void 0 && _this4$props$configDa.productBlacklist)) {
-            return true;
-          }
-          return !_this4.props.configData.productBlacklist.includes(internalSKU);
-        }).map(function (item, key) {
-          var _currentTexture$doorS1, _currentTexture$doorS10, _currentTexture$doorS11, _currentTexture$doorS12, _currentTexture$doorS13, _currentTexture$doorS14, _currentTexture$doorS15, _currentTexture$doorS16, _currentTexture$doorS17, _currentTexture$doorS18;
-          var blMolding = item.category === _constants.ITEM_TYPE.MOLDING;
-          return blMolding ? /*#__PURE__*/_react["default"].createElement(S.SubCategoryItem, {
-            id: item.id,
-            style: {
-              display: !isShowMoldingMenuItem(subCabinetCategory, item) && 'none',
-              minWidth: 250,
-              opacity: subCabinetCategory.name === _constants.TOE_KICK_MOLDING ? 0.5 : 1
-            },
-            onClick: function onClick() {
-              if (subCabinetCategory.name !== _constants.TOE_KICK_MOLDING) {
-                _this4.setFinishing(item);
-              }
-            },
-            key: key
-          }, /*#__PURE__*/_react["default"].createElement("img", {
-            id: "molding&".concat(item.id),
-            style: {
-              height: 70,
-              width: 70,
-              padding: 5
-            },
-            src: item.thumbnail
-          }), /*#__PURE__*/_react["default"].createElement(S.ContentCheckImage, {
-            id: "check",
-            src: "/assets/img/svg/wizardstep/check-normal.svg"
-          }), (item.selected || subCabinetCategory.name === _constants.TOE_KICK_MOLDING) && /*#__PURE__*/_react["default"].createElement(S.ContentCheckImage, {
-            src: "/assets/img/svg/wizardstep/check-active.svg"
-          }), /*#__PURE__*/_react["default"].createElement(S.SubCategoryItemLabel, {
-            style: {
-              fontWeight: item.selected && 700
-            }
-          }, item.name)) : /*#__PURE__*/_react["default"].createElement(S.SubCategoryItem, {
-            style: {
-              display: ((_currentTexture$doorS1 = currentTexture === null || currentTexture === void 0 || (_currentTexture$doorS10 = currentTexture.doorStyles) === null || _currentTexture$doorS10 === void 0 ? void 0 : _currentTexture$doorS10.cds) !== null && _currentTexture$doorS1 !== void 0 ? _currentTexture$doorS1 : []).filter(function (cd) {
-                return cd.itemID === item.itemID;
-              }).length === 0 && 'none',
-              minWidth: 400,
-              cursor: ((_currentTexture$doorS11 = currentTexture === null || currentTexture === void 0 || (_currentTexture$doorS12 = currentTexture.doorStyles) === null || _currentTexture$doorS12 === void 0 ? void 0 : _currentTexture$doorS12.cds) !== null && _currentTexture$doorS11 !== void 0 ? _currentTexture$doorS11 : []).filter(function (cd) {
-                return cd.itemID === item.itemID;
-              }).length === 0 && 'no-drop',
-              paddingLeft: 0
-            },
-            onClick: function onClick() {
-              return currentTexture.doorStyles.cds.filter(function (cd) {
-                return cd.itemID === item.itemID;
-              }).length !== 0 && _this4.cabinetselect(item.name);
-            },
-            key: key
-          }, /*#__PURE__*/_react["default"].createElement("img", {
-            style: {
-              height: 90,
-              width: 90
-            },
-            src: item.thumbnail
-          }), /*#__PURE__*/_react["default"].createElement(S.SubCategoryItemLabel, {
-            style: {
-              textAlign: 'left'
-            }
-          }, item.long_name, " ", /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("span", {
-            style: {
-              fontSize: 14
-            }
-          }, "Width:", ' ', Math.round((0, _convertUnits["default"])(item.info.width).from('in').to(measurementUnit._unit) * 100) / 100, measurementUnit._unit !== 'in' ? measurementUnit._unit : '"', /*#__PURE__*/_react["default"].createElement("br", null), "Depth:", ' ', Math.round((0, _convertUnits["default"])(item.info.height).from('in').to(measurementUnit._unit) * 100) / 100, measurementUnit._unit !== 'in' ? measurementUnit._unit : '"', /*#__PURE__*/_react["default"].createElement("br", null), "Height:", ' ', Math.round((0, _convertUnits["default"])(item.info.tall).from('in').to(measurementUnit._unit) * 100) / 100, measurementUnit._unit !== 'in' ? measurementUnit._unit : '"')), ((_currentTexture$doorS13 = currentTexture === null || currentTexture === void 0 || (_currentTexture$doorS14 = currentTexture.doorStyles) === null || _currentTexture$doorS14 === void 0 ? void 0 : _currentTexture$doorS14.cds) !== null && _currentTexture$doorS13 !== void 0 ? _currentTexture$doorS13 : []).filter(function (cd) {
-            return cd.itemID === item.itemID;
-          }).length === 0 && /*#__PURE__*/_react["default"].createElement(StyledTooltip, {
-            id: "warning_unavailable",
-            title: "This item is not available in the finish you have selected. Please contact us for alternate options in the finish you want."
-          }, /*#__PURE__*/_react["default"].createElement(S.SubCategoryItemLabel, {
-            style: {
-              position: 'absolute',
-              right: 8,
-              bottom: 15,
-              color: 'red',
-              zIndex: 1,
-              opacity: 0.5
-            }
-          }, /*#__PURE__*/_react["default"].createElement("u", null, "Unavailable"))), ((_currentTexture$doorS15 = currentTexture === null || currentTexture === void 0 || (_currentTexture$doorS16 = currentTexture.doorStyles) === null || _currentTexture$doorS16 === void 0 ? void 0 : _currentTexture$doorS16.cds) !== null && _currentTexture$doorS15 !== void 0 ? _currentTexture$doorS15 : []).filter(function (cd) {
-            return cd.itemID === item.itemID;
-          }).length === 0 && /*#__PURE__*/_react["default"].createElement(_Error["default"], {
-            style: {
-              position: 'absolute',
-              right: 100,
-              bottom: 18,
-              color: 'red',
-              fontSize: '1rem'
-            }
-          }), ((_currentTexture$doorS17 = currentTexture === null || currentTexture === void 0 || (_currentTexture$doorS18 = currentTexture.doorStyles) === null || _currentTexture$doorS18 === void 0 ? void 0 : _currentTexture$doorS18.cds) !== null && _currentTexture$doorS17 !== void 0 ? _currentTexture$doorS17 : []).filter(function (cd) {
-            return cd.itemID === item.itemID;
-          }).length === 0 && /*#__PURE__*/_react["default"].createElement("div", {
-            style: {
-              position: 'absolute',
-              width: '100%',
-              height: '100%',
-              backgroundColor: 'rgba(255, 255, 255, 0.7)'
-            }
-          }));
-        }))))
-      }, {
-        toolbar: 'appliance',
-        content: /*#__PURE__*/_react["default"].createElement("div", {
-          style: {
-            display: 'flex'
-          }
-        }, /*#__PURE__*/_react["default"].createElement(S.SubToolbarWrapper, {
-          style: {
-            alignItems: 'flex-start'
-          }
-        }, /*#__PURE__*/_react["default"].createElement(S.SubCategoryTitle, null, "Add Appliances"), /*#__PURE__*/_react["default"].createElement(S.SubCategoryItemWrapper, null, this.props.categoryData.data.appliances.map(function (appliance, key) {
-          return /*#__PURE__*/_react["default"].createElement("div", {
-            style: {
-              display: 'flex',
-              flexDirection: 'column'
-            },
-            key: key
-          }, /*#__PURE__*/_react["default"].createElement(S.SubCategoryItem, {
-            style: {
-              backgroundColor: appliance.items.find(function (item) {
-                return item.type === 'cabinet';
-              }) ? subCabinetCategory.name === appliance.name && _constants.TEXT_COLOR_NEUTRAL_5 : cabinetCategory.name === appliance.name && _constants.TEXT_COLOR_NEUTRAL_5
-            },
-            onClick: function onClick() {
-              return setSubData(appliance.name, appliance.items);
-            }
-          }, /*#__PURE__*/_react["default"].createElement(S.SubCategoryItemImage, {
-            maskImage: appliance.thumbnail
-          }), /*#__PURE__*/_react["default"].createElement(S.SubCategoryItemLabel, {
-            style: {
-              fontWeight: appliance.items.find(function (item) {
-                return item.type === 'cabinet';
-              }) ? subCabinetCategory.name === appliance.name && 700 : cabinetCategory.name === appliance.name && 700
-            }
-          }, appliance.name)), cabinetCategory.name === appliance.name && temp);
-        }))), subCabinetCategory.name && /*#__PURE__*/_react["default"].createElement(S.SubToolbarWrapper, {
-          style: {
-            alignItems: 'flex-start',
-            marginLeft: 20,
-            minWidth: 350
-          }
-        }, /*#__PURE__*/_react["default"].createElement(S.SubCategoryItemWrapper, null, subCabinetCategory.data.map(function (item, key) {
-          return /*#__PURE__*/_react["default"].createElement(S.SubCategoryItem, {
-            onClick: function onClick() {
-              return _this4.cabinetselect(item.name);
-            },
-            key: key
-          }, /*#__PURE__*/_react["default"].createElement("img", {
-            style: {
-              height: 70,
-              width: 70
-            },
-            src: item.thumbnail
-          }), /*#__PURE__*/_react["default"].createElement(S.SubCategoryItemLabel, {
-            style: {
-              textAlign: 'left'
-            }
-          }, item.name, " ", /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("span", {
-            style: {
-              fontSize: 14
-            }
-          }, "Width:", ' ', Math.round((0, _convertUnits["default"])(item.info.width).from('in').to(measurementUnit._unit) * 100) / 100, measurementUnit._unit !== 'in' ? measurementUnit._unit : '"', /*#__PURE__*/_react["default"].createElement("br", null), "Depth:", ' ', Math.round((0, _convertUnits["default"])(item.info.height).from('in').to(measurementUnit._unit) * 100) / 100, measurementUnit._unit !== 'in' ? measurementUnit._unit : '"', /*#__PURE__*/_react["default"].createElement("br", null), "Height:", ' ', Math.round((0, _convertUnits["default"])(item.info.tall).from('in').to(measurementUnit._unit) * 100) / 100, measurementUnit._unit !== 'in' ? measurementUnit._unit : '"')));
-        }))))
-      }, {
-        toolbar: 'finishing',
-        content: /*#__PURE__*/_react["default"].createElement("div", {
-          style: {
-            display: 'flex'
-          }
-        }, /*#__PURE__*/_react["default"].createElement(S.SubToolbarWrapper, {
-          style: {
-            alignItems: 'flex-start'
-          }
-        }, /*#__PURE__*/_react["default"].createElement(S.SubCategoryTitle, null, "Add Finishings"), /*#__PURE__*/_react["default"].createElement(S.SubCategoryItemWrapper, null, finishingData.map(function (finishing, key) {
-          return /*#__PURE__*/_react["default"].createElement(S.SubCategoryItem, {
-            style: {
-              backgroundColor: selectedFinishing === finishing.name && _constants.TEXT_COLOR_NEUTRAL_5
-            },
-            onClick: function onClick() {
-              return _this4.setState({
-                selectedFinishing: selectedFinishing === finishing.name ? '' : finishing.name
-              });
-            },
-            key: key
-          }, /*#__PURE__*/_react["default"].createElement(S.SubCategoryItemImage, {
-            maskImage: finishing.thumbnail
-          }), /*#__PURE__*/_react["default"].createElement(S.SubCategoryItemLabel, {
-            style: {
-              fontWeight: selectedFinishing === finishing.name && 700
-            }
-          }, finishing.name));
-        }))), selectedFinishing && /*#__PURE__*/_react["default"].createElement(S.SubToolbarWrapper, {
-          style: {
-            alignItems: 'flex-start',
-            marginLeft: 20,
-            minWidth: 250
-          }
-        }, /*#__PURE__*/_react["default"].createElement(S.SubCategoryItemWrapper, null, finishingData.filter(function (element) {
-          return element.name === selectedFinishing;
-        })[0].data.map(function (item, key) {
-          if (selectedFinishing === 'Wall Color') {
-            return /*#__PURE__*/_react["default"].createElement(S.SubCategoryItem, {
-              style: {
-                minWidth: 250
-              },
-              onClick: function onClick() {
-                return _this4.setFinishing(item);
-              },
-              key: key
-            }, /*#__PURE__*/_react["default"].createElement("div", {
-              style: {
-                height: 70,
-                width: 70,
-                backgroundColor: item.color,
-                padding: 2
-              }
-            }), /*#__PURE__*/_react["default"].createElement(S.ContentCheckImage, {
-              id: "check",
-              src: "/assets/img/svg/wizardstep/check-normal.svg"
-            }), item.selected && /*#__PURE__*/_react["default"].createElement(S.ContentCheckImage, {
-              src: "/assets/img/svg/wizardstep/check-active.svg"
-            }), /*#__PURE__*/_react["default"].createElement(S.SubCategoryItemLabel, {
-              style: {
-                fontWeight: item.selected && 700
-              }
-            }, item.name));
-          } else {
-            return /*#__PURE__*/_react["default"].createElement(S.SubCategoryItem, {
-              id: item.id,
-              style: {
-                minWidth: 250
-              },
-              onClick: function onClick() {
-                return _this4.setFinishing(item);
-              },
-              key: key
-            }, /*#__PURE__*/_react["default"].createElement("img", {
-              id: "finishing&".concat(item.id),
-              style: {
-                height: 70,
-                width: 70,
-                padding: 5
-              },
-              src: item.thumbnail
-            }), selectedFinishing !== 'Lighting' && selectedFinishing !== 'Furnishing' && /*#__PURE__*/_react["default"].createElement(S.ContentCheckImage, {
-              id: "check",
-              src: "/assets/img/svg/wizardstep/check-normal.svg"
-            }), selectedFinishing !== 'Lighting' && selectedFinishing !== 'Furnishing' && item.selected && /*#__PURE__*/_react["default"].createElement(S.ContentCheckImage, {
-              src: "/assets/img/svg/wizardstep/check-active.svg"
-            }), selectedFinishing !== 'Lighting' && selectedFinishing !== 'Furnishing' ? /*#__PURE__*/_react["default"].createElement(S.SubCategoryItemLabel, {
-              style: {
-                fontWeight: item.selected && 700
-              }
-            }, item.name) : /*#__PURE__*/_react["default"].createElement(S.SubCategoryItemLabel, {
-              style: {
-                textAlign: 'left'
-              }
-            }, item.name, /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("span", {
-              style: {
-                fontSize: 14
-              }
-            }, "Width:", ' ', Math.round((0, _convertUnits["default"])(item.width).from('in').to(measurementUnit._unit) * 100) / 100, measurementUnit._unit !== 'in' ? measurementUnit._unit : '"', /*#__PURE__*/_react["default"].createElement("br", null), "Depth:", ' ', Math.round((0, _convertUnits["default"])(item.length).from('in').to(measurementUnit._unit) * 100) / 100, measurementUnit._unit !== 'in' ? measurementUnit._unit : '"', /*#__PURE__*/_react["default"].createElement("br", null), "Height:", ' ', Math.round((0, _convertUnits["default"])(item.height).from('in').to(measurementUnit._unit) * 100) / 100, measurementUnit._unit !== 'in' ? measurementUnit._unit : '"')));
-          }
-        }))))
-      }, {
-        toolbar: 'reviewforquote',
-        content: /*#__PURE__*/_react["default"].createElement(_ReviewForQuote.ReviewForQuote, {
-          accessToken: this.props.accessToken,
-          isTokenPresent: !!this.props.match.params.token,
-          currentTexture: currentTexture,
-          userInfo: userInfo,
-          doorStyles: this.state.DoorStyles,
-          catalog: this.props.catalog,
-          categoryData: this.props.categoryData,
-          items: this.state.elements.items,
-          moldingData: this.state.moldingData,
-          handleSubmitPrompt: this.props.handleSubmitPrompt,
-          handleSubmitForQuote: this.props.handleSubmitForQuote,
-          measurementUnit: measurementUnit,
-          setDownloadPopupVisible: this.props.setDownloadPopupVisible
-        })
-      }];
-      var toolbarData = [{
-        key: 'room-shape',
-        label: 'Room Shape',
-        url: '/assets/img/svg/lefttoolbar/room-shape.svg'
-      }, {
-        key: 'door-style',
-        label: 'Door Style',
-        url: '/assets/img/svg/lefttoolbar/door-style.svg'
-      }, {
-        key: 'cabinet',
-        label: 'Cabinets',
-        url: '/assets/img/svg/lefttoolbar/cabinet.svg'
-      }, {
-        key: 'appliance',
-        label: 'Appliances',
-        url: '/assets/img/svg/lefttoolbar/appliance.svg'
-      }, {
-        key: 'finishing',
-        label: 'Finishing',
-        url: '/assets/img/svg/lefttoolbar/finishing.svg'
-      }, {
-        key: 'reviewforquote',
-        label: 'Review & Quote',
-        url: '/assets/img/svg/lefttoolbar/reviewforquote.svg'
-      }];
-      return /*#__PURE__*/_react["default"].createElement("aside", {
-        style: _objectSpread(_objectSpread({}, ASIDE_STYLE), {}, {
-          maxWidth: !_constants.ARRAY_3D_MODES.includes(mode) ? width : 90,
-          maxHeight: height,
-          marginTop: this.props.headerH + 10
-        })
-      }, /*#__PURE__*/_react["default"].createElement(_index["default"], {
-        isOpen: this.state.isSnackBarOpen,
-        message: this.state.snackBarMessage,
-        handleClose: function handleClose() {
-          return _this4.setState({
-            isSnackBarOpen: false,
-            snackBarMessage: ''
-          });
-        }
-      }), /*#__PURE__*/_react["default"].createElement(_confirmPopup["default"], {
-        visible: this.state.isPopupOpen,
-        handleConfirmLoad: function handleConfirmLoad() {
-          return _this4.handleConfirmLoad();
-        },
-        submit: function submit() {
-          return _this4._submit();
-        }
-      }), /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          position: 'absolute',
-          display: 'flex',
-          left: 10,
-          zIndex: 1,
-          flexDirection: 'row'
-        }
-      }, /*#__PURE__*/_react["default"].createElement(S.ToolbarWrapper, null, /*#__PURE__*/_react["default"].createElement(S.SubToolbarWrapper, {
-        style: {
-          marginLeft: 0,
-          minWidth: 'unset'
-        }
-      }, toolbarData.map(function (data, key) {
-        return /*#__PURE__*/_react["default"].createElement(S.ToolbarButton, {
-          onClick: function onClick() {
-            _this4.props.setToolbar(_this4.props.toolBar === data.key ? '' : data.key);
-            _this4.setState({
-              cabinetCategory: {
-                name: '',
-                data: []
-              },
-              subCabinetCategory: {
-                name: '',
-                data: []
-              },
-              cabinetStyleChanging: false,
-              searchName: ''
-            });
-            if (_this4.props.toolBar !== data.key && data.key === 'reviewforquote') {
-              var _moldingData = [];
-              var cabinetData = _this4.props.categoryData.data.cabinets;
-              var moldings = [];
-              // get all moldings info
-              cabinetData.forEach(function (itemCat) {
-                itemCat.items.forEach(function (item) {
-                  item.items.forEach(function (it) {
-                    if (it.category === 'molding') {
-                      moldings.push(it);
-                    }
-                  });
-                });
-              });
-              var items = layer.items.toArray();
-              moldings.forEach(function (molding) {
-                var itemGroups = [];
-                var temp_items = [];
-                items.forEach(function (item) {
-                  if (item.molding.some(function (mol) {
-                    return mol.itemID === molding.itemID;
-                  }) && _export.MoldingUtils.isEnableItemForMolding(layer, item)) {
-                    temp_items.push(item);
-                  }
-                });
-                if (temp_items.length) {
-                  while (temp_items.length > 0) {
-                    var itemGroup = [temp_items[0]];
-                    var _loop2 = function _loop2(_idx) {
-                      if (!itemGroup.some(function (it) {
-                        return it.id === temp_items[_idx].id;
-                      }) && _export.MoldingUtils.isItemSnappedGroup(temp_items[_idx], itemGroup)) {
-                        itemGroup.push(temp_items[_idx]);
-                        _idx = 0;
-                      }
-                      idx = _idx;
-                    };
-                    for (var idx = 0; idx < temp_items.length; idx++) {
-                      _loop2(idx);
-                    }
-                    itemGroup.forEach(function (item) {
-                      var index = temp_items.findIndex(function (it) {
-                        return it.id === item.id;
-                      });
-                      if (index > -1) {
-                        temp_items.splice(index, 1);
-                      }
-                    });
-                    itemGroups.push(itemGroup);
-                  }
-                  var molding_totalLength = 0;
-                  itemGroups.forEach(function (itemgroup) {
-                    var allLineRects = _export.GeometryUtils.buildRectFromLines(layer, _export.GeometryUtils.getAllLines(layer));
-                    var items = _toConsumableArray(itemgroup);
-                    var MGlines = _export.MoldingUtils.getLinesOfItem(items[0], allLineRects, _this4.props.catalog);
-                    items = _export.MoldingUtils.sortItemsByDistance(items, items[0]);
-                    var _loop3 = function _loop3() {
-                      var itemLines = _export.MoldingUtils.getLinesOfItem(items[_i3], allLineRects, _this4.props.catalog);
-                      var temp_MGLines = [];
-                      MGlines.forEach(function (line) {
-                        var idx = itemLines.findIndex(function (itemLine) {
-                          return _export.MoldingUtils.isLinesOverlapped(line, itemLine);
-                        });
-                        var curItemLine = itemLines[idx];
-                        if (idx > -1) {
-                          if (!(_export.GeometryUtils.samePoints(line[0], curItemLine[0]) && _export.GeometryUtils.samePoints(line[1], curItemLine[1]) || _export.GeometryUtils.samePoints(line[0], curItemLine[1]) && _export.GeometryUtils.samePoints(line[1], curItemLine[0]))) {
-                            var MGLine = _export.MoldingUtils.mergeOverlappedLines(line, curItemLine);
-                            temp_MGLines.push(MGLine);
-                          }
-                          itemLines.splice(idx, 1);
-                        } else {
-                          temp_MGLines.push(line);
-                        }
-                      });
-                      itemLines.forEach(function (itemLine) {
-                        return temp_MGLines.push(itemLine);
-                      });
-                      MGlines = [].concat(temp_MGLines);
-                    };
-                    for (var _i3 = 1; _i3 < items.length; _i3++) {
-                      _loop3();
-                    }
-                    MGlines.forEach(function (line) {
-                      molding_totalLength += _export.GeometryUtils.verticesDistance(line[0], line[1]);
-                    });
-                  });
-                  molding_totalLength = (0, _convertUnits["default"])(molding_totalLength).from('cm').to('in');
-                  _moldingData.push(_objectSpread(_objectSpread({}, molding), {}, {
-                    doorStyle: _this4.state.currentTexture,
-                    count: Math.ceil(molding_totalLength * 1.1 / 96)
-                  }));
-                }
-              });
-
-              // calc toe kick molding
-              var tmp = [];
-              items.forEach(function (item) {
-                if (item.category === 'cabinet' && !item.cabinet_category.toLowerCase().includes('microwave')) {
-                  tmp.push(item);
-                }
-              });
-              var tmpMoldingData = [];
-              var toedoorStyles = [];
-              tmp.map(function (item) {
-                var _item$molding;
-                if (item.layoutpos === _constants.BASE_CABINET_LAYOUTPOS && ((0, _utils.isEmpty)(item.molding) || ((_item$molding = item.molding) === null || _item$molding === void 0 ? void 0 : _item$molding.length) < 1 || !_export.MoldingUtils.isEnableItemForMolding(layer, item))) {
-                  // let layer = state.scene.layers.get(
-                  //   state.scene.selectedLayer
-                  // );
-                  // let allLines = GeometryUtils.getAllLines(layer);
-                  // let x = item.x;
-                  // let y = item.y;
-                  // let rotRad = (item.rotation / 180) * Math.PI;
-                  var w = item.properties.get('width').get('_length');
-                  var wUnit = item.properties.get('width').get('_unit') || 'cm';
-                  w = (0, _convertUnits["default"])(w / 2).from(wUnit).to('cm');
-                  var h = item.properties.get('depth').get('_length');
-                  var hUnit = item.properties.get('depth').get('_unit') || 'cm';
-                  h = (0, _convertUnits["default"])(h / 2).from(hUnit).to('cm');
-                  // let mx = x - w * Math.cos(rotRad);
-                  // let my = y - w * Math.sin(rotRad);
-                  // let x0 = mx + h * Math.sin(rotRad);
-                  // let y0 = my - h * Math.cos(rotRad);
-                  // let x3 = mx * 2 - x0;
-                  // let y3 = my * 2 - y0;
-                  // if (
-                  //   !GeometryUtils.isSnappedLine(
-                  //     {
-                  //       rect: [
-                  //         { x: x0, y: y0 },
-                  //         { x: x1, y: y1 },
-                  //         {
-                  //           x: x2,
-                  //           y: y2
-                  //         },
-                  //         { x: x3, y: y3 }
-                  //       ]
-                  //     },
-                  //     allLineRects
-                  //   )
-                  // )
-                  //   return false;
-                  var outline = null;
-                  var element = _this4.context.catalog.elements[item.get('type')];
-                  if (!element) element = _this4.context.catalog.elements[(0, _utils.returnReplaceableDeepSearchType)(item.get('type'))];
-                  outline = element.info.outline;
-                  var len = 0;
-                  if (outline) {
-                    // Extract Points from `outline`
-                    var outlinePaths = outline.paths;
-                    var outlineWidth = outline.svgWidth;
-                    var outlineHeight = outline.svgHeight;
-                    var outlinePoints = []; // Hold Points Of SVG
-                    var _iterator2 = _createForOfIteratorHelper(outlinePaths),
-                      _step2;
-                    try {
-                      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-                        var path = _step2.value;
-                        var _iterator3 = _createForOfIteratorHelper(path.subPaths),
-                          _step3;
-                        try {
-                          for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
-                            var subPath = _step3.value;
-                            outlinePoints = outlinePoints.concat(subPath.getPoints());
-                          }
-                        } catch (err) {
-                          _iterator3.e(err);
-                        } finally {
-                          _iterator3.f();
-                        }
-                      }
-                    } catch (err) {
-                      _iterator2.e(err);
-                    } finally {
-                      _iterator2.f();
-                    }
-                    var maxX = outlinePoints[0].x,
-                      minX = outlinePoints[0].x;
-                    var maxY = outlinePoints[0].y,
-                      minY = outlinePoints[0].y;
-                    outlinePoints.forEach(function (point) {
-                      if (point.x > maxX) {
-                        maxX = point.x;
-                      }
-                      if (point.x < minX) {
-                        minX = point.x;
-                      }
-                      if (point.y > maxY) {
-                        maxY = point.y;
-                      }
-                      if (point.y < minY) {
-                        minY = point.y;
-                      }
-                    });
-                    outlinePoints.forEach(function (point) {
-                      if (_export.GeometryUtils.isPointInRect([{
-                        x: minX,
-                        y: minY
-                      }, {
-                        x: minX,
-                        y: maxY
-                      }, {
-                        x: maxX,
-                        y: maxY
-                      }, {
-                        x: maxX,
-                        y: minY
-                      }], point)) {
-                        if (point.x > 10) len += (point.x / outlineWidth - 0.5) * w * 2 + h * 2 - (point.y / outlineHeight - 0.5) * h * 2;
-                      }
-                    });
-                    len = (0, _convertUnits["default"])(len).from('cm').to('in');
-                  } else {
-                    w = (0, _convertUnits["default"])(w * 2).from('cm').to('in');
-                    len += w;
-                  }
-                  var doorIndex = toedoorStyles.findIndex(function (a) {
-                    var iDS = item === null || item === void 0 ? void 0 : item.doorStyle;
-                    if (!iDS) return false;
-                    if (!iDS.hasOwnProperty('id')) {
-                      iDS = iDS.toJS();
-                    }
-                    return a.doorStyle.id === iDS.id && (0, _utils.isEqualInstallationType)(a.doorStyle, iDS);
-                  });
-                  if (doorIndex > -1) {
-                    toedoorStyles[doorIndex].totalLength += len;
-                  } else {
-                    toedoorStyles.push({
-                      doorStyle: item.doorStyle.hasOwnProperty('id') ? item.doorStyle : item.doorStyle && item.doorStyle.toJS(),
-                      totalLength: len
-                    });
-                  }
-                }
-              });
-              toedoorStyles.forEach(function (doorStyle) {
-                var thumbnail = '';
-                moldings.forEach(function (molding) {
-                  if (molding.name === (0, _utils.getToeKickSKU)(doorStyle.doorStyle, _this4.props.catalog, true)) thumbnail = molding.thumbnail;
-                });
-                doorStyle.totalLength && tmpMoldingData.push({
-                  name: _constants.TOE_KICK_MOLDING,
-                  sku: (0, _utils.getToeKickSKU)(doorStyle.doorStyle, _this4.props.catalog),
-                  thumbnail: thumbnail,
-                  category: 'molding',
-                  type: 'cabinet',
-                  doorStyle: doorStyle.doorStyle,
-                  count: Math.ceil(doorStyle.totalLength * 1.1 / 96)
-                });
-              });
-              if (tmpMoldingData.length > 0) _this4.setState({
-                moldingData: [].concat(_moldingData, tmpMoldingData)
-              });else _this4.setState({
-                moldingData: _moldingData
-              });
-            }
-          },
-          key: key
-        }, /*#__PURE__*/_react["default"].createElement(S.ToolbarButtonImageWrapper, {
-          style: {
-            backgroundColor: _this4.props.toolBar === data.key && _constants.SECONDARY_PURPLE_COLOR
-          }
-        }, /*#__PURE__*/_react["default"].createElement(S.ToolbarButtonImage, {
-          maskImage: data.url,
-          style: {
-            backgroundColor: _this4.props.toolBar === data.key ? _constants.BG_COLOR_1 : _constants.SECONDARY_PURPLE_COLOR
-          }
-        })), /*#__PURE__*/_react["default"].createElement(S.ToolbarButtonTitle, {
-          style: {
-            fontWeight: _this4.props.toolBar === data.key && 700
-          }
-        }, data.label));
-      })), toolbar && !this.props.state.isCabinetDrawing && categories.filter(function (category) {
-        return category.toolbar === _this4.props.toolBar;
-      }).length !== 0 && categories.filter(function (category) {
-        return category.toolbar === _this4.props.toolBar;
-      })[0].content)), panel, hintText, controlView, /*#__PURE__*/_react["default"].createElement("canvas", {
-        id: "canvas_crop_image",
-        style: {
-          zIndex: -1,
-          position: 'fixed',
-          top: '0px',
-          left: '0px'
-        },
-        onMouseDown: function onMouseDown(e) {
-          return _this4.onMouseDown(e);
-        },
-        onMouseMove: function onMouseMove(e) {
-          return _this4.onMouseMove(e);
-        },
-        onMouseUp: function onMouseUp(e) {
-          return _this4.onMouseUp(e);
-        }
-      }, ' ', "The SCREENSHOT is not available in this browser!!!"), /*#__PURE__*/_react["default"].createElement(_setDoorStyleOption["default"], {
-        content: 'Do you want to change current cabinet or change ALL?',
-        handle: function handle(value) {
-          return _this4.setDoorStyleOption(value);
-        },
-        visible: this.state.setDoorStylePopupVisible,
-        setVisible: function setVisible(value) {
-          return _this4.setState({
-            setDoorStylePopupVisible: value
-          });
-        }
-      }), item_warning, /*#__PURE__*/_react["default"].createElement(S.WarningItem, {
-        id: "warning_box_2d",
-        style: {
-          display: 'none'
-        }
-      }, /*#__PURE__*/_react["default"].createElement(S.SubCategoryItemImage, {
-        maskImage: "/assets/img/svg/3d_item_warning_info.svg",
-        style: {
-          backgroundColor: _constants.BG_COLOR_1,
-          marginRight: 10,
-          height: 30,
-          width: 30
-        }
-      }), "This item is not available in the current door style. Replace it with another one."));
-    }
-  }]);
-}(_react.PureComponent);
-Toolbar.propTypes = {
-  state: _propTypes["default"].object.isRequired,
-  width: _propTypes["default"].number.isRequired,
-  content: _propTypes["default"].number.isRequired,
-  height: _propTypes["default"].number.isRequired,
-  allowProjectFileSupport: _propTypes["default"].bool.isRequired,
-  toolbarButtons: _propTypes["default"].array
-};
-Toolbar.contextTypes = {
-  projectActions: _propTypes["default"].object.isRequired,
-  viewer2DActions: _propTypes["default"].object.isRequired,
-  viewer3DActions: _propTypes["default"].object.isRequired,
-  linesActions: _propTypes["default"].object.isRequired,
-  holesActions: _propTypes["default"].object.isRequired,
-  itemsActions: _propTypes["default"].object.isRequired,
-  areaActions: _propTypes["default"].object.isRequired,
-  translator: _propTypes["default"].object.isRequired,
-  catalog: _propTypes["default"].object.isRequired
-};
-//# sourceMappingURL=index.js.map