kitchen-simulator 2.0.31 → 2.0.41

package/es/actions/items-actions.js

@@ -78,11 +78,13 @@ export function selectToolDrawingItem3D(sceneComponentType) {
   };
 }
 export function updateDrawingItem(layerID, x, y) {
+  var isInitialPos = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   return {
     type: UPDATE_DRAWING_ITEM,
     layerID: layerID,
     x: x,
-    y: y
+    y: y,
+    isInitialPos: isInitialPos
   };
 }
 export function endDrawingItem(layerID, x, y) {

package/es/actions/project-actions.js

@@ -1,4 +1,4 @@
-import { NEW_PROJECT, LOAD_PROJECT, SAVE_PROJECT, OPEN_CATALOG, SELECT_TOOL_EDIT, UNSELECT_ALL, SET_PROPERTIES, SET_ITEMS_ATTRIBUTES, SET_LINES_ATTRIBUTES, SET_HOLES_ATTRIBUTES, REMOVE, INVERT, UNDO, REDO, UNCREATE, PROJECT_RE_NAME, RECREATE, ROLLBACK, OPEN_PROJECT_CONFIGURATOR, SET_PROJECT_PROPERTIES, SET_PROJECT_ID, INIT_CATALOG, UPDATE_MOUSE_COORDS, UPDATE_ZOOM_SCALE, TOGGLE_SNAP, CHANGE_CATALOG_PAGE, GO_BACK_TO_CATALOG_PAGE, THROW_ERROR, THROW_WARNING, COPY_PROPERTIES, PASTE_PROPERTIES, PUSH_LAST_SELECTED_CATALOG_ELEMENT_TO_HISTORY, ALTERATE_STATE, SET_MODE, ADD_HORIZONTAL_GUIDE, ADD_VERTICAL_GUIDE, ADD_CIRCULAR_GUIDE, REMOVE_HORIZONTAL_GUIDE, REMOVE_VERTICAL_GUIDE, REMOVE_CIRCULAR_GUIDE, REMOVE_DRAWING_SUPPORT, SELECT_ALL, SET_STATE_PROPERTIES, SHIFT2DOFF, SHIFT2DON, SET_IS_HELP, SET_IS_CABINET_DRAWING, ADD_ELEMENT_TO_CATALOG } from "../constants";
+import { NEW_PROJECT, LOAD_PROJECT, SAVE_PROJECT, OPEN_CATALOG, SELECT_TOOL_EDIT, UNSELECT_ALL, SET_PROPERTIES, SET_ITEMS_ATTRIBUTES, SET_LINES_ATTRIBUTES, SET_HOLES_ATTRIBUTES, REMOVE, INVERT, UNDO, REDO, UNCREATE, PROJECT_RE_NAME, RECREATE, ROLLBACK, OPEN_PROJECT_CONFIGURATOR, SET_PROJECT_PROPERTIES, SET_PROJECT_ID, INIT_CATALOG, UPDATE_MOUSE_COORDS, UPDATE_ZOOM_SCALE, TOGGLE_SNAP, CHANGE_CATALOG_PAGE, GO_BACK_TO_CATALOG_PAGE, THROW_ERROR, THROW_WARNING, COPY_PROPERTIES, PASTE_PROPERTIES, PUSH_LAST_SELECTED_CATALOG_ELEMENT_TO_HISTORY, ALTERATE_STATE, SET_MODE, ADD_HORIZONTAL_GUIDE, ADD_VERTICAL_GUIDE, ADD_CIRCULAR_GUIDE, REMOVE_HORIZONTAL_GUIDE, REMOVE_VERTICAL_GUIDE, REMOVE_CIRCULAR_GUIDE, REMOVE_DRAWING_SUPPORT, SELECT_ALL, SET_STATE_PROPERTIES, SHIFT2DOFF, SHIFT2DON, SET_IS_HELP, SET_IS_CABINET_DRAWING, ADD_ELEMENT_TO_CATALOG, CREATE_ROOM_WITH_SHAPE } from "../constants";
 export function setIsHelp(isHelp) {
   return {
     type: SET_IS_HELP,
@@ -285,4 +285,12 @@ export function selectAll() {
     type: SELECT_ALL,
     value: value
   };
+}
+export function createRoomWithShape(roomShapeType, width, height) {
+  return {
+    type: CREATE_ROOM_WITH_SHAPE,
+    width: width,
+    height: height,
+    roomShapeType: roomShapeType
+  };
 }

package/es/catalog/factories/area-factory-3d.js

@@ -76,7 +76,8 @@ export function createArea(element, layer, scene, textures) {
     color = SharedStyle.AREA_MESH_COLOR.unselected;
   }
   if (texture.uri === undefined || texture.uri == '') {
-    texture.uri = layer.floorStyle.uri;
+    // @todo THIS IS A TEMPORARY FIX TO HAVE A DEFAULT FLOOR TEXTURE
+    texture.uri = layer.floorStyle.uri || 'https://media.test.diydesignspace.com/uploads/CountTop/202203162950_2/texture/oak-barcelona-s.jpg';
   }
   var shape = new Shape();
   shape.moveTo(vertices[0].x, vertices[0].y);

package/es/catalog/utils/item-loader.js

@@ -995,6 +995,8 @@ export function render3DItem(element, layer, scene, sizeinfo, structure_json, is
         try {
           counterTop = counterTop.toJS();
         } catch (error) {
+          //@todo THIS IS A TEMPORARY FIX FOR COUNTERTOP TEXTURE UNDEFINED ISSUE
+          counterTop.uri = 'https://media.test.diydesignspace.com/uploads/CountTop/202105074107_5/texture/Unique_Calcatta_texture.jpg';
           console.log(error);
         }
       }

package/es/class/item.js

@@ -29,6 +29,7 @@ var Item = /*#__PURE__*/function () {
     key: "create",
     value: function create(state, layerID, type, x, y, width, height, rotation, isDuplication) {
       var molding = arguments.length > 9 && arguments[9] !== undefined ? arguments[9] : [];
+      var isInitialPos = arguments.length > 10 && arguments[10] !== undefined ? arguments[10] : false;
       var itemID = IDBroker.acquireID();
       var item = state.catalog.factoryElement(type, {
         id: itemID,
@@ -45,7 +46,8 @@ var Item = /*#__PURE__*/function () {
         x: x,
         y: y,
         rotation: rotation,
-        isDuplication: isDuplication
+        isDuplication: isDuplication,
+        isInitialPos: isInitialPos ? isInitialPos : false
       }, null, state);
       if (item.category === 'cabinet') {
         var _state$doorStyle;
@@ -588,13 +590,15 @@ var Item = /*#__PURE__*/function () {
   }, {
     key: "updateDrawingItem",
     value: function updateDrawingItem(state, layerID, x, y) {
+      var isInitialPos = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
       if (state.hasIn(['drawingSupport', 'currentID'])) {
         var mode = state.get('mode');
         if ([MODE_DRAWING_ITEM_3D].includes(mode)) {
           state = state.updateIn(['scene', 'layers', layerID, 'items', state.getIn(['drawingSupport', 'currentID'])], function (item) {
             return item && item.merge({
               x: x,
-              y: y
+              y: y,
+              isInitialPos: isInitialPos ? isInitialPos : false
             });
           });
           state = state.merge({
@@ -608,12 +612,13 @@ var Item = /*#__PURE__*/function () {
           state = state.updateIn(['scene', 'layers', layerID, 'items', state.getIn(['drawingSupport', 'currentID'])], function (item) {
             return item && item.merge({
               x: x,
-              y: y
+              y: y,
+              isInitialPos: isInitialPos ? isInitialPos : false
             });
           });
         }
       } else {
-        var _this$create5 = this.create(state, layerID, state.getIn(['drawingSupport', 'type']), x, y, 200, 100, 0, false),
+        var _this$create5 = this.create(state, layerID, state.getIn(['drawingSupport', 'type']), x, y, 200, 100, 0, false, [], isInitialPos),
           stateI = _this$create5.updatedState,
           item = _this$create5.item;
         if (item === null) {
@@ -649,7 +654,8 @@ var Item = /*#__PURE__*/function () {
       // tY = tY > 500 ? 500 : tY < 0 ? 0 : tY;
       item = item.merge({
         x: x,
-        y: y
+        y: y,
+        isInitialPos: false
       });
       state = state.merge({
         scene: scene.mergeIn(['layers', layerID, 'items', itemID], item)
@@ -663,8 +669,8 @@ var Item = /*#__PURE__*/function () {
   }, {
     key: "endDrawingItem",
     value: function endDrawingItem(state, layerID, x, y) {
-      var catalog = state.catalog;
-      state = this.updateDrawingItem(state, layerID, x, y, catalog).updatedState;
+      // let catalog = state.catalog;
+      state = this.updateDrawingItem(state, layerID, x, y).updatedState;
       state = Layer.unselectAll(state, layerID).updatedState;
       var popup = state.get('popup');
       state = state.merge({
@@ -747,7 +753,8 @@ var Item = /*#__PURE__*/function () {
       tY = tY > scene.height ? scene.height : tY < 0 ? 0 : tY;
       item = item.merge({
         x: tX,
-        y: tY
+        y: tY,
+        isInitialPos: false
       });
       state = state.merge({
         scene: scene.mergeIn(['layers', layerID, 'items', itemID], item)

package/es/class/project.js

@@ -10,7 +10,8 @@ import { State, Catalog, Scene, safeLoadMapList, CatalogElement } from "../model
 import { GeometryUtils, history } from "../utils/export";
 import { Layer, Group, Line, Hole, Item, Area, HorizontalGuide, VerticalGuide } from "../class/export";
 import * as viewer2DActions from "../actions/viewer2d-actions";
-import { isEmpty } from "../utils/helper";
+import { centering2D, isEmpty } from "../utils/helper";
+import { convert } from "../utils/convert-units-lite";
 var Project = /*#__PURE__*/function () {
   function Project() {
     _classCallCheck(this, Project);
@@ -822,6 +823,97 @@ var Project = /*#__PURE__*/function () {
         updatedState: state
       };
     }
+  }, {
+    key: "createRoomWithShape",
+    value: function createRoomWithShape(state, roomShapeType, width, height) {
+      var catalog = state.catalog;
+      state = this.newProject(state).updatedState;
+      state = state.merge({
+        catalog: catalog
+      });
+      var _viewer2D = state.viewer2D;
+      var viewer = _viewer2D.toJS();
+      width = convert(width).from('in').to('cm');
+      height = convert(height).from('in').to('cm');
+      var layerID = state.scene.selectedLayer;
+      if (isEmpty(viewer)) return {
+        updatedState: state
+      };
+      var halfWidth = width / 2;
+      var halfHeight = height / 2;
+      var viewerWidth = viewer.SVGWidth;
+      var viewerHeight = viewer.SVGHeight;
+      var centerPos = {
+        x: viewerWidth / 2,
+        y: viewerHeight / 2
+      };
+      var vtLB = {
+        x: centerPos.x - halfWidth,
+        y: centerPos.y - halfHeight
+      };
+      var vtRB = {
+        x: centerPos.x + halfWidth,
+        y: centerPos.y - halfHeight
+      };
+      var vtRT = {
+        x: centerPos.x + halfWidth,
+        y: centerPos.y + halfHeight
+      };
+      var vtLT = {
+        x: centerPos.x - halfWidth,
+        y: centerPos.y + halfHeight
+      };
+      var vertices = [];
+      switch (roomShapeType) {
+        case 'rectangle':
+          vertices = [vtLB, vtLT, vtRT, vtRB];
+          break;
+        case constants.ROOM_SHAPE_TYPE.TWO_WALLS_RIGHT_BOTTOM:
+          vertices = [vtLB, vtRB, vtRT];
+          break;
+        case constants.ROOM_SHAPE_TYPE.TWO_WALLS_RIGHT_TOP:
+          vertices = [vtRB, vtRT, vtLT];
+          break;
+        case constants.ROOM_SHAPE_TYPE.TWO_WALLS_LEFT_TOP:
+          vertices = [vtRT, vtLT, vtLB];
+          break;
+        case constants.ROOM_SHAPE_TYPE.TWO_WALLS_LEFT_BOTTOM:
+          vertices = [vtLT, vtLB, vtRB];
+          break;
+        case constants.ROOM_SHAPE_TYPE.THREE_WALLS_LEFT_TOP_RIGHT:
+          vertices = [vtRB, vtRT, vtLT, vtLB];
+          break;
+        case constants.ROOM_SHAPE_TYPE.THREE_WALLS_TOP_RIGHT_BOTTOM:
+          vertices = [vtLB, vtRB, vtRT, vtLT];
+          break;
+        case constants.ROOM_SHAPE_TYPE.THREE_WALLS_RIGHT_BOTTOM_LEFT:
+          vertices = [vtLT, vtLB, vtRB, vtRT];
+          break;
+        case constants.ROOM_SHAPE_TYPE.THREE_WALLS_BOTTOM_LEFT_TOP:
+          vertices = [vtRT, vtLT, vtLB, vtRB];
+          break;
+      }
+      for (var i = 0; i < vertices.length - 1; i++) {
+        state = Line.create(state, layerID, 'wall', vertices[i].x, vertices[i].y, vertices[i + 1].x, vertices[i + 1].y).updatedState;
+      }
+      if (roomShapeType === constants.ROOM_SHAPE_TYPE.RECTANGLE) {
+        state = Line.create(state, layerID, 'wall', vertices[vertices.length - 1].x, vertices[vertices.length - 1].y, vertices[0].x, vertices[0].y).updatedState;
+      }
+      var layer = state.getIn(['scene', 'layers', layerID]);
+      var lines = layer.getIn(['lines']).toJS();
+      var drawingInfo = {};
+      var lineKey = Object.keys(lines);
+      for (var _i = 0; _i < lineKey.length; _i++) {
+        if (!isEmpty(lineKey)) {
+          drawingInfo.drawingLine = layer.getIn(['lines', lineKey[_i]]);
+        }
+        state = Layer.detectAndUpdateAreas(state, layerID, drawingInfo).updatedState;
+      }
+      state = centering2D(state);
+      return {
+        updatedState: state
+      };
+    }
   }]);
 }();
 export { Project as default };

package/es/components/viewer2d/viewer2d.js

@@ -783,17 +783,13 @@ export default function Viewer2D(_ref, _ref2) {
         return;
       }
     }
-    if (mode === constants.MODE_DRAWING_ITEM) {
-      endPoint.x = x;
-      endPoint.y = y;
-    }
+    mouseDownPoint = {
+      x: x,
+      y: y
+    };
     if (mode === constants.MODE_IDLE) {
       var elementData = extractElementData(event.target);
       if (!elementData) return;
-      mouseDownPoint = {
-        x: x,
-        y: y
-      };
       if (sCount < 2) {
         switch (elementData.prototype) {
           case 'lines':
@@ -858,6 +854,7 @@ export default function Viewer2D(_ref, _ref2) {
     var _mapCursorPosition3 = mapCursorPosition(viewerEvent),
       x = _mapCursorPosition3.x,
       y = _mapCursorPosition3.y;
+    var draggingDistance = Math.sqrt((x - mouseDownPoint.x) * (x - mouseDownPoint.x) + (y - mouseDownPoint.y) * (y - mouseDownPoint.y));
     var vertices = state.getIn(['scene', 'layers', layerID, 'vertices']).toJS();
     var lines = state.getIn(['scene', 'layers', layerID, 'lines']).toJS();
     var elementData = extractElementData(event.target);
@@ -1233,7 +1230,10 @@ export default function Viewer2D(_ref, _ref2) {
         holesActions.endDrawingHole(layerID, x, y);
         break;
       case constants.MODE_DRAWING_ITEM:
-        itemsActions.endDrawingItem(layerID, endPoint.x, endPoint.y);
+        {
+          var itemData = state.getIn(['scene', 'layers', layerID, elementData === null || elementData === void 0 ? void 0 : elementData.prototype, elementData === null || elementData === void 0 ? void 0 : elementData.id]);
+          itemsActions.endDrawingItem(layerID, itemData.isInitialPos ? itemData.x : endPoint.x, itemData.isInitialPos ? itemData.y : endPoint.y);
+        }
         break;
       case constants.MODE_DRAGGING_LINE:
         linesActions.endDraggingLine(x, y, relatedLines, state.snapMask);
@@ -1256,23 +1256,18 @@ export default function Viewer2D(_ref, _ref2) {
     }
     if (internalType) {
       var _currentObject = null;
-      var draggingDistance = Math.sqrt((x - mouseDownPoint.x) * (x - mouseDownPoint.x) + (y - mouseDownPoint.y) * (y - mouseDownPoint.y));
       if (internalType === INTERNAL_EVENT_SELECT_ELEMENT || internalType === constants.INTERNAL_EVENT_REPLACE_CABINET) {
+        var _currentObject2;
         _currentObject = state.getIn(['scene', 'layers', layerID, elementData === null || elementData === void 0 ? void 0 : elementData.prototype, elementData === null || elementData === void 0 ? void 0 : elementData.id]);
-        // if (
-        //   internalType === INTERNAL_EVENT_SELECT_ELEMENT &&
-        //   currentObject?.prototype === 'items' &&
-        //   draggingDistance > constants.EPSILON
-        // )
-        //   internalType = INTERNAL_EVENT_DRAG_ELEMENT;
+        if (internalType === INTERNAL_EVENT_SELECT_ELEMENT && ((_currentObject2 = _currentObject) === null || _currentObject2 === void 0 ? void 0 : _currentObject2.prototype) === 'items' && draggingDistance > constants.EPSILON) internalType = INTERNAL_EVENT_DRAG_ELEMENT;
       } else if (draggingDistance > constants.EPSILON) {
         var elementID = state.getIn(['scene', 'layers', layerID, 'selected', elementPrototype]).first();
         _currentObject = state.getIn(['scene', 'layers', layerID, elementPrototype, elementID]);
       }
       if (_currentObject) {
-        var _currentObject2, _currentObject3, _currentObject4;
-        var payload = (_currentObject2 = _currentObject) === null || _currentObject2 === void 0 ? void 0 : _currentObject2.toJS();
-        if (((_currentObject3 = _currentObject) === null || _currentObject3 === void 0 ? void 0 : _currentObject3.prototype) === 'lines') {
+        var _currentObject3, _currentObject4, _currentObject5;
+        var payload = (_currentObject3 = _currentObject) === null || _currentObject3 === void 0 ? void 0 : _currentObject3.toJS();
+        if (((_currentObject4 = _currentObject) === null || _currentObject4 === void 0 ? void 0 : _currentObject4.prototype) === 'lines') {
           // 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));
@@ -1280,7 +1275,7 @@ export default function Viewer2D(_ref, _ref2) {
           var _length3 = convert(distance).from('cm').to('in');
           payload.length = _length3;
           //////////////////////////////////////
-        } else if (((_currentObject4 = _currentObject) === null || _currentObject4 === void 0 ? void 0 : _currentObject4.prototype) === 'items') {
+        } else if (((_currentObject5 = _currentObject) === null || _currentObject5 === void 0 ? void 0 : _currentObject5.prototype) === 'items') {
           // check this cabinet has warning box
           payload.isWarning = isWarningItem(_currentObject);
         }

package/es/constants.js

@@ -55,6 +55,7 @@ export var REMOVE_CIRCULAR_GUIDE = 'REMOVE_CIRCULAR_GUIDE';
 export var REMOVE_DRAWING_SUPPORT = 'REMOVE_DRAWING_SUPPORT';
 export var SET_IS_HELP = 'SET_IS_HELP';
 export var SET_IS_CABINET_DRAWING = 'SET_IS_CABINET_DRAWING';
+export var CREATE_ROOM_WITH_SHAPE = 'CREATE_ROOM_WITH_SHAPE';
 
 // ACTIONS viewer2D
 export var SELECT_TOOL_ZOOM_IN = 'SELECT_TOOL_ZOOM_IN';
@@ -244,7 +245,8 @@ export var PROJECT_ACTIONS = {
   SHIFT2DOFF: SHIFT2DOFF,
   SHIFT2DON: SHIFT2DON,
   SET_IS_HELP: SET_IS_HELP,
-  SET_IS_CABINET_DRAWING: SET_IS_CABINET_DRAWING
+  SET_IS_CABINET_DRAWING: SET_IS_CABINET_DRAWING,
+  CREATE_ROOM_WITH_SHAPE: CREATE_ROOM_WITH_SHAPE
 };
 export var VIEWER2D_ACTIONS = {
   SELECT_TOOL_ZOOM_IN: SELECT_TOOL_ZOOM_IN,
@@ -654,11 +656,11 @@ export var HOLE_NAMES = {
   WINDOW_CLEAR: 'Window',
   WINDOW_CROSS: 'Cross Window',
   WINDOW_DOUBLE_HUNG: 'Double Hung Window',
-  WINDOW_VERTICAL: 'Vertical Window',
-  DOOR_CLOSET: 'Closet Door',
-  DOOR_EXTERIOR: 'Exterior Door',
-  DOOR_INTERIOR: 'Interior Door',
-  DOOR_SLIDING: 'Sliding Door',
+  WINDOW_VERTICAL: 'window-vertical',
+  DOOR_CLOSET: 'Closet',
+  DOOR_EXTERIOR: 'Exterior',
+  DOOR_INTERIOR: 'Interior',
+  DOOR_SLIDING: 'Sliding',
   DOOR_FRAMED: 'Framed Doorway',
   DOOR_FRAMELESS: 'FrameLess Doorway'
 };
@@ -735,4 +737,17 @@ 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_REPLACE_CABINET = 'INTERNAL_EVENT_REPLACE_CABINET';
+export var INTERNAL_EVENT_REPLACE_CABINET = 'INTERNAL_EVENT_REPLACE_CABINET';
+
+// room shape type
+export var ROOM_SHAPE_TYPE = {
+  RECTANGLE: 'rectangle',
+  TWO_WALLS_LEFT_TOP: '2wLeftTop',
+  TWO_WALLS_RIGHT_TOP: '2wRightTop',
+  TWO_WALLS_LEFT_BOTTOM: '2wLeftBottom',
+  TWO_WALLS_RIGHT_BOTTOM: '2wRightBottom',
+  THREE_WALLS_LEFT_TOP_RIGHT: '3wLeftTopRight',
+  THREE_WALLS_TOP_RIGHT_BOTTOM: '3wTopRightBottom',
+  THREE_WALLS_RIGHT_BOTTOM_LEFT: '3wRightBottomLeft',
+  THREE_WALLS_BOTTOM_LEFT_TOP: '3wBottomLeftTop'
+};

package/es/devLiteRenderer.js

@@ -9,6 +9,7 @@ import mockProps from "./mocks/mockProps.json";
 import cabinetPaylod from "./mocks/cabinetPayload2.json";
 import appliancePaylod from "./mocks/appliancePayload.json";
 import doorStylePaylod2 from "./mocks/doorStylePayload2.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";
@@ -507,7 +508,16 @@ function WorkSpace(props) {
       };
       setExternalEvent(evt);
     }
-  }, "Replace cabinet to B12")), /*#__PURE__*/React.createElement(LiteRenderer, {
+  }, "Replace cabinet to B12"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_ADD_ROOM_SHAPE,
+        payload: roomShapePayload
+      };
+      setExternalEvent(evt);
+    }
+  }, "Add room shape from width, height")), /*#__PURE__*/React.createElement(LiteRenderer, {
     width: props.width,
     height: props.height,
     configData: mockProps.configData,

package/es/models.js

@@ -39,7 +39,7 @@ export var DefaultGrids = new Map({
     type: 'horizontal-streak',
     properties: {
       step: 30,
-      colors: ['rgb(169, 183, 223)']
+      colors: ['rgb(115, 125, 153)']
     }
   }),
   v1: new Grid({
@@ -199,6 +199,8 @@ export var Item = /*#__PURE__*/function (_Record7) {
     uri: ''
   },
   molding: [],
+  isInitialPos: false,
+  //current {x,y} is the initial position from host?
   backsplashVisible: false,
   applianceMaterial: {
     roughness: 0.4,

package/es/reducers/items-reducer.js

@@ -32,7 +32,7 @@ export default function (state, action) {
     case REPLACE_ITEM:
       return Item.replaceItem(state, action.selectedPos, action.currentObject, action.selectedObject).updatedState;
     case UPDATE_DRAWING_ITEM:
-      return Item.updateDrawingItem(state, action.layerID, action.x, action.y).updatedState;
+      return Item.updateDrawingItem(state, action.layerID, action.x, action.y, action.isInitialPos).updatedState;
     case END_DRAWING_ITEM:
       state = state.merge({
         sceneHistory: history.historyPush(state.sceneHistory, state.scene)

package/es/reducers/project-reducer.js

@@ -1,5 +1,5 @@
 import { history } from "../utils/export";
-import { LOAD_PROJECT, NEW_PROJECT, OPEN_CATALOG, SELECT_TOOL_EDIT, MODE_IDLE, UNSELECT_ALL, SELECT_ALL, SET_PROPERTIES, SET_ITEMS_ATTRIBUTES, SET_LINES_ATTRIBUTES, SET_HOLES_ATTRIBUTES, REMOVE, INVERT, UNDO, REDO, RECREATE, UNCREATE, PROJECT_RE_NAME, ROLLBACK, SET_PROJECT_PROPERTIES, SET_PROJECT_ID, OPEN_PROJECT_CONFIGURATOR, INIT_CATALOG, UPDATE_MOUSE_COORDS, UPDATE_ZOOM_SCALE, TOGGLE_SNAP, CHANGE_CATALOG_PAGE, GO_BACK_TO_CATALOG_PAGE, THROW_ERROR, THROW_WARNING, COPY_PROPERTIES, PASTE_PROPERTIES, PUSH_LAST_SELECTED_CATALOG_ELEMENT_TO_HISTORY, ALTERATE_STATE, SET_MODE, ADD_HORIZONTAL_GUIDE, ADD_VERTICAL_GUIDE, ADD_CIRCULAR_GUIDE, REMOVE_HORIZONTAL_GUIDE, REMOVE_VERTICAL_GUIDE, REMOVE_CIRCULAR_GUIDE, REMOVE_DRAWING_SUPPORT, SET_STATE_PROPERTIES, SHIFT2DON, SHIFT2DOFF, MODE_DRAWING_LINE, SET_IS_HELP, SET_IS_CABINET_DRAWING, ADD_ELEMENT_TO_CATALOG } from "../constants";
+import { LOAD_PROJECT, NEW_PROJECT, OPEN_CATALOG, SELECT_TOOL_EDIT, MODE_IDLE, UNSELECT_ALL, SELECT_ALL, SET_PROPERTIES, SET_ITEMS_ATTRIBUTES, SET_LINES_ATTRIBUTES, SET_HOLES_ATTRIBUTES, REMOVE, INVERT, UNDO, REDO, RECREATE, UNCREATE, PROJECT_RE_NAME, ROLLBACK, SET_PROJECT_PROPERTIES, SET_PROJECT_ID, OPEN_PROJECT_CONFIGURATOR, INIT_CATALOG, UPDATE_MOUSE_COORDS, UPDATE_ZOOM_SCALE, TOGGLE_SNAP, CHANGE_CATALOG_PAGE, GO_BACK_TO_CATALOG_PAGE, THROW_ERROR, THROW_WARNING, COPY_PROPERTIES, PASTE_PROPERTIES, PUSH_LAST_SELECTED_CATALOG_ELEMENT_TO_HISTORY, ALTERATE_STATE, SET_MODE, ADD_HORIZONTAL_GUIDE, ADD_VERTICAL_GUIDE, ADD_CIRCULAR_GUIDE, REMOVE_HORIZONTAL_GUIDE, REMOVE_VERTICAL_GUIDE, REMOVE_CIRCULAR_GUIDE, REMOVE_DRAWING_SUPPORT, SET_STATE_PROPERTIES, SHIFT2DON, SHIFT2DOFF, MODE_DRAWING_LINE, SET_IS_HELP, SET_IS_CABINET_DRAWING, ADD_ELEMENT_TO_CATALOG, CREATE_ROOM_WITH_SHAPE } from "../constants";
 import { Project } from "../class/export";
 export default function (state, action) {
   switch (action.type) {
@@ -125,6 +125,8 @@ export default function (state, action) {
       return Project.setIsHelp(state, action.isHelp).updatedState;
     case SET_IS_CABINET_DRAWING:
       return Project.setIsCabinetDrawing(state, action.isCabinetDrawing).updatedState;
+    case CREATE_ROOM_WITH_SHAPE:
+      return Project.createRoomWithShape(state, action.roomShapeType, action.width, action.height).updatedState;
     default:
       return state;
   }

package/es/utils/helper.js

@@ -3,7 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 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 { HDRCubeTextureLoader } from 'three/examples/jsm/loaders/HDRCubeTextureLoader.js';
-import { ANIMATE_OBJECT_OPEN_DOOR_ROTATION_UNIT, ANIMATE_STEP_MAX, DECIMAL_PLACES_2, HDR_URLS, MODE_ELEVATION_VIEW } from "../constants";
+import { ANIMATE_OBJECT_OPEN_DOOR_ROTATION_UNIT, ANIMATE_STEP_MAX, DECIMAL_PLACES_2, HDR_URLS, MAX_ZOOM_IN_SCALE, MODE_ELEVATION_VIEW, ZOOM_VARIABLE } from "../constants";
 import * as Three from 'three';
 import { returnReplaceableDeepSearchType } from "./../components/viewer2d/utils";
 import { convert } from "./convert-units-lite";
@@ -331,4 +331,69 @@ export function isImmutable(maybeImmutable) {
 }
 export function debugUtil() {
   return new Date();
+}
+export var compareSVGRect = function compareSVGRect(value) {
+  return value.e <= 10 && value.e + value.a * value.SVGWidth + 10 >= value.viewerWidth && value.f <= 80 && value.f + value.d * value.SVGHeight + 10 >= value.viewerHeight ? true : false;
+};
+export var updateViwer2D = function updateViwer2D(value) {
+  var viewer2DActions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  var _zoomValue = parseInt((value.a - 0.5) / ZOOM_VARIABLE);
+  if (_zoomValue > MAX_ZOOM_IN_SCALE) return;
+  if (_zoomValue < 0 || Number.isNaN(_zoomValue)) return;
+
+  // modify e, f to fit to SVG
+  while (!(value.e <= 10)) {
+    value.e -= 0.1;
+  }
+  while (!(value.e + value.a * value.SVGWidth + 10 >= value.viewerWidth)) {
+    value.e += 0.1;
+  }
+  while (!(value.f <= 80)) {
+    value.f -= 0.1;
+  }
+  while (!(value.f + value.a * value.SVGHeight + 10 >= value.viewerHeight)) {
+    value.f += 0.1;
+  }
+  if (viewer2DActions && compareSVGRect(value)) viewer2DActions.updateCameraView(value);
+};
+export function centering2D(state) {
+  var viewer2DActions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  // calculate the bounding box of all elements in plan
+  var layer = state.scene.getIn(['layers', state.scene.selectedLayer]);
+  var bb = {
+    minX: Infinity,
+    maxX: -Infinity,
+    minY: Infinity,
+    maxY: -Infinity
+  };
+  bb = layer.vertices.reduce(function (pre, cur) {
+    pre.minX = Math.min(pre.minX, cur.x);
+    pre.maxX = Math.max(pre.maxX, cur.x);
+    pre.minY = Math.min(pre.minY, cur.y);
+    pre.maxY = Math.max(pre.maxY, cur.y);
+    return pre;
+  }, bb);
+  var w = bb.maxX - bb.minX;
+  var h = bb.maxY - bb.minY;
+
+  // calc scale and offset to fit view
+  var viewer = state.getIn(['viewer2D']).toJS();
+  if (w != 0 && Math.abs(w) != Infinity && h != 0 && Math.abs(h) != Infinity) {
+    // elements are exist && bounding box size > 0
+    viewer.a = viewer.viewerHeight < h ? viewer.viewerHeight / h : viewer.viewerHeight / h * 3 / 5 / ZOOM_VARIABLE > MAX_ZOOM_IN_SCALE ? viewer.viewerHeight / h * MAX_ZOOM_IN_SCALE / (viewer.viewerHeight / h / ZOOM_VARIABLE) : viewer.viewerHeight / h * 3 / 5;
+    viewer.d = viewer.a;
+    viewer.e = (viewer.viewerWidth - (bb.maxX + bb.minX) * viewer.a) / 2;
+    viewer.f = (viewer.viewerHeight - (bb.maxY + bb.minY) * viewer.a) / 2;
+  } else {
+    // there is no any element && bounding box size == 0
+    viewer.e = viewer.viewerWidth / 2 - viewer.SVGWidth / 2;
+    viewer.f = viewer.viewerHeight / 2 - viewer.SVGHeight / 2;
+    viewer.a = 0.99;
+    viewer.d = 0.99;
+  }
+  state = state.merge({
+    viewer2D: viewer
+  });
+  if (viewer2DActions) updateViwer2D(viewer, viewer2DActions);
+  return state;
 }