kitchen-simulator 4.4.1 → 4.4.2-new-json

package/es/utils/molding.js

@@ -563,7 +563,23 @@ export function getLinesFromItems2(moldingGroup, layer, catalog) {
       })) return 1; // continue
       var mergedResult = getMergedLine(MGlines[_i3], filteredMGlines, 0);
       if (mergedResult) {
-        newMGlines.push(mergedResult.mergedLine);
+        // keep origin line direction
+        var rstLine = mergedResult.mergedLine;
+        // if (
+        //   (Math.abs(MGlines[i][0].x - rstLine[1].x) < EPSILON &&
+        //     Math.abs(MGlines[i][0].y - rstLine[1].y) < EPSILON) ||
+        //   (Math.abs(MGlines[i][1].x - rstLine[0].x) < EPSILON &&
+        //     Math.abs(MGlines[i][1].y - rstLine[0].y) < EPSILON)
+        // ) {
+        //   // swap two end points
+        //   const tx = rstLine[0].x;
+        //   const ty = rstLine[0].y;
+        //   rstLine[0].x = rstLine[1].x;
+        //   rstLine[0].y = rstLine[1].y;
+        //   rstLine[1].x = tx;
+        //   rstLine[1].y = ty;
+        // }
+        newMGlines.push(rstLine);
         filteredMGlines = mergedResult.filteredMGlines;
       }
     },
@@ -939,7 +955,7 @@ export function createMonldingGroup(oldMG, layer, molding, catalog) {
   newMG = getMDPoints(newMG);
   return newMG;
 }
-export function getMoldingDataOfScene2(layer, catalog, doorStyle) {
+export function getMoldingDataOfScene2(layer, catalog, doorStyle, moldingPieceLength) {
   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();
@@ -1101,10 +1117,10 @@ export function getMoldingDataOfScene2(layer, catalog, doorStyle) {
     if (idx < 0) moldingData.push(_objectSpread(_objectSpread({}, ml.molding), {}, {
       doorStyle: ml.doorStyle,
       totalLength: mlLength,
-      count: Math.ceil(mlLength * 1.1 / 96)
+      count: Math.ceil(mlLength * 1.1 / moldingPieceLength)
     }));else {
       moldingData[idx].totalLength += mlLength;
-      moldingData[idx].count = Math.ceil(moldingData[idx].totalLength * 1.1 / 96);
+      moldingData[idx].count = Math.ceil(moldingData[idx].totalLength * 1.1 / moldingPieceLength);
     }
   };
   for (var k = 0; k < moldingLines.length; k++) {
@@ -1112,237 +1128,5 @@ export function getMoldingDataOfScene2(layer, catalog, doorStyle) {
   }
   // console.log('moldingData: ', moldingData);
 
-  return moldingData;
-}
-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 _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 = GeometryUtils.buildRectFromLines(layer, GeometryUtils.getAllLines(layer));
-        var items = _toConsumableArray(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 (!(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++) {
-          _loop11();
-        }
-        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$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');
-      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 _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 (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/es/utils/skinPanelEngine.js

@@ -2,11 +2,12 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 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, WALL_CABINET_LAYOUTPOS, TALL_CABINET_LAYOUTPOS, OVERLAP_INCLUDED, OVERLAP_SAME, OVERLAP_LINK, OVERLAP_SOME, EPSILON, SKIN_SKU_BSV_24, SKIN_SKU_BSV_48, SKIN_SKU_WSV_1242, SKIN_SKU_WSV_2442, SKIN_SKU_WSV_2460, SKIN_SKU_USV245325 } from "../constants";
+import { BASE_CABINET_LAYOUTPOS, WALL_CABINET_LAYOUTPOS, TALL_CABINET_LAYOUTPOS, OVERLAP_INCLUDED, OVERLAP_SAME, OVERLAP_LINK, OVERLAP_SOME, EPSILON, VANITY_CABINET_LAYOUTPOS } from "../constants";
 import { buildRectFromLines, getAllLines, pointsDistance, relationshipOfTwoOverlappedLines, rotatePointAroundPoint } from "./geometry";
 import { MathUtils } from "./export";
 import { convert } from "./convert-units-lite";
-import { isEmpty } from "./helper";
+import { getSkuAliasFromCatalog, isEmpty } from "./helper";
+import { SKIN_SKU_BSV_24, SKIN_SKU_BSV_48, SKIN_SKU_WSV_1242, SKIN_SKU_WSV_2442, SKIN_SKU_WSV_2460, SKIN_SKU_USV245325, SKIN_HEIGHT_53_25 } from "../constants/catalog/skinPanel";
 function toCm(item, prop) {
   var unit = item.properties.get(prop).get('_unit') || 'cm';
   var value = item.properties.get(prop).get('_length');
@@ -30,7 +31,8 @@ export function getSideFaces(item, layer) {
   var overlapList = [OVERLAP_INCLUDED, OVERLAP_SAME, OVERLAP_SOME];
   var pos = [[-1, -1], [1, -1], [1, 1], [-1, 1]];
   for (var i = 0; i < 4; i++) {
-    if (i === 0 || i === 2) continue; // only left & right
+    if (i === 0) continue; // only left & right & base cabinet's back
+    if (i === 2 && item.layoutpos !== BASE_CABINET_LAYOUTPOS) continue;
     var isSnappedToWall = false;
     var v0 = rotateCorner(pos[i], item, widthCm, depthCm);
     var v1 = rotateCorner(pos[(i + 1) % 4], item, widthCm, depthCm);
@@ -64,7 +66,8 @@ export function getSideFaces(item, layer) {
       var skinPanelSKU = 'unknown';
       switch (item.layoutpos) {
         case BASE_CABINET_LAYOUTPOS:
-          skinPanelSKU = SKIN_SKU_BSV_24;
+        case VANITY_CABINET_LAYOUTPOS:
+          skinPanelSKU = i === 2 ? 'unknown' : SKIN_SKU_BSV_24;
           break;
         case WALL_CABINET_LAYOUTPOS:
           if (Math.abs(depthInch - 12) <= 1) skinPanelSKU = SKIN_SKU_WSV_1242;else if (Math.abs(depthInch - 24) <= 1) skinPanelSKU = SKIN_SKU_WSV_2442;
@@ -84,6 +87,7 @@ export function getSideFaces(item, layer) {
         // inch unit
         height: heightInch,
         // inch unit
+        isBackFace: i === 2 ? true : false,
         skinPanelSKU: skinPanelSKU,
         itemInfo: item.toJS()
       });
@@ -93,7 +97,7 @@ export function getSideFaces(item, layer) {
 }
 function collectLayerItems(layer) {
   var _layer$items;
-  var skinLayouts = new Set([BASE_CABINET_LAYOUTPOS, WALL_CABINET_LAYOUTPOS, TALL_CABINET_LAYOUTPOS]);
+  var skinLayouts = new Set([BASE_CABINET_LAYOUTPOS, WALL_CABINET_LAYOUTPOS, TALL_CABINET_LAYOUTPOS, VANITY_CABINET_LAYOUTPOS]);
   var skinPanelItems = [];
   var otherItems = [];
   layer === null || layer === void 0 || (_layer$items = layer.items) === null || _layer$items === void 0 || _layer$items.forEach(function (it) {
@@ -113,26 +117,142 @@ function collectFaces(items, layer) {
   }
   return faces;
 }
+
+/**
+ * @param {*} faceSegs
+ * @param {*} otherFaces
+ * @returns
+ */
+function getTrimmedFaceSegs(faceSegs, otherFaces, cnt) {
+  try {
+    cnt++;
+    if (cnt > 5000) {
+      console.log('getTrimmedFaceSegs has limited!');
+      return [];
+    }
+    var returnSegs = [];
+    var _loop = function _loop() {
+      var iFace = faceSegs[i];
+      var srcLine = iFace.sectionLine;
+      var bContourSeg = true;
+      var _loop2 = function _loop2(j) {
+          var destLine = otherFaces[j].sectionLine;
+          var rst = relationshipOfTwoOverlappedLines(srcLine, destLine);
+          if (rst.result == OVERLAP_SAME || rst.result == OVERLAP_INCLUDED) {
+            bContourSeg = false;
+            return 0; // break
+          } else if (rst.result == OVERLAP_SOME) {
+            var trimmedFaceSegs = [];
+            rst.trimmedSegs.forEach(function (lineSeg) {
+              trimmedFaceSegs.push({
+                sectionLine: lineSeg,
+                // cm unit
+                zBottom: iFace.zBottom,
+                // cm unit
+                zTop: iFace.zTop,
+                // cm unit
+                depth: iFace.depthInch,
+                // inch unit
+                height: iFace.heightInch,
+                // inch unit
+                isBackFace: iFace.isBackFace,
+                skinPanelSKU: iFace.skinPanelSKU,
+                itemInfo: iFace.itemInfo
+              });
+            });
+            var tFaceSegs = getTrimmedFaceSegs(trimmedFaceSegs, otherFaces.filter(function (v, idx) {
+              return idx !== j;
+            }), cnt);
+            if (tFaceSegs.length > 0) returnSegs = [].concat(_toConsumableArray(returnSegs), _toConsumableArray(tFaceSegs));
+            bContourSeg = false;
+            return 0; // break
+          }
+        },
+        _ret;
+      for (var j = 0; j < otherFaces.length; j++) {
+        _ret = _loop2(j);
+        if (_ret === 0) break;
+      }
+      if (bContourSeg) returnSegs.push(faceSegs[i]);
+    };
+    for (var i = 0; i < faceSegs.length; i++) {
+      _loop();
+    }
+    return returnSegs;
+  } catch (e) {
+    console.log('getTrimmedFaceSegs catched :', e);
+    return [];
+  }
+}
 function filterFacesBlockedByFaces(sourceFaces, blockingFaces) {
   var overlapList = [OVERLAP_INCLUDED, OVERLAP_SAME];
   var removeIdxs = [];
-  for (var i = 0; i < sourceFaces.length; i++) {
+  var newFaces = []; // new countour edge segment that except the overlapped part
+  var _loop3 = function _loop3(i) {
     var iFace = sourceFaces[i];
     for (var j = 0; j < blockingFaces.length; j++) {
+      var _relationship$trimmed;
       if (sourceFaces === blockingFaces && i === j) continue;
       var jFace = blockingFaces[j];
-      if (overlapList.includes(relationshipOfTwoOverlappedLines(iFace.sectionLine, jFace.sectionLine).result)) {
-        var verticallyIncluded = (iFace.zBottom > jFace.zBottom || Math.abs(iFace.zBottom - jFace.zBottom) < EPSILON) && (iFace.zTop < jFace.zTop || Math.abs(iFace.zTop - jFace.zTop) < EPSILON);
-        if (verticallyIncluded) {
+      var verticallyIncluded = (iFace.zBottom > jFace.zBottom || Math.abs(iFace.zBottom - jFace.zBottom) < EPSILON) && (iFace.zTop < jFace.zTop || Math.abs(iFace.zTop - jFace.zTop) < EPSILON);
+      var verticallyOverlappedTopPart = jFace.zBottom < iFace.zTop && jFace.zBottom > iFace.zBottom && Math.abs(jFace.zBottom - iFace.zTop) > EPSILON && Math.abs(jFace.zBottom - iFace.zBottom) > EPSILON;
+      var verticallyOverlappedBottomPart = jFace.zTop < iFace.zTop && jFace.zTop > iFace.zBottom && Math.abs(jFace.zTop - iFace.zTop) > EPSILON && Math.abs(jFace.zTop - iFace.zBottom) > EPSILON;
+      var relationship = relationshipOfTwoOverlappedLines(iFace.sectionLine, jFace.sectionLine);
+      if (overlapList.includes(relationship.result)) {
+        if (verticallyIncluded) removeIdxs.push(i);else if (verticallyOverlappedTopPart) {
           removeIdxs.push(i);
-          break;
+          newFaces.push({
+            sectionLine: iFace.sectionLine,
+            // cm unit
+            zBottom: iFace.zBottom,
+            // cm unit
+            zTop: jFace.zBottom,
+            // cm unit
+            depth: iFace.depthInch,
+            // inch unit
+            height: toIn(jFace.zBottom - iFace.zBottom),
+            // inch unit
+            isBackFace: iFace.isBackFace,
+            skinPanelSKU: iFace.skinPanelSKU,
+            itemInfo: iFace.itemInfo
+          });
+        } else if (verticallyOverlappedBottomPart) {
+          removeIdxs.push(i);
+          newFaces.push({
+            sectionLine: iFace.sectionLine,
+            // cm unit
+            zBottom: jFace.zTop,
+            // cm unit
+            zTop: iFace.zTop,
+            // cm unit
+            depth: iFace.depthInch,
+            // inch unit
+            height: toIn(iFace.zTop - jFace.zTop),
+            // inch unit
+            isBackFace: iFace.isBackFace,
+            skinPanelSKU: iFace.skinPanelSKU,
+            itemInfo: iFace.itemInfo
+          });
         }
+        break;
+      } else if (relationship.result === OVERLAP_SOME && ((_relationship$trimmed = relationship.trimmedSegs) === null || _relationship$trimmed === void 0 ? void 0 : _relationship$trimmed.length) > 0 && verticallyIncluded) {
+        removeIdxs.push(i);
+        var tFaceSegs = getTrimmedFaceSegs([iFace], sourceFaces === blockingFaces ? blockingFaces.filter(function (v, idx) {
+          return idx !== i;
+        }) : blockingFaces, 0);
+        if (tFaceSegs.length > 0) newFaces = [].concat(_toConsumableArray(newFaces), _toConsumableArray(tFaceSegs));
+        break;
       }
     }
+  };
+  for (var i = 0; i < sourceFaces.length; i++) {
+    _loop3(i);
   }
-  return sourceFaces.filter(function (face, idx) {
+  sourceFaces = sourceFaces.filter(function (face, idx) {
     return !removeIdxs.includes(idx);
   });
+  if (newFaces.length > 0) sourceFaces = [].concat(_toConsumableArray(sourceFaces), _toConsumableArray(newFaces));
+  return sourceFaces;
 }
 function applyGroupingRules(faces) {
   var _applyHorizontalGroup = applyHorizontalGrouping(faces),
@@ -173,7 +293,8 @@ function applyHorizontalGrouping(faces) {
           // inch unit
           height: jFace.height,
           // inch unit
-          skinPanelSKU: SKIN_SKU_BSV_48,
+          isBackFace: jFace.isBackFace,
+          skinPanelSKU: jFace.isBackFace ? 'unknown' : SKIN_SKU_BSV_48,
           itemInfo: jFace.itemInfo // [TODO] how to select the doorstyle of grouped skin
         });
         removeIdxs.push(i);
@@ -216,6 +337,7 @@ function applyVerticalGrouping(faces) {
           // inch unit
           height: jFace.height,
           // inch unit
+          isBackFace: jFace.isBackFace,
           skinPanelSKU: SKIN_SKU_WSV_2460,
           itemInfo: jFace.itemInfo // [TODO] how to select the doorstyle of grouped skin
         });
@@ -243,9 +365,10 @@ function resolveTallCabinetBundle(face) {
   if (isMP3TallCabinet(item.sku_number)) {
     return [SKIN_SKU_BSV_24, SKIN_SKU_BSV_24, SKIN_SKU_WSV_2442];
   }
-
-  // fallback
-  return [SKIN_SKU_USV245325];
+  if (face.height > SKIN_HEIGHT_53_25) {
+    return [SKIN_SKU_USV245325, SKIN_SKU_WSV_2442];
+  }
+  return face !== null && face !== void 0 && face.skinPanelSKU ? [face.skinPanelSKU] : [];
 }
 
 /**
@@ -263,34 +386,38 @@ function resolveSkinPanelSKU(face) {
  * Make skin panel data with grouping skinPanelSKU & doorStyle
  */
 function buildSkinPanelData(faces) {
-  var result = [];
-  var _loop = function _loop() {
+  var tempResult = [];
+  var _loop4 = function _loop4() {
     var sf = faces[i];
     var skus = resolveSkinPanelSKU(sf);
     var _iterator = _createForOfIteratorHelper(skus),
       _step;
     try {
-      var _loop2 = function _loop2() {
+      var _loop6 = function _loop6() {
         var sku = _step.value;
-        var idx = result.findIndex(function (v) {
+        var idx = tempResult.findIndex(function (v) {
           var _sf$itemInfo;
-          return v.itemSKU === sku && v.doorStyleId === ((_sf$itemInfo = sf.itemInfo) === null || _sf$itemInfo === void 0 || (_sf$itemInfo = _sf$itemInfo.doorStyle) === null || _sf$itemInfo === void 0 ? void 0 : _sf$itemInfo.id);
+          return v.itemSKU === sku && v.doorStyleId === ((_sf$itemInfo = sf.itemInfo) === null || _sf$itemInfo === void 0 || (_sf$itemInfo = _sf$itemInfo.doorStyle) === null || _sf$itemInfo === void 0 ? void 0 : _sf$itemInfo.id) && v.isBackFace === sf.isBackFace;
         });
         if (idx < 0) {
           var _sf$itemInfo$doorStyl, _sf$itemInfo2, _sf$itemInfo$doorStyl2, _sf$itemInfo3;
-          result.push({
+          tempResult.push({
             itemSKU: sku,
             doorStyle: (_sf$itemInfo$doorStyl = (_sf$itemInfo2 = sf.itemInfo) === null || _sf$itemInfo2 === void 0 || (_sf$itemInfo2 = _sf$itemInfo2.doorStyle) === null || _sf$itemInfo2 === void 0 ? void 0 : _sf$itemInfo2.name) !== null && _sf$itemInfo$doorStyl !== void 0 ? _sf$itemInfo$doorStyl : '',
             doorStyleId: (_sf$itemInfo$doorStyl2 = (_sf$itemInfo3 = sf.itemInfo) === null || _sf$itemInfo3 === void 0 || (_sf$itemInfo3 = _sf$itemInfo3.doorStyle) === null || _sf$itemInfo3 === void 0 ? void 0 : _sf$itemInfo3.id) !== null && _sf$itemInfo$doorStyl2 !== void 0 ? _sf$itemInfo$doorStyl2 : '',
             installationType: 'standard',
-            quantity: 1
+            quantity: 1,
+            totalLength: toIn(pointsDistance(sf.sectionLine.x1, sf.sectionLine.y1, sf.sectionLine.x2, sf.sectionLine.y2)),
+            isBackFace: sf.isBackFace
           });
         } else {
-          result[idx].quantity += 1;
+          var faceLength = pointsDistance(sf.sectionLine.x1, sf.sectionLine.y1, sf.sectionLine.x2, sf.sectionLine.y2);
+          tempResult[idx].totalLength += toIn(faceLength);
+          tempResult[idx].quantity += 1;
         }
       };
       for (_iterator.s(); !(_step = _iterator.n()).done;) {
-        _loop2();
+        _loop6();
       }
     } catch (err) {
       _iterator.e(err);
@@ -299,18 +426,95 @@ function buildSkinPanelData(faces) {
     }
   };
   for (var i = 0; i < faces.length; i++) {
-    _loop();
+    _loop4();
+  }
+
+  // calculate back face panel quantity of island base cabinets
+  var removeIdxs = [];
+  var newDatas = [];
+  var _loop5 = function _loop5() {
+    var iData = tempResult[_i];
+    if (iData.isBackFace) {
+      removeIdxs.push(_i);
+      var count48 = Math.floor(iData.totalLength / 48);
+      var count24 = iData.totalLength % 48 > 0 ? 1 : 0;
+      var idx48 = tempResult.findIndex(function (v) {
+        return v.itemSKU === SKIN_SKU_BSV_48 && v.doorStyleId === iData.doorStyleId;
+      });
+      var idx24 = tempResult.findIndex(function (v) {
+        return v.itemSKU === SKIN_SKU_BSV_24 && v.doorStyleId === iData.doorStyleId;
+      });
+      if (idx48 < 0) {
+        if (count48 > 0) newDatas.push({
+          itemSKU: SKIN_SKU_BSV_48,
+          doorStyle: iData.doorStyle,
+          doorStyleId: iData.doorStyleId,
+          installationType: iData.installationType,
+          quantity: count48,
+          totalLength: count48 * 48,
+          isBackFace: iData.isBackFace
+        });
+      } else {
+        tempResult[idx48].quantity += count48;
+        tempResult[idx48].totalLength += count48 * 48;
+      }
+      if (idx24 < 0) {
+        if (count24 > 0) newDatas.push({
+          itemSKU: SKIN_SKU_BSV_24,
+          doorStyle: iData.doorStyle,
+          doorStyleId: iData.doorStyleId,
+          installationType: iData.installationType,
+          quantity: count24,
+          totalLength: count24 * 24,
+          isBackFace: iData.isBackFace
+        });
+      } else {
+        tempResult[idx24].quantity += count24;
+        tempResult[idx24].totalLength += count24 * 24;
+      }
+    }
+  };
+  for (var _i = 0; _i < tempResult.length; _i++) {
+    _loop5();
   }
+  tempResult = tempResult.filter(function (data, idx) {
+    return !removeIdxs.includes(idx);
+  });
+  if (newDatas.length > 0) tempResult = [].concat(_toConsumableArray(tempResult), newDatas);
+  var result = [];
+  tempResult.forEach(function (v) {
+    return result.push({
+      itemSKU: v.itemSKU,
+      doorStyle: v.doorStyle,
+      doorStyleId: v.doorStyleId,
+      installationType: v.installationType,
+      quantity: v.quantity
+    });
+  });
   return result;
 }
+function shouldExcludeSkinPanel(itemJS, exclusionSet, catalog) {
+  var _itemJS$doorStyle;
+  var cabinetSku = getSkuAliasFromCatalog(catalog, itemJS);
+  var doorColorSku = itemJS === null || itemJS === void 0 || (_itemJS$doorStyle = itemJS.doorStyle) === null || _itemJS$doorStyle === void 0 ? void 0 : _itemJS$doorStyle.sku;
+  if (!cabinetSku || !doorColorSku) return false;
+  return exclusionSet.has("".concat(cabinetSku, "-").concat(doorColorSku));
+}
 export function computeSkinPanels(layer) {
+  var skinPanelExclusionSKUs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var catalog = arguments.length > 2 ? arguments[2] : undefined;
+  var exclusionSet = new Set(skinPanelExclusionSKUs);
+
   // Get candidate skin panel items and other items
   var _collectLayerItems = collectLayerItems(layer),
     skinPanelItems = _collectLayerItems.skinPanelItems,
     otherItems = _collectLayerItems.otherItems;
+  var filteredSkinPanelItems = skinPanelItems.filter(function (item) {
+    return !shouldExcludeSkinPanel(item.toJS(), exclusionSet, catalog);
+  });
 
   // Get all skin face list of [skinPanelItems] & [otherItems]
-  var skinFaces = collectFaces(skinPanelItems, layer);
+  var skinFaces = collectFaces(filteredSkinPanelItems, layer);
   var otherFaces = collectFaces(otherItems, layer);
   skinFaces = filterFacesBlockedByFaces(skinFaces, skinFaces);
   skinFaces = filterFacesBlockedByFaces(skinFaces, otherFaces);