kitchen-simulator 5.0.0-test.5 → 5.0.0-test.7

package/es/components/viewer3d/viewer3d.js

@@ -1,2504 +0,0 @@
-'use strict';
-
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function _readOnlyError(r) { throw new TypeError('"' + r + '" is read-only'); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
-function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
-function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
-function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
-function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
-function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
-function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
-import React from 'react';
-import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
-import * as Three from 'three';
-import { parseData, updateScene, visibleTransformBox, getDistances, fVLine, deleteSpecifiedMeshObjects, createBacksplash, checkCabinetOverlap } from './scene-creator';
-import { disposeScene } from './three-memory-cleaner';
-import { disposeObject } from './three-memory-cleaner';
-import diff from 'immutablediff';
-import * as SharedStyle from '../../shared-style';
-import { MODE_DRAWING_ITEM_3D, MODE_IDLE_3D, MODE_3D_VIEW, UNIT_CENTIMETER, MODE_DRAWING_HOLE_3D, SECONDARY_PURPLE_COLOR, MODE_ELEVATION_VIEW, MODE_DRAGGING_ITEM_3D, MODE_ROTATING_ITEM_3D, WALL_CABINET_LAYOUTPOS, BASE_CABINET_LAYOUTPOS, TALL_CABINET_LAYOUTPOS } from '../../constants';
-import { isUndefined } from 'util';
-import { verticesDistance } from '../../utils/geometry';
-import convert from 'convert-units';
-import { GeometryUtils } from '../../utils/export';
-import { handleCamRect, isElevationView, isEmpty } from '../../utils/helper';
-import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
-import CameraControls from 'camera-controls';
-CameraControls.install({
-  THREE: Three
-});
-import { returnReplaceableDeepSearchType } from '../viewer2d/utils';
-import { getAllMeshes, vectorIntersectWithMesh } from '../../utils/objects-utils';
-var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
-  function Scene3DViewer(props) {
-    var _this;
-    _classCallCheck(this, Scene3DViewer);
-    _this = _callSuper(this, Scene3DViewer, [props]);
-    _this.state = {
-      isLoading: false,
-      showflag: true,
-      isLoadingCabinet: props.state.scene.isLoadingCabinet,
-      toolObj: null,
-      angleObj: null,
-      waitForRender: 0,
-      lineLength: null // when view wall's elevation, that wall's length
-    };
-    _this.lastMousePosition = {};
-    _this.width = props.width;
-    _this.height = props.height;
-    _this.renderingID = 0;
-    var mode = props.state.mode;
-    if (!window.__elevationRendererDownload) {
-      window.__elevationRendererDownload = {};
-    }
-    switch (mode) {
-      case MODE_IDLE_3D:
-        _this.renderer = window.__threeRenderer || new Three.WebGLRenderer({
-          preserveDrawingBuffer: true,
-          alpha: true,
-          antialias: true
-        });
-        break;
-      case MODE_3D_VIEW:
-        _this.renderer = window.__threeRendererDownload || new Three.WebGLRenderer({
-          preserveDrawingBuffer: true,
-          alpha: true,
-          antialias: true
-        });
-        break;
-      default:
-        if (_this.props.downloadFlag) {
-          _this.renderer = window.__elevationRendererDownload[mode] || new Three.WebGLRenderer({
-            preserveDrawingBuffer: true,
-            alpha: true,
-            antialias: true
-          });
-        } else {
-          _this.renderer = window.__elevationRenderer || new Three.WebGLRenderer({
-            preserveDrawingBuffer: true,
-            alpha: true,
-            antialias: true
-          });
-        }
-        break;
-    }
-    _this.renderer.shadowMap.enabled = true;
-    _this.renderer.shadowMapSoft = true;
-    if (mode == 'MODE_IDLE_3D') {
-      window.__threeRenderer = _this.renderer;
-    } else if (mode == 'MODE_3D_VIEW') {
-      window.__threeRendererDownload = _this.renderer;
-    } else {
-      if (_this.props.downloadFlag) window.__elevationRendererDownload[mode] = _this.renderer;else window.__elevationRenderer = _this.renderer;
-    }
-    _this.renderer.domElement.style.display = 'none';
-    return _this;
-  }
-  _inherits(Scene3DViewer, _React$Component);
-  return _createClass(Scene3DViewer, [{
-    key: "componentDidMount",
-    value: function componentDidMount(nextProps) {
-      var _this2 = this;
-      var scene3D, camera, pivot, cameraControls, clock;
-      var spotLight1, spotLightTarget;
-      var actions = {
-        areaActions: this.context.areaActions,
-        holesActions: this.context.holesActions,
-        itemsActions: this.context.itemsActions,
-        sceneActions: this.context.sceneActions,
-        linesActions: this.context.linesActions,
-        projectActions: this.context.projectActions,
-        catalog: this.context.catalog
-      };
-      var self = this;
-      var state = this.props.state;
-      var mode = state.mode,
-        scene = state.scene;
-      function setupLight(scene, inbBox) {
-        if (isElevationView(mode)) {
-          var ambilight = new Three.AmbientLight('0xffffff', 3);
-          scene.add(ambilight);
-        } else {
-          var addDirLight = function addDirLight(inColor, inIntensity, inPosition) {
-            var dirLight = new Three.DirectionalLight(inColor, inIntensity);
-            dirLight.castShadow = true;
-            dirLight.shadow.mapSize.x = shadowMapSize;
-            dirLight.shadow.mapSize.y = shadowMapSize;
-            dirLight.shadow.camera.near = 0;
-            dirLight.shadow.camera.far = shadowCameraFar;
-            dirLight.shadow.camera.top = shadowCameraSize * 1.5;
-            dirLight.shadow.camera.bottom = -shadowCameraSize * 1.5;
-            dirLight.shadow.camera.left = -shadowCameraSize * 1.5;
-            dirLight.shadow.camera.right = shadowCameraSize * 1.5;
-            dirLight.position.copy(inPosition);
-            var targetObject = new Three.Object3D();
-            targetObject.position.copy(bboxCenter);
-            scene.add(targetObject);
-            dirLight.target = targetObject;
-            dirLight.target.updateMatrixWorld();
-            scene.add(dirLight);
-          };
-          var addSpotLight = function addSpotLight(inColor, inIntensity, inPosition, inTarget, inDistance) {
-            var spotLight = new Three.SpotLight();
-            spotLight.intensity = inIntensity;
-            spotLight.color.setHex(inColor);
-            spotLight.position.copy(inPosition);
-            spotLight.angle = 1.3;
-            spotLight.distance = inDistance;
-            spotLight.penumbra = 1.8;
-            spotLight.decay = 0.01;
-            spotLight.castShadow = true;
-            spotLight.shadow.intensity = 2;
-            spotLight.shadow.mapSize.width = 4096;
-            spotLight.shadow.mapSize.height = 4096;
-            var targetObject = new Three.Object3D();
-            targetObject.position.copy(new Three.Vector3(inTarget.x, 0, inTarget.z));
-            scene.add(targetObject);
-            spotLight.target = targetObject;
-            spotLight.target.updateMatrixWorld();
-            scene.add(spotLight);
-          };
-          var shadowMapSize = 2048;
-          var shadowCameraSize = Math.max(Math.abs(inbBox.min.x - inbBox.max.x), Math.abs(inbBox.min.y - inbBox.max.y), Math.abs(inbBox.min.z - inbBox.max.z)) / 2;
-          var shadowCameraFar = shadowCameraSize * 10;
-          var bboxCenter = new Three.Vector3((inbBox.min.x + inbBox.max.x) / 2, inbBox.min.y, (inbBox.min.z + inbBox.max.z) / 2);
-          var dirLightPos = new Three.Vector3(inbBox.max.x, inbBox.max.y + 1.8 * Math.abs(inbBox.max.y - inbBox.min.y), inbBox.min.z - 0.5 * Math.abs(inbBox.max.z - inbBox.min.z));
-          addDirLight('white', 1.5, dirLightPos);
-          var ceiling = scene3D.getObjectByName('ceil');
-          if (ceiling) {
-            var ceilBBox = new Three.Box3().setFromObject(ceiling);
-            var spot1 = new Three.Vector3(ceilBBox.min.x + Math.abs(ceilBBox.min.x - ceilBBox.max.x) / 4, ceilBBox.max.y - 0.5, ceilBBox.min.z + Math.abs(ceilBBox.min.z - inbBox.max.z) / 4);
-            var spot2 = new Three.Vector3(ceilBBox.min.x + Math.abs(ceilBBox.min.x - ceilBBox.max.x) / 4, ceilBBox.max.y - 0.5, ceilBBox.max.z - Math.abs(ceilBBox.min.z - ceilBBox.max.z) / 4);
-            var spot3 = new Three.Vector3(ceilBBox.max.x - Math.abs(ceilBBox.min.x - ceilBBox.max.x) / 4, ceilBBox.max.y - 0.5, ceilBBox.min.z + Math.abs(ceilBBox.min.z - ceilBBox.max.z) / 4);
-            var spot4 = new Three.Vector3(ceilBBox.max.x - Math.abs(ceilBBox.min.x - ceilBBox.max.x) / 4, ceilBBox.max.y - 0.5, ceilBBox.max.z - Math.abs(ceilBBox.min.z - ceilBBox.max.z) / 4);
-            var spotlightDis = 1.5 * Math.abs(inbBox.min.y - inbBox.max.y);
-
-            // check if spotlight is inside the room
-            vectorIntersectWithMesh(spot1, scene3D.getObjectByName('floor')) && addSpotLight('0xffffff', 0.8, spot1, spot1, spotlightDis);
-            vectorIntersectWithMesh(spot2, scene3D.getObjectByName('floor')) && addSpotLight('0xffffff', 0.8, spot2, spot2, spotlightDis);
-            vectorIntersectWithMesh(spot3, scene3D.getObjectByName('floor')) && addSpotLight('0xffffff', 0.8, spot3, spot3, spotlightDis);
-            vectorIntersectWithMesh(spot4, scene3D.getObjectByName('floor')) && addSpotLight('0xffffff', 0.8, spot4, spot4, spotlightDis);
-          }
-        }
-      }
-
-      // Load data
-      this.setState({
-        isLoading: true
-      });
-      if (self.props.downloadFlag) {
-        this.setState({
-          waitForRender: 0
-        });
-
-        // set loading bar
-        switch (self.props.state.mode) {
-          case MODE_ELEVATION_VIEW:
-            self.props.setIsLoadingElevation('front', true);
-            break;
-          case MODE_3D_VIEW:
-            self.props.setIsLoading3D(true);
-            break;
-        }
-      }
-      var _parseData = parseData(scene, actions, this.context.catalog, camera, this.renderer, state.mode),
-        promise = _parseData.promise,
-        planData = _parseData.planData;
-      promise.then(function () {
-        var objToRemove = [];
-        planData.plan.traverse(function (obj) {
-          if (obj.geometry === null) {
-            objToRemove.push(obj);
-          }
-        });
-        objToRemove.forEach(function (obj) {
-          obj.removeFromParent();
-        });
-        var bbox = new Three.Box3().setFromObject(planData.plan);
-        if (!isElevationView(state.mode)) {
-          cameraControls.fitToBox(bbox);
-        }
-        setupLight(scene3D, planData.boundingBox);
-        self.setState({
-          waitForRender: 1
-        });
-        setTimeout(function () {
-          self.setState({
-            isLoading: false
-          });
-          self.renderer.domElement.style.display = 'block';
-        }, 1500);
-      });
-      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[_i17];
-          var realVec = [];
-          data.vertices.forEach(function (vec) {
-            realVec.push(vec);
-          });
-          if (aVertices.includes(realVec[0]) && aVertices.includes(realVec[1])) {
-            height = convert(layer.ceilHeight).from(layer.unit).to(UNIT_CENTIMETER);
-            // height = data.properties.getIn(['height', 'length']);
-            return 1; // break
-          }
-        };
-        for (var _i17 = 0; _i17 < lines.length; _i17++) {
-          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 _i18 = 0; _i18 < fLen; _i18++) {
-          var sX = vertices[_i18].x;
-          var sY = vertices[_i18].y;
-          var eX = vertices[_i18 + 1].x;
-          var eY = vertices[_i18 + 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;
-
-      // end snap function variable///////////////////////
-      var backsplashVisible = false;
-      var holeItems = GeometryUtils.getHoleItems(layer);
-      var removeSnapBox = function removeSnapBox() {
-        if (snapBox != null) {
-          planData.plan.remove(snapBox);
-          disposeObject(snapBox);
-          snapBox = null;
-          targetObj = null;
-          snapFlag = false;
-        }
-      };
-      var camToGrid = new Three.Vector3();
-      var camPos = camera.position;
-      var mapCursorPosition = function mapCursorPosition(e, altitude) {
-        camToGrid.subVectors(gridPlanOrigin, camPos);
-        var camD = camToGrid.y + (altitude ? altitude : 0);
-        var rayD = rayDirection.y;
-        var intersectPt = rayDirection.multiplyScalar(camD / rayD).add(camPos);
-        intersectPt.y = gridPlanOrigin.y;
-        intersectPt.applyMatrix4(gridMatrix);
-        return {
-          x: intersectPt.x,
-          y: -intersectPt.z
-        };
-      };
-
-      /* for Snap Functions*/
-
-      var pointLineDistance = function pointLineDistance(point, line) {
-        // return distance from point to line and directional point of line
-        var pX = point.x;
-        var pY = point.y;
-        var l1x = line[0].x;
-        var l1y = line[0].y;
-        var l2x = line[1].x;
-        var l2y = line[1].y;
-        var pLine = new Three.Vector2(l1x - pX, l1y - pY);
-        var Line = new Three.Vector2(l1x - l2x, l1y - l2y);
-        var pAngle = pLine.angle();
-        var lAngle = Line.angle();
-        var pDistance = pLine.length();
-        var oDistance = Line.length();
-        var directDistance = Math.sin(pAngle - lAngle) * pDistance;
-        var lineDistance = Math.cos(pAngle - lAngle) * pDistance;
-        var dX = l1x + (l2x - l1x) * lineDistance / oDistance;
-        var dY = l1y + (l2y - l1y) * lineDistance / oDistance;
-        var dPoint = {
-          x: dX,
-          y: dY
-        };
-        return {
-          distance: directDistance,
-          point: dPoint
-        };
-      };
-      var getInterSect = function getInterSect(shape1, shape2) {
-        // return result of intersect of two shape
-        var count = 0;
-        for (var _i = 0; _i < shape1.length - 1; _i++) {
-          var sl1 = {
-            x: shape1[_i].x,
-            y: shape1[_i].y
-          };
-          var sl2 = {
-            x: shape1[_i + 1].x,
-            y: shape1[_i + 1].y
-          };
-          for (var j = 0; j < shape2.length - 1; j++) {
-            var el1 = {
-              x: shape2[j].x,
-              y: shape2[j].y
-            };
-            var el2 = {
-              x: shape2[j + 1].x,
-              y: shape2[j + 1].y
-            };
-            var flag = GeometryUtils.getLineInterSect(sl1.x, sl1.y, sl2.x, sl2.y, el1.x, el1.y, el2.x, el2.y);
-            if (flag) {
-              count++;
-              if (count > 1) return true;
-            }
-          }
-        }
-        return false;
-      };
-      this.getRectPoints = function (width, height, pos, rot) {
-        // return 4 points from it's position, width, height, and rotation info
-        var rX = width / 2;
-        var rY = height / 2;
-        var vertices = [];
-        var cRot = rot;
-        var pX = pos.x + Math.cos(cRot) * rX + Math.cos(cRot + Math.PI / 2) * rY;
-        var pY = pos.y + Math.sin(cRot) * rX + Math.sin(cRot + Math.PI / 2) * rY;
-        vertices.push({
-          x: Math.floor(pX + 0.5),
-          y: Math.floor(pY + 0.5)
-        });
-        rX = -rX;
-        pX = pos.x + Math.cos(cRot) * rX + Math.cos(cRot + Math.PI / 2) * rY;
-        pY = pos.y + Math.sin(cRot) * rX + Math.sin(cRot + Math.PI / 2) * rY;
-        vertices.push({
-          x: Math.floor(pX + 0.5),
-          y: Math.floor(pY + 0.5)
-        });
-        rY = -rY;
-        pX = pos.x + Math.cos(cRot) * rX + Math.cos(cRot + Math.PI / 2) * rY;
-        pY = pos.y + Math.sin(cRot) * rX + Math.sin(cRot + Math.PI / 2) * rY;
-        vertices.push({
-          x: Math.floor(pX + 0.5),
-          y: Math.floor(pY + 0.5)
-        });
-        rX = -rX;
-        pX = pos.x + Math.cos(cRot) * rX + Math.cos(cRot + Math.PI / 2) * rY;
-        pY = pos.y + Math.sin(cRot) * rX + Math.sin(cRot + Math.PI / 2) * rY;
-        vertices.push({
-          x: Math.floor(pX + 0.5),
-          y: Math.floor(pY + 0.5)
-        });
-        vertices.push(vertices[0]);
-        vertices.push(vertices[2]);
-        return vertices;
-      };
-      var prepareSnap = function prepareSnap(layer) {
-        allLines = GeometryUtils.getAllLines(layer);
-        allLineRects = GeometryUtils.buildRectFromLines(layer, allLines);
-        allItemRect = GeometryUtils.getAllItems(_this2.props.state.scene, actions.catalog, allLineRects);
-        allItemSnap = GeometryUtils.getAllItemSnap(allItemRect);
-        allLineSnap = GeometryUtils.getAllLineSnap(allLineRects, allItemRect.cur);
-        allRect = allItemRect.others.concat(allLineRects);
-        allItemSnap = GeometryUtils.validateSnaps(allItemSnap, allRect);
-        allLineSnap = GeometryUtils.validateSnaps(allLineSnap, allRect);
-        allArea = GeometryUtils.getAllArea(layer);
-      };
-      var prepareSnapSpec = function prepareSnapSpec(layer) {
-        allLines = GeometryUtils.getAllLines(layer);
-        allLineRects = GeometryUtils.buildRectFromLines(layer, allLines);
-        allItemRect = GeometryUtils.getAllItemSpecified(_this2.props.state.scene, actions.catalog, WALL_CABINET_LAYOUTPOS);
-        // allItemSnap = GeometryUtils.getAllItemSnap(allItemRect);
-      };
-
-      // prepareSnapSpec(layer);
-      var lineRect = function lineRect(layer) {
-        var areainfo = [];
-        layer.areas.forEach(function (area) {
-          var sz = area.vertices.size;
-          for (var i = 0; i < sz; i++) {
-            areainfo.push(area.vertices.get(i));
-          }
-        });
-        var rect = [];
-        areainfo.forEach(function (area) {
-          var vert = layer.vertices.get(area);
-          rect.push(vert.x, vert.y);
-        });
-        return rect;
-      };
-      this.collisionCheck = function (obj, pos, rot, tObj) {
-        var _this3 = this;
-        var item = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
-        var catalog = arguments.length > 5 ? arguments[5] : undefined;
-        //collision check from one object to every other object excpet target object
-        var layer = this.props.state.scene.getIn(['layers', obj.userData.layerId]);
-        var layoutpos = 'utype';
-        if (item !== null) {
-          var catid = item.type;
-          var cat = catalog.elements[catid];
-          layoutpos = 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 === BASE_CABINET_LAYOUTPOS && olayoutpos === WALL_CABINET_LAYOUTPOS || layoutpos === WALL_CABINET_LAYOUTPOS && olayoutpos === BASE_CABINET_LAYOUTPOS)) {
-            var tRot = _item.rotation;
-            var tPos = new Three.Vector2(_item.x, _item.y);
-            var tBounding = target.children[0].userData;
-            var twidth = tBounding.max.x - tBounding.min.x;
-            var tdepth = tBounding.max.z - tBounding.min.z;
-            var tVertices = this.getRectPoints(twidth, tdepth, tPos.clone(), tRot % 360 / 180 * Math.PI);
-            if (getInterSect(oVertices, tVertices)) {
-              return false;
-            }
-          }
-        }
-        datas = [];
-        layer.lines.forEach(function (data) {
-          datas.push(data);
-        });
-        var _loop2 = function _loop2() {
-            var data = datas[_i3];
-            if (data.id == obj.userData.itemId || data.id == tObj.userData.itemId) return 0; // continue
-            var item = layer.lines.getIn([data.id]);
-            // let llayoutpos = catalog.elements[item.type].info.layoutpos;
-            var vertices = [];
-            item.vertices.forEach(function (data) {
-              var vertex = layer.vertices.get(data);
-              vertices.push({
-                x: vertex.x,
-                y: vertex.y
-              });
-            });
-            var vec = new Three.Vector2(vertices[1].x - vertices[0].x, vertices[1].y - vertices[0].y);
-            var tRot = vec.angle();
-            var tPos = new Three.Vector2((vertices[0].x + vertices[1].x) / 2, (vertices[0].y + vertices[1].y) / 2);
-            var tdepth = item.properties.getIn(['thickness', 'length']);
-            var twidth = Math.sqrt(vec.x * vec.x + vec.y * vec.y);
-            var tVertices = _this3.getRectPoints(twidth, tdepth, tPos.clone(), tRot);
-            if (getInterSect(oVertices, tVertices)) {
-              return {
-                v: false
-              };
-            }
-          },
-          _ret;
-        for (var _i3 = 0; _i3 < datas.length; _i3++) {
-          _ret = _loop2();
-          if (_ret === 0) continue;
-          if (_ret) return _ret.v;
-        }
-        return true;
-      };
-      this.collisionHoleCheck = function (obj, pos, rot, tObj) {
-        var item = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
-        var catalog = arguments.length > 5 ? arguments[5] : undefined;
-        var layer = this.props.state.scene.getIn(['layers', obj.userData.layerId]);
-        var currentItem;
-        if (item !== null) {
-          var catid = item.type;
-          var cat = catalog.elements[catid];
-          currentItem = {
-            selectedItem: item,
-            cat: cat
-          };
-        }
-        var oPos = new Three.Vector2(pos.clone().x, pos.clone().y);
-        var sBounding = obj.children[0].userData;
-        var width = sBounding.max.x - sBounding.min.x;
-        var depth = sBounding.max.z - sBounding.min.z;
-        var oVertices = this.getRectPoints(width, depth, oPos.clone(), rot % 360 / 180 * Math.PI);
-        var datas = [];
-        layer.items.forEach(function (data) {
-          datas.push(data);
-        });
-        for (var _i4 = 0; _i4 < datas.length; _i4++) {
-          var data = datas[_i4];
-          if (data.id == obj.userData.itemId || data.id == tObj.userData.itemId) continue;
-          var target = planData.sceneGraph.layers[obj.userData.layerId].items[data.id];
-          if (target === undefined) {
-            console.log(data.id + ' does not exist in viewer3d/viewer3d.js collisionCheck function');
-            return false;
-          }
-          var _item2 = layer.items.getIn([data.id]);
-          var ocatid = _item2.type;
-          var ocat = catalog.elements[ocatid];
-          if (!ocat) ocat = catalog.elements[returnReplaceableDeepSearchType(ocatid)];
-          var otherItem = {
-            item: _item2,
-            cat: ocat
-          };
-          if (GeometryUtils.needSnap(currentItem, otherItem) && otherItem.cat.type != 'cabinet') {
-            var tRot = _item2.rotation;
-            var tPos = new Three.Vector2(_item2.x, _item2.y);
-            var tBounding = target.children[0].userData;
-            var twidth = tBounding.max.x - tBounding.min.x;
-            var tdepth = tBounding.max.z - tBounding.min.z;
-            var tVertices = this.getRectPoints(twidth, tdepth, tPos.clone(), tRot % 360 / 180 * Math.PI);
-            if (getInterSect(oVertices, tVertices)) {
-              return false;
-            }
-          }
-        }
-        var holes = [];
-        layer.lines.forEach(function (line) {
-          line.holes.forEach(function (holeID) {
-            var hole = layer.holes.get(holeID);
-            holes.push(hole);
-          });
-        });
-        var i = 0;
-        for (; i < holes.length; i++) {
-          var _tPos = new Three.Vector2(holes[i].x, holes[i].y);
-          var _twidth = holes[i].properties.getIn(['width', 'length']);
-          var theight = holes[i].properties.getIn(['thickness', 'length']);
-          var trot = holes[i].rotation;
-          var _tVertices = this.getRectPoints(_twidth, theight, _tPos.clone(), trot);
-          if (getInterSect(oVertices, _tVertices)) {
-            return false;
-          }
-        }
-        return true;
-      };
-      this.collisionSlide = function (item3D, originPos, layer, sVertices, tPos, item) {
-        var items = [];
-        var cur_category = '';
-        var catalog = actions.catalog;
-        if (layer.selected.items.size > 0) {
-          var selectedItem = layer.getIn(['items', layer.selected.items.get(0)]);
-          var catid = selectedItem.type;
-          var cat = catalog.elements[catid];
-          if (cat === undefined || cat === null) cat = catalog.getIn(['elements', catid]);
-          cur_category = cat.obj.category;
-        }
-        layer.items.forEach(function (data) {
-          if (data.id == selectedObject.itemID) {
-            return;
-          }
-          items.push(data.toJS());
-        });
-        var oPos = new Three.Vector2(originPos.x, -originPos.z);
-
-        // sort from distance
-        for (var _i5 = 0; _i5 < items.length - 1; _i5++) {
-          for (var j = _i5 + 1; j < items.length; j++) {
-            if (verticesDistance(oPos, new Three.Vector2(items[_i5].x, items[_i5].y)) > verticesDistance(oPos, new Three.Vector2(items[j].x, items[j].y))) {
-              var exchange = items[j];
-              items[j] = items[_i5];
-              items[_i5] = exchange;
-            }
-          }
-        }
-        var i = 0;
-        for (; i < items.length; i++) {
-          if (!items[i]) return;
-          var _target = planData.sceneGraph.layers[selectedObject.layerID].items[items[i].id];
-          if (_target === undefined) {
-            return false;
-          }
-          var _targetData = layer.items.getIn([items[i].id]);
-          var _tRot = _targetData.rotation;
-          var _tPos2 = new Three.Vector2(_targetData.x, _targetData.y);
-          var _tBounding = _target.children[0].userData;
-          var _twidth2 = _tBounding.max.x - _tBounding.min.x;
-          var _tdepth = _tBounding.max.z - _tBounding.min.z;
-          var _tVertices2 = this.getRectPoints(_twidth2, _tdepth, _tPos2.clone(), _tRot % 360 / 180 * Math.PI);
-          if (getInterSect(sVertices, _tVertices2)) {
-            break;
-          }
-        }
-        if (items.length == 0 || !items[i]) return;
-        var target = planData.sceneGraph.layers[selectedObject.layerID].items[items[i].id];
-        var targetData = layer.items.getIn([items[i].id]);
-        var targetPos = new Three.Vector2(targetData.x, targetData.y);
-        var tRot = targetData.rotation;
-        var tBounding = target.children[0].userData;
-        var twidth = tBounding.max.x - tBounding.min.x;
-        var tdepth = tBounding.max.z - tBounding.min.z;
-        var tVertices = this.getRectPoints(twidth, tdepth, targetPos.clone(), tRot % 360 / 180 * Math.PI);
-        // ////////////////////////
-        var vArray = [];
-        var dteArray = [];
-        var lineArray = [];
-        var vdistanceArray = [];
-        var cVecArray = [];
-        var inFlag = false;
-        for (var _i6 = 0; _i6 < 4; _i6++) {
-          var v1 = tVertices[_i6];
-          var v2 = tVertices[_i6 + 1];
-          var data = pointLineDistance({
-            x: tPos.x,
-            y: tPos.y
-          }, [{
-            x: v1.x,
-            y: v1.y
-          }, {
-            x: v2.x,
-            y: v2.y
-          }]);
-          dteArray.push(data.distance);
-          vArray.push(data.point);
-          lineArray.push([v1, v2]);
-        }
-        // if tPos in target object
-        var tPosDistance = Math.abs(pointLineDistance(tPos, lineArray[0]).distance) + Math.abs(pointLineDistance(tPos, lineArray[2]).distance);
-        var realDistance = new Three.Vector2(lineArray[1][0].x - lineArray[1][1].x, lineArray[1][0].y - lineArray[1][1].y).length();
-        var tPosDistance1 = Math.abs(pointLineDistance(tPos, lineArray[1]).distance) + Math.abs(pointLineDistance(tPos, lineArray[3]).distance);
-        var realDistance1 = new Three.Vector2(lineArray[0][0].x - lineArray[0][1].x, lineArray[0][0].y - lineArray[0][1].y).length();
-        if (Math.abs(Math.abs(tPosDistance) - Math.abs(realDistance)) < 0.01 && Math.abs(Math.abs(tPosDistance1) - Math.abs(realDistance1)) < 0.01) inFlag = true;
-        // ////////////////////
-        var key = 0;
-        // sort distance from origin point
-        for (var _j = 0; _j < dteArray.length - 1; _j++) {
-          for (var k = _j + 1; k < dteArray.length; k++) {
-            if (Math.abs(dteArray[_j]) > Math.abs(dteArray[k])) {
-              var temp = dteArray[k];
-              dteArray[_j] = dteArray[k];
-              dteArray[k] = temp;
-              var temp1 = vArray[k];
-              vArray[_j] = vArray[k];
-              vArray[k] = temp1;
-              var temp2 = lineArray[k];
-              lineArray[_j] = lineArray[k];
-              lineArray[k] = temp2;
-            }
-          }
-        }
-        // //////////////////////////////
-        for (var _i7 = 0; _i7 < 4; _i7++) {
-          var _data = pointLineDistance(sVertices[_i7], lineArray[key]);
-          vdistanceArray.push(_data.distance);
-          cVecArray.push({
-            x: _data.point.x - sVertices[_i7].x,
-            y: _data.point.y - sVertices[_i7].y
-          });
-        }
-        for (var _j2 = 0; _j2 < vdistanceArray.length; _j2++) {
-          var tX = tPos.x + cVecArray[_j2].x;
-          var tY = tPos.y + cVecArray[_j2].y;
-          if (this.collisionCheck(item3D, new Three.Vector2(tX, tY), item.rotation, {
-            userData: {
-              itemId: null
-            }
-          }, item, this.context.catalog)) {
-            item3D.position.set(tX, originPos.y, -tY);
-            sPoint.set(tX, tY);
-            break;
-          }
-        }
-      };
-      this.snap = function (obj, layer) {
-        // snap operation
-        var target = obj.userData.target;
-        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 = 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);
-              disposeObject(snapBoxObj);
-            }
-            snapFlag = false;
-          };
-          var box = new Three.BoxHelper(snapBoxObj, 0xffffff);
-          box.material.linewidth = 2;
-          box.material.depthTest = false;
-          box.renderOrder = 200;
-          snapBoxObj.add(box);
-          snapBoxObj.position.set(source.position.x, layoutType === WALL_CABINET_LAYOUTPOS ? altitudeLength + source.position.y + height / 2 : source.position.y + height / 2, source.position.z);
-          snapBoxObj.rotation.set(source.rotation.x, source.rotation.y, source.rotation.z);
-          snapBoxObj.name = 'TransformBox';
-          planData.plan.add(snapBoxObj);
-          var deltaX = (tBounding.max.x - tBounding.min.x) / 2 + (sBounding.max.x - sBounding.min.x) / 2;
-          var deltaZ = (tBounding.max.z - tBounding.min.z) / 2 - (sBounding.max.z - sBounding.min.z) / 2;
-          var sPos = snapBoxObj.position.clone();
-          // avaliable snap place///////////////
-          var tPoses = [];
-          var pX = tPos.x + deltaX * Math.cos(tRot / 180 * Math.PI) + deltaZ * Math.sin(tRot / 180 * Math.PI);
-          var pZ = tPos.z - deltaX * Math.sin(tRot / 180 * Math.PI) + deltaZ * Math.cos(tRot / 180 * Math.PI);
-          tPoses.push(new Three.Vector3(pX, 0, pZ));
-          deltaX = -deltaX;
-          pX = tPos.x + deltaX * Math.cos(tRot / 180 * Math.PI) + deltaZ * Math.sin(tRot / 180 * Math.PI);
-          pZ = tPos.z - deltaX * Math.sin(tRot / 180 * Math.PI) + deltaZ * Math.cos(tRot / 180 * Math.PI);
-          tPoses.push(new Three.Vector3(pX, 0, pZ));
-          deltaX = (tBounding.max.x - tBounding.min.x) / 2 - (sBounding.max.x - sBounding.min.x) / 2;
-          deltaZ = -(tBounding.max.z - tBounding.min.z) / 2 - (sBounding.max.z - sBounding.min.z) / 2;
-          pX = tPos.x + deltaX * Math.cos(tRot / 180 * Math.PI) + deltaZ * Math.sin(tRot / 180 * Math.PI);
-          pZ = tPos.z - deltaX * Math.sin(tRot / 180 * Math.PI) + deltaZ * Math.cos(tRot / 180 * Math.PI);
-          tPoses.push(new Three.Vector3(pX, 0, pZ));
-          deltaX = -deltaX;
-          pX = tPos.x + deltaX * Math.cos(tRot / 180 * Math.PI) + deltaZ * Math.sin(tRot / 180 * Math.PI);
-          pZ = tPos.z - deltaX * Math.sin(tRot / 180 * Math.PI) + deltaZ * Math.cos(tRot / 180 * Math.PI);
-          tPoses.push(new Three.Vector3(pX, 0, pZ));
-          var distance = Math.sqrt((sPos.x - tPoses[0].x) * (sPos.x - tPoses[0].x) + (sPos.z - tPoses[0].z) * (sPos.z - tPoses[0].z));
-          var tNum = 1;
-          tPos = tPoses[0].clone();
-          for (var _i8 = 1; _i8 < tPoses.length; _i8++) {
-            var curDis = Math.sqrt((sPos.x - tPoses[_i8].x) * (sPos.x - tPoses[_i8].x) + (sPos.z - tPoses[_i8].z) * (sPos.z - tPoses[_i8].z));
-            if (curDis < distance) {
-              distance = curDis;
-              tNum = _i8 + 1;
-              tPos = tPoses[_i8].clone();
-            }
-          }
-          // //////////////////////////////////
-          if (targetObj != null && targetObj.userData.itemId == target.userData.itemId && tNum == targetNumber) {
-            removeSnapBoxObj();
-            return;
-          } else {
-            removeSnapBox();
-          }
-          // //////////////////////////////////
-          if (tNum >= 3) tRot += 180;
-          snapAnimI = 0;
-          t_i = 0;
-          targetObj = target;
-          targetNumber = tNum;
-          targetRot = tRot;
-          targetPoint = tPos;
-          snapBox = snapBoxObj;
-          var cx = sPos.x - tPos.x;
-          var cz = sPos.z - tPos.z;
-          targetUVec = new Three.Vector3(cx, 0, cz);
-          targetCRotation = (tRot - sRot) % 360 / 180 * Math.PI;
-        } else {
-          var _item3 = layer.getIn(['items', source.userData.itemId]);
-          if (holeItems.length && selectedObj) {
-            var _i9;
-            for (_i9 = 0; _i9 < holeItems.length; _i9++) {
-              var hole = holeItems[_i9];
-              if (Math.abs(Math.sin(selectedObj.rotRad)) === 1) {
-                if (_item3.y + selectedObj.size.width / 2 >= hole.y - hole.width / 2 && _item3.y - selectedObj.size.width / 2 <= hole.y + hole.width / 2 && (selectedObj.rotRad == 0 || selectedObj.rotRad == -Math.PI / 2 ? _item3.x <= hole.x && _item3.x + selectedObj.size.height >= hole.x : _item3.x >= hole.x && _item3.x - selectedObj.size.height <= hole.x)) break;
-              } else {
-                if (_item3.x + selectedObj.size.width / 2 >= hole.x - hole.width / 2 && _item3.x - selectedObj.size.width / 2 <= hole.x + hole.width / 2 && (selectedObj.rotRad == 0 || selectedObj.rotRad == -Math.PI / 2 ? _item3.y <= hole.y && _item3.y + selectedObj.size.height >= hole.y : _item3.y >= hole.y && _item3.y - selectedObj.size.height <= hole.y)) break;
-              }
-            }
-            if (_i9 != holeItems.length) return;
-          }
-          if (target.userData.type == 'hole') {
-            snapFlag = false;
-            return;
-          } else {
-            var _layoutType = _item3.layoutpos;
-            var _altitudeLength = 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);
-                disposeObject(_snapBoxObj);
-              }
-              snapFlag = false;
-            };
-            var _box = new Three.BoxHelper(_snapBoxObj, 0xffffff);
-            _box.material.linewidth = 2;
-            _box.material.depthTest = false;
-            _box.renderOrder = 100;
-            _snapBoxObj.add(_box);
-            _snapBoxObj.position.set(source.position.x, _layoutType === WALL_CABINET_LAYOUTPOS ? _altitudeLength + source.position.y + _height / 2 : source.position.y + _height / 2, source.position.z);
-            _snapBoxObj.rotation.set(source.rotation.x, source.rotation.y, source.rotation.z);
-            _snapBoxObj.name = 'TransformBox';
-            planData.plan.add(_snapBoxObj);
-            var snapLine = layer.getIn(['lines', target.userData.lineId]);
-            // let snapLineThickness = snapLine.properties.getIn([
-            //   'thickness',
-            //   'length'
-            // ]);
-            var snapLineThickness = 10.64;
-            var vertices = [];
-            if (snapLine === undefined) return;
-            snapLine.vertices.forEach(function (data) {
-              var vec = layer.getIn(['vertices', data]);
-              vertices.push(vec);
-            });
-            var iX = source.position.clone().x;
-            var iY = -source.position.clone().z;
-            var lineVec = new Three.Vector2(vertices[1].x - vertices[0].x, vertices[1].y - vertices[0].y);
-            var oLength = Math.sqrt(lineVec.x * lineVec.x + lineVec.y * lineVec.y);
-            lineVec.normalize();
-            var vec2 = new Three.Vector2(iX - vertices[0].x, iY - vertices[0].y);
-            var vec2Legnth = Math.sqrt(vec2.x * vec2.x + vec2.y * vec2.y);
-            var angle = Math.abs(lineVec.angle() - vec2.angle());
-            angle = angle > Math.PI ? 2 * Math.PI - angle : angle;
-            var lineLength = Math.cos(angle) * vec2Legnth;
-            var transLength = 0;
-            if (lineLength < 100) {
-              transLength = -lineLength + (snapLineThickness + _width) / 2;
-            }
-            if (lineLength > oLength - 100) {
-              transLength = -lineLength - (snapLineThickness + _width) / 2 + oLength;
-            }
-            var directPoint = new Three.Vector2(lineVec.x * lineLength + vertices[0].x, lineVec.y * lineLength + vertices[0].y);
-            var directLine = new Three.Vector2(directPoint.x - iX, directPoint.y - iY);
-            var dLength = Math.sqrt((iX - directPoint.x) * (iX - directPoint.x) + (iY - directPoint.y) * (iY - directPoint.y));
-            var reduceLen = (snapLineThickness + _depth) / 2;
-            var scale = (dLength - reduceLen) / dLength;
-            var _tPos3 = new Three.Vector2(iX + (directPoint.x - iX) * scale + lineVec.x * transLength, iY + (directPoint.y - iY) * scale + lineVec.y * transLength);
-            var realAngle = directLine.angle() - Math.PI / 2;
-            var _tRot2 = realAngle * 180 / Math.PI;
-            var _sPos = new Three.Vector2(iX, iY);
-            var _sRot = _item3.rotation;
-            var _tNum = 0;
-            // //////////////////////////////////////
-            // check part////
-            var result = this.collisionCheck(source, _tPos3, _tRot2, target, _item3, this.context.catalog);
-            // console.log('result', result);
-            if (result == false) {
-              _removeSnapBoxObj();
-              removeSnapBox();
-              return;
-            }
-            // ////////////////
-            if (targetObj === target && snapBox !== null) {
-              _removeSnapBoxObj();
-              snapAnimI = 20;
-              targetPoint = new Three.Vector3(_tPos3.x, 0, -_tPos3.y);
-              var _sourcePos = snapBox.position.clone();
-              var _cx = _sourcePos.x - targetPoint.x;
-              var _cz = _sourcePos.z - targetPoint.z;
-              targetUVec = new Three.Vector3(_cx, 0, _cz);
-              targetRot = _tRot2;
-              targetCRotation = (_tRot2 - _sRot) % 360 / 180 * Math.PI;
-              snapFlag = false;
-              return;
-            } else {
-              removeSnapBox();
-            }
-            // //////////////////////////////////////
-            snapAnimI = 0;
-            t_i = 0;
-            targetObj = target;
-            targetNumber = _tNum;
-            targetRot = _tRot2;
-            targetPoint = new Three.Vector3(_tPos3.x, 0, -_tPos3.y);
-            snapBox = _snapBoxObj;
-            var sourcePos = snapBox.position.clone();
-            var _cx2 = sourcePos.x - targetPoint.x;
-            var _cz2 = sourcePos.z - targetPoint.z;
-            targetUVec = new Three.Vector3(_cx2, 0, _cz2);
-            targetRot = _tRot2;
-            targetCRotation = (_tRot2 - _sRot) % 360 / 180 * Math.PI;
-          }
-        }
-      };
-
-      /*end of snap functions*/
-      var selectedObj = null;
-      var firstMove = false;
-      var prevX, prevY;
-      var selObj = null;
-      var 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 = 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
-        };
-      };
-      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 = 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 == 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;
-                _this2.context.projectActions.unselectAll();
-                scene3D.remove(toolObj);
-                _this2.context.itemsActions.removeReplacingSupport();
-                return;
-              }
-            }
-            if (selectedObject !== undefined) {
-              var selectedItem = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
-              sPoint.set(Point.x, Point.y);
-              if (transflag == 0) {
-                scene3D.remove(toolObj);
-                var alti = 0;
-                if (allItemRect && allItemRect.cur && allItemRect.cur.itemInfo !== undefined) {
-                  var _properties = allItemRect.cur.itemInfo.properties;
-                  alti = _properties.getIn(['altitude', '_length']);
-                  var _unit = _properties.getIn(['altitude', '_unit']) || 'in';
-                  alti = convert(alti).from(_unit).to(_this2.props.state.scene.unit);
-                }
-                getPoint({
-                  offsetX: event.offsetX - 50,
-                  offsetY: event.offsetY
-                }, alti);
-                if (isUndefined(selectedItem)) return;
-                var selItem = _this2.props.state.scene.layers.get(selectedObject.layerID).items.get(selectedObject.itemID);
-                lastAngle = 0;
-                angleObj.position.set(planData.plan.position.x + Point.x, selItem.category === 'lighting' ? -planData.plan.position.y - selItem.properties.get('height').get('length') : selItem.properties.get('altitude').get('length') + planData.plan.position.y, planData.plan.position.z - Point.y);
-                angleTexture.image = createAngleObject(0);
-                angleTexture.needsUpdate = true;
-                scene3D.add(angleObj);
-                _this2.setState({
-                  angleObj: angleObj
-                });
-                var centerPos = Point;
-                getPoint(event, alti);
-                _this2.context.itemsActions.beginRotatingItem3D(selectedObject.layerID, selectedObject.itemID, Point.x, Point.y, centerPos.x, centerPos.y);
-                bRotate = true;
-              } else if (transflag == 1) {
-                bMoveUP = true;
-              } else if (transflag == 2) {
-                switch (true) {
-                  case 'holeID' in selectedObject:
-                    _this2.context.holesActions.beginDraggingHole3D(selectedObject.layerID, selectedObject.holeID, Point.x, Point.y);
-                    break;
-                  default:
-                    _this2.context.itemsActions.beginDraggingItem3D(selectedObject.layerID, selectedObject.itemID, Point.x, Point.y);
-                    break;
-                }
-                bMove = true;
-                scene3D.remove(toolObj);
-              }
-              for (_i1 = 0; _i1 < intersects.length; _i1++) {
-                if (selectedItem != undefined && intersects[_i1].object.parent && intersects[_i1].object.parent.parent.userData.itemId === selectedItem.userData.itemId) selectedFlag = true;
-              }
-              if (selectedFlag || toolIntersects.length > 0 && !isElevationView(mode)) {
-                cameraControls.mouseButtons.left = CameraControls.ACTION.NONE;
-                selectedFlag = false;
-              } else {
-                isSelected = false;
-                _this2.context.projectActions.unselectAll();
-                scene3D.remove(toolObj);
-                _this2.context.itemsActions.removeReplacingSupport();
-              }
-            }
-          } else {
-            isSelected = false;
-            _this2.context.projectActions.unselectAll();
-            scene3D.remove(toolObj);
-            _this2.context.itemsActions.removeReplacingSupport();
-            return;
-          }
-        }
-      };
-      this.mouseUpEvent = function (event) {
-        var _selObj$object, _selObj$object2;
-        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 = 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('');
-        }
-        getPoint(event, altitude);
-        if (_this2.props.state.mode == MODE_DRAWING_ITEM_3D) {
-          if (Point.x > _this2.props.state.scene.width) Point.x = _this2.props.state.width;
-          if (Point.y > _this2.props.state.scene.height) Point.y = _this2.props.state.height;
-          if (Point.x < 0) Point.x = 0;
-          if (Point.y < 0) Point.y = 0;
-          if (snapBox == null) {
-            actions.itemsActions.endDrawingItem(_this2.props.state.scene.selectedLayer, sPoint.x, sPoint.y);
-          } else {
-            actions.itemsActions.updateDraggingItemChanged(targetPoint.x, -targetPoint.z, selectedObject.layerID, selectedObject.itemID);
-            _this2.context.itemsActions.updateRotatingItemChanged(targetRot, selectedObject.layerID, selectedObject.itemID);
-            removeSnapBox();
-            actions.itemsActions.endDrawingItem(_this2.props.state.scene.selectedLayer, Point.x, Point.y);
-          }
-          bMove = false;
-          return;
-        }
-        if (_this2.props.state.mode == MODE_DRAGGING_ITEM_3D) {
-          _this2.context.itemsActions.endDraggingItem3D();
-        }
-        if (_this2.props.state.mode == MODE_ROTATING_ITEM_3D) {
-          _this2.context.itemsActions.endRotatingItem3D(sPoint.x, sPoint.y);
-        }
-        if (_this2.props.state.mode == MODE_DRAWING_HOLE_3D) {
-          gridPlanOrigin = gridPlane.position;
-          gridMatrix.copy(gridPlane.matrixWorld).invert();
-          camPos = camera.position;
-          if (!getIntersectWallPoint(event)) return;
-          actions.holesActions.endDrawingHole3D(_this2.props.state.scene.selectedLayer, Point.x, Point.y);
-          bMove = false;
-          return;
-        }
-        event.preventDefault();
-        if (event.button === 0) {
-          cameraControls.mouseButtons.left = CameraControls.ACTION.ROTATE;
-          mouse.x = event.offsetX / _this2.width * 2 - 1;
-          mouse.y = -(event.offsetY / _this2.height) * 2 + 1;
-          raycaster.setFromCamera(mouse, camera);
-          rayDirection = raycaster.ray.direction;
-          rayDirection = rayDirection.normalize();
-          var meshes = [];
-          toIntersect.forEach(function (object) {
-            if (!object) return;
-            object.traverse(function (o) {
-              if (o.isMesh) meshes.push(o);
-            });
-          });
-          var intersects = raycaster.intersectObjects(meshes, true);
-          var _i10;
-          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 () {
-                  getDistances(layer);
-                  var selectedItem = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
-                  if (isUndefined(selectedItem)) return;
-                  var selItem = _this2.props.state.scene.layers.get(selectedObject.layerID).items.get(selectedObject.itemID);
-                  var itemPos = selectedItem.position.clone();
-                  if (intersects[_i10].object.parent && intersects[_i10].object.parent.parent.userData.itemId === selectedItem.userData.itemId) {
-                    toolObj.position.set(intersects[_i10].point.x, intersects[_i10].point.y, intersects[_i10].point.z);
-                  } else {
-                    toolObj.position.set(planData.plan.position.x + itemPos.x, selItem.category === 'lighting' ? -planData.plan.position.y - selItem.properties.get('height').get('length') : planData.plan.position.y + selectedItem.children[0].position.y, planData.plan.position.z + itemPos.z);
-                  }
-                  scene3D.add(toolObj);
-                  _this2.setState({
-                    toolObj: toolObj
-                  });
-                  // showItemButtons(layer.getIn(['items', selectedObject.itemID]), currentObject, event, camera, this.renderer);
-                  var pointArray = [],
-                    cnt = 0;
-                  pointArray.push([fVLine[0].userData.distance, 90]);
-                  pointArray.push([fVLine[1].userData.distance, -90]);
-                  pointArray.push([fVLine[2].userData.distance, 180]);
-                  pointArray.push([fVLine[3].userData.distance, 0]);
-                  pointArray.forEach(function (pointElement, index) {
-                    if (pointElement[0] == undefined) pointArray[index][0] = 0;
-                  });
-                  pointArray.forEach(function (pointElement) {
-                    if (pointElement[0] == 0) cnt++;
-                  });
-                  if (cnt == 4 || cnt == 3) {
-                    pointArray[0][0] = 100;
-                    pointArray[1][0] = 100;
-                  }
-                  actions.itemsActions.storeDistArray(layer.id, selectedObject.itemID, pointArray);
-                });
-              } else {
-                if (selectedObject) {
-                  switch (true) {
-                    case 'holeID' in selectedObject:
-                      if (selObj !== null && selObj !== void 0 && (_selObj$object = selObj.object) !== null && _selObj$object !== void 0 && _selObj$object.name.includes('transHole')) {
-                        actions.holesActions.endDraggingHole3D(sPoint.x, sPoint.y);
-                      }
-                      break;
-                    case 'lineID' in selectedObject:
-                      if (selObj !== null && selObj !== void 0 && (_selObj$object2 = selObj.object) !== null && _selObj$object2 !== void 0 && _selObj$object2.name.includes('transHole')) {
-                        actions.holesActions.endDraggingHole3D(sPoint.x, sPoint.y);
-                      }
-                      break;
-                    default:
-                      break;
-                  }
-                }
-                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 {
-            visibleTransformBox(false);
-            var alti = 0;
-            if (allItemRect && allItemRect.cur && allItemRect.cur.itemInfo !== undefined) {
-              var _properties2 = allItemRect.cur.itemInfo.properties;
-              alti = _properties2.getIn(['altitude', '_length']);
-              var _unit2 = _properties2.getIn(['altitude', '_unit']) || 'in';
-              alti = convert(alti).from(_unit2).to(_this2.props.state.scene.unit);
-            }
-            getPoint(event, alti);
-            if (bRotate) {
-              var _intersects$_i;
-              var selectedItem = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
-              if (isUndefined(selectedItem)) return;
-              var selItem = _this2.props.state.scene.layers.get(selectedObject.layerID).items.get(selectedObject.itemID);
-              var itemPos = selectedItem.position.clone();
-              if (((_intersects$_i = intersects[_i10]) === null || _intersects$_i === void 0 || (_intersects$_i = _intersects$_i.object) === null || _intersects$_i === void 0 || (_intersects$_i = _intersects$_i.parent) === null || _intersects$_i === void 0 || (_intersects$_i = _intersects$_i.parent) === null || _intersects$_i === void 0 || (_intersects$_i = _intersects$_i.userData) === null || _intersects$_i === void 0 ? void 0 : _intersects$_i.itemId) === selectedItem.userData.itemId) {
-                toolObj.position.set(intersects[_i10].point.x, intersects[_i10].point.y, intersects[_i10].point.z);
-              } else {
-                toolObj.position.set(planData.plan.position.x + itemPos.x, selItem.category === 'lighting' ? -planData.plan.position.y - selItem.properties.get('height').get('length') : planData.plan.position.y + selectedItem.children[0].position.y, planData.plan.position.z + itemPos.z);
-              }
-              scene3D.add(toolObj);
-              _this2.setState({
-                toolObj: toolObj
-              });
-              _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 (isUndefined(_selectedItem)) return;
-              var _selItem = _this2.props.state.scene.layers.get(selectedObject.layerID).items.get(selectedObject.itemID);
-              var _itemPos = _selectedItem.position.clone();
-              if (intersects[_i10].object.parent.parent.userData.itemId === _selectedItem.userData.itemId) {
-                toolObj.position.set(intersects[_i10].point.x, intersects[_i10].point.y, intersects[_i10].point.z);
-              } else {
-                toolObj.position.set(planData.plan.position.x + _itemPos.x, _selItem.category === 'lighting' ? -planData.plan.position.y - _selItem.properties.get('height').get('length') : planData.plan.position.y + _selectedItem.children[0].position.y, planData.plan.position.z + _itemPos.z);
-              }
-              scene3D.add(toolObj);
-              _this2.setState({
-                toolObj: toolObj
-              });
-              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;
-          }
-        }
-      };
-      this.mouseMoveEvent = function (event) {
-        event.preventDefault();
-        backsplashVisible = false;
-        var altitude = 0;
-        if (allItemRect && allItemRect.cur && allItemRect.cur.itemInfo !== undefined) {
-          var properties = allItemRect.cur.itemInfo.properties;
-          altitude = properties.getIn(['altitude', '_length']);
-          var unit = properties.getIn(['altitude', '_unit']) || 'in';
-          altitude = convert(altitude).from(unit).to(_this2.props.state.scene.unit);
-        }
-        if (_this2.props.state.mode === MODE_DRAWING_HOLE_3D) {
-          gridPlanOrigin = gridPlane.position;
-          gridMatrix.copy(gridPlane.matrixWorld).invert();
-          camPos = camera.position;
-          if (!getIntersectWallPoint(event)) return;
-          var drawingSupport = _this2.props.state.drawingSupport;
-          if (!drawingSupport.has('currentID')) {
-            _this2.context.holesActions.updateDrawingHole3D(_this2.props.state.scene.selectedLayer, Point.x, Point.y);
-            sPoint.set(Point.x, Point.y);
-          } else {
-            var layerID = _this2.props.state.scene.selectedLayer;
-            var holeID = _this2.props.state.drawingSupport.get('currentID');
-            deleteSpecifiedMeshObjects('WarningBox' + holeID);
-            prepareSnap(layer);
-
-            // let {nx, ny, rot} = GeometryUtils.calcSnap(allItemRect, allItemSnap, allLineRects, allLineSnap, allRect, Point.x, Point.y, allArea);
-            var nx = Point.x;
-            var ny = Point.y;
-            actions.holesActions.updateDrawingHole3D(layerID, nx, ny);
-            sPoint.set(nx, ny);
-          }
-        }
-        if (_this2.props.state.mode === MODE_DRAWING_ITEM_3D) {
-          // We need to set cam position since when MODE_DRAWING_ITEM_3D mouse down event
-          // is not emited so cam position is not valid
-          gridPlanOrigin = gridPlane.position;
-          gridMatrix.copy(gridPlane.matrixWorld).invert();
-          camPos = camera.position;
-          getPoint(event, altitude);
-          if (Point.x > _this2.props.state.scene.width || Point.x < 0 || Point.y > _this2.props.state.scene.height || Point.y < 0) return;
-          var _drawingSupport = _this2.props.state.drawingSupport;
-          if (!_drawingSupport.has('currentID')) {
-            _this2.context.itemsActions.updateDrawingItem(_this2.props.state.scene.selectedLayer, Point.x, Point.y);
-            sPoint.set(Point.x, Point.y);
-          } else {
-            var _layerID = _this2.props.state.scene.selectedLayer;
-            var itemID = _this2.props.state.drawingSupport.get('currentID');
-            selectedObject = {
-              layerID: _layerID,
-              itemID: itemID
-            };
-            var mX = Point.x - sPoint.x;
-            var mY = Point.y - sPoint.y;
-            var item3D = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
-            var _layer = _this2.props.state.scene.getIn(['layers', selectedObject.layerID]);
-            deleteSpecifiedMeshObjects('TransformBox');
-            deleteSpecifiedMeshObjects('WarningBox' + itemID);
-            prepareSnap(_layer);
-            var item = _layer.items.getIn([selectedObject.itemID]);
-            if (item.counterTop.uri == '') item.counterTop.uri = _layer.counterTop.uri;
-            var sRot = item.rotation;
-            if (!item3D) return;
-            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);
-            var _GeometryUtils$calcSn = GeometryUtils.calcSnap(allItemRect, allItemSnap, allLineRects, allLineSnap, allRect, Point.x, Point.y, allArea),
-              _nx = _GeometryUtils$calcSn.nx,
-              _ny = _GeometryUtils$calcSn.ny,
-              rot = _GeometryUtils$calcSn.rot;
-            var nPos = new Three.Vector2(_nx, _ny);
-            if (!_this2.collisionHoleCheck(item3D, nPos, item.rotation, {
-              userData: {
-                itemId: null
-              }
-            }, item, _this2.context.catalog)) {
-              _this2.collisionSlide(item3D, originPos, _layer, sVertices, tPos, item);
-              //return;
-            }
-            var polygonPoint = lineRect(_layer);
-            if (polygonPoint.length > 0) {
-              var PolygonSect = GeometryUtils.ContainsPoint(polygonPoint, _nx, _ny);
-              if (!PolygonSect) {
-                var _GeometryUtils$calcCr = GeometryUtils.calcCreateSnap(allItemRect, allItemSnap, allLineRects, allLineSnap, allRect, Point.x, Point.y, polygonPoint),
-                  cx = _GeometryUtils$calcCr.cx,
-                  cy = _GeometryUtils$calcCr.cy,
-                  crot = _GeometryUtils$calcCr.crot;
-                _nx = cx;
-                _ny = cy;
-                rot = crot;
-              }
-            }
-            var polygon = lineRect(_layer);
-            if (polygon.length > 0) {
-              var Sect = GeometryUtils.ContainsPoint(polygon, _nx, _ny);
-              if (!Sect) return;
-            }
-            actions.itemsActions.updateDraggingItemChanged(_nx, _ny, selectedObject.layerID, selectedObject.itemID);
-            actions.itemsActions.updateRotatingItemChanged(rot, selectedObject.layerID, selectedObject.itemID);
-            sPoint.set(_nx, _ny);
-            getDistances(_layer);
-            var pointArray = [],
-              cnt = 0;
-            pointArray.push([fVLine[0].userData.distance, 90]);
-            pointArray.push([fVLine[1].userData.distance, -90]);
-            pointArray.push([fVLine[2].userData.distance, 180]);
-            pointArray.push([fVLine[3].userData.distance, 0]);
-            pointArray.forEach(function (pointElement, index) {
-              if (pointElement[0] == undefined) pointArray[index][0] = 0;
-            });
-            pointArray.forEach(function (pointElement) {
-              if (pointElement[0] == 0) cnt++;
-            });
-            if (cnt == 4 || cnt == 3) {
-              pointArray[0][0] = 100;
-              pointArray[1][0] = 100;
-            }
-            actions.itemsActions.storeDistArray(_layer.id, item.id, pointArray);
-            var minDis = fVLine[0].userData.distance;
-            var snapObj = fVLine[0];
-            var iPos = item3D.position.clone();
-            var snapDis = Math.sqrt((iPos.x - targetPoint.x) * (iPos.x - targetPoint.x) + (iPos.z - targetPoint.z) * (iPos.z - targetPoint.z));
-            if (snapDis >= 100 && snapObj != null) {
-              removeSnapBox();
-              backsplashVisible = false;
-              //console.log('1 snap no');
-            }
-            for (var _i11 = 1; _i11 < fVLine.length; _i11++) {
-              if (minDis > fVLine[_i11].userData.distance) {
-                minDis = fVLine[_i11].userData.distance;
-                snapObj = fVLine[_i11];
-              }
-            }
-            if (snapBox == null) {
-              snapFlag = false;
-            }
-            actions.sceneActions.updateMovingState(false);
-            if (minDis < snapDelta && !snapFlag) {
-              _this2.snap(snapObj, _layer);
-              snapFlag = true;
-              //console.log('1 snap Yes')
-              getDistances(_layer, true);
-              var _i12 = 0;
-              for (_i12 = 0; _i12 < fVLine.length; _i12++) {
-                if (fVLine[_i12].userData.distance < snapDelta) {
-                  break;
-                }
-              }
-              if (_i12 === fVLine.length) backsplashVisible = false;else backsplashVisible = true;
-            }
-            actions.itemsActions.setBacksplashVisible(selectedObject.itemID, backsplashVisible);
-          }
-        }
-        if (bRotate) {
-          getPoint(event, altitude);
-          _this2.context.itemsActions.updateRotatingItem(Point.x, Point.y);
-          var _layer2 = _this2.props.state.scene.getIn(['layers', selectedObject.layerID]);
-          var _item4 = _layer2.items.getIn([selectedObject.itemID]);
-          var orginRot = _this2.props.state.rotatingSupport.get('originRotation');
-          angleTexture.image = createAngleObject((orginRot < 0 ? 360 - orginRot : orginRot) - _item4.rotation);
-          angleTexture.needsUpdate = true;
-          deleteSpecifiedMeshObjects('WarningBox' + selectedObject.itemID);
-          deleteSpecifiedMeshObjects('backsplash' + selectedObject.itemID);
-          actions.sceneActions.updateMovingState(false);
-        }
-        if (bMoveUP) {
-          _this2.context.itemsActions.updateItemsAltitude(selectedObject.layerID, selectedObject.itemID, event.movementY);
-        }
-        if (bMove) {
-          if ('holeID' in selectedObject) {
-            gridPlanOrigin = gridPlane.position;
-            gridMatrix.copy(gridPlane.matrixWorld).invert();
-            camPos = camera.position;
-            if (!getIntersectWallPoint(event)) return;
-            var draggingSupport = _this2.props.state.draggingSupport;
-            if (!draggingSupport.has('currentID')) {
-              _this2.context.holesActions.updateDraggingHole(Point.x, Point.y);
-              sPoint.set(Point.x, Point.y);
-            } else {
-              var _holeID = _this2.props.state.draggingSupport.get('currentID');
-              deleteSpecifiedMeshObjects('WarningBox' + _holeID);
-              var _nx2 = Point.x;
-              var _ny2 = Point.y;
-              actions.holesActions.updateDraggingHole(_nx2, _ny2);
-              sPoint.set(_nx2, _ny2);
-            }
-          } else {
-            var _item3D2 = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
-            if (_item3D2 === undefined) return;
-            var _layer3 = _this2.props.state.scene.getIn(['layers', _item3D2.userData.layerId]);
-            var _item5 = _layer3.items.getIn([selectedObject.itemID]);
-            if (_item5.counterTop.uri == '') _item5.counterTop.uri = _layer3.counterTop.uri;
-            var _sRot2 = _item5.rotation;
-            var _mX = Point.x - sPoint.x;
-            var _mY = Point.y - sPoint.y;
-            deleteSpecifiedMeshObjects('WarningBox' + selectedObject.itemID);
-            deleteSpecifiedMeshObjects('backsplash' + selectedObject.itemID);
-            prepareSnap(_layer3);
-            getPoint(event, altitude);
-            var _originPos = _item3D2.position.clone();
-            var _tPos4 = new Three.Vector2(_mX + _originPos.x, _mY - _originPos.z);
-            var _sBounding2 = _item3D2.children[0].userData;
-            var _swidth = _sBounding2.max.x - _sBounding2.min.x;
-            var _sdepth = _sBounding2.max.z - _sBounding2.min.z;
-            var _sVertices = _this2.getRectPoints(_swidth, _sdepth, _tPos4.clone(), _sRot2 % 360 / 180 * Math.PI);
-            var _GeometryUtils$calcSn2 = GeometryUtils.calcSnap(allItemRect, allItemSnap, allLineRects, allLineSnap, allRect, Point.x, Point.y, allArea),
-              _nx3 = _GeometryUtils$calcSn2.nx,
-              _ny3 = _GeometryUtils$calcSn2.ny,
-              _rot = _GeometryUtils$calcSn2.rot;
-            var _nPos = new Three.Vector2(_nx3, _ny3);
-            if (!_this2.collisionHoleCheck(_item3D2, _nPos, _item5.rotation, {
-              userData: {
-                itemId: null
-              }
-            }, _item5, _this2.context.catalog)) {
-              _this2.collisionSlide(_item3D2, _originPos, _layer3, _sVertices, _tPos4, _item5);
-              //return;
-            }
-            var _polygonPoint = lineRect(_layer3);
-            if (_polygonPoint.length > 0) {
-              var _PolygonSect = GeometryUtils.ContainsPoint(_polygonPoint, _nx3, _ny3);
-              if (!_PolygonSect) {
-                var _GeometryUtils$calcCr2 = GeometryUtils.calcCreateSnap(allItemRect, allItemSnap, allLineRects, allLineSnap, allRect, Point.x, Point.y, _polygonPoint),
-                  _cx3 = _GeometryUtils$calcCr2.cx,
-                  _cy = _GeometryUtils$calcCr2.cy,
-                  _crot = _GeometryUtils$calcCr2.crot;
-                _nx3 = _cx3;
-                _ny3 = _cy;
-                _rot = _crot;
-              }
-            }
-            var _polygon = lineRect(_layer3);
-            if (_polygon.length > 0) {
-              var _Sect = GeometryUtils.ContainsPoint(_polygon, _nx3, _ny3);
-              if (!_Sect) return;
-            }
-            actions.itemsActions.updateDraggingItemChanged(_nx3, _ny3, selectedObject.layerID, selectedObject.itemID);
-            actions.itemsActions.updateRotatingItemChanged(_rot, selectedObject.layerID, selectedObject.itemID);
-            sPoint.set(_nx3, _ny3);
-            getDistances(_layer3);
-            var _pointArray = [],
-              _cnt = 0;
-            _pointArray.push([fVLine[0].userData.distance, 90]);
-            _pointArray.push([fVLine[1].userData.distance, -90]);
-            _pointArray.push([fVLine[2].userData.distance, 180]);
-            _pointArray.push([fVLine[3].userData.distance, 0]);
-            _pointArray.forEach(function (pointElement, index) {
-              if (pointElement[0] == undefined) _pointArray[index][0] = 0;
-            });
-            _pointArray.forEach(function (pointElement) {
-              if (pointElement[0] == 0) _cnt++;
-            });
-            if (_cnt == 4 || _cnt == 3) {
-              _pointArray[0][0] = 100;
-              _pointArray[1][0] = 100;
-            }
-            actions.itemsActions.storeDistArray(_layer3.id, _item5.id, _pointArray);
-            var _minDis = fVLine[0].userData.distance;
-            var _snapObj = fVLine[0];
-            var _iPos = _item3D2.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;
-              //console.log('1 snap no');
-            }
-            for (var _i13 = 1; _i13 < fVLine.length; _i13++) {
-              if (_minDis > fVLine[_i13].userData.distance) {
-                _minDis = fVLine[_i13].userData.distance;
-                _snapObj = fVLine[_i13];
-              }
-            }
-            if (snapBox == null) {
-              snapFlag = false;
-            }
-            actions.sceneActions.updateMovingState(false);
-            if (_minDis < snapDelta && !snapFlag) {
-              _this2.snap(_snapObj, _layer3);
-              snapFlag = true;
-              //console.log('1 snap Yes')
-              getDistances(_layer3, true);
-              var _i14 = 0;
-              for (_i14 = 0; _i14 < fVLine.length; _i14++) {
-                if (fVLine[_i14].userData.distance < snapDelta) {
-                  break;
-                }
-              }
-              if (_i14 === fVLine.length) backsplashVisible = false;else backsplashVisible = true;
-            }
-            actions.itemsActions.setBacksplashVisible(selectedObject.itemID, backsplashVisible);
-          }
-        }
-        if (!bMove && !bRotate && !bMoveUP) {
-          var curPos = {
-            x: event.offsetX / _this2.width * 2 - 1,
-            y: -(event.offsetY / _this2.height) * 2 + 1
-          };
-          raycaster.setFromCamera(curPos, camera);
-          rayDirection = raycaster.ray.direction;
-          rayDirection = rayDirection.normalize();
-          var meshes = getAllMeshes(toIntersect);
-          var intersects = raycaster.intersectObjects(meshes, true);
-          var _i15;
-          if (intersects.length > 0 && !isNaN(intersects[0].distance)) {
-            for (_i15 = 0; _i15 < intersects.length; _i15++) {
-              if (intersects[_i15].object.name === 'warningObj') break;
-            }
-            if (intersects[_i15] !== undefined) {
-              var distance = Math.sqrt(Math.pow((intersects[_i15].uv.x - 0.5) * 50, 2) + Math.pow((intersects[_i15].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;
-                }
-                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;
-              }
-            }
-          }
-        }
-        document.getElementById('warning_box_2d').style.display = 'none';
-      };
-      this.onkeydown = function (event) {
-        if (_this2.props.keyDownEnable && !isElevationView(state.mode)) {
-          switch (event.keyCode) {
-            case 27:
-              // escape key
-              isSelected = false;
-              _this2.context.projectActions.unselectAll();
-              _this2.context.itemsActions.removeReplacingSupport();
-              _this2.context.itemsActions.setMoveStatus(false);
-              _this2.context.itemsActions.setRotateStatus(false);
-              bMoveUP = false;
-              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);
-      };
-
-      // 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('mousemove', this.mouseMoveEvent);
-        window.addEventListener('keydown', this.onkeydown);
-        window.SPKeyDown = this.handleKeyDown;
-        window.tDKeyDown = this.handleKeyDown;
-      }
-
-      // Add the output of the renderer to the html element
-      var canvasWrapper = ReactDOM.findDOMNode(this.refs.canvasWrapper);
-      canvasWrapper && canvasWrapper.appendChild(this.renderer.domElement);
-
-      //
-
-      if (scene.getIn(['layers', scene.selectedLayer, 'selected', 'items']).size != 0) {
-        // if selected Object
-        isSelected = true;
-        selectedObject.layerID = scene.selectedLayer;
-        selectedObject.itemID = scene.getIn(['layers', scene.selectedLayer, 'selected', 'items']).toJS()[0];
-        setTimeout(function () {
-          try {
-            currentObject = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
-            if (isUndefined(currentObject)) return;
-            var selItem = _this2.props.state.scene.layers.get(selectedObject.layerID).items.get(selectedObject.itemID);
-            var itemPos = currentObject.position.clone();
-            toolObj.position.set(planData.plan.position.x + itemPos.x, selItem.category === 'lighting' ? -planData.plan.position.y - selItem.properties.get('height').get('length') : planData.plan.position.y + currentObject.children[0].position.y, planData.plan.position.z + itemPos.z);
-            scene3D.add(toolObj);
-            _this2.setState({
-              toolObj: toolObj
-            });
-          } catch (err) {
-            console.log('selectedObject : ' + JSON.stringify(selectedObject) + '\nError: ' + err);
-          }
-        }, 2000);
-      }
-
-      // Scene functions
-
-      function init() {
-        clock = new Three.Clock();
-        scene3D = new Three.Scene();
-        if (isElevationView(state.mode)) scene3D.background = new Three.Color(0xffffff);
-        // change color about v1: 0x8791AB, v2: 0xC2C2C2, v3: 0xC3CADC
-        else scene3D.background = new Three.Color(0xc3cadc); // change color about v1: 0x8791AB, v2: 0xC2C2C2, v3: 0xC3CADC
-        // scene3D.fog = new Three.Fog(0xC3CADC, 2000, 3500);
-        window.scene3D = scene3D;
-        // Camera
-        if (isElevationView(state.mode)) {
-          // In elevation view, set Orthographic camera's position, angle and rotation about selected line
-          var layers = scene.layers;
-          var selectedLayer = layers.get(scene.selectedLayer);
-          var ceilHeight = convert(selectedLayer.ceilHeight).from(selectedLayer.unit).to(scene.unit);
-          var lines = [];
-          var selectedLine = selectedLayer.lines.get(selectedLayer.selected.lines.toJS()[0]);
-          var vertex0 = selectedLayer.vertices.get(selectedLine.vertices.get(0));
-          var vertex1 = selectedLayer.vertices.get(selectedLine.vertices.get(1));
-          var x1 = vertex0.x,
-            y1 = vertex0.y;
-          var x2 = vertex1.x,
-            y2 = vertex1.y;
-          if (GeometryUtils.compareVertices(vertex0, vertex1) >= 0 && vertex0.x !== vertex1.x) {
-            x1 = vertex1.x;
-            y1 = vertex1.y;
-            x2 = vertex0.x;
-            y2 = vertex0.y;
-          }
-          selectedLayer.lines.toArray().forEach(function (line) {
-            if (line.id === selectedLine) {
-              var data = line.toJS();
-              data = _objectSpread(_objectSpread({}, data), {}, {
-                l0: {
-                  x: x1,
-                  y: y1
-                },
-                l1: {
-                  x: x2,
-                  y: y2
-                }
-              });
-              lines.push(data);
-            }
-          });
-          var lineLength = GeometryUtils.pointsDistance(x1, y1, x2, y2);
-          self.setState({
-            lineLength: lineLength
-          });
-          var cameraRect = handleCamRect(self.width, self.height, ceilHeight, lineLength);
-          camera = new Three.OrthographicCamera(-cameraRect.width / 2, cameraRect.width / 2, cameraRect.height / 2, -cameraRect.height / 2, 1, 1000);
-          var angle = Math.atan((y1 - y2) / (x1 - x2));
-          var r = 300;
-          if (Math.abs(angle) === Math.PI / 2) {
-            camera.position.set((x1 + x2) / 2 - Math.sin(angle) * r, ceilHeight / 2, -((y1 + y2) / 2 - Math.cos(angle) * r));
-            camera.rotation.set(0, -angle, 0);
-          } else if (vertex0.x > vertex1.x) {
-            camera.position.set((x1 + x2) / 2 + Math.sin(angle + Math.PI) * r, ceilHeight / 2, -((y1 + y2) / 2 - Math.cos(angle + Math.PI) * r));
-            camera.rotation.set(0, angle + Math.PI, 0);
-          } else {
-            camera.position.set((x1 + x2) / 2 + Math.sin(angle) * r, ceilHeight / 2, -((y1 + y2) / 2 - Math.cos(angle) * r));
-            camera.rotation.set(0, angle, 0);
-          }
-        } else {
-          var aspectRatio = self.width / self.height;
-          camera = new Three.PerspectiveCamera(45, aspectRatio, 1, 300000);
-          camera.position.set(0, 0, 1);
-        }
-        camera.layers.enable(1);
-        function loadENV() {
-          new RGBELoader().load('/assets/brown_photostudio_02_1k.hdr', function (texture) {
-            texture.mapping = Three.EquirectangularReflectionMapping;
-            scene3D.environment = texture;
-            texture.dispose();
-          });
-        }
-        // Camera Controls
-        if (!isElevationView(state.mode)) {
-          cameraControls = new CameraControls(camera, self.renderer.domElement);
-          cameraControls.dollyToCursor = true;
-          cameraControls.infinityDolly = true;
-          cameraControls.minDistance = 50;
-          cameraControls.maxDistance = Infinity;
-          cameraControls.zoomSpeed = 1;
-          loadENV();
-        }
-        scene3D.add(planData.plan);
-        scene3D.add(planData.grid);
-        scene3D.add(camera);
-        if (isElevationView(state.mode)) {
-          planData.cam.add(camera);
-          scene3D.add(planData.cam);
-        } else {
-          pivot = new Three.Object3D();
-          pivot.add(camera);
-          scene3D.add(pivot);
-        }
-
-        // LIGHT
-
-        var light = new Three.AmbientLight(0xbfbfbf, 0.9); // soft white light
-      }
-      function render() {
-        var delta = clock.getDelta(); // Get time delta for smooth updates
-        if (!isElevationView(state.mode)) cameraControls.update(delta);
-        for (var _i16 = 0; _i16 < lights.length; _i16++) {
-          lights[_i16].light.position.set(planData.plan.position.x + lights[_i16].x, planData.plan.position.y + lights[_i16].height - 10, planData.plan.position.z - lights[_i16].y);
-          lights[_i16].target.position.set(planData.plan.position.x + lights[_i16].x, planData.plan.position.y, planData.plan.position.z - lights[_i16].y);
-        }
-        camera.updateMatrix();
-        camera.updateMatrixWorld();
-        for (var elemID in planData.sceneGraph.LODs) {
-          planData.sceneGraph.LODs[elemID].update(camera);
-        }
-        if (snapBox !== null) {
-          if (snapAnimI >= 15) {
-            if ('x' in targetPoint) snapBox.position.set(targetPoint.x, snapBox.position.y, targetPoint.z);
-            snapFlag = false;
-            t_i++;
-          } else {
-            if (snapAnimI == 0) {
-              targetCRotation = (targetRot / 180 * Math.PI - snapBox.rotation.y + Math.PI) * 180 / Math.PI % 360;
-              if (targetCRotation > 180) targetCRotation -= 360;
-              if (targetCRotation < -180) targetCRotation += 360;
-              targetCRotation = targetCRotation / 180 * Math.PI;
-            }
-            if (snapAnimI < 10) {
-              snapBox.rotateY(targetCRotation / 10);
-            } else {
-              snapBox.position.set(snapBox.position.clone().x - targetUVec.x / 10, snapBox.position.clone().y - targetUVec.y / 10, snapBox.position.clone().z - targetUVec.z / 10);
-            }
-            snapAnimI++;
-          }
-        }
-        if (t_i === 20) {
-          //stop snap after 5s
-          removeSnapBox();
-        }
-
-        // hide hole if wall is not visible
-        var layerID = self.props.state.scene.selectedLayer;
-        var layer = self.props.state.scene.layers.get(layerID);
-        layer.holes.forEach(function (data) {
-          var line = planData.sceneGraph.layers[layerID].lines[data.line];
-          var hole = planData.sceneGraph.layers[layerID].holes[data.id];
-          if (line instanceof Three.Object3D && !line.isMesh) {
-            line = line.children[0].children[0];
-            // index(faces) of the line
-            var indexAttribute = line.geometry.getIndex();
-            var firstFaceIndices = undefined;
-            if (indexAttribute && indexAttribute.length > 0) {
-              [indexAttribute.getX(0), indexAttribute.getX(1), indexAttribute.getX(2)], _readOnlyError("firstFaceIndices");
-            }
-            if (firstFaceIndices == undefined) return;
-            // normal vector of the line
-            var normalAttribute = line.geometry.attributes.normal;
-            var normal = new Three.Vector3().fromBufferAttribute(normalAttribute, 0).clone();
-            normal = normal.applyMatrix4(line.matrixWorld).sub(new Three.Vector3(0, 0, 0).applyMatrix4(line.matrixWorld)).normalize();
-            var vertices = layer.lines.get(data.line).vertices.toJS();
-            var vertex1 = layer.vertices.get(vertices[0]);
-            var vertex2 = layer.vertices.get(vertices[1]);
-            var cX = (vertex1.x + vertex2.x) / 2;
-            var cY = (vertex1.y + vertex2.y) / 2;
-            var posVec = new Three.Vector3(cX, 150, -cY);
-            posVec = posVec.add(planData.plan.position.clone());
-            var cameraLine = camera.position.clone().sub(posVec);
-            if (hole) {
-              hole.traverse(function (child) {
-                if (child.isMesh) {
-                  child.material.opacity = cameraLine.dot(normal) > 0 ? 1 : 0;
-                  child.material.transparent = cameraLine.dot(normal) > 0 ? false : true;
-                  child.material.needsUpdate = true;
-                }
-              });
-            }
-          }
-          // /////////////////////////////////////
-        });
-        if (scene3D && camera) {
-          if (planData.elevationGroup) {
-            planData.elevationGroup.visible = true;
-            self.renderer.render(scene3D, camera);
-            self.renderer.autoClearDepth = false;
-            planData.elevationGroup.visible = false;
-            // console.log('---originalScene:', scene3D)
-            self.renderer.render(scene3D, camera);
-            self.renderer.autoClearDepth = true;
-          } else {
-            self.renderer.render(scene3D, camera);
-          }
-        }
-        self.renderingID = requestAnimationFrame(render);
-        if (self.props.downloadFlag) {
-          if (self.state.waitForRender > 0) {
-            self.state.waitForRender++;
-            if (self.state.waitForRender > 2) {
-              self.setState({
-                isLoading: false,
-                waitForRender: 0
-              });
-              if (isElevationView(self.props.state.mode)) {
-                setTimeout(function () {
-                  self.props.setIsLoadingElevation('front', false);
-                }, 100);
-              }
-              self.renderer.domElement.style.display = 'block';
-            }
-          }
-        }
-      }
-
-      //
-
-      window.planData = planData;
-      this.planData = planData;
-      this.camera = camera;
-      this.cameraControls = cameraControls;
-      this.scene3D = scene3D;
-      prepareSnap(layer);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      cancelAnimationFrame(this.renderingID);
-      if (!isElevationView(this.props.state.mode)) {
-        if (this.cameraControls !== undefined) this.cameraControls.dispose();
-      }
-      if (!this.props.downloadFlag) {
-        this.renderer.domElement.removeEventListener('mousedown', this.mouseDownEvent);
-        this.renderer.domElement.removeEventListener('mouseup', this.mouseUpEvent);
-      }
-      disposeScene(this.scene3D);
-      this.scene3D.remove(this.planData.plan);
-      this.scene3D.remove(this.planData.grid);
-      this.scene3D = null;
-      this.planData = null;
-      this.camera = null;
-      this.cameraControls = null;
-      this.renderer.renderLists.dispose();
-    }
-  }, {
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps) {
-      var _this4 = this;
-      if (this.props.downloadFlag && diff(this.props.state, nextProps.state).toJS().length == 0 || isEmpty(nextProps.state.scene)) return;
-      var width = nextProps.width,
-        height = nextProps.height;
-      var selectedLayer = nextProps.state.getIn(['scene', 'layers', nextProps.state.scene.selectedLayer]);
-      var ceilHeight = convert(selectedLayer.ceilHeight).from(selectedLayer.unit).to(nextProps.state.scene.unit);
-      var actions = {
-        areaActions: this.context.areaActions,
-        holesActions: this.context.holesActions,
-        itemsActions: this.context.itemsActions,
-        sceneActions: this.context.sceneActions,
-        linesActions: this.context.linesActions,
-        projectActions: this.context.projectActions,
-        catalog: this.context.catalog
-      };
-      var isLoadingCabinet = nextProps.state.scene.isLoadingCabinet;
-      if (this.state.isLoadingCabinet !== isLoadingCabinet) this.setState({
-        isLoadingCabinet: isLoadingCabinet
-      });
-      this.width = width;
-      this.height = height;
-      var allLines;
-      var allLineRects;
-      var allItemRect;
-
-      // handle camera setting
-      switch (this.props.state.mode) {
-        case MODE_ELEVATION_VIEW:
-          // when Elevation mode (camera: Orthographic)
-          var cameraRect = handleCamRect(width, height, ceilHeight, this.state.lineLength);
-          // camera size
-          this.camera.left = -cameraRect.width / 2;
-          this.camera.right = cameraRect.width / 2;
-          this.camera.top = cameraRect.height / 2;
-          this.camera.bottom = -cameraRect.height / 2;
-          //camera position
-          this.camera.position.y = ceilHeight / 2;
-          break;
-        case MODE_3D_VIEW:
-          // when 3D mode (camera: Perspective)
-          this.camera.aspect = width / height;
-          break;
-      }
-      this.camera.updateProjectionMatrix();
-      var data = nextProps.state.scene;
-      var layer = data.getIn(['layers', data.selectedLayer]);
-      var self = this;
-      function implementBacksplash() {
-        if (isElevationView(self.props.state.mode)) return; // apply backsplash when just 3D_mode, not elevation_mode
-        var allItems = GeometryUtils.getAllItemSpecified(nextProps.state.scene, actions.catalog, BASE_CABINET_LAYOUTPOS);
-        var i,
-          items = [];
-        for (i = 0; i < allItems.others.length; i++) items.push(allItems.others[i]);
-        if (allItems.cur) items.push(allItems.cur);
-        for (i = 0; i < items.length; i++) {
-          var calcRect = GeometryUtils.getCalcRectFromItem3D(items[i]);
-          var visible = GeometryUtils.isSnappedLine(calcRect, allLineRects);
-          actions.itemsActions.setBacksplashVisible(items[i].itemInfo.id, visible);
-          createBacksplash(items[i], nextProps.state.scene.getIn(['layers', nextProps.state.scene.selectedLayer]), planData, nextProps.state.scene);
-        }
-      }
-      function implementWarningBox() {
-        var holeItems = GeometryUtils.getHoleItems(layer);
-        var i,
-          items = [];
-        for (i = 0; i < allItemRect.others.length; i++) items.push(allItemRect.others[i]);
-        if (allItemRect.cur) items.push(allItemRect.cur);
-        for (i = 0; i < items.length; i++) checkCabinetOverlap({
-          x: items[i].pos.x,
-          y: items[i].pos.y
-        }, items[i], holeItems, planData);
-      }
-      var prepareSnapSpec = function prepareSnapSpec(layer) {
-        allLines = GeometryUtils.getAllLines(layer);
-        allLineRects = GeometryUtils.buildRectFromLines(layer, allLines);
-        allItemRect = GeometryUtils.getAllItemSpecified(_this4.props.state.scene, actions.catalog, [WALL_CABINET_LAYOUTPOS, TALL_CABINET_LAYOUTPOS]);
-      };
-      var layer1 = this.props.state.scene.getIn(['layers', data.selectedLayer]);
-      if (this.state.showflag) {
-        prepareSnapSpec(layer);
-        implementBacksplash();
-        implementWarningBox();
-        this.setState({
-          showflag: false
-        });
-      }
-      if (nextProps.state.scene !== this.props.state.scene || nextProps.state.doorStyle && nextProps.state.doorStyle.get('name') !== this.props.state.doorStyle.get('name')) {
-        var changedValues = diff(this.props.state.scene, nextProps.state.scene);
-        prepareSnapSpec(layer);
-        if (nextProps.state.doorStyle && nextProps.state.doorStyle.get('name') === this.props.state.doorStyle.get('name')) {
-          self.setState({
-            isLoading: true
-          });
-          if (self.props.downloadFlag) {
-            self.setState({
-              waitForRender: 0
-            });
-            switch (self.props.state.mode) {
-              case MODE_ELEVATION_VIEW:
-                self.props.setIsLoadingElevation('front', true);
-                break;
-              case MODE_3D_VIEW:
-                self.props.setIsLoading3D(true);
-                break;
-            }
-          }
-          self.renderer.domElement.style.display = 'none';
-        }
-        if (nextProps.state.scene.showfg == true) {
-          implementBacksplash();
-          implementWarningBox();
-        } else {
-          deleteSpecifiedMeshObjects('TransformBox');
-        }
-        var _this$state = this.state,
-          toolObj = _this$state.toolObj,
-          angleObj = _this$state.angleObj;
-        var _updateScene = updateScene(this.planData, nextProps.state.scene, this.props.state.scene, changedValues.toJS(), actions, this.context.catalog, nextProps.state.mode, toolObj, angleObj, nextProps.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 (nextProps.state.getIn(['scene', 'isEndDragging'])) {
-          nextProps.state.setIn(['scene', 'isEndDragging'], false);
-        }
-      }
-      this.renderer.setSize(width, height);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$state2 = this.state,
-        isLoading = _this$state2.isLoading,
-        isLoadingCabinet = _this$state2.isLoadingCabinet;
-      if (isLoading) {
-        if (this.props.downloadFlag) {
-          this.renderer.domElement.style.display = 'none';
-          return /*#__PURE__*/React.createElement("div", {
-            style: {
-              alignItems: ' center',
-              width: this.props.width,
-              height: this.props.height,
-              display: 'inline-flex',
-              justifyContent: 'center'
-            }
-          }, /*#__PURE__*/React.createElement("img", {
-            style: {
-              width: '70px',
-              height: '70px',
-              animation: 'spin 2s linear infinite'
-            },
-            src: '/assets/img/loading_large.gif',
-            alt: "img"
-          }));
-        } else {
-          document.getElementById('front') && (document.getElementById('front').style.display = 'none');
-          document.getElementById('error').style.display = 'none';
-          this.renderer.domElement.style.display = 'none';
-          return /*#__PURE__*/React.createElement("div", {
-            style: {
-              textAlign: 'center',
-              width: '100%'
-            }
-          }, /*#__PURE__*/React.createElement("img", {
-            style: {
-              animation: 'spin 2s linear infinite',
-              marginTop: "22%"
-            },
-            src: '/assets/img/loading_large.gif',
-            alt: "img"
-          }));
-        }
-      } else if (isLoadingCabinet) {
-        this.renderer.domElement.style.pointerEvents = 'none';
-        document.getElementById('front') && (document.getElementById('front').style.display = 'none');
-        this.renderer.domElement.style.opacity = '0.4';
-        return /*#__PURE__*/React.createElement("div", {
-          style: {
-            textAlign: 'center',
-            width: '100%'
-          }
-        }, /*#__PURE__*/React.createElement("img", {
-          style: {
-            animation: 'spin 2s linear infinite',
-            position: "absolute",
-            top: "50%"
-          },
-          src: '/assets/img/loading_large.gif',
-          alt: "img"
-        }));
-      } else {
-        !this.props.downloadFlag && (document.getElementById('error').style.display = 'block');
-        this.renderer.domElement.style.pointerEvents = 'auto';
-        this.renderer.domElement.style.opacity = '1';
-        !this.props.downloadFlag && document.getElementById('front') && (document.getElementById('front').style.display = 'block');
-        return /*#__PURE__*/React.createElement('div', {
-          ref: 'canvasWrapper'
-        });
-      }
-    }
-  }]);
-}(React.Component);
-export { Scene3DViewer as default };
-Scene3DViewer.propTypes = {
-  state: PropTypes.object.isRequired,
-  width: PropTypes.number.isRequired,
-  height: PropTypes.number.isRequired,
-  replaceCabinet: PropTypes.func.isRequired
-};
-Scene3DViewer.contextTypes = {
-  areaActions: PropTypes.object.isRequired,
-  holesActions: PropTypes.object.isRequired,
-  itemsActions: PropTypes.object.isRequired,
-  linesActions: PropTypes.object.isRequired,
-  sceneActions: PropTypes.object.isRequired,
-  projectActions: PropTypes.object.isRequired,
-  catalog: PropTypes.object
-};
-//# sourceMappingURL=viewer3d.js.map