kitchen-simulator 1.0.0-alin.9 → 1.0.0-clark.101

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 } 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, 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 { isUndefined } from 'util';
 import { verticesDistance } from "../../utils/geometry";
 import { convert } from "../../utils/convert-units-lite";
@@ -94,9 +94,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
     } else {
       if (_this.props.downloadFlag) window.__elevationRendererDownload[mode] = _this.renderer;else window.__elevationRenderer = _this.renderer;
     }
-    if (_this.renderer && _this.renderer.domElement) {
-      _this.renderer.domElement.style.display = 'none';
-    }
+    _this.renderer.domElement.style.display = 'none';
     return _this;
   }
   _inherits(Scene3DViewer, _React$Component);
@@ -1276,7 +1274,18 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
               }
             }
             if (selectedObject !== undefined) {
-              var selectedItem = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
+              // get selected object from planData.sceneGraph
+              var selectedItem = null;
+              switch (true) {
+                case 'itemID' in selectedObject:
+                  selectedItem = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
+                  break;
+                case 'holeID' in selectedObject:
+                  selectedItem = planData.sceneGraph.layers[selectedObject.layerID].holes[selectedObject.holeID];
+                  break;
+                default:
+                  break;
+              }
               sPoint.set(Point.x, Point.y);
               if (transflag == 0) {
                 scene3D.remove(toolObj);
@@ -1342,7 +1351,8 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
         }
       };
       this.mouseUpEvent = function (event) {
-        var _selObj$object, _selObj$object2;
+        var internalType = ''; // internalEvent type - select/drag/draw
+        var selectedElement; // internalEvent data
         firstMove = 0;
         var altitude = 0;
         if (allItemRect && allItemRect.cur && allItemRect.cur.itemInfo !== undefined) {
@@ -1379,6 +1389,14 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
           isInitialPhase = true;
           return;
         }
+        switch (_this2.props.state.mode) {
+          case MODE_DRAGGING_ITEM_3D:
+            internalType = INTERNAL_EVENT_DRAG_ELEMENT;
+            break;
+          case MODE_ROTATING_ITEM_3D:
+            internalType = INTERNAL_EVENT_ROTATE_ELEMENT;
+            break;
+        }
         if (_this2.props.state.mode == MODE_DRAGGING_ITEM_3D) {
           _this2.context.itemsActions.endDraggingItem3D();
         }
@@ -1460,56 +1478,62 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
                   currentObject = currentObject.parent;
                 }
                 isSelected = true;
-                setTimeout(function () {
-                  getDistances(layer);
-                  var selectedItem = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
-                  if (isUndefined(selectedItem)) return;
-                  var selItem = _this2.props.state.scene.layers.get(selectedObject.layerID).items.get(selectedObject.itemID);
-                  var itemPos = selectedItem.position.clone();
-                  if (intersects[_i10].object.parent && intersects[_i10].object.parent.parent.userData.itemId === selectedItem.userData.itemId) {
-                    toolObj.position.set(intersects[_i10].point.x, intersects[_i10].point.y, intersects[_i10].point.z);
-                  } else {
-                    toolObj.position.set(planData.plan.position.x + itemPos.x, selItem.category === 'lighting' ? -planData.plan.position.y - selItem.properties.get('height').get('length') : planData.plan.position.y + selectedItem.children[0].position.y, planData.plan.position.z + itemPos.z);
-                  }
-                  scene3D.add(toolObj);
-                  _this2.setState({
-                    toolObj: toolObj
-                  });
-                  // showItemButtons(layer.getIn(['items', selectedObject.itemID]), currentObject, event, camera, this.renderer);
-                  var pointArray = [],
-                    cnt = 0;
-                  pointArray.push([fVLine[0].userData.distance, 90]);
-                  pointArray.push([fVLine[1].userData.distance, -90]);
-                  pointArray.push([fVLine[2].userData.distance, 180]);
-                  pointArray.push([fVLine[3].userData.distance, 0]);
-                  pointArray.forEach(function (pointElement, index) {
-                    if (pointElement[0] == undefined) pointArray[index][0] = 0;
-                  });
-                  pointArray.forEach(function (pointElement) {
-                    if (pointElement[0] == 0) cnt++;
-                  });
-                  if (cnt == 4 || cnt == 3) {
-                    pointArray[0][0] = 100;
-                    pointArray[1][0] = 100;
-                  }
-                  actions.itemsActions.storeDistArray(layer.id, selectedObject.itemID, pointArray);
+                getDistances(layer);
+                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[_i10].object.parent && intersects[_i10].object.parent.parent.userData.itemId === selectedItem.userData.itemId) {
+                  toolObj.position.set(intersects[_i10].point.x, intersects[_i10].point.y, intersects[_i10].point.z);
+                } else {
+                  toolObj.position.set(planData.plan.position.x + itemPos.x, selectedElement.category === 'lighting' ? -planData.plan.position.y - selectedElement.properties.get('height').get('length') : planData.plan.position.y + selectedItem.children[0].position.y, planData.plan.position.z + itemPos.z);
+                }
+                scene3D.add(toolObj);
+                _this2.setState({
+                  toolObj: toolObj
+                });
+                // showItemButtons(layer.getIn(['items', selectedObject.itemID]), currentObject, event, camera, this.renderer);
+                var pointArray = [],
+                  cnt = 0;
+                pointArray.push([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;
               } else {
                 if (selectedObject) {
+                  var elementID = null;
+                  var elementPrototype = null;
                   switch (true) {
                     case 'holeID' in selectedObject:
-                      if (selObj !== null && selObj !== void 0 && (_selObj$object = selObj.object) !== null && _selObj$object !== void 0 && _selObj$object.name.includes('transHole')) {
-                        actions.holesActions.endDraggingHole3D(sPoint.x, sPoint.y);
-                      }
-                      break;
                     case 'lineID' in selectedObject:
-                      if (selObj !== null && selObj !== void 0 && (_selObj$object2 = selObj.object) !== null && _selObj$object2 !== void 0 && _selObj$object2.name.includes('transHole')) {
+                      if (_this2.props.state.mode === MODE_DRAGGING_HOLE_3D) {
                         actions.holesActions.endDraggingHole3D(sPoint.x, sPoint.y);
+                        internalType = INTERNAL_EVENT_SELECT_ELEMENT;
+                        elementID = selectedObject.holeID;
+                        elementPrototype = 'holeID';
                       }
                       break;
+                    case 'areaID' in selectedObject:
+                      internalType = INTERNAL_EVENT_SELECT_ELEMENT;
+                      elementID = selectedObject.areaID;
+                      elementPrototype = 'areas';
+                      break;
                     default:
                       break;
                   }
+                  selectedElement = _this2.props.state.scene.layers.get(selectedObject.layerID).getIn([elementPrototype, elementID]);
                 }
                 isSelected = false;
               }
@@ -1544,14 +1568,14 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
             getPoint(event, alti);
             if (bRotate) {
               var _intersects$_i;
-              var selectedItem = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
-              if (isUndefined(selectedItem)) return;
-              var selItem = _this2.props.state.scene.layers.get(selectedObject.layerID).items.get(selectedObject.itemID);
-              var itemPos = selectedItem.position.clone();
-              if (((_intersects$_i = intersects[_i10]) === null || _intersects$_i === void 0 || (_intersects$_i = _intersects$_i.object) === null || _intersects$_i === void 0 || (_intersects$_i = _intersects$_i.parent) === null || _intersects$_i === void 0 || (_intersects$_i = _intersects$_i.parent) === null || _intersects$_i === void 0 || (_intersects$_i = _intersects$_i.userData) === null || _intersects$_i === void 0 ? void 0 : _intersects$_i.itemId) === selectedItem.userData.itemId) {
+              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, 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);
+                toolObj.position.set(planData.plan.position.x + _itemPos.x, selectedElement.category === 'lighting' ? -planData.plan.position.y - selectedElement.properties.get('height').get('length') : planData.plan.position.y + _selectedItem.children[0].position.y, planData.plan.position.z + _itemPos.z);
               }
               scene3D.add(toolObj);
               _this2.setState({
@@ -1562,14 +1586,14 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
             }
             if (bMove) {
               bMove = false;
-              var _selectedItem = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
-              if (isUndefined(_selectedItem)) return;
-              var _selItem = _this2.props.state.scene.layers.get(selectedObject.layerID).items.get(selectedObject.itemID);
-              var _itemPos = _selectedItem.position.clone();
-              if (intersects[_i10].object.parent.parent.userData.itemId === _selectedItem.userData.itemId) {
+              var _selectedItem2 = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
+              if (isUndefined(_selectedItem2)) return;
+              selectedElement = _this2.props.state.scene.layers.get(selectedObject.layerID).items.get(selectedObject.itemID);
+              var _itemPos2 = _selectedItem2.position.clone();
+              if (intersects[_i10].object.parent.parent.userData.itemId === _selectedItem2.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);
+                toolObj.position.set(planData.plan.position.x + _itemPos2.x, selectedElement.category === 'lighting' ? -planData.plan.position.y - selectedElement.properties.get('height').get('length') : planData.plan.position.y + _selectedItem2.children[0].position.y, planData.plan.position.z + _itemPos2.z);
               }
               scene3D.add(toolObj);
               _this2.setState({
@@ -1603,6 +1627,13 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
             selectedObj = allItemRect.cur;
           }
         }
+        if (!isEmpty(internalType)) {
+          var _this2$props$onIntern, _this2$props;
+          (_this2$props$onIntern = (_this2$props = _this2.props).onInternalEvent) === null || _this2$props$onIntern === void 0 || _this2$props$onIntern.call(_this2$props, {
+            type: internalType,
+            value: selectedElement.toJS()
+          });
+        }
       };
       this.mouseEnterEvent = function (event) {
         if (_this2.props.state.mode !== MODE_DRAWING_ITEM_3D) return;
@@ -2360,9 +2391,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
                   self.props.setIsLoadingElevation('front', false);
                 }, 100);
               }
-              if (self.renderer && self.renderer.domElement) {
-                self.renderer.domElement.style.display = 'block';
-              }
+              self.renderer.domElement.style.display = 'block';
             }
           }
         }
@@ -2506,9 +2535,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
                 break;
             }
           }
-          if (self.renderer && self.renderer.domElement) {
-            self.renderer.domElement.style.display = 'none';
-          }
+          self.renderer.domElement.style.display = 'none';
         }
         if (nextProps.state.scene.showfg == true) {
           implementBacksplash();
@@ -2545,9 +2572,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
         isLoadingCabinet = _this$state2.isLoadingCabinet;
       if (isLoading) {
         if (this.props.downloadFlag) {
-          if (this.renderer && this.renderer.domElement) {
-            this.renderer.domElement.style.display = 'none';
-          }
+          this.renderer.domElement.style.display = 'none';
           return /*#__PURE__*/React.createElement("div", {
             style: {
               alignItems: ' center',
@@ -2567,10 +2592,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
           }));
         } else {
           document.getElementById('front') && (document.getElementById('front').style.display = 'none');
-          document.getElementById('error').style.display = 'none';
-          if (this.renderer && this.renderer.domElement) {
-            this.renderer.domElement.style.display = 'none';
-          }
+          this.renderer.domElement.style.display = 'none';
           return /*#__PURE__*/React.createElement("div", {
             style: {
               textAlign: 'center',
@@ -2604,7 +2626,6 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
           alt: "img"
         }));
       } else {
-        !this.props.downloadFlag && (document.getElementById('error').style.display = 'block');
         this.renderer.domElement.style.pointerEvents = 'auto';
         this.renderer.domElement.style.opacity = '1';
         !this.props.downloadFlag && document.getElementById('front') && (document.getElementById('front').style.display = 'block');

package/es/constants.js

@@ -103,6 +103,7 @@ export var ANIMATE_OBJECT = 'ANIMATE_OBJECT';
 export var REMOVE_REPLACE_SUBMODULE = 'REMOVE_REPLACE_SUBMODULE';
 export var ITEM_MOVE_UP = 'ITEM_MOVE_UP';
 export var SET_DOOR_STYLE = 'SET_DOOR_STYLE';
+export var CHANGE_DISTANCE = 'CHANGE_DISTANCE';
 export var SET_HANDLE_MATERIAL = 'SET_HANDLE_MATERIAL';
 export var SET_INITIAL_DOOR_STYLE = 'SET_INITIAL_DOOR_STYLE';
 export var UPDATE_ITEM_POSITION = 'UPDATE_ITEM_POSITION';
@@ -170,12 +171,16 @@ export var END_DRAGGING_HOLE = 'END_DRAGGING_HOLE';
 export var END_DRAGGING_HOLE_3D = 'END_DRAGGING_HOLE_3D';
 export var UPDATE_DRAGGING_HOLE_3D = 'UPDATE_DRAGGING_HOLE_3D';
 export var SET_RELATED_LINE = 'SET_RELATED_LINE';
-
+export var EXTERNAL_EVENT_CHANGE_DISTANCE = 'EXTERNAL_EVENT_CHANGE_DISTANCE';
+export var EXTERNAL_EVENT_SYNC_SCENE = 'EXTERNAL_EVENT_SYNC_SCENE'; //External event for sync scene data : HostApp -> 3DTool
 //ACTIONS vertices
 export var BEGIN_DRAGGING_VERTEX = 'BEGIN_DRAGGING_VERTEX';
 export var UPDATE_DRAGGING_VERTEX = 'UPDATE_DRAGGING_VERTEX';
 export var END_DRAGGING_VERTEX = 'END_DRAGGING_VERTEX';
 
+//Interanl Event Types
+export var INTERNAL_EVENT_SYNC_SCENE = 'INTERNAL_EVENT_SYNC_SCENE'; //Internal event for sync scene data : 3DTool -> HostApp
+
 //ACTIONS scene
 export var SET_LAYER_PROPERTIES = 'SET_LAYER_PROPERTIES';
 export var ADD_LAYER = 'ADD_LAYER';
@@ -313,7 +318,8 @@ export var ITEMS_ACTIONS = {
   END_LOADING: END_LOADING,
   STORE_DIST_ARRAY: STORE_DIST_ARRAY,
   VALIDATE_ITEM_POSTIONS: VALIDATE_ITEM_POSTIONS,
-  REPLACE_ITEM: REPLACE_ITEM
+  REPLACE_ITEM: REPLACE_ITEM,
+  CHANGE_DISTANCE: CHANGE_DISTANCE
 };
 export var HOLE_ACTIONS = {
   SELECT_HOLE: SELECT_HOLE,
@@ -545,6 +551,12 @@ 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
@@ -579,6 +591,7 @@ export var ANIMATE_OBJECT_OPEN_DOOR_ROTATION_UNIT = 0.1;
 export var DIFFERENT_VALUES_PATH_LENGTH = 5;
 export var MIN_ANGLE_DISALLOW_DRAW_WALL = 45;
 export var UNIT_ANGLE = 5;
+export var MAX_ANGLE_SCALE = 30;
 export var HDR_URLS = ['px.hdr', 'nx.hdr', 'py.hdr', 'ny.hdr', 'pz.hdr', 'nz.hdr'];
 export var SUBMIT_REQUEST_ASSIST = 'submit';
 export var SUBMIT_ADD_CART = 'addCart';
@@ -636,6 +649,13 @@ 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
+};
 
 // direction type
 export var LEFT = 'Left';
@@ -650,4 +670,19 @@ export var EXTERNAL_EVENT_TOGGLE_TO_ELEVATION = 'EXTERNAL_EVENT_TOGGLE_TO_ELEVAT
 export var EXTERNAL_EVENT_ADD_WALL = 'EXTERNAL_EVENT_ADD_WALL';
 export var EXTERNAL_EVENT_ADD_ITEM = 'EXTERNAL_EVENT_ADD_ITEM';
 export var EXTERNAL_EVENT_MOVE_PAN = 'EXTERNAL_EVENT_MOVE_PAN';
-export var EXTERNAL_EVENT_NEW_PROJECT = 'EXTERNAL_EVENT_NEW_PROJECT';
+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';
+
+// internal event type
+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';

package/es/devLiteRenderer.js

@@ -1,20 +1,28 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useState, useEffect } from 'react';
 import ContainerDimensions from 'react-container-dimensions';
-import mockProps from "./mocks/mockProps.json";
-import mockCategoryData from "./mocks/categoryData.json";
-import mockDataBundle from "./mocks/dataBundle.json";
-import cabinetPaylod from "./mocks/cabinetPayload.json";
+import mockProps from "./mocks/mockProps2.json";
+import mockDataBundle from "./mocks/dataBundle2.json";
+import cabinetPaylod from "./mocks/cabinetPayload2.json";
+import doorStylePaylod from "./mocks/doorStylePayload.json";
+import doorStylePaylod2 from "./mocks/doorStylePayload2.json";
+import itemCDSPayload from "./mocks/itemCDSPayload.json";
+import rectangleData from "./mocks/rectangleShape.json";
+import moldingPayload from "./mocks/moldingPayload.json";
+import distancePayload from "./mocks/distancePayload.json";
 import ReactDOM from 'react-dom';
 import LiteRenderer from "./LiteRenderer";
 import { Button } from 'antd';
-import { LEFT, RIGHT, TOP, BOTTOM, EXTERNAL_EVENT_ADD_ITEM, EXTERNAL_EVENT_ADD_WALL, EXTERNAL_EVENT_TOGGLE_TO_3D, EXTERNAL_EVENT_TOGGLE_TO_2D, EXTERNAL_EVENT_TOGGLE_TO_ELEVATION, EXTERNAL_EVENT_MOVE_PAN, EXTERNAL_EVENT_NEW_PROJECT } from "./constants";
+import { LEFT, RIGHT, TOP, BOTTOM, EXTERNAL_EVENT_ADD_ITEM, EXTERNAL_EVENT_ADD_WALL, EXTERNAL_EVENT_TOGGLE_TO_3D, EXTERNAL_EVENT_TOGGLE_TO_2D, EXTERNAL_EVENT_TOGGLE_TO_ELEVATION, EXTERNAL_EVENT_MOVE_PAN, EXTERNAL_EVENT_NEW_PROJECT, EXTERNAL_EVENT_CHANGE_DOORSTYLE, EXTERNAL_EVENT_SET_INITIAL_DATA, EXTERNAL_EVENT_ADD_ROOM_SHAPE, EXTERNAL_EVENT_ZOOM_IN, EXTERNAL_EVENT_ZOOM_OUT, EXTERNAL_EVENT_UNDO, EXTERNAL_EVENT_REDO, EXTERNAL_EVENT_SET_MOLDING, EXTERNAL_EVENT_PROJECT_SETTING, PROJECT_SETTING_OPTION, EXTERNAL_EVENT_CHANGE_DISTANCE, EXTERNAL_EVENT_SYNC_SCENE } from "./constants";
 
 // --- renderer props ---
 var options = {
   unit: 'in',
   enable3D: true
 };
+var onInternalEvent = function onInternalEvent(evt) {
+  console.log('EVENT:', evt.type, evt.value);
+};
 document.getElementById('app').style.display = 'block';
 function WorkSpace(props) {
   var _useState = useState(null),
@@ -22,6 +30,17 @@ function WorkSpace(props) {
     externalEvent = _useState2[0],
     setExternalEvent = _useState2[1];
   var offset = 5;
+  useEffect(function () {
+    var evt = {
+      type: EXTERNAL_EVENT_SET_INITIAL_DATA,
+      payload: {
+        doorStyle: {
+          doorStyle: doorStylePaylod
+        }
+      }
+    };
+    setExternalEvent(evt);
+  }, []);
   return /*#__PURE__*/React.createElement("div", {
     className: "flex gap-4"
   }, /*#__PURE__*/React.createElement(Button, {
@@ -107,6 +126,28 @@ function WorkSpace(props) {
     }
   }, /*#__PURE__*/React.createElement("img", {
     src: "/assets/img/svg/bottombar/arrow-right.svg"
+  })), /*#__PURE__*/React.createElement(Button, {
+    actionType: "primary",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_ZOOM_IN,
+        payload: {}
+      };
+      setExternalEvent(evt);
+    }
+  }, /*#__PURE__*/React.createElement("img", {
+    src: "/assets/img/svg/bottombar/arrow-minus.svg"
+  })), /*#__PURE__*/React.createElement(Button, {
+    actionType: "primary",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_ZOOM_OUT,
+        payload: {}
+      };
+      setExternalEvent(evt);
+    }
+  }, /*#__PURE__*/React.createElement("img", {
+    src: "/assets/img/svg/bottombar/arrow-plus.svg"
   })), /*#__PURE__*/React.createElement(Button, {
     actionType: "primary",
     onClick: function onClick() {
@@ -134,11 +175,117 @@ function WorkSpace(props) {
       };
       setExternalEvent(evt);
     }
-  }, "Add B12 Cabinet"), /*#__PURE__*/React.createElement(LiteRenderer, {
-    width: 1200,
-    height: 953,
+  }, "Add B12 Cabinet"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_CHANGE_DOORSTYLE,
+        payload: {
+          doorStyle: doorStylePaylod2,
+          itemCDS: itemCDSPayload,
+          isAll: true
+        }
+      };
+      setExternalEvent(evt);
+    }
+  }, "DoorStyle (Change into Midtown White Shaker)"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_ADD_ROOM_SHAPE,
+        payload: rectangleData
+      };
+      setExternalEvent(evt);
+    }
+  }, "Add Room shape(rectangle)"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_UNDO,
+        payload: {}
+      };
+      setExternalEvent(evt);
+    }
+  }, "Undo"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_REDO,
+        payload: {}
+      };
+      setExternalEvent(evt);
+    }
+  }, "Redo"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_SET_MOLDING,
+        payload: {
+          isGlobal: true,
+          moldingInfo: moldingPayload
+        }
+      };
+      setExternalEvent(evt);
+    }
+  }, "Global Molding (FBM)"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_SET_MOLDING,
+        payload: {
+          isGlobal: false,
+          moldingInfo: moldingPayload
+        }
+      };
+      setExternalEvent(evt);
+    }
+  }, "Individual Molding (FBM)"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_PROJECT_SETTING,
+        payload: {
+          option: PROJECT_SETTING_OPTION.UPDATE_CEIL_HEIGHT,
+          value: 100 // ceiling length
+        }
+      };
+      setExternalEvent(evt);
+    }
+  }, "Setting-CeilingHeight"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_PROJECT_SETTING,
+        payload: {
+          option: PROJECT_SETTING_OPTION.CHANGE_WALL_LENGTH_MEASURE,
+          value: 1 // 0-false, 1-true
+        }
+      };
+      setExternalEvent(evt);
+    }
+  }, "Setting-WallLength"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_CHANGE_DISTANCE,
+        payload: distancePayload
+      };
+      setExternalEvent(evt);
+    }
+  }, "Setting-Distance"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_SYNC_SCENE,
+        // send request for sync scene data to 3DTool
+        payload: {}
+      };
+      setExternalEvent(evt);
+    }
+  }, "Event-sync"), /*#__PURE__*/React.createElement(LiteRenderer, {
+    width: props.width,
+    height: props.height,
     projectElement: mockProps.projectElement,
-    categoryData: mockCategoryData,
     dataBundle: mockDataBundle,
     configData: mockProps.configData,
     options: options,
@@ -146,6 +293,7 @@ function WorkSpace(props) {
     companyUrl: "https://example.com",
     toolbarButtons: [],
     externalEvent: externalEvent,
+    onInternalEvent: onInternalEvent,
     onError: function onError(payload) {
       // payload = {
       //   type: 'render-error' | 'runtime-error' | 'unhandled-rejection',
@@ -158,4 +306,11 @@ function WorkSpace(props) {
     }
   }));
 }
-ReactDOM.render(/*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(WorkSpace, null)), document.getElementById('app'));
+ReactDOM.render(/*#__PURE__*/React.createElement(ContainerDimensions, null, function (_ref) {
+  var width = _ref.width,
+    height = _ref.height;
+  return /*#__PURE__*/React.createElement(WorkSpace, {
+    width: width,
+    height: height
+  });
+}), document.getElementById('app'));

package/es/index.js

@@ -1,7 +1,56 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+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 _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 ReactDOM from 'react-dom';
 import LiteRenderer from "./LiteRenderer";
-export function renderKitchenSimulator() {
-  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return /*#__PURE__*/React.createElement(LiteRenderer, props);
+export function renderKitchenSimulator(container) {
+  var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var setExternalEventFn = null;
+
+  // Internal wrapper that exposes a state setter
+  var Wrapper = /*#__PURE__*/function (_React$Component) {
+    function Wrapper(p) {
+      var _this;
+      _classCallCheck(this, Wrapper);
+      _this = _callSuper(this, Wrapper, [p]);
+      _this.state = {
+        externalEvent: p.externalEvent || null
+      };
+      setExternalEventFn = _this.setExternalEvent.bind(_this);
+      return _this;
+    }
+    _inherits(Wrapper, _React$Component);
+    return _createClass(Wrapper, [{
+      key: "setExternalEvent",
+      value: function setExternalEvent(newEvent) {
+        this.setState({
+          externalEvent: newEvent
+        });
+      }
+    }, {
+      key: "render",
+      value: function render() {
+        return /*#__PURE__*/React.createElement(LiteRenderer, _extends({}, this.props, {
+          externalEvent: this.state.externalEvent
+        }));
+      }
+    }]);
+  }(React.Component); // Mount once
+  ReactDOM.render(/*#__PURE__*/React.createElement(Wrapper, props), container);
+  return {
+    updateExternalEvent: function updateExternalEvent(newExternalEvent) {
+      var _setExternalEventFn;
+      (_setExternalEventFn = setExternalEventFn) === null || _setExternalEventFn === void 0 || _setExternalEventFn(newExternalEvent);
+    },
+    unmount: function unmount() {
+      ReactDOM.unmountComponentAtNode(container);
+    }
+  };
 }
 export default renderKitchenSimulator;