kitchen-simulator 3.1.15 → 4.0.0-alpha.12

package/es/devLiteRenderer.js

@@ -1,88 +1,45 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-import React, { useState, useEffect } from "react";
-import { Map } from "immutable";
-import ContainerDimensions from "react-container-dimensions";
-import projectItemsCatalog from "./mocks/projectItemsCatalog.json";
+import React, { useState, useEffect } from 'react';
+import ContainerDimensions from 'react-container-dimensions';
 import mockProps from "./mocks/mockProps.json";
-import cabinetPaylod from "./mocks/cabinetPayload2.json";
-import cabinetW0940Payload from "./mocks/cabinetPayload.json";
-import appliancePaylod from "./mocks/appliancePayload.json";
-import doorStylePaylod2 from "./mocks/doorStylePayload2.json";
-import roomShapePayload from "./mocks/roomShapePayload.json";
-import itemCDSPayload from "./mocks/itemCDSPayload.json";
-import lightingPayload from "./mocks/lightingPayload.json";
-import furnishingPayload from "./mocks/furnishingPayload.json";
+import mockCategoryData from "./mocks/categoryData.json";
+import mockDataBundle from "./mocks/dataBundle.json";
+import cabinetPaylod from "./mocks/cabinetPayload.json";
+import doorStylePaylod from "./mocks/doorStylePayload.json";
+import oStylePaylod from "./mocks/oStylePayload.json";
 import rectangleData from "./mocks/rectangleShape.json";
-import moldingPayload from "./mocks/moldingPayload.json";
-import replaceCabinetPayload from "./mocks/replaceCabinetPayload.json";
-import ReactDOM from "react-dom";
+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, EXTERNAL_EVENT_CHANGE_DOORSTYLE, 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_SYNC_SCENE, EXTERNAL_EVENT_UPDATE_ATTRIBUTE, BACK_DIST_ANG, ATT_ITEM_POS, ATT_ITEM_ROTATION, ATT_LINE_LENGTH, EXTERNAL_EVENT_UPDATE_PROPERTY, PROP_FLIP_DOOR_HANDLE, PROP_OPEN_DOORS, EXTERNAL_EVENT_LOAD_PROJECT, INTERNAL_EVENT_ITEMS_CATALOG, EXTERNAL_EVENT_ADD_HOLE, HOLE_NAMES, EXTERNAL_EVENT_CENTERING_2D, PROP_ALTITUDE, EXTERNAL_EVENT_DUPLICATE_ELEMENT, ELEMENT_ITEM, EXTERNAL_EVENT_DELETE_ELEMENT, PROP_RESIZE_WIDTH, EXTERNAL_EVENT_REPLACE_CABINET, EXTERNAL_EVENT_SET_FINISHING, FINISHING_TYPE, EXTERNAL_EVENT_ROTATE_PAN } from "./constants";
-import { convert } from "./utils/convert-units-lite";
+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, EXTERNAL_EVENT_CHANGE_DOORSTYLE, EXTERNAL_EVENT_SET_INITIAL_DATA, EXTERNAL_EVENT_ADD_ROOM_SHAPE, EXTERNAL_EVENT_ZOOM_IN, EXTERNAL_EVENT_ZOOM_OUT } from "./constants";
 
 // --- renderer props ---
 var options = {
-  unit: "in",
+  unit: 'in',
   enable3D: true
 };
-var onInternalEvent = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(evt, callback) {
-    var _t;
-    return _regeneratorRuntime.wrap(function (_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          console.log("EVENT:", evt.type, evt.value);
-          _t = evt.type;
-          _context.next = _t === INTERNAL_EVENT_ITEMS_CATALOG ? 1 : 3;
-          break;
-        case 1:
-          _context.next = 2;
-          return callback(projectItemsCatalog);
-        case 2:
-          return _context.abrupt("continue", 3);
-        case 3:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee);
-  }));
-  return function onInternalEvent(_x, _x2) {
-    return _ref.apply(this, arguments);
-  };
-}();
-document.getElementById("app").style.display = "block";
+document.getElementById('app').style.display = 'block';
 function WorkSpace(props) {
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     externalEvent = _useState2[0],
     setExternalEvent = _useState2[1];
   var offset = 5;
+  useEffect(function () {
+    var evt = {
+      type: EXTERNAL_EVENT_SET_INITIAL_DATA,
+      payload: {
+        doorStyle: {
+          doorStyle: doorStylePaylod,
+          oStyle: oStylePaylod
+        }
+      }
+    };
+    setExternalEvent(evt);
+  }, []);
   return /*#__PURE__*/React.createElement("div", {
     className: "flex gap-4"
-  }, /*#__PURE__*/React.createElement("div", null, /*#__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(Button, {
-    actionType: "danger",
-    onClick: function onClick() {
-      var evt = {
-        type: EXTERNAL_EVENT_LOAD_PROJECT,
-        // send request for sync scene data to 3DTool
-        payload: JSON.parse(mockProps.projectElement[0].project_data)
-      };
-      setExternalEvent(evt);
-    }
-  }, "Load Project"), /*#__PURE__*/React.createElement(Button, {
+  }, /*#__PURE__*/React.createElement(Button, {
     actionType: "primary",
     onClick: function onClick() {
       var evt = {
@@ -169,7 +126,7 @@ function WorkSpace(props) {
     actionType: "primary",
     onClick: function onClick() {
       var evt = {
-        type: EXTERNAL_EVENT_ZOOM_OUT,
+        type: EXTERNAL_EVENT_ZOOM_IN,
         payload: {}
       };
       setExternalEvent(evt);
@@ -180,7 +137,7 @@ function WorkSpace(props) {
     actionType: "primary",
     onClick: function onClick() {
       var evt = {
-        type: EXTERNAL_EVENT_ZOOM_IN,
+        type: EXTERNAL_EVENT_ZOOM_OUT,
         payload: {}
       };
       setExternalEvent(evt);
@@ -215,22 +172,12 @@ function WorkSpace(props) {
       setExternalEvent(evt);
     }
   }, "Add B12 Cabinet"), /*#__PURE__*/React.createElement(Button, {
-    actionType: "danger",
-    onClick: function onClick() {
-      var evt = {
-        type: EXTERNAL_EVENT_ADD_ITEM,
-        payload: cabinetW0940Payload
-      };
-      setExternalEvent(evt);
-    }
-  }, "Add W0930 Cabinet"), /*#__PURE__*/React.createElement(Button, {
     actionType: "danger",
     onClick: function onClick() {
       var evt = {
         type: EXTERNAL_EVENT_CHANGE_DOORSTYLE,
         payload: {
-          doorStyle: doorStylePaylod2,
-          itemCDS: itemCDSPayload,
+          doorStyle: doorStylePaylod,
           isAll: true
         }
       };
@@ -241,528 +188,22 @@ function WorkSpace(props) {
     onClick: function onClick() {
       var evt = {
         type: EXTERNAL_EVENT_ADD_ROOM_SHAPE,
-        payload: {
-          roomShapeType: "rectangle",
-          width: 250,
-          height: 100,
-          doorStyle: {
-            id: 36,
-            type: "door",
-            name: "Brilliant White Shaker",
-            thumbnail: "https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/thumbnail/Brilliant%20White%20Shaker%20-%20RTA.jpg",
-            texture: "https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg",
-            color: "#ffffff",
-            glossness: 1,
-            door_style_id: 42,
-            brightness: 1,
-            sku: "SW",
-            color_family: ",10,",
-            color_sku_alias: "SW",
-            door_style_name: "Shaker",
-            install: "",
-            doorStyles: {
-              base: "https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg",
-              counttop: "https://media.test.diydesignspace.com/uploads/CountTop/202105074107_5/texture/Unique_Calcatta_texture.jpg",
-              interior: "http://127.0.0.1:4002/uploads/assets/default/maple.jpg",
-              base_door_1: "https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg",
-              base_fixed_drawer_door_1: "https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg",
-              base_drawer_1: "https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg",
-              base_drawer_door_1: "https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg",
-              door_handle_1: "http://127.0.0.1:4002/uploads/assets/default/steel.jpg",
-              fixed_drawer_door_handle_1: "http://127.0.0.1:4002/uploads/assets/default/steel.jpg",
-              drawer_door_handle_1: "http://127.0.0.1:4002/uploads/assets/default/steel.jpg",
-              base_door_2: "https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg",
-              base_fixed_drawer_door_2: "https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg",
-              base_drawer_2: "https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg",
-              base_drawer_door_2: "https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg",
-              door_handle_2: "http://127.0.0.1:4002/uploads/assets/default/steel.jpg",
-              fixed_drawer_door_handle_2: "http://127.0.0.1:4002/uploads/assets/default/steel.jpg",
-              drawer_door_handle_2: "http://127.0.0.1:4002/uploads/assets/default/steel.jpg",
-              base_door_3: "https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg",
-              base_fixed_drawer_door_3: "https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg",
-              base_drawer_3: "https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg",
-              base_drawer_door_3: "https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg",
-              door_handle_3: "http://127.0.0.1:4002/uploads/assets/default/steel.jpg",
-              fixed_drawer_door_handle_3: "http://127.0.0.1:4002/uploads/assets/default/steel.jpg",
-              drawer_door_handle_3: "http://127.0.0.1:4002/uploads/assets/default/steel.jpg",
-              base_door_4: "https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg",
-              base_fixed_drawer_door_4: "https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg",
-              base_drawer_4: "https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg",
-              base_drawer_door_4: "https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg",
-              door_handle_4: "http://127.0.0.1:4002/uploads/assets/default/steel.jpg",
-              fixed_drawer_door_handle_4: "http://127.0.0.1:4002/uploads/assets/default/steel.jpg",
-              drawer_door_handle_4: "http://127.0.0.1:4002/uploads/assets/default/steel.jpg",
-              base_door_5: "https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg",
-              base_fixed_drawer_door_5: "https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg",
-              base_drawer_5: "https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg",
-              base_drawer_door_5: "https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg",
-              door_handle_5: "http://127.0.0.1:4002/uploads/assets/default/steel.jpg",
-              fixed_drawer_door_handle_5: "http://127.0.0.1:4002/uploads/assets/default/steel.jpg",
-              drawer_door_handle_5: "http://127.0.0.1:4002/uploads/assets/default/steel.jpg",
-              base_door_6: "https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg",
-              base_fixed_drawer_door_6: "https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg",
-              base_drawer_6: "https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg",
-              base_drawer_door_6: "https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg",
-              door_handle_6: "http://127.0.0.1:4002/uploads/assets/default/steel.jpg",
-              fixed_drawer_door_handle_6: "http://127.0.0.1:4002/uploads/assets/default/steel.jpg",
-              drawer_door_handle_6: "http://127.0.0.1:4002/uploads/assets/default/steel.jpg",
-              base_door_7: "https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg",
-              base_fixed_drawer_door_7: "https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg",
-              base_drawer_7: "https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg",
-              base_drawer_door_7: "https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg",
-              door_handle_7: "http://127.0.0.1:4002/uploads/assets/default/steel.jpg",
-              fixed_drawer_door_handle_7: "http://127.0.0.1:4002/uploads/assets/default/steel.jpg",
-              drawer_door_handle_7: "http://127.0.0.1:4002/uploads/assets/default/steel.jpg",
-              base_door_8: "https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg",
-              base_fixed_drawer_door_8: "https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg",
-              base_drawer_8: "https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg",
-              base_drawer_door_8: "https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg",
-              door_handle_8: "http://127.0.0.1:4002/uploads/assets/default/steel.jpg",
-              fixed_drawer_door_handle_8: "http://127.0.0.1:4002/uploads/assets/default/steel.jpg",
-              drawer_door_handle_8: "http://127.0.0.1:4002/uploads/assets/default/steel.jpg",
-              base_door_9: "https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg",
-              base_fixed_drawer_door_9: "https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg",
-              base_drawer_9: "https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg",
-              base_drawer_door_9: "https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg",
-              door_handle_9: "http://127.0.0.1:4002/uploads/assets/default/steel.jpg",
-              fixed_drawer_door_handle_9: "http://127.0.0.1:4002/uploads/assets/default/steel.jpg",
-              drawer_door_handle_9: "http://127.0.0.1:4002/uploads/assets/default/steel.jpg"
-            },
-            installation_types: [125, 124]
-          }
-        }
-      };
-      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_UPDATE_ATTRIBUTE,
-        payload: {
-          attributeName: ATT_ITEM_POS,
-          value: {
-            directionAng: BACK_DIST_ANG,
-            oldDistance: 0,
-            newDistance: 10
-          }
-        },
-        callback: function callback(updatedAttributeForm) {
-          console.log(updatedAttributeForm);
-          // Do something here with new attributes
-        }
-      };
-      setExternalEvent(evt);
-    }
-  }, "OP-Cabinet Back Distance to 10"), /*#__PURE__*/React.createElement(Button, {
-    actionType: "danger",
-    onClick: function onClick() {
-      var evt = {
-        type: EXTERNAL_EVENT_UPDATE_ATTRIBUTE,
-        payload: {
-          attributeName: ATT_ITEM_ROTATION,
-          value: 45
-        },
-        callback: function callback(updatedAttributeForm) {
-          console.log(updatedAttributeForm);
-          // Do something here with new attributes
-        }
-      };
-      setExternalEvent(evt);
-    }
-  }, "OP-Cabinet Rotation to 45"), /*#__PURE__*/React.createElement(Button, {
-    actionType: "danger",
-    onClick: function onClick() {
-      var evt = {
-        type: EXTERNAL_EVENT_UPDATE_ATTRIBUTE,
-        payload: {
-          attributeName: ATT_LINE_LENGTH,
-          value: 100
-        }
-      };
-      setExternalEvent(evt);
-    }
-  }, "OP-Wall Length to 100"), /*#__PURE__*/React.createElement(Button, {
-    actionType: "danger",
-    onClick: function onClick() {
-      var evt = {
-        type: EXTERNAL_EVENT_UPDATE_PROPERTY,
-        payload: {
-          propertyName: PROP_FLIP_DOOR_HANDLE,
-          value: true
-        }
-      };
-      setExternalEvent(evt);
-    }
-  }, "Flip Door Handle"), /*#__PURE__*/React.createElement(Button, {
-    actionType: "danger",
-    onClick: function onClick() {
-      var evt = {
-        type: EXTERNAL_EVENT_UPDATE_PROPERTY,
-        payload: {
-          propertyName: PROP_OPEN_DOORS,
-          value: true
-        }
-      };
-      setExternalEvent(evt);
-    }
-  }, "Open Doors"), /*#__PURE__*/React.createElement(Button, {
-    actionType: "danger",
-    onClick: function onClick() {
-      var evt = {
-        type: EXTERNAL_EVENT_UPDATE_PROPERTY,
-        payload: {
-          propertyName: PROP_ALTITUDE,
-          // this property should be Map
-          value: new Map({
-            length: 25.399999187200024,
-            // cm
-            _length: 10,
-            // inch
-            _unit: "in"
-          })
-        }
-      };
-      setExternalEvent(evt);
-    }
-  }, "Distance from floor 10\""), /*#__PURE__*/React.createElement(Button, {
-    actionType: "danger",
-    onClick: function onClick() {
-      var evt = {
-        type: EXTERNAL_EVENT_DUPLICATE_ELEMENT,
-        payload: {
-          elementPrototype: ELEMENT_ITEM,
-          elementId: "" // id of current operating element
-        }
-      };
-      setExternalEvent(evt);
-    }
-  }, "Duplicate Item"), /*#__PURE__*/React.createElement(Button, {
-    actionType: "danger",
-    onClick: function onClick() {
-      var evt = {
-        type: EXTERNAL_EVENT_DELETE_ELEMENT,
-        payload: {
-          elementPrototype: ELEMENT_ITEM,
-          elementId: "" // id of current operating element
-        }
-      };
-      setExternalEvent(evt);
-    }
-  }, "Delete Item"), /*#__PURE__*/React.createElement(Button, {
-    actionType: "danger",
-    onClick: function onClick() {
-      var evt = {
-        type: EXTERNAL_EVENT_ADD_HOLE,
-        payload: {
-          holeName: HOLE_NAMES.WINDOW_CROSS
-        }
-      };
-      setExternalEvent(evt);
-    }
-  }, "Add Hole (Cross Window)"), /*#__PURE__*/React.createElement(Button, {
-    actionType: "danger",
-    onClick: function onClick() {
-      var evt = {
-        type: EXTERNAL_EVENT_ADD_HOLE,
-        payload: {
-          holeName: HOLE_NAMES.DOOR_EXTERIOR
-        }
-      };
-      setExternalEvent(evt);
-    }
-  }, "Add Hole (DOOR_EXTERIOR)"), /*#__PURE__*/React.createElement(Button, {
-    actionType: "danger",
-    onClick: function onClick() {
-      var evt = {
-        type: EXTERNAL_EVENT_ADD_ITEM,
-        payload: appliancePaylod
-      };
-      setExternalEvent(evt);
-    }
-  }, "Add Appliance (30 Bottom Freezer)"), /*#__PURE__*/React.createElement(Button, {
-    actionType: "danger",
-    onClick: function onClick() {
-      var evt = {
-        type: EXTERNAL_EVENT_ADD_ITEM,
-        payload: lightingPayload
-      };
-      setExternalEvent(evt);
-    }
-  }, "Add Lighting"), /*#__PURE__*/React.createElement(Button, {
-    actionType: "danger",
-    onClick: function onClick() {
-      var evt = {
-        type: EXTERNAL_EVENT_ADD_ITEM,
-        payload: furnishingPayload
-      };
-      setExternalEvent(evt);
-    }
-  }, "Add Furnishing"), /*#__PURE__*/React.createElement(Button, {
-    actionType: "danger",
-    onClick: function onClick() {
-      var evt = {
-        type: EXTERNAL_EVENT_SET_FINISHING,
-        payload: {
-          category: FINISHING_TYPE.COUNTER_TOP,
-          texture: "https://media.test.diydesignspace.com/uploads/CountTop/202111302746_7/texture/Arabescato_texture.jpg"
-        }
-      };
-      setExternalEvent(evt);
-    }
-  }, "Set Finishing (CounterTop)"), /*#__PURE__*/React.createElement(Button, {
-    actionType: "danger",
-    onClick: function onClick() {
-      var evt = {
-        type: EXTERNAL_EVENT_SET_FINISHING,
-        payload: {
-          category: FINISHING_TYPE.BACKSPLASH,
-          texture: "https://media.test.diydesignspace.com/uploads/CountTop/202305225249_14/texture/Unique_Marquina_texture.jpg"
-        }
-      };
-      setExternalEvent(evt);
-    }
-  }, "Set Finishing (Backsplash)"), /*#__PURE__*/React.createElement(Button, {
-    actionType: "danger",
-    onClick: function onClick() {
-      var evt = {
-        type: EXTERNAL_EVENT_SET_FINISHING,
-        payload: {
-          category: FINISHING_TYPE.FLOOR_STYLE,
-          texture: "https://media.test.diydesignspace.com/uploads/CountTop/202203163338_3/texture/oak-chestnut.webp"
-        }
-      };
-      setExternalEvent(evt);
-    }
-  }, "Set Finishing (Floor Style)"), /*#__PURE__*/React.createElement(Button, {
-    actionType: "danger",
-    onClick: function onClick() {
-      var evt = {
-        type: EXTERNAL_EVENT_SET_FINISHING,
-        payload: {
-          category: FINISHING_TYPE.WALL_COLOR,
-          color: "#bab863"
-        }
-      };
-      setExternalEvent(evt);
-    }
-  }, "Set Finishing (Wall Color)"), /*#__PURE__*/React.createElement(Button, {
-    actionType: "danger",
-    onClick: function onClick() {
-      var evt = {
-        type: EXTERNAL_EVENT_SET_FINISHING,
-        payload: {
-          category: FINISHING_TYPE.DOOR_HANDLE,
-          gltf: "https://media.test.diydesignspace.com/uploads/DoorHandle/202107294150_29/gltf/Handle1.gltf"
-        }
-      };
-      setExternalEvent(evt);
-    }
-  }, "Set Finishing (Door handle)"), /*#__PURE__*/React.createElement(Button, {
-    actionType: "danger",
-    onClick: function onClick() {
-      var evt = {
-        type: EXTERNAL_EVENT_CENTERING_2D,
-        payload: {}
-      };
-      setExternalEvent(evt);
-    }
-  }, "Centering Viewer2D"), /*#__PURE__*/React.createElement(Button, {
-    actionType: "danger",
-    onClick: function onClick() {
-      var evt = {
-        type: EXTERNAL_EVENT_UPDATE_PROPERTY,
-        payload: {
-          propertyName: PROP_RESIZE_WIDTH,
-          // this property should be Map
-          value: new Map({
-            length: 68.57999780544007,
-            // cm
-            _length: 27,
-            // inch
-            _unit: "in"
-          })
-        }
-      };
-      setExternalEvent(evt);
-    }
-  }, "Change width to 27\""), /*#__PURE__*/React.createElement(Button, {
-    actionType: "danger",
-    onClick: function onClick() {
-      var evt = {
-        type: EXTERNAL_EVENT_REPLACE_CABINET,
-        payload: replaceCabinetPayload // B12 Data
-      };
-      setExternalEvent(evt);
-    }
-  }, "Replace cabinet to B12"), /*#__PURE__*/React.createElement(Button, {
-    actionType: "danger",
-    onClick: function onClick() {
-      var evt = {
-        type: EXTERNAL_EVENT_ADD_ROOM_SHAPE,
-        payload: roomShapePayload
-      };
-      setExternalEvent(evt);
-    }
-  }, "Add room shape from width, height"), /*#__PURE__*/React.createElement(Button, {
-    actionType: "danger",
-    onClick: function onClick() {
-      var _tl = Math.floor(Math.random() * 50);
-      var tl = convert(_tl).from("in").to("cm");
-      var evt = {
-        type: EXTERNAL_EVENT_UPDATE_PROPERTY,
-        payload: {
-          propertyName: PROP_RESIZE_WIDTH,
-          value: new Map({
-            _length: _tl,
-            // inch
-            _unit: "in",
-            length: tl // cm
-          })
-        }
-      };
-      setExternalEvent(evt);
-    }
-  }, "random width"), /*#__PURE__*/React.createElement(Button, {
-    actionType: "primary",
-    onClick: function onClick() {
-      var evt = {
-        type: EXTERNAL_EVENT_ROTATE_PAN,
-        payload: {
-          rotateType: RIGHT
-        }
-      };
-      setExternalEvent(evt);
-    }
-  }, /*#__PURE__*/React.createElement("img", {
-    src: "/assets/img/svg/bottombar/spin-right.svg"
-  })), /*#__PURE__*/React.createElement(Button, {
-    actionType: "primary",
-    onClick: function onClick() {
-      var evt = {
-        type: EXTERNAL_EVENT_ROTATE_PAN,
-        payload: {
-          rotateType: LEFT
-        }
-      };
-      setExternalEvent(evt);
-    }
-  }, /*#__PURE__*/React.createElement("img", {
-    src: "/assets/img/svg/bottombar/spin-left.svg"
-  })), /*#__PURE__*/React.createElement(Button, {
-    actionType: "primary",
-    onClick: function onClick() {
-      var evt = {
-        type: EXTERNAL_EVENT_ROTATE_PAN,
-        payload: {
-          rotateType: TOP
-        }
-      };
-      setExternalEvent(evt);
-    }
-  }, /*#__PURE__*/React.createElement("img", {
-    src: "/assets/img/svg/bottombar/spin-up.svg"
-  })), /*#__PURE__*/React.createElement(Button, {
-    actionType: "primary",
-    onClick: function onClick() {
-      var evt = {
-        type: EXTERNAL_EVENT_ROTATE_PAN,
-        payload: {
-          rotateType: BOTTOM
-        }
-      };
-      setExternalEvent(evt);
-    }
-  }, /*#__PURE__*/React.createElement("img", {
-    src: "/assets/img/svg/bottombar/spin-down.svg"
-  })), /*#__PURE__*/React.createElement(Button, {
-    actionType: "danger",
-    onClick: function onClick() {
-      var evt = {
-        type: EXTERNAL_EVENT_PROJECT_SETTING,
-        payload: {
-          option: PROJECT_SETTING_OPTION.CHANGE_MEASUREMENT_UNIT,
-          value: "cm"
-        }
+        payload: rectangleData
       };
       setExternalEvent(evt);
     }
-  }, "Setting-MeasurementUnit-'cm'")), /*#__PURE__*/React.createElement(LiteRenderer, {
+  }, "Add Room shape(rectangle)"), /*#__PURE__*/React.createElement(LiteRenderer, {
     width: props.width,
     height: props.height,
+    projectElement: mockProps.projectElement,
+    categoryData: mockCategoryData,
+    dataBundle: mockDataBundle,
     configData: mockProps.configData,
     options: options,
     logoImg: "/assets/logo.png",
     companyUrl: "https://example.com",
     toolbarButtons: [],
     externalEvent: externalEvent,
-    onInternalEvent: onInternalEvent,
     onError: function onError(payload) {
       // payload = {
       //   type: 'render-error' | 'runtime-error' | 'unhandled-rejection',
@@ -771,15 +212,15 @@ function WorkSpace(props) {
       //   externalEvent: { id?, type, payload } | null,
       //   meta?: { filename?, lineno?, colno? }
       // }
-      console.error("TOOL ERROR:", payload);
+      console.error('TOOL ERROR:', payload);
     }
   }));
 }
-ReactDOM.render(/*#__PURE__*/React.createElement(ContainerDimensions, null, function (_ref2) {
-  var width = _ref2.width,
-    height = _ref2.height;
+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") && document.getElementById("app"));
+}), document.getElementById('app'));