kitchen-simulator 1.1.1-test.75 → 1.1.1-test.77

package/es/components/viewer3d/viewer3d.js

@@ -20,6 +20,7 @@ import { disposeObject, disposeScene } from "./three-memory-cleaner";
 import diff from 'immutablediff';
 import * as SharedStyle from "../../shared-style";
 import { BASE_CABINET_LAYOUTPOS, MODE_3D_VIEW, MODE_DRAGGING_ITEM_3D, MODE_DRAWING_HOLE_3D, MODE_DRAWING_ITEM_3D, MODE_ELEVATION_VIEW, MODE_IDLE_3D, MODE_ROTATING_ITEM_3D, SECONDARY_PURPLE_COLOR, TALL_CABINET_LAYOUTPOS, UNIT_CENTIMETER, WALL_CABINET_LAYOUTPOS } from "../../constants";
+import { isUndefined } from 'util';
 import { verticesDistance } from "../../utils/geometry";
 import { convert } from "../../utils/convert-units-lite";
 import { GeometryUtils } from "../../utils/export";
@@ -270,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);
@@ -281,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 = [];
@@ -291,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;
@@ -372,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);
@@ -649,7 +653,6 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
             item: _item2,
             cat: ocat
           };
-          console.log('currentItem =>', currentItem);
           if (GeometryUtils.needSnap(currentItem, otherItem) && otherItem.cat.type != 'cabinet') {
             var tRot = _item2.rotation;
             var tPos = new Three.Vector2(_item2.x, _item2.y);
@@ -1286,7 +1289,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
                   offsetX: event.offsetX - 50,
                   offsetY: event.offsetY
                 }, alti);
-                if (!selectedItem) return;
+                if (isUndefined(selectedItem)) return;
                 var selItem = _this2.props.state.scene.layers.get(selectedObject.layerID).items.get(selectedObject.itemID);
                 lastAngle = 0;
                 angleObj.position.set(planData.plan.position.x + Point.x, selItem.category === 'lighting' ? -planData.plan.position.y - selItem.properties.get('height').get('length') : selItem.properties.get('altitude').get('length') + planData.plan.position.y, planData.plan.position.z - Point.y);
@@ -1351,7 +1354,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;
@@ -1361,9 +1363,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);
@@ -1372,6 +1374,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
             }
           }
           bMove = false;
+          isInitialPhase = true;
           return;
         }
         if (_this2.props.state.mode == MODE_DRAGGING_ITEM_3D) {
@@ -1380,6 +1383,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
         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();
@@ -1457,7 +1461,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
                 setTimeout(function () {
                   getDistances(layer);
                   var selectedItem = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
-                  if (!selectedItem) return;
+                  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) {
@@ -1539,7 +1543,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
             if (bRotate) {
               var _intersects$_i;
               var selectedItem = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
-              if (!selectedItem) return;
+              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) {
@@ -1557,7 +1561,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
             if (bMove) {
               bMove = false;
               var _selectedItem = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
-              if (!_selectedItem) return;
+              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) {
@@ -1598,6 +1602,164 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
           }
         }
       };
+      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();
         backsplashVisible = false;
@@ -1638,49 +1800,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;
@@ -1699,78 +1834,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) {
@@ -1838,78 +1923,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) {
@@ -1922,13 +1957,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,
@@ -1954,6 +1989,61 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
         }
         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)) {
           switch (event.keyCode) {
@@ -2009,6 +2099,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
 
@@ -2017,6 +2115,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;
@@ -2037,7 +2136,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
         setTimeout(function () {
           try {
             currentObject = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
-            if (!currentObject) return;
+            if (isUndefined(currentObject)) return;
             var selItem = _this2.props.state.scene.layers.get(selectedObject.layerID).items.get(selectedObject.itemID);
             var itemPos = currentObject.position.clone();
             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 + currentObject.children[0].position.y, planData.plan.position.z + itemPos.z);
@@ -2157,9 +2256,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();