kitchen-simulator 11.0.0-react-18 → 11.0.0

package/es/devLiteRenderer.js

@@ -0,0 +1,913 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useState, useEffect } from 'react';
+import { Map } from 'immutable';
+import ContainerDimensions from 'react-container-dimensions';
+import 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 doorStylePayload_brilliant from "./mocks/doorStylePayload_brilliant.json";
+import doorStylePayload_cambridge from "./mocks/doorStylePayload_cambridge.json";
+import roomShapePayload from "./mocks/roomShapePayload.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 { 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";
+
+// --- renderer props ---
+var options = {
+  unit: 'in',
+  enable3D: true
+};
+var onInternalEvent = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(evt, callback) {
+    var _t;
+    return _regeneratorRuntime.wrap(function (_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          console.log('EVENT:', evt.type, evt.value);
+          _t = evt.type;
+          _context.next = _t === INTERNAL_EVENT_ITEMS_CATALOG ? 1 : 3;
+          break;
+        case 1:
+          _context.next = 2;
+          return callback(ccdfPayload);
+        case 2:
+          return _context.abrupt("continue", 3);
+        case 3:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function onInternalEvent(_x, _x2) {
+    return _ref.apply(this, arguments);
+  };
+}();
+document.getElementById('app').style.display = 'block';
+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, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_SYNC_SCENE,
+        // send request for sync scene data to 3DTool
+        payload: {}
+      };
+      setExternalEvent(evt);
+    }
+  }, "Event-sync"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_LOAD_PROJECT,
+        // send request for sync scene data to 3DTool
+        payload: projectJson
+      };
+      setExternalEvent(evt);
+    }
+  }, "Load Project"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "primary",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_TOGGLE_TO_2D,
+        payload: {}
+      };
+      setExternalEvent(evt);
+    }
+  }, "2D"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "primary",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_TOGGLE_TO_3D,
+        payload: {}
+      };
+      setExternalEvent(evt);
+    }
+  }, "3D"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "primary",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_TOGGLE_TO_ELEVATION,
+        payload: {}
+      };
+      setExternalEvent(evt);
+    }
+  }, "Elevation"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "primary",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_MOVE_PAN,
+        payload: {
+          moveType: LEFT,
+          moveValue: offset
+        }
+      };
+      setExternalEvent(evt);
+    }
+  }, /*#__PURE__*/React.createElement("img", {
+    src: "/assets/img/svg/bottombar/arrow-left.svg"
+  })), /*#__PURE__*/React.createElement(Button, {
+    actionType: "primary",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_MOVE_PAN,
+        payload: {
+          moveType: TOP,
+          moveValue: offset
+        }
+      };
+      setExternalEvent(evt);
+    }
+  }, /*#__PURE__*/React.createElement("img", {
+    src: "/assets/img/svg/bottombar/arrow-up.svg"
+  })), /*#__PURE__*/React.createElement(Button, {
+    actionType: "primary",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_MOVE_PAN,
+        payload: {
+          moveType: BOTTOM,
+          moveValue: offset
+        }
+      };
+      setExternalEvent(evt);
+    }
+  }, /*#__PURE__*/React.createElement("img", {
+    src: "/assets/img/svg/bottombar/arrow-down.svg"
+  })), /*#__PURE__*/React.createElement(Button, {
+    actionType: "primary",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_MOVE_PAN,
+        payload: {
+          moveType: RIGHT,
+          moveValue: offset
+        }
+      };
+      setExternalEvent(evt);
+    }
+  }, /*#__PURE__*/React.createElement("img", {
+    src: "/assets/img/svg/bottombar/arrow-right.svg"
+  })), /*#__PURE__*/React.createElement(Button, {
+    actionType: "primary",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_ZOOM_OUT,
+        payload: {}
+      };
+      setExternalEvent(evt);
+    }
+  }, /*#__PURE__*/React.createElement("img", {
+    src: "/assets/img/svg/bottombar/arrow-minus.svg"
+  })), /*#__PURE__*/React.createElement(Button, {
+    actionType: "primary",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_ZOOM_IN,
+        payload: {}
+      };
+      setExternalEvent(evt);
+    }
+  }, /*#__PURE__*/React.createElement("img", {
+    src: "/assets/img/svg/bottombar/arrow-plus.svg"
+  })), /*#__PURE__*/React.createElement(Button, {
+    actionType: "primary",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_NEW_PROJECT,
+        payload: {}
+      };
+      setExternalEvent(evt);
+    }
+  }, "New Project"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "secondary",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_ADD_WALL,
+        payload: {}
+      };
+      setExternalEvent(evt);
+    }
+  }, "Add Walls"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_ADD_ITEM,
+        payload: cabinetPaylod
+      };
+      setExternalEvent(evt);
+    }
+  }, "Add B12 Cabinet"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        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);
+    }
+  }, "DoorStyle Change(Brilliant)"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_CHANGE_DOORSTYLE,
+        payload: {
+          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(Cambriage)"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_ADD_ROOM_SHAPE,
+        payload: {
+          roomShapeType: 'rectangle',
+          width: 250,
+          height: 100,
+          doorStyle: {
+            id: 36,
+            type: 'door',
+            name: 'Brilliant White Shaker',
+            thumbnail: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/thumbnail/Brilliant%20White%20Shaker%20-%20RTA.jpg',
+            texture: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
+            color: '#ffffff',
+            glossness: 1,
+            door_style_id: 42,
+            brightness: 1,
+            sku: 'SW',
+            color_family: ',10,',
+            color_sku_alias: 'SW',
+            door_style_name: 'Shaker',
+            install: '',
+            doorStyles: {
+              base: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
+              counttop: 'https://media.test.diydesignspace.com/uploads/CountTop/202105074107_5/texture/Unique_Calcatta_texture.jpg',
+              interior: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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]
+          }
+        }
+      };
+      setExternalEvent(evt);
+    }
+  }, "Add Room shape(rectangle)"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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]
+          }
+        }
+      };
+      setExternalEvent(evt);
+    }
+  }, "Add Room shape(custom)"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_UNDO,
+        payload: {}
+      };
+      setExternalEvent(evt);
+    }
+  }, "Undo"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_REDO,
+        payload: {}
+      };
+      setExternalEvent(evt);
+    }
+  }, "Redo"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_SET_MOLDING,
+        payload: {
+          isGlobal: true,
+          moldingInfo: moldingPayload
+        }
+      };
+      setExternalEvent(evt);
+    }
+  }, "Global Molding (FBM)"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_SET_MOLDING,
+        payload: {
+          isGlobal: false,
+          moldingInfo: moldingPayload
+        }
+      };
+      setExternalEvent(evt);
+    }
+  }, "Individual Molding (FBM)"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_PROJECT_SETTING,
+        payload: {
+          option: PROJECT_SETTING_OPTION.UPDATE_CEIL_HEIGHT,
+          value: 100 // ceiling length
+        }
+      };
+      setExternalEvent(evt);
+    }
+  }, "Setting-CeilingHeight"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_PROJECT_SETTING,
+        payload: {
+          option: PROJECT_SETTING_OPTION.CHANGE_WALL_LENGTH_MEASURE,
+          value: 1 // 0-false, 1-true
+        }
+      };
+      setExternalEvent(evt);
+    }
+  }, "Setting-WallLength"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_UPDATE_ATTRIBUTE,
+        payload: {
+          attributeName: ATT_ITEM_POS,
+          value: {
+            directionAng: BACK_DIST_ANG,
+            oldDistance: 0,
+            newDistance: 10
+          }
+        },
+        callback: function callback(updatedAttributeForm) {
+          console.log(updatedAttributeForm);
+          // Do something here with new attributes
+        }
+      };
+      setExternalEvent(evt);
+    }
+  }, "OP-Cabinet Back Distance to 10"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_UPDATE_ATTRIBUTE,
+        payload: {
+          attributeName: ATT_ITEM_ROTATION,
+          value: 45
+        },
+        callback: function callback(updatedAttributeForm) {
+          console.log(updatedAttributeForm);
+          // Do something here with new attributes
+        }
+      };
+      setExternalEvent(evt);
+    }
+  }, "OP-Cabinet Rotation to 45"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_UPDATE_ATTRIBUTE,
+        payload: {
+          attributeName: ATT_LINE_LENGTH,
+          value: 100
+        }
+      };
+      setExternalEvent(evt);
+    }
+  }, "OP-Wall Length to 100"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_UPDATE_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,
+        payload: {
+          propertyName: PROP_FLIP_DOOR_HANDLE,
+          value: true
+        }
+      };
+      setExternalEvent(evt);
+    }
+  }, "Flip Door Handle"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_UPDATE_PROPERTY,
+        payload: {
+          propertyName: PROP_OPEN_DOORS,
+          value: true
+        }
+      };
+      setExternalEvent(evt);
+    }
+  }, "Open Doors"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_UPDATE_PROPERTY,
+        payload: {
+          propertyName: PROP_ALTITUDE,
+          // this property should be Map
+          value: new Map({
+            length: 25.399999187200024,
+            // cm
+            _length: 10,
+            // inch
+            _unit: 'in'
+          })
+        }
+      };
+      setExternalEvent(evt);
+    }
+  }, "Distance from floor 10\""), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_DUPLICATE_ELEMENT,
+        payload: {
+          elementPrototype: ELEMENT_ITEM,
+          elementId: '' // id of current operating element
+        }
+      };
+      setExternalEvent(evt);
+    }
+  }, "Duplicate Item"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_DELETE_ELEMENT,
+        payload: {
+          elementPrototype: ELEMENT_ITEM,
+          elementId: '' // id of current operating element
+        }
+      };
+      setExternalEvent(evt);
+    }
+  }, "Delete Item"), 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,
+        payload: appliancePaylod
+      };
+      setExternalEvent(evt);
+    }
+  }, "Add Appliance (30 Bottom Freezer)"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_ADD_ITEM,
+        payload: lightingPayload
+      };
+      setExternalEvent(evt);
+    }
+  }, "Add Lighting"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_ADD_ITEM,
+        payload: furnishingPayload
+      };
+      setExternalEvent(evt);
+    }
+  }, "Add Furnishing"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_SET_FINISHING,
+        payload: {
+          category: FINISHING_TYPE.COUNTER_TOP,
+          texture: 'https://media.test.diydesignspace.com/uploads/CountTop/202111302746_7/texture/Arabescato_texture.jpg'
+        }
+      };
+      setExternalEvent(evt);
+    }
+  }, "Set Finishing (CounterTop)"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_SET_FINISHING,
+        payload: {
+          category: FINISHING_TYPE.BACKSPLASH,
+          texture: 'https://media.test.diydesignspace.com/uploads/CountTop/202305225249_14/texture/Unique_Marquina_texture.jpg'
+        }
+      };
+      setExternalEvent(evt);
+    }
+  }, "Set Finishing (Backsplash)"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_SET_FINISHING,
+        payload: {
+          category: FINISHING_TYPE.FLOOR_STYLE,
+          texture: 'https://media.test.diydesignspace.com/uploads/CountTop/202203163338_3/texture/oak-chestnut.webp'
+        }
+      };
+      setExternalEvent(evt);
+    }
+  }, "Set Finishing (Floor Style)"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_SET_FINISHING,
+        payload: {
+          category: FINISHING_TYPE.WALL_COLOR,
+          color: '#bab863'
+        }
+      };
+      setExternalEvent(evt);
+    }
+  }, "Set Finishing (Wall Color)"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_SET_FINISHING,
+        payload: {
+          category: FINISHING_TYPE.DOOR_HANDLE,
+          gltf: 'https://media.test.diydesignspace.com/uploads/DoorHandle/202107294150_29/gltf/Handle1.gltf'
+        }
+      };
+      setExternalEvent(evt);
+    }
+  }, "Set Finishing (Door handle)"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_CENTERING_2D,
+        payload: {}
+      };
+      setExternalEvent(evt);
+    }
+  }, "Centering Viewer2D"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_UPDATE_PROPERTY,
+        payload: {
+          propertyName: PROP_RESIZE_WIDTH,
+          // this property should be Map
+          value: new Map({
+            length: 68.57999780544007,
+            // cm
+            _length: 27,
+            // inch
+            _unit: 'in'
+          })
+        }
+      };
+      setExternalEvent(evt);
+    }
+  }, "Change width to 27\""), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_REPLACE_CABINET,
+        payload: replaceCabinetPayload // B12 Data
+      };
+      setExternalEvent(evt);
+    }
+  }, "Replace cabinet to B12"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_ADD_ROOM_SHAPE,
+        payload: roomShapePayload
+      };
+      setExternalEvent(evt);
+    }
+  }, "Add room shape from width, height"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var _tl = Math.floor(Math.random() * 50);
+      var tl = convert(_tl).from('in').to('cm');
+      var evt = {
+        type: EXTERNAL_EVENT_UPDATE_PROPERTY,
+        payload: {
+          propertyName: PROP_RESIZE_WIDTH,
+          value: new Map({
+            _length: _tl,
+            // inch
+            _unit: 'in',
+            length: tl // cm
+          })
+        }
+      };
+      setExternalEvent(evt);
+    }
+  }, "random width"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "primary",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_ROTATE_PAN,
+        payload: {
+          rotateType: RIGHT
+        }
+      };
+      setExternalEvent(evt);
+    }
+  }, /*#__PURE__*/React.createElement("img", {
+    src: "/assets/img/svg/bottombar/spin-right.svg"
+  })), /*#__PURE__*/React.createElement(Button, {
+    actionType: "primary",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_ROTATE_PAN,
+        payload: {
+          rotateType: LEFT
+        }
+      };
+      setExternalEvent(evt);
+    }
+  }, /*#__PURE__*/React.createElement("img", {
+    src: "/assets/img/svg/bottombar/spin-left.svg"
+  })), /*#__PURE__*/React.createElement(Button, {
+    actionType: "primary",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_ROTATE_PAN,
+        payload: {
+          rotateType: TOP
+        }
+      };
+      setExternalEvent(evt);
+    }
+  }, /*#__PURE__*/React.createElement("img", {
+    src: "/assets/img/svg/bottombar/spin-up.svg"
+  })), /*#__PURE__*/React.createElement(Button, {
+    actionType: "primary",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_ROTATE_PAN,
+        payload: {
+          rotateType: BOTTOM
+        }
+      };
+      setExternalEvent(evt);
+    }
+  }, /*#__PURE__*/React.createElement("img", {
+    src: "/assets/img/svg/bottombar/spin-down.svg"
+  })), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_PROJECT_SETTING,
+        payload: {
+          option: PROJECT_SETTING_OPTION.CHANGE_MEASUREMENT_UNIT,
+          value: 'mm'
+        }
+      };
+      setExternalEvent(evt);
+    }
+  }, "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) {
+      // 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, {
+    width: width,
+    height: height
+  });
+}), document.getElementById('app') && document.getElementById('app'));