kitchen-simulator 2.0.3-load-project-with-internal-event → 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, INTERNAL_EVENT_ITEMS_CATALOG } 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) {
@@ -441,7 +442,7 @@ function _parseTempPlaceholdersFromCabinetPayload() {
   }));
   return _parseTempPlaceholdersFromCabinetPayload.apply(this, arguments);
 }
-export function updateCabinetPayload(_x6) {
+function updateCabinetPayload(_x4) {
   return _updateCabinetPayload.apply(this, arguments);
 }
 function _updateCabinetPayload() {
@@ -471,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;
@@ -519,12 +520,302 @@ 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 _callee7(props) {
-    var evt, state, _evt$payload, cdsItems, itemKeys, _loop3, i, _props$onInternalEven, 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$onInternalEven2, _t5, _t6;
+    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:
@@ -532,7 +823,7 @@ function _handleExternalEvent() {
           evt = props.externalEvent;
           state = props.state.get('KitchenConfigurator');
           _t5 = evt === null || evt === void 0 ? void 0 : evt.type;
-          _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_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
@@ -635,7 +926,23 @@ function _handleExternalEvent() {
           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:
@@ -757,8 +1064,13 @@ function _handleExternalEvent() {
           }
           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$onInternalEven2 = props.onInternalEvent) === null || _props$onInternalEven2 === void 0 || _props$onInternalEven2.call(props, {