kitchen-simulator 3.1.2 → 3.1.11

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

@@ -13,6 +13,7 @@ import { convert } from "./convert-units-lite";
 import { GeometryUtils, MathUtils } from "./export";
 import { returnReplaceableDeepSearchType } from "../components/viewer2d/utils";
 import { SVGLoader } from 'three/addons/loaders/SVGLoader';
+import { getMoldingDataOfScene } from "./molding";
 var PRECISION = 2;
 function loadJSON(_x) {
   return _loadJSON.apply(this, arguments);
@@ -1058,13 +1059,15 @@ export function handleExternalEvent(_x10) {
 function _handleExternalEvent() {
   _handleExternalEvent = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee9(props) {
     var _evt$payload3, _evt$payload4;
-    var evt, state, _evt$payload, cdsItems, itemKeys, _loop3, i, _props$onInternalEven, sLineCnt, element, _state$viewer2D, _evt$payload$initialP, mouseX, mouseY, v2d, vPosX, vPosY, layerID, defaulTitle, _Object$keys, _evt$payload5, doorStyle, itemCDS, isAll, layerId, _cdsItems, allItems, selectedItemId, _itemKeys, _loop4, _i2, _props$onInternalEven2, _evt$payload6, roomShapeType, width, height, _doorStyle, value, _value, _evt$payload7, moldingInfo, isGlobal, distElement, _distElement, _evt$payload8, option, _value2, _layerId, layer, _layer$getIn, selectedLines, selectedHoles, selectedItems, _i4, _i5, _i6, _evt$payload9, _evt$payload0, _evt$payload1, _evt$payload10, _layerID, _layer, orginalItemInfo, originalItem, originalItemPos, replaceItem, _props$onInternalEven3, _t5;
+    var evt, state, layerId, layer, _evt$payload, cdsItems, itemKeys, _loop3, i, _props$onInternalEven, sLineCnt, element, _state$viewer2D, _evt$payload$initialP, mouseX, mouseY, v2d, vPosX, vPosY, layerID, defaulTitle, _Object$keys, _evt$payload5, doorStyle, itemCDS, isAll, _layerId, _cdsItems, allItems, selectedItemId, _itemKeys, _loop4, _i2, _props$onInternalEven2, _evt$payload6, roomShapeType, width, height, _doorStyle, value, _value, _evt$payload7, moldingInfo, isGlobal, distElement, _distElement, _evt$payload8, option, _value2, _layerId2, _layer, _layer$getIn, selectedLines, selectedHoles, selectedItems, _i4, _i5, _i6, _evt$payload9, _evt$payload0, _evt$payload1, _evt$payload10, _layerID, _layer2, orginalItemInfo, originalItem, originalItemPos, replaceItem, _props$onInternalEven3, sceneData, currentTexture, _t5;
     return _regeneratorRuntime.wrap(function (_context1) {
       while (1) switch (_context1.prev = _context1.next) {
         case 0:
           // console.log('***external event****', props);
           evt = props.externalEvent;
           state = props.state.get('KitchenConfigurator');
+          layerId = state.getIn(['scene', 'selectedLayer']);
+          layer = state.getIn(['scene', 'layers', layerId]);
           _t5 = evt === null || evt === void 0 ? void 0 : evt.type;
           _context1.next = _t5 === EXTERNAL_EVENT_LOAD_PROJECT ? 1 : _t5 === EXTERNAL_EVENT_TOGGLE_TO_3D ? 5 : _t5 === EXTERNAL_EVENT_TOGGLE_TO_2D ? 6 : _t5 === EXTERNAL_EVENT_TOGGLE_TO_ELEVATION ? 7 : _t5 === EXTERNAL_EVENT_ADD_WALL ? 8 : _t5 === EXTERNAL_EVENT_ADD_ITEM ? 9 : _t5 === EXTERNAL_EVENT_ADD_HOLE ? 12 : _t5 === EXTERNAL_EVENT_MOVE_PAN ? 13 : _t5 === EXTERNAL_EVENT_NEW_PROJECT ? 14 : _t5 === EXTERNAL_EVENT_CHANGE_DOORSTYLE ? 15 : _t5 === EXTERNAL_EVENT_ADD_ROOM_SHAPE ? 19 : _t5 === EXTERNAL_EVENT_ZOOM_IN ? 20 : _t5 === EXTERNAL_EVENT_ZOOM_OUT ? 21 : _t5 === EXTERNAL_EVENT_CENTERING_2D ? 22 : _t5 === EXTERNAL_EVENT_UNDO ? 23 : _t5 === EXTERNAL_EVENT_REDO ? 24 : _t5 === EXTERNAL_EVENT_SET_MOLDING ? 25 : _t5 === EXTERNAL_EVENT_DUPLICATE_ELEMENT ? 27 : _t5 === EXTERNAL_EVENT_DELETE_ELEMENT ? 28 : _t5 === EXTERNAL_EVENT_PROJECT_SETTING ? 29 : _t5 === EXTERNAL_EVENT_UPDATE_ATTRIBUTE ? 30 : _t5 === EXTERNAL_EVENT_UPDATE_PROPERTY ? 30 : _t5 === EXTERNAL_EVENT_REPLACE_CABINET ? 31 : _t5 === EXTERNAL_EVENT_SET_FINISHING ? 33 : _t5 === EXTERNAL_EVENT_SYNC_SCENE ? 34 : 35;
           break;
@@ -1155,7 +1158,7 @@ function _handleExternalEvent() {
           props.projectActions.setMode(MODE_IDLE);
           return _context1.abrupt("continue", 35);
         case 7:
-          sLineCnt = state.getIn(['scene', 'layers', 'layer-1', 'selected', 'lines']).size;
+          sLineCnt = layer.selected.lines.size;
           if (sLineCnt > 0) props.projectActions.setMode(MODE_ELEVATION_VIEW);
           return _context1.abrupt("continue", 35);
         case 8:
@@ -1208,10 +1211,10 @@ function _handleExternalEvent() {
           return _context1.abrupt("continue", 35);
         case 15:
           _evt$payload5 = evt.payload, doorStyle = _evt$payload5.doorStyle, itemCDS = _evt$payload5.itemCDS, isAll = _evt$payload5.isAll; // prepare item data request
-          layerId = state.getIn(['scene', 'selectedLayer']);
+          _layerId = state.getIn(['scene', 'selectedLayer']);
           _cdsItems = [];
-          allItems = state.getIn(['scene', 'layers', layerId, 'items']).toJS();
-          selectedItemId = state.getIn(['scene', 'layers', layerId]).selected.items.toJS()[0];
+          allItems = state.getIn(['scene', 'layers', _layerId, 'items']).toJS();
+          selectedItemId = state.getIn(['scene', 'layers', _layerId]).selected.items.toJS()[0];
           _itemKeys = isAll ? (_Object$keys = Object.keys(allItems)) !== null && _Object$keys !== void 0 ? _Object$keys : [] : [selectedItemId];
           _loop4 = /*#__PURE__*/_regeneratorRuntime.mark(function _loop4() {
             var _itemCDS$find;
@@ -1351,18 +1354,18 @@ function _handleExternalEvent() {
           }
           return _context1.abrupt("continue", 35);
         case 30:
-          _layerId = state.getIn(['scene', 'selectedLayer']);
-          layer = state.getIn(['scene', 'layers', _layerId]);
-          _layer$getIn = layer.getIn(['selected']), selectedLines = _layer$getIn.lines, selectedHoles = _layer$getIn.holes, selectedItems = _layer$getIn.items;
-          for (_i4 = 0; _i4 < selectedLines.size; _i4++) (evt === null || evt === void 0 ? void 0 : evt.type) === EXTERNAL_EVENT_UPDATE_ATTRIBUTE ? updateAttributeOfSelectedElement(layer.getIn(['lines', selectedLines.get(_i4)]), evt.payload, state, layer, props.catalog, props.projectActions, evt.callback) : updatePropertyOfSelectedElement(layer.getIn(['lines', selectedLines.get(_i4)]), evt.payload, props.catalog, props.projectActions, evt.callback);
-          for (_i5 = 0; _i5 < selectedHoles.size; _i5++) (evt === null || evt === void 0 ? void 0 : evt.type) === EXTERNAL_EVENT_UPDATE_ATTRIBUTE ? updateAttributeOfSelectedElement(layer.getIn(['holes', selectedHoles.get(_i5)]), evt.payload, state, layer, props.catalog, props.projectActions, evt.callback) : updatePropertyOfSelectedElement(layer.getIn(['holes', selectedHoles.get(_i5)]), evt.payload, props.catalog, props.projectActions, evt.callback);
-          for (_i6 = 0; _i6 < selectedItems.size; _i6++) (evt === null || evt === void 0 ? void 0 : evt.type) === EXTERNAL_EVENT_UPDATE_ATTRIBUTE ? updateAttributeOfSelectedElement(layer.getIn(['items', selectedItems.get(_i6)]), evt.payload, state, layer, props.catalog, props.projectActions, evt.callback) : updatePropertyOfSelectedElement(layer.getIn(['items', selectedItems.get(_i6)]), evt.payload, props.catalog, props.projectActions, evt.callback);
+          _layerId2 = state.getIn(['scene', 'selectedLayer']);
+          _layer = state.getIn(['scene', 'layers', _layerId2]);
+          _layer$getIn = _layer.getIn(['selected']), selectedLines = _layer$getIn.lines, selectedHoles = _layer$getIn.holes, selectedItems = _layer$getIn.items;
+          for (_i4 = 0; _i4 < selectedLines.size; _i4++) (evt === null || evt === void 0 ? void 0 : evt.type) === EXTERNAL_EVENT_UPDATE_ATTRIBUTE ? updateAttributeOfSelectedElement(_layer.getIn(['lines', selectedLines.get(_i4)]), evt.payload, state, _layer, props.catalog, props.projectActions, evt.callback) : updatePropertyOfSelectedElement(_layer.getIn(['lines', selectedLines.get(_i4)]), evt.payload, props.catalog, props.projectActions, evt.callback);
+          for (_i5 = 0; _i5 < selectedHoles.size; _i5++) (evt === null || evt === void 0 ? void 0 : evt.type) === EXTERNAL_EVENT_UPDATE_ATTRIBUTE ? updateAttributeOfSelectedElement(_layer.getIn(['holes', selectedHoles.get(_i5)]), evt.payload, state, _layer, props.catalog, props.projectActions, evt.callback) : updatePropertyOfSelectedElement(_layer.getIn(['holes', selectedHoles.get(_i5)]), evt.payload, props.catalog, props.projectActions, evt.callback);
+          for (_i6 = 0; _i6 < selectedItems.size; _i6++) (evt === null || evt === void 0 ? void 0 : evt.type) === EXTERNAL_EVENT_UPDATE_ATTRIBUTE ? updateAttributeOfSelectedElement(_layer.getIn(['items', selectedItems.get(_i6)]), evt.payload, state, _layer, props.catalog, props.projectActions, evt.callback) : updatePropertyOfSelectedElement(_layer.getIn(['items', selectedItems.get(_i6)]), evt.payload, props.catalog, props.projectActions, evt.callback);
           return _context1.abrupt("continue", 35);
         case 31:
           _layerID = state.scene.selectedLayer;
-          _layer = state.scene.getIn(['layers', _layerID]).toJS();
+          _layer2 = state.scene.getIn(['layers', _layerID]).toJS();
           orginalItemInfo = evt === null || evt === void 0 || (_evt$payload9 = evt.payload) === null || _evt$payload9 === void 0 ? void 0 : _evt$payload9.orginalItemInfo;
-          originalItem = _layer === null || _layer === void 0 ? void 0 : _layer.items[orginalItemInfo.id];
+          originalItem = _layer2 === null || _layer2 === void 0 ? void 0 : _layer2.items[orginalItemInfo.id];
           _context1.next = 32;
           return addItemToCatalog(evt.payload.replaceItemInfo, state, props.catalog, props.projectActions);
         case 32:
@@ -1384,11 +1387,14 @@ function _handleExternalEvent() {
         case 33:
           setFinishing(props, state, evt.payload);
         case 34:
+          sceneData = state.scene.toJS(); // get molding data for "ReviewForQuote"
+          currentTexture = layer.doorStyle !== null || layer.doorStyle !== undefined ? layer.doorStyle : props.state.doorStyle.toJS();
+          sceneData.layers[layerId].moldingData = getMoldingDataOfScene(layer, props.catalog, currentTexture);
           // send scene object from 3DTool to HostApp using internalEvent
           (_props$onInternalEven3 = props.onInternalEvent) === null || _props$onInternalEven3 === void 0 || _props$onInternalEven3.call(props, {
             type: INTERNAL_EVENT_SYNC_SCENE,
             value: {
-              scene: state.scene.toJS()
+              scene: sceneData
             }
           });
           return _context1.abrupt("continue", 35);

package/es/utils/molding.js

@@ -5,11 +5,11 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var 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; }
-import { BASE_CABINET_LAYOUTPOS, BOTTOM_MOLDING_LOCATION, EPSILON, MIDDLE_MOLDING_LOCATION, MOLDING_LOCATIONS, OVERLAP_INCLUDED, OVERLAP_LINK, OVERLAP_SAME, OVERLAP_SOME, TALL_CABINET_LAYOUTPOS, TOP_MOLDING_LOCATION, WALL_CABINET_LAYOUTPOS } from "../constants";
+import { BASE_CABINET_LAYOUTPOS, BOTTOM_MOLDING_LOCATION, EPSILON, MIDDLE_MOLDING_LOCATION, MOLDING_LOCATIONS, OVERLAP_INCLUDED, OVERLAP_LINK, OVERLAP_SAME, OVERLAP_SOME, TALL_CABINET_LAYOUTPOS, TOE_KICK_MOLDING, TOP_MOLDING_LOCATION, WALL_CABINET_LAYOUTPOS } from "../constants";
 import * as Three from 'three';
 import { convert } from "./convert-units-lite";
 import IDBroker from "./id-broker";
-import { returnReplaceableDeepSearchType } from "../components/viewer2d/utils";
+import { getToeKickSKU, isEqualInstallationType, returnReplaceableDeepSearchType } from "../components/viewer2d/utils";
 import { GeometryUtils } from "./export";
 import { isEmpty } from "./helper";
 export function getItemRect(item) {
@@ -866,4 +866,236 @@ export function createMonldingGroup(oldMG, layer, molding, catalog) {
   newMG.lines.reverse();
   newMG = getMDPoints(newMG);
   return newMG;
+}
+export function getMoldingDataOfScene(layer, catalog, doorStyle) {
+  var moldingData = [];
+  var items = layer.items.toArray();
+  var moldings = [];
+  // get all moldings info
+  items.forEach(function (itemCat) {
+    var _itemCat$molding;
+    itemCat === null || itemCat === void 0 || (_itemCat$molding = itemCat.molding) === null || _itemCat$molding === void 0 || _itemCat$molding.forEach(function (molding) {
+      if (!moldings.some(function (m) {
+        return m.name === molding.name;
+      })) moldings.push(molding);
+    });
+  });
+
+  // calc normal molding
+  moldings.forEach(function (molding) {
+    var itemGroups = [];
+    var temp_items = [];
+    items.forEach(function (item) {
+      if (item.molding.some(function (mol) {
+        return mol.itemID === molding.itemID;
+      }) && isEnableItemForMolding(layer, item)) {
+        temp_items.push(item);
+      }
+    });
+    if (temp_items.length) {
+      while (temp_items.length > 0) {
+        var itemGroup = [temp_items[0]];
+        var _loop9 = function _loop9(_idx) {
+          if (!itemGroup.some(function (it) {
+            return it.id === temp_items[_idx].id;
+          }) && isItemSnappedGroup(temp_items[_idx], itemGroup)) {
+            itemGroup.push(temp_items[_idx]);
+            _idx = 0;
+          }
+          idx = _idx;
+        };
+        for (var idx = 0; idx < temp_items.length; idx++) {
+          _loop9(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 = GeometryUtils.buildRectFromLines(layer, GeometryUtils.getAllLines(layer));
+        var items = _toConsumableArray(itemgroup);
+        var MGlines = getLinesOfItem(items[0], allLineRects, catalog);
+        items = sortItemsByDistance(items, items[0]);
+        var _loop0 = function _loop0() {
+          var itemLines = getLinesOfItem(items[i], allLineRects, catalog);
+          var temp_MGLines = [];
+          MGlines.forEach(function (line) {
+            var idx = itemLines.findIndex(function (itemLine) {
+              return isLinesOverlapped(line, itemLine);
+            });
+            var curItemLine = itemLines[idx];
+            if (idx > -1) {
+              if (!(GeometryUtils.samePoints(line[0], curItemLine[0]) && GeometryUtils.samePoints(line[1], curItemLine[1]) || GeometryUtils.samePoints(line[0], curItemLine[1]) && GeometryUtils.samePoints(line[1], curItemLine[0]))) {
+                var MGLine = 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 i = 1; i < items.length; i++) {
+          _loop0();
+        }
+        MGlines.forEach(function (line) {
+          molding_totalLength += GeometryUtils.verticesDistance(line[0], line[1]);
+        });
+      });
+      molding_totalLength = convert(molding_totalLength).from('cm').to('in');
+      moldingData.push(_objectSpread(_objectSpread({}, molding), {}, {
+        doorStyle: doorStyle,
+        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 === BASE_CABINET_LAYOUTPOS && (isEmpty(item.molding) || ((_item$molding = item.molding) === null || _item$molding === void 0 ? void 0 : _item$molding.length) < 1 || !isEnableItemForMolding(layer, item))) {
+      var w = item.properties.get('width').get('_length');
+      var wUnit = item.properties.get('width').get('_unit') || 'cm';
+      w = convert(w / 2).from(wUnit).to('cm');
+      var h = item.properties.get('depth').get('_length');
+      var hUnit = item.properties.get('depth').get('_unit') || 'cm';
+      h = convert(h / 2).from(hUnit).to('cm');
+      var outline = null;
+      var element = catalog.elements[item.get('type')];
+      if (!element) element = catalog.elements[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 _iterator3 = _createForOfIteratorHelper(outlinePaths),
+          _step3;
+        try {
+          for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+            var path = _step3.value;
+            var _iterator4 = _createForOfIteratorHelper(path.subPaths),
+              _step4;
+            try {
+              for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+                var subPath = _step4.value;
+                outlinePoints = outlinePoints.concat(subPath.getPoints());
+              }
+            } catch (err) {
+              _iterator4.e(err);
+            } finally {
+              _iterator4.f();
+            }
+          }
+        } catch (err) {
+          _iterator3.e(err);
+        } finally {
+          _iterator3.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 (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 = convert(len).from('cm').to('in');
+      } else {
+        w = convert(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 && 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 skuName = getToeKickSKU(doorStyle.doorStyle, catalog);
+    var thumbnail = skuName ? skuName : '';
+    // moldings.forEach(molding => {
+    //   if (
+    //     molding.name ===
+    //     getToeKickSKU(
+    //       doorStyle.doorStyle,
+    //       catalog,
+    //       true
+    //     )
+    //   )
+    //     thumbnail = molding.thumbnail;
+    // });
+
+    doorStyle.totalLength && tmpMoldingData.push({
+      name: TOE_KICK_MOLDING,
+      sku: getToeKickSKU(doorStyle.doorStyle, catalog),
+      thumbnail: thumbnail,
+      category: 'molding',
+      type: 'cabinet',
+      doorStyle: doorStyle.doorStyle,
+      count: Math.ceil(doorStyle.totalLength * 1.1 / 96)
+    });
+  });
+  if (tmpMoldingData.length > 0) moldingData = [].concat(_toConsumableArray(moldingData), tmpMoldingData);
+  return moldingData;
 }

package/lib/LiteKitchenConfigurator.js

@@ -417,7 +417,8 @@ var LiteKitchenConfigurator = /*#__PURE__*/function (_Component) {
         style: _objectSpread(_objectSpread({}, wrapperStyle), {}, {
           height: height,
           display: 'flex',
-          justifyContent: 'center'
+          justifyContent: 'center',
+          position: 'relative'
         })
       }, /*#__PURE__*/_react["default"].createElement(_export2.Content, (0, _extends2["default"])({
         width: contentW,

package/lib/catalog/factories/area-factory-3d.js

@@ -12,7 +12,7 @@ var SharedStyle = _interopRequireWildcard(require("../../shared-style"));
 var _RGBELoader = require("three/examples/jsm/loaders/RGBELoader");
 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 _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var params = {
-  envMap: 'HDR',
+  envMap: "HDR",
   roughness: 0.9,
   metalness: 0.8,
   exposure: 1.0
@@ -67,7 +67,7 @@ var assignUVs = function assignUVs(geometry) {
     var y3 = position.getY(i + 2);
     uvArray.push((x1 + offset.x) / range.x, (y1 + offset.y) / range.y, (x2 + offset.x) / range.x, (y2 + offset.y) / range.y, (x3 + offset.x) / range.x, (y3 + offset.y) / range.y);
   }
-  geometry.setAttribute('uv', new Three.BufferAttribute(new Float32Array(uvArray), 2));
+  geometry.setAttribute("uv", new Three.BufferAttribute(new Float32Array(uvArray), 2));
   geometry.needsUpdate = true;
 };
 function createArea(element, layer, scene, textures) {
@@ -78,15 +78,15 @@ function createArea(element, layer, scene, textures) {
   var texture = element.texture;
   texture.lengthRepeatScale = 0.01;
   texture.heightRepeatScale = 0.01;
-  var color = element.properties.get('patternColor');
+  var color = element.properties.get("patternColor");
   if (element.selected) {
     color = SharedStyle.AREA_MESH_COLOR.selected;
   } else {
     color = SharedStyle.AREA_MESH_COLOR.unselected;
   }
-  if (texture.uri === undefined || texture.uri == '') {
+  if (texture.uri === undefined || texture.uri == "") {
     // @todo THIS IS A TEMPORARY FIX TO HAVE A DEFAULT FLOOR TEXTURE
-    texture.uri = layer.floorStyle.uri || 'https://media.test.diydesignspace.com/uploads/CountTop/202203162950_2/texture/oak-barcelona-s.jpg';
+    texture.uri = layer.floorStyle.uri || "https://media.test.diydesignspace.com/uploads/CountTop/202203162950_2/texture/oak-barcelona-s.jpg";
   }
   var shape = new _three.Shape();
   shape.moveTo(vertices[0].x, vertices[0].y);
@@ -94,7 +94,7 @@ function createArea(element, layer, scene, textures) {
     shape.lineTo(vertices[i].x, vertices[i].y);
   }
   function loadFloorENV() {
-    return new _RGBELoader.RGBELoader().load('/assets/Window.hdr', function (texture) {
+    return new _RGBELoader.RGBELoader().load("/assets/Window.hdr", function (texture) {
       texture.mapping = Three.EquirectangularReflectionMapping;
       return texture;
     });
@@ -114,8 +114,8 @@ function createArea(element, layer, scene, textures) {
   /* Create holes for the area */
   element.holes.forEach(function (holeID) {
     var holeCoords = [];
-    layer.getIn(['areas', holeID, 'vertices']).forEach(function (vertexID) {
-      var _layer$getIn = layer.getIn(['vertices', vertexID]),
+    layer.getIn(["areas", holeID, "vertices"]).forEach(function (vertexID) {
+      var _layer$getIn = layer.getIn(["vertices", vertexID]),
         x = _layer$getIn.x,
         y = _layer$getIn.y;
       holeCoords.push([x, y]);
@@ -142,7 +142,7 @@ function createArea(element, layer, scene, textures) {
   var area = new _three.Mesh(shapeGeometry, areaMaterial);
   area.rotation.x -= Math.PI / 2;
   area.receiveShadow = true;
-  area.name = 'floor';
+  area.name = "floor";
   // This mesh is use for creating ceiling mesh
 
   var shapeGeometry2 = new Three.ShapeGeometry(shape);
@@ -153,7 +153,7 @@ function createArea(element, layer, scene, textures) {
   area2.castShadow = true;
   area2.rotation.x -= Math.PI / 2;
   area2.receiveShadow = true;
-  area2.name = 'floorSupport';
+  area2.name = "floorSupport";
   var floorSupport = area2.clone();
   area.userData.floorSupport = floorSupport;
   return Promise.resolve(area);
@@ -163,13 +163,13 @@ function updatedArea(element, layer, scene, textures, mesh, oldElement, differen
     selfDestroy();
     return selfBuild();
   };
-  var floor = mesh.getObjectByName('floor');
+  var floor = mesh.getObjectByName("floor");
   floor.receiveShadow = true;
-  if (differences[0] == 'selected') {
+  if (differences[0] == "selected") {
     var color = element.selected ? SharedStyle.AREA_MESH_COLOR.selected : SharedStyle.AREA_MESH_COLOR.unselected;
     floor.material.color.set(color);
-  } else if (differences[0] == 'properties') {
-    if (differences[1] === 'texture') {
+  } else if (differences[0] == "properties") {
+    if (differences[1] === "texture") {
       return noPerf();
     }
   } else return noPerf();