kitchen-simulator 4.1.7-react-18 → 4.2.2

package/lib/components/viewer3d/viewer3d.js

@@ -7,12 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _readOnlyError2 = _interopRequireDefault(require("@babel/runtime/helpers/readOnlyError"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
@@ -31,7 +31,6 @@ var _RGBELoader = require("three/examples/jsm/loaders/RGBELoader");
 var _cameraControls = _interopRequireDefault(require("camera-controls"));
 var _objectsUtils = require("../../utils/objects-utils");
 var _utils = require("../viewer2d/utils");
-var _AppContext = _interopRequireDefault(require("../../AppContext"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -58,7 +57,6 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
     _this.width = props.width;
     _this.height = props.height;
     _this.renderingID = 0;
-    _this.canvasWrapperRef = /*#__PURE__*/_react["default"].createRef();
     var mode = props.state.mode;
     if (!window.__elevationRendererDownload) {
       window.__elevationRendererDownload = {};
@@ -240,6 +238,7 @@ var Scene3DViewer = exports["default"] = /*#__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]);
@@ -678,7 +677,7 @@ var Scene3DViewer = exports["default"] = /*#__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;
@@ -824,17 +823,19 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
       this.snap = function (obj, layer) {
         // snap operation
         var target = obj.userData.target;
+        if ((0, _helper.isEmpty)(target)) return;
         for (; target.parent != null;) {
           if (target.name == 'pivot') break;
           target = target.parent;
         }
         var source = obj.parent.parent.parent;
         if (target.userData.type == 'item') {
+          var _item$properties$getI;
           var sRot = layer.getIn(['items', source.userData.itemId]).rotation;
           var tRot = layer.getIn(['items', target.userData.itemId]) ? layer.getIn(['items', target.userData.itemId]).rotation : 0;
           var item = layer.getIn(['items', source.userData.itemId]);
           var layoutType = item.layoutpos;
-          var altitudeLength = (0, _convertUnitsLite.convert)(item.properties.getIn(['altitude', '_length'])).from('in').to('cm');
+          var altitudeLength = (0, _convertUnitsLite.convert)(item.properties.getIn(['altitude', '_length'])).from((_item$properties$getI = item.properties.getIn(['altitude', '_unit'])) !== null && _item$properties$getI !== void 0 ? _item$properties$getI : 'in').to('cm');
           var sBounding = source.children[0].userData;
           var tBounding = target.children[0].userData;
           var tPos = target.position.clone();
@@ -934,8 +935,9 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
             snapFlag = false;
             return;
           } else {
+            var _item3$properties$get;
             var _layoutType = _item3.layoutpos;
-            var _altitudeLength = (0, _convertUnitsLite.convert)(_item3.properties.getIn(['altitude', '_length'])).from('in').to('cm');
+            var _altitudeLength = (0, _convertUnitsLite.convert)(_item3.properties.getIn(['altitude', '_length'])).from((_item3$properties$get = _item3.properties.getIn(['altitude', '_unit'])) !== null && _item3$properties$get !== void 0 ? _item3$properties$get : 'in').to('cm');
             var _sBounding = source.children[0].userData;
             var _width = _sBounding.max.x - _sBounding.min.x;
             var _height = _sBounding.max.y - _sBounding.min.y;
@@ -1195,25 +1197,9 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
       var sendInternalEvent = function sendInternalEvent(evtType, evtElement) {
         var pointArray = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
         if (!(0, _helper.isEmpty)(evtType) && !(0, _helper.isEmpty)(evtElement)) {
-          var _currentObject, _this2$props$onIntern, _this2$props;
-          var payload = evtElement === null || evtElement === void 0 ? void 0 : evtElement.toJS();
-          if (((_currentObject = currentObject) === null || _currentObject === void 0 ? void 0 : _currentObject.prototype) === 'lines') {
-            // caculating length of selected line//
-            var v_a = layer.vertices.get(currentObject.vertices.get(0));
-            var v_b = layer.vertices.get(currentObject.vertices.get(1));
-            var distance = _export.GeometryUtils.pointsDistance(v_a.x, v_a.y, v_b.x, v_b.y);
-            var _length = (0, _convertUnitsLite.convert)(distance).from('cm').to('in');
-            payload.length = _length;
-            //////////////////////////////////////
-          } else if ((evtElement === null || evtElement === void 0 ? void 0 : evtElement.prototype) === 'items') {
-            // check this cabinet has warning box
-            payload.isWarning = (0, _utils.isWarningItem)(evtElement);
-            // check this item is available molding
-            payload.isMoldingAvailable = _export.MoldingUtils.isEnableItemForMolding(layer, evtElement); // check this item is snapped to wall
-            payload.isAttachedWall = _export.MoldingUtils.isAttachedWall(layer, evtElement);
-            // update distArray
-            if (pointArray) payload.distArray = pointArray;
-          }
+          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 = (0, _helper.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
@@ -1295,6 +1281,7 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
         }
         if (_this2.props.state.mode == _constants.MODE_DRAWING_ITEM_3D) return;
         if (isSelected) {
+          !_this2.props.downloadFlag && _this2.props.setToolbar('');
           if (intersects.length > 0 && !isNaN(intersects[0].distance)) {
             var _i1;
             for (_i1 = 0; _i1 < intersects.length; _i1++) {
@@ -1303,7 +1290,7 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
             if (intersects[_i1] === undefined) {
               if (transflag !== 0 && transflag !== 2) {
                 isSelected = false;
-                // this.context.projectActions.unselectAll();
+                _this2.context.projectActions.unselectAll();
                 scene3D.remove(toolObj);
                 _this2.context.itemsActions.removeReplacingSupport();
                 return;
@@ -1370,16 +1357,11 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
               if (selectedFlag || toolIntersects.length > 0 && !(0, _helper.isElevationView)(mode)) {
                 cameraControls.mouseButtons.left = _cameraControls["default"].ACTION.NONE;
                 selectedFlag = false;
-              } else {
-                isSelected = false;
-                // this.context.projectActions.unselectAll();
-                scene3D.remove(toolObj);
-                _this2.context.itemsActions.removeReplacingSupport();
               }
             }
           } else {
             isSelected = false;
-            // this.context.projectActions.unselectAll();
+            _this2.context.projectActions.unselectAll();
             scene3D.remove(toolObj);
             _this2.context.itemsActions.removeReplacingSupport();
             return;
@@ -1387,10 +1369,12 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
         }
       };
       this.mouseUpEvent = function (event) {
+        var _selectedObject;
         var internalType = ''; // internalEvent type - select/drag/draw
         var selectedElement; // internalEvent data
         firstMove = 0;
         var altitude = 0;
+        var curLayer = _this2.props.state.scene.getIn(['layers', (_selectedObject = selectedObject) === null || _selectedObject === void 0 ? void 0 : _selectedObject.layerID]);
         if (allItemRect && allItemRect.cur && allItemRect.cur.itemInfo !== undefined) {
           var properties = allItemRect.cur.itemInfo.properties;
           altitude = properties.getIn(['altitude', '_length']);
@@ -1399,6 +1383,9 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
         }
         scene3D.remove(angleObj);
         scene3D.remove(toolObj);
+        if (!_this2.props.downloadFlag && !_this2.props.state.mode.includes('ING')) {
+          _this2.props.setToolbar('');
+        }
         if (_this2.props.state.mode == _constants.MODE_DRAWING_ITEM_3D) {
           if (Point.x > _this2.props.state.scene.width) Point.x = _this2.props.state.width;
           if (Point.y > _this2.props.state.scene.height) Point.y = _this2.props.state.height;
@@ -1408,7 +1395,7 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
             actions.itemsActions.endDrawingItem(_this2.props.state.scene.selectedLayer, sPoint.x, sPoint.y);
           } else {
             removeSnapBox();
-            var polygon = _export.GeometryUtils.getPoylgonPoints(layer);
+            var polygon = _export.GeometryUtils.getPoylgonPoints(curLayer !== null && curLayer !== void 0 ? curLayer : layer);
             // if cursor is outside of room
             if (polygon.length > 0 && !_export.GeometryUtils.ContainsPoint(polygon, Point.x, Point.y)) {
               actions.itemsActions.endDrawingItem(_this2.props.state.scene.selectedLayer, sPoint.x, sPoint.y);
@@ -1469,7 +1456,8 @@ var Scene3DViewer = exports["default"] = /*#__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;
@@ -1485,6 +1473,9 @@ var Scene3DViewer = exports["default"] = /*#__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 = _constants.INTERNAL_EVENT_REPLACE_CABINET;
+                  var replaceElement = _this2.props.state.scene.layers.get(replaceInfo.layerId).items.get(replaceInfo.itemId);
+                  sendInternalEvent(internalType, replaceElement);
                   return;
                 }
               }
@@ -1497,6 +1488,19 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
             }
           }
           gridMatrix.copy(gridPlane.matrixWorld).invert();
+          var addItemToolObj = function addItemToolObj() {
+            var _planData$sceneGraph, _selectedObject2, _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[(_selectedObject2 = selectedObject) === null || _selectedObject2 === void 0 ? void 0 : _selectedObject2.itemID];
+            if ((0, _util.isUndefined)(selectedItem)) return;
+            selectedElement = _this2.props.state.scene.layers.get(selectedObject.layerID).items.get(selectedObject.itemID);
+            var itemPos = selectedItem.position.clone();
+            if (((_intersects$_i = intersects[_i10]) === null || _intersects$_i === void 0 || (_intersects$_i = _intersects$_i.object) === null || _intersects$_i === void 0 || (_intersects$_i = _intersects$_i.parent) === null || _intersects$_i === void 0 || (_intersects$_i = _intersects$_i.parent) === null || _intersects$_i === void 0 || (_intersects$_i = _intersects$_i.userData) === null || _intersects$_i === void 0 ? void 0 : _intersects$_i.itemId) === selectedItem.userData.itemId) {
+              toolObj.position.set(intersects[_i10].point.x, intersects[_i10].point.y, intersects[_i10].point.z);
+            } else {
+              toolObj.position.set(planData.plan.position.x + itemPos.x, 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) {
@@ -1519,38 +1523,20 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
                 }
                 isSelected = true;
                 setTimeout(function () {
-                  (0, _sceneCreator.getDistances)(layer);
-                  var selectedItem = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
-                  if ((0, _util.isUndefined)(selectedItem)) return;
-                  selectedElement = _this2.props.state.scene.layers.get(selectedObject.layerID).items.get(selectedObject.itemID);
-                  var itemPos = selectedItem.position.clone();
-                  if (intersects[_i10].object.parent && intersects[_i10].object.parent.parent.userData.itemId === selectedItem.userData.itemId) {
-                    toolObj.position.set(intersects[_i10].point.x, intersects[_i10].point.y, intersects[_i10].point.z);
-                  } else {
-                    toolObj.position.set(planData.plan.position.x + itemPos.x, selectedElement.category === 'lighting' ? -planData.plan.position.y - selectedElement.properties.get('height').get('length') : planData.plan.position.y + selectedItem.children[0].position.y, planData.plan.position.z + itemPos.z);
-                  }
-                  scene3D.add(toolObj);
+                  var _curLayer$id;
+                  addItemToolObj();
+                  (0, _sceneCreator.getDistances)(curLayer !== null && curLayer !== void 0 ? curLayer : layer, selectedElement);
                   _this2.setState({
                     toolObj: toolObj
                   });
                   // showItemButtons(layer.getIn(['items', selectedObject.itemID]), currentObject, event, camera, this.renderer);
-                  var pointArray = [],
-                    cnt = 0;
-                  pointArray.push([_sceneCreator.fVLine[0].userData.distance, 90]);
-                  pointArray.push([_sceneCreator.fVLine[1].userData.distance, -90]);
-                  pointArray.push([_sceneCreator.fVLine[2].userData.distance, 180]);
-                  pointArray.push([_sceneCreator.fVLine[3].userData.distance, 0]);
-                  pointArray.forEach(function (pointElement, index) {
-                    if (pointElement[0] == undefined) pointArray[index][0] = 0;
-                  });
-                  pointArray.forEach(function (pointElement) {
-                    if (pointElement[0] == 0) cnt++;
-                  });
-                  if (cnt == 4 || cnt == 3) {
-                    pointArray[0][0] = 100;
-                    pointArray[1][0] = 100;
-                  }
-                  actions.itemsActions.storeDistArray(layer.id, selectedObject.itemID, pointArray);
+                  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 = _export.GeometryUtils.calcDistancesFromItemToWalls(selectedElement, curLayer !== null && curLayer !== void 0 ? curLayer : layer).PointArray;
+                  actions.itemsActions.storeDistArray((_curLayer$id = curLayer === null || curLayer === void 0 ? void 0 : curLayer.id) !== null && _curLayer$id !== void 0 ? _curLayer$id : layer.id, selectedObject.itemID, pointArray);
                   internalType = internalType ? internalType : _constants.INTERNAL_EVENT_SELECT_ELEMENT;
                   sendInternalEvent(internalType, selectedElement, pointArray);
                 });
@@ -1582,25 +1568,31 @@ var Scene3DViewer = exports["default"] = /*#__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 && !(0, _helper.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;
             bRotate = false;
             bMoveUP = false;
             if (isSelected) {
-              prepareSnap(layer);
+              prepareSnap(curLayer !== null && curLayer !== void 0 ? curLayer : layer);
               selectedObj = allItemRect.cur;
             }
           } else {
+            var _planData$sceneGraph2, _selectedObject3, _selectedObject4;
             (0, _sceneCreator.visibleTransformBox)(false);
             var alti = 0;
             if (allItemRect && allItemRect.cur && allItemRect.cur.itemInfo !== undefined) {
@@ -1610,18 +1602,9 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
               alti = (0, _convertUnitsLite.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[(_selectedObject3 = selectedObject) === null || _selectedObject3 === void 0 ? void 0 : _selectedObject3.layerID]) === null || _planData$sceneGraph2 === void 0 ? void 0 : _planData$sceneGraph2.items[(_selectedObject4 = selectedObject) === null || _selectedObject4 === void 0 ? void 0 : _selectedObject4.itemID];
+            if (isSelected && !(0, _helper.isEmpty)(_selectedItem)) addItemToolObj();
             if (bRotate) {
-              var _intersects$_i;
-              var selectedItem = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
-              if ((0, _util.isUndefined)(selectedItem)) return;
-              selectedElement = _this2.props.state.scene.layers.get(selectedObject.layerID).items.get(selectedObject.itemID);
-              var itemPos = selectedItem.position.clone();
-              if (((_intersects$_i = intersects[_i10]) === null || _intersects$_i === void 0 || (_intersects$_i = _intersects$_i.object) === null || _intersects$_i === void 0 || (_intersects$_i = _intersects$_i.parent) === null || _intersects$_i === void 0 || (_intersects$_i = _intersects$_i.parent) === null || _intersects$_i === void 0 || (_intersects$_i = _intersects$_i.userData) === null || _intersects$_i === void 0 ? void 0 : _intersects$_i.itemId) === selectedItem.userData.itemId) {
-                toolObj.position.set(intersects[_i10].point.x, intersects[_i10].point.y, intersects[_i10].point.z);
-              } else {
-                toolObj.position.set(planData.plan.position.x + itemPos.x, 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
               });
@@ -1630,16 +1613,6 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
             }
             if (bMove) {
               bMove = false;
-              var _selectedItem = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
-              if ((0, _util.isUndefined)(_selectedItem)) return;
-              selectedElement = _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, 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
               });
@@ -1667,7 +1640,7 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
           removeSnapBox();
           actions.sceneActions.updateMovingState(true);
           if (isSelected === true) {
-            prepareSnap(layer);
+            prepareSnap(curLayer !== null && curLayer !== void 0 ? curLayer : layer);
             selectedObj = allItemRect.cur;
           }
         }
@@ -2066,8 +2039,9 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
       // handle snapBox, distArray, backsplash
       this.handleAfterMovingItem = function () {
         var layer = _this2.props.state.scene.getIn(['layers', selectedObject.layerID]);
+        var item = layer.getIn(['items', selectedObject.itemID]);
         var item3D = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
-        (0, _sceneCreator.getDistances)(layer);
+        (0, _sceneCreator.getDistances)(layer, item);
         var pointArray = [],
           cnt = 0;
         pointArray.push([_sceneCreator.fVLine[0].userData.distance, 90]);
@@ -2106,7 +2080,7 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
         if (minDis < snapDelta && !snapFlag) {
           _this2.snap(snapObj, layer);
           snapFlag = true;
-          (0, _sceneCreator.getDistances)(layer);
+          (0, _sceneCreator.getDistances)(layer, item);
           var _i13 = 0;
           for (_i13 = 0; _i13 < _sceneCreator.fVLine.length; _i13++) {
             if (_sceneCreator.fVLine[_i13].userData.distance < snapDelta) {
@@ -2196,7 +2170,7 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
       }
 
       // Add the output of the renderer to the html element
-      var canvasWrapper = this.canvasWrapperRef.current;
+      var canvasWrapper = _reactDom["default"].findDOMNode(this.refs.canvasWrapper);
       canvasWrapper && canvasWrapper.appendChild(this.renderer.domElement);
 
       //
@@ -2465,18 +2439,14 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
       this.renderer.renderLists.dispose();
     }
   }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(nextProps) {
       var _this4 = this;
-      // Early return if downloadFlag and state are unchanged or scene is empty
-      if (this.props.downloadFlag && (0, _immutablediff["default"])(prevProps.state, this.props.state).toJS().length == 0 || (0, _helper.isEmpty)(this.props.state.scene)) {
-        return;
-      }
-      var _this$props = this.props,
-        width = _this$props.width,
-        height = _this$props.height;
-      var selectedLayer = this.props.state.getIn(['scene', 'layers', this.props.state.scene.selectedLayer]);
-      var ceilHeight = (0, _convertUnitsLite.convert)(selectedLayer.ceilHeight).from(selectedLayer.unit).to(this.props.state.scene.unit);
+      if (this.props.downloadFlag && (0, _immutablediff["default"])(this.props.state, nextProps.state).toJS().length == 0 || (0, _helper.isEmpty)(nextProps.state.scene)) return;
+      var width = nextProps.width,
+        height = nextProps.height;
+      var selectedLayer = nextProps.state.getIn(['scene', 'layers', nextProps.state.scene.selectedLayer]);
+      var ceilHeight = (0, _convertUnitsLite.convert)(selectedLayer.ceilHeight).from(selectedLayer.unit).to(nextProps.state.scene.unit);
       var actions = {
         areaActions: this.context.areaActions,
         holesActions: this.context.holesActions,
@@ -2486,7 +2456,7 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
         projectActions: this.context.projectActions,
         catalog: this.context.catalog
       };
-      var isLoadingCabinet = this.props.state.scene.isLoadingCabinet;
+      var isLoadingCabinet = nextProps.state.scene.isLoadingCabinet;
       if (this.state.isLoadingCabinet !== isLoadingCabinet) this.setState({
         isLoadingCabinet: isLoadingCabinet
       });
@@ -2497,7 +2467,7 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
       var allItemRect;
 
       // handle camera setting
-      switch (prevProps.state.mode) {
+      switch (this.props.state.mode) {
         case _constants.MODE_ELEVATION_VIEW:
           // when Elevation mode (camera: Orthographic)
           var cameraRect = (0, _helper.handleCamRect)(width, height, ceilHeight, this.state.lineLength);
@@ -2515,12 +2485,12 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
           break;
       }
       this.camera.updateProjectionMatrix();
-      var data = this.props.state.scene;
+      var data = nextProps.state.scene;
       var layer = data.getIn(['layers', data.selectedLayer]);
       var self = this;
       function implementBacksplash() {
-        if ((0, _helper.isElevationView)(self.props.state.mode)) return;
-        var allItems = _export.GeometryUtils.getAllItemSpecified(self.props.state.scene, actions.catalog, _constants.BASE_CABINET_LAYOUTPOS);
+        if ((0, _helper.isElevationView)(self.props.state.mode)) return; // apply backsplash when just 3D_mode, not elevation_mode
+        var allItems = _export.GeometryUtils.getAllItemSpecified(nextProps.state.scene, actions.catalog, _constants.BASE_CABINET_LAYOUTPOS);
         var i,
           items = [];
         for (i = 0; i < allItems.others.length; i++) items.push(allItems.others[i]);
@@ -2529,7 +2499,7 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
           var calcRect = _export.GeometryUtils.getCalcRectFromItem3D(items[i]);
           var visible = _export.GeometryUtils.isSnappedLine(calcRect, allLineRects);
           actions.itemsActions.setBacksplashVisible(items[i].itemInfo.id, visible);
-          (0, _sceneCreator.createBacksplash)(items[i], self.props.state.scene.getIn(['layers', self.props.state.scene.selectedLayer]), planData, self.props.state.scene);
+          (0, _sceneCreator.createBacksplash)(items[i], nextProps.state.scene.getIn(['layers', nextProps.state.scene.selectedLayer]), planData, nextProps.state.scene);
         }
       }
       function implementWarningBox() {
@@ -2557,13 +2527,16 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
           showflag: false
         });
       }
-      if (this.props.state.scene !== prevProps.state.scene || this.props.state.doorStyle && this.props.state.doorStyle.get('name') !== prevProps.state.doorStyle.get('name')) {
-        var changedValues = (0, _immutablediff["default"])(prevProps.state.scene, this.props.state.scene);
+      if (nextProps.state.scene !== this.props.state.scene || nextProps.state.doorStyle && nextProps.state.doorStyle.get('name') !== this.props.state.doorStyle.get('name')) {
+        var changedValues = (0, _immutablediff["default"])(this.props.state.scene, nextProps.state.scene);
         prepareSnapSpec(layer);
-        if (this.props.state.doorStyle && this.props.state.doorStyle.get('name') === prevProps.state.doorStyle.get('name')) {
-          self.setState({
-            isLoading: true
-          });
+        var isInteractiveMove = nextProps.state.mode === _constants.MODE_DRAGGING_ITEM_3D || nextProps.state.mode === _constants.MODE_ROTATING_ITEM_3D || nextProps.state.mode === _constants.MODE_DRAWING_ITEM_3D || nextProps.state.mode === _constants.MODE_DRAGGING_HOLE_3D || nextProps.state.mode === _constants.MODE_IDLE_3D;
+        if (nextProps.state.doorStyle && nextProps.state.doorStyle.get('name') === this.props.state.doorStyle.get('name')) {
+          if (!isInteractiveMove) {
+            self.setState({
+              isLoading: true
+            });
+          }
           if (self.props.downloadFlag) {
             self.setState({
               waitForRender: 0
@@ -2579,7 +2552,7 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
           }
           self.renderer.domElement.style.display = 'none';
         }
-        if (this.props.state.scene.showfg == true) {
+        if (nextProps.state.scene.showfg == true) {
           implementBacksplash();
           implementWarningBox();
         } else {
@@ -2588,7 +2561,7 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
         var _this$state = this.state,
           toolObj = _this$state.toolObj,
           angleObj = _this$state.angleObj;
-        var _updateScene = (0, _sceneCreator.updateScene)(this.planData, this.props.state.scene, prevProps.state.scene, changedValues.toJS(), actions, this.context.catalog, this.props.state.mode, toolObj, angleObj, this.props.state.draggingSupport),
+        var _updateScene = (0, _sceneCreator.updateScene)(this.planData, nextProps.state.scene, this.props.state.scene, changedValues.toJS(), actions, this.context.catalog, nextProps.state.mode, toolObj, angleObj, nextProps.state.draggingSupport),
           promise = _updateScene.promise;
         self.setState();
         promise.then(function (p1Value) {
@@ -2600,8 +2573,8 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
           });
           self.renderer.domElement.style.display = 'block';
         });
-        if (this.props.state.getIn(['scene', 'isEndDragging'])) {
-          this.props.state.setIn(['scene', 'isEndDragging'], false);
+        if (nextProps.state.getIn(['scene', 'isEndDragging'])) {
+          nextProps.state.setIn(['scene', 'isEndDragging'], false);
         }
       }
       this.renderer.setSize(width, height);
@@ -2677,17 +2650,25 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
         this.renderer.domElement.style.opacity = '1';
         !this.props.downloadFlag && document.getElementById('front') && (document.getElementById('front').style.display = 'block');
         return /*#__PURE__*/_react["default"].createElement('div', {
-          ref: this.canvasWrapperRef
+          ref: 'canvasWrapper'
         });
       }
     }
   }]);
 }(_react["default"].Component);
-(0, _defineProperty2["default"])(Scene3DViewer, "contextType", _AppContext["default"]);
 Scene3DViewer.propTypes = {
   state: _propTypes["default"].object.isRequired,
   width: _propTypes["default"].number.isRequired,
   height: _propTypes["default"].number.isRequired,
   replaceCabinet: _propTypes["default"].func.isRequired
 };
+Scene3DViewer.contextTypes = {
+  areaActions: _propTypes["default"].object.isRequired,
+  holesActions: _propTypes["default"].object.isRequired,
+  itemsActions: _propTypes["default"].object.isRequired,
+  linesActions: _propTypes["default"].object.isRequired,
+  sceneActions: _propTypes["default"].object.isRequired,
+  projectActions: _propTypes["default"].object.isRequired,
+  catalog: _propTypes["default"].object
+};
 module.exports = exports.default;