kitchen-simulator 2.0.3-load-project-with-internal-event → 2.0.4-op-event

package/es/LiteRenderer.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
@@ -8,7 +7,7 @@ import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-var _excluded = ["width", "height", "projectElement", "dataBundle", "configData", "options", "user", "auth", "featureFlags", "sentry", "analytics", "externalEvent", "onInternalEvent", "onError"];
+var _excluded = ["width", "height", "projectElement", "configData", "options", "user", "auth", "featureFlags", "sentry", "analytics", "externalEvent", "onInternalEvent", "onError"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 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; }
@@ -24,16 +23,13 @@ import PlannerReducer from "./reducers/reducer";
 import AppContext from "./AppContext";
 import Catalog from "./catalog/catalog";
 import { SVGLoader } from 'three/addons/loaders/SVGLoader';
-import { isEmpty } from "./utils/helper";
 import { TOE_KICK_MOLDING } from "./constants";
 import * as Areas from "./catalog/areas/area/planner-element";
 import * as Lines from "./catalog/lines/wall/planner-element";
 import * as Holes from "./catalog/holes/export";
-import { render2DItem, render3DApplianceItem, render3DItem, render3DLightingItem } from "./catalog/utils/item-loader";
 import { ConsoleDebugger, Keyboard } from "./plugins/export";
 import { Map } from 'immutable';
 import * as Sentry from '@sentry/react';
-import exporter from "./catalog/utils/exporter";
 import * as THREE from 'three';
 import LiteKitchenConfigurator from "./LiteKitchenConfigurator";
 if (typeof window !== 'undefined') window.THREE = THREE;
@@ -144,7 +140,6 @@ export default function LiteRenderer(props) {
   var width = props.width,
     height = props.height,
     projectElement = props.projectElement,
-    dataBundle = props.dataBundle,
     configData = props.configData,
     options = props.options,
     user = props.user,
@@ -243,25 +238,12 @@ export default function LiteRenderer(props) {
       emit(lastExternalEventRef.current, last.errors);
     }
   }, [externalEvent, emit]);
-  var _ref = dataBundle || {},
-    _ref$data = _ref.data,
-    data = _ref$data === void 0 ? [] : _ref$data,
-    _ref$appliances = _ref.appliances,
-    appliances = _ref$appliances === void 0 ? [] : _ref$appliances,
-    _ref$furnishing = _ref.furnishing,
-    furnishing = _ref$furnishing === void 0 ? [] : _ref$furnishing,
-    _ref$lighting = _ref.lighting,
-    lighting = _ref$lighting === void 0 ? [] : _ref$lighting;
   var id = configData.id,
     logoImg = configData.logoImg,
     companyUrl = configData.companyUrl;
-  var _React$useState = React.useState([]),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    outlineSVGData = _React$useState2[0],
-    setOutlineSVGData = _React$useState2[1];
   useEffect(function () {
     var initMyCatalog = /*#__PURE__*/function () {
-      var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
         var x, _x, _x2;
         return _regeneratorRuntime.wrap(function (_context) {
           while (1) switch (_context.prev = _context.next) {
@@ -278,11 +260,11 @@ export default function LiteRenderer(props) {
         }, _callee);
       }));
       return function initMyCatalog() {
-        return _ref2.apply(this, arguments);
+        return _ref.apply(this, arguments);
       };
     }();
     var loadMoldings = /*#__PURE__*/function () {
-      var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
         var molding, toeMoldingData, moldingData, promises;
         return _regeneratorRuntime.wrap(function (_context2) {
           while (1) switch (_context2.prev = _context2.next) {
@@ -318,144 +300,32 @@ export default function LiteRenderer(props) {
         }, _callee2);
       }));
       return function loadMoldings() {
-        return _ref3.apply(this, arguments);
-      };
-    }();
-    var loadSVGs = /*#__PURE__*/function () {
-      var _ref4 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
-        var svgLoadPromises, outlineData;
-        return _regeneratorRuntime.wrap(function (_context4) {
-          while (1) switch (_context4.prev = _context4.next) {
-            case 0:
-              svgLoadPromises = data.map(/*#__PURE__*/function () {
-                var _ref5 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3(item) {
-                  var _parsed$xml$viewBox, _parsed$xml$viewBox2, response, svgText, loader, parsed, _t;
-                  return _regeneratorRuntime.wrap(function (_context3) {
-                    while (1) switch (_context3.prev = _context3.next) {
-                      case 0:
-                        if (item.outline) {
-                          _context3.next = 1;
-                          break;
-                        }
-                        return _context3.abrupt("return", null);
-                      case 1:
-                        _context3.prev = 1;
-                        _context3.next = 2;
-                        return fetch(item.outline, {
-                          cache: 'no-store'
-                        });
-                      case 2:
-                        response = _context3.sent;
-                        _context3.next = 3;
-                        return response.text();
-                      case 3:
-                        svgText = _context3.sent;
-                        loader = new SVGLoader();
-                        parsed = loader.parse(svgText);
-                        if (!isEmpty(parsed.paths)) {
-                          _context3.next = 4;
-                          break;
-                        }
-                        return _context3.abrupt("return", null);
-                      case 4:
-                        return _context3.abrupt("return", {
-                          paths: parsed.paths,
-                          svgWidth: parseFloat(parsed.xml.getAttribute('width')) || ((_parsed$xml$viewBox = parsed.xml.viewBox) === null || _parsed$xml$viewBox === void 0 || (_parsed$xml$viewBox = _parsed$xml$viewBox.animVal) === null || _parsed$xml$viewBox === void 0 ? void 0 : _parsed$xml$viewBox.width) || 0,
-                          svgHeight: parseFloat(parsed.xml.getAttribute('height')) || ((_parsed$xml$viewBox2 = parsed.xml.viewBox) === null || _parsed$xml$viewBox2 === void 0 || (_parsed$xml$viewBox2 = _parsed$xml$viewBox2.animVal) === null || _parsed$xml$viewBox2 === void 0 ? void 0 : _parsed$xml$viewBox2.height) || 0,
-                          reverse: !parseFloat(parsed.xml.getAttribute('height'))
-                        });
-                      case 5:
-                        _context3.prev = 5;
-                        _t = _context3["catch"](1);
-                        console.error('Failed to load SVG:', item.outline, _t);
-                        return _context3.abrupt("return", null);
-                      case 6:
-                      case "end":
-                        return _context3.stop();
-                    }
-                  }, _callee3, null, [[1, 5]]);
-                }));
-                return function (_x3) {
-                  return _ref5.apply(this, arguments);
-                };
-              }());
-              _context4.next = 1;
-              return Promise.all(svgLoadPromises);
-            case 1:
-              outlineData = _context4.sent;
-              setOutlineSVGData(outlineData);
-            case 2:
-            case "end":
-              return _context4.stop();
-          }
-        }, _callee4);
-      }));
-      return function loadSVGs() {
-        return _ref4.apply(this, arguments);
+        return _ref2.apply(this, arguments);
       };
     }();
     var initCatalog = /*#__PURE__*/function () {
-      var _ref6 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
-        return _regeneratorRuntime.wrap(function (_context5) {
-          while (1) switch (_context5.prev = _context5.next) {
+      var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+        return _regeneratorRuntime.wrap(function (_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
             case 0:
-              _context5.next = 1;
+              _context3.next = 1;
               return initMyCatalog();
             case 1:
-              _context5.next = 2;
+              _context3.next = 2;
               return loadMoldings();
             case 2:
-              _context5.next = 3;
-              return loadSVGs();
-            case 3:
             case "end":
-              return _context5.stop();
+              return _context3.stop();
           }
-        }, _callee5);
+        }, _callee3);
       }));
       return function initCatalog() {
-        return _ref6.apply(this, arguments);
+        return _ref3.apply(this, arguments);
       };
     }();
     initCatalog();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [data, id]);
-
-  // Register items once SVGs are loaded
-  useEffect(function () {
-    if (!outlineSVGData.length) return;
-    var Item = [];
-    data.forEach(function (obj, index) {
-      Item.push(exporter(_objectSpread(_objectSpread({}, obj), {}, {
-        type: 'cabinet',
-        outlineSVGData: outlineSVGData[index],
-        render2DItem: render2DItem,
-        render3DItem: render3DItem
-      })));
-    });
-    appliances.forEach(function (obj) {
-      Item.push(exporter(_objectSpread(_objectSpread({}, obj), {}, {
-        render2DItem: render2DItem,
-        render3DItem: render3DApplianceItem,
-        type: 'appliance'
-      })));
-    });
-    lighting.forEach(function (obj) {
-      Item.push(exporter(_objectSpread(_objectSpread({}, obj), {}, {
-        type: 'lighting',
-        render2DItem: render2DItem,
-        render3DItem: render3DLightingItem
-      })));
-    });
-    furnishing.forEach(function (obj) {
-      Item.push(exporter(_objectSpread(_objectSpread({}, obj), {}, {
-        type: 'furnishing',
-        render2DItem: render2DItem,
-        render3DItem: render3DApplianceItem
-      })));
-    });
-    for (var x in Item) MyCatalog.registerElement(Item[x]);
-  }, [outlineSVGData, data, appliances, furnishing, lighting]);
+  }, [id]);
   return /*#__PURE__*/React.createElement(AppContext.Provider, null, /*#__PURE__*/React.createElement(Provider, {
     store: store
   }, /*#__PURE__*/React.createElement(ToolErrorBoundary, {
@@ -470,7 +340,6 @@ export default function LiteRenderer(props) {
     stateExtractor: function stateExtractor(state) {
       return state.get('KitchenConfigurator');
     },
-    data: data,
     configData: configData,
     externalEvent: externalEvent,
     onInternalEvent: onInternalEvent
@@ -483,7 +352,6 @@ LiteRenderer.propTypes = {
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   projectElement: PropTypes.arrayOf(PropTypes.object),
-  dataBundle: PropTypes.any,
   configData: PropTypes.any,
   catalog: PropTypes.oneOfType([PropTypes.object, PropTypes.instanceOf(Models.Catalog)]),
   logoImg: PropTypes.any,

package/es/actions/items-actions.js

@@ -231,12 +231,6 @@ export function setDoorStyle(doorStyle, itemCDS, isAll) {
     isAll: isAll
   };
 }
-export function changeDistance(distancePayload) {
-  return {
-    type: CHANGE_DISTANCE,
-    distancePayload: distancePayload
-  };
-}
 export function setCounterTop(counterTop) {
   return {
     type: SET_COUNTER_TOP,

package/es/class/item.js

@@ -1265,42 +1265,11 @@ var Item = /*#__PURE__*/function () {
         updatedState: state
       };
     }
-  }, {
-    key: "changeDistance",
-    value: function changeDistance(state, distancePayload) {
-      var _state9 = state,
-        scene = _state9.scene;
-      var Left = distancePayload.distanceLeft;
-      var Right = distancePayload.distanceRight;
-      var Back = distancePayload.distanceBack;
-      var Front = distancePayload.distanceFront;
-      var LeftRotRad = Left ? 180 : null;
-      var RightRotRad = Right ? 0 : null;
-      var BackRotRad = Back ? -90 : null;
-      var FrontRotRad = Front ? 90 : null;
-      var directR = LeftRotRad || RightRotRad || BackRotRad || FrontRotRad;
-      var dist = Left || Right || Back || Front;
-      var layerID = scene.get('selectedLayer');
-      var layer = scene.layers.get(layerID).toJS();
-      var selectedItemId = layer.selected.items[0];
-      var selectedItem = layer.items[selectedItemId];
-      if (selectedItem) {
-        var renderedR = selectedItem.rotation || 0;
-        var rotRad = (directR + renderedR) / 180 * Math.PI;
-        var newX = selectedItem.x + convert(dist * Math.cos(rotRad)).from('in').to('cm');
-        var newY = selectedItem.y + convert(dist * Math.sin(rotRad)).from('in').to('cm');
-        state = state.setIn(['scene', 'layers', layerID, 'items', layer.selected.items[0], 'x'], newX);
-        state = state.setIn(['scene', 'layers', layerID, 'items', layer.selected.items[0], 'y'], newY);
-      }
-      return {
-        updatedState: state
-      };
-    }
   }, {
     key: "setCounterTop",
     value: function setCounterTop(state, counterTop) {
-      var _state0 = state,
-        scene = _state0.scene;
+      var _state9 = state,
+        scene = _state9.scene;
       var layerID = scene.get('selectedLayer');
       var layers = scene.layers.get(layerID);
       layers = layers.mergeIn(['counterTop'], counterTop);
@@ -1344,8 +1313,8 @@ var Item = /*#__PURE__*/function () {
   }, {
     key: "setDoorHandle",
     value: function setDoorHandle(state, doorHandle) {
-      var _state1 = state,
-        scene = _state1.scene;
+      var _state0 = state,
+        scene = _state0.scene;
       var layerID = scene.get('selectedLayer');
       var layer = scene.layers.get(layerID);
       layer = layer.mergeIn(['doorHandle'], doorHandle);
@@ -1369,8 +1338,8 @@ var Item = /*#__PURE__*/function () {
   }, {
     key: "setHandleMaterial",
     value: function setHandleMaterial(state, material) {
-      var _state10 = state,
-        scene = _state10.scene;
+      var _state1 = state,
+        scene = _state1.scene;
       var layerID = scene.get('selectedLayer');
       var layers = scene.layers.get(layerID);
       var items = layers.items;
@@ -1395,8 +1364,8 @@ var Item = /*#__PURE__*/function () {
   }, {
     key: "setWallColor",
     value: function setWallColor(state, wallColor) {
-      var _state11 = state,
-        scene = _state11.scene;
+      var _state10 = state,
+        scene = _state10.scene;
       var layerID = scene.get('selectedLayer');
       var layer = scene.layers.get(layerID);
       layer = layer.merge({
@@ -1422,8 +1391,8 @@ var Item = /*#__PURE__*/function () {
   }, {
     key: "setBacksplash",
     value: function setBacksplash(state, backsplash) {
-      var _state12 = state,
-        scene = _state12.scene;
+      var _state11 = state,
+        scene = _state11.scene;
       var layerID = scene.get('selectedLayer');
       var layer = scene.layers.get(layerID);
       var dataJSON = layer.toJS();
@@ -1451,8 +1420,8 @@ var Item = /*#__PURE__*/function () {
   }, {
     key: "setMolding",
     value: function setMolding(state, molding, isAll) {
-      var _state13 = state,
-        scene = _state13.scene;
+      var _state12 = state,
+        scene = _state12.scene;
       var layerID = scene.get('selectedLayer');
       var layer = scene.layers.get(layerID);
       if (isAll) {
@@ -1541,8 +1510,8 @@ var Item = /*#__PURE__*/function () {
   }, {
     key: "updateMolding",
     value: function updateMolding(state) {
-      var _state14 = state,
-        scene = _state14.scene;
+      var _state13 = state,
+        scene = _state13.scene;
       var layerID = scene.get('selectedLayer');
       var layer = scene.layers.get(layerID);
       var selectedItem = layer.getIn(['items', layer.selected.toJS().items[0]]);
@@ -1663,8 +1632,8 @@ var Item = /*#__PURE__*/function () {
   }, {
     key: "setBacksplashVisible",
     value: function setBacksplashVisible(state, itemID, backsplashVisible) {
-      var _state15 = state,
-        scene = _state15.scene;
+      var _state14 = state,
+        scene = _state14.scene;
       var layerID = scene.get('selectedLayer');
       var layer = scene.layers.get(layerID);
       layer = layer.mergeIn(['items', itemID, 'backsplashVisible'], backsplashVisible);
@@ -1684,8 +1653,8 @@ var Item = /*#__PURE__*/function () {
   }, {
     key: "setApplianceMaterial",
     value: function setApplianceMaterial(state, material) {
-      var _state16 = state,
-        scene = _state16.scene;
+      var _state15 = state,
+        scene = _state15.scene;
       var layerID = scene.get('selectedLayer');
       var layers = scene.layers.get(layerID);
       var items = layers.items;
@@ -1709,8 +1678,8 @@ var Item = /*#__PURE__*/function () {
   }, {
     key: "setModelling",
     value: function setModelling(state, molding) {
-      var _state17 = state,
-        scene = _state17.scene;
+      var _state16 = state,
+        scene = _state16.scene;
       var layerID = scene.get('selectedLayer');
       var layers = scene.layers.get(layerID);
       var items = layers.items;
@@ -1820,8 +1789,8 @@ var Item = /*#__PURE__*/function () {
   }, {
     key: "toggleLoadingCabinet",
     value: function toggleLoadingCabinet(state) {
-      var _state18 = state,
-        scene = _state18.scene;
+      var _state17 = state,
+        scene = _state17.scene;
       console.log('scene.isLoadingCabinet: ', !scene.isLoadingCabinet);
       // scene = scene.set('isLoadingCabinet', !scene.isLoadingCabinet);
       // state = state.set('scene', scene);
@@ -1833,8 +1802,8 @@ var Item = /*#__PURE__*/function () {
   }, {
     key: "endLoading",
     value: function endLoading(state) {
-      var _state19 = state,
-        scene = _state19.scene;
+      var _state18 = state,
+        scene = _state18.scene;
       state = state.setIn(['scene', 'loadFlag'], true);
       return {
         updatedState: state

package/es/constants.js

@@ -660,6 +660,21 @@ export var RIGHT = 'Right';
 export var TOP = 'Top';
 export var BOTTOM = 'Bottom';
 
+// distance direction angle
+export var LEFT_DIST_ANG = 0;
+export var RIGHT_DIST_ANG = 180;
+export var BACK_DIST_ANG = 90;
+export var FRONT_DIST_ANG = -90;
+
+// element attributes
+export var ATT_ITEM_POS = 'pos';
+export var ATT_ITEM_ROTATION = 'rotation';
+export var ATT_LINE_LENGTH = 'lineLength';
+export var ATT_VERTEXT_ONE = 'vertexOne';
+export var ATT_VERTEXT_TWO = 'vertexTwo';
+export var ATT_HOLE_OFFSET_A = 'offsetA';
+export var ATT_HOLE_OFFSET_B = 'offsetB';
+
 // external event type
 export var EXTERNAL_EVENT_SYNC_SCENE = 'EXTERNAL_EVENT_SYNC_SCENE'; // Host request the scene data to 3DTool for sync  : Host -> 3DTool
 export var INTERNAL_EVENT_SYNC_SCENE = 'INTERNAL_EVENT_SYNC_SCENE'; // 3DTool send the scene data to Host for sync : 3DTool -> HostApp
@@ -682,7 +697,8 @@ export var EXTERNAL_EVENT_ZOOM_OUT = 'EXTERNAL_EVENT_ZOOM_OUT';
 export var EXTERNAL_EVENT_UNDO = 'EXTERNAL_EVENT_UNDO';
 export var EXTERNAL_EVENT_REDO = 'EXTERNAL_EVENT_REDO';
 export var EXTERNAL_EVENT_SET_MOLDING = 'EXTERNAL_EVENT_SET_MOLDING';
-export var EXTERNAL_EVENT_PROJECT_SETTING = 'EXTERNAL_EVENT_PROJECT_SETTING';
+export var EXTERNAL_EVENT_PROJECT_SETTING = 'EXTERNAL_EVENT_PROJECT_SETTING'; // project setting event
+export var EXTERNAL_EVENT_UPDATE_ATTRIBUTE = 'EXTERNAL_EVENT_UPDATE_ATTRIBUTE'; // update the element's attributes (distance, rotation...) in the property window
 
 // internal event type
 export var INTERNAL_EVENT_SELECT_ELEMENT = 'INTERNAL_EVENT_SELECT_ELEMENT';

package/es/devLiteRenderer.js

@@ -7,7 +7,6 @@ import projectItemsCatalog from "./mocks/projectItemsCatalog.json";
 import mockProps from "./mocks/mockProps.json";
 import mockDataBundle from "./mocks/dataBundle2.json";
 import cabinetPaylod from "./mocks/cabinetPayload2.json";
-import doorStylePaylod from "./mocks/doorStylePayload.json";
 import doorStylePaylod2 from "./mocks/doorStylePayload2.json";
 import itemCDSPayload from "./mocks/itemCDSPayload.json";
 import rectangleData from "./mocks/rectangleShape.json";
@@ -16,7 +15,7 @@ import distancePayload from "./mocks/distancePayload.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_SET_INITIAL_DATA, 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_CHANGE_DISTANCE, EXTERNAL_EVENT_SYNC_SCENE, EXTERNAL_EVENT_LOAD_PROJECT, INTERNAL_EVENT_ITEMS_CATALOG } 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_SET_INITIAL_DATA, 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_LOAD_PROJECT, INTERNAL_EVENT_ITEMS_CATALOG, EXTERNAL_EVENT_UPDATE_ATTRIBUTE, BACK_DIST_ANG, ATT_ITEM_POS, ATT_ITEM_ROTATION, ATT_LINE_LENGTH } from "./constants";
 
 // --- renderer props ---
 var options = {
@@ -60,7 +59,7 @@ function WorkSpace(props) {
       type: EXTERNAL_EVENT_SET_INITIAL_DATA,
       payload: {
         doorStyle: {
-          doorStyle: doorStylePaylod
+          doorStyle: doorStylePaylod2
         }
       }
     };
@@ -68,7 +67,17 @@ function WorkSpace(props) {
   }, []);
   return /*#__PURE__*/React.createElement("div", {
     className: "flex gap-4"
-  }, /*#__PURE__*/React.createElement(Button, {
+  }, /*#__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 = {
@@ -302,26 +311,46 @@ function WorkSpace(props) {
     actionType: "danger",
     onClick: function onClick() {
       var evt = {
-        type: EXTERNAL_EVENT_CHANGE_DISTANCE,
-        payload: distancePayload
+        type: EXTERNAL_EVENT_UPDATE_ATTRIBUTE,
+        payload: {
+          attributeName: ATT_ITEM_POS,
+          value: {
+            directionAng: BACK_DIST_ANG,
+            oldDistance: 0,
+            newDistance: 10
+          }
+        }
       };
       setExternalEvent(evt);
     }
-  }, "Setting-Distance"), /*#__PURE__*/React.createElement(Button, {
+  }, "OP-Cabinet Back Distance to 10"), /*#__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: {}
+        type: EXTERNAL_EVENT_UPDATE_ATTRIBUTE,
+        payload: {
+          attributeName: ATT_ITEM_ROTATION,
+          value: 45
+        }
+      };
+      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);
     }
-  }, "Event-sync"), /*#__PURE__*/React.createElement(LiteRenderer, {
+  }, "OP-Wall Length to 100")), /*#__PURE__*/React.createElement(LiteRenderer, {
     width: props.width,
     height: props.height,
     projectElement: mockProps.projectElement,
-    dataBundle: mockDataBundle,
     configData: mockProps.configData,
     options: options,
     logoImg: "/assets/logo.png",