kitchen-simulator 2.0.3 → 2.0.4-op-event

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

@@ -1,15 +1,17 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 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 _regeneratorRuntime from "@babel/runtime/regenerator";
-import { fromJS, List, Map, Record } 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, TOP, BOTTOM, LEFT, RIGHT, EXTERNAL_EVENT_NEW_PROJECT, EXTERNAL_EVENT_CHANGE_DOORSTYLE, EXTERNAL_EVENT_SET_INITIAL_DATA, EXTERNAL_EVENT_ADD_ROOM_SHAPE, EXTERNAL_EVENT_ZOOM_IN, EXTERNAL_EVENT_ZOOM_OUT, ZOOM_VARIABLE, EXTERNAL_EVENT_UNDO, EXTERNAL_EVENT_REDO, EXTERNAL_EVENT_SET_MOLDING, EXTERNAL_EVENT_PROJECT_SETTING, PROJECT_SETTING_OPTION, EXTERNAL_EVENT_CHANGE_DISTANCE, EXTERNAL_EVENT_SYNC_SCENE, INTERNAL_EVENT_SYNC_SCENE, EXTERNAL_EVENT_LOAD_PROJECT } from "../constants";
+import { Seq, fromJS, List, Map, Record } 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_SET_INITIAL_DATA, EXTERNAL_EVENT_ADD_ROOM_SHAPE, EXTERNAL_EVENT_ZOOM_IN, EXTERNAL_EVENT_ZOOM_OUT, ZOOM_VARIABLE, 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_LOAD_PROJECT, INTERNAL_EVENT_ITEMS_CATALOG, EXTERNAL_EVENT_UPDATE_ATTRIBUTE, LEFT_DIST_ANG, RIGHT_DIST_ANG, BACK_DIST_ANG, FRONT_DIST_ANG, ATT_ITEM_POS, ATT_LINE_LENGTH, ATT_VERTEXT_ONE, ATT_VERTEXT_TWO, ATT_HOLE_OFFSET_A, ATT_HOLE_OFFSET_B, UNIT_CENTIMETER, UNIT_INCH } from "../constants";
 import { isEmpty } from "./helper";
 import exporter from "../catalog/utils/exporter";
 import { render2DItem, render3DItem } from "../catalog/utils/item-loader";
-import Catalog from "../catalog/catalog";
-import { CatalogElement, safeLoadMapList } from "../models";
+import { convert } from "./convert-units-lite";
+import { GeometryUtils } from "./export";
+var PRECISION = 2;
 var loadSVGsByItem = /*#__PURE__*/function () {
   var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(item) {
     var _parsed$xml$viewBox, _parsed$xml$viewBox2, response, svgText, loader, parsed, _t;
@@ -65,12 +67,12 @@ var loadSVGsByItem = /*#__PURE__*/function () {
 var compareSVGRect = function compareSVGRect(value) {
   return value.e <= 10 && value.e + value.a * value.SVGWidth + 10 >= value.viewerWidth && value.f <= 80 && value.f + value.d * value.SVGHeight + 10 >= value.viewerHeight ? true : false;
 };
-function loadJSON(_x2, _x3, _x4) {
+function loadJSON(_x2) {
   return _loadJSON.apply(this, arguments);
 }
 /********Parse TempPlaceholder from cabinetPayloadData **************/
 function _loadJSON() {
-  _loadJSON = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(path, success, error) {
+  _loadJSON = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(path) {
     return _regeneratorRuntime.wrap(function (_context2) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
@@ -96,10 +98,9 @@ function _loadJSON() {
   }));
   return _loadJSON.apply(this, arguments);
 }
-export function parseTempPlaceholdersFromCabinetPayload(_x5) {
+function parseTempPlaceholdersFromCabinetPayload(_x3) {
   return _parseTempPlaceholdersFromCabinetPayload.apply(this, arguments);
 }
-
 /***** Update cabinetPayloadData with updatedTempPlaceholders *****/
 function _parseTempPlaceholdersFromCabinetPayload() {
   _parseTempPlaceholdersFromCabinetPayload = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3(cabinetPayload) {
@@ -429,7 +430,8 @@ function _parseTempPlaceholdersFromCabinetPayload() {
           });
           tempPlaceholdersData.push({
             id: parseInt(el, 10),
-            placeholders: tempData
+            placeholders: tempData,
+            structure: cabinetPayload.structure_json.tempPlaceholders[0].structure
           });
           return _context3.abrupt("return", tempPlaceholdersData);
         case 5:
@@ -440,7 +442,7 @@ function _parseTempPlaceholdersFromCabinetPayload() {
   }));
   return _parseTempPlaceholdersFromCabinetPayload.apply(this, arguments);
 }
-export function updateCabinetPayload(_x6) {
+function updateCabinetPayload(_x4) {
   return _updateCabinetPayload.apply(this, arguments);
 }
 function _updateCabinetPayload() {
@@ -470,9 +472,9 @@ function _updateCabinetPayload() {
   }));
   return _updateCabinetPayload.apply(this, arguments);
 }
-function addItemToCatalog(_x7, _x8, _x9, _x0) {
+function addItemToCatalog(_x5, _x6, _x7, _x8) {
   return _addItemToCatalog.apply(this, arguments);
-}
+} // Get attributs of current selected element
 function _addItemToCatalog() {
   _addItemToCatalog = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee5(element, state, catalogInstance, projectActions) {
     var elementJs, catalog, updatedStructureJson, outlineSVGData;
@@ -518,105 +520,470 @@ function _addItemToCatalog() {
   }));
   return _addItemToCatalog.apply(this, arguments);
 }
+function initAttrData(element, layer, state) {
+  element = _typeof(element.misc) === 'object' ? element.set('misc', new Map(element.misc)) : element;
+  switch (element.prototype) {
+    case 'items':
+      {
+        return new Map(element);
+      }
+    case 'lines':
+      {
+        var v_a = layer.vertices.get(element.vertices.get(0));
+        var v_b = layer.vertices.get(element.vertices.get(1));
+        var distance = GeometryUtils.pointsDistance(v_a.x, v_a.y, v_b.x, v_b.y);
+        var _unit = element.misc.get('_unitLength') || UNIT_INCH;
+        var _length = convert(distance).from(UNIT_CENTIMETER).to(_unit);
+        if (state.mode == MODE_DRAWING_LINE) {
+          return new Map({
+            vertexOne: v_a,
+            vertexTwo: v_b,
+            lineLength: new Map({
+              length: distance,
+              _length: _length,
+              _unit: _unit
+            }),
+            focus: element.focus
+          });
+        } else {
+          var allLines = layer.lines.toArray();
+          var relatedLine = allLines.filter(function (line) {
+            return line.vertices.toArray().includes(v_b.id) && line.id != element.id;
+          })[0];
+          var relatedVertexID = relatedLine && (relatedLine.vertices.toArray()[0] == v_b.id ? relatedLine.vertices.toArray()[1] : relatedLine.vertices.toArray()[0]);
+          var v_d = relatedVertexID && layer.getIn(['vertices', relatedVertexID]);
+          var lineToExtend = relatedVertexID && allLines.filter(function (line) {
+            return line.vertices.toArray().includes(relatedVertexID) && line.id != relatedLine.id;
+          })[0];
+          var v_c = lineToExtend && layer.getIn(['vertices', lineToExtend.vertices.toArray()[0] == v_d.id ? lineToExtend.vertices.toArray()[1] : lineToExtend.vertices.toArray()[0]]);
+          return new Map({
+            vertexOne: v_a,
+            vertexTwo: v_b,
+            vertexThree: v_c,
+            vertexFour: v_d,
+            lineToExtend: lineToExtend,
+            lineLength: new Map({
+              length: distance,
+              _length: _length,
+              _unit: _unit
+            }),
+            focus: element.focus
+          });
+        }
+      }
+    case 'holes':
+      {
+        var line = layer.lines.get(element.line);
+        var _layer$vertices$get = layer.vertices.get(line.vertices.get(0)),
+          x0 = _layer$vertices$get.x,
+          y0 = _layer$vertices$get.y;
+        var _layer$vertices$get2 = layer.vertices.get(line.vertices.get(1)),
+          x1 = _layer$vertices$get2.x,
+          y1 = _layer$vertices$get2.y;
+        var lineLength = GeometryUtils.pointsDistance(x0, y0, x1, y1);
+        var startAt = lineLength * element.offset - element.properties.get('width').get('length') / 2;
+        var endAt = lineLength - lineLength * element.offset - element.properties.get('width').get('length') / 2;
+        var _unitA = element.misc.get('_unitA') || UNIT_INCH;
+        var _lengthA = convert(x0 > x1 ? endAt : startAt).from(UNIT_CENTIMETER).to(_unitA);
+        var _unitB = element.misc.get('_unitB') || UNIT_INCH;
+        var _lengthB = convert(x0 > x1 ? startAt : endAt).from(UNIT_CENTIMETER).to(_unitB);
+        return new Map({
+          offset: element.offset,
+          offsetA: new Map({
+            length: MathUtils.toFixedFloat(x0 > x1 ? endAt : startAt, PRECISION),
+            _length: MathUtils.toFixedFloat(_lengthA, PRECISION),
+            _unit: _unitA
+          }),
+          offsetB: new Map({
+            length: MathUtils.toFixedFloat(x0 > x1 ? startAt : endAt, PRECISION),
+            _length: MathUtils.toFixedFloat(_lengthB, PRECISION),
+            _unit: _unitB
+          })
+        });
+      }
+    case 'areas':
+      {
+        return new Map({});
+      }
+    default:
+      return null;
+  }
+}
+function updateAttributeOfSelectedElement(element, attrPayload, state, layer, projectActions) {
+  var attributesFormData = initAttrData(element, layer, state);
+  var value = attrPayload.value;
+  var attributeName = attrPayload.attributeName;
+  // pre process
+  if (attributeName === ATT_ITEM_POS) {
+    // calculate the new position of movement
+    var rotRad = (value.directionAng + element.rotation) / 180 * Math.PI;
+    var newX = element.x + convert((value.oldDistance - value.newDistance) * Math.cos(rotRad)).from('in').to('cm');
+    var newY = element.y + convert((value.oldDistance - value.newDistance) * Math.sin(rotRad)).from('in').to('cm');
+    // const reversedDirection =
+    //   value.directionAng === LEFT_DIST_ANG
+    //     ? RIGHT_DIST_ANG
+    //     : value.directionAng === RIGHT_DIST_ANG
+    //     ? LEFT_DIST_ANG
+    //     : value.directionAng === BACK_DIST_ANG
+    //     ? FRONT_DIST_ANG
+    //     : BACK_DIST_ANG;
+    // let dist = convert(
+    //   element.distArray?.find(v => v[1] === reversedDirection)
+    //     ? element.distArray?.find(v => v[1] === reversedDirection)[0]
+    //     : 0
+    // )
+    //   .from('cm')
+    //   .to('in');
+    // if (dist + (value.oldDistance - value.newDistance) <= 0 || value.newDistance < 0) {
+    //   // confirm "The item will be placed outside the floor plan. Are you sure?"
+    //   setPopupOpen(true);
+    //   return;
+    // }
+    value = {
+      x: newX,
+      y: newY
+    };
+  } else if (attributeName === ATT_LINE_LENGTH || attributeName === ATT_HOLE_OFFSET_A || attributeName === ATT_HOLE_OFFSET_B) {
+    var att = attributesFormData.has(attributeName) ? attributesFormData.get(attributeName) : element[attributeName];
+    if (att) value = att.merge({
+      _length: value,
+      _unit: UNIT_INCH,
+      length: convert(value).from(UNIT_INCH).to(UNIT_CENTIMETER)
+    });
+  }
+  // make the new attrivutes
+  switch (element.prototype) {
+    case 'items':
+      {
+        if (attributeName == ATT_ITEM_POS) {
+          var xVal = value.x;
+          var yVal = value.y;
+          attributesFormData = attributesFormData.set('x', xVal);
+          attributesFormData = attributesFormData.set('y', yVal);
+        } else {
+          attributesFormData = attributesFormData.set(attributeName, value);
+        }
+        break;
+      }
+    case 'lines':
+      {
+        switch (attributeName) {
+          case ATT_LINE_LENGTH:
+            {
+              var v_0 = attributesFormData.get('vertexOne');
+              var v_1 = attributesFormData.get('vertexTwo');
+              var v_b_new = GeometryUtils.extendLine(v_0.x, v_0.y, v_1.x, v_1.y, value.get('length'), PRECISION);
+              attributesFormData = attributesFormData.withMutations(function (attr) {
+                attr.set('vertexTwo', v_1.merge(v_b_new));
+                attr.set('lineLength', value);
+              });
+              break;
+            }
+          case ATT_VERTEXT_ONE:
+          case ATT_VERTEXT_TWO:
+            {
+              attributesFormData = attributesFormData.withMutations(function (attr) {
+                attr.set(attributeName, attr.get(attributeName).merge(value));
+                var newDistance = GeometryUtils.verticesDistance(attr.get('vertexOne'), attr.get('vertexTwo'));
+                attr.mergeIn(['lineLength'], attr.get('lineLength').merge({
+                  length: newDistance,
+                  _length: convert(newDistance).from(UNIT_CENTIMETER).to(attr.get('lineLength').get('_unit'))
+                }));
+              });
+              break;
+            }
+          default:
+            {
+              attributesFormData = attributesFormData.set(attributeName, value);
+              break;
+            }
+        }
+        break;
+      }
+    case 'holes':
+      {
+        switch (attributeName) {
+          case ATT_HOLE_OFFSET_A:
+            {
+              var line = layer.lines.get(element.line);
+              var _layer$vertices$get3 = layer.vertices.get(line.vertices.get(0)),
+                x0 = _layer$vertices$get3.x,
+                y0 = _layer$vertices$get3.y;
+              var _layer$vertices$get4 = layer.vertices.get(line.vertices.get(1)),
+                x1 = _layer$vertices$get4.x,
+                y1 = _layer$vertices$get4.y;
+              var alpha = GeometryUtils.angleBetweenTwoPoints(x0, y0, x1, y1);
+              var lineLength = GeometryUtils.pointsDistance(x0, y0, x1, y1);
+              var widthLength = element.properties.get('width').get('length');
+              var halfWidthLength = widthLength / 2;
+              var lengthValue = value.get('length');
+              lengthValue = Math.max(lengthValue, 0);
+              lengthValue = Math.min(lengthValue, lineLength - widthLength);
+              var xp = (lengthValue + halfWidthLength) * Math.cos(alpha) + x0;
+              var yp = (lengthValue + halfWidthLength) * Math.sin(alpha) + y0;
+              var offset = GeometryUtils.pointPositionOnLineSegment(x0, y0, x1, y1, xp, yp);
+              /*
+              if (x0 > x1) offset = 1 - offset;
+              */
+              var endAt = MathUtils.toFixedFloat(lineLength - lineLength * offset - halfWidthLength, PRECISION);
+              var offsetUnit = attributesFormData.getIn(['offsetB', '_unit']);
+              var offsetB = new Map({
+                length: endAt,
+                _length: convert(endAt).from(UNIT_CENTIMETER).to(offsetUnit),
+                _unit: offsetUnit
+              });
+              attributesFormData = attributesFormData.set('offsetB', offsetB).set('offset', offset);
+              var offsetAttribute = new Map({
+                length: MathUtils.toFixedFloat(lengthValue, PRECISION),
+                _unit: value.get('_unit'),
+                _length: MathUtils.toFixedFloat(convert(lengthValue).from(UNIT_CENTIMETER).to(value.get('_unit')), PRECISION)
+              });
+              attributesFormData = attributesFormData.set(attributeName, offsetAttribute);
+              break;
+            }
+          case ATT_HOLE_OFFSET_B:
+            {
+              var _line = layer.lines.get(element.line);
+              var _layer$vertices$get5 = layer.vertices.get(_line.vertices.get(0)),
+                _x9 = _layer$vertices$get5.x,
+                _y = _layer$vertices$get5.y;
+              var _layer$vertices$get6 = layer.vertices.get(_line.vertices.get(1)),
+                _x0 = _layer$vertices$get6.x,
+                _y2 = _layer$vertices$get6.y;
+              var _alpha = GeometryUtils.angleBetweenTwoPoints(_x9, _y, _x0, _y2);
+              var _lineLength = GeometryUtils.pointsDistance(_x9, _y, _x0, _y2);
+              var _widthLength = element.properties.get('width').get('length');
+              var _halfWidthLength = _widthLength / 2;
+              var _lengthValue = value.get('length');
+              _lengthValue = Math.max(_lengthValue, 0);
+              _lengthValue = Math.min(_lengthValue, _lineLength - _widthLength);
+              var _xp = _x0 - (_lengthValue + _halfWidthLength) * Math.cos(_alpha);
+              var _yp = _y2 - (_lengthValue + _halfWidthLength) * Math.sin(_alpha);
+              var _offset = GeometryUtils.pointPositionOnLineSegment(_x9, _y, _x0, _y2, _xp, _yp);
+              /*
+              if (x0 > x1) offset = 1 - offset;
+              */
+              var startAt = MathUtils.toFixedFloat(_lineLength * _offset - _halfWidthLength, PRECISION);
+              var _offsetUnit = attributesFormData.getIn(['offsetA', '_unit']);
+              var offsetA = new Map({
+                length: startAt,
+                _length: convert(startAt).from(UNIT_CENTIMETER).to(_offsetUnit),
+                _unit: _offsetUnit
+              });
+              attributesFormData = attributesFormData.set('offsetA', offsetA).set('offset', _offset);
+              var _offsetAttribute = new Map({
+                length: MathUtils.toFixedFloat(_lengthValue, PRECISION),
+                _unit: value.get('_unit'),
+                _length: MathUtils.toFixedFloat(convert(_lengthValue).from(UNIT_CENTIMETER).to(value.get('_unit')), PRECISION)
+              });
+              attributesFormData = attributesFormData.set(attributeName, _offsetAttribute);
+              break;
+            }
+          default:
+            {
+              attributesFormData = attributesFormData.set(attributeName, value);
+              break;
+            }
+        }
+        break;
+      }
+    default:
+      break;
+  }
+
+  // update attribute action
+  switch (element.prototype) {
+    case 'items':
+      {
+        projectActions.setItemsAttributes(attributesFormData);
+        break;
+      }
+    case 'lines':
+      {
+        projectActions.setLinesAttributes(attributesFormData);
+        break;
+      }
+    case 'holes':
+      {
+        projectActions.setHolesAttributes(attributesFormData);
+        break;
+      }
+  }
+}
 export function handleExternalEvent(_x1) {
   return _handleExternalEvent.apply(this, arguments);
 }
 function _handleExternalEvent() {
-  _handleExternalEvent = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee6(props) {
-    var evt, state, i, _evt$payload, _evt$payload2, sLineCnt, element, _evt$payload3, moveType, moveValue, value, defaulTitle, _evt$payload4, doorStyle, itemCDS, isAll, _doorStyle, _value, _zoomValue, _value2, _zoomValue2, _evt$payload5, moldingInfo, isGlobal, _evt$payload6, option, _value3, distancePayload, _props$onInternalEven, _t5, _t6;
-    return _regeneratorRuntime.wrap(function (_context6) {
-      while (1) switch (_context6.prev = _context6.next) {
+  _handleExternalEvent = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee7(props) {
+    var evt, state, _evt$payload, cdsItems, itemKeys, _loop3, i, _props$onInternalEven, sLineCnt, element, _state$viewer2D, _evt$payload$initialP, mouseX, mouseY, v2d, vPosX, vPosY, layerID, _evt$payload3, moveType, moveValue, value, defaulTitle, _evt$payload4, doorStyle, itemCDS, isAll, _doorStyle, _value, _zoomValue, _value2, _zoomValue2, _evt$payload5, moldingInfo, isGlobal, _evt$payload6, option, _value3, layerId, layer, _layer$getIn, selectedLines, selectedHoles, selectedItems, _i2, _i3, _i4, _props$onInternalEven2, _t5, _t6;
+    return _regeneratorRuntime.wrap(function (_context8) {
+      while (1) switch (_context8.prev = _context8.next) {
         case 0:
           console.log('***external event****', props.externalEvent);
           evt = props.externalEvent;
           state = props.state.get('KitchenConfigurator');
           _t5 = evt === null || evt === void 0 ? void 0 : evt.type;
-          _context6.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_MOVE_PAN ? 12 : _t5 === EXTERNAL_EVENT_NEW_PROJECT ? 18 : _t5 === EXTERNAL_EVENT_CHANGE_DOORSTYLE ? 19 : _t5 === EXTERNAL_EVENT_SET_INITIAL_DATA ? 20 : _t5 === EXTERNAL_EVENT_ADD_ROOM_SHAPE ? 21 : _t5 === EXTERNAL_EVENT_ZOOM_IN ? 22 : _t5 === EXTERNAL_EVENT_ZOOM_OUT ? 25 : _t5 === EXTERNAL_EVENT_UNDO ? 28 : _t5 === EXTERNAL_EVENT_REDO ? 29 : _t5 === EXTERNAL_EVENT_SET_MOLDING ? 30 : _t5 === EXTERNAL_EVENT_PROJECT_SETTING ? 31 : _t5 === EXTERNAL_EVENT_CHANGE_DISTANCE ? 32 : _t5 === EXTERNAL_EVENT_SYNC_SCENE ? 33 : 34;
+          _context8.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_MOVE_PAN ? 12 : _t5 === EXTERNAL_EVENT_NEW_PROJECT ? 18 : _t5 === EXTERNAL_EVENT_CHANGE_DOORSTYLE ? 19 : _t5 === EXTERNAL_EVENT_SET_INITIAL_DATA ? 20 : _t5 === EXTERNAL_EVENT_ADD_ROOM_SHAPE ? 21 : _t5 === EXTERNAL_EVENT_ZOOM_IN ? 22 : _t5 === EXTERNAL_EVENT_ZOOM_OUT ? 25 : _t5 === EXTERNAL_EVENT_UNDO ? 28 : _t5 === EXTERNAL_EVENT_REDO ? 29 : _t5 === EXTERNAL_EVENT_SET_MOLDING ? 30 : _t5 === EXTERNAL_EVENT_PROJECT_SETTING ? 31 : _t5 === EXTERNAL_EVENT_UPDATE_ATTRIBUTE ? 32 : _t5 === EXTERNAL_EVENT_SYNC_SCENE ? 33 : 34;
           break;
         case 1:
+          // prepare item data request
+          cdsItems = [];
+          itemKeys = Object.keys(evt === null || evt === void 0 || (_evt$payload = evt.payload) === null || _evt$payload === void 0 || (_evt$payload = _evt$payload.layers['layer-1']) === null || _evt$payload === void 0 ? void 0 : _evt$payload.items) || [];
+          _loop3 = /*#__PURE__*/_regeneratorRuntime.mark(function _loop3() {
+            var _evt$payload2, _it$doorStyle2;
+            var it;
+            return _regeneratorRuntime.wrap(function (_context7) {
+              while (1) switch (_context7.prev = _context7.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]];
+                  if (!cdsItems.some(function (v) {
+                    var _it$doorStyle;
+                    return it.type === v.type && ((_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({
+                    type: it.type,
+                    cdsId: (_it$doorStyle2 = it.doorStyle) === null || _it$doorStyle2 === void 0 || (_it$doorStyle2 = _it$doorStyle2.doorStyles) === null || _it$doorStyle2 === void 0 ? void 0 : _it$doorStyle2.cabinet_door_style_id
+                  });
+                case 1:
+                case "end":
+                  return _context7.stop();
+              }
+            }, _loop3);
+          });
           i = 0;
         case 2:
-          if (!(i < (evt === null || evt === void 0 || (_evt$payload = evt.payload) === null || _evt$payload === void 0 || (_evt$payload = _evt$payload.catalogItems) === null || _evt$payload === void 0 || (_evt$payload = _evt$payload.elements) === null || _evt$payload === void 0 ? void 0 : _evt$payload.length))) {
-            _context6.next = 4;
+          if (!(i < itemKeys.length)) {
+            _context8.next = 4;
             break;
           }
-          _context6.next = 3;
-          return addItemToCatalog(evt === null || evt === void 0 || (_evt$payload2 = evt.payload) === null || _evt$payload2 === void 0 || (_evt$payload2 = _evt$payload2.catalogItems) === null || _evt$payload2 === void 0 ? void 0 : _evt$payload2.elements[i], state, props.catalog, props.projectActions);
+          return _context8.delegateYield(_loop3(), "t0", 3);
         case 3:
           i++;
-          _context6.next = 2;
+          _context8.next = 2;
           break;
         case 4:
-          props.projectActions.loadProject(evt.payload.sceneData);
-          return _context6.abrupt("continue", 34);
+          // request item catalog data to host app
+          if (cdsItems.length > 0) {
+            (_props$onInternalEven = props.onInternalEvent) === null || _props$onInternalEven === void 0 || _props$onInternalEven.call(props, {
+              type: INTERNAL_EVENT_ITEMS_CATALOG,
+              value: {
+                cdsItems: cdsItems
+              }
+            }, /*#__PURE__*/function () {
+              var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee6(result) {
+                var _i, _result$elements;
+                return _regeneratorRuntime.wrap(function (_context6) {
+                  while (1) switch (_context6.prev = _context6.next) {
+                    case 0:
+                      _i = 0;
+                    case 1:
+                      if (!(_i < (result === null || result === void 0 || (_result$elements = result.elements) === null || _result$elements === void 0 ? void 0 : _result$elements.length))) {
+                        _context6.next = 3;
+                        break;
+                      }
+                      _context6.next = 2;
+                      return addItemToCatalog(result.elements[_i], state, props.catalog, props.projectActions);
+                    case 2:
+                      _i++;
+                      _context6.next = 1;
+                      break;
+                    case 3:
+                      props.projectActions.loadProject(evt.payload);
+                    case 4:
+                    case "end":
+                      return _context6.stop();
+                  }
+                }, _callee6);
+              }));
+              return function (_x10) {
+                return _ref2.apply(this, arguments);
+              };
+            }());
+          }
+          return _context8.abrupt("continue", 34);
         case 5:
           props.projectActions.setMode(MODE_IDLE_3D);
-          return _context6.abrupt("continue", 34);
+          return _context8.abrupt("continue", 34);
         case 6:
           props.projectActions.setMode(MODE_IDLE);
-          return _context6.abrupt("continue", 34);
+          return _context8.abrupt("continue", 34);
         case 7:
           sLineCnt = state.getIn(['scene', 'layers', 'layer-1', 'selected', 'lines']).size;
           if (sLineCnt > 0) props.projectActions.setMode(MODE_ELEVATION_VIEW);
-          return _context6.abrupt("continue", 34);
+          return _context8.abrupt("continue", 34);
         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 _context6.abrupt("continue", 34);
+          return _context8.abrupt("continue", 34);
         case 9:
           if (isEmpty(evt === null || evt === void 0 ? void 0 : evt.payload)) {
-            _context6.next = 11;
+            _context8.next = 11;
             break;
           }
           element = evt.payload;
-          _context6.next = 10;
+          _context8.next = 10;
           return addItemToCatalog(element, state, props.catalog, props.projectActions);
         case 10:
           // start drawing item
-          ARRAY_3D_MODES.includes(state.mode) ? props.itemsActions.selectToolDrawingItem3D(element.name) : props.itemsActions.selectToolDrawingItem(element.name);
+          if (ARRAY_3D_MODES.includes(state.mode)) {
+            // in 3d view
+            props.itemsActions.selectToolDrawingItem3D(element.name);
+          } else {
+            // in 2d view
+            // create cabinet
+            props.itemsActions.selectToolDrawingItem(element.name);
+            // mapping the initial position of client coord to viewer2D coord
+            _evt$payload$initialP = evt.payload.initialPosition, mouseX = _evt$payload$initialP.mouseX, mouseY = _evt$payload$initialP.mouseY;
+            v2d = (_state$viewer2D = state.viewer2D) === null || _state$viewer2D === void 0 ? void 0 : _state$viewer2D.toJS();
+            if (mouseX && mouseY && v2d) {
+              vPosX = (mouseX - v2d.e) / v2d.a;
+              vPosY = (mouseY - v2d.f) / v2d.d;
+              layerID = state.scene.selectedLayer; // move cabinet to initial position
+              props.itemsActions.updateDrawingItem(layerID, vPosX, -vPosY + state.scene.height);
+            }
+          }
           props.projectActions.pushLastSelectedCatalogElementToHistory(element);
           props.projectActions.setIsCabinetDrawing(true);
         case 11:
-          return _context6.abrupt("continue", 34);
+          return _context8.abrupt("continue", 34);
         case 12:
           _evt$payload3 = evt.payload, moveType = _evt$payload3.moveType, moveValue = _evt$payload3.moveValue;
           value = state.getIn(['viewer2D']).toJS();
           _t6 = moveType;
-          _context6.next = _t6 === TOP ? 13 : _t6 === BOTTOM ? 14 : _t6 === RIGHT ? 15 : _t6 === LEFT ? 16 : 17;
+          _context8.next = _t6 === TOP ? 13 : _t6 === BOTTOM ? 14 : _t6 === RIGHT ? 15 : _t6 === LEFT ? 16 : 17;
           break;
         case 13:
           value.f -= moveValue;
-          return _context6.abrupt("continue", 17);
+          return _context8.abrupt("continue", 17);
         case 14:
           value.f += moveValue;
-          return _context6.abrupt("continue", 17);
+          return _context8.abrupt("continue", 17);
         case 15:
           value.e += moveValue;
-          return _context6.abrupt("continue", 17);
+          return _context8.abrupt("continue", 17);
         case 16:
           value.e -= moveValue;
-          return _context6.abrupt("continue", 17);
+          return _context8.abrupt("continue", 17);
         case 17:
           if (compareSVGRect(value)) props.viewer2DActions.updateCameraView(value);
-          return _context6.abrupt("continue", 34);
+          return _context8.abrupt("continue", 34);
         case 18:
           defaulTitle = 'Untitle';
           props.projectActions.newProject();
           props.projectActions.rename(defaulTitle);
-          return _context6.abrupt("continue", 34);
+          return _context8.abrupt("continue", 34);
         case 19:
           _evt$payload4 = evt.payload, doorStyle = _evt$payload4.doorStyle, itemCDS = _evt$payload4.itemCDS, isAll = _evt$payload4.isAll;
           props.itemsActions.setDoorStyle(doorStyle, itemCDS, isAll);
-          return _context6.abrupt("continue", 34);
+          return _context8.abrupt("continue", 34);
         case 20:
           _doorStyle = evt.payload.doorStyle;
           props.itemsActions.setInitialDoorStyle(_doorStyle.doorStyle);
-          return _context6.abrupt("continue", 34);
+          return _context8.abrupt("continue", 34);
         case 21:
           props.projectActions.loadProject(evt.payload);
-          return _context6.abrupt("continue", 34);
+          return _context8.abrupt("continue", 34);
         case 22:
           _value = state.getIn(['viewer2D']).toJS();
           _value.a -= 0.1;
@@ -625,16 +992,16 @@ function _handleExternalEvent() {
           _value.f += _value.SVGHeight * 0.1 / 2;
           _zoomValue = parseInt((_value.a - 0.5) / ZOOM_VARIABLE);
           if (!(_zoomValue > 404)) {
-            _context6.next = 23;
+            _context8.next = 23;
             break;
           }
-          return _context6.abrupt("return");
+          return _context8.abrupt("return");
         case 23:
           if (!(_zoomValue < 35 || Number.isNaN(_zoomValue))) {
-            _context6.next = 24;
+            _context8.next = 24;
             break;
           }
-          return _context6.abrupt("return");
+          return _context8.abrupt("return");
         case 24:
           while (!(_value.e <= 10)) {
             _value.e -= 0.1;
@@ -649,7 +1016,7 @@ function _handleExternalEvent() {
             _value.f += 0.1;
           }
           if (compareSVGRect(_value)) props.viewer2DActions.updateCameraView(_value);
-          return _context6.abrupt("continue", 34);
+          return _context8.abrupt("continue", 34);
         case 25:
           _value2 = state.getIn(['viewer2D']).toJS();
           _value2.a += 0.1;
@@ -658,29 +1025,29 @@ function _handleExternalEvent() {
           _value2.f -= _value2.SVGHeight * 0.1 / 2;
           _zoomValue2 = parseInt((_value2.a - 0.5) / ZOOM_VARIABLE);
           if (!(_zoomValue2 > 404)) {
-            _context6.next = 26;
+            _context8.next = 26;
             break;
           }
-          return _context6.abrupt("return");
+          return _context8.abrupt("return");
         case 26:
           if (!(_zoomValue2 < 35 || Number.isNaN(_zoomValue2))) {
-            _context6.next = 27;
+            _context8.next = 27;
             break;
           }
-          return _context6.abrupt("return");
+          return _context8.abrupt("return");
         case 27:
           if (compareSVGRect(_value2)) props.viewer2DActions.updateCameraView(_value2);
-          return _context6.abrupt("continue", 34);
+          return _context8.abrupt("continue", 34);
         case 28:
           props.projectActions.undo();
-          return _context6.abrupt("continue", 34);
+          return _context8.abrupt("continue", 34);
         case 29:
           props.projectActions.redo();
-          return _context6.abrupt("continue", 34);
+          return _context8.abrupt("continue", 34);
         case 30:
           _evt$payload5 = evt.payload, moldingInfo = _evt$payload5.moldingInfo, isGlobal = _evt$payload5.isGlobal;
           props.itemsActions.setMolding(moldingInfo, isGlobal);
-          return _context6.abrupt("continue", 34);
+          return _context8.abrupt("continue", 34);
         case 31:
           _evt$payload6 = evt.payload, option = _evt$payload6.option, _value3 = _evt$payload6.value;
           if (option === PROJECT_SETTING_OPTION.UPDATE_CEIL_HEIGHT) {
@@ -695,13 +1062,18 @@ function _handleExternalEvent() {
           } else if (option === PROJECT_SETTING_OPTION.CHANGE_WINDOW_DOOR_MEASURE) {
             props.viewer2DActions.changeWindowDoorMeasure(_value3);
           }
-          return _context6.abrupt("continue", 34);
+          return _context8.abrupt("continue", 34);
         case 32:
-          distancePayload = evt.payload;
-          props.itemsActions.changeDistance(distancePayload);
+          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++) updateAttributeOfSelectedElement(layer.getIn(['lines', selectedLines.get(_i2)]), evt.payload, state, layer, props.projectActions);
+          for (_i3 = 0; _i3 < selectedHoles.size; _i3++) updateAttributeOfSelectedElement(layer.getIn(['holes', selectedHoles.get(_i3)]), evt.payload, state, layer, props.projectActions);
+          for (_i4 = 0; _i4 < selectedItems.size; _i4++) updateAttributeOfSelectedElement(layer.getIn(['items', selectedItems.get(_i4)]), evt.payload, state, layer, props.projectActions);
+          return _context8.abrupt("continue", 34);
         case 33:
           // send scene object from 3DTool to HostApp using internalEvent
-          (_props$onInternalEven = props.onInternalEvent) === null || _props$onInternalEven === void 0 || _props$onInternalEven.call(props, {
+          (_props$onInternalEven2 = props.onInternalEvent) === null || _props$onInternalEven2 === void 0 || _props$onInternalEven2.call(props, {
             type: INTERNAL_EVENT_SYNC_SCENE,
             value: {
               scene: state.scene.toJS()
@@ -709,9 +1081,9 @@ function _handleExternalEvent() {
           });
         case 34:
         case "end":
-          return _context6.stop();
+          return _context8.stop();
       }
-    }, _callee6);
+    }, _callee7);
   }));
   return _handleExternalEvent.apply(this, arguments);
 }