kitchen-simulator 2.0.4 → 2.0.6-add-door-window-appliance

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

@@ -1,15 +1,19 @@
 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 { 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_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_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 } 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 { render2DItem, render3DItem, render3DApplianceItem, render3DLightingItem } from "../catalog/utils/item-loader";
+import { convert } from "./convert-units-lite";
+import { GeometryUtils } from "./export";
+import { returnReplaceableDeepSearchType } from "../components/viewer2d/utils";
+import { SVGLoader } from 'three/addons/loaders/SVGLoader';
+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 +69,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 +100,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,9 +444,9 @@ function _parseTempPlaceholdersFromCabinetPayload() {
   }));
   return _parseTempPlaceholdersFromCabinetPayload.apply(this, arguments);
 }
-export function updateCabinetPayload(_x6) {
+function updateCabinetPayload(_x4) {
   return _updateCabinetPayload.apply(this, arguments);
-}
+} // Get attributs of current selected element
 function _updateCabinetPayload() {
   _updateCabinetPayload = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4(cabinetPayload) {
     var tempPlaceholders, cabinetPayloadKeys, i;
@@ -471,47 +474,400 @@ function _updateCabinetPayload() {
   }));
   return _updateCabinetPayload.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;
+  }
+}
+// Get properties of current selected element
+function initPropData(element, catalog) {
+  var mapped = {};
+  if (!catalog.elements.hasOwnProperty(element.type) && !(!catalog.elements[element.type] && !!catalog.elements[returnReplaceableDeepSearchType(element.type)])) {
+    console.log("Last Selected ".concat(element.type, " Element does not exist in catalog."));
+    return new Map(mapped);
+  }
+  var catalogElement = catalog.getElement(element.type);
+  var isFiller = catalogElement.long_name ? catalogElement.long_name.toUpperCase().includes('FILLER') : false;
+  if (isFiller) {
+    var height = {
+      defaultValue: element.properties.get('height').toJS(),
+      label: 'Height',
+      type: 'length-measure'
+    };
+    var depth = {
+      defaultValue: element.properties.get('depth').toJS(),
+      label: 'Depth',
+      type: 'length-measure'
+    };
+    catalogElement.properties = {
+      altitude: catalogElement.properties.altitude,
+      width: catalogElement.properties.width,
+      height: height,
+      depth: depth,
+      flip_doorhandle: catalogElement.properties.flip_doorhandle,
+      resize_and_scaling: catalogElement.properties.resize_and_scaling
+    };
+  }
+  for (var name in catalogElement.properties) {
+    mapped[name] = new Map({
+      currentValue: element.properties.has(name) ? element.properties.get(name) : fromJS(catalogElement.properties[name].defaultValue),
+      configs: catalogElement.properties[name]
+    });
+  }
+  return new Map(mapped);
+}
+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)),
+                _x5 = _layer$vertices$get5.x,
+                _y = _layer$vertices$get5.y;
+              var _layer$vertices$get6 = layer.vertices.get(_line.vertices.get(1)),
+                _x6 = _layer$vertices$get6.x,
+                _y2 = _layer$vertices$get6.y;
+              var _alpha = GeometryUtils.angleBetweenTwoPoints(_x5, _y, _x6, _y2);
+              var _lineLength = GeometryUtils.pointsDistance(_x5, _y, _x6, _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 = _x6 - (_lengthValue + _halfWidthLength) * Math.cos(_alpha);
+              var _yp = _y2 - (_lengthValue + _halfWidthLength) * Math.sin(_alpha);
+              var _offset = GeometryUtils.pointPositionOnLineSegment(_x5, _y, _x6, _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;
+      }
+  }
+}
+function updatePropertyOfSelectedElement(element, propertyPayload, catalog,
+// class instance of Catalog, get from props
+projectActions) {
+  var propertiesFormData = initPropData(element, catalog);
+  var value = propertyPayload.value;
+  var propertyName = propertyPayload.propertyName;
+  // make new properties
+  if (propertyName === PROP_FLIP_DOOR_HANDLE && element.properties.get(PROP_OPEN_DOORS)) {
+    alert('Doors are already open.');
+    return;
+  }
+  propertiesFormData = propertiesFormData.setIn([propertyName, 'currentValue'], value);
+
+  // update property action
+  if (propertiesFormData) {
+    var properties = propertiesFormData.map(function (data) {
+      return data.get('currentValue');
+    });
+    projectActions.setProperties(properties);
+  }
+}
 function addItemToCatalog(_x7, _x8, _x9, _x0) {
   return _addItemToCatalog.apply(this, arguments);
 }
 function _addItemToCatalog() {
   _addItemToCatalog = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee5(element, state, catalogInstance, projectActions) {
-    var elementJs, catalog, updatedStructureJson, outlineSVGData;
+    var elementJs, catalog, outlineSVGData, updatedStructureJson;
     return _regeneratorRuntime.wrap(function (_context5) {
       while (1) switch (_context5.prev = _context5.next) {
         case 0:
+          elementJs = element;
           catalog = state.getIn(['catalog']).toJS(); // add item to catalog of state
+          // if (isEmpty(catalog?.elements[element.name])) {
+          _context5.next = 1;
+          return loadSVGsByItem(element);
+        case 1:
+          outlineSVGData = _context5.sent;
+          if (!(element.type === 'cabinet')) {
+            _context5.next = 3;
+            break;
+          }
           updatedStructureJson = _objectSpread(_objectSpread({}, element.structure_json), element.structure_json.tempPlaceholders[0].structure);
+          element.structure_json = updatedStructureJson;
           element = _objectSpread(_objectSpread({}, element), {}, {
             cds: {
               data: [_objectSpread({}, element.customer_property)],
               itemID: element.itemID
             }
           });
-          element.structure_json = updatedStructureJson;
-          if (!isEmpty(catalog === null || catalog === void 0 ? void 0 : catalog.elements[element.name])) {
-            _context5.next = 3;
-            break;
-          }
-          _context5.next = 1;
-          return loadSVGsByItem(element);
-        case 1:
-          outlineSVGData = _context5.sent;
           _context5.next = 2;
           return updateCabinetPayload(element);
         case 2:
           elementJs = _context5.sent;
-          elementJs = exporter(_objectSpread(_objectSpread({}, elementJs), {}, {
+        case 3:
+          elementJs = _objectSpread(_objectSpread({}, elementJs), {}, {
             outlineSVGData: outlineSVGData,
-            type: 'cabinet',
-            render2DItem: render2DItem,
-            render3DItem: render3DItem
-          }));
+            type: element.type,
+            render2DItem: render2DItem
+          });
+          if (element.type === 'appliance' || element.type === 'furnishing') elementJs.render3DItem = render3DApplianceItem;else if (element.type === 'lighting') elementJs.render3DItem = render3DLightingItem;else elementJs.render3DItem = render3DItem;
+          elementJs = exporter(elementJs);
           if (catalogInstance !== null && catalogInstance !== void 0 && catalogInstance.validateElement(elementJs)) {
             catalogInstance.registerElement(elementJs);
             projectActions.addElementToCatalog(elementJs);
           }
-        case 3:
+          // }
+        case 4:
         case "end":
           return _context5.stop();
       }
@@ -524,15 +880,16 @@ export function handleExternalEvent(_x1) {
 }
 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$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, _evt$payload5, moveType, moveValue, value, defaulTitle, _evt$payload6, doorStyle, itemCDS, isAll, _doorStyle, _value, _zoomValue, _value2, _zoomValue2, _evt$payload7, moldingInfo, isGlobal, _evt$payload8, 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);
+          // console.log('***external event****', props);
           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_ADD_HOLE ? 12 : _t5 === EXTERNAL_EVENT_MOVE_PAN ? 13 : _t5 === EXTERNAL_EVENT_NEW_PROJECT ? 19 : _t5 === EXTERNAL_EVENT_CHANGE_DOORSTYLE ? 20 : _t5 === EXTERNAL_EVENT_SET_INITIAL_DATA ? 21 : _t5 === EXTERNAL_EVENT_ADD_ROOM_SHAPE ? 22 : _t5 === EXTERNAL_EVENT_ZOOM_IN ? 23 : _t5 === EXTERNAL_EVENT_ZOOM_OUT ? 26 : _t5 === EXTERNAL_EVENT_UNDO ? 29 : _t5 === EXTERNAL_EVENT_REDO ? 30 : _t5 === EXTERNAL_EVENT_SET_MOLDING ? 31 : _t5 === EXTERNAL_EVENT_PROJECT_SETTING ? 32 : _t5 === EXTERNAL_EVENT_UPDATE_ATTRIBUTE ? 33 : _t5 === EXTERNAL_EVENT_UPDATE_PROPERTY ? 33 : _t5 === EXTERNAL_EVENT_SYNC_SCENE ? 34 : 35;
           break;
         case 1:
           // prepare item data request
@@ -608,23 +965,23 @@ function _handleExternalEvent() {
               };
             }());
           }
-          return _context8.abrupt("continue", 34);
+          return _context8.abrupt("continue", 35);
         case 5:
           props.projectActions.setMode(MODE_IDLE_3D);
-          return _context8.abrupt("continue", 34);
+          return _context8.abrupt("continue", 35);
         case 6:
           props.projectActions.setMode(MODE_IDLE);
-          return _context8.abrupt("continue", 34);
+          return _context8.abrupt("continue", 35);
         case 7:
           sLineCnt = state.getIn(['scene', 'layers', 'layer-1', 'selected', 'lines']).size;
           if (sLineCnt > 0) props.projectActions.setMode(MODE_ELEVATION_VIEW);
-          return _context8.abrupt("continue", 34);
+          return _context8.abrupt("continue", 35);
         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 _context8.abrupt("continue", 34);
+          return _context8.abrupt("continue", 35);
         case 9:
           if (isEmpty(evt === null || evt === void 0 ? void 0 : evt.payload)) {
             _context8.next = 11;
@@ -635,49 +992,68 @@ 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:
-          return _context8.abrupt("continue", 34);
+          return _context8.abrupt("continue", 35);
         case 12:
-          _evt$payload3 = evt.payload, moveType = _evt$payload3.moveType, moveValue = _evt$payload3.moveValue;
+          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 _context8.abrupt("continue", 35);
+        case 13:
+          _evt$payload5 = evt.payload, moveType = _evt$payload5.moveType, moveValue = _evt$payload5.moveValue;
           value = state.getIn(['viewer2D']).toJS();
           _t6 = moveType;
-          _context8.next = _t6 === TOP ? 13 : _t6 === BOTTOM ? 14 : _t6 === RIGHT ? 15 : _t6 === LEFT ? 16 : 17;
+          _context8.next = _t6 === TOP ? 14 : _t6 === BOTTOM ? 15 : _t6 === RIGHT ? 16 : _t6 === LEFT ? 17 : 18;
           break;
-        case 13:
-          value.f -= moveValue;
-          return _context8.abrupt("continue", 17);
         case 14:
-          value.f += moveValue;
-          return _context8.abrupt("continue", 17);
+          value.f -= moveValue;
+          return _context8.abrupt("continue", 18);
         case 15:
-          value.e += moveValue;
-          return _context8.abrupt("continue", 17);
+          value.f += moveValue;
+          return _context8.abrupt("continue", 18);
         case 16:
-          value.e -= moveValue;
-          return _context8.abrupt("continue", 17);
+          value.e += moveValue;
+          return _context8.abrupt("continue", 18);
         case 17:
-          if (compareSVGRect(value)) props.viewer2DActions.updateCameraView(value);
-          return _context8.abrupt("continue", 34);
+          value.e -= moveValue;
+          return _context8.abrupt("continue", 18);
         case 18:
+          if (compareSVGRect(value)) props.viewer2DActions.updateCameraView(value);
+          return _context8.abrupt("continue", 35);
+        case 19:
           defaulTitle = 'Untitle';
           props.projectActions.newProject();
           props.projectActions.rename(defaulTitle);
-          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 _context8.abrupt("continue", 34);
+          return _context8.abrupt("continue", 35);
         case 20:
+          _evt$payload6 = evt.payload, doorStyle = _evt$payload6.doorStyle, itemCDS = _evt$payload6.itemCDS, isAll = _evt$payload6.isAll;
+          props.itemsActions.setDoorStyle(doorStyle, itemCDS, isAll);
+          return _context8.abrupt("continue", 35);
+        case 21:
           _doorStyle = evt.payload.doorStyle;
           props.itemsActions.setInitialDoorStyle(_doorStyle.doorStyle);
-          return _context8.abrupt("continue", 34);
-        case 21:
-          props.projectActions.loadProject(evt.payload);
-          return _context8.abrupt("continue", 34);
+          return _context8.abrupt("continue", 35);
         case 22:
+          props.projectActions.loadProject(evt.payload);
+          return _context8.abrupt("continue", 35);
+        case 23:
           _value = state.getIn(['viewer2D']).toJS();
           _value.a -= 0.1;
           _value.d -= 0.1;
@@ -685,17 +1061,17 @@ function _handleExternalEvent() {
           _value.f += _value.SVGHeight * 0.1 / 2;
           _zoomValue = parseInt((_value.a - 0.5) / ZOOM_VARIABLE);
           if (!(_zoomValue > 404)) {
-            _context8.next = 23;
+            _context8.next = 24;
             break;
           }
           return _context8.abrupt("return");
-        case 23:
+        case 24:
           if (!(_zoomValue < 35 || Number.isNaN(_zoomValue))) {
-            _context8.next = 24;
+            _context8.next = 25;
             break;
           }
           return _context8.abrupt("return");
-        case 24:
+        case 25:
           while (!(_value.e <= 10)) {
             _value.e -= 0.1;
           }
@@ -709,8 +1085,8 @@ function _handleExternalEvent() {
             _value.f += 0.1;
           }
           if (compareSVGRect(_value)) props.viewer2DActions.updateCameraView(_value);
-          return _context8.abrupt("continue", 34);
-        case 25:
+          return _context8.abrupt("continue", 35);
+        case 26:
           _value2 = state.getIn(['viewer2D']).toJS();
           _value2.a += 0.1;
           _value2.d += 0.1;
@@ -718,31 +1094,31 @@ function _handleExternalEvent() {
           _value2.f -= _value2.SVGHeight * 0.1 / 2;
           _zoomValue2 = parseInt((_value2.a - 0.5) / ZOOM_VARIABLE);
           if (!(_zoomValue2 > 404)) {
-            _context8.next = 26;
+            _context8.next = 27;
             break;
           }
           return _context8.abrupt("return");
-        case 26:
+        case 27:
           if (!(_zoomValue2 < 35 || Number.isNaN(_zoomValue2))) {
-            _context8.next = 27;
+            _context8.next = 28;
             break;
           }
           return _context8.abrupt("return");
-        case 27:
-          if (compareSVGRect(_value2)) props.viewer2DActions.updateCameraView(_value2);
-          return _context8.abrupt("continue", 34);
         case 28:
-          props.projectActions.undo();
-          return _context8.abrupt("continue", 34);
+          if (compareSVGRect(_value2)) props.viewer2DActions.updateCameraView(_value2);
+          return _context8.abrupt("continue", 35);
         case 29:
-          props.projectActions.redo();
-          return _context8.abrupt("continue", 34);
+          props.projectActions.undo();
+          return _context8.abrupt("continue", 35);
         case 30:
-          _evt$payload5 = evt.payload, moldingInfo = _evt$payload5.moldingInfo, isGlobal = _evt$payload5.isGlobal;
-          props.itemsActions.setMolding(moldingInfo, isGlobal);
-          return _context8.abrupt("continue", 34);
+          props.projectActions.redo();
+          return _context8.abrupt("continue", 35);
         case 31:
-          _evt$payload6 = evt.payload, option = _evt$payload6.option, _value3 = _evt$payload6.value;
+          _evt$payload7 = evt.payload, moldingInfo = _evt$payload7.moldingInfo, isGlobal = _evt$payload7.isGlobal;
+          props.itemsActions.setMolding(moldingInfo, isGlobal);
+          return _context8.abrupt("continue", 35);
+        case 32:
+          _evt$payload8 = evt.payload, option = _evt$payload8.option, _value3 = _evt$payload8.value;
           if (option === PROJECT_SETTING_OPTION.UPDATE_CEIL_HEIGHT) {
             props.viewer2DActions.updateCeilHeight(_value3);
             props.viewer3DActions.update3DCeilHeight(_value3);
@@ -755,11 +1131,16 @@ function _handleExternalEvent() {
           } else if (option === PROJECT_SETTING_OPTION.CHANGE_WINDOW_DOOR_MEASURE) {
             props.viewer2DActions.changeWindowDoorMeasure(_value3);
           }
-          return _context8.abrupt("continue", 34);
-        case 32:
-          distancePayload = evt.payload;
-          props.itemsActions.changeDistance(distancePayload);
+          return _context8.abrupt("continue", 35);
         case 33:
+          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) : updatePropertyOfSelectedElement(layer.getIn(['lines', selectedLines.get(_i2)]), evt.payload, props.catalog, props.projectActions);
+          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) : updatePropertyOfSelectedElement(layer.getIn(['holes', selectedHoles.get(_i3)]), evt.payload, props.catalog, props.projectActions);
+          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) : updatePropertyOfSelectedElement(layer.getIn(['items', selectedItems.get(_i4)]), evt.payload, props.catalog, props.projectActions);
+          return _context8.abrupt("continue", 35);
+        case 34:
           // send scene object from 3DTool to HostApp using internalEvent
           (_props$onInternalEven2 = props.onInternalEvent) === null || _props$onInternalEven2 === void 0 || _props$onInternalEven2.call(props, {
             type: INTERNAL_EVENT_SYNC_SCENE,
@@ -767,7 +1148,7 @@ function _handleExternalEvent() {
               scene: state.scene.toJS()
             }
           });
-        case 34:
+        case 35:
         case "end":
           return _context8.stop();
       }