kitchen-simulator 3.1.14 → 4.0.0-alpha.12

package/es/components/viewer3d/front3D.js

@@ -2,7 +2,6 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useState, useEffect } from 'react';
 import Viewer3D from "./viewer3d";
 import State3D from "./ruler-utils/state3D";
-import { isEmpty } from "../viewer2d/utils";
 var k = 0;
 export default function Front3D(_ref, _ref2) {
   var width = _ref.width,
@@ -27,9 +26,9 @@ export default function Front3D(_ref, _ref2) {
     setToolbar('');
   };
   useEffect(function () {
-    if (!isEmpty(document.getElementById('front'))) document.getElementById('front').addEventListener('mouseup', mouseUpEvent);
+    document.getElementById('front').addEventListener('mouseup', mouseUpEvent);
     return function () {
-      if (!isEmpty(document.getElementById('front'))) document.getElementById('front').removeEventListener('mouseup', mouseUpEvent);
+      document.getElementById('front').removeEventListener('mouseup', mouseUpEvent);
     };
   }, []);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("svg", {

package/es/components/viewer3d/libs/mtl-loader.js

@@ -4,7 +4,7 @@
  * @author angelxuanchang
  */
 
-import * as THREE from 'three';
+var THREE = window.THREE || require('three');
 var MTLLoader;
 MTLLoader = function MTLLoader(manager) {
   this.manager = manager !== undefined ? manager : THREE.DefaultLoadingManager;
@@ -354,4 +354,4 @@ MTLLoader.MaterialCreator.prototype = {
     return texture;
   }
 };
-export default MTLLoader;
+module.exports = MTLLoader;

package/es/components/viewer3d/libs/obj-loader.js

@@ -2,7 +2,7 @@
  * @author mrdoob / http://mrdoob.com/
  */
 
-import * as THREE from 'three';
+var THREE = window.THREE || require('three');
 var OBJLoader;
 OBJLoader = function OBJLoader(manager) {
   this.manager = manager !== undefined ? manager : THREE.DefaultLoadingManager;
@@ -459,4 +459,4 @@ OBJLoader.prototype = {
     return container;
   }
 };
-export default OBJLoader;
+module.exports = OBJLoader;

package/es/components/viewer3d/libs/orbit-controls.js

@@ -13,8 +13,9 @@
 //    Zoom - middle mouse, or mousewheel / touch: two finger spread or squish
 //    Pan - right mouse, or arrow keys / touch: three finter swipe
 
-import * as THREE from 'three';
-export default function OrbitControls(object, domElement) {
+var THREE = window.THREE || require('three');
+var OrbitControls;
+module.exports = OrbitControls = function OrbitControls(object, domElement) {
   this.object = object;
   this.domElement = domElement !== undefined ? domElement : document;
 
@@ -622,7 +623,7 @@ export default function OrbitControls(object, domElement) {
   // force an update at start
 
   this.update();
-}
+};
 OrbitControls.prototype = Object.create(THREE.EventDispatcher.prototype);
 OrbitControls.prototype.constructor = OrbitControls;
 Object.defineProperties(OrbitControls.prototype, {

package/es/components/viewer3d/libs/pointer-lock-controls.js

@@ -1,10 +1,10 @@
 /**
  * @author mrdoob / http://mrdoob.com/
- * Converted to ESM
  */
 
-import * as THREE from 'three';
-export default function PointerLockControls(camera) {
+var THREE = window.THREE || require('three');
+var PointerLockControls;
+module.exports = PointerLockControls = function PointerLockControls(camera) {
   var scope = this;
   camera.rotation.set(0, 0, 0);
   var pitchObject = new THREE.Object3D();
@@ -15,14 +15,14 @@ export default function PointerLockControls(camera) {
   yawObject.position.y = 10;
   yawObject.add(pitchObject);
   var PI_2 = Math.PI / 2;
-  function onMouseMove(event) {
+  var onMouseMove = function onMouseMove(event) {
     if (scope.enabled === false) return;
     var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
     var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;
     yawObject.rotation.y -= movementX * 0.002;
     pitchObject.rotation.x -= movementY * 0.002;
     pitchObject.rotation.x = Math.max(-PI_2, Math.min(PI_2, pitchObject.rotation.x));
-  }
+  };
   this.dispose = function () {
     document.removeEventListener('mousemove', onMouseMove, false);
   };
@@ -33,6 +33,7 @@ export default function PointerLockControls(camera) {
   };
   this.getDirection = function () {
     // assumes the camera itself is not rotated
+
     var direction = new THREE.Vector3(0, 0, -1);
     var rotation = new THREE.Euler(0, 0, 0, 'YXZ');
     return function (v) {
@@ -41,4 +42,4 @@ export default function PointerLockControls(camera) {
       return v;
     };
   }();
-}
+};

package/es/components/viewer3d/viewer3d.js

@@ -19,7 +19,7 @@ import { checkCabinetOverlap, createBacksplash, deleteSpecifiedMeshObjects, fVLi
 import { disposeObject, disposeScene } from "./three-memory-cleaner";
 import diff from 'immutablediff';
 import * as SharedStyle from "../../shared-style";
-import { BASE_CABINET_LAYOUTPOS, MODE_3D_VIEW, MODE_DRAGGING_ITEM_3D, MODE_DRAWING_HOLE_3D, MODE_DRAWING_ITEM_3D, MODE_ELEVATION_VIEW, MODE_IDLE_3D, MODE_ROTATING_ITEM_3D, SECONDARY_PURPLE_COLOR, TALL_CABINET_LAYOUTPOS, UNIT_CENTIMETER, WALL_CABINET_LAYOUTPOS, INTERNAL_EVENT_SELECT_ELEMENT, INTERNAL_EVENT_DRAG_ELEMENT, INTERNAL_EVENT_DRAW_ELEMENT, INTERNAL_EVENT_ROTATE_ELEMENT, MODE_ROTATING_ITEM, MODE_DRAGGING_HOLE_3D } from "../../constants";
+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 { isUndefined } from 'util';
 import { verticesDistance } from "../../utils/geometry";
 import { convert } from "../../utils/convert-units-lite";
@@ -27,9 +27,8 @@ 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";
-import { isWarningItem, returnReplaceableDeepSearchType } from "../viewer2d/utils";
-import { MoldingUtils } from "../../utils/export";
 CameraControls.install({
   THREE: Three
 });
@@ -1184,34 +1183,6 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
           itemID: selItemId
         };
       };
-      var sendInternalEvent = function sendInternalEvent(evtType, evtElement) {
-        var pointArray = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-        if (!isEmpty(evtType) && !isEmpty(evtElement)) {
-          var _this2$props$onIntern, _this2$props;
-          var payload = evtElement === null || evtElement === void 0 ? void 0 : evtElement.toJS();
-          if ((evtElement === null || evtElement === void 0 ? void 0 : evtElement.prototype) === 'lines') {
-            // caculating length of selected line//
-            var v_a = layer.vertices.get(evtElement.vertices.get(0));
-            var v_b = layer.vertices.get(evtElement.vertices.get(1));
-            var distance = GeometryUtils.pointsDistance(v_a.x, v_a.y, v_b.x, v_b.y);
-            var _length = convert(distance).from('cm').to(layer.unit);
-            payload.length = _length;
-            //////////////////////////////////////
-          } else if ((evtElement === null || evtElement === void 0 ? void 0 : evtElement.prototype) === 'items') {
-            // check this cabinet has warning box
-            payload.isWarning = isWarningItem(evtElement);
-            // check this item is available molding
-            payload.isMoldingAvailable = MoldingUtils.isEnableItemForMolding(layer, evtElement); // check this item is snapped to wall
-            payload.isAttachedWall = MoldingUtils.isAttachedWall(layer, evtElement);
-            // update distArray
-            if (pointArray) payload.distArray = pointArray;
-          }
-          (_this2$props$onIntern = (_this2$props = _this2.props).onInternalEvent) === null || _this2$props$onIntern === void 0 || _this2$props$onIntern.call(_this2$props, {
-            type: evtType,
-            value: payload
-          });
-        }
-      };
       this.mouseDownEvent = function (event) {
         gridPlanOrigin = gridPlane.position;
         gridMatrix.copy(gridPlane.matrixWorld).invert();
@@ -1303,18 +1274,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
               }
             }
             if (selectedObject !== undefined) {
-              // get selected object from planData.sceneGraph
-              var selectedItem = null;
-              switch (true) {
-                case 'itemID' in selectedObject:
-                  selectedItem = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
-                  break;
-                case 'holeID' in selectedObject:
-                  selectedItem = planData.sceneGraph.layers[selectedObject.layerID].holes[selectedObject.holeID];
-                  break;
-                default:
-                  break;
-              }
+              var selectedItem = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
               sPoint.set(Point.x, Point.y);
               if (transflag == 0) {
                 scene3D.remove(toolObj);
@@ -1363,6 +1323,11 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
               if (selectedFlag || toolIntersects.length > 0 && !isElevationView(mode)) {
                 cameraControls.mouseButtons.left = CameraControls.ACTION.NONE;
                 selectedFlag = false;
+              } else {
+                isSelected = false;
+                _this2.context.projectActions.unselectAll();
+                scene3D.remove(toolObj);
+                _this2.context.itemsActions.removeReplacingSupport();
               }
             }
           } else {
@@ -1375,8 +1340,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
         }
       };
       this.mouseUpEvent = function (event) {
-        var internalType = ''; // internalEvent type - select/drag/draw
-        var selectedElement; // internalEvent data
+        var _selObj$object, _selObj$object2;
         firstMove = 0;
         var altitude = 0;
         if (allItemRect && allItemRect.cur && allItemRect.cur.itemInfo !== undefined) {
@@ -1413,21 +1377,6 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
           isInitialPhase = true;
           return;
         }
-        switch (_this2.props.state.mode) {
-          case MODE_DRAGGING_ITEM_3D:
-          case MODE_DRAGGING_HOLE_3D:
-            internalType = INTERNAL_EVENT_DRAG_ELEMENT;
-            break;
-          case MODE_ROTATING_ITEM_3D:
-            internalType = INTERNAL_EVENT_ROTATE_ELEMENT;
-            break;
-          case MODE_DRAWING_HOLE_3D:
-            internalType = INTERNAL_EVENT_DRAW_ELEMENT;
-            break;
-          case MODE_IDLE_3D:
-            internalType = INTERNAL_EVENT_SELECT_ELEMENT;
-            break;
-        }
         if (_this2.props.state.mode == MODE_DRAGGING_ITEM_3D) {
           _this2.context.itemsActions.endDraggingItem3D();
         }
@@ -1460,8 +1409,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
             });
           });
           var intersects = raycaster.intersectObjects(meshes, true);
-          var _i10; // index of warning object in intersects
-
+          var _i10;
           if (intersects.length > 0 && !isNaN(intersects[0].distance)) {
             for (_i10 = 0; _i10 < intersects.length; _i10++) {
               if (intersects[_i10].object.name === 'warningObj') break;
@@ -1489,19 +1437,6 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
             }
           }
           gridMatrix.copy(gridPlane.matrixWorld).invert();
-          var addItemToolObj = function addItemToolObj() {
-            var _intersects$_i;
-            var selectedItem = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
-            if (isUndefined(selectedItem)) return;
-            selectedElement = _this2.props.state.scene.layers.get(selectedObject.layerID).items.get(selectedObject.itemID);
-            var itemPos = selectedItem.position.clone();
-            if (((_intersects$_i = intersects[_i10]) === null || _intersects$_i === void 0 || (_intersects$_i = _intersects$_i.object) === null || _intersects$_i === void 0 || (_intersects$_i = _intersects$_i.parent) === null || _intersects$_i === void 0 || (_intersects$_i = _intersects$_i.parent) === null || _intersects$_i === void 0 || (_intersects$_i = _intersects$_i.userData) === null || _intersects$_i === void 0 ? void 0 : _intersects$_i.itemId) === selectedItem.userData.itemId) {
-              toolObj.position.set(intersects[_i10].point.x, intersects[_i10].point.y, intersects[_i10].point.z);
-            } else {
-              toolObj.position.set(planData.plan.position.x + itemPos.x, selectedElement.category === 'lighting' ? -planData.plan.position.y - selectedElement.properties.get('height').get('length') : planData.plan.position.y + selectedItem.children[0].position.y, planData.plan.position.z + itemPos.z);
-            }
-            scene3D.add(toolObj);
-          };
           if (Math.abs(mouse.x - _this2.lastMousePosition.x) <= 0.02 && Math.abs(mouse.y - _this2.lastMousePosition.y) <= 0.02 || bMove) {
             if (intersects.length > 0 && !isNaN(intersects[0].distance)) {
               if (intersects[_i10] === undefined) {
@@ -1525,63 +1460,67 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
                 isSelected = true;
                 setTimeout(function () {
                   getDistances(layer);
-                  addItemToolObj();
+                  var selectedItem = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
+                  if (isUndefined(selectedItem)) return;
+                  var selItem = _this2.props.state.scene.layers.get(selectedObject.layerID).items.get(selectedObject.itemID);
+                  var itemPos = selectedItem.position.clone();
+                  if (intersects[_i10].object.parent && intersects[_i10].object.parent.parent.userData.itemId === selectedItem.userData.itemId) {
+                    toolObj.position.set(intersects[_i10].point.x, intersects[_i10].point.y, intersects[_i10].point.z);
+                  } else {
+                    toolObj.position.set(planData.plan.position.x + itemPos.x, selItem.category === 'lighting' ? -planData.plan.position.y - selItem.properties.get('height').get('length') : planData.plan.position.y + selectedItem.children[0].position.y, planData.plan.position.z + itemPos.z);
+                  }
+                  scene3D.add(toolObj);
                   _this2.setState({
                     toolObj: toolObj
                   });
                   // showItemButtons(layer.getIn(['items', selectedObject.itemID]), currentObject, event, camera, this.renderer);
-                  var pointArray = [];
-                  // pointArray.push([fVLine[0].userData.distance, 90]);
-                  // pointArray.push([fVLine[1].userData.distance, -90]);
-                  // pointArray.push([fVLine[2].userData.distance, 180]);
-                  // pointArray.push([fVLine[3].userData.distance, 0]);
-                  pointArray = GeometryUtils.calcDistancesFromItemToWalls(selectedElement, layer).PointArray;
+                  var pointArray = [],
+                    cnt = 0;
+                  pointArray.push([fVLine[0].userData.distance, 90]);
+                  pointArray.push([fVLine[1].userData.distance, -90]);
+                  pointArray.push([fVLine[2].userData.distance, 180]);
+                  pointArray.push([fVLine[3].userData.distance, 0]);
+                  pointArray.forEach(function (pointElement, index) {
+                    if (pointElement[0] == undefined) pointArray[index][0] = 0;
+                  });
+                  pointArray.forEach(function (pointElement) {
+                    if (pointElement[0] == 0) cnt++;
+                  });
+                  if (cnt == 4 || cnt == 3) {
+                    pointArray[0][0] = 100;
+                    pointArray[1][0] = 100;
+                  }
                   actions.itemsActions.storeDistArray(layer.id, selectedObject.itemID, pointArray);
-                  internalType = internalType ? internalType : INTERNAL_EVENT_SELECT_ELEMENT;
-                  sendInternalEvent(internalType, selectedElement, pointArray);
                 });
               } else {
                 if (selectedObject) {
-                  var elementID = null;
-                  var elementPrototype = null;
                   switch (true) {
                     case 'holeID' in selectedObject:
-                      elementID = selectedObject.holeID;
-                      elementPrototype = 'holes';
-                      if (_this2.props.state.mode === MODE_DRAGGING_HOLE_3D) {
+                      if (selObj !== null && selObj !== void 0 && (_selObj$object = selObj.object) !== null && _selObj$object !== void 0 && _selObj$object.name.includes('transHole')) {
                         actions.holesActions.endDraggingHole3D(sPoint.x, sPoint.y);
                       }
                       break;
                     case 'lineID' in selectedObject:
-                      elementID = selectedObject.lineID;
-                      elementPrototype = 'lines';
-                      break;
-                    case 'areaID' in selectedObject:
-                      elementID = selectedObject.areaID;
-                      elementPrototype = 'areas';
+                      if (selObj !== null && selObj !== void 0 && (_selObj$object2 = selObj.object) !== null && _selObj$object2 !== void 0 && _selObj$object2.name.includes('transHole')) {
+                        actions.holesActions.endDraggingHole3D(sPoint.x, sPoint.y);
+                      }
                       break;
                     default:
                       break;
                   }
-                  selectedElement = _this2.props.state.scene.layers.get(selectedObject.layerID).getIn([elementPrototype, elementID]);
                 }
                 isSelected = false;
               }
             } else {
-              var selectedItem = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
-              if (bMove && !isEmpty(selectedItem)) {
-                addItemToolObj();
-              } else {
-                isSelected = false;
-                _this2.context.projectActions.unselectAll();
-                switch (true) {
-                  case 'holeID' in selectedObject:
-                    actions.holesActions.endDraggingHole3D(sPoint.x, sPoint.y);
-                    break;
-                  default:
-                    _this2.context.itemsActions.removeReplacingSupport();
-                    break;
-                }
+              isSelected = false;
+              _this2.context.projectActions.unselectAll();
+              switch (true) {
+                case 'holeID' in selectedObject:
+                  actions.holesActions.endDraggingHole3D(sPoint.x, sPoint.y);
+                  break;
+                default:
+                  _this2.context.itemsActions.removeReplacingSupport();
+                  break;
               }
             }
             bMove = false;
@@ -1602,15 +1541,35 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
             }
             getPoint(event, alti);
             if (bRotate) {
-              addItemToolObj();
+              var _intersects$_i;
+              var selectedItem = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
+              if (isUndefined(selectedItem)) return;
+              var selItem = _this2.props.state.scene.layers.get(selectedObject.layerID).items.get(selectedObject.itemID);
+              var itemPos = selectedItem.position.clone();
+              if (((_intersects$_i = intersects[_i10]) === null || _intersects$_i === void 0 || (_intersects$_i = _intersects$_i.object) === null || _intersects$_i === void 0 || (_intersects$_i = _intersects$_i.parent) === null || _intersects$_i === void 0 || (_intersects$_i = _intersects$_i.parent) === null || _intersects$_i === void 0 || (_intersects$_i = _intersects$_i.userData) === null || _intersects$_i === void 0 ? void 0 : _intersects$_i.itemId) === selectedItem.userData.itemId) {
+                toolObj.position.set(intersects[_i10].point.x, intersects[_i10].point.y, intersects[_i10].point.z);
+              } else {
+                toolObj.position.set(planData.plan.position.x + itemPos.x, selItem.category === 'lighting' ? -planData.plan.position.y - selItem.properties.get('height').get('length') : planData.plan.position.y + selectedItem.children[0].position.y, planData.plan.position.z + itemPos.z);
+              }
+              scene3D.add(toolObj);
               _this2.setState({
                 toolObj: toolObj
               });
               _this2.context.itemsActions.endRotatingItem3D(Point.x, Point.y);
               bRotate = false;
-            } else if (bMove) {
+            }
+            if (bMove) {
               bMove = false;
-              addItemToolObj();
+              var _selectedItem = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
+              if (isUndefined(_selectedItem)) return;
+              var _selItem = _this2.props.state.scene.layers.get(selectedObject.layerID).items.get(selectedObject.itemID);
+              var _itemPos = _selectedItem.position.clone();
+              if (intersects[_i10].object.parent.parent.userData.itemId === _selectedItem.userData.itemId) {
+                toolObj.position.set(intersects[_i10].point.x, intersects[_i10].point.y, intersects[_i10].point.z);
+              } else {
+                toolObj.position.set(planData.plan.position.x + _itemPos.x, _selItem.category === 'lighting' ? -planData.plan.position.y - _selItem.properties.get('height').get('length') : planData.plan.position.y + _selectedItem.children[0].position.y, planData.plan.position.z + _itemPos.z);
+              }
+              scene3D.add(toolObj);
               _this2.setState({
                 toolObj: toolObj
               });
@@ -1630,7 +1589,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
                 _item3D.position.z = targetPoint.z;
                 _item3D.visible = true;
               }
-            } else {}
+            }
             if (bMoveUP) {
               bMoveUP = false;
             }
@@ -1642,7 +1601,6 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
             selectedObj = allItemRect.cur;
           }
         }
-        sendInternalEvent(internalType, selectedElement);
       };
       this.mouseEnterEvent = function (event) {
         if (_this2.props.state.mode !== MODE_DRAWING_ITEM_3D) return;
@@ -2077,7 +2035,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
         if (minDis < snapDelta && !snapFlag) {
           _this2.snap(snapObj, layer);
           snapFlag = true;
-          getDistances(layer);
+          getDistances(layer, true);
           var _i13 = 0;
           for (_i13 = 0; _i13 < fVLine.length; _i13++) {
             if (fVLine[_i13].userData.distance < snapDelta) {
@@ -2201,7 +2159,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
         scene3D = new Three.Scene();
         if (isElevationView(state.mode)) scene3D.background = new Three.Color(0xffffff);
         // change color about v1: 0x8791AB, v2: 0xC2C2C2, v3: 0xC3CADC
-        else scene3D.background = new Three.Color(0xe4ebfe); // change color about v1: 0x8791AB, v2: 0xC2C2C2, v3: 0xC3CADC
+        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
@@ -2596,7 +2554,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
               height: '70px',
               animation: 'spin 2s linear infinite'
             },
-            src: '/assets/img/loading/loading.gif',
+            src: '/assets/img/loading_large.gif',
             alt: "img"
           }));
         } else {
@@ -2610,12 +2568,9 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
           }, /*#__PURE__*/React.createElement("img", {
             style: {
               animation: 'spin 2s linear infinite',
-              position: "absolute",
-              top: "50%",
-              width: '70px',
-              height: '70px'
+              marginTop: "22%"
             },
-            src: '/assets/img/loading/loading.gif',
+            src: '/assets/img/loading_large.gif',
             alt: "img"
           }));
         }
@@ -2632,11 +2587,9 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
           style: {
             animation: 'spin 2s linear infinite',
             position: "absolute",
-            top: "50%",
-            width: '70px',
-            height: '70px'
+            top: "50%"
           },
-          src: '/assets/img/loading/loading.gif',
+          src: '/assets/img/loading_large.gif',
           alt: "img"
         }));
       } else {

package/es/constants.js

@@ -55,7 +55,6 @@ export var REMOVE_CIRCULAR_GUIDE = 'REMOVE_CIRCULAR_GUIDE';
 export var REMOVE_DRAWING_SUPPORT = 'REMOVE_DRAWING_SUPPORT';
 export var SET_IS_HELP = 'SET_IS_HELP';
 export var SET_IS_CABINET_DRAWING = 'SET_IS_CABINET_DRAWING';
-export var CREATE_ROOM_WITH_SHAPE = 'CREATE_ROOM_WITH_SHAPE';
 
 // ACTIONS viewer2D
 export var SELECT_TOOL_ZOOM_IN = 'SELECT_TOOL_ZOOM_IN';
@@ -66,7 +65,6 @@ export var CHANGE_WALL_LENGTH_MEASURE = 'CHANGE_WALL_LENGTH_MEASURE';
 export var CHANGE_BASE_CABINET_MEASURE = 'CHANGE_BASE_CABINET_MEASURE';
 export var CHANGE_WALL_CABINET_MEASURE = 'CHANGE_WALL_CABINET_MEASURE';
 export var CHANGE_WINDOW_DOOR_MEASURE = 'CHANGE_WINDOW_DOOR_MEASURE';
-export var CHANGE_MEASUREMENT_UNIT = 'CHANGE_MEASUREMENT_UNIT';
 
 //ACTIONS viewer3D
 export var SELECT_TOOL_3D_VIEW = 'SELECT_TOOL_3D_VIEW';
@@ -246,8 +244,7 @@ export var PROJECT_ACTIONS = {
   SHIFT2DOFF: SHIFT2DOFF,
   SHIFT2DON: SHIFT2DON,
   SET_IS_HELP: SET_IS_HELP,
-  SET_IS_CABINET_DRAWING: SET_IS_CABINET_DRAWING,
-  CREATE_ROOM_WITH_SHAPE: CREATE_ROOM_WITH_SHAPE
+  SET_IS_CABINET_DRAWING: SET_IS_CABINET_DRAWING
 };
 export var VIEWER2D_ACTIONS = {
   SELECT_TOOL_ZOOM_IN: SELECT_TOOL_ZOOM_IN,
@@ -548,12 +545,6 @@ export var LABEL_COLOR = '#6E7191';
 export var TEXT_COLOR = '#000000';
 export var ACCENT_COLOR = '#AD00FF';
 export var BROWN_COLOR = '#624100';
-export var ROOM_SHAPE_MEASUREMENT_LINE_COLOR = '#455A64';
-export var ROOM_ELEMENT_MEASUREMENT_LINE_COLOR = '#B0BEC5';
-export var BASE_ITEM_MEASUREMENT_LINE_COLOR = '#0277BD';
-export var WALL_ITEM_MEASUREMENT_LINE_COLOR = '#00897B';
-export var DISTANCE_MEASUREMENT_LINE_COLOR = '#7B1FA2';
-export var DASH_LINE_COLOR = '#78909C';
 export var DEFAULT_FONT_FAMILY = 'Open Sans';
 
 // Download summary
@@ -646,26 +637,6 @@ export var ITEM_TYPE = {
   LIGHTING: 'lighting',
   FURNISHING: 'furnishing'
 };
-export var PROJECT_SETTING_OPTION = {
-  UPDATE_CEIL_HEIGHT: UPDATE_CEIL_HEIGHT,
-  CHANGE_WALL_LENGTH_MEASURE: CHANGE_WALL_LENGTH_MEASURE,
-  CHANGE_BASE_CABINET_MEASURE: CHANGE_BASE_CABINET_MEASURE,
-  CHANGE_WALL_CABINET_MEASURE: CHANGE_WALL_CABINET_MEASURE,
-  CHANGE_WINDOW_DOOR_MEASURE: CHANGE_WINDOW_DOOR_MEASURE,
-  CHANGE_MEASUREMENT_UNIT: CHANGE_MEASUREMENT_UNIT
-};
-export var HOLE_NAMES = {
-  WINDOW_CLEAR: 'Window',
-  WINDOW_CROSS: 'Cross Window',
-  WINDOW_DOUBLE_HUNG: 'Double Hung Window',
-  WINDOW_VERTICAL: 'window-vertical',
-  DOOR_CLOSET: 'Closet',
-  DOOR_EXTERIOR: 'Exterior',
-  DOOR_INTERIOR: 'Interior',
-  DOOR_SLIDING: 'Sliding',
-  DOOR_FRAMED: 'Framed Doorway',
-  DOOR_FRAMELESS: 'FrameLess Doorway'
-};
 
 // direction type
 export var LEFT = 'Left';
@@ -673,94 +644,16 @@ export var RIGHT = 'Right';
 export var TOP = 'Top';
 export var BOTTOM = 'Bottom';
 
-// distance direction angle
-export var LEFT_DIST_ANG = 0;
-export var RIGHT_DIST_ANG = 180;
-export var BACK_DIST_ANG = 90;
-export var FRONT_DIST_ANG = -90;
-
-// element prototype
-export var ELEMENT_LINE = 'lines';
-export var ELEMENT_HOLE = 'holes';
-export var ELEMENT_ITEM = 'items';
-export var ELEMENT_AREA = 'areas';
-export var ELEMENT_VERTEX = 'vertices';
-// element attributes
-export var ATT_ITEM_POS = 'pos';
-export var ATT_ITEM_ROTATION = 'rotation';
-export var ATT_LINE_LENGTH = 'lineLength';
-export var ATT_VERTEXT_ONE = 'vertexOne';
-export var ATT_VERTEXT_TWO = 'vertexTwo';
-export var ATT_HOLE_OFFSET_A = 'offsetA';
-export var ATT_HOLE_OFFSET_B = 'offsetB';
-// element properties
-export var PROP_FLIP_DOOR_HANDLE = 'flip_doorhandle';
-export var PROP_OPEN_DOORS = 'open_doors';
-export var PROP_ALTITUDE = 'altitude';
-export var PROP_RESIZE_WIDTH = 'width';
-export var PROP_RESIZE_HEIGHT = 'height';
-export var PROP_RESIZE_DEPTH = 'depth';
-
-// finishing typs
-export var FINISHING_TYPE = {
-  COUNTER_TOP: 'counterTop',
-  DOOR_HANDLE: 'doorHandle',
-  WALL_COLOR: 'wallColor',
-  FLOOR_STYLE: 'floorStyle',
-  BACKSPLASH: 'backsplash'
-};
-export var MAX_ZOOM_IN_SCALE = Infinity;
-
 // external event type
-export var EXTERNAL_EVENT_SYNC_SCENE = 'EXTERNAL_EVENT_SYNC_SCENE'; // Host request the scene data to 3DTool for sync  : Host -> 3DTool
-export var INTERNAL_EVENT_SYNC_SCENE = 'INTERNAL_EVENT_SYNC_SCENE'; // 3DTool send the scene data to Host for sync : 3DTool -> HostApp
-export var INTERNAL_EVENT_ITEMS_CATALOG = 'INTERNAL_EVENT_ITEMS_CATALOG'; // Request item's catalog data to Host
-
-// external event type
-export var EXTERNAL_EVENT_LOAD_PROJECT = 'EXTERNAL_EVENT_LOAD_PROJECT';
 export var EXTERNAL_EVENT_TOGGLE_TO_3D = 'EXTERNAL_EVENT_TOGGLE_TO_3D';
 export var EXTERNAL_EVENT_TOGGLE_TO_2D = 'EXTERNAL_EVENT_TOGGLE_TO_2D';
 export var EXTERNAL_EVENT_TOGGLE_TO_ELEVATION = 'EXTERNAL_EVENT_TOGGLE_TO_ELEVATION';
 export var EXTERNAL_EVENT_ADD_WALL = 'EXTERNAL_EVENT_ADD_WALL';
 export var EXTERNAL_EVENT_ADD_ITEM = 'EXTERNAL_EVENT_ADD_ITEM';
-export var EXTERNAL_EVENT_ADD_HOLE = 'EXTERNAL_EVENT_ADD_HOLE';
 export var EXTERNAL_EVENT_MOVE_PAN = 'EXTERNAL_EVENT_MOVE_PAN';
 export var EXTERNAL_EVENT_NEW_PROJECT = 'EXTERNAL_EVENT_NEW_PROJECT';
 export var EXTERNAL_EVENT_CHANGE_DOORSTYLE = 'EXTERNAL_EVENT_CHANGE_DOORSTYLE';
+export var EXTERNAL_EVENT_SET_INITIAL_DATA = 'EXTERNAL_EVENT_SET_INITIAL_DATA';
 export var EXTERNAL_EVENT_ADD_ROOM_SHAPE = 'EXTERNAL_EVENT_ADD_ROOM_SHAPE';
 export var EXTERNAL_EVENT_ZOOM_IN = 'EXTERNAL_EVENT_ZOOM_IN';
-export var EXTERNAL_EVENT_ZOOM_OUT = 'EXTERNAL_EVENT_ZOOM_OUT';
-export var EXTERNAL_EVENT_UNDO = 'EXTERNAL_EVENT_UNDO';
-export var EXTERNAL_EVENT_REDO = 'EXTERNAL_EVENT_REDO';
-export var EXTERNAL_EVENT_SET_MOLDING = 'EXTERNAL_EVENT_SET_MOLDING';
-export var EXTERNAL_EVENT_PROJECT_SETTING = 'EXTERNAL_EVENT_PROJECT_SETTING'; // project setting event
-export var EXTERNAL_EVENT_CENTERING_2D = 'EXTERNAL_EVENT_CENTERING_2D';
-export var EXTERNAL_EVENT_DUPLICATE_ELEMENT = 'EXTERNAL_EVENT_DUPLICATE_ELEMENT';
-export var EXTERNAL_EVENT_DELETE_ELEMENT = 'EXTERNAL_EVENT_DELETE_ELEMENT';
-export var EXTERNAL_EVENT_UPDATE_ATTRIBUTE = 'EXTERNAL_EVENT_UPDATE_ATTRIBUTE'; // update the element's attributes (distance, rotation...) in the property window
-export var EXTERNAL_EVENT_UPDATE_PROPERTY = 'EXTERNAL_EVENT_UPDATE_PROPERTY'; // update the element's property (flip_doorhandle, open_doors...) in the property window
-export var EXTERNAL_EVENT_REPLACE_CABINET = 'EXTERNAL_EVENT_REPLACE_CABINET';
-export var EXTERNAL_EVENT_SET_FINISHING = 'EXTERNAL_EVENT_SET_FINISHING'; // set finishing(wallColor, floorStyle, doorHandle, backsplash, counterTop)
-export var EXTERNAL_EVENT_ROTATE_PAN = 'EXTERNAL_EVENT_ROTATE_PAN'; // external event for rotate pan
-
-// internal event type
-export var INTERNAL_EVENT_UNSELECT_ALL = 'INTERNAL_EVENT_UNSELECT_ALL';
-export var INTERNAL_EVENT_SELECT_ELEMENT = 'INTERNAL_EVENT_SELECT_ELEMENT';
-export var INTERNAL_EVENT_DRAG_ELEMENT = 'INTERNAL_EVENT_DRAG_ELEMENT';
-export var INTERNAL_EVENT_DRAW_ELEMENT = 'INTERNAL_EVENT_DRAW_ELEMENT';
-export var INTERNAL_EVENT_ROTATE_ELEMENT = 'INTERNAL_EVENT_ROTATE_ELEMENT';
-export var INTERNAL_EVENT_REPLACE_CABINET = 'INTERNAL_EVENT_REPLACE_CABINET';
-export var INTERNAL_EVENT_START_DRAW_WALL = 'INTERNAL_EVENT_START_DRAW_WALL';
-
-// room shape type
-export var ROOM_SHAPE_TYPE = {
-  RECTANGLE: 'rectangle',
-  TWO_WALLS_LEFT_TOP: '2wLeftTop',
-  TWO_WALLS_RIGHT_TOP: '2wRightTop',
-  TWO_WALLS_LEFT_BOTTOM: '2wLeftBottom',
-  TWO_WALLS_RIGHT_BOTTOM: '2wRightBottom',
-  THREE_WALLS_LEFT_TOP_RIGHT: '3wLeftTopRight',
-  THREE_WALLS_TOP_RIGHT_BOTTOM: '3wTopRightBottom',
-  THREE_WALLS_RIGHT_BOTTOM_LEFT: '3wRightBottomLeft',
-  THREE_WALLS_BOTTOM_LEFT_TOP: '3wBottomLeftTop'
-};
+export var EXTERNAL_EVENT_ZOOM_OUT = 'EXTERNAL_EVENT_ZOOM_OUT';