kitchen-simulator 11.0.0-react.18 → 11.0.0

package/es/{WorkSpaceOriginal.js → devLiteRenderer.js}

@@ -1,25 +1,27 @@
 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 } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Map } from 'immutable';
-import { useResizeDetector } from 'react-resize-detector';
-import projectItemsCatalog from "./mocks/projectItemsCatalog.json";
-import mockProps from "./mocks/mockProps.json";
-import cabinetPaylod from "./mocks/cabinetPayload2.json";
-import cabinetW0940Payload from "./mocks/cabinetPayload.json";
+import ContainerDimensions from 'react-container-dimensions';
+import ccdfPayload from "./mocks/getCCDFPayload.json";
+import configData from "./mocks/configData.json";
+import projectJson from "./mocks/project.json";
+import cabinetPaylod from "./mocks/cabinetPayload.json";
 import appliancePaylod from "./mocks/appliancePayload.json";
-import doorStylePaylod2 from "./mocks/doorStylePayload2.json";
+import doorStylePayload_brilliant from "./mocks/doorStylePayload_brilliant.json";
+import doorStylePayload_cambridge from "./mocks/doorStylePayload_cambridge.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 moldingPayload from "./mocks/moldingPayload.json";
 import replaceCabinetPayload from "./mocks/replaceCabinetPayload.json";
+import holesPayload from "./mocks/holesPayload.json";
+import ReactDOM from 'react-dom';
 import LiteRenderer from "./LiteRenderer";
-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 { 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, 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, DOORSTYLE_SCOPE_ALL, ATT_HOLE_OFFSET_A, ATT_HOLE_OFFSET_B, DEFAULT_INTERIOR_URL, DEFAULT_DOOR_HANDLE_TEXTURE_URL } from "./constants";
 import { convert } from "./utils/convert-units-lite";
-import { createRoot } from 'react-dom/client';
 
 // --- renderer props ---
 var options = {
@@ -38,7 +40,7 @@ var onInternalEvent = /*#__PURE__*/function () {
           break;
         case 1:
           _context.next = 2;
-          return callback(projectItemsCatalog);
+          return callback(ccdfPayload);
         case 2:
           return _context.abrupt("continue", 3);
         case 3:
@@ -52,19 +54,19 @@ var onInternalEvent = /*#__PURE__*/function () {
   };
 }();
 document.getElementById('app').style.display = 'block';
-function WorkSpaceOriginal(props) {
-  var _useResizeDetector = useResizeDetector(),
-    width = _useResizeDetector.width,
-    height = _useResizeDetector.height,
-    ref = _useResizeDetector.ref;
+function WorkSpace(props) {
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     externalEvent = _useState2[0],
     setExternalEvent = _useState2[1];
   var offset = 5;
+  var holeButtons = Array.isArray(holesPayload) ? [holesPayload.find(function (hole) {
+    return hole && !hole.is_deleted;
+  })] : [];
   return /*#__PURE__*/React.createElement("div", {
     className: "flex gap-4"
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
     onClick: function onClick() {
       var evt = {
         type: EXTERNAL_EVENT_SYNC_SCENE,
@@ -73,16 +75,18 @@ function WorkSpaceOriginal(props) {
       };
       setExternalEvent(evt);
     }
-  }, "Event-sync"), /*#__PURE__*/React.createElement("button", {
+  }, "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)
+        payload: projectJson
       };
       setExternalEvent(evt);
     }
-  }, "Load Project"), /*#__PURE__*/React.createElement("button", {
+  }, "Load Project"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "primary",
     onClick: function onClick() {
       var evt = {
         type: EXTERNAL_EVENT_TOGGLE_TO_2D,
@@ -90,7 +94,8 @@ function WorkSpaceOriginal(props) {
       };
       setExternalEvent(evt);
     }
-  }, "2D"), /*#__PURE__*/React.createElement("button", {
+  }, "2D"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "primary",
     onClick: function onClick() {
       var evt = {
         type: EXTERNAL_EVENT_TOGGLE_TO_3D,
@@ -98,7 +103,8 @@ function WorkSpaceOriginal(props) {
       };
       setExternalEvent(evt);
     }
-  }, "3D"), /*#__PURE__*/React.createElement("button", {
+  }, "3D"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "primary",
     onClick: function onClick() {
       var evt = {
         type: EXTERNAL_EVENT_TOGGLE_TO_ELEVATION,
@@ -106,7 +112,8 @@ function WorkSpaceOriginal(props) {
       };
       setExternalEvent(evt);
     }
-  }, "Elevation"), /*#__PURE__*/React.createElement("button", {
+  }, "Elevation"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "primary",
     onClick: function onClick() {
       var evt = {
         type: EXTERNAL_EVENT_MOVE_PAN,
@@ -119,7 +126,8 @@ function WorkSpaceOriginal(props) {
     }
   }, /*#__PURE__*/React.createElement("img", {
     src: "/assets/img/svg/bottombar/arrow-left.svg"
-  })), /*#__PURE__*/React.createElement("button", {
+  })), /*#__PURE__*/React.createElement(Button, {
+    actionType: "primary",
     onClick: function onClick() {
       var evt = {
         type: EXTERNAL_EVENT_MOVE_PAN,
@@ -132,7 +140,8 @@ function WorkSpaceOriginal(props) {
     }
   }, /*#__PURE__*/React.createElement("img", {
     src: "/assets/img/svg/bottombar/arrow-up.svg"
-  })), /*#__PURE__*/React.createElement("button", {
+  })), /*#__PURE__*/React.createElement(Button, {
+    actionType: "primary",
     onClick: function onClick() {
       var evt = {
         type: EXTERNAL_EVENT_MOVE_PAN,
@@ -145,7 +154,8 @@ function WorkSpaceOriginal(props) {
     }
   }, /*#__PURE__*/React.createElement("img", {
     src: "/assets/img/svg/bottombar/arrow-down.svg"
-  })), /*#__PURE__*/React.createElement("button", {
+  })), /*#__PURE__*/React.createElement(Button, {
+    actionType: "primary",
     onClick: function onClick() {
       var evt = {
         type: EXTERNAL_EVENT_MOVE_PAN,
@@ -158,7 +168,8 @@ function WorkSpaceOriginal(props) {
     }
   }, /*#__PURE__*/React.createElement("img", {
     src: "/assets/img/svg/bottombar/arrow-right.svg"
-  })), /*#__PURE__*/React.createElement("button", {
+  })), /*#__PURE__*/React.createElement(Button, {
+    actionType: "primary",
     onClick: function onClick() {
       var evt = {
         type: EXTERNAL_EVENT_ZOOM_OUT,
@@ -168,7 +179,8 @@ function WorkSpaceOriginal(props) {
     }
   }, /*#__PURE__*/React.createElement("img", {
     src: "/assets/img/svg/bottombar/arrow-minus.svg"
-  })), /*#__PURE__*/React.createElement("button", {
+  })), /*#__PURE__*/React.createElement(Button, {
+    actionType: "primary",
     onClick: function onClick() {
       var evt = {
         type: EXTERNAL_EVENT_ZOOM_IN,
@@ -178,7 +190,8 @@ function WorkSpaceOriginal(props) {
     }
   }, /*#__PURE__*/React.createElement("img", {
     src: "/assets/img/svg/bottombar/arrow-plus.svg"
-  })), /*#__PURE__*/React.createElement("button", {
+  })), /*#__PURE__*/React.createElement(Button, {
+    actionType: "primary",
     onClick: function onClick() {
       var evt = {
         type: EXTERNAL_EVENT_NEW_PROJECT,
@@ -186,7 +199,8 @@ function WorkSpaceOriginal(props) {
       };
       setExternalEvent(evt);
     }
-  }, "New Project"), /*#__PURE__*/React.createElement("button", {
+  }, "New Project"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "secondary",
     onClick: function onClick() {
       var evt = {
         type: EXTERNAL_EVENT_ADD_WALL,
@@ -194,7 +208,8 @@ function WorkSpaceOriginal(props) {
       };
       setExternalEvent(evt);
     }
-  }, "Add Walls"), /*#__PURE__*/React.createElement("button", {
+  }, "Add Walls"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
     onClick: function onClick() {
       var evt = {
         type: EXTERNAL_EVENT_ADD_ITEM,
@@ -202,27 +217,32 @@ function WorkSpaceOriginal(props) {
       };
       setExternalEvent(evt);
     }
-  }, "Add B12 Cabinet"), /*#__PURE__*/React.createElement("button", {
+  }, "Add B12 Cabinet"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
     onClick: function onClick() {
       var evt = {
-        type: EXTERNAL_EVENT_ADD_ITEM,
-        payload: cabinetW0940Payload
+        type: EXTERNAL_EVENT_CHANGE_DOORSTYLE,
+        payload: {
+          doorStyle: doorStylePayload_brilliant === null || doorStylePayload_brilliant === void 0 ? void 0 : doorStylePayload_brilliant.doorStyle,
+          applyScope: doorStylePayload_brilliant === null || doorStylePayload_brilliant === void 0 ? void 0 : doorStylePayload_brilliant.applyScope
+        }
       };
       setExternalEvent(evt);
     }
-  }, "Add W0930 Cabinet"), /*#__PURE__*/React.createElement("button", {
+  }, "DoorStyle Change(Brilliant)"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
     onClick: function onClick() {
       var evt = {
         type: EXTERNAL_EVENT_CHANGE_DOORSTYLE,
         payload: {
-          doorStyle: doorStylePaylod2,
-          itemCDS: itemCDSPayload,
-          isAll: true
+          doorStyle: doorStylePayload_cambridge === null || doorStylePayload_cambridge === void 0 ? void 0 : doorStylePayload_cambridge.doorStyle,
+          applyScope: doorStylePayload_cambridge === null || doorStylePayload_cambridge === void 0 ? void 0 : doorStylePayload_cambridge.applyScope
         }
       };
       setExternalEvent(evt);
     }
-  }, "DoorStyle (Change into Midtown White Shaker)"), /*#__PURE__*/React.createElement("button", {
+  }, "DoorStyle Change(Cambriage)"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
     onClick: function onClick() {
       var evt = {
         type: EXTERNAL_EVENT_ADD_ROOM_SHAPE,
@@ -230,7 +250,6 @@ function WorkSpaceOriginal(props) {
           roomShapeType: 'rectangle',
           width: 250,
           height: 100,
-          measurementUnit: 'in',
           doorStyle: {
             id: 36,
             type: 'door',
@@ -249,70 +268,70 @@ function WorkSpaceOriginal(props) {
             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',
+              interior: DEFAULT_INTERIOR_URL,
               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',
+              door_handle_1: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              fixed_drawer_door_handle_1: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              drawer_door_handle_1: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
               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',
+              door_handle_2: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              fixed_drawer_door_handle_2: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              drawer_door_handle_2: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
               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',
+              door_handle_3: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              fixed_drawer_door_handle_3: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              drawer_door_handle_3: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
               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',
+              door_handle_4: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              fixed_drawer_door_handle_4: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              drawer_door_handle_4: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
               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',
+              door_handle_5: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              fixed_drawer_door_handle_5: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              drawer_door_handle_5: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
               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',
+              door_handle_6: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              fixed_drawer_door_handle_6: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              drawer_door_handle_6: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
               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',
+              door_handle_7: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              fixed_drawer_door_handle_7: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              drawer_door_handle_7: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
               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',
+              door_handle_8: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              fixed_drawer_door_handle_8: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              drawer_door_handle_8: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
               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'
+              door_handle_9: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              fixed_drawer_door_handle_9: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              drawer_door_handle_9: DEFAULT_DOOR_HANDLE_TEXTURE_URL
             },
             installation_types: [125, 124]
           }
@@ -320,7 +339,8 @@ function WorkSpaceOriginal(props) {
       };
       setExternalEvent(evt);
     }
-  }, "Add Room shape(rectangle)"), /*#__PURE__*/React.createElement("button", {
+  }, "Add Room shape(rectangle)"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
     onClick: function onClick() {
       var evt = {
         type: EXTERNAL_EVENT_ADD_ROOM_SHAPE,
@@ -346,70 +366,70 @@ function WorkSpaceOriginal(props) {
             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',
+              interior: DEFAULT_INTERIOR_URL,
               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',
+              door_handle_1: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              fixed_drawer_door_handle_1: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              drawer_door_handle_1: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
               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',
+              door_handle_2: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              fixed_drawer_door_handle_2: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              drawer_door_handle_2: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
               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',
+              door_handle_3: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              fixed_drawer_door_handle_3: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              drawer_door_handle_3: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
               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',
+              door_handle_4: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              fixed_drawer_door_handle_4: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              drawer_door_handle_4: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
               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',
+              door_handle_5: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              fixed_drawer_door_handle_5: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              drawer_door_handle_5: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
               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',
+              door_handle_6: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              fixed_drawer_door_handle_6: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              drawer_door_handle_6: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
               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',
+              door_handle_7: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              fixed_drawer_door_handle_7: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              drawer_door_handle_7: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
               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',
+              door_handle_8: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              fixed_drawer_door_handle_8: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              drawer_door_handle_8: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
               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'
+              door_handle_9: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              fixed_drawer_door_handle_9: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              drawer_door_handle_9: DEFAULT_DOOR_HANDLE_TEXTURE_URL
             },
             installation_types: [125, 124]
           }
@@ -417,7 +437,8 @@ function WorkSpaceOriginal(props) {
       };
       setExternalEvent(evt);
     }
-  }, "Add Room shape(custom)"), /*#__PURE__*/React.createElement("button", {
+  }, "Add Room shape(custom)"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
     onClick: function onClick() {
       var evt = {
         type: EXTERNAL_EVENT_UNDO,
@@ -425,7 +446,8 @@ function WorkSpaceOriginal(props) {
       };
       setExternalEvent(evt);
     }
-  }, "Undo"), /*#__PURE__*/React.createElement("button", {
+  }, "Undo"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
     onClick: function onClick() {
       var evt = {
         type: EXTERNAL_EVENT_REDO,
@@ -433,7 +455,8 @@ function WorkSpaceOriginal(props) {
       };
       setExternalEvent(evt);
     }
-  }, "Redo"), /*#__PURE__*/React.createElement("button", {
+  }, "Redo"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
     onClick: function onClick() {
       var evt = {
         type: EXTERNAL_EVENT_SET_MOLDING,
@@ -444,7 +467,8 @@ function WorkSpaceOriginal(props) {
       };
       setExternalEvent(evt);
     }
-  }, "Global Molding (FBM)"), /*#__PURE__*/React.createElement("button", {
+  }, "Global Molding (FBM)"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
     onClick: function onClick() {
       var evt = {
         type: EXTERNAL_EVENT_SET_MOLDING,
@@ -455,7 +479,8 @@ function WorkSpaceOriginal(props) {
       };
       setExternalEvent(evt);
     }
-  }, "Individual Molding (FBM)"), /*#__PURE__*/React.createElement("button", {
+  }, "Individual Molding (FBM)"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
     onClick: function onClick() {
       var evt = {
         type: EXTERNAL_EVENT_PROJECT_SETTING,
@@ -466,7 +491,8 @@ function WorkSpaceOriginal(props) {
       };
       setExternalEvent(evt);
     }
-  }, "Setting-CeilingHeight"), /*#__PURE__*/React.createElement("button", {
+  }, "Setting-CeilingHeight"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
     onClick: function onClick() {
       var evt = {
         type: EXTERNAL_EVENT_PROJECT_SETTING,
@@ -477,7 +503,8 @@ function WorkSpaceOriginal(props) {
       };
       setExternalEvent(evt);
     }
-  }, "Setting-WallLength"), /*#__PURE__*/React.createElement("button", {
+  }, "Setting-WallLength"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
     onClick: function onClick() {
       var evt = {
         type: EXTERNAL_EVENT_UPDATE_ATTRIBUTE,
@@ -496,7 +523,8 @@ function WorkSpaceOriginal(props) {
       };
       setExternalEvent(evt);
     }
-  }, "OP-Cabinet Back Distance to 10"), /*#__PURE__*/React.createElement("button", {
+  }, "OP-Cabinet Back Distance to 10"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
     onClick: function onClick() {
       var evt = {
         type: EXTERNAL_EVENT_UPDATE_ATTRIBUTE,
@@ -511,7 +539,8 @@ function WorkSpaceOriginal(props) {
       };
       setExternalEvent(evt);
     }
-  }, "OP-Cabinet Rotation to 45"), /*#__PURE__*/React.createElement("button", {
+  }, "OP-Cabinet Rotation to 45"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
     onClick: function onClick() {
       var evt = {
         type: EXTERNAL_EVENT_UPDATE_ATTRIBUTE,
@@ -522,7 +551,40 @@ function WorkSpaceOriginal(props) {
       };
       setExternalEvent(evt);
     }
-  }, "OP-Wall Length to 100"), /*#__PURE__*/React.createElement("button", {
+  }, "OP-Wall Length to 100"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_UPDATE_ATTRIBUTE,
+        payload: {
+          attributeName: ATT_HOLE_OFFSET_A,
+          value: 20
+        },
+        callback: function callback(updatedAttributeForm) {
+          console.log(updatedAttributeForm);
+          // Do something here with new attributes
+        }
+      };
+      setExternalEvent(evt);
+    }
+  }, "OP-Window Left Distance To 20"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_UPDATE_ATTRIBUTE,
+        payload: {
+          attributeName: ATT_HOLE_OFFSET_B,
+          value: 20
+        },
+        callback: function callback(updatedAttributeForm) {
+          console.log(updatedAttributeForm);
+          // Do something here with new attributes
+        }
+      };
+      setExternalEvent(evt);
+    }
+  }, "OP-Window Right Distance To 20"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
     onClick: function onClick() {
       var evt = {
         type: EXTERNAL_EVENT_UPDATE_PROPERTY,
@@ -533,7 +595,8 @@ function WorkSpaceOriginal(props) {
       };
       setExternalEvent(evt);
     }
-  }, "Flip Door Handle"), /*#__PURE__*/React.createElement("button", {
+  }, "Flip Door Handle"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
     onClick: function onClick() {
       var evt = {
         type: EXTERNAL_EVENT_UPDATE_PROPERTY,
@@ -544,7 +607,8 @@ function WorkSpaceOriginal(props) {
       };
       setExternalEvent(evt);
     }
-  }, "Open Doors"), /*#__PURE__*/React.createElement("button", {
+  }, "Open Doors"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
     onClick: function onClick() {
       var evt = {
         type: EXTERNAL_EVENT_UPDATE_PROPERTY,
@@ -562,7 +626,8 @@ function WorkSpaceOriginal(props) {
       };
       setExternalEvent(evt);
     }
-  }, "Distance from floor 10\""), /*#__PURE__*/React.createElement("button", {
+  }, "Distance from floor 10\""), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
     onClick: function onClick() {
       var evt = {
         type: EXTERNAL_EVENT_DUPLICATE_ELEMENT,
@@ -573,7 +638,8 @@ function WorkSpaceOriginal(props) {
       };
       setExternalEvent(evt);
     }
-  }, "Duplicate Item"), /*#__PURE__*/React.createElement("button", {
+  }, "Duplicate Item"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
     onClick: function onClick() {
       var evt = {
         type: EXTERNAL_EVENT_DELETE_ELEMENT,
@@ -584,27 +650,22 @@ function WorkSpaceOriginal(props) {
       };
       setExternalEvent(evt);
     }
-  }, "Delete Item"), /*#__PURE__*/React.createElement("button", {
-    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", {
-    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", {
+  }, "Delete Item"), holeButtons.map(function (hole) {
+    return /*#__PURE__*/React.createElement(Button, {
+      key: "".concat(hole.type, "-").concat(hole.name),
+      actionType: "danger",
+      onClick: function onClick() {
+        var evt = {
+          type: EXTERNAL_EVENT_ADD_HOLE,
+          payload: {
+            holeName: hole.name
+          }
+        };
+        setExternalEvent(evt);
+      }
+    }, "Add Hole (".concat(hole.type, " - ").concat(hole.name, ")"));
+  }), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
     onClick: function onClick() {
       var evt = {
         type: EXTERNAL_EVENT_ADD_ITEM,
@@ -612,7 +673,8 @@ function WorkSpaceOriginal(props) {
       };
       setExternalEvent(evt);
     }
-  }, "Add Appliance (30 Bottom Freezer)"), /*#__PURE__*/React.createElement("button", {
+  }, "Add Appliance (30 Bottom Freezer)"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
     onClick: function onClick() {
       var evt = {
         type: EXTERNAL_EVENT_ADD_ITEM,
@@ -620,7 +682,8 @@ function WorkSpaceOriginal(props) {
       };
       setExternalEvent(evt);
     }
-  }, "Add Lighting"), /*#__PURE__*/React.createElement("button", {
+  }, "Add Lighting"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
     onClick: function onClick() {
       var evt = {
         type: EXTERNAL_EVENT_ADD_ITEM,
@@ -628,7 +691,8 @@ function WorkSpaceOriginal(props) {
       };
       setExternalEvent(evt);
     }
-  }, "Add Furnishing"), /*#__PURE__*/React.createElement("button", {
+  }, "Add Furnishing"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
     onClick: function onClick() {
       var evt = {
         type: EXTERNAL_EVENT_SET_FINISHING,
@@ -639,7 +703,8 @@ function WorkSpaceOriginal(props) {
       };
       setExternalEvent(evt);
     }
-  }, "Set Finishing (CounterTop)"), /*#__PURE__*/React.createElement("button", {
+  }, "Set Finishing (CounterTop)"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
     onClick: function onClick() {
       var evt = {
         type: EXTERNAL_EVENT_SET_FINISHING,
@@ -650,7 +715,8 @@ function WorkSpaceOriginal(props) {
       };
       setExternalEvent(evt);
     }
-  }, "Set Finishing (Backsplash)"), /*#__PURE__*/React.createElement("button", {
+  }, "Set Finishing (Backsplash)"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
     onClick: function onClick() {
       var evt = {
         type: EXTERNAL_EVENT_SET_FINISHING,
@@ -661,7 +727,8 @@ function WorkSpaceOriginal(props) {
       };
       setExternalEvent(evt);
     }
-  }, "Set Finishing (Floor Style)"), /*#__PURE__*/React.createElement("button", {
+  }, "Set Finishing (Floor Style)"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
     onClick: function onClick() {
       var evt = {
         type: EXTERNAL_EVENT_SET_FINISHING,
@@ -672,7 +739,8 @@ function WorkSpaceOriginal(props) {
       };
       setExternalEvent(evt);
     }
-  }, "Set Finishing (Wall Color)"), /*#__PURE__*/React.createElement("button", {
+  }, "Set Finishing (Wall Color)"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
     onClick: function onClick() {
       var evt = {
         type: EXTERNAL_EVENT_SET_FINISHING,
@@ -683,7 +751,8 @@ function WorkSpaceOriginal(props) {
       };
       setExternalEvent(evt);
     }
-  }, "Set Finishing (Door handle)"), /*#__PURE__*/React.createElement("button", {
+  }, "Set Finishing (Door handle)"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
     onClick: function onClick() {
       var evt = {
         type: EXTERNAL_EVENT_CENTERING_2D,
@@ -691,7 +760,8 @@ function WorkSpaceOriginal(props) {
       };
       setExternalEvent(evt);
     }
-  }, "Centering Viewer2D"), /*#__PURE__*/React.createElement("button", {
+  }, "Centering Viewer2D"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
     onClick: function onClick() {
       var evt = {
         type: EXTERNAL_EVENT_UPDATE_PROPERTY,
@@ -709,7 +779,8 @@ function WorkSpaceOriginal(props) {
       };
       setExternalEvent(evt);
     }
-  }, "Change width to 27\""), /*#__PURE__*/React.createElement("button", {
+  }, "Change width to 27\""), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
     onClick: function onClick() {
       var evt = {
         type: EXTERNAL_EVENT_REPLACE_CABINET,
@@ -717,7 +788,8 @@ function WorkSpaceOriginal(props) {
       };
       setExternalEvent(evt);
     }
-  }, "Replace cabinet to B12"), /*#__PURE__*/React.createElement("button", {
+  }, "Replace cabinet to B12"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
     onClick: function onClick() {
       var evt = {
         type: EXTERNAL_EVENT_ADD_ROOM_SHAPE,
@@ -725,7 +797,8 @@ function WorkSpaceOriginal(props) {
       };
       setExternalEvent(evt);
     }
-  }, "Add room shape from width, height"), /*#__PURE__*/React.createElement("button", {
+  }, "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');
@@ -743,7 +816,8 @@ function WorkSpaceOriginal(props) {
       };
       setExternalEvent(evt);
     }
-  }, "random width"), /*#__PURE__*/React.createElement("button", {
+  }, "random width"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "primary",
     onClick: function onClick() {
       var evt = {
         type: EXTERNAL_EVENT_ROTATE_PAN,
@@ -755,7 +829,8 @@ function WorkSpaceOriginal(props) {
     }
   }, /*#__PURE__*/React.createElement("img", {
     src: "/assets/img/svg/bottombar/spin-right.svg"
-  })), /*#__PURE__*/React.createElement("button", {
+  })), /*#__PURE__*/React.createElement(Button, {
+    actionType: "primary",
     onClick: function onClick() {
       var evt = {
         type: EXTERNAL_EVENT_ROTATE_PAN,
@@ -767,7 +842,8 @@ function WorkSpaceOriginal(props) {
     }
   }, /*#__PURE__*/React.createElement("img", {
     src: "/assets/img/svg/bottombar/spin-left.svg"
-  })), /*#__PURE__*/React.createElement("button", {
+  })), /*#__PURE__*/React.createElement(Button, {
+    actionType: "primary",
     onClick: function onClick() {
       var evt = {
         type: EXTERNAL_EVENT_ROTATE_PAN,
@@ -779,7 +855,8 @@ function WorkSpaceOriginal(props) {
     }
   }, /*#__PURE__*/React.createElement("img", {
     src: "/assets/img/svg/bottombar/spin-up.svg"
-  })), /*#__PURE__*/React.createElement("button", {
+  })), /*#__PURE__*/React.createElement(Button, {
+    actionType: "primary",
     onClick: function onClick() {
       var evt = {
         type: EXTERNAL_EVENT_ROTATE_PAN,
@@ -791,7 +868,8 @@ function WorkSpaceOriginal(props) {
     }
   }, /*#__PURE__*/React.createElement("img", {
     src: "/assets/img/svg/bottombar/spin-down.svg"
-  })), /*#__PURE__*/React.createElement("button", {
+  })), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
     onClick: function onClick() {
       var evt = {
         type: EXTERNAL_EVENT_PROJECT_SETTING,
@@ -802,32 +880,15 @@ function WorkSpaceOriginal(props) {
       };
       setExternalEvent(evt);
     }
-  }, "Setting-MeasurementUnit-'mm'")), /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: 'flex',
-      width: '100vw',
-      height: '100vh'
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      flex: 1,
-      minWidth: 0,
-      minHeight: 0
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: ref,
-    style: {
-      width: '100%',
-      height: '100%'
-    }
-  }, /*#__PURE__*/React.createElement(LiteRenderer, {
-    width: width !== null && width !== void 0 ? width : 0,
-    height: height !== null && height !== void 0 ? height : 0,
-    configData: mockProps.configData,
+  }, "Setting-MeasurementUnit-'mm'")), /*#__PURE__*/React.createElement(LiteRenderer, {
+    width: props.width,
+    height: props.height,
+    configData: configData,
     options: options,
     logoImg: "/assets/logo.png",
     companyUrl: "https://example.com",
     toolbarButtons: [],
+    holes: holesPayload,
     externalEvent: externalEvent,
     onInternalEvent: onInternalEvent,
     onError: function onError(payload) {
@@ -840,6 +901,13 @@ function WorkSpaceOriginal(props) {
       // }
       console.error('TOOL ERROR:', payload);
     }
-  })))));
+  }));
 }
-export default WorkSpaceOriginal;
+ReactDOM.render(/*#__PURE__*/React.createElement(ContainerDimensions, null, function (_ref2) {
+  var width = _ref2.width,
+    height = _ref2.height;
+  return /*#__PURE__*/React.createElement(WorkSpace, {
+    width: width,
+    height: height
+  });
+}), document.getElementById('app') && document.getElementById('app'));