kitchen-simulator 4.0.0-queuedEvents → 4.0.0

package/lib/class/line.js

@@ -435,7 +435,8 @@ var Line = exports["default"] = /*#__PURE__*/function () {
     }
   }, {
     key: "beginDrawingLine",
-    value: function beginDrawingLine(state, layerID, x, y) {
+    value: function beginDrawingLine(state, layerID, x, y, onInternalEvent) {
+      var _state$get;
       // if end drawing by created area
       if (state.mode == _constants.MODE_IDLE) {
         return {
@@ -488,6 +489,13 @@ var Line = exports["default"] = /*#__PURE__*/function () {
         activeSnapElement: snap ? snap.snap : null,
         drawingSupport: drawingSupport
       });
+      var layer = state.getIn(['scene', 'layers', layerID]);
+      var catalog = (_state$get = state.get('catalog')) === null || _state$get === void 0 ? void 0 : _state$get.toJS();
+      var payload = (0, _helper.updatePayloadOfInternalEvent)(line, layer, catalog);
+      if (onInternalEvent) onInternalEvent({
+        type: _constants.INTERNAL_EVENT_START_DRAW_WALL,
+        value: payload
+      });
       return {
         updatedState: state
       };

package/lib/class/project.js

@@ -17,6 +17,7 @@ var _export = require("../utils/export");
 var _export2 = require("../class/export");
 var viewer2DActions = _interopRequireWildcard(require("../actions/viewer2d-actions"));
 var _helper = require("../utils/helper");
+var _convertUnitsLite = require("../utils/convert-units-lite");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -42,8 +43,8 @@ var Project = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "newProject",
     value: function newProject(state) {
-      var doorStyle = state.toJS().doorStyle === null ? null : state.toJS().doorStyle;
-      var oStyle = state.oStyle;
+      var _state$toJS$doorStyle, _state;
+      var doorStyle = (_state$toJS$doorStyle = (_state = state) === null || _state === void 0 || (_state = _state.toJS()) === null || _state === void 0 ? void 0 : _state.doorStyle) !== null && _state$toJS$doorStyle !== void 0 ? _state$toJS$doorStyle : null;
       // let counterTop = state.getIn(['scene', 'layers', layerID, 'counterTop']);
       // let floorStyle = state.getIn(['scene', 'layers', layerID, 'floorStyle']);
       var _viewer2D = state.viewer2D;
@@ -57,7 +58,6 @@ var Project = exports["default"] = /*#__PURE__*/function () {
       state = new _models.State({});
       state = state.merge({
         doorStyle: doorStyle,
-        oStyle: oStyle,
         viewer2D: _viewer2D
       });
       // state = Item.setCounterTop(state, counterTop).updatedState;
@@ -68,9 +68,8 @@ var Project = exports["default"] = /*#__PURE__*/function () {
     }
   }, {
     key: "loadProject",
-    value: function loadProject(state, sceneJSON, categoryData) {
+    value: function loadProject(state, sceneJSON) {
       var doorStyle = state.doorStyle;
-      var oStyle = state.oStyle;
       var layerID = state.scene.selectedLayer;
       var _viewer2D = state.viewer2D;
       var viewer = state.viewer2D.toJS();
@@ -85,9 +84,9 @@ var Project = exports["default"] = /*#__PURE__*/function () {
         a: 0.99,
         d: 0.99
       });
-      var _state = state,
-        oldScene = _state.scene,
-        oldSceneHistory = _state.sceneHistory;
+      var _state2 = state,
+        oldScene = _state2.scene,
+        oldSceneHistory = _state2.sceneHistory;
       var json_items = sceneJSON.layers[sceneJSON.selectedLayer].items;
       var elements = state.catalog.get('elements').toArray();
       var _loop = function _loop(x) {
@@ -102,6 +101,17 @@ var Project = exports["default"] = /*#__PURE__*/function () {
       for (var x in json_items) {
         _loop(x);
       }
+
+      //  making layer's doorStyle when changing room shape
+      // THIS LOGIC WAS MOVED TO SET INITIAL DOOR STYLE
+      // if (isEmpty(sceneJSON?.layers[layerID]?.doorStyle)) {
+      //   let newlayer = {
+      //     ...sceneJSON?.layers[layerID],
+      //     doorStyle: doorStyle.toJS()
+      //   };
+      //   sceneJSON && (sceneJSON.layers[layerID] = newlayer);
+      // }
+
       var newScene = new _models.Scene(sceneJSON);
       state = new _models.State({
         scene: newScene.toJS(),
@@ -163,35 +173,17 @@ var Project = exports["default"] = /*#__PURE__*/function () {
           f: f
         });
       }
-      if (!doorStyle) {
-        if (state.getIn(['scene', 'layers', layerID, 'doorStyle'])) {
-          doorStyle = state.getIn(['scene', 'layers', layerID, 'doorStyle']);
-        }
+
+      // Matching state.doorStyle with layer.doorStyle
+      if (state.getIn(['scene', 'layers', layerID, 'doorStyle'])) {
+        doorStyle = state.getIn(['scene', 'layers', layerID, 'doorStyle']);
       }
       state = state.merge({
         doorStyle: doorStyle,
-        oStyle: oStyle,
         viewer2D: _viewer2D
       });
       state = _export2.Item.setCounterTop(state, counterTop).updatedState;
       state = _export2.Area.setFloorStyles(state, floorStyle).updatedState;
-      if (state.getIn(['scene', 'layers', layerID, 'doorStyle']) && !state.getIn(['scene', 'layers', layerID, 'doorStyle', 'install'])) {
-        var layerDoorStyle = state.getIn(['scene', 'layers', layerID, 'doorStyle']);
-        var install = '';
-        categoryData.data.doorStyles.items.forEach(function (category) {
-          category.items.forEach(function (element) {
-            if (element.items.filter(function (it) {
-              return it.id === layerDoorStyle.id && (layerDoorStyle.install ? category.name === layerDoorStyle.install : true);
-            }).length) {
-              install = category.name;
-            }
-          });
-        });
-        layerDoorStyle = _objectSpread(_objectSpread({}, layerDoorStyle), {}, {
-          install: install
-        });
-        state = state.mergeIn(['scene', 'layers', layerID, 'doorStyle'], layerDoorStyle);
-      }
       this.updateZoomScale(state, a);
       viewer2DActions.updateCameraView(_viewer2D);
       return {
@@ -324,29 +316,52 @@ var Project = exports["default"] = /*#__PURE__*/function () {
     }
   }, {
     key: "remove",
-    value: function remove(state) {
+    value: function remove(state, delObject) {
       var selectedLayer = state.getIn(['scene', 'selectedLayer']);
       var _state$getIn = state.getIn(['scene', 'layers', selectedLayer, 'selected']),
         selectedLines = _state$getIn.lines,
         selectedHoles = _state$getIn.holes,
         selectedItems = _state$getIn.items;
-      var allVertices = state.getIn(['scene', 'layers', selectedLayer, 'vertices']).toJS();
-      var selLines = state.getIn(['scene', 'layers', selectedLayer, 'selected', 'lines']).toJS();
-      var lineID = selLines[0];
-      var delLine = !(0, _helper.isEmpty)(lineID) && state.getIn(['scene', 'layers', selectedLayer, 'lines', lineID]).toJS();
-      var allLines = state.getIn(['scene', 'layers', selectedLayer, 'lines']).toJS();
       var relatedLines = [];
-      !(0, _helper.isEmpty)(delLine) && _export.GeometryUtils.getRelatedLines(relatedLines, delLine, allVertices, allLines);
-      selectedLines.forEach(function (lineID) {
-        state = _export2.Line.remove(state, selectedLayer, lineID).updatedState;
-      });
-      selectedHoles.forEach(function (holeID) {
-        state = _export2.Hole.remove(state, selectedLayer, holeID).updatedState;
-      });
-      selectedItems.forEach(function (itemID) {
-        state = _export2.Item.remove(state, selectedLayer, itemID).updatedState;
-      });
-      if (!(0, _helper.isEmpty)(selectedLines) && !(0, _helper.isEmpty)(relatedLines)) {
+
+      // if deleting element is line then get the related lines that to update walls
+      if (delObject && delObject.prototype === constants.ELEMENT_LINE || (0, _helper.isEmpty)(delObject) && !(0, _helper.isEmpty)(selectedLines)) {
+        var allVertices = state.getIn(['scene', 'layers', selectedLayer, 'vertices']).toJS();
+        var selLines = state.getIn(['scene', 'layers', selectedLayer, 'selected', constants.ELEMENT_LINE]).toJS();
+        var curSelLineID = (delObject === null || delObject === void 0 ? void 0 : delObject.prototype) === constants.ELEMENT_LINE ? delObject.id : selLines[0];
+        var delLine = !(0, _helper.isEmpty)(curSelLineID) && state.getIn(['scene', 'layers', selectedLayer, 'lines', curSelLineID]).toJS();
+        var allLines = state.getIn(['scene', 'layers', selectedLayer, 'lines']).toJS();
+        !(0, _helper.isEmpty)(delLine) && _export.GeometryUtils.getRelatedLines(relatedLines, delLine, allVertices, allLines);
+      }
+
+      // delete element
+      if (delObject) {
+        switch (delObject.prototype) {
+          case constants.ELEMENT_LINE:
+            state = _export2.Line.remove(state, selectedLayer, delObject.id).updatedState;
+            break;
+          case constants.ELEMENT_HOLE:
+            state = _export2.Hole.remove(state, selectedLayer, delObject.id).updatedState;
+            break;
+          case constants.ELEMENT_ITEM:
+            state = _export2.Item.remove(state, selectedLayer, delObject.id).updatedState;
+            break;
+        }
+      } else {
+        // no specified object, then remove all selected elements
+        selectedLines.forEach(function (lineID) {
+          state = _export2.Line.remove(state, selectedLayer, lineID).updatedState;
+        });
+        selectedHoles.forEach(function (holeID) {
+          state = _export2.Hole.remove(state, selectedLayer, holeID).updatedState;
+        });
+        selectedItems.forEach(function (itemID) {
+          state = _export2.Item.remove(state, selectedLayer, itemID).updatedState;
+        });
+      }
+
+      // update wall if line removed
+      if (!(0, _helper.isEmpty)(relatedLines)) {
         state = state.setIn(['mode'], _constants.MODE_DRAWING_LINE);
         relatedLines.forEach(function (relLine, index) {
           state = _export2.Line.select(state, selectedLayer, relLine.id).updatedState;
@@ -820,6 +835,108 @@ var Project = exports["default"] = /*#__PURE__*/function () {
         updatedState: state
       };
     }
+  }, {
+    key: "createRoomWithShape",
+    value: function createRoomWithShape(state, roomShapeType, width, height, doorStyle) {
+      var catalog = state.catalog;
+      // keep measurement unit
+      var curLayerID = state.scene.selectedLayer;
+      var layerUnit = state.getIn(['scene', 'layers', curLayerID, 'unit']);
+      var ceilHeight = state.getIn(['scene', 'layers', curLayerID, 'ceilHeight']);
+      state = this.newProject(state).updatedState;
+      state = state.merge({
+        catalog: catalog
+      });
+      state = _export2.Item.setInitialDoorStyle(state, doorStyle).updatedState;
+      var layerID = state.scene.selectedLayer;
+      if (roomShapeType !== constants.ROOM_SHAPE_TYPE.CUSTOM && !(0, _helper.isEmpty)(width) && !(0, _helper.isEmpty)(height) && width !== 0 && height !== 0) {
+        var _viewer2D = state.viewer2D;
+        var viewer = _viewer2D.toJS();
+        if ((0, _helper.isEmpty)(viewer)) return {
+          updatedState: state
+        };
+        width = (0, _convertUnitsLite.convert)(width).from(state.getIn(['scene', 'layers', 'layer-1', 'unit'])).to('cm');
+        height = (0, _convertUnitsLite.convert)(height).from(state.getIn(['scene', 'layers', 'layer-1', 'unit'])).to('cm');
+        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 = _export2.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 = _export2.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 (!(0, _helper.isEmpty)(lineKey)) {
+            drawingInfo.drawingLine = layer.getIn(['lines', lineKey[_i]]);
+          }
+          state = _export2.Layer.detectAndUpdateAreas(state, layerID, drawingInfo).updatedState;
+        }
+      }
+
+      // copy keeped measurement unit
+      state = state.setIn(['scene', 'layers', layerID, 'unit'], layerUnit);
+      state = state.setIn(['scene', 'layers', layerID, 'ceilHeight'], ceilHeight);
+      state = (0, _helper.centering2D)(state);
+      return {
+        updatedState: state
+      };
+    }
   }]);
 }();
 module.exports = exports.default;

package/lib/components/content.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = Content;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _viewer2d = _interopRequireDefault(require("./viewer2d/viewer2d"));
 var _viewer3d = _interopRequireDefault(require("./viewer3d/viewer3d"));
@@ -26,9 +26,18 @@ function Content(_ref, _ref2) {
     setToolbar = _ref.setToolbar,
     replaceCabinet = _ref.replaceCabinet,
     keyDownEnable = _ref.keyDownEnable,
-    catalog = _ref.catalog;
+    catalog = _ref.catalog,
+    onInternalEvent = _ref.onInternalEvent;
   var projectActions = _ref2.projectActions;
   var mode = state.get('mode');
+
+  // Internal Event for unselect_all
+  (0, _react.useEffect)(function () {
+    if (state.getIn(['scene', 'layers', 'layer-1', 'selected', 'vertices']).size + state.getIn(['scene', 'layers', 'layer-1', 'selected', 'lines']).size + state.getIn(['scene', 'layers', 'layer-1', 'selected', 'holes']).size + state.getIn(['scene', 'layers', 'layer-1', 'selected', 'areas']).size + state.getIn(['scene', 'layers', 'layer-1', 'selected', 'items']).size < 1) onInternalEvent === null || onInternalEvent === void 0 || onInternalEvent({
+      type: constants.INTERNAL_EVENT_UNSELECT_ALL,
+      value: null
+    });
+  }, [state.getIn(['scene', 'layers', 'layer-1', 'selected'])]);
   switch (mode) {
     // this mode is when view elevation
     case constants.MODE_ELEVATION_VIEW:
@@ -50,7 +59,8 @@ function Content(_ref, _ref2) {
         setToolbar: setToolbar,
         replaceCabinet: replaceCabinet,
         keyDownEnable: keyDownEnable,
-        downloadFlag: false
+        downloadFlag: false,
+        onInternalEvent: onInternalEvent
       });
     case constants.MODE_3D_FIRST_PERSON:
       return /*#__PURE__*/_react["default"].createElement(_viewer3dFirstPerson["default"], {
@@ -88,7 +98,8 @@ function Content(_ref, _ref2) {
         width: width,
         height: height,
         setToolbar: setToolbar,
-        replaceCabinet: replaceCabinet
+        replaceCabinet: replaceCabinet,
+        onInternalEvent: onInternalEvent
       });
     case constants.MODE_ROTATING_ITEM_3D:
     case constants.MODE_DRAGGING_ITEM_3D:
@@ -104,7 +115,8 @@ function Content(_ref, _ref2) {
         setToolbar: setToolbar,
         replaceCabinet: replaceCabinet,
         keyDownEnable: keyDownEnable,
-        downloadFlag: false
+        downloadFlag: false,
+        onInternalEvent: onInternalEvent
       });
 
     // case constants.MODE_CONFIGURING_PROJECT:
@@ -129,7 +141,8 @@ Content.propTypes = {
   state: _propTypes["default"].object.isRequired,
   width: _propTypes["default"].number.isRequired,
   height: _propTypes["default"].number.isRequired,
-  replaceCabinet: _propTypes["default"].func.isRequired
+  replaceCabinet: _propTypes["default"].func.isRequired,
+  onInternalEvent: _propTypes["default"].func.isRequired
 };
 Content.contextTypes = {
   projectActions: _propTypes["default"].object.isRequired

package/lib/components/viewer2d/grids/grid-streak.js

@@ -29,7 +29,7 @@ function GridStreak(_ref) {
         key: i,
         cx: x,
         cy: y,
-        r: 1.5,
+        r: 2,
         fill: color
       }));
     }

package/lib/components/viewer2d/item.js

@@ -14,6 +14,7 @@ var _convertUnitsLite = require("../../utils/convert-units-lite");
 var _export = require("../../utils/export");
 var _constants = require("../../constants");
 var _utils = require("./utils");
+var _geometry = require("../../utils/geometry");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var STYLE_LINE = {
   fill: '#0096fd',
@@ -30,6 +31,7 @@ var STYLE_CIRCLE2 = {
   cursor: 'ew-resize'
 };
 function Item(_ref, _ref2) {
+  var _element$render2D;
   var layer = _ref.layer,
     item = _ref.item,
     scene = _ref.scene,
@@ -39,7 +41,8 @@ function Item(_ref, _ref2) {
   var x = item.x,
     y = item.y,
     rotation = item.rotation,
-    id = item.id;
+    id = item.id,
+    layoutpos = item.layoutpos;
   var showBaseCabinetMeasure = scene.showBaseCabinetMeasure,
     showWallCabinetMeasure = scene.showWallCabinetMeasure;
   var vertices = layer.vertices;
@@ -50,6 +53,7 @@ function Item(_ref, _ref2) {
   var allLineRects;
   var allItemRect;
   var width, height;
+  var altitude = item.properties.getIn(['altitude', '_length']);
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     clockRotateState = _useState2[0],
@@ -118,16 +122,11 @@ function Item(_ref, _ref2) {
     var selectedItem;
     if (layer.selected.items.size > 0) {
       selectedItem = layer.getIn(['items', layer.selected.items.get(0)]);
-      var catid = selectedItem.type;
-      var cat = catalog.elements[catid];
-      if (!cat) cat = catalog.elements[(0, _utils.returnReplaceableDeepSearchType)(catid)];
-      if (cat === undefined || cat === null) {
-        cat = catalog.getIn(['elements', catid]);
-        if (!cat) cat = catalog.getIn(['elements', (0, _utils.returnReplaceableDeepSearchType)(catid)]);
-      }
+      var _catid = selectedItem.type;
+      var _cat = (0, _geometry.findCatalogElement)(catalog, _catid);
       currentItem = {
         selectedItem: selectedItem,
-        cat: cat
+        cat: _cat
       };
     }
     layer.items.forEach(function (item) {
@@ -139,8 +138,7 @@ function Item(_ref, _ref2) {
         rotRad: item.rotation / 180 * Math.PI
       };
       var catid = item.type;
-      var cat = catalog.elements[catid];
-      if (!cat) cat = catalog.elements[(0, _utils.returnReplaceableDeepSearchType)(catid)];
+      var cat = (0, _geometry.findCatalogElement)(catalog, catid);
       var width = (0, _convertUnitsLite.convert)(item.properties.getIn(['width', '_length'])).from('in').to('cm');
       var height = (0, _convertUnitsLite.convert)(item.properties.getIn(['depth', '_length'])).from('in').to('cm');
       // let width = cat.info.sizeinfo.width;
@@ -159,33 +157,36 @@ function Item(_ref, _ref2) {
       // }
 
       if (!item.selected) {
-        var _x = val.pos.x;
-        var _y = val.pos.y;
-        var rotRad = val.rotRad;
-        var w = val.size.width / 2;
-        var h = val.size.height / 2;
-        var mx = _x - w * Math.cos(rotRad);
-        var my = _y - w * Math.sin(rotRad);
-        var x0 = mx + h * Math.sin(rotRad);
-        var y0 = my - h * Math.cos(rotRad);
-        var x3 = mx * 2 - x0;
-        var y3 = my * 2 - y0;
-        var x1 = _x * 2 - x3;
-        var y1 = _y * 2 - y3;
-        var x2 = _x * 2 - x0;
-        var y2 = _y * 2 - y0;
-        rectarray.push({
-          rect: [point(x0, y0), point(x1, y1), point(x0, y0), point(x1, y1)]
-        });
-        rectarray.push({
-          rect: [point(x1, y1), point(x2, y2), point(x1, y1), point(x2, y2)]
-        });
-        rectarray.push({
-          rect: [point(x2, y2), point(x3, y3), point(x2, y2), point(x3, y3)]
-        });
-        rectarray.push({
-          rect: [point(x3, y3), point(x0, y0), point(x3, y3), point(x0, y0)]
-        });
+        var detectObjectsAtSameAltitudeFlag = layoutpos === 'Base' ? item.properties.getIn(['altitude', '_length']) <= altitude + tempHeight.get('_length') : item.properties.getIn(['altitude', '_length']) + item.properties.getIn(['height', '_length']) >= altitude;
+        if (detectObjectsAtSameAltitudeFlag) {
+          var _x = val.pos.x;
+          var _y = val.pos.y;
+          var rotRad = val.rotRad;
+          var w = val.size.width / 2;
+          var h = val.size.height / 2;
+          var mx = _x - w * Math.cos(rotRad);
+          var my = _y - w * Math.sin(rotRad);
+          var x0 = mx + h * Math.sin(rotRad);
+          var y0 = my - h * Math.cos(rotRad);
+          var x3 = mx * 2 - x0;
+          var y3 = my * 2 - y0;
+          var x1 = _x * 2 - x3;
+          var y1 = _y * 2 - y3;
+          var x2 = _x * 2 - x0;
+          var y2 = _y * 2 - y0;
+          rectarray.push({
+            rect: [point(x0, y0), point(x1, y1), point(x0, y0), point(x1, y1)]
+          });
+          rectarray.push({
+            rect: [point(x1, y1), point(x2, y2), point(x1, y1), point(x2, y2)]
+          });
+          rectarray.push({
+            rect: [point(x2, y2), point(x3, y3), point(x2, y2), point(x3, y3)]
+          });
+          rectarray.push({
+            rect: [point(x3, y3), point(x0, y0), point(x3, y3), point(x0, y0)]
+          });
+        }
       }
     });
 
@@ -246,25 +247,38 @@ function Item(_ref, _ref2) {
    */
   var getDistant = function getDistant(x, y, rotRad) {
     var center_h = 3 * height / 8;
-    var center_x = x;
+    var center_x = x; // middle of front line of cabinet rect
     var center_y = y;
-    var center_x1 = x - center_h * Math.sin(rotRad);
+    var center_x1 = x - center_h * Math.sin(rotRad); // center point of cabinet rect
     var center_y1 = y + center_h * Math.cos(rotRad);
     var PointArray = [];
-    curiteminfo.rectCenterPoint.forEach(function (centerpoint) {
-      var comparelength = [];
+    var _loop = function _loop(i) {
+      var centerpoint = curiteminfo.rectCenterPoint[i];
+      // [rectCenterPoint] has four middle points of cabinet rect edges
+      var comparelength = []; // distance array from rectCenterPoint[i] to other lines(walls, other cabinet rect edges)
       var a;
-      var RectLineFuction;
+      var RectLineFuction; // normal line of cabinet rect edge
       if (centerpoint[1] === 180 || centerpoint[1] === 0) RectLineFuction = _export.GeometryUtils.linePassingThroughTwoPoints(centerpoint[0].x, centerpoint[0].y, center_x1, center_y1);else RectLineFuction = _export.GeometryUtils.linePassingThroughTwoPoints(centerpoint[0].x, centerpoint[0].y, center_x, center_y);
       allRect.forEach(function (linerect) {
+        // calc distance to all other lines
         var p0 = _export.GeometryUtils.clone_point(linerect.rect[2]);
         var p1 = _export.GeometryUtils.clone_point(linerect.rect[3]);
-        var lineFunction = {};
+        var lineFunction = {}; // other line function
         if (p0.x !== p1.x || p0.y !== p1.y) lineFunction = _export.GeometryUtils.linePassingThroughTwoPoints(p0.x, p0.y, p1.x, p1.y);
+        // intersection between normal line and other line
         var coordinatePoint = _export.GeometryUtils.twoLinesIntersection(lineFunction.a, lineFunction.b, lineFunction.c, RectLineFuction.a, RectLineFuction.b, RectLineFuction.c);
         if (coordinatePoint !== undefined) {
-          if (_export.GeometryUtils.pointsDistance(p0.x, p0.y, p1.x, p1.y) > _export.GeometryUtils.pointsDistance(p0.x, p0.y, coordinatePoint.x, coordinatePoint.y) && _export.GeometryUtils.pointsDistance(p0.x, p0.y, p1.x, p1.y) > _export.GeometryUtils.pointsDistance(p1.x, p1.y, coordinatePoint.x, coordinatePoint.y)) {
-            if (_export.GeometryUtils.pointsDistance(coordinatePoint.x, coordinatePoint.y, center_x, center_y) > _export.GeometryUtils.pointsDistance(centerpoint[0].x, centerpoint[0].y, coordinatePoint.x, coordinatePoint.y)) {
+          if (
+          // intersection point is on the other line
+          _export.GeometryUtils.pointsDistance(p0.x, p0.y, p1.x, p1.y) > _export.GeometryUtils.pointsDistance(p0.x, p0.y, coordinatePoint.x, coordinatePoint.y) && _export.GeometryUtils.pointsDistance(p0.x, p0.y, p1.x, p1.y) > _export.GeometryUtils.pointsDistance(p1.x, p1.y, coordinatePoint.x, coordinatePoint.y)) {
+            // check the intersection point is outside direction of edge
+            var isOutside = true;
+            for (var j = 0; j < curiteminfo.rectCenterPoint.length; j++) {
+              if (j === i) continue;
+              var otherCenterPoint = curiteminfo.rectCenterPoint[j];
+              if (_export.GeometryUtils.isPointOnLineSegment(centerpoint[0].x, centerpoint[0].y, coordinatePoint.x, coordinatePoint.y, otherCenterPoint[0].x, otherCenterPoint[0].y)) isOutside = false;
+            }
+            if (isOutside && _export.GeometryUtils.pointsDistance(coordinatePoint.x, coordinatePoint.y, center_x, center_y) > _export.GeometryUtils.pointsDistance(centerpoint[0].x, centerpoint[0].y, coordinatePoint.x, coordinatePoint.y)) {
               comparelength.push(_export.GeometryUtils.pointsDistance(centerpoint[0].x, centerpoint[0].y, coordinatePoint.x, coordinatePoint.y));
               a = Math.min.apply(null, comparelength);
             }
@@ -272,7 +286,10 @@ function Item(_ref, _ref2) {
         }
       });
       PointArray.push([a, centerpoint[1]]);
-    });
+    };
+    for (var i = 0; i < curiteminfo.rectCenterPoint.length; i++) {
+      _loop(i);
+    }
     return {
       PointArray: PointArray
     };
@@ -281,9 +298,22 @@ function Item(_ref, _ref2) {
   var nh = height / 2;
   var _getDistant = getDistant(x, y, val.rotRad),
     PointArray = _getDistant.PointArray;
+  var catid = item.type;
+  var cat = catalog.elements[catid];
   PointArray.forEach(function (pointElement, index) {
     if (pointElement[0] == undefined) PointArray[index][0] = 0;
+    // if (pointElement[1] === -90 && cat.info.is_corner !== 1) {
+    //   PointArray[index][0] -= 4;
+    // }
+  });
+  var cnt = 0;
+  PointArray.forEach(function (pointElement) {
+    if (pointElement[0] == 0) cnt++;
   });
+  if (cnt == 4 || cnt == 3) {
+    PointArray[0][0] = 100;
+    PointArray[1][0] = 100;
+  }
   if (Array.isArray(PointArray)) {
     itemsActions.storeDistArray(layerID, id, PointArray);
   }
@@ -311,12 +341,12 @@ function Item(_ref, _ref2) {
           length: itemDistanceFromLine,
           angle: rotation,
           rotation: element[1],
-          transform: "translate(".concat(element[1] === 180 ? -nw : element[1] === 0 ? nw : 0, ", ").concat(element[1] === 90 ? nh : element[1] === -90 ? -nh : 3 * nh / 4, ") rotate(").concat(element[1], ", 0, 0)")
+          transform: "translate(".concat(element[1] === 180 ? -nw : element[1] === 0 ? nw : 0, ", ").concat(element[1] === 90 ? nh : element[1] === -90 ? cat.info.is_corner !== 1 ? -(nh + 4) : -nh : 0, ") rotate(").concat(element[1], ", 0, 0)")
         })));
       }
     });
   }
-  var renderedItem = element.render2D.call(element, item, layer, scene);
+  var renderedItem = element === null || element === void 0 || (_element$render2D = element.render2D) === null || _element$render2D === void 0 ? void 0 : _element$render2D.call(element, item, layer, scene);
   var isSmall = false;
   if (width < 40) isSmall = true;
   var parts = [];
@@ -393,7 +423,10 @@ function Item(_ref, _ref2) {
     y: "-19",
     height: "16",
     width: "16",
-    style: {
+    style: (0, _utils.isWarningItem)(item) ? {
+      transform: 'rotateX(180deg)',
+      opacity: 0.5
+    } : {
       transform: 'rotateX(180deg)'
     }
   })), /*#__PURE__*/_react["default"].createElement("g", {