kitchen-simulator 11.0.0-react.18 → 11.0.0

package/lib/utils/skinPanelEngine.js

@@ -0,0 +1,530 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.computeSkinPanels = computeSkinPanels;
+exports.getSideFaces = getSideFaces;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _constants = require("../constants");
+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; }
+function toCm(item, prop) {
+  var unit = item.properties.get(prop).get('_unit') || 'cm';
+  var value = item.properties.get(prop).get('_length');
+  return (0, _convertUnitsLite.convert)(value).from(unit).to('cm');
+}
+function toIn(cmValue) {
+  return _export.MathUtils.toFixedFloat((0, _convertUnitsLite.convert)(cmValue).from('cm').to('in'), 1);
+}
+function rotateCorner(pos, item, width, depth) {
+  return (0, _geometry.rotatePointAroundPoint)(pos[0] * width / 2 + item.x, pos[1] * depth / 2 + item.y, item.x, item.y, item.rotation);
+}
+function getSideFaces(item, layer) {
+  var sideFaces = [];
+  if ((0, _helper.isEmpty)(item)) return sideFaces;
+  var vertexLines = (0, _geometry.getAllLines)(layer);
+  var rectLines = (0, _geometry.buildRectFromLines)(layer, vertexLines);
+  var widthCm = toCm(item, 'width');
+  var depthCm = toCm(item, 'depth');
+  var heightCm = toCm(item, 'height');
+  var altitudeCm = toCm(item, 'altitude');
+  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) 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);
+    var srcLine = {
+      x1: v0.x,
+      y1: v0.y,
+      x2: v1.x,
+      y2: v1.y
+    };
+    for (var j = 0; j < (rectLines === null || rectLines === void 0 ? void 0 : rectLines.length); j++) {
+      var destLine1 = {
+        x1: rectLines[j].rect[2].x,
+        y1: rectLines[j].rect[2].y,
+        x2: rectLines[j].rect[3].x,
+        y2: rectLines[j].rect[3].y
+      };
+      var destLine2 = {
+        x1: rectLines[j].rect[0].x,
+        y1: rectLines[j].rect[0].y,
+        x2: rectLines[j].rect[1].x,
+        y2: rectLines[j].rect[1].y
+      };
+      if (overlapList.includes((0, _geometry.relationshipOfTwoOverlappedLines)(srcLine, destLine1).result) || overlapList.includes((0, _geometry.relationshipOfTwoOverlappedLines)(srcLine, destLine2).result)) {
+        isSnappedToWall = true;
+        break;
+      }
+    }
+    if (!isSnappedToWall) {
+      var depthInch = toIn((0, _geometry.pointsDistance)(srcLine.x1, srcLine.y1, srcLine.x2, srcLine.y2));
+      var heightInch = toIn(heightCm);
+      var skinPanelSKU = 'unknown';
+      switch (item.layoutpos) {
+        case _constants.BASE_CABINET_LAYOUTPOS:
+        case _constants.VANITY_CABINET_LAYOUTPOS:
+          skinPanelSKU = i === 2 ? 'unknown' : _skinPanel.SKIN_SKU_BSV_24;
+          break;
+        case _constants.WALL_CABINET_LAYOUTPOS:
+          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 = _skinPanel.SKIN_SKU_USV245325;
+          break;
+      }
+      sideFaces.push({
+        sectionLine: srcLine,
+        // cm unit
+        zBottom: altitudeCm,
+        // cm unit
+        zTop: altitudeCm + heightCm,
+        // cm unit
+        depth: depthInch,
+        // inch unit
+        height: heightInch,
+        // inch unit
+        isBackFace: i === 2 ? true : false,
+        skinPanelSKU: skinPanelSKU,
+        itemInfo: item.toJS()
+      });
+    }
+  }
+  return sideFaces;
+}
+function collectLayerItems(layer) {
+  var _layer$items;
+  var skinLayouts = new Set([_constants.BASE_CABINET_LAYOUTPOS, _constants.WALL_CABINET_LAYOUTPOS, _constants.TALL_CABINET_LAYOUTPOS, _constants.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) {
+    if (it.category === 'cabinet' && skinLayouts.has(it.layoutpos)) skinPanelItems.push(it);else otherItems.push(it);
+  });
+  return {
+    skinPanelItems: skinPanelItems,
+    otherItems: otherItems
+  };
+}
+function collectFaces(items, layer) {
+  var faces = [];
+  for (var i = 0; i < items.length; i++) {
+    var item = items[i];
+    var sideFaces = getSideFaces(item, layer);
+    faces = faces.concat(sideFaces);
+  }
+  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
+  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];
+      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);
+          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], sourceFaces === blockingFaces ? blockingFaces.filter(function (v, idx) {
+          return idx !== i;
+        }) : blockingFaces, 0);
+        if (tFaceSegs.length > 0) newFaces = [].concat((0, _toConsumableArray2["default"])(newFaces), (0, _toConsumableArray2["default"])(tFaceSegs));
+        break;
+      }
+    }
+  };
+  for (var i = 0; i < sourceFaces.length; i++) {
+    _loop3(i);
+  }
+  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),
+    remainingAfterHorizontal = _applyHorizontalGroup.remainingAfterHorizontal,
+    horizontalGrouped = _applyHorizontalGroup.horizontalGrouped;
+  var _applyVerticalGroupin = applyVerticalGrouping(remainingAfterHorizontal),
+    remainingAfterVertical = _applyVerticalGroupin.remainingAfterVertical,
+    verticalGrouped = _applyVerticalGroupin.verticalGrouped;
+  return {
+    remainingFaces: remainingAfterVertical,
+    groupedFaces: [].concat((0, _toConsumableArray2["default"])(horizontalGrouped), (0, _toConsumableArray2["default"])(verticalGrouped))
+  };
+}
+
+/**
+ * Horizontal Grouping (for base cabinets back-to-back : BSV48 48" x 34.5")
+ */
+function applyHorizontalGrouping(faces) {
+  var removeIdxs = [];
+  var grouped = [];
+  for (var i = 0; i < faces.length; i++) {
+    var iFace = faces[i];
+    if (removeIdxs.includes(i) || iFace.itemInfo.layoutpos !== _constants.BASE_CABINET_LAYOUTPOS) continue;
+    for (var j = 0; j < faces.length; j++) {
+      if (i === j) continue;
+      var jFace = faces[j];
+      if (removeIdxs.includes(j) || jFace.itemInfo.layoutpos !== _constants.BASE_CABINET_LAYOUTPOS || Math.abs(iFace.zBottom - jFace.zBottom) > _constants.EPSILON || Math.abs(iFace.zTop - jFace.zTop) > _constants.EPSILON) continue;
+      var relationship = (0, _geometry.relationshipOfTwoOverlappedLines)(iFace.sectionLine, jFace.sectionLine);
+      if (relationship.result === _constants.OVERLAP_LINK) {
+        grouped.push({
+          sectionLine: relationship.linkedLine,
+          // cm unit
+          zBottom: jFace.zBottom,
+          // cm unit
+          zTop: jFace.zTop,
+          // cm unit
+          depth: jFace.depth,
+          // inch unit
+          height: jFace.height,
+          // inch unit
+          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);
+        removeIdxs.push(j);
+      }
+    }
+  }
+  return {
+    remainingAfterHorizontal: faces.filter(function (f, idx) {
+      return !removeIdxs.includes(idx);
+    }),
+    horizontalGrouped: grouped
+  };
+}
+
+/**
+ * Vertical Grouping (For CT3DR or CT2DR SKUs + stacked wall cabinets)
+ */
+function applyVerticalGrouping(faces) {
+  var removeIdxs = [];
+  var grouped = [];
+  for (var i = 0; i < faces.length; i++) {
+    var iFace = faces[i];
+    if (removeIdxs.includes(i) || iFace.itemInfo.layoutpos !== _constants.WALL_CABINET_LAYOUTPOS) continue;
+    for (var j = 0; j < faces.length; j++) {
+      if (i === j) continue;
+      var jFace = faces[j];
+      if (removeIdxs.includes(j) || jFace.itemInfo.layoutpos !== _constants.WALL_CABINET_LAYOUTPOS) continue;
+      var verticallyTouching = Math.abs(iFace.zBottom - jFace.zTop) < _constants.EPSILON || Math.abs(iFace.zTop - jFace.zBottom) < _constants.EPSILON;
+      var horizontallySame = (0, _geometry.relationshipOfTwoOverlappedLines)(iFace.sectionLine, jFace.sectionLine).result === _constants.OVERLAP_SAME;
+      if (verticallyTouching && horizontallySame) {
+        grouped.push({
+          sectionLine: jFace.sectionLine,
+          // cm unit
+          zBottom: Math.min(jFace.zBottom, iFace.zBottom),
+          // cm unit
+          zTop: Math.max(jFace.zTop, iFace.zTop),
+          // cm unit
+          depth: jFace.depth,
+          // inch unit
+          height: jFace.height,
+          // inch unit
+          isBackFace: jFace.isBackFace,
+          skinPanelSKU: _skinPanel.SKIN_SKU_WSV_2460,
+          itemInfo: jFace.itemInfo // [TODO] how to select the doorstyle of grouped skin
+        });
+        removeIdxs.push(i);
+        removeIdxs.push(j);
+      }
+    }
+  }
+  return {
+    remainingAfterVertical: faces.filter(function (f, idx) {
+      return !removeIdxs.includes(idx);
+    }),
+    verticalGrouped: grouped
+  };
+}
+function isMP3TallCabinet(sku) {
+  return sku === null || sku === void 0 ? void 0 : sku.startsWith('MP3');
+}
+
+/**
+ * Decide which skin panel pieces are needed for a tall cabinet.
+ */
+function resolveTallCabinetBundle(face) {
+  var item = face.itemInfo;
+  if (isMP3TallCabinet(item.sku_number)) {
+    return [_skinPanel.SKIN_SKU_BSV_24, _skinPanel.SKIN_SKU_BSV_24, _skinPanel.SKIN_SKU_WSV_2442];
+  }
+  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] : [];
+}
+
+/**
+ * Converts a face → list of SKUs
+ */
+function resolveSkinPanelSKU(face) {
+  var layout = face.itemInfo.layoutpos;
+  if (layout === _constants.TALL_CABINET_LAYOUTPOS) {
+    return resolveTallCabinetBundle(face);
+  }
+  return [face.skinPanelSKU];
+}
+
+/**
+ * Make skin panel data with grouping skinPanelSKU & doorStyle
+ */
+function buildSkinPanelData(faces) {
+  var tempResult = [];
+  var _loop4 = function _loop4() {
+    var sf = faces[i];
+    var skus = resolveSkinPanelSKU(sf);
+    var _iterator = _createForOfIteratorHelper(skus),
+      _step;
+    try {
+      var _loop6 = function _loop6() {
+        var sku = _step.value;
+        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) && v.isBackFace === sf.isBackFace;
+        });
+        if (idx < 0) {
+          var _sf$itemInfo$doorStyl, _sf$itemInfo2, _sf$itemInfo$doorStyl2, _sf$itemInfo3;
+          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,
+            totalLength: toIn((0, _geometry.pointsDistance)(sf.sectionLine.x1, sf.sectionLine.y1, sf.sectionLine.x2, sf.sectionLine.y2)),
+            isBackFace: sf.isBackFace
+          });
+        } else {
+          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;) {
+        _loop6();
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+  };
+  for (var i = 0; i < faces.length; i++) {
+    _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 === _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++) {
+    _loop5();
+  }
+  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) {
+  var catalogCabinetSku = (0, _helper.getCatalogCabinetSku)(itemJS);
+  return exclusionSet.has(catalogCabinetSku);
+}
+function computeSkinPanels(layer) {
+  var skinPanelExclusionSKUs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  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);
+  });
+
+  // Get all skin face list of [skinPanelItems] & [otherItems]
+  var skinFaces = collectFaces(filteredSkinPanelItems, layer);
+  var otherFaces = collectFaces(otherItems, layer);
+  skinFaces = filterFacesBlockedByFaces(skinFaces, skinFaces);
+  skinFaces = filterFacesBlockedByFaces(skinFaces, otherFaces);
+  var _applyGroupingRules = applyGroupingRules(skinFaces),
+    remainingFaces = _applyGroupingRules.remainingFaces,
+    groupedFaces = _applyGroupingRules.groupedFaces;
+  var finalFaces = [].concat((0, _toConsumableArray2["default"])(remainingFaces), (0, _toConsumableArray2["default"])(groupedFaces));
+  return buildSkinPanelData(finalFaces);
+}

package/lib/utils/snap-scene.js

@@ -0,0 +1,101 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sceneSnapElements = sceneSnapElements;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _snap = require("./snap");
+var _export = require("./export");
+var _immutable = require("immutable");
+function sceneSnapElements(scene) {
+  var snapElements = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : new _immutable.List();
+  var snapMask = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : new _immutable.Map();
+  var width = scene.width,
+    height = scene.height;
+  var a, b, c;
+  return snapElements.withMutations(function (snapElements) {
+    scene.layers.forEach(function (layer) {
+      var lines = layer.lines,
+        vertices = layer.vertices;
+      vertices.forEach(function (_ref) {
+        var vertexID = _ref.id,
+          x = _ref.x,
+          y = _ref.y;
+        if (snapMask.get(_snap.SNAP_POINT)) {
+          (0, _snap.addPointSnap)(snapElements, x, y, 10, 10, vertexID);
+        }
+        if (snapMask.get(_snap.SNAP_LINE)) {
+          var _GeometryUtils$horizo = _export.GeometryUtils.horizontalLine(y);
+          a = _GeometryUtils$horizo.a;
+          b = _GeometryUtils$horizo.b;
+          c = _GeometryUtils$horizo.c;
+          (0, _snap.addLineSnap)(snapElements, a, b, c, 10, 1, vertexID);
+          var _GeometryUtils$vertic = _export.GeometryUtils.verticalLine(x);
+          a = _GeometryUtils$vertic.a;
+          b = _GeometryUtils$vertic.b;
+          c = _GeometryUtils$vertic.c;
+          (0, _snap.addLineSnap)(snapElements, a, b, c, 10, 1, vertexID);
+          var _GeometryUtils$upcros = _export.GeometryUtils.upcrossLine(x, y);
+          a = _GeometryUtils$upcros.a;
+          b = _GeometryUtils$upcros.b;
+          c = _GeometryUtils$upcros.c;
+          (0, _snap.addLineSnap)(snapElements, a, b, c, 10, 3, null);
+          var _GeometryUtils$downcr = _export.GeometryUtils.downcrossLine(x, y);
+          a = _GeometryUtils$downcr.a;
+          b = _GeometryUtils$downcr.b;
+          c = _GeometryUtils$downcr.c;
+          (0, _snap.addLineSnap)(snapElements, a, b, c, 10, 3, null);
+        }
+      });
+      if (snapMask.get(_snap.SNAP_SEGMENT)) {
+        lines.forEach(function (_ref2) {
+          var lineID = _ref2.id,
+            _ref2$vertices = (0, _slicedToArray2["default"])(_ref2.vertices, 2),
+            v0 = _ref2$vertices[0],
+            v1 = _ref2$vertices[1];
+          var _vertices$get = vertices.get(v0),
+            x1 = _vertices$get.x,
+            y1 = _vertices$get.y;
+          var _vertices$get2 = vertices.get(v1),
+            x2 = _vertices$get2.x,
+            y2 = _vertices$get2.y;
+          (0, _snap.addLineSegmentSnap)(snapElements, x1, y1, x2, y2, 20, 1, lineID);
+        });
+      }
+    });
+    if (snapMask.get(_snap.SNAP_GRID)) {
+      var divider = 5;
+      var gridCellSize = 100 / divider;
+      var xCycle = width / gridCellSize;
+      var yCycle = height / gridCellSize;
+      for (var x = 0; x < xCycle; x++) {
+        var xMul = x * gridCellSize;
+        for (var y = 0; y < yCycle; y++) {
+          var yMul = y * gridCellSize;
+          var onXCross = !(x % divider) ? true : false;
+          var onYCross = !(y % divider) ? true : false;
+          (0, _snap.addGridSnap)(snapElements, xMul, yMul, 10, onXCross && onYCross ? 15 : 10, null);
+        }
+      }
+    }
+    if (snapMask.get(_snap.SNAP_GUIDE)) {
+      var horizontal = scene.getIn(['guides', 'horizontal']);
+      var vertical = scene.getIn(['guides', 'vertical']);
+      var hValues = horizontal.valueSeq();
+      var vValues = vertical.valueSeq();
+      hValues.forEach(function (hVal) {
+        vValues.forEach(function (vVal) {
+          (0, _snap.addPointSnap)(snapElements, vVal, hVal, 10, 10);
+        });
+      });
+      hValues.forEach(function (hVal) {
+        return (0, _snap.addLineSegmentSnap)(snapElements, 0, hVal, width, hVal, 20, 1);
+      });
+      vValues.forEach(function (vVal) {
+        return (0, _snap.addLineSegmentSnap)(snapElements, vVal, 0, vVal, height, 20, 1);
+      });
+    }
+  });
+}