kitchen-simulator 1.1.1-test.71 → 1.1.1-test.72

package/es/components/viewer3d/viewer3d.js

@@ -1,41 +1,40 @@
 'use strict';
 
-import _readOnlyError from "@babel/runtime/helpers/esm/readOnlyError";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-import React from 'react';
-import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
-import * as Three from 'three';
-import { checkCabinetOverlap, createBacksplash, deleteSpecifiedMeshObjects, fVLine, getDistances, parseData, updateScene, visibleTransformBox } from "./scene-creator";
-import { disposeObject, disposeScene } from "./three-memory-cleaner";
-import diff from 'immutablediff';
-import * as SharedStyle from "../../shared-style";
-import { BASE_CABINET_LAYOUTPOS, MODE_3D_VIEW, MODE_DRAGGING_ITEM_3D, MODE_DRAWING_HOLE_3D, MODE_DRAWING_ITEM_3D, MODE_ELEVATION_VIEW, MODE_IDLE_3D, MODE_ROTATING_ITEM_3D, SECONDARY_PURPLE_COLOR, TALL_CABINET_LAYOUTPOS, UNIT_CENTIMETER, WALL_CABINET_LAYOUTPOS } from "../../constants";
-import { verticesDistance } from "../../utils/geometry";
-import { convert } from "../../utils/convert-units-lite";
-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';
-import { returnReplaceableDeepSearchType } from "../viewer2d/utils";
-import { getAllMeshes, vectorIntersectWithMesh } from "../../utils/objects-utils";
-CameraControls.install({
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+exports.__esModule = true;
+exports["default"] = void 0;
+var _readOnlyError2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/readOnlyError"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/callSuper"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var Three = _interopRequireWildcard(require("three"));
+var _sceneCreator = require("./scene-creator");
+var _threeMemoryCleaner = require("./three-memory-cleaner");
+var _immutablediff = _interopRequireDefault(require("immutablediff"));
+var SharedStyle = _interopRequireWildcard(require("../../shared-style"));
+var _constants = require("../../constants");
+var _geometry = require("../../utils/geometry");
+var _convertUnitsLite = require("../../utils/convert-units-lite");
+var _export = require("../../utils/export");
+var _helper = require("../../utils/helper");
+var _RGBELoader = require("three/examples/jsm/loaders/RGBELoader");
+var _cameraControls = _interopRequireDefault(require("camera-controls"));
+var _utils = require("../viewer2d/utils");
+var _objectsUtils = require("../../utils/objects-utils");
+_cameraControls["default"].install({
   THREE: Three
 });
-var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
+var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component) {
   function Scene3DViewer(props) {
     var _this;
-    _classCallCheck(this, Scene3DViewer);
-    _this = _callSuper(this, Scene3DViewer, [props]);
+    (0, _classCallCheck2["default"])(this, Scene3DViewer);
+    _this = (0, _callSuper2["default"])(this, Scene3DViewer, [props]);
     _this.state = {
       isLoading: false,
       showflag: true,
@@ -54,14 +53,14 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
       window.__elevationRendererDownload = {};
     }
     switch (mode) {
-      case MODE_IDLE_3D:
+      case _constants.MODE_IDLE_3D:
         _this.renderer = window.__threeRenderer || new Three.WebGLRenderer({
           preserveDrawingBuffer: true,
           alpha: true,
           antialias: true
         });
         break;
-      case MODE_3D_VIEW:
+      case _constants.MODE_3D_VIEW:
         _this.renderer = window.__threeRendererDownload || new Three.WebGLRenderer({
           preserveDrawingBuffer: true,
           alpha: true,
@@ -96,8 +95,8 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
     _this.renderer.domElement.style.display = 'none';
     return _this;
   }
-  _inherits(Scene3DViewer, _React$Component);
-  return _createClass(Scene3DViewer, [{
+  (0, _inherits2["default"])(Scene3DViewer, _React$Component);
+  return (0, _createClass2["default"])(Scene3DViewer, [{
     key: "componentDidMount",
     value: function componentDidMount(nextProps) {
       var _this2 = this;
@@ -117,7 +116,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
       var mode = state.mode,
         scene = state.scene;
       function setupLight(scene, inbBox) {
-        if (isElevationView(mode)) {
+        if ((0, _helper.isElevationView)(mode)) {
           var ambilight = new Three.AmbientLight('0xffffff', 3);
           scene.add(ambilight);
         } else {
@@ -176,10 +175,10 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
             var spotlightDis = 1.5 * Math.abs(inbBox.min.y - inbBox.max.y);
 
             // check if spotlight is inside the room
-            vectorIntersectWithMesh(spot1, scene3D.getObjectByName('floor')) && addSpotLight('0xffffff', 0.8, spot1, spot1, spotlightDis);
-            vectorIntersectWithMesh(spot2, scene3D.getObjectByName('floor')) && addSpotLight('0xffffff', 0.8, spot2, spot2, spotlightDis);
-            vectorIntersectWithMesh(spot3, scene3D.getObjectByName('floor')) && addSpotLight('0xffffff', 0.8, spot3, spot3, spotlightDis);
-            vectorIntersectWithMesh(spot4, scene3D.getObjectByName('floor')) && addSpotLight('0xffffff', 0.8, spot4, spot4, spotlightDis);
+            (0, _objectsUtils.vectorIntersectWithMesh)(spot1, scene3D.getObjectByName('floor')) && addSpotLight('0xffffff', 0.8, spot1, spot1, spotlightDis);
+            (0, _objectsUtils.vectorIntersectWithMesh)(spot2, scene3D.getObjectByName('floor')) && addSpotLight('0xffffff', 0.8, spot2, spot2, spotlightDis);
+            (0, _objectsUtils.vectorIntersectWithMesh)(spot3, scene3D.getObjectByName('floor')) && addSpotLight('0xffffff', 0.8, spot3, spot3, spotlightDis);
+            (0, _objectsUtils.vectorIntersectWithMesh)(spot4, scene3D.getObjectByName('floor')) && addSpotLight('0xffffff', 0.8, spot4, spot4, spotlightDis);
           }
         }
       }
@@ -195,15 +194,15 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
 
         // set loading bar
         switch (self.props.state.mode) {
-          case MODE_ELEVATION_VIEW:
+          case _constants.MODE_ELEVATION_VIEW:
             self.props.setIsLoadingElevation('front', true);
             break;
-          case MODE_3D_VIEW:
+          case _constants.MODE_3D_VIEW:
             self.props.setIsLoading3D(true);
             break;
         }
       }
-      var _parseData = parseData(scene, actions, this.context.catalog, camera, this.renderer, state.mode),
+      var _parseData = (0, _sceneCreator.parseData)(scene, actions, this.context.catalog, camera, this.renderer, state.mode),
         promise = _parseData.promise,
         planData = _parseData.planData;
       promise.then(function () {
@@ -217,7 +216,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
           obj.removeFromParent();
         });
         var bbox = new Three.Box3().setFromObject(planData.plan);
-        if (!isElevationView(state.mode)) {
+        if (!(0, _helper.isElevationView)(state.mode)) {
           cameraControls.fitToBox(bbox);
         }
         setupLight(scene3D, planData.boundingBox);
@@ -276,7 +275,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
             realVec.push(vec);
           });
           if (aVertices.includes(realVec[0]) && aVertices.includes(realVec[1])) {
-            height = convert(layer.ceilHeight).from(layer.unit).to(UNIT_CENTIMETER);
+            height = (0, _convertUnitsLite.convert)(layer.ceilHeight).from(layer.unit).to(_constants.UNIT_CENTIMETER);
             // height = data.properties.getIn(['height', 'length']);
             return 1; // break
           }
@@ -374,11 +373,11 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
 
       // end snap function variable///////////////////////
       var backsplashVisible = false;
-      var holeItems = GeometryUtils.getHoleItems(layer);
+      var holeItems = _export.GeometryUtils.getHoleItems(layer);
       var removeSnapBox = function removeSnapBox() {
         if (snapBox != null) {
           planData.plan.remove(snapBox);
-          disposeObject(snapBox);
+          (0, _threeMemoryCleaner.disposeObject)(snapBox);
           snapBox = null;
           targetObj = null;
           snapFlag = false;
@@ -449,7 +448,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
               x: shape2[j + 1].x,
               y: shape2[j + 1].y
             };
-            var flag = GeometryUtils.getLineInterSect(sl1.x, sl1.y, sl2.x, sl2.y, el1.x, el1.y, el2.x, el2.y);
+            var flag = _export.GeometryUtils.getLineInterSect(sl1.x, sl1.y, sl2.x, sl2.y, el1.x, el1.y, el2.x, el2.y);
             if (flag) {
               count++;
               if (count > 1) return true;
@@ -496,20 +495,20 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
         return vertices;
       };
       var prepareSnap = function prepareSnap(layer) {
-        allLines = GeometryUtils.getAllLines(layer);
-        allLineRects = GeometryUtils.buildRectFromLines(layer, allLines);
-        allItemRect = GeometryUtils.getAllItems(_this2.props.state.scene, actions.catalog, allLineRects);
-        allItemSnap = GeometryUtils.getAllItemSnap(allItemRect);
-        allLineSnap = GeometryUtils.getAllLineSnap(allLineRects, allItemRect.cur);
+        allLines = _export.GeometryUtils.getAllLines(layer);
+        allLineRects = _export.GeometryUtils.buildRectFromLines(layer, allLines);
+        allItemRect = _export.GeometryUtils.getAllItems(_this2.props.state.scene, actions.catalog, allLineRects);
+        allItemSnap = _export.GeometryUtils.getAllItemSnap(allItemRect);
+        allLineSnap = _export.GeometryUtils.getAllLineSnap(allLineRects, allItemRect.cur);
         allRect = allItemRect.others.concat(allLineRects);
-        allItemSnap = GeometryUtils.validateSnaps(allItemSnap, allRect);
-        allLineSnap = GeometryUtils.validateSnaps(allLineSnap, allRect);
-        allArea = GeometryUtils.getAllArea(layer);
+        allItemSnap = _export.GeometryUtils.validateSnaps(allItemSnap, allRect);
+        allLineSnap = _export.GeometryUtils.validateSnaps(allLineSnap, allRect);
+        allArea = _export.GeometryUtils.getAllArea(layer);
       };
       var prepareSnapSpec = function prepareSnapSpec(layer) {
-        allLines = GeometryUtils.getAllLines(layer);
-        allLineRects = GeometryUtils.buildRectFromLines(layer, allLines);
-        allItemRect = GeometryUtils.getAllItemSpecified(_this2.props.state.scene, actions.catalog, WALL_CABINET_LAYOUTPOS);
+        allLines = _export.GeometryUtils.getAllLines(layer);
+        allLineRects = _export.GeometryUtils.buildRectFromLines(layer, allLines);
+        allItemRect = _export.GeometryUtils.getAllItemSpecified(_this2.props.state.scene, actions.catalog, _constants.WALL_CABINET_LAYOUTPOS);
         // allItemSnap = GeometryUtils.getAllItemSnap(allItemRect);
       };
 
@@ -562,7 +561,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
           var ocatid = _item.type;
           var ocat = catalog.elements[ocatid];
           var olayoutpos = ocat.info.layoutpos;
-          if (!(layoutpos === BASE_CABINET_LAYOUTPOS && olayoutpos === WALL_CABINET_LAYOUTPOS || layoutpos === WALL_CABINET_LAYOUTPOS && olayoutpos === BASE_CABINET_LAYOUTPOS)) {
+          if (!(layoutpos === _constants.BASE_CABINET_LAYOUTPOS && olayoutpos === _constants.WALL_CABINET_LAYOUTPOS || layoutpos === _constants.WALL_CABINET_LAYOUTPOS && olayoutpos === _constants.BASE_CABINET_LAYOUTPOS)) {
             var tRot = _item.rotation;
             var tPos = new Three.Vector2(_item.x, _item.y);
             var tBounding = target.children[0].userData;
@@ -644,13 +643,13 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
           var _item2 = layer.items.getIn([data.id]);
           var ocatid = _item2.type;
           var ocat = catalog.elements[ocatid];
-          if (!ocat) ocat = catalog.elements[returnReplaceableDeepSearchType(ocatid)];
+          if (!ocat) ocat = catalog.elements[(0, _utils.returnReplaceableDeepSearchType)(ocatid)];
           var otherItem = {
             item: _item2,
             cat: ocat
           };
           console.log('currentItem =>', currentItem);
-          if (GeometryUtils.needSnap(currentItem, otherItem) && otherItem.cat.type != 'cabinet') {
+          if (_export.GeometryUtils.needSnap(currentItem, otherItem) && otherItem.cat.type != 'cabinet') {
             var tRot = _item2.rotation;
             var tPos = new Three.Vector2(_item2.x, _item2.y);
             var tBounding = target.children[0].userData;
@@ -704,7 +703,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
         // sort from distance
         for (var _i5 = 0; _i5 < items.length - 1; _i5++) {
           for (var j = _i5 + 1; j < items.length; j++) {
-            if (verticesDistance(oPos, new Three.Vector2(items[_i5].x, items[_i5].y)) > verticesDistance(oPos, new Three.Vector2(items[j].x, items[j].y))) {
+            if ((0, _geometry.verticesDistance)(oPos, new Three.Vector2(items[_i5].x, items[_i5].y)) > (0, _geometry.verticesDistance)(oPos, new Three.Vector2(items[j].x, items[j].y))) {
               var exchange = items[j];
               items[j] = items[_i5];
               items[_i5] = exchange;
@@ -822,7 +821,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
           var tRot = layer.getIn(['items', target.userData.itemId]) ? layer.getIn(['items', target.userData.itemId]).rotation : 0;
           var item = layer.getIn(['items', source.userData.itemId]);
           var layoutType = item.layoutpos;
-          var altitudeLength = convert(item.properties.getIn(['altitude', '_length'])).from('in').to('cm');
+          var altitudeLength = (0, _convertUnitsLite.convert)(item.properties.getIn(['altitude', '_length'])).from('in').to('cm');
           var sBounding = source.children[0].userData;
           var tBounding = target.children[0].userData;
           var tPos = target.position.clone();
@@ -839,7 +838,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
           var removeSnapBoxObj = function removeSnapBoxObj() {
             if (snapBoxObj) {
               planData.plan.remove(snapBoxObj);
-              disposeObject(snapBoxObj);
+              (0, _threeMemoryCleaner.disposeObject)(snapBoxObj);
             }
             snapFlag = false;
           };
@@ -848,7 +847,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
           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.position.set(source.position.x, layoutType === _constants.WALL_CABINET_LAYOUTPOS ? altitudeLength + source.position.y + height / 2 : source.position.y + height / 2, source.position.z);
           snapBoxObj.rotation.set(source.rotation.x, source.rotation.y, source.rotation.z);
           snapBoxObj.name = 'TransformBox';
           planData.plan.add(snapBoxObj);
@@ -923,7 +922,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
             return;
           } else {
             var _layoutType = _item3.layoutpos;
-            var _altitudeLength = convert(_item3.properties.getIn(['altitude', '_length'])).from('in').to('cm');
+            var _altitudeLength = (0, _convertUnitsLite.convert)(_item3.properties.getIn(['altitude', '_length'])).from('in').to('cm');
             var _sBounding = source.children[0].userData;
             var _width = _sBounding.max.x - _sBounding.min.x;
             var _height = _sBounding.max.y - _sBounding.min.y;
@@ -938,7 +937,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
             var _removeSnapBoxObj = function _removeSnapBoxObj() {
               if (_snapBoxObj) {
                 planData.plan.remove(_snapBoxObj);
-                disposeObject(_snapBoxObj);
+                (0, _threeMemoryCleaner.disposeObject)(_snapBoxObj);
               }
               snapFlag = false;
             };
@@ -947,7 +946,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
             _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.position.set(source.position.x, _layoutType === _constants.WALL_CABINET_LAYOUTPOS ? _altitudeLength + source.position.y + _height / 2 : source.position.y + _height / 2, source.position.z);
             _snapBoxObj.rotation.set(source.rotation.x, source.rotation.y, source.rotation.z);
             _snapBoxObj.name = 'TransformBox';
             planData.plan.add(_snapBoxObj);
@@ -1084,7 +1083,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
         ctx.beginPath();
         ctx.arc(50, 50, 45, 0, 2 * Math.PI);
         ctx.stroke();
-        ctx.strokeStyle = SECONDARY_PURPLE_COLOR;
+        ctx.strokeStyle = _constants.SECONDARY_PURPLE_COLOR;
         ctx.lineWidth = 6;
         ctx.beginPath();
         if (lastAngle < 15 && lastAngle > -15) {
@@ -1188,7 +1187,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
           var properties = allItemRect.cur.itemInfo.properties;
           altitude = properties.getIn(['altitude', '_length']);
           var unit = properties.getIn(['altitude', '_unit']) || 'in';
-          altitude = convert(altitude).from(unit).to(_this2.props.state.scene.unit);
+          altitude = (0, _convertUnitsLite.convert)(altitude).from(unit).to(_this2.props.state.scene.unit);
         }
         getPoint(event, altitude);
         var state = _this2.props.state;
@@ -1253,7 +1252,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
             console.log('intersects[i] is undefined in viewer3d/viewer3d.js');
           }
         }
-        if (_this2.props.state.mode == MODE_DRAWING_ITEM_3D) return;
+        if (_this2.props.state.mode == _constants.MODE_DRAWING_ITEM_3D) return;
         if (isSelected) {
           !_this2.props.downloadFlag && _this2.props.setToolbar('');
           if (intersects.length > 0 && !isNaN(intersects[0].distance)) {
@@ -1280,7 +1279,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
                   var _properties = allItemRect.cur.itemInfo.properties;
                   alti = _properties.getIn(['altitude', '_length']);
                   var _unit = _properties.getIn(['altitude', '_unit']) || 'in';
-                  alti = convert(alti).from(_unit).to(_this2.props.state.scene.unit);
+                  alti = (0, _convertUnitsLite.convert)(alti).from(_unit).to(_this2.props.state.scene.unit);
                 }
                 getPoint({
                   offsetX: event.offsetX - 50,
@@ -1317,8 +1316,8 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
               for (_i1 = 0; _i1 < intersects.length; _i1++) {
                 if (selectedItem != undefined && intersects[_i1].object.parent && intersects[_i1].object.parent.parent.userData.itemId === selectedItem.userData.itemId) selectedFlag = true;
               }
-              if (selectedFlag || toolIntersects.length > 0 && !isElevationView(mode)) {
-                cameraControls.mouseButtons.left = CameraControls.ACTION.NONE;
+              if (selectedFlag || toolIntersects.length > 0 && !(0, _helper.isElevationView)(mode)) {
+                cameraControls.mouseButtons.left = _cameraControls["default"].ACTION.NONE;
                 selectedFlag = false;
               } else {
                 isSelected = false;
@@ -1344,7 +1343,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
           var properties = allItemRect.cur.itemInfo.properties;
           altitude = properties.getIn(['altitude', '_length']);
           var unit = properties.getIn(['altitude', '_unit']) || 'in';
-          altitude = convert(altitude).from(unit).to(_this2.props.state.scene.unit);
+          altitude = (0, _convertUnitsLite.convert)(altitude).from(unit).to(_this2.props.state.scene.unit);
         }
         scene3D.remove(angleObj);
         scene3D.remove(toolObj);
@@ -1352,7 +1351,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
           _this2.props.setToolbar('');
         }
         getPoint(event, altitude);
-        if (_this2.props.state.mode == MODE_DRAWING_ITEM_3D) {
+        if (_this2.props.state.mode == _constants.MODE_DRAWING_ITEM_3D) {
           if (Point.x > _this2.props.state.scene.width) Point.x = _this2.props.state.width;
           if (Point.y > _this2.props.state.scene.height) Point.y = _this2.props.state.height;
           if (Point.x < 0) Point.x = 0;
@@ -1363,7 +1362,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
             removeSnapBox();
             var polygon = lineRect(layer);
             // if cursor is outside of room
-            if (!GeometryUtils.ContainsPoint(polygon, Point.x, Point.y)) {
+            if (!_export.GeometryUtils.ContainsPoint(polygon, Point.x, Point.y)) {
               actions.itemsActions.endDrawingItem(_this2.props.state.scene.selectedLayer, sPoint.x, sPoint.y);
             } else {
               actions.itemsActions.updateDraggingItemChanged(targetPoint.x, -targetPoint.z, selectedObject.layerID, selectedObject.itemID);
@@ -1374,13 +1373,13 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
           bMove = false;
           return;
         }
-        if (_this2.props.state.mode == MODE_DRAGGING_ITEM_3D) {
+        if (_this2.props.state.mode == _constants.MODE_DRAGGING_ITEM_3D) {
           _this2.context.itemsActions.endDraggingItem3D();
         }
-        if (_this2.props.state.mode == MODE_ROTATING_ITEM_3D) {
+        if (_this2.props.state.mode == _constants.MODE_ROTATING_ITEM_3D) {
           _this2.context.itemsActions.endRotatingItem3D(sPoint.x, sPoint.y);
         }
-        if (_this2.props.state.mode == MODE_DRAWING_HOLE_3D) {
+        if (_this2.props.state.mode == _constants.MODE_DRAWING_HOLE_3D) {
           gridPlanOrigin = gridPlane.position;
           gridMatrix.copy(gridPlane.matrixWorld).invert();
           camPos = camera.position;
@@ -1391,7 +1390,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
         }
         event.preventDefault();
         if (event.button === 0) {
-          cameraControls.mouseButtons.left = CameraControls.ACTION.ROTATE;
+          cameraControls.mouseButtons.left = _cameraControls["default"].ACTION.ROTATE;
           mouse.x = event.offsetX / _this2.width * 2 - 1;
           mouse.y = -(event.offsetY / _this2.height) * 2 + 1;
           raycaster.setFromCamera(mouse, camera);
@@ -1455,7 +1454,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
                 }
                 isSelected = true;
                 setTimeout(function () {
-                  getDistances(layer);
+                  (0, _sceneCreator.getDistances)(layer);
                   var selectedItem = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
                   if (!selectedItem) return;
                   var selItem = _this2.props.state.scene.layers.get(selectedObject.layerID).items.get(selectedObject.itemID);
@@ -1472,10 +1471,10 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
                   // showItemButtons(layer.getIn(['items', selectedObject.itemID]), currentObject, event, camera, this.renderer);
                   var pointArray = [],
                     cnt = 0;
-                  pointArray.push([fVLine[0].userData.distance, 90]);
-                  pointArray.push([fVLine[1].userData.distance, -90]);
-                  pointArray.push([fVLine[2].userData.distance, 180]);
-                  pointArray.push([fVLine[3].userData.distance, 0]);
+                  pointArray.push([_sceneCreator.fVLine[0].userData.distance, 90]);
+                  pointArray.push([_sceneCreator.fVLine[1].userData.distance, -90]);
+                  pointArray.push([_sceneCreator.fVLine[2].userData.distance, 180]);
+                  pointArray.push([_sceneCreator.fVLine[3].userData.distance, 0]);
                   pointArray.forEach(function (pointElement, index) {
                     if (pointElement[0] == undefined) pointArray[index][0] = 0;
                   });
@@ -1527,13 +1526,13 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
               selectedObj = allItemRect.cur;
             }
           } else {
-            visibleTransformBox(false);
+            (0, _sceneCreator.visibleTransformBox)(false);
             var alti = 0;
             if (allItemRect && allItemRect.cur && allItemRect.cur.itemInfo !== undefined) {
               var _properties2 = allItemRect.cur.itemInfo.properties;
               alti = _properties2.getIn(['altitude', '_length']);
               var _unit2 = _properties2.getIn(['altitude', '_unit']) || 'in';
-              alti = convert(alti).from(_unit2).to(_this2.props.state.scene.unit);
+              alti = (0, _convertUnitsLite.convert)(alti).from(_unit2).to(_this2.props.state.scene.unit);
             }
             getPoint(event, alti);
             if (bRotate) {
@@ -1606,9 +1605,9 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
           var properties = allItemRect.cur.itemInfo.properties;
           altitude = properties.getIn(['altitude', '_length']);
           var unit = properties.getIn(['altitude', '_unit']) || 'in';
-          altitude = convert(altitude).from(unit).to(_this2.props.state.scene.unit);
+          altitude = (0, _convertUnitsLite.convert)(altitude).from(unit).to(_this2.props.state.scene.unit);
         }
-        if (_this2.props.state.mode === MODE_DRAWING_HOLE_3D) {
+        if (_this2.props.state.mode === _constants.MODE_DRAWING_HOLE_3D) {
           gridPlanOrigin = gridPlane.position;
           gridMatrix.copy(gridPlane.matrixWorld).invert();
           camPos = camera.position;
@@ -1620,7 +1619,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
           } else {
             var layerID = _this2.props.state.scene.selectedLayer;
             var holeID = _this2.props.state.drawingSupport.get('currentID');
-            deleteSpecifiedMeshObjects('WarningBox' + holeID);
+            (0, _sceneCreator.deleteSpecifiedMeshObjects)('WarningBox' + holeID);
             prepareSnap(layer);
 
             // let {nx, ny, rot} = GeometryUtils.calcSnap(allItemRect, allItemSnap, allLineRects, allLineSnap, allRect, Point.x, Point.y, allArea);
@@ -1630,7 +1629,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
             sPoint.set(nx, ny);
           }
         }
-        if (_this2.props.state.mode === MODE_DRAWING_ITEM_3D) {
+        if (_this2.props.state.mode === _constants.MODE_DRAWING_ITEM_3D) {
           // We need to set cam position since when MODE_DRAWING_ITEM_3D mouse down event
           // is not emited so cam position is not valid
           gridPlanOrigin = gridPlane.position;
@@ -1644,7 +1643,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
           };
           var _layer = _this2.props.state.scene.getIn(['layers', selectedObject.layerID]);
           var polygon = lineRect(_layer);
-          var isCursorInArea = GeometryUtils.ContainsPoint(polygon, Point.x, Point.y);
+          var isCursorInArea = _export.GeometryUtils.ContainsPoint(polygon, Point.x, Point.y);
           var _drawingSupport = _this2.props.state.drawingSupport;
           if (!_drawingSupport.has('currentID')) {
             var initialX = Point.x,
@@ -1663,7 +1662,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
                   point = [];
                 }
               });
-              var centroid = GeometryUtils.getCentroidOfPolygon(points);
+              var centroid = _export.GeometryUtils.getCentroidOfPolygon(points);
               initialX = centroid[0];
               initialY = centroid[1];
             }
@@ -1675,8 +1674,8 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
             var mX = Point.x - sPoint.x;
             var mY = Point.y - sPoint.y;
             var item3D = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
-            deleteSpecifiedMeshObjects('TransformBox');
-            deleteSpecifiedMeshObjects('WarningBox' + itemID);
+            (0, _sceneCreator.deleteSpecifiedMeshObjects)('TransformBox');
+            (0, _sceneCreator.deleteSpecifiedMeshObjects)('WarningBox' + itemID);
             var item = _layer.items.getIn([selectedObject.itemID]);
             if (item.counterTop.uri == '') item.counterTop.uri = _layer.counterTop.uri;
             var sRot = item.rotation;
@@ -1688,7 +1687,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
             var sdepth = sBounding.max.z - sBounding.min.z;
             var sVertices = _this2.getRectPoints(swidth, sdepth, tPos.clone(), sRot % 360 / 180 * Math.PI);
             prepareSnap(_layer);
-            var _GeometryUtils$calcSn = GeometryUtils.calcSnap(allItemRect, allItemSnap, allLineRects, allLineSnap, allRect, Point.x, Point.y, allArea),
+            var _GeometryUtils$calcSn = _export.GeometryUtils.calcSnap(allItemRect, allItemSnap, allLineRects, allLineSnap, allRect, Point.x, Point.y, allArea),
               _nx = _GeometryUtils$calcSn.nx,
               _ny = _GeometryUtils$calcSn.ny,
               rot = _GeometryUtils$calcSn.rot;
@@ -1702,9 +1701,9 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
               //return;
             }
             if (polygon.length > 0) {
-              var PolygonSect = GeometryUtils.ContainsPoint(polygon, _nx, _ny);
+              var PolygonSect = _export.GeometryUtils.ContainsPoint(polygon, _nx, _ny);
               if (!PolygonSect) {
-                var _GeometryUtils$calcCr = GeometryUtils.calcCreateSnap(allItemRect, allItemSnap, allLineRects, allLineSnap, allRect, Point.x, Point.y, polygon),
+                var _GeometryUtils$calcCr = _export.GeometryUtils.calcCreateSnap(allItemRect, allItemSnap, allLineRects, allLineSnap, allRect, Point.x, Point.y, polygon),
                   cx = _GeometryUtils$calcCr.cx,
                   cy = _GeometryUtils$calcCr.cy,
                   crot = _GeometryUtils$calcCr.crot;
@@ -1714,19 +1713,19 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
               }
             }
             if (polygon.length > 0) {
-              var isSnapInArea = GeometryUtils.ContainsPoint(polygon, _nx, _ny);
+              var isSnapInArea = _export.GeometryUtils.ContainsPoint(polygon, _nx, _ny);
               if (!isSnapInArea) return;
             }
             actions.itemsActions.updateDraggingItemChanged(_nx, _ny, selectedObject.layerID, selectedObject.itemID);
             actions.itemsActions.updateRotatingItemChanged(rot, selectedObject.layerID, selectedObject.itemID);
             sPoint.set(_nx, _ny);
-            getDistances(_layer);
+            (0, _sceneCreator.getDistances)(_layer);
             var pointArray = [],
               cnt = 0;
-            pointArray.push([fVLine[0].userData.distance, 90]);
-            pointArray.push([fVLine[1].userData.distance, -90]);
-            pointArray.push([fVLine[2].userData.distance, 180]);
-            pointArray.push([fVLine[3].userData.distance, 0]);
+            pointArray.push([_sceneCreator.fVLine[0].userData.distance, 90]);
+            pointArray.push([_sceneCreator.fVLine[1].userData.distance, -90]);
+            pointArray.push([_sceneCreator.fVLine[2].userData.distance, 180]);
+            pointArray.push([_sceneCreator.fVLine[3].userData.distance, 0]);
             pointArray.forEach(function (pointElement, index) {
               if (pointElement[0] == undefined) pointArray[index][0] = 0;
             });
@@ -1738,8 +1737,8 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
               pointArray[1][0] = 100;
             }
             actions.itemsActions.storeDistArray(_layer.id, item.id, pointArray);
-            var minDis = fVLine[0].userData.distance;
-            var snapObj = fVLine[0];
+            var minDis = _sceneCreator.fVLine[0].userData.distance;
+            var snapObj = _sceneCreator.fVLine[0];
             var iPos = item3D.position.clone();
             var snapDis = Math.sqrt((iPos.x - targetPoint.x) * (iPos.x - targetPoint.x) + (iPos.z - targetPoint.z) * (iPos.z - targetPoint.z));
             if (snapDis >= 100 && snapObj != null) {
@@ -1747,10 +1746,10 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
               backsplashVisible = false;
               //console.log('1 snap no');
             }
-            for (var _i11 = 1; _i11 < fVLine.length; _i11++) {
-              if (minDis > fVLine[_i11].userData.distance) {
-                minDis = fVLine[_i11].userData.distance;
-                snapObj = fVLine[_i11];
+            for (var _i11 = 1; _i11 < _sceneCreator.fVLine.length; _i11++) {
+              if (minDis > _sceneCreator.fVLine[_i11].userData.distance) {
+                minDis = _sceneCreator.fVLine[_i11].userData.distance;
+                snapObj = _sceneCreator.fVLine[_i11];
               }
             }
             if (snapBox == null) {
@@ -1761,14 +1760,14 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
               _this2.snap(snapObj, _layer);
               snapFlag = true;
               //console.log('1 snap Yes')
-              getDistances(_layer, true);
+              (0, _sceneCreator.getDistances)(_layer, true);
               var _i12 = 0;
-              for (_i12 = 0; _i12 < fVLine.length; _i12++) {
-                if (fVLine[_i12].userData.distance < snapDelta) {
+              for (_i12 = 0; _i12 < _sceneCreator.fVLine.length; _i12++) {
+                if (_sceneCreator.fVLine[_i12].userData.distance < snapDelta) {
                   break;
                 }
               }
-              if (_i12 === fVLine.length) backsplashVisible = false;else backsplashVisible = true;
+              if (_i12 === _sceneCreator.fVLine.length) backsplashVisible = false;else backsplashVisible = true;
             }
             actions.itemsActions.setBacksplashVisible(selectedObject.itemID, backsplashVisible);
           }
@@ -1781,8 +1780,8 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
           var orginRot = _this2.props.state.rotatingSupport.get('originRotation');
           angleTexture.image = createAngleObject((orginRot < 0 ? 360 - orginRot : orginRot) - _item4.rotation);
           angleTexture.needsUpdate = true;
-          deleteSpecifiedMeshObjects('WarningBox' + selectedObject.itemID);
-          deleteSpecifiedMeshObjects('backsplash' + selectedObject.itemID);
+          (0, _sceneCreator.deleteSpecifiedMeshObjects)('WarningBox' + selectedObject.itemID);
+          (0, _sceneCreator.deleteSpecifiedMeshObjects)('backsplash' + selectedObject.itemID);
           actions.sceneActions.updateMovingState(false);
         }
         if (bMoveUP) {
@@ -1800,7 +1799,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
               sPoint.set(Point.x, Point.y);
             } else {
               var _holeID = _this2.props.state.draggingSupport.get('currentID');
-              deleteSpecifiedMeshObjects('WarningBox' + _holeID);
+              (0, _sceneCreator.deleteSpecifiedMeshObjects)('WarningBox' + _holeID);
               var _nx2 = Point.x;
               var _ny2 = Point.y;
               actions.holesActions.updateDraggingHole(_nx2, _ny2);
@@ -1815,8 +1814,8 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
             var _sRot2 = _item5.rotation;
             var _mX = Point.x - sPoint.x;
             var _mY = Point.y - sPoint.y;
-            deleteSpecifiedMeshObjects('WarningBox' + selectedObject.itemID);
-            deleteSpecifiedMeshObjects('backsplash' + selectedObject.itemID);
+            (0, _sceneCreator.deleteSpecifiedMeshObjects)('WarningBox' + selectedObject.itemID);
+            (0, _sceneCreator.deleteSpecifiedMeshObjects)('backsplash' + selectedObject.itemID);
             prepareSnap(_layer3);
             getPoint(event, altitude);
             var _originPos = _item3D2.position.clone();
@@ -1825,7 +1824,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
             var _swidth = _sBounding2.max.x - _sBounding2.min.x;
             var _sdepth = _sBounding2.max.z - _sBounding2.min.z;
             var _sVertices = _this2.getRectPoints(_swidth, _sdepth, _tPos4.clone(), _sRot2 % 360 / 180 * Math.PI);
-            var _GeometryUtils$calcSn2 = GeometryUtils.calcSnap(allItemRect, allItemSnap, allLineRects, allLineSnap, allRect, Point.x, Point.y, allArea),
+            var _GeometryUtils$calcSn2 = _export.GeometryUtils.calcSnap(allItemRect, allItemSnap, allLineRects, allLineSnap, allRect, Point.x, Point.y, allArea),
               _nx3 = _GeometryUtils$calcSn2.nx,
               _ny3 = _GeometryUtils$calcSn2.ny,
               _rot = _GeometryUtils$calcSn2.rot;
@@ -1840,9 +1839,9 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
             }
             var polygonPoint = lineRect(_layer3);
             if (polygonPoint.length > 0) {
-              var _PolygonSect = GeometryUtils.ContainsPoint(polygonPoint, _nx3, _ny3);
+              var _PolygonSect = _export.GeometryUtils.ContainsPoint(polygonPoint, _nx3, _ny3);
               if (!_PolygonSect) {
-                var _GeometryUtils$calcCr2 = GeometryUtils.calcCreateSnap(allItemRect, allItemSnap, allLineRects, allLineSnap, allRect, Point.x, Point.y, polygonPoint),
+                var _GeometryUtils$calcCr2 = _export.GeometryUtils.calcCreateSnap(allItemRect, allItemSnap, allLineRects, allLineSnap, allRect, Point.x, Point.y, polygonPoint),
                   _cx3 = _GeometryUtils$calcCr2.cx,
                   _cy = _GeometryUtils$calcCr2.cy,
                   _crot = _GeometryUtils$calcCr2.crot;
@@ -1853,19 +1852,19 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
             }
             var _polygon = lineRect(_layer3);
             if (_polygon.length > 0) {
-              var Sect = GeometryUtils.ContainsPoint(_polygon, _nx3, _ny3);
+              var Sect = _export.GeometryUtils.ContainsPoint(_polygon, _nx3, _ny3);
               if (!Sect) return;
             }
             actions.itemsActions.updateDraggingItemChanged(_nx3, _ny3, selectedObject.layerID, selectedObject.itemID);
             actions.itemsActions.updateRotatingItemChanged(_rot, selectedObject.layerID, selectedObject.itemID);
             sPoint.set(_nx3, _ny3);
-            getDistances(_layer3);
+            (0, _sceneCreator.getDistances)(_layer3);
             var _pointArray = [],
               _cnt = 0;
-            _pointArray.push([fVLine[0].userData.distance, 90]);
-            _pointArray.push([fVLine[1].userData.distance, -90]);
-            _pointArray.push([fVLine[2].userData.distance, 180]);
-            _pointArray.push([fVLine[3].userData.distance, 0]);
+            _pointArray.push([_sceneCreator.fVLine[0].userData.distance, 90]);
+            _pointArray.push([_sceneCreator.fVLine[1].userData.distance, -90]);
+            _pointArray.push([_sceneCreator.fVLine[2].userData.distance, 180]);
+            _pointArray.push([_sceneCreator.fVLine[3].userData.distance, 0]);
             _pointArray.forEach(function (pointElement, index) {
               if (pointElement[0] == undefined) _pointArray[index][0] = 0;
             });
@@ -1877,8 +1876,8 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
               _pointArray[1][0] = 100;
             }
             actions.itemsActions.storeDistArray(_layer3.id, _item5.id, _pointArray);
-            var _minDis = fVLine[0].userData.distance;
-            var _snapObj = fVLine[0];
+            var _minDis = _sceneCreator.fVLine[0].userData.distance;
+            var _snapObj = _sceneCreator.fVLine[0];
             var _iPos = _item3D2.position.clone();
             var _snapDis = Math.sqrt((_iPos.x - targetPoint.x) * (_iPos.x - targetPoint.x) + (_iPos.z - targetPoint.z) * (_iPos.z - targetPoint.z));
             if (_snapDis >= 100 && _snapObj != null) {
@@ -1886,10 +1885,10 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
               backsplashVisible = false;
               //console.log('1 snap no');
             }
-            for (var _i13 = 1; _i13 < fVLine.length; _i13++) {
-              if (_minDis > fVLine[_i13].userData.distance) {
-                _minDis = fVLine[_i13].userData.distance;
-                _snapObj = fVLine[_i13];
+            for (var _i13 = 1; _i13 < _sceneCreator.fVLine.length; _i13++) {
+              if (_minDis > _sceneCreator.fVLine[_i13].userData.distance) {
+                _minDis = _sceneCreator.fVLine[_i13].userData.distance;
+                _snapObj = _sceneCreator.fVLine[_i13];
               }
             }
             if (snapBox == null) {
@@ -1900,14 +1899,14 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
               _this2.snap(_snapObj, _layer3);
               snapFlag = true;
               //console.log('1 snap Yes')
-              getDistances(_layer3, true);
+              (0, _sceneCreator.getDistances)(_layer3, true);
               var _i14 = 0;
-              for (_i14 = 0; _i14 < fVLine.length; _i14++) {
-                if (fVLine[_i14].userData.distance < snapDelta) {
+              for (_i14 = 0; _i14 < _sceneCreator.fVLine.length; _i14++) {
+                if (_sceneCreator.fVLine[_i14].userData.distance < snapDelta) {
                   break;
                 }
               }
-              if (_i14 === fVLine.length) backsplashVisible = false;else backsplashVisible = true;
+              if (_i14 === _sceneCreator.fVLine.length) backsplashVisible = false;else backsplashVisible = true;
             }
             actions.itemsActions.setBacksplashVisible(selectedObject.itemID, backsplashVisible);
           }
@@ -1920,7 +1919,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
           raycaster.setFromCamera(curPos, camera);
           rayDirection = raycaster.ray.direction;
           rayDirection = rayDirection.normalize();
-          var meshes = getAllMeshes(toIntersect);
+          var meshes = (0, _objectsUtils.getAllMeshes)(toIntersect);
           var intersects = raycaster.intersectObjects(meshes, true);
           var _i15;
           if (intersects.length > 0 && !isNaN(intersects[0].distance)) {
@@ -1955,7 +1954,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
         document.getElementById('warning_box_2d').style.display = 'none';
       };
       this.onkeydown = function (event) {
-        if (_this2.props.keyDownEnable && !isElevationView(state.mode)) {
+        if (_this2.props.keyDownEnable && !(0, _helper.isElevationView)(state.mode)) {
           switch (event.keyCode) {
             case 27:
               // escape key
@@ -2024,7 +2023,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
       }
 
       // Add the output of the renderer to the html element
-      var canvasWrapper = ReactDOM.findDOMNode(this.refs.canvasWrapper);
+      var canvasWrapper = _reactDom["default"].findDOMNode(this.refs.canvasWrapper);
       canvasWrapper && canvasWrapper.appendChild(this.renderer.domElement);
 
       //
@@ -2056,17 +2055,17 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
       function init() {
         clock = new Three.Clock();
         scene3D = new Three.Scene();
-        if (isElevationView(state.mode)) scene3D.background = new Three.Color(0xffffff);
+        if ((0, _helper.isElevationView)(state.mode)) scene3D.background = new Three.Color(0xffffff);
         // change color about v1: 0x8791AB, v2: 0xC2C2C2, v3: 0xC3CADC
         else scene3D.background = new Three.Color(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)) {
+        if ((0, _helper.isElevationView)(state.mode)) {
           // In elevation view, set Orthographic camera's position, angle and rotation about selected line
           var layers = scene.layers;
           var selectedLayer = layers.get(scene.selectedLayer);
-          var ceilHeight = convert(selectedLayer.ceilHeight).from(selectedLayer.unit).to(scene.unit);
+          var ceilHeight = (0, _convertUnitsLite.convert)(selectedLayer.ceilHeight).from(selectedLayer.unit).to(scene.unit);
           var lines = [];
           var selectedLine = selectedLayer.lines.get(selectedLayer.selected.lines.toJS()[0]);
           var vertex0 = selectedLayer.vertices.get(selectedLine.vertices.get(0));
@@ -2075,7 +2074,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
             y1 = vertex0.y;
           var x2 = vertex1.x,
             y2 = vertex1.y;
-          if (GeometryUtils.compareVertices(vertex0, vertex1) >= 0 && vertex0.x !== vertex1.x) {
+          if (_export.GeometryUtils.compareVertices(vertex0, vertex1) >= 0 && vertex0.x !== vertex1.x) {
             x1 = vertex1.x;
             y1 = vertex1.y;
             x2 = vertex0.x;
@@ -2084,7 +2083,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
           selectedLayer.lines.toArray().forEach(function (line) {
             if (line.id === selectedLine) {
               var data = line.toJS();
-              data = _objectSpread(_objectSpread({}, data), {}, {
+              data = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, data), {}, {
                 l0: {
                   x: x1,
                   y: y1
@@ -2097,11 +2096,11 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
               lines.push(data);
             }
           });
-          var lineLength = GeometryUtils.pointsDistance(x1, y1, x2, y2);
+          var lineLength = _export.GeometryUtils.pointsDistance(x1, y1, x2, y2);
           self.setState({
             lineLength: lineLength
           });
-          var cameraRect = handleCamRect(self.width, self.height, ceilHeight, lineLength);
+          var cameraRect = (0, _helper.handleCamRect)(self.width, self.height, ceilHeight, lineLength);
           camera = new Three.OrthographicCamera(-cameraRect.width / 2, cameraRect.width / 2, cameraRect.height / 2, -cameraRect.height / 2, 1, 1000);
           var angle = Math.atan((y1 - y2) / (x1 - x2));
           var r = 300;
@@ -2122,15 +2121,15 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
         }
         camera.layers.enable(1);
         function loadENV() {
-          new RGBELoader().load('/assets/brown_photostudio_02_1k.hdr', function (texture) {
+          new _RGBELoader.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);
+        if (!(0, _helper.isElevationView)(state.mode)) {
+          cameraControls = new _cameraControls["default"](camera, self.renderer.domElement);
           cameraControls.dollyToCursor = true;
           cameraControls.infinityDolly = true;
           cameraControls.minDistance = 50;
@@ -2141,7 +2140,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
         scene3D.add(planData.plan);
         scene3D.add(planData.grid);
         scene3D.add(camera);
-        if (isElevationView(state.mode)) {
+        if ((0, _helper.isElevationView)(state.mode)) {
           planData.cam.add(camera);
           scene3D.add(planData.cam);
         } else {
@@ -2156,7 +2155,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
       }
       function render() {
         var delta = clock.getDelta(); // Get time delta for smooth updates
-        if (!isElevationView(state.mode)) cameraControls.update(delta);
+        if (!(0, _helper.isElevationView)(state.mode)) cameraControls.update(delta);
         for (var _i16 = 0; _i16 < lights.length; _i16++) {
           lights[_i16].light.position.set(planData.plan.position.x + lights[_i16].x, planData.plan.position.y + lights[_i16].height - 10, planData.plan.position.z - lights[_i16].y);
           lights[_i16].target.position.set(planData.plan.position.x + lights[_i16].x, planData.plan.position.y, planData.plan.position.z - lights[_i16].y);
@@ -2203,7 +2202,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
             var indexAttribute = line.geometry.getIndex();
             var firstFaceIndices = undefined;
             if (indexAttribute && indexAttribute.length > 0) {
-              [indexAttribute.getX(0), indexAttribute.getX(1), indexAttribute.getX(2)], _readOnlyError("firstFaceIndices");
+              [indexAttribute.getX(0), indexAttribute.getX(1), indexAttribute.getX(2)], (0, _readOnlyError2["default"])("firstFaceIndices");
             }
             if (firstFaceIndices == undefined) return;
             // normal vector of the line
@@ -2252,7 +2251,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
                 isLoading: false,
                 waitForRender: 0
               });
-              if (isElevationView(self.props.state.mode)) {
+              if ((0, _helper.isElevationView)(self.props.state.mode)) {
                 setTimeout(function () {
                   self.props.setIsLoadingElevation('front', false);
                 }, 100);
@@ -2276,14 +2275,14 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       cancelAnimationFrame(this.renderingID);
-      if (!isElevationView(this.props.state.mode)) {
+      if (!(0, _helper.isElevationView)(this.props.state.mode)) {
         if (this.cameraControls !== undefined) this.cameraControls.dispose();
       }
       if (!this.props.downloadFlag) {
         this.renderer.domElement.removeEventListener('mousedown', this.mouseDownEvent);
         this.renderer.domElement.removeEventListener('mouseup', this.mouseUpEvent);
       }
-      disposeScene(this.scene3D);
+      (0, _threeMemoryCleaner.disposeScene)(this.scene3D);
       this.scene3D.remove(this.planData.plan);
       this.scene3D.remove(this.planData.grid);
       this.scene3D = null;
@@ -2296,11 +2295,11 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
     key: "componentWillReceiveProps",
     value: function componentWillReceiveProps(nextProps) {
       var _this4 = this;
-      if (this.props.downloadFlag && diff(this.props.state, nextProps.state).toJS().length == 0 || isEmpty(nextProps.state.scene)) return;
+      if (this.props.downloadFlag && (0, _immutablediff["default"])(this.props.state, nextProps.state).toJS().length == 0 || (0, _helper.isEmpty)(nextProps.state.scene)) return;
       var width = nextProps.width,
         height = nextProps.height;
       var selectedLayer = nextProps.state.getIn(['scene', 'layers', nextProps.state.scene.selectedLayer]);
-      var ceilHeight = convert(selectedLayer.ceilHeight).from(selectedLayer.unit).to(nextProps.state.scene.unit);
+      var ceilHeight = (0, _convertUnitsLite.convert)(selectedLayer.ceilHeight).from(selectedLayer.unit).to(nextProps.state.scene.unit);
       var actions = {
         areaActions: this.context.areaActions,
         holesActions: this.context.holesActions,
@@ -2322,9 +2321,9 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
 
       // handle camera setting
       switch (this.props.state.mode) {
-        case MODE_ELEVATION_VIEW:
+        case _constants.MODE_ELEVATION_VIEW:
           // when Elevation mode (camera: Orthographic)
-          var cameraRect = handleCamRect(width, height, ceilHeight, this.state.lineLength);
+          var cameraRect = (0, _helper.handleCamRect)(width, height, ceilHeight, this.state.lineLength);
           // camera size
           this.camera.left = -cameraRect.width / 2;
           this.camera.right = cameraRect.width / 2;
@@ -2333,7 +2332,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
           //camera position
           this.camera.position.y = ceilHeight / 2;
           break;
-        case MODE_3D_VIEW:
+        case _constants.MODE_3D_VIEW:
           // when 3D mode (camera: Perspective)
           this.camera.aspect = width / height;
           break;
@@ -2343,34 +2342,34 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
       var layer = data.getIn(['layers', data.selectedLayer]);
       var self = this;
       function implementBacksplash() {
-        if (isElevationView(self.props.state.mode)) return; // apply backsplash when just 3D_mode, not elevation_mode
-        var allItems = GeometryUtils.getAllItemSpecified(nextProps.state.scene, actions.catalog, BASE_CABINET_LAYOUTPOS);
+        if ((0, _helper.isElevationView)(self.props.state.mode)) return; // apply backsplash when just 3D_mode, not elevation_mode
+        var allItems = _export.GeometryUtils.getAllItemSpecified(nextProps.state.scene, actions.catalog, _constants.BASE_CABINET_LAYOUTPOS);
         var i,
           items = [];
         for (i = 0; i < allItems.others.length; i++) items.push(allItems.others[i]);
         if (allItems.cur) items.push(allItems.cur);
         for (i = 0; i < items.length; i++) {
-          var calcRect = GeometryUtils.getCalcRectFromItem3D(items[i]);
-          var visible = GeometryUtils.isSnappedLine(calcRect, allLineRects);
+          var calcRect = _export.GeometryUtils.getCalcRectFromItem3D(items[i]);
+          var visible = _export.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);
+          (0, _sceneCreator.createBacksplash)(items[i], nextProps.state.scene.getIn(['layers', nextProps.state.scene.selectedLayer]), planData, nextProps.state.scene);
         }
       }
       function implementWarningBox() {
-        var holeItems = GeometryUtils.getHoleItems(layer);
+        var holeItems = _export.GeometryUtils.getHoleItems(layer);
         var i,
           items = [];
         for (i = 0; i < allItemRect.others.length; i++) items.push(allItemRect.others[i]);
         if (allItemRect.cur) items.push(allItemRect.cur);
-        for (i = 0; i < items.length; i++) checkCabinetOverlap({
+        for (i = 0; i < items.length; i++) (0, _sceneCreator.checkCabinetOverlap)({
           x: items[i].pos.x,
           y: items[i].pos.y
         }, items[i], holeItems, planData);
       }
       var prepareSnapSpec = function prepareSnapSpec(layer) {
-        allLines = GeometryUtils.getAllLines(layer);
-        allLineRects = GeometryUtils.buildRectFromLines(layer, allLines);
-        allItemRect = GeometryUtils.getAllItemSpecified(_this4.props.state.scene, actions.catalog, [WALL_CABINET_LAYOUTPOS, TALL_CABINET_LAYOUTPOS]);
+        allLines = _export.GeometryUtils.getAllLines(layer);
+        allLineRects = _export.GeometryUtils.buildRectFromLines(layer, allLines);
+        allItemRect = _export.GeometryUtils.getAllItemSpecified(_this4.props.state.scene, actions.catalog, [_constants.WALL_CABINET_LAYOUTPOS, _constants.TALL_CABINET_LAYOUTPOS]);
       };
       var layer1 = this.props.state.scene.getIn(['layers', data.selectedLayer]);
       if (this.state.showflag) {
@@ -2382,7 +2381,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
         });
       }
       if (nextProps.state.scene !== this.props.state.scene || nextProps.state.doorStyle && nextProps.state.doorStyle.get('name') !== this.props.state.doorStyle.get('name')) {
-        var changedValues = diff(this.props.state.scene, nextProps.state.scene);
+        var changedValues = (0, _immutablediff["default"])(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({
@@ -2393,10 +2392,10 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
               waitForRender: 0
             });
             switch (self.props.state.mode) {
-              case MODE_ELEVATION_VIEW:
+              case _constants.MODE_ELEVATION_VIEW:
                 self.props.setIsLoadingElevation('front', true);
                 break;
-              case MODE_3D_VIEW:
+              case _constants.MODE_3D_VIEW:
                 self.props.setIsLoading3D(true);
                 break;
             }
@@ -2407,12 +2406,12 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
           implementBacksplash();
           implementWarningBox();
         } else {
-          deleteSpecifiedMeshObjects('TransformBox');
+          (0, _sceneCreator.deleteSpecifiedMeshObjects)('TransformBox');
         }
         var _this$state = this.state,
           toolObj = _this$state.toolObj,
           angleObj = _this$state.angleObj;
-        var _updateScene = updateScene(this.planData, nextProps.state.scene, this.props.state.scene, changedValues.toJS(), actions, this.context.catalog, nextProps.state.mode, toolObj, angleObj, nextProps.state.draggingSupport),
+        var _updateScene = (0, _sceneCreator.updateScene)(this.planData, nextProps.state.scene, this.props.state.scene, changedValues.toJS(), actions, this.context.catalog, nextProps.state.mode, toolObj, angleObj, nextProps.state.draggingSupport),
           promise = _updateScene.promise;
         self.setState();
         promise.then(function (p1Value) {
@@ -2439,7 +2438,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
       if (isLoading) {
         if (this.props.downloadFlag) {
           this.renderer.domElement.style.display = 'none';
-          return /*#__PURE__*/React.createElement("div", {
+          return /*#__PURE__*/_react["default"].createElement("div", {
             style: {
               alignItems: ' center',
               width: this.props.width,
@@ -2447,7 +2446,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
               display: 'inline-flex',
               justifyContent: 'center'
             }
-          }, /*#__PURE__*/React.createElement("img", {
+          }, /*#__PURE__*/_react["default"].createElement("img", {
             style: {
               width: '70px',
               height: '70px',
@@ -2460,12 +2459,12 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
           document.getElementById('front') && (document.getElementById('front').style.display = 'none');
           document.getElementById('error').style.display = 'none';
           this.renderer.domElement.style.display = 'none';
-          return /*#__PURE__*/React.createElement("div", {
+          return /*#__PURE__*/_react["default"].createElement("div", {
             style: {
               textAlign: 'center',
               width: '100%'
             }
-          }, /*#__PURE__*/React.createElement("img", {
+          }, /*#__PURE__*/_react["default"].createElement("img", {
             style: {
               animation: 'spin 2s linear infinite',
               marginTop: "22%"
@@ -2478,12 +2477,12 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
         this.renderer.domElement.style.pointerEvents = 'none';
         document.getElementById('front') && (document.getElementById('front').style.display = 'none');
         this.renderer.domElement.style.opacity = '0.4';
-        return /*#__PURE__*/React.createElement("div", {
+        return /*#__PURE__*/_react["default"].createElement("div", {
           style: {
             textAlign: 'center',
             width: '100%'
           }
-        }, /*#__PURE__*/React.createElement("img", {
+        }, /*#__PURE__*/_react["default"].createElement("img", {
           style: {
             animation: 'spin 2s linear infinite',
             position: "absolute",
@@ -2497,26 +2496,25 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
         this.renderer.domElement.style.pointerEvents = 'auto';
         this.renderer.domElement.style.opacity = '1';
         !this.props.downloadFlag && document.getElementById('front') && (document.getElementById('front').style.display = 'block');
-        return /*#__PURE__*/React.createElement('div', {
+        return /*#__PURE__*/_react["default"].createElement('div', {
           ref: 'canvasWrapper'
         });
       }
     }
   }]);
-}(React.Component);
-export { Scene3DViewer as default };
+}(_react["default"].Component);
 Scene3DViewer.propTypes = {
-  state: PropTypes.object.isRequired,
-  width: PropTypes.number.isRequired,
-  height: PropTypes.number.isRequired,
-  replaceCabinet: PropTypes.func.isRequired
+  state: _propTypes["default"].object.isRequired,
+  width: _propTypes["default"].number.isRequired,
+  height: _propTypes["default"].number.isRequired,
+  replaceCabinet: _propTypes["default"].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
+  areaActions: _propTypes["default"].object.isRequired,
+  holesActions: _propTypes["default"].object.isRequired,
+  itemsActions: _propTypes["default"].object.isRequired,
+  linesActions: _propTypes["default"].object.isRequired,
+  sceneActions: _propTypes["default"].object.isRequired,
+  projectActions: _propTypes["default"].object.isRequired,
+  catalog: _propTypes["default"].object
 };