kitchen-simulator 4.3.8 → 4.4.0

package/es/class/item.js

@@ -1315,6 +1315,7 @@ var Item = /*#__PURE__*/function () {
           glossness: doorStyle.glossness,
           name: doorStyle.name,
           door_style_name: doorStyle.door_style_name,
+          door_style_id: doorStyle.door_style_id,
           texture: doorStyle.texture,
           thumbnail: doorStyle.thumbnail,
           type: doorStyle.type,

package/es/components/viewer2d/viewer2d.js

@@ -1410,9 +1410,10 @@ export default function Viewer2D(_ref, _ref2) {
     detectAutoPan: mode2DetectAutopan(mode),
     onMouseDown: onMouseDown,
     onMouseMove: onMouseMove,
-    onMouseUp: onMouseUp,
-    miniaturePosition: "none",
-    toolbarPosition: "none",
+    onMouseUp: onMouseUp
+    // miniaturePosition="none"
+    // toolbarPosition="none"
+    ,
     detectPinchGesture: false,
     disableDoubleClickZoomWithToolAuto: true,
     ref: Viewer

package/es/components/viewer3d/viewer3d.js

@@ -1189,10 +1189,12 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
       };
       var sendInternalEvent = function sendInternalEvent(evtType, evtElement) {
         var pointArray = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+        var curLayerId = _this2.props.state.scene.selectedLayer;
+        var curLayer = _this2.props.state.scene.getIn(['layers', curLayerId]);
         if (!isEmpty(evtType) && !isEmpty(evtElement)) {
           var _state$get, _this2$props$onIntern, _this2$props;
           var catalog = (_state$get = state.get('catalog')) === null || _state$get === void 0 ? void 0 : _state$get.toJS();
-          var payload = updatePayloadOfInternalEvent(evtElement, layer, catalog, pointArray);
+          var payload = updatePayloadOfInternalEvent(evtElement, curLayer, catalog, pointArray);
           (_this2$props$onIntern = (_this2$props = _this2.props).onInternalEvent) === null || _this2$props$onIntern === void 0 || _this2$props$onIntern.call(_this2$props, {
             type: evtType,
             value: payload

package/es/constants.js

@@ -770,4 +770,12 @@ export var ROOM_SHAPE_TYPE = {
 };
 export var DOORSTYLE_SCOPE_ALL = 'all';
 export var DOORSTYLE_SCOPE_SINGLE = 'single';
-export var DOORSTYLE_SCOPE_MULTIPLE = 'multiple';
+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

package/es/utils/helper.js

@@ -3,7 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { HDRCubeTextureLoader } from 'three/examples/jsm/loaders/HDRCubeTextureLoader.js';
-import { ANIMATE_OBJECT_OPEN_DOOR_ROTATION_UNIT, ANIMATE_STEP_MAX, DECIMAL_PLACES_2, HDR_URLS, MAX_ZOOM_IN_SCALE, MODE_ELEVATION_VIEW, OVERLAP_LINK, OVERLAP_NONE, UNIT_CENTIMETER, ZOOM_VARIABLE } from "../constants";
+import { ANIMATE_OBJECT_OPEN_DOOR_ROTATION_UNIT, ANIMATE_STEP_MAX, DECIMAL_PLACES_2, HDR_URLS, MAX_ZOOM_IN_SCALE, MODE_ELEVATION_VIEW, UNIT_CENTIMETER, ZOOM_VARIABLE } from "../constants";
 import * as Three from 'three';
 import { isWarningItem, returnReplaceableDeepSearchType } from "./../components/viewer2d/utils";
 import { convert } from "./convert-units-lite";

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

@@ -17,6 +17,7 @@ import { SVGLoader } from 'three/addons/loaders/SVGLoader';
 import { getMoldingDataOfScene2 } from "./molding";
 import { Scene, State } from "../models";
 import { calcDistancesFromHoleToNearestOneOrWall } from "./geometry";
+import { computeSkinPanels } from "./skinPanelEngine";
 var PRECISION = 2;
 
 // ---- compatibility: supports old + optimized props shapes ----
@@ -1607,6 +1608,10 @@ function _handleExternalEvent() {
           sceneData = state.scene.toJS(); // get molding data for "ReviewForQuote"
           currentTexture = layer.doorStyle !== null || layer.doorStyle !== undefined ? layer.doorStyle : props.state.doorStyle.toJS();
           sceneData.layers[layerId].moldingData = getMoldingDataOfScene2(layer, props.catalog, currentTexture);
+
+          // get skin panel data
+          sceneData.layers[layerId].skinPanelData = computeSkinPanels(layer);
+
           // send scene object from 3DTool to HostApp using internalEvent
           (_props$onInternalEven3 = props.onInternalEvent) === null || _props$onInternalEven3 === void 0 || _props$onInternalEven3.call(props, {
             type: INTERNAL_EVENT_SYNC_SCENE,

package/es/utils/molding.js

@@ -5,6 +5,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+import { Map } from 'immutable';
 import { BASE_CABINET_LAYOUTPOS, BOTTOM_MOLDING_LOCATION, EPSILON, ITEM_TYPE, MIDDLE_MOLDING_LOCATION, MOLDING_LOCATIONS, OVERLAP_INCLUDED, OVERLAP_LINK, OVERLAP_SAME, OVERLAP_SOME, TALL_CABINET_LAYOUTPOS, TOE_KICK_MOLDING, TOP_MOLDING_LOCATION, WALL_CABINET_LAYOUTPOS } from "../constants";
 import * as Three from 'three';
 import { convert } from "./convert-units-lite";
@@ -975,7 +976,7 @@ export function getMoldingDataOfScene2(layer, catalog, doorStyle) {
           MGlines === null || MGlines === void 0 || MGlines.forEach(function (line) {
             return moldingLines.push({
               molding: _objectSpread({}, molding),
-              doorStyle: item.doorStyle.hasOwnProperty('id') ? item.doorStyle : !isEmpty(item.doorStyle) && item.doorStyle.toJS(),
+              doorStyle: !isEmpty(item.doorStyle) && Map.isMap(item.doorStyle) ? item.doorStyle.toJS() : item.doorStyle,
               line: line,
               z: lineZ,
               parentId: parentId,
@@ -997,7 +998,7 @@ export function getMoldingDataOfScene2(layer, catalog, doorStyle) {
               category: 'molding',
               type: 'cabinet'
             },
-            doorStyle: item.doorStyle.hasOwnProperty('id') ? item.doorStyle : !isEmpty(item.doorStyle) && item.doorStyle.toJS(),
+            doorStyle: !isEmpty(item.doorStyle) && Map.isMap(item.doorStyle) ? item.doorStyle.toJS() : item.doorStyle,
             line: line,
             z: z,
             parentId: parentId,
@@ -1089,7 +1090,7 @@ export function getMoldingDataOfScene2(layer, catalog, doorStyle) {
   });
   // console.log('moldingLines: ', moldingLines);
 
-  // make molding data with sorting molding & doorStyle
+  // make molding data with grouping molding & doorStyle
   var _loop0 = function _loop0() {
     var ml = moldingLines[k];
     var mlLength = ml.molding.name === TOE_KICK_MOLDING ? ml.inchWidth : convert(GeometryUtils.verticesDistance(ml.line[0], ml.line[1])).from('cm').to('in');

package/es/utils/skinPanelEngine.js

@@ -0,0 +1,322 @@
+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 { buildRectFromLines, getAllLines, pointsDistance, relationshipOfTwoOverlappedLines, rotatePointAroundPoint } from "./geometry";
+import { MathUtils } from "./export";
+import { convert } from "./convert-units-lite";
+import { isEmpty } from "./helper";
+function toCm(item, prop) {
+  var unit = item.properties.get(prop).get('_unit') || 'cm';
+  var value = item.properties.get(prop).get('_length');
+  return convert(value).from(unit).to('cm');
+}
+function toIn(cmValue) {
+  return MathUtils.toFixedFloat(convert(cmValue).from('cm').to('in'), 1);
+}
+function rotateCorner(pos, item, width, depth) {
+  return rotatePointAroundPoint(pos[0] * width / 2 + item.x, pos[1] * depth / 2 + item.y, item.x, item.y, item.rotation);
+}
+export function getSideFaces(item, layer) {
+  var sideFaces = [];
+  if (isEmpty(item)) return sideFaces;
+  var vertexLines = getAllLines(layer);
+  var rectLines = 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 = [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
+    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(relationshipOfTwoOverlappedLines(srcLine, destLine1).result) || overlapList.includes(relationshipOfTwoOverlappedLines(srcLine, destLine2).result)) {
+        isSnappedToWall = true;
+        break;
+      }
+    }
+    if (!isSnappedToWall) {
+      var depthInch = toIn(pointsDistance(srcLine.x1, srcLine.y1, srcLine.x2, srcLine.y2));
+      var heightInch = toIn(heightCm);
+      var skinPanelSKU = 'unknown';
+      switch (item.layoutpos) {
+        case BASE_CABINET_LAYOUTPOS:
+          skinPanelSKU = 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;
+          break;
+        case TALL_CABINET_LAYOUTPOS:
+          skinPanelSKU = 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
+        skinPanelSKU: skinPanelSKU,
+        itemInfo: item.toJS()
+      });
+    }
+  }
+  return sideFaces;
+}
+function collectLayerItems(layer) {
+  var _layer$items;
+  var skinLayouts = new Set([BASE_CABINET_LAYOUTPOS, WALL_CABINET_LAYOUTPOS, TALL_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;
+}
+function filterFacesBlockedByFaces(sourceFaces, blockingFaces) {
+  var overlapList = [OVERLAP_INCLUDED, OVERLAP_SAME];
+  var removeIdxs = [];
+  for (var i = 0; i < sourceFaces.length; i++) {
+    var iFace = sourceFaces[i];
+    for (var j = 0; j < blockingFaces.length; j++) {
+      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) {
+          removeIdxs.push(i);
+          break;
+        }
+      }
+    }
+  }
+  return sourceFaces.filter(function (face, idx) {
+    return !removeIdxs.includes(idx);
+  });
+}
+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(_toConsumableArray(horizontalGrouped), _toConsumableArray(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 !== 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 !== BASE_CABINET_LAYOUTPOS || Math.abs(iFace.zBottom - jFace.zBottom) > EPSILON || Math.abs(iFace.zTop - jFace.zTop) > EPSILON) continue;
+      var relationship = relationshipOfTwoOverlappedLines(iFace.sectionLine, jFace.sectionLine);
+      if (relationship.result === 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
+          skinPanelSKU: 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 !== 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 !== WALL_CABINET_LAYOUTPOS) continue;
+      var verticallyTouching = Math.abs(iFace.zBottom - jFace.zTop) < EPSILON || Math.abs(iFace.zTop - jFace.zBottom) < EPSILON;
+      var horizontallySame = relationshipOfTwoOverlappedLines(iFace.sectionLine, jFace.sectionLine).result === 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
+          skinPanelSKU: 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 [SKIN_SKU_BSV_24, SKIN_SKU_BSV_24, SKIN_SKU_WSV_2442];
+  }
+
+  // fallback
+  return [SKIN_SKU_USV245325];
+}
+
+/**
+ * Converts a face → list of SKUs
+ */
+function resolveSkinPanelSKU(face) {
+  var layout = face.itemInfo.layoutpos;
+  if (layout === TALL_CABINET_LAYOUTPOS) {
+    return resolveTallCabinetBundle(face);
+  }
+  return [face.skinPanelSKU];
+}
+
+/**
+ * Make skin panel data with grouping skinPanelSKU & doorStyle
+ */
+function buildSkinPanelData(faces) {
+  var result = [];
+  var _loop = function _loop() {
+    var sf = faces[i];
+    var skus = resolveSkinPanelSKU(sf);
+    var _iterator = _createForOfIteratorHelper(skus),
+      _step;
+    try {
+      var _loop2 = function _loop2() {
+        var sku = _step.value;
+        var idx = result.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);
+        });
+        if (idx < 0) {
+          var _sf$itemInfo$doorStyl, _sf$itemInfo2, _sf$itemInfo$doorStyl2, _sf$itemInfo3;
+          result.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
+          });
+        } else {
+          result[idx].quantity += 1;
+        }
+      };
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        _loop2();
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+  };
+  for (var i = 0; i < faces.length; i++) {
+    _loop();
+  }
+  return result;
+}
+export function computeSkinPanels(layer) {
+  // Get candidate skin panel items and other items
+  var _collectLayerItems = collectLayerItems(layer),
+    skinPanelItems = _collectLayerItems.skinPanelItems,
+    otherItems = _collectLayerItems.otherItems;
+
+  // Get all skin face list of [skinPanelItems] & [otherItems]
+  var skinFaces = collectFaces(skinPanelItems, 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(_toConsumableArray(remainingFaces), _toConsumableArray(groupedFaces));
+  return buildSkinPanelData(finalFaces);
+}

package/lib/class/item.js

@@ -1322,6 +1322,7 @@ var Item = exports["default"] = /*#__PURE__*/function () {
           glossness: doorStyle.glossness,
           name: doorStyle.name,
           door_style_name: doorStyle.door_style_name,
+          door_style_id: doorStyle.door_style_id,
           texture: doorStyle.texture,
           thumbnail: doorStyle.thumbnail,
           type: doorStyle.type,

package/lib/components/viewer2d/viewer2d.js

@@ -1419,9 +1419,10 @@ function Viewer2D(_ref, _ref2) {
     detectAutoPan: mode2DetectAutopan(mode),
     onMouseDown: onMouseDown,
     onMouseMove: onMouseMove,
-    onMouseUp: onMouseUp,
-    miniaturePosition: "none",
-    toolbarPosition: "none",
+    onMouseUp: onMouseUp
+    // miniaturePosition="none"
+    // toolbarPosition="none"
+    ,
     detectPinchGesture: false,
     disableDoubleClickZoomWithToolAuto: true,
     ref: Viewer

package/lib/components/viewer3d/viewer3d.js

@@ -1196,10 +1196,12 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
       };
       var sendInternalEvent = function sendInternalEvent(evtType, evtElement) {
         var pointArray = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+        var curLayerId = _this2.props.state.scene.selectedLayer;
+        var curLayer = _this2.props.state.scene.getIn(['layers', curLayerId]);
         if (!(0, _helper.isEmpty)(evtType) && !(0, _helper.isEmpty)(evtElement)) {
           var _state$get, _this2$props$onIntern, _this2$props;
           var catalog = (_state$get = state.get('catalog')) === null || _state$get === void 0 ? void 0 : _state$get.toJS();
-          var payload = (0, _helper.updatePayloadOfInternalEvent)(evtElement, layer, catalog, pointArray);
+          var payload = (0, _helper.updatePayloadOfInternalEvent)(evtElement, curLayer, catalog, pointArray);
           (_this2$props$onIntern = (_this2$props = _this2.props).onInternalEvent) === null || _this2$props$onIntern === void 0 || _this2$props$onIntern.call(_this2$props, {
             type: evtType,
             value: payload

package/lib/constants.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.END_DRAWING_LINE = 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_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_VERTEX = 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 = void 0;
 exports.SET_BACKSPLASH_VISIBLE = 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 = void 0;
-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 = 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 = 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 = void 0;
+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.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 = 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 = void 0;
 //API server
 // export const API_SERVER = 'http://localhost:3000/';
 // ACTIONS project
@@ -780,4 +780,12 @@ 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';
+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

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

@@ -23,6 +23,7 @@ var _SVGLoader = require("three/addons/loaders/SVGLoader");
 var _molding = require("./molding");
 var _models = require("../models");
 var _geometry = require("./geometry");
+var _skinPanelEngine = require("./skinPanelEngine");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var PRECISION = 2;
@@ -1615,6 +1616,10 @@ function _handleExternalEvent() {
           sceneData = state.scene.toJS(); // get molding data for "ReviewForQuote"
           currentTexture = layer.doorStyle !== null || layer.doorStyle !== undefined ? layer.doorStyle : props.state.doorStyle.toJS();
           sceneData.layers[layerId].moldingData = (0, _molding.getMoldingDataOfScene2)(layer, props.catalog, currentTexture);
+
+          // get skin panel data
+          sceneData.layers[layerId].skinPanelData = (0, _skinPanelEngine.computeSkinPanels)(layer);
+
           // send scene object from 3DTool to HostApp using internalEvent
           (_props$onInternalEven3 = props.onInternalEvent) === null || _props$onInternalEven3 === void 0 || _props$onInternalEven3.call(props, {
             type: _constants.INTERNAL_EVENT_SYNC_SCENE,

package/lib/utils/molding.js

@@ -28,6 +28,7 @@ exports.sortItemsByDistance = sortItemsByDistance;
 exports.tryMergeMDItem = tryMergeMDItem;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _immutable = require("immutable");
 var _constants = require("../constants");
 var Three = _interopRequireWildcard(require("three"));
 var _convertUnitsLite = require("./convert-units-lite");
@@ -1004,7 +1005,7 @@ function getMoldingDataOfScene2(layer, catalog, doorStyle) {
           MGlines === null || MGlines === void 0 || MGlines.forEach(function (line) {
             return moldingLines.push({
               molding: _objectSpread({}, molding),
-              doorStyle: item.doorStyle.hasOwnProperty('id') ? item.doorStyle : !(0, _helper.isEmpty)(item.doorStyle) && item.doorStyle.toJS(),
+              doorStyle: !(0, _helper.isEmpty)(item.doorStyle) && _immutable.Map.isMap(item.doorStyle) ? item.doorStyle.toJS() : item.doorStyle,
               line: line,
               z: lineZ,
               parentId: parentId,
@@ -1026,7 +1027,7 @@ function getMoldingDataOfScene2(layer, catalog, doorStyle) {
               category: 'molding',
               type: 'cabinet'
             },
-            doorStyle: item.doorStyle.hasOwnProperty('id') ? item.doorStyle : !(0, _helper.isEmpty)(item.doorStyle) && item.doorStyle.toJS(),
+            doorStyle: !(0, _helper.isEmpty)(item.doorStyle) && _immutable.Map.isMap(item.doorStyle) ? item.doorStyle.toJS() : item.doorStyle,
             line: line,
             z: z,
             parentId: parentId,
@@ -1118,7 +1119,7 @@ function getMoldingDataOfScene2(layer, catalog, doorStyle) {
   });
   // console.log('moldingLines: ', moldingLines);
 
-  // make molding data with sorting molding & doorStyle
+  // make molding data with grouping molding & doorStyle
   var _loop0 = function _loop0() {
     var ml = moldingLines[k];
     var mlLength = ml.molding.name === _constants.TOE_KICK_MOLDING ? ml.inchWidth : (0, _convertUnitsLite.convert)(_export.GeometryUtils.verticesDistance(ml.line[0], ml.line[1])).from('cm').to('in');

package/lib/utils/skinPanelEngine.js

@@ -0,0 +1,330 @@
+"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");
+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 || i === 2) continue; // only left & right
+    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:
+          skinPanelSKU = _constants.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;
+          break;
+        case _constants.TALL_CABINET_LAYOUTPOS:
+          skinPanelSKU = _constants.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
+        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]);
+  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;
+}
+function filterFacesBlockedByFaces(sourceFaces, blockingFaces) {
+  var overlapList = [_constants.OVERLAP_INCLUDED, _constants.OVERLAP_SAME];
+  var removeIdxs = [];
+  for (var i = 0; i < sourceFaces.length; i++) {
+    var iFace = sourceFaces[i];
+    for (var j = 0; j < blockingFaces.length; j++) {
+      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) {
+          removeIdxs.push(i);
+          break;
+        }
+      }
+    }
+  }
+  return sourceFaces.filter(function (face, idx) {
+    return !removeIdxs.includes(idx);
+  });
+}
+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
+          skinPanelSKU: _constants.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
+          skinPanelSKU: _constants.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 [_constants.SKIN_SKU_BSV_24, _constants.SKIN_SKU_BSV_24, _constants.SKIN_SKU_WSV_2442];
+  }
+
+  // fallback
+  return [_constants.SKIN_SKU_USV245325];
+}
+
+/**
+ * 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 result = [];
+  var _loop = function _loop() {
+    var sf = faces[i];
+    var skus = resolveSkinPanelSKU(sf);
+    var _iterator = _createForOfIteratorHelper(skus),
+      _step;
+    try {
+      var _loop2 = function _loop2() {
+        var sku = _step.value;
+        var idx = result.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);
+        });
+        if (idx < 0) {
+          var _sf$itemInfo$doorStyl, _sf$itemInfo2, _sf$itemInfo$doorStyl2, _sf$itemInfo3;
+          result.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
+          });
+        } else {
+          result[idx].quantity += 1;
+        }
+      };
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        _loop2();
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+  };
+  for (var i = 0; i < faces.length; i++) {
+    _loop();
+  }
+  return result;
+}
+function computeSkinPanels(layer) {
+  // Get candidate skin panel items and other items
+  var _collectLayerItems = collectLayerItems(layer),
+    skinPanelItems = _collectLayerItems.skinPanelItems,
+    otherItems = _collectLayerItems.otherItems;
+
+  // Get all skin face list of [skinPanelItems] & [otherItems]
+  var skinFaces = collectFaces(skinPanelItems, 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/package.json

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