kitchen-simulator 4.4.2 → 4.4.4

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

@@ -12,7 +12,7 @@ import { ARROW_COLOR, BASE_CABINET_LAYOUTPOS, OBJTYPE_GROUP, OBJTYPE_MESH, SHADE
 import { Item } from "../../models";
 import * as GeomUtils from "./geom-utils";
 import { loadGLTF } from "./load-obj";
-import { animateDoor, isEmpty, translateDrawer } from "../../utils/helper";
+import { animateDoor, getSkuAliasFromCatalogElement, isEmpty, translateDrawer } from "../../utils/helper";
 import { isWarningItem } from "../../components/viewer2d/utils";
 var INITIAL_NORMAL_MAP = '';
 
@@ -122,23 +122,8 @@ export function render2DItem(element, layer, scene, sizeinfo, layoutpos, is_corn
   var lineCount = 0; //parseInt(((newWidth) / 8 - 0.51).toFixed(), 10) - 1;
   var rowCount = 0; //parseInt((element.type.length / lineCount - 0.51).toFixed(), 10);
 
-  // Get type
-  var objSKU = this.obj.sku_number;
-  if (objSKU.length !== 0) {
-    var dcId,
-      doorStyle = element.doorStyle;
-    if (doorStyle instanceof Map) {
-      dcId = doorStyle.get('id');
-    } else {
-      dcId = doorStyle.id;
-    }
-    var skuItem = this.obj.skuArray.find(function (el) {
-      return el.door_color_id === dcId;
-    });
-    if (skuItem !== undefined) {
-      objSKU = skuItem.sku;
-    }
-  }
+  // Get SKU Alias
+  var objSKU = getSkuAliasFromCatalogElement(this, element);
   if (rowCount > 0) {
     for (var _x = 0; _x < rowCount; _x++) {
       splitStr.push(objSKU.slice(lineCount * _x, lineCount * (_x + 1)));

package/es/constants/catalog/skinPanel.js

@@ -0,0 +1,9 @@
+// skin panel SKU
+export var SKIN_SKU_BSV_24 = 'BSV'; // 23.25" x 34.5" : For base cabinets
+export var SKIN_SKU_BSV_48 = 'BSV48'; // 48" x 34.5" : For base cabinets back-to-back or island backs
+export var SKIN_SKU_WSV_1242 = 'WSV1242'; // 11.25" x 42" : For 12" deep wall cabinets
+export var SKIN_SKU_WSV_2442 = 'WSV2442'; // 23.25" x 42" : For 24" deep wall cabinets
+export var SKIN_SKU_WSV_2460 = 'WSV2460'; // Usually used for CT3DR or CT2DR SKUs + stacked wall cabinets
+export var SKIN_SKU_USV245325 = 'USV2453.25'; // 23.25" x 53.25" : For tall cabinets
+
+export var SKIN_HEIGHT_53_25 = 53.25; // in inch, height of the skin with SKU USV245325

package/es/constants.js

@@ -771,13 +771,4 @@ export var ROOM_SHAPE_TYPE = {
 export var DOORSTYLE_SCOPE_ALL = 'all';
 export var DOORSTYLE_SCOPE_SINGLE = 'single';
 export var DOORSTYLE_SCOPE_MULTIPLE = 'multiple';
-
-// skin panel SKU
-export var SKIN_SKU_BSV_24 = 'BSV24'; // 23.25" x 34.5" : For base cabinets
-export var SKIN_SKU_BSV_48 = 'BSV48'; // 48" x 34.5" : For base cabinets back-to-back or island backs
-export var SKIN_SKU_WSV_1242 = 'WSV1242'; // 11.25" x 42" : For 12" deep wall cabinets
-export var SKIN_SKU_WSV_2442 = 'WSV2442'; // 23.25" x 42" : For 24" deep wall cabinets
-export var SKIN_SKU_WSV_2460 = 'WSV2460'; // Usually used for CT3DR or CT2DR SKUs + stacked wall cabinets
-export var SKIN_SKU_USV245325 = 'USV2453.25'; // 23.25" x 53.25" : For tall cabinets
-
 export var DEFAULT_MOLDING_PIECE_LENGTH = 96; // in inch, 8 feet, standard length for molding pieces

package/es/utils/helper.js

@@ -413,7 +413,6 @@ export function updatePayloadOfInternalEvent(currentObject, layer, catalog) {
     updatedPayload.length = _length;
     //////////////////////////////////////
   } else if ((currentObject === null || currentObject === void 0 ? void 0 : currentObject.prototype) === 'items') {
-    var _catalog$elements$cur;
     // check this cabinet has warning box
     updatedPayload.isWarning = isWarningItem(currentObject);
     // check this item is available molding
@@ -424,14 +423,7 @@ export function updatePayloadOfInternalEvent(currentObject, layer, catalog) {
     if (pointArray) updatedPayload.distArray = pointArray;
 
     // update sku_number using sku_array
-    var currentDoorColorId = currentObject.getIn(['doorStyle', 'id']);
-    var skuArray = catalog === null || catalog === void 0 || (_catalog$elements$cur = catalog.elements[currentObject.get('name')]) === null || _catalog$elements$cur === void 0 || (_catalog$elements$cur = _catalog$elements$cur.obj) === null || _catalog$elements$cur === void 0 ? void 0 : _catalog$elements$cur.skuArray;
-    var correctSKU = skuArray === null || skuArray === void 0 ? void 0 : skuArray.find(function (sku) {
-      return sku.door_color_id === currentDoorColorId;
-    });
-    if (correctSKU) {
-      updatedPayload.sku_number = correctSKU.sku;
-    }
+    updatedPayload.sku_number = getSkuAliasFromCatalog(catalog, currentObject);
   } else if ((currentObject === null || currentObject === void 0 ? void 0 : currentObject.prototype) === 'holes') {
     var _calcDistancesFromHol = calcDistancesFromHoleToNearestOneOrWall(currentObject, layer),
       distLeft = _calcDistancesFromHol.distLeft,
@@ -448,4 +440,21 @@ export function updatePayloadOfInternalEvent(currentObject, layer, catalog) {
     };
   }
   return updatedPayload;
+}
+export function getSkuAliasFromCatalog(catalog, sceneObject) {
+  var _catalog$elements;
+  var sceneObjectJS = typeof (sceneObject === null || sceneObject === void 0 ? void 0 : sceneObject.toJS) === 'function' ? sceneObject.toJS() : sceneObject;
+  var elementName = sceneObjectJS === null || sceneObjectJS === void 0 ? void 0 : sceneObjectJS.name;
+  var catalogElement = catalog === null || catalog === void 0 || (_catalog$elements = catalog.elements) === null || _catalog$elements === void 0 ? void 0 : _catalog$elements[elementName];
+  return getSkuAliasFromCatalogElement(catalogElement, sceneObjectJS);
+}
+export function getSkuAliasFromCatalogElement(catalogElement, sceneObject) {
+  var _sceneObjectJS$doorSt, _catalogElement$obj, _skuAlias$sku;
+  var sceneObjectJS = typeof (sceneObject === null || sceneObject === void 0 ? void 0 : sceneObject.toJS) === 'function' ? sceneObject.toJS() : sceneObject;
+  var doorColorId = sceneObjectJS === null || sceneObjectJS === void 0 || (_sceneObjectJS$doorSt = sceneObjectJS.doorStyle) === null || _sceneObjectJS$doorSt === void 0 ? void 0 : _sceneObjectJS$doorSt.id;
+  var skuArray = catalogElement === null || catalogElement === void 0 || (_catalogElement$obj = catalogElement.obj) === null || _catalogElement$obj === void 0 ? void 0 : _catalogElement$obj.skuArray;
+  var skuAlias = skuArray === null || skuArray === void 0 ? void 0 : skuArray.find(function (sku) {
+    return sku.door_color_id === doorColorId;
+  });
+  return (_skuAlias$sku = skuAlias === null || skuAlias === void 0 ? void 0 : skuAlias.sku) !== null && _skuAlias$sku !== void 0 ? _skuAlias$sku : sceneObjectJS === null || sceneObjectJS === void 0 ? void 0 : sceneObjectJS.sku_number;
 }

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

@@ -1612,7 +1612,7 @@ function _handleExternalEvent() {
 
           // get skin panel data
           skinPanelExclusionSKUs = (_props$configData$ski = props === null || props === void 0 || (_props$configData2 = props.configData) === null || _props$configData2 === void 0 ? void 0 : _props$configData2.skinPanelExclusionSKUs) !== null && _props$configData$ski !== void 0 ? _props$configData$ski : [];
-          sceneData.layers[layerId].skinPanelData = computeSkinPanels(layer, skinPanelExclusionSKUs);
+          sceneData.layers[layerId].skinPanelData = computeSkinPanels(layer, skinPanelExclusionSKUs, props.catalog);
 
           // send scene object from 3DTool to HostApp using internalEvent
           (_props$onInternalEven3 = props.onInternalEvent) === null || _props$onInternalEven3 === void 0 || _props$onInternalEven3.call(props, {

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 } 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,7 @@ export function getSideFaces(item, layer) {
       var skinPanelSKU = 'unknown';
       switch (item.layoutpos) {
         case BASE_CABINET_LAYOUTPOS:
-          skinPanelSKU = SKIN_SKU_BSV_24;
+          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 +86,7 @@ export function getSideFaces(item, layer) {
         // inch unit
         height: heightInch,
         // inch unit
+        isBackFace: i === 2 ? true : false,
         skinPanelSKU: skinPanelSKU,
         itemInfo: item.toJS()
       });
@@ -113,26 +116,138 @@ 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 = [];
+  var newFaces = []; // new countour edge segment that except the overlapped part
+
   for (var i = 0; i < sourceFaces.length; 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], blockingFaces, 0);
+        if (tFaceSegs.length > 0) newFaces = [].concat(_toConsumableArray(newFaces), _toConsumableArray(tFaceSegs));
+        break;
       }
     }
   }
-  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 +288,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 +332,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 +360,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 +381,38 @@ function resolveSkinPanelSKU(face) {
  * Make skin panel data with grouping skinPanelSKU & doorStyle
  */
 function buildSkinPanelData(faces) {
-  var result = [];
-  var _loop = function _loop() {
+  var tempResult = [];
+  var _loop3 = function _loop3() {
     var sf = faces[i];
     var skus = resolveSkinPanelSKU(sf);
     var _iterator = _createForOfIteratorHelper(skus),
       _step;
     try {
-      var _loop2 = function _loop2() {
+      var _loop5 = function _loop5() {
         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();
+        _loop5();
       }
     } catch (err) {
       _iterator.e(err);
@@ -299,19 +421,83 @@ function buildSkinPanelData(faces) {
     }
   };
   for (var i = 0; i < faces.length; i++) {
-    _loop();
+    _loop3();
+  }
+
+  // calculate back face panel quantity of island base cabinets
+  var removeIdxs = [];
+  var newDatas = [];
+  var _loop4 = function _loop4() {
+    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++) {
+    _loop4();
   }
+  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) {
+function shouldExcludeSkinPanel(itemJS, exclusionSet, catalog) {
   var _itemJS$doorStyle;
-  var cabinetSku = itemJS === null || itemJS === void 0 ? void 0 : itemJS.sku_number;
+  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
@@ -319,7 +505,7 @@ export function computeSkinPanels(layer) {
     skinPanelItems = _collectLayerItems.skinPanelItems,
     otherItems = _collectLayerItems.otherItems;
   var filteredSkinPanelItems = skinPanelItems.filter(function (item) {
-    return !shouldExcludeSkinPanel(item.toJS(), exclusionSet);
+    return !shouldExcludeSkinPanel(item.toJS(), exclusionSet, catalog);
   });
 
   // Get all skin face list of [skinPanelItems] & [otherItems]

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

@@ -136,23 +136,8 @@ function render2DItem(element, layer, scene, sizeinfo, layoutpos, is_corner, sha
   var lineCount = 0; //parseInt(((newWidth) / 8 - 0.51).toFixed(), 10) - 1;
   var rowCount = 0; //parseInt((element.type.length / lineCount - 0.51).toFixed(), 10);
 
-  // Get type
-  var objSKU = this.obj.sku_number;
-  if (objSKU.length !== 0) {
-    var dcId,
-      doorStyle = element.doorStyle;
-    if (doorStyle instanceof _immutable.Map) {
-      dcId = doorStyle.get('id');
-    } else {
-      dcId = doorStyle.id;
-    }
-    var skuItem = this.obj.skuArray.find(function (el) {
-      return el.door_color_id === dcId;
-    });
-    if (skuItem !== undefined) {
-      objSKU = skuItem.sku;
-    }
-  }
+  // Get SKU Alias
+  var objSKU = (0, _helper.getSkuAliasFromCatalogElement)(this, element);
   if (rowCount > 0) {
     for (var _x = 0; _x < rowCount; _x++) {
       splitStr.push(objSKU.slice(lineCount * _x, lineCount * (_x + 1)));

package/lib/constants/catalog/skinPanel.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SKIN_SKU_WSV_2460 = exports.SKIN_SKU_WSV_2442 = exports.SKIN_SKU_WSV_1242 = exports.SKIN_SKU_USV245325 = exports.SKIN_SKU_BSV_48 = exports.SKIN_SKU_BSV_24 = exports.SKIN_HEIGHT_53_25 = void 0;
+// skin panel SKU
+var SKIN_SKU_BSV_24 = exports.SKIN_SKU_BSV_24 = 'BSV'; // 23.25" x 34.5" : For base cabinets
+var SKIN_SKU_BSV_48 = exports.SKIN_SKU_BSV_48 = 'BSV48'; // 48" x 34.5" : For base cabinets back-to-back or island backs
+var SKIN_SKU_WSV_1242 = exports.SKIN_SKU_WSV_1242 = 'WSV1242'; // 11.25" x 42" : For 12" deep wall cabinets
+var SKIN_SKU_WSV_2442 = exports.SKIN_SKU_WSV_2442 = 'WSV2442'; // 23.25" x 42" : For 24" deep wall cabinets
+var SKIN_SKU_WSV_2460 = exports.SKIN_SKU_WSV_2460 = 'WSV2460'; // Usually used for CT3DR or CT2DR SKUs + stacked wall cabinets
+var SKIN_SKU_USV245325 = exports.SKIN_SKU_USV245325 = 'USV2453.25'; // 23.25" x 53.25" : For tall cabinets
+
+var SKIN_HEIGHT_53_25 = exports.SKIN_HEIGHT_53_25 = 53.25; // in inch, height of the skin with SKU USV245325

package/lib/constants.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.END_DRAWING_ITEM = exports.END_DRAWING_HOLE_3D = exports.END_DRAWING_HOLE = exports.END_DRAGGING_VERTEX = exports.END_DRAGGING_LINE = exports.END_DRAGGING_ITEM_3D = exports.END_DRAGGING_ITEM = exports.END_DRAGGING_HOLE_3D = exports.END_DRAGGING_HOLE = exports.END_CREATING_HOLE = exports.END_CREATING_CABINET = exports.ELEVATION_VIEW_TITLE = exports.ELEVATION_VIEW_RIGHT = exports.ELEVATION_VIEW_LEFT = exports.ELEVATION_VIEW_KEYWORD = exports.ELEVATION_VIEW_FRONT = exports.ELEVATION_VIEW_BACK = exports.ELEVATION_VIEW = exports.ELEMENT_VERTEX = exports.ELEMENT_LINE = exports.ELEMENT_ITEM = exports.ELEMENT_HOLE = exports.ELEMENT_AREA = exports.EDIT_WIDTH = exports.EDIT = exports.DUPLICATE_SELECTED = exports.DOORSTYLE_SCOPE_SINGLE = exports.DOORSTYLE_SCOPE_MULTIPLE = exports.DOORSTYLE_SCOPE_ALL = exports.DISTANCE_MEASUREMENT_LINE_COLOR = exports.DISTANCE_EPSILON = exports.DIFFERENT_VALUES_PATH_LENGTH = exports.DELTA = exports.DEFAULT_MOLDING_PIECE_LENGTH = exports.DEFAULT_FONT_FAMILY = exports.DECIMAL_PLACES_3 = exports.DECIMAL_PLACES_2 = exports.DASH_LINE_COLOR = exports.CREATE_ROOM_WITH_SHAPE = exports.COPY_PROPERTIES = exports.CLIENTS_NAME = exports.CHANGE_WINDOW_DOOR_MEASURE = exports.CHANGE_WALL_LENGTH_MEASURE = exports.CHANGE_WALL_CABINET_MEASURE = exports.CHANGE_MEASUREMENT_UNIT = exports.CHANGE_CATALOG_PAGE = exports.CHANGE_BASE_CABINET_MEASURE = exports.CEIL_UNITS_LENGTH = exports.BROWN_COLOR = exports.BOTTOM_MOLDING_LOCATION = exports.BOTTOM = exports.BG_COLOR_OVERLAY = exports.BG_COLOR_HOVER = exports.BG_COLOR_1 = exports.BG_COLOR_0 = exports.BEGIN_UPLOADING_IMAGE = exports.BEGIN_ROTATING_ITEM_3D = exports.BEGIN_ROTATING_ITEM = exports.BEGIN_FITTING_IMAGE = exports.BEGIN_DRAWING_LINE = exports.BEGIN_DRAGGING_VERTEX = exports.BEGIN_DRAGGING_LINE = exports.BEGIN_DRAGGING_ITEM_3D = exports.BEGIN_DRAGGING_ITEM = exports.BEGIN_DRAGGING_HOLE_3D = exports.BEGIN_DRAGGING_HOLE = exports.BASE_ITEM_MEASUREMENT_LINE_COLOR = exports.BASE_CABINET_LAYOUTPOS = exports.BACK_DIST_ANG = exports.ATT_VERTEXT_TWO = exports.ATT_VERTEXT_ONE = exports.ATT_LINE_LENGTH = exports.ATT_ITEM_ROTATION = exports.ATT_ITEM_POS = exports.ATT_HOLE_OFFSET_B = exports.ATT_HOLE_OFFSET_A = exports.ARROW_TEXT_FORECOLOR = exports.ARROW_TEXT_FONTFACE = exports.ARROW_TEXT_BACKCOLOR = exports.ARROW_COLOR = exports.ARRAY_ELEVATION_VIEW_MODES = exports.ARRAY_3D_MODES = exports.AREA_ACTIONS = exports.API_SERVER_URL = exports.ANIMATE_STEP_MIN = exports.ANIMATE_STEP_MAX = exports.ANIMATE_OBJECT_OPEN_DOOR_ROTATION_UNIT = exports.ANIMATE_OBJECT = exports.ALTERATE_STATE = exports.ADD_VERTICAL_GUIDE = exports.ADD_TO_GROUP = exports.ADD_LAYER = exports.ADD_HORIZONTAL_GUIDE = exports.ADD_GROUP_FROM_SELECTED = exports.ADD_GROUP = exports.ADD_ELEMENT_TO_CATALOG = exports.ADD_CIRCULAR_GUIDE = exports.ADD_CABINETS = exports.ADD_APPLIANCES = exports.ACCENT_COLOR = void 0;
 exports.MODE_DRAGGING_LINE = exports.MODE_DRAGGING_ITEM_3D = exports.MODE_DRAGGING_ITEM = exports.MODE_DRAGGING_HOLE_3D = exports.MODE_DRAGGING_HOLE = exports.MODE_CONFIGURING_PROJECT = exports.MODE_BACK_ELEVATION_VIEW = exports.MODE_3D_VIEW = exports.MODE_3D_FIRST_PERSON = exports.MODE_2D_ZOOM_OUT = exports.MODE_2D_ZOOM_IN = exports.MODE_2D_PAN = exports.MODE = exports.MIN_ANGLE_DISALLOW_DRAW_WALL = exports.MIDDLE_MOLDING_LOCATION = exports.MEPSILON = exports.MAX_ZOOM_IN_SCALE = exports.MAX_ANGLE_SCALE = exports.MAKE_FLOOR_PLAN = exports.LOGOUT = exports.LOGIN_SUCCESS = exports.LOGIN_ERROR = exports.LOCAL_STORAGE_TOKEN_VALUE = exports.LOCAL_STORAGE_TOKEN_NAME = exports.LOCAL_STORAGE_ORIGINAL_TOKEN = exports.LOCAL_STORAGE_CUSTOMER_INFO = exports.LOCAL_STORAGE_CART_ACTION = exports.LOAD_PROJECT = exports.LIST_QUANTITIES = exports.LIST_PARTS = exports.LINE_THICKNESS = exports.LINE_ACTIONS = exports.LEFT_DIST_ANG = exports.LEFT = exports.LABEL_COLOR = exports.KITCHEN_KONFIGURATOR = exports.KEYBOARD_BUTTON_CODE = exports.ITEM_TYPE = exports.ITEM_MOVE_UP = exports.ITEMS_ACTIONS = exports.INVERT = exports.INTERNAL_EVENT_UNSELECT_ALL = exports.INTERNAL_EVENT_TOGGLE_TO_ELEVATION = exports.INTERNAL_EVENT_SYNC_SCENE = exports.INTERNAL_EVENT_START_DRAW_WALL = exports.INTERNAL_EVENT_SELECT_ELEMENT = exports.INTERNAL_EVENT_ROTATE_ELEMENT = exports.INTERNAL_EVENT_REPLACE_CABINET = exports.INTERNAL_EVENT_ITEMS_CATALOG = exports.INTERNAL_EVENT_DRAW_ELEMENT = exports.INTERNAL_EVENT_DRAG_ELEMENT = exports.INSTALLATION_TYPE_SKU_SUFFIX = exports.INSTALLATION_TYPE_NAME = exports.INSTALLATION_SUFFIX_TYPE = exports.INIT_CATALOG = exports.HOLE_NAMES = exports.HOLE_ACTIONS = exports.HDR_URLS = exports.HAS_LOADINGBAR = exports.GROUP_TRANSLATE = exports.GROUP_ROTATE = exports.GROUP_ACTIONS = exports.GO_BACK_TO_CATALOG_PAGE = exports.FRONT_DIST_ANG = exports.FINISHING_TYPE = exports.FINISHING_TOUCH = exports.EXTERNAL_EVENT_ZOOM_OUT = exports.EXTERNAL_EVENT_ZOOM_IN = exports.EXTERNAL_EVENT_UPDATE_PROPERTY = exports.EXTERNAL_EVENT_UPDATE_ATTRIBUTE = exports.EXTERNAL_EVENT_UNDO = exports.EXTERNAL_EVENT_TOGGLE_TO_ELEVATION = exports.EXTERNAL_EVENT_TOGGLE_TO_3D = exports.EXTERNAL_EVENT_TOGGLE_TO_2D = exports.EXTERNAL_EVENT_SYNC_SCENE = exports.EXTERNAL_EVENT_SET_MOLDING = exports.EXTERNAL_EVENT_SET_FINISHING = exports.EXTERNAL_EVENT_ROTATE_PAN = exports.EXTERNAL_EVENT_REPLACE_CABINET = exports.EXTERNAL_EVENT_REDO = exports.EXTERNAL_EVENT_PROJECT_SETTING = exports.EXTERNAL_EVENT_NEW_PROJECT = exports.EXTERNAL_EVENT_MOVE_PAN = exports.EXTERNAL_EVENT_LOAD_PROJECT = exports.EXTERNAL_EVENT_DUPLICATE_ELEMENT = exports.EXTERNAL_EVENT_DELETE_ELEMENT = exports.EXTERNAL_EVENT_CHANGE_DOORSTYLE = exports.EXTERNAL_EVENT_CENTERING_2D = exports.EXTERNAL_EVENT_ADD_WALL = exports.EXTERNAL_EVENT_ADD_ROOM_SHAPE = exports.EXTERNAL_EVENT_ADD_ITEM = exports.EXTERNAL_EVENT_ADD_HOLE = exports.ERROR_DATABASE = exports.EPSILON = exports.END_UPLOADING_IMAGE = exports.END_ROTATING_ITEM_3D = exports.END_ROTATING_ITEM = exports.END_LOADING = exports.END_FITTING_IMAGE = exports.END_DRAWING_LINE = void 0;
 exports.SET_BACKSPLASH = exports.SET_APPLIANCE_MATERIAL = exports.SELECT_TOOL_ZOOM_OUT = exports.SELECT_TOOL_ZOOM_IN = exports.SELECT_TOOL_UPLOAD_IMAGE = exports.SELECT_TOOL_PAN = exports.SELECT_TOOL_EDIT = exports.SELECT_TOOL_DRAWING_LINE = exports.SELECT_TOOL_DRAWING_ITEM_3D = exports.SELECT_TOOL_DRAWING_ITEM = exports.SELECT_TOOL_DRAWING_HOLE_3D = exports.SELECT_TOOL_DRAWING_HOLE = exports.SELECT_TOOL_3D_VIEW = exports.SELECT_TOOL_3D_FIRST_PERSON = exports.SELECT_LINE = exports.SELECT_LAYER = exports.SELECT_ITEM = exports.SELECT_HOLE = exports.SELECT_GROUP = exports.SELECT_DOOR_STYLE = exports.SELECT_AREA = exports.SELECT_ALL = exports.SELECTALL = exports.SECONDARY_PURPLE_COLOR = exports.SECONDARY_BLUE_COLOR = exports.SCENE_ACTIONS = exports.SAVE_PROJECT = exports.SAVE_DESIGN = exports.ROOM_SHAPE_TYPE = exports.ROOM_SHAPE_MEASUREMENT_LINE_COLOR = exports.ROOM_ELEMENT_MEASUREMENT_LINE_COLOR = exports.ROLLBACK = exports.RIGHT_DIST_ANG = exports.RIGHT = exports.REVIEW_AND_QUOTE = exports.REQUEST_ASSISTANCE = exports.REPLACE_SUBMODULE = exports.REPLACE_ITEM = exports.REMOVE_VERTICAL_GUIDE = exports.REMOVE_REPLACE_SUBMODULE = exports.REMOVE_LINEAR = exports.REMOVE_LAYER = exports.REMOVE_HORIZONTAL_GUIDE = exports.REMOVE_GROUP_AND_DELETE_ELEMENTS = exports.REMOVE_GROUP = exports.REMOVE_FROM_GROUP = exports.REMOVE_DRAWING_SUPPORT = exports.REMOVE_CIRCULAR_GUIDE = exports.REMOVE = exports.REDO = exports.RECREATE = exports.PUSH_LAST_SELECTED_CATALOG_ELEMENT_TO_HISTORY = exports.PROP_RESIZE_WIDTH = exports.PROP_RESIZE_HEIGHT = exports.PROP_RESIZE_DEPTH = exports.PROP_OPEN_DOORS = exports.PROP_FLIP_DOOR_HANDLE = exports.PROP_ALTITUDE = exports.PROJECT_SETTING_OPTION = exports.PROJECT_RE_NAME = exports.PROJECT_NAME_LENGTH_LIMIT = exports.PROJECT_ACTIONS = exports.PRODUCT = exports.PRIMARY_GREEN_COLOR = exports.PASTE_PROPERTIES = exports.OVERLAP_SOME = exports.OVERLAP_SAME = exports.OVERLAP_NONE = exports.OVERLAP_LINK = exports.OVERLAP_INCLUDED = exports.OPEN_PROJECT_CONFIGURATOR = exports.OPEN_CATALOG = exports.OBJTYPE_MESH = exports.OBJTYPE_GROUP = exports.NO_DATA_DATABASE = exports.NEW_PROJECT_BTN = exports.NEW_PROJECT = exports.NEW_DESIGN = exports.MOVE_COMPONENT = exports.MOLDING_LOCATIONS = exports.MODE_WAITING_DRAWING_LINE = exports.MODE_VIEWING_CATALOG = exports.MODE_UPLOADING_IMAGE = exports.MODE_SNAPPING = exports.MODE_ROTATING_ITEM_3D = exports.MODE_ROTATING_ITEM = exports.MODE_RIGHT_ELEVATION_VIEW = exports.MODE_LEFT_ELEVATION_VIEW = exports.MODE_IDLE_3D = exports.MODE_IDLE = exports.MODE_FRONT_VIEW = exports.MODE_FRONT_ELEVATION_VIEW = exports.MODE_FITTING_IMAGE = exports.MODE_ELEVATION_VIEW = exports.MODE_DRAWING_LINE = exports.MODE_DRAWING_ITEM_3D = exports.MODE_DRAWING_ITEM = exports.MODE_DRAWING_HOLE_3D = exports.MODE_DRAWING_HOLE = exports.MODE_DRAGGING_VERTEX = void 0;
-exports.UPDATE_3D_CEIL_HEIGHT = exports.UPDATE_2D_CAMERA = exports.UNSELECT_GROUP = exports.UNSELECT_ALL = exports.UNIT_MILLIMETER = exports.UNIT_MILE = exports.UNIT_METER = exports.UNIT_INCH_LONG = exports.UNIT_INCH = exports.UNIT_FOOT = exports.UNIT_CENTIMETER = exports.UNIT_ANGLE = exports.UNITS_LENGTH = exports.UNDO = exports.UNCREATE = exports.TWO_D_FLOOR_PLAN = exports.TOP_MOLDING_LOCATION = exports.TOP = exports.TOGGLE_SNAP = exports.TOGGLE_LOADING_CABINET = exports.TOE_KICK_MOLDING = exports.TITLE_SMALL_COLOR = exports.TITLE_COLOR = exports.THROW_WARNING = exports.THROW_ERROR = exports.TEXT_COLOR_NEUTRAL_7 = exports.TEXT_COLOR_NEUTRAL_6 = exports.TEXT_COLOR_NEUTRAL_5 = exports.TEXT_COLOR_NEUTRAL_4 = exports.TEXT_COLOR_NEUTRAL_3 = exports.TEXT_COLOR_NEUTRAL_2 = exports.TEXT_COLOR_NEUTRAL_1 = exports.TEXT_COLOR_NEUTRAL_0 = exports.TEXT_COLOR = exports.TECHNICAL_VIEW = exports.TALL_CABINET_LAYOUTPOS = exports.TAKE_PICTURE = exports.SUBTOTAL = exports.SUBMIT_REQUEST_ASSIST = exports.SUBMIT_DESIGN = exports.SUBMIT_ADD_CART = exports.STORE_DIST_ARRAY = exports.STOP_DRAWING_LINE = exports.STEP_CABINET_CHOOSE_PRODUCT = exports.STATUS_WARNING_LIGHT_COLOR = exports.STATUS_WARNING_COLOR = exports.STATUS_POSITIVE_LIGHT_COLOR = exports.STATUS_POSITIVE_COLOR = exports.STATUS_OVERDUE_LIGHT_COLOR = exports.STATUS_OVERDUE_COLOR = exports.STATUS_NEGATIVE_LIGHT_COLOR = exports.STATUS_NEGATIVE_COLOR = exports.STATUS_INFO_LIGHT_COLOR = exports.STATUS_INFO_COLOR = exports.SKIN_SKU_WSV_2460 = exports.SKIN_SKU_WSV_2442 = exports.SKIN_SKU_WSV_1242 = exports.SKIN_SKU_USV245325 = exports.SKIN_SKU_BSV_48 = exports.SKIN_SKU_BSV_24 = exports.SHIFT2DON = exports.SHIFT2DOFF = exports.SHAPE_SVG_WIDTH = exports.SHAPE_SVG_PADDING = exports.SHAPE_SVG_DEPTH = exports.SHADE_LIGHT_PURPLE_COLOR = exports.SHADE_LIGHT_GREEN_COLOR = exports.SHADE_LIGHT_BLUE_COLOR = exports.SHADE_DARK_PURPLE_COLOR = exports.SHADE_DARK_GREEN_COLOR = exports.SHADE_DARK_BLUE_COLOR = exports.SET_WALL_COLOR = exports.SET_USER_DATA = exports.SET_STATE_PROPERTIES = exports.SET_ROTATE_STATUS = exports.SET_RELATED_LINE = exports.SET_PROPERTIES = exports.SET_PROJECT_PROPERTIES = exports.SET_PROJECT_ID = exports.SET_MOVE_STATUS = exports.SET_MOLDING = exports.SET_MODELLING = exports.SET_MODE = exports.SET_LINES_ATTRIBUTES = exports.SET_LAYER_PROPERTIES = exports.SET_ITEMS_ATTRIBUTES = exports.SET_IS_HELP = exports.SET_IS_CABINET_DRAWING = exports.SET_INITIAL_DOOR_STYLE = exports.SET_HOLES_ATTRIBUTES = exports.SET_HANDLE_MATERIAL = exports.SET_GROUP_PROPERTIES = exports.SET_GROUP_BARYCENTER = exports.SET_GROUP_ATTRIBUTES = exports.SET_FLOOR_STYLES = exports.SET_DOOR_STYLE = exports.SET_DOOR_HANDLE = exports.SET_DISTANT = exports.SET_COUNTER_TOP = exports.SET_BACKSPLASH_VISIBLE = void 0;
-exports.ZOOM_VARIABLE = exports.WARRANTY_VIEW = exports.WARRANTY_SUPPORT = exports.WARNING_MESSAGE = exports.WALL_ITEM_MEASUREMENT_LINE_COLOR = exports.WALL_CABINET_LAYOUTPOS = exports.VIEWER3D_ACTIONS = exports.VIEWER2D_ACTIONS = exports.VERTEX_ACTIONS = exports.VANITY_CABINET_LAYOUTPOS = exports.VALIDATE_ITEM_POSTIONS = exports.USER_ACTIONS = exports.UPDATE_ZOOM_SCALE = exports.UPDATE_ROTATING_ITEM_CHANGED = exports.UPDATE_ROTATING_ITEM = exports.UPDATE_ROTATING = exports.UPDATE_POPUP_OPEN = exports.UPDATE_MOVING_STATE = exports.UPDATE_MOUSE_COORDS = exports.UPDATE_MOLDING = exports.UPDATE_ITEM_POSITION = exports.UPDATE_DRAWING_LINE = exports.UPDATE_DRAWING_ITEM = exports.UPDATE_DRAWING_HOLE_3D = exports.UPDATE_DRAWING_HOLE = exports.UPDATE_DRAGGING_VERTEX = exports.UPDATE_DRAGGING_LINE = exports.UPDATE_DRAGGING_ITEM_CHANGED = exports.UPDATE_DRAGGING_ITEM_3DY = exports.UPDATE_DRAGGING_ITEM_3DX = exports.UPDATE_DRAGGING_ITEM = exports.UPDATE_DRAGGING_HOLE_RULER_CHANGED = exports.UPDATE_DRAGGING_HOLE_CHANGED = exports.UPDATE_DRAGGING_HOLE_3D = exports.UPDATE_DRAGGING_HOLE = exports.UPDATE_CEIL_HEIGHT_UNIT = exports.UPDATE_CEIL_HEIGHT = exports.UPDATE_3D_CEIL_HEIGHT_UNIT = void 0;
+exports.UPDATE_DRAGGING_HOLE_CHANGED = exports.UPDATE_DRAGGING_HOLE_3D = exports.UPDATE_DRAGGING_HOLE = exports.UPDATE_CEIL_HEIGHT_UNIT = exports.UPDATE_CEIL_HEIGHT = exports.UPDATE_3D_CEIL_HEIGHT_UNIT = exports.UPDATE_3D_CEIL_HEIGHT = exports.UPDATE_2D_CAMERA = exports.UNSELECT_GROUP = exports.UNSELECT_ALL = exports.UNIT_MILLIMETER = exports.UNIT_MILE = exports.UNIT_METER = exports.UNIT_INCH_LONG = exports.UNIT_INCH = exports.UNIT_FOOT = exports.UNIT_CENTIMETER = exports.UNIT_ANGLE = exports.UNITS_LENGTH = exports.UNDO = exports.UNCREATE = exports.TWO_D_FLOOR_PLAN = exports.TOP_MOLDING_LOCATION = exports.TOP = exports.TOGGLE_SNAP = exports.TOGGLE_LOADING_CABINET = exports.TOE_KICK_MOLDING = exports.TITLE_SMALL_COLOR = exports.TITLE_COLOR = exports.THROW_WARNING = exports.THROW_ERROR = exports.TEXT_COLOR_NEUTRAL_7 = exports.TEXT_COLOR_NEUTRAL_6 = exports.TEXT_COLOR_NEUTRAL_5 = exports.TEXT_COLOR_NEUTRAL_4 = exports.TEXT_COLOR_NEUTRAL_3 = exports.TEXT_COLOR_NEUTRAL_2 = exports.TEXT_COLOR_NEUTRAL_1 = exports.TEXT_COLOR_NEUTRAL_0 = exports.TEXT_COLOR = exports.TECHNICAL_VIEW = exports.TALL_CABINET_LAYOUTPOS = exports.TAKE_PICTURE = exports.SUBTOTAL = exports.SUBMIT_REQUEST_ASSIST = exports.SUBMIT_DESIGN = exports.SUBMIT_ADD_CART = exports.STORE_DIST_ARRAY = exports.STOP_DRAWING_LINE = exports.STEP_CABINET_CHOOSE_PRODUCT = exports.STATUS_WARNING_LIGHT_COLOR = exports.STATUS_WARNING_COLOR = exports.STATUS_POSITIVE_LIGHT_COLOR = exports.STATUS_POSITIVE_COLOR = exports.STATUS_OVERDUE_LIGHT_COLOR = exports.STATUS_OVERDUE_COLOR = exports.STATUS_NEGATIVE_LIGHT_COLOR = exports.STATUS_NEGATIVE_COLOR = exports.STATUS_INFO_LIGHT_COLOR = exports.STATUS_INFO_COLOR = exports.SHIFT2DON = exports.SHIFT2DOFF = exports.SHAPE_SVG_WIDTH = exports.SHAPE_SVG_PADDING = exports.SHAPE_SVG_DEPTH = exports.SHADE_LIGHT_PURPLE_COLOR = exports.SHADE_LIGHT_GREEN_COLOR = exports.SHADE_LIGHT_BLUE_COLOR = exports.SHADE_DARK_PURPLE_COLOR = exports.SHADE_DARK_GREEN_COLOR = exports.SHADE_DARK_BLUE_COLOR = exports.SET_WALL_COLOR = exports.SET_USER_DATA = exports.SET_STATE_PROPERTIES = exports.SET_ROTATE_STATUS = exports.SET_RELATED_LINE = exports.SET_PROPERTIES = exports.SET_PROJECT_PROPERTIES = exports.SET_PROJECT_ID = exports.SET_MOVE_STATUS = exports.SET_MOLDING = exports.SET_MODELLING = exports.SET_MODE = exports.SET_LINES_ATTRIBUTES = exports.SET_LAYER_PROPERTIES = exports.SET_ITEMS_ATTRIBUTES = exports.SET_IS_HELP = exports.SET_IS_CABINET_DRAWING = exports.SET_INITIAL_DOOR_STYLE = exports.SET_HOLES_ATTRIBUTES = exports.SET_HANDLE_MATERIAL = exports.SET_GROUP_PROPERTIES = exports.SET_GROUP_BARYCENTER = exports.SET_GROUP_ATTRIBUTES = exports.SET_FLOOR_STYLES = exports.SET_DOOR_STYLE = exports.SET_DOOR_HANDLE = exports.SET_DISTANT = exports.SET_COUNTER_TOP = exports.SET_BACKSPLASH_VISIBLE = void 0;
+exports.ZOOM_VARIABLE = exports.WARRANTY_VIEW = exports.WARRANTY_SUPPORT = exports.WARNING_MESSAGE = exports.WALL_ITEM_MEASUREMENT_LINE_COLOR = exports.WALL_CABINET_LAYOUTPOS = exports.VIEWER3D_ACTIONS = exports.VIEWER2D_ACTIONS = exports.VERTEX_ACTIONS = exports.VANITY_CABINET_LAYOUTPOS = exports.VALIDATE_ITEM_POSTIONS = exports.USER_ACTIONS = exports.UPDATE_ZOOM_SCALE = exports.UPDATE_ROTATING_ITEM_CHANGED = exports.UPDATE_ROTATING_ITEM = exports.UPDATE_ROTATING = exports.UPDATE_POPUP_OPEN = exports.UPDATE_MOVING_STATE = exports.UPDATE_MOUSE_COORDS = exports.UPDATE_MOLDING = exports.UPDATE_ITEM_POSITION = exports.UPDATE_DRAWING_LINE = exports.UPDATE_DRAWING_ITEM = exports.UPDATE_DRAWING_HOLE_3D = exports.UPDATE_DRAWING_HOLE = exports.UPDATE_DRAGGING_VERTEX = exports.UPDATE_DRAGGING_LINE = exports.UPDATE_DRAGGING_ITEM_CHANGED = exports.UPDATE_DRAGGING_ITEM_3DY = exports.UPDATE_DRAGGING_ITEM_3DX = exports.UPDATE_DRAGGING_ITEM = exports.UPDATE_DRAGGING_HOLE_RULER_CHANGED = void 0;
 //API server
 // export const API_SERVER = 'http://localhost:3000/';
 // ACTIONS project
@@ -781,13 +781,4 @@ var ROOM_SHAPE_TYPE = exports.ROOM_SHAPE_TYPE = {
 var DOORSTYLE_SCOPE_ALL = exports.DOORSTYLE_SCOPE_ALL = 'all';
 var DOORSTYLE_SCOPE_SINGLE = exports.DOORSTYLE_SCOPE_SINGLE = 'single';
 var DOORSTYLE_SCOPE_MULTIPLE = exports.DOORSTYLE_SCOPE_MULTIPLE = 'multiple';
-
-// skin panel SKU
-var SKIN_SKU_BSV_24 = exports.SKIN_SKU_BSV_24 = 'BSV24'; // 23.25" x 34.5" : For base cabinets
-var SKIN_SKU_BSV_48 = exports.SKIN_SKU_BSV_48 = 'BSV48'; // 48" x 34.5" : For base cabinets back-to-back or island backs
-var SKIN_SKU_WSV_1242 = exports.SKIN_SKU_WSV_1242 = 'WSV1242'; // 11.25" x 42" : For 12" deep wall cabinets
-var SKIN_SKU_WSV_2442 = exports.SKIN_SKU_WSV_2442 = 'WSV2442'; // 23.25" x 42" : For 24" deep wall cabinets
-var SKIN_SKU_WSV_2460 = exports.SKIN_SKU_WSV_2460 = 'WSV2460'; // Usually used for CT3DR or CT2DR SKUs + stacked wall cabinets
-var SKIN_SKU_USV245325 = exports.SKIN_SKU_USV245325 = 'USV2453.25'; // 23.25" x 53.25" : For tall cabinets
-
 var DEFAULT_MOLDING_PIECE_LENGTH = exports.DEFAULT_MOLDING_PIECE_LENGTH = 96; // in inch, 8 feet, standard length for molding pieces

package/lib/utils/helper.js

@@ -12,6 +12,8 @@ exports.centering2D = centering2D;
 exports.compareSVGRect = void 0;
 exports.debugUtil = debugUtil;
 exports.getSignedUrl = exports.getPathInfo = exports.getPath = void 0;
+exports.getSkuAliasFromCatalog = getSkuAliasFromCatalog;
+exports.getSkuAliasFromCatalogElement = getSkuAliasFromCatalogElement;
 exports.handleCamRect = handleCamRect;
 exports.isCeilLimitation = isCeilLimitation;
 exports.isElevationView = isElevationView;
@@ -441,7 +443,6 @@ function updatePayloadOfInternalEvent(currentObject, layer, catalog) {
     updatedPayload.length = _length;
     //////////////////////////////////////
   } else if ((currentObject === null || currentObject === void 0 ? void 0 : currentObject.prototype) === 'items') {
-    var _catalog$elements$cur;
     // check this cabinet has warning box
     updatedPayload.isWarning = (0, _utils.isWarningItem)(currentObject);
     // check this item is available molding
@@ -452,14 +453,7 @@ function updatePayloadOfInternalEvent(currentObject, layer, catalog) {
     if (pointArray) updatedPayload.distArray = pointArray;
 
     // update sku_number using sku_array
-    var currentDoorColorId = currentObject.getIn(['doorStyle', 'id']);
-    var skuArray = catalog === null || catalog === void 0 || (_catalog$elements$cur = catalog.elements[currentObject.get('name')]) === null || _catalog$elements$cur === void 0 || (_catalog$elements$cur = _catalog$elements$cur.obj) === null || _catalog$elements$cur === void 0 ? void 0 : _catalog$elements$cur.skuArray;
-    var correctSKU = skuArray === null || skuArray === void 0 ? void 0 : skuArray.find(function (sku) {
-      return sku.door_color_id === currentDoorColorId;
-    });
-    if (correctSKU) {
-      updatedPayload.sku_number = correctSKU.sku;
-    }
+    updatedPayload.sku_number = getSkuAliasFromCatalog(catalog, currentObject);
   } else if ((currentObject === null || currentObject === void 0 ? void 0 : currentObject.prototype) === 'holes') {
     var _calcDistancesFromHol = (0, _geometry.calcDistancesFromHoleToNearestOneOrWall)(currentObject, layer),
       distLeft = _calcDistancesFromHol.distLeft,
@@ -476,4 +470,21 @@ function updatePayloadOfInternalEvent(currentObject, layer, catalog) {
     };
   }
   return updatedPayload;
+}
+function getSkuAliasFromCatalog(catalog, sceneObject) {
+  var _catalog$elements;
+  var sceneObjectJS = typeof (sceneObject === null || sceneObject === void 0 ? void 0 : sceneObject.toJS) === 'function' ? sceneObject.toJS() : sceneObject;
+  var elementName = sceneObjectJS === null || sceneObjectJS === void 0 ? void 0 : sceneObjectJS.name;
+  var catalogElement = catalog === null || catalog === void 0 || (_catalog$elements = catalog.elements) === null || _catalog$elements === void 0 ? void 0 : _catalog$elements[elementName];
+  return getSkuAliasFromCatalogElement(catalogElement, sceneObjectJS);
+}
+function getSkuAliasFromCatalogElement(catalogElement, sceneObject) {
+  var _sceneObjectJS$doorSt, _catalogElement$obj, _skuAlias$sku;
+  var sceneObjectJS = typeof (sceneObject === null || sceneObject === void 0 ? void 0 : sceneObject.toJS) === 'function' ? sceneObject.toJS() : sceneObject;
+  var doorColorId = sceneObjectJS === null || sceneObjectJS === void 0 || (_sceneObjectJS$doorSt = sceneObjectJS.doorStyle) === null || _sceneObjectJS$doorSt === void 0 ? void 0 : _sceneObjectJS$doorSt.id;
+  var skuArray = catalogElement === null || catalogElement === void 0 || (_catalogElement$obj = catalogElement.obj) === null || _catalogElement$obj === void 0 ? void 0 : _catalogElement$obj.skuArray;
+  var skuAlias = skuArray === null || skuArray === void 0 ? void 0 : skuArray.find(function (sku) {
+    return sku.door_color_id === doorColorId;
+  });
+  return (_skuAlias$sku = skuAlias === null || skuAlias === void 0 ? void 0 : skuAlias.sku) !== null && _skuAlias$sku !== void 0 ? _skuAlias$sku : sceneObjectJS === null || sceneObjectJS === void 0 ? void 0 : sceneObjectJS.sku_number;
 }

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

@@ -1620,7 +1620,7 @@ function _handleExternalEvent() {
 
           // get skin panel data
           skinPanelExclusionSKUs = (_props$configData$ski = props === null || props === void 0 || (_props$configData2 = props.configData) === null || _props$configData2 === void 0 ? void 0 : _props$configData2.skinPanelExclusionSKUs) !== null && _props$configData$ski !== void 0 ? _props$configData$ski : [];
-          sceneData.layers[layerId].skinPanelData = (0, _skinPanelEngine.computeSkinPanels)(layer, skinPanelExclusionSKUs);
+          sceneData.layers[layerId].skinPanelData = (0, _skinPanelEngine.computeSkinPanels)(layer, skinPanelExclusionSKUs, props.catalog);
 
           // send scene object from 3DTool to HostApp using internalEvent
           (_props$onInternalEven3 = props.onInternalEvent) === null || _props$onInternalEven3 === void 0 || _props$onInternalEven3.call(props, {

package/lib/utils/skinPanelEngine.js

@@ -12,6 +12,7 @@ var _geometry = require("./geometry");
 var _export = require("./export");
 var _convertUnitsLite = require("./convert-units-lite");
 var _helper = require("./helper");
+var _skinPanel = require("../constants/catalog/skinPanel");
 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; }
@@ -38,7 +39,8 @@ function getSideFaces(item, layer) {
   var overlapList = [_constants.OVERLAP_INCLUDED, _constants.OVERLAP_SAME, _constants.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 !== _constants.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);
@@ -72,13 +74,13 @@ function getSideFaces(item, layer) {
       var skinPanelSKU = 'unknown';
       switch (item.layoutpos) {
         case _constants.BASE_CABINET_LAYOUTPOS:
-          skinPanelSKU = _constants.SKIN_SKU_BSV_24;
+          skinPanelSKU = i === 2 ? 'unknown' : _skinPanel.SKIN_SKU_BSV_24;
           break;
         case _constants.WALL_CABINET_LAYOUTPOS:
-          if (Math.abs(depthInch - 12) <= 1) skinPanelSKU = _constants.SKIN_SKU_WSV_1242;else if (Math.abs(depthInch - 24) <= 1) skinPanelSKU = _constants.SKIN_SKU_WSV_2442;
+          if (Math.abs(depthInch - 12) <= 1) skinPanelSKU = _skinPanel.SKIN_SKU_WSV_1242;else if (Math.abs(depthInch - 24) <= 1) skinPanelSKU = _skinPanel.SKIN_SKU_WSV_2442;
           break;
         case _constants.TALL_CABINET_LAYOUTPOS:
-          skinPanelSKU = _constants.SKIN_SKU_USV245325;
+          skinPanelSKU = _skinPanel.SKIN_SKU_USV245325;
           break;
       }
       sideFaces.push({
@@ -92,6 +94,7 @@ function getSideFaces(item, layer) {
         // inch unit
         height: heightInch,
         // inch unit
+        isBackFace: i === 2 ? true : false,
         skinPanelSKU: skinPanelSKU,
         itemInfo: item.toJS()
       });
@@ -121,26 +124,138 @@ 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 = (0, _geometry.relationshipOfTwoOverlappedLines)(srcLine, destLine);
+          if (rst.result == _constants.OVERLAP_SAME || rst.result == _constants.OVERLAP_INCLUDED) {
+            bContourSeg = false;
+            return 0; // break
+          } else if (rst.result == _constants.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((0, _toConsumableArray2["default"])(returnSegs), (0, _toConsumableArray2["default"])(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 = [_constants.OVERLAP_INCLUDED, _constants.OVERLAP_SAME];
   var removeIdxs = [];
+  var newFaces = []; // new countour edge segment that except the overlapped part
+
   for (var i = 0; i < sourceFaces.length; 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((0, _geometry.relationshipOfTwoOverlappedLines)(iFace.sectionLine, jFace.sectionLine).result)) {
-        var verticallyIncluded = (iFace.zBottom > jFace.zBottom || Math.abs(iFace.zBottom - jFace.zBottom) < _constants.EPSILON) && (iFace.zTop < jFace.zTop || Math.abs(iFace.zTop - jFace.zTop) < _constants.EPSILON);
-        if (verticallyIncluded) {
+      var verticallyIncluded = (iFace.zBottom > jFace.zBottom || Math.abs(iFace.zBottom - jFace.zBottom) < _constants.EPSILON) && (iFace.zTop < jFace.zTop || Math.abs(iFace.zTop - jFace.zTop) < _constants.EPSILON);
+      var verticallyOverlappedTopPart = jFace.zBottom < iFace.zTop && jFace.zBottom > iFace.zBottom && Math.abs(jFace.zBottom - iFace.zTop) > _constants.EPSILON && Math.abs(jFace.zBottom - iFace.zBottom) > _constants.EPSILON;
+      var verticallyOverlappedBottomPart = jFace.zTop < iFace.zTop && jFace.zTop > iFace.zBottom && Math.abs(jFace.zTop - iFace.zTop) > _constants.EPSILON && Math.abs(jFace.zTop - iFace.zBottom) > _constants.EPSILON;
+      var relationship = (0, _geometry.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 === _constants.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], blockingFaces, 0);
+        if (tFaceSegs.length > 0) newFaces = [].concat((0, _toConsumableArray2["default"])(newFaces), (0, _toConsumableArray2["default"])(tFaceSegs));
+        break;
       }
     }
   }
-  return sourceFaces.filter(function (face, idx) {
+  sourceFaces = sourceFaces.filter(function (face, idx) {
     return !removeIdxs.includes(idx);
   });
+  if (newFaces.length > 0) sourceFaces = [].concat((0, _toConsumableArray2["default"])(sourceFaces), (0, _toConsumableArray2["default"])(newFaces));
+  return sourceFaces;
 }
 function applyGroupingRules(faces) {
   var _applyHorizontalGroup = applyHorizontalGrouping(faces),
@@ -181,7 +296,8 @@ function applyHorizontalGrouping(faces) {
           // inch unit
           height: jFace.height,
           // inch unit
-          skinPanelSKU: _constants.SKIN_SKU_BSV_48,
+          isBackFace: jFace.isBackFace,
+          skinPanelSKU: jFace.isBackFace ? 'unknown' : _skinPanel.SKIN_SKU_BSV_48,
           itemInfo: jFace.itemInfo // [TODO] how to select the doorstyle of grouped skin
         });
         removeIdxs.push(i);
@@ -224,7 +340,8 @@ function applyVerticalGrouping(faces) {
           // inch unit
           height: jFace.height,
           // inch unit
-          skinPanelSKU: _constants.SKIN_SKU_WSV_2460,
+          isBackFace: jFace.isBackFace,
+          skinPanelSKU: _skinPanel.SKIN_SKU_WSV_2460,
           itemInfo: jFace.itemInfo // [TODO] how to select the doorstyle of grouped skin
         });
         removeIdxs.push(i);
@@ -249,11 +366,12 @@ function isMP3TallCabinet(sku) {
 function resolveTallCabinetBundle(face) {
   var item = face.itemInfo;
   if (isMP3TallCabinet(item.sku_number)) {
-    return [_constants.SKIN_SKU_BSV_24, _constants.SKIN_SKU_BSV_24, _constants.SKIN_SKU_WSV_2442];
+    return [_skinPanel.SKIN_SKU_BSV_24, _skinPanel.SKIN_SKU_BSV_24, _skinPanel.SKIN_SKU_WSV_2442];
   }
-
-  // fallback
-  return [_constants.SKIN_SKU_USV245325];
+  if (face.height > _skinPanel.SKIN_HEIGHT_53_25) {
+    return [_skinPanel.SKIN_SKU_USV245325, _skinPanel.SKIN_SKU_WSV_2442];
+  }
+  return face !== null && face !== void 0 && face.skinPanelSKU ? [face.skinPanelSKU] : [];
 }
 
 /**
@@ -271,34 +389,38 @@ function resolveSkinPanelSKU(face) {
  * Make skin panel data with grouping skinPanelSKU & doorStyle
  */
 function buildSkinPanelData(faces) {
-  var result = [];
-  var _loop = function _loop() {
+  var tempResult = [];
+  var _loop3 = function _loop3() {
     var sf = faces[i];
     var skus = resolveSkinPanelSKU(sf);
     var _iterator = _createForOfIteratorHelper(skus),
       _step;
     try {
-      var _loop2 = function _loop2() {
+      var _loop5 = function _loop5() {
         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((0, _geometry.pointsDistance)(sf.sectionLine.x1, sf.sectionLine.y1, sf.sectionLine.x2, sf.sectionLine.y2)),
+            isBackFace: sf.isBackFace
           });
         } else {
-          result[idx].quantity += 1;
+          var faceLength = (0, _geometry.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();
+        _loop5();
       }
     } catch (err) {
       _iterator.e(err);
@@ -307,19 +429,83 @@ function buildSkinPanelData(faces) {
     }
   };
   for (var i = 0; i < faces.length; i++) {
-    _loop();
+    _loop3();
+  }
+
+  // calculate back face panel quantity of island base cabinets
+  var removeIdxs = [];
+  var newDatas = [];
+  var _loop4 = function _loop4() {
+    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 === _skinPanel.SKIN_SKU_BSV_48 && v.doorStyleId === iData.doorStyleId;
+      });
+      var idx24 = tempResult.findIndex(function (v) {
+        return v.itemSKU === _skinPanel.SKIN_SKU_BSV_24 && v.doorStyleId === iData.doorStyleId;
+      });
+      if (idx48 < 0) {
+        if (count48 > 0) newDatas.push({
+          itemSKU: _skinPanel.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: _skinPanel.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++) {
+    _loop4();
   }
+  tempResult = tempResult.filter(function (data, idx) {
+    return !removeIdxs.includes(idx);
+  });
+  if (newDatas.length > 0) tempResult = [].concat((0, _toConsumableArray2["default"])(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) {
+function shouldExcludeSkinPanel(itemJS, exclusionSet, catalog) {
   var _itemJS$doorStyle;
-  var cabinetSku = itemJS === null || itemJS === void 0 ? void 0 : itemJS.sku_number;
+  var cabinetSku = (0, _helper.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));
 }
 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
@@ -327,7 +513,7 @@ function computeSkinPanels(layer) {
     skinPanelItems = _collectLayerItems.skinPanelItems,
     otherItems = _collectLayerItems.otherItems;
   var filteredSkinPanelItems = skinPanelItems.filter(function (item) {
-    return !shouldExcludeSkinPanel(item.toJS(), exclusionSet);
+    return !shouldExcludeSkinPanel(item.toJS(), exclusionSet, catalog);
   });
 
   // Get all skin face list of [skinPanelItems] & [otherItems]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kitchen-simulator",
-  "version": "4.4.2",
+  "version": "4.4.4",
   "description": "It is a kitchen simulator (self-contained micro-frontend).",
   "license": "MIT",
   "main": "lib/index.js",