kitchen-simulator 1.0.0-DIY-1119

package/es/components/viewer3d/viewer3d.js

@@ -0,0 +1,2770 @@
+'use strict';
+
+import _readOnlyError from "@babel/runtime/helpers/esm/readOnlyError";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactDOM from 'react-dom';
+import * as Three from 'three';
+import { checkCabinetOverlap, createBacksplash, deleteSpecifiedMeshObjects, fVLine, getDistances, parseData, updateScene, visibleTransformBox } from "./scene-creator";
+import { disposeObject, disposeScene } from "./three-memory-cleaner";
+import diff from 'immutablediff';
+import * as SharedStyle from "../../shared-style";
+import { 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_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, updatePayloadOfInternalEvent } from "../../utils/helper";
+import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
+import CameraControls from 'camera-controls';
+import { getAllMeshes, vectorIntersectWithMesh } from "../../utils/objects-utils";
+import { returnReplaceableDeepSearchType } from "../viewer2d/utils";
+import { canMirrorCabinet } from "../../shared/domain/cabinet-mirror";
+var ICON_SPACING = 0;
+CameraControls.install({
+  THREE: Three
+});
+var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
+  function Scene3DViewer(props) {
+    var _this;
+    _classCallCheck(this, Scene3DViewer);
+    _this = _callSuper(this, Scene3DViewer, [props]);
+    _this.state = {
+      isLoading: false,
+      showflag: true,
+      isLoadingCabinet: props.state.scene.isLoadingCabinet,
+      toolObj: null,
+      angleObj: null,
+      waitForRender: 0,
+      lineLength: null // when view wall's elevation, that wall's length
+    };
+    _this.lastMousePosition = {};
+
+    // If mouseup happens over the canvas but mousedown started elsewhere (e.g. in a drawer),
+    // ignore that mouseup so we don't unintentionally clear the current selection.
+    _this._mouseDownStartedInCanvas = false;
+    _this._resetMouseDownStartedInCanvas = function () {
+      _this._mouseDownStartedInCanvas = false;
+    };
+    _this.width = props.width;
+    _this.height = props.height;
+    _this.renderingID = 0;
+    var mode = props.state.mode;
+    if (!window.__elevationRendererDownload) {
+      window.__elevationRendererDownload = {};
+    }
+    switch (mode) {
+      case MODE_IDLE_3D:
+        _this.renderer = window.__threeRenderer || new Three.WebGLRenderer({
+          preserveDrawingBuffer: true,
+          alpha: true,
+          antialias: true
+        });
+        break;
+      case MODE_3D_VIEW:
+        _this.renderer = window.__threeRendererDownload || new Three.WebGLRenderer({
+          preserveDrawingBuffer: true,
+          alpha: true,
+          antialias: true
+        });
+        break;
+      default:
+        if (_this.props.downloadFlag) {
+          _this.renderer = window.__elevationRendererDownload[mode] || new Three.WebGLRenderer({
+            preserveDrawingBuffer: true,
+            alpha: true,
+            antialias: true
+          });
+        } else {
+          _this.renderer = window.__elevationRenderer || new Three.WebGLRenderer({
+            preserveDrawingBuffer: true,
+            alpha: true,
+            antialias: true
+          });
+        }
+        break;
+    }
+    _this.renderer.shadowMap.enabled = true;
+    _this.renderer.shadowMapSoft = true;
+    if (mode == 'MODE_IDLE_3D') {
+      window.__threeRenderer = _this.renderer;
+    } else if (mode == 'MODE_3D_VIEW') {
+      window.__threeRendererDownload = _this.renderer;
+    } else {
+      if (_this.props.downloadFlag) window.__elevationRendererDownload[mode] = _this.renderer;else window.__elevationRenderer = _this.renderer;
+    }
+    _this.renderer.domElement.style.display = 'none';
+    return _this;
+  }
+  _inherits(Scene3DViewer, _React$Component);
+  return _createClass(Scene3DViewer, [{
+    key: "componentDidMount",
+    value: function componentDidMount(nextProps) {
+      var _this2 = this;
+      var scene3D, camera, pivot, cameraControls, clock;
+      var spotLight1, spotLightTarget;
+      var actions = {
+        areaActions: this.context.areaActions,
+        holesActions: this.context.holesActions,
+        itemsActions: this.context.itemsActions,
+        sceneActions: this.context.sceneActions,
+        linesActions: this.context.linesActions,
+        projectActions: this.context.projectActions,
+        catalog: this.context.catalog
+      };
+      var self = this;
+      var state = this.props.state;
+      var mode = state.mode,
+        scene = state.scene;
+      function setupLight(scene, inbBox) {
+        if (isElevationView(mode)) {
+          var ambilight = new Three.AmbientLight('0xffffff', 3);
+          scene.add(ambilight);
+        } else {
+          var addDirLight = function addDirLight(inColor, inIntensity, inPosition) {
+            var dirLight = new Three.DirectionalLight(inColor, inIntensity);
+            dirLight.castShadow = true;
+            dirLight.shadow.mapSize.x = shadowMapSize;
+            dirLight.shadow.mapSize.y = shadowMapSize;
+            dirLight.shadow.camera.near = 0;
+            dirLight.shadow.camera.far = shadowCameraFar;
+            dirLight.shadow.camera.top = shadowCameraSize * 1.5;
+            dirLight.shadow.camera.bottom = -shadowCameraSize * 1.5;
+            dirLight.shadow.camera.left = -shadowCameraSize * 1.5;
+            dirLight.shadow.camera.right = shadowCameraSize * 1.5;
+            dirLight.position.copy(inPosition);
+            var targetObject = new Three.Object3D();
+            targetObject.position.copy(bboxCenter);
+            scene.add(targetObject);
+            dirLight.target = targetObject;
+            dirLight.target.updateMatrixWorld();
+            scene.add(dirLight);
+          };
+          var addSpotLight = function addSpotLight(inColor, inIntensity, inPosition, inTarget, inDistance) {
+            var spotLight = new Three.SpotLight();
+            spotLight.intensity = inIntensity;
+            spotLight.color.setHex(inColor);
+            spotLight.position.copy(inPosition);
+            spotLight.angle = 1.3;
+            spotLight.distance = inDistance;
+            spotLight.penumbra = 1.8;
+            spotLight.decay = 0.01;
+            spotLight.castShadow = true;
+            spotLight.shadow.intensity = 2;
+            spotLight.shadow.mapSize.width = 4096;
+            spotLight.shadow.mapSize.height = 4096;
+            var targetObject = new Three.Object3D();
+            targetObject.position.copy(new Three.Vector3(inTarget.x, 0, inTarget.z));
+            scene.add(targetObject);
+            spotLight.target = targetObject;
+            spotLight.target.updateMatrixWorld();
+            scene.add(spotLight);
+          };
+          var shadowMapSize = 2048;
+          var shadowCameraSize = Math.max(Math.abs(inbBox.min.x - inbBox.max.x), Math.abs(inbBox.min.y - inbBox.max.y), Math.abs(inbBox.min.z - inbBox.max.z)) / 2;
+          var shadowCameraFar = shadowCameraSize * 10;
+          var bboxCenter = new Three.Vector3((inbBox.min.x + inbBox.max.x) / 2, inbBox.min.y, (inbBox.min.z + inbBox.max.z) / 2);
+          var dirLightPos = new Three.Vector3(inbBox.max.x, inbBox.max.y + 1.8 * Math.abs(inbBox.max.y - inbBox.min.y), inbBox.min.z - 0.5 * Math.abs(inbBox.max.z - inbBox.min.z));
+          addDirLight('white', 1.5, dirLightPos);
+          var ceiling = scene3D.getObjectByName('ceil');
+          if (ceiling) {
+            var ceilBBox = new Three.Box3().setFromObject(ceiling);
+            var spot1 = new Three.Vector3(ceilBBox.min.x + Math.abs(ceilBBox.min.x - ceilBBox.max.x) / 4, ceilBBox.max.y - 0.5, ceilBBox.min.z + Math.abs(ceilBBox.min.z - inbBox.max.z) / 4);
+            var spot2 = new Three.Vector3(ceilBBox.min.x + Math.abs(ceilBBox.min.x - ceilBBox.max.x) / 4, ceilBBox.max.y - 0.5, ceilBBox.max.z - Math.abs(ceilBBox.min.z - ceilBBox.max.z) / 4);
+            var spot3 = new Three.Vector3(ceilBBox.max.x - Math.abs(ceilBBox.min.x - ceilBBox.max.x) / 4, ceilBBox.max.y - 0.5, ceilBBox.min.z + Math.abs(ceilBBox.min.z - ceilBBox.max.z) / 4);
+            var spot4 = new Three.Vector3(ceilBBox.max.x - Math.abs(ceilBBox.min.x - ceilBBox.max.x) / 4, ceilBBox.max.y - 0.5, ceilBBox.max.z - Math.abs(ceilBBox.min.z - ceilBBox.max.z) / 4);
+            var spotlightDis = 1.5 * Math.abs(inbBox.min.y - inbBox.max.y);
+
+            // check if spotlight is inside the room
+            vectorIntersectWithMesh(spot1, scene3D.getObjectByName('floor')) && addSpotLight('0xffffff', 0.8, spot1, spot1, spotlightDis);
+            vectorIntersectWithMesh(spot2, scene3D.getObjectByName('floor')) && addSpotLight('0xffffff', 0.8, spot2, spot2, spotlightDis);
+            vectorIntersectWithMesh(spot3, scene3D.getObjectByName('floor')) && addSpotLight('0xffffff', 0.8, spot3, spot3, spotlightDis);
+            vectorIntersectWithMesh(spot4, scene3D.getObjectByName('floor')) && addSpotLight('0xffffff', 0.8, spot4, spot4, spotlightDis);
+          }
+        }
+      }
+
+      // Load data
+      this.setState({
+        isLoading: true
+      });
+      if (self.props.downloadFlag) {
+        this.setState({
+          waitForRender: 0
+        });
+
+        // set loading bar
+        switch (self.props.state.mode) {
+          case MODE_ELEVATION_VIEW:
+            self.props.setIsLoadingElevation('front', true);
+            break;
+          case MODE_3D_VIEW:
+            self.props.setIsLoading3D(true);
+            break;
+        }
+      }
+      var _parseData = parseData(scene, actions, this.context.catalog, camera, this.renderer, state.mode),
+        promise = _parseData.promise,
+        planData = _parseData.planData;
+      promise.then(function () {
+        var objToRemove = [];
+        planData.plan.traverse(function (obj) {
+          if (obj.geometry === null) {
+            objToRemove.push(obj);
+          }
+        });
+        objToRemove.forEach(function (obj) {
+          obj.removeFromParent();
+        });
+        var bbox = new Three.Box3().setFromObject(planData.plan);
+        if (!isElevationView(state.mode)) {
+          cameraControls.fitToBox(bbox);
+        }
+        setupLight(scene3D, planData.boundingBox);
+        self.setState({
+          waitForRender: 1
+        });
+        setTimeout(function () {
+          self.setState({
+            isLoading: false
+          });
+          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]);
+      var areas = [],
+        lights = [];
+      var snapBox = null;
+
+      // Check for data
+      var msg = '';
+      scene.layers.forEach(function (layer) {
+        if (layer.id === scene.selectedLayer || layer.visible) {
+          layer.items.forEach(function (item) {
+            if (item.doorStyle === null) {
+              if (!msg.includes(item.name + "'s doorStyle is null.")) msg += item.name + "'s doorStyle is null.\n";
+            }
+          });
+        }
+      });
+      if (msg !== '') {
+        confirm(msg);
+      }
+      init();
+      render();
+
+      // area lightning(wall lightning)/////
+
+      area.forEach(function (data) {
+        areas.push(data);
+      });
+      var _loop = function _loop() {
+        var aVertices = [];
+        var lines = [];
+        var height = 100;
+        areas[i].vertices.forEach(function (data) {
+          aVertices.push(data);
+        });
+        layer.lines.forEach(function (data) {
+          lines.push(data);
+        });
+        var _loop3 = function _loop3() {
+          var data = lines[_i15];
+          var realVec = [];
+          data.vertices.forEach(function (vec) {
+            realVec.push(vec);
+          });
+          if (aVertices.includes(realVec[0]) && aVertices.includes(realVec[1])) {
+            height = convert(layer.ceilHeight).from(layer.unit).to(UNIT_CENTIMETER);
+            // height = data.properties.getIn(['height', 'length']);
+            return 1; // break
+          }
+        };
+        for (var _i15 = 0; _i15 < lines.length; _i15++) {
+          if (_loop3()) break;
+        }
+        var vertices = [];
+        areas[i].vertices.forEach(function (datas) {
+          var vertex = scene.getIn(['layers', scene.selectedLayer, 'vertices', datas]);
+          vertices.push(vertex);
+        });
+        vertices.push(vertices[0]);
+        var fLen = vertices.length - 1;
+        for (var _i16 = 0; _i16 < fLen; _i16++) {
+          var sX = vertices[_i16].x;
+          var sY = vertices[_i16].y;
+          var eX = vertices[_i16 + 1].x;
+          var eY = vertices[_i16 + 1].y;
+          var len = Math.sqrt((eX - sX) * (eX - sX) + (eY - sY) * (eY - sY));
+          for (var cLen = 200; cLen < len; cLen += 200) {
+            var cX = sX + (eX - sX) * cLen / len;
+            var cY = sY + (eY - sY) * cLen / len;
+            var endLen = Math.sqrt((eX - cX) * (eX - cX) + (eY - cY) * (eY - cY));
+            if (endLen <= 100) continue;
+            var vec2 = new Three.Vector2(cX - sX, cY - sY);
+            var angle = vec2.angle() + Math.PI / 2;
+            cX = Math.cos(angle) * 30 + cX;
+            cY = Math.sin(angle) * 30 + cY;
+            var spotLight = new Three.SpotLight(0xeeeeee, 1.7);
+            spotLight.angle = 0.76;
+            spotLight.castShadow = true;
+            spotLight.penumbra = 1;
+            spotLight.decay = 1.7;
+            spotLight.distance = height - 20;
+            var target = new Three.Object3D();
+            spotLight.target = target;
+            lights.push({
+              light: spotLight,
+              target: target,
+              x: cX,
+              y: cY,
+              height: height
+            });
+          }
+        }
+      };
+      for (var i = 0; i < areas.length; i++) {
+        _loop();
+      }
+      // //////////////////////////
+
+      // OBJECT PICKING
+      var toIntersect = [planData.plan];
+      var mouse = new Three.Vector2();
+      var gridPlane = planData.grid;
+      var raycaster = new Three.Raycaster();
+      var selectedObject = {};
+      var selectedFlag = false;
+      var currentObject = null;
+      var isSelected = false;
+      var bRotate = false;
+      var bMove = false;
+      var bMoveUP = false;
+      var bMirror = false;
+      /** Transformation matrix of grid */
+      var gridMatrix = new Three.Matrix4();
+      var rayDirection = new Three.Vector3();
+      /** World position of grid plane */
+      var gridPlanOrigin = new Three.Vector3();
+      var Point = new Three.Vector2();
+      var sPoint = new Three.Vector2();
+
+      // SNAP FUNCTION VARIABLE
+      var snapFlag = false;
+      var snapAnimI = 0;
+      var snapDelta = 6;
+      var t_i = 0;
+      var targetPoint = new Three.Vector3();
+      var targetRot = 0;
+      var targetUVec = new Three.Vector3();
+      var targetCRotation = 0;
+      var targetObj = null;
+      var targetNumber = 0;
+      var wallSlide = false;
+      var pinFlag = false;
+      var sFlag = false; //for all object move
+      var endPoint = {};
+      var allItemRect;
+      var allItemSnap;
+      var allLines;
+      var allLineRects;
+      var allLineSnap;
+      var allRect;
+      var allArea;
+
+      // FLAG FOR initial phase of drawing an item
+      var isInitialPhase = true;
+
+      // end snap function variable///////////////////////
+      var backsplashVisible = false;
+      var holeItems = GeometryUtils.getHoleItems(layer);
+      var removeSnapBox = function removeSnapBox() {
+        if (snapBox != null) {
+          planData.plan.remove(snapBox);
+          disposeObject(snapBox);
+          snapBox = null;
+          targetObj = null;
+          snapFlag = false;
+        }
+      };
+      var camToGrid = new Three.Vector3();
+      var camPos = camera.position;
+      var mapCursorPosition = function mapCursorPosition(e, altitude) {
+        camToGrid.subVectors(gridPlanOrigin, camPos);
+        var camD = camToGrid.y + (altitude ? altitude : 0);
+        var rayD = rayDirection.y;
+        var intersectPt = rayDirection.multiplyScalar(camD / rayD).add(camPos);
+        intersectPt.y = gridPlanOrigin.y;
+        intersectPt.applyMatrix4(gridMatrix);
+        return {
+          x: intersectPt.x,
+          y: -intersectPt.z
+        };
+      };
+
+      /* for Snap Functions*/
+
+      var pointLineDistance = function pointLineDistance(point, line) {
+        // return distance from point to line and directional point of line
+        var pX = point.x;
+        var pY = point.y;
+        var l1x = line[0].x;
+        var l1y = line[0].y;
+        var l2x = line[1].x;
+        var l2y = line[1].y;
+        var pLine = new Three.Vector2(l1x - pX, l1y - pY);
+        var Line = new Three.Vector2(l1x - l2x, l1y - l2y);
+        var pAngle = pLine.angle();
+        var lAngle = Line.angle();
+        var pDistance = pLine.length();
+        var oDistance = Line.length();
+        var directDistance = Math.sin(pAngle - lAngle) * pDistance;
+        var lineDistance = Math.cos(pAngle - lAngle) * pDistance;
+        var dX = l1x + (l2x - l1x) * lineDistance / oDistance;
+        var dY = l1y + (l2y - l1y) * lineDistance / oDistance;
+        var dPoint = {
+          x: dX,
+          y: dY
+        };
+        return {
+          distance: directDistance,
+          point: dPoint
+        };
+      };
+      var getInterSect = function getInterSect(shape1, shape2) {
+        // return result of intersect of two shape
+        var count = 0;
+        for (var _i = 0; _i < shape1.length - 1; _i++) {
+          var sl1 = {
+            x: shape1[_i].x,
+            y: shape1[_i].y
+          };
+          var sl2 = {
+            x: shape1[_i + 1].x,
+            y: shape1[_i + 1].y
+          };
+          for (var j = 0; j < shape2.length - 1; j++) {
+            var el1 = {
+              x: shape2[j].x,
+              y: shape2[j].y
+            };
+            var el2 = {
+              x: shape2[j + 1].x,
+              y: shape2[j + 1].y
+            };
+            var flag = GeometryUtils.getLineInterSect(sl1.x, sl1.y, sl2.x, sl2.y, el1.x, el1.y, el2.x, el2.y);
+            if (flag) {
+              count++;
+              if (count > 1) return true;
+            }
+          }
+        }
+        return false;
+      };
+      this.getRectPoints = function (width, height, pos, rot) {
+        // return 4 points from it's position, width, height, and rotation info
+        var rX = width / 2;
+        var rY = height / 2;
+        var vertices = [];
+        var cRot = rot;
+        var pX = pos.x + Math.cos(cRot) * rX + Math.cos(cRot + Math.PI / 2) * rY;
+        var pY = pos.y + Math.sin(cRot) * rX + Math.sin(cRot + Math.PI / 2) * rY;
+        vertices.push({
+          x: Math.floor(pX + 0.5),
+          y: Math.floor(pY + 0.5)
+        });
+        rX = -rX;
+        pX = pos.x + Math.cos(cRot) * rX + Math.cos(cRot + Math.PI / 2) * rY;
+        pY = pos.y + Math.sin(cRot) * rX + Math.sin(cRot + Math.PI / 2) * rY;
+        vertices.push({
+          x: Math.floor(pX + 0.5),
+          y: Math.floor(pY + 0.5)
+        });
+        rY = -rY;
+        pX = pos.x + Math.cos(cRot) * rX + Math.cos(cRot + Math.PI / 2) * rY;
+        pY = pos.y + Math.sin(cRot) * rX + Math.sin(cRot + Math.PI / 2) * rY;
+        vertices.push({
+          x: Math.floor(pX + 0.5),
+          y: Math.floor(pY + 0.5)
+        });
+        rX = -rX;
+        pX = pos.x + Math.cos(cRot) * rX + Math.cos(cRot + Math.PI / 2) * rY;
+        pY = pos.y + Math.sin(cRot) * rX + Math.sin(cRot + Math.PI / 2) * rY;
+        vertices.push({
+          x: Math.floor(pX + 0.5),
+          y: Math.floor(pY + 0.5)
+        });
+        vertices.push(vertices[0]);
+        vertices.push(vertices[2]);
+        return vertices;
+      };
+      var prepareSnap = function prepareSnap(layer) {
+        allLines = GeometryUtils.getAllLines(layer);
+        allLineRects = GeometryUtils.buildRectFromLines(layer, allLines);
+        allItemRect = GeometryUtils.getAllItems(_this2.props.state.scene, actions.catalog, allLineRects);
+        allItemSnap = GeometryUtils.getAllItemSnap(allItemRect);
+        allLineSnap = GeometryUtils.getAllLineSnap(allLineRects, allItemRect.cur);
+        allRect = allItemRect.others.concat(allLineRects);
+        allItemSnap = GeometryUtils.validateSnaps(allItemSnap, allRect);
+        allLineSnap = GeometryUtils.validateSnaps(allLineSnap, allRect);
+        allArea = GeometryUtils.getAllArea(layer);
+      };
+      var prepareSnapSpec = function prepareSnapSpec(layer) {
+        allLines = GeometryUtils.getAllLines(layer);
+        allLineRects = GeometryUtils.buildRectFromLines(layer, allLines);
+        allItemRect = GeometryUtils.getAllItemSpecified(_this2.props.state.scene, actions.catalog, WALL_CABINET_LAYOUTPOS);
+        // allItemSnap = GeometryUtils.getAllItemSnap(allItemRect);
+      };
+
+      // prepareSnapSpec(layer);
+      var lineRect = function lineRect(layer) {
+        var areainfo = [];
+        layer.areas.forEach(function (area) {
+          var sz = area.vertices.size;
+          for (var i = 0; i < sz; i++) {
+            areainfo.push(area.vertices.get(i));
+          }
+        });
+        var rect = [];
+        areainfo.forEach(function (area) {
+          var vert = layer.vertices.get(area);
+          rect.push(vert.x, vert.y);
+        });
+        return rect;
+      };
+      this.collisionCheck = function (obj, pos, rot, tObj) {
+        var _this3 = this;
+        var item = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
+        var catalog = arguments.length > 5 ? arguments[5] : undefined;
+        //collision check from one object to every other object excpet target object
+        var layer = this.props.state.scene.getIn(['layers', obj.userData.layerId]);
+        var layoutpos = 'utype';
+        if (item !== null) {
+          var catid = item.type;
+          var cat = catalog.elements[catid];
+          layoutpos = item === null || item === void 0 ? void 0 : item.layoutpos;
+        }
+        var oPos = new Three.Vector2(pos.clone().x, pos.clone().y);
+        var sBounding = obj.children[0].userData;
+        var width = sBounding.max.x - sBounding.min.x;
+        var depth = sBounding.max.z - sBounding.min.z;
+        var oVertices = this.getRectPoints(width, depth, oPos.clone(), rot % 360 / 180 * Math.PI);
+        var datas = [];
+        layer.items.forEach(function (data) {
+          datas.push(data);
+        });
+        for (var _i2 = 0; _i2 < datas.length; _i2++) {
+          var data = datas[_i2];
+          if (data.id == obj.userData.itemId || data.id == tObj.userData.itemId) continue;
+          var target = planData.sceneGraph.layers[obj.userData.layerId].items[data.id];
+          if (target === undefined) {
+            console.log(data.id + ' does not exist in viewer3d/viewer3d.js collisionCheck function');
+            return false;
+          }
+          var _item = layer.items.getIn([data.id]);
+          var olayoutpos = _item.layoutpos;
+          if (!(layoutpos === BASE_CABINET_LAYOUTPOS && olayoutpos === WALL_CABINET_LAYOUTPOS || layoutpos === WALL_CABINET_LAYOUTPOS && olayoutpos === BASE_CABINET_LAYOUTPOS)) {
+            var tRot = _item.rotation;
+            var tPos = new Three.Vector2(_item.x, _item.y);
+            var tBounding = target.children[0].userData;
+            var twidth = tBounding.max.x - tBounding.min.x;
+            var tdepth = tBounding.max.z - tBounding.min.z;
+            var tVertices = this.getRectPoints(twidth, tdepth, tPos.clone(), tRot % 360 / 180 * Math.PI);
+            if (getInterSect(oVertices, tVertices)) {
+              return false;
+            }
+          }
+        }
+        datas = [];
+        layer.lines.forEach(function (data) {
+          datas.push(data);
+        });
+        var _loop2 = function _loop2() {
+            var data = datas[_i3];
+            if (data.id == obj.userData.itemId || data.id == tObj.userData.itemId) return 0; // continue
+            var item = layer.lines.getIn([data.id]);
+            // let llayoutpos = catalog.elements[item.type].info.layoutpos;
+            var vertices = [];
+            item.vertices.forEach(function (data) {
+              var vertex = layer.vertices.get(data);
+              vertices.push({
+                x: vertex.x,
+                y: vertex.y
+              });
+            });
+            var vec = new Three.Vector2(vertices[1].x - vertices[0].x, vertices[1].y - vertices[0].y);
+            var tRot = vec.angle();
+            var tPos = new Three.Vector2((vertices[0].x + vertices[1].x) / 2, (vertices[0].y + vertices[1].y) / 2);
+            var tdepth = item.properties.getIn(['thickness', 'length']);
+            var twidth = Math.sqrt(vec.x * vec.x + vec.y * vec.y);
+            var tVertices = _this3.getRectPoints(twidth, tdepth, tPos.clone(), tRot);
+            if (getInterSect(oVertices, tVertices)) {
+              return {
+                v: false
+              };
+            }
+          },
+          _ret;
+        for (var _i3 = 0; _i3 < datas.length; _i3++) {
+          _ret = _loop2();
+          if (_ret === 0) continue;
+          if (_ret) return _ret.v;
+        }
+        return true;
+      };
+      this.collisionHoleCheck = function (obj, pos, rot, tObj) {
+        var item = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
+        var catalog = arguments.length > 5 ? arguments[5] : undefined;
+        var layer = this.props.state.scene.getIn(['layers', obj.userData.layerId]);
+        var currentItem;
+        if (item !== null) {
+          var catid = item.type;
+          var cat = catalog.elements[catid];
+          currentItem = {
+            selectedItem: item,
+            cat: cat
+          };
+        }
+        var oPos = new Three.Vector2(pos.clone().x, pos.clone().y);
+        var sBounding = obj.children[0].userData;
+        var width = sBounding.max.x - sBounding.min.x;
+        var depth = sBounding.max.z - sBounding.min.z;
+        var oVertices = this.getRectPoints(width, depth, oPos.clone(), rot % 360 / 180 * Math.PI);
+        var datas = [];
+        layer.items.forEach(function (data) {
+          datas.push(data);
+        });
+        for (var _i4 = 0; _i4 < datas.length; _i4++) {
+          var data = datas[_i4];
+          if (data.id == obj.userData.itemId || data.id == tObj.userData.itemId) continue;
+          var target = planData.sceneGraph.layers[obj.userData.layerId].items[data.id];
+          if (target === undefined) {
+            console.log(data.id + ' does not exist in viewer3d/viewer3d.js collisionCheck function');
+            return false;
+          }
+          var _item2 = layer.items.getIn([data.id]);
+          var ocatid = _item2.type;
+          var ocat = catalog.elements[ocatid];
+          if (!ocat) ocat = catalog.elements[returnReplaceableDeepSearchType(ocatid)];
+          var otherItem = {
+            item: _item2,
+            cat: ocat
+          };
+          if (GeometryUtils.needSnap(currentItem, otherItem) && otherItem.cat.type != 'cabinet') {
+            var tRot = _item2.rotation;
+            var tPos = new Three.Vector2(_item2.x, _item2.y);
+            var tBounding = target.children[0].userData;
+            var twidth = tBounding.max.x - tBounding.min.x;
+            var tdepth = tBounding.max.z - tBounding.min.z;
+            var tVertices = this.getRectPoints(twidth, tdepth, tPos.clone(), tRot % 360 / 180 * Math.PI);
+            if (getInterSect(oVertices, tVertices)) {
+              return false;
+            }
+          }
+        }
+        var holes = [];
+        layer.lines.forEach(function (line) {
+          line.holes.forEach(function (holeID) {
+            var hole = layer.holes.get(holeID);
+            if (hole) holes.push(hole);
+          });
+        });
+        var i = 0;
+        for (; i < holes.length; i++) {
+          var _tPos = new Three.Vector2(holes[i].x, holes[i].y);
+          var _twidth = holes[i].properties.getIn(['width', 'length']);
+          var theight = holes[i].properties.getIn(['thickness', 'length']);
+          var trot = holes[i].rotation;
+          var _tVertices = this.getRectPoints(_twidth, theight, _tPos.clone(), trot);
+          if (getInterSect(oVertices, _tVertices)) {
+            return false;
+          }
+        }
+        return true;
+      };
+      this.collisionSlide = function (item3D, originPos, layer, sVertices, tPos, item) {
+        var items = [];
+        var cur_category = '';
+        var catalog = actions.catalog;
+        if (layer.selected.items.size > 0) {
+          var selectedItem = layer.getIn(['items', layer.selected.items.get(0)]);
+          var catid = selectedItem.type;
+          var cat = catalog.elements[catid];
+          if (cat === undefined || cat === null) cat = catalog.getIn(['elements', catid]);
+          cur_category = cat.obj.category;
+        }
+        layer.items.forEach(function (data) {
+          if (data.id == selectedObject.itemID) {
+            return;
+          }
+          items.push(data.toJS());
+        });
+        var oPos = new Three.Vector2(originPos.x, -originPos.z);
+
+        // sort from distance
+        for (var _i5 = 0; _i5 < items.length - 1; _i5++) {
+          for (var j = _i5 + 1; j < items.length; j++) {
+            if (verticesDistance(oPos, new Three.Vector2(items[_i5].x, items[_i5].y)) > verticesDistance(oPos, new Three.Vector2(items[j].x, items[j].y))) {
+              var exchange = items[j];
+              items[j] = items[_i5];
+              items[_i5] = exchange;
+            }
+          }
+        }
+        var i = 0;
+        for (; i < items.length; i++) {
+          if (!items[i]) return;
+          var _target = planData.sceneGraph.layers[selectedObject.layerID].items[items[i].id];
+          if (_target === undefined) {
+            return false;
+          }
+          var _targetData = layer.items.getIn([items[i].id]);
+          var _tRot = _targetData.rotation;
+          var _tPos2 = new Three.Vector2(_targetData.x, _targetData.y);
+          var _tBounding = _target.children[0].userData;
+          var _twidth2 = _tBounding.max.x - _tBounding.min.x;
+          var _tdepth = _tBounding.max.z - _tBounding.min.z;
+          var _tVertices2 = this.getRectPoints(_twidth2, _tdepth, _tPos2.clone(), _tRot % 360 / 180 * Math.PI);
+          if (getInterSect(sVertices, _tVertices2)) {
+            break;
+          }
+        }
+        if (items.length == 0 || !items[i]) return;
+        var target = planData.sceneGraph.layers[selectedObject.layerID].items[items[i].id];
+        var targetData = layer.items.getIn([items[i].id]);
+        var targetPos = new Three.Vector2(targetData.x, targetData.y);
+        var tRot = targetData.rotation;
+        var tBounding = target.children[0].userData;
+        var twidth = tBounding.max.x - tBounding.min.x;
+        var tdepth = tBounding.max.z - tBounding.min.z;
+        var tVertices = this.getRectPoints(twidth, tdepth, targetPos.clone(), tRot % 360 / 180 * Math.PI);
+        // ////////////////////////
+        var vArray = [];
+        var dteArray = [];
+        var lineArray = [];
+        var vdistanceArray = [];
+        var cVecArray = [];
+        var inFlag = false;
+        for (var _i6 = 0; _i6 < 4; _i6++) {
+          var v1 = tVertices[_i6];
+          var v2 = tVertices[_i6 + 1];
+          var data = pointLineDistance({
+            x: tPos.x,
+            y: tPos.y
+          }, [{
+            x: v1.x,
+            y: v1.y
+          }, {
+            x: v2.x,
+            y: v2.y
+          }]);
+          dteArray.push(data.distance);
+          vArray.push(data.point);
+          lineArray.push([v1, v2]);
+        }
+        // if tPos in target object
+        var tPosDistance = Math.abs(pointLineDistance(tPos, lineArray[0]).distance) + Math.abs(pointLineDistance(tPos, lineArray[2]).distance);
+        var realDistance = new Three.Vector2(lineArray[1][0].x - lineArray[1][1].x, lineArray[1][0].y - lineArray[1][1].y).length();
+        var tPosDistance1 = Math.abs(pointLineDistance(tPos, lineArray[1]).distance) + Math.abs(pointLineDistance(tPos, lineArray[3]).distance);
+        var realDistance1 = new Three.Vector2(lineArray[0][0].x - lineArray[0][1].x, lineArray[0][0].y - lineArray[0][1].y).length();
+        if (Math.abs(Math.abs(tPosDistance) - Math.abs(realDistance)) < 0.01 && Math.abs(Math.abs(tPosDistance1) - Math.abs(realDistance1)) < 0.01) inFlag = true;
+        // ////////////////////
+        var key = 0;
+        // sort distance from origin point
+        for (var _j = 0; _j < dteArray.length - 1; _j++) {
+          for (var k = _j + 1; k < dteArray.length; k++) {
+            if (Math.abs(dteArray[_j]) > Math.abs(dteArray[k])) {
+              var temp = dteArray[k];
+              dteArray[_j] = dteArray[k];
+              dteArray[k] = temp;
+              var temp1 = vArray[k];
+              vArray[_j] = vArray[k];
+              vArray[k] = temp1;
+              var temp2 = lineArray[k];
+              lineArray[_j] = lineArray[k];
+              lineArray[k] = temp2;
+            }
+          }
+        }
+        // //////////////////////////////
+        for (var _i7 = 0; _i7 < 4; _i7++) {
+          var _data = pointLineDistance(sVertices[_i7], lineArray[key]);
+          vdistanceArray.push(_data.distance);
+          cVecArray.push({
+            x: _data.point.x - sVertices[_i7].x,
+            y: _data.point.y - sVertices[_i7].y
+          });
+        }
+        for (var _j2 = 0; _j2 < vdistanceArray.length; _j2++) {
+          var tX = tPos.x + cVecArray[_j2].x;
+          var tY = tPos.y + cVecArray[_j2].y;
+          if (this.collisionCheck(item3D, new Three.Vector2(tX, tY), item.rotation, {
+            userData: {
+              itemId: null
+            }
+          }, item, this.context.catalog)) {
+            item3D.position.set(tX, originPos.y, -tY);
+            sPoint.set(tX, tY);
+            break;
+          }
+        }
+      };
+      this.snap = function (obj, layer) {
+        // snap operation
+        var target = obj.userData.target;
+        if (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 = 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();
+          var width = sBounding.max.x - sBounding.min.x;
+          var height = sBounding.max.y - sBounding.min.y;
+          var depth = sBounding.max.z - sBounding.min.z;
+          var snapBoxGeom = new Three.BoxGeometry(width, height, depth);
+          var snapBoxObj = new Three.Mesh(snapBoxGeom, new Three.MeshBasicMaterial({
+            // color: 0x2cde6b,
+            // opacity: 0.7,
+            transparent: true,
+            blending: Three.MultiplyBlending
+          }));
+          var removeSnapBoxObj = function removeSnapBoxObj() {
+            if (snapBoxObj) {
+              planData.plan.remove(snapBoxObj);
+              disposeObject(snapBoxObj);
+            }
+            snapFlag = false;
+          };
+          var box = new Three.BoxHelper(snapBoxObj, 0xffffff);
+          box.material.linewidth = 2;
+          box.material.depthTest = false;
+          box.renderOrder = 200;
+          snapBoxObj.add(box);
+          snapBoxObj.position.set(source.position.x, layoutType === WALL_CABINET_LAYOUTPOS ? altitudeLength + source.position.y + height / 2 : source.position.y + height / 2, source.position.z);
+          snapBoxObj.rotation.set(source.rotation.x, source.rotation.y, source.rotation.z);
+          snapBoxObj.name = 'TransformBox';
+          planData.plan.add(snapBoxObj);
+          var deltaX = (tBounding.max.x - tBounding.min.x) / 2 + (sBounding.max.x - sBounding.min.x) / 2;
+          var deltaZ = (tBounding.max.z - tBounding.min.z) / 2 - (sBounding.max.z - sBounding.min.z) / 2;
+          var sPos = snapBoxObj.position.clone();
+          // avaliable snap place///////////////
+          var tPoses = [];
+          var pX = tPos.x + deltaX * Math.cos(tRot / 180 * Math.PI) + deltaZ * Math.sin(tRot / 180 * Math.PI);
+          var pZ = tPos.z - deltaX * Math.sin(tRot / 180 * Math.PI) + deltaZ * Math.cos(tRot / 180 * Math.PI);
+          tPoses.push(new Three.Vector3(pX, 0, pZ));
+          deltaX = -deltaX;
+          pX = tPos.x + deltaX * Math.cos(tRot / 180 * Math.PI) + deltaZ * Math.sin(tRot / 180 * Math.PI);
+          pZ = tPos.z - deltaX * Math.sin(tRot / 180 * Math.PI) + deltaZ * Math.cos(tRot / 180 * Math.PI);
+          tPoses.push(new Three.Vector3(pX, 0, pZ));
+          deltaX = (tBounding.max.x - tBounding.min.x) / 2 - (sBounding.max.x - sBounding.min.x) / 2;
+          deltaZ = -(tBounding.max.z - tBounding.min.z) / 2 - (sBounding.max.z - sBounding.min.z) / 2;
+          pX = tPos.x + deltaX * Math.cos(tRot / 180 * Math.PI) + deltaZ * Math.sin(tRot / 180 * Math.PI);
+          pZ = tPos.z - deltaX * Math.sin(tRot / 180 * Math.PI) + deltaZ * Math.cos(tRot / 180 * Math.PI);
+          tPoses.push(new Three.Vector3(pX, 0, pZ));
+          deltaX = -deltaX;
+          pX = tPos.x + deltaX * Math.cos(tRot / 180 * Math.PI) + deltaZ * Math.sin(tRot / 180 * Math.PI);
+          pZ = tPos.z - deltaX * Math.sin(tRot / 180 * Math.PI) + deltaZ * Math.cos(tRot / 180 * Math.PI);
+          tPoses.push(new Three.Vector3(pX, 0, pZ));
+          var distance = Math.sqrt((sPos.x - tPoses[0].x) * (sPos.x - tPoses[0].x) + (sPos.z - tPoses[0].z) * (sPos.z - tPoses[0].z));
+          var tNum = 1;
+          tPos = tPoses[0].clone();
+          for (var _i8 = 1; _i8 < tPoses.length; _i8++) {
+            var curDis = Math.sqrt((sPos.x - tPoses[_i8].x) * (sPos.x - tPoses[_i8].x) + (sPos.z - tPoses[_i8].z) * (sPos.z - tPoses[_i8].z));
+            if (curDis < distance) {
+              distance = curDis;
+              tNum = _i8 + 1;
+              tPos = tPoses[_i8].clone();
+            }
+          }
+          // //////////////////////////////////
+          if (targetObj != null && targetObj.userData.itemId == target.userData.itemId && tNum == targetNumber) {
+            removeSnapBoxObj();
+            return;
+          } else {
+            removeSnapBox();
+          }
+          // //////////////////////////////////
+          if (tNum >= 3) tRot += 180;
+          snapAnimI = 0;
+          t_i = 0;
+          targetObj = target;
+          targetNumber = tNum;
+          targetRot = tRot;
+          targetPoint = tPos;
+          snapBox = snapBoxObj;
+          var cx = sPos.x - tPos.x;
+          var cz = sPos.z - tPos.z;
+          targetUVec = new Three.Vector3(cx, 0, cz);
+          targetCRotation = (tRot - sRot) % 360 / 180 * Math.PI;
+        } else {
+          var _item3 = layer.getIn(['items', source.userData.itemId]);
+          if (holeItems.length && selectedObj) {
+            var _i9;
+            for (_i9 = 0; _i9 < holeItems.length; _i9++) {
+              var hole = holeItems[_i9];
+              if (Math.abs(Math.sin(selectedObj.rotRad)) === 1) {
+                if (_item3.y + selectedObj.size.width / 2 >= hole.y - hole.width / 2 && _item3.y - selectedObj.size.width / 2 <= hole.y + hole.width / 2 && (selectedObj.rotRad == 0 || selectedObj.rotRad == -Math.PI / 2 ? _item3.x <= hole.x && _item3.x + selectedObj.size.height >= hole.x : _item3.x >= hole.x && _item3.x - selectedObj.size.height <= hole.x)) break;
+              } else {
+                if (_item3.x + selectedObj.size.width / 2 >= hole.x - hole.width / 2 && _item3.x - selectedObj.size.width / 2 <= hole.x + hole.width / 2 && (selectedObj.rotRad == 0 || selectedObj.rotRad == -Math.PI / 2 ? _item3.y <= hole.y && _item3.y + selectedObj.size.height >= hole.y : _item3.y >= hole.y && _item3.y - selectedObj.size.height <= hole.y)) break;
+              }
+            }
+            if (_i9 != holeItems.length) return;
+          }
+          if (target.userData.type == 'hole') {
+            snapFlag = false;
+            return;
+          } else {
+            var _item3$properties$get;
+            var _layoutType = _item3.layoutpos;
+            var _altitudeLength = 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;
+            var _depth = _sBounding.max.z - _sBounding.min.z;
+            var _snapBoxGeom = new Three.BoxGeometry(_width, _height, _depth);
+            var _snapBoxObj = new Three.Mesh(_snapBoxGeom, new Three.MeshBasicMaterial({
+              // color: 0x2cde6b,
+              // opacity: 0.7,
+              transparent: true,
+              blending: Three.MultiplyBlending
+            }));
+            var _removeSnapBoxObj = function _removeSnapBoxObj() {
+              if (_snapBoxObj) {
+                planData.plan.remove(_snapBoxObj);
+                disposeObject(_snapBoxObj);
+              }
+              snapFlag = false;
+            };
+            var _box = new Three.BoxHelper(_snapBoxObj, 0xffffff);
+            _box.material.linewidth = 2;
+            _box.material.depthTest = false;
+            _box.renderOrder = 100;
+            _snapBoxObj.add(_box);
+            _snapBoxObj.position.set(source.position.x, _layoutType === WALL_CABINET_LAYOUTPOS ? _altitudeLength + source.position.y + _height / 2 : source.position.y + _height / 2, source.position.z);
+            _snapBoxObj.rotation.set(source.rotation.x, source.rotation.y, source.rotation.z);
+            _snapBoxObj.name = 'TransformBox';
+            planData.plan.add(_snapBoxObj);
+            var snapLine = layer.getIn(['lines', target.userData.lineId]);
+            // let snapLineThickness = snapLine.properties.getIn([
+            //   'thickness',
+            //   'length'
+            // ]);
+            var snapLineThickness = 10.64;
+            var vertices = [];
+            if (snapLine === undefined) return;
+            snapLine.vertices.forEach(function (data) {
+              var vec = layer.getIn(['vertices', data]);
+              vertices.push(vec);
+            });
+            var iX = source.position.clone().x;
+            var iY = -source.position.clone().z;
+            var lineVec = new Three.Vector2(vertices[1].x - vertices[0].x, vertices[1].y - vertices[0].y);
+            var oLength = Math.sqrt(lineVec.x * lineVec.x + lineVec.y * lineVec.y);
+            lineVec.normalize();
+            var vec2 = new Three.Vector2(iX - vertices[0].x, iY - vertices[0].y);
+            var vec2Legnth = Math.sqrt(vec2.x * vec2.x + vec2.y * vec2.y);
+            var angle = Math.abs(lineVec.angle() - vec2.angle());
+            angle = angle > Math.PI ? 2 * Math.PI - angle : angle;
+            var lineLength = Math.cos(angle) * vec2Legnth;
+            var transLength = 0;
+            if (lineLength < 100) {
+              transLength = -lineLength + (snapLineThickness + _width) / 2;
+            }
+            if (lineLength > oLength - 100) {
+              transLength = -lineLength - (snapLineThickness + _width) / 2 + oLength;
+            }
+            var directPoint = new Three.Vector2(lineVec.x * lineLength + vertices[0].x, lineVec.y * lineLength + vertices[0].y);
+            var directLine = new Three.Vector2(directPoint.x - iX, directPoint.y - iY);
+            var dLength = Math.sqrt((iX - directPoint.x) * (iX - directPoint.x) + (iY - directPoint.y) * (iY - directPoint.y));
+            var reduceLen = (snapLineThickness + _depth) / 2;
+            var scale = (dLength - reduceLen) / dLength;
+            var _tPos3 = new Three.Vector2(iX + (directPoint.x - iX) * scale + lineVec.x * transLength, iY + (directPoint.y - iY) * scale + lineVec.y * transLength);
+            var realAngle = directLine.angle() - Math.PI / 2;
+            var _tRot2 = realAngle * 180 / Math.PI;
+            var _sPos = new Three.Vector2(iX, iY);
+            var _sRot = _item3.rotation;
+            var _tNum = 0;
+            // //////////////////////////////////////
+            // check part////
+            var result = this.collisionCheck(source, _tPos3, _tRot2, target, _item3, this.context.catalog);
+            // console.log('result', result);
+            if (result == false) {
+              _removeSnapBoxObj();
+              removeSnapBox();
+              return;
+            }
+            // ////////////////
+            if (targetObj === target && snapBox !== null) {
+              _removeSnapBoxObj();
+              snapAnimI = 20;
+              targetPoint = new Three.Vector3(_tPos3.x, 0, -_tPos3.y);
+              var _sourcePos = snapBox.position.clone();
+              var _cx = _sourcePos.x - targetPoint.x;
+              var _cz = _sourcePos.z - targetPoint.z;
+              targetUVec = new Three.Vector3(_cx, 0, _cz);
+              targetRot = _tRot2;
+              targetCRotation = (_tRot2 - _sRot) % 360 / 180 * Math.PI;
+              snapFlag = false;
+              return;
+            } else {
+              removeSnapBox();
+            }
+            // //////////////////////////////////////
+            snapAnimI = 0;
+            t_i = 0;
+            targetObj = target;
+            targetNumber = _tNum;
+            targetRot = _tRot2;
+            targetPoint = new Three.Vector3(_tPos3.x, 0, -_tPos3.y);
+            snapBox = _snapBoxObj;
+            var sourcePos = snapBox.position.clone();
+            var _cx2 = sourcePos.x - targetPoint.x;
+            var _cz2 = sourcePos.z - targetPoint.z;
+            targetUVec = new Three.Vector3(_cx2, 0, _cz2);
+            targetRot = _tRot2;
+            targetCRotation = (_tRot2 - _sRot) % 360 / 180 * Math.PI;
+          }
+        }
+      };
+
+      /*end of snap functions*/
+      var selectedObj = null;
+      var firstMove = false;
+      var prevX, prevY;
+      var selObj = null;
+      var TOOL_CANVAS_WIDTH = 100;
+      var TOOL_CANVAS_TWO_BUTTON_HEIGHT = 200;
+      var TOOL_CANVAS_THREE_BUTTON_HEIGHT = 300;
+      var TOOL_BUTTON_RADIUS = 40;
+      var TOOL_BUTTONS_SPACING = 20;
+      var TOOL_HIT_RADIUS = 20;
+      var getItemMirrored = function getItemMirrored(item) {
+        return (item === null || item === void 0 ? void 0 : item.mirrored) === true;
+      };
+      var canMirrorItem = function canMirrorItem(item) {
+        return canMirrorCabinet(item);
+      };
+      var toolTexture = null;
+      var createToolObject = function createToolObject() {
+        var mirrorActive = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+        var canMirror = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+        var buttons = [{
+          src: '/assets/img/svg/3d_item_rotation.svg',
+          y: 50
+        }, {
+          src: '/assets/img/svg/3d_item_move.svg',
+          y: 150
+        }, canMirror && {
+          src: '/assets/img/svg/invert.svg',
+          y: 250,
+          flip: !mirrorActive
+        }].filter(Boolean);
+        var canvas = document.createElement('canvas');
+        canvas.width = TOOL_CANVAS_WIDTH;
+        canvas.height = canMirror ? TOOL_CANVAS_THREE_BUTTON_HEIGHT : TOOL_CANVAS_TWO_BUTTON_HEIGHT;
+        canvas.style.width = '50px';
+        canvas.style.height = canMirror ? '150px' : '100px';
+        var ctx = canvas.getContext('2d');
+        var drawShadowCircle = function drawShadowCircle(x, y, radius) {
+          ctx.save();
+          ctx.shadowColor = 'rgba(0, 0, 0, 0.16)';
+          ctx.shadowBlur = 2.4;
+          ctx.shadowOffsetX = 0;
+          ctx.shadowOffsetY = -1;
+          ctx.fillStyle = '#FFFFFF';
+          ctx.beginPath();
+          ctx.arc(x, y, radius, 0, 2 * Math.PI);
+          ctx.fill();
+          ctx.restore();
+        };
+        var drawIcon = function drawIcon(_ref) {
+          var src = _ref.src,
+            y = _ref.y,
+            flip = _ref.flip;
+          drawShadowCircle(50, y, TOOL_BUTTON_RADIUS);
+          var img = new Image();
+          img.crossOrigin = 'anonymous';
+          img.src = src;
+          img.onload = function () {
+            ctx.save();
+            if (flip) {
+              ctx.translate(100, 0);
+              ctx.scale(-1, 1);
+            }
+            ctx.imageSmoothingEnabled = true;
+            ctx.imageSmoothingQuality = 'high';
+            ctx.drawImage(img, 25, y - 25, 50, 50);
+            ctx.restore();
+            if (toolTexture) toolTexture.needsUpdate = true;
+          };
+        };
+        buttons.forEach(drawIcon);
+        return canvas;
+      };
+      var clockWise = true;
+      var lastAngle = 0;
+      var createAngleObject = function createAngleObject(rotate) {
+        var canvas = document.createElement('canvas');
+        canvas.width = 100;
+        canvas.height = 100;
+        canvas.style.width = 100 + 'px';
+        canvas.style.height = 100 + 'px';
+        var ctx = canvas.getContext('2d');
+        ctx.strokeStyle = '#FFFFFF';
+        ctx.lineWidth = 10;
+        ctx.beginPath();
+        ctx.arc(50, 50, 45, 0, 2 * Math.PI);
+        ctx.stroke();
+        ctx.strokeStyle = SECONDARY_PURPLE_COLOR;
+        ctx.lineWidth = 6;
+        ctx.beginPath();
+        if (lastAngle < 15 && lastAngle > -15) {
+          if (rotate >= 0) {
+            clockWise = false;
+          } else {
+            clockWise = true;
+          }
+          if (lastAngle === 0) {
+            if (rotate > -180) {
+              clockWise = true;
+            } else {
+              clockWise = false;
+            }
+          }
+        }
+        ctx.arc(50, 50, 45, 0, rotate / 180.0 * Math.PI, clockWise);
+        ctx.stroke();
+        lastAngle = rotate;
+        return canvas;
+      };
+      toolTexture = new Three.Texture(createToolObject(false, false));
+      toolTexture.needsUpdate = true;
+      var toolObj = new Three.Sprite(new Three.SpriteMaterial({
+        map: toolTexture,
+        sizeAttenuation: true
+      }));
+      toolObj.material.transparent = true;
+      toolObj.material.depthTest = false;
+      toolObj.scale.set(20, 40, 20);
+      toolObj.renderOrder = 3;
+      toolObj.name = 'toolObj';
+      toolObj.userData.canMirror = false;
+      var refreshToolObject = function refreshToolObject(item) {
+        var showMirror = canMirrorItem(item);
+        toolTexture.image = createToolObject(getItemMirrored(item), showMirror);
+        toolTexture.needsUpdate = true;
+        toolObj.scale.set(20, showMirror ? 60 : 40, 20);
+        toolObj.userData.canMirror = showMirror;
+      };
+      this.refreshToolObject = refreshToolObject;
+      var angleTexture = new Three.Texture(createAngleObject(0));
+      angleTexture.needsUpdate = true;
+      var angleObj = new Three.Sprite(new Three.SpriteMaterial({
+        map: angleTexture,
+        sizeAttenuation: false
+      }));
+      angleObj.scale.set(0.075, 0.075, 0.075);
+      angleObj.material.transparent = true;
+      angleObj.material.depthTest = false;
+      angleObj.renderOrder = 3;
+      angleObj.name = 'angleObj';
+
+      /**
+       * Calculate plane point of mouse with `event` & `altitude`
+       * * Calculate mouse.x & mouse.y
+       * * Set raycaster from camera & Set raycaster direction
+       * * Calculate Point & dispatch an action
+       */
+      var getPoint = function getPoint(e, alti) {
+        mouse.x = e.offsetX / _this2.width * 2 - 1;
+        mouse.y = -e.offsetY / _this2.height * 2 + 1;
+        raycaster.setFromCamera(mouse, camera);
+        rayDirection = raycaster.ray.direction;
+        Point = mapCursorPosition(e, alti);
+        _this2.context.projectActions.updateMouseCoord(Point);
+      };
+      var getIntersectWallPoint = function getIntersectWallPoint(e) {
+        mouse.x = e.offsetX / _this2.width * 2 - 1;
+        mouse.y = -e.offsetY / _this2.height * 2 + 1;
+        raycaster.setFromCamera(mouse, camera);
+        rayDirection = raycaster.ray.direction;
+        var lines = planData.sceneGraph.layers[scene.selectedLayer].lines;
+        var keys = Object.keys(lines);
+        var arrMesh = [];
+        keys.forEach(function (key) {
+          lines[key].children[0].children.forEach(function (mesh) {
+            if (mesh.name == 'soul' && mesh.visible) arrMesh.push(mesh);
+          });
+        });
+        if (arrMesh.length > 0) {
+          var intersects = raycaster.intersectObjects(arrMesh);
+          if (intersects.length > 0) {
+            var intersectPt = intersects[0].point;
+            intersectPt.applyMatrix4(gridMatrix);
+            Point = {
+              x: intersectPt.x,
+              y: -intersectPt.z
+            };
+            _this2.context.projectActions.updateMouseCoord(Point);
+            return true;
+          }
+        }
+        return false;
+      };
+      var updateSelectedObject = function updateSelectedObject() {
+        // update the selected object
+        var selectedLayerId = _this2.props.state.scene.selectedLayer;
+        var selItemId = _this2.props.state.scene.getIn(['layers', selectedLayerId, 'selected', 'items']).toJS()[0];
+        selectedObject = {
+          layerID: selectedLayerId,
+          itemID: selItemId
+        };
+      };
+      var sendInternalEvent = function sendInternalEvent(evtType, evtElement) {
+        var pointArray = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+        var curLayerId = _this2.props.state.scene.selectedLayer;
+        var curLayer = _this2.props.state.scene.getIn(['layers', curLayerId]);
+        if (!isEmpty(evtType) && !isEmpty(evtElement)) {
+          var _this2$props$onIntern, _this2$props;
+          var payload = updatePayloadOfInternalEvent(evtElement, curLayer, 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) {
+        var _selectedObject;
+        _this2._mouseDownStartedInCanvas = true;
+        window.addEventListener('mouseup', _this2._resetMouseDownStartedInCanvas, {
+          once: true
+        });
+        gridPlanOrigin = gridPlane.position;
+        gridMatrix.copy(gridPlane.matrixWorld).invert();
+        var altitude = 0;
+        if (allItemRect && allItemRect.cur && allItemRect.cur.itemInfo !== undefined) {
+          var properties = allItemRect.cur.itemInfo.properties;
+          altitude = properties.getIn(['altitude', '_length']);
+          var unit = properties.getIn(['altitude', '_unit']) || 'in';
+          altitude = convert(altitude).from(unit).to(_this2.props.state.scene.unit);
+        }
+        getPoint(event, altitude);
+        var state = _this2.props.state;
+        _this2.lastMousePosition.x = mouse.x;
+        _this2.lastMousePosition.y = mouse.y;
+        var layer = state.scene.getIn(['layers', state.scene.selectedLayer]);
+        var sCount = layer.selected.areas.size + layer.selected.holes.size + layer.selected.items.size + layer.selected.lines.size;
+        if (sCount <= 0) {
+          isSelected = false;
+        } else if (sCount >= 0 && selectedObject && 'holeID' in selectedObject) {
+          isSelected = true;
+        }
+        prevX = Point.x;
+        prevY = Point.y;
+
+        /**
+         * 0 - rotate
+         * 1 - move up/down
+         * 2 - move x/y
+         * 3 - camera rotate
+         * 4 - mirror
+         */
+        var transflag = 3;
+        raycaster.setFromCamera(mouse, camera);
+        var meshes = [];
+        toIntersect.forEach(function (object) {
+          if (!object) return;
+          object.traverse(function (o) {
+            if (o.isMesh) meshes.push(o);
+          });
+        });
+        var intersects = raycaster.intersectObjects(meshes, true);
+        var toolIntersects = raycaster.intersectObjects([toolObj], true);
+
+        // This code is excuted when click the tool object(rotation, move or mirror icon).
+        if (toolIntersects.length > 0) {
+          updateSelectedObject();
+          var toolHeight = toolObj.userData.canMirror ? TOOL_CANVAS_THREE_BUTTON_HEIGHT : TOOL_CANVAS_TWO_BUTTON_HEIGHT;
+          var yScale = toolHeight / 2;
+          var distanceFromToolButton = function distanceFromToolButton(centerY) {
+            return Math.sqrt(Math.pow((toolIntersects[0].uv.x - 0.5) * 50, 2) + Math.pow((toolIntersects[0].uv.y - centerY) * yScale, 2));
+          };
+          var moveCenter = toolObj.userData.canMirror ? 0.5 : 0.25;
+          var rotateCenter = toolObj.userData.canMirror ? 5 / 6 : 0.75;
+          var mirrorCenter = 1 / 6;
+          if (toolObj.userData.canMirror && distanceFromToolButton(mirrorCenter) <= TOOL_HIT_RADIUS) {
+            transflag = 4;
+          } else if (distanceFromToolButton(moveCenter) <= TOOL_HIT_RADIUS) {
+            transflag = 2;
+          } else if (distanceFromToolButton(rotateCenter) <= TOOL_HIT_RADIUS) {
+            transflag = 0;
+          }
+        }
+        if (intersects.length > 0) {
+          var _i0 = 0,
+            length = intersects.length;
+          for (_i0 = 0; _i0 < length; _i0++) {
+            if (intersects[_i0].object.type !== 'BoxHelper' &&
+            // intersects[i].object.type === OBJTYPE_MESH &&
+            intersects[_i0].object.name !== 'lineText' && intersects[_i0].object.name !== 'soul' && !intersects[_i0].object.name.includes('WarningBox')) break;
+          }
+          if (intersects[_i0] !== undefined) {
+            if (intersects[_i0].object.name.indexOf('transUp') != -1) transflag = 1;
+            if (intersects[_i0].object.name.indexOf('transHole') != -1) transflag = 2;
+          } else {
+            console.log('intersects[i] is undefined in viewer3d/viewer3d.js');
+          }
+        }
+        if (_this2.props.state.mode == MODE_DRAWING_ITEM_3D) return;
+        if (isSelected && transflag == 4 && (_selectedObject = selectedObject) !== null && _selectedObject !== void 0 && _selectedObject.itemID) {
+          var _this2$props$state$sc;
+          var selectedItem = (_this2$props$state$sc = _this2.props.state.scene.getIn(['layers', selectedObject.layerID])) === null || _this2$props$state$sc === void 0 ? void 0 : _this2$props$state$sc.items.get(selectedObject.itemID);
+          if (canMirrorItem(selectedItem)) {
+            var mirrored = selectedItem.mirrored !== true;
+            var mirroredItem = selectedItem.set('mirrored', mirrored);
+            refreshToolObject(mirroredItem);
+            _this2.context.itemsActions.toggleItemMirror(selectedObject.layerID, selectedObject.itemID, mirrored, _this2.props.onInternalEvent);
+            cameraControls.mouseButtons.left = CameraControls.ACTION.NONE;
+            bMirror = true;
+          }
+          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++) {
+              if (intersects[_i1].object instanceof Three.Mesh && intersects[_i1].object.name != 'TransformBox' && intersects[_i1].object.type != 'Line' && intersects[_i1].object.name != 'lineText' && intersects[_i1].object.name != 'countertops' && intersects[_i1].object.type != 'BoxHelper' && intersects[_i1].object.name != 'floor' && intersects[_i1].object.name != 'backFace' && intersects[_i1].object.name != 'soul' && !intersects[_i1].object.name.includes('backsplash') && !intersects[_i1].object.name.includes('WarningBox')) break;
+            }
+            if (intersects[_i1] === undefined) {
+              if (transflag !== 0 && transflag !== 2) {
+                isSelected = false;
+                _this2.context.projectActions.unselectAll();
+                scene3D.remove(toolObj);
+                _this2.context.itemsActions.removeReplacingSupport();
+                return;
+              }
+            }
+            if (selectedObject !== undefined) {
+              // 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);
+                var alti = 0;
+                if (allItemRect && allItemRect.cur && allItemRect.cur.itemInfo !== undefined) {
+                  var _properties = allItemRect.cur.itemInfo.properties;
+                  alti = _properties.getIn(['altitude', '_length']);
+                  var _unit = _properties.getIn(['altitude', '_unit']) || 'in';
+                  alti = convert(alti).from(_unit).to(_this2.props.state.scene.unit);
+                }
+                getPoint({
+                  offsetX: event.offsetX - 50,
+                  offsetY: event.offsetY
+                }, alti);
+                if (isUndefined(_selectedItem)) return;
+                var selItem = _this2.props.state.scene.layers.get(selectedObject.layerID).items.get(selectedObject.itemID);
+                lastAngle = 0;
+                angleObj.position.set(planData.plan.position.x + Point.x, selItem.category === 'lighting' ? -planData.plan.position.y - selItem.properties.get('height').get('length') : selItem.properties.get('altitude').get('length') + planData.plan.position.y, planData.plan.position.z - Point.y);
+                angleTexture.image = createAngleObject(0);
+                angleTexture.needsUpdate = true;
+                scene3D.add(angleObj);
+                _this2.setState({
+                  angleObj: angleObj
+                });
+                var centerPos = Point;
+                getPoint(event, alti);
+                _this2.context.itemsActions.beginRotatingItem3D(selectedObject.layerID, selectedObject.itemID, Point.x, Point.y, centerPos.x, centerPos.y);
+                bRotate = true;
+              } else if (transflag == 1) {
+                bMoveUP = true;
+              } else if (transflag == 2) {
+                switch (true) {
+                  case 'holeID' in selectedObject:
+                    _this2.context.holesActions.beginDraggingHole3D(selectedObject.layerID, selectedObject.holeID, Point.x, Point.y);
+                    break;
+                  default:
+                    _this2.context.itemsActions.beginDraggingItem3D(selectedObject.layerID, selectedObject.itemID, Point.x, Point.y);
+                    break;
+                }
+                bMove = true;
+                scene3D.remove(toolObj);
+              }
+              for (_i1 = 0; _i1 < intersects.length; _i1++) {
+                if (_selectedItem != undefined && intersects[_i1].object.parent && intersects[_i1].object.parent.parent.userData.itemId === _selectedItem.userData.itemId) selectedFlag = true;
+              }
+              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();
+            return;
+          }
+        }
+      };
+      this.mouseUpEvent = function (event) {
+        var _selectedObject2;
+        // Ignore mouseup events that didn't start from a mousedown inside this canvas.
+        // This prevents accidental unselect-all when the user, for example, selects text in a drawer
+        // and releases the mouse over the 3D canvas.
+        if (!_this2._mouseDownStartedInCanvas) return;
+        _this2._mouseDownStartedInCanvas = false;
+        var internalType = ''; // internalEvent type - select/drag/draw
+        var selectedElement; // internalEvent data
+        firstMove = 0;
+        var altitude = 0;
+        var curLayer = _this2.props.state.scene.getIn(['layers', (_selectedObject2 = selectedObject) === null || _selectedObject2 === void 0 ? void 0 : _selectedObject2.layerID]);
+        if (allItemRect && allItemRect.cur && allItemRect.cur.itemInfo !== undefined) {
+          var properties = allItemRect.cur.itemInfo.properties;
+          altitude = properties.getIn(['altitude', '_length']);
+          var unit = properties.getIn(['altitude', '_unit']) || 'in';
+          altitude = convert(altitude).from(unit).to(_this2.props.state.scene.unit);
+        }
+        if (bMirror) {
+          bMirror = false;
+          cameraControls.mouseButtons.left = CameraControls.ACTION.ROTATE;
+          event.preventDefault();
+          return;
+        }
+        scene3D.remove(angleObj);
+        scene3D.remove(toolObj);
+        if (!_this2.props.downloadFlag && !_this2.props.state.mode.includes('ING')) {
+          _this2.props.setToolbar('');
+        }
+        if (_this2.props.state.mode == MODE_DRAWING_ITEM_3D) {
+          if (Point.x > _this2.props.state.scene.width) Point.x = _this2.props.state.width;
+          if (Point.y > _this2.props.state.scene.height) Point.y = _this2.props.state.height;
+          if (Point.x < 0) Point.x = 0;
+          if (Point.y < 0) Point.y = 0;
+          if (snapBox == null) {
+            actions.itemsActions.endDrawingItem(_this2.props.state.scene.selectedLayer, sPoint.x, sPoint.y);
+          } else {
+            removeSnapBox();
+            var polygon = GeometryUtils.getPoylgonPoints(curLayer !== null && curLayer !== void 0 ? curLayer : layer);
+            // if cursor is outside of room
+            if (polygon.length > 0 && !GeometryUtils.ContainsPoint(polygon, Point.x, Point.y)) {
+              actions.itemsActions.endDrawingItem(_this2.props.state.scene.selectedLayer, sPoint.x, sPoint.y);
+            } else {
+              actions.itemsActions.updateDraggingItemChanged(targetPoint.x, -targetPoint.z, selectedObject.layerID, selectedObject.itemID);
+              _this2.context.itemsActions.updateRotatingItemChanged(targetRot, selectedObject.layerID, selectedObject.itemID);
+              actions.itemsActions.endDrawingItem(_this2.props.state.scene.selectedLayer, Point.x, Point.y);
+            }
+          }
+          bMove = false;
+          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();
+        }
+        if (_this2.props.state.mode == MODE_ROTATING_ITEM_3D) {
+          _this2.context.itemsActions.endRotatingItem3D(sPoint.x, sPoint.y);
+        }
+        getPoint(event, altitude);
+        if (_this2.props.state.mode == MODE_DRAWING_HOLE_3D) {
+          gridPlanOrigin = gridPlane.position;
+          gridMatrix.copy(gridPlane.matrixWorld).invert();
+          camPos = camera.position;
+          if (!getIntersectWallPoint(event)) return;
+          actions.holesActions.endDrawingHole3D(_this2.props.state.scene.selectedLayer, Point.x, Point.y);
+          bMove = false;
+          return;
+        }
+        event.preventDefault();
+        if (event.button === 0) {
+          cameraControls.mouseButtons.left = CameraControls.ACTION.ROTATE;
+          mouse.x = event.offsetX / _this2.width * 2 - 1;
+          mouse.y = -(event.offsetY / _this2.height) * 2 + 1;
+          raycaster.setFromCamera(mouse, camera);
+          rayDirection = raycaster.ray.direction;
+          rayDirection = rayDirection.normalize();
+          var meshes = [];
+          toIntersect.forEach(function (object) {
+            if (!object) return;
+            object.traverse(function (o) {
+              if (o.isMesh) meshes.push(o);
+            });
+          });
+          var intersects = raycaster.intersectObjects(meshes, true);
+          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;
+            }
+            if (intersects[_i10] !== undefined) {
+              var distance = Math.sqrt(Math.pow((intersects[_i10].uv.x - 0.5) * 50, 2) + Math.pow((intersects[_i10].uv.y - 0.25) * 100, 2));
+              if (distance <= 20) {
+                if (!bMove && !bRotate) {
+                  isSelected = false;
+                  _this2.context.projectActions.unselectAll();
+                  scene3D.remove(toolObj);
+                  _this2.context.itemsActions.removeReplacingSupport();
+                  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;
+                }
+              }
+            }
+          }
+          !_this2.props.downloadFlag && _this2.props.replaceCabinet(false);
+          if (intersects.length > 0 && !isNaN(intersects[0].distance)) {
+            for (_i10 = 0; _i10 < intersects.length; _i10++) {
+              if (intersects[_i10].object instanceof Three.Mesh && intersects[_i10].object.name != 'TransformBox' && intersects[_i10].object.type != 'Line' && intersects[_i10].object.name != 'lineText' && intersects[_i10].object.name != 'countertops' && intersects[_i10].object.type != 'BoxHelper' && intersects[_i10].object.name != 'soul' && !intersects[_i10].object.name.includes('backsplash') && !intersects[_i10].object.name.includes('WarningBox')) break;
+            }
+          }
+          gridMatrix.copy(gridPlane.matrixWorld).invert();
+          var addItemToolObj = function addItemToolObj() {
+            var _planData$sceneGraph, _selectedObject3, _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[(_selectedObject3 = selectedObject) === null || _selectedObject3 === void 0 ? void 0 : _selectedObject3.itemID];
+            if (isUndefined(selectedItem)) return;
+            selectedElement = _this2.props.state.scene.layers.get(selectedObject.layerID).items.get(selectedObject.itemID);
+            refreshToolObject(selectedElement);
+            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) {
+                if (!bMove) {
+                  isSelected = false;
+                  _this2.context.projectActions.unselectAll();
+                  scene3D.remove(toolObj);
+                  _this2.context.itemsActions.removeReplacingSupport();
+                  return;
+                }
+              }
+              if (!bMove) {
+                selectedObject = intersects[_i10].object.interact && intersects[_i10].object.interact();
+              }
+              if (selectedObject !== undefined && 'itemID' in selectedObject) {
+                currentObject = intersects[_i10].object;
+                for (; currentObject.parent != null;) {
+                  if (currentObject.name == 'pivot') break;
+                  currentObject = currentObject.parent;
+                }
+                isSelected = true;
+                setTimeout(function () {
+                  var _curLayer$id;
+                  addItemToolObj();
+                  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 = [];
+                  // 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, 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 : INTERNAL_EVENT_SELECT_ELEMENT;
+                  sendInternalEvent(internalType, selectedElement, pointArray);
+                });
+              } else {
+                if (selectedObject) {
+                  var elementID = null;
+                  var elementPrototype = null;
+                  switch (true) {
+                    case 'holeID' in selectedObject:
+                      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:
+                      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 {
+              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;
+            bRotate = false;
+            bMoveUP = false;
+            if (isSelected) {
+              prepareSnap(curLayer !== null && curLayer !== void 0 ? curLayer : layer);
+              selectedObj = allItemRect.cur;
+            }
+          } else {
+            var _planData$sceneGraph2, _selectedObject4, _selectedObject5;
+            visibleTransformBox(false);
+            var alti = 0;
+            if (allItemRect && allItemRect.cur && allItemRect.cur.itemInfo !== undefined) {
+              var _properties2 = allItemRect.cur.itemInfo.properties;
+              alti = _properties2.getIn(['altitude', '_length']);
+              var _unit2 = _properties2.getIn(['altitude', '_unit']) || 'in';
+              alti = convert(alti).from(_unit2).to(_this2.props.state.scene.unit);
+            }
+            getPoint(event, alti);
+            var _selectedItem2 = planData === null || planData === void 0 || (_planData$sceneGraph2 = planData.sceneGraph) === null || _planData$sceneGraph2 === void 0 || (_planData$sceneGraph2 = _planData$sceneGraph2.layers[(_selectedObject4 = selectedObject) === null || _selectedObject4 === void 0 ? void 0 : _selectedObject4.layerID]) === null || _planData$sceneGraph2 === void 0 ? void 0 : _planData$sceneGraph2.items[(_selectedObject5 = selectedObject) === null || _selectedObject5 === void 0 ? void 0 : _selectedObject5.itemID];
+            if (isSelected && !isEmpty(_selectedItem2)) addItemToolObj();
+            if (bRotate) {
+              _this2.setState({
+                toolObj: toolObj
+              });
+              _this2.context.itemsActions.endRotatingItem3D(Point.x, Point.y);
+              bRotate = false;
+            }
+            if (bMove) {
+              bMove = false;
+              _this2.setState({
+                toolObj: toolObj
+              });
+              if (snapBox == null) {
+                var item3D = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
+                if (!item3D) return;
+                item3D.visible = true;
+                var originPos = item3D.position.clone();
+                setTimeout(function () {
+                  _this2.context.itemsActions.updateDraggingItemChanged(originPos.x, -originPos.z, selectedObject.layerID, selectedObject.itemID);
+                }, 50);
+              } else {
+                _this2.context.itemsActions.updateDraggingItemChanged(targetPoint.x, -targetPoint.z, selectedObject.layerID, selectedObject.itemID);
+                _this2.context.itemsActions.updateRotatingItemChanged(targetRot, selectedObject.layerID, selectedObject.itemID);
+                var _item3D = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
+                _item3D.position.x = targetPoint.x;
+                _item3D.position.z = targetPoint.z;
+                _item3D.visible = true;
+              }
+            }
+            if (bMoveUP) {
+              bMoveUP = false;
+            }
+          }
+          removeSnapBox();
+          actions.sceneActions.updateMovingState(true);
+          if (isSelected === true) {
+            prepareSnap(curLayer !== null && curLayer !== void 0 ? curLayer : layer);
+            selectedObj = allItemRect.cur;
+          }
+        }
+        sendInternalEvent(internalType, selectedElement);
+      };
+      this.mouseEnterEvent = function (event) {
+        if (_this2.props.state.mode !== MODE_DRAWING_ITEM_3D) return;
+        // if not initial moment of drawing an item
+        if (!isInitialPhase) return;
+        var bNormalFlow = true;
+        _this2.getSelectedObject();
+        var layer = _this2.props.state.scene.getIn(['layers', selectedObject.layerID]);
+        var mX = Point.x - sPoint.x;
+        var mY = Point.y - sPoint.y;
+        var item3D = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
+        deleteSpecifiedMeshObjects('TransformBox');
+        deleteSpecifiedMeshObjects('WarningBox' + selectedObject.itemID);
+        var item = layer.getIn(['items', selectedObject.itemID]);
+        if (!item3D || !item) return;
+        if (item.counterTop.uri == '') item.counterTop.uri = layer.counterTop.uri;
+        var sRot = item.rotation;
+        var originPos = item3D.position.clone();
+        var tPos = new Three.Vector2(mX + originPos.x, mY - originPos.z);
+        var sBounding = item3D.children[0].userData;
+        var swidth = sBounding.max.x - sBounding.min.x;
+        var sdepth = sBounding.max.z - sBounding.min.z;
+        var sVertices = _this2.getRectPoints(swidth, sdepth, tPos.clone(), sRot % 360 / 180 * Math.PI);
+        prepareSnap(layer);
+
+        // calc altitude
+        var altitude = 0;
+        if (allItemRect && allItemRect.cur && allItemRect.cur.itemInfo !== undefined) {
+          var properties = allItemRect.cur.itemInfo.properties;
+          altitude = properties.getIn(['altitude', '_length']);
+          var unit = properties.getIn(['altitude', '_unit']) || 'in';
+          altitude = convert(altitude).from(unit).to(_this2.props.state.scene.unit);
+        }
+        // We need to set cam position since when MODE_DRAWING_ITEM_3D mouse down event
+        // is not emited so cam position is not valid
+        gridPlanOrigin = gridPlane.position;
+        gridMatrix.copy(gridPlane.matrixWorld).invert();
+        camPos = camera.position;
+
+        // calc cursor position
+        getPoint(event, altitude);
+        var polygon = GeometryUtils.getPoylgonPoints(layer);
+
+        // if no wall (no area)
+        if (!polygon.length) {
+          // place the item at cursor position
+          actions.itemsActions.updateDraggingItemChanged(Point.x, Point.y, selectedObject.layerID, selectedObject.itemID);
+          return;
+        }
+
+        // calc snap
+        var _GeometryUtils$calcCr = GeometryUtils.calcCreateSnap(allItemRect, allItemSnap, allLineRects, allLineSnap, allRect, Point.x, Point.y, polygon),
+          cx = _GeometryUtils$calcCr.cx,
+          cy = _GeometryUtils$calcCr.cy,
+          crot = _GeometryUtils$calcCr.crot,
+          rotRad = _GeometryUtils$calcCr.rotRad;
+        var finalPosition = {
+          x: cx,
+          y: cy,
+          rot: crot,
+          rotRad: rotRad
+        };
+
+        // calc current item rect
+        var itemRect = _objectSpread(_objectSpread({}, allItemRect.cur), {}, {
+          pos: {
+            x: Point.x,
+            y: Point.y
+          }
+        });
+
+        // if cursor position is inside the room
+        if (GeometryUtils.ContainsPoint(polygon, Point.x, Point.y)) {
+          // if cursor position is available to place the item
+          if (GeometryUtils.validRect(itemRect, allRect)) {
+            actions.itemsActions.updateDraggingItemChanged(Point.x, Point.y, selectedObject.layerID, selectedObject.itemID);
+            sPoint.set(Point.x, Point.y);
+            bNormalFlow = false;
+          }
+        } else {
+          // if cursor is outside the room and there is no snap candidate,
+          // then place the item at any free position inside the room.
+          if (!GeometryUtils.ContainsPoint(polygon, cx, cy)) {
+            var points = [];
+            var point = [];
+
+            // rebuild variable to be passed to getCentriodOfPolygon
+            // polygon: [ x0, y0, x1, y1, ... ] ==> points: [[x0, y0], [x1, y1], ...]
+            polygon === null || polygon === void 0 || polygon.forEach(function (value, index) {
+              point.push(value);
+              if (index % 2) {
+                points.push(point);
+                point = [];
+              }
+            });
+
+            // calc center position of the room
+            var centerPos = GeometryUtils.getCentroidOfPolygon(points);
+            var itemRect1 = _objectSpread(_objectSpread({}, allItemRect.cur), {}, {
+              pos: {
+                x: centerPos.x,
+                y: centerPos.y
+              }
+            });
+            var itemRect2 = _objectSpread(_objectSpread({}, allItemRect.cur), {}, {
+              pos: {
+                x: centerPos.x,
+                y: centerPos.y
+              },
+              rotRad: allItemRect.cur.rotRad + Math.PI / 2
+            });
+
+            // find a free position in the room
+            if (GeometryUtils.validRect(itemRect1, allRect)) {
+              actions.itemsActions.updateDraggingItemChanged(centerPos.x, centerPos.y, selectedObject.layerID, selectedObject.itemID);
+              sPoint.set(centerPos.x, centerPos.y);
+              bNormalFlow = false;
+            } else if (GeometryUtils.validRect(itemRect2, allRect)) {
+              finalPosition = {
+                x: centerPos.x,
+                y: centerPos.y,
+                rotRad: itemRect2.rotRad,
+                rot: itemRect2.rotRad / Math.PI * 180
+              };
+              sPoint.set(centerPos.x, centerPos.y);
+            }
+          }
+        }
+        var nPos = new Three.Vector2(cx, cy);
+        if (!_this2.collisionHoleCheck(item3D, nPos, item.rotation, {
+          userData: {
+            itemId: null
+          }
+        }, item, _this2.context.catalog)) {
+          _this2.collisionSlide(item3D, originPos, layer, sVertices, tPos, item);
+        }
+        itemRect = _objectSpread(_objectSpread({}, allItemRect.cur), {}, {
+          pos: {
+            x: finalPosition.x,
+            y: finalPosition.y
+          },
+          rotRad: finalPosition.rotRad
+        });
+
+        // if the room is fullfilled with items or can't calc snap correctly
+        if (!GeometryUtils.validRect(itemRect, allRect)) {
+          // then place the item at cursor position
+          actions.itemsActions.updateDraggingItemChanged(Point.x, Point.y, selectedObject.layerID, selectedObject.itemID);
+          sPoint.set(Point.x, Point.y);
+          bNormalFlow = false;
+        }
+        if (bNormalFlow) {
+          actions.itemsActions.updateDraggingItemChanged(finalPosition.x, finalPosition.y, selectedObject.layerID, selectedObject.itemID);
+          actions.itemsActions.updateRotatingItemChanged(finalPosition.rot, selectedObject.layerID, selectedObject.itemID);
+          sPoint.set(finalPosition.x, finalPosition.y);
+        }
+        isInitialPhase = false;
+        _this2.handleAfterMovingItem();
+      };
+      this.mouseMoveEvent = function (event) {
+        event.preventDefault();
+        backsplashVisible = false;
+        var altitude = 0;
+        if (allItemRect && allItemRect.cur && allItemRect.cur.itemInfo !== undefined) {
+          var properties = allItemRect.cur.itemInfo.properties;
+          altitude = properties.getIn(['altitude', '_length']);
+          var unit = properties.getIn(['altitude', '_unit']) || 'in';
+          altitude = convert(altitude).from(unit).to(_this2.props.state.scene.unit);
+        }
+        if (_this2.props.state.mode === MODE_DRAWING_HOLE_3D) {
+          gridPlanOrigin = gridPlane.position;
+          gridMatrix.copy(gridPlane.matrixWorld).invert();
+          camPos = camera.position;
+          if (!getIntersectWallPoint(event)) return;
+          var drawingSupport = _this2.props.state.drawingSupport;
+          if (!drawingSupport.has('currentID')) {
+            _this2.context.holesActions.updateDrawingHole3D(_this2.props.state.scene.selectedLayer, Point.x, Point.y);
+            sPoint.set(Point.x, Point.y);
+          } else {
+            var layerID = _this2.props.state.scene.selectedLayer;
+            var holeID = _this2.props.state.drawingSupport.get('currentID');
+            deleteSpecifiedMeshObjects('WarningBox' + holeID);
+            prepareSnap(layer);
+
+            // let {nx, ny, rot} = GeometryUtils.calcSnap(allItemRect, allItemSnap, allLineRects, allLineSnap, allRect, Point.x, Point.y, allArea);
+            var nx = Point.x;
+            var ny = Point.y;
+            actions.holesActions.updateDrawingHole3D(layerID, nx, ny);
+            sPoint.set(nx, ny);
+          }
+        }
+        if (_this2.props.state.mode === MODE_DRAWING_ITEM_3D) {
+          // We need to set cam position since when MODE_DRAWING_ITEM_3D mouse down event
+          // is not emited so cam position is not valid
+          gridPlanOrigin = gridPlane.position;
+          gridMatrix.copy(gridPlane.matrixWorld).invert();
+          camPos = camera.position;
+          getPoint(event, altitude);
+          if (Point.x > _this2.props.state.scene.width || Point.x < 0 || Point.y > _this2.props.state.scene.height || Point.y < 0) return;
+          _this2.getSelectedObject();
+          var _drawingSupport = _this2.props.state.drawingSupport;
+          if (!_drawingSupport.has('currentID')) {
+            _this2.context.itemsActions.updateDrawingItem(selectedObject.layerID, Point.x, Point.y);
+            sPoint.set(Point.x, Point.y);
+          } else {
+            var mX = Point.x - sPoint.x;
+            var mY = Point.y - sPoint.y;
+            var _layer = _this2.props.state.scene.getIn(['layers', selectedObject.layerID]);
+            var item3D = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
+            deleteSpecifiedMeshObjects('TransformBox');
+            deleteSpecifiedMeshObjects('WarningBox' + selectedObject.itemID);
+            var item = _layer.getIn(['items', selectedObject.itemID]);
+            if (!item3D || !item) return;
+            if (item.counterTop.uri == '') item.counterTop.uri = _layer.counterTop.uri;
+            var sRot = item.rotation;
+            var originPos = item3D.position.clone();
+            var tPos = new Three.Vector2(mX + originPos.x, mY - originPos.z);
+            var sBounding = item3D.children[0].userData;
+            var swidth = sBounding.max.x - sBounding.min.x;
+            var sdepth = sBounding.max.z - sBounding.min.z;
+            var sVertices = _this2.getRectPoints(swidth, sdepth, tPos.clone(), sRot % 360 / 180 * Math.PI);
+            prepareSnap(_layer);
+            var _GeometryUtils$calcSn = GeometryUtils.calcSnap(allItemRect, allItemSnap, allLineRects, allLineSnap, allRect, Point.x, Point.y, allArea),
+              _nx = _GeometryUtils$calcSn.nx,
+              _ny = _GeometryUtils$calcSn.ny,
+              rot = _GeometryUtils$calcSn.rot;
+            var nPos = new Three.Vector2(_nx, _ny);
+            if (!_this2.collisionHoleCheck(item3D, nPos, item.rotation, {
+              userData: {
+                itemId: null
+              }
+            }, item, _this2.context.catalog)) {
+              _this2.collisionSlide(item3D, originPos, _layer, sVertices, tPos, item);
+            }
+            var polygonPoint = GeometryUtils.getPoylgonPoints(_layer);
+            if (polygonPoint.length > 0) {
+              var PolygonSect = GeometryUtils.ContainsPoint(polygonPoint, _nx, _ny);
+              if (!PolygonSect) {
+                var _GeometryUtils$calcCr2 = GeometryUtils.calcCreateSnap(allItemRect, allItemSnap, allLineRects, allLineSnap, allRect, Point.x, Point.y, polygonPoint),
+                  cx = _GeometryUtils$calcCr2.cx,
+                  cy = _GeometryUtils$calcCr2.cy,
+                  crot = _GeometryUtils$calcCr2.crot;
+                _nx = cx;
+                _ny = cy;
+                rot = crot;
+              }
+            }
+            if (polygonPoint.length > 0) {
+              var isSect = GeometryUtils.ContainsPoint(polygonPoint, _nx, _ny);
+              if (!isSect) return;
+            }
+            actions.itemsActions.updateDraggingItemChanged(_nx, _ny, selectedObject.layerID, selectedObject.itemID);
+            actions.itemsActions.updateRotatingItemChanged(rot, selectedObject.layerID, selectedObject.itemID);
+            sPoint.set(_nx, _ny);
+            _this2.handleAfterMovingItem();
+          }
+        }
+        if (bRotate) {
+          getPoint(event, altitude);
+          _this2.context.itemsActions.updateRotatingItem(Point.x, Point.y);
+          var _layer2 = _this2.props.state.scene.getIn(['layers', selectedObject.layerID]);
+          var _item4 = _layer2.items.getIn([selectedObject.itemID]);
+          var orginRot = _this2.props.state.rotatingSupport.get('originRotation');
+          angleTexture.image = createAngleObject((orginRot < 0 ? 360 - orginRot : orginRot) - _item4.rotation);
+          angleTexture.needsUpdate = true;
+          deleteSpecifiedMeshObjects('WarningBox' + selectedObject.itemID);
+          deleteSpecifiedMeshObjects('backsplash' + selectedObject.itemID);
+          actions.sceneActions.updateMovingState(false);
+        }
+        if (bMoveUP) {
+          _this2.context.itemsActions.updateItemsAltitude(selectedObject.layerID, selectedObject.itemID, event.movementY);
+        }
+        if (bMove) {
+          if ('holeID' in selectedObject) {
+            gridPlanOrigin = gridPlane.position;
+            gridMatrix.copy(gridPlane.matrixWorld).invert();
+            camPos = camera.position;
+            if (!getIntersectWallPoint(event)) return;
+            var draggingSupport = _this2.props.state.draggingSupport;
+            if (!draggingSupport.has('currentID')) {
+              _this2.context.holesActions.updateDraggingHole(Point.x, Point.y);
+              sPoint.set(Point.x, Point.y);
+            } else {
+              var _holeID = _this2.props.state.draggingSupport.get('currentID');
+              deleteSpecifiedMeshObjects('WarningBox' + _holeID);
+              var _nx2 = Point.x;
+              var _ny2 = Point.y;
+              actions.holesActions.updateDraggingHole(_nx2, _ny2);
+              sPoint.set(_nx2, _ny2);
+            }
+          } else {
+            var _item3D2 = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
+            if (_item3D2 === undefined) return;
+            var _layer3 = _this2.props.state.scene.getIn(['layers', _item3D2.userData.layerId]);
+            var _item5 = _layer3.items.getIn([selectedObject.itemID]);
+            if (_item5.counterTop.uri == '') _item5.counterTop.uri = _layer3.counterTop.uri;
+            var _sRot2 = _item5.rotation;
+            var _mX = Point.x - sPoint.x;
+            var _mY = Point.y - sPoint.y;
+            deleteSpecifiedMeshObjects('WarningBox' + selectedObject.itemID);
+            deleteSpecifiedMeshObjects('backsplash' + selectedObject.itemID);
+            prepareSnap(_layer3);
+            getPoint(event, altitude);
+            var _originPos = _item3D2.position.clone();
+            var _tPos4 = new Three.Vector2(_mX + _originPos.x, _mY - _originPos.z);
+            var _sBounding2 = _item3D2.children[0].userData;
+            var _swidth = _sBounding2.max.x - _sBounding2.min.x;
+            var _sdepth = _sBounding2.max.z - _sBounding2.min.z;
+            var _sVertices = _this2.getRectPoints(_swidth, _sdepth, _tPos4.clone(), _sRot2 % 360 / 180 * Math.PI);
+            var _GeometryUtils$calcSn2 = GeometryUtils.calcSnap(allItemRect, allItemSnap, allLineRects, allLineSnap, allRect, Point.x, Point.y, allArea),
+              _nx3 = _GeometryUtils$calcSn2.nx,
+              _ny3 = _GeometryUtils$calcSn2.ny,
+              _rot = _GeometryUtils$calcSn2.rot;
+            var _nPos = new Three.Vector2(_nx3, _ny3);
+            if (!_this2.collisionHoleCheck(_item3D2, _nPos, _item5.rotation, {
+              userData: {
+                itemId: null
+              }
+            }, _item5, _this2.context.catalog)) {
+              _this2.collisionSlide(_item3D2, _originPos, _layer3, _sVertices, _tPos4, _item5);
+              //return;
+            }
+            var _polygonPoint = GeometryUtils.getPoylgonPoints(_layer3);
+            if (_polygonPoint.length > 0) {
+              var _PolygonSect = GeometryUtils.ContainsPoint(_polygonPoint, _nx3, _ny3);
+              if (!_PolygonSect) {
+                var _GeometryUtils$calcCr3 = GeometryUtils.calcCreateSnap(allItemRect, allItemSnap, allLineRects, allLineSnap, allRect, Point.x, Point.y, _polygonPoint),
+                  _cx3 = _GeometryUtils$calcCr3.cx,
+                  _cy = _GeometryUtils$calcCr3.cy,
+                  _crot = _GeometryUtils$calcCr3.crot;
+                _nx3 = _cx3;
+                _ny3 = _cy;
+                _rot = _crot;
+              }
+            }
+            var polygon = GeometryUtils.getPoylgonPoints(_layer3);
+            if (polygon.length > 0) {
+              var Sect = GeometryUtils.ContainsPoint(polygon, _nx3, _ny3);
+              if (!Sect) return;
+            }
+            actions.itemsActions.updateDraggingItemChanged(_nx3, _ny3, selectedObject.layerID, selectedObject.itemID);
+            actions.itemsActions.updateRotatingItemChanged(_rot, selectedObject.layerID, selectedObject.itemID);
+            sPoint.set(_nx3, _ny3);
+            _this2.handleAfterMovingItem();
+          }
+        }
+        if (!bMove && !bRotate && !bMoveUP) {
+          var curPos = {
+            x: event.offsetX / _this2.width * 2 - 1,
+            y: -(event.offsetY / _this2.height) * 2 + 1
+          };
+          raycaster.setFromCamera(curPos, camera);
+          rayDirection = raycaster.ray.direction;
+          rayDirection = rayDirection.normalize();
+          var meshes = getAllMeshes(toIntersect);
+          var intersects = raycaster.intersectObjects(meshes, true);
+          var _i11;
+          if (intersects.length > 0 && !isNaN(intersects[0].distance)) {
+            for (_i11 = 0; _i11 < intersects.length; _i11++) {
+              if (intersects[_i11].object.name === 'warningObj') break;
+            }
+            if (intersects[_i11] !== undefined) {
+              var distance = Math.sqrt(Math.pow((intersects[_i11].uv.x - 0.5) * 50, 2) + Math.pow((intersects[_i11].uv.y - 0.75) * 100, 2));
+              if (distance <= 20) {
+                var infoPos = {
+                  x: 0,
+                  y: 0
+                };
+                if (event.offsetY > 150) {
+                  infoPos.y = event.offsetY - 60;
+                } else {
+                  infoPos.y = event.offsetY + 10;
+                }
+                if (event.offsetX > _this2.width - 650) {
+                  infoPos.x = event.offsetX - 650;
+                } else {
+                  infoPos.x = event.offsetX;
+                }
+                if (!isEmpty(document.getElementById('warning_box_2d'))) {
+                  document.getElementById('warning_box_2d').style.display = 'flex';
+                  document.getElementById('warning_box_2d').style.top = "".concat(infoPos.y, "px");
+                  document.getElementById('warning_box_2d').style.left = "".concat(infoPos.x, "px");
+                  return;
+                }
+              }
+            }
+          }
+        }
+        if (!isEmpty(document.getElementById('warning_box_2d'))) document.getElementById('warning_box_2d').style.display = 'none';
+      };
+
+      // handle snapBox, distArray, backsplash
+      this.handleAfterMovingItem = function () {
+        var layer = _this2.props.state.scene.getIn(['layers', selectedObject.layerID]);
+        var item = layer.getIn(['items', selectedObject.itemID]);
+        var item3D = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
+        getDistances(layer, item);
+        var pointArray = [],
+          cnt = 0;
+        pointArray.push([fVLine[0].userData.distance, 90]);
+        pointArray.push([fVLine[1].userData.distance, -90]);
+        pointArray.push([fVLine[2].userData.distance, 180]);
+        pointArray.push([fVLine[3].userData.distance, 0]);
+        pointArray.forEach(function (pointElement, index) {
+          if (pointElement[0] == undefined) pointArray[index][0] = 0;
+        });
+        pointArray.forEach(function (pointElement) {
+          if (pointElement[0] == 0) cnt++;
+        });
+        if (cnt == 4 || cnt == 3) {
+          pointArray[0][0] = 100;
+          pointArray[1][0] = 100;
+        }
+        actions.itemsActions.storeDistArray(selectedObject.layerID, selectedObject.itemID, pointArray);
+        var minDis = fVLine[0].userData.distance;
+        var snapObj = fVLine[0];
+        var iPos = item3D.position.clone();
+        var snapDis = Math.sqrt((iPos.x - targetPoint.x) * (iPos.x - targetPoint.x) + (iPos.z - targetPoint.z) * (iPos.z - targetPoint.z));
+        if (snapDis >= 100 && snapObj != null) {
+          removeSnapBox();
+          backsplashVisible = false;
+        }
+        for (var _i12 = 1; _i12 < fVLine.length; _i12++) {
+          if (minDis > fVLine[_i12].userData.distance) {
+            minDis = fVLine[_i12].userData.distance;
+            snapObj = fVLine[_i12];
+          }
+        }
+        if (snapBox == null) {
+          snapFlag = false;
+        }
+        actions.sceneActions.updateMovingState(false);
+        if (minDis < snapDelta && !snapFlag) {
+          _this2.snap(snapObj, layer);
+          snapFlag = true;
+          getDistances(layer, item);
+          var _i13 = 0;
+          for (_i13 = 0; _i13 < fVLine.length; _i13++) {
+            if (fVLine[_i13].userData.distance < snapDelta) {
+              break;
+            }
+          }
+          if (_i13 === fVLine.length) backsplashVisible = false;else backsplashVisible = true;
+        }
+        actions.itemsActions.setBacksplashVisible(selectedObject.itemID, backsplashVisible);
+      };
+      this.onkeydown = function (event) {
+        if (_this2.props.keyDownEnable && !isElevationView(state.mode)) {
+          switch (event.keyCode) {
+            case 27:
+              // escape key
+              isSelected = false;
+              _this2.context.projectActions.unselectAll();
+              _this2.context.itemsActions.removeReplacingSupport();
+              _this2.context.itemsActions.setMoveStatus(false);
+              _this2.context.itemsActions.setRotateStatus(false);
+              bMoveUP = false;
+              bMirror = false;
+              removeSnapBox();
+              break;
+            case 65:
+              // w (move forward)
+              pivot.rotation.y -= 0.03;
+              break;
+            case 68:
+              // s (move backward)
+              pivot.rotation.y += 0.03;
+              break;
+            case 83:
+              // a (look left)
+              pivot.rotation.x += 0.03;
+              break;
+            case 87:
+              // d (look left)
+              pivot.rotation.x -= 0.03;
+              break;
+            case 37:
+              // left (move forward)
+              planData.plan.position.x += 10;
+              planData.grid.position.x += 10;
+              break;
+            case 38:
+              // Up (move backward)
+              planData.plan.position.y += 10;
+              planData.grid.position.y += 10;
+              break;
+            case 39:
+              // right arrow (look left)
+              planData.plan.position.x -= 10;
+              planData.grid.position.x -= 10;
+              break;
+            case 40:
+              // down arrow (look left)
+              planData.plan.position.y -= 10;
+              planData.grid.position.y -= 10;
+              break;
+          }
+        }
+      };
+      this.handleKeyDown = function (event) {
+        _this2.onkeydown(event);
+      };
+      this.getSelectedObject = function () {
+        var layerID = _this2.props.state.scene.selectedLayer;
+        var itemID = _this2.props.state.drawingSupport.get('currentID');
+        selectedObject = {
+          layerID: layerID,
+          itemID: itemID
+        };
+      };
+
+      // Renderer & Event listener
+
+      this.renderer.setClearColor(new Three.Color(SharedStyle.COLORS.white)); // 3D background color
+      this.renderer.setSize(this.width, this.height);
+      if (!this.props.downloadFlag) {
+        this.renderer.domElement.addEventListener('mousedown', this.mouseDownEvent);
+        this.renderer.domElement.addEventListener('mouseup', this.mouseUpEvent);
+        this.renderer.domElement.addEventListener('mouseenter', this.mouseEnterEvent);
+        this.renderer.domElement.addEventListener('mousemove', this.mouseMoveEvent);
+        window.addEventListener('keydown', this.onkeydown);
+        window.SPKeyDown = this.handleKeyDown;
+        window.tDKeyDown = this.handleKeyDown;
+      }
+
+      // Add the output of the renderer to the html element
+      var canvasWrapper = ReactDOM.findDOMNode(this.refs.canvasWrapper);
+      canvasWrapper && canvasWrapper.appendChild(this.renderer.domElement);
+
+      //
+
+      if (scene.getIn(['layers', scene.selectedLayer, 'selected', 'items']).size != 0) {
+        // if selected Object
+        isSelected = true;
+        selectedObject.layerID = scene.selectedLayer;
+        selectedObject.itemID = scene.getIn(['layers', scene.selectedLayer, 'selected', 'items']).toJS()[0];
+        setTimeout(function () {
+          try {
+            currentObject = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
+            if (isUndefined(currentObject)) return;
+            var selItem = _this2.props.state.scene.layers.get(selectedObject.layerID).items.get(selectedObject.itemID);
+            refreshToolObject(selItem);
+            var itemPos = currentObject.position.clone();
+            toolObj.position.set(planData.plan.position.x + itemPos.x, selItem.category === 'lighting' ? -planData.plan.position.y - selItem.properties.get('height').get('length') : planData.plan.position.y + currentObject.children[0].position.y, planData.plan.position.z + itemPos.z);
+            scene3D.add(toolObj);
+            _this2.setState({
+              toolObj: toolObj
+            });
+          } catch (err) {
+            console.log('selectedObject : ' + JSON.stringify(selectedObject) + '\nError: ' + err);
+          }
+        }, 2000);
+      }
+
+      // Scene functions
+
+      function init() {
+        clock = new Three.Clock();
+        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(0xe4ebfe); // change color about v1: 0x8791AB, v2: 0xC2C2C2, v3: 0xC3CADC
+        // scene3D.fog = new Three.Fog(0xC3CADC, 2000, 3500);
+        window.scene3D = scene3D;
+        // Camera
+        if (isElevationView(state.mode)) {
+          // In elevation view, set Orthographic camera's position, angle and rotation about selected line
+          var layers = scene.layers;
+          var selectedLayer = layers.get(scene.selectedLayer);
+          var ceilHeight = convert(selectedLayer.ceilHeight).from(selectedLayer.unit).to(scene.unit);
+          var lines = [];
+          var selectedLine = selectedLayer.lines.get(selectedLayer.selected.lines.toJS()[0]);
+          var vertex0 = selectedLayer.vertices.get(selectedLine.vertices.get(0));
+          var vertex1 = selectedLayer.vertices.get(selectedLine.vertices.get(1));
+          var x1 = vertex0.x,
+            y1 = vertex0.y;
+          var x2 = vertex1.x,
+            y2 = vertex1.y;
+          if (GeometryUtils.compareVertices(vertex0, vertex1) >= 0 && vertex0.x !== vertex1.x) {
+            x1 = vertex1.x;
+            y1 = vertex1.y;
+            x2 = vertex0.x;
+            y2 = vertex0.y;
+          }
+          selectedLayer.lines.toArray().forEach(function (line) {
+            if (line.id === selectedLine) {
+              var data = line.toJS();
+              data = _objectSpread(_objectSpread({}, data), {}, {
+                l0: {
+                  x: x1,
+                  y: y1
+                },
+                l1: {
+                  x: x2,
+                  y: y2
+                }
+              });
+              lines.push(data);
+            }
+          });
+          var lineLength = GeometryUtils.pointsDistance(x1, y1, x2, y2);
+          self.setState({
+            lineLength: lineLength
+          });
+          var cameraRect = handleCamRect(self.width, self.height, ceilHeight, lineLength);
+          camera = new Three.OrthographicCamera(-cameraRect.width / 2, cameraRect.width / 2, cameraRect.height / 2, -cameraRect.height / 2, 1, 1000);
+          var angle = Math.atan((y1 - y2) / (x1 - x2));
+          var r = 300;
+          if (Math.abs(angle) === Math.PI / 2) {
+            camera.position.set((x1 + x2) / 2 - Math.sin(angle) * r, ceilHeight / 2, -((y1 + y2) / 2 - Math.cos(angle) * r));
+            camera.rotation.set(0, -angle, 0);
+          } else if (vertex0.x > vertex1.x) {
+            camera.position.set((x1 + x2) / 2 + Math.sin(angle + Math.PI) * r, ceilHeight / 2, -((y1 + y2) / 2 - Math.cos(angle + Math.PI) * r));
+            camera.rotation.set(0, angle + Math.PI, 0);
+          } else {
+            camera.position.set((x1 + x2) / 2 + Math.sin(angle) * r, ceilHeight / 2, -((y1 + y2) / 2 - Math.cos(angle) * r));
+            camera.rotation.set(0, angle, 0);
+          }
+        } else {
+          var aspectRatio = self.width / self.height;
+          camera = new Three.PerspectiveCamera(45, aspectRatio, 1, 300000);
+          camera.position.set(0, 0, 1);
+        }
+        camera.layers.enable(1);
+        function loadENV() {
+          new RGBELoader().load('/assets/brown_photostudio_02_1k.hdr', function (texture) {
+            texture.mapping = Three.EquirectangularReflectionMapping;
+            scene3D.environment = texture;
+            texture.dispose();
+          });
+        }
+        // Camera Controls
+        if (!isElevationView(state.mode)) {
+          cameraControls = new CameraControls(camera, self.renderer.domElement);
+          cameraControls.dollyToCursor = true;
+          cameraControls.infinityDolly = true;
+          cameraControls.minDistance = 50;
+          cameraControls.maxDistance = Infinity;
+          cameraControls.zoomSpeed = 1;
+          loadENV();
+        }
+        scene3D.add(planData.plan);
+        scene3D.add(planData.grid);
+        scene3D.add(camera);
+        if (isElevationView(state.mode)) {
+          planData.cam.add(camera);
+          scene3D.add(planData.cam);
+        } else {
+          pivot = new Three.Object3D();
+          pivot.add(camera);
+          scene3D.add(pivot);
+        }
+
+        // LIGHT
+
+        var light = new Three.AmbientLight(0xbfbfbf, 0.9); // soft white light
+      }
+      function render() {
+        var delta = clock.getDelta(); // Get time delta for smooth updates
+        if (!isElevationView(state.mode)) cameraControls.update(delta);
+        for (var _i14 = 0; _i14 < lights.length; _i14++) {
+          lights[_i14].light.position.set(planData.plan.position.x + lights[_i14].x, planData.plan.position.y + lights[_i14].height - 10, planData.plan.position.z - lights[_i14].y);
+          lights[_i14].target.position.set(planData.plan.position.x + lights[_i14].x, planData.plan.position.y, planData.plan.position.z - lights[_i14].y);
+        }
+        camera.updateMatrix();
+        camera.updateMatrixWorld();
+        for (var elemID in planData.sceneGraph.LODs) {
+          planData.sceneGraph.LODs[elemID].update(camera);
+        }
+        if (snapBox !== null) {
+          if (snapAnimI >= 15) {
+            if ('x' in targetPoint) snapBox.position.set(targetPoint.x, snapBox.position.y, targetPoint.z);
+            snapFlag = false;
+            t_i++;
+          } else {
+            if (snapAnimI == 0) {
+              targetCRotation = (targetRot / 180 * Math.PI - snapBox.rotation.y + Math.PI) * 180 / Math.PI % 360;
+              if (targetCRotation > 180) targetCRotation -= 360;
+              if (targetCRotation < -180) targetCRotation += 360;
+              targetCRotation = targetCRotation / 180 * Math.PI;
+            }
+            if (snapAnimI < 10) {
+              snapBox.rotateY(targetCRotation / 10);
+            } else {
+              snapBox.position.set(snapBox.position.clone().x - targetUVec.x / 10, snapBox.position.clone().y - targetUVec.y / 10, snapBox.position.clone().z - targetUVec.z / 10);
+            }
+            snapAnimI++;
+          }
+        }
+        if (t_i === 20) {
+          //stop snap after 5s
+          removeSnapBox();
+        }
+
+        // hide hole if wall is not visible
+        var layerID = self.props.state.scene.selectedLayer;
+        var layer = self.props.state.scene.layers.get(layerID);
+        layer.holes.forEach(function (data) {
+          var line = planData.sceneGraph.layers[layerID].lines[data.line];
+          var hole = planData.sceneGraph.layers[layerID].holes[data.id];
+          if (line instanceof Three.Object3D && !line.isMesh) {
+            line = line.children[0].children[0];
+            // index(faces) of the line
+            var indexAttribute = line.geometry.getIndex();
+            var firstFaceIndices = undefined;
+            if (indexAttribute && indexAttribute.length > 0) {
+              [indexAttribute.getX(0), indexAttribute.getX(1), indexAttribute.getX(2)], _readOnlyError("firstFaceIndices");
+            }
+            if (firstFaceIndices == undefined) return;
+            // normal vector of the line
+            var normalAttribute = line.geometry.attributes.normal;
+            var normal = new Three.Vector3().fromBufferAttribute(normalAttribute, 0).clone();
+            normal = normal.applyMatrix4(line.matrixWorld).sub(new Three.Vector3(0, 0, 0).applyMatrix4(line.matrixWorld)).normalize();
+            var vertices = layer.lines.get(data.line).vertices.toJS();
+            var vertex1 = layer.vertices.get(vertices[0]);
+            var vertex2 = layer.vertices.get(vertices[1]);
+            var cX = (vertex1.x + vertex2.x) / 2;
+            var cY = (vertex1.y + vertex2.y) / 2;
+            var posVec = new Three.Vector3(cX, 150, -cY);
+            posVec = posVec.add(planData.plan.position.clone());
+            var cameraLine = camera.position.clone().sub(posVec);
+            if (hole) {
+              hole.traverse(function (child) {
+                if (child.isMesh) {
+                  child.material.opacity = cameraLine.dot(normal) > 0 ? 1 : 0;
+                  child.material.transparent = cameraLine.dot(normal) > 0 ? false : true;
+                  child.material.needsUpdate = true;
+                }
+              });
+            }
+          }
+          // /////////////////////////////////////
+        });
+        if (scene3D && camera) {
+          if (planData.elevationGroup) {
+            planData.elevationGroup.visible = true;
+            self.renderer.render(scene3D, camera);
+            self.renderer.autoClearDepth = false;
+            planData.elevationGroup.visible = false;
+            // console.log('---originalScene:', scene3D)
+            self.renderer.render(scene3D, camera);
+            self.renderer.autoClearDepth = true;
+          } else {
+            self.renderer.render(scene3D, camera);
+          }
+        }
+        self.renderingID = requestAnimationFrame(render);
+        if (self.props.downloadFlag) {
+          if (self.state.waitForRender > 0) {
+            self.state.waitForRender++;
+            if (self.state.waitForRender > 2) {
+              self.setState({
+                isLoading: false,
+                waitForRender: 0
+              });
+              if (isElevationView(self.props.state.mode)) {
+                setTimeout(function () {
+                  self.props.setIsLoadingElevation('front', false);
+                }, 100);
+              }
+              self.renderer.domElement.style.display = 'block';
+            }
+          }
+        }
+      }
+
+      //
+
+      window.planData = planData;
+      this.planData = planData;
+      this.camera = camera;
+      this.cameraControls = cameraControls;
+      this.scene3D = scene3D;
+      prepareSnap(layer);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      cancelAnimationFrame(this.renderingID);
+      if (!isElevationView(this.props.state.mode)) {
+        if (this.cameraControls !== undefined) this.cameraControls.dispose();
+      }
+      if (!this.props.downloadFlag) {
+        this.renderer.domElement.removeEventListener('mousedown', this.mouseDownEvent);
+        this.renderer.domElement.removeEventListener('mouseup', this.mouseUpEvent);
+      }
+      disposeScene(this.scene3D);
+      this.scene3D.remove(this.planData.plan);
+      this.scene3D.remove(this.planData.grid);
+      this.scene3D = null;
+      this.planData = null;
+      this.camera = null;
+      this.cameraControls = null;
+      this.renderer.renderLists.dispose();
+    }
+  }, {
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(nextProps) {
+      var _this4 = this;
+      if (this.props.downloadFlag && diff(this.props.state, nextProps.state).toJS().length == 0 || 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 = convert(selectedLayer.ceilHeight).from(selectedLayer.unit).to(nextProps.state.scene.unit);
+      var actions = {
+        areaActions: this.context.areaActions,
+        holesActions: this.context.holesActions,
+        itemsActions: this.context.itemsActions,
+        sceneActions: this.context.sceneActions,
+        linesActions: this.context.linesActions,
+        projectActions: this.context.projectActions,
+        catalog: this.context.catalog
+      };
+      var isLoadingCabinet = nextProps.state.scene.isLoadingCabinet;
+      if (this.state.isLoadingCabinet !== isLoadingCabinet) this.setState({
+        isLoadingCabinet: isLoadingCabinet
+      });
+      this.width = width;
+      this.height = height;
+      var allLines;
+      var allLineRects;
+      var allItemRect;
+
+      // handle camera setting
+      switch (this.props.state.mode) {
+        case MODE_ELEVATION_VIEW:
+          // when Elevation mode (camera: Orthographic)
+          var cameraRect = handleCamRect(width, height, ceilHeight, this.state.lineLength);
+          // camera size
+          this.camera.left = -cameraRect.width / 2;
+          this.camera.right = cameraRect.width / 2;
+          this.camera.top = cameraRect.height / 2;
+          this.camera.bottom = -cameraRect.height / 2;
+          //camera position
+          this.camera.position.y = ceilHeight / 2;
+          break;
+        case MODE_3D_VIEW:
+          // when 3D mode (camera: Perspective)
+          this.camera.aspect = width / height;
+          break;
+      }
+      this.camera.updateProjectionMatrix();
+      var data = nextProps.state.scene;
+      var layer = data.getIn(['layers', data.selectedLayer]);
+      var self = this;
+      function implementBacksplash() {
+        if (isElevationView(self.props.state.mode)) return; // apply backsplash when just 3D_mode, not elevation_mode
+        var allItems = GeometryUtils.getAllItemSpecified(nextProps.state.scene, actions.catalog, BASE_CABINET_LAYOUTPOS);
+        var i,
+          items = [];
+        for (i = 0; i < allItems.others.length; i++) items.push(allItems.others[i]);
+        if (allItems.cur) items.push(allItems.cur);
+        for (i = 0; i < items.length; i++) {
+          var calcRect = GeometryUtils.getCalcRectFromItem3D(items[i]);
+          var visible = GeometryUtils.isSnappedLine(calcRect, allLineRects);
+          actions.itemsActions.setBacksplashVisible(items[i].itemInfo.id, visible);
+          createBacksplash(items[i], nextProps.state.scene.getIn(['layers', nextProps.state.scene.selectedLayer]), planData, nextProps.state.scene);
+        }
+      }
+      function implementWarningBox() {
+        var holeItems = GeometryUtils.getHoleItems(layer);
+        var i,
+          items = [];
+        for (i = 0; i < allItemRect.others.length; i++) items.push(allItemRect.others[i]);
+        if (allItemRect.cur) items.push(allItemRect.cur);
+        for (i = 0; i < items.length; i++) checkCabinetOverlap({
+          x: items[i].pos.x,
+          y: items[i].pos.y
+        }, items[i], holeItems, planData);
+      }
+      var prepareSnapSpec = function prepareSnapSpec(layer) {
+        allLines = GeometryUtils.getAllLines(layer);
+        allLineRects = GeometryUtils.buildRectFromLines(layer, allLines);
+        allItemRect = GeometryUtils.getAllItemSpecified(_this4.props.state.scene, actions.catalog, [WALL_CABINET_LAYOUTPOS, TALL_CABINET_LAYOUTPOS]);
+      };
+      var layer1 = this.props.state.scene.getIn(['layers', data.selectedLayer]);
+      if (this.state.showflag) {
+        prepareSnapSpec(layer);
+        implementBacksplash();
+        implementWarningBox();
+        this.setState({
+          showflag: false
+        });
+      }
+      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);
+        var changedValuesJS = changedValues.toJS();
+        var selectedItemID = layer.selected.items.size ? layer.selected.items.get(0) : null;
+        var selectedItem = selectedItemID ? layer.items.get(selectedItemID) : null;
+        var shouldRefreshSelectedToolObject = selectedItem && changedValuesJS.some(function (_ref2) {
+          var path = _ref2.path;
+          var modifiedPath = path.split('/');
+          return modifiedPath[1] === 'layers' && modifiedPath[2] === String(data.selectedLayer) && modifiedPath[3] === 'items' && modifiedPath[4] === String(selectedItemID) && modifiedPath[5] === 'mirrored';
+        });
+        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')) {
+          if (!isInteractiveMove) {
+            self.setState({
+              isLoading: true
+            });
+          }
+          if (self.props.downloadFlag) {
+            self.setState({
+              waitForRender: 0
+            });
+            switch (self.props.state.mode) {
+              case MODE_ELEVATION_VIEW:
+                self.props.setIsLoadingElevation('front', true);
+                break;
+              case MODE_3D_VIEW:
+                self.props.setIsLoading3D(true);
+                break;
+            }
+          }
+          self.renderer.domElement.style.display = 'none';
+        }
+        if (nextProps.state.scene.showfg == true) {
+          implementBacksplash();
+          implementWarningBox();
+        } else {
+          deleteSpecifiedMeshObjects('TransformBox');
+        }
+        var _this$state = this.state,
+          toolObj = _this$state.toolObj,
+          angleObj = _this$state.angleObj;
+        var _updateScene = updateScene(this.planData, nextProps.state.scene, this.props.state.scene, changedValuesJS, actions, this.context.catalog, nextProps.state.mode, toolObj, angleObj, nextProps.state.draggingSupport),
+          promise = _updateScene.promise;
+        if (shouldRefreshSelectedToolObject && this.refreshToolObject) {
+          this.refreshToolObject(selectedItem);
+        }
+        self.setState();
+        promise.then(function (p1Value) {
+          self.setState({
+            isLoading: false
+          });
+          self.props.downloadFlag && self.setState({
+            waitForRender: 1
+          });
+          self.renderer.domElement.style.display = 'block';
+        });
+        if (nextProps.state.getIn(['scene', 'isEndDragging'])) {
+          nextProps.state.setIn(['scene', 'isEndDragging'], false);
+        }
+      }
+      this.renderer.setSize(width, height);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$state2 = this.state,
+        isLoading = _this$state2.isLoading,
+        isLoadingCabinet = _this$state2.isLoadingCabinet;
+      if (isLoading) {
+        if (this.props.downloadFlag) {
+          this.renderer.domElement.style.display = 'none';
+          return /*#__PURE__*/React.createElement("div", {
+            style: {
+              alignItems: ' center',
+              width: this.props.width,
+              height: this.props.height,
+              display: 'inline-flex',
+              justifyContent: 'center'
+            }
+          }, /*#__PURE__*/React.createElement("img", {
+            style: {
+              width: '70px',
+              height: '70px',
+              animation: 'spin 2s linear infinite'
+            },
+            src: '/assets/img/loading/loading.gif',
+            alt: "img"
+          }));
+        } else {
+          document.getElementById('front') && (document.getElementById('front').style.display = 'none');
+          this.renderer.domElement.style.display = 'none';
+          return /*#__PURE__*/React.createElement("div", {
+            style: {
+              textAlign: 'center',
+              width: '100%'
+            }
+          }, /*#__PURE__*/React.createElement("img", {
+            style: {
+              animation: 'spin 2s linear infinite',
+              position: "absolute",
+              top: "50%",
+              width: '70px',
+              height: '70px'
+            },
+            src: '/assets/img/loading/loading.gif',
+            alt: "img"
+          }));
+        }
+      } else if (isLoadingCabinet) {
+        this.renderer.domElement.style.pointerEvents = 'none';
+        document.getElementById('front') && (document.getElementById('front').style.display = 'none');
+        this.renderer.domElement.style.opacity = '0.4';
+        return /*#__PURE__*/React.createElement("div", {
+          style: {
+            textAlign: 'center',
+            width: '100%'
+          }
+        }, /*#__PURE__*/React.createElement("img", {
+          style: {
+            animation: 'spin 2s linear infinite',
+            position: "absolute",
+            top: "50%",
+            width: '70px',
+            height: '70px'
+          },
+          src: '/assets/img/loading/loading.gif',
+          alt: "img"
+        }));
+      } else {
+        this.renderer.domElement.style.pointerEvents = 'auto';
+        this.renderer.domElement.style.opacity = '1';
+        !this.props.downloadFlag && document.getElementById('front') && (document.getElementById('front').style.display = 'block');
+        return /*#__PURE__*/React.createElement('div', {
+          ref: 'canvasWrapper'
+        });
+      }
+    }
+  }]);
+}(React.Component);
+export { Scene3DViewer as default };
+Scene3DViewer.propTypes = {
+  state: PropTypes.object.isRequired,
+  width: PropTypes.number.isRequired,
+  height: PropTypes.number.isRequired,
+  replaceCabinet: PropTypes.func.isRequired
+};
+Scene3DViewer.contextTypes = {
+  areaActions: PropTypes.object.isRequired,
+  holesActions: PropTypes.object.isRequired,
+  itemsActions: PropTypes.object.isRequired,
+  linesActions: PropTypes.object.isRequired,
+  sceneActions: PropTypes.object.isRequired,
+  projectActions: PropTypes.object.isRequired,
+  catalog: PropTypes.object
+};