kitchen-simulator 4.1.6-react-18 → 5.0.0-react.18

package/lib/components/viewer3d/viewer3d.js

@@ -1,2697 +0,0 @@
-'use strict';
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _readOnlyError2 = _interopRequireDefault(require("@babel/runtime/helpers/readOnlyError"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _reactDom = _interopRequireDefault(require("react-dom"));
-var Three = _interopRequireWildcard(require("three"));
-var _sceneCreator = require("./scene-creator");
-var _threeMemoryCleaner = require("./three-memory-cleaner");
-var _immutablediff = _interopRequireDefault(require("immutablediff"));
-var SharedStyle = _interopRequireWildcard(require("../../shared-style"));
-var _constants = require("../../constants");
-var _util = require("util");
-var _geometry = require("../../utils/geometry");
-var _convertUnitsLite = require("../../utils/convert-units-lite");
-var _export = require("../../utils/export");
-var _helper = require("../../utils/helper");
-var _RGBELoader = require("three/examples/jsm/loaders/RGBELoader");
-var _cameraControls = _interopRequireDefault(require("camera-controls"));
-var _objectsUtils = require("../../utils/objects-utils");
-var _utils = require("../viewer2d/utils");
-var _AppContext = _interopRequireDefault(require("../../AppContext"));
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(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; })(); }
-_cameraControls["default"].install({
-  THREE: Three
-});
-var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component) {
-  function Scene3DViewer(props) {
-    var _this;
-    (0, _classCallCheck2["default"])(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 = {};
-    _this.width = props.width;
-    _this.height = props.height;
-    _this.renderingID = 0;
-    _this.canvasWrapperRef = /*#__PURE__*/_react["default"].createRef();
-    var mode = props.state.mode;
-    if (!window.__elevationRendererDownload) {
-      window.__elevationRendererDownload = {};
-    }
-    switch (mode) {
-      case _constants.MODE_IDLE_3D:
-        _this.renderer = window.__threeRenderer || new Three.WebGLRenderer({
-          preserveDrawingBuffer: true,
-          alpha: true,
-          antialias: true
-        });
-        break;
-      case _constants.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;
-  }
-  (0, _inherits2["default"])(Scene3DViewer, _React$Component);
-  return (0, _createClass2["default"])(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 ((0, _helper.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
-            (0, _objectsUtils.vectorIntersectWithMesh)(spot1, scene3D.getObjectByName('floor')) && addSpotLight('0xffffff', 0.8, spot1, spot1, spotlightDis);
-            (0, _objectsUtils.vectorIntersectWithMesh)(spot2, scene3D.getObjectByName('floor')) && addSpotLight('0xffffff', 0.8, spot2, spot2, spotlightDis);
-            (0, _objectsUtils.vectorIntersectWithMesh)(spot3, scene3D.getObjectByName('floor')) && addSpotLight('0xffffff', 0.8, spot3, spot3, spotlightDis);
-            (0, _objectsUtils.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 _constants.MODE_ELEVATION_VIEW:
-            self.props.setIsLoadingElevation('front', true);
-            break;
-          case _constants.MODE_3D_VIEW:
-            self.props.setIsLoading3D(true);
-            break;
-        }
-      }
-      var _parseData = (0, _sceneCreator.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 (!(0, _helper.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);
-      });
-      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 = (0, _convertUnitsLite.convert)(layer.ceilHeight).from(layer.unit).to(_constants.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;
-      /** 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 = _export.GeometryUtils.getHoleItems(layer);
-      var removeSnapBox = function removeSnapBox() {
-        if (snapBox != null) {
-          planData.plan.remove(snapBox);
-          (0, _threeMemoryCleaner.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 = _export.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 = _export.GeometryUtils.getAllLines(layer);
-        allLineRects = _export.GeometryUtils.buildRectFromLines(layer, allLines);
-        allItemRect = _export.GeometryUtils.getAllItems(_this2.props.state.scene, actions.catalog, allLineRects);
-        allItemSnap = _export.GeometryUtils.getAllItemSnap(allItemRect);
-        allLineSnap = _export.GeometryUtils.getAllLineSnap(allLineRects, allItemRect.cur);
-        allRect = allItemRect.others.concat(allLineRects);
-        allItemSnap = _export.GeometryUtils.validateSnaps(allItemSnap, allRect);
-        allLineSnap = _export.GeometryUtils.validateSnaps(allLineSnap, allRect);
-        allArea = _export.GeometryUtils.getAllArea(layer);
-      };
-      var prepareSnapSpec = function prepareSnapSpec(layer) {
-        allLines = _export.GeometryUtils.getAllLines(layer);
-        allLineRects = _export.GeometryUtils.buildRectFromLines(layer, allLines);
-        allItemRect = _export.GeometryUtils.getAllItemSpecified(_this2.props.state.scene, actions.catalog, _constants.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 = cat.info.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 ocatid = _item.type;
-          var ocat = catalog.elements[ocatid];
-          var olayoutpos = ocat.info.layoutpos;
-          if (!(layoutpos === _constants.BASE_CABINET_LAYOUTPOS && olayoutpos === _constants.WALL_CABINET_LAYOUTPOS || layoutpos === _constants.WALL_CABINET_LAYOUTPOS && olayoutpos === _constants.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[(0, _utils.returnReplaceableDeepSearchType)(ocatid)];
-          var otherItem = {
-            item: _item2,
-            cat: ocat
-          };
-          if (_export.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);
-            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 ((0, _geometry.verticesDistance)(oPos, new Three.Vector2(items[_i5].x, items[_i5].y)) > (0, _geometry.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;
-        for (; target.parent != null;) {
-          if (target.name == 'pivot') break;
-          target = target.parent;
-        }
-        var source = obj.parent.parent.parent;
-        if (target.userData.type == 'item') {
-          var sRot = layer.getIn(['items', source.userData.itemId]).rotation;
-          var tRot = layer.getIn(['items', target.userData.itemId]) ? layer.getIn(['items', target.userData.itemId]).rotation : 0;
-          var item = layer.getIn(['items', source.userData.itemId]);
-          var layoutType = item.layoutpos;
-          var altitudeLength = (0, _convertUnitsLite.convert)(item.properties.getIn(['altitude', '_length'])).from('in').to('cm');
-          var 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);
-              (0, _threeMemoryCleaner.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 === _constants.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 _layoutType = _item3.layoutpos;
-            var _altitudeLength = (0, _convertUnitsLite.convert)(_item3.properties.getIn(['altitude', '_length'])).from('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);
-                (0, _threeMemoryCleaner.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 === _constants.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 createToolObject = function createToolObject() {
-        var canvas = document.createElement('canvas');
-        canvas.width = 100;
-        canvas.height = 200;
-        canvas.style.width = 50 + 'px';
-        canvas.style.height = 100 + 'px';
-        var ctx = canvas.getContext('2d');
-        ctx.fillStyle = '#FFFFFF';
-        ctx.strokeStyle = '#000000';
-        ctx.beginPath();
-        ctx.arc(50, 50, 40, 0, 4 * Math.PI);
-        ctx.fill();
-        ctx.stroke();
-        var img1 = new Image();
-        img1.crossOrigin = 'anonymous';
-        img1.src = '/assets/img/svg/3d_item_rotation.svg';
-        img1.onload = function () {
-          ctx.drawImage(img1, 16, 16, 68, 68);
-        };
-        ctx.beginPath();
-        ctx.arc(50, 150, 40, 0, 4 * Math.PI);
-        ctx.fill();
-        ctx.stroke();
-        var img2 = new Image();
-        img2.crossOrigin = 'anonymous';
-        img2.src = '/assets/img/svg/3d_item_move.svg';
-        img2.onload = function () {
-          ctx.drawImage(img2, 16, 116, 68, 68);
-        };
-        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 = _constants.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;
-      };
-      var toolTexture = new Three.Texture(createToolObject());
-      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';
-      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;
-        if (!(0, _helper.isEmpty)(evtType) && !(0, _helper.isEmpty)(evtElement)) {
-          var _currentObject, _this2$props$onIntern, _this2$props;
-          var payload = evtElement === null || evtElement === void 0 ? void 0 : evtElement.toJS();
-          if (((_currentObject = currentObject) === null || _currentObject === void 0 ? void 0 : _currentObject.prototype) === 'lines') {
-            // caculating length of selected line//
-            var v_a = layer.vertices.get(currentObject.vertices.get(0));
-            var v_b = layer.vertices.get(currentObject.vertices.get(1));
-            var distance = _export.GeometryUtils.pointsDistance(v_a.x, v_a.y, v_b.x, v_b.y);
-            var _length = (0, _convertUnitsLite.convert)(distance).from('cm').to('in');
-            payload.length = _length;
-            //////////////////////////////////////
-          } else if ((evtElement === null || evtElement === void 0 ? void 0 : evtElement.prototype) === 'items') {
-            // check this cabinet has warning box
-            payload.isWarning = (0, _utils.isWarningItem)(evtElement);
-            // check this item is available molding
-            payload.isMoldingAvailable = _export.MoldingUtils.isEnableItemForMolding(layer, evtElement); // check this item is snapped to wall
-            payload.isAttachedWall = _export.MoldingUtils.isAttachedWall(layer, evtElement);
-            // update distArray
-            if (pointArray) payload.distArray = pointArray;
-          }
-          (_this2$props$onIntern = (_this2$props = _this2.props).onInternalEvent) === null || _this2$props$onIntern === void 0 || _this2$props$onIntern.call(_this2$props, {
-            type: evtType,
-            value: payload
-          });
-        }
-      };
-      this.mouseDownEvent = function (event) {
-        gridPlanOrigin = gridPlane.position;
-        gridMatrix.copy(gridPlane.matrixWorld).invert();
-        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 = (0, _convertUnitsLite.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
-         */
-        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 or move icon).
-        if (toolIntersects.length > 0) {
-          updateSelectedObject();
-          // it determines whether mouse is over on rotation icon or move icon.
-          var distance = Math.sqrt(Math.pow((toolIntersects[0].uv.x - 0.5) * 50, 2) + Math.pow((toolIntersects[0].uv.y - 0.25) * 100, 2));
-          // move icon selected
-          if (distance <= 20) {
-            transflag = 2;
-          } else {
-            distance = Math.sqrt(Math.pow((toolIntersects[0].uv.x - 0.5) * 50, 2) + Math.pow((toolIntersects[0].uv.y - 0.75) * 100, 2));
-            // rotation icon selected
-            if (distance <= 20) {
-              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 == _constants.MODE_DRAWING_ITEM_3D) return;
-        if (isSelected) {
-          !_this2.props.downloadFlag && _this2.props.setToolbar('');
-          if (intersects.length > 0 && !isNaN(intersects[0].distance)) {
-            var _i1;
-            for (_i1 = 0; _i1 < intersects.length; _i1++) {
-              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;
-                // this.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 = (0, _convertUnitsLite.convert)(alti).from(_unit).to(_this2.props.state.scene.unit);
-                }
-                getPoint({
-                  offsetX: event.offsetX - 50,
-                  offsetY: event.offsetY
-                }, alti);
-                if ((0, _util.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 && !(0, _helper.isElevationView)(mode)) {
-                cameraControls.mouseButtons.left = _cameraControls["default"].ACTION.NONE;
-                selectedFlag = false;
-              } else {
-                isSelected = false;
-                // this.context.projectActions.unselectAll();
-                scene3D.remove(toolObj);
-                _this2.context.itemsActions.removeReplacingSupport();
-              }
-            }
-          } else {
-            isSelected = false;
-            // this.context.projectActions.unselectAll();
-            scene3D.remove(toolObj);
-            _this2.context.itemsActions.removeReplacingSupport();
-            return;
-          }
-        }
-      };
-      this.mouseUpEvent = function (event) {
-        var internalType = ''; // internalEvent type - select/drag/draw
-        var selectedElement; // internalEvent data
-        firstMove = 0;
-        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 = (0, _convertUnitsLite.convert)(altitude).from(unit).to(_this2.props.state.scene.unit);
-        }
-        scene3D.remove(angleObj);
-        scene3D.remove(toolObj);
-        if (!_this2.props.downloadFlag && !_this2.props.state.mode.includes('ING')) {
-          _this2.props.setToolbar('');
-        }
-        if (_this2.props.state.mode == _constants.MODE_DRAWING_ITEM_3D) {
-          if (Point.x > _this2.props.state.scene.width) Point.x = _this2.props.state.width;
-          if (Point.y > _this2.props.state.scene.height) Point.y = _this2.props.state.height;
-          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 = _export.GeometryUtils.getPoylgonPoints(layer);
-            // if cursor is outside of room
-            if (polygon.length > 0 && !_export.GeometryUtils.ContainsPoint(polygon, Point.x, Point.y)) {
-              actions.itemsActions.endDrawingItem(_this2.props.state.scene.selectedLayer, sPoint.x, sPoint.y);
-            } 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 _constants.MODE_DRAGGING_ITEM_3D:
-          case _constants.MODE_DRAGGING_HOLE_3D:
-            internalType = _constants.INTERNAL_EVENT_DRAG_ELEMENT;
-            break;
-          case _constants.MODE_ROTATING_ITEM_3D:
-            internalType = _constants.INTERNAL_EVENT_ROTATE_ELEMENT;
-            break;
-          case _constants.MODE_DRAWING_HOLE_3D:
-            internalType = _constants.INTERNAL_EVENT_DRAW_ELEMENT;
-            break;
-          case _constants.MODE_IDLE_3D:
-            internalType = _constants.INTERNAL_EVENT_SELECT_ELEMENT;
-            break;
-        }
-        if (_this2.props.state.mode == _constants.MODE_DRAGGING_ITEM_3D) {
-          _this2.context.itemsActions.endDraggingItem3D();
-        }
-        if (_this2.props.state.mode == _constants.MODE_ROTATING_ITEM_3D) {
-          _this2.context.itemsActions.endRotatingItem3D(sPoint.x, sPoint.y);
-        }
-        getPoint(event, altitude);
-        if (_this2.props.state.mode == _constants.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["default"].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;
-          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);
-                  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();
-          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 () {
-                  (0, _sceneCreator.getDistances)(layer);
-                  var selectedItem = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
-                  if ((0, _util.isUndefined)(selectedItem)) return;
-                  selectedElement = _this2.props.state.scene.layers.get(selectedObject.layerID).items.get(selectedObject.itemID);
-                  var itemPos = selectedItem.position.clone();
-                  if (intersects[_i10].object.parent && intersects[_i10].object.parent.parent.userData.itemId === selectedItem.userData.itemId) {
-                    toolObj.position.set(intersects[_i10].point.x, intersects[_i10].point.y, intersects[_i10].point.z);
-                  } else {
-                    toolObj.position.set(planData.plan.position.x + itemPos.x, selectedElement.category === 'lighting' ? -planData.plan.position.y - selectedElement.properties.get('height').get('length') : planData.plan.position.y + selectedItem.children[0].position.y, planData.plan.position.z + itemPos.z);
-                  }
-                  scene3D.add(toolObj);
-                  _this2.setState({
-                    toolObj: toolObj
-                  });
-                  // showItemButtons(layer.getIn(['items', selectedObject.itemID]), currentObject, event, camera, this.renderer);
-                  var pointArray = [],
-                    cnt = 0;
-                  pointArray.push([_sceneCreator.fVLine[0].userData.distance, 90]);
-                  pointArray.push([_sceneCreator.fVLine[1].userData.distance, -90]);
-                  pointArray.push([_sceneCreator.fVLine[2].userData.distance, 180]);
-                  pointArray.push([_sceneCreator.fVLine[3].userData.distance, 0]);
-                  pointArray.forEach(function (pointElement, index) {
-                    if (pointElement[0] == undefined) pointArray[index][0] = 0;
-                  });
-                  pointArray.forEach(function (pointElement) {
-                    if (pointElement[0] == 0) cnt++;
-                  });
-                  if (cnt == 4 || cnt == 3) {
-                    pointArray[0][0] = 100;
-                    pointArray[1][0] = 100;
-                  }
-                  actions.itemsActions.storeDistArray(layer.id, selectedObject.itemID, pointArray);
-                  internalType = internalType ? internalType : _constants.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 === _constants.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 {
-              isSelected = false;
-              _this2.context.projectActions.unselectAll();
-              switch (true) {
-                case 'holeID' in selectedObject:
-                  actions.holesActions.endDraggingHole3D(sPoint.x, sPoint.y);
-                  break;
-                default:
-                  _this2.context.itemsActions.removeReplacingSupport();
-                  break;
-              }
-            }
-            bMove = false;
-            bRotate = false;
-            bMoveUP = false;
-            if (isSelected) {
-              prepareSnap(layer);
-              selectedObj = allItemRect.cur;
-            }
-          } else {
-            (0, _sceneCreator.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 = (0, _convertUnitsLite.convert)(alti).from(_unit2).to(_this2.props.state.scene.unit);
-            }
-            getPoint(event, alti);
-            if (bRotate) {
-              var _intersects$_i;
-              var selectedItem = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
-              if ((0, _util.isUndefined)(selectedItem)) return;
-              selectedElement = _this2.props.state.scene.layers.get(selectedObject.layerID).items.get(selectedObject.itemID);
-              var itemPos = selectedItem.position.clone();
-              if (((_intersects$_i = intersects[_i10]) === null || _intersects$_i === void 0 || (_intersects$_i = _intersects$_i.object) === null || _intersects$_i === void 0 || (_intersects$_i = _intersects$_i.parent) === null || _intersects$_i === void 0 || (_intersects$_i = _intersects$_i.parent) === null || _intersects$_i === void 0 || (_intersects$_i = _intersects$_i.userData) === null || _intersects$_i === void 0 ? void 0 : _intersects$_i.itemId) === selectedItem.userData.itemId) {
-                toolObj.position.set(intersects[_i10].point.x, intersects[_i10].point.y, intersects[_i10].point.z);
-              } else {
-                toolObj.position.set(planData.plan.position.x + itemPos.x, selectedElement.category === 'lighting' ? -planData.plan.position.y - selectedElement.properties.get('height').get('length') : planData.plan.position.y + selectedItem.children[0].position.y, planData.plan.position.z + itemPos.z);
-              }
-              scene3D.add(toolObj);
-              _this2.setState({
-                toolObj: toolObj
-              });
-              _this2.context.itemsActions.endRotatingItem3D(Point.x, Point.y);
-              bRotate = false;
-            }
-            if (bMove) {
-              bMove = false;
-              var _selectedItem = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
-              if ((0, _util.isUndefined)(_selectedItem)) return;
-              selectedElement = _this2.props.state.scene.layers.get(selectedObject.layerID).items.get(selectedObject.itemID);
-              var _itemPos = _selectedItem.position.clone();
-              if (intersects[_i10].object.parent.parent.userData.itemId === _selectedItem.userData.itemId) {
-                toolObj.position.set(intersects[_i10].point.x, intersects[_i10].point.y, intersects[_i10].point.z);
-              } else {
-                toolObj.position.set(planData.plan.position.x + _itemPos.x, selectedElement.category === 'lighting' ? -planData.plan.position.y - selectedElement.properties.get('height').get('length') : planData.plan.position.y + _selectedItem.children[0].position.y, planData.plan.position.z + _itemPos.z);
-              }
-              scene3D.add(toolObj);
-              _this2.setState({
-                toolObj: toolObj
-              });
-              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(layer);
-            selectedObj = allItemRect.cur;
-          }
-        }
-        sendInternalEvent(internalType, selectedElement);
-      };
-      this.mouseEnterEvent = function (event) {
-        if (_this2.props.state.mode !== _constants.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];
-        (0, _sceneCreator.deleteSpecifiedMeshObjects)('TransformBox');
-        (0, _sceneCreator.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 = (0, _convertUnitsLite.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 = _export.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 = _export.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 (_export.GeometryUtils.ContainsPoint(polygon, Point.x, Point.y)) {
-          // if cursor position is available to place the item
-          if (_export.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 (!_export.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 = _export.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 (_export.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 (_export.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 (!_export.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 = (0, _convertUnitsLite.convert)(altitude).from(unit).to(_this2.props.state.scene.unit);
-        }
-        if (_this2.props.state.mode === _constants.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');
-            (0, _sceneCreator.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 === _constants.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];
-            (0, _sceneCreator.deleteSpecifiedMeshObjects)('TransformBox');
-            (0, _sceneCreator.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 = _export.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 = _export.GeometryUtils.getPoylgonPoints(_layer);
-            if (polygonPoint.length > 0) {
-              var PolygonSect = _export.GeometryUtils.ContainsPoint(polygonPoint, _nx, _ny);
-              if (!PolygonSect) {
-                var _GeometryUtils$calcCr2 = _export.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 = _export.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;
-          (0, _sceneCreator.deleteSpecifiedMeshObjects)('WarningBox' + selectedObject.itemID);
-          (0, _sceneCreator.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');
-              (0, _sceneCreator.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;
-            (0, _sceneCreator.deleteSpecifiedMeshObjects)('WarningBox' + selectedObject.itemID);
-            (0, _sceneCreator.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 = _export.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 = _export.GeometryUtils.getPoylgonPoints(_layer3);
-            if (_polygonPoint.length > 0) {
-              var _PolygonSect = _export.GeometryUtils.ContainsPoint(_polygonPoint, _nx3, _ny3);
-              if (!_PolygonSect) {
-                var _GeometryUtils$calcCr3 = _export.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 = _export.GeometryUtils.getPoylgonPoints(_layer3);
-            if (polygon.length > 0) {
-              var Sect = _export.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 = (0, _objectsUtils.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 (!(0, _helper.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 (!(0, _helper.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 item3D = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
-        (0, _sceneCreator.getDistances)(layer);
-        var pointArray = [],
-          cnt = 0;
-        pointArray.push([_sceneCreator.fVLine[0].userData.distance, 90]);
-        pointArray.push([_sceneCreator.fVLine[1].userData.distance, -90]);
-        pointArray.push([_sceneCreator.fVLine[2].userData.distance, 180]);
-        pointArray.push([_sceneCreator.fVLine[3].userData.distance, 0]);
-        pointArray.forEach(function (pointElement, index) {
-          if (pointElement[0] == undefined) pointArray[index][0] = 0;
-        });
-        pointArray.forEach(function (pointElement) {
-          if (pointElement[0] == 0) cnt++;
-        });
-        if (cnt == 4 || cnt == 3) {
-          pointArray[0][0] = 100;
-          pointArray[1][0] = 100;
-        }
-        actions.itemsActions.storeDistArray(selectedObject.layerID, selectedObject.itemID, pointArray);
-        var minDis = _sceneCreator.fVLine[0].userData.distance;
-        var snapObj = _sceneCreator.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 < _sceneCreator.fVLine.length; _i12++) {
-          if (minDis > _sceneCreator.fVLine[_i12].userData.distance) {
-            minDis = _sceneCreator.fVLine[_i12].userData.distance;
-            snapObj = _sceneCreator.fVLine[_i12];
-          }
-        }
-        if (snapBox == null) {
-          snapFlag = false;
-        }
-        actions.sceneActions.updateMovingState(false);
-        if (minDis < snapDelta && !snapFlag) {
-          _this2.snap(snapObj, layer);
-          snapFlag = true;
-          (0, _sceneCreator.getDistances)(layer);
-          var _i13 = 0;
-          for (_i13 = 0; _i13 < _sceneCreator.fVLine.length; _i13++) {
-            if (_sceneCreator.fVLine[_i13].userData.distance < snapDelta) {
-              break;
-            }
-          }
-          if (_i13 === _sceneCreator.fVLine.length) backsplashVisible = false;else backsplashVisible = true;
-        }
-        actions.itemsActions.setBacksplashVisible(selectedObject.itemID, backsplashVisible);
-      };
-      this.onkeydown = function (event) {
-        if (_this2.props.keyDownEnable && !(0, _helper.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;
-              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 = this.canvasWrapperRef.current;
-      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 ((0, _util.isUndefined)(currentObject)) return;
-            var selItem = _this2.props.state.scene.layers.get(selectedObject.layerID).items.get(selectedObject.itemID);
-            var itemPos = currentObject.position.clone();
-            toolObj.position.set(planData.plan.position.x + itemPos.x, selItem.category === 'lighting' ? -planData.plan.position.y - selItem.properties.get('height').get('length') : planData.plan.position.y + currentObject.children[0].position.y, planData.plan.position.z + itemPos.z);
-            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 ((0, _helper.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 ((0, _helper.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 = (0, _convertUnitsLite.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 (_export.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 = _export.GeometryUtils.pointsDistance(x1, y1, x2, y2);
-          self.setState({
-            lineLength: lineLength
-          });
-          var cameraRect = (0, _helper.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.RGBELoader().load('/assets/brown_photostudio_02_1k.hdr', function (texture) {
-            texture.mapping = Three.EquirectangularReflectionMapping;
-            scene3D.environment = texture;
-            texture.dispose();
-          });
-        }
-        // Camera Controls
-        if (!(0, _helper.isElevationView)(state.mode)) {
-          cameraControls = new _cameraControls["default"](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 ((0, _helper.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 (!(0, _helper.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)], (0, _readOnlyError2["default"])("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 ((0, _helper.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 (!(0, _helper.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);
-      }
-      (0, _threeMemoryCleaner.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: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      var _this4 = this;
-      // Early return if downloadFlag and state are unchanged or scene is empty
-      if (this.props.downloadFlag && (0, _immutablediff["default"])(prevProps.state, this.props.state).toJS().length == 0 || (0, _helper.isEmpty)(this.props.state.scene)) {
-        return;
-      }
-      var _this$props = this.props,
-        width = _this$props.width,
-        height = _this$props.height;
-      var selectedLayer = this.props.state.getIn(['scene', 'layers', this.props.state.scene.selectedLayer]);
-      var ceilHeight = (0, _convertUnitsLite.convert)(selectedLayer.ceilHeight).from(selectedLayer.unit).to(this.props.state.scene.unit);
-      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 = this.props.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 (prevProps.state.mode) {
-        case _constants.MODE_ELEVATION_VIEW:
-          // when Elevation mode (camera: Orthographic)
-          var cameraRect = (0, _helper.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 _constants.MODE_3D_VIEW:
-          // when 3D mode (camera: Perspective)
-          this.camera.aspect = width / height;
-          break;
-      }
-      this.camera.updateProjectionMatrix();
-      var data = this.props.state.scene;
-      var layer = data.getIn(['layers', data.selectedLayer]);
-      var self = this;
-      function implementBacksplash() {
-        if ((0, _helper.isElevationView)(self.props.state.mode)) return;
-        var allItems = _export.GeometryUtils.getAllItemSpecified(self.props.state.scene, actions.catalog, _constants.BASE_CABINET_LAYOUTPOS);
-        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 = _export.GeometryUtils.getCalcRectFromItem3D(items[i]);
-          var visible = _export.GeometryUtils.isSnappedLine(calcRect, allLineRects);
-          actions.itemsActions.setBacksplashVisible(items[i].itemInfo.id, visible);
-          (0, _sceneCreator.createBacksplash)(items[i], self.props.state.scene.getIn(['layers', self.props.state.scene.selectedLayer]), planData, self.props.state.scene);
-        }
-      }
-      function implementWarningBox() {
-        var holeItems = _export.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++) (0, _sceneCreator.checkCabinetOverlap)({
-          x: items[i].pos.x,
-          y: items[i].pos.y
-        }, items[i], holeItems, planData);
-      }
-      var prepareSnapSpec = function prepareSnapSpec(layer) {
-        allLines = _export.GeometryUtils.getAllLines(layer);
-        allLineRects = _export.GeometryUtils.buildRectFromLines(layer, allLines);
-        allItemRect = _export.GeometryUtils.getAllItemSpecified(_this4.props.state.scene, actions.catalog, [_constants.WALL_CABINET_LAYOUTPOS, _constants.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 (this.props.state.scene !== prevProps.state.scene || this.props.state.doorStyle && this.props.state.doorStyle.get('name') !== prevProps.state.doorStyle.get('name')) {
-        var changedValues = (0, _immutablediff["default"])(prevProps.state.scene, this.props.state.scene);
-        prepareSnapSpec(layer);
-        if (this.props.state.doorStyle && this.props.state.doorStyle.get('name') === prevProps.state.doorStyle.get('name')) {
-          self.setState({
-            isLoading: true
-          });
-          if (self.props.downloadFlag) {
-            self.setState({
-              waitForRender: 0
-            });
-            switch (self.props.state.mode) {
-              case _constants.MODE_ELEVATION_VIEW:
-                self.props.setIsLoadingElevation('front', true);
-                break;
-              case _constants.MODE_3D_VIEW:
-                self.props.setIsLoading3D(true);
-                break;
-            }
-          }
-          self.renderer.domElement.style.display = 'none';
-        }
-        if (this.props.state.scene.showfg == true) {
-          implementBacksplash();
-          implementWarningBox();
-        } else {
-          (0, _sceneCreator.deleteSpecifiedMeshObjects)('TransformBox');
-        }
-        var _this$state = this.state,
-          toolObj = _this$state.toolObj,
-          angleObj = _this$state.angleObj;
-        var _updateScene = (0, _sceneCreator.updateScene)(this.planData, this.props.state.scene, prevProps.state.scene, changedValues.toJS(), actions, this.context.catalog, this.props.state.mode, toolObj, angleObj, this.props.state.draggingSupport),
-          promise = _updateScene.promise;
-        self.setState();
-        promise.then(function (p1Value) {
-          self.setState({
-            isLoading: false
-          });
-          self.props.downloadFlag && self.setState({
-            waitForRender: 1
-          });
-          self.renderer.domElement.style.display = 'block';
-        });
-        if (this.props.state.getIn(['scene', 'isEndDragging'])) {
-          this.props.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["default"].createElement("div", {
-            style: {
-              alignItems: ' center',
-              width: this.props.width,
-              height: this.props.height,
-              display: 'inline-flex',
-              justifyContent: 'center'
-            }
-          }, /*#__PURE__*/_react["default"].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["default"].createElement("div", {
-            style: {
-              textAlign: 'center',
-              width: '100%'
-            }
-          }, /*#__PURE__*/_react["default"].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["default"].createElement("div", {
-          style: {
-            textAlign: 'center',
-            width: '100%'
-          }
-        }, /*#__PURE__*/_react["default"].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["default"].createElement('div', {
-          ref: this.canvasWrapperRef
-        });
-      }
-    }
-  }]);
-}(_react["default"].Component);
-(0, _defineProperty2["default"])(Scene3DViewer, "contextType", _AppContext["default"]);
-Scene3DViewer.propTypes = {
-  state: _propTypes["default"].object.isRequired,
-  width: _propTypes["default"].number.isRequired,
-  height: _propTypes["default"].number.isRequired,
-  replaceCabinet: _propTypes["default"].func.isRequired
-};
-module.exports = exports.default;