kitchen-simulator 3.1.2 → 4.0.0-react-18

package/es/devLiteRenderer.js

@@ -1,9 +1,12 @@
 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 React, { useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import useMeasure from 'react-use-measure';
 import { Map } from 'immutable';
-import ContainerDimensions from 'react-container-dimensions';
+import { Button } from 'antd';
+import LiteRenderer from "./LiteRenderer";
 import projectItemsCatalog from "./mocks/projectItemsCatalog.json";
 import mockProps from "./mocks/mockProps.json";
 import cabinetPaylod from "./mocks/cabinetPayload2.json";
@@ -13,12 +16,8 @@ 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 rectangleData from "./mocks/rectangleShape.json";
 import moldingPayload from "./mocks/moldingPayload.json";
 import replaceCabinetPayload from "./mocks/replaceCabinetPayload.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, 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 } from "./constants";
 import { convert } from "./utils/convert-units-lite";
 
@@ -27,12 +26,15 @@ var options = {
   unit: 'in',
   enable3D: true
 };
+
+// internal event handler
 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:
+          // eslint-disable-next-line no-console
           console.log('EVENT:', evt.type, evt.value);
           _t = evt.type;
           _context.next = _t === INTERNAL_EVENT_ITEMS_CATALOG ? 1 : 3;
@@ -41,8 +43,10 @@ var onInternalEvent = /*#__PURE__*/function () {
           _context.next = 2;
           return callback(projectItemsCatalog);
         case 2:
-          return _context.abrupt("continue", 3);
+          return _context.abrupt("continue", 4);
         case 3:
+          return _context.abrupt("continue", 4);
+        case 4:
         case "end":
           return _context.stop();
       }
@@ -52,8 +56,9 @@ var onInternalEvent = /*#__PURE__*/function () {
     return _ref.apply(this, arguments);
   };
 }();
-document.getElementById('app').style.display = 'block';
-function WorkSpace(props) {
+function WorkSpace(_ref2) {
+  var width = _ref2.width,
+    height = _ref2.height;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     externalEvent = _useState2[0],
@@ -62,338 +67,213 @@ function WorkSpace(props) {
   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 = {
+      return setExternalEvent({
         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 = {
+      return setExternalEvent({
         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, {
-    actionType: "primary",
     onClick: function onClick() {
-      var evt = {
+      return setExternalEvent({
         type: EXTERNAL_EVENT_TOGGLE_TO_2D,
         payload: {}
-      };
-      setExternalEvent(evt);
+      });
     }
   }, "2D"), /*#__PURE__*/React.createElement(Button, {
-    actionType: "primary",
     onClick: function onClick() {
-      var evt = {
+      return setExternalEvent({
         type: EXTERNAL_EVENT_TOGGLE_TO_3D,
         payload: {}
-      };
-      setExternalEvent(evt);
+      });
     }
   }, "3D"), /*#__PURE__*/React.createElement(Button, {
-    actionType: "primary",
     onClick: function onClick() {
-      var evt = {
+      return setExternalEvent({
         type: EXTERNAL_EVENT_TOGGLE_TO_ELEVATION,
         payload: {}
-      };
-      setExternalEvent(evt);
+      });
     }
   }, "Elevation"), /*#__PURE__*/React.createElement(Button, {
-    actionType: "primary",
     onClick: function onClick() {
-      var evt = {
+      return setExternalEvent({
         type: EXTERNAL_EVENT_MOVE_PAN,
         payload: {
           moveType: LEFT,
           moveValue: offset
         }
-      };
-      setExternalEvent(evt);
+      });
     }
   }, /*#__PURE__*/React.createElement("img", {
+    alt: "left",
     src: "/assets/img/svg/bottombar/arrow-left.svg"
   })), /*#__PURE__*/React.createElement(Button, {
-    actionType: "primary",
     onClick: function onClick() {
-      var evt = {
+      return setExternalEvent({
         type: EXTERNAL_EVENT_MOVE_PAN,
         payload: {
           moveType: TOP,
           moveValue: offset
         }
-      };
-      setExternalEvent(evt);
+      });
     }
   }, /*#__PURE__*/React.createElement("img", {
+    alt: "up",
     src: "/assets/img/svg/bottombar/arrow-up.svg"
   })), /*#__PURE__*/React.createElement(Button, {
-    actionType: "primary",
     onClick: function onClick() {
-      var evt = {
+      return setExternalEvent({
         type: EXTERNAL_EVENT_MOVE_PAN,
         payload: {
           moveType: BOTTOM,
           moveValue: offset
         }
-      };
-      setExternalEvent(evt);
+      });
     }
   }, /*#__PURE__*/React.createElement("img", {
+    alt: "down",
     src: "/assets/img/svg/bottombar/arrow-down.svg"
   })), /*#__PURE__*/React.createElement(Button, {
-    actionType: "primary",
     onClick: function onClick() {
-      var evt = {
+      return setExternalEvent({
         type: EXTERNAL_EVENT_MOVE_PAN,
         payload: {
           moveType: RIGHT,
           moveValue: offset
         }
-      };
-      setExternalEvent(evt);
+      });
     }
   }, /*#__PURE__*/React.createElement("img", {
+    alt: "right",
     src: "/assets/img/svg/bottombar/arrow-right.svg"
   })), /*#__PURE__*/React.createElement(Button, {
-    actionType: "primary",
     onClick: function onClick() {
-      var evt = {
+      return setExternalEvent({
         type: EXTERNAL_EVENT_ZOOM_OUT,
         payload: {}
-      };
-      setExternalEvent(evt);
+      });
     }
   }, /*#__PURE__*/React.createElement("img", {
+    alt: "-",
     src: "/assets/img/svg/bottombar/arrow-minus.svg"
   })), /*#__PURE__*/React.createElement(Button, {
-    actionType: "primary",
     onClick: function onClick() {
-      var evt = {
+      return setExternalEvent({
         type: EXTERNAL_EVENT_ZOOM_IN,
         payload: {}
-      };
-      setExternalEvent(evt);
+      });
     }
   }, /*#__PURE__*/React.createElement("img", {
+    alt: "+",
     src: "/assets/img/svg/bottombar/arrow-plus.svg"
   })), /*#__PURE__*/React.createElement(Button, {
-    actionType: "primary",
     onClick: function onClick() {
-      var evt = {
+      return setExternalEvent({
         type: EXTERNAL_EVENT_NEW_PROJECT,
         payload: {}
-      };
-      setExternalEvent(evt);
+      });
     }
   }, "New Project"), /*#__PURE__*/React.createElement(Button, {
-    actionType: "secondary",
     onClick: function onClick() {
-      var evt = {
+      return setExternalEvent({
         type: EXTERNAL_EVENT_ADD_WALL,
         payload: {}
-      };
-      setExternalEvent(evt);
+      });
     }
   }, "Add Walls"), /*#__PURE__*/React.createElement(Button, {
-    actionType: "danger",
     onClick: function onClick() {
-      var evt = {
+      return setExternalEvent({
         type: EXTERNAL_EVENT_ADD_ITEM,
         payload: cabinetPaylod
-      };
-      setExternalEvent(evt);
+      });
     }
   }, "Add B12 Cabinet"), /*#__PURE__*/React.createElement(Button, {
-    actionType: "danger",
     onClick: function onClick() {
-      var evt = {
+      return setExternalEvent({
         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",
+  }, "DoorStyle (Change)"), /*#__PURE__*/React.createElement(Button, {
     onClick: function onClick() {
-      var evt = {
+      return setExternalEvent({
         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: 'https://media.test.diydesignspace.com/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: 'https://media.test.diydesignspace.com/uploads/assets/default/steel.jpg',
-              fixed_drawer_door_handle_1: 'https://media.test.diydesignspace.com/uploads/assets/default/steel.jpg',
-              drawer_door_handle_1: 'https://media.test.diydesignspace.com/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: 'https://media.test.diydesignspace.com/uploads/assets/default/steel.jpg',
-              fixed_drawer_door_handle_2: 'https://media.test.diydesignspace.com/uploads/assets/default/steel.jpg',
-              drawer_door_handle_2: 'https://media.test.diydesignspace.com/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: 'https://media.test.diydesignspace.com/uploads/assets/default/steel.jpg',
-              fixed_drawer_door_handle_3: 'https://media.test.diydesignspace.com/uploads/assets/default/steel.jpg',
-              drawer_door_handle_3: 'https://media.test.diydesignspace.com/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: 'https://media.test.diydesignspace.com/uploads/assets/default/steel.jpg',
-              fixed_drawer_door_handle_4: 'https://media.test.diydesignspace.com/uploads/assets/default/steel.jpg',
-              drawer_door_handle_4: 'https://media.test.diydesignspace.com/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: 'https://media.test.diydesignspace.com/uploads/assets/default/steel.jpg',
-              fixed_drawer_door_handle_5: 'https://media.test.diydesignspace.com/uploads/assets/default/steel.jpg',
-              drawer_door_handle_5: 'https://media.test.diydesignspace.com/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: 'https://media.test.diydesignspace.com/uploads/assets/default/steel.jpg',
-              fixed_drawer_door_handle_6: 'https://media.test.diydesignspace.com/uploads/assets/default/steel.jpg',
-              drawer_door_handle_6: 'https://media.test.diydesignspace.com/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: 'https://media.test.diydesignspace.com/uploads/assets/default/steel.jpg',
-              fixed_drawer_door_handle_7: 'https://media.test.diydesignspace.com/uploads/assets/default/steel.jpg',
-              drawer_door_handle_7: 'https://media.test.diydesignspace.com/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: 'https://media.test.diydesignspace.com/uploads/assets/default/steel.jpg',
-              fixed_drawer_door_handle_8: 'https://media.test.diydesignspace.com/uploads/assets/default/steel.jpg',
-              drawer_door_handle_8: 'https://media.test.diydesignspace.com/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: 'https://media.test.diydesignspace.com/uploads/assets/default/steel.jpg',
-              fixed_drawer_door_handle_9: 'https://media.test.diydesignspace.com/uploads/assets/default/steel.jpg',
-              drawer_door_handle_9: 'https://media.test.diydesignspace.com/uploads/assets/default/steel.jpg'
-            },
-            installation_types: [125, 124]
-          }
+          doorStyle: doorStylePaylod2
         }
-      };
-      setExternalEvent(evt);
+      });
     }
   }, "Add Room shape(rectangle)"), /*#__PURE__*/React.createElement(Button, {
-    actionType: "danger",
     onClick: function onClick() {
-      var evt = {
+      return setExternalEvent({
         type: EXTERNAL_EVENT_UNDO,
         payload: {}
-      };
-      setExternalEvent(evt);
+      });
     }
   }, "Undo"), /*#__PURE__*/React.createElement(Button, {
-    actionType: "danger",
     onClick: function onClick() {
-      var evt = {
+      return setExternalEvent({
         type: EXTERNAL_EVENT_REDO,
         payload: {}
-      };
-      setExternalEvent(evt);
+      });
     }
   }, "Redo"), /*#__PURE__*/React.createElement(Button, {
-    actionType: "danger",
     onClick: function onClick() {
-      var evt = {
+      return setExternalEvent({
         type: EXTERNAL_EVENT_SET_MOLDING,
         payload: {
           isGlobal: true,
           moldingInfo: moldingPayload
         }
-      };
-      setExternalEvent(evt);
+      });
     }
-  }, "Global Molding (FBM)"), /*#__PURE__*/React.createElement(Button, {
-    actionType: "danger",
+  }, "Global Molding"), /*#__PURE__*/React.createElement(Button, {
     onClick: function onClick() {
-      var evt = {
+      return setExternalEvent({
         type: EXTERNAL_EVENT_SET_MOLDING,
         payload: {
           isGlobal: false,
           moldingInfo: moldingPayload
         }
-      };
-      setExternalEvent(evt);
+      });
     }
-  }, "Individual Molding (FBM)"), /*#__PURE__*/React.createElement(Button, {
-    actionType: "danger",
+  }, "Individual Molding"), /*#__PURE__*/React.createElement(Button, {
     onClick: function onClick() {
-      var evt = {
+      return setExternalEvent({
         type: EXTERNAL_EVENT_PROJECT_SETTING,
         payload: {
           option: PROJECT_SETTING_OPTION.UPDATE_CEIL_HEIGHT,
-          value: 100 // ceiling length
+          value: 100
         }
-      };
-      setExternalEvent(evt);
+      });
     }
   }, "Setting-CeilingHeight"), /*#__PURE__*/React.createElement(Button, {
-    actionType: "danger",
     onClick: function onClick() {
-      var evt = {
+      return setExternalEvent({
         type: EXTERNAL_EVENT_PROJECT_SETTING,
         payload: {
           option: PROJECT_SETTING_OPTION.CHANGE_WALL_LENGTH_MEASURE,
-          value: 1 // 0-false, 1-true
+          value: 1
         }
-      };
-      setExternalEvent(evt);
+      });
     }
   }, "Setting-WallLength"), /*#__PURE__*/React.createElement(Button, {
-    actionType: "danger",
     onClick: function onClick() {
-      var evt = {
+      return setExternalEvent({
         type: EXTERNAL_EVENT_UPDATE_ATTRIBUTE,
         payload: {
           attributeName: ATT_ITEM_POS,
@@ -402,286 +282,226 @@ function WorkSpace(props) {
             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 = {
+      return setExternalEvent({
         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 = {
+      return setExternalEvent({
         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 = {
+      return setExternalEvent({
         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 = {
+      return setExternalEvent({
         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 = {
+      return setExternalEvent({
         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 = {
+      return setExternalEvent({
         type: EXTERNAL_EVENT_DUPLICATE_ELEMENT,
         payload: {
           elementPrototype: ELEMENT_ITEM,
-          elementId: '' // id of current operating element
+          elementId: ''
         }
-      };
-      setExternalEvent(evt);
+      });
     }
   }, "Duplicate Item"), /*#__PURE__*/React.createElement(Button, {
-    actionType: "danger",
     onClick: function onClick() {
-      var evt = {
+      return setExternalEvent({
         type: EXTERNAL_EVENT_DELETE_ELEMENT,
         payload: {
           elementPrototype: ELEMENT_ITEM,
-          elementId: '' // id of current operating element
+          elementId: ''
         }
-      };
-      setExternalEvent(evt);
+      });
     }
   }, "Delete Item"), /*#__PURE__*/React.createElement(Button, {
-    actionType: "danger",
     onClick: function onClick() {
-      var evt = {
+      return setExternalEvent({
         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 = {
+      return setExternalEvent({
         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 = {
+      return setExternalEvent({
         type: EXTERNAL_EVENT_ADD_ITEM,
         payload: appliancePaylod
-      };
-      setExternalEvent(evt);
+      });
     }
-  }, "Add Appliance (30 Bottom Freezer)"), /*#__PURE__*/React.createElement(Button, {
-    actionType: "danger",
+  }, "Add Appliance"), /*#__PURE__*/React.createElement(Button, {
     onClick: function onClick() {
-      var evt = {
+      return setExternalEvent({
         type: EXTERNAL_EVENT_ADD_ITEM,
         payload: lightingPayload
-      };
-      setExternalEvent(evt);
+      });
     }
   }, "Add Lighting"), /*#__PURE__*/React.createElement(Button, {
-    actionType: "danger",
     onClick: function onClick() {
-      var evt = {
+      return setExternalEvent({
         type: EXTERNAL_EVENT_ADD_ITEM,
         payload: furnishingPayload
-      };
-      setExternalEvent(evt);
+      });
     }
   }, "Add Furnishing"), /*#__PURE__*/React.createElement(Button, {
-    actionType: "danger",
     onClick: function onClick() {
-      var evt = {
+      return setExternalEvent({
         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 = {
+      return setExternalEvent({
         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 = {
+      return setExternalEvent({
         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 = {
+      return setExternalEvent({
         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 = {
+      return setExternalEvent({
         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 = {
+      return setExternalEvent({
         type: EXTERNAL_EVENT_CENTERING_2D,
         payload: {}
-      };
-      setExternalEvent(evt);
+      });
     }
   }, "Centering Viewer2D"), /*#__PURE__*/React.createElement(Button, {
-    actionType: "danger",
     onClick: function onClick() {
-      var evt = {
+      return setExternalEvent({
         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 = {
+      return setExternalEvent({
         type: EXTERNAL_EVENT_REPLACE_CABINET,
-        payload: replaceCabinetPayload // B12 Data
-      };
-      setExternalEvent(evt);
+        payload: replaceCabinetPayload
+      });
     }
   }, "Replace cabinet to B12"), /*#__PURE__*/React.createElement(Button, {
-    actionType: "danger",
     onClick: function onClick() {
-      var evt = {
+      return setExternalEvent({
         type: EXTERNAL_EVENT_ADD_ROOM_SHAPE,
         payload: roomShapePayload
-      };
-      setExternalEvent(evt);
+      });
     }
-  }, "Add room shape from width, height"), /*#__PURE__*/React.createElement(Button, {
-    actionType: "danger",
+  }, "Add room shape (payload)"), /*#__PURE__*/React.createElement(Button, {
     onClick: function onClick() {
       var _tl = Math.floor(Math.random() * 50);
       var tl = convert(_tl).from('in').to('cm');
-      var evt = {
+      setExternalEvent({
         type: EXTERNAL_EVENT_UPDATE_PROPERTY,
         payload: {
           propertyName: PROP_RESIZE_WIDTH,
           value: new Map({
             _length: _tl,
-            // inch
             _unit: 'in',
-            length: tl // cm
+            length: tl
           })
         }
-      };
-      setExternalEvent(evt);
+      });
     }
   }, "random width")), /*#__PURE__*/React.createElement(LiteRenderer, {
-    width: props.width,
-    height: props.height,
+    width: width,
+    height: height,
     configData: mockProps.configData,
     options: options,
     logoImg: "/assets/logo.png",
@@ -690,22 +510,33 @@ function WorkSpace(props) {
     externalEvent: externalEvent,
     onInternalEvent: onInternalEvent,
     onError: function onError(payload) {
-      // payload = {
-      //   type: 'render-error' | 'runtime-error' | 'unhandled-rejection',
-      //   error: { name?, message, stack?, raw? },
-      //   info?: { componentStack? },
-      //   externalEvent: { id?, type, payload } | null,
-      //   meta?: { filename?, lineno?, colno? }
-      // }
       console.error('TOOL ERROR:', payload);
     }
   }));
 }
-ReactDOM.render(/*#__PURE__*/React.createElement(ContainerDimensions, null, function (_ref2) {
-  var width = _ref2.width,
-    height = _ref2.height;
-  return /*#__PURE__*/React.createElement(WorkSpace, {
+function App() {
+  var _useMeasure = useMeasure(),
+    _useMeasure2 = _slicedToArray(_useMeasure, 2),
+    ref = _useMeasure2[0],
+    bounds = _useMeasure2[1];
+
+  // Provide usable dimensions immediately
+  var width = Math.max(1, Math.floor(bounds.width || window.innerWidth || 1));
+  var height = Math.max(1, Math.floor(bounds.height || window.innerHeight || 1));
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    style: {
+      width: '100%',
+      height: '100vh'
+    }
+  }, /*#__PURE__*/React.createElement(WorkSpace, {
     width: width,
     height: height
-  });
-}), document.getElementById('app') && document.getElementById('app'));
+  }));
+}
+
+// React 18 entry
+var mountEl = document.getElementById('app');
+if (mountEl) {
+  createRoot(mountEl).render(/*#__PURE__*/React.createElement(App, null));
+}