kitchen-simulator 3.0.1 → 3.1.0-alpha.12

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

@@ -5,7 +5,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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 _regeneratorRuntime from "@babel/runtime/regenerator";
 import { Map } from 'immutable';
-import { EXTERNAL_EVENT_ADD_WALL, EXTERNAL_EVENT_TOGGLE_TO_3D, EXTERNAL_EVENT_TOGGLE_TO_2D, EXTERNAL_EVENT_TOGGLE_TO_ELEVATION, EXTERNAL_EVENT_MOVE_PAN, MODE_IDLE, MODE_2D_PAN, EXTERNAL_EVENT_ADD_ITEM, ARRAY_3D_MODES, MODE_IDLE_3D, MODE_ELEVATION_VIEW, MODE_DRAWING_LINE, TOP, BOTTOM, LEFT, RIGHT, EXTERNAL_EVENT_NEW_PROJECT, EXTERNAL_EVENT_CHANGE_DOORSTYLE, EXTERNAL_EVENT_ADD_ROOM_SHAPE, EXTERNAL_EVENT_ZOOM_IN, EXTERNAL_EVENT_ZOOM_OUT, EXTERNAL_EVENT_UNDO, EXTERNAL_EVENT_REDO, EXTERNAL_EVENT_SET_MOLDING, EXTERNAL_EVENT_PROJECT_SETTING, PROJECT_SETTING_OPTION, EXTERNAL_EVENT_SYNC_SCENE, INTERNAL_EVENT_SYNC_SCENE, EXTERNAL_EVENT_UPDATE_ATTRIBUTE, ATT_ITEM_POS, ATT_LINE_LENGTH, ATT_VERTEXT_ONE, ATT_VERTEXT_TWO, ATT_HOLE_OFFSET_A, ATT_HOLE_OFFSET_B, UNIT_CENTIMETER, UNIT_INCH, EXTERNAL_EVENT_UPDATE_PROPERTY, PROP_FLIP_DOOR_HANDLE, PROP_OPEN_DOORS, EXTERNAL_EVENT_LOAD_PROJECT, INTERNAL_EVENT_ITEMS_CATALOG, EXTERNAL_EVENT_ADD_HOLE, EXTERNAL_EVENT_CENTERING_2D, EXTERNAL_EVENT_DUPLICATE_ELEMENT, EXTERNAL_EVENT_DELETE_ELEMENT, ELEMENT_HOLE, ELEMENT_ITEM, ELEMENT_LINE, EXTERNAL_EVENT_REPLACE_CABINET, FINISHING_TYPE, EXTERNAL_EVENT_SET_FINISHING } from "../constants";
+import { EXTERNAL_EVENT_ADD_WALL, EXTERNAL_EVENT_TOGGLE_TO_3D, EXTERNAL_EVENT_TOGGLE_TO_2D, EXTERNAL_EVENT_TOGGLE_TO_ELEVATION, EXTERNAL_EVENT_MOVE_PAN, MODE_IDLE, MODE_2D_PAN, EXTERNAL_EVENT_ADD_ITEM, ARRAY_3D_MODES, MODE_IDLE_3D, MODE_ELEVATION_VIEW, MODE_DRAWING_LINE, TOP, BOTTOM, LEFT, RIGHT, EXTERNAL_EVENT_NEW_PROJECT, EXTERNAL_EVENT_CHANGE_DOORSTYLE, EXTERNAL_EVENT_ADD_ROOM_SHAPE, EXTERNAL_EVENT_ZOOM_IN, EXTERNAL_EVENT_ZOOM_OUT, EXTERNAL_EVENT_UNDO, EXTERNAL_EVENT_REDO, EXTERNAL_EVENT_SET_MOLDING, EXTERNAL_EVENT_PROJECT_SETTING, PROJECT_SETTING_OPTION, EXTERNAL_EVENT_SYNC_SCENE, INTERNAL_EVENT_SYNC_SCENE, EXTERNAL_EVENT_UPDATE_ATTRIBUTE, ATT_ITEM_POS, ATT_LINE_LENGTH, ATT_VERTEXT_ONE, ATT_VERTEXT_TWO, ATT_HOLE_OFFSET_A, ATT_HOLE_OFFSET_B, UNIT_CENTIMETER, UNIT_INCH, EXTERNAL_EVENT_UPDATE_PROPERTY, PROP_FLIP_DOOR_HANDLE, PROP_OPEN_DOORS, EXTERNAL_EVENT_LOAD_PROJECT, INTERNAL_EVENT_ITEMS_CATALOG, EXTERNAL_EVENT_ADD_HOLE, EXTERNAL_EVENT_CENTERING_2D, EXTERNAL_EVENT_DUPLICATE_ELEMENT, EXTERNAL_EVENT_DELETE_ELEMENT, ELEMENT_HOLE, ELEMENT_ITEM, ELEMENT_LINE, EXTERNAL_EVENT_REPLACE_CABINET, FINISHING_TYPE, EXTERNAL_EVENT_SET_FINISHING, EXTERNAL_EVENT_ROTATE_PAN } from "../constants";
 import { isEmpty, updateViwer2D, centering2D } from "./helper";
 import exporter from "../catalog/utils/exporter";
 import { render2DItem, render3DItem, render3DApplianceItem, render3DLightingItem } from "../catalog/utils/item-loader";
@@ -13,6 +13,7 @@ import { convert } from "./convert-units-lite";
 import { GeometryUtils, MathUtils } from "./export";
 import { returnReplaceableDeepSearchType } from "../components/viewer2d/utils";
 import { SVGLoader } from 'three/addons/loaders/SVGLoader';
+import { getMoldingDataOfScene } from "./molding";
 var PRECISION = 2;
 function loadJSON(_x) {
   return _loadJSON.apply(this, arguments);
@@ -110,10 +111,13 @@ function _parseTempPlaceholdersFromCabinetPayload() {
                 tempPlaceholders.map(function (element) {
                   var sink_match = element.name.match(/\d_(sink_[^LR12]*)(_[LR12])?$/);
                   if (sink_match && sink_match.length >= 2) {
-                    var _cabinetPayload$struc3;
+                    var _process$env$API_URL, _cabinetPayload$struc3;
                     tempData['sink'] = tempData['sink'] || [];
                     tempData['sink'].push(element.name);
-                    var sink_url = process.env.API_URL + "/uploads/assets/default/".concat(sink_match[1], ".gltf");
+                    var sink_url = (_process$env$API_URL = process.env.API_URL) !== null && _process$env$API_URL !== void 0 ? _process$env$API_URL :
+                    // server url from 3DTool env
+                    import.meta.env.VITE_APP_API_URL + // server url from Host env
+                    "/uploads/assets/default/".concat(sink_match[1], ".gltf");
                     if (cabinetPayload !== null && cabinetPayload !== void 0 && (_cabinetPayload$struc3 = cabinetPayload.structure_json) !== null && _cabinetPayload$struc3 !== void 0 && (_cabinetPayload$struc3 = _cabinetPayload$struc3.tempPlaceholders[0]) !== null && _cabinetPayload$struc3 !== void 0 && _cabinetPayload$struc3.structure) cabinetPayload.structure_json.tempPlaceholders[0].structure.sink = sink_url;
                   } else if (temp.some(function (felement) {
                     return felement.name.includes('base_drawer');
@@ -663,9 +667,9 @@ function initPropData(element, catalog) {
   }
   return new Map(mapped);
 }
-function updateAttributeOfSelectedElement(element, attrPayload, state, layer, projectActions) {
+function updateAttributeOfSelectedElement(element, attrPayload, state, layer, catalog, projectActions) {
   var _attributesFormData;
-  var callback = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : null;
+  var callback = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : null;
   var attributesFormData = initAttrData(element, layer, state);
   var value = attrPayload.value;
   var attributeName = attrPayload.attributeName;
@@ -718,6 +722,10 @@ function updateAttributeOfSelectedElement(element, attrPayload, state, layer, pr
           attributesFormData = attributesFormData.set('y', yVal);
         } else {
           attributesFormData = attributesFormData.set(attributeName, value);
+          // update the distances from wall
+          var _GeometryUtils$calcDi = GeometryUtils.calcDistancesFromItemToWalls(attributesFormData, layer),
+            PointArray = _GeometryUtils$calcDi.PointArray;
+          attributesFormData = attributesFormData.set('distArray', PointArray);
         }
         break;
       }
@@ -992,53 +1000,87 @@ function setFinishing(props, state, payload) {
       break;
   }
 }
-function movePan2D3D(props, payload, state) {
-  var moveType = payload.moveType,
-    moveValue = payload.moveValue;
-  var value = state.getIn(['viewer2D']).toJS();
-  if (state.mode === MODE_IDLE) {
-    switch (moveType) {
-      case TOP:
-        value.f -= moveValue;
-        break;
-      case BOTTOM:
-        value.f += moveValue;
-        break;
-      case RIGHT:
-        value.e += moveValue;
-        break;
-      case LEFT:
-        value.e -= moveValue;
-        break;
+function moveAndRotatePan2D3D(eventType, props, payload, state) {
+  if (eventType === EXTERNAL_EVENT_MOVE_PAN) {
+    var moveType = payload.moveType,
+      moveValue = payload.moveValue;
+    var value = state.getIn(['viewer2D']).toJS();
+    if (state.mode === MODE_IDLE) {
+      switch (moveType) {
+        case TOP:
+          value.f -= moveValue;
+          break;
+        case BOTTOM:
+          value.f += moveValue;
+          break;
+        case RIGHT:
+          value.e += moveValue;
+          break;
+        case LEFT:
+          value.e -= moveValue;
+          break;
+      }
+      updateViwer2D(value, props.viewer2DActions);
+    } else if (state.mode === MODE_IDLE_3D) {
+      switch (moveType) {
+        case TOP:
+          window.interval = setTimeout(function () {
+            window.tDKeyDown({
+              keyCode: 38
+            });
+          }, 50);
+          break;
+        case BOTTOM:
+          window.interval = setTimeout(function () {
+            window.tDKeyDown({
+              keyCode: 40
+            });
+          }, 50);
+          break;
+        case RIGHT:
+          window.interval = setTimeout(function () {
+            window.tDKeyDown({
+              keyCode: 37
+            });
+          }, 50);
+          break;
+        case LEFT:
+          window.interval = setTimeout(function () {
+            window.tDKeyDown({
+              keyCode: 39
+            });
+          }, 50);
+          break;
+      }
     }
-    updateViwer2D(value, props.viewer2DActions);
-  } else if (state.mode === MODE_IDLE_3D) {
-    switch (moveType) {
+  } else if (eventType === EXTERNAL_EVENT_ROTATE_PAN) {
+    var rotateType = payload.rotateType;
+    switch (rotateType) {
       case TOP:
         window.interval = setTimeout(function () {
-          window.tDKeyDown({
-            keyCode: 38
+          window.SPKeyDown({
+            keyCode: 87
           });
         }, 50);
         break;
       case BOTTOM:
         window.interval = setTimeout(function () {
-          window.tDKeyDown({
-            keyCode: 40
+          window.SPKeyDown({
+            keyCode: 83
           });
         }, 50);
         break;
       case RIGHT:
         window.interval = setTimeout(function () {
-          window.tDKeyDown({
-            keyCode: 39
+          window.SPKeyDown({
+            keyCode: 68
           });
         }, 50);
         break;
       case LEFT:
         window.interval = setTimeout(function () {
-          window.tDKeyDown({
-            keyCode: 37
+          window.SPKeyDown({
+            keyCode: 65
           });
         }, 50);
         break;
@@ -1049,17 +1091,19 @@ export function handleExternalEvent(_x10) {
   return _handleExternalEvent.apply(this, arguments);
 }
 function _handleExternalEvent() {
-  _handleExternalEvent = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee8(props) {
+  _handleExternalEvent = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee9(props) {
     var _evt$payload3, _evt$payload4;
-    var evt, state, _evt$payload, cdsItems, itemKeys, _loop3, i, _props$onInternalEven, sLineCnt, element, _state$viewer2D, _evt$payload$initialP, mouseX, mouseY, v2d, vPosX, vPosY, layerID, defaulTitle, _evt$payload5, doorStyle, itemCDS, isAll, _evt$payload6, roomShapeType, width, height, _doorStyle, value, _value, _evt$payload7, moldingInfo, isGlobal, distElement, _distElement, _evt$payload8, option, _value2, layerId, layer, _layer$getIn, selectedLines, selectedHoles, selectedItems, _i2, _i3, _i4, _evt$payload9, _evt$payload0, _evt$payload1, _evt$payload10, _layerID, _layer, orginalItemInfo, originalItem, originalItemPos, replaceItem, _props$onInternalEven2, _t5;
-    return _regeneratorRuntime.wrap(function (_context9) {
-      while (1) switch (_context9.prev = _context9.next) {
+    var evt, state, layerId, layer, _evt$payload, cdsItems, itemKeys, _loop3, i, _props$onInternalEven, sLineCnt, _state$getIn, element, cds, _cds$find, currentCdsId, _state$viewer2D, _evt$payload$initialP, mouseX, mouseY, v2d, vPosX, vPosY, layerID, defaulTitle, _Object$keys, _evt$payload5, doorStyle, itemCDS, isAll, _layerId, _cdsItems, allItems, selectedItemId, _itemKeys, _loop4, _i2, _props$onInternalEven2, _evt$payload6, roomShapeType, width, height, _doorStyle, value, _value, _evt$payload7, moldingInfo, isGlobal, distElement, _distElement, _evt$payload8, option, _value2, _layerId2, _layer, _layer$getIn, selectedLines, selectedHoles, selectedItems, _i4, _i5, _i6, _evt$payload9, _evt$payload0, _evt$payload1, _evt$payload10, _layerID, _layer2, orginalItemInfo, originalItem, originalItemPos, replaceItem, _props$onInternalEven3, sceneData, currentTexture, _t5, _t6;
+    return _regeneratorRuntime.wrap(function (_context1) {
+      while (1) switch (_context1.prev = _context1.next) {
         case 0:
           // console.log('***external event****', props);
           evt = props.externalEvent;
           state = props.state.get('KitchenConfigurator');
+          layerId = state.getIn(['scene', 'selectedLayer']);
+          layer = state.getIn(['scene', 'layers', layerId]);
           _t5 = evt === null || evt === void 0 ? void 0 : evt.type;
-          _context9.next = _t5 === EXTERNAL_EVENT_LOAD_PROJECT ? 1 : _t5 === EXTERNAL_EVENT_TOGGLE_TO_3D ? 5 : _t5 === EXTERNAL_EVENT_TOGGLE_TO_2D ? 6 : _t5 === EXTERNAL_EVENT_TOGGLE_TO_ELEVATION ? 7 : _t5 === EXTERNAL_EVENT_ADD_WALL ? 8 : _t5 === EXTERNAL_EVENT_ADD_ITEM ? 9 : _t5 === EXTERNAL_EVENT_ADD_HOLE ? 12 : _t5 === EXTERNAL_EVENT_MOVE_PAN ? 13 : _t5 === EXTERNAL_EVENT_NEW_PROJECT ? 14 : _t5 === EXTERNAL_EVENT_CHANGE_DOORSTYLE ? 15 : _t5 === EXTERNAL_EVENT_ADD_ROOM_SHAPE ? 16 : _t5 === EXTERNAL_EVENT_ZOOM_IN ? 17 : _t5 === EXTERNAL_EVENT_ZOOM_OUT ? 18 : _t5 === EXTERNAL_EVENT_CENTERING_2D ? 19 : _t5 === EXTERNAL_EVENT_UNDO ? 20 : _t5 === EXTERNAL_EVENT_REDO ? 21 : _t5 === EXTERNAL_EVENT_SET_MOLDING ? 22 : _t5 === EXTERNAL_EVENT_DUPLICATE_ELEMENT ? 24 : _t5 === EXTERNAL_EVENT_DELETE_ELEMENT ? 25 : _t5 === EXTERNAL_EVENT_PROJECT_SETTING ? 26 : _t5 === EXTERNAL_EVENT_UPDATE_ATTRIBUTE ? 27 : _t5 === EXTERNAL_EVENT_UPDATE_PROPERTY ? 27 : _t5 === EXTERNAL_EVENT_REPLACE_CABINET ? 28 : _t5 === EXTERNAL_EVENT_SET_FINISHING ? 30 : _t5 === EXTERNAL_EVENT_SYNC_SCENE ? 31 : 32;
+          _context1.next = _t5 === EXTERNAL_EVENT_LOAD_PROJECT ? 1 : _t5 === EXTERNAL_EVENT_TOGGLE_TO_3D ? 5 : _t5 === EXTERNAL_EVENT_TOGGLE_TO_2D ? 6 : _t5 === EXTERNAL_EVENT_TOGGLE_TO_ELEVATION ? 7 : _t5 === EXTERNAL_EVENT_ADD_WALL ? 8 : _t5 === EXTERNAL_EVENT_ADD_ITEM ? 9 : _t5 === EXTERNAL_EVENT_ADD_HOLE ? 12 : _t5 === EXTERNAL_EVENT_ROTATE_PAN ? 13 : _t5 === EXTERNAL_EVENT_MOVE_PAN ? 13 : _t5 === EXTERNAL_EVENT_NEW_PROJECT ? 14 : _t5 === EXTERNAL_EVENT_CHANGE_DOORSTYLE ? 15 : _t5 === EXTERNAL_EVENT_ADD_ROOM_SHAPE ? 19 : _t5 === EXTERNAL_EVENT_ZOOM_IN ? 20 : _t5 === EXTERNAL_EVENT_ZOOM_OUT ? 21 : _t5 === EXTERNAL_EVENT_CENTERING_2D ? 22 : _t5 === EXTERNAL_EVENT_UNDO ? 23 : _t5 === EXTERNAL_EVENT_REDO ? 24 : _t5 === EXTERNAL_EVENT_SET_MOLDING ? 25 : _t5 === EXTERNAL_EVENT_DUPLICATE_ELEMENT ? 27 : _t5 === EXTERNAL_EVENT_DELETE_ELEMENT ? 28 : _t5 === EXTERNAL_EVENT_PROJECT_SETTING ? 29 : _t5 === EXTERNAL_EVENT_UPDATE_ATTRIBUTE ? 38 : _t5 === EXTERNAL_EVENT_UPDATE_PROPERTY ? 38 : _t5 === EXTERNAL_EVENT_REPLACE_CABINET ? 39 : _t5 === EXTERNAL_EVENT_SET_FINISHING ? 41 : _t5 === EXTERNAL_EVENT_SYNC_SCENE ? 42 : 43;
           break;
         case 1:
           // prepare item data request
@@ -1071,10 +1115,14 @@ function _handleExternalEvent() {
             return _regeneratorRuntime.wrap(function (_context8) {
               while (1) switch (_context8.prev = _context8.next) {
                 case 0:
-                  it = evt === null || evt === void 0 || (_evt$payload2 = evt.payload) === null || _evt$payload2 === void 0 || (_evt$payload2 = _evt$payload2.layers['layer-1']) === null || _evt$payload2 === void 0 ? void 0 : _evt$payload2.items[itemKeys[i]];
+                  it = evt === null || evt === void 0 || (_evt$payload2 = evt.payload) === null || _evt$payload2 === void 0 || (_evt$payload2 = _evt$payload2.layers['layer-1']) === null || _evt$payload2 === void 0 ? void 0 : _evt$payload2.items[itemKeys[i]]; //////// check altitude of item property and change length from _length (convert length from 'in' fo 'cm')
+                  if (it.properties.altitude.length !== convert(it.properties.altitude._length).from('in').to('cm')) {
+                    it.properties.altitude.length = convert(it.properties.altitude._length).from('in').to('cm');
+                  }
+                  /////////
                   if (!cdsItems.some(function (v) {
                     var _it$doorStyle;
-                    return it.itemId === v.itemId && it.name === v.name && ((_it$doorStyle = it.doorStyle) === null || _it$doorStyle === void 0 || (_it$doorStyle = _it$doorStyle.doorStyles) === null || _it$doorStyle === void 0 ? void 0 : _it$doorStyle.cabinet_door_style_id) === v.cdsId;
+                    return it.itemID === v.itemID && it.name === v.name && ((_it$doorStyle = it.doorStyle) === null || _it$doorStyle === void 0 || (_it$doorStyle = _it$doorStyle.doorStyles) === null || _it$doorStyle === void 0 ? void 0 : _it$doorStyle.cabinet_door_style_id) === v.cdsId;
                   })) cdsItems.push({
                     itemID: it.itemID,
                     prototype: it.prototype,
@@ -1093,13 +1141,13 @@ function _handleExternalEvent() {
           i = 0;
         case 2:
           if (!(i < itemKeys.length)) {
-            _context9.next = 4;
+            _context1.next = 4;
             break;
           }
-          return _context9.delegateYield(_loop3(), "t0", 3);
+          return _context1.delegateYield(_loop3(), "t0", 3);
         case 3:
           i++;
-          _context9.next = 2;
+          _context1.next = 2;
           break;
         case 4:
           // request item catalog data to host app
@@ -1140,30 +1188,42 @@ function _handleExternalEvent() {
               };
             }());
           }
-          return _context9.abrupt("continue", 32);
+          return _context1.abrupt("continue", 43);
         case 5:
           props.projectActions.setMode(MODE_IDLE_3D);
-          return _context9.abrupt("continue", 32);
+          return _context1.abrupt("continue", 43);
         case 6:
           props.projectActions.setMode(MODE_IDLE);
-          return _context9.abrupt("continue", 32);
+          return _context1.abrupt("continue", 43);
         case 7:
-          sLineCnt = state.getIn(['scene', 'layers', 'layer-1', 'selected', 'lines']).size;
+          sLineCnt = layer.selected.lines.size;
           if (sLineCnt > 0) props.projectActions.setMode(MODE_ELEVATION_VIEW);
-          return _context9.abrupt("continue", 32);
+          return _context1.abrupt("continue", 43);
         case 8:
           if (state.mode === MODE_IDLE || state.mode === MODE_2D_PAN) props.linesActions.selectToolDrawingLine('wall');else {
             props.projectActions.setMode(MODE_IDLE);
             props.linesActions.selectToolDrawingLine('wall');
           }
-          return _context9.abrupt("continue", 32);
+          return _context1.abrupt("continue", 43);
         case 9:
           if (isEmpty(evt === null || evt === void 0 ? void 0 : evt.payload)) {
-            _context9.next = 11;
+            _context1.next = 11;
             break;
           }
-          element = evt.payload;
-          _context9.next = 10;
+          element = evt.payload; ///// filter the tempPlaceholders using layer-doorstyle-cds
+          cds = (_state$getIn = state.getIn(['scene', 'layers', 'layer-1', 'doorStyle'])) === null || _state$getIn === void 0 ? void 0 : _state$getIn.cds;
+          if (cds) {
+            currentCdsId = (_cds$find = cds.find(function (c) {
+              return c.itemID === element.itemID;
+            })) === null || _cds$find === void 0 ? void 0 : _cds$find.cabinet_door_style_id;
+            if (currentCdsId && element.structure_json.tempPlaceholders.length > 0) {
+              element.structure_json.tempPlaceholders[0] = element.structure_json.tempPlaceholders.find(function (tPlaceholder) {
+                return tPlaceholder.id === currentCdsId;
+              });
+            }
+          }
+          /////
+          _context1.next = 10;
           return addItemToCatalog(element, state, props.catalog, props.projectActions);
         case 10:
           // start drawing item
@@ -1187,97 +1247,190 @@ function _handleExternalEvent() {
           props.projectActions.pushLastSelectedCatalogElementToHistory(element);
           props.projectActions.setIsCabinetDrawing(true);
         case 11:
-          return _context9.abrupt("continue", 32);
+          return _context1.abrupt("continue", 43);
         case 12:
           ARRAY_3D_MODES.includes(state.mode) ? props.holesActions.selectToolDrawingHole3D(evt === null || evt === void 0 || (_evt$payload3 = evt.payload) === null || _evt$payload3 === void 0 ? void 0 : _evt$payload3.holeName) : props.holesActions.selectToolDrawingHole(evt === null || evt === void 0 || (_evt$payload4 = evt.payload) === null || _evt$payload4 === void 0 ? void 0 : _evt$payload4.holeName);
-          return _context9.abrupt("continue", 32);
+          return _context1.abrupt("continue", 43);
         case 13:
-          movePan2D3D(props, evt.payload, state);
-          return _context9.abrupt("continue", 32);
+          moveAndRotatePan2D3D(evt.type, props, evt.payload, state);
+          return _context1.abrupt("continue", 43);
         case 14:
           defaulTitle = 'Untitle';
           props.projectActions.newProject();
           props.projectActions.rename(defaulTitle);
-          return _context9.abrupt("continue", 32);
+          return _context1.abrupt("continue", 43);
         case 15:
-          _evt$payload5 = evt.payload, doorStyle = _evt$payload5.doorStyle, itemCDS = _evt$payload5.itemCDS, isAll = _evt$payload5.isAll;
-          props.itemsActions.setDoorStyle(doorStyle, itemCDS, isAll);
-          return _context9.abrupt("continue", 32);
+          _evt$payload5 = evt.payload, doorStyle = _evt$payload5.doorStyle, itemCDS = _evt$payload5.itemCDS, isAll = _evt$payload5.isAll; // prepare item data request
+          _layerId = state.getIn(['scene', 'selectedLayer']);
+          _cdsItems = [];
+          allItems = state.getIn(['scene', 'layers', _layerId, 'items']).toJS();
+          selectedItemId = state.getIn(['scene', 'layers', _layerId]).selected.items.toJS()[0];
+          _itemKeys = isAll ? (_Object$keys = Object.keys(allItems)) !== null && _Object$keys !== void 0 ? _Object$keys : [] : [selectedItemId];
+          _loop4 = /*#__PURE__*/_regeneratorRuntime.mark(function _loop4() {
+            var _itemCDS$find;
+            var item, cdsId;
+            return _regeneratorRuntime.wrap(function (_context0) {
+              while (1) switch (_context0.prev = _context0.next) {
+                case 0:
+                  item = allItems[_itemKeys[_i2]];
+                  cdsId = (_itemCDS$find = itemCDS.find(function (itCDS) {
+                    return itCDS.itemID === item.itemID;
+                  })) === null || _itemCDS$find === void 0 ? void 0 : _itemCDS$find.cabinet_door_style_id;
+                  if (cdsId && !_cdsItems.some(function (v) {
+                    return item.itemID === v.itemID && item.name === v.name && cdsId === v.cdsId;
+                  })) _cdsItems.push({
+                    itemID: item.itemID,
+                    prototype: item.prototype,
+                    category: item.category,
+                    name: item.name,
+                    type: item.type,
+                    sku_number: item.sku_number,
+                    cdsId: cdsId
+                  });
+                case 1:
+                case "end":
+                  return _context0.stop();
+              }
+            }, _loop4);
+          });
+          _i2 = 0;
         case 16:
+          if (!(_i2 < _itemKeys.length)) {
+            _context1.next = 18;
+            break;
+          }
+          return _context1.delegateYield(_loop4(), "t1", 17);
+        case 17:
+          _i2++;
+          _context1.next = 16;
+          break;
+        case 18:
+          // request item catalog data to host app
+          if (_cdsItems.length > 0) {
+            (_props$onInternalEven2 = props.onInternalEvent) === null || _props$onInternalEven2 === void 0 || _props$onInternalEven2.call(props, {
+              type: INTERNAL_EVENT_ITEMS_CATALOG,
+              value: {
+                cdsItems: _cdsItems
+              }
+            }, /*#__PURE__*/function () {
+              var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee8(result) {
+                var _i3, _result$elements2;
+                return _regeneratorRuntime.wrap(function (_context9) {
+                  while (1) switch (_context9.prev = _context9.next) {
+                    case 0:
+                      _i3 = 0;
+                    case 1:
+                      if (!(_i3 < (result === null || result === void 0 || (_result$elements2 = result.elements) === null || _result$elements2 === void 0 ? void 0 : _result$elements2.length))) {
+                        _context9.next = 3;
+                        break;
+                      }
+                      _context9.next = 2;
+                      return addItemToCatalog(result.elements[_i3], state, props.catalog, props.projectActions);
+                    case 2:
+                      _i3++;
+                      _context9.next = 1;
+                      break;
+                    case 3:
+                      props.itemsActions.setDoorStyle(doorStyle, itemCDS, isAll);
+                    case 4:
+                    case "end":
+                      return _context9.stop();
+                  }
+                }, _callee8);
+              }));
+              return function (_x12) {
+                return _ref3.apply(this, arguments);
+              };
+            }());
+          } else props.itemsActions.setDoorStyle(doorStyle, itemCDS, isAll);
+          return _context1.abrupt("continue", 43);
+        case 19:
           _evt$payload6 = evt.payload, roomShapeType = _evt$payload6.roomShapeType, width = _evt$payload6.width, height = _evt$payload6.height, _doorStyle = _evt$payload6.doorStyle;
           props.projectActions.createRoomWithShape(roomShapeType, width, height, _doorStyle);
-          return _context9.abrupt("continue", 32);
-        case 17:
+          return _context1.abrupt("continue", 43);
+        case 20:
           value = state.getIn(['viewer2D']).toJS();
           value.a += 0.1;
           value.d += 0.1;
           value.e -= value.SVGWidth * 0.1 / 2;
           value.f -= value.SVGHeight * 0.1 / 2;
           updateViwer2D(value, props.viewer2DActions);
-          return _context9.abrupt("continue", 32);
-        case 18:
+          return _context1.abrupt("continue", 43);
+        case 21:
           _value = state.getIn(['viewer2D']).toJS();
           _value.a -= 0.1;
           _value.d -= 0.1;
           _value.e += _value.SVGWidth * 0.1 / 2;
           _value.f += _value.SVGHeight * 0.1 / 2;
           updateViwer2D(_value, props.viewer2DActions);
-          return _context9.abrupt("continue", 32);
-        case 19:
+          return _context1.abrupt("continue", 43);
+        case 22:
           centering2D(state, props.viewer2DActions);
-          return _context9.abrupt("continue", 32);
-        case 20:
+          return _context1.abrupt("continue", 43);
+        case 23:
           props.projectActions.undo();
-          return _context9.abrupt("continue", 32);
-        case 21:
+          return _context1.abrupt("continue", 43);
+        case 24:
           props.projectActions.redo();
-          return _context9.abrupt("continue", 32);
-        case 22:
+          return _context1.abrupt("continue", 43);
+        case 25:
           _evt$payload7 = evt.payload, moldingInfo = _evt$payload7.moldingInfo, isGlobal = _evt$payload7.isGlobal;
-          _context9.next = 23;
+          _context1.next = 26;
           return loadMoldingSvg(moldingInfo);
-        case 23:
+        case 26:
           props.itemsActions.setMolding(moldingInfo, isGlobal);
-          return _context9.abrupt("continue", 32);
-        case 24:
+          return _context1.abrupt("continue", 43);
+        case 27:
           distElement = getElement(evt.payload, state);
           if (distElement) props.itemsActions.duplicateSelected(distElement, props.onInternalEvent);
-          return _context9.abrupt("continue", 32);
-        case 25:
+          return _context1.abrupt("continue", 43);
+        case 28:
           _distElement = getElement(evt.payload, state);
           if (_distElement) props.projectActions.remove(_distElement);
-          return _context9.abrupt("continue", 32);
-        case 26:
+          return _context1.abrupt("continue", 43);
+        case 29:
           _evt$payload8 = evt.payload, option = _evt$payload8.option, _value2 = _evt$payload8.value;
-          if (option === PROJECT_SETTING_OPTION.UPDATE_CEIL_HEIGHT) {
-            props.viewer2DActions.updateCeilHeight(_value2);
-            props.viewer3DActions.update3DCeilHeight(_value2);
-          } else if (option === PROJECT_SETTING_OPTION.CHANGE_WALL_LENGTH_MEASURE) {
-            props.viewer2DActions.changeWallLengthMeasure(_value2);
-          } else if (option === PROJECT_SETTING_OPTION.CHANGE_BASE_CABINET_MEASURE) {
-            props.viewer2DActions.changeBaseCabinetMeasure(_value2);
-          } else if (option === PROJECT_SETTING_OPTION.CHANGE_WALL_CABINET_MEASURE) {
-            props.viewer2DActions.changeWallCabinetMeasure(_value2);
-          } else if (option === PROJECT_SETTING_OPTION.CHANGE_WINDOW_DOOR_MEASURE) {
-            props.viewer2DActions.changeWindowDoorMeasure(_value2);
-          }
-          return _context9.abrupt("continue", 32);
-        case 27:
-          layerId = state.getIn(['scene', 'selectedLayer']);
-          layer = state.getIn(['scene', 'layers', layerId]);
-          _layer$getIn = layer.getIn(['selected']), selectedLines = _layer$getIn.lines, selectedHoles = _layer$getIn.holes, selectedItems = _layer$getIn.items;
-          for (_i2 = 0; _i2 < selectedLines.size; _i2++) (evt === null || evt === void 0 ? void 0 : evt.type) === EXTERNAL_EVENT_UPDATE_ATTRIBUTE ? updateAttributeOfSelectedElement(layer.getIn(['lines', selectedLines.get(_i2)]), evt.payload, state, layer, props.projectActions, evt.callback) : updatePropertyOfSelectedElement(layer.getIn(['lines', selectedLines.get(_i2)]), evt.payload, props.catalog, props.projectActions, evt.callback);
-          for (_i3 = 0; _i3 < selectedHoles.size; _i3++) (evt === null || evt === void 0 ? void 0 : evt.type) === EXTERNAL_EVENT_UPDATE_ATTRIBUTE ? updateAttributeOfSelectedElement(layer.getIn(['holes', selectedHoles.get(_i3)]), evt.payload, state, layer, props.projectActions, evt.callback) : updatePropertyOfSelectedElement(layer.getIn(['holes', selectedHoles.get(_i3)]), evt.payload, props.catalog, props.projectActions, evt.callback);
-          for (_i4 = 0; _i4 < selectedItems.size; _i4++) (evt === null || evt === void 0 ? void 0 : evt.type) === EXTERNAL_EVENT_UPDATE_ATTRIBUTE ? updateAttributeOfSelectedElement(layer.getIn(['items', selectedItems.get(_i4)]), evt.payload, state, layer, props.projectActions, evt.callback) : updatePropertyOfSelectedElement(layer.getIn(['items', selectedItems.get(_i4)]), evt.payload, props.catalog, props.projectActions, evt.callback);
-          return _context9.abrupt("continue", 32);
-        case 28:
+          _t6 = option;
+          _context1.next = _t6 === PROJECT_SETTING_OPTION.CHANGE_MEASUREMENT_UNIT ? 30 : _t6 === PROJECT_SETTING_OPTION.UPDATE_CEIL_HEIGHT ? 31 : _t6 === PROJECT_SETTING_OPTION.CHANGE_WALL_LENGTH_MEASURE ? 32 : _t6 === PROJECT_SETTING_OPTION.CHANGE_BASE_CABINET_MEASURE ? 33 : _t6 === PROJECT_SETTING_OPTION.CHANGE_WALL_CABINET_MEASURE ? 34 : _t6 === PROJECT_SETTING_OPTION.CHANGE_WINDOW_DOOR_MEASURE ? 35 : 36;
+          break;
+        case 30:
+          props.viewer2DActions.updateCeilHeightUnit(_value2);
+        case 31:
+          props.viewer2DActions.updateCeilHeight(_value2);
+          props.viewer3DActions.update3DCeilHeight(_value2);
+          return _context1.abrupt("continue", 37);
+        case 32:
+          props.viewer2DActions.changeWallLengthMeasure(_value2);
+          return _context1.abrupt("continue", 37);
+        case 33:
+          props.viewer2DActions.changeBaseCabinetMeasure(_value2);
+          return _context1.abrupt("continue", 37);
+        case 34:
+          props.viewer2DActions.changeWallCabinetMeasure(_value2);
+          return _context1.abrupt("continue", 37);
+        case 35:
+          props.viewer2DActions.changeWindowDoorMeasure(_value2);
+          return _context1.abrupt("continue", 37);
+        case 36:
+          return _context1.abrupt("continue", 37);
+        case 37:
+          return _context1.abrupt("continue", 43);
+        case 38:
+          _layerId2 = state.getIn(['scene', 'selectedLayer']);
+          _layer = state.getIn(['scene', 'layers', _layerId2]);
+          _layer$getIn = _layer.getIn(['selected']), selectedLines = _layer$getIn.lines, selectedHoles = _layer$getIn.holes, selectedItems = _layer$getIn.items;
+          for (_i4 = 0; _i4 < selectedLines.size; _i4++) (evt === null || evt === void 0 ? void 0 : evt.type) === EXTERNAL_EVENT_UPDATE_ATTRIBUTE ? updateAttributeOfSelectedElement(_layer.getIn(['lines', selectedLines.get(_i4)]), evt.payload, state, _layer, props.catalog, props.projectActions, evt.callback) : updatePropertyOfSelectedElement(_layer.getIn(['lines', selectedLines.get(_i4)]), evt.payload, props.catalog, props.projectActions, evt.callback);
+          for (_i5 = 0; _i5 < selectedHoles.size; _i5++) (evt === null || evt === void 0 ? void 0 : evt.type) === EXTERNAL_EVENT_UPDATE_ATTRIBUTE ? updateAttributeOfSelectedElement(_layer.getIn(['holes', selectedHoles.get(_i5)]), evt.payload, state, _layer, props.catalog, props.projectActions, evt.callback) : updatePropertyOfSelectedElement(_layer.getIn(['holes', selectedHoles.get(_i5)]), evt.payload, props.catalog, props.projectActions, evt.callback);
+          for (_i6 = 0; _i6 < selectedItems.size; _i6++) (evt === null || evt === void 0 ? void 0 : evt.type) === EXTERNAL_EVENT_UPDATE_ATTRIBUTE ? updateAttributeOfSelectedElement(_layer.getIn(['items', selectedItems.get(_i6)]), evt.payload, state, _layer, props.catalog, props.projectActions, evt.callback) : updatePropertyOfSelectedElement(_layer.getIn(['items', selectedItems.get(_i6)]), evt.payload, props.catalog, props.projectActions, evt.callback);
+          return _context1.abrupt("continue", 43);
+        case 39:
           _layerID = state.scene.selectedLayer;
-          _layer = state.scene.getIn(['layers', _layerID]).toJS();
+          _layer2 = state.scene.getIn(['layers', _layerID]).toJS();
           orginalItemInfo = evt === null || evt === void 0 || (_evt$payload9 = evt.payload) === null || _evt$payload9 === void 0 ? void 0 : _evt$payload9.orginalItemInfo;
-          originalItem = _layer === null || _layer === void 0 ? void 0 : _layer.items[orginalItemInfo.id];
-          _context9.next = 29;
+          originalItem = _layer2 === null || _layer2 === void 0 ? void 0 : _layer2.items[orginalItemInfo.id];
+          _context1.next = 40;
           return addItemToCatalog(evt.payload.replaceItemInfo, state, props.catalog, props.projectActions);
-        case 29:
+        case 40:
           originalItemPos = {
             rotation: originalItem.rotation,
             selectedItemId: originalItem.id,
@@ -1292,23 +1445,27 @@ function _handleExternalEvent() {
             }
           };
           props.itemsActions.replaceItem(originalItemPos, originalItem, replaceItem);
-          return _context9.abrupt("continue", 32);
-        case 30:
+          return _context1.abrupt("continue", 43);
+        case 41:
           setFinishing(props, state, evt.payload);
-        case 31:
+          return _context1.abrupt("continue", 43);
+        case 42:
+          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 = getMoldingDataOfScene(layer, props.catalog, currentTexture);
           // send scene object from 3DTool to HostApp using internalEvent
-          (_props$onInternalEven2 = props.onInternalEvent) === null || _props$onInternalEven2 === void 0 || _props$onInternalEven2.call(props, {
+          (_props$onInternalEven3 = props.onInternalEvent) === null || _props$onInternalEven3 === void 0 || _props$onInternalEven3.call(props, {
             type: INTERNAL_EVENT_SYNC_SCENE,
             value: {
-              scene: state.scene.toJS()
+              scene: sceneData
             }
           });
-          return _context9.abrupt("continue", 32);
-        case 32:
+          return _context1.abrupt("continue", 43);
+        case 43:
         case "end":
-          return _context9.stop();
+          return _context1.stop();
       }
-    }, _callee8);
+    }, _callee9);
   }));
   return _handleExternalEvent.apply(this, arguments);
 }