kitchen-simulator 4.1.7-react-18 → 4.2.2

package/lib/utils/molding.js

@@ -12,6 +12,9 @@ exports.getItemRect = getItemRect;
 exports.getLinesFromItems = getLinesFromItems;
 exports.getLinesFromItems2 = getLinesFromItems2;
 exports.getLinesOfItem = getLinesOfItem;
+exports.getLinesOfItem2 = getLinesOfItem2;
+exports.getMoldingDataOfScene = getMoldingDataOfScene;
+exports.getMoldingDataOfScene2 = getMoldingDataOfScene2;
 exports.hasMoldingLayout = hasMoldingLayout;
 exports.isAttachedWall = isAttachedWall;
 exports.isEnableItemForMolding = isEnableItemForMolding;
@@ -330,6 +333,76 @@ function getLinesOfItem(item, allLineRects, catalog) {
   }
   return lines;
 }
+function getLinesOfItem2(item, allLineRects, catalog) {
+  var _lines;
+  var lines = [];
+  var outline = null;
+  var element = catalog.elements[item.get('type')];
+  if (!element) element = catalog.elements[(0, _utils.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 = (0, _convertUnitsLite.convert)(newWidth).from(wUnit).to('cm');
+  var newDepth = item.properties.get('depth').get('_length');
+  var hUnit = item.properties.get('depth').get('_unit') || 'cm';
+  newDepth = (0, _convertUnitsLite.convert)(newDepth).from(hUnit).to('cm');
+  if (item) {
+    var _element;
+    // Get Outline Data of Selected Item
+    outline = (_element = element) === null || _element === void 0 ? void 0 : _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([_export.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), _export.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["default"].acquireID()]);
+      }
+    } else {
+      var pos = [[-1, -1], [1, -1], [1, 1], [-1, 1]];
+      for (var _i2 = 0; _i2 < 4; _i2++) {
+        lines.push([_export.GeometryUtils.rotatePointAroundPoint(pos[_i2][0] * newWidth / 2 + item.x, pos[_i2][1] * newDepth / 2 + item.y, item.x, item.y, item.rotation), _export.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["default"].acquireID()]);
+      }
+    }
+  }
+  lines = (_lines = lines) === null || _lines === void 0 ? void 0 : _lines.filter(function (line) {
+    return !_export.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) <= _constants.EPSILON && Math.abs(line2[0].y - line2[1].y) <= _constants.EPSILON) isParallel = true;
@@ -511,20 +584,20 @@ 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;
   }
@@ -613,11 +686,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 = _export.GeometryUtils.relationshipOfTwoOverlappedLines(srcLine, destLine);
           if (rst.result == _constants.OVERLAP_SAME || rst.result == _constants.OVERLAP_INCLUDED) {
@@ -892,4 +966,411 @@ function createMonldingGroup(oldMG, layer, molding, catalog) {
   newMG.lines.reverse();
   newMG = getMDPoints(newMG);
   return newMG;
+}
+function getMoldingDataOfScene2(layer, catalog, doorStyle) {
+  var _layer$items;
+  var moldingData = [];
+  var items = layer === null || layer === void 0 || (_layer$items = layer.items) === null || _layer$items === void 0 ? void 0 : _layer$items.toArray();
+  var allLineRects = _export.GeometryUtils.buildRectFromLines(layer, _export.GeometryUtils.getAllLines(layer));
+
+  // get all molding line segments
+  var moldingLines = [];
+  items === null || items === void 0 || items.forEach(function (item) {
+    if (item.category === _constants.ITEM_TYPE.CABINET) {
+      var _item$properties$get$, _item$properties$get$2, _item$properties$get$3, _item$molding;
+      var MGlines = getLinesOfItem2(item, allLineRects, catalog); // exclude overlayed to wall
+      // id & width
+      var parentId = item.id;
+      var inchWidth = (0, _convertUnitsLite.convert)(item.properties.get('width').get('_length')).from((_item$properties$get$ = item.properties.get('width').get('_unit')) !== null && _item$properties$get$ !== void 0 ? _item$properties$get$ : 'in').to('in');
+      // z position of molding line
+      var z = item.properties.get('altitude').get('_length');
+      var zUnit = (_item$properties$get$2 = item.properties.get('altitude').get('_unit')) !== null && _item$properties$get$2 !== void 0 ? _item$properties$get$2 : 'in';
+      z = (0, _convertUnitsLite.convert)(z).from(zUnit).to('cm');
+      var h = item.properties.get('height').get('_length');
+      var hUnit = (_item$properties$get$3 = item.properties.get('height').get('_unit')) !== null && _item$properties$get$3 !== void 0 ? _item$properties$get$3 : 'in';
+      h = (0, _convertUnitsLite.convert)(h).from(hUnit).to('cm');
+      if (!(0, _helper.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 _constants.TOP_MOLDING_LOCATION:
+              lineZ = z + h;
+              break;
+            case _constants.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 : !(0, _helper.isEmpty)(item.doorStyle) && item.doorStyle.toJS(),
+              line: line,
+              z: lineZ,
+              parentId: parentId,
+              inchWidth: inchWidth
+            });
+          });
+        });
+      } else if (
+      // calc toe kick molding line
+      item.layoutpos === _constants.BASE_CABINET_LAYOUTPOS && ((0, _helper.isEmpty)(item.molding) || ((_item$molding = item.molding) === null || _item$molding === void 0 ? void 0 : _item$molding.length) < 1 || !isEnableItemForMolding(layer, item))) {
+        var skuName = (0, _utils.getToeKickSKU)(item.doorStyle, catalog);
+        var thumbnail = skuName ? skuName : '';
+        MGlines === null || MGlines === void 0 || MGlines.forEach(function (line) {
+          return moldingLines.push({
+            molding: {
+              name: _constants.TOE_KICK_MOLDING,
+              sku: (0, _utils.getToeKickSKU)(item.doorStyle, catalog),
+              thumbnail: thumbnail,
+              category: 'molding',
+              type: 'cabinet'
+            },
+            doorStyle: item.doorStyle.hasOwnProperty('id') ? item.doorStyle : !(0, _helper.isEmpty)(item.doorStyle) && item.doorStyle.toJS(),
+            line: line,
+            z: z,
+            parentId: parentId,
+            inchWidth: inchWidth
+          });
+        });
+      }
+    }
+  });
+
+  // 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) > _constants.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 = _export.GeometryUtils.relationshipOfTwoOverlappedLines(srcLine, destLine);
+        if (rst.result === _constants.OVERLAP_SAME || rst.result === _constants.OVERLAP_INCLUDED) {
+          removeLineIds.push(i);
+          return 1; // break
+        } else if (rst.result === _constants.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) < _constants.EPSILON;
+          }), 0);
+          if (lineSegs.length > 0) {
+            lineSegs.forEach(function (ls) {
+              return newLines.push({
+                molding: _objectSpread({}, moldingLines[i].molding),
+                doorStyle: moldingLines[i].doorStyle,
+                line: (0, _toConsumableArray2["default"])(ls),
+                z: moldingLines[i].z,
+                parentId: moldingLines[i].parentId,
+                inchWidth: moldingLines[i].inchWidth
+              });
+            });
+          }
+          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((0, _toConsumableArray2["default"])(moldingLines), newLines);
+
+  // filter again for toe kick molding lines
+  // only remain one line per toe kick molding item
+  var duplicatedLineIdxs = [];
+  for (var _i4 = 0; _i4 < moldingLines.length; _i4++) {
+    var _iml$molding;
+    if (duplicatedLineIdxs.includes(_i4)) continue;
+    var iml = moldingLines[_i4];
+    if (((_iml$molding = iml.molding) === null || _iml$molding === void 0 ? void 0 : _iml$molding.name) !== _constants.TOE_KICK_MOLDING) continue;
+    for (var j = 0; j < moldingLines.length; j++) {
+      if (_i4 === j) continue;
+      var jml = moldingLines[j];
+      if (jml.parentId === iml.parentId) duplicatedLineIdxs.push(j);
+    }
+  }
+  moldingLines = moldingLines.filter(function (line, idx) {
+    return !duplicatedLineIdxs.some(function (id) {
+      return idx === id;
+    });
+  });
+  // console.log('moldingLines: ', moldingLines);
+
+  // make molding data with sorting molding & doorStyle
+  var _loop0 = function _loop0() {
+    var ml = moldingLines[k];
+    var mlLength = ml.molding.name === _constants.TOE_KICK_MOLDING ? ml.inchWidth : (0, _convertUnitsLite.convert)(_export.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;
+}
+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 _loop10 = function _loop10(_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++) {
+          _loop10(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 = (0, _toConsumableArray2["default"])(itemgroup);
+        var MGlines = getLinesOfItem(items[0], allLineRects, catalog);
+        items = sortItemsByDistance(items, items[0]);
+        var _loop11 = function _loop11() {
+          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 (!(_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 = 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++) {
+          _loop11();
+        }
+        MGlines.forEach(function (line) {
+          molding_totalLength += _export.GeometryUtils.verticesDistance(line[0], line[1]);
+        });
+      });
+      molding_totalLength = (0, _convertUnitsLite.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$molding2;
+    if (item.layoutpos === _constants.BASE_CABINET_LAYOUTPOS && ((0, _helper.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 = (0, _convertUnitsLite.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 = (0, _convertUnitsLite.convert)(h / 2).from(hUnit).to('cm');
+      var outline = null;
+      var element = catalog.elements[item.get('type')];
+      if (!element) element = 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 _iterator5 = _createForOfIteratorHelper(outlinePaths),
+          _step5;
+        try {
+          for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
+            var path = _step5.value;
+            var _iterator6 = _createForOfIteratorHelper(path.subPaths),
+              _step6;
+            try {
+              for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
+                var subPath = _step6.value;
+                outlinePoints = outlinePoints.concat(subPath.getPoints());
+              }
+            } catch (err) {
+              _iterator6.e(err);
+            } finally {
+              _iterator6.f();
+            }
+          }
+        } catch (err) {
+          _iterator5.e(err);
+        } finally {
+          _iterator5.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, _convertUnitsLite.convert)(len).from('cm').to('in');
+      } else {
+        w = (0, _convertUnitsLite.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 && (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 skuName = (0, _utils.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: _constants.TOE_KICK_MOLDING,
+      sku: (0, _utils.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((0, _toConsumableArray2["default"])(moldingData), tmpMoldingData);
+  return moldingData;
 }

package/lib/utils/ruler.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getRulerDisplayData = getRulerDisplayData;
+var _convertUnitsLite = require("../utils/convert-units-lite.js");
+var _constants = require("../constants");
+// Below this length, the measurement LINE is hidden
+var MIN_LENGTH_TO_SHOW_RULER_LINE_INCH = 13;
+
+// Below this length, the measurement VALUE (text) is hidden
+var MIN_LENGTH_TO_SHOW_RULER_VALUE_INCH = 5;
+function formatDistance(value, fixed) {
+  // format with fixed decimals first
+  var text = value.toFixed(fixed);
+
+  // remove trailing zeros AFTER decimal, then remove trailing dot if needed
+  // examples:
+  // 2.00 -> 2
+  // 2.50 -> 2.5
+  // 200.00 -> 200
+  text = text.replace(/\.?0+$/, '');
+  return text;
+}
+function getUnitString(unit) {
+  if (unit === 'cm' || unit === 'mm') return '';
+  if (unit === 'in') return '"';
+  return unit;
+}
+function getRulerDisplayData(_ref) {
+  var length = _ref.length,
+    unit = _ref.unit,
+    rulerUnit = _ref.rulerUnit,
+    layerUnit = _ref.layerUnit,
+    _ref$charWidth = _ref.charWidth,
+    charWidth = _ref$charWidth === void 0 ? 8 : _ref$charWidth;
+  // 7.62 cm -> ruLength 2.99 in
+  var ruLength = (0, _convertUnitsLite.convert)(length).from(unit).to(rulerUnit);
+  var fixedLength = layerUnit === _constants.UNIT_MILLIMETER ? 0 : layerUnit === _constants.UNIT_CENTIMETER ? 1 : 2;
+
+  // 2.99 in -> valueInLayerUnit 2.99 in
+  var valueInLayerUnit = (0, _convertUnitsLite.convert)(ruLength).from(rulerUnit).to(layerUnit);
+
+  // 2.99 -> "3"
+  var distanceText = formatDistance(valueInLayerUnit, fixedLength);
+  var unitStr = getUnitString(layerUnit);
+  var textCount = distanceText.length + unitStr.length;
+  // textLength = (3 + ") * 8 = 16
+  var textLength = textCount * charWidth;
+
+  // lengthInInch = 7.62 cm -> 2.99 inch
+  var lengthInInch = (0, _convertUnitsLite.convert)(length).from(unit).to(_constants.UNIT_INCH);
+  var bShowText = lengthInInch > MIN_LENGTH_TO_SHOW_RULER_VALUE_INCH && length - textLength + 24 > 0;
+  var bShowLine = lengthInInch > MIN_LENGTH_TO_SHOW_RULER_LINE_INCH && length - textLength - 8 > 0;
+  return {
+    distanceText: distanceText,
+    unitStr: unitStr,
+    textLength: textLength,
+    bShowText: bShowText,
+    bShowLine: bShowLine
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kitchen-simulator",
-  "version": "4.1.7-react-18",
+  "version": "4.2.2",
   "description": "It is a kitchen simulator (self-contained micro-frontend).",
   "license": "MIT",
   "main": "lib/index.js",
@@ -72,36 +72,41 @@
     "immutablediff": "0.4.4",
     "immutablepatch": "0.5.0",
     "invariant": "^2.0.0",
-    "jwt-decode": "^2.2.0",
-    "moment": "^2.30.1",
     "nanoid": "^5.1.6",
     "polylabel": "1.0.2",
     "posthog-js": "^1.271.0",
     "prop-types": "^15.8.1",
-    "react-ga4": "^1.4.1",
+    "react": "^16.9.0",
+    "react-container-dimensions": "1.4.1",
+    "react-dom": "16.9.0",
     "react-hotjar": "^1.0.11",
     "react-icons": "3.5.0",
-    "react-redux": "^9.2.0",
-    "react-svg-pan-zoom": "^3.13.1",
-    "react-use-measure": "^2.1.7",
-    "redux": "^5.0.1",
-    "three": "0.166.0"
-  },
-  "peerDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-redux": "5.0.7",
+    "react-svg-pan-zoom": "2.18.0",
+    "redux": "4.0.1",
+    "three": "0.166.0",
+    "moment": "^2.30.1",
+    "jwt-decode": "^2.2.0",
+    "react-ga4": "^1.4.1",
+    "styled-components": "^5.2.0"
   },
   "devDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "localstorage-slim": "^1.3.0",
+    "react-tabs": "3.0.0",
+    "sass": "^1.29.0",
+    "reactjs-popup": "^2.0.4",
+    "sass-loader": "^10.0.5",
+    "antd": "^4.24.16",
     "@babel/cli": "^7.28.3",
     "@babel/core": "^7.28.4",
     "@babel/plugin-transform-modules-commonjs": "^7.27.1",
     "@babel/plugin-transform-runtime": "^7.28.3",
     "@babel/preset-env": "^7.28.3",
     "@babel/preset-react": "^7.27.1",
+    "@material-ui/core": "^4.12.3",
+    "@material-ui/icons": "^4.11.2",
+    "@material-ui/lab": "^4.0.0-alpha.61",
     "@sentry/webpack-plugin": "^3.2.4",
-    "antd": "^4.24.16",
     "assert": "^2.1.0",
     "babel-loader": "^9.1.3",
     "babel-plugin-add-module-exports": "^1.0.4",
@@ -117,15 +122,11 @@
     "file-loader": "6.2.0",
     "html-webpack-plugin": "5.6.0",
     "immutable-devtools": "0.1.4",
-    "localstorage-slim": "^1.3.0",
     "mobile-detect": "^1.4.5",
     "path-browserify": "^1.0.1",
     "react-query": "^3.39.3",
     "react-router-dom": "5.1.2",
-    "reactjs-popup": "^2.0.4",
     "rimraf": "^2.6.3",
-    "sass": "^1.29.0",
-    "sass-loader": "^10.0.5",
     "stream-browserify": "^3.0.0",
     "style-loader": "*",
     "webpack": "5.92.1",