kitchen-simulator 1.1.1-test.9 → 2.0.1

package/es/components/viewer3d/viewer3d.js

@@ -1,44 +1,37 @@
 '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); }
-function _readOnlyError(r) { throw new TypeError('"' + r + '" is read-only'); }
+import _readOnlyError from "@babel/runtime/helpers/esm/readOnlyError";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+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";
 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 _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); }
 import React from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import * as Three from 'three';
-import { parseData, updateScene, visibleTransformBox, getDistances, fVLine, deleteSpecifiedMeshObjects, createBacksplash, checkCabinetOverlap } from "./scene-creator";
-import { disposeScene } from "./three-memory-cleaner";
-import { disposeObject } from "./three-memory-cleaner";
+import { checkCabinetOverlap, createBacksplash, deleteSpecifiedMeshObjects, fVLine, getDistances, parseData, updateScene, visibleTransformBox } from "./scene-creator";
+import { disposeObject, disposeScene } from "./three-memory-cleaner";
 import diff from 'immutablediff';
 import * as SharedStyle from "../../shared-style";
-import { MODE_DRAWING_ITEM_3D, MODE_IDLE_3D, MODE_3D_VIEW, UNIT_CENTIMETER, MODE_DRAWING_HOLE_3D, SECONDARY_PURPLE_COLOR, MODE_ELEVATION_VIEW, MODE_DRAGGING_ITEM_3D, MODE_ROTATING_ITEM_3D, WALL_CABINET_LAYOUTPOS, BASE_CABINET_LAYOUTPOS, TALL_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 'convert-units';
+import { convert } from "../../utils/convert-units-lite";
 import { GeometryUtils } from "../../utils/export";
 import { handleCamRect, isElevationView, isEmpty } from "../../utils/helper";
 import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
 import CameraControls from 'camera-controls';
+import { returnReplaceableDeepSearchType } from "../viewer2d/utils";
+import { getAllMeshes, vectorIntersectWithMesh } from "../../utils/objects-utils";
 CameraControls.install({
   THREE: Three
 });
-import { returnReplaceableDeepSearchType } from "../viewer2d/utils";
-import { getAllMeshes, vectorIntersectWithMesh } from "../../utils/objects-utils";
 var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
   function Scene3DViewer(props) {
     var _this;
@@ -278,7 +271,7 @@ var Scene3DViewer = /*#__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);
@@ -289,7 +282,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
             return 1; // break
           }
         };
-        for (var _i17 = 0; _i17 < lines.length; _i17++) {
+        for (var _i15 = 0; _i15 < lines.length; _i15++) {
           if (_loop3()) break;
         }
         var vertices = [];
@@ -299,11 +292,11 @@ var Scene3DViewer = /*#__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;
@@ -380,6 +373,9 @@ var Scene3DViewer = /*#__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 = GeometryUtils.getHoleItems(layer);
@@ -1278,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);
@@ -1344,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) {
@@ -1358,7 +1366,6 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
         if (!_this2.props.downloadFlag && !_this2.props.state.mode.includes('ING')) {
           _this2.props.setToolbar('');
         }
-        getPoint(event, altitude);
         if (_this2.props.state.mode == 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;
@@ -1368,9 +1375,9 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
             actions.itemsActions.endDrawingItem(_this2.props.state.scene.selectedLayer, sPoint.x, sPoint.y);
           } else {
             removeSnapBox();
-            var polygon = lineRect(layer);
+            var polygon = GeometryUtils.getPoylgonPoints(layer);
             // if cursor is outside of room
-            if (!GeometryUtils.ContainsPoint(polygon, Point.x, Point.y)) {
+            if (polygon.length > 0 && !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);
@@ -1379,14 +1386,24 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
             }
           }
           bMove = false;
+          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();
         }
         if (_this2.props.state.mode == MODE_ROTATING_ITEM_3D) {
           _this2.context.itemsActions.endRotatingItem3D(sPoint.x, sPoint.y);
         }
+        getPoint(event, altitude);
         if (_this2.props.state.mode == MODE_DRAWING_HOLE_3D) {
           gridPlanOrigin = gridPlane.position;
           gridMatrix.copy(gridPlane.matrixWorld).invert();
@@ -1461,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;
               }
@@ -1545,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({
@@ -1563,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({
@@ -1604,6 +1627,171 @@ 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;
+        // 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];
+        deleteSpecifiedMeshObjects('TransformBox');
+        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 = 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 = 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 = 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 (GeometryUtils.ContainsPoint(polygon, Point.x, Point.y)) {
+          // if cursor position is available to place the item
+          if (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 (!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 = 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 (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 (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 (!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();
@@ -1645,49 +1833,22 @@ var Scene3DViewer = /*#__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 = 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 = 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];
             deleteSpecifiedMeshObjects('TransformBox');
-            deleteSpecifiedMeshObjects('WarningBox' + itemID);
-            var item = _layer.items.getIn([selectedObject.itemID]);
+            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;
@@ -1706,78 +1867,28 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
               }
             }, item, _this2.context.catalog)) {
               _this2.collisionSlide(item3D, originPos, _layer, sVertices, tPos, item);
-              //return;
             }
-            if (polygon.length > 0) {
-              var PolygonSect = GeometryUtils.ContainsPoint(polygon, _nx, _ny);
+            var polygonPoint = GeometryUtils.getPoylgonPoints(_layer);
+            if (polygonPoint.length > 0) {
+              var PolygonSect = GeometryUtils.ContainsPoint(polygonPoint, _nx, _ny);
               if (!PolygonSect) {
-                var _GeometryUtils$calcCr = 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 = 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 = GeometryUtils.ContainsPoint(polygon, _nx, _ny);
-              if (!isSnapInArea) return;
+            if (polygonPoint.length > 0) {
+              var isSect = 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);
-            getDistances(_layer);
-            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, item.id, pointArray);
-            var minDis = fVLine[0].userData.distance;
-            var snapObj = 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 < fVLine.length; _i11++) {
-              if (minDis > fVLine[_i11].userData.distance) {
-                minDis = fVLine[_i11].userData.distance;
-                snapObj = 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')
-              getDistances(_layer, true);
-              var _i12 = 0;
-              for (_i12 = 0; _i12 < fVLine.length; _i12++) {
-                if (fVLine[_i12].userData.distance < snapDelta) {
-                  break;
-                }
-              }
-              if (_i12 === fVLine.length) backsplashVisible = false;else backsplashVisible = true;
-            }
-            actions.itemsActions.setBacksplashVisible(selectedObject.itemID, backsplashVisible);
+            _this2.handleAfterMovingItem();
           }
         }
         if (bRotate) {
@@ -1845,78 +1956,28 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
               _this2.collisionSlide(_item3D2, _originPos, _layer3, _sVertices, _tPos4, _item5);
               //return;
             }
-            var polygonPoint = lineRect(_layer3);
-            if (polygonPoint.length > 0) {
-              var _PolygonSect = GeometryUtils.ContainsPoint(polygonPoint, _nx3, _ny3);
+            var _polygonPoint = GeometryUtils.getPoylgonPoints(_layer3);
+            if (_polygonPoint.length > 0) {
+              var _PolygonSect = GeometryUtils.ContainsPoint(_polygonPoint, _nx3, _ny3);
               if (!_PolygonSect) {
-                var _GeometryUtils$calcCr2 = 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 = 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 = GeometryUtils.ContainsPoint(_polygon, _nx3, _ny3);
+            var polygon = GeometryUtils.getPoylgonPoints(_layer3);
+            if (polygon.length > 0) {
+              var Sect = 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);
-            getDistances(_layer3);
-            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(_layer3.id, _item5.id, _pointArray);
-            var _minDis = fVLine[0].userData.distance;
-            var _snapObj = 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 < fVLine.length; _i13++) {
-              if (_minDis > fVLine[_i13].userData.distance) {
-                _minDis = fVLine[_i13].userData.distance;
-                _snapObj = 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')
-              getDistances(_layer3, true);
-              var _i14 = 0;
-              for (_i14 = 0; _i14 < fVLine.length; _i14++) {
-                if (fVLine[_i14].userData.distance < snapDelta) {
-                  break;
-                }
-              }
-              if (_i14 === fVLine.length) backsplashVisible = false;else backsplashVisible = true;
-            }
-            actions.itemsActions.setBacksplashVisible(selectedObject.itemID, backsplashVisible);
+            _this2.handleAfterMovingItem();
           }
         }
         if (!bMove && !bRotate && !bMoveUP) {
@@ -1929,13 +1990,13 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
           rayDirection = rayDirection.normalize();
           var meshes = 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,
@@ -1951,15 +2012,72 @@ var Scene3DViewer = /*#__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 (!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 (!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];
+        getDistances(layer);
+        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(selectedObject.layerID, selectedObject.itemID, pointArray);
+        var minDis = fVLine[0].userData.distance;
+        var snapObj = 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 < fVLine.length; _i12++) {
+          if (minDis > fVLine[_i12].userData.distance) {
+            minDis = fVLine[_i12].userData.distance;
+            snapObj = fVLine[_i12];
+          }
+        }
+        if (snapBox == null) {
+          snapFlag = false;
+        }
+        actions.sceneActions.updateMovingState(false);
+        if (minDis < snapDelta && !snapFlag) {
+          _this2.snap(snapObj, layer);
+          snapFlag = true;
+          getDistances(layer, true);
+          var _i13 = 0;
+          for (_i13 = 0; _i13 < fVLine.length; _i13++) {
+            if (fVLine[_i13].userData.distance < snapDelta) {
+              break;
+            }
+          }
+          if (_i13 === fVLine.length) backsplashVisible = false;else backsplashVisible = true;
+        }
+        actions.itemsActions.setBacksplashVisible(selectedObject.itemID, backsplashVisible);
       };
       this.onkeydown = function (event) {
         if (_this2.props.keyDownEnable && !isElevationView(state.mode)) {
@@ -2016,6 +2134,14 @@ var Scene3DViewer = /*#__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
 
@@ -2024,6 +2150,7 @@ var Scene3DViewer = /*#__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;
@@ -2065,7 +2192,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
         scene3D = new Three.Scene();
         if (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
@@ -2164,9 +2291,9 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
       function render() {
         var delta = clock.getDelta(); // Get time delta for smooth updates
         if (!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();
@@ -2465,7 +2592,6 @@ var Scene3DViewer = /*#__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.createElement("div", {
             style: {
@@ -2500,7 +2626,6 @@ var Scene3DViewer = /*#__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');