kitchen-simulator 1.1.1-test.9 → 2.0.1

package/lib/components/viewer3d/viewer3d.js

@@ -1,10 +1,18 @@
 'use strict';
 
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _readOnlyError2 = _interopRequireDefault(require("@babel/runtime/helpers/readOnlyError"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
@@ -16,7 +24,7 @@ var SharedStyle = _interopRequireWildcard(require("../../shared-style"));
 var _constants = require("../../constants");
 var _util = require("util");
 var _geometry = require("../../utils/geometry");
-var _convertUnits = _interopRequireDefault(require("convert-units"));
+var _convertUnitsLite = require("../../utils/convert-units-lite");
 var _export = require("../../utils/export");
 var _helper = require("../../utils/helper");
 var _RGBELoader = require("three/examples/jsm/loaders/RGBELoader");
@@ -24,30 +32,17 @@ var _cameraControls = _interopRequireDefault(require("camera-controls"));
 var _utils = require("../viewer2d/utils");
 var _objectsUtils = require("../../utils/objects-utils");
 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 _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
-function _readOnlyError(r) { throw new TypeError('"' + r + '" is read-only'); }
 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; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
-function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
-function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
-function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
-function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+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; }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
-function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
-function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
 _cameraControls["default"].install({
   THREE: Three
 });
 var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component) {
   function Scene3DViewer(props) {
     var _this;
-    _classCallCheck(this, Scene3DViewer);
+    (0, _classCallCheck2["default"])(this, Scene3DViewer);
     _this = _callSuper(this, Scene3DViewer, [props]);
     _this.state = {
       isLoading: false,
@@ -109,8 +104,8 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
     _this.renderer.domElement.style.display = 'none';
     return _this;
   }
-  _inherits(Scene3DViewer, _React$Component);
-  return _createClass(Scene3DViewer, [{
+  (0, _inherits2["default"])(Scene3DViewer, _React$Component);
+  return (0, _createClass2["default"])(Scene3DViewer, [{
     key: "componentDidMount",
     value: function componentDidMount(nextProps) {
       var _this2 = this;
@@ -283,18 +278,18 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
           lines.push(data);
         });
         var _loop3 = function _loop3() {
-          var data = lines[_i17];
+          var data = lines[_i15];
           var realVec = [];
           data.vertices.forEach(function (vec) {
             realVec.push(vec);
           });
           if (aVertices.includes(realVec[0]) && aVertices.includes(realVec[1])) {
-            height = (0, _convertUnits["default"])(layer.ceilHeight).from(layer.unit).to(_constants.UNIT_CENTIMETER);
+            height = (0, _convertUnitsLite.convert)(layer.ceilHeight).from(layer.unit).to(_constants.UNIT_CENTIMETER);
             // height = data.properties.getIn(['height', 'length']);
             return 1; // break
           }
         };
-        for (var _i17 = 0; _i17 < lines.length; _i17++) {
+        for (var _i15 = 0; _i15 < lines.length; _i15++) {
           if (_loop3()) break;
         }
         var vertices = [];
@@ -304,11 +299,11 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
         });
         vertices.push(vertices[0]);
         var fLen = vertices.length - 1;
-        for (var _i18 = 0; _i18 < fLen; _i18++) {
-          var sX = vertices[_i18].x;
-          var sY = vertices[_i18].y;
-          var eX = vertices[_i18 + 1].x;
-          var eY = vertices[_i18 + 1].y;
+        for (var _i16 = 0; _i16 < fLen; _i16++) {
+          var sX = vertices[_i16].x;
+          var sY = vertices[_i16].y;
+          var eX = vertices[_i16 + 1].x;
+          var eY = vertices[_i16 + 1].y;
           var len = Math.sqrt((eX - sX) * (eX - sX) + (eY - sY) * (eY - sY));
           for (var cLen = 200; cLen < len; cLen += 200) {
             var cX = sX + (eX - sX) * cLen / len;
@@ -385,6 +380,9 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
       var allRect;
       var allArea;
 
+      // FLAG FOR initial phase of drawing an item
+      var isInitialPhase = true;
+
       // end snap function variable///////////////////////
       var backsplashVisible = false;
       var holeItems = _export.GeometryUtils.getHoleItems(layer);
@@ -834,7 +832,7 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
           var tRot = layer.getIn(['items', target.userData.itemId]) ? layer.getIn(['items', target.userData.itemId]).rotation : 0;
           var item = layer.getIn(['items', source.userData.itemId]);
           var layoutType = item.layoutpos;
-          var altitudeLength = (0, _convertUnits["default"])(item.properties.getIn(['altitude', '_length'])).from('in').to('cm');
+          var altitudeLength = (0, _convertUnitsLite.convert)(item.properties.getIn(['altitude', '_length'])).from('in').to('cm');
           var sBounding = source.children[0].userData;
           var tBounding = target.children[0].userData;
           var tPos = target.position.clone();
@@ -935,7 +933,7 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
             return;
           } else {
             var _layoutType = _item3.layoutpos;
-            var _altitudeLength = (0, _convertUnits["default"])(_item3.properties.getIn(['altitude', '_length'])).from('in').to('cm');
+            var _altitudeLength = (0, _convertUnitsLite.convert)(_item3.properties.getIn(['altitude', '_length'])).from('in').to('cm');
             var _sBounding = source.children[0].userData;
             var _width = _sBounding.max.x - _sBounding.min.x;
             var _height = _sBounding.max.y - _sBounding.min.y;
@@ -1200,7 +1198,7 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
           var properties = allItemRect.cur.itemInfo.properties;
           altitude = properties.getIn(['altitude', '_length']);
           var unit = properties.getIn(['altitude', '_unit']) || 'in';
-          altitude = (0, _convertUnits["default"])(altitude).from(unit).to(_this2.props.state.scene.unit);
+          altitude = (0, _convertUnitsLite.convert)(altitude).from(unit).to(_this2.props.state.scene.unit);
         }
         getPoint(event, altitude);
         var state = _this2.props.state;
@@ -1283,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);
@@ -1292,7 +1301,7 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
                   var _properties = allItemRect.cur.itemInfo.properties;
                   alti = _properties.getIn(['altitude', '_length']);
                   var _unit = _properties.getIn(['altitude', '_unit']) || 'in';
-                  alti = (0, _convertUnits["default"])(alti).from(_unit).to(_this2.props.state.scene.unit);
+                  alti = (0, _convertUnitsLite.convert)(alti).from(_unit).to(_this2.props.state.scene.unit);
                 }
                 getPoint({
                   offsetX: event.offsetX - 50,
@@ -1349,21 +1358,21 @@ 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) {
           var properties = allItemRect.cur.itemInfo.properties;
           altitude = properties.getIn(['altitude', '_length']);
           var unit = properties.getIn(['altitude', '_unit']) || 'in';
-          altitude = (0, _convertUnits["default"])(altitude).from(unit).to(_this2.props.state.scene.unit);
+          altitude = (0, _convertUnitsLite.convert)(altitude).from(unit).to(_this2.props.state.scene.unit);
         }
         scene3D.remove(angleObj);
         scene3D.remove(toolObj);
         if (!_this2.props.downloadFlag && !_this2.props.state.mode.includes('ING')) {
           _this2.props.setToolbar('');
         }
-        getPoint(event, altitude);
         if (_this2.props.state.mode == _constants.MODE_DRAWING_ITEM_3D) {
           if (Point.x > _this2.props.state.scene.width) Point.x = _this2.props.state.width;
           if (Point.y > _this2.props.state.scene.height) Point.y = _this2.props.state.height;
@@ -1373,9 +1382,9 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
             actions.itemsActions.endDrawingItem(_this2.props.state.scene.selectedLayer, sPoint.x, sPoint.y);
           } else {
             removeSnapBox();
-            var polygon = lineRect(layer);
+            var polygon = _export.GeometryUtils.getPoylgonPoints(layer);
             // if cursor is outside of room
-            if (!_export.GeometryUtils.ContainsPoint(polygon, Point.x, Point.y)) {
+            if (polygon.length > 0 && !_export.GeometryUtils.ContainsPoint(polygon, Point.x, Point.y)) {
               actions.itemsActions.endDrawingItem(_this2.props.state.scene.selectedLayer, sPoint.x, sPoint.y);
             } else {
               actions.itemsActions.updateDraggingItemChanged(targetPoint.x, -targetPoint.z, selectedObject.layerID, selectedObject.itemID);
@@ -1384,14 +1393,24 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
             }
           }
           bMove = false;
+          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();
         }
         if (_this2.props.state.mode == _constants.MODE_ROTATING_ITEM_3D) {
           _this2.context.itemsActions.endRotatingItem3D(sPoint.x, sPoint.y);
         }
+        getPoint(event, altitude);
         if (_this2.props.state.mode == _constants.MODE_DRAWING_HOLE_3D) {
           gridPlanOrigin = gridPlane.position;
           gridMatrix.copy(gridPlane.matrixWorld).invert();
@@ -1466,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;
               }
@@ -1545,19 +1570,19 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
               var _properties2 = allItemRect.cur.itemInfo.properties;
               alti = _properties2.getIn(['altitude', '_length']);
               var _unit2 = _properties2.getIn(['altitude', '_unit']) || 'in';
-              alti = (0, _convertUnits["default"])(alti).from(_unit2).to(_this2.props.state.scene.unit);
+              alti = (0, _convertUnitsLite.convert)(alti).from(_unit2).to(_this2.props.state.scene.unit);
             }
             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({
@@ -1568,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({
@@ -1609,6 +1634,171 @@ 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;
+        // if not initial moment of drawing an item
+        if (!isInitialPhase) return;
+        var bNormalFlow = true;
+        _this2.getSelectedObject();
+        var layer = _this2.props.state.scene.getIn(['layers', selectedObject.layerID]);
+        var mX = Point.x - sPoint.x;
+        var mY = Point.y - sPoint.y;
+        var item3D = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
+        (0, _sceneCreator.deleteSpecifiedMeshObjects)('TransformBox');
+        (0, _sceneCreator.deleteSpecifiedMeshObjects)('WarningBox' + selectedObject.itemID);
+        var item = layer.getIn(['items', selectedObject.itemID]);
+        if (!item3D || !item) return;
+        if (item.counterTop.uri == '') item.counterTop.uri = layer.counterTop.uri;
+        var sRot = item.rotation;
+        var originPos = item3D.position.clone();
+        var tPos = new Three.Vector2(mX + originPos.x, mY - originPos.z);
+        var sBounding = item3D.children[0].userData;
+        var swidth = sBounding.max.x - sBounding.min.x;
+        var sdepth = sBounding.max.z - sBounding.min.z;
+        var sVertices = _this2.getRectPoints(swidth, sdepth, tPos.clone(), sRot % 360 / 180 * Math.PI);
+        prepareSnap(layer);
+
+        // calc altitude
+        var altitude = 0;
+        if (allItemRect && allItemRect.cur && allItemRect.cur.itemInfo !== undefined) {
+          var properties = allItemRect.cur.itemInfo.properties;
+          altitude = properties.getIn(['altitude', '_length']);
+          var unit = properties.getIn(['altitude', '_unit']) || 'in';
+          altitude = (0, _convertUnitsLite.convert)(altitude).from(unit).to(_this2.props.state.scene.unit);
+        }
+        // We need to set cam position since when MODE_DRAWING_ITEM_3D mouse down event
+        // is not emited so cam position is not valid
+        gridPlanOrigin = gridPlane.position;
+        gridMatrix.copy(gridPlane.matrixWorld).invert();
+        camPos = camera.position;
+
+        // calc cursor position
+        getPoint(event, altitude);
+        var polygon = _export.GeometryUtils.getPoylgonPoints(layer);
+
+        // if no wall (no area)
+        if (!polygon.length) {
+          // place the item at cursor position
+          actions.itemsActions.updateDraggingItemChanged(Point.x, Point.y, selectedObject.layerID, selectedObject.itemID);
+          return;
+        }
+
+        // calc snap
+        var _GeometryUtils$calcCr = _export.GeometryUtils.calcCreateSnap(allItemRect, allItemSnap, allLineRects, allLineSnap, allRect, Point.x, Point.y, polygon),
+          cx = _GeometryUtils$calcCr.cx,
+          cy = _GeometryUtils$calcCr.cy,
+          crot = _GeometryUtils$calcCr.crot,
+          rotRad = _GeometryUtils$calcCr.rotRad;
+        var finalPosition = {
+          x: cx,
+          y: cy,
+          rot: crot,
+          rotRad: rotRad
+        };
+
+        // calc current item rect
+        var itemRect = _objectSpread(_objectSpread({}, allItemRect.cur), {}, {
+          pos: {
+            x: Point.x,
+            y: Point.y
+          }
+        });
+
+        // if cursor position is inside the room
+        if (_export.GeometryUtils.ContainsPoint(polygon, Point.x, Point.y)) {
+          // if cursor position is available to place the item
+          if (_export.GeometryUtils.validRect(itemRect, allRect)) {
+            actions.itemsActions.updateDraggingItemChanged(Point.x, Point.y, selectedObject.layerID, selectedObject.itemID);
+            sPoint.set(Point.x, Point.y);
+            bNormalFlow = false;
+          }
+        } else {
+          // if cursor is outside the room and there is no snap candidate,
+          // then place the item at any free position inside the room.
+          if (!_export.GeometryUtils.ContainsPoint(polygon, cx, cy)) {
+            var points = [];
+            var point = [];
+
+            // rebuild variable to be passed to getCentriodOfPolygon
+            // polygon: [ x0, y0, x1, y1, ... ] ==> points: [[x0, y0], [x1, y1], ...]
+            polygon === null || polygon === void 0 || polygon.forEach(function (value, index) {
+              point.push(value);
+              if (index % 2) {
+                points.push(point);
+                point = [];
+              }
+            });
+
+            // calc center position of the room
+            var centerPos = _export.GeometryUtils.getCentroidOfPolygon(points);
+            var itemRect1 = _objectSpread(_objectSpread({}, allItemRect.cur), {}, {
+              pos: {
+                x: centerPos.x,
+                y: centerPos.y
+              }
+            });
+            var itemRect2 = _objectSpread(_objectSpread({}, allItemRect.cur), {}, {
+              pos: {
+                x: centerPos.x,
+                y: centerPos.y
+              },
+              rotRad: allItemRect.cur.rotRad + Math.PI / 2
+            });
+
+            // find a free position in the room
+            if (_export.GeometryUtils.validRect(itemRect1, allRect)) {
+              actions.itemsActions.updateDraggingItemChanged(centerPos.x, centerPos.y, selectedObject.layerID, selectedObject.itemID);
+              sPoint.set(centerPos.x, centerPos.y);
+              bNormalFlow = false;
+            } else if (_export.GeometryUtils.validRect(itemRect2, allRect)) {
+              finalPosition = {
+                x: centerPos.x,
+                y: centerPos.y,
+                rotRad: itemRect2.rotRad,
+                rot: itemRect2.rotRad / Math.PI * 180
+              };
+              sPoint.set(centerPos.x, centerPos.y);
+            }
+          }
+        }
+        var nPos = new Three.Vector2(cx, cy);
+        if (!_this2.collisionHoleCheck(item3D, nPos, item.rotation, {
+          userData: {
+            itemId: null
+          }
+        }, item, _this2.context.catalog)) {
+          _this2.collisionSlide(item3D, originPos, layer, sVertices, tPos, item);
+        }
+        itemRect = _objectSpread(_objectSpread({}, allItemRect.cur), {}, {
+          pos: {
+            x: finalPosition.x,
+            y: finalPosition.y
+          },
+          rotRad: finalPosition.rotRad
+        });
+
+        // if the room is fullfilled with items or can't calc snap correctly
+        if (!_export.GeometryUtils.validRect(itemRect, allRect)) {
+          // then place the item at cursor position
+          actions.itemsActions.updateDraggingItemChanged(Point.x, Point.y, selectedObject.layerID, selectedObject.itemID);
+          sPoint.set(Point.x, Point.y);
+          bNormalFlow = false;
+        }
+        if (bNormalFlow) {
+          actions.itemsActions.updateDraggingItemChanged(finalPosition.x, finalPosition.y, selectedObject.layerID, selectedObject.itemID);
+          actions.itemsActions.updateRotatingItemChanged(finalPosition.rot, selectedObject.layerID, selectedObject.itemID);
+          sPoint.set(finalPosition.x, finalPosition.y);
+        }
+        isInitialPhase = false;
+        _this2.handleAfterMovingItem();
       };
       this.mouseMoveEvent = function (event) {
         event.preventDefault();
@@ -1618,7 +1808,7 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
           var properties = allItemRect.cur.itemInfo.properties;
           altitude = properties.getIn(['altitude', '_length']);
           var unit = properties.getIn(['altitude', '_unit']) || 'in';
-          altitude = (0, _convertUnits["default"])(altitude).from(unit).to(_this2.props.state.scene.unit);
+          altitude = (0, _convertUnitsLite.convert)(altitude).from(unit).to(_this2.props.state.scene.unit);
         }
         if (_this2.props.state.mode === _constants.MODE_DRAWING_HOLE_3D) {
           gridPlanOrigin = gridPlane.position;
@@ -1650,49 +1840,22 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
           camPos = camera.position;
           getPoint(event, altitude);
           if (Point.x > _this2.props.state.scene.width || Point.x < 0 || Point.y > _this2.props.state.scene.height || Point.y < 0) return;
-          var _layerID = _this2.props.state.scene.selectedLayer;
-          selectedObject = {
-            layerID: _layerID
-          };
-          var _layer = _this2.props.state.scene.getIn(['layers', selectedObject.layerID]);
-          var polygon = lineRect(_layer);
-          var isCursorInArea = _export.GeometryUtils.ContainsPoint(polygon, Point.x, Point.y);
+          _this2.getSelectedObject();
           var _drawingSupport = _this2.props.state.drawingSupport;
           if (!_drawingSupport.has('currentID')) {
-            var initialX = Point.x,
-              initialY = Point.y;
-
-            // if cursor is outside the room area,
-            // place the item at center of room area.
-            if (!isCursorInArea && polygon.length > 0) {
-              // rebuild polygon variable to be suitable for getCentroid() function
-              var points = [];
-              var point = [];
-              polygon === null || polygon === void 0 || polygon.forEach(function (value, index) {
-                point.push(value);
-                if (index % 2 === 1) {
-                  points.push(point);
-                  point = [];
-                }
-              });
-              var centroid = _export.GeometryUtils.getCentroidOfPolygon(points);
-              initialX = centroid[0];
-              initialY = centroid[1];
-            }
-            _this2.context.itemsActions.updateDrawingItem(_this2.props.state.scene.selectedLayer, initialX, initialY);
-            sPoint.set(initialX, initialY);
+            _this2.context.itemsActions.updateDrawingItem(selectedObject.layerID, Point.x, Point.y);
+            sPoint.set(Point.x, Point.y);
           } else {
-            var itemID = _this2.props.state.drawingSupport.get('currentID');
-            selectedObject.itemID = itemID;
             var mX = Point.x - sPoint.x;
             var mY = Point.y - sPoint.y;
+            var _layer = _this2.props.state.scene.getIn(['layers', selectedObject.layerID]);
             var item3D = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
             (0, _sceneCreator.deleteSpecifiedMeshObjects)('TransformBox');
-            (0, _sceneCreator.deleteSpecifiedMeshObjects)('WarningBox' + itemID);
-            var item = _layer.items.getIn([selectedObject.itemID]);
+            (0, _sceneCreator.deleteSpecifiedMeshObjects)('WarningBox' + selectedObject.itemID);
+            var item = _layer.getIn(['items', selectedObject.itemID]);
+            if (!item3D || !item) return;
             if (item.counterTop.uri == '') item.counterTop.uri = _layer.counterTop.uri;
             var sRot = item.rotation;
-            if (!item3D) return;
             var originPos = item3D.position.clone();
             var tPos = new Three.Vector2(mX + originPos.x, mY - originPos.z);
             var sBounding = item3D.children[0].userData;
@@ -1711,78 +1874,28 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
               }
             }, item, _this2.context.catalog)) {
               _this2.collisionSlide(item3D, originPos, _layer, sVertices, tPos, item);
-              //return;
             }
-            if (polygon.length > 0) {
-              var PolygonSect = _export.GeometryUtils.ContainsPoint(polygon, _nx, _ny);
+            var polygonPoint = _export.GeometryUtils.getPoylgonPoints(_layer);
+            if (polygonPoint.length > 0) {
+              var PolygonSect = _export.GeometryUtils.ContainsPoint(polygonPoint, _nx, _ny);
               if (!PolygonSect) {
-                var _GeometryUtils$calcCr = _export.GeometryUtils.calcCreateSnap(allItemRect, allItemSnap, allLineRects, allLineSnap, allRect, Point.x, Point.y, polygon),
-                  cx = _GeometryUtils$calcCr.cx,
-                  cy = _GeometryUtils$calcCr.cy,
-                  crot = _GeometryUtils$calcCr.crot;
+                var _GeometryUtils$calcCr2 = _export.GeometryUtils.calcCreateSnap(allItemRect, allItemSnap, allLineRects, allLineSnap, allRect, Point.x, Point.y, polygonPoint),
+                  cx = _GeometryUtils$calcCr2.cx,
+                  cy = _GeometryUtils$calcCr2.cy,
+                  crot = _GeometryUtils$calcCr2.crot;
                 _nx = cx;
                 _ny = cy;
                 rot = crot;
               }
             }
-            if (polygon.length > 0) {
-              var isSnapInArea = _export.GeometryUtils.ContainsPoint(polygon, _nx, _ny);
-              if (!isSnapInArea) return;
+            if (polygonPoint.length > 0) {
+              var isSect = _export.GeometryUtils.ContainsPoint(polygonPoint, _nx, _ny);
+              if (!isSect) return;
             }
             actions.itemsActions.updateDraggingItemChanged(_nx, _ny, selectedObject.layerID, selectedObject.itemID);
             actions.itemsActions.updateRotatingItemChanged(rot, selectedObject.layerID, selectedObject.itemID);
             sPoint.set(_nx, _ny);
-            (0, _sceneCreator.getDistances)(_layer);
-            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, item.id, pointArray);
-            var minDis = _sceneCreator.fVLine[0].userData.distance;
-            var snapObj = _sceneCreator.fVLine[0];
-            var iPos = item3D.position.clone();
-            var snapDis = Math.sqrt((iPos.x - targetPoint.x) * (iPos.x - targetPoint.x) + (iPos.z - targetPoint.z) * (iPos.z - targetPoint.z));
-            if (snapDis >= 100 && snapObj != null) {
-              removeSnapBox();
-              backsplashVisible = false;
-              //console.log('1 snap no');
-            }
-            for (var _i11 = 1; _i11 < _sceneCreator.fVLine.length; _i11++) {
-              if (minDis > _sceneCreator.fVLine[_i11].userData.distance) {
-                minDis = _sceneCreator.fVLine[_i11].userData.distance;
-                snapObj = _sceneCreator.fVLine[_i11];
-              }
-            }
-            if (snapBox == null) {
-              snapFlag = false;
-            }
-            actions.sceneActions.updateMovingState(false);
-            if (minDis < snapDelta && !snapFlag) {
-              _this2.snap(snapObj, _layer);
-              snapFlag = true;
-              //console.log('1 snap Yes')
-              (0, _sceneCreator.getDistances)(_layer, true);
-              var _i12 = 0;
-              for (_i12 = 0; _i12 < _sceneCreator.fVLine.length; _i12++) {
-                if (_sceneCreator.fVLine[_i12].userData.distance < snapDelta) {
-                  break;
-                }
-              }
-              if (_i12 === _sceneCreator.fVLine.length) backsplashVisible = false;else backsplashVisible = true;
-            }
-            actions.itemsActions.setBacksplashVisible(selectedObject.itemID, backsplashVisible);
+            _this2.handleAfterMovingItem();
           }
         }
         if (bRotate) {
@@ -1850,78 +1963,28 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
               _this2.collisionSlide(_item3D2, _originPos, _layer3, _sVertices, _tPos4, _item5);
               //return;
             }
-            var polygonPoint = lineRect(_layer3);
-            if (polygonPoint.length > 0) {
-              var _PolygonSect = _export.GeometryUtils.ContainsPoint(polygonPoint, _nx3, _ny3);
+            var _polygonPoint = _export.GeometryUtils.getPoylgonPoints(_layer3);
+            if (_polygonPoint.length > 0) {
+              var _PolygonSect = _export.GeometryUtils.ContainsPoint(_polygonPoint, _nx3, _ny3);
               if (!_PolygonSect) {
-                var _GeometryUtils$calcCr2 = _export.GeometryUtils.calcCreateSnap(allItemRect, allItemSnap, allLineRects, allLineSnap, allRect, Point.x, Point.y, polygonPoint),
-                  _cx3 = _GeometryUtils$calcCr2.cx,
-                  _cy = _GeometryUtils$calcCr2.cy,
-                  _crot = _GeometryUtils$calcCr2.crot;
+                var _GeometryUtils$calcCr3 = _export.GeometryUtils.calcCreateSnap(allItemRect, allItemSnap, allLineRects, allLineSnap, allRect, Point.x, Point.y, _polygonPoint),
+                  _cx3 = _GeometryUtils$calcCr3.cx,
+                  _cy = _GeometryUtils$calcCr3.cy,
+                  _crot = _GeometryUtils$calcCr3.crot;
                 _nx3 = _cx3;
                 _ny3 = _cy;
                 _rot = _crot;
               }
             }
-            var _polygon = lineRect(_layer3);
-            if (_polygon.length > 0) {
-              var Sect = _export.GeometryUtils.ContainsPoint(_polygon, _nx3, _ny3);
+            var polygon = _export.GeometryUtils.getPoylgonPoints(_layer3);
+            if (polygon.length > 0) {
+              var Sect = _export.GeometryUtils.ContainsPoint(polygon, _nx3, _ny3);
               if (!Sect) return;
             }
             actions.itemsActions.updateDraggingItemChanged(_nx3, _ny3, selectedObject.layerID, selectedObject.itemID);
             actions.itemsActions.updateRotatingItemChanged(_rot, selectedObject.layerID, selectedObject.itemID);
             sPoint.set(_nx3, _ny3);
-            (0, _sceneCreator.getDistances)(_layer3);
-            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(_layer3.id, _item5.id, _pointArray);
-            var _minDis = _sceneCreator.fVLine[0].userData.distance;
-            var _snapObj = _sceneCreator.fVLine[0];
-            var _iPos = _item3D2.position.clone();
-            var _snapDis = Math.sqrt((_iPos.x - targetPoint.x) * (_iPos.x - targetPoint.x) + (_iPos.z - targetPoint.z) * (_iPos.z - targetPoint.z));
-            if (_snapDis >= 100 && _snapObj != null) {
-              removeSnapBox();
-              backsplashVisible = false;
-              //console.log('1 snap no');
-            }
-            for (var _i13 = 1; _i13 < _sceneCreator.fVLine.length; _i13++) {
-              if (_minDis > _sceneCreator.fVLine[_i13].userData.distance) {
-                _minDis = _sceneCreator.fVLine[_i13].userData.distance;
-                _snapObj = _sceneCreator.fVLine[_i13];
-              }
-            }
-            if (snapBox == null) {
-              snapFlag = false;
-            }
-            actions.sceneActions.updateMovingState(false);
-            if (_minDis < snapDelta && !snapFlag) {
-              _this2.snap(_snapObj, _layer3);
-              snapFlag = true;
-              //console.log('1 snap Yes')
-              (0, _sceneCreator.getDistances)(_layer3, true);
-              var _i14 = 0;
-              for (_i14 = 0; _i14 < _sceneCreator.fVLine.length; _i14++) {
-                if (_sceneCreator.fVLine[_i14].userData.distance < snapDelta) {
-                  break;
-                }
-              }
-              if (_i14 === _sceneCreator.fVLine.length) backsplashVisible = false;else backsplashVisible = true;
-            }
-            actions.itemsActions.setBacksplashVisible(selectedObject.itemID, backsplashVisible);
+            _this2.handleAfterMovingItem();
           }
         }
         if (!bMove && !bRotate && !bMoveUP) {
@@ -1934,13 +1997,13 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
           rayDirection = rayDirection.normalize();
           var meshes = (0, _objectsUtils.getAllMeshes)(toIntersect);
           var intersects = raycaster.intersectObjects(meshes, true);
-          var _i15;
+          var _i11;
           if (intersects.length > 0 && !isNaN(intersects[0].distance)) {
-            for (_i15 = 0; _i15 < intersects.length; _i15++) {
-              if (intersects[_i15].object.name === 'warningObj') break;
+            for (_i11 = 0; _i11 < intersects.length; _i11++) {
+              if (intersects[_i11].object.name === 'warningObj') break;
             }
-            if (intersects[_i15] !== undefined) {
-              var distance = Math.sqrt(Math.pow((intersects[_i15].uv.x - 0.5) * 50, 2) + Math.pow((intersects[_i15].uv.y - 0.75) * 100, 2));
+            if (intersects[_i11] !== undefined) {
+              var distance = Math.sqrt(Math.pow((intersects[_i11].uv.x - 0.5) * 50, 2) + Math.pow((intersects[_i11].uv.y - 0.75) * 100, 2));
               if (distance <= 20) {
                 var infoPos = {
                   x: 0,
@@ -1956,15 +2019,72 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
                 } else {
                   infoPos.x = event.offsetX;
                 }
-                document.getElementById('warning_box_2d').style.display = 'flex';
-                document.getElementById('warning_box_2d').style.top = "".concat(infoPos.y, "px");
-                document.getElementById('warning_box_2d').style.left = "".concat(infoPos.x, "px");
-                return;
+                if (!(0, _helper.isEmpty)(document.getElementById('warning_box_2d'))) {
+                  document.getElementById('warning_box_2d').style.display = 'flex';
+                  document.getElementById('warning_box_2d').style.top = "".concat(infoPos.y, "px");
+                  document.getElementById('warning_box_2d').style.left = "".concat(infoPos.x, "px");
+                  return;
+                }
               }
             }
           }
         }
-        document.getElementById('warning_box_2d').style.display = 'none';
+        if (!(0, _helper.isEmpty)(document.getElementById('warning_box_2d'))) document.getElementById('warning_box_2d').style.display = 'none';
+      };
+
+      // handle snapBox, distArray, backsplash
+      this.handleAfterMovingItem = function () {
+        var layer = _this2.props.state.scene.getIn(['layers', selectedObject.layerID]);
+        var item3D = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
+        (0, _sceneCreator.getDistances)(layer);
+        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(selectedObject.layerID, selectedObject.itemID, pointArray);
+        var minDis = _sceneCreator.fVLine[0].userData.distance;
+        var snapObj = _sceneCreator.fVLine[0];
+        var iPos = item3D.position.clone();
+        var snapDis = Math.sqrt((iPos.x - targetPoint.x) * (iPos.x - targetPoint.x) + (iPos.z - targetPoint.z) * (iPos.z - targetPoint.z));
+        if (snapDis >= 100 && snapObj != null) {
+          removeSnapBox();
+          backsplashVisible = false;
+        }
+        for (var _i12 = 1; _i12 < _sceneCreator.fVLine.length; _i12++) {
+          if (minDis > _sceneCreator.fVLine[_i12].userData.distance) {
+            minDis = _sceneCreator.fVLine[_i12].userData.distance;
+            snapObj = _sceneCreator.fVLine[_i12];
+          }
+        }
+        if (snapBox == null) {
+          snapFlag = false;
+        }
+        actions.sceneActions.updateMovingState(false);
+        if (minDis < snapDelta && !snapFlag) {
+          _this2.snap(snapObj, layer);
+          snapFlag = true;
+          (0, _sceneCreator.getDistances)(layer, true);
+          var _i13 = 0;
+          for (_i13 = 0; _i13 < _sceneCreator.fVLine.length; _i13++) {
+            if (_sceneCreator.fVLine[_i13].userData.distance < snapDelta) {
+              break;
+            }
+          }
+          if (_i13 === _sceneCreator.fVLine.length) backsplashVisible = false;else backsplashVisible = true;
+        }
+        actions.itemsActions.setBacksplashVisible(selectedObject.itemID, backsplashVisible);
       };
       this.onkeydown = function (event) {
         if (_this2.props.keyDownEnable && !(0, _helper.isElevationView)(state.mode)) {
@@ -2021,6 +2141,14 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
       this.handleKeyDown = function (event) {
         _this2.onkeydown(event);
       };
+      this.getSelectedObject = function () {
+        var layerID = _this2.props.state.scene.selectedLayer;
+        var itemID = _this2.props.state.drawingSupport.get('currentID');
+        selectedObject = {
+          layerID: layerID,
+          itemID: itemID
+        };
+      };
 
       // Renderer & Event listener
 
@@ -2029,6 +2157,7 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
       if (!this.props.downloadFlag) {
         this.renderer.domElement.addEventListener('mousedown', this.mouseDownEvent);
         this.renderer.domElement.addEventListener('mouseup', this.mouseUpEvent);
+        this.renderer.domElement.addEventListener('mouseenter', this.mouseEnterEvent);
         this.renderer.domElement.addEventListener('mousemove', this.mouseMoveEvent);
         window.addEventListener('keydown', this.onkeydown);
         window.SPKeyDown = this.handleKeyDown;
@@ -2070,7 +2199,7 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
         scene3D = new Three.Scene();
         if ((0, _helper.isElevationView)(state.mode)) scene3D.background = new Three.Color(0xffffff);
         // change color about v1: 0x8791AB, v2: 0xC2C2C2, v3: 0xC3CADC
-        else scene3D.background = new Three.Color(0xc3cadc); // change color about v1: 0x8791AB, v2: 0xC2C2C2, v3: 0xC3CADC
+        else scene3D.background = new Three.Color(0xffffff); // change color about v1: 0x8791AB, v2: 0xC2C2C2, v3: 0xC3CADC
         // scene3D.fog = new Three.Fog(0xC3CADC, 2000, 3500);
         window.scene3D = scene3D;
         // Camera
@@ -2078,7 +2207,7 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
           // In elevation view, set Orthographic camera's position, angle and rotation about selected line
           var layers = scene.layers;
           var selectedLayer = layers.get(scene.selectedLayer);
-          var ceilHeight = (0, _convertUnits["default"])(selectedLayer.ceilHeight).from(selectedLayer.unit).to(scene.unit);
+          var ceilHeight = (0, _convertUnitsLite.convert)(selectedLayer.ceilHeight).from(selectedLayer.unit).to(scene.unit);
           var lines = [];
           var selectedLine = selectedLayer.lines.get(selectedLayer.selected.lines.toJS()[0]);
           var vertex0 = selectedLayer.vertices.get(selectedLine.vertices.get(0));
@@ -2169,9 +2298,9 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
       function render() {
         var delta = clock.getDelta(); // Get time delta for smooth updates
         if (!(0, _helper.isElevationView)(state.mode)) cameraControls.update(delta);
-        for (var _i16 = 0; _i16 < lights.length; _i16++) {
-          lights[_i16].light.position.set(planData.plan.position.x + lights[_i16].x, planData.plan.position.y + lights[_i16].height - 10, planData.plan.position.z - lights[_i16].y);
-          lights[_i16].target.position.set(planData.plan.position.x + lights[_i16].x, planData.plan.position.y, planData.plan.position.z - lights[_i16].y);
+        for (var _i14 = 0; _i14 < lights.length; _i14++) {
+          lights[_i14].light.position.set(planData.plan.position.x + lights[_i14].x, planData.plan.position.y + lights[_i14].height - 10, planData.plan.position.z - lights[_i14].y);
+          lights[_i14].target.position.set(planData.plan.position.x + lights[_i14].x, planData.plan.position.y, planData.plan.position.z - lights[_i14].y);
         }
         camera.updateMatrix();
         camera.updateMatrixWorld();
@@ -2215,7 +2344,7 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
             var indexAttribute = line.geometry.getIndex();
             var firstFaceIndices = undefined;
             if (indexAttribute && indexAttribute.length > 0) {
-              [indexAttribute.getX(0), indexAttribute.getX(1), indexAttribute.getX(2)], _readOnlyError("firstFaceIndices");
+              [indexAttribute.getX(0), indexAttribute.getX(1), indexAttribute.getX(2)], (0, _readOnlyError2["default"])("firstFaceIndices");
             }
             if (firstFaceIndices == undefined) return;
             // normal vector of the line
@@ -2312,7 +2441,7 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
       var width = nextProps.width,
         height = nextProps.height;
       var selectedLayer = nextProps.state.getIn(['scene', 'layers', nextProps.state.scene.selectedLayer]);
-      var ceilHeight = (0, _convertUnits["default"])(selectedLayer.ceilHeight).from(selectedLayer.unit).to(nextProps.state.scene.unit);
+      var ceilHeight = (0, _convertUnitsLite.convert)(selectedLayer.ceilHeight).from(selectedLayer.unit).to(nextProps.state.scene.unit);
       var actions = {
         areaActions: this.context.areaActions,
         holesActions: this.context.holesActions,
@@ -2470,7 +2599,6 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
           }));
         } else {
           document.getElementById('front') && (document.getElementById('front').style.display = 'none');
-          document.getElementById('error').style.display = 'none';
           this.renderer.domElement.style.display = 'none';
           return /*#__PURE__*/_react["default"].createElement("div", {
             style: {
@@ -2505,7 +2633,6 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
           alt: "img"
         }));
       } else {
-        !this.props.downloadFlag && (document.getElementById('error').style.display = 'block');
         this.renderer.domElement.style.pointerEvents = 'auto';
         this.renderer.domElement.style.opacity = '1';
         !this.props.downloadFlag && document.getElementById('front') && (document.getElementById('front').style.display = 'block');
@@ -2530,4 +2657,5 @@ Scene3DViewer.contextTypes = {
   sceneActions: _propTypes["default"].object.isRequired,
   projectActions: _propTypes["default"].object.isRequired,
   catalog: _propTypes["default"].object
-};
+};
+module.exports = exports.default;