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

package/es/devLiteRenderer.js

@@ -6,21 +6,22 @@ import { Map } from 'immutable';
 import ContainerDimensions from 'react-container-dimensions';
 import projectItemsCatalog from "./mocks/projectItemsCatalog.json";
 import mockProps from "./mocks/mockProps.json";
-import cabinetPaylod from "./mocks/cabinetPayload2.json";
+import cabinetPaylod from "./mocks/cabinetPayload_new.json";
 import cabinetW0940Payload from "./mocks/cabinetPayload.json";
 import appliancePaylod from "./mocks/appliancePayload.json";
 import doorStylePaylod2 from "./mocks/doorStylePayload2.json";
+import doorStylePayloadNew from "./mocks/doorStylePayload_new.json";
 import roomShapePayload from "./mocks/roomShapePayload.json";
 import itemCDSPayload from "./mocks/itemCDSPayload.json";
 import lightingPayload from "./mocks/lightingPayload.json";
 import furnishingPayload from "./mocks/furnishingPayload.json";
-import rectangleData from "./mocks/rectangleShape.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, HOLE_NAMES, EXTERNAL_EVENT_CENTERING_2D, PROP_ALTITUDE, EXTERNAL_EVENT_DUPLICATE_ELEMENT, ELEMENT_ITEM, EXTERNAL_EVENT_DELETE_ELEMENT, PROP_RESIZE_WIDTH, EXTERNAL_EVENT_REPLACE_CABINET, EXTERNAL_EVENT_SET_FINISHING, FINISHING_TYPE, EXTERNAL_EVENT_ROTATE_PAN, DOORSTYLE_SCOPE_ALL } from "./constants";
+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 ---
@@ -60,6 +61,9 @@ function WorkSpace(props) {
     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, {
@@ -78,7 +82,7 @@ function WorkSpace(props) {
       var evt = {
         type: EXTERNAL_EVENT_LOAD_PROJECT,
         // send request for sync scene data to 3DTool
-        payload: JSON.parse(mockProps.projectElement[0].project_data)
+        payload: mockProps.projectElement[0].project_data
       };
       setExternalEvent(evt);
     }
@@ -237,6 +241,18 @@ function WorkSpace(props) {
       setExternalEvent(evt);
     }
   }, "DoorStyle (Change into Midtown White Shaker)"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_CHANGE_DOORSTYLE,
+        payload: {
+          doorStyle: doorStylePayloadNew === null || doorStylePayloadNew === void 0 ? void 0 : doorStylePayloadNew.doorStyle,
+          applyScope: doorStylePayloadNew === null || doorStylePayloadNew === void 0 ? void 0 : doorStylePayloadNew.applyScope
+        }
+      };
+      setExternalEvent(evt);
+    }
+  }, "DoorStyle Change(New-Cambriage)"), /*#__PURE__*/React.createElement(Button, {
     actionType: "danger",
     onClick: function onClick() {
       var evt = {
@@ -245,7 +261,6 @@ function WorkSpace(props) {
           roomShapeType: 'rectangle',
           width: 250,
           height: 100,
-          measurementUnit: 'in',
           doorStyle: {
             id: 36,
             type: 'door',
@@ -264,70 +279,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: DEFAULT_INTERIOR_URL,
               base_door_1: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_fixed_drawer_door_1: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_1: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_door_1: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
-              door_handle_1: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              fixed_drawer_door_handle_1: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              drawer_door_handle_1: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
+              door_handle_1: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              fixed_drawer_door_handle_1: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              drawer_door_handle_1: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
               base_door_2: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_fixed_drawer_door_2: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_2: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_door_2: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
-              door_handle_2: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              fixed_drawer_door_handle_2: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              drawer_door_handle_2: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
+              door_handle_2: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              fixed_drawer_door_handle_2: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              drawer_door_handle_2: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
               base_door_3: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_fixed_drawer_door_3: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_3: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_door_3: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
-              door_handle_3: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              fixed_drawer_door_handle_3: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              drawer_door_handle_3: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
+              door_handle_3: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              fixed_drawer_door_handle_3: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              drawer_door_handle_3: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
               base_door_4: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_fixed_drawer_door_4: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_4: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_door_4: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
-              door_handle_4: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              fixed_drawer_door_handle_4: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              drawer_door_handle_4: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
+              door_handle_4: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              fixed_drawer_door_handle_4: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              drawer_door_handle_4: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
               base_door_5: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_fixed_drawer_door_5: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_5: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_door_5: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
-              door_handle_5: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              fixed_drawer_door_handle_5: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              drawer_door_handle_5: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
+              door_handle_5: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              fixed_drawer_door_handle_5: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              drawer_door_handle_5: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
               base_door_6: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_fixed_drawer_door_6: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_6: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_door_6: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
-              door_handle_6: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              fixed_drawer_door_handle_6: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              drawer_door_handle_6: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
+              door_handle_6: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              fixed_drawer_door_handle_6: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              drawer_door_handle_6: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
               base_door_7: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_fixed_drawer_door_7: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_7: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_door_7: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
-              door_handle_7: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              fixed_drawer_door_handle_7: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              drawer_door_handle_7: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
+              door_handle_7: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              fixed_drawer_door_handle_7: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              drawer_door_handle_7: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
               base_door_8: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_fixed_drawer_door_8: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_8: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_door_8: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
-              door_handle_8: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              fixed_drawer_door_handle_8: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              drawer_door_handle_8: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
+              door_handle_8: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              fixed_drawer_door_handle_8: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              drawer_door_handle_8: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
               base_door_9: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_fixed_drawer_door_9: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_9: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_door_9: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
-              door_handle_9: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              fixed_drawer_door_handle_9: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              drawer_door_handle_9: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg'
+              door_handle_9: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              fixed_drawer_door_handle_9: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              drawer_door_handle_9: DEFAULT_DOOR_HANDLE_TEXTURE_URL
             },
             installation_types: [125, 124]
           }
@@ -362,70 +377,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: DEFAULT_INTERIOR_URL,
               base_door_1: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_fixed_drawer_door_1: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_1: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_door_1: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
-              door_handle_1: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              fixed_drawer_door_handle_1: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              drawer_door_handle_1: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
+              door_handle_1: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              fixed_drawer_door_handle_1: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              drawer_door_handle_1: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
               base_door_2: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_fixed_drawer_door_2: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_2: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_door_2: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
-              door_handle_2: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              fixed_drawer_door_handle_2: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              drawer_door_handle_2: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
+              door_handle_2: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              fixed_drawer_door_handle_2: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              drawer_door_handle_2: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
               base_door_3: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_fixed_drawer_door_3: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_3: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_door_3: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
-              door_handle_3: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              fixed_drawer_door_handle_3: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              drawer_door_handle_3: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
+              door_handle_3: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              fixed_drawer_door_handle_3: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              drawer_door_handle_3: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
               base_door_4: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_fixed_drawer_door_4: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_4: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_door_4: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
-              door_handle_4: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              fixed_drawer_door_handle_4: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              drawer_door_handle_4: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
+              door_handle_4: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              fixed_drawer_door_handle_4: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              drawer_door_handle_4: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
               base_door_5: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_fixed_drawer_door_5: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_5: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_door_5: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
-              door_handle_5: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              fixed_drawer_door_handle_5: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              drawer_door_handle_5: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
+              door_handle_5: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              fixed_drawer_door_handle_5: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              drawer_door_handle_5: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
               base_door_6: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_fixed_drawer_door_6: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_6: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_door_6: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
-              door_handle_6: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              fixed_drawer_door_handle_6: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              drawer_door_handle_6: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
+              door_handle_6: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              fixed_drawer_door_handle_6: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              drawer_door_handle_6: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
               base_door_7: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_fixed_drawer_door_7: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_7: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_door_7: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
-              door_handle_7: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              fixed_drawer_door_handle_7: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              drawer_door_handle_7: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
+              door_handle_7: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              fixed_drawer_door_handle_7: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              drawer_door_handle_7: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
               base_door_8: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_fixed_drawer_door_8: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_8: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_door_8: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
-              door_handle_8: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              fixed_drawer_door_handle_8: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              drawer_door_handle_8: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
+              door_handle_8: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              fixed_drawer_door_handle_8: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              drawer_door_handle_8: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
               base_door_9: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_fixed_drawer_door_9: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_9: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
               base_drawer_door_9: 'https://media.test.diydesignspace.com/uploads/DoorColor/202105065453_36/texture/White1px.jpeg',
-              door_handle_9: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              fixed_drawer_door_handle_9: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg',
-              drawer_door_handle_9: 'http://127.0.0.1:4002/uploads/assets/default/steel.jpg'
+              door_handle_9: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              fixed_drawer_door_handle_9: DEFAULT_DOOR_HANDLE_TEXTURE_URL,
+              drawer_door_handle_9: DEFAULT_DOOR_HANDLE_TEXTURE_URL
             },
             installation_types: [125, 124]
           }
@@ -548,6 +563,38 @@ function WorkSpace(props) {
       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 = {
@@ -614,29 +661,21 @@ function WorkSpace(props) {
       };
       setExternalEvent(evt);
     }
-  }, "Delete Item"), /*#__PURE__*/React.createElement(Button, {
-    actionType: "danger",
-    onClick: function onClick() {
-      var evt = {
-        type: EXTERNAL_EVENT_ADD_HOLE,
-        payload: {
-          holeName: HOLE_NAMES.WINDOW_CROSS
-        }
-      };
-      setExternalEvent(evt);
-    }
-  }, "Add Hole (Cross Window)"), /*#__PURE__*/React.createElement(Button, {
-    actionType: "danger",
-    onClick: function onClick() {
-      var evt = {
-        type: EXTERNAL_EVENT_ADD_HOLE,
-        payload: {
-          holeName: HOLE_NAMES.DOOR_EXTERIOR
-        }
-      };
-      setExternalEvent(evt);
-    }
-  }, "Add Hole (DOOR_EXTERIOR)"), /*#__PURE__*/React.createElement(Button, {
+  }, "Delete Item"), holeButtons.map(function (hole) {
+    return /*#__PURE__*/React.createElement(Button, {
+      key: "".concat(hole.type, "-").concat(hole.name),
+      actionType: "danger",
+      onClick: function onClick() {
+        var evt = {
+          type: EXTERNAL_EVENT_ADD_HOLE,
+          payload: {
+            holeName: hole.name
+          }
+        };
+        setExternalEvent(evt);
+      }
+    }, "Add Hole (".concat(hole.type, " - ").concat(hole.name, ")"));
+  }), /*#__PURE__*/React.createElement(Button, {
     actionType: "danger",
     onClick: function onClick() {
       var evt = {
@@ -860,6 +899,7 @@ function WorkSpace(props) {
     logoImg: "/assets/logo.png",
     companyUrl: "https://example.com",
     toolbarButtons: [],
+    holes: holesPayload,
     externalEvent: externalEvent,
     onInternalEvent: onInternalEvent,
     onError: function onError(payload) {

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

@@ -0,0 +1,28 @@
+import { EXTERNAL_EVENT_ADD_ITEM, EXTERNAL_EVENT_CHANGE_DOORSTYLE, EXTERNAL_EVENT_LOAD_PROJECT, EXTERNAL_EVENT_REPLACE_CABINET } from "../../constants";
+import { isEmpty } from "../../utils/helper";
+import { mapAddItemEvent } from "./mappers/addItemMapper";
+import { mapChangeDoorStyleEvent } from "./mappers/changeDoorStyleMapper";
+import { mapLoadProjectEvent } from "./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.
+ */
+export function mapExternalEventPayload(evt, state) {
+  if (isEmpty(evt)) return null;
+  switch (evt.type) {
+    case EXTERNAL_EVENT_REPLACE_CABINET:
+      evt.payload.replaceItemInfo = mapAddItemEvent(evt.payload.replaceItemInfo, state);
+      return evt;
+    case EXTERNAL_EVENT_ADD_ITEM:
+      evt.payload = mapAddItemEvent(evt.payload, state);
+      return evt;
+    case EXTERNAL_EVENT_CHANGE_DOORSTYLE:
+      return mapChangeDoorStyleEvent(evt, state);
+    case EXTERNAL_EVENT_LOAD_PROJECT:
+      return mapLoadProjectEvent(evt, state);
+    default:
+      return evt;
+  }
+}

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

@@ -0,0 +1,86 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+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) { _defineProperty(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; }
+import { isEmpty } from "../../../utils/helper";
+
+/**
+ * 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)
+ */
+export 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 (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 (isEmpty(assets3d)) {
+    // nothing to map; keep event as-is
+    return evtPayload;
+  }
+  if (!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 = _toConsumableArray(assets3d);
+
+  // first pass: inject door-handle assets where needed
+  assets3d.forEach(function (asItem) {
+    // make door handle
+    if (!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 (!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/es/mappings/external-events/mappers/ccdfMapper.js

@@ -0,0 +1,86 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import { isEmpty } from "../../../components/viewer2d/utils";
+import { toJSIfNeeded } from "../../../shared/objects/immutable";
+export 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 = 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 (!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 = _toConsumableArray(assets3d);
+      // make structure
+      assets3d.forEach(function (asItem) {
+        // make door handle
+        if (!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 (!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;
+}

package/es/mappings/external-events/mappers/ccdfToCDSMapper.js

@@ -0,0 +1,31 @@
+import { isEmpty } from "../../../components/viewer2d/utils";
+export function mapFromCCDFToCDS(ccdf_list) {
+  // This function make CDS from CCDF_List
+  var itemCDSList = [];
+  var itemCDSData = {};
+  var cabitnetDoorStyleId;
+  ccdf_list === null || ccdf_list === void 0 || ccdf_list.forEach(function (asItem) {
+    if (!isEmpty(asItem === null || asItem === void 0 ? void 0 : asItem.id)) {
+      cabitnetDoorStyleId = asItem.id;
+    }
+    asItem === null || asItem === void 0 || asItem.assets3d.forEach(function (as) {
+      if (!isEmpty(as === null || as === void 0 ? void 0 : as.placeholder_name) && !isEmpty(as === null || as === void 0 ? void 0 : as.gltf)) {
+        var updatedName = 'base_' + (as === null || as === void 0 ? void 0 : as.placeholder_name) + '_gltf';
+        itemCDSData[updatedName] = as === null || as === void 0 ? void 0 : as.gltf;
+      }
+      itemCDSData['is_euro_cds'] = !isEmpty(as === null || as === void 0 ? void 0 : as.is_euro_cds) ? as.is_euro_cds : 0;
+      itemCDSData['euro_shape_svg'] = !isEmpty(as === null || as === void 0 ? void 0 : as.euro_shape_svg) ? as.is_euro_cds : null;
+      itemCDSData['euro_width'] = !isEmpty(as === null || as === void 0 ? void 0 : as.euro_width) ? as.is_euro_cds : null;
+      itemCDSData['euro_height'] = !isEmpty(as === null || as === void 0 ? void 0 : as.euro_height) ? as.is_euro_cds : null;
+      itemCDSData['euro_length'] = !isEmpty(as === null || as === void 0 ? void 0 : as.euro_length) ? as.is_euro_cds : null;
+    });
+    var data = [];
+    data.push(itemCDSData);
+    itemCDSList.push({
+      itemID: asItem.cabinet_id,
+      data: data,
+      cabinet_door_style_id: cabitnetDoorStyleId
+    });
+  });
+  return itemCDSList;
+}