kitchen-simulator 1.0.0-clark.85 → 1.0.0-clark.91

package/es/LiteKitchenConfigurator.js

@@ -84,8 +84,7 @@ var LiteKitchenConfigurator = /*#__PURE__*/function (_Component) {
       redirectURL: '',
       snackBarMessage: '',
       isSaved: false,
-      isLeaving: false,
-      stateCatalog: _this.props.catalog
+      isLeaving: false
     };
 
     // For UTM tracking
@@ -339,7 +338,6 @@ var LiteKitchenConfigurator = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentWillReceiveProps",
     value: function componentWillReceiveProps(nextProps) {
-      var _oldState$catalog, _plannerState$catalog;
       var stateExtractor = nextProps.stateExtractor,
         state = nextProps.state,
         projectActions = nextProps.projectActions,
@@ -351,15 +349,6 @@ var LiteKitchenConfigurator = /*#__PURE__*/function (_Component) {
         handleExternalEvent(nextProps);
       }
       var plannerState = stateExtractor(state);
-      var oldState = stateExtractor(this.props.state);
-      if ((oldState === null || oldState === void 0 || (_oldState$catalog = oldState.catalog) === null || _oldState$catalog === void 0 ? void 0 : _oldState$catalog.elements) !== (plannerState === null || plannerState === void 0 || (_plannerState$catalog = plannerState.catalog) === null || _plannerState$catalog === void 0 ? void 0 : _plannerState$catalog.elements)) {
-        // copy state.catalog to the props.catalog
-        // let catalog = this.state.stateCatalog;
-        // console.log('111111', plannerState?.catalog?.elements.toJS());
-        // catalog.elements = plannerState?.catalog?.elements.toJS();
-        // console.log('222222', catalog);
-        // this.setState({ stateCatalog: catalog });
-      }
       var catalogReady = plannerState.getIn(['catalog', 'ready']);
       if (!catalogReady) {
         projectActions.initCatalog(catalog);
@@ -432,7 +421,7 @@ var LiteKitchenConfigurator = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/React.createElement(Content, _extends({
         width: contentW,
         height: contentH,
-        catalog: this.state.stateCatalog,
+        catalog: this.props.catalog,
         state: extractedState,
         toolBar: this.state.toolbar,
         setToolbar: this.setToolbar,
@@ -441,7 +430,8 @@ var LiteKitchenConfigurator = /*#__PURE__*/function (_Component) {
       }, props, {
         onWheel: function onWheel(event) {
           return event.preventDefault();
-        }
+        },
+        onInternalEvent: this.props.onInternalEvent
       }))));
     }
   }]);
@@ -460,7 +450,8 @@ LiteKitchenConfigurator.propTypes = {
   footerbarComponents: PropTypes.array,
   customContents: PropTypes.object,
   softwareSignature: PropTypes.string,
-  configData: PropTypes.object
+  configData: PropTypes.object,
+  onInternalEvent: PropTypes.func
 };
 LiteKitchenConfigurator.contextTypes = {
   store: PropTypes.object.isRequired

package/es/LiteRenderer.js

@@ -8,7 +8,7 @@ import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-var _excluded = ["width", "height", "projectElement", "dataBundle", "configData", "options", "user", "auth", "featureFlags", "sentry", "analytics", "externalEvent", "onError"];
+var _excluded = ["width", "height", "projectElement", "dataBundle", "configData", "options", "user", "auth", "featureFlags", "sentry", "analytics", "externalEvent", "onInternalEvent", "onError"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 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; }
@@ -153,6 +153,7 @@ export default function LiteRenderer(props) {
     sentry = props.sentry,
     analytics = props.analytics,
     externalEvent = props.externalEvent,
+    onInternalEvent = props.onInternalEvent,
     onError = props.onError,
     passThrough = _objectWithoutProperties(props, _excluded);
 
@@ -471,7 +472,8 @@ export default function LiteRenderer(props) {
     },
     data: data,
     configData: configData,
-    externalEvent: externalEvent
+    externalEvent: externalEvent,
+    onInternalEvent: onInternalEvent
   }, passThrough)))));
 }
 
@@ -495,6 +497,7 @@ LiteRenderer.propTypes = {
     environment: PropTypes.string
   }),
   externalEvent: PropTypes.object,
+  onInternalEvent: PropTypes.func,
   onError: PropTypes.func,
   store: PropTypes.object
 };

package/es/components/content.js

@@ -16,7 +16,8 @@ export default function Content(_ref, _ref2) {
     setToolbar = _ref.setToolbar,
     replaceCabinet = _ref.replaceCabinet,
     keyDownEnable = _ref.keyDownEnable,
-    catalog = _ref.catalog;
+    catalog = _ref.catalog,
+    onInternalEvent = _ref.onInternalEvent;
   var projectActions = _ref2.projectActions;
   var mode = state.get('mode');
   switch (mode) {
@@ -40,7 +41,8 @@ export default function Content(_ref, _ref2) {
         setToolbar: setToolbar,
         replaceCabinet: replaceCabinet,
         keyDownEnable: keyDownEnable,
-        downloadFlag: false
+        downloadFlag: false,
+        onInternalEvent: onInternalEvent
       });
     case constants.MODE_3D_FIRST_PERSON:
       return /*#__PURE__*/React.createElement(Viewer3DFirstPerson, {
@@ -78,7 +80,8 @@ export default function Content(_ref, _ref2) {
         width: width,
         height: height,
         setToolbar: setToolbar,
-        replaceCabinet: replaceCabinet
+        replaceCabinet: replaceCabinet,
+        onInternalEvent: onInternalEvent
       });
     case constants.MODE_ROTATING_ITEM_3D:
     case constants.MODE_DRAGGING_ITEM_3D:
@@ -94,7 +97,8 @@ export default function Content(_ref, _ref2) {
         setToolbar: setToolbar,
         replaceCabinet: replaceCabinet,
         keyDownEnable: keyDownEnable,
-        downloadFlag: false
+        downloadFlag: false,
+        onInternalEvent: onInternalEvent
       });
 
     // case constants.MODE_CONFIGURING_PROJECT:
@@ -119,7 +123,8 @@ Content.propTypes = {
   state: PropTypes.object.isRequired,
   width: PropTypes.number.isRequired,
   height: PropTypes.number.isRequired,
-  replaceCabinet: PropTypes.func.isRequired
+  replaceCabinet: PropTypes.func.isRequired,
+  onInternalEvent: PropTypes.func.isRequired
 };
 Content.contextTypes = {
   projectActions: PropTypes.object.isRequired

package/es/components/viewer2d/viewer2d.js

@@ -6,7 +6,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { ReactSVGPanZoom, TOOL_AUTO, TOOL_NONE, TOOL_PAN, TOOL_ZOOM_IN, TOOL_ZOOM_OUT } from 'react-svg-pan-zoom';
 import * as constants from "../../constants";
-import { DECIMAL_PLACES_2, LINE_THICKNESS, MIN_ANGLE_DISALLOW_DRAW_WALL, MODE_ELEVATION_VIEW, MODE_IDLE, UNIT_ANGLE } from "../../constants";
+import { DECIMAL_PLACES_2, LINE_THICKNESS, MIN_ANGLE_DISALLOW_DRAW_WALL, MODE_ELEVATION_VIEW, MODE_IDLE, UNIT_ANGLE, INTERNAL_EVENT_SELECT_ELEMENT, INTERNAL_EVENT_DRAG_ELEMENT, INTERNAL_EVENT_DRAW_ELEMENT, INTERNAL_EVENT_ROTATE_ELEMENT } from "../../constants";
 import State from "./state";
 import * as SharedStyle from "../../shared-style";
 import { RulerX, RulerY } from "./export";
@@ -123,7 +123,8 @@ export default function Viewer2D(_ref, _ref2) {
     width = _ref.width,
     height = _ref.height,
     setToolbar = _ref.setToolbar,
-    replaceCabinet = _ref.replaceCabinet;
+    replaceCabinet = _ref.replaceCabinet,
+    onInternalEvent = _ref.onInternalEvent;
   var viewer2DActions = _ref2.viewer2DActions,
     linesActions = _ref2.linesActions,
     holesActions = _ref2.holesActions,
@@ -780,35 +781,42 @@ export default function Viewer2D(_ref, _ref2) {
     if (mode === constants.MODE_IDLE) {
       var elementData = extractElementData(event.target);
       if (!elementData) return;
-      if (sCount < 2) switch (elementData.prototype) {
-        case 'lines':
-          if (elementData.selected) {
-            if (elementData.part === 'remove') break;else if (elementData.part === 'elevation') break;
-            linesActions.beginDraggingLine(elementData.layer, elementData.id, x, y, state.snapMask);
-          }
-          break;
-        case 'vertices':
-          verticesActions.beginDraggingVertex(elementData.layer, elementData.id, x, y, state.snapMask);
-          break;
-        case 'items':
-          setToolbar('');
-          current_sel_obj_id = elementData.id;
-          if (elementData.part === 'rotation-anchor') itemsActions.beginRotatingItem(elementData.layer, elementData.id, x, y);else if (elementData.part === 'remove') break;else if (elementData.part === 'duplicate') break;else if (elementData.part === 'warning_edit') break;else {
-            // closes the setting dialog
-            if (document.getElementById('setting_dialog')) {
-              document.getElementById('setting_dialog').style.display = 'none';
+      if (sCount < 2) {
+        switch (elementData.prototype) {
+          case 'lines':
+            if (elementData.selected) {
+              if (elementData.part === 'remove') break;else if (elementData.part === 'elevation') break;
+              linesActions.beginDraggingLine(elementData.layer, elementData.id, x, y, state.snapMask);
             }
-            itemsActions.selectItem(elementData.layer, elementData.id);
-            // projectActions.setMode(constants.MODE_DRAGGING_ITEM);
-            itemsActions.beginDraggingItem(elementData.layer, elementData.id, x, y);
-            replaceCabinet(false);
-          }
-          break;
-        case 'holes':
-          if (elementData.selected) holesActions.beginDraggingHole(elementData.layer, elementData.id, x, y);
-          break;
-        default:
-          break;
+            break;
+          case 'vertices':
+            verticesActions.beginDraggingVertex(elementData.layer, elementData.id, x, y, state.snapMask);
+            break;
+          case 'items':
+            setToolbar('');
+            current_sel_obj_id = elementData.id;
+            if (elementData.part === 'rotation-anchor') itemsActions.beginRotatingItem(elementData.layer, elementData.id, x, y);else if (elementData.part === 'remove') break;else if (elementData.part === 'duplicate') break;else if (elementData.part === 'warning_edit') break;else {
+              // closes the setting dialog
+              if (document.getElementById('setting_dialog')) {
+                document.getElementById('setting_dialog').style.display = 'none';
+              }
+              itemsActions.selectItem(elementData.layer, elementData.id);
+              // projectActions.setMode(constants.MODE_DRAGGING_ITEM);
+              itemsActions.beginDraggingItem(elementData.layer, elementData.id, x, y);
+              replaceCabinet(false);
+            }
+            break;
+          case 'holes':
+            if (elementData.selected) holesActions.beginDraggingHole(elementData.layer, elementData.id, x, y);
+            break;
+          default:
+            break;
+        }
+        var currentObject = state.getIn(['scene', 'layers', layerID, elementData.prototype, elementData.id]);
+        onInternalEvent === null || onInternalEvent === void 0 || onInternalEvent({
+          type: INTERNAL_EVENT_SELECT_ELEMENT,
+          value: currentObject.toJS()
+        });
       } else {
         sPoint.x = x;
         sPoint.y = y;
@@ -844,10 +852,47 @@ export default function Viewer2D(_ref, _ref2) {
       y = _mapCursorPosition3.y;
     var vertices = state.getIn(['scene', 'layers', layerID, 'vertices']).toJS();
     var lines = state.getIn(['scene', 'layers', layerID, 'lines']).toJS();
+    var elementData = extractElementData(event.target);
+    var selectedLayer = scene.getIn(['layers', layerID]);
+    var elementPrototype = null;
+    var elementID = null;
+    var internalType = '';
+    switch (mode) {
+      case constants.MODE_DRAWING_LINE:
+        elementPrototype = 'lines';
+        internalType = INTERNAL_EVENT_DRAW_ELEMENT;
+        break;
+      case constants.MODE_DRAWING_HOLE:
+        elementPrototype = 'holes';
+        internalType = INTERNAL_EVENT_DRAW_ELEMENT;
+        break;
+      case constants.MODE_DRAWING_ITEM:
+        elementPrototype = 'items';
+        internalType = INTERNAL_EVENT_DRAW_ELEMENT;
+        break;
+      case constants.MODE_DRAGGING_LINE:
+        elementPrototype = 'lines';
+        internalType = INTERNAL_EVENT_DRAG_ELEMENT;
+        break;
+      case constants.MODE_DRAGGING_HOLE:
+        elementPrototype = 'holes';
+        internalType = INTERNAL_EVENT_DRAG_ELEMENT;
+        break;
+      case constants.MODE_DRAGGING_ITEM:
+        elementPrototype = 'items';
+        internalType = INTERNAL_EVENT_DRAG_ELEMENT;
+        break;
+      case constants.MODE_DRAGGING_VERTEX:
+        elementPrototype = 'lines';
+        internalType = INTERNAL_EVENT_DRAG_ELEMENT;
+        break;
+      case constants.MODE_ROTATING_ITEM:
+        elementPrototype = 'items';
+        internalType = INTERNAL_EVENT_ROTATE_ELEMENT;
+        break;
+    }
     switch (mode) {
       case constants.MODE_IDLE:
-        var elementData = extractElementData(event.target);
-        var selectedLayer = scene.getIn(['layers', layerID]);
         switch (elementData ? elementData.prototype : 'none') {
           case 'areas':
             if (document.getElementById('setting_dialog')) {
@@ -1187,6 +1232,14 @@ export default function Viewer2D(_ref, _ref2) {
         itemsActions.endRotatingItem(x, y);
         break;
     }
+    if (elementPrototype) {
+      elementID = state.getIn(['scene', 'layers', layerID, 'selected', elementPrototype]).first();
+      var _currentObject = state.getIn(['scene', 'layers', layerID, elementPrototype, elementID]);
+      onInternalEvent === null || onInternalEvent === void 0 || onInternalEvent({
+        type: internalType,
+        value: _currentObject.toJS()
+      });
+    }
     event.stopPropagation();
   };
   var onChangeValue = function onChangeValue(value) {

package/es/components/viewer3d/viewer3d.js

@@ -19,7 +19,7 @@ import { checkCabinetOverlap, createBacksplash, deleteSpecifiedMeshObjects, fVLi
 import { disposeObject, disposeScene } from "./three-memory-cleaner";
 import diff from 'immutablediff';
 import * as SharedStyle from "../../shared-style";
-import { BASE_CABINET_LAYOUTPOS, MODE_3D_VIEW, MODE_DRAGGING_ITEM_3D, MODE_DRAWING_HOLE_3D, MODE_DRAWING_ITEM_3D, MODE_ELEVATION_VIEW, MODE_IDLE_3D, MODE_ROTATING_ITEM_3D, SECONDARY_PURPLE_COLOR, TALL_CABINET_LAYOUTPOS, UNIT_CENTIMETER, WALL_CABINET_LAYOUTPOS } from "../../constants";
+import { BASE_CABINET_LAYOUTPOS, MODE_3D_VIEW, MODE_DRAGGING_ITEM_3D, MODE_DRAWING_HOLE_3D, MODE_DRAWING_ITEM_3D, MODE_ELEVATION_VIEW, MODE_IDLE_3D, MODE_ROTATING_ITEM_3D, SECONDARY_PURPLE_COLOR, TALL_CABINET_LAYOUTPOS, UNIT_CENTIMETER, WALL_CABINET_LAYOUTPOS, INTERNAL_EVENT_SELECT_ELEMENT, INTERNAL_EVENT_DRAG_ELEMENT, INTERNAL_EVENT_DRAW_ELEMENT, INTERNAL_EVENT_ROTATE_ELEMENT, MODE_ROTATING_ITEM, MODE_DRAGGING_HOLE_3D } from "../../constants";
 import { isUndefined } from 'util';
 import { verticesDistance } from "../../utils/geometry";
 import { convert } from "../../utils/convert-units-lite";
@@ -1274,7 +1274,18 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
               }
             }
             if (selectedObject !== undefined) {
-              var selectedItem = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
+              // get selected object from planData.sceneGraph
+              var selectedItem = null;
+              switch (true) {
+                case 'itemID' in selectedObject:
+                  selectedItem = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
+                  break;
+                case 'holeID' in selectedObject:
+                  selectedItem = planData.sceneGraph.layers[selectedObject.layerID].holes[selectedObject.holeID];
+                  break;
+                default:
+                  break;
+              }
               sPoint.set(Point.x, Point.y);
               if (transflag == 0) {
                 scene3D.remove(toolObj);
@@ -1340,7 +1351,8 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
         }
       };
       this.mouseUpEvent = function (event) {
-        var _selObj$object, _selObj$object2;
+        var internalType = ''; // internalEvent type - select/drag/draw
+        var selectedElement; // internalEvent data
         firstMove = 0;
         var altitude = 0;
         if (allItemRect && allItemRect.cur && allItemRect.cur.itemInfo !== undefined) {
@@ -1377,6 +1389,14 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
           isInitialPhase = true;
           return;
         }
+        switch (_this2.props.state.mode) {
+          case MODE_DRAGGING_ITEM_3D:
+            internalType = INTERNAL_EVENT_DRAG_ELEMENT;
+            break;
+          case MODE_ROTATING_ITEM_3D:
+            internalType = INTERNAL_EVENT_ROTATE_ELEMENT;
+            break;
+        }
         if (_this2.props.state.mode == MODE_DRAGGING_ITEM_3D) {
           _this2.context.itemsActions.endDraggingItem3D();
         }
@@ -1458,56 +1478,62 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
                   currentObject = currentObject.parent;
                 }
                 isSelected = true;
-                setTimeout(function () {
-                  getDistances(layer);
-                  var selectedItem = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
-                  if (isUndefined(selectedItem)) return;
-                  var selItem = _this2.props.state.scene.layers.get(selectedObject.layerID).items.get(selectedObject.itemID);
-                  var itemPos = selectedItem.position.clone();
-                  if (intersects[_i10].object.parent && intersects[_i10].object.parent.parent.userData.itemId === selectedItem.userData.itemId) {
-                    toolObj.position.set(intersects[_i10].point.x, intersects[_i10].point.y, intersects[_i10].point.z);
-                  } else {
-                    toolObj.position.set(planData.plan.position.x + itemPos.x, selItem.category === 'lighting' ? -planData.plan.position.y - selItem.properties.get('height').get('length') : planData.plan.position.y + selectedItem.children[0].position.y, planData.plan.position.z + itemPos.z);
-                  }
-                  scene3D.add(toolObj);
-                  _this2.setState({
-                    toolObj: toolObj
-                  });
-                  // showItemButtons(layer.getIn(['items', selectedObject.itemID]), currentObject, event, camera, this.renderer);
-                  var pointArray = [],
-                    cnt = 0;
-                  pointArray.push([fVLine[0].userData.distance, 90]);
-                  pointArray.push([fVLine[1].userData.distance, -90]);
-                  pointArray.push([fVLine[2].userData.distance, 180]);
-                  pointArray.push([fVLine[3].userData.distance, 0]);
-                  pointArray.forEach(function (pointElement, index) {
-                    if (pointElement[0] == undefined) pointArray[index][0] = 0;
-                  });
-                  pointArray.forEach(function (pointElement) {
-                    if (pointElement[0] == 0) cnt++;
-                  });
-                  if (cnt == 4 || cnt == 3) {
-                    pointArray[0][0] = 100;
-                    pointArray[1][0] = 100;
-                  }
-                  actions.itemsActions.storeDistArray(layer.id, selectedObject.itemID, pointArray);
+                getDistances(layer);
+                var selectedItem = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
+                if (isUndefined(selectedItem)) return;
+                selectedElement = _this2.props.state.scene.layers.get(selectedObject.layerID).items.get(selectedObject.itemID);
+                var itemPos = selectedItem.position.clone();
+                if (intersects[_i10].object.parent && intersects[_i10].object.parent.parent.userData.itemId === selectedItem.userData.itemId) {
+                  toolObj.position.set(intersects[_i10].point.x, intersects[_i10].point.y, intersects[_i10].point.z);
+                } else {
+                  toolObj.position.set(planData.plan.position.x + itemPos.x, selectedElement.category === 'lighting' ? -planData.plan.position.y - selectedElement.properties.get('height').get('length') : planData.plan.position.y + selectedItem.children[0].position.y, planData.plan.position.z + itemPos.z);
+                }
+                scene3D.add(toolObj);
+                _this2.setState({
+                  toolObj: toolObj
+                });
+                // showItemButtons(layer.getIn(['items', selectedObject.itemID]), currentObject, event, camera, this.renderer);
+                var pointArray = [],
+                  cnt = 0;
+                pointArray.push([fVLine[0].userData.distance, 90]);
+                pointArray.push([fVLine[1].userData.distance, -90]);
+                pointArray.push([fVLine[2].userData.distance, 180]);
+                pointArray.push([fVLine[3].userData.distance, 0]);
+                pointArray.forEach(function (pointElement, index) {
+                  if (pointElement[0] == undefined) pointArray[index][0] = 0;
                 });
+                pointArray.forEach(function (pointElement) {
+                  if (pointElement[0] == 0) cnt++;
+                });
+                if (cnt == 4 || cnt == 3) {
+                  pointArray[0][0] = 100;
+                  pointArray[1][0] = 100;
+                }
+                actions.itemsActions.storeDistArray(layer.id, selectedObject.itemID, pointArray);
+                internalType = internalType ? internalType : INTERNAL_EVENT_SELECT_ELEMENT;
               } else {
                 if (selectedObject) {
+                  var elementID = null;
+                  var elementPrototype = null;
                   switch (true) {
                     case 'holeID' in selectedObject:
-                      if (selObj !== null && selObj !== void 0 && (_selObj$object = selObj.object) !== null && _selObj$object !== void 0 && _selObj$object.name.includes('transHole')) {
-                        actions.holesActions.endDraggingHole3D(sPoint.x, sPoint.y);
-                      }
-                      break;
                     case 'lineID' in selectedObject:
-                      if (selObj !== null && selObj !== void 0 && (_selObj$object2 = selObj.object) !== null && _selObj$object2 !== void 0 && _selObj$object2.name.includes('transHole')) {
+                      if (_this2.props.state.mode === MODE_DRAGGING_HOLE_3D) {
                         actions.holesActions.endDraggingHole3D(sPoint.x, sPoint.y);
+                        internalType = INTERNAL_EVENT_SELECT_ELEMENT;
+                        elementID = selectedObject.holeID;
+                        elementPrototype = 'holeID';
                       }
                       break;
+                    case 'areaID' in selectedObject:
+                      internalType = INTERNAL_EVENT_SELECT_ELEMENT;
+                      elementID = selectedObject.areaID;
+                      elementPrototype = 'areas';
+                      break;
                     default:
                       break;
                   }
+                  selectedElement = _this2.props.state.scene.layers.get(selectedObject.layerID).getIn([elementPrototype, elementID]);
                 }
                 isSelected = false;
               }
@@ -1542,14 +1568,14 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
             getPoint(event, alti);
             if (bRotate) {
               var _intersects$_i;
-              var selectedItem = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
-              if (isUndefined(selectedItem)) return;
-              var selItem = _this2.props.state.scene.layers.get(selectedObject.layerID).items.get(selectedObject.itemID);
-              var itemPos = selectedItem.position.clone();
-              if (((_intersects$_i = intersects[_i10]) === null || _intersects$_i === void 0 || (_intersects$_i = _intersects$_i.object) === null || _intersects$_i === void 0 || (_intersects$_i = _intersects$_i.parent) === null || _intersects$_i === void 0 || (_intersects$_i = _intersects$_i.parent) === null || _intersects$_i === void 0 || (_intersects$_i = _intersects$_i.userData) === null || _intersects$_i === void 0 ? void 0 : _intersects$_i.itemId) === selectedItem.userData.itemId) {
+              var _selectedItem = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
+              if (isUndefined(_selectedItem)) return;
+              selectedElement = _this2.props.state.scene.layers.get(selectedObject.layerID).items.get(selectedObject.itemID);
+              var _itemPos = _selectedItem.position.clone();
+              if (((_intersects$_i = intersects[_i10]) === null || _intersects$_i === void 0 || (_intersects$_i = _intersects$_i.object) === null || _intersects$_i === void 0 || (_intersects$_i = _intersects$_i.parent) === null || _intersects$_i === void 0 || (_intersects$_i = _intersects$_i.parent) === null || _intersects$_i === void 0 || (_intersects$_i = _intersects$_i.userData) === null || _intersects$_i === void 0 ? void 0 : _intersects$_i.itemId) === _selectedItem.userData.itemId) {
                 toolObj.position.set(intersects[_i10].point.x, intersects[_i10].point.y, intersects[_i10].point.z);
               } else {
-                toolObj.position.set(planData.plan.position.x + itemPos.x, selItem.category === 'lighting' ? -planData.plan.position.y - selItem.properties.get('height').get('length') : planData.plan.position.y + selectedItem.children[0].position.y, planData.plan.position.z + itemPos.z);
+                toolObj.position.set(planData.plan.position.x + _itemPos.x, selectedElement.category === 'lighting' ? -planData.plan.position.y - selectedElement.properties.get('height').get('length') : planData.plan.position.y + _selectedItem.children[0].position.y, planData.plan.position.z + _itemPos.z);
               }
               scene3D.add(toolObj);
               _this2.setState({
@@ -1560,14 +1586,14 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
             }
             if (bMove) {
               bMove = false;
-              var _selectedItem = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
-              if (isUndefined(_selectedItem)) return;
-              var _selItem = _this2.props.state.scene.layers.get(selectedObject.layerID).items.get(selectedObject.itemID);
-              var _itemPos = _selectedItem.position.clone();
-              if (intersects[_i10].object.parent.parent.userData.itemId === _selectedItem.userData.itemId) {
+              var _selectedItem2 = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
+              if (isUndefined(_selectedItem2)) return;
+              selectedElement = _this2.props.state.scene.layers.get(selectedObject.layerID).items.get(selectedObject.itemID);
+              var _itemPos2 = _selectedItem2.position.clone();
+              if (intersects[_i10].object.parent.parent.userData.itemId === _selectedItem2.userData.itemId) {
                 toolObj.position.set(intersects[_i10].point.x, intersects[_i10].point.y, intersects[_i10].point.z);
               } else {
-                toolObj.position.set(planData.plan.position.x + _itemPos.x, _selItem.category === 'lighting' ? -planData.plan.position.y - _selItem.properties.get('height').get('length') : planData.plan.position.y + _selectedItem.children[0].position.y, planData.plan.position.z + _itemPos.z);
+                toolObj.position.set(planData.plan.position.x + _itemPos2.x, selectedElement.category === 'lighting' ? -planData.plan.position.y - selectedElement.properties.get('height').get('length') : planData.plan.position.y + _selectedItem2.children[0].position.y, planData.plan.position.z + _itemPos2.z);
               }
               scene3D.add(toolObj);
               _this2.setState({
@@ -1601,6 +1627,13 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
             selectedObj = allItemRect.cur;
           }
         }
+        if (!isEmpty(internalType)) {
+          var _this2$props$onIntern, _this2$props;
+          (_this2$props$onIntern = (_this2$props = _this2.props).onInternalEvent) === null || _this2$props$onIntern === void 0 || _this2$props$onIntern.call(_this2$props, {
+            type: internalType,
+            value: selectedElement.toJS()
+          });
+        }
       };
       this.mouseEnterEvent = function (event) {
         if (_this2.props.state.mode !== MODE_DRAWING_ITEM_3D) return;

package/es/constants.js

@@ -667,4 +667,10 @@ export var EXTERNAL_EVENT_ZOOM_OUT = 'EXTERNAL_EVENT_ZOOM_OUT';
 export var EXTERNAL_EVENT_UNDO = 'EXTERNAL_EVENT_UNDO';
 export var EXTERNAL_EVENT_REDO = 'EXTERNAL_EVENT_REDO';
 export var EXTERNAL_EVENT_SET_MOLDING = 'EXTERNAL_EVENT_SET_MOLDING';
-export var EXTERNAL_EVENT_PROJECT_SETTING = 'EXTERNAL_EVENT_PROJECT_SETTING';
+export var EXTERNAL_EVENT_PROJECT_SETTING = 'EXTERNAL_EVENT_PROJECT_SETTING';
+
+// internal event type
+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';
+export var INTERNAL_EVENT_ROTATE_ELEMENT = 'INTERNAL_EVENT_ROTATE_ELEMENT';

package/es/devLiteRenderer.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useState, useEffect } from 'react';
 import ContainerDimensions from 'react-container-dimensions';
-import mockProps from "./mocks/mockProps.json";
+import mockProps from "./mocks/mockProps2.json";
 import mockDataBundle from "./mocks/dataBundle2.json";
 import cabinetPaylod from "./mocks/cabinetPayload2.json";
 import doorStylePaylod from "./mocks/doorStylePayload.json";
@@ -19,6 +19,9 @@ var options = {
   unit: 'in',
   enable3D: true
 };
+var onInternalEvent = function onInternalEvent(evt) {
+  console.log('EVENT:', evt.type, evt.value);
+};
 document.getElementById('app').style.display = 'block';
 function WorkSpace(props) {
   var _useState = useState(null),
@@ -270,6 +273,7 @@ function WorkSpace(props) {
     companyUrl: "https://example.com",
     toolbarButtons: [],
     externalEvent: externalEvent,
+    onInternalEvent: onInternalEvent,
     onError: function onError(payload) {
       // payload = {
       //   type: 'render-error' | 'runtime-error' | 'unhandled-rejection',

package/es/utils/geometry.js

@@ -873,18 +873,18 @@ export function getAllItemSnap(allItemRects) {
     var snap4 = itemrectInfo(rect.rect[3].x + ox0, rect.rect[3].y + oy0, nrot, cur && cur.size, rect.layoutpos, rect.is_corner);
     var sizeinfo = otherItems[index].cat && otherItems[index].cat.info.sizeinfo;
     if (sizeinfo) {
-      var left_blind_length = sizeinfo.left_blind_length,
-        right_blind_length = sizeinfo.right_blind_length;
-      if (left_blind_length > 0) {
-        var vx = left_blind_length - ch;
+      var leftBlindLength = sizeinfo.leftBlindLength,
+        rightBlindLength = sizeinfo.rightBlindLength;
+      if (leftBlindLength > 0) {
+        var vx = leftBlindLength - ch;
         var vy = cw;
         var dx = vx * cos + vy * sin;
         var dy = vx * sin - vy * cos;
         var snap6 = itemrectInfo(rect.rect[0].x + dx, rect.rect[0].y + dy, rect.rotRad + Math.PI / 2, cur && cur.size, rect.layoutpos, rect.is_corner);
         allItemSnap.push(snap6);
       }
-      if (right_blind_length > 0) {
-        var _vx = ch - right_blind_length;
+      if (rightBlindLength > 0) {
+        var _vx = ch - rightBlindLength;
         var _vy = cw;
         var _dx = _vx * cos + _vy * sin;
         var _dy = _vx * sin - _vy * cos;

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

@@ -476,6 +476,7 @@ function _handleExternalEvent() {
     return _regeneratorRuntime.wrap(function (_context5) {
       while (1) switch (_context5.prev = _context5.next) {
         case 0:
+          console.log('***external event****', props.externalEvent);
           evt = props.externalEvent;
           state = props.state.get('KitchenConfigurator');
           _t5 = evt === null || evt === void 0 ? void 0 : evt.type;
@@ -506,6 +507,7 @@ function _handleExternalEvent() {
           catalog = state.getIn(['catalog']).toJS(); // add item to catalog of state
           _element = _objectSpread(_objectSpread({}, _element), {}, {
             cds: {
+              data: [_objectSpread({}, _element.customer_property)],
               itemID: _element.itemID
             }
           });

package/lib/LiteKitchenConfigurator.js

@@ -93,8 +93,7 @@ var LiteKitchenConfigurator = /*#__PURE__*/function (_Component) {
       redirectURL: '',
       snackBarMessage: '',
       isSaved: false,
-      isLeaving: false,
-      stateCatalog: _this.props.catalog
+      isLeaving: false
     };
 
     // For UTM tracking
@@ -348,7 +347,6 @@ var LiteKitchenConfigurator = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentWillReceiveProps",
     value: function componentWillReceiveProps(nextProps) {
-      var _oldState$catalog, _plannerState$catalog;
       var stateExtractor = nextProps.stateExtractor,
         state = nextProps.state,
         projectActions = nextProps.projectActions,
@@ -360,15 +358,6 @@ var LiteKitchenConfigurator = /*#__PURE__*/function (_Component) {
         (0, _isolateEventHandler.handleExternalEvent)(nextProps);
       }
       var plannerState = stateExtractor(state);
-      var oldState = stateExtractor(this.props.state);
-      if ((oldState === null || oldState === void 0 || (_oldState$catalog = oldState.catalog) === null || _oldState$catalog === void 0 ? void 0 : _oldState$catalog.elements) !== (plannerState === null || plannerState === void 0 || (_plannerState$catalog = plannerState.catalog) === null || _plannerState$catalog === void 0 ? void 0 : _plannerState$catalog.elements)) {
-        // copy state.catalog to the props.catalog
-        // let catalog = this.state.stateCatalog;
-        // console.log('111111', plannerState?.catalog?.elements.toJS());
-        // catalog.elements = plannerState?.catalog?.elements.toJS();
-        // console.log('222222', catalog);
-        // this.setState({ stateCatalog: catalog });
-      }
       var catalogReady = plannerState.getIn(['catalog', 'ready']);
       if (!catalogReady) {
         projectActions.initCatalog(catalog);
@@ -441,7 +430,7 @@ var LiteKitchenConfigurator = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/_react["default"].createElement(_export2.Content, (0, _extends2["default"])({
         width: contentW,
         height: contentH,
-        catalog: this.state.stateCatalog,
+        catalog: this.props.catalog,
         state: extractedState,
         toolBar: this.state.toolbar,
         setToolbar: this.setToolbar,
@@ -450,7 +439,8 @@ var LiteKitchenConfigurator = /*#__PURE__*/function (_Component) {
       }, props, {
         onWheel: function onWheel(event) {
           return event.preventDefault();
-        }
+        },
+        onInternalEvent: this.props.onInternalEvent
       }))));
     }
   }]);
@@ -469,7 +459,8 @@ LiteKitchenConfigurator.propTypes = {
   footerbarComponents: _propTypes["default"].array,
   customContents: _propTypes["default"].object,
   softwareSignature: _propTypes["default"].string,
-  configData: _propTypes["default"].object
+  configData: _propTypes["default"].object,
+  onInternalEvent: _propTypes["default"].func
 };
 LiteKitchenConfigurator.contextTypes = {
   store: _propTypes["default"].object.isRequired

package/lib/LiteRenderer.js

@@ -39,7 +39,7 @@ var Sentry = _interopRequireWildcard(require("@sentry/react"));
 var _exporter = _interopRequireDefault(require("./catalog/utils/exporter"));
 var THREE = _interopRequireWildcard(require("three"));
 var _LiteKitchenConfigurator = _interopRequireDefault(require("./LiteKitchenConfigurator"));
-var _excluded = ["width", "height", "projectElement", "dataBundle", "configData", "options", "user", "auth", "featureFlags", "sentry", "analytics", "externalEvent", "onError"];
+var _excluded = ["width", "height", "projectElement", "dataBundle", "configData", "options", "user", "auth", "featureFlags", "sentry", "analytics", "externalEvent", "onInternalEvent", "onError"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
 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) { (0, _defineProperty2["default"])(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; }
@@ -162,6 +162,7 @@ function LiteRenderer(props) {
     sentry = props.sentry,
     analytics = props.analytics,
     externalEvent = props.externalEvent,
+    onInternalEvent = props.onInternalEvent,
     onError = props.onError,
     passThrough = (0, _objectWithoutProperties2["default"])(props, _excluded);
 
@@ -480,7 +481,8 @@ function LiteRenderer(props) {
     },
     data: data,
     configData: configData,
-    externalEvent: externalEvent
+    externalEvent: externalEvent,
+    onInternalEvent: onInternalEvent
   }, passThrough)))));
 }
 
@@ -504,6 +506,7 @@ LiteRenderer.propTypes = {
     environment: _propTypes["default"].string
   }),
   externalEvent: _propTypes["default"].object,
+  onInternalEvent: _propTypes["default"].func,
   onError: _propTypes["default"].func,
   store: _propTypes["default"].object
 };

package/lib/components/content.js

@@ -26,7 +26,8 @@ function Content(_ref, _ref2) {
     setToolbar = _ref.setToolbar,
     replaceCabinet = _ref.replaceCabinet,
     keyDownEnable = _ref.keyDownEnable,
-    catalog = _ref.catalog;
+    catalog = _ref.catalog,
+    onInternalEvent = _ref.onInternalEvent;
   var projectActions = _ref2.projectActions;
   var mode = state.get('mode');
   switch (mode) {
@@ -50,7 +51,8 @@ function Content(_ref, _ref2) {
         setToolbar: setToolbar,
         replaceCabinet: replaceCabinet,
         keyDownEnable: keyDownEnable,
-        downloadFlag: false
+        downloadFlag: false,
+        onInternalEvent: onInternalEvent
       });
     case constants.MODE_3D_FIRST_PERSON:
       return /*#__PURE__*/_react["default"].createElement(_viewer3dFirstPerson["default"], {
@@ -88,7 +90,8 @@ function Content(_ref, _ref2) {
         width: width,
         height: height,
         setToolbar: setToolbar,
-        replaceCabinet: replaceCabinet
+        replaceCabinet: replaceCabinet,
+        onInternalEvent: onInternalEvent
       });
     case constants.MODE_ROTATING_ITEM_3D:
     case constants.MODE_DRAGGING_ITEM_3D:
@@ -104,7 +107,8 @@ function Content(_ref, _ref2) {
         setToolbar: setToolbar,
         replaceCabinet: replaceCabinet,
         keyDownEnable: keyDownEnable,
-        downloadFlag: false
+        downloadFlag: false,
+        onInternalEvent: onInternalEvent
       });
 
     // case constants.MODE_CONFIGURING_PROJECT:
@@ -129,7 +133,8 @@ Content.propTypes = {
   state: _propTypes["default"].object.isRequired,
   width: _propTypes["default"].number.isRequired,
   height: _propTypes["default"].number.isRequired,
-  replaceCabinet: _propTypes["default"].func.isRequired
+  replaceCabinet: _propTypes["default"].func.isRequired,
+  onInternalEvent: _propTypes["default"].func.isRequired
 };
 Content.contextTypes = {
   projectActions: _propTypes["default"].object.isRequired

package/lib/components/viewer2d/viewer2d.js

@@ -133,7 +133,8 @@ function Viewer2D(_ref, _ref2) {
     width = _ref.width,
     height = _ref.height,
     setToolbar = _ref.setToolbar,
-    replaceCabinet = _ref.replaceCabinet;
+    replaceCabinet = _ref.replaceCabinet,
+    onInternalEvent = _ref.onInternalEvent;
   var viewer2DActions = _ref2.viewer2DActions,
     linesActions = _ref2.linesActions,
     holesActions = _ref2.holesActions,
@@ -790,35 +791,42 @@ function Viewer2D(_ref, _ref2) {
     if (mode === constants.MODE_IDLE) {
       var elementData = extractElementData(event.target);
       if (!elementData) return;
-      if (sCount < 2) switch (elementData.prototype) {
-        case 'lines':
-          if (elementData.selected) {
-            if (elementData.part === 'remove') break;else if (elementData.part === 'elevation') break;
-            linesActions.beginDraggingLine(elementData.layer, elementData.id, x, y, state.snapMask);
-          }
-          break;
-        case 'vertices':
-          verticesActions.beginDraggingVertex(elementData.layer, elementData.id, x, y, state.snapMask);
-          break;
-        case 'items':
-          setToolbar('');
-          current_sel_obj_id = elementData.id;
-          if (elementData.part === 'rotation-anchor') itemsActions.beginRotatingItem(elementData.layer, elementData.id, x, y);else if (elementData.part === 'remove') break;else if (elementData.part === 'duplicate') break;else if (elementData.part === 'warning_edit') break;else {
-            // closes the setting dialog
-            if (document.getElementById('setting_dialog')) {
-              document.getElementById('setting_dialog').style.display = 'none';
+      if (sCount < 2) {
+        switch (elementData.prototype) {
+          case 'lines':
+            if (elementData.selected) {
+              if (elementData.part === 'remove') break;else if (elementData.part === 'elevation') break;
+              linesActions.beginDraggingLine(elementData.layer, elementData.id, x, y, state.snapMask);
             }
-            itemsActions.selectItem(elementData.layer, elementData.id);
-            // projectActions.setMode(constants.MODE_DRAGGING_ITEM);
-            itemsActions.beginDraggingItem(elementData.layer, elementData.id, x, y);
-            replaceCabinet(false);
-          }
-          break;
-        case 'holes':
-          if (elementData.selected) holesActions.beginDraggingHole(elementData.layer, elementData.id, x, y);
-          break;
-        default:
-          break;
+            break;
+          case 'vertices':
+            verticesActions.beginDraggingVertex(elementData.layer, elementData.id, x, y, state.snapMask);
+            break;
+          case 'items':
+            setToolbar('');
+            current_sel_obj_id = elementData.id;
+            if (elementData.part === 'rotation-anchor') itemsActions.beginRotatingItem(elementData.layer, elementData.id, x, y);else if (elementData.part === 'remove') break;else if (elementData.part === 'duplicate') break;else if (elementData.part === 'warning_edit') break;else {
+              // closes the setting dialog
+              if (document.getElementById('setting_dialog')) {
+                document.getElementById('setting_dialog').style.display = 'none';
+              }
+              itemsActions.selectItem(elementData.layer, elementData.id);
+              // projectActions.setMode(constants.MODE_DRAGGING_ITEM);
+              itemsActions.beginDraggingItem(elementData.layer, elementData.id, x, y);
+              replaceCabinet(false);
+            }
+            break;
+          case 'holes':
+            if (elementData.selected) holesActions.beginDraggingHole(elementData.layer, elementData.id, x, y);
+            break;
+          default:
+            break;
+        }
+        var currentObject = state.getIn(['scene', 'layers', layerID, elementData.prototype, elementData.id]);
+        onInternalEvent === null || onInternalEvent === void 0 || onInternalEvent({
+          type: _constants.INTERNAL_EVENT_SELECT_ELEMENT,
+          value: currentObject.toJS()
+        });
       } else {
         sPoint.x = x;
         sPoint.y = y;
@@ -854,10 +862,47 @@ function Viewer2D(_ref, _ref2) {
       y = _mapCursorPosition3.y;
     var vertices = state.getIn(['scene', 'layers', layerID, 'vertices']).toJS();
     var lines = state.getIn(['scene', 'layers', layerID, 'lines']).toJS();
+    var elementData = extractElementData(event.target);
+    var selectedLayer = scene.getIn(['layers', layerID]);
+    var elementPrototype = null;
+    var elementID = null;
+    var internalType = '';
+    switch (mode) {
+      case constants.MODE_DRAWING_LINE:
+        elementPrototype = 'lines';
+        internalType = _constants.INTERNAL_EVENT_DRAW_ELEMENT;
+        break;
+      case constants.MODE_DRAWING_HOLE:
+        elementPrototype = 'holes';
+        internalType = _constants.INTERNAL_EVENT_DRAW_ELEMENT;
+        break;
+      case constants.MODE_DRAWING_ITEM:
+        elementPrototype = 'items';
+        internalType = _constants.INTERNAL_EVENT_DRAW_ELEMENT;
+        break;
+      case constants.MODE_DRAGGING_LINE:
+        elementPrototype = 'lines';
+        internalType = _constants.INTERNAL_EVENT_DRAG_ELEMENT;
+        break;
+      case constants.MODE_DRAGGING_HOLE:
+        elementPrototype = 'holes';
+        internalType = _constants.INTERNAL_EVENT_DRAG_ELEMENT;
+        break;
+      case constants.MODE_DRAGGING_ITEM:
+        elementPrototype = 'items';
+        internalType = _constants.INTERNAL_EVENT_DRAG_ELEMENT;
+        break;
+      case constants.MODE_DRAGGING_VERTEX:
+        elementPrototype = 'lines';
+        internalType = _constants.INTERNAL_EVENT_DRAG_ELEMENT;
+        break;
+      case constants.MODE_ROTATING_ITEM:
+        elementPrototype = 'items';
+        internalType = _constants.INTERNAL_EVENT_ROTATE_ELEMENT;
+        break;
+    }
     switch (mode) {
       case constants.MODE_IDLE:
-        var elementData = extractElementData(event.target);
-        var selectedLayer = scene.getIn(['layers', layerID]);
         switch (elementData ? elementData.prototype : 'none') {
           case 'areas':
             if (document.getElementById('setting_dialog')) {
@@ -1197,6 +1242,14 @@ function Viewer2D(_ref, _ref2) {
         itemsActions.endRotatingItem(x, y);
         break;
     }
+    if (elementPrototype) {
+      elementID = state.getIn(['scene', 'layers', layerID, 'selected', elementPrototype]).first();
+      var _currentObject = state.getIn(['scene', 'layers', layerID, elementPrototype, elementID]);
+      onInternalEvent === null || onInternalEvent === void 0 || onInternalEvent({
+        type: internalType,
+        value: _currentObject.toJS()
+      });
+    }
     event.stopPropagation();
   };
   var onChangeValue = function onChangeValue(value) {

package/lib/components/viewer3d/viewer3d.js

@@ -1281,7 +1281,18 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
               }
             }
             if (selectedObject !== undefined) {
-              var selectedItem = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
+              // get selected object from planData.sceneGraph
+              var selectedItem = null;
+              switch (true) {
+                case 'itemID' in selectedObject:
+                  selectedItem = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
+                  break;
+                case 'holeID' in selectedObject:
+                  selectedItem = planData.sceneGraph.layers[selectedObject.layerID].holes[selectedObject.holeID];
+                  break;
+                default:
+                  break;
+              }
               sPoint.set(Point.x, Point.y);
               if (transflag == 0) {
                 scene3D.remove(toolObj);
@@ -1347,7 +1358,8 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
         }
       };
       this.mouseUpEvent = function (event) {
-        var _selObj$object, _selObj$object2;
+        var internalType = ''; // internalEvent type - select/drag/draw
+        var selectedElement; // internalEvent data
         firstMove = 0;
         var altitude = 0;
         if (allItemRect && allItemRect.cur && allItemRect.cur.itemInfo !== undefined) {
@@ -1384,6 +1396,14 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
           isInitialPhase = true;
           return;
         }
+        switch (_this2.props.state.mode) {
+          case _constants.MODE_DRAGGING_ITEM_3D:
+            internalType = _constants.INTERNAL_EVENT_DRAG_ELEMENT;
+            break;
+          case _constants.MODE_ROTATING_ITEM_3D:
+            internalType = _constants.INTERNAL_EVENT_ROTATE_ELEMENT;
+            break;
+        }
         if (_this2.props.state.mode == _constants.MODE_DRAGGING_ITEM_3D) {
           _this2.context.itemsActions.endDraggingItem3D();
         }
@@ -1465,56 +1485,62 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
                   currentObject = currentObject.parent;
                 }
                 isSelected = true;
-                setTimeout(function () {
-                  (0, _sceneCreator.getDistances)(layer);
-                  var selectedItem = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
-                  if ((0, _util.isUndefined)(selectedItem)) return;
-                  var selItem = _this2.props.state.scene.layers.get(selectedObject.layerID).items.get(selectedObject.itemID);
-                  var itemPos = selectedItem.position.clone();
-                  if (intersects[_i10].object.parent && intersects[_i10].object.parent.parent.userData.itemId === selectedItem.userData.itemId) {
-                    toolObj.position.set(intersects[_i10].point.x, intersects[_i10].point.y, intersects[_i10].point.z);
-                  } else {
-                    toolObj.position.set(planData.plan.position.x + itemPos.x, selItem.category === 'lighting' ? -planData.plan.position.y - selItem.properties.get('height').get('length') : planData.plan.position.y + selectedItem.children[0].position.y, planData.plan.position.z + itemPos.z);
-                  }
-                  scene3D.add(toolObj);
-                  _this2.setState({
-                    toolObj: toolObj
-                  });
-                  // showItemButtons(layer.getIn(['items', selectedObject.itemID]), currentObject, event, camera, this.renderer);
-                  var pointArray = [],
-                    cnt = 0;
-                  pointArray.push([_sceneCreator.fVLine[0].userData.distance, 90]);
-                  pointArray.push([_sceneCreator.fVLine[1].userData.distance, -90]);
-                  pointArray.push([_sceneCreator.fVLine[2].userData.distance, 180]);
-                  pointArray.push([_sceneCreator.fVLine[3].userData.distance, 0]);
-                  pointArray.forEach(function (pointElement, index) {
-                    if (pointElement[0] == undefined) pointArray[index][0] = 0;
-                  });
-                  pointArray.forEach(function (pointElement) {
-                    if (pointElement[0] == 0) cnt++;
-                  });
-                  if (cnt == 4 || cnt == 3) {
-                    pointArray[0][0] = 100;
-                    pointArray[1][0] = 100;
-                  }
-                  actions.itemsActions.storeDistArray(layer.id, selectedObject.itemID, pointArray);
+                (0, _sceneCreator.getDistances)(layer);
+                var selectedItem = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
+                if ((0, _util.isUndefined)(selectedItem)) return;
+                selectedElement = _this2.props.state.scene.layers.get(selectedObject.layerID).items.get(selectedObject.itemID);
+                var itemPos = selectedItem.position.clone();
+                if (intersects[_i10].object.parent && intersects[_i10].object.parent.parent.userData.itemId === selectedItem.userData.itemId) {
+                  toolObj.position.set(intersects[_i10].point.x, intersects[_i10].point.y, intersects[_i10].point.z);
+                } else {
+                  toolObj.position.set(planData.plan.position.x + itemPos.x, selectedElement.category === 'lighting' ? -planData.plan.position.y - selectedElement.properties.get('height').get('length') : planData.plan.position.y + selectedItem.children[0].position.y, planData.plan.position.z + itemPos.z);
+                }
+                scene3D.add(toolObj);
+                _this2.setState({
+                  toolObj: toolObj
+                });
+                // showItemButtons(layer.getIn(['items', selectedObject.itemID]), currentObject, event, camera, this.renderer);
+                var pointArray = [],
+                  cnt = 0;
+                pointArray.push([_sceneCreator.fVLine[0].userData.distance, 90]);
+                pointArray.push([_sceneCreator.fVLine[1].userData.distance, -90]);
+                pointArray.push([_sceneCreator.fVLine[2].userData.distance, 180]);
+                pointArray.push([_sceneCreator.fVLine[3].userData.distance, 0]);
+                pointArray.forEach(function (pointElement, index) {
+                  if (pointElement[0] == undefined) pointArray[index][0] = 0;
                 });
+                pointArray.forEach(function (pointElement) {
+                  if (pointElement[0] == 0) cnt++;
+                });
+                if (cnt == 4 || cnt == 3) {
+                  pointArray[0][0] = 100;
+                  pointArray[1][0] = 100;
+                }
+                actions.itemsActions.storeDistArray(layer.id, selectedObject.itemID, pointArray);
+                internalType = internalType ? internalType : _constants.INTERNAL_EVENT_SELECT_ELEMENT;
               } else {
                 if (selectedObject) {
+                  var elementID = null;
+                  var elementPrototype = null;
                   switch (true) {
                     case 'holeID' in selectedObject:
-                      if (selObj !== null && selObj !== void 0 && (_selObj$object = selObj.object) !== null && _selObj$object !== void 0 && _selObj$object.name.includes('transHole')) {
-                        actions.holesActions.endDraggingHole3D(sPoint.x, sPoint.y);
-                      }
-                      break;
                     case 'lineID' in selectedObject:
-                      if (selObj !== null && selObj !== void 0 && (_selObj$object2 = selObj.object) !== null && _selObj$object2 !== void 0 && _selObj$object2.name.includes('transHole')) {
+                      if (_this2.props.state.mode === _constants.MODE_DRAGGING_HOLE_3D) {
                         actions.holesActions.endDraggingHole3D(sPoint.x, sPoint.y);
+                        internalType = _constants.INTERNAL_EVENT_SELECT_ELEMENT;
+                        elementID = selectedObject.holeID;
+                        elementPrototype = 'holeID';
                       }
                       break;
+                    case 'areaID' in selectedObject:
+                      internalType = _constants.INTERNAL_EVENT_SELECT_ELEMENT;
+                      elementID = selectedObject.areaID;
+                      elementPrototype = 'areas';
+                      break;
                     default:
                       break;
                   }
+                  selectedElement = _this2.props.state.scene.layers.get(selectedObject.layerID).getIn([elementPrototype, elementID]);
                 }
                 isSelected = false;
               }
@@ -1549,14 +1575,14 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
             getPoint(event, alti);
             if (bRotate) {
               var _intersects$_i;
-              var selectedItem = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
-              if ((0, _util.isUndefined)(selectedItem)) return;
-              var selItem = _this2.props.state.scene.layers.get(selectedObject.layerID).items.get(selectedObject.itemID);
-              var itemPos = selectedItem.position.clone();
-              if (((_intersects$_i = intersects[_i10]) === null || _intersects$_i === void 0 || (_intersects$_i = _intersects$_i.object) === null || _intersects$_i === void 0 || (_intersects$_i = _intersects$_i.parent) === null || _intersects$_i === void 0 || (_intersects$_i = _intersects$_i.parent) === null || _intersects$_i === void 0 || (_intersects$_i = _intersects$_i.userData) === null || _intersects$_i === void 0 ? void 0 : _intersects$_i.itemId) === selectedItem.userData.itemId) {
+              var _selectedItem = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
+              if ((0, _util.isUndefined)(_selectedItem)) return;
+              selectedElement = _this2.props.state.scene.layers.get(selectedObject.layerID).items.get(selectedObject.itemID);
+              var _itemPos = _selectedItem.position.clone();
+              if (((_intersects$_i = intersects[_i10]) === null || _intersects$_i === void 0 || (_intersects$_i = _intersects$_i.object) === null || _intersects$_i === void 0 || (_intersects$_i = _intersects$_i.parent) === null || _intersects$_i === void 0 || (_intersects$_i = _intersects$_i.parent) === null || _intersects$_i === void 0 || (_intersects$_i = _intersects$_i.userData) === null || _intersects$_i === void 0 ? void 0 : _intersects$_i.itemId) === _selectedItem.userData.itemId) {
                 toolObj.position.set(intersects[_i10].point.x, intersects[_i10].point.y, intersects[_i10].point.z);
               } else {
-                toolObj.position.set(planData.plan.position.x + itemPos.x, selItem.category === 'lighting' ? -planData.plan.position.y - selItem.properties.get('height').get('length') : planData.plan.position.y + selectedItem.children[0].position.y, planData.plan.position.z + itemPos.z);
+                toolObj.position.set(planData.plan.position.x + _itemPos.x, selectedElement.category === 'lighting' ? -planData.plan.position.y - selectedElement.properties.get('height').get('length') : planData.plan.position.y + _selectedItem.children[0].position.y, planData.plan.position.z + _itemPos.z);
               }
               scene3D.add(toolObj);
               _this2.setState({
@@ -1567,14 +1593,14 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
             }
             if (bMove) {
               bMove = false;
-              var _selectedItem = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
-              if ((0, _util.isUndefined)(_selectedItem)) return;
-              var _selItem = _this2.props.state.scene.layers.get(selectedObject.layerID).items.get(selectedObject.itemID);
-              var _itemPos = _selectedItem.position.clone();
-              if (intersects[_i10].object.parent.parent.userData.itemId === _selectedItem.userData.itemId) {
+              var _selectedItem2 = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
+              if ((0, _util.isUndefined)(_selectedItem2)) return;
+              selectedElement = _this2.props.state.scene.layers.get(selectedObject.layerID).items.get(selectedObject.itemID);
+              var _itemPos2 = _selectedItem2.position.clone();
+              if (intersects[_i10].object.parent.parent.userData.itemId === _selectedItem2.userData.itemId) {
                 toolObj.position.set(intersects[_i10].point.x, intersects[_i10].point.y, intersects[_i10].point.z);
               } else {
-                toolObj.position.set(planData.plan.position.x + _itemPos.x, _selItem.category === 'lighting' ? -planData.plan.position.y - _selItem.properties.get('height').get('length') : planData.plan.position.y + _selectedItem.children[0].position.y, planData.plan.position.z + _itemPos.z);
+                toolObj.position.set(planData.plan.position.x + _itemPos2.x, selectedElement.category === 'lighting' ? -planData.plan.position.y - selectedElement.properties.get('height').get('length') : planData.plan.position.y + _selectedItem2.children[0].position.y, planData.plan.position.z + _itemPos2.z);
               }
               scene3D.add(toolObj);
               _this2.setState({
@@ -1608,6 +1634,13 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
             selectedObj = allItemRect.cur;
           }
         }
+        if (!(0, _helper.isEmpty)(internalType)) {
+          var _this2$props$onIntern, _this2$props;
+          (_this2$props$onIntern = (_this2$props = _this2.props).onInternalEvent) === null || _this2$props$onIntern === void 0 || _this2$props$onIntern.call(_this2$props, {
+            type: internalType,
+            value: selectedElement.toJS()
+          });
+        }
       };
       this.mouseEnterEvent = function (event) {
         if (_this2.props.state.mode !== _constants.MODE_DRAWING_ITEM_3D) return;

package/lib/constants.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EXTERNAL_EVENT_UNDO = exports.EXTERNAL_EVENT_TOGGLE_TO_ELEVATION = exports.EXTERNAL_EVENT_TOGGLE_TO_3D = exports.EXTERNAL_EVENT_TOGGLE_TO_2D = exports.EXTERNAL_EVENT_SET_MOLDING = exports.EXTERNAL_EVENT_SET_INITIAL_DATA = exports.EXTERNAL_EVENT_REDO = exports.EXTERNAL_EVENT_PROJECT_SETTING = exports.EXTERNAL_EVENT_NEW_PROJECT = exports.EXTERNAL_EVENT_MOVE_PAN = exports.EXTERNAL_EVENT_CHANGE_DOORSTYLE = exports.EXTERNAL_EVENT_ADD_WALL = exports.EXTERNAL_EVENT_ADD_ROOM_SHAPE = exports.EXTERNAL_EVENT_ADD_ITEM = exports.ERROR_DATABASE = exports.EPSILON = exports.END_UPLOADING_IMAGE = exports.END_ROTATING_ITEM_3D = exports.END_ROTATING_ITEM = exports.END_LOADING = exports.END_FITTING_IMAGE = exports.END_DRAWING_LINE = exports.END_DRAWING_ITEM = exports.END_DRAWING_HOLE_3D = exports.END_DRAWING_HOLE = exports.END_DRAGGING_VERTEX = exports.END_DRAGGING_LINE = exports.END_DRAGGING_ITEM_3D = exports.END_DRAGGING_ITEM = exports.END_DRAGGING_HOLE_3D = exports.END_DRAGGING_HOLE = exports.END_CREATING_HOLE = exports.END_CREATING_CABINET = exports.ELEVATION_VIEW_TITLE = exports.ELEVATION_VIEW_RIGHT = exports.ELEVATION_VIEW_LEFT = exports.ELEVATION_VIEW_KEYWORD = exports.ELEVATION_VIEW_FRONT = exports.ELEVATION_VIEW_BACK = exports.ELEVATION_VIEW = exports.EDIT_WIDTH = exports.EDIT = exports.DUPLICATE_SELECTED = exports.DISTANCE_EPSILON = exports.DIFFERENT_VALUES_PATH_LENGTH = exports.DELTA = exports.DEFAULT_FONT_FAMILY = exports.DECIMAL_PLACES_3 = exports.DECIMAL_PLACES_2 = exports.COPY_PROPERTIES = exports.CLIENTS_NAME = exports.CHANGE_WINDOW_DOOR_MEASURE = exports.CHANGE_WALL_LENGTH_MEASURE = exports.CHANGE_WALL_CABINET_MEASURE = exports.CHANGE_CATALOG_PAGE = exports.CHANGE_BASE_CABINET_MEASURE = exports.CEIL_UNITS_LENGTH = exports.BROWN_COLOR = exports.BOTTOM_MOLDING_LOCATION = exports.BOTTOM = exports.BG_COLOR_OVERLAY = exports.BG_COLOR_HOVER = exports.BG_COLOR_1 = exports.BG_COLOR_0 = exports.BEGIN_UPLOADING_IMAGE = exports.BEGIN_ROTATING_ITEM_3D = exports.BEGIN_ROTATING_ITEM = exports.BEGIN_FITTING_IMAGE = exports.BEGIN_DRAWING_LINE = exports.BEGIN_DRAGGING_VERTEX = exports.BEGIN_DRAGGING_LINE = exports.BEGIN_DRAGGING_ITEM_3D = exports.BEGIN_DRAGGING_ITEM = exports.BEGIN_DRAGGING_HOLE_3D = exports.BEGIN_DRAGGING_HOLE = exports.BASE_CABINET_LAYOUTPOS = exports.ARROW_TEXT_FORECOLOR = exports.ARROW_TEXT_FONTFACE = exports.ARROW_TEXT_BACKCOLOR = exports.ARROW_COLOR = exports.ARRAY_ELEVATION_VIEW_MODES = exports.ARRAY_3D_MODES = exports.AREA_ACTIONS = exports.API_SERVER_URL = exports.ANIMATE_STEP_MIN = exports.ANIMATE_STEP_MAX = exports.ANIMATE_OBJECT_OPEN_DOOR_ROTATION_UNIT = exports.ANIMATE_OBJECT = exports.ALTERATE_STATE = exports.ADD_VERTICAL_GUIDE = exports.ADD_TO_GROUP = exports.ADD_LAYER = exports.ADD_HORIZONTAL_GUIDE = exports.ADD_GROUP_FROM_SELECTED = exports.ADD_GROUP = exports.ADD_ELEMENT_TO_CATALOG = exports.ADD_CIRCULAR_GUIDE = exports.ADD_CABINETS = exports.ADD_APPLIANCES = exports.ACCENT_COLOR = void 0;
-exports.REMOVE_CIRCULAR_GUIDE = exports.REMOVE = exports.REDO = exports.RECREATE = exports.PUSH_LAST_SELECTED_CATALOG_ELEMENT_TO_HISTORY = exports.PROJECT_SETTING_OPTION = exports.PROJECT_RE_NAME = exports.PROJECT_NAME_LENGTH_LIMIT = exports.PROJECT_ACTIONS = exports.PRODUCT = exports.PRIMARY_GREEN_COLOR = exports.PASTE_PROPERTIES = exports.OVERLAP_SOME = exports.OVERLAP_SAME = exports.OVERLAP_NONE = exports.OVERLAP_LINK = exports.OVERLAP_INCLUDED = exports.OPEN_PROJECT_CONFIGURATOR = exports.OPEN_CATALOG = exports.OBJTYPE_MESH = exports.OBJTYPE_GROUP = exports.NO_DATA_DATABASE = exports.NEW_PROJECT_BTN = exports.NEW_PROJECT = exports.NEW_DESIGN = exports.MOVE_COMPONENT = exports.MOLDING_LOCATIONS = exports.MODE_WAITING_DRAWING_LINE = exports.MODE_VIEWING_CATALOG = exports.MODE_UPLOADING_IMAGE = exports.MODE_SNAPPING = exports.MODE_ROTATING_ITEM_3D = exports.MODE_ROTATING_ITEM = exports.MODE_RIGHT_ELEVATION_VIEW = exports.MODE_LEFT_ELEVATION_VIEW = exports.MODE_IDLE_3D = exports.MODE_IDLE = exports.MODE_FRONT_VIEW = exports.MODE_FRONT_ELEVATION_VIEW = exports.MODE_FITTING_IMAGE = exports.MODE_ELEVATION_VIEW = exports.MODE_DRAWING_LINE = exports.MODE_DRAWING_ITEM_3D = exports.MODE_DRAWING_ITEM = exports.MODE_DRAWING_HOLE_3D = exports.MODE_DRAWING_HOLE = exports.MODE_DRAGGING_VERTEX = exports.MODE_DRAGGING_LINE = exports.MODE_DRAGGING_ITEM_3D = exports.MODE_DRAGGING_ITEM = exports.MODE_DRAGGING_HOLE_3D = exports.MODE_DRAGGING_HOLE = exports.MODE_CONFIGURING_PROJECT = exports.MODE_BACK_ELEVATION_VIEW = exports.MODE_3D_VIEW = exports.MODE_3D_FIRST_PERSON = exports.MODE_2D_ZOOM_OUT = exports.MODE_2D_ZOOM_IN = exports.MODE_2D_PAN = exports.MODE = exports.MIN_ANGLE_DISALLOW_DRAW_WALL = exports.MIDDLE_MOLDING_LOCATION = exports.MEPSILON = exports.MAX_ANGLE_SCALE = exports.MAKE_FLOOR_PLAN = exports.LOGOUT = exports.LOGIN_SUCCESS = exports.LOGIN_ERROR = exports.LOCAL_STORAGE_TOKEN_VALUE = exports.LOCAL_STORAGE_TOKEN_NAME = exports.LOCAL_STORAGE_ORIGINAL_TOKEN = exports.LOCAL_STORAGE_CUSTOMER_INFO = exports.LOCAL_STORAGE_CART_ACTION = exports.LOAD_PROJECT = exports.LIST_QUANTITIES = exports.LIST_PARTS = exports.LINE_THICKNESS = exports.LINE_ACTIONS = exports.LEFT = exports.LABEL_COLOR = exports.KITCHEN_KONFIGURATOR = exports.KEYBOARD_BUTTON_CODE = exports.ITEM_TYPE = exports.ITEM_MOVE_UP = exports.ITEMS_ACTIONS = exports.INVERT = exports.INSTALLATION_TYPE_SKU_SUFFIX = exports.INSTALLATION_TYPE_NAME = exports.INSTALLATION_SUFFIX_TYPE = exports.INIT_CATALOG = exports.HOLE_ACTIONS = exports.HDR_URLS = exports.HAS_LOADINGBAR = exports.GROUP_TRANSLATE = exports.GROUP_ROTATE = exports.GROUP_ACTIONS = exports.GO_BACK_TO_CATALOG_PAGE = exports.FINISHING_TOUCH = exports.EXTERNAL_EVENT_ZOOM_OUT = exports.EXTERNAL_EVENT_ZOOM_IN = void 0;
-exports.SUBTOTAL = exports.SUBMIT_REQUEST_ASSIST = exports.SUBMIT_DESIGN = exports.SUBMIT_ADD_CART = exports.STORE_DIST_ARRAY = exports.STOP_DRAWING_LINE = exports.STEP_CABINET_CHOOSE_PRODUCT = exports.STATUS_WARNING_LIGHT_COLOR = exports.STATUS_WARNING_COLOR = exports.STATUS_POSITIVE_LIGHT_COLOR = exports.STATUS_POSITIVE_COLOR = exports.STATUS_OVERDUE_LIGHT_COLOR = exports.STATUS_OVERDUE_COLOR = exports.STATUS_NEGATIVE_LIGHT_COLOR = exports.STATUS_NEGATIVE_COLOR = exports.STATUS_INFO_LIGHT_COLOR = exports.STATUS_INFO_COLOR = exports.SHIFT2DON = exports.SHIFT2DOFF = exports.SHAPE_SVG_WIDTH = exports.SHAPE_SVG_PADDING = exports.SHAPE_SVG_DEPTH = exports.SHADE_LIGHT_PURPLE_COLOR = exports.SHADE_LIGHT_GREEN_COLOR = exports.SHADE_LIGHT_BLUE_COLOR = exports.SHADE_DARK_PURPLE_COLOR = exports.SHADE_DARK_GREEN_COLOR = exports.SHADE_DARK_BLUE_COLOR = exports.SET_WALL_COLOR = exports.SET_USER_DATA = exports.SET_STATE_PROPERTIES = exports.SET_ROTATE_STATUS = exports.SET_RELATED_LINE = exports.SET_PROPERTIES = exports.SET_PROJECT_PROPERTIES = exports.SET_PROJECT_ID = exports.SET_MOVE_STATUS = exports.SET_MOLDING = exports.SET_MODELLING = exports.SET_MODE = exports.SET_LINES_ATTRIBUTES = exports.SET_LAYER_PROPERTIES = exports.SET_ITEMS_ATTRIBUTES = exports.SET_IS_HELP = exports.SET_IS_CABINET_DRAWING = exports.SET_INITIAL_DOOR_STYLE = exports.SET_HOLES_ATTRIBUTES = exports.SET_HANDLE_MATERIAL = exports.SET_GROUP_PROPERTIES = exports.SET_GROUP_BARYCENTER = exports.SET_GROUP_ATTRIBUTES = exports.SET_FLOOR_STYLES = exports.SET_DOOR_STYLE = exports.SET_DOOR_HANDLE = exports.SET_DISTANT = exports.SET_COUNTER_TOP = exports.SET_BACKSPLASH_VISIBLE = exports.SET_BACKSPLASH = exports.SET_APPLIANCE_MATERIAL = exports.SELECT_TOOL_ZOOM_OUT = exports.SELECT_TOOL_ZOOM_IN = exports.SELECT_TOOL_UPLOAD_IMAGE = exports.SELECT_TOOL_PAN = exports.SELECT_TOOL_EDIT = exports.SELECT_TOOL_DRAWING_LINE = exports.SELECT_TOOL_DRAWING_ITEM_3D = exports.SELECT_TOOL_DRAWING_ITEM = exports.SELECT_TOOL_DRAWING_HOLE_3D = exports.SELECT_TOOL_DRAWING_HOLE = exports.SELECT_TOOL_3D_VIEW = exports.SELECT_TOOL_3D_FIRST_PERSON = exports.SELECT_LINE = exports.SELECT_LAYER = exports.SELECT_ITEM = exports.SELECT_HOLE = exports.SELECT_GROUP = exports.SELECT_DOOR_STYLE = exports.SELECT_AREA = exports.SELECT_ALL = exports.SELECTALL = exports.SECONDARY_PURPLE_COLOR = exports.SECONDARY_BLUE_COLOR = exports.SCENE_ACTIONS = exports.SAVE_PROJECT = exports.SAVE_DESIGN = exports.ROLLBACK = exports.RIGHT = exports.REVIEW_AND_QUOTE = exports.REQUEST_ASSISTANCE = exports.REPLACE_SUBMODULE = exports.REPLACE_ITEM = exports.REMOVE_VERTICAL_GUIDE = exports.REMOVE_REPLACE_SUBMODULE = exports.REMOVE_LINEAR = exports.REMOVE_LAYER = exports.REMOVE_HORIZONTAL_GUIDE = exports.REMOVE_GROUP_AND_DELETE_ELEMENTS = exports.REMOVE_GROUP = exports.REMOVE_FROM_GROUP = exports.REMOVE_DRAWING_SUPPORT = void 0;
-exports.ZOOM_VARIABLE = exports.WARRANTY_VIEW = exports.WARRANTY_SUPPORT = exports.WARNING_MESSAGE = exports.WALL_CABINET_LAYOUTPOS = exports.VIEWER3D_ACTIONS = exports.VIEWER2D_ACTIONS = exports.VERTEX_ACTIONS = exports.VALIDATE_ITEM_POSTIONS = exports.USER_ACTIONS = exports.UPDATE_ZOOM_SCALE = exports.UPDATE_ROTATING_ITEM_CHANGED = exports.UPDATE_ROTATING_ITEM = exports.UPDATE_ROTATING = exports.UPDATE_POPUP_OPEN = exports.UPDATE_MOVING_STATE = exports.UPDATE_MOUSE_COORDS = exports.UPDATE_MOLDING = exports.UPDATE_ITEM_POSITION = exports.UPDATE_DRAWING_LINE = exports.UPDATE_DRAWING_ITEM = exports.UPDATE_DRAWING_HOLE_3D = exports.UPDATE_DRAWING_HOLE = exports.UPDATE_DRAGGING_VERTEX = exports.UPDATE_DRAGGING_LINE = exports.UPDATE_DRAGGING_ITEM_CHANGED = exports.UPDATE_DRAGGING_ITEM_3DY = exports.UPDATE_DRAGGING_ITEM_3DX = exports.UPDATE_DRAGGING_ITEM = exports.UPDATE_DRAGGING_HOLE_RULER_CHANGED = exports.UPDATE_DRAGGING_HOLE_CHANGED = exports.UPDATE_DRAGGING_HOLE_3D = exports.UPDATE_DRAGGING_HOLE = exports.UPDATE_CEIL_HEIGHT_UNIT = exports.UPDATE_CEIL_HEIGHT = exports.UPDATE_3D_CEIL_HEIGHT_UNIT = exports.UPDATE_3D_CEIL_HEIGHT = exports.UPDATE_2D_CAMERA = exports.UNSELECT_GROUP = exports.UNSELECT_ALL = exports.UNIT_MILLIMETER = exports.UNIT_MILE = exports.UNIT_METER = exports.UNIT_INCH = exports.UNIT_FOOT = exports.UNIT_CENTIMETER = exports.UNIT_ANGLE = exports.UNITS_LENGTH = exports.UNDO = exports.UNCREATE = exports.TWO_D_FLOOR_PLAN = exports.TOP_MOLDING_LOCATION = exports.TOP = exports.TOGGLE_SNAP = exports.TOGGLE_LOADING_CABINET = exports.TOE_KICK_MOLDING = exports.TITLE_SMALL_COLOR = exports.TITLE_COLOR = exports.THROW_WARNING = exports.THROW_ERROR = exports.TEXT_COLOR_NEUTRAL_7 = exports.TEXT_COLOR_NEUTRAL_6 = exports.TEXT_COLOR_NEUTRAL_5 = exports.TEXT_COLOR_NEUTRAL_4 = exports.TEXT_COLOR_NEUTRAL_3 = exports.TEXT_COLOR_NEUTRAL_2 = exports.TEXT_COLOR_NEUTRAL_1 = exports.TEXT_COLOR_NEUTRAL_0 = exports.TEXT_COLOR = exports.TECHNICAL_VIEW = exports.TALL_CABINET_LAYOUTPOS = exports.TAKE_PICTURE = void 0;
+exports.PUSH_LAST_SELECTED_CATALOG_ELEMENT_TO_HISTORY = exports.PROJECT_SETTING_OPTION = exports.PROJECT_RE_NAME = exports.PROJECT_NAME_LENGTH_LIMIT = exports.PROJECT_ACTIONS = exports.PRODUCT = exports.PRIMARY_GREEN_COLOR = exports.PASTE_PROPERTIES = exports.OVERLAP_SOME = exports.OVERLAP_SAME = exports.OVERLAP_NONE = exports.OVERLAP_LINK = exports.OVERLAP_INCLUDED = exports.OPEN_PROJECT_CONFIGURATOR = exports.OPEN_CATALOG = exports.OBJTYPE_MESH = exports.OBJTYPE_GROUP = exports.NO_DATA_DATABASE = exports.NEW_PROJECT_BTN = exports.NEW_PROJECT = exports.NEW_DESIGN = exports.MOVE_COMPONENT = exports.MOLDING_LOCATIONS = exports.MODE_WAITING_DRAWING_LINE = exports.MODE_VIEWING_CATALOG = exports.MODE_UPLOADING_IMAGE = exports.MODE_SNAPPING = exports.MODE_ROTATING_ITEM_3D = exports.MODE_ROTATING_ITEM = exports.MODE_RIGHT_ELEVATION_VIEW = exports.MODE_LEFT_ELEVATION_VIEW = exports.MODE_IDLE_3D = exports.MODE_IDLE = exports.MODE_FRONT_VIEW = exports.MODE_FRONT_ELEVATION_VIEW = exports.MODE_FITTING_IMAGE = exports.MODE_ELEVATION_VIEW = exports.MODE_DRAWING_LINE = exports.MODE_DRAWING_ITEM_3D = exports.MODE_DRAWING_ITEM = exports.MODE_DRAWING_HOLE_3D = exports.MODE_DRAWING_HOLE = exports.MODE_DRAGGING_VERTEX = exports.MODE_DRAGGING_LINE = exports.MODE_DRAGGING_ITEM_3D = exports.MODE_DRAGGING_ITEM = exports.MODE_DRAGGING_HOLE_3D = exports.MODE_DRAGGING_HOLE = exports.MODE_CONFIGURING_PROJECT = exports.MODE_BACK_ELEVATION_VIEW = exports.MODE_3D_VIEW = exports.MODE_3D_FIRST_PERSON = exports.MODE_2D_ZOOM_OUT = exports.MODE_2D_ZOOM_IN = exports.MODE_2D_PAN = exports.MODE = exports.MIN_ANGLE_DISALLOW_DRAW_WALL = exports.MIDDLE_MOLDING_LOCATION = exports.MEPSILON = exports.MAX_ANGLE_SCALE = exports.MAKE_FLOOR_PLAN = exports.LOGOUT = exports.LOGIN_SUCCESS = exports.LOGIN_ERROR = exports.LOCAL_STORAGE_TOKEN_VALUE = exports.LOCAL_STORAGE_TOKEN_NAME = exports.LOCAL_STORAGE_ORIGINAL_TOKEN = exports.LOCAL_STORAGE_CUSTOMER_INFO = exports.LOCAL_STORAGE_CART_ACTION = exports.LOAD_PROJECT = exports.LIST_QUANTITIES = exports.LIST_PARTS = exports.LINE_THICKNESS = exports.LINE_ACTIONS = exports.LEFT = exports.LABEL_COLOR = exports.KITCHEN_KONFIGURATOR = exports.KEYBOARD_BUTTON_CODE = exports.ITEM_TYPE = exports.ITEM_MOVE_UP = exports.ITEMS_ACTIONS = exports.INVERT = exports.INTERNAL_EVENT_SELECT_ELEMENT = exports.INTERNAL_EVENT_ROTATE_ELEMENT = exports.INTERNAL_EVENT_DRAW_ELEMENT = exports.INTERNAL_EVENT_DRAG_ELEMENT = exports.INSTALLATION_TYPE_SKU_SUFFIX = exports.INSTALLATION_TYPE_NAME = exports.INSTALLATION_SUFFIX_TYPE = exports.INIT_CATALOG = exports.HOLE_ACTIONS = exports.HDR_URLS = exports.HAS_LOADINGBAR = exports.GROUP_TRANSLATE = exports.GROUP_ROTATE = exports.GROUP_ACTIONS = exports.GO_BACK_TO_CATALOG_PAGE = exports.FINISHING_TOUCH = exports.EXTERNAL_EVENT_ZOOM_OUT = exports.EXTERNAL_EVENT_ZOOM_IN = void 0;
+exports.STORE_DIST_ARRAY = exports.STOP_DRAWING_LINE = exports.STEP_CABINET_CHOOSE_PRODUCT = exports.STATUS_WARNING_LIGHT_COLOR = exports.STATUS_WARNING_COLOR = exports.STATUS_POSITIVE_LIGHT_COLOR = exports.STATUS_POSITIVE_COLOR = exports.STATUS_OVERDUE_LIGHT_COLOR = exports.STATUS_OVERDUE_COLOR = exports.STATUS_NEGATIVE_LIGHT_COLOR = exports.STATUS_NEGATIVE_COLOR = exports.STATUS_INFO_LIGHT_COLOR = exports.STATUS_INFO_COLOR = exports.SHIFT2DON = exports.SHIFT2DOFF = exports.SHAPE_SVG_WIDTH = exports.SHAPE_SVG_PADDING = exports.SHAPE_SVG_DEPTH = exports.SHADE_LIGHT_PURPLE_COLOR = exports.SHADE_LIGHT_GREEN_COLOR = exports.SHADE_LIGHT_BLUE_COLOR = exports.SHADE_DARK_PURPLE_COLOR = exports.SHADE_DARK_GREEN_COLOR = exports.SHADE_DARK_BLUE_COLOR = exports.SET_WALL_COLOR = exports.SET_USER_DATA = exports.SET_STATE_PROPERTIES = exports.SET_ROTATE_STATUS = exports.SET_RELATED_LINE = exports.SET_PROPERTIES = exports.SET_PROJECT_PROPERTIES = exports.SET_PROJECT_ID = exports.SET_MOVE_STATUS = exports.SET_MOLDING = exports.SET_MODELLING = exports.SET_MODE = exports.SET_LINES_ATTRIBUTES = exports.SET_LAYER_PROPERTIES = exports.SET_ITEMS_ATTRIBUTES = exports.SET_IS_HELP = exports.SET_IS_CABINET_DRAWING = exports.SET_INITIAL_DOOR_STYLE = exports.SET_HOLES_ATTRIBUTES = exports.SET_HANDLE_MATERIAL = exports.SET_GROUP_PROPERTIES = exports.SET_GROUP_BARYCENTER = exports.SET_GROUP_ATTRIBUTES = exports.SET_FLOOR_STYLES = exports.SET_DOOR_STYLE = exports.SET_DOOR_HANDLE = exports.SET_DISTANT = exports.SET_COUNTER_TOP = exports.SET_BACKSPLASH_VISIBLE = exports.SET_BACKSPLASH = exports.SET_APPLIANCE_MATERIAL = exports.SELECT_TOOL_ZOOM_OUT = exports.SELECT_TOOL_ZOOM_IN = exports.SELECT_TOOL_UPLOAD_IMAGE = exports.SELECT_TOOL_PAN = exports.SELECT_TOOL_EDIT = exports.SELECT_TOOL_DRAWING_LINE = exports.SELECT_TOOL_DRAWING_ITEM_3D = exports.SELECT_TOOL_DRAWING_ITEM = exports.SELECT_TOOL_DRAWING_HOLE_3D = exports.SELECT_TOOL_DRAWING_HOLE = exports.SELECT_TOOL_3D_VIEW = exports.SELECT_TOOL_3D_FIRST_PERSON = exports.SELECT_LINE = exports.SELECT_LAYER = exports.SELECT_ITEM = exports.SELECT_HOLE = exports.SELECT_GROUP = exports.SELECT_DOOR_STYLE = exports.SELECT_AREA = exports.SELECT_ALL = exports.SELECTALL = exports.SECONDARY_PURPLE_COLOR = exports.SECONDARY_BLUE_COLOR = exports.SCENE_ACTIONS = exports.SAVE_PROJECT = exports.SAVE_DESIGN = exports.ROLLBACK = exports.RIGHT = exports.REVIEW_AND_QUOTE = exports.REQUEST_ASSISTANCE = exports.REPLACE_SUBMODULE = exports.REPLACE_ITEM = exports.REMOVE_VERTICAL_GUIDE = exports.REMOVE_REPLACE_SUBMODULE = exports.REMOVE_LINEAR = exports.REMOVE_LAYER = exports.REMOVE_HORIZONTAL_GUIDE = exports.REMOVE_GROUP_AND_DELETE_ELEMENTS = exports.REMOVE_GROUP = exports.REMOVE_FROM_GROUP = exports.REMOVE_DRAWING_SUPPORT = exports.REMOVE_CIRCULAR_GUIDE = exports.REMOVE = exports.REDO = exports.RECREATE = void 0;
+exports.ZOOM_VARIABLE = exports.WARRANTY_VIEW = exports.WARRANTY_SUPPORT = exports.WARNING_MESSAGE = exports.WALL_CABINET_LAYOUTPOS = exports.VIEWER3D_ACTIONS = exports.VIEWER2D_ACTIONS = exports.VERTEX_ACTIONS = exports.VALIDATE_ITEM_POSTIONS = exports.USER_ACTIONS = exports.UPDATE_ZOOM_SCALE = exports.UPDATE_ROTATING_ITEM_CHANGED = exports.UPDATE_ROTATING_ITEM = exports.UPDATE_ROTATING = exports.UPDATE_POPUP_OPEN = exports.UPDATE_MOVING_STATE = exports.UPDATE_MOUSE_COORDS = exports.UPDATE_MOLDING = exports.UPDATE_ITEM_POSITION = exports.UPDATE_DRAWING_LINE = exports.UPDATE_DRAWING_ITEM = exports.UPDATE_DRAWING_HOLE_3D = exports.UPDATE_DRAWING_HOLE = exports.UPDATE_DRAGGING_VERTEX = exports.UPDATE_DRAGGING_LINE = exports.UPDATE_DRAGGING_ITEM_CHANGED = exports.UPDATE_DRAGGING_ITEM_3DY = exports.UPDATE_DRAGGING_ITEM_3DX = exports.UPDATE_DRAGGING_ITEM = exports.UPDATE_DRAGGING_HOLE_RULER_CHANGED = exports.UPDATE_DRAGGING_HOLE_CHANGED = exports.UPDATE_DRAGGING_HOLE_3D = exports.UPDATE_DRAGGING_HOLE = exports.UPDATE_CEIL_HEIGHT_UNIT = exports.UPDATE_CEIL_HEIGHT = exports.UPDATE_3D_CEIL_HEIGHT_UNIT = exports.UPDATE_3D_CEIL_HEIGHT = exports.UPDATE_2D_CAMERA = exports.UNSELECT_GROUP = exports.UNSELECT_ALL = exports.UNIT_MILLIMETER = exports.UNIT_MILE = exports.UNIT_METER = exports.UNIT_INCH = exports.UNIT_FOOT = exports.UNIT_CENTIMETER = exports.UNIT_ANGLE = exports.UNITS_LENGTH = exports.UNDO = exports.UNCREATE = exports.TWO_D_FLOOR_PLAN = exports.TOP_MOLDING_LOCATION = exports.TOP = exports.TOGGLE_SNAP = exports.TOGGLE_LOADING_CABINET = exports.TOE_KICK_MOLDING = exports.TITLE_SMALL_COLOR = exports.TITLE_COLOR = exports.THROW_WARNING = exports.THROW_ERROR = exports.TEXT_COLOR_NEUTRAL_7 = exports.TEXT_COLOR_NEUTRAL_6 = exports.TEXT_COLOR_NEUTRAL_5 = exports.TEXT_COLOR_NEUTRAL_4 = exports.TEXT_COLOR_NEUTRAL_3 = exports.TEXT_COLOR_NEUTRAL_2 = exports.TEXT_COLOR_NEUTRAL_1 = exports.TEXT_COLOR_NEUTRAL_0 = exports.TEXT_COLOR = exports.TECHNICAL_VIEW = exports.TALL_CABINET_LAYOUTPOS = exports.TAKE_PICTURE = exports.SUBTOTAL = exports.SUBMIT_REQUEST_ASSIST = exports.SUBMIT_DESIGN = exports.SUBMIT_ADD_CART = void 0;
 //API server
 // export const API_SERVER = 'http://localhost:3000/';
 // ACTIONS project
@@ -676,4 +676,10 @@ var EXTERNAL_EVENT_ZOOM_OUT = exports.EXTERNAL_EVENT_ZOOM_OUT = 'EXTERNAL_EVENT_
 var EXTERNAL_EVENT_UNDO = exports.EXTERNAL_EVENT_UNDO = 'EXTERNAL_EVENT_UNDO';
 var EXTERNAL_EVENT_REDO = exports.EXTERNAL_EVENT_REDO = 'EXTERNAL_EVENT_REDO';
 var EXTERNAL_EVENT_SET_MOLDING = exports.EXTERNAL_EVENT_SET_MOLDING = 'EXTERNAL_EVENT_SET_MOLDING';
-var EXTERNAL_EVENT_PROJECT_SETTING = exports.EXTERNAL_EVENT_PROJECT_SETTING = 'EXTERNAL_EVENT_PROJECT_SETTING';
+var EXTERNAL_EVENT_PROJECT_SETTING = exports.EXTERNAL_EVENT_PROJECT_SETTING = 'EXTERNAL_EVENT_PROJECT_SETTING';
+
+// internal event type
+var INTERNAL_EVENT_SELECT_ELEMENT = exports.INTERNAL_EVENT_SELECT_ELEMENT = 'INTERNAL_EVENT_SELECT_ELEMENT';
+var INTERNAL_EVENT_DRAG_ELEMENT = exports.INTERNAL_EVENT_DRAG_ELEMENT = 'INTERNAL_EVENT_DRAG_ELEMENT';
+var INTERNAL_EVENT_DRAW_ELEMENT = exports.INTERNAL_EVENT_DRAW_ELEMENT = 'INTERNAL_EVENT_DRAW_ELEMENT';
+var INTERNAL_EVENT_ROTATE_ELEMENT = exports.INTERNAL_EVENT_ROTATE_ELEMENT = 'INTERNAL_EVENT_ROTATE_ELEMENT';

package/lib/devLiteRenderer.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactContainerDimensions = _interopRequireDefault(require("react-container-dimensions"));
-var _mockProps = _interopRequireDefault(require("./mocks/mockProps.json"));
+var _mockProps = _interopRequireDefault(require("./mocks/mockProps2.json"));
 var _dataBundle = _interopRequireDefault(require("./mocks/dataBundle2.json"));
 var _cabinetPayload = _interopRequireDefault(require("./mocks/cabinetPayload2.json"));
 var _doorStylePayload = _interopRequireDefault(require("./mocks/doorStylePayload.json"));
@@ -23,6 +23,9 @@ var options = {
   unit: 'in',
   enable3D: true
 };
+var onInternalEvent = function onInternalEvent(evt) {
+  console.log('EVENT:', evt.type, evt.value);
+};
 document.getElementById('app').style.display = 'block';
 function WorkSpace(props) {
   var _useState = (0, _react.useState)(null),
@@ -274,6 +277,7 @@ function WorkSpace(props) {
     companyUrl: "https://example.com",
     toolbarButtons: [],
     externalEvent: externalEvent,
+    onInternalEvent: onInternalEvent,
     onError: function onError(payload) {
       // payload = {
       //   type: 'render-error' | 'runtime-error' | 'unhandled-rejection',

package/lib/utils/geometry.js

@@ -972,18 +972,18 @@ function getAllItemSnap(allItemRects) {
     var snap4 = itemrectInfo(rect.rect[3].x + ox0, rect.rect[3].y + oy0, nrot, cur && cur.size, rect.layoutpos, rect.is_corner);
     var sizeinfo = otherItems[index].cat && otherItems[index].cat.info.sizeinfo;
     if (sizeinfo) {
-      var left_blind_length = sizeinfo.left_blind_length,
-        right_blind_length = sizeinfo.right_blind_length;
-      if (left_blind_length > 0) {
-        var vx = left_blind_length - ch;
+      var leftBlindLength = sizeinfo.leftBlindLength,
+        rightBlindLength = sizeinfo.rightBlindLength;
+      if (leftBlindLength > 0) {
+        var vx = leftBlindLength - ch;
         var vy = cw;
         var dx = vx * cos + vy * sin;
         var dy = vx * sin - vy * cos;
         var snap6 = itemrectInfo(rect.rect[0].x + dx, rect.rect[0].y + dy, rect.rotRad + Math.PI / 2, cur && cur.size, rect.layoutpos, rect.is_corner);
         allItemSnap.push(snap6);
       }
-      if (right_blind_length > 0) {
-        var _vx = ch - right_blind_length;
+      if (rightBlindLength > 0) {
+        var _vx = ch - rightBlindLength;
         var _vy = cw;
         var _dx = _vx * cos + _vy * sin;
         var _dy = _vx * sin - _vy * cos;

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

@@ -484,6 +484,7 @@ function _handleExternalEvent() {
     return _regenerator["default"].wrap(function (_context5) {
       while (1) switch (_context5.prev = _context5.next) {
         case 0:
+          console.log('***external event****', props.externalEvent);
           evt = props.externalEvent;
           state = props.state.get('KitchenConfigurator');
           _t5 = evt === null || evt === void 0 ? void 0 : evt.type;
@@ -514,6 +515,7 @@ function _handleExternalEvent() {
           catalog = state.getIn(['catalog']).toJS(); // add item to catalog of state
           _element = _objectSpread(_objectSpread({}, _element), {}, {
             cds: {
+              data: [_objectSpread({}, _element.customer_property)],
               itemID: _element.itemID
             }
           });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kitchen-simulator",
-  "version": "1.0.0-clark.85",
+  "version": "1.0.0-clark.91",
   "description": "It is a kitchen simulator (self-contained micro-frontend).",
   "license": "MIT",
   "main": "lib/index.js",