kitchen-simulator 2.0.5-flip-handle-open-door → 2.0.7-unselected-drag

package/es/catalog/holes/door-closet/planner-element.js

@@ -61,7 +61,7 @@ var STYLE_FNT0 = {
 };
 var EPSILON = 3;
 export default {
-  name: 'Closet',
+  name: 'Closet Door',
   prototype: 'holes',
   info: {
     title: 'Closet',

package/es/catalog/holes/door-exterior/planner-element.js

@@ -62,7 +62,7 @@ var STYLE_FNT0 = {
 };
 var EPSILON = 3;
 export default {
-  name: 'Exterior',
+  name: 'Exterior Door',
   prototype: 'holes',
   info: {
     title: 'Exterior',

package/es/catalog/holes/door-interior/planner-element.js

@@ -62,7 +62,7 @@ var STYLE_FNT0 = {
 };
 var EPSILON = 3;
 export default {
-  name: 'Interior',
+  name: 'Interior Door',
   prototype: 'holes',
   info: {
     title: 'Interior',

package/es/catalog/holes/door-sliding/planner-element.js

@@ -8,7 +8,7 @@ import { loadGLTF } from "../../utils/load-obj";
 import { OBJTYPE_MESH } from "../../../constants";
 var cached3DDoor = null;
 export default {
-  name: 'Sliding',
+  name: 'Sliding Door',
   prototype: 'holes',
   info: {
     tag: ['door'],

package/es/catalog/holes/window-vertical/planner-element.js

@@ -16,7 +16,7 @@ var STYLE_HOLE_SELECTED = {
 };
 var EPSILON = 3;
 export default {
-  name: 'window-vertical',
+  name: 'Vertical Window',
   prototype: 'holes',
   info: {
     tag: ['window'],

package/es/components/content.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import Viewer2D from "./viewer2d/viewer2d";
 import Viewer3D from "./viewer3d/viewer3d";
@@ -20,6 +20,14 @@ export default function Content(_ref, _ref2) {
     onInternalEvent = _ref.onInternalEvent;
   var projectActions = _ref2.projectActions;
   var mode = state.get('mode');
+
+  // Internal Event for unselect_all
+  useEffect(function () {
+    if (state.getIn(['scene', 'layers', 'layer-1', 'selected', 'vertices']).size + state.getIn(['scene', 'layers', 'layer-1', 'selected', 'lines']).size + state.getIn(['scene', 'layers', 'layer-1', 'selected', 'holes']).size + state.getIn(['scene', 'layers', 'layer-1', 'selected', 'areas']).size + state.getIn(['scene', 'layers', 'layer-1', 'selected', 'items']).size < 1) onInternalEvent === null || onInternalEvent === void 0 || onInternalEvent({
+      type: constants.INTERNAL_EVENT_UNSELECT_ALL,
+      value: null
+    });
+  }, [state.getIn(['scene', 'layers', 'layer-1', 'selected'])]);
   switch (mode) {
     // this mode is when view elevation
     case constants.MODE_ELEVATION_VIEW:

package/es/components/viewer2d/viewer2d.js

@@ -20,6 +20,7 @@ import { isEmpty } from "../../utils/helper"; // variables
 var pinFlag = false;
 var sFlag = false; //for all object move
 var sPoint = {}; //for all object move
+var mouseDownPoint = {}; // mouse clicked point
 var endPoint = {};
 var current_sel_obj_id = null;
 var allItemRect;
@@ -781,6 +782,10 @@ export default function Viewer2D(_ref, _ref2) {
     if (mode === constants.MODE_IDLE) {
       var elementData = extractElementData(event.target);
       if (!elementData) return;
+      mouseDownPoint = {
+        x: x,
+        y: y
+      };
       if (sCount < 2) {
         switch (elementData.prototype) {
           case 'lines':
@@ -1232,7 +1237,8 @@ export default function Viewer2D(_ref, _ref2) {
         itemsActions.endRotatingItem(x, y);
         break;
     }
-    if (elementPrototype) {
+    var draggingDistance = Math.sqrt((x - mouseDownPoint.x) * (x - mouseDownPoint.x) + (y - mouseDownPoint.y) * (y - mouseDownPoint.y));
+    if (elementPrototype && draggingDistance > constants.EPSILON) {
       elementID = state.getIn(['scene', 'layers', layerID, 'selected', elementPrototype]).first();
       var _currentObject = state.getIn(['scene', 'layers', layerID, elementPrototype, elementID]);
       onInternalEvent === null || onInternalEvent === void 0 || onInternalEvent({

package/es/constants.js

@@ -653,6 +653,18 @@ export var PROJECT_SETTING_OPTION = {
   CHANGE_WALL_CABINET_MEASURE: CHANGE_WALL_CABINET_MEASURE,
   CHANGE_WINDOW_DOOR_MEASURE: CHANGE_WINDOW_DOOR_MEASURE
 };
+export var HOLE_NAMES = {
+  WINDOW_CLEAR: 'Window',
+  WINDOW_CROSS: 'Cross Window',
+  WINDOW_DOUBLE_HUNG: 'Double Hung Window',
+  WINDOW_VERTICAL: 'Vertical Window',
+  DOOR_CLOSET: 'Closet Door',
+  DOOR_EXTERIOR: 'Exterior Door',
+  DOOR_INTERIOR: 'Interior Door',
+  DOOR_SLIDING: 'Sliding Door',
+  DOOR_FRAMED: 'Framed Doorway',
+  DOOR_FRAMELESS: 'FrameLess Doorway'
+};
 
 // direction type
 export var LEFT = 'Left';
@@ -690,6 +702,7 @@ export var EXTERNAL_EVENT_TOGGLE_TO_2D = 'EXTERNAL_EVENT_TOGGLE_TO_2D';
 export var EXTERNAL_EVENT_TOGGLE_TO_ELEVATION = 'EXTERNAL_EVENT_TOGGLE_TO_ELEVATION';
 export var EXTERNAL_EVENT_ADD_WALL = 'EXTERNAL_EVENT_ADD_WALL';
 export var EXTERNAL_EVENT_ADD_ITEM = 'EXTERNAL_EVENT_ADD_ITEM';
+export var EXTERNAL_EVENT_ADD_HOLE = 'EXTERNAL_EVENT_ADD_HOLE';
 export var EXTERNAL_EVENT_MOVE_PAN = 'EXTERNAL_EVENT_MOVE_PAN';
 export var EXTERNAL_EVENT_NEW_PROJECT = 'EXTERNAL_EVENT_NEW_PROJECT';
 export var EXTERNAL_EVENT_CHANGE_DOORSTYLE = 'EXTERNAL_EVENT_CHANGE_DOORSTYLE';
@@ -705,6 +718,7 @@ export var EXTERNAL_EVENT_UPDATE_ATTRIBUTE = 'EXTERNAL_EVENT_UPDATE_ATTRIBUTE';
 export var EXTERNAL_EVENT_UPDATE_PROPERTY = 'EXTERNAL_EVENT_UPDATE_PROPERTY'; // update the element's property (flip_doorhandle, open_doors...) in the property window
 
 // internal event type
+export var INTERNAL_EVENT_UNSELECT_ALL = 'INTERNAL_EVENT_UNSELECT_ALL';
 export var INTERNAL_EVENT_SELECT_ELEMENT = 'INTERNAL_EVENT_SELECT_ELEMENT';
 export var INTERNAL_EVENT_DRAG_ELEMENT = 'INTERNAL_EVENT_DRAG_ELEMENT';
 export var INTERNAL_EVENT_DRAW_ELEMENT = 'INTERNAL_EVENT_DRAW_ELEMENT';

package/es/devLiteRenderer.js

@@ -5,8 +5,8 @@ import React, { useState, useEffect } from 'react';
 import ContainerDimensions from 'react-container-dimensions';
 import projectItemsCatalog from "./mocks/projectItemsCatalog.json";
 import mockProps from "./mocks/mockProps.json";
-import mockDataBundle from "./mocks/dataBundle2.json";
 import cabinetPaylod from "./mocks/cabinetPayload2.json";
+import appliancePaylod from "./mocks/appliancePayload.json";
 import doorStylePaylod2 from "./mocks/doorStylePayload2.json";
 import itemCDSPayload from "./mocks/itemCDSPayload.json";
 import rectangleData from "./mocks/rectangleShape.json";
@@ -15,7 +15,7 @@ import distancePayload from "./mocks/distancePayload.json";
 import ReactDOM from 'react-dom';
 import LiteRenderer from "./LiteRenderer";
 import { Button } from 'antd';
-import { LEFT, RIGHT, TOP, BOTTOM, EXTERNAL_EVENT_ADD_ITEM, EXTERNAL_EVENT_ADD_WALL, EXTERNAL_EVENT_TOGGLE_TO_3D, EXTERNAL_EVENT_TOGGLE_TO_2D, EXTERNAL_EVENT_TOGGLE_TO_ELEVATION, EXTERNAL_EVENT_MOVE_PAN, 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, EXTERNAL_EVENT_UNDO, EXTERNAL_EVENT_REDO, EXTERNAL_EVENT_SET_MOLDING, EXTERNAL_EVENT_PROJECT_SETTING, PROJECT_SETTING_OPTION, EXTERNAL_EVENT_SYNC_SCENE, EXTERNAL_EVENT_LOAD_PROJECT, INTERNAL_EVENT_ITEMS_CATALOG, EXTERNAL_EVENT_UPDATE_ATTRIBUTE, BACK_DIST_ANG, ATT_ITEM_POS, ATT_ITEM_ROTATION, ATT_LINE_LENGTH, EXTERNAL_EVENT_UPDATE_PROPERTY, PROP_FLIP_DOOR_HANDLE, PROP_OPEN_DOORS } from "./constants";
+import { LEFT, RIGHT, TOP, BOTTOM, EXTERNAL_EVENT_ADD_ITEM, EXTERNAL_EVENT_ADD_WALL, EXTERNAL_EVENT_TOGGLE_TO_3D, EXTERNAL_EVENT_TOGGLE_TO_2D, EXTERNAL_EVENT_TOGGLE_TO_ELEVATION, EXTERNAL_EVENT_MOVE_PAN, 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, EXTERNAL_EVENT_UNDO, EXTERNAL_EVENT_REDO, EXTERNAL_EVENT_SET_MOLDING, EXTERNAL_EVENT_PROJECT_SETTING, PROJECT_SETTING_OPTION, EXTERNAL_EVENT_SYNC_SCENE, EXTERNAL_EVENT_UPDATE_ATTRIBUTE, BACK_DIST_ANG, ATT_ITEM_POS, ATT_ITEM_ROTATION, ATT_LINE_LENGTH, EXTERNAL_EVENT_UPDATE_PROPERTY, PROP_FLIP_DOOR_HANDLE, PROP_OPEN_DOORS, EXTERNAL_EVENT_LOAD_PROJECT, INTERNAL_EVENT_ITEMS_CATALOG, EXTERNAL_EVENT_ADD_HOLE, HOLE_NAMES } from "./constants";
 
 // --- renderer props ---
 var options = {
@@ -371,7 +371,38 @@ function WorkSpace(props) {
       };
       setExternalEvent(evt);
     }
-  }, "Open Doors")), /*#__PURE__*/React.createElement(LiteRenderer, {
+  }, "Open Doors"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_ADD_HOLE,
+        payload: {
+          holeName: HOLE_NAMES.WINDOW_CROSS
+        }
+      };
+      setExternalEvent(evt);
+    }
+  }, "Add Hole (Cross Window)"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_ADD_HOLE,
+        payload: {
+          holeName: HOLE_NAMES.DOOR_EXTERIOR
+        }
+      };
+      setExternalEvent(evt);
+    }
+  }, "Add Hole (DOOR_EXTERIOR)"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_ADD_ITEM,
+        payload: appliancePaylod
+      };
+      setExternalEvent(evt);
+    }
+  }, "Add Appliance (30 Bottom Freezer)")), /*#__PURE__*/React.createElement(LiteRenderer, {
     width: props.width,
     height: props.height,
     projectElement: mockProps.projectElement,

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

@@ -5,13 +5,14 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { Map } from 'immutable';
-import { EXTERNAL_EVENT_ADD_WALL, EXTERNAL_EVENT_TOGGLE_TO_3D, EXTERNAL_EVENT_TOGGLE_TO_2D, EXTERNAL_EVENT_TOGGLE_TO_ELEVATION, EXTERNAL_EVENT_MOVE_PAN, MODE_IDLE, MODE_2D_PAN, EXTERNAL_EVENT_ADD_ITEM, ARRAY_3D_MODES, MODE_IDLE_3D, MODE_ELEVATION_VIEW, MODE_DRAWING_LINE, TOP, BOTTOM, LEFT, RIGHT, EXTERNAL_EVENT_NEW_PROJECT, EXTERNAL_EVENT_CHANGE_DOORSTYLE, EXTERNAL_EVENT_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, 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 } from "../constants";
+import { EXTERNAL_EVENT_ADD_WALL, EXTERNAL_EVENT_TOGGLE_TO_3D, EXTERNAL_EVENT_TOGGLE_TO_2D, EXTERNAL_EVENT_TOGGLE_TO_ELEVATION, EXTERNAL_EVENT_MOVE_PAN, MODE_IDLE, MODE_2D_PAN, EXTERNAL_EVENT_ADD_ITEM, ARRAY_3D_MODES, MODE_IDLE_3D, MODE_ELEVATION_VIEW, MODE_DRAWING_LINE, TOP, BOTTOM, LEFT, RIGHT, EXTERNAL_EVENT_NEW_PROJECT, EXTERNAL_EVENT_CHANGE_DOORSTYLE, EXTERNAL_EVENT_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 { 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) {
@@ -445,7 +446,7 @@ function _parseTempPlaceholdersFromCabinetPayload() {
 }
 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;
@@ -473,54 +474,6 @@ function _updateCabinetPayload() {
   }));
   return _updateCabinetPayload.apply(this, arguments);
 }
-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;
-    return _regeneratorRuntime.wrap(function (_context5) {
-      while (1) switch (_context5.prev = _context5.next) {
-        case 0:
-          catalog = state.getIn(['catalog']).toJS(); // add item to catalog of state
-          updatedStructureJson = _objectSpread(_objectSpread({}, element.structure_json), element.structure_json.tempPlaceholders[0].structure);
-          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), {}, {
-            outlineSVGData: outlineSVGData,
-            type: 'cabinet',
-            render2DItem: render2DItem,
-            render3DItem: render3DItem
-          }));
-          if (catalogInstance !== null && catalogInstance !== void 0 && catalogInstance.validateElement(elementJs)) {
-            catalogInstance.registerElement(elementJs);
-            projectActions.addElementToCatalog(elementJs);
-          }
-        case 3:
-        case "end":
-          return _context5.stop();
-      }
-    }, _callee5);
-  }));
-  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) {
@@ -783,21 +736,21 @@ function updateAttributeOfSelectedElement(element, attrPayload, state, layer, pr
             {
               var _line = layer.lines.get(element.line);
               var _layer$vertices$get5 = layer.vertices.get(_line.vertices.get(0)),
-                _x9 = _layer$vertices$get5.x,
+                _x5 = _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,
+                _x6 = _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 _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 = _x0 - (_lengthValue + _halfWidthLength) * Math.cos(_alpha);
+              var _xp = _x6 - (_lengthValue + _halfWidthLength) * Math.cos(_alpha);
               var _yp = _y2 - (_lengthValue + _halfWidthLength) * Math.sin(_alpha);
-              var _offset = GeometryUtils.pointPositionOnLineSegment(_x9, _y, _x0, _y2, _xp, _yp);
+              var _offset = GeometryUtils.pointPositionOnLineSegment(_x5, _y, _x6, _y2, _xp, _yp);
               /*
               if (x0 > x1) offset = 1 - offset;
               */
@@ -869,12 +822,67 @@ projectActions) {
     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, 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;
+          }
+          // make placeholders of element and tempPlaceholder
+          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
+            }
+          });
+          _context5.next = 2;
+          return updateCabinetPayload(element);
+        case 2:
+          elementJs = _context5.sent;
+        case 3:
+          elementJs = _objectSpread(_objectSpread({}, elementJs), {}, {
+            outlineSVGData: outlineSVGData,
+            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 4:
+        case "end":
+          return _context5.stop();
+      }
+    }, _callee5);
+  }));
+  return _addItemToCatalog.apply(this, arguments);
+}
 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, _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;
+    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:
@@ -882,7 +890,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_UPDATE_ATTRIBUTE ? 32 : _t5 === EXTERNAL_EVENT_UPDATE_PROPERTY ? 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
@@ -958,23 +966,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;
@@ -1005,45 +1013,48 @@ function _handleExternalEvent() {
           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;
@@ -1051,17 +1062,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;
           }
@@ -1075,8 +1086,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;
@@ -1084,31 +1095,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);
@@ -1121,16 +1132,16 @@ function _handleExternalEvent() {
           } else if (option === PROJECT_SETTING_OPTION.CHANGE_WINDOW_DOOR_MEASURE) {
             props.viewer2DActions.changeWindowDoorMeasure(_value3);
           }
-          return _context8.abrupt("continue", 34);
-        case 32:
+          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", 34);
-        case 33:
+          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,
@@ -1138,7 +1149,7 @@ function _handleExternalEvent() {
               scene: state.scene.toJS()
             }
           });
-        case 34:
+        case 35:
         case "end":
           return _context8.stop();
       }

package/lib/catalog/holes/door-closet/planner-element.js

@@ -70,7 +70,7 @@ var STYLE_FNT0 = {
 };
 var EPSILON = 3;
 var _default = exports["default"] = {
-  name: 'Closet',
+  name: 'Closet Door',
   prototype: 'holes',
   info: {
     title: 'Closet',

package/lib/catalog/holes/door-exterior/planner-element.js

@@ -71,7 +71,7 @@ var STYLE_FNT0 = {
 };
 var EPSILON = 3;
 var _default = exports["default"] = {
-  name: 'Exterior',
+  name: 'Exterior Door',
   prototype: 'holes',
   info: {
     title: 'Exterior',

package/lib/catalog/holes/door-interior/planner-element.js

@@ -71,7 +71,7 @@ var STYLE_FNT0 = {
 };
 var EPSILON = 3;
 var _default = exports["default"] = {
-  name: 'Interior',
+  name: 'Interior Door',
   prototype: 'holes',
   info: {
     title: 'Interior',

package/lib/catalog/holes/door-sliding/planner-element.js

@@ -17,7 +17,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 
 var cached3DDoor = null;
 var _default = exports["default"] = {
-  name: 'Sliding',
+  name: 'Sliding Door',
   prototype: 'holes',
   info: {
     tag: ['door'],

package/lib/catalog/holes/window-vertical/planner-element.js

@@ -25,7 +25,7 @@ var STYLE_HOLE_SELECTED = {
 };
 var EPSILON = 3;
 var _default = exports["default"] = {
-  name: 'window-vertical',
+  name: 'Vertical Window',
   prototype: 'holes',
   info: {
     tag: ['window'],