kitchen-simulator 4.0.0-queuedEvents → 4.0.0

package/es/components/viewer3d/front3D.js

@@ -2,6 +2,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useState, useEffect } from 'react';
 import Viewer3D from "./viewer3d";
 import State3D from "./ruler-utils/state3D";
+import { isEmpty } from "../viewer2d/utils";
 var k = 0;
 export default function Front3D(_ref, _ref2) {
   var width = _ref.width,
@@ -26,9 +27,9 @@ export default function Front3D(_ref, _ref2) {
     setToolbar('');
   };
   useEffect(function () {
-    document.getElementById('front').addEventListener('mouseup', mouseUpEvent);
+    if (!isEmpty(document.getElementById('front'))) document.getElementById('front').addEventListener('mouseup', mouseUpEvent);
     return function () {
-      document.getElementById('front').removeEventListener('mouseup', mouseUpEvent);
+      if (!isEmpty(document.getElementById('front'))) document.getElementById('front').removeEventListener('mouseup', mouseUpEvent);
     };
   }, []);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("svg", {

package/es/components/viewer3d/libs/mtl-loader.js

@@ -4,7 +4,7 @@
  * @author angelxuanchang
  */
 
-var THREE = window.THREE || require('three');
+import * as THREE from 'three';
 var MTLLoader;
 MTLLoader = function MTLLoader(manager) {
   this.manager = manager !== undefined ? manager : THREE.DefaultLoadingManager;
@@ -354,4 +354,4 @@ MTLLoader.MaterialCreator.prototype = {
     return texture;
   }
 };
-module.exports = MTLLoader;
+export default MTLLoader;

package/es/components/viewer3d/libs/obj-loader.js

@@ -2,7 +2,7 @@
  * @author mrdoob / http://mrdoob.com/
  */
 
-var THREE = window.THREE || require('three');
+import * as THREE from 'three';
 var OBJLoader;
 OBJLoader = function OBJLoader(manager) {
   this.manager = manager !== undefined ? manager : THREE.DefaultLoadingManager;
@@ -459,4 +459,4 @@ OBJLoader.prototype = {
     return container;
   }
 };
-module.exports = OBJLoader;
+export default OBJLoader;

package/es/components/viewer3d/libs/orbit-controls.js

@@ -13,9 +13,8 @@
 //    Zoom - middle mouse, or mousewheel / touch: two finger spread or squish
 //    Pan - right mouse, or arrow keys / touch: three finter swipe
 
-var THREE = window.THREE || require('three');
-var OrbitControls;
-module.exports = OrbitControls = function OrbitControls(object, domElement) {
+import * as THREE from 'three';
+export default function OrbitControls(object, domElement) {
   this.object = object;
   this.domElement = domElement !== undefined ? domElement : document;
 
@@ -623,7 +622,7 @@ module.exports = OrbitControls = function OrbitControls(object, domElement) {
   // force an update at start
 
   this.update();
-};
+}
 OrbitControls.prototype = Object.create(THREE.EventDispatcher.prototype);
 OrbitControls.prototype.constructor = OrbitControls;
 Object.defineProperties(OrbitControls.prototype, {

package/es/components/viewer3d/libs/pointer-lock-controls.js

@@ -1,10 +1,10 @@
 /**
  * @author mrdoob / http://mrdoob.com/
+ * Converted to ESM
  */
 
-var THREE = window.THREE || require('three');
-var PointerLockControls;
-module.exports = PointerLockControls = function PointerLockControls(camera) {
+import * as THREE from 'three';
+export default function PointerLockControls(camera) {
   var scope = this;
   camera.rotation.set(0, 0, 0);
   var pitchObject = new THREE.Object3D();
@@ -15,14 +15,14 @@ module.exports = PointerLockControls = function PointerLockControls(camera) {
   yawObject.position.y = 10;
   yawObject.add(pitchObject);
   var PI_2 = Math.PI / 2;
-  var onMouseMove = function onMouseMove(event) {
+  function onMouseMove(event) {
     if (scope.enabled === false) return;
     var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
     var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;
     yawObject.rotation.y -= movementX * 0.002;
     pitchObject.rotation.x -= movementY * 0.002;
     pitchObject.rotation.x = Math.max(-PI_2, Math.min(PI_2, pitchObject.rotation.x));
-  };
+  }
   this.dispose = function () {
     document.removeEventListener('mousemove', onMouseMove, false);
   };
@@ -33,7 +33,6 @@ module.exports = PointerLockControls = function PointerLockControls(camera) {
   };
   this.getDirection = function () {
     // assumes the camera itself is not rotated
-
     var direction = new THREE.Vector3(0, 0, -1);
     var rotation = new THREE.Euler(0, 0, 0, 'YXZ');
     return function (v) {
@@ -42,4 +41,4 @@ module.exports = PointerLockControls = function PointerLockControls(camera) {
       return v;
     };
   }();
-};
+}

package/es/components/viewer3d/scene-creator.js

@@ -9,14 +9,14 @@ import * as Three from 'three';
 import { Color, Group } from 'three';
 import createGrid from "./grid-creator";
 import { disposeObject } from "./three-memory-cleaner";
-import { ANIMATE_STEP_MAX, ANIMATE_STEP_MIN, ARRAY_3D_MODES, ARROW_TEXT_BACKCOLOR, ARROW_TEXT_FONTFACE, ARROW_TEXT_FORECOLOR, BASE_CABINET_LAYOUTPOS, BOTTOM_MOLDING_LOCATION, DECIMAL_PLACES_2, DIFFERENT_VALUES_PATH_LENGTH, DISTANCE_EPSILON, EPSILON, MIDDLE_MOLDING_LOCATION, MODE_DRAGGING_ITEM_3D, MODE_DRAWING_ITEM_3D, MODE_IDLE, MODE_IDLE_3D, MODE_ROTATING_ITEM_3D, OBJTYPE_MESH, SHADE_DARK_PURPLE_COLOR, TOP_MOLDING_LOCATION, UNIT_CENTIMETER, WALL_CABINET_LAYOUTPOS } from "../../constants";
+import { ANIMATE_STEP_MAX, ANIMATE_STEP_MIN, ARRAY_3D_MODES, ARROW_TEXT_BACKCOLOR, ARROW_TEXT_FONTFACE, ARROW_TEXT_FORECOLOR, BASE_CABINET_LAYOUTPOS, BOTTOM_MOLDING_LOCATION, DECIMAL_PLACES_2, DIFFERENT_VALUES_PATH_LENGTH, DISTANCE_EPSILON, EPSILON, MIDDLE_MOLDING_LOCATION, MODE_DRAGGING_ITEM_3D, MODE_DRAWING_ITEM_3D, MODE_IDLE, MODE_IDLE_3D, MODE_ROTATING_ITEM_3D, OBJTYPE_MESH, SHADE_DARK_PURPLE_COLOR, TOP_MOLDING_LOCATION, UNIT_CENTIMETER, UNIT_FOOT, UNIT_INCH, UNIT_METER, WALL_CABINET_LAYOUTPOS } from "../../constants";
 import { GeometryUtils, IDBroker, MoldingUtils } from "../../utils/export";
 import { convert } from "../../utils/convert-units-lite";
 import { verticesDistance } from "../../utils/geometry";
 import * as GeomUtils from "../../catalog/utils/geom-utils";
 import { loadTexture } from "../../catalog/utils/item-loader";
 import { returnReplaceableDeepSearchType } from "../viewer2d/utils";
-import { animateDoor, isElevationView, isEmpty, replaceMeshesWithLineSegments, translateDrawer } from "../../utils/helper";
+import { animateDoor, isElevationView, isEmpty, isImmutable, replaceMeshesWithLineSegments, translateDrawer } from "../../utils/helper";
 import { formatNumber } from "../../utils/math";
 var transformBox;
 export var fVLine = [];
@@ -187,6 +187,31 @@ export function createWarningObject() {
   warningObj.name = 'warningObj';
   return warningObj;
 }
+function swapLengthProperty(diffs) {
+  var idx1 = diffs.findIndex(function (v) {
+    return v.path[v.path.length - 1] === 'length';
+  });
+  var idx2 = diffs.findIndex(function (v) {
+    return v.path[v.path.length - 1] === '_length';
+  });
+  if (idx1 < 0 || idx2 < 0) return diffs;
+  if (idx1 > idx2) return diffs;
+  if (diffs[idx1].op === diffs[idx2].op) {
+    var isSwap = true;
+    for (var i = 0; i < diffs[idx1].path.length - 2; i++) {
+      if (diffs[idx1].path[i] !== diffs[idx2].path[i]) {
+        isSwap = false;
+        break;
+      }
+    }
+    if (isSwap) {
+      var temp = diffs[idx1];
+      diffs[idx1] = diffs[idx2];
+      diffs[idx2] = temp;
+    }
+  }
+  return diffs;
+}
 export function updateScene(planData, sceneData, oldSceneData, diffArray, actions, catalog) {
   var _draggingItem$toJS, _filteredDiffs, _filteredDiffs2;
   var mode = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : null;
@@ -204,6 +229,9 @@ export function updateScene(planData, sceneData, oldSceneData, diffArray, action
       value: el.value
     };
   });
+
+  // move "length" to after "_length"
+  splitted = swapLengthProperty(splitted);
   var filteredDiffs = filterDiffs(splitted, sceneData, oldSceneData);
   //***testing additional filter***
   filteredDiffs = filteredDiffs.filter(function (_ref) {
@@ -238,7 +266,7 @@ export function updateScene(planData, sceneData, oldSceneData, diffArray, action
      * Every 'doorStyle' change has a 'door_style_id' change.
      * So, if door_style_id changes, it indicates 'doorStyle' change.
      */
-    if (['id'].includes(path[path.length - 1])) isSettingDoorStyle = true;
+    if (path[1] === 'layers' && path[3] === 'molding' || path[path.length - 2] === 'doorStyle' && path[path.length - 1] === 'id' || ['id'].includes(path[path.length - 1])) isSettingDoorStyle = true;
 
     // If there are any molding change of layer
     if (path[1] === 'layers' && path[3] === 'molding') isUpdateMolding = true;
@@ -614,10 +642,10 @@ function replaceObject(modifiedPath, layer, planData, actions, sceneData, oldSce
             vLine3.material.depthTest = false;
             var uVec = new Three.Vector3(-posVec.x / scalevec.x, -posVec.y / scalevec.y, -posVec.z / scalevec.z);
             var blLighting = item.type.includes('Light');
-            vLine.translateY(blLighting ? 1.6 : 0.1);
-            vLine1.translateY(blLighting ? 1.6 : 0.1);
-            vLine2.translateY(blLighting ? 1.6 : 0.1);
-            vLine3.translateY(blLighting ? 1.6 : 0.1);
+            vLine.translateY(blLighting ? 1.6 : boundingBox.min.y + 0.1);
+            vLine1.translateY(blLighting ? 1.6 : boundingBox.min.y + 0.1);
+            vLine2.translateY(blLighting ? 1.6 : boundingBox.min.y + 0.1);
+            vLine3.translateY(blLighting ? 1.6 : boundingBox.min.y + 0.1);
             upObj.translateOnAxis(uVec, 1);
             upObj.translateY(max.y - min.y);
             _mBox.name = 'TransformBox';
@@ -923,9 +951,9 @@ function getLineDistance(obj, layer, isCalcWall, index) {
         obj.geometry.attributes.position.needsUpdate = true;
         obj.geometry.computeBoundingSphere();
         obj.geometry.computeBoundingBox();
-        var dist = formatNumber(convert(intersects[i].distance).from('cm').to('in'), DECIMAL_PLACES_2);
+        var dist = convert(intersects[i].distance).from('cm').to('in');
         if (dist > 3) {
-          var _canvas = getTextCanvas(dist);
+          var _canvas = getDistanceCanvas(dist, layer);
           var wid = _canvas.width / window.innerWidth * 30;
           var hei = _canvas.height / window.innerHeight * 30;
           var texture = new Three.Texture(_canvas);
@@ -1047,7 +1075,7 @@ function getLineDistance(obj, layer, isCalcWall, index) {
       obj.geometry.attributes.position.needsUpdate = true;
       var _dist = formatNumber(distance, DECIMAL_PLACES_2);
       if (_dist > 3) {
-        var _canvas2 = getTextCanvas(_dist);
+        var _canvas2 = getDistanceCanvas(_dist, layer);
         var _wid = _canvas2.width / window.innerWidth * 30;
         var _hei = _canvas2.height / window.innerHeight * 30;
         var _texture = new Three.Texture(_canvas2);
@@ -1175,12 +1203,18 @@ export function getIntersectPoint(opX, opY, pX, pY) {
 function gcd(a, b) {
   return a % b ? gcd(b, a % b) : b;
 }
-function getTextCanvas(text) {
-  var parameters = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+function getDistanceCanvas(distance, layer) {
+  var _layer$unit;
+  var parameters = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   var canvas = document.createElement('canvas');
   var ctx = canvas.getContext('2d');
+  var curUnit = (_layer$unit = layer === null || layer === void 0 ? void 0 : layer.unit) !== null && _layer$unit !== void 0 ? _layer$unit : UNIT_INCH;
+  var fixedLength = (layer === null || layer === void 0 ? void 0 : layer.unit) === UNIT_METER || (layer === null || layer === void 0 ? void 0 : layer.unit) === UNIT_FOOT ? 2 : 0;
+  var distText = String((Math.round(convert(distance).from('in').to(curUnit) * 100) / 100).toFixed(fixedLength));
   var fontSize = 16;
-  var integral = String(text) + "''";
+  var integral = distText + curUnit;
+  // let integral = String(distance) + "''";
+
   parameters.fontName = parameters.fontName || ARROW_TEXT_FONTFACE;
 
   // Prepare the font to be able to measure
@@ -3418,9 +3452,11 @@ export function updateMoldingGroupArray(MGArray, selItem, planData, layer) {
       // refresh mesh of the updating molding groups
       new_MGArray.forEach(function (mg, index) {
         if (mg.items[0].molding.some(function (mol) {
-          return mol.location_type === mg.location_type;
+          return isImmutable(mol) ? mol.toJS().location_type === mg.location_type : mol.location_type === mg.location_type;
         })) {
-          var molding = mg.items[0].molding.filter(function (mol) {
+          var molding = isImmutable(mg.items[0].molding) ? mg.items[0].molding.filter(function (mol) {
+            return mol.toJS().location_type === mg.location_type;
+          }).toJS()[0] : mg.items[0].molding.filter(function (mol) {
             return mol.location_type === mg.location_type;
           })[0];
           if (mg.molding === null || mg.molding.itemID !== mol.itemID || mg.lines === null || mg.points === null) {

package/es/components/viewer3d/viewer3d.js

@@ -19,16 +19,16 @@ import { checkCabinetOverlap, createBacksplash, deleteSpecifiedMeshObjects, fVLi
 import { disposeObject, disposeScene } from "./three-memory-cleaner";
 import diff from 'immutablediff';
 import * as SharedStyle from "../../shared-style";
-import { BASE_CABINET_LAYOUTPOS, MODE_3D_VIEW, MODE_DRAGGING_ITEM_3D, MODE_DRAWING_HOLE_3D, MODE_DRAWING_ITEM_3D, MODE_ELEVATION_VIEW, MODE_IDLE_3D, MODE_ROTATING_ITEM_3D, SECONDARY_PURPLE_COLOR, TALL_CABINET_LAYOUTPOS, UNIT_CENTIMETER, WALL_CABINET_LAYOUTPOS } from "../../constants";
+import { BASE_CABINET_LAYOUTPOS, MODE_3D_VIEW, MODE_DRAGGING_ITEM_3D, MODE_DRAWING_HOLE_3D, MODE_DRAWING_ITEM_3D, MODE_ELEVATION_VIEW, MODE_IDLE_3D, MODE_ROTATING_ITEM_3D, SECONDARY_PURPLE_COLOR, TALL_CABINET_LAYOUTPOS, UNIT_CENTIMETER, WALL_CABINET_LAYOUTPOS, INTERNAL_EVENT_SELECT_ELEMENT, INTERNAL_EVENT_DRAG_ELEMENT, INTERNAL_EVENT_DRAW_ELEMENT, INTERNAL_EVENT_ROTATE_ELEMENT, MODE_ROTATING_ITEM, MODE_DRAGGING_HOLE_3D, INTERNAL_EVENT_REPLACE_CABINET } from "../../constants";
 import { isUndefined } from 'util';
 import { verticesDistance } from "../../utils/geometry";
 import { convert } from "../../utils/convert-units-lite";
 import { GeometryUtils } from "../../utils/export";
-import { handleCamRect, isElevationView, isEmpty } from "../../utils/helper";
+import { handleCamRect, isElevationView, isEmpty, updatePayloadOfInternalEvent } 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";
+import { returnReplaceableDeepSearchType } from "../viewer2d/utils";
 CameraControls.install({
   THREE: Three
 });
@@ -231,6 +231,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
           });
           self.renderer.domElement.style.display = 'block';
         }, 1500);
+        self.planData = planData;
       });
       var area = scene.getIn(['layers', scene.selectedLayer, 'areas']);
       var layer = scene.getIn(['layers', scene.selectedLayer]);
@@ -669,7 +670,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
         layer.lines.forEach(function (line) {
           line.holes.forEach(function (holeID) {
             var hole = layer.holes.get(holeID);
-            holes.push(hole);
+            if (hole) holes.push(hole);
           });
         });
         var i = 0;
@@ -1183,6 +1184,18 @@ 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 _state$get, _this2$props$onIntern, _this2$props;
+          var catalog = (_state$get = state.get('catalog')) === null || _state$get === void 0 ? void 0 : _state$get.toJS();
+          var payload = updatePayloadOfInternalEvent(evtElement, layer, catalog, 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();
@@ -1274,7 +1287,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);
@@ -1323,11 +1347,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 {
@@ -1340,7 +1359,8 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
         }
       };
       this.mouseUpEvent = function (event) {
-        var _selObj$object, _selObj$object2;
+        var internalType = ''; // internalEvent type - select/drag/draw
+        var selectedElement; // internalEvent data
         firstMove = 0;
         var altitude = 0;
         if (allItemRect && allItemRect.cur && allItemRect.cur.itemInfo !== undefined) {
@@ -1377,6 +1397,21 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
           isInitialPhase = true;
           return;
         }
+        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();
         }
@@ -1409,7 +1444,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;
@@ -1425,6 +1461,9 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
                   var replaceInfo = intersects[_i10].object.parent.parent.userData;
                   _this2.context.itemsActions.selectItem(replaceInfo.layerId, replaceInfo.itemId);
                   !_this2.props.downloadFlag && _this2.props.replaceCabinet(true);
+                  internalType = INTERNAL_EVENT_REPLACE_CABINET;
+                  var replaceElement = _this2.props.state.scene.layers.get(replaceInfo.layerId).items.get(replaceInfo.itemId);
+                  sendInternalEvent(internalType, replaceElement);
                   return;
                 }
               }
@@ -1437,6 +1476,19 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
             }
           }
           gridMatrix.copy(gridPlane.matrixWorld).invert();
+          var addItemToolObj = function addItemToolObj() {
+            var _planData$sceneGraph, _selectedObject, _intersects$_i;
+            var selectedItem = (_planData$sceneGraph = planData.sceneGraph) === null || _planData$sceneGraph === void 0 || (_planData$sceneGraph = _planData$sceneGraph.layers[selectedObject.layerID]) === null || _planData$sceneGraph === void 0 ? void 0 : _planData$sceneGraph.items[(_selectedObject = selectedObject) === null || _selectedObject === void 0 ? void 0 : _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) {
@@ -1460,67 +1512,63 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
                 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);
+                  addItemToolObj();
                   _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;
-                  }
+                  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);
                 });
               } 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')) {
+                      elementID = selectedObject.holeID;
+                      elementPrototype = 'holes';
+                      if (_this2.props.state.mode === MODE_DRAGGING_HOLE_3D) {
                         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')) {
-                        actions.holesActions.endDraggingHole3D(sPoint.x, sPoint.y);
-                      }
+                      elementID = selectedObject.lineID;
+                      elementPrototype = 'lines';
+                      break;
+                    case 'areaID' in selectedObject:
+                      elementID = selectedObject.areaID;
+                      elementPrototype = 'areas';
                       break;
                     default:
                       break;
                   }
+                  selectedElement = _this2.props.state.scene.layers.get(selectedObject.layerID).getIn([elementPrototype, elementID]);
                 }
                 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;
@@ -1531,6 +1579,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
               selectedObj = allItemRect.cur;
             }
           } else {
+            var _planData$sceneGraph2, _selectedObject2, _selectedObject3;
             visibleTransformBox(false);
             var alti = 0;
             if (allItemRect && allItemRect.cur && allItemRect.cur.itemInfo !== undefined) {
@@ -1540,18 +1589,9 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
               alti = convert(alti).from(_unit2).to(_this2.props.state.scene.unit);
             }
             getPoint(event, alti);
+            var _selectedItem = planData === null || planData === void 0 || (_planData$sceneGraph2 = planData.sceneGraph) === null || _planData$sceneGraph2 === void 0 || (_planData$sceneGraph2 = _planData$sceneGraph2.layers[(_selectedObject2 = selectedObject) === null || _selectedObject2 === void 0 ? void 0 : _selectedObject2.layerID]) === null || _planData$sceneGraph2 === void 0 ? void 0 : _planData$sceneGraph2.items[(_selectedObject3 = selectedObject) === null || _selectedObject3 === void 0 ? void 0 : _selectedObject3.itemID];
+            if (isSelected && !isEmpty(_selectedItem)) addItemToolObj();
             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) {
-                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
               });
@@ -1560,16 +1600,6 @@ 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) {
-                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
               });
@@ -1601,6 +1631,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
             selectedObj = allItemRect.cur;
           }
         }
+        sendInternalEvent(internalType, selectedElement);
       };
       this.mouseEnterEvent = function (event) {
         if (_this2.props.state.mode !== MODE_DRAWING_ITEM_3D) return;
@@ -2035,7 +2066,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) {
@@ -2159,7 +2190,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(0xe4ebfe); // change color about v1: 0x8791AB, v2: 0xC2C2C2, v3: 0xC3CADC
         // scene3D.fog = new Three.Fog(0xC3CADC, 2000, 3500);
         window.scene3D = scene3D;
         // Camera
@@ -2485,10 +2516,13 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
       if (nextProps.state.scene !== this.props.state.scene || nextProps.state.doorStyle && nextProps.state.doorStyle.get('name') !== this.props.state.doorStyle.get('name')) {
         var changedValues = diff(this.props.state.scene, nextProps.state.scene);
         prepareSnapSpec(layer);
+        var isInteractiveMove = nextProps.state.mode === MODE_DRAGGING_ITEM_3D || nextProps.state.mode === MODE_ROTATING_ITEM_3D || nextProps.state.mode === MODE_DRAWING_ITEM_3D || nextProps.state.mode === MODE_DRAGGING_HOLE_3D || nextProps.state.mode === MODE_IDLE_3D;
         if (nextProps.state.doorStyle && nextProps.state.doorStyle.get('name') === this.props.state.doorStyle.get('name')) {
-          self.setState({
-            isLoading: true
-          });
+          if (!isInteractiveMove) {
+            self.setState({
+              isLoading: true
+            });
+          }
           if (self.props.downloadFlag) {
             self.setState({
               waitForRender: 0
@@ -2554,7 +2588,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
               height: '70px',
               animation: 'spin 2s linear infinite'
             },
-            src: '/assets/img/loading_large.gif',
+            src: '/assets/img/loading/loading.gif',
             alt: "img"
           }));
         } else {
@@ -2568,9 +2602,12 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
           }, /*#__PURE__*/React.createElement("img", {
             style: {
               animation: 'spin 2s linear infinite',
-              marginTop: "22%"
+              position: "absolute",
+              top: "50%",
+              width: '70px',
+              height: '70px'
             },
-            src: '/assets/img/loading_large.gif',
+            src: '/assets/img/loading/loading.gif',
             alt: "img"
           }));
         }
@@ -2587,9 +2624,11 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
           style: {
             animation: 'spin 2s linear infinite',
             position: "absolute",
-            top: "50%"
+            top: "50%",
+            width: '70px',
+            height: '70px'
           },
-          src: '/assets/img/loading_large.gif',
+          src: '/assets/img/loading/loading.gif',
           alt: "img"
         }));
       } else {