kitchen-simulator 4.4.6 → 5.0.0-new-api.1

package/lib/devLiteRenderer.js

@@ -10,17 +10,18 @@ var _immutable = require("immutable");
 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 _cabinetPayload_new = _interopRequireDefault(require("./mocks/cabinetPayload_new.json"));
+var _cabinetPayload = _interopRequireDefault(require("./mocks/cabinetPayload.json"));
 var _appliancePayload = _interopRequireDefault(require("./mocks/appliancePayload.json"));
 var _doorStylePayload = _interopRequireDefault(require("./mocks/doorStylePayload2.json"));
+var _doorStylePayload_new = _interopRequireDefault(require("./mocks/doorStylePayload_new.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 _holesPayload = _interopRequireDefault(require("./mocks/holesPayload.json"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _LiteRenderer = _interopRequireDefault(require("./LiteRenderer"));
 var _antd = require("antd");
@@ -64,6 +65,9 @@ function WorkSpace(props) {
     externalEvent = _useState2[0],
     setExternalEvent = _useState2[1];
   var offset = 5;
+  var holeButtons = Array.isArray(_holesPayload["default"]) ? [_holesPayload["default"].find(function (hole) {
+    return hole && !hole.is_deleted;
+  })] : [];
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "flex gap-4"
   }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_antd.Button, {
@@ -82,7 +86,7 @@ function WorkSpace(props) {
       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)
+        payload: _mockProps["default"].projectElement[0].project_data
       };
       setExternalEvent(evt);
     }
@@ -214,7 +218,7 @@ function WorkSpace(props) {
     onClick: function onClick() {
       var evt = {
         type: _constants.EXTERNAL_EVENT_ADD_ITEM,
-        payload: _cabinetPayload["default"]
+        payload: _cabinetPayload_new["default"]
       };
       setExternalEvent(evt);
     }
@@ -223,7 +227,7 @@ function WorkSpace(props) {
     onClick: function onClick() {
       var evt = {
         type: _constants.EXTERNAL_EVENT_ADD_ITEM,
-        payload: _cabinetPayload2["default"]
+        payload: _cabinetPayload["default"]
       };
       setExternalEvent(evt);
     }
@@ -241,6 +245,18 @@ function WorkSpace(props) {
       setExternalEvent(evt);
     }
   }, "DoorStyle (Change into Midtown White Shaker)"), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: _constants.EXTERNAL_EVENT_CHANGE_DOORSTYLE,
+        payload: {
+          doorStyle: _doorStylePayload_new["default"] === null || _doorStylePayload_new["default"] === void 0 ? void 0 : _doorStylePayload_new["default"].doorStyle,
+          applyScope: _doorStylePayload_new["default"] === null || _doorStylePayload_new["default"] === void 0 ? void 0 : _doorStylePayload_new["default"].applyScope
+        }
+      };
+      setExternalEvent(evt);
+    }
+  }, "DoorStyle Change(New-Cambriage)"), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
     actionType: "danger",
     onClick: function onClick() {
       var evt = {
@@ -249,7 +265,6 @@ function WorkSpace(props) {
           roomShapeType: 'rectangle',
           width: 250,
           height: 100,
-          measurementUnit: 'in',
           doorStyle: {
             id: 36,
             type: 'door',
@@ -268,70 +283,70 @@ function WorkSpace(props) {
             doorStyles: {
               base: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               counttop: 'https://media.test.diydesignspace.com/uploads/CountTop/202105074107_5/texture/Unique_Calcatta_texture.jpg',
-              interior: 'http://127.0.0.1:4002/uploads/assets/default/maple.jpg',
+              interior: _constants.DEFAULT_INTERIOR_URL,
               base_door_1: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_fixed_drawer_door_1: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_1: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_door_1: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
-              door_handle_1: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              fixed_drawer_door_handle_1: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              drawer_door_handle_1: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
+              door_handle_1: _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              fixed_drawer_door_handle_1: _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              drawer_door_handle_1: _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL,
               base_door_2: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_fixed_drawer_door_2: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_2: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_door_2: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
-              door_handle_2: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              fixed_drawer_door_handle_2: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              drawer_door_handle_2: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
+              door_handle_2: _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              fixed_drawer_door_handle_2: _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              drawer_door_handle_2: _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL,
               base_door_3: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_fixed_drawer_door_3: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_3: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_door_3: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
-              door_handle_3: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              fixed_drawer_door_handle_3: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              drawer_door_handle_3: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
+              door_handle_3: _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              fixed_drawer_door_handle_3: _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              drawer_door_handle_3: _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL,
               base_door_4: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_fixed_drawer_door_4: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_4: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_door_4: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
-              door_handle_4: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              fixed_drawer_door_handle_4: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              drawer_door_handle_4: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
+              door_handle_4: _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              fixed_drawer_door_handle_4: _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              drawer_door_handle_4: _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL,
               base_door_5: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_fixed_drawer_door_5: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_5: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_door_5: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
-              door_handle_5: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              fixed_drawer_door_handle_5: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              drawer_door_handle_5: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
+              door_handle_5: _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              fixed_drawer_door_handle_5: _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              drawer_door_handle_5: _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL,
               base_door_6: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_fixed_drawer_door_6: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_6: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_door_6: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
-              door_handle_6: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              fixed_drawer_door_handle_6: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              drawer_door_handle_6: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
+              door_handle_6: _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              fixed_drawer_door_handle_6: _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              drawer_door_handle_6: _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL,
               base_door_7: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_fixed_drawer_door_7: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_7: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_door_7: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
-              door_handle_7: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              fixed_drawer_door_handle_7: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              drawer_door_handle_7: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
+              door_handle_7: _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              fixed_drawer_door_handle_7: _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              drawer_door_handle_7: _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL,
               base_door_8: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_fixed_drawer_door_8: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_8: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_door_8: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
-              door_handle_8: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              fixed_drawer_door_handle_8: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              drawer_door_handle_8: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
+              door_handle_8: _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              fixed_drawer_door_handle_8: _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              drawer_door_handle_8: _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL,
               base_door_9: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_fixed_drawer_door_9: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_9: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_door_9: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
-              door_handle_9: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              fixed_drawer_door_handle_9: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              drawer_door_handle_9: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg'
+              door_handle_9: _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              fixed_drawer_door_handle_9: _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              drawer_door_handle_9: _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL
             },
             installation_types: [125, 124]
           }
@@ -366,70 +381,70 @@ function WorkSpace(props) {
             doorStyles: {
               base: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               counttop: 'https://media.test.diydesignspace.com/uploads/CountTop/202105074107_5/texture/Unique_Calcatta_texture.jpg',
-              interior: 'http://127.0.0.1:4002/uploads/assets/default/maple.jpg',
+              interior: _constants.DEFAULT_INTERIOR_URL,
               base_door_1: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_fixed_drawer_door_1: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_1: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_door_1: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
-              door_handle_1: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              fixed_drawer_door_handle_1: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              drawer_door_handle_1: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
+              door_handle_1: _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              fixed_drawer_door_handle_1: _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              drawer_door_handle_1: _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL,
               base_door_2: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_fixed_drawer_door_2: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_2: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_door_2: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
-              door_handle_2: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              fixed_drawer_door_handle_2: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              drawer_door_handle_2: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
+              door_handle_2: _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              fixed_drawer_door_handle_2: _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              drawer_door_handle_2: _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL,
               base_door_3: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_fixed_drawer_door_3: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_3: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_door_3: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
-              door_handle_3: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              fixed_drawer_door_handle_3: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              drawer_door_handle_3: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
+              door_handle_3: _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              fixed_drawer_door_handle_3: _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              drawer_door_handle_3: _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL,
               base_door_4: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_fixed_drawer_door_4: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_4: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_door_4: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
-              door_handle_4: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              fixed_drawer_door_handle_4: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              drawer_door_handle_4: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
+              door_handle_4: _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              fixed_drawer_door_handle_4: _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              drawer_door_handle_4: _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL,
               base_door_5: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_fixed_drawer_door_5: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_5: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_door_5: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
-              door_handle_5: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              fixed_drawer_door_handle_5: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              drawer_door_handle_5: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
+              door_handle_5: _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              fixed_drawer_door_handle_5: _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              drawer_door_handle_5: _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL,
               base_door_6: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_fixed_drawer_door_6: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_6: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_door_6: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
-              door_handle_6: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              fixed_drawer_door_handle_6: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              drawer_door_handle_6: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
+              door_handle_6: _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              fixed_drawer_door_handle_6: _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              drawer_door_handle_6: _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL,
               base_door_7: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_fixed_drawer_door_7: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_7: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_door_7: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
-              door_handle_7: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              fixed_drawer_door_handle_7: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              drawer_door_handle_7: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
+              door_handle_7: _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              fixed_drawer_door_handle_7: _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              drawer_door_handle_7: _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL,
               base_door_8: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_fixed_drawer_door_8: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_8: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_door_8: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
-              door_handle_8: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              fixed_drawer_door_handle_8: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              drawer_door_handle_8: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
+              door_handle_8: _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              fixed_drawer_door_handle_8: _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              drawer_door_handle_8: _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL,
               base_door_9: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_fixed_drawer_door_9: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_9: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_door_9: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
-              door_handle_9: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              fixed_drawer_door_handle_9: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              drawer_door_handle_9: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg'
+              door_handle_9: _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              fixed_drawer_door_handle_9: _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              drawer_door_handle_9: _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL
             },
             installation_types: [125, 124]
           }
@@ -552,6 +567,38 @@ function WorkSpace(props) {
       setExternalEvent(evt);
     }
   }, "OP-Wall Length to 100"), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: _constants.EXTERNAL_EVENT_UPDATE_ATTRIBUTE,
+        payload: {
+          attributeName: _constants.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["default"].createElement(_antd.Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: _constants.EXTERNAL_EVENT_UPDATE_ATTRIBUTE,
+        payload: {
+          attributeName: _constants.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["default"].createElement(_antd.Button, {
     actionType: "danger",
     onClick: function onClick() {
       var evt = {
@@ -618,29 +665,21 @@ function WorkSpace(props) {
       };
       setExternalEvent(evt);
     }
-  }, "Delete Item"), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
-    actionType: "danger",
-    onClick: function onClick() {
-      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() {
-      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, {
+  }, "Delete Item"), holeButtons.map(function (hole) {
+    return /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+      key: "".concat(hole.type, "-").concat(hole.name),
+      actionType: "danger",
+      onClick: function onClick() {
+        var evt = {
+          type: _constants.EXTERNAL_EVENT_ADD_HOLE,
+          payload: {
+            holeName: hole.name
+          }
+        };
+        setExternalEvent(evt);
+      }
+    }, "Add Hole (".concat(hole.type, " - ").concat(hole.name, ")"));
+  }), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
     actionType: "danger",
     onClick: function onClick() {
       var evt = {
@@ -864,6 +903,7 @@ function WorkSpace(props) {
     logoImg: "/assets/logo.png",
     companyUrl: "https://example.com",
     toolbarButtons: [],
+    holes: _holesPayload["default"],
     externalEvent: externalEvent,
     onInternalEvent: onInternalEvent,
     onError: function onError(payload) {

package/lib/mappings/external-events/mapExternalEventPayload.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mapExternalEventPayload = mapExternalEventPayload;
+var _constants = require("../../constants");
+var _helper = require("../../utils/helper");
+var _addItemMapper = require("./mappers/addItemMapper");
+var _changeDoorStyleMapper = require("./mappers/changeDoorStyleMapper");
+var _loadProjectMapper = require("./mappers/loadProjectMapper");
+/**
+ * Main dispatcher for external event payload mapping.
+ * Converts new API formats into legacy internal formats (e.g. assets3d -> structure_json)
+ * without changing the behavior of the existing 3D tool.
+ */
+function mapExternalEventPayload(evt, state) {
+  if ((0, _helper.isEmpty)(evt)) return null;
+  switch (evt.type) {
+    case _constants.EXTERNAL_EVENT_REPLACE_CABINET:
+      evt.payload.replaceItemInfo = (0, _addItemMapper.mapAddItemEvent)(evt.payload.replaceItemInfo, state);
+      return evt;
+    case _constants.EXTERNAL_EVENT_ADD_ITEM:
+      evt.payload = (0, _addItemMapper.mapAddItemEvent)(evt.payload, state);
+      return evt;
+    case _constants.EXTERNAL_EVENT_CHANGE_DOORSTYLE:
+      return (0, _changeDoorStyleMapper.mapChangeDoorStyleEvent)(evt, state);
+    case _constants.EXTERNAL_EVENT_LOAD_PROJECT:
+      return (0, _loadProjectMapper.mapLoadProjectEvent)(evt, state);
+    default:
+      return evt;
+  }
+}

package/lib/mappings/external-events/mappers/addItemMapper.js

@@ -0,0 +1,92 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mapAddItemEvent = mapAddItemEvent;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _helper = require("../../../utils/helper");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * Mapping logic for EXTERNAL_EVENT_ADD_ITEM.
+ *
+ * Converts the new assets3d payload shape into the legacy structure_json format
+ * expected by the existing 3D tool.
+ *
+ * @param {Object} evt.payload   External event payload
+ * @param {Immutable.Map} state Planner state
+ * @returns {Object|null} Updated event (or null when payload is empty)
+ */
+function mapAddItemEvent(evtPayload, state) {
+  var _evtPayload;
+  // make structure_json using assest3D
+  var layerId = state.getIn(['scene', 'selectedLayer']);
+  var layer = state.getIn(['scene', 'layers', layerId]);
+  var tempStructure = {};
+  var tempPlaceholders = [];
+  var cabinetDoorFinishId, animation;
+  if ((0, _helper.isEmpty)(evtPayload)) return null;
+  var cabinetDoorFinish = (_evtPayload = evtPayload) === null || _evtPayload === void 0 ? void 0 : _evtPayload.ccdf;
+  var assets3d = cabinetDoorFinish === null || cabinetDoorFinish === void 0 ? void 0 : cabinetDoorFinish.assets3d;
+  if ((0, _helper.isEmpty)(assets3d)) {
+    // nothing to map; keep event as-is
+    return evtPayload;
+  }
+  if (!(0, _helper.isEmpty)(cabinetDoorFinish === null || cabinetDoorFinish === void 0 ? void 0 : cabinetDoorFinish.id)) {
+    cabinetDoorFinishId = cabinetDoorFinish.id;
+  }
+
+  // clone so we can push injected handle assets without mutating original
+  var updatedAssets3D = (0, _toConsumableArray2["default"])(assets3d);
+
+  // first pass: inject door-handle assets where needed
+  assets3d.forEach(function (asItem) {
+    // make door handle
+    if (!(0, _helper.isEmpty)(asItem === null || asItem === void 0 ? void 0 : asItem.placeholder_name)) {
+      var phName = asItem.placeholder_name;
+      if (phName.includes('door_')) {
+        var doorHandleName = phName.slice(0, phName.length - 2) + '_handle' + phName.slice(phName.length - 2);
+        updatedAssets3D.push({
+          placeholder_name: doorHandleName,
+          gltf: layer.get('doorHandle')
+        });
+      }
+    }
+  });
+
+  // second pass: build structure + placeholders from full asset list
+  updatedAssets3D.forEach(function (asitem) {
+    var _evtPayload2;
+    // set base field with gltf
+    tempStructure.base = (_evtPayload2 = evtPayload) === null || _evtPayload2 === void 0 ? void 0 : _evtPayload2.gltf;
+    if (!(0, _helper.isEmpty)(asitem === null || asitem === void 0 ? void 0 : asitem.placeholder_name)) {
+      // make the structure using placeholder_name and gltf
+      var phName = asitem.placeholder_name;
+      if (!phName.includes('_handle_') && !phName.includes('sink')) {
+        phName = 'base_' + phName;
+      }
+      tempStructure[phName] = asitem.gltf;
+    }
+  });
+
+  // make the tempPlaceholders using structure and id
+  tempPlaceholders.push({
+    id: cabinetDoorFinishId,
+    structure: tempStructure
+  });
+
+  // make the structure_json using animation and tempPlaceholders
+  var structure_json = {
+    animation: animation,
+    tempPlaceholders: tempPlaceholders
+  };
+
+  // rebuild the cabinet payload with structure_json
+  evtPayload = _objectSpread(_objectSpread({}, evtPayload), {}, {
+    structure_json: structure_json
+  });
+  return evtPayload;
+}

package/lib/mappings/external-events/mappers/ccdfMapper.js

@@ -0,0 +1,93 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ccdfMapper = ccdfMapper;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _utils = require("../../../components/viewer2d/utils");
+var _immutable = require("../../../shared/objects/immutable");
+function ccdfMapper(ccdf_list, layer) {
+  // This function make cabinet definition using ccdf, layer's item information and catalog
+  // console.log(ccdf_list, catalog);
+  // make structure_json list using ccdf-list
+  var cabinetDefinitionList = [];
+  var tempPlaceholders = [];
+  var structure = {};
+  var cdfId;
+  var structure_json = {};
+  var cabinetDefinition = {};
+  var layerJS = (0, _immutable.toJSIfNeeded)(layer);
+  ccdf_list === null || ccdf_list === void 0 || ccdf_list.forEach(function (ccdf) {
+    var itemKeys = Object.keys(layerJS.items);
+    var correctItemId = '';
+    for (var i = 0; i < itemKeys.length; i++) {
+      if (layerJS.items[itemKeys[i]].itemID === ccdf.cabinet_id) correctItemId = layerJS.items[itemKeys[i]].id;
+    }
+    var cd = layerJS.items[correctItemId];
+    if (cd.itemID === ccdf.cabinet_id) {
+      if (!(0, _utils.isEmpty)(ccdf === null || ccdf === void 0 ? void 0 : ccdf.id)) {
+        cdfId = ccdf.id;
+      }
+      var assets3d = ccdf === null || ccdf === void 0 ? void 0 : ccdf.assets3d;
+      var updatedAssets3D = (0, _toConsumableArray2["default"])(assets3d);
+      // make structure
+      assets3d.forEach(function (asItem) {
+        // make door handle
+        if (!(0, _utils.isEmpty)(asItem === null || asItem === void 0 ? void 0 : asItem.placeholder_name)) {
+          var phName = asItem.placeholder_name;
+          if (phName.includes('door_')) {
+            var doorHandleName = phName.slice(0, phName.length - 2) + '_handle' + phName.slice(phName.length - 2);
+            updatedAssets3D.push({
+              placeholder_name: doorHandleName,
+              gltf: layerJS.doorHandle
+            });
+          }
+        }
+      });
+      updatedAssets3D.forEach(function (asitem) {
+        // set base field with gltf
+        structure.base = cd.gltf;
+        if (!(0, _utils.isEmpty)(asitem === null || asitem === void 0 ? void 0 : asitem.placeholder_name)) {
+          // make the structure using placeholder_name and gltf
+          var phName = asitem.placeholder_name;
+          if (!phName.includes('_handle_') && !phName.includes('sink')) {
+            phName = 'base_' + phName;
+          }
+          structure[phName] = asitem.gltf;
+        }
+      });
+      // make tempPlaceholders
+      tempPlaceholders.push({
+        structure: structure,
+        id: cdfId
+      });
+      // make structure_json
+      structure_json = {
+        tempPlaceholders: tempPlaceholders
+      };
+      // make cabinet definition using structure_json and catalog
+      cabinetDefinition = {
+        type: cd.category,
+        itemID: cd.itemID,
+        name: cd.name,
+        long_name: cd.long_name,
+        sizeinfo: cd.sizeinfo,
+        description: cd.description,
+        prototype: cd.prototype,
+        base: cd.base,
+        shape_svg: cd.shape_svg,
+        gltf: cd.gltf,
+        structure_json: structure_json,
+        layoutpos: cd.layoutpos,
+        is_corner: cd.is_corner,
+        obj_property: cd.obj_property,
+        outline: cd.outline
+      };
+    }
+    // make cabinet definition list using cabinetDefinition
+    cabinetDefinitionList.push(cabinetDefinition);
+  });
+  return cabinetDefinitionList;
+}