kitchen-simulator 2.0.16 → 2.0.17

package/es/components/viewer2d/viewer2d.js

@@ -567,6 +567,7 @@ export default function Viewer2D(_ref, _ref2) {
     // let evt = new Event('mousemove-planner-event');
     // evt.viewerEvent = viewerEvent;
     // document.dispatchEvent(evt);
+    var elementPrototype, internalType;
     var _mapCursorPosition = mapCursorPosition(viewerEvent),
       x = _mapCursorPosition.x,
       y = _mapCursorPosition.y;
@@ -580,56 +581,168 @@ export default function Viewer2D(_ref, _ref2) {
         y: y - sPoint.y
       };
       projectActions.selectAll(differs);
-    } else switch (mode) {
-      case constants.MODE_DRAWING_LINE:
-        // check whether the drawing line is started.
-        if (drawStart || state.getIn(['scene', 'setLineAttributes'])) {
+    } else {
+      switch (mode) {
+        case constants.MODE_DRAWING_LINE:
+          elementPrototype = 'lines';
+          internalType = INTERNAL_EVENT_DRAW_ELEMENT;
+          break;
+        case constants.MODE_DRAWING_HOLE:
+          elementPrototype = 'holes';
+          internalType = INTERNAL_EVENT_DRAW_ELEMENT;
+          break;
+        case constants.MODE_DRAWING_ITEM:
+          elementPrototype = 'items';
+          internalType = INTERNAL_EVENT_DRAW_ELEMENT;
+          break;
+        case constants.MODE_DRAGGING_HOLE:
+          elementPrototype = 'holes';
+          internalType = INTERNAL_EVENT_DRAG_ELEMENT;
+          break;
+        case constants.MODE_DRAGGING_LINE:
+          elementPrototype = 'lines';
+          internalType = INTERNAL_EVENT_DRAG_ELEMENT;
+          break;
+        case constants.MODE_DRAGGING_VERTEX:
+          elementPrototype = 'lines';
+          internalType = INTERNAL_EVENT_DRAG_ELEMENT;
+          break;
+        case constants.MODE_DRAGGING_ITEM:
+          elementPrototype = 'items';
+          internalType = INTERNAL_EVENT_DRAG_ELEMENT;
+          break;
+        case constants.MODE_ROTATING_ITEM:
+          elementPrototype = 'items';
+          internalType = INTERNAL_EVENT_ROTATE_ELEMENT;
+          break;
+      }
+      switch (mode) {
+        case constants.MODE_DRAWING_LINE:
+          // check whether the drawing line is started.
           var lineID = state.getIn(['scene', 'layers', layerID, 'selected', 'lines']).first();
-          var _vertices = state.getIn(['scene', 'layers', layerID, 'vertices']).toJS();
           var lines = state.getIn(['scene', 'layers', layerID, 'lines']).toJS();
           var drawingLine = state.getIn(['scene', 'layers', layerID, 'lines', lineID]).toJS();
           var tlines = [];
-          setdrawStart(false);
-          // get the lines that have same points with drawing line.
-          getRelatedLines(tlines, drawingLine, _vertices, lines);
-          setRelatedLines(tlines);
-          linesActions.updateDrawingLine(x, y, tlines, state.snapMask);
-        } else {
-          linesActions.updateDrawingLine(x, y, relatedLines, state.snapMask);
-        }
-        // Blocked 90 degree snap.
-        // let prevVertexID = state.getIn(['scene', 'layers', layerID, 'selected', 'vertices']).toJS()[0];
-        // let prevVertex = state.getIn(['scene', 'layers', layerID, 'vertices', prevVertexID]);
-        // let dx = Math.abs(x - prevVertex.x);
-        // let dy = Math.abs(y - prevVertex.y);
-        // if (dx > dy) y = prevVertex.y
-        // else x = prevVertex.x;
-        break;
-      case constants.MODE_DRAWING_HOLE:
-        holesActions.updateDrawingHole(layerID, x, y);
-        break;
-      case constants.MODE_DRAWING_ITEM:
-        var _layer = scene.layers.get(layerID);
-        var flag = false;
-        _layer.items.some(function (item) {
-          if (item.selected) {
-            item.counterTop.uri = _layer.counterTop.uri;
-            current_sel_obj_id = item.id;
-            flag = true;
+          if (drawStart || state.getIn(['scene', 'setLineAttributes'])) {
+            var _vertices = state.getIn(['scene', 'layers', layerID, 'vertices']).toJS();
+            setdrawStart(false);
+            // get the lines that have same points with drawing line.
+            getRelatedLines(tlines, drawingLine, _vertices, lines);
+            setRelatedLines(tlines);
+            linesActions.updateDrawingLine(x, y, tlines, state.snapMask);
+          } else {
+            linesActions.updateDrawingLine(x, y, relatedLines, state.snapMask);
           }
-        });
-        if (current_sel_obj_id === null || !flag) {
-          itemsActions.updateDrawingItem(layerID, x, y);
-          endPoint.x = x;
-          endPoint.y = y;
-        } else {
+
+          // Blocked 90 degree snap.
+          // let prevVertexID = state.getIn(['scene', 'layers', layerID, 'selected', 'vertices']).toJS()[0];
+          // let prevVertex = state.getIn(['scene', 'layers', layerID, 'vertices', prevVertexID]);
+          // let dx = Math.abs(x - prevVertex.x);
+          // let dy = Math.abs(y - prevVertex.y);
+          // if (dx > dy) y = prevVertex.y
+          // else x = prevVertex.x;
+          break;
+        case constants.MODE_DRAWING_HOLE:
+          holesActions.updateDrawingHole(layerID, x, y);
+          break;
+        case constants.MODE_DRAWING_ITEM:
+          var _layer = scene.layers.get(layerID);
+          var flag = false;
+          _layer.items.some(function (item) {
+            if (item.selected) {
+              item.counterTop.uri = _layer.counterTop.uri;
+              current_sel_obj_id = item.id;
+              flag = true;
+            }
+          });
+          if (current_sel_obj_id === null || !flag) {
+            itemsActions.updateDrawingItem(layerID, x, y);
+            endPoint.x = x;
+            endPoint.y = y;
+          } else {
+            prepareSnap();
+            var _GeometryUtils$calcSn = GeometryUtils.calcSnap(allItemRect, allItemSnap, allLineRects, allLineSnap, allRect, x, y, allArea),
+              nx = _GeometryUtils$calcSn.nx,
+              ny = _GeometryUtils$calcSn.ny,
+              rot = _GeometryUtils$calcSn.rot,
+              rotRad = _GeometryUtils$calcSn.rotRad;
+            var _val = {
+              pos: {
+                x: x,
+                y: y
+              },
+              rotRad: rotRad,
+              size: allItemRect.cur && allItemRect.cur.size,
+              layoutpos: allItemRect.cur && allItemRect.cur.layoutpos,
+              is_corner: allItemRect.cur && allItemRect.cur.is_corner
+            };
+            var _GeometryUtils$getAll = GeometryUtils.getAllHoleRect(scene, _val),
+              _isSect = _GeometryUtils$getAll.isSect,
+              _snap = _GeometryUtils$getAll.snap;
+            if (!isEmpty(_snap) && _isSect) {
+              if (_snap.length == 1) _val.pos = {
+                x: _snap[0].x,
+                y: _snap[0].y
+              };else {
+                if ((_snap[0].x - x) * (_snap[0].x - x) + (_snap[0].y - y) * (_snap[0].y - y) < (_snap[1].x - x) * (_snap[1].x - x) + (_snap[1].y - y) * (_snap[1].y - y)) _val.pos = {
+                  x: _snap[0].x,
+                  y: _snap[0].y
+                };else _val.pos = {
+                  x: _snap[1].x,
+                  y: _snap[1].y
+                };
+              }
+              var interSect = GeometryUtils.validInterSect(allItemRect.others, _val);
+              if (interSect) {
+                nx = _val.pos.x;
+                ny = _val.pos.y;
+              }
+            }
+            _val.pos = {
+              x: nx,
+              y: ny
+            };
+            var _isrectSect = GeometryUtils.validInterSect(allItemRect.others, _val);
+            if (_isrectSect && _isSect) {
+              itemsActions.updateDraggingItemChanged(nx, ny, layerID, current_sel_obj_id);
+              itemsActions.updateRotatingItemChanged(rot, layerID, current_sel_obj_id);
+              endPoint.x = nx;
+              endPoint.y = ny;
+            }
+            if (allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Cook Top') || allItemRect.cur && allItemRect.cur.itemInfo.name.includes('cabinet')) {
+              itemsActions.updateDraggingItemChanged(nx, ny, layerID, current_sel_obj_id);
+              itemsActions.updateRotatingItemChanged(rot, layerID, current_sel_obj_id);
+              endPoint.x = nx;
+              endPoint.y = ny;
+            }
+            if (allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Hood') || allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Range') || allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Cook Top')) {
+              itemsActions.updateDraggingItemChanged(nx, ny, layerID, current_sel_obj_id);
+              itemsActions.updateRotatingItemChanged(rot, layerID, current_sel_obj_id);
+              endPoint.x = nx;
+              endPoint.y = ny;
+            }
+          }
+          break;
+        case constants.MODE_DRAGGING_HOLE:
+          holesActions.updateDraggingHole(x, y);
+          break;
+        case constants.MODE_DRAGGING_LINE:
+          linesActions.updateDraggingLine(x, y, relatedLines, state.snapMask);
+          break;
+        case constants.MODE_DRAGGING_VERTEX:
+          var vertices = state.getIn(['scene', 'layers', layerID, 'vertices']).toJS();
+          getConnectedLines();
+          var result = getEndPoint(vertices, x, y, 'DRAGGING_VERTEX');
+          verticesActions.updateDraggingVertex(result.x, result.y, state.snapMask);
+          break;
+        case constants.MODE_DRAGGING_ITEM:
           prepareSnap();
-          var _GeometryUtils$calcSn = GeometryUtils.calcSnap(allItemRect, allItemSnap, allLineRects, allLineSnap, allRect, x, y, allArea),
-            nx = _GeometryUtils$calcSn.nx,
-            ny = _GeometryUtils$calcSn.ny,
-            rot = _GeometryUtils$calcSn.rot,
-            rotRad = _GeometryUtils$calcSn.rotRad;
-          var _val = {
+          var _GeometryUtils$calcSn2 = GeometryUtils.calcSnap(allItemRect, allItemSnap, allLineRects, allLineSnap, allRect, x, y, allArea),
+            nx = _GeometryUtils$calcSn2.nx,
+            ny = _GeometryUtils$calcSn2.ny,
+            rot = _GeometryUtils$calcSn2.rot,
+            rotRad = _GeometryUtils$calcSn2.rotRad;
+          var val = {
             pos: {
               x: x,
               y: y
@@ -639,125 +752,58 @@ export default function Viewer2D(_ref, _ref2) {
             layoutpos: allItemRect.cur && allItemRect.cur.layoutpos,
             is_corner: allItemRect.cur && allItemRect.cur.is_corner
           };
-          var _GeometryUtils$getAll = GeometryUtils.getAllHoleRect(scene, _val),
-            _isSect = _GeometryUtils$getAll.isSect,
-            _snap = _GeometryUtils$getAll.snap;
-          if (!isEmpty(_snap) && _isSect) {
-            if (_snap.length == 1) _val.pos = {
-              x: _snap[0].x,
-              y: _snap[0].y
-            };else {
-              if ((_snap[0].x - x) * (_snap[0].x - x) + (_snap[0].y - y) * (_snap[0].y - y) < (_snap[1].x - x) * (_snap[1].x - x) + (_snap[1].y - y) * (_snap[1].y - y)) _val.pos = {
-                x: _snap[0].x,
-                y: _snap[0].y
-              };else _val.pos = {
-                x: _snap[1].x,
-                y: _snap[1].y
+          var _GeometryUtils$getAll2 = GeometryUtils.getAllHoleRect(scene, val),
+            isSect = _GeometryUtils$getAll2.isSect,
+            snap = _GeometryUtils$getAll2.snap;
+          if (!isEmpty(snap) && isSect) {
+            if (snap.length == 1) val.pos = {
+              x: snap[0].x,
+              y: snap[0].y
+            };else if (snap.length == 2) {
+              if ((snap[0].x - x) * (snap[0].x - x) + (snap[0].y - y) * (snap[0].y - y) < (snap[1].x - x) * (snap[1].x - x) + (snap[1].y - y) * (snap[1].y - y)) val.pos = {
+                x: snap[0].x,
+                y: snap[0].y
+              };else val.pos = {
+                x: snap[1].x,
+                y: snap[1].y
               };
             }
-            var interSect = GeometryUtils.validInterSect(allItemRect.others, _val);
-            if (interSect) {
-              nx = _val.pos.x;
-              ny = _val.pos.y;
+            var _interSect = GeometryUtils.validInterSect(allItemRect.others, val);
+            if (_interSect) {
+              nx = val.pos.x;
+              ny = val.pos.y;
             }
           }
-          _val.pos = {
+          val.pos = {
             x: nx,
             y: ny
           };
-          var _isrectSect = GeometryUtils.validInterSect(allItemRect.others, _val);
-          if (_isrectSect && _isSect) {
+          var isrectSect = GeometryUtils.validInterSect(allItemRect.others, val);
+          if (isrectSect && isSect) {
             itemsActions.updateDraggingItemChanged(nx, ny, layerID, current_sel_obj_id);
             itemsActions.updateRotatingItemChanged(rot, layerID, current_sel_obj_id);
-            endPoint.x = nx;
-            endPoint.y = ny;
           }
-          if (allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Cook Top') || allItemRect.cur && allItemRect.cur.itemInfo.name.includes('cabinet')) {
+          if (allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Cook Top') || allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Cabinet')) {
             itemsActions.updateDraggingItemChanged(nx, ny, layerID, current_sel_obj_id);
             itemsActions.updateRotatingItemChanged(rot, layerID, current_sel_obj_id);
-            endPoint.x = nx;
-            endPoint.y = ny;
           }
           if (allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Hood') || allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Range') || allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Cook Top')) {
             itemsActions.updateDraggingItemChanged(nx, ny, layerID, current_sel_obj_id);
             itemsActions.updateRotatingItemChanged(rot, layerID, current_sel_obj_id);
-            endPoint.x = nx;
-            endPoint.y = ny;
-          }
-        }
-        break;
-      case constants.MODE_DRAGGING_HOLE:
-        holesActions.updateDraggingHole(x, y);
-        break;
-      case constants.MODE_DRAGGING_LINE:
-        linesActions.updateDraggingLine(x, y, relatedLines, state.snapMask);
-        break;
-      case constants.MODE_DRAGGING_VERTEX:
-        var vertices = state.getIn(['scene', 'layers', layerID, 'vertices']).toJS();
-        getConnectedLines();
-        var result = getEndPoint(vertices, x, y, 'DRAGGING_VERTEX');
-        verticesActions.updateDraggingVertex(result.x, result.y, state.snapMask);
-        break;
-      case constants.MODE_DRAGGING_ITEM:
-        prepareSnap();
-        var _GeometryUtils$calcSn2 = GeometryUtils.calcSnap(allItemRect, allItemSnap, allLineRects, allLineSnap, allRect, x, y, allArea),
-          nx = _GeometryUtils$calcSn2.nx,
-          ny = _GeometryUtils$calcSn2.ny,
-          rot = _GeometryUtils$calcSn2.rot,
-          rotRad = _GeometryUtils$calcSn2.rotRad;
-        var val = {
-          pos: {
-            x: x,
-            y: y
-          },
-          rotRad: rotRad,
-          size: allItemRect.cur && allItemRect.cur.size,
-          layoutpos: allItemRect.cur && allItemRect.cur.layoutpos,
-          is_corner: allItemRect.cur && allItemRect.cur.is_corner
-        };
-        var _GeometryUtils$getAll2 = GeometryUtils.getAllHoleRect(scene, val),
-          isSect = _GeometryUtils$getAll2.isSect,
-          snap = _GeometryUtils$getAll2.snap;
-        if (!isEmpty(snap) && isSect) {
-          if (snap.length == 1) val.pos = {
-            x: snap[0].x,
-            y: snap[0].y
-          };else if (snap.length == 2) {
-            if ((snap[0].x - x) * (snap[0].x - x) + (snap[0].y - y) * (snap[0].y - y) < (snap[1].x - x) * (snap[1].x - x) + (snap[1].y - y) * (snap[1].y - y)) val.pos = {
-              x: snap[0].x,
-              y: snap[0].y
-            };else val.pos = {
-              x: snap[1].x,
-              y: snap[1].y
-            };
-          }
-          var _interSect = GeometryUtils.validInterSect(allItemRect.others, val);
-          if (_interSect) {
-            nx = val.pos.x;
-            ny = val.pos.y;
           }
-        }
-        val.pos = {
-          x: nx,
-          y: ny
-        };
-        var isrectSect = GeometryUtils.validInterSect(allItemRect.others, val);
-        if (isrectSect && isSect) {
-          itemsActions.updateDraggingItemChanged(nx, ny, layerID, current_sel_obj_id);
-          itemsActions.updateRotatingItemChanged(rot, layerID, current_sel_obj_id);
-        }
-        if (allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Cook Top') || allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Cabinet')) {
-          itemsActions.updateDraggingItemChanged(nx, ny, layerID, current_sel_obj_id);
-          itemsActions.updateRotatingItemChanged(rot, layerID, current_sel_obj_id);
-        }
-        if (allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Hood') || allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Range') || allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Cook Top')) {
-          itemsActions.updateDraggingItemChanged(nx, ny, layerID, current_sel_obj_id);
-          itemsActions.updateRotatingItemChanged(rot, layerID, current_sel_obj_id);
-        }
-        break;
-      case constants.MODE_ROTATING_ITEM:
-        itemsActions.updateRotatingItem(x, y);
-        break;
+          break;
+        case constants.MODE_ROTATING_ITEM:
+          itemsActions.updateRotatingItem(x, y);
+          break;
+      }
+    }
+    if (!isEmpty(elementPrototype)) {
+      var elementID = state.getIn(['scene', 'layers', layerID, 'selected', elementPrototype]).first();
+      var currentObject = state.getIn(['scene', 'layers', layerID, elementPrototype, elementID]);
+      onInternalEvent === null || onInternalEvent === void 0 || onInternalEvent({
+        type: internalType,
+        value: currentObject === null || currentObject === void 0 ? void 0 : currentObject.toJS()
+      });
     }
     viewerEvent.originalEvent.stopPropagation();
   };
@@ -779,6 +825,10 @@ export default function Viewer2D(_ref, _ref2) {
         return;
       }
     }
+    if (mode === constants.MODE_DRAWING_ITEM) {
+      endPoint.x = x;
+      endPoint.y = y;
+    }
     if (mode === constants.MODE_IDLE) {
       var elementData = extractElementData(event.target);
       if (!elementData) return;
@@ -818,9 +868,22 @@ export default function Viewer2D(_ref, _ref2) {
             break;
         }
         var currentObject = state.getIn(['scene', 'layers', layerID, elementData.prototype, elementData.id]);
+        if (elementData.prototype === 'lines' && currentObject) {
+          // caculating length of selected line//
+          var v_a = layer.vertices.get(currentObject.vertices.get(0));
+          var v_b = layer.vertices.get(currentObject.vertices.get(1));
+          var distance = GeometryUtils.pointsDistance(v_a.x, v_a.y, v_b.x, v_b.y);
+          var _length = convert(distance).from('cm').to('in');
+          elementData.length = _length;
+          //////////////////////////////////////
+        }
+        // Adding length field to internal event payload when selected lines
+        var payloadValue = (elementData === null || elementData === void 0 ? void 0 : elementData.prototype) === 'lines' ? _objectSpread(_objectSpread({}, currentObject === null || currentObject === void 0 ? void 0 : currentObject.toJS()), {}, {
+          length: elementData === null || elementData === void 0 ? void 0 : elementData.length
+        }) : currentObject === null || currentObject === void 0 ? void 0 : currentObject.toJS();
         onInternalEvent === null || onInternalEvent === void 0 || onInternalEvent({
           type: INTERNAL_EVENT_SELECT_ELEMENT,
-          value: currentObject === null || currentObject === void 0 ? void 0 : currentObject.toJS()
+          value: payloadValue
         });
       } else {
         sPoint.x = x;
@@ -944,6 +1007,10 @@ export default function Viewer2D(_ref, _ref2) {
               if (document.getElementById('setting_dialog')) {
                 document.getElementById('setting_dialog').style.display = 'none';
               }
+              onInternalEvent === null || onInternalEvent === void 0 || onInternalEvent({
+                type: constants.INTERNAL_EVENT_REPLACE_CABINET,
+                value: state.getIn(['scene', 'layers', layerID, 'items', elementData.id]).toJS()
+              });
               itemsActions.selectItem(elementData.layer, elementData.id);
               replaceCabinet(true);
               break;

package/es/constants.js

@@ -693,6 +693,9 @@ export var ATT_HOLE_OFFSET_B = 'offsetB';
 export var PROP_FLIP_DOOR_HANDLE = 'flip_doorhandle';
 export var PROP_OPEN_DOORS = 'open_doors';
 export var PROP_ALTITUDE = 'altitude';
+export var PROP_RESIZE_WIDTH = 'width';
+export var PROP_RESIZE_HEIGHT = 'height';
+export var PROP_RESIZE_DEPTH = 'depth';
 export var MAX_ZOOM_IN_SCALE = Infinity;
 
 // external event type
@@ -724,10 +727,12 @@ export var EXTERNAL_EVENT_DUPLICATE_ELEMENT = 'EXTERNAL_EVENT_DUPLICATE_ELEMENT'
 export var EXTERNAL_EVENT_DELETE_ELEMENT = 'EXTERNAL_EVENT_DELETE_ELEMENT';
 export var EXTERNAL_EVENT_UPDATE_ATTRIBUTE = 'EXTERNAL_EVENT_UPDATE_ATTRIBUTE'; // update the element's attributes (distance, rotation...) in the property window
 export var EXTERNAL_EVENT_UPDATE_PROPERTY = 'EXTERNAL_EVENT_UPDATE_PROPERTY'; // update the element's property (flip_doorhandle, open_doors...) in the property window
+export var EXTERNAL_EVENT_REPLACE_CABINET = 'EXTERNAL_EVENT_REPLACE_CABINET';
 
 // internal event type
 export var INTERNAL_EVENT_UNSELECT_ALL = 'INTERNAL_EVENT_UNSELECT_ALL';
 export var INTERNAL_EVENT_SELECT_ELEMENT = 'INTERNAL_EVENT_SELECT_ELEMENT';
 export var INTERNAL_EVENT_DRAG_ELEMENT = 'INTERNAL_EVENT_DRAG_ELEMENT';
 export var INTERNAL_EVENT_DRAW_ELEMENT = 'INTERNAL_EVENT_DRAW_ELEMENT';
-export var INTERNAL_EVENT_ROTATE_ELEMENT = 'INTERNAL_EVENT_ROTATE_ELEMENT';
+export var INTERNAL_EVENT_ROTATE_ELEMENT = 'INTERNAL_EVENT_ROTATE_ELEMENT';
+export var INTERNAL_EVENT_REPLACE_CABINET = 'INTERNAL_EVENT_REPLACE_CABINET';

package/es/devLiteRenderer.js

@@ -12,10 +12,11 @@ import doorStylePaylod2 from "./mocks/doorStylePayload2.json";
 import itemCDSPayload from "./mocks/itemCDSPayload.json";
 import rectangleData from "./mocks/rectangleShape.json";
 import moldingPayload from "./mocks/moldingPayload.json";
+import replaceCabinetPayload from "./mocks/replaceCabinetPayload.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_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 } 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_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 } from "./constants";
 
 // --- renderer props ---
 var options = {
@@ -458,7 +459,35 @@ function WorkSpace(props) {
       };
       setExternalEvent(evt);
     }
-  }, "Centering Viewer2D")), /*#__PURE__*/React.createElement(LiteRenderer, {
+  }, "Centering Viewer2D"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_UPDATE_PROPERTY,
+        payload: {
+          propertyName: PROP_RESIZE_WIDTH,
+          // this property should be Map
+          value: new Map({
+            length: 68.57999780544007,
+            // cm
+            _length: 27,
+            // inch
+            _unit: 'in'
+          })
+        }
+      };
+      setExternalEvent(evt);
+    }
+  }, "Change width to 27\""), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_REPLACE_CABINET,
+        payload: replaceCabinetPayload // B12 Data
+      };
+      setExternalEvent(evt);
+    }
+  }, "Replace cabinet to B12")), /*#__PURE__*/React.createElement(LiteRenderer, {
     width: props.width,
     height: props.height,
     configData: mockProps.configData,