kitchen-simulator 4.0.0-queuedEvents → 4.0.0

package/es/class/line.js

@@ -5,8 +5,8 @@ import { fromJS, List, Map } from 'immutable';
 import { Group, Hole, Layer, Vertex } from "./export";
 import { GeometryUtils, history, IDBroker, NameGenerator, SnapSceneUtils, SnapUtils } from "../utils/export";
 import * as Three from 'three';
-import { END_DRAGGING_LINE, END_DRAGGING_VERTEX, END_DRAWING_LINE, EPSILON, MIN_ANGLE_DISALLOW_DRAW_WALL, MODE_DRAGGING_LINE, MODE_DRAWING_LINE, MODE_IDLE, MODE_WAITING_DRAWING_LINE, UNIT_ANGLE } from "../constants";
-import { isEmpty } from "../utils/helper";
+import { END_DRAGGING_LINE, END_DRAGGING_VERTEX, END_DRAWING_LINE, EPSILON, INTERNAL_EVENT_START_DRAW_WALL, MIN_ANGLE_DISALLOW_DRAW_WALL, MODE_DRAGGING_LINE, MODE_DRAWING_LINE, MODE_IDLE, MODE_WAITING_DRAWING_LINE, UNIT_ANGLE } from "../constants";
+import { isEmpty, updatePayloadOfInternalEvent } from "../utils/helper";
 var timeGlobal = 0;
 var TimeRecorder = /*#__PURE__*/function () {
   function TimeRecorder(name) {
@@ -426,7 +426,8 @@ var Line = /*#__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 == MODE_IDLE) {
         return {
@@ -479,6 +480,13 @@ var Line = /*#__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 = updatePayloadOfInternalEvent(line, layer, catalog);
+      if (onInternalEvent) onInternalEvent({
+        type: INTERNAL_EVENT_START_DRAW_WALL,
+        value: payload
+      });
       return {
         updatedState: state
       };

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);
@@ -33,8 +34,8 @@ var Project = /*#__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;
@@ -48,7 +49,6 @@ var Project = /*#__PURE__*/function () {
       state = new State({});
       state = state.merge({
         doorStyle: doorStyle,
-        oStyle: oStyle,
         viewer2D: _viewer2D
       });
       // state = Item.setCounterTop(state, counterTop).updatedState;
@@ -59,9 +59,8 @@ var Project = /*#__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();
@@ -76,9 +75,9 @@ var Project = /*#__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) {
@@ -93,6 +92,17 @@ var Project = /*#__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 Scene(sceneJSON);
       state = new State({
         scene: newScene.toJS(),
@@ -154,35 +164,17 @@ var Project = /*#__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 = Item.setCounterTop(state, counterTop).updatedState;
       state = 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 {
@@ -315,29 +307,52 @@ var Project = /*#__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 = !isEmpty(lineID) && state.getIn(['scene', 'layers', selectedLayer, 'lines', lineID]).toJS();
-      var allLines = state.getIn(['scene', 'layers', selectedLayer, 'lines']).toJS();
       var relatedLines = [];
-      !isEmpty(delLine) && GeometryUtils.getRelatedLines(relatedLines, delLine, allVertices, allLines);
-      selectedLines.forEach(function (lineID) {
-        state = Line.remove(state, selectedLayer, lineID).updatedState;
-      });
-      selectedHoles.forEach(function (holeID) {
-        state = Hole.remove(state, selectedLayer, holeID).updatedState;
-      });
-      selectedItems.forEach(function (itemID) {
-        state = Item.remove(state, selectedLayer, itemID).updatedState;
-      });
-      if (!isEmpty(selectedLines) && !isEmpty(relatedLines)) {
+
+      // if deleting element is line then get the related lines that to update walls
+      if (delObject && delObject.prototype === constants.ELEMENT_LINE || isEmpty(delObject) && !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 = !isEmpty(curSelLineID) && state.getIn(['scene', 'layers', selectedLayer, 'lines', curSelLineID]).toJS();
+        var allLines = state.getIn(['scene', 'layers', selectedLayer, 'lines']).toJS();
+        !isEmpty(delLine) && GeometryUtils.getRelatedLines(relatedLines, delLine, allVertices, allLines);
+      }
+
+      // delete element
+      if (delObject) {
+        switch (delObject.prototype) {
+          case constants.ELEMENT_LINE:
+            state = Line.remove(state, selectedLayer, delObject.id).updatedState;
+            break;
+          case constants.ELEMENT_HOLE:
+            state = Hole.remove(state, selectedLayer, delObject.id).updatedState;
+            break;
+          case constants.ELEMENT_ITEM:
+            state = Item.remove(state, selectedLayer, delObject.id).updatedState;
+            break;
+        }
+      } else {
+        // no specified object, then remove all selected elements
+        selectedLines.forEach(function (lineID) {
+          state = Line.remove(state, selectedLayer, lineID).updatedState;
+        });
+        selectedHoles.forEach(function (holeID) {
+          state = Hole.remove(state, selectedLayer, holeID).updatedState;
+        });
+        selectedItems.forEach(function (itemID) {
+          state = Item.remove(state, selectedLayer, itemID).updatedState;
+        });
+      }
+
+      // update wall if line removed
+      if (!isEmpty(relatedLines)) {
         state = state.setIn(['mode'], MODE_DRAWING_LINE);
         relatedLines.forEach(function (relLine, index) {
           state = Line.select(state, selectedLayer, relLine.id).updatedState;
@@ -811,6 +826,108 @@ var Project = /*#__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 = Item.setInitialDoorStyle(state, doorStyle).updatedState;
+      var layerID = state.scene.selectedLayer;
+      if (roomShapeType !== constants.ROOM_SHAPE_TYPE.CUSTOM && !isEmpty(width) && !isEmpty(height) && width !== 0 && height !== 0) {
+        var _viewer2D = state.viewer2D;
+        var viewer = _viewer2D.toJS();
+        if (isEmpty(viewer)) return {
+          updatedState: state
+        };
+        width = convert(width).from(state.getIn(['scene', 'layers', 'layer-1', 'unit'])).to('cm');
+        height = 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 = 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;
+        }
+      }
+
+      // copy keeped measurement unit
+      state = state.setIn(['scene', 'layers', layerID, 'unit'], layerUnit);
+      state = state.setIn(['scene', 'layers', layerID, 'ceilHeight'], ceilHeight);
+      state = centering2D(state);
+      return {
+        updatedState: state
+      };
+    }
   }]);
 }();
 export { Project as default };

package/es/components/content.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import Viewer2D from "./viewer2d/viewer2d";
 import Viewer3D from "./viewer3d/viewer3d";
@@ -16,9 +16,18 @@ export default 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
+  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:
@@ -40,7 +49,8 @@ export default 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.createElement(Viewer3DFirstPerson, {
@@ -78,7 +88,8 @@ export default 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:
@@ -94,7 +105,8 @@ export default function Content(_ref, _ref2) {
         setToolbar: setToolbar,
         replaceCabinet: replaceCabinet,
         keyDownEnable: keyDownEnable,
-        downloadFlag: false
+        downloadFlag: false,
+        onInternalEvent: onInternalEvent
       });
 
     // case constants.MODE_CONFIGURING_PROJECT:
@@ -119,7 +131,8 @@ Content.propTypes = {
   state: PropTypes.object.isRequired,
   width: PropTypes.number.isRequired,
   height: PropTypes.number.isRequired,
-  replaceCabinet: PropTypes.func.isRequired
+  replaceCabinet: PropTypes.func.isRequired,
+  onInternalEvent: PropTypes.func.isRequired
 };
 Content.contextTypes = {
   projectActions: PropTypes.object.isRequired

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

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

package/es/components/viewer2d/item.js

@@ -5,7 +5,8 @@ import RulerDist from "./rulerDist";
 import { convert } from "../../utils/convert-units-lite";
 import { GeometryUtils } from "../../utils/export";
 import { MODE_ROTATING_ITEM, WALL_CABINET_LAYOUTPOS } from "../../constants";
-import { isEmpty, returnReplaceableDeepSearchType } from "./utils";
+import { isEmpty, isWarningItem, returnReplaceableDeepSearchType } from "./utils";
+import { findCatalogElement } from "../../utils/geometry";
 var STYLE_LINE = {
   fill: '#0096fd',
   stroke: '#0096fd'
@@ -21,6 +22,7 @@ var STYLE_CIRCLE2 = {
   cursor: 'ew-resize'
 };
 export default function Item(_ref, _ref2) {
+  var _element$render2D;
   var layer = _ref.layer,
     item = _ref.item,
     scene = _ref.scene,
@@ -30,7 +32,8 @@ export default 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;
@@ -41,6 +44,7 @@ export default function Item(_ref, _ref2) {
   var allLineRects;
   var allItemRect;
   var width, height;
+  var altitude = item.properties.getIn(['altitude', '_length']);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     clockRotateState = _useState2[0],
@@ -109,16 +113,11 @@ export default 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[returnReplaceableDeepSearchType(catid)];
-      if (cat === undefined || cat === null) {
-        cat = catalog.getIn(['elements', catid]);
-        if (!cat) cat = catalog.getIn(['elements', returnReplaceableDeepSearchType(catid)]);
-      }
+      var _catid = selectedItem.type;
+      var _cat = findCatalogElement(catalog, _catid);
       currentItem = {
         selectedItem: selectedItem,
-        cat: cat
+        cat: _cat
       };
     }
     layer.items.forEach(function (item) {
@@ -130,8 +129,7 @@ export default function Item(_ref, _ref2) {
         rotRad: item.rotation / 180 * Math.PI
       };
       var catid = item.type;
-      var cat = catalog.elements[catid];
-      if (!cat) cat = catalog.elements[returnReplaceableDeepSearchType(catid)];
+      var cat = findCatalogElement(catalog, catid);
       var width = convert(item.properties.getIn(['width', '_length'])).from('in').to('cm');
       var height = convert(item.properties.getIn(['depth', '_length'])).from('in').to('cm');
       // let width = cat.info.sizeinfo.width;
@@ -150,33 +148,36 @@ export default 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)]
+          });
+        }
       }
     });
 
@@ -237,25 +238,38 @@ export default 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 = GeometryUtils.linePassingThroughTwoPoints(centerpoint[0].x, centerpoint[0].y, center_x1, center_y1);else RectLineFuction = GeometryUtils.linePassingThroughTwoPoints(centerpoint[0].x, centerpoint[0].y, center_x, center_y);
       allRect.forEach(function (linerect) {
+        // calc distance to all other lines
         var p0 = GeometryUtils.clone_point(linerect.rect[2]);
         var p1 = GeometryUtils.clone_point(linerect.rect[3]);
-        var lineFunction = {};
+        var lineFunction = {}; // other line function
         if (p0.x !== p1.x || p0.y !== p1.y) lineFunction = GeometryUtils.linePassingThroughTwoPoints(p0.x, p0.y, p1.x, p1.y);
+        // intersection between normal line and other line
         var coordinatePoint = GeometryUtils.twoLinesIntersection(lineFunction.a, lineFunction.b, lineFunction.c, RectLineFuction.a, RectLineFuction.b, RectLineFuction.c);
         if (coordinatePoint !== undefined) {
-          if (GeometryUtils.pointsDistance(p0.x, p0.y, p1.x, p1.y) > GeometryUtils.pointsDistance(p0.x, p0.y, coordinatePoint.x, coordinatePoint.y) && GeometryUtils.pointsDistance(p0.x, p0.y, p1.x, p1.y) > GeometryUtils.pointsDistance(p1.x, p1.y, coordinatePoint.x, coordinatePoint.y)) {
-            if (GeometryUtils.pointsDistance(coordinatePoint.x, coordinatePoint.y, center_x, center_y) > GeometryUtils.pointsDistance(centerpoint[0].x, centerpoint[0].y, coordinatePoint.x, coordinatePoint.y)) {
+          if (
+          // intersection point is on the other line
+          GeometryUtils.pointsDistance(p0.x, p0.y, p1.x, p1.y) > GeometryUtils.pointsDistance(p0.x, p0.y, coordinatePoint.x, coordinatePoint.y) && GeometryUtils.pointsDistance(p0.x, p0.y, p1.x, p1.y) > 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 (GeometryUtils.isPointOnLineSegment(centerpoint[0].x, centerpoint[0].y, coordinatePoint.x, coordinatePoint.y, otherCenterPoint[0].x, otherCenterPoint[0].y)) isOutside = false;
+            }
+            if (isOutside && GeometryUtils.pointsDistance(coordinatePoint.x, coordinatePoint.y, center_x, center_y) > GeometryUtils.pointsDistance(centerpoint[0].x, centerpoint[0].y, coordinatePoint.x, coordinatePoint.y)) {
               comparelength.push(GeometryUtils.pointsDistance(centerpoint[0].x, centerpoint[0].y, coordinatePoint.x, coordinatePoint.y));
               a = Math.min.apply(null, comparelength);
             }
@@ -263,7 +277,10 @@ export default function Item(_ref, _ref2) {
         }
       });
       PointArray.push([a, centerpoint[1]]);
-    });
+    };
+    for (var i = 0; i < curiteminfo.rectCenterPoint.length; i++) {
+      _loop(i);
+    }
     return {
       PointArray: PointArray
     };
@@ -272,9 +289,22 @@ export default 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);
   }
@@ -302,12 +332,12 @@ export default 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 = [];
@@ -384,7 +414,10 @@ export default function Item(_ref, _ref2) {
     y: "-19",
     height: "16",
     width: "16",
-    style: {
+    style: isWarningItem(item) ? {
+      transform: 'rotateX(180deg)',
+      opacity: 0.5
+    } : {
       transform: 'rotateX(180deg)'
     }
   })), /*#__PURE__*/React.createElement("g", {