kitchen-simulator 4.0.4-react-18 → 4.0.4

package/lib/devLiteRenderer.js

@@ -6,22 +6,24 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = _interopRequireWildcard(require("react"));
-var _client = require("react-dom/client");
-var _reactUseMeasure = _interopRequireDefault(require("react-use-measure"));
 var _immutable = require("immutable");
-var _antd = require("antd");
-var _LiteRenderer = _interopRequireDefault(require("./LiteRenderer"));
+var _reactContainerDimensions = _interopRequireDefault(require("react-container-dimensions"));
 var _projectItemsCatalog = _interopRequireDefault(require("./mocks/projectItemsCatalog.json"));
 var _mockProps = _interopRequireDefault(require("./mocks/mockProps.json"));
 var _cabinetPayload = _interopRequireDefault(require("./mocks/cabinetPayload2.json"));
+var _cabinetPayload2 = _interopRequireDefault(require("./mocks/cabinetPayload.json"));
 var _appliancePayload = _interopRequireDefault(require("./mocks/appliancePayload.json"));
 var _doorStylePayload = _interopRequireDefault(require("./mocks/doorStylePayload2.json"));
 var _roomShapePayload = _interopRequireDefault(require("./mocks/roomShapePayload.json"));
 var _itemCDSPayload = _interopRequireDefault(require("./mocks/itemCDSPayload.json"));
 var _lightingPayload = _interopRequireDefault(require("./mocks/lightingPayload.json"));
 var _furnishingPayload = _interopRequireDefault(require("./mocks/furnishingPayload.json"));
+var _rectangleShape = _interopRequireDefault(require("./mocks/rectangleShape.json"));
 var _moldingPayload = _interopRequireDefault(require("./mocks/moldingPayload.json"));
 var _replaceCabinetPayload = _interopRequireDefault(require("./mocks/replaceCabinetPayload.json"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _LiteRenderer = _interopRequireDefault(require("./LiteRenderer"));
+var _antd = require("antd");
 var _constants = require("./constants");
 var _convertUnitsLite = require("./utils/convert-units-lite");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
@@ -30,15 +32,12 @@ var options = {
   unit: 'in',
   enable3D: true
 };
-
-// internal event handler
 var onInternalEvent = /*#__PURE__*/function () {
   var _ref = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(evt, callback) {
     var _t;
     return _regenerator["default"].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 === _constants.INTERNAL_EVENT_ITEMS_CATALOG ? 1 : 3;
@@ -47,10 +46,8 @@ var onInternalEvent = /*#__PURE__*/function () {
           _context.next = 2;
           return callback(_projectItemsCatalog["default"]);
         case 2:
-          return _context.abrupt("continue", 4);
+          return _context.abrupt("continue", 3);
         case 3:
-          return _context.abrupt("continue", 4);
-        case 4:
         case "end":
           return _context.stop();
       }
@@ -60,9 +57,8 @@ var onInternalEvent = /*#__PURE__*/function () {
     return _ref.apply(this, arguments);
   };
 }();
-function WorkSpace(_ref2) {
-  var width = _ref2.width,
-    height = _ref2.height;
+document.getElementById('app').style.display = 'block';
+function WorkSpace(props) {
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     externalEvent = _useState2[0],
@@ -71,213 +67,445 @@ function WorkSpace(_ref2) {
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "flex gap-4"
   }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+    actionType: "danger",
     onClick: function onClick() {
-      return setExternalEvent({
+      var evt = {
         type: _constants.EXTERNAL_EVENT_SYNC_SCENE,
+        // send request for sync scene data to 3DTool
         payload: {}
-      });
+      };
+      setExternalEvent(evt);
     }
   }, "Event-sync"), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+    actionType: "danger",
     onClick: function onClick() {
-      return setExternalEvent({
+      var evt = {
         type: _constants.EXTERNAL_EVENT_LOAD_PROJECT,
+        // send request for sync scene data to 3DTool
         payload: JSON.parse(_mockProps["default"].projectElement[0].project_data)
-      });
+      };
+      setExternalEvent(evt);
     }
   }, "Load Project"), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+    actionType: "primary",
     onClick: function onClick() {
-      return setExternalEvent({
+      var evt = {
         type: _constants.EXTERNAL_EVENT_TOGGLE_TO_2D,
         payload: {}
-      });
+      };
+      setExternalEvent(evt);
     }
   }, "2D"), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+    actionType: "primary",
     onClick: function onClick() {
-      return setExternalEvent({
+      var evt = {
         type: _constants.EXTERNAL_EVENT_TOGGLE_TO_3D,
         payload: {}
-      });
+      };
+      setExternalEvent(evt);
     }
   }, "3D"), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+    actionType: "primary",
     onClick: function onClick() {
-      return setExternalEvent({
+      var evt = {
         type: _constants.EXTERNAL_EVENT_TOGGLE_TO_ELEVATION,
         payload: {}
-      });
+      };
+      setExternalEvent(evt);
     }
   }, "Elevation"), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+    actionType: "primary",
     onClick: function onClick() {
-      return setExternalEvent({
+      var evt = {
         type: _constants.EXTERNAL_EVENT_MOVE_PAN,
         payload: {
           moveType: _constants.LEFT,
           moveValue: offset
         }
-      });
+      };
+      setExternalEvent(evt);
     }
   }, /*#__PURE__*/_react["default"].createElement("img", {
-    alt: "left",
     src: "/assets/img/svg/bottombar/arrow-left.svg"
   })), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+    actionType: "primary",
     onClick: function onClick() {
-      return setExternalEvent({
+      var evt = {
         type: _constants.EXTERNAL_EVENT_MOVE_PAN,
         payload: {
           moveType: _constants.TOP,
           moveValue: offset
         }
-      });
+      };
+      setExternalEvent(evt);
     }
   }, /*#__PURE__*/_react["default"].createElement("img", {
-    alt: "up",
     src: "/assets/img/svg/bottombar/arrow-up.svg"
   })), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+    actionType: "primary",
     onClick: function onClick() {
-      return setExternalEvent({
+      var evt = {
         type: _constants.EXTERNAL_EVENT_MOVE_PAN,
         payload: {
           moveType: _constants.BOTTOM,
           moveValue: offset
         }
-      });
+      };
+      setExternalEvent(evt);
     }
   }, /*#__PURE__*/_react["default"].createElement("img", {
-    alt: "down",
     src: "/assets/img/svg/bottombar/arrow-down.svg"
   })), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+    actionType: "primary",
     onClick: function onClick() {
-      return setExternalEvent({
+      var evt = {
         type: _constants.EXTERNAL_EVENT_MOVE_PAN,
         payload: {
           moveType: _constants.RIGHT,
           moveValue: offset
         }
-      });
+      };
+      setExternalEvent(evt);
     }
   }, /*#__PURE__*/_react["default"].createElement("img", {
-    alt: "right",
     src: "/assets/img/svg/bottombar/arrow-right.svg"
   })), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+    actionType: "primary",
     onClick: function onClick() {
-      return setExternalEvent({
+      var evt = {
         type: _constants.EXTERNAL_EVENT_ZOOM_OUT,
         payload: {}
-      });
+      };
+      setExternalEvent(evt);
     }
   }, /*#__PURE__*/_react["default"].createElement("img", {
-    alt: "-",
     src: "/assets/img/svg/bottombar/arrow-minus.svg"
   })), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+    actionType: "primary",
     onClick: function onClick() {
-      return setExternalEvent({
+      var evt = {
         type: _constants.EXTERNAL_EVENT_ZOOM_IN,
         payload: {}
-      });
+      };
+      setExternalEvent(evt);
     }
   }, /*#__PURE__*/_react["default"].createElement("img", {
-    alt: "+",
     src: "/assets/img/svg/bottombar/arrow-plus.svg"
   })), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+    actionType: "primary",
     onClick: function onClick() {
-      return setExternalEvent({
+      var evt = {
         type: _constants.EXTERNAL_EVENT_NEW_PROJECT,
         payload: {}
-      });
+      };
+      setExternalEvent(evt);
     }
   }, "New Project"), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+    actionType: "secondary",
     onClick: function onClick() {
-      return setExternalEvent({
+      var evt = {
         type: _constants.EXTERNAL_EVENT_ADD_WALL,
         payload: {}
-      });
+      };
+      setExternalEvent(evt);
     }
   }, "Add Walls"), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+    actionType: "danger",
     onClick: function onClick() {
-      return setExternalEvent({
+      var evt = {
         type: _constants.EXTERNAL_EVENT_ADD_ITEM,
         payload: _cabinetPayload["default"]
-      });
+      };
+      setExternalEvent(evt);
     }
   }, "Add B12 Cabinet"), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+    actionType: "danger",
     onClick: function onClick() {
-      return setExternalEvent({
+      var evt = {
+        type: _constants.EXTERNAL_EVENT_ADD_ITEM,
+        payload: _cabinetPayload2["default"]
+      };
+      setExternalEvent(evt);
+    }
+  }, "Add W0930 Cabinet"), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
         type: _constants.EXTERNAL_EVENT_CHANGE_DOORSTYLE,
         payload: {
           doorStyle: _doorStylePayload["default"],
           itemCDS: _itemCDSPayload["default"],
           isAll: true
         }
-      });
+      };
+      setExternalEvent(evt);
     }
-  }, "DoorStyle (Change)"), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+  }, "DoorStyle (Change into Midtown White Shaker)"), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+    actionType: "danger",
     onClick: function onClick() {
-      return setExternalEvent({
+      var evt = {
         type: _constants.EXTERNAL_EVENT_ADD_ROOM_SHAPE,
         payload: {
           roomShapeType: 'rectangle',
           width: 250,
           height: 100,
-          doorStyle: _doorStylePayload["default"]
+          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["default"].createElement(_antd.Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: _constants.EXTERNAL_EVENT_ADD_ROOM_SHAPE,
+        payload: {
+          roomShapeType: 'custom',
+          width: 0,
+          height: 0,
+          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(custom)"), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+    actionType: "danger",
     onClick: function onClick() {
-      return setExternalEvent({
+      var evt = {
         type: _constants.EXTERNAL_EVENT_UNDO,
         payload: {}
-      });
+      };
+      setExternalEvent(evt);
     }
   }, "Undo"), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+    actionType: "danger",
     onClick: function onClick() {
-      return setExternalEvent({
+      var evt = {
         type: _constants.EXTERNAL_EVENT_REDO,
         payload: {}
-      });
+      };
+      setExternalEvent(evt);
     }
   }, "Redo"), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+    actionType: "danger",
     onClick: function onClick() {
-      return setExternalEvent({
+      var evt = {
         type: _constants.EXTERNAL_EVENT_SET_MOLDING,
         payload: {
           isGlobal: true,
           moldingInfo: _moldingPayload["default"]
         }
-      });
+      };
+      setExternalEvent(evt);
     }
-  }, "Global Molding"), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+  }, "Global Molding (FBM)"), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+    actionType: "danger",
     onClick: function onClick() {
-      return setExternalEvent({
+      var evt = {
         type: _constants.EXTERNAL_EVENT_SET_MOLDING,
         payload: {
           isGlobal: false,
           moldingInfo: _moldingPayload["default"]
         }
-      });
+      };
+      setExternalEvent(evt);
     }
-  }, "Individual Molding"), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+  }, "Individual Molding (FBM)"), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+    actionType: "danger",
     onClick: function onClick() {
-      return setExternalEvent({
+      var evt = {
         type: _constants.EXTERNAL_EVENT_PROJECT_SETTING,
         payload: {
           option: _constants.PROJECT_SETTING_OPTION.UPDATE_CEIL_HEIGHT,
-          value: 100
+          value: 100 // ceiling length
         }
-      });
+      };
+      setExternalEvent(evt);
     }
   }, "Setting-CeilingHeight"), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+    actionType: "danger",
     onClick: function onClick() {
-      return setExternalEvent({
+      var evt = {
         type: _constants.EXTERNAL_EVENT_PROJECT_SETTING,
         payload: {
           option: _constants.PROJECT_SETTING_OPTION.CHANGE_WALL_LENGTH_MEASURE,
-          value: 1
+          value: 1 // 0-false, 1-true
         }
-      });
+      };
+      setExternalEvent(evt);
     }
   }, "Setting-WallLength"), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+    actionType: "danger",
     onClick: function onClick() {
-      return setExternalEvent({
+      var evt = {
         type: _constants.EXTERNAL_EVENT_UPDATE_ATTRIBUTE,
         payload: {
           attributeName: _constants.ATT_ITEM_POS,
@@ -286,226 +514,350 @@ function WorkSpace(_ref2) {
             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["default"].createElement(_antd.Button, {
+    actionType: "danger",
     onClick: function onClick() {
-      return setExternalEvent({
+      var evt = {
         type: _constants.EXTERNAL_EVENT_UPDATE_ATTRIBUTE,
         payload: {
           attributeName: _constants.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["default"].createElement(_antd.Button, {
+    actionType: "danger",
     onClick: function onClick() {
-      return setExternalEvent({
+      var evt = {
         type: _constants.EXTERNAL_EVENT_UPDATE_ATTRIBUTE,
         payload: {
           attributeName: _constants.ATT_LINE_LENGTH,
           value: 100
         }
-      });
+      };
+      setExternalEvent(evt);
     }
   }, "OP-Wall Length to 100"), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+    actionType: "danger",
     onClick: function onClick() {
-      return setExternalEvent({
+      var evt = {
         type: _constants.EXTERNAL_EVENT_UPDATE_PROPERTY,
         payload: {
           propertyName: _constants.PROP_FLIP_DOOR_HANDLE,
           value: true
         }
-      });
+      };
+      setExternalEvent(evt);
     }
   }, "Flip Door Handle"), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+    actionType: "danger",
     onClick: function onClick() {
-      return setExternalEvent({
+      var evt = {
         type: _constants.EXTERNAL_EVENT_UPDATE_PROPERTY,
         payload: {
           propertyName: _constants.PROP_OPEN_DOORS,
           value: true
         }
-      });
+      };
+      setExternalEvent(evt);
     }
   }, "Open Doors"), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+    actionType: "danger",
     onClick: function onClick() {
-      return setExternalEvent({
+      var evt = {
         type: _constants.EXTERNAL_EVENT_UPDATE_PROPERTY,
         payload: {
           propertyName: _constants.PROP_ALTITUDE,
+          // this property should be Map
           value: new _immutable.Map({
             length: 25.399999187200024,
+            // cm
             _length: 10,
+            // inch
             _unit: 'in'
           })
         }
-      });
+      };
+      setExternalEvent(evt);
     }
   }, "Distance from floor 10\""), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+    actionType: "danger",
     onClick: function onClick() {
-      return setExternalEvent({
+      var evt = {
         type: _constants.EXTERNAL_EVENT_DUPLICATE_ELEMENT,
         payload: {
           elementPrototype: _constants.ELEMENT_ITEM,
-          elementId: ''
+          elementId: '' // id of current operating element
         }
-      });
+      };
+      setExternalEvent(evt);
     }
   }, "Duplicate Item"), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+    actionType: "danger",
     onClick: function onClick() {
-      return setExternalEvent({
+      var evt = {
         type: _constants.EXTERNAL_EVENT_DELETE_ELEMENT,
         payload: {
           elementPrototype: _constants.ELEMENT_ITEM,
-          elementId: ''
+          elementId: '' // id of current operating element
         }
-      });
+      };
+      setExternalEvent(evt);
     }
   }, "Delete Item"), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+    actionType: "danger",
     onClick: function onClick() {
-      return setExternalEvent({
+      var evt = {
         type: _constants.EXTERNAL_EVENT_ADD_HOLE,
         payload: {
           holeName: _constants.HOLE_NAMES.WINDOW_CROSS
         }
-      });
+      };
+      setExternalEvent(evt);
     }
   }, "Add Hole (Cross Window)"), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+    actionType: "danger",
     onClick: function onClick() {
-      return setExternalEvent({
+      var evt = {
         type: _constants.EXTERNAL_EVENT_ADD_HOLE,
         payload: {
           holeName: _constants.HOLE_NAMES.DOOR_EXTERIOR
         }
-      });
+      };
+      setExternalEvent(evt);
     }
   }, "Add Hole (DOOR_EXTERIOR)"), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+    actionType: "danger",
     onClick: function onClick() {
-      return setExternalEvent({
+      var evt = {
         type: _constants.EXTERNAL_EVENT_ADD_ITEM,
         payload: _appliancePayload["default"]
-      });
+      };
+      setExternalEvent(evt);
     }
-  }, "Add Appliance"), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+  }, "Add Appliance (30 Bottom Freezer)"), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+    actionType: "danger",
     onClick: function onClick() {
-      return setExternalEvent({
+      var evt = {
         type: _constants.EXTERNAL_EVENT_ADD_ITEM,
         payload: _lightingPayload["default"]
-      });
+      };
+      setExternalEvent(evt);
     }
   }, "Add Lighting"), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+    actionType: "danger",
     onClick: function onClick() {
-      return setExternalEvent({
+      var evt = {
         type: _constants.EXTERNAL_EVENT_ADD_ITEM,
         payload: _furnishingPayload["default"]
-      });
+      };
+      setExternalEvent(evt);
     }
   }, "Add Furnishing"), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+    actionType: "danger",
     onClick: function onClick() {
-      return setExternalEvent({
+      var evt = {
         type: _constants.EXTERNAL_EVENT_SET_FINISHING,
         payload: {
           category: _constants.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["default"].createElement(_antd.Button, {
+    actionType: "danger",
     onClick: function onClick() {
-      return setExternalEvent({
+      var evt = {
         type: _constants.EXTERNAL_EVENT_SET_FINISHING,
         payload: {
           category: _constants.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["default"].createElement(_antd.Button, {
+    actionType: "danger",
     onClick: function onClick() {
-      return setExternalEvent({
+      var evt = {
         type: _constants.EXTERNAL_EVENT_SET_FINISHING,
         payload: {
           category: _constants.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["default"].createElement(_antd.Button, {
+    actionType: "danger",
     onClick: function onClick() {
-      return setExternalEvent({
+      var evt = {
         type: _constants.EXTERNAL_EVENT_SET_FINISHING,
         payload: {
           category: _constants.FINISHING_TYPE.WALL_COLOR,
           color: '#bab863'
         }
-      });
+      };
+      setExternalEvent(evt);
     }
   }, "Set Finishing (Wall Color)"), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+    actionType: "danger",
     onClick: function onClick() {
-      return setExternalEvent({
+      var evt = {
         type: _constants.EXTERNAL_EVENT_SET_FINISHING,
         payload: {
           category: _constants.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["default"].createElement(_antd.Button, {
+    actionType: "danger",
     onClick: function onClick() {
-      return setExternalEvent({
+      var evt = {
         type: _constants.EXTERNAL_EVENT_CENTERING_2D,
         payload: {}
-      });
+      };
+      setExternalEvent(evt);
     }
   }, "Centering Viewer2D"), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+    actionType: "danger",
     onClick: function onClick() {
-      return setExternalEvent({
+      var evt = {
         type: _constants.EXTERNAL_EVENT_UPDATE_PROPERTY,
         payload: {
           propertyName: _constants.PROP_RESIZE_WIDTH,
+          // this property should be Map
           value: new _immutable.Map({
             length: 68.57999780544007,
+            // cm
             _length: 27,
+            // inch
             _unit: 'in'
           })
         }
-      });
+      };
+      setExternalEvent(evt);
     }
   }, "Change width to 27\""), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+    actionType: "danger",
     onClick: function onClick() {
-      return setExternalEvent({
+      var evt = {
         type: _constants.EXTERNAL_EVENT_REPLACE_CABINET,
-        payload: _replaceCabinetPayload["default"]
-      });
+        payload: _replaceCabinetPayload["default"] // B12 Data
+      };
+      setExternalEvent(evt);
     }
   }, "Replace cabinet to B12"), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+    actionType: "danger",
     onClick: function onClick() {
-      return setExternalEvent({
+      var evt = {
         type: _constants.EXTERNAL_EVENT_ADD_ROOM_SHAPE,
         payload: _roomShapePayload["default"]
-      });
+      };
+      setExternalEvent(evt);
     }
-  }, "Add room shape (payload)"), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+  }, "Add room shape from width, height"), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+    actionType: "danger",
     onClick: function onClick() {
       var _tl = Math.floor(Math.random() * 50);
       var tl = (0, _convertUnitsLite.convert)(_tl).from('in').to('cm');
-      setExternalEvent({
+      var evt = {
         type: _constants.EXTERNAL_EVENT_UPDATE_PROPERTY,
         payload: {
           propertyName: _constants.PROP_RESIZE_WIDTH,
           value: new _immutable.Map({
             _length: _tl,
+            // inch
             _unit: 'in',
-            length: tl
+            length: tl // cm
           })
         }
-      });
+      };
+      setExternalEvent(evt);
     }
-  }, "random width")), /*#__PURE__*/_react["default"].createElement(_LiteRenderer["default"], {
-    width: width,
-    height: height,
+  }, "random width"), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+    actionType: "primary",
+    onClick: function onClick() {
+      var evt = {
+        type: _constants.EXTERNAL_EVENT_ROTATE_PAN,
+        payload: {
+          rotateType: _constants.RIGHT
+        }
+      };
+      setExternalEvent(evt);
+    }
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    src: "/assets/img/svg/bottombar/spin-right.svg"
+  })), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+    actionType: "primary",
+    onClick: function onClick() {
+      var evt = {
+        type: _constants.EXTERNAL_EVENT_ROTATE_PAN,
+        payload: {
+          rotateType: _constants.LEFT
+        }
+      };
+      setExternalEvent(evt);
+    }
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    src: "/assets/img/svg/bottombar/spin-left.svg"
+  })), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+    actionType: "primary",
+    onClick: function onClick() {
+      var evt = {
+        type: _constants.EXTERNAL_EVENT_ROTATE_PAN,
+        payload: {
+          rotateType: _constants.TOP
+        }
+      };
+      setExternalEvent(evt);
+    }
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    src: "/assets/img/svg/bottombar/spin-up.svg"
+  })), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+    actionType: "primary",
+    onClick: function onClick() {
+      var evt = {
+        type: _constants.EXTERNAL_EVENT_ROTATE_PAN,
+        payload: {
+          rotateType: _constants.BOTTOM
+        }
+      };
+      setExternalEvent(evt);
+    }
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    src: "/assets/img/svg/bottombar/spin-down.svg"
+  })), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: _constants.EXTERNAL_EVENT_PROJECT_SETTING,
+        payload: {
+          option: _constants.PROJECT_SETTING_OPTION.CHANGE_MEASUREMENT_UNIT,
+          value: 'mm'
+        }
+      };
+      setExternalEvent(evt);
+    }
+  }, "Setting-MeasurementUnit-'mm'")), /*#__PURE__*/_react["default"].createElement(_LiteRenderer["default"], {
+    width: props.width,
+    height: props.height,
     configData: _mockProps["default"].configData,
     options: options,
     logoImg: "/assets/logo.png",
@@ -514,33 +866,22 @@ function WorkSpace(_ref2) {
     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);
     }
   }));
 }
-function App() {
-  var _useMeasure = (0, _reactUseMeasure["default"])(),
-    _useMeasure2 = (0, _slicedToArray2["default"])(_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["default"].createElement("div", {
-    ref: ref,
-    style: {
-      width: '100%',
-      height: '100vh'
-    }
-  }, /*#__PURE__*/_react["default"].createElement(WorkSpace, {
+_reactDom["default"].render(/*#__PURE__*/_react["default"].createElement(_reactContainerDimensions["default"], null, function (_ref2) {
+  var width = _ref2.width,
+    height = _ref2.height;
+  return /*#__PURE__*/_react["default"].createElement(WorkSpace, {
     width: width,
     height: height
-  }));
-}
-
-// React 18 entry
-var mountEl = document.getElementById('app');
-if (mountEl) {
-  (0, _client.createRoot)(mountEl).render(/*#__PURE__*/_react["default"].createElement(App, null));
-}
+  });
+}), document.getElementById('app') && document.getElementById('app'));