kitchen-simulator 3.12.0 → 3.14.0

package/es/utils/molding.js

@@ -5,7 +5,7 @@ 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, TOE_KICK_MOLDING, TOP_MOLDING_LOCATION, WALL_CABINET_LAYOUTPOS } from "../constants";
+import { BASE_CABINET_LAYOUTPOS, BOTTOM_MOLDING_LOCATION, EPSILON, ITEM_TYPE, 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";
@@ -304,6 +304,74 @@ export function getLinesOfItem(item, allLineRects, catalog) {
   }
   return lines;
 }
+export function getLinesOfItem2(item, allLineRects, catalog) {
+  var lines = [];
+  var outline = null;
+  var element = catalog.elements[item.get('type')];
+  if (!element) element = catalog.elements[returnReplaceableDeepSearchType(item.get('type'))];
+  // get edge lines
+  var newWidth = item.properties.get('width').get('_length');
+  var wUnit = item.properties.get('width').get('_unit') || 'cm';
+  newWidth = convert(newWidth).from(wUnit).to('cm');
+  var newDepth = item.properties.get('depth').get('_length');
+  var hUnit = item.properties.get('depth').get('_unit') || 'cm';
+  newDepth = convert(newDepth).from(hUnit).to('cm');
+  if (item) {
+    // Get Outline Data of Selected Item
+    outline = element.info.outline;
+    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();
+      }
+      outline.reverse && outlinePoints.reverse();
+      for (var i = 0; i < outlinePoints.length - 1; i++) {
+        lines.push([GeometryUtils.rotatePointAroundPoint((outlinePoints[i].x / outlineWidth - 0.5) * newWidth + item.x, (outlinePoints[i].y / outlineHeight - 0.5) * newDepth + item.y, item.x, item.y, item.rotation + 90), GeometryUtils.rotatePointAroundPoint((outlinePoints[i + 1].x / outlineWidth - 0.5) * newWidth + item.x, (outlinePoints[i + 1].y / outlineHeight - 0.5) * newDepth + item.y, item.x, item.y, item.rotation + 90), IDBroker.acquireID()]);
+      }
+    } else {
+      var pos = [[-1, -1], [1, -1], [1, 1], [-1, 1]];
+      for (var _i2 = 0; _i2 < 4; _i2++) {
+        lines.push([GeometryUtils.rotatePointAroundPoint(pos[_i2][0] * newWidth / 2 + item.x, pos[_i2][1] * newDepth / 2 + item.y, item.x, item.y, item.rotation), GeometryUtils.rotatePointAroundPoint(pos[(_i2 + 1) % 4][0] * newWidth / 2 + item.x, pos[(_i2 + 1) % 4][1] * newDepth / 2 + item.y, item.x, item.y, item.rotation), IDBroker.acquireID()]);
+      }
+    }
+  }
+  lines = lines.filter(function (line) {
+    return !GeometryUtils.isSnappedLine({
+      rect: [{
+        x: 0,
+        y: 0
+      }, {
+        x: 0,
+        y: 0
+      }, line[0], line[1]]
+    }, allLineRects);
+  });
+  return lines;
+}
 function isParallelLines(line1, line2) {
   var isParallel = false;
   if (Math.abs(line1[0].y - line1[1].y) <= EPSILON && Math.abs(line2[0].y - line2[1].y) <= EPSILON) isParallel = true;
@@ -485,20 +553,20 @@ export function getLinesFromItems2(moldingGroup, layer, catalog) {
   // merge the collinear linked lines to one line
   var newMGlines = [];
   var filteredMGlines = MGlines;
-  var _loop3 = function _loop3(_i2) {
+  var _loop3 = function _loop3(_i3) {
       if (filteredMGlines.length < 1) return 0; // break
       if (!filteredMGlines.some(function (v) {
-        return v[2] === MGlines[_i2][2];
+        return v[2] === MGlines[_i3][2];
       })) return 1; // continue
-      var mergedResult = getMergedLine(MGlines[_i2], filteredMGlines, 0);
+      var mergedResult = getMergedLine(MGlines[_i3], filteredMGlines, 0);
       if (mergedResult) {
         newMGlines.push(mergedResult.mergedLine);
         filteredMGlines = mergedResult.filteredMGlines;
       }
     },
     _ret;
-  for (var _i2 = 0; _i2 < MGlines.length; _i2++) {
-    _ret = _loop3(_i2);
+  for (var _i3 = 0; _i3 < MGlines.length; _i3++) {
+    _ret = _loop3(_i3);
     if (_ret === 0) break;
     if (_ret === 1) continue;
   }
@@ -587,11 +655,12 @@ function getTrimmedContourLineSegs(lineSegs, otherLines, cnt) {
       };
       var bContourSeg = true;
       var _loop6 = function _loop6(j) {
+          var _otherLines$j$0$x, _otherLines$j$, _otherLines$j$line$, _otherLines$j$0$y, _otherLines$j$2, _otherLines$j$line$2, _otherLines$j$1$x, _otherLines$j$3, _otherLines$j$line$3, _otherLines$j$1$y, _otherLines$j$4, _otherLines$j$line$4;
           var destLine = {
-            x1: otherLines[j][0].x,
-            y1: otherLines[j][0].y,
-            x2: otherLines[j][1].x,
-            y2: otherLines[j][1].y
+            x1: (_otherLines$j$0$x = (_otherLines$j$ = otherLines[j][0]) === null || _otherLines$j$ === void 0 ? void 0 : _otherLines$j$.x) !== null && _otherLines$j$0$x !== void 0 ? _otherLines$j$0$x : (_otherLines$j$line$ = otherLines[j].line[0]) === null || _otherLines$j$line$ === void 0 ? void 0 : _otherLines$j$line$.x,
+            y1: (_otherLines$j$0$y = (_otherLines$j$2 = otherLines[j][0]) === null || _otherLines$j$2 === void 0 ? void 0 : _otherLines$j$2.y) !== null && _otherLines$j$0$y !== void 0 ? _otherLines$j$0$y : (_otherLines$j$line$2 = otherLines[j].line[0]) === null || _otherLines$j$line$2 === void 0 ? void 0 : _otherLines$j$line$2.y,
+            x2: (_otherLines$j$1$x = (_otherLines$j$3 = otherLines[j][1]) === null || _otherLines$j$3 === void 0 ? void 0 : _otherLines$j$3.x) !== null && _otherLines$j$1$x !== void 0 ? _otherLines$j$1$x : (_otherLines$j$line$3 = otherLines[j].line[1]) === null || _otherLines$j$line$3 === void 0 ? void 0 : _otherLines$j$line$3.x,
+            y2: (_otherLines$j$1$y = (_otherLines$j$4 = otherLines[j][1]) === null || _otherLines$j$4 === void 0 ? void 0 : _otherLines$j$4.y) !== null && _otherLines$j$1$y !== void 0 ? _otherLines$j$1$y : (_otherLines$j$line$4 = otherLines[j].line[1]) === null || _otherLines$j$line$4 === void 0 ? void 0 : _otherLines$j$line$4.y
           };
           var rst = GeometryUtils.relationshipOfTwoOverlappedLines(srcLine, destLine);
           if (rst.result == OVERLAP_SAME || rst.result == OVERLAP_INCLUDED) {
@@ -867,6 +936,151 @@ export function createMonldingGroup(oldMG, layer, molding, catalog) {
   newMG = getMDPoints(newMG);
   return newMG;
 }
+export function getMoldingDataOfScene2(layer, catalog, doorStyle) {
+  var moldingData = [];
+  var items = layer.items.toArray();
+  var allLineRects = GeometryUtils.buildRectFromLines(layer, GeometryUtils.getAllLines(layer));
+
+  // get all molding line segments
+  var moldingLines = [];
+  items.forEach(function (item) {
+    if (item.category === ITEM_TYPE.CABINET) {
+      var _item$molding;
+      var MGlines = getLinesOfItem2(item, allLineRects, catalog); // exclude overlayed to wall
+      // z position of molding line
+      var z = item.properties.get('altitude').get('_length');
+      var zUnit = item.properties.get('altitude').get('_unit') || 'cm';
+      z = convert(z).from(zUnit).to('cm');
+      var h = item.properties.get('height').get('_length');
+      var hUnit = item.properties.get('height').get('_unit') || 'cm';
+      h = convert(h).from(hUnit).to('cm');
+      if (!isEmpty(item.molding) && isEnableItemForMolding(layer, item)) {
+        // calc normal molding line
+        item === null || item === void 0 || item.molding.forEach(function (molding) {
+          var lineZ = z;
+          switch (molding.location_type) {
+            case TOP_MOLDING_LOCATION:
+              lineZ = z + h;
+              break;
+            case MIDDLE_MOLDING_LOCATION:
+              lineZ = z + h / 2;
+              break;
+          }
+          MGlines === null || MGlines === void 0 || MGlines.forEach(function (line) {
+            return moldingLines.push({
+              molding: _objectSpread({}, molding),
+              doorStyle: item.doorStyle.hasOwnProperty('id') ? item.doorStyle : !isEmpty(item.doorStyle) && item.doorStyle.toJS(),
+              line: line,
+              z: lineZ
+            });
+          });
+        });
+      } else if (
+      // calc toe kick molding line
+      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 skuName = getToeKickSKU(item.doorStyle, catalog);
+        var thumbnail = skuName ? skuName : '';
+        MGlines === null || MGlines === void 0 || MGlines.forEach(function (line) {
+          return moldingLines.push({
+            molding: {
+              name: TOE_KICK_MOLDING,
+              sku: getToeKickSKU(item.doorStyle, catalog),
+              thumbnail: thumbnail,
+              category: 'molding',
+              type: 'cabinet'
+            },
+            doorStyle: item.doorStyle.hasOwnProperty('id') ? item.doorStyle : !isEmpty(item.doorStyle) && item.doorStyle.toJS(),
+            line: line,
+            z: z
+          });
+        });
+      }
+    }
+  });
+
+  // filter the real molding line segments
+  var removeLineIds = []; // remove the line that fully overlapped to other line
+  var newLines = []; // new countour line segment that except the overlapped part
+  var _loop9 = function _loop9(i) {
+    var srcLine = {
+      x1: moldingLines[i].line[0].x,
+      y1: moldingLines[i].line[0].y,
+      x2: moldingLines[i].line[1].x,
+      y2: moldingLines[i].line[1].y
+    };
+    var _loop1 = function _loop1(j) {
+        if (i === j) return 0; // continue
+        if (Math.abs(moldingLines[i].z - moldingLines[j].z) > EPSILON) return 0; // continue
+        var destLine = {
+          x1: moldingLines[j].line[0].x,
+          y1: moldingLines[j].line[0].y,
+          x2: moldingLines[j].line[1].x,
+          y2: moldingLines[j].line[1].y
+        };
+        var rst = GeometryUtils.relationshipOfTwoOverlappedLines(srcLine, destLine);
+        if (rst.result === OVERLAP_SAME || rst.result === OVERLAP_INCLUDED) {
+          removeLineIds.push(i);
+          return 1; // break
+        } else if (rst.result === OVERLAP_SOME) {
+          removeLineIds.push(i);
+          var lineSegs = getTrimmedContourLineSegs(rst.trimmedSegs, moldingLines.filter(function (v, idx) {
+            return idx !== i && idx !== j && Math.abs(v.z - moldingLines[i].z) < EPSILON;
+          }), 0);
+          if (lineSegs.length > 0) {
+            lineSegs.forEach(function (ls) {
+              return newLines.push({
+                molding: _objectSpread({}, moldingLines[i].molding),
+                doorStyle: moldingLines[i].doorStyle,
+                line: _toConsumableArray(ls),
+                z: moldingLines[i].z
+              });
+            });
+          }
+          return 1; // break
+        }
+      },
+      _ret4;
+    for (var j = 0; j < moldingLines.length; j++) {
+      _ret4 = _loop1(j);
+      if (_ret4 === 0) continue;
+      if (_ret4 === 1) break;
+    }
+  };
+  for (var i = 0; i < moldingLines.length; i++) {
+    _loop9(i);
+  }
+  moldingLines = moldingLines.filter(function (line, idx) {
+    return !removeLineIds.some(function (id) {
+      return idx === id;
+    });
+  });
+  if (newLines.length > 0) moldingLines = [].concat(_toConsumableArray(moldingLines), newLines);
+  // console.log('moldingLines: ', moldingLines);
+
+  // make molding data with sorting molding & doorStyle
+  var _loop0 = function _loop0() {
+    var ml = moldingLines[k];
+    var mlLength = convert(GeometryUtils.verticesDistance(ml.line[0], ml.line[1])).from('cm').to('in');
+    var idx = moldingData.findIndex(function (v) {
+      var _ml$molding, _v$doorStyle, _ml$doorStyle;
+      return (v === null || v === void 0 ? void 0 : v.name) === ((_ml$molding = ml.molding) === null || _ml$molding === void 0 ? void 0 : _ml$molding.name) && ((_v$doorStyle = v.doorStyle) === null || _v$doorStyle === void 0 ? void 0 : _v$doorStyle.id) === ((_ml$doorStyle = ml.doorStyle) === null || _ml$doorStyle === void 0 ? void 0 : _ml$doorStyle.id);
+    });
+    if (idx < 0) moldingData.push(_objectSpread(_objectSpread({}, ml.molding), {}, {
+      doorStyle: ml.doorStyle,
+      totalLength: mlLength,
+      count: Math.ceil(mlLength * 1.1 / 96)
+    }));else {
+      moldingData[idx].totalLength += mlLength;
+      moldingData[idx].count = Math.ceil(moldingData[idx].totalLength * 1.1 / 96);
+    }
+  };
+  for (var k = 0; k < moldingLines.length; k++) {
+    _loop0();
+  }
+  // console.log('moldingData: ', moldingData);
+
+  return moldingData;
+}
 export function getMoldingDataOfScene(layer, catalog, doorStyle) {
   var moldingData = [];
   var items = layer.items.toArray();
@@ -895,7 +1109,7 @@ export function getMoldingDataOfScene(layer, catalog, doorStyle) {
     if (temp_items.length) {
       while (temp_items.length > 0) {
         var itemGroup = [temp_items[0]];
-        var _loop9 = function _loop9(_idx) {
+        var _loop10 = function _loop10(_idx) {
           if (!itemGroup.some(function (it) {
             return it.id === temp_items[_idx].id;
           }) && isItemSnappedGroup(temp_items[_idx], itemGroup)) {
@@ -905,7 +1119,7 @@ export function getMoldingDataOfScene(layer, catalog, doorStyle) {
           idx = _idx;
         };
         for (var idx = 0; idx < temp_items.length; idx++) {
-          _loop9(idx);
+          _loop10(idx);
         }
         itemGroup.forEach(function (item) {
           var index = temp_items.findIndex(function (it) {
@@ -923,7 +1137,7 @@ export function getMoldingDataOfScene(layer, catalog, doorStyle) {
         var items = _toConsumableArray(itemgroup);
         var MGlines = getLinesOfItem(items[0], allLineRects, catalog);
         items = sortItemsByDistance(items, items[0]);
-        var _loop0 = function _loop0() {
+        var _loop11 = function _loop11() {
           var itemLines = getLinesOfItem(items[i], allLineRects, catalog);
           var temp_MGLines = [];
           MGlines.forEach(function (line) {
@@ -947,7 +1161,7 @@ export function getMoldingDataOfScene(layer, catalog, doorStyle) {
           MGlines = [].concat(temp_MGLines);
         };
         for (var i = 1; i < items.length; i++) {
-          _loop0();
+          _loop11();
         }
         MGlines.forEach(function (line) {
           molding_totalLength += GeometryUtils.verticesDistance(line[0], line[1]);
@@ -971,8 +1185,8 @@ export function getMoldingDataOfScene(layer, catalog, doorStyle) {
   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 _item$molding2;
+    if (item.layoutpos === BASE_CABINET_LAYOUTPOS && (isEmpty(item.molding) || ((_item$molding2 = item.molding) === null || _item$molding2 === void 0 ? void 0 : _item$molding2.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');
@@ -990,28 +1204,28 @@ export function getMoldingDataOfScene(layer, catalog, doorStyle) {
         var outlineWidth = outline.svgWidth;
         var outlineHeight = outline.svgHeight;
         var outlinePoints = []; // Hold Points Of SVG
-        var _iterator3 = _createForOfIteratorHelper(outlinePaths),
-          _step3;
+        var _iterator5 = _createForOfIteratorHelper(outlinePaths),
+          _step5;
         try {
-          for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
-            var path = _step3.value;
-            var _iterator4 = _createForOfIteratorHelper(path.subPaths),
-              _step4;
+          for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
+            var path = _step5.value;
+            var _iterator6 = _createForOfIteratorHelper(path.subPaths),
+              _step6;
             try {
-              for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
-                var subPath = _step4.value;
+              for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
+                var subPath = _step6.value;
                 outlinePoints = outlinePoints.concat(subPath.getPoints());
               }
             } catch (err) {
-              _iterator4.e(err);
+              _iterator6.e(err);
             } finally {
-              _iterator4.f();
+              _iterator6.f();
             }
           }
         } catch (err) {
-          _iterator3.e(err);
+          _iterator5.e(err);
         } finally {
-          _iterator3.f();
+          _iterator5.f();
         }
         var maxX = outlinePoints[0].x,
           minX = outlinePoints[0].x;

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();

package/lib/catalog/utils/item-loader.js

@@ -1011,7 +1011,7 @@ function render3DItem(element, layer, scene, sizeinfo, structure_json, is_corner
           counterTop = counterTop.toJS();
         } catch (error) {
           //@todo THIS IS A TEMPORARY FIX FOR COUNTERTOP TEXTURE UNDEFINED ISSUE
-          counterTop.uri = 'http://kc.server.com:4002/uploads/CountTop/202105074107_5/texture/Unique_Calcatta_texture.jpg';
+          counterTop.uri = 'https://media.test.diydesignspace.com/uploads/CountTop/202105074107_5/texture/Unique_Calcatta_texture.jpg';
           console.log(error);
         }
       }

package/lib/class/hole.js

@@ -783,11 +783,9 @@ var Hole = exports["default"] = /*#__PURE__*/function () {
         scene: scene.mergeIn(['layers', layerID, 'holes', holeID], hole)
       });
       state = state.updateIn(['scene', 'layers', layerID, 'lines', hole.line, 'holes'], function (holes) {
-        console.log(holes, 'holes');
         var index = holes.findIndex(function (ID) {
           return holeID === ID;
         });
-        console.log(index, 'index');
         return index === -1 ? holes.push(holeID) : holes;
       });
       return {

package/lib/class/item.js

@@ -36,9 +36,11 @@ var Item = exports["default"] = /*#__PURE__*/function () {
   return (0, _createClass2["default"])(Item, null, [{
     key: "create",
     value: function create(state, layerID, type, x, y, width, height, rotation, isDuplication) {
+      var _item;
       var molding = arguments.length > 9 && arguments[9] !== undefined ? arguments[9] : [];
       var isInitialPos = arguments.length > 10 && arguments[10] !== undefined ? arguments[10] : false;
       var refItem = arguments.length > 11 && arguments[11] !== undefined ? arguments[11] : null;
+      var counterTopURI = arguments.length > 12 && arguments[12] !== undefined ? arguments[12] : null;
       var itemID = _export2.IDBroker.acquireID();
       var item = state.catalog.factoryElement(type, {
         id: itemID,
@@ -167,6 +169,9 @@ var Item = exports["default"] = /*#__PURE__*/function () {
         }
       };
       item.category === 'cabinet' && setSizeOfItemByDoorStyle();
+      if (counterTopURI || (_item = item) !== null && _item !== void 0 && _item.counterTop) {
+        item.counterTop.uri = counterTopURI;
+      }
       item = this.updateDoorHandle(item, state.getIn(['scene', 'layers', layerID]));
       state = state.setIn(['scene', 'layers', layerID, 'items', itemID], item);
       if (item.type.includes('Light')) {
@@ -338,17 +343,17 @@ var Item = exports["default"] = /*#__PURE__*/function () {
             if (isRect) {
               var _this$create2 = this.create(state, layerID, sceneComponentType, x - width * Math.cos(rotRad), y - width * Math.sin(rotRad), 200, 100, rotRad * 180 / Math.PI, true, myObject.molding, false, myObject),
                 _stateI = _this$create2.updatedState,
-                _item = _this$create2.item;
-              duplicatedElement = _item;
-              if (_item === null) {
+                _item2 = _this$create2.item;
+              duplicatedElement = _item2;
+              if (_item2 === null) {
                 alert('There are no Door Colors in this cabinet.');
                 state = state.merge({
                   mode: _constants.MODE_IDLE,
                   drawingSupport: new _immutable.Map()
                 });
               } else {
-                state = Item.select(_stateI, layerID, _item.id).updatedState;
-                state = state.setIn(['drawingSupport', 'currentID'], _item.id);
+                state = Item.select(_stateI, layerID, _item2.id).updatedState;
+                state = state.setIn(['drawingSupport', 'currentID'], _item2.id);
               }
             } else {
               var _val2 = {
@@ -365,17 +370,17 @@ var Item = exports["default"] = /*#__PURE__*/function () {
               if (isRectDown) {
                 var _this$create3 = this.create(state, layerID, sceneComponentType, x - depth * Math.sin(rotRad), y - depth * Math.cos(rotRad), 200, 100, rotRad * 180 / Math.PI, true, myObject.molding, false, myObject),
                   _stateI2 = _this$create3.updatedState,
-                  _item2 = _this$create3.item;
-                duplicatedElement = _item2;
-                if (_item2 === null) {
+                  _item3 = _this$create3.item;
+                duplicatedElement = _item3;
+                if (_item3 === null) {
                   alert('There are no Door Colors in this cabinet.');
                   state = state.merge({
                     mode: _constants.MODE_IDLE,
                     drawingSupport: new _immutable.Map()
                   });
                 } else {
-                  state = Item.select(_stateI2, layerID, _item2.id).updatedState;
-                  state = state.setIn(['drawingSupport', 'currentID'], _item2.id);
+                  state = Item.select(_stateI2, layerID, _item3.id).updatedState;
+                  state = state.setIn(['drawingSupport', 'currentID'], _item3.id);
                 }
               } else {
                 var _val3 = {
@@ -392,17 +397,17 @@ var Item = exports["default"] = /*#__PURE__*/function () {
                 if (isRectUp) {
                   var _this$create4 = this.create(state, layerID, sceneComponentType, x + depth * Math.sin(rotRad), y + depth * Math.cos(rotRad), 200, 100, rotRad * 180 / Math.PI, true, myObject.molding, false, myObject),
                     _stateI3 = _this$create4.updatedState,
-                    _item3 = _this$create4.item;
-                  duplicatedElement = _item3;
-                  if (_item3 === null) {
+                    _item4 = _this$create4.item;
+                  duplicatedElement = _item4;
+                  if (_item4 === null) {
                     alert('There are no Door Colors in this cabinet.');
                     state = state.merge({
                       mode: _constants.MODE_IDLE,
                       drawingSupport: new _immutable.Map()
                     });
                   } else {
-                    state = Item.select(_stateI3, layerID, _item3.id).updatedState;
-                    state = state.setIn(['drawingSupport', 'currentID'], _item3.id);
+                    state = Item.select(_stateI3, layerID, _item4.id).updatedState;
+                    state = state.setIn(['drawingSupport', 'currentID'], _item4.id);
                   }
                 } else {
                   console.log('there is no space');
@@ -539,8 +544,14 @@ var Item = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "replaceItem",
     value: function replaceItem(state, selectedPos, currentObject, selectedObject) {
+      var _currentObject$counte;
+      var counterTopURI = '';
+      if (!(0, _utils.isEmpty)(currentObject === null || currentObject === void 0 || (_currentObject$counte = currentObject.counterTop) === null || _currentObject$counte === void 0 ? void 0 : _currentObject$counte.uri)) {
+        var _currentObject$counte2;
+        counterTopURI = currentObject === null || currentObject === void 0 || (_currentObject$counte2 = currentObject.counterTop) === null || _currentObject$counte2 === void 0 ? void 0 : _currentObject$counte2.uri;
+      } else if (!(0, _utils.isEmpty)(state.getIn(['scene', 'layers', 'layer-1', 'counterTop']))) counterTopURI = state.getIn(['scene', 'layers', 'layer-1', 'counterTop']).uri;else counterTopURI = 'https://media.test.diydesignspace.com/uploads/CountTop/202105074107_5/texture/Unique_Calcatta_texture.jpg';
       state = this.remove(state, state.scene.selectedLayer, selectedPos.selectedItemId).updatedState;
-      state = this.create(state, state.scene.selectedLayer, selectedObject.name, selectedPos.x, selectedPos.y, selectedObject.info.width, selectedObject.info.height, selectedPos.rotation, false).updatedState;
+      state = this.create(state, state.scene.selectedLayer, selectedObject.name, selectedPos.x, selectedPos.y, selectedObject.info.width, selectedObject.info.height, selectedPos.rotation, false, [], false, null, counterTopURI).updatedState;
       // state = this.select(state, state.scene.selectedLayer, selectedPos.selectedItemId).updatedState;
       return {
         updatedState: state

package/lib/class/project.js

@@ -43,7 +43,8 @@ var Project = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "newProject",
     value: function newProject(state) {
-      var doorStyle = state.toJS().doorStyle === null ? null : state.toJS().doorStyle;
+      var _state$toJS$doorStyle, _state;
+      var doorStyle = (_state$toJS$doorStyle = (_state = state) === null || _state === void 0 || (_state = _state.toJS()) === null || _state === void 0 ? void 0 : _state.doorStyle) !== null && _state$toJS$doorStyle !== void 0 ? _state$toJS$doorStyle : null;
       // let counterTop = state.getIn(['scene', 'layers', layerID, 'counterTop']);
       // let floorStyle = state.getIn(['scene', 'layers', layerID, 'floorStyle']);
       var _viewer2D = state.viewer2D;
@@ -83,9 +84,9 @@ var Project = exports["default"] = /*#__PURE__*/function () {
         a: 0.99,
         d: 0.99
       });
-      var _state = state,
-        oldScene = _state.scene,
-        oldSceneHistory = _state.sceneHistory;
+      var _state2 = state,
+        oldScene = _state2.scene,
+        oldSceneHistory = _state2.sceneHistory;
       var json_items = sceneJSON.layers[sceneJSON.selectedLayer].items;
       var elements = state.catalog.get('elements').toArray();
       var _loop = function _loop(x) {
@@ -838,14 +839,18 @@ var Project = exports["default"] = /*#__PURE__*/function () {
     key: "createRoomWithShape",
     value: function createRoomWithShape(state, roomShapeType, width, height, doorStyle) {
       var catalog = state.catalog;
+      // keep measurement unit
+      var curLayerID = state.scene.selectedLayer;
+      var layerUnit = state.getIn(['scene', 'layers', curLayerID, 'unit']);
+      var ceilHeight = state.getIn(['scene', 'layers', curLayerID, 'ceilHeight']);
       state = this.newProject(state).updatedState;
       state = state.merge({
         catalog: catalog
       });
       var _viewer2D = state.viewer2D;
       var viewer = _viewer2D.toJS();
-      width = (0, _convertUnitsLite.convert)(width).from('in').to('cm');
-      height = (0, _convertUnitsLite.convert)(height).from('in').to('cm');
+      width = (0, _convertUnitsLite.convert)(width).from(state.getIn(['scene', 'layers', 'layer-1', 'unit'])).to('cm');
+      height = (0, _convertUnitsLite.convert)(height).from(state.getIn(['scene', 'layers', 'layer-1', 'unit'])).to('cm');
       var layerID = state.scene.selectedLayer;
       state = _export2.Item.setInitialDoorStyle(state, doorStyle).updatedState;
       if ((0, _helper.isEmpty)(viewer)) return {
@@ -921,6 +926,9 @@ var Project = exports["default"] = /*#__PURE__*/function () {
         }
         state = _export2.Layer.detectAndUpdateAreas(state, layerID, drawingInfo).updatedState;
       }
+      // copy keeped measurement unit
+      state = state.setIn(['scene', 'layers', layerID, 'unit'], layerUnit);
+      state = state.setIn(['scene', 'layers', layerID, 'ceilHeight'], ceilHeight);
       state = (0, _helper.centering2D)(state);
       return {
         updatedState: state