kitchen-simulator 3.0.1 → 3.1.0-alpha.12

package/es/class/item.js

@@ -13,6 +13,7 @@ import { debugUtil } from "../utils/helper";
 import { isUndefined } from 'util';
 import { hasMoldingLayout } from "../utils/molding";
 import { getInstallationSuffix, isWarningItem } from "../components/viewer2d/utils";
+import { historyPush } from "../utils/history";
 var allItemRect;
 var allItemSnap;
 var allLines;
@@ -479,6 +480,9 @@ var Item = /*#__PURE__*/function () {
     key: "storeDistArray",
     value: function storeDistArray(state, layerID, itemID, distArray) {
       var curDistArray = state.getIn(['scene', 'layers', layerID, 'items', itemID, 'distArray']);
+      distArray.forEach(function (dist) {
+        dist[0] < 0 ? dist[0] = 0 : dist[0];
+      });
       var isEqualDist = function isEqualDist(a, b) {
         return a == b;
       };
@@ -1145,6 +1149,7 @@ var Item = /*#__PURE__*/function () {
       for (var x in keys) {
         tmp[keys[x]] = doorStyle.doorStyles[keys[x]];
       }
+      doorStyle.cds = itemCDS;
       state = state.setIn(['scene', 'layers', state.scene.selectedLayer, 'doorStyle'], doorStyle);
       state = state.merge({
         doorStyle: doorStyle
@@ -1537,6 +1542,9 @@ var Item = /*#__PURE__*/function () {
           });
         }
       }
+      state = state.merge({
+        sceneHistory: historyPush(state.sceneHistory, state.scene)
+      });
       return {
         updatedState: state
       };
@@ -1659,6 +1667,9 @@ var Item = /*#__PURE__*/function () {
           updateSelectItemMolding();
         }
       }
+      state = state.merge({
+        sceneHistory: historyPush(state.sceneHistory, state.scene)
+      });
       return {
         updatedState: state
       };

package/es/class/line.js

@@ -5,8 +5,9 @@ import { fromJS, List, Map } from 'immutable';
 import { Group, Hole, Layer, Vertex } from "./export";
 import { GeometryUtils, history, IDBroker, NameGenerator, SnapSceneUtils, SnapUtils } from "../utils/export";
 import * as Three from 'three';
-import { END_DRAGGING_LINE, END_DRAGGING_VERTEX, END_DRAWING_LINE, EPSILON, MIN_ANGLE_DISALLOW_DRAW_WALL, MODE_DRAGGING_LINE, MODE_DRAWING_LINE, MODE_IDLE, MODE_WAITING_DRAWING_LINE, UNIT_ANGLE } from "../constants";
+import { END_DRAGGING_LINE, END_DRAGGING_VERTEX, END_DRAWING_LINE, EPSILON, INTERNAL_EVENT_START_DRAW_WALL, MIN_ANGLE_DISALLOW_DRAW_WALL, MODE_DRAGGING_LINE, MODE_DRAWING_LINE, MODE_IDLE, MODE_WAITING_DRAWING_LINE, UNIT_ANGLE } from "../constants";
 import { isEmpty } from "../utils/helper";
+import { convert } from "../utils/convert-units-lite";
 var timeGlobal = 0;
 var TimeRecorder = /*#__PURE__*/function () {
   function TimeRecorder(name) {
@@ -426,7 +427,7 @@ var Line = /*#__PURE__*/function () {
     }
   }, {
     key: "beginDrawingLine",
-    value: function beginDrawingLine(state, layerID, x, y) {
+    value: function beginDrawingLine(state, layerID, x, y, onInternalEvent) {
       // if end drawing by created area
       if (state.mode == MODE_IDLE) {
         return {
@@ -479,6 +480,17 @@ var Line = /*#__PURE__*/function () {
         activeSnapElement: snap ? snap.snap : null,
         drawingSupport: drawingSupport
       });
+      var layer = state.getIn(['scene', 'layers', layerID]);
+      var payload = line.toJS();
+      var v_a = layer.vertices.get(line.vertices.get(0));
+      var v_b = layer.vertices.get(line.vertices.get(1));
+      var distance = GeometryUtils.pointsDistance(v_a.x, v_a.y, v_b.x, v_b.y);
+      var _length = convert(distance).from('cm').to(layer.unit);
+      payload.length = _length;
+      if (onInternalEvent) onInternalEvent({
+        type: INTERNAL_EVENT_START_DRAW_WALL,
+        value: payload
+      });
       return {
         updatedState: state
       };

package/es/components/viewer2d/item.js

@@ -5,7 +5,7 @@ import RulerDist from "./rulerDist";
 import { convert } from "../../utils/convert-units-lite";
 import { GeometryUtils } from "../../utils/export";
 import { MODE_ROTATING_ITEM, WALL_CABINET_LAYOUTPOS } from "../../constants";
-import { isEmpty, returnReplaceableDeepSearchType } from "./utils";
+import { isEmpty, isWarningItem, returnReplaceableDeepSearchType } from "./utils";
 import { findCatalogElement } from "../../utils/geometry";
 var STYLE_LINE = {
   fill: '#0096fd',
@@ -238,25 +238,38 @@ export default function Item(_ref, _ref2) {
    */
   var getDistant = function getDistant(x, y, rotRad) {
     var center_h = 3 * height / 8;
-    var center_x = x;
+    var center_x = x; // middle of front line of cabinet rect
     var center_y = y;
-    var center_x1 = x - center_h * Math.sin(rotRad);
+    var center_x1 = x - center_h * Math.sin(rotRad); // center point of cabinet rect
     var center_y1 = y + center_h * Math.cos(rotRad);
     var PointArray = [];
-    curiteminfo.rectCenterPoint.forEach(function (centerpoint) {
-      var comparelength = [];
+    var _loop = function _loop(i) {
+      var centerpoint = curiteminfo.rectCenterPoint[i];
+      // [rectCenterPoint] has four middle points of cabinet rect edges
+      var comparelength = []; // distance array from rectCenterPoint[i] to other lines(walls, other cabinet rect edges)
       var a;
-      var RectLineFuction;
+      var RectLineFuction; // normal line of cabinet rect edge
       if (centerpoint[1] === 180 || centerpoint[1] === 0) RectLineFuction = GeometryUtils.linePassingThroughTwoPoints(centerpoint[0].x, centerpoint[0].y, center_x1, center_y1);else RectLineFuction = GeometryUtils.linePassingThroughTwoPoints(centerpoint[0].x, centerpoint[0].y, center_x, center_y);
       allRect.forEach(function (linerect) {
+        // calc distance to all other lines
         var p0 = GeometryUtils.clone_point(linerect.rect[2]);
         var p1 = GeometryUtils.clone_point(linerect.rect[3]);
-        var lineFunction = {};
+        var lineFunction = {}; // other line function
         if (p0.x !== p1.x || p0.y !== p1.y) lineFunction = GeometryUtils.linePassingThroughTwoPoints(p0.x, p0.y, p1.x, p1.y);
+        // intersection between normal line and other line
         var coordinatePoint = GeometryUtils.twoLinesIntersection(lineFunction.a, lineFunction.b, lineFunction.c, RectLineFuction.a, RectLineFuction.b, RectLineFuction.c);
         if (coordinatePoint !== undefined) {
-          if (GeometryUtils.pointsDistance(p0.x, p0.y, p1.x, p1.y) > GeometryUtils.pointsDistance(p0.x, p0.y, coordinatePoint.x, coordinatePoint.y) && GeometryUtils.pointsDistance(p0.x, p0.y, p1.x, p1.y) > GeometryUtils.pointsDistance(p1.x, p1.y, coordinatePoint.x, coordinatePoint.y)) {
-            if (GeometryUtils.pointsDistance(coordinatePoint.x, coordinatePoint.y, center_x, center_y) > GeometryUtils.pointsDistance(centerpoint[0].x, centerpoint[0].y, coordinatePoint.x, coordinatePoint.y)) {
+          if (
+          // intersection point is on the other line
+          GeometryUtils.pointsDistance(p0.x, p0.y, p1.x, p1.y) > GeometryUtils.pointsDistance(p0.x, p0.y, coordinatePoint.x, coordinatePoint.y) && GeometryUtils.pointsDistance(p0.x, p0.y, p1.x, p1.y) > GeometryUtils.pointsDistance(p1.x, p1.y, coordinatePoint.x, coordinatePoint.y)) {
+            // check the intersection point is outside direction of edge
+            var isOutside = true;
+            for (var j = 0; j < curiteminfo.rectCenterPoint.length; j++) {
+              if (j === i) continue;
+              var otherCenterPoint = curiteminfo.rectCenterPoint[j];
+              if (GeometryUtils.isPointOnLineSegment(centerpoint[0].x, centerpoint[0].y, coordinatePoint.x, coordinatePoint.y, otherCenterPoint[0].x, otherCenterPoint[0].y)) isOutside = false;
+            }
+            if (isOutside && GeometryUtils.pointsDistance(coordinatePoint.x, coordinatePoint.y, center_x, center_y) > GeometryUtils.pointsDistance(centerpoint[0].x, centerpoint[0].y, coordinatePoint.x, coordinatePoint.y)) {
               comparelength.push(GeometryUtils.pointsDistance(centerpoint[0].x, centerpoint[0].y, coordinatePoint.x, coordinatePoint.y));
               a = Math.min.apply(null, comparelength);
             }
@@ -264,7 +277,10 @@ export default function Item(_ref, _ref2) {
         }
       });
       PointArray.push([a, centerpoint[1]]);
-    });
+    };
+    for (var i = 0; i < curiteminfo.rectCenterPoint.length; i++) {
+      _loop(i);
+    }
     return {
       PointArray: PointArray
     };
@@ -277,10 +293,18 @@ export default function Item(_ref, _ref2) {
   var cat = catalog.elements[catid];
   PointArray.forEach(function (pointElement, index) {
     if (pointElement[0] == undefined) PointArray[index][0] = 0;
-    if (pointElement[1] === -90 && cat.info.is_corner !== 1) {
-      PointArray[index][0] -= 4;
-    }
+    // if (pointElement[1] === -90 && cat.info.is_corner !== 1) {
+    //   PointArray[index][0] -= 4;
+    // }
+  });
+  var cnt = 0;
+  PointArray.forEach(function (pointElement) {
+    if (pointElement[0] == 0) cnt++;
   });
+  if (cnt == 4 || cnt == 3) {
+    PointArray[0][0] = 100;
+    PointArray[1][0] = 100;
+  }
   if (Array.isArray(PointArray)) {
     itemsActions.storeDistArray(layerID, id, PointArray);
   }
@@ -390,7 +414,10 @@ export default function Item(_ref, _ref2) {
     y: "-19",
     height: "16",
     width: "16",
-    style: {
+    style: isWarningItem(item) ? {
+      transform: 'rotateX(180deg)',
+      opacity: 0.5
+    } : {
       transform: 'rotateX(180deg)'
     }
   })), /*#__PURE__*/React.createElement("g", {

package/es/components/viewer2d/rulerDist.js

@@ -34,7 +34,7 @@ export default function RulerDist(_ref) {
   var _unit = 'in';
   // let _length = convert(length).from(unit).to(rulerUnit);
   var distanceText = "".concat(convert(length).from('cm').to(rulerUnit).toFixed(0));
-  var textLength = (distanceText.length + layer.unit.length) * 18;
+  var textLength = (distanceText.length + layer.unit.length) * 8;
   var textangle = angle + 90;
   var textRotation = 1;
   var ay = 2;

package/es/components/viewer2d/utils.js

@@ -187,7 +187,7 @@ export var areaPolygon = function areaPolygon(points) {
 };
 export var isWarningItem = function isWarningItem(item) {
   var _item$toJS$doorStyle;
-  return !(item !== null && item !== void 0 && (_item$toJS$doorStyle = item.toJS().doorStyle) !== null && _item$toJS$doorStyle !== void 0 && (_item$toJS$doorStyle = _item$toJS$doorStyle.doorStyles) !== null && _item$toJS$doorStyle !== void 0 && (_item$toJS$doorStyle = _item$toJS$doorStyle.cds) !== null && _item$toJS$doorStyle !== void 0 && _item$toJS$doorStyle.filter(function (cd) {
+  if (item.category === 'cabinet') return !(item !== null && item !== void 0 && (_item$toJS$doorStyle = item.toJS().doorStyle) !== null && _item$toJS$doorStyle !== void 0 && (_item$toJS$doorStyle = _item$toJS$doorStyle.doorStyles) !== null && _item$toJS$doorStyle !== void 0 && (_item$toJS$doorStyle = _item$toJS$doorStyle.cds) !== null && _item$toJS$doorStyle !== void 0 && _item$toJS$doorStyle.filter(function (cd) {
     return cd.itemID == (item === null || item === void 0 ? void 0 : item.getIn(['itemID']));
-  }).length) > 0;
+  }).length) > 0;else return false;
 };

package/es/components/viewer2d/viewer2d.js

@@ -948,7 +948,7 @@ export default function Viewer2D(_ref, _ref2) {
           case 'items':
             if (elementData.part === 'duplicate') {
               var currentObject = state.getIn(['scene', 'layers', layerID, 'items', elementData.id]);
-              itemsActions.duplicateSelected(currentObject, onInternalEvent); // send draw internal event when duplicating
+              if (!isWarningItem(currentObject)) itemsActions.duplicateSelected(currentObject, onInternalEvent); // send draw internal event when duplicating
               break;
             } else if (elementData.part === 'remove') {
               projectActions.remove();
@@ -973,7 +973,7 @@ export default function Viewer2D(_ref, _ref2) {
               id: "ruler_numberInput",
               style: {
                 position: 'absolute',
-                left: bbox.left - (150 - bbox.width) / 2,
+                left: bbox.left - (200 - bbox.width) / 2,
                 top: bbox.top - (50 - bbox.height) / 2,
                 zIndex: 1000
               }
@@ -1005,7 +1005,7 @@ export default function Viewer2D(_ref, _ref2) {
               id: "ruler_numberInput",
               style: {
                 position: 'absolute',
-                left: bbox.left - (150 - bbox.width) / 2,
+                left: bbox.left - (200 - bbox.width) / 2,
                 top: bbox.top - (50 - bbox.height) / 2,
                 zIndex: 1000
               }
@@ -1038,7 +1038,7 @@ export default function Viewer2D(_ref, _ref2) {
               id: "ruler_numberInput",
               style: {
                 position: 'absolute',
-                left: bbox.left - (150 - bbox.width) / 2,
+                left: bbox.left - (200 - bbox.width) / 2,
                 top: bbox.top - (50 - bbox.height) / 2,
                 zIndex: 1000
               }
@@ -1071,7 +1071,7 @@ export default function Viewer2D(_ref, _ref2) {
               id: "ruler_numberInput",
               style: {
                 position: 'absolute',
-                left: bbox.left - (150 - bbox.width) / 2,
+                left: bbox.left - (200 - bbox.width) / 2,
                 top: bbox.top - (50 - bbox.height) / 2,
                 zIndex: 1000
               }
@@ -1104,7 +1104,7 @@ export default function Viewer2D(_ref, _ref2) {
               id: "ruler_numberInput",
               style: {
                 position: 'absolute',
-                left: bbox.left - (150 - bbox.width) / 2,
+                left: bbox.left - (200 - bbox.width) / 2,
                 top: bbox.top - (50 - bbox.height) / 2,
                 zIndex: 1000
               }
@@ -1137,7 +1137,7 @@ export default function Viewer2D(_ref, _ref2) {
               id: "ruler_numberInput",
               style: {
                 position: 'absolute',
-                left: bbox.left - (150 - bbox.width) / 2,
+                left: bbox.left - (200 - bbox.width) / 2,
                 top: bbox.top - (50 - bbox.height) / 2,
                 zIndex: 1000
               }
@@ -1169,7 +1169,7 @@ export default function Viewer2D(_ref, _ref2) {
               id: "ruler_numberInput",
               style: {
                 position: 'absolute',
-                left: bbox.left - (150 - bbox.width) / 2,
+                left: bbox.left - (200 - bbox.width) / 2,
                 top: bbox.top - (50 - bbox.height) / 2,
                 zIndex: 1000
               }
@@ -1199,7 +1199,7 @@ export default function Viewer2D(_ref, _ref2) {
         break;
       case constants.MODE_WAITING_DRAWING_LINE:
         setdrawStart(true);
-        linesActions.beginDrawingLine(layerID, x, y, state.snapMask);
+        linesActions.beginDrawingLine(layerID, x, y, state.snapMask, onInternalEvent);
         break;
       case constants.MODE_DRAWING_LINE:
         // Blocked 90 degree snap.
@@ -1213,7 +1213,7 @@ export default function Viewer2D(_ref, _ref2) {
         getConnectedLines();
         var endInfor = getEndPoint(vertices, x, y, 'END_DRAWIN_LINE');
         linesActions.endDrawingLine(endInfor.x, endInfor.y, state.snapMask);
-        linesActions.beginDrawingLine(layerID, endInfor.x, endInfor.y, state.snapMask);
+        linesActions.beginDrawingLine(layerID, endInfor.x, endInfor.y, state.snapMask, onInternalEvent);
         break;
       case constants.MODE_DRAWING_HOLE:
         holesActions.endDrawingHole(layerID, x, y);
@@ -1258,12 +1258,14 @@ export default function Viewer2D(_ref, _ref2) {
           var v_a = layer.vertices.get(_currentObject.vertices.get(0));
           var v_b = layer.vertices.get(_currentObject.vertices.get(1));
           var distance = GeometryUtils.pointsDistance(v_a.x, v_a.y, v_b.x, v_b.y);
-          var _length3 = convert(distance).from('cm').to('in');
+          var _length3 = convert(distance).from('cm').to(layer.unit);
           payload.length = _length3;
           //////////////////////////////////////
         } else if (((_currentObject5 = _currentObject) === null || _currentObject5 === void 0 ? void 0 : _currentObject5.prototype) === 'items') {
           // check this cabinet has warning box
           payload.isWarning = isWarningItem(_currentObject);
+          // check this item is available molding
+          payload.isMoldingAvailable = MoldingUtils.isEnableItemForMolding(layer, _currentObject);
           // check this item is snapped to wall
           payload.isAttachedWall = MoldingUtils.isAttachedWall(layer, _currentObject);
         }

package/es/components/viewer3d/viewer3d.js

@@ -1184,6 +1184,34 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
           itemID: selItemId
         };
       };
+      var sendInternalEvent = function sendInternalEvent(evtType, evtElement) {
+        var pointArray = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+        if (!isEmpty(evtType) && !isEmpty(evtElement)) {
+          var _this2$props$onIntern, _this2$props;
+          var payload = evtElement === null || evtElement === void 0 ? void 0 : evtElement.toJS();
+          if ((evtElement === null || evtElement === void 0 ? void 0 : evtElement.prototype) === 'lines') {
+            // caculating length of selected line//
+            var v_a = layer.vertices.get(evtElement.vertices.get(0));
+            var v_b = layer.vertices.get(evtElement.vertices.get(1));
+            var distance = GeometryUtils.pointsDistance(v_a.x, v_a.y, v_b.x, v_b.y);
+            var _length = convert(distance).from('cm').to(layer.unit);
+            payload.length = _length;
+            //////////////////////////////////////
+          } else if ((evtElement === null || evtElement === void 0 ? void 0 : evtElement.prototype) === 'items') {
+            // check this cabinet has warning box
+            payload.isWarning = isWarningItem(evtElement);
+            // check this item is available molding
+            payload.isMoldingAvailable = MoldingUtils.isEnableItemForMolding(layer, evtElement); // check this item is snapped to wall
+            payload.isAttachedWall = MoldingUtils.isAttachedWall(layer, evtElement);
+            // update distArray
+            if (pointArray) payload.distArray = pointArray;
+          }
+          (_this2$props$onIntern = (_this2$props = _this2.props).onInternalEvent) === null || _this2$props$onIntern === void 0 || _this2$props$onIntern.call(_this2$props, {
+            type: evtType,
+            value: payload
+          });
+        }
+      };
       this.mouseDownEvent = function (event) {
         gridPlanOrigin = gridPlane.position;
         gridMatrix.copy(gridPlane.matrixWorld).invert();
@@ -1335,11 +1363,6 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
               if (selectedFlag || toolIntersects.length > 0 && !isElevationView(mode)) {
                 cameraControls.mouseButtons.left = CameraControls.ACTION.NONE;
                 selectedFlag = false;
-              } else {
-                isSelected = false;
-                _this2.context.projectActions.unselectAll();
-                scene3D.remove(toolObj);
-                _this2.context.itemsActions.removeReplacingSupport();
               }
             }
           } else {
@@ -1392,11 +1415,18 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
         }
         switch (_this2.props.state.mode) {
           case MODE_DRAGGING_ITEM_3D:
+          case MODE_DRAGGING_HOLE_3D:
             internalType = INTERNAL_EVENT_DRAG_ELEMENT;
             break;
           case MODE_ROTATING_ITEM_3D:
             internalType = INTERNAL_EVENT_ROTATE_ELEMENT;
             break;
+          case MODE_DRAWING_HOLE_3D:
+            internalType = INTERNAL_EVENT_DRAW_ELEMENT;
+            break;
+          case MODE_IDLE_3D:
+            internalType = INTERNAL_EVENT_SELECT_ELEMENT;
+            break;
         }
         if (_this2.props.state.mode == MODE_DRAGGING_ITEM_3D) {
           _this2.context.itemsActions.endDraggingItem3D();
@@ -1430,7 +1460,8 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
             });
           });
           var intersects = raycaster.intersectObjects(meshes, true);
-          var _i10;
+          var _i10; // index of warning object in intersects
+
           if (intersects.length > 0 && !isNaN(intersects[0].distance)) {
             for (_i10 = 0; _i10 < intersects.length; _i10++) {
               if (intersects[_i10].object.name === 'warningObj') break;
@@ -1458,6 +1489,19 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
             }
           }
           gridMatrix.copy(gridPlane.matrixWorld).invert();
+          var addItemToolObj = function addItemToolObj() {
+            var _intersects$_i;
+            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, 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);
+          };
           if (Math.abs(mouse.x - _this2.lastMousePosition.x) <= 0.02 && Math.abs(mouse.y - _this2.lastMousePosition.y) <= 0.02 || bMove) {
             if (intersects.length > 0 && !isNaN(intersects[0].distance)) {
               if (intersects[_i10] === undefined) {
@@ -1479,55 +1523,40 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
                   currentObject = currentObject.parent;
                 }
                 isSelected = true;
-                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++;
+                setTimeout(function () {
+                  getDistances(layer);
+                  addItemToolObj();
+                  _this2.setState({
+                    toolObj: toolObj
+                  });
+                  // showItemButtons(layer.getIn(['items', selectedObject.itemID]), currentObject, event, camera, this.renderer);
+                  var pointArray = [];
+                  // 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 = GeometryUtils.calcDistancesFromItemToWalls(selectedElement, layer).PointArray;
+                  actions.itemsActions.storeDistArray(layer.id, selectedObject.itemID, pointArray);
+                  internalType = internalType ? internalType : INTERNAL_EVENT_SELECT_ELEMENT;
+                  sendInternalEvent(internalType, selectedElement, pointArray);
                 });
-                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:
-                    case 'lineID' in selectedObject:
+                      elementID = selectedObject.holeID;
+                      elementPrototype = 'holes';
                       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 = 'holes';
                       }
                       break;
+                    case 'lineID' in selectedObject:
+                      elementID = selectedObject.lineID;
+                      elementPrototype = 'lines';
+                      break;
                     case 'areaID' in selectedObject:
-                      internalType = INTERNAL_EVENT_SELECT_ELEMENT;
                       elementID = selectedObject.areaID;
                       elementPrototype = 'areas';
                       break;
@@ -1539,15 +1568,20 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
                 isSelected = false;
               }
             } else {
-              isSelected = false;
-              _this2.context.projectActions.unselectAll();
-              switch (true) {
-                case 'holeID' in selectedObject:
-                  actions.holesActions.endDraggingHole3D(sPoint.x, sPoint.y);
-                  break;
-                default:
-                  _this2.context.itemsActions.removeReplacingSupport();
-                  break;
+              var selectedItem = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
+              if (bMove && !isEmpty(selectedItem)) {
+                addItemToolObj();
+              } else {
+                isSelected = false;
+                _this2.context.projectActions.unselectAll();
+                switch (true) {
+                  case 'holeID' in selectedObject:
+                    actions.holesActions.endDraggingHole3D(sPoint.x, sPoint.y);
+                    break;
+                  default:
+                    _this2.context.itemsActions.removeReplacingSupport();
+                    break;
+                }
               }
             }
             bMove = false;
@@ -1568,35 +1602,15 @@ 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;
-              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, 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);
+              addItemToolObj();
               _this2.setState({
                 toolObj: toolObj
               });
               _this2.context.itemsActions.endRotatingItem3D(Point.x, Point.y);
               bRotate = false;
-            }
-            if (bMove) {
+            } else if (bMove) {
               bMove = false;
-              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 + _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);
+              addItemToolObj();
               _this2.setState({
                 toolObj: toolObj
               });
@@ -1616,7 +1630,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
                 _item3D.position.z = targetPoint.z;
                 _item3D.visible = true;
               }
-            }
+            } else {}
             if (bMoveUP) {
               bMoveUP = false;
             }
@@ -1628,20 +1642,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
             selectedObj = allItemRect.cur;
           }
         }
-        if (!isEmpty(internalType)) {
-          var _selectedElement, _selectedElement2, _this2$props$onIntern, _this2$props;
-          var payload = (_selectedElement = selectedElement) === null || _selectedElement === void 0 ? void 0 : _selectedElement.toJS();
-          if (((_selectedElement2 = selectedElement) === null || _selectedElement2 === void 0 ? void 0 : _selectedElement2.prototype) === 'items') {
-            // check this cabinet has warning box
-            payload.isWarning = isWarningItem(selectedElement);
-            // check this item is snapped to wall
-            payload.isAttachedWall = MoldingUtils.isAttachedWall(layer, selectedElement);
-          }
-          (_this2$props$onIntern = (_this2$props = _this2.props).onInternalEvent) === null || _this2$props$onIntern === void 0 || _this2$props$onIntern.call(_this2$props, {
-            type: internalType,
-            value: payload
-          });
-        }
+        sendInternalEvent(internalType, selectedElement);
       };
       this.mouseEnterEvent = function (event) {
         if (_this2.props.state.mode !== MODE_DRAWING_ITEM_3D) return;
@@ -2076,7 +2077,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
         if (minDis < snapDelta && !snapFlag) {
           _this2.snap(snapObj, layer);
           snapFlag = true;
-          getDistances(layer, true);
+          getDistances(layer);
           var _i13 = 0;
           for (_i13 = 0; _i13 < fVLine.length; _i13++) {
             if (fVLine[_i13].userData.distance < snapDelta) {
@@ -2609,9 +2610,10 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
           }, /*#__PURE__*/React.createElement("img", {
             style: {
               animation: 'spin 2s linear infinite',
-              marginTop: "50%",
-              width: '50px',
-              height: '50px'
+              position: "absolute",
+              top: "50%",
+              width: '70px',
+              height: '70px'
             },
             src: '/assets/img/loading/loading.gif',
             alt: "img"
@@ -2631,8 +2633,8 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
             animation: 'spin 2s linear infinite',
             position: "absolute",
             top: "50%",
-            width: '50px',
-            height: '50px'
+            width: '70px',
+            height: '70px'
           },
           src: '/assets/img/loading/loading.gif',
           alt: "img"