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

package/src/components/viewer3d/viewer3d.js

@@ -1,3376 +0,0 @@
-'use strict';
-
-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';
-
-export default class Scene3DViewer extends React.Component {
-  constructor(props) {
-    super(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;
-
-    let { mode } = props.state;
-
-    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';
-  }
-
-  componentDidMount(nextProps) {
-    let scene3D, camera, pivot, cameraControls, clock;
-    let spotLight1, spotLightTarget;
-
-    const 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
-    };
-
-    const self = this;
-    const { state } = this.props;
-    const { mode, scene } = state;
-    function setupLight(scene, inbBox) {
-      if (isElevationView(mode)) {
-        const ambilight = new Three.AmbientLight('0xffffff', 3);
-        scene.add(ambilight);
-      } else {
-        const shadowMapSize = 2048;
-        const 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;
-        const shadowCameraFar = shadowCameraSize * 10;
-        const bboxCenter = new Three.Vector3(
-          (inbBox.min.x + inbBox.max.x) / 2,
-          inbBox.min.y,
-          (inbBox.min.z + inbBox.max.z) / 2
-        );
-        function addDirLight(inColor, inIntensity, inPosition) {
-          const 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);
-
-          const targetObject = new Three.Object3D();
-          targetObject.position.copy(bboxCenter);
-          scene.add(targetObject);
-
-          dirLight.target = targetObject;
-          dirLight.target.updateMatrixWorld();
-
-          scene.add(dirLight);
-        }
-        function addSpotLight(
-          inColor,
-          inIntensity,
-          inPosition,
-          inTarget,
-          inDistance
-        ) {
-          const 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;
-
-          const 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);
-        }
-
-        const 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);
-
-        const ceiling = scene3D.getObjectByName('ceil');
-        if (ceiling) {
-          const ceilBBox = new Three.Box3().setFromObject(ceiling);
-
-          const 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
-          );
-          const 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
-          );
-
-          const 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
-          );
-          const 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
-          );
-
-          const 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;
-      }
-    }
-
-    const { promise, planData } = parseData(
-      scene,
-      actions,
-      this.context.catalog,
-      camera,
-      this.renderer,
-      state.mode
-    );
-
-    promise.then(() => {
-      let objToRemove = [];
-      planData.plan.traverse(obj => {
-        if (obj.geometry === null) {
-          objToRemove.push(obj);
-        }
-      });
-      objToRemove.forEach(obj => {
-        obj.removeFromParent();
-      });
-      const bbox = new Three.Box3().setFromObject(planData.plan);
-      if (!isElevationView(state.mode)) {
-        cameraControls.fitToBox(bbox);
-      }
-      setupLight(scene3D, planData.boundingBox);
-
-      self.setState({ waitForRender: 1 });
-      setTimeout(() => {
-        self.setState({ isLoading: false });
-        self.renderer.domElement.style.display = 'block';
-      }, 1500);
-    });
-
-    const area = scene.getIn(['layers', scene.selectedLayer, 'areas']);
-    const layer = scene.getIn(['layers', scene.selectedLayer]);
-    const areas = [],
-      lights = [];
-
-    let snapBox = null;
-
-    // Check for data
-    let msg = '';
-    scene.layers.forEach(layer => {
-      if (layer.id === scene.selectedLayer || layer.visible) {
-        layer.items.forEach(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(data => {
-      areas.push(data);
-    });
-    for (let i = 0; i < areas.length; i++) {
-      let aVertices = [];
-      let lines = [];
-      let height = 100;
-      areas[i].vertices.forEach(data => {
-        aVertices.push(data);
-      });
-      layer.lines.forEach(data => {
-        lines.push(data);
-      });
-      for (let i = 0; i < lines.length; i++) {
-        let data = lines[i];
-        let realVec = [];
-        data.vertices.forEach(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']);
-          break;
-        }
-      }
-      let vertices = [];
-      areas[i].vertices.forEach(datas => {
-        let vertex = scene.getIn([
-          'layers',
-          scene.selectedLayer,
-          'vertices',
-          datas
-        ]);
-        vertices.push(vertex);
-      });
-      vertices.push(vertices[0]);
-      let fLen = vertices.length - 1;
-      for (let i = 0; i < fLen; i++) {
-        let sX = vertices[i].x;
-        let sY = vertices[i].y;
-        let eX = vertices[i + 1].x;
-        let eY = vertices[i + 1].y;
-        let len = Math.sqrt((eX - sX) * (eX - sX) + (eY - sY) * (eY - sY));
-        for (let cLen = 200; cLen < len; cLen += 200) {
-          let cX = sX + ((eX - sX) * cLen) / len;
-          let cY = sY + ((eY - sY) * cLen) / len;
-          let endLen = Math.sqrt((eX - cX) * (eX - cX) + (eY - cY) * (eY - cY));
-          if (endLen <= 100) continue;
-          let vec2 = new Three.Vector2(cX - sX, cY - sY);
-          let angle = vec2.angle() + Math.PI / 2;
-          cX = Math.cos(angle) * 30 + cX;
-          cY = Math.sin(angle) * 30 + cY;
-          let 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;
-          let target = new Three.Object3D();
-          spotLight.target = target;
-          lights.push({
-            light: spotLight,
-            target: target,
-            x: cX,
-            y: cY,
-            height: height
-          });
-        }
-      }
-    }
-    // //////////////////////////
-
-    // OBJECT PICKING
-    let toIntersect = [planData.plan];
-    let mouse = new Three.Vector2();
-    let gridPlane = planData.grid;
-    let raycaster = new Three.Raycaster();
-    let selectedObject = {};
-    let selectedFlag = false;
-    let currentObject = null;
-    let isSelected = false;
-    let bRotate = false;
-    let bMove = false;
-    let bMoveUP = false;
-    /** Transformation matrix of grid */
-    const gridMatrix = new Three.Matrix4();
-    let rayDirection = new Three.Vector3();
-    /** World position of grid plane */
-    let gridPlanOrigin = new Three.Vector3();
-    let Point = new Three.Vector2();
-    let sPoint = new Three.Vector2();
-
-    // SNAP FUNCTION VARIABLE
-    let snapFlag = false;
-    let snapAnimI = 0;
-    let snapDelta = 6;
-    let t_i = 0;
-    let targetPoint = new Three.Vector3();
-    let targetRot = 0;
-    let targetUVec = new Three.Vector3();
-    let targetCRotation = 0;
-    let targetObj = null;
-    let targetNumber = 0;
-    let wallSlide = false;
-
-    let pinFlag = false;
-    let sFlag = false; //for all object move
-    let endPoint = {};
-    let allItemRect;
-    let allItemSnap;
-    let allLines;
-    let allLineRects;
-    let allLineSnap;
-    let allRect;
-    let allArea;
-
-    // end snap function variable///////////////////////
-    let backsplashVisible = false;
-    let holeItems = GeometryUtils.getHoleItems(layer);
-
-    let removeSnapBox = () => {
-      if (snapBox != null) {
-        planData.plan.remove(snapBox);
-        disposeObject(snapBox);
-        snapBox = null;
-        targetObj = null;
-        snapFlag = false;
-      }
-    };
-
-    const camToGrid = new Three.Vector3();
-    let camPos = camera.position;
-
-    const mapCursorPosition = (e, altitude) => {
-      camToGrid.subVectors(gridPlanOrigin, camPos);
-
-      let camD = camToGrid.y + (altitude ? altitude : 0);
-      let rayD = rayDirection.y;
-
-      const intersectPt = rayDirection.multiplyScalar(camD / rayD).add(camPos);
-      intersectPt.y = gridPlanOrigin.y;
-      intersectPt.applyMatrix4(gridMatrix);
-
-      return { x: intersectPt.x, y: -intersectPt.z };
-    };
-
-    /* for Snap Functions*/
-
-    let pointLineDistance = function (point, line) {
-      // return distance from point to line and directional point of line
-      let pX = point.x;
-      let pY = point.y;
-      let l1x = line[0].x;
-      let l1y = line[0].y;
-      let l2x = line[1].x;
-      let l2y = line[1].y;
-      let pLine = new Three.Vector2(l1x - pX, l1y - pY);
-      let Line = new Three.Vector2(l1x - l2x, l1y - l2y);
-      let pAngle = pLine.angle();
-      let lAngle = Line.angle();
-      let pDistance = pLine.length();
-      let oDistance = Line.length();
-      let directDistance = Math.sin(pAngle - lAngle) * pDistance;
-      let lineDistance = Math.cos(pAngle - lAngle) * pDistance;
-      let dX = l1x + ((l2x - l1x) * lineDistance) / oDistance;
-      let dY = l1y + ((l2y - l1y) * lineDistance) / oDistance;
-      let dPoint = { x: dX, y: dY };
-      return { distance: directDistance, point: dPoint };
-    };
-    let getInterSect = function (shape1, shape2) {
-      // return result of intersect of two shape
-      let count = 0;
-      for (let i = 0; i < shape1.length - 1; i++) {
-        let sl1 = { x: shape1[i].x, y: shape1[i].y };
-        let sl2 = { x: shape1[i + 1].x, y: shape1[i + 1].y };
-        for (let j = 0; j < shape2.length - 1; j++) {
-          let el1 = { x: shape2[j].x, y: shape2[j].y };
-          let el2 = { x: shape2[j + 1].x, y: shape2[j + 1].y };
-          let 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
-      let rX = width / 2;
-      let rY = height / 2;
-      let vertices = [];
-      let cRot = rot;
-      let pX = pos.x + Math.cos(cRot) * rX + Math.cos(cRot + Math.PI / 2) * rY;
-      let 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;
-    };
-
-    const prepareSnap = layer => {
-      allLines = GeometryUtils.getAllLines(layer);
-      allLineRects = GeometryUtils.buildRectFromLines(layer, allLines);
-      allItemRect = GeometryUtils.getAllItems(
-        this.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);
-    };
-
-    let prepareSnapSpec = layer => {
-      allLines = GeometryUtils.getAllLines(layer);
-      allLineRects = GeometryUtils.buildRectFromLines(layer, allLines);
-      allItemRect = GeometryUtils.getAllItemSpecified(
-        this.props.state.scene,
-        actions.catalog,
-        WALL_CABINET_LAYOUTPOS
-      );
-      // allItemSnap = GeometryUtils.getAllItemSnap(allItemRect);
-    };
-
-    // prepareSnapSpec(layer);
-    let lineRect = layer => {
-      let areainfo = [];
-      layer.areas.forEach(area => {
-        let sz = area.vertices.size;
-        for (var i = 0; i < sz; i++) {
-          areainfo.push(area.vertices.get(i));
-        }
-      });
-      let rect = [];
-      areainfo.forEach(area => {
-        let vert = layer.vertices.get(area);
-        rect.push(vert.x, vert.y);
-      });
-      return rect;
-    };
-
-    this.collisionCheck = function (obj, pos, rot, tObj, item = null, catalog) {
-      //collision check from one object to every other object excpet target object
-      let layer = this.props.state.scene.getIn([
-        'layers',
-        obj.userData.layerId
-      ]);
-      let layoutpos = 'utype';
-      if (item !== null) {
-        let catid = item.type;
-        let cat = catalog.elements[catid];
-        layoutpos = cat.info.layoutpos;
-      }
-      let oPos = new Three.Vector2(pos.clone().x, pos.clone().y);
-      let sBounding = obj.children[0].userData;
-      let width = sBounding.max.x - sBounding.min.x;
-      let depth = sBounding.max.z - sBounding.min.z;
-      let oVertices = this.getRectPoints(
-        width,
-        depth,
-        oPos.clone(),
-        ((rot % 360) / 180) * Math.PI
-      );
-      let datas = [];
-      layer.items.forEach(data => {
-        datas.push(data);
-      });
-      for (let i = 0; i < datas.length; i++) {
-        let data = datas[i];
-        if (data.id == obj.userData.itemId || data.id == tObj.userData.itemId)
-          continue;
-        let 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;
-        }
-        let item = layer.items.getIn([data.id]);
-        let ocatid = item.type;
-        let ocat = catalog.elements[ocatid];
-        let olayoutpos = ocat.info.layoutpos;
-        if (
-          !(
-            (layoutpos === BASE_CABINET_LAYOUTPOS &&
-              olayoutpos === WALL_CABINET_LAYOUTPOS) ||
-            (layoutpos === WALL_CABINET_LAYOUTPOS &&
-              olayoutpos === BASE_CABINET_LAYOUTPOS)
-          )
-        ) {
-          let tRot = item.rotation;
-          let tPos = new Three.Vector2(item.x, item.y);
-          let tBounding = target.children[0].userData;
-          let twidth = tBounding.max.x - tBounding.min.x;
-          let tdepth = tBounding.max.z - tBounding.min.z;
-          let tVertices = this.getRectPoints(
-            twidth,
-            tdepth,
-            tPos.clone(),
-            ((tRot % 360) / 180) * Math.PI
-          );
-          if (getInterSect(oVertices, tVertices)) {
-            return false;
-          }
-        }
-      }
-      datas = [];
-      layer.lines.forEach(data => {
-        datas.push(data);
-      });
-      for (let i = 0; i < datas.length; i++) {
-        let data = datas[i];
-        if (data.id == obj.userData.itemId || data.id == tObj.userData.itemId)
-          continue;
-        let item = layer.lines.getIn([data.id]);
-        // let llayoutpos = catalog.elements[item.type].info.layoutpos;
-        let vertices = [];
-        item.vertices.forEach(data => {
-          let vertex = layer.vertices.get(data);
-          vertices.push({ x: vertex.x, y: vertex.y });
-        });
-        let vec = new Three.Vector2(
-          vertices[1].x - vertices[0].x,
-          vertices[1].y - vertices[0].y
-        );
-        let tRot = vec.angle();
-        let tPos = new Three.Vector2(
-          (vertices[0].x + vertices[1].x) / 2,
-          (vertices[0].y + vertices[1].y) / 2
-        );
-        let tdepth = item.properties.getIn(['thickness', 'length']);
-        let twidth = Math.sqrt(vec.x * vec.x + vec.y * vec.y);
-        let tVertices = this.getRectPoints(twidth, tdepth, tPos.clone(), tRot);
-        if (getInterSect(oVertices, tVertices)) {
-          return false;
-        }
-      }
-      return true;
-    };
-
-    this.collisionHoleCheck = function (
-      obj,
-      pos,
-      rot,
-      tObj,
-      item = null,
-      catalog
-    ) {
-      let layer = this.props.state.scene.getIn([
-        'layers',
-        obj.userData.layerId
-      ]);
-      let currentItem;
-      if (item !== null) {
-        let catid = item.type;
-        let cat = catalog.elements[catid];
-        currentItem = {
-          selectedItem: item,
-          cat
-        };
-      }
-      let oPos = new Three.Vector2(pos.clone().x, pos.clone().y);
-      let sBounding = obj.children[0].userData;
-      let width = sBounding.max.x - sBounding.min.x;
-      let depth = sBounding.max.z - sBounding.min.z;
-      let oVertices = this.getRectPoints(
-        width,
-        depth,
-        oPos.clone(),
-        ((rot % 360) / 180) * Math.PI
-      );
-
-      let datas = [];
-      layer.items.forEach(data => {
-        datas.push(data);
-      });
-      for (let i = 0; i < datas.length; i++) {
-        let data = datas[i];
-        if (data.id == obj.userData.itemId || data.id == tObj.userData.itemId)
-          continue;
-        let 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;
-        }
-        let item = layer.items.getIn([data.id]);
-        let ocatid = item.type;
-        let ocat = catalog.elements[ocatid];
-        if (!ocat)
-          ocat = catalog.elements[returnReplaceableDeepSearchType(ocatid)];
-        let otherItem = {
-          item,
-          cat: ocat
-        };
-
-        if (
-          GeometryUtils.needSnap(currentItem, otherItem) &&
-          otherItem.cat.type != 'cabinet'
-        ) {
-          let tRot = item.rotation;
-          let tPos = new Three.Vector2(item.x, item.y);
-          let tBounding = target.children[0].userData;
-          let twidth = tBounding.max.x - tBounding.min.x;
-          let tdepth = tBounding.max.z - tBounding.min.z;
-          let tVertices = this.getRectPoints(
-            twidth,
-            tdepth,
-            tPos.clone(),
-            ((tRot % 360) / 180) * Math.PI
-          );
-          if (getInterSect(oVertices, tVertices)) {
-            return false;
-          }
-        }
-      }
-
-      let holes = [];
-      layer.lines.forEach(line => {
-        line.holes.forEach(holeID => {
-          let hole = layer.holes.get(holeID);
-          holes.push(hole);
-        });
-      });
-      let i = 0;
-      for (; i < holes.length; i++) {
-        let tPos = new Three.Vector2(holes[i].x, holes[i].y);
-        let twidth = holes[i].properties.getIn(['width', 'length']);
-        let theight = holes[i].properties.getIn(['thickness', 'length']);
-        let trot = holes[i].rotation;
-        let 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
-    ) {
-      let items = [];
-
-      let cur_category = '';
-      let catalog = actions.catalog;
-      if (layer.selected.items.size > 0) {
-        let selectedItem = layer.getIn(['items', layer.selected.items.get(0)]);
-        let catid = selectedItem.type;
-        let cat = catalog.elements[catid];
-        if (cat === undefined || cat === null)
-          cat = catalog.getIn(['elements', catid]);
-        cur_category = cat.obj.category;
-      }
-
-      layer.items.forEach(data => {
-        if (data.id == selectedObject.itemID) {
-          return;
-        }
-
-        items.push(data.toJS());
-      });
-      let oPos = new Three.Vector2(originPos.x, -originPos.z);
-
-      // sort from distance
-      for (let i = 0; i < items.length - 1; i++) {
-        for (let j = i + 1; j < items.length; j++) {
-          if (
-            verticesDistance(oPos, new Three.Vector2(items[i].x, items[i].y)) >
-            verticesDistance(oPos, new Three.Vector2(items[j].x, items[j].y))
-          ) {
-            let exchange = items[j];
-            items[j] = items[i];
-            items[i] = exchange;
-          }
-        }
-      }
-      let i = 0;
-
-      for (; i < items.length; i++) {
-        if (!items[i]) return;
-        let target =
-          planData.sceneGraph.layers[selectedObject.layerID].items[items[i].id];
-        if (target === undefined) {
-          return false;
-        }
-        let targetData = layer.items.getIn([items[i].id]);
-        let tRot = targetData.rotation;
-        let tPos = new Three.Vector2(targetData.x, targetData.y);
-        let tBounding = target.children[0].userData;
-        let twidth = tBounding.max.x - tBounding.min.x;
-        let tdepth = tBounding.max.z - tBounding.min.z;
-        let tVertices = this.getRectPoints(
-          twidth,
-          tdepth,
-          tPos.clone(),
-          ((tRot % 360) / 180) * Math.PI
-        );
-        if (getInterSect(sVertices, tVertices)) {
-          break;
-        }
-      }
-      if (items.length == 0 || !items[i]) return;
-      let target =
-        planData.sceneGraph.layers[selectedObject.layerID].items[items[i].id];
-      let targetData = layer.items.getIn([items[i].id]);
-      let targetPos = new Three.Vector2(targetData.x, targetData.y);
-      let tRot = targetData.rotation;
-      let tBounding = target.children[0].userData;
-      let twidth = tBounding.max.x - tBounding.min.x;
-      let tdepth = tBounding.max.z - tBounding.min.z;
-      let tVertices = this.getRectPoints(
-        twidth,
-        tdepth,
-        targetPos.clone(),
-        ((tRot % 360) / 180) * Math.PI
-      );
-      // ////////////////////////
-      let vArray = [];
-      let dteArray = [];
-      let lineArray = [];
-      let vdistanceArray = [];
-      let cVecArray = [];
-      let inFlag = false;
-      for (let i = 0; i < 4; i++) {
-        let v1 = tVertices[i];
-        let v2 = tVertices[i + 1];
-        let 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
-      let tPosDistance =
-        Math.abs(pointLineDistance(tPos, lineArray[0]).distance) +
-        Math.abs(pointLineDistance(tPos, lineArray[2]).distance);
-      let realDistance = new Three.Vector2(
-        lineArray[1][0].x - lineArray[1][1].x,
-        lineArray[1][0].y - lineArray[1][1].y
-      ).length();
-      let tPosDistance1 =
-        Math.abs(pointLineDistance(tPos, lineArray[1]).distance) +
-        Math.abs(pointLineDistance(tPos, lineArray[3]).distance);
-      let 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;
-      // ////////////////////
-      let key = 0;
-      // sort distance from origin point
-      for (let j = 0; j < dteArray.length - 1; j++) {
-        for (let k = j + 1; k < dteArray.length; k++) {
-          if (Math.abs(dteArray[j]) > Math.abs(dteArray[k])) {
-            let temp = dteArray[k];
-            dteArray[j] = dteArray[k];
-            dteArray[k] = temp;
-            let temp1 = vArray[k];
-            vArray[j] = vArray[k];
-            vArray[k] = temp1;
-            let temp2 = lineArray[k];
-            lineArray[j] = lineArray[k];
-            lineArray[k] = temp2;
-          }
-        }
-      }
-      // //////////////////////////////
-      for (let i = 0; i < 4; i++) {
-        let data = pointLineDistance(sVertices[i], lineArray[key]);
-        vdistanceArray.push(data.distance);
-        cVecArray.push({
-          x: data.point.x - sVertices[i].x,
-          y: data.point.y - sVertices[i].y
-        });
-      }
-
-      for (let j = 0; j < vdistanceArray.length; j++) {
-        let tX = tPos.x + cVecArray[j].x;
-        let tY = tPos.y + cVecArray[j].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
-      let target = obj.userData.target;
-      for (; target.parent != null; ) {
-        if (target.name == 'pivot') break;
-        target = target.parent;
-      }
-      let source = obj.parent.parent.parent;
-      if (target.userData.type == 'item') {
-        let sRot = layer.getIn(['items', source.userData.itemId]).rotation;
-        let tRot = layer.getIn(['items', target.userData.itemId])
-          ? layer.getIn(['items', target.userData.itemId]).rotation
-          : 0;
-        let item = layer.getIn(['items', source.userData.itemId]);
-        let layoutType = item.layoutpos;
-        let altitudeLength = convert(
-          item.properties.getIn(['altitude', '_length'])
-        )
-          .from('in')
-          .to('cm');
-        let sBounding = source.children[0].userData;
-        let tBounding = target.children[0].userData;
-        let tPos = target.position.clone();
-        let width = sBounding.max.x - sBounding.min.x;
-        let height = sBounding.max.y - sBounding.min.y;
-        let depth = sBounding.max.z - sBounding.min.z;
-        let snapBoxGeom = new Three.BoxGeometry(width, height, depth);
-        let snapBoxObj = new Three.Mesh(
-          snapBoxGeom,
-          new Three.MeshBasicMaterial({
-            // color: 0x2cde6b,
-            // opacity: 0.7,
-            transparent: true,
-            blending: Three.MultiplyBlending
-          })
-        );
-        let removeSnapBoxObj = () => {
-          if (snapBoxObj) {
-            planData.plan.remove(snapBoxObj);
-            disposeObject(snapBoxObj);
-          }
-          snapFlag = false;
-        };
-        let 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);
-        let deltaX =
-          (tBounding.max.x - tBounding.min.x) / 2 +
-          (sBounding.max.x - sBounding.min.x) / 2;
-        let deltaZ =
-          (tBounding.max.z - tBounding.min.z) / 2 -
-          (sBounding.max.z - sBounding.min.z) / 2;
-        let sPos = snapBoxObj.position.clone();
-        // avaliable snap place///////////////
-        let tPoses = [];
-        let pX =
-          tPos.x +
-          deltaX * Math.cos((tRot / 180) * Math.PI) +
-          deltaZ * Math.sin((tRot / 180) * Math.PI);
-        let 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));
-        let distance = Math.sqrt(
-          (sPos.x - tPoses[0].x) * (sPos.x - tPoses[0].x) +
-            (sPos.z - tPoses[0].z) * (sPos.z - tPoses[0].z)
-        );
-        let tNum = 1;
-        tPos = tPoses[0].clone();
-        for (let i = 1; i < tPoses.length; i++) {
-          let curDis = Math.sqrt(
-            (sPos.x - tPoses[i].x) * (sPos.x - tPoses[i].x) +
-              (sPos.z - tPoses[i].z) * (sPos.z - tPoses[i].z)
-          );
-          if (curDis < distance) {
-            distance = curDis;
-            tNum = i + 1;
-            tPos = tPoses[i].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;
-        let cx = sPos.x - tPos.x;
-        let cz = sPos.z - tPos.z;
-        targetUVec = new Three.Vector3(cx, 0, cz);
-        targetCRotation = (((tRot - sRot) % 360) / 180) * Math.PI;
-      } else {
-        let item = layer.getIn(['items', source.userData.itemId]);
-        if (holeItems.length && selectedObj) {
-          let i;
-          for (i = 0; i < holeItems.length; i++) {
-            let hole = holeItems[i];
-            if (Math.abs(Math.sin(selectedObj.rotRad)) === 1) {
-              if (
-                item.y + selectedObj.size.width / 2 >=
-                  hole.y - hole.width / 2 &&
-                item.y - selectedObj.size.width / 2 <=
-                  hole.y + hole.width / 2 &&
-                (selectedObj.rotRad == 0 || selectedObj.rotRad == -Math.PI / 2
-                  ? item.x <= hole.x &&
-                    item.x + selectedObj.size.height >= hole.x
-                  : item.x >= hole.x &&
-                    item.x - selectedObj.size.height <= hole.x)
-              )
-                break;
-            } else {
-              if (
-                item.x + selectedObj.size.width / 2 >=
-                  hole.x - hole.width / 2 &&
-                item.x - selectedObj.size.width / 2 <=
-                  hole.x + hole.width / 2 &&
-                (selectedObj.rotRad == 0 || selectedObj.rotRad == -Math.PI / 2
-                  ? item.y <= hole.y &&
-                    item.y + selectedObj.size.height >= hole.y
-                  : item.y >= hole.y &&
-                    item.y - selectedObj.size.height <= hole.y)
-              )
-                break;
-            }
-          }
-          if (i != holeItems.length) return;
-        }
-        if (target.userData.type == 'hole') {
-          snapFlag = false;
-          return;
-        } else {
-          let layoutType = item.layoutpos;
-          let altitudeLength = convert(
-            item.properties.getIn(['altitude', '_length'])
-          )
-            .from('in')
-            .to('cm');
-          let sBounding = source.children[0].userData;
-          let width = sBounding.max.x - sBounding.min.x;
-          let height = sBounding.max.y - sBounding.min.y;
-          let depth = sBounding.max.z - sBounding.min.z;
-          let snapBoxGeom = new Three.BoxGeometry(width, height, depth);
-          let snapBoxObj = new Three.Mesh(
-            snapBoxGeom,
-            new Three.MeshBasicMaterial({
-              // color: 0x2cde6b,
-              // opacity: 0.7,
-              transparent: true,
-              blending: Three.MultiplyBlending
-            })
-          );
-          let removeSnapBoxObj = () => {
-            if (snapBoxObj) {
-              planData.plan.remove(snapBoxObj);
-              disposeObject(snapBoxObj);
-            }
-            snapFlag = false;
-          };
-          let 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);
-
-          let snapLine = layer.getIn(['lines', target.userData.lineId]);
-          // let snapLineThickness = snapLine.properties.getIn([
-          //   'thickness',
-          //   'length'
-          // ]);
-          let snapLineThickness = 10.64;
-          let vertices = [];
-          if (snapLine === undefined) return;
-          snapLine.vertices.forEach(data => {
-            let vec = layer.getIn(['vertices', data]);
-            vertices.push(vec);
-          });
-          let iX = source.position.clone().x;
-          let iY = -source.position.clone().z;
-          let lineVec = new Three.Vector2(
-            vertices[1].x - vertices[0].x,
-            vertices[1].y - vertices[0].y
-          );
-          let oLength = Math.sqrt(
-            lineVec.x * lineVec.x + lineVec.y * lineVec.y
-          );
-          lineVec.normalize();
-          let vec2 = new Three.Vector2(iX - vertices[0].x, iY - vertices[0].y);
-          let vec2Legnth = Math.sqrt(vec2.x * vec2.x + vec2.y * vec2.y);
-          let angle = Math.abs(lineVec.angle() - vec2.angle());
-          angle = angle > Math.PI ? 2 * Math.PI - angle : angle;
-          let lineLength = Math.cos(angle) * vec2Legnth;
-          let transLength = 0;
-          if (lineLength < 100) {
-            transLength = -lineLength + (snapLineThickness + width) / 2;
-          }
-          if (lineLength > oLength - 100) {
-            transLength =
-              -lineLength - (snapLineThickness + width) / 2 + oLength;
-          }
-          let directPoint = new Three.Vector2(
-            lineVec.x * lineLength + vertices[0].x,
-            lineVec.y * lineLength + vertices[0].y
-          );
-          let directLine = new Three.Vector2(
-            directPoint.x - iX,
-            directPoint.y - iY
-          );
-          let dLength = Math.sqrt(
-            (iX - directPoint.x) * (iX - directPoint.x) +
-              (iY - directPoint.y) * (iY - directPoint.y)
-          );
-          let reduceLen = (snapLineThickness + depth) / 2;
-          let scale = (dLength - reduceLen) / dLength;
-          let tPos = new Three.Vector2(
-            iX + (directPoint.x - iX) * scale + lineVec.x * transLength,
-            iY + (directPoint.y - iY) * scale + lineVec.y * transLength
-          );
-          let realAngle = directLine.angle() - Math.PI / 2;
-          let tRot = (realAngle * 180) / Math.PI;
-          let sPos = new Three.Vector2(iX, iY);
-          let sRot = item.rotation;
-          let tNum = 0;
-          // //////////////////////////////////////
-          // check part////
-          let result = this.collisionCheck(
-            source,
-            tPos,
-            tRot,
-            target,
-            item,
-            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(tPos.x, 0, -tPos.y);
-            let sourcePos = snapBox.position.clone();
-            let cx = sourcePos.x - targetPoint.x;
-            let cz = sourcePos.z - targetPoint.z;
-            targetUVec = new Three.Vector3(cx, 0, cz);
-            targetRot = tRot;
-            targetCRotation = (((tRot - sRot) % 360) / 180) * Math.PI;
-            snapFlag = false;
-            return;
-          } else {
-            removeSnapBox();
-          }
-          // //////////////////////////////////////
-          snapAnimI = 0;
-          t_i = 0;
-          targetObj = target;
-          targetNumber = tNum;
-          targetRot = tRot;
-          targetPoint = new Three.Vector3(tPos.x, 0, -tPos.y);
-          snapBox = snapBoxObj;
-          let sourcePos = snapBox.position.clone();
-          let cx = sourcePos.x - targetPoint.x;
-          let cz = sourcePos.z - targetPoint.z;
-          targetUVec = new Three.Vector3(cx, 0, cz);
-          targetRot = tRot;
-          targetCRotation = (((tRot - sRot) % 360) / 180) * Math.PI;
-        }
-      }
-    };
-
-    /*end of snap functions*/
-    let selectedObj = null;
-    let firstMove = false;
-    let prevX, prevY;
-
-    let selObj = null;
-
-    let createToolObject = () => {
-      const canvas = document.createElement('canvas');
-      canvas.width = 100;
-      canvas.height = 200;
-      canvas.style.width = 50 + 'px';
-      canvas.style.height = 100 + 'px';
-      const 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();
-      let 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();
-      let 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;
-    };
-
-    let clockWise = true;
-    let lastAngle = 0;
-
-    let createAngleObject = rotate => {
-      const canvas = document.createElement('canvas');
-      canvas.width = 100;
-      canvas.height = 100;
-      canvas.style.width = 100 + 'px';
-      canvas.style.height = 100 + 'px';
-      const 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;
-    };
-
-    let toolTexture = new Three.Texture(createToolObject());
-    toolTexture.needsUpdate = true;
-
-    let 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';
-
-    let angleTexture = new Three.Texture(createAngleObject(0));
-    angleTexture.needsUpdate = true;
-
-    let 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
-     */
-    const getPoint = (e, alti) => {
-      mouse.x = (e.offsetX / this.width) * 2 - 1;
-      mouse.y = (-e.offsetY / this.height) * 2 + 1;
-
-      raycaster.setFromCamera(mouse, camera);
-      rayDirection = raycaster.ray.direction;
-
-      Point = mapCursorPosition(e, alti);
-      this.context.projectActions.updateMouseCoord(Point);
-    };
-
-    const getIntersectWallPoint = e => {
-      mouse.x = (e.offsetX / this.width) * 2 - 1;
-      mouse.y = (-e.offsetY / this.height) * 2 + 1;
-
-      raycaster.setFromCamera(mouse, camera);
-      rayDirection = raycaster.ray.direction;
-
-      let lines = planData.sceneGraph.layers[scene.selectedLayer].lines;
-      let keys = Object.keys(lines);
-      let arrMesh = [];
-      keys.forEach(key => {
-        lines[key].children[0].children.forEach(mesh => {
-          if (mesh.name == 'soul' && mesh.visible) arrMesh.push(mesh);
-        });
-      });
-      if (arrMesh.length > 0) {
-        const intersects = raycaster.intersectObjects(arrMesh);
-        if (intersects.length > 0) {
-          let intersectPt = intersects[0].point;
-          intersectPt.applyMatrix4(gridMatrix);
-
-          Point = { x: intersectPt.x, y: -intersectPt.z };
-          this.context.projectActions.updateMouseCoord(Point);
-          return true;
-        }
-      }
-
-      return false;
-    };
-
-    const updateSelectedObject = () => {
-      // update the selected object
-      let selectedLayerId = this.props.state.scene.selectedLayer;
-      let selItemId = this.props.state.scene
-        .getIn(['layers', selectedLayerId, 'selected', 'items'])
-        .toJS()[0];
-      selectedObject = {
-        layerID: selectedLayerId,
-        itemID: selItemId
-      };
-    };
-
-    this.mouseDownEvent = event => {
-      gridPlanOrigin = gridPlane.position;
-      gridMatrix.copy(gridPlane.matrixWorld).invert();
-      let altitude = 0;
-      if (
-        allItemRect &&
-        allItemRect.cur &&
-        allItemRect.cur.itemInfo !== undefined
-      ) {
-        let properties = allItemRect.cur.itemInfo.properties;
-        altitude = properties.getIn(['altitude', '_length']);
-        let unit = properties.getIn(['altitude', '_unit']) || 'in';
-        altitude = convert(altitude).from(unit).to(this.props.state.scene.unit);
-      }
-      getPoint(event, altitude);
-
-      const state = this.props.state;
-
-      this.lastMousePosition.x = mouse.x;
-      this.lastMousePosition.y = mouse.y;
-
-      const layer = state.scene.getIn(['layers', state.scene.selectedLayer]);
-      const 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
-       */
-      let transflag = 3;
-      raycaster.setFromCamera(mouse, camera);
-      const meshes = [];
-      toIntersect.forEach(object => {
-        if (!object) return;
-        object.traverse(o => {
-          if (o.isMesh) meshes.push(o);
-        });
-      });
-      let intersects = raycaster.intersectObjects(meshes, true);
-
-      let 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.
-        let 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) {
-        let i = 0,
-          length = intersects.length;
-        for (i = 0; i < length; i++) {
-          if (
-            intersects[i].object.type !== 'BoxHelper' &&
-            // intersects[i].object.type === OBJTYPE_MESH &&
-            intersects[i].object.name !== 'lineText' &&
-            intersects[i].object.name !== 'soul' &&
-            !intersects[i].object.name.includes('WarningBox')
-          )
-            break;
-        }
-
-        if (intersects[i] !== undefined) {
-          if (intersects[i].object.name.indexOf('transUp') != -1) transflag = 1;
-          if (intersects[i].object.name.indexOf('transHole') != -1)
-            transflag = 2;
-        } else {
-          console.log('intersects[i] is undefined in viewer3d/viewer3d.js');
-        }
-      }
-
-      if (this.props.state.mode == MODE_DRAWING_ITEM_3D) return;
-
-      if (isSelected) {
-        !this.props.downloadFlag && this.props.setToolbar('');
-
-        if (intersects.length > 0 && !isNaN(intersects[0].distance)) {
-          let i;
-          for (i = 0; i < intersects.length; i++) {
-            if (
-              intersects[i].object instanceof Three.Mesh &&
-              intersects[i].object.name != 'TransformBox' &&
-              intersects[i].object.type != 'Line' &&
-              intersects[i].object.name != 'lineText' &&
-              intersects[i].object.name != 'countertops' &&
-              intersects[i].object.type != 'BoxHelper' &&
-              intersects[i].object.name != 'floor' &&
-              intersects[i].object.name != 'backFace' &&
-              intersects[i].object.name != 'soul' &&
-              !intersects[i].object.name.includes('backsplash') &&
-              !intersects[i].object.name.includes('WarningBox')
-            )
-              break;
-          }
-          if (intersects[i] === undefined) {
-            if (transflag !== 0 && transflag !== 2) {
-              isSelected = false;
-              this.context.projectActions.unselectAll();
-              scene3D.remove(toolObj);
-              this.context.itemsActions.removeReplacingSupport();
-              return;
-            }
-          }
-          if (selectedObject !== undefined) {
-            let selectedItem =
-              planData.sceneGraph.layers[selectedObject.layerID].items[
-                selectedObject.itemID
-              ];
-            sPoint.set(Point.x, Point.y);
-            if (transflag == 0) {
-              scene3D.remove(toolObj);
-              let alti = 0;
-              if (
-                allItemRect &&
-                allItemRect.cur &&
-                allItemRect.cur.itemInfo !== undefined
-              ) {
-                let properties = allItemRect.cur.itemInfo.properties;
-                alti = properties.getIn(['altitude', '_length']);
-                let unit = properties.getIn(['altitude', '_unit']) || 'in';
-                alti = convert(alti).from(unit).to(this.props.state.scene.unit);
-              }
-              getPoint(
-                { offsetX: event.offsetX - 50, offsetY: event.offsetY },
-                alti
-              );
-              if (isUndefined(selectedItem)) return;
-              const selItem = this.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);
-              this.setState({ angleObj: angleObj });
-              let centerPos = Point;
-              getPoint(event, alti);
-
-              this.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:
-                  this.context.holesActions.beginDraggingHole3D(
-                    selectedObject.layerID,
-                    selectedObject.holeID,
-                    Point.x,
-                    Point.y
-                  );
-                  break;
-                default:
-                  this.context.itemsActions.beginDraggingItem3D(
-                    selectedObject.layerID,
-                    selectedObject.itemID,
-                    Point.x,
-                    Point.y
-                  );
-                  break;
-              }
-              bMove = true;
-              scene3D.remove(toolObj);
-            }
-            for (i = 0; i < intersects.length; i++) {
-              if (
-                selectedItem != undefined &&
-                intersects[i].object.parent &&
-                intersects[i].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;
-              this.context.projectActions.unselectAll();
-              scene3D.remove(toolObj);
-              this.context.itemsActions.removeReplacingSupport();
-            }
-          }
-        } else {
-          isSelected = false;
-          this.context.projectActions.unselectAll();
-          scene3D.remove(toolObj);
-          this.context.itemsActions.removeReplacingSupport();
-          return;
-        }
-      }
-    };
-
-    this.mouseUpEvent = event => {
-      firstMove = 0;
-      let altitude = 0;
-      if (
-        allItemRect &&
-        allItemRect.cur &&
-        allItemRect.cur.itemInfo !== undefined
-      ) {
-        let properties = allItemRect.cur.itemInfo.properties;
-        altitude = properties.getIn(['altitude', '_length']);
-        let unit = properties.getIn(['altitude', '_unit']) || 'in';
-        altitude = convert(altitude).from(unit).to(this.props.state.scene.unit);
-      }
-      scene3D.remove(angleObj);
-      scene3D.remove(toolObj);
-      if (!this.props.downloadFlag && !this.props.state.mode.includes('ING')) {
-        this.props.setToolbar('');
-      }
-      getPoint(event, altitude);
-      if (this.props.state.mode == MODE_DRAWING_ITEM_3D) {
-        if (Point.x > this.props.state.scene.width)
-          Point.x = this.props.state.width;
-        if (Point.y > this.props.state.scene.height)
-          Point.y = this.props.state.height;
-        if (Point.x < 0) Point.x = 0;
-        if (Point.y < 0) Point.y = 0;
-        if (snapBox == null) {
-          actions.itemsActions.endDrawingItem(
-            this.props.state.scene.selectedLayer,
-            sPoint.x,
-            sPoint.y
-          );
-        } else {
-          actions.itemsActions.updateDraggingItemChanged(
-            targetPoint.x,
-            -targetPoint.z,
-            selectedObject.layerID,
-            selectedObject.itemID
-          );
-          this.context.itemsActions.updateRotatingItemChanged(
-            targetRot,
-            selectedObject.layerID,
-            selectedObject.itemID
-          );
-          removeSnapBox();
-
-          actions.itemsActions.endDrawingItem(
-            this.props.state.scene.selectedLayer,
-            Point.x,
-            Point.y
-          );
-        }
-        bMove = false;
-        return;
-      }
-
-      if (this.props.state.mode == MODE_DRAGGING_ITEM_3D) {
-        this.context.itemsActions.endDraggingItem3D();
-      }
-
-      if (this.props.state.mode == MODE_ROTATING_ITEM_3D) {
-        this.context.itemsActions.endRotatingItem3D(sPoint.x, sPoint.y);
-      }
-
-      if (this.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(
-          this.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 / this.width) * 2 - 1;
-        mouse.y = -(event.offsetY / this.height) * 2 + 1;
-
-        raycaster.setFromCamera(mouse, camera);
-        rayDirection = raycaster.ray.direction;
-        rayDirection = rayDirection.normalize();
-
-        const meshes = [];
-        toIntersect.forEach(object => {
-          if (!object) return;
-          object.traverse(o => {
-            if (o.isMesh) meshes.push(o);
-          });
-        });
-
-        let intersects = raycaster.intersectObjects(meshes, true);
-        let i;
-
-        if (intersects.length > 0 && !isNaN(intersects[0].distance)) {
-          for (i = 0; i < intersects.length; i++) {
-            if (intersects[i].object.name === 'warningObj') break;
-          }
-          if (intersects[i] !== undefined) {
-            let distance = Math.sqrt(
-              Math.pow((intersects[i].uv.x - 0.5) * 50, 2) +
-                Math.pow((intersects[i].uv.y - 0.25) * 100, 2)
-            );
-            if (distance <= 20) {
-              if (!bMove && !bRotate) {
-                isSelected = false;
-                this.context.projectActions.unselectAll();
-                scene3D.remove(toolObj);
-                this.context.itemsActions.removeReplacingSupport();
-
-                let replaceInfo = intersects[i].object.parent.parent.userData;
-                this.context.itemsActions.selectItem(
-                  replaceInfo.layerId,
-                  replaceInfo.itemId
-                );
-                !this.props.downloadFlag && this.props.replaceCabinet(true);
-
-                return;
-              }
-            }
-          }
-        }
-        !this.props.downloadFlag && this.props.replaceCabinet(false);
-        if (intersects.length > 0 && !isNaN(intersects[0].distance)) {
-          for (i = 0; i < intersects.length; i++) {
-            if (
-              intersects[i].object instanceof Three.Mesh &&
-              intersects[i].object.name != 'TransformBox' &&
-              intersects[i].object.type != 'Line' &&
-              intersects[i].object.name != 'lineText' &&
-              intersects[i].object.name != 'countertops' &&
-              intersects[i].object.type != 'BoxHelper' &&
-              intersects[i].object.name != 'soul' &&
-              !intersects[i].object.name.includes('backsplash') &&
-              !intersects[i].object.name.includes('WarningBox')
-            )
-              break;
-          }
-        }
-        gridMatrix.copy(gridPlane.matrixWorld).invert();
-        if (
-          (Math.abs(mouse.x - this.lastMousePosition.x) <= 0.02 &&
-            Math.abs(mouse.y - this.lastMousePosition.y) <= 0.02) ||
-          bMove
-        ) {
-          if (intersects.length > 0 && !isNaN(intersects[0].distance)) {
-            if (intersects[i] === undefined) {
-              if (!bMove) {
-                isSelected = false;
-                this.context.projectActions.unselectAll();
-                scene3D.remove(toolObj);
-                this.context.itemsActions.removeReplacingSupport();
-                return;
-              }
-            }
-
-            if (!bMove) {
-              selectedObject =
-                intersects[i].object.interact &&
-                intersects[i].object.interact();
-            }
-
-            if (selectedObject !== undefined && 'itemID' in selectedObject) {
-              currentObject = intersects[i].object;
-              for (; currentObject.parent != null; ) {
-                if (currentObject.name == 'pivot') break;
-                currentObject = currentObject.parent;
-              }
-              isSelected = true;
-              setTimeout(() => {
-                getDistances(layer);
-                let selectedItem =
-                  planData.sceneGraph.layers[selectedObject.layerID].items[
-                    selectedObject.itemID
-                  ];
-                if (isUndefined(selectedItem)) return;
-                const selItem = this.props.state.scene.layers
-                  .get(selectedObject.layerID)
-                  .items.get(selectedObject.itemID);
-                let itemPos = selectedItem.position.clone();
-
-                if (
-                  intersects[i].object.parent &&
-                  intersects[i].object.parent.parent.userData.itemId ===
-                    selectedItem.userData.itemId
-                ) {
-                  toolObj.position.set(
-                    intersects[i].point.x,
-                    intersects[i].point.y,
-                    intersects[i].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);
-                this.setState({ toolObj: toolObj });
-                // showItemButtons(layer.getIn(['items', selectedObject.itemID]), currentObject, event, camera, this.renderer);
-                let 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((pointElement, index) => {
-                  if (pointElement[0] == undefined) pointArray[index][0] = 0;
-                });
-                pointArray.forEach(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?.object?.name.includes('transHole')) {
-                      actions.holesActions.endDraggingHole3D(
-                        sPoint.x,
-                        sPoint.y
-                      );
-                    }
-                    break;
-                  case 'lineID' in selectedObject:
-                    if (selObj?.object?.name.includes('transHole')) {
-                      actions.holesActions.endDraggingHole3D(
-                        sPoint.x,
-                        sPoint.y
-                      );
-                    }
-                    break;
-                  default:
-                    break;
-                }
-              }
-              isSelected = false;
-            }
-          } else {
-            isSelected = false;
-            this.context.projectActions.unselectAll();
-            switch (true) {
-              case 'holeID' in selectedObject:
-                actions.holesActions.endDraggingHole3D(sPoint.x, sPoint.y);
-                break;
-              default:
-                this.context.itemsActions.removeReplacingSupport();
-                break;
-            }
-          }
-          bMove = false;
-          bRotate = false;
-          bMoveUP = false;
-          if (isSelected) {
-            prepareSnap(layer);
-            selectedObj = allItemRect.cur;
-          }
-        } else {
-          visibleTransformBox(false);
-          let alti = 0;
-          if (
-            allItemRect &&
-            allItemRect.cur &&
-            allItemRect.cur.itemInfo !== undefined
-          ) {
-            let properties = allItemRect.cur.itemInfo.properties;
-            alti = properties.getIn(['altitude', '_length']);
-            let unit = properties.getIn(['altitude', '_unit']) || 'in';
-            alti = convert(alti).from(unit).to(this.props.state.scene.unit);
-          }
-          getPoint(event, alti);
-          if (bRotate) {
-            let selectedItem =
-              planData.sceneGraph.layers[selectedObject.layerID].items[
-                selectedObject.itemID
-              ];
-            if (isUndefined(selectedItem)) return;
-            const selItem = this.props.state.scene.layers
-              .get(selectedObject.layerID)
-              .items.get(selectedObject.itemID);
-            let itemPos = selectedItem.position.clone();
-
-            if (
-              intersects[i]?.object?.parent?.parent?.userData?.itemId ===
-              selectedItem.userData.itemId
-            ) {
-              toolObj.position.set(
-                intersects[i].point.x,
-                intersects[i].point.y,
-                intersects[i].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);
-            this.setState({ toolObj: toolObj });
-            this.context.itemsActions.endRotatingItem3D(Point.x, Point.y);
-            bRotate = false;
-          }
-          if (bMove) {
-            bMove = false;
-            let selectedItem =
-              planData.sceneGraph.layers[selectedObject.layerID].items[
-                selectedObject.itemID
-              ];
-            if (isUndefined(selectedItem)) return;
-            const selItem = this.props.state.scene.layers
-              .get(selectedObject.layerID)
-              .items.get(selectedObject.itemID);
-            let itemPos = selectedItem.position.clone();
-            if (
-              intersects[i].object.parent.parent.userData.itemId ===
-              selectedItem.userData.itemId
-            ) {
-              toolObj.position.set(
-                intersects[i].point.x,
-                intersects[i].point.y,
-                intersects[i].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);
-            this.setState({ toolObj: toolObj });
-            if (snapBox == null) {
-              let item3D =
-                planData.sceneGraph.layers[selectedObject.layerID].items[
-                  selectedObject.itemID
-                ];
-              if (!item3D) return;
-              item3D.visible = true;
-              let originPos = item3D.position.clone();
-              setTimeout(() => {
-                this.context.itemsActions.updateDraggingItemChanged(
-                  originPos.x,
-                  -originPos.z,
-                  selectedObject.layerID,
-                  selectedObject.itemID
-                );
-              }, 50);
-            } else {
-              this.context.itemsActions.updateDraggingItemChanged(
-                targetPoint.x,
-                -targetPoint.z,
-                selectedObject.layerID,
-                selectedObject.itemID
-              );
-              this.context.itemsActions.updateRotatingItemChanged(
-                targetRot,
-                selectedObject.layerID,
-                selectedObject.itemID
-              );
-              let 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 = event => {
-      event.preventDefault();
-      backsplashVisible = false;
-
-      let altitude = 0;
-      if (
-        allItemRect &&
-        allItemRect.cur &&
-        allItemRect.cur.itemInfo !== undefined
-      ) {
-        let properties = allItemRect.cur.itemInfo.properties;
-        altitude = properties.getIn(['altitude', '_length']);
-        let unit = properties.getIn(['altitude', '_unit']) || 'in';
-        altitude = convert(altitude).from(unit).to(this.props.state.scene.unit);
-      }
-
-      if (this.props.state.mode === MODE_DRAWING_HOLE_3D) {
-        gridPlanOrigin = gridPlane.position;
-        gridMatrix.copy(gridPlane.matrixWorld).invert();
-        camPos = camera.position;
-        if (!getIntersectWallPoint(event)) return;
-
-        let drawingSupport = this.props.state.drawingSupport;
-        if (!drawingSupport.has('currentID')) {
-          this.context.holesActions.updateDrawingHole3D(
-            this.props.state.scene.selectedLayer,
-            Point.x,
-            Point.y
-          );
-          sPoint.set(Point.x, Point.y);
-        } else {
-          let layerID = this.props.state.scene.selectedLayer;
-          let holeID = this.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);
-          let nx = Point.x;
-          let ny = Point.y;
-          actions.holesActions.updateDrawingHole3D(layerID, nx, ny);
-          sPoint.set(nx, ny);
-        }
-      }
-
-      if (this.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 > this.props.state.scene.width ||
-          Point.x < 0 ||
-          Point.y > this.props.state.scene.height ||
-          Point.y < 0
-        )
-          return;
-        let drawingSupport = this.props.state.drawingSupport;
-        if (!drawingSupport.has('currentID')) {
-          this.context.itemsActions.updateDrawingItem(
-            this.props.state.scene.selectedLayer,
-            Point.x,
-            Point.y
-          );
-          sPoint.set(Point.x, Point.y);
-        } else {
-          let layerID = this.props.state.scene.selectedLayer;
-          let itemID = this.props.state.drawingSupport.get('currentID');
-          selectedObject = { layerID: layerID, itemID: itemID };
-          let mX = Point.x - sPoint.x;
-          let mY = Point.y - sPoint.y;
-          let item3D =
-            planData.sceneGraph.layers[selectedObject.layerID].items[
-              selectedObject.itemID
-            ];
-          let layer = this.props.state.scene.getIn([
-            'layers',
-            selectedObject.layerID
-          ]);
-
-          deleteSpecifiedMeshObjects('TransformBox');
-          deleteSpecifiedMeshObjects('WarningBox' + itemID);
-          prepareSnap(layer);
-
-          let item = layer.items.getIn([selectedObject.itemID]);
-          if (item.counterTop.uri == '')
-            item.counterTop.uri = layer.counterTop.uri;
-          let sRot = item.rotation;
-
-          if (!item3D) return;
-
-          let originPos = item3D.position.clone();
-          let tPos = new Three.Vector2(mX + originPos.x, mY - originPos.z);
-          let sBounding = item3D.children[0].userData;
-          let swidth = sBounding.max.x - sBounding.min.x;
-          let sdepth = sBounding.max.z - sBounding.min.z;
-          let sVertices = this.getRectPoints(
-            swidth,
-            sdepth,
-            tPos.clone(),
-            ((sRot % 360) / 180) * Math.PI
-          );
-          let { nx, ny, rot } = GeometryUtils.calcSnap(
-            allItemRect,
-            allItemSnap,
-            allLineRects,
-            allLineSnap,
-            allRect,
-            Point.x,
-            Point.y,
-            allArea
-          );
-          let nPos = new Three.Vector2(nx, ny);
-          if (
-            !this.collisionHoleCheck(
-              item3D,
-              nPos,
-              item.rotation,
-              {
-                userData: { itemId: null }
-              },
-              item,
-              this.context.catalog
-            )
-          ) {
-            this.collisionSlide(
-              item3D,
-              originPos,
-              layer,
-              sVertices,
-              tPos,
-              item
-            );
-            //return;
-          }
-          let polygonPoint = lineRect(layer);
-          if (polygonPoint.length > 0) {
-            let PolygonSect = GeometryUtils.ContainsPoint(polygonPoint, nx, ny);
-            if (!PolygonSect) {
-              let { cx, cy, crot } = GeometryUtils.calcCreateSnap(
-                allItemRect,
-                allItemSnap,
-                allLineRects,
-                allLineSnap,
-                allRect,
-                Point.x,
-                Point.y,
-                polygonPoint
-              );
-              nx = cx;
-              ny = cy;
-              rot = crot;
-            }
-          }
-          let polygon = lineRect(layer);
-          if (polygon.length > 0) {
-            let 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);
-          let 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((pointElement, index) => {
-            if (pointElement[0] == undefined) pointArray[index][0] = 0;
-          });
-          pointArray.forEach(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);
-          let minDis = fVLine[0].userData.distance;
-          let snapObj = fVLine[0];
-          let iPos = item3D.position.clone();
-          let 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 (let i = 1; i < fVLine.length; i++) {
-            if (minDis > fVLine[i].userData.distance) {
-              minDis = fVLine[i].userData.distance;
-              snapObj = fVLine[i];
-            }
-          }
-          if (snapBox == null) {
-            snapFlag = false;
-          }
-          actions.sceneActions.updateMovingState(false);
-          if (minDis < snapDelta && !snapFlag) {
-            this.snap(snapObj, layer);
-            snapFlag = true;
-            //console.log('1 snap Yes')
-            getDistances(layer, true);
-            let i = 0;
-            for (i = 0; i < fVLine.length; i++) {
-              if (fVLine[i].userData.distance < snapDelta) {
-                break;
-              }
-            }
-            if (i === fVLine.length) backsplashVisible = false;
-            else backsplashVisible = true;
-          }
-          actions.itemsActions.setBacksplashVisible(
-            selectedObject.itemID,
-            backsplashVisible
-          );
-        }
-      }
-
-      if (bRotate) {
-        getPoint(event, altitude);
-        this.context.itemsActions.updateRotatingItem(Point.x, Point.y);
-
-        let layer = this.props.state.scene.getIn([
-          'layers',
-          selectedObject.layerID
-        ]);
-        let item = layer.items.getIn([selectedObject.itemID]);
-
-        let orginRot = this.props.state.rotatingSupport.get('originRotation');
-
-        angleTexture.image = createAngleObject(
-          (orginRot < 0 ? 360 - orginRot : orginRot) - item.rotation
-        );
-        angleTexture.needsUpdate = true;
-
-        deleteSpecifiedMeshObjects('WarningBox' + selectedObject.itemID);
-        deleteSpecifiedMeshObjects('backsplash' + selectedObject.itemID);
-
-        actions.sceneActions.updateMovingState(false);
-      }
-
-      if (bMoveUP) {
-        this.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;
-          let draggingSupport = this.props.state.draggingSupport;
-          if (!draggingSupport.has('currentID')) {
-            this.context.holesActions.updateDraggingHole(Point.x, Point.y);
-            sPoint.set(Point.x, Point.y);
-          } else {
-            let holeID = this.props.state.draggingSupport.get('currentID');
-            deleteSpecifiedMeshObjects('WarningBox' + holeID);
-            let nx = Point.x;
-            let ny = Point.y;
-            actions.holesActions.updateDraggingHole(nx, ny);
-            sPoint.set(nx, ny);
-          }
-        } else {
-          const item3D =
-            planData.sceneGraph.layers[selectedObject.layerID].items[
-              selectedObject.itemID
-            ];
-
-          if (item3D === undefined) return;
-
-          const layer = this.props.state.scene.getIn([
-            'layers',
-            item3D.userData.layerId
-          ]);
-
-          const item = layer.items.getIn([selectedObject.itemID]);
-          if (item.counterTop.uri == '')
-            item.counterTop.uri = layer.counterTop.uri;
-
-          let sRot = item.rotation;
-          let mX = Point.x - sPoint.x;
-          let mY = Point.y - sPoint.y;
-
-          deleteSpecifiedMeshObjects('WarningBox' + selectedObject.itemID);
-          deleteSpecifiedMeshObjects('backsplash' + selectedObject.itemID);
-          prepareSnap(layer);
-
-          getPoint(event, altitude);
-
-          let originPos = item3D.position.clone();
-          let tPos = new Three.Vector2(mX + originPos.x, mY - originPos.z);
-          let sBounding = item3D.children[0].userData;
-          let swidth = sBounding.max.x - sBounding.min.x;
-          let sdepth = sBounding.max.z - sBounding.min.z;
-          let sVertices = this.getRectPoints(
-            swidth,
-            sdepth,
-            tPos.clone(),
-            ((sRot % 360) / 180) * Math.PI
-          );
-          let { nx, ny, rot } = GeometryUtils.calcSnap(
-            allItemRect,
-            allItemSnap,
-            allLineRects,
-            allLineSnap,
-            allRect,
-            Point.x,
-            Point.y,
-            allArea
-          );
-          let nPos = new Three.Vector2(nx, ny);
-          if (
-            !this.collisionHoleCheck(
-              item3D,
-              nPos,
-              item.rotation,
-              {
-                userData: { itemId: null }
-              },
-              item,
-              this.context.catalog
-            )
-          ) {
-            this.collisionSlide(
-              item3D,
-              originPos,
-              layer,
-              sVertices,
-              tPos,
-              item
-            );
-            //return;
-          }
-          let polygonPoint = lineRect(layer);
-          if (polygonPoint.length > 0) {
-            let PolygonSect = GeometryUtils.ContainsPoint(polygonPoint, nx, ny);
-            if (!PolygonSect) {
-              let { cx, cy, crot } = GeometryUtils.calcCreateSnap(
-                allItemRect,
-                allItemSnap,
-                allLineRects,
-                allLineSnap,
-                allRect,
-                Point.x,
-                Point.y,
-                polygonPoint
-              );
-              nx = cx;
-              ny = cy;
-              rot = crot;
-            }
-          }
-          let polygon = lineRect(layer);
-          if (polygon.length > 0) {
-            let 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);
-          let 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((pointElement, index) => {
-            if (pointElement[0] == undefined) pointArray[index][0] = 0;
-          });
-          pointArray.forEach(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);
-          let minDis = fVLine[0].userData.distance;
-          let snapObj = fVLine[0];
-          let iPos = item3D.position.clone();
-          let 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 (let i = 1; i < fVLine.length; i++) {
-            if (minDis > fVLine[i].userData.distance) {
-              minDis = fVLine[i].userData.distance;
-              snapObj = fVLine[i];
-            }
-          }
-          if (snapBox == null) {
-            snapFlag = false;
-          }
-          actions.sceneActions.updateMovingState(false);
-          if (minDis < snapDelta && !snapFlag) {
-            this.snap(snapObj, layer);
-            snapFlag = true;
-            //console.log('1 snap Yes')
-            getDistances(layer, true);
-
-            let i = 0;
-            for (i = 0; i < fVLine.length; i++) {
-              if (fVLine[i].userData.distance < snapDelta) {
-                break;
-              }
-            }
-            if (i === fVLine.length) backsplashVisible = false;
-            else backsplashVisible = true;
-          }
-          actions.itemsActions.setBacksplashVisible(
-            selectedObject.itemID,
-            backsplashVisible
-          );
-        }
-      }
-
-      if (!bMove && !bRotate && !bMoveUP) {
-        let curPos = {
-          x: (event.offsetX / this.width) * 2 - 1,
-          y: -(event.offsetY / this.height) * 2 + 1
-        };
-
-        raycaster.setFromCamera(curPos, camera);
-        rayDirection = raycaster.ray.direction;
-        rayDirection = rayDirection.normalize();
-
-        const meshes = getAllMeshes(toIntersect);
-        let intersects = raycaster.intersectObjects(meshes, true);
-        let i;
-        if (intersects.length > 0 && !isNaN(intersects[0].distance)) {
-          for (i = 0; i < intersects.length; i++) {
-            if (intersects[i].object.name === 'warningObj') break;
-          }
-          if (intersects[i] !== undefined) {
-            let distance = Math.sqrt(
-              Math.pow((intersects[i].uv.x - 0.5) * 50, 2) +
-                Math.pow((intersects[i].uv.y - 0.75) * 100, 2)
-            );
-            if (distance <= 20) {
-              let infoPos = { x: 0, y: 0 };
-              if (event.offsetY > 150) {
-                infoPos.y = event.offsetY - 60;
-              } else {
-                infoPos.y = event.offsetY + 10;
-              }
-              if (event.offsetX > this.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 =
-                `${infoPos.y}px`;
-              document.getElementById('warning_box_2d').style.left =
-                `${infoPos.x}px`;
-              return;
-            }
-          }
-        }
-      }
-      document.getElementById('warning_box_2d').style.display = 'none';
-    };
-
-    this.onkeydown = event => {
-      if (this.props.keyDownEnable && !isElevationView(state.mode)) {
-        switch (event.keyCode) {
-          case 27: // escape key
-            isSelected = false;
-            this.context.projectActions.unselectAll();
-            this.context.itemsActions.removeReplacingSupport();
-            this.context.itemsActions.setMoveStatus(false);
-            this.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 = event => {
-      this.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
-    const 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(() => {
-        try {
-          currentObject =
-            planData.sceneGraph.layers[selectedObject.layerID].items[
-              selectedObject.itemID
-            ];
-          if (isUndefined(currentObject)) return;
-          const selItem = this.props.state.scene.layers
-            .get(selectedObject.layerID)
-            .items.get(selectedObject.itemID);
-          let 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);
-          this.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
-        let { layers } = scene;
-        let selectedLayer = layers.get(scene.selectedLayer);
-        let ceilHeight = convert(selectedLayer.ceilHeight)
-          .from(selectedLayer.unit)
-          .to(scene.unit);
-        let lines = [];
-        let selectedLine = selectedLayer.lines.get(
-          selectedLayer.selected.lines.toJS()[0]
-        );
-        let vertex0 = selectedLayer.vertices.get(selectedLine.vertices.get(0));
-        let vertex1 = selectedLayer.vertices.get(selectedLine.vertices.get(1));
-        let { x: x1, y: y1 } = vertex0;
-        let { x: x2, y: y2 } = vertex1;
-        if (
-          GeometryUtils.compareVertices(vertex0, vertex1) >= 0 &&
-          vertex0.x !== vertex1.x
-        ) {
-          ({ x: x1, y: y1 } = vertex1);
-          ({ x: x2, y: y2 } = vertex0);
-        }
-        selectedLayer.lines.toArray().forEach(line => {
-          if (line.id === selectedLine) {
-            let data = line.toJS();
-            data = { ...data, l0: { x: x1, y: y1 }, l1: { x: x2, y: y2 } };
-            lines.push(data);
-          }
-        });
-        let lineLength = GeometryUtils.pointsDistance(x1, y1, x2, y2);
-        self.setState({ lineLength: lineLength });
-        let 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
-        );
-        const angle = Math.atan((y1 - y2) / (x1 - x2));
-        let 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 {
-        const 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
-
-      let light = new Three.AmbientLight(0xbfbfbf, 0.9); // soft white light
-    }
-
-    function render() {
-      const delta = clock.getDelta(); // Get time delta for smooth updates
-      if (!isElevationView(state.mode)) cameraControls.update(delta);
-      for (let i = 0; i < lights.length; i++) {
-        lights[i].light.position.set(
-          planData.plan.position.x + lights[i].x,
-          planData.plan.position.y + lights[i].height - 10,
-          planData.plan.position.z - lights[i].y
-        );
-        lights[i].target.position.set(
-          planData.plan.position.x + lights[i].x,
-          planData.plan.position.y,
-          planData.plan.position.z - lights[i].y
-        );
-      }
-
-      camera.updateMatrix();
-      camera.updateMatrixWorld();
-
-      for (let 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
-      let layerID = self.props.state.scene.selectedLayer;
-      let layer = self.props.state.scene.layers.get(layerID);
-      layer.holes.forEach(data => {
-        let line = planData.sceneGraph.layers[layerID].lines[data.line];
-        let 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
-          const indexAttribute = line.geometry.getIndex();
-          const firstFaceIndices = undefined;
-          if (indexAttribute && indexAttribute.length > 0) {
-            firstFaceIndices = [
-              indexAttribute.getX(0),
-              indexAttribute.getX(1),
-              indexAttribute.getX(2)
-            ];
-          }
-
-          if (firstFaceIndices == undefined) return;
-          // normal vector of the line
-          const normalAttribute = line.geometry.attributes.normal;
-          let normal = new Three.Vector3()
-            .fromBufferAttribute(normalAttribute, 0)
-            .clone();
-          normal = normal
-            .applyMatrix4(line.matrixWorld)
-            .sub(new Three.Vector3(0, 0, 0).applyMatrix4(line.matrixWorld))
-            .normalize();
-          let vertices = layer.lines.get(data.line).vertices.toJS();
-          let vertex1 = layer.vertices.get(vertices[0]);
-          let vertex2 = layer.vertices.get(vertices[1]);
-          let cX = (vertex1.x + vertex2.x) / 2;
-          let cY = (vertex1.y + vertex2.y) / 2;
-          let posVec = new Three.Vector3(cX, 150, -cY);
-          posVec = posVec.add(planData.plan.position.clone());
-          let cameraLine = camera.position.clone().sub(posVec);
-          if (hole) {
-            hole.traverse(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(() => {
-                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);
-  }
-
-  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();
-  }
-
-  componentWillReceiveProps(nextProps) {
-    if (
-      (this.props.downloadFlag &&
-        diff(this.props.state, nextProps.state).toJS().length == 0) ||
-      isEmpty(nextProps.state.scene)
-    )
-      return;
-
-    let { width, height } = nextProps;
-    let selectedLayer = nextProps.state.getIn([
-      'scene',
-      'layers',
-      nextProps.state.scene.selectedLayer
-    ]);
-    let ceilHeight = convert(selectedLayer.ceilHeight)
-      .from(selectedLayer.unit)
-      .to(nextProps.state.scene.unit);
-    let 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
-    };
-
-    let isLoadingCabinet = nextProps.state.scene.isLoadingCabinet;
-    if (this.state.isLoadingCabinet !== isLoadingCabinet)
-      this.setState({ isLoadingCabinet });
-
-    this.width = width;
-    this.height = height;
-
-    let allLines;
-    let allLineRects;
-    let allItemRect;
-
-    // handle camera setting
-    switch (this.props.state.mode) {
-      case MODE_ELEVATION_VIEW:
-        // when Elevation mode (camera: Orthographic)
-        let 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();
-
-    let data = nextProps.state.scene;
-    let layer = data.getIn(['layers', data.selectedLayer]);
-    const self = this;
-
-    function implementBacksplash() {
-      if (isElevationView(self.props.state.mode)) return; // apply backsplash when just 3D_mode, not elevation_mode
-      let allItems = GeometryUtils.getAllItemSpecified(
-        nextProps.state.scene,
-        actions.catalog,
-        BASE_CABINET_LAYOUTPOS
-      );
-      let 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++) {
-        let calcRect = GeometryUtils.getCalcRectFromItem3D(items[i]);
-        let 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() {
-      let holeItems = GeometryUtils.getHoleItems(layer);
-      let 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
-        );
-    }
-
-    let prepareSnapSpec = layer => {
-      allLines = GeometryUtils.getAllLines(layer);
-      allLineRects = GeometryUtils.buildRectFromLines(layer, allLines);
-      allItemRect = GeometryUtils.getAllItemSpecified(
-        this.props.state.scene,
-        actions.catalog,
-        [WALL_CABINET_LAYOUTPOS, TALL_CABINET_LAYOUTPOS]
-      );
-    };
-
-    let 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'))
-    ) {
-      let 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');
-      }
-      let { toolObj, angleObj } = this.state;
-      var { promise } = updateScene(
-        this.planData,
-        nextProps.state.scene,
-        this.props.state.scene,
-        changedValues.toJS(),
-        actions,
-        this.context.catalog,
-        nextProps.state.mode,
-        toolObj,
-        angleObj,
-        nextProps.state.draggingSupport
-      );
-      self.setState();
-      promise.then(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);
-  }
-
-  render() {
-    const { isLoading, isLoadingCabinet } = this.state;
-    if (isLoading) {
-      if (this.props.downloadFlag) {
-        this.renderer.domElement.style.display = 'none';
-        return (
-          <div
-            style={{
-              alignItems: ' center',
-              width: this.props.width,
-              height: this.props.height,
-              display: 'inline-flex',
-              justifyContent: 'center'
-            }}
-          >
-            <img
-              style={{
-                width: '70px',
-                height: '70px',
-                animation: 'spin 2s linear infinite'
-              }}
-              src={'/assets/img/loading_large.gif'}
-              alt="img"
-            />
-          </div>
-        );
-      } else {
-        document.getElementById('front') &&
-          (document.getElementById('front').style.display = 'none');
-        document.getElementById('error').style.display = 'none';
-        this.renderer.domElement.style.display = 'none';
-        return (
-          <div style={{ textAlign: 'center', width: '100%' }}>
-            <img
-              style={{ animation: 'spin 2s linear infinite', marginTop: `22%` }}
-              src={'/assets/img/loading_large.gif'}
-              alt="img"
-            />
-          </div>
-        );
-      }
-    } 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 (
-        <div style={{ textAlign: 'center', width: '100%' }}>
-          <img
-            style={{
-              animation: 'spin 2s linear infinite',
-              position: `absolute`,
-              top: `50%`
-            }}
-            src={'/assets/img/loading_large.gif'}
-            alt="img"
-          />
-        </div>
-      );
-    } 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 React.createElement('div', { ref: 'canvasWrapper' });
-    }
-  }
-}
-
-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
-};