kitchen-simulator 3.1.0 → 3.1.2

package/es/devLiteRenderer.js

@@ -20,6 +20,7 @@ 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_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, EXTERNAL_EVENT_SET_FINISHING, FINISHING_TYPE } from "./constants";
+import { convert } from "./utils/convert-units-lite";
 
 // --- renderer props ---
 var options = {
@@ -659,7 +660,26 @@ function WorkSpace(props) {
       };
       setExternalEvent(evt);
     }
-  }, "Add room shape from width, height")), /*#__PURE__*/React.createElement(LiteRenderer, {
+  }, "Add room shape from width, height"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var _tl = Math.floor(Math.random() * 50);
+      var tl = convert(_tl).from('in').to('cm');
+      var evt = {
+        type: EXTERNAL_EVENT_UPDATE_PROPERTY,
+        payload: {
+          propertyName: PROP_RESIZE_WIDTH,
+          value: new Map({
+            _length: _tl,
+            // inch
+            _unit: 'in',
+            length: tl // cm
+          })
+        }
+      };
+      setExternalEvent(evt);
+    }
+  }, "random width")), /*#__PURE__*/React.createElement(LiteRenderer, {
     width: props.width,
     height: props.height,
     configData: mockProps.configData,

package/es/utils/geometry.js

@@ -2443,4 +2443,209 @@ export function validRect(itemRect, rects) {
   return rects.every(function (rect) {
     return !intersectRect(rect.rect, updatedItemRect.rect);
   });
+}
+function getCalcRectFromItem2(itemInfo) {
+  var x = itemInfo.pos.x;
+  var y = itemInfo.pos.y;
+  var w = itemInfo.size.width / 2;
+  var h = itemInfo.size.height / 2;
+  var rotRad = itemInfo.rotRad;
+  var mh = 3 * h / 4;
+  var mx = x - w * Math.cos(rotRad) - mh * Math.sin(rotRad);
+  var my = y - w * Math.sin(rotRad) + mh * Math.cos(rotRad);
+  var m2x = x + w * Math.cos(rotRad) - mh * Math.sin(rotRad);
+  var m2y = y + w * Math.sin(rotRad) + mh * Math.cos(rotRad);
+  var m3x = x - h * Math.sin(rotRad);
+  var m3y = y + h * Math.cos(rotRad);
+  var m1x = x + h * Math.sin(rotRad);
+  var m1y = y - h * Math.cos(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;
+  return {
+    rectCenterPoint: [[point(mx, my), 180], [point(m1x, m1y), -90], [point(m2x, m2y), 0], [point(m3x, m3y), 90]]
+  };
+}
+function getAllItems2(layer, catalog) {
+  var rectarray = [];
+  var currentItem;
+  var selectedItem;
+  if (layer.selected.items.size > 0) {
+    selectedItem = layer.getIn(['items', layer.selected.items.get(0)]);
+    var catid = selectedItem.type;
+    var cat = findCatalogElement(catalog, catid);
+    currentItem = {
+      selectedItem: selectedItem,
+      cat: cat
+    };
+  }
+  layer.items.forEach(function (item) {
+    var val = {
+      pos: {
+        x: item.x,
+        y: item.y
+      },
+      rotRad: item.rotation / 180 * Math.PI
+    };
+    var catid = item.type;
+    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;
+    // let height = cat.info.sizeinfo.depth;
+    val.size = {
+      width: width,
+      height: height
+    };
+    var otherItem = {
+      item: item,
+      cat: cat
+    };
+
+    // if (!GeometryUtils.needSnap(currentItem, otherItem)) {
+    //   return;
+    // }
+
+    if (!item.selected) {
+      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)]
+        });
+      }
+    }
+  });
+
+  // layer.holes.forEach(hole => {
+  //   let val = {pos:{x:hole.x, y:hole.y}, rotRad:hole.rotation};
+  //   let catid = hole.type;
+  //   let cat = catalog.elements[catid];
+  //   let width = hole.properties.getIn(['width']).getIn(['length']);
+  //   let height = hole.properties.getIn(['height']).getIn(['length']);
+  //   val.size = {width, height};
+  //   let otherItem = {
+  //     hole,
+  //     cat
+  //   }
+
+  //   // if (!GeometryUtils.needSnap(currentItem, otherItem)) {
+  //   //   return;
+  //   // }
+
+  //   if (!hole.selected) {
+  //     let x = val.pos.x;
+  //     let y = val.pos.y;
+  //     let rotRad = val.rotRad;
+  //     let w = val.size.width / 2;
+  //     let mx = x - w * Math.cos(rotRad);
+  //     let my = y - w * Math.sin(rotRad);
+  //     let kx = x + w * Math.cos(rotRad);
+  //     let ky = y + w * Math.sin(rotRad);
+  //     let x0 = mx - 10 * Math.sin(rotRad);
+  //     let y0 = my + 10 * Math.cos(rotRad);
+  //     let x3 = mx + 10 * Math.sin(rotRad);
+  //     let y3 = my - 10 * Math.cos(rotRad);
+  //     let x1 = kx - 10 * Math.sin(rotRad);
+  //     let y1 = ky + 10 * Math.cos(rotRad);
+  //     let x2 = kx + 10 * Math.sin(rotRad);
+  //     let y2 = ky - 10 * Math.cos(rotRad);
+  //     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)]}); // right
+  //     rectarray.push({'rect':[point(x2,y2), point(x3,y3), point(x2,y2), point(x3,y3)]}); // front
+  //     rectarray.push({'rect':[point(x3,y3), point(x0,y0), point(x3,y3), point(x0,y0)]}); // left
+  //   }
+  // });
+  return {
+    others: rectarray
+  };
+}
+export function calcDistancesFromItemToWalls(attributesFormData, layer, catalog) {
+  if (isEmpty(attributesFormData)) return [];
+  var x = attributesFormData.get('x');
+  var y = attributesFormData.get('y');
+  var rotRad = attributesFormData.get('rotation') / 180 * Math.PI;
+  var width, height;
+  if (attributesFormData.get('properties').get('width') || attributesFormData.get('properties').get('depth')) {
+    width = convert(attributesFormData.get('properties').get('width').get('_length')).from(attributesFormData.get('properties').get('width').get('_unit')).to('cm');
+    height = convert(attributesFormData.get('properties').get('depth').get('_length')).from(attributesFormData.get('properties').get('depth').get('_unit')).to('cm');
+  } else {
+    width = convert(attributesFormData.info.sizeinfo.width).from('in').to('cm');
+    height = convert(attributesFormData.info.sizeinfo.depth).from('in').to('cm');
+  }
+  var center_h = 3 * height / 8;
+  var center_x = x;
+  var center_y = y;
+  var center_x1 = x - center_h * Math.sin(rotRad);
+  var center_y1 = y + center_h * Math.cos(rotRad);
+  var PointArray = [];
+  var itemInfo = {
+    pos: {
+      x: x,
+      y: y
+    },
+    rotRad: rotRad
+  };
+  itemInfo.size = {
+    width: width,
+    height: height
+  };
+  var curiteminfo = getCalcRectFromItem2(itemInfo);
+  var allItemRect = getAllItems2(layer, catalog);
+  var allLines = getAllLines(layer);
+  var allLineRects = buildRectFromLines(layer, allLines);
+  var allRect = allLineRects.concat(allItemRect.others);
+  curiteminfo.rectCenterPoint.forEach(function (centerpoint) {
+    var comparelength = [];
+    var a;
+    var RectLineFuction;
+    if (centerpoint[1] === 180 || centerpoint[1] === 0) RectLineFuction = linePassingThroughTwoPoints(centerpoint[0].x, centerpoint[0].y, center_x1, center_y1);else RectLineFuction = linePassingThroughTwoPoints(centerpoint[0].x, centerpoint[0].y, center_x, center_y);
+    allRect.forEach(function (linerect) {
+      var p0 = clone_point(linerect.rect[2]);
+      var p1 = clone_point(linerect.rect[3]);
+      var lineFunction = {};
+      if (p0.x !== p1.x || p0.y !== p1.y) lineFunction = linePassingThroughTwoPoints(p0.x, p0.y, p1.x, p1.y);
+      var coordinatePoint = twoLinesIntersection(lineFunction.a, lineFunction.b, lineFunction.c, RectLineFuction.a, RectLineFuction.b, RectLineFuction.c);
+      if (coordinatePoint !== undefined) {
+        if (pointsDistance(p0.x, p0.y, p1.x, p1.y) > pointsDistance(p0.x, p0.y, coordinatePoint.x, coordinatePoint.y) && pointsDistance(p0.x, p0.y, p1.x, p1.y) > pointsDistance(p1.x, p1.y, coordinatePoint.x, coordinatePoint.y)) {
+          if (pointsDistance(coordinatePoint.x, coordinatePoint.y, center_x, center_y) > pointsDistance(centerpoint[0].x, centerpoint[0].y, coordinatePoint.x, coordinatePoint.y)) {
+            comparelength.push(pointsDistance(centerpoint[0].x, centerpoint[0].y, coordinatePoint.x, coordinatePoint.y));
+            a = Math.min.apply(null, comparelength);
+          }
+        }
+      }
+    });
+    PointArray.push([a, centerpoint[1]]);
+  });
+  return {
+    PointArray: PointArray
+  };
 }

package/es/utils/isolate-event-handler.js

@@ -666,9 +666,9 @@ function initPropData(element, catalog) {
   }
   return new Map(mapped);
 }
-function updateAttributeOfSelectedElement(element, attrPayload, state, layer, projectActions) {
+function updateAttributeOfSelectedElement(element, attrPayload, state, layer, catalog, projectActions) {
   var _attributesFormData;
-  var callback = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : null;
+  var callback = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : null;
   var attributesFormData = initAttrData(element, layer, state);
   var value = attrPayload.value;
   var attributeName = attrPayload.attributeName;
@@ -721,6 +721,10 @@ function updateAttributeOfSelectedElement(element, attrPayload, state, layer, pr
           attributesFormData = attributesFormData.set('y', yVal);
         } else {
           attributesFormData = attributesFormData.set(attributeName, value);
+          // update the distances from wall
+          var _GeometryUtils$calcDi = GeometryUtils.calcDistancesFromItemToWalls(attributesFormData, layer, catalog),
+            PointArray = _GeometryUtils$calcDi.PointArray;
+          attributesFormData = attributesFormData.set('distArray', PointArray);
         }
         break;
       }
@@ -1350,9 +1354,9 @@ function _handleExternalEvent() {
           _layerId = state.getIn(['scene', 'selectedLayer']);
           layer = state.getIn(['scene', 'layers', _layerId]);
           _layer$getIn = layer.getIn(['selected']), selectedLines = _layer$getIn.lines, selectedHoles = _layer$getIn.holes, selectedItems = _layer$getIn.items;
-          for (_i4 = 0; _i4 < selectedLines.size; _i4++) (evt === null || evt === void 0 ? void 0 : evt.type) === EXTERNAL_EVENT_UPDATE_ATTRIBUTE ? updateAttributeOfSelectedElement(layer.getIn(['lines', selectedLines.get(_i4)]), evt.payload, state, layer, props.projectActions, evt.callback) : updatePropertyOfSelectedElement(layer.getIn(['lines', selectedLines.get(_i4)]), evt.payload, props.catalog, props.projectActions, evt.callback);
-          for (_i5 = 0; _i5 < selectedHoles.size; _i5++) (evt === null || evt === void 0 ? void 0 : evt.type) === EXTERNAL_EVENT_UPDATE_ATTRIBUTE ? updateAttributeOfSelectedElement(layer.getIn(['holes', selectedHoles.get(_i5)]), evt.payload, state, layer, props.projectActions, evt.callback) : updatePropertyOfSelectedElement(layer.getIn(['holes', selectedHoles.get(_i5)]), evt.payload, props.catalog, props.projectActions, evt.callback);
-          for (_i6 = 0; _i6 < selectedItems.size; _i6++) (evt === null || evt === void 0 ? void 0 : evt.type) === EXTERNAL_EVENT_UPDATE_ATTRIBUTE ? updateAttributeOfSelectedElement(layer.getIn(['items', selectedItems.get(_i6)]), evt.payload, state, layer, props.projectActions, evt.callback) : updatePropertyOfSelectedElement(layer.getIn(['items', selectedItems.get(_i6)]), evt.payload, props.catalog, props.projectActions, evt.callback);
+          for (_i4 = 0; _i4 < selectedLines.size; _i4++) (evt === null || evt === void 0 ? void 0 : evt.type) === EXTERNAL_EVENT_UPDATE_ATTRIBUTE ? updateAttributeOfSelectedElement(layer.getIn(['lines', selectedLines.get(_i4)]), evt.payload, state, layer, props.catalog, props.projectActions, evt.callback) : updatePropertyOfSelectedElement(layer.getIn(['lines', selectedLines.get(_i4)]), evt.payload, props.catalog, props.projectActions, evt.callback);
+          for (_i5 = 0; _i5 < selectedHoles.size; _i5++) (evt === null || evt === void 0 ? void 0 : evt.type) === EXTERNAL_EVENT_UPDATE_ATTRIBUTE ? updateAttributeOfSelectedElement(layer.getIn(['holes', selectedHoles.get(_i5)]), evt.payload, state, layer, props.catalog, props.projectActions, evt.callback) : updatePropertyOfSelectedElement(layer.getIn(['holes', selectedHoles.get(_i5)]), evt.payload, props.catalog, props.projectActions, evt.callback);
+          for (_i6 = 0; _i6 < selectedItems.size; _i6++) (evt === null || evt === void 0 ? void 0 : evt.type) === EXTERNAL_EVENT_UPDATE_ATTRIBUTE ? updateAttributeOfSelectedElement(layer.getIn(['items', selectedItems.get(_i6)]), evt.payload, state, layer, props.catalog, props.projectActions, evt.callback) : updatePropertyOfSelectedElement(layer.getIn(['items', selectedItems.get(_i6)]), evt.payload, props.catalog, props.projectActions, evt.callback);
           return _context1.abrupt("continue", 35);
         case 31:
           _layerID = state.scene.selectedLayer;

package/lib/devLiteRenderer.js

@@ -24,6 +24,7 @@ var _reactDom = _interopRequireDefault(require("react-dom"));
 var _LiteRenderer = _interopRequireDefault(require("./LiteRenderer"));
 var _antd = require("antd");
 var _constants = require("./constants");
+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 _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
 // --- renderer props ---
 var options = {
@@ -663,7 +664,26 @@ function WorkSpace(props) {
       };
       setExternalEvent(evt);
     }
-  }, "Add room shape from width, height")), /*#__PURE__*/_react["default"].createElement(_LiteRenderer["default"], {
+  }, "Add room shape from width, height"), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var _tl = Math.floor(Math.random() * 50);
+      var tl = (0, _convertUnitsLite.convert)(_tl).from('in').to('cm');
+      var evt = {
+        type: _constants.EXTERNAL_EVENT_UPDATE_PROPERTY,
+        payload: {
+          propertyName: _constants.PROP_RESIZE_WIDTH,
+          value: new _immutable.Map({
+            _length: _tl,
+            // inch
+            _unit: 'in',
+            length: tl // cm
+          })
+        }
+      };
+      setExternalEvent(evt);
+    }
+  }, "random width")), /*#__PURE__*/_react["default"].createElement(_LiteRenderer["default"], {
     width: props.width,
     height: props.height,
     configData: _mockProps["default"].configData,

package/lib/utils/geometry.js

@@ -14,6 +14,7 @@ exports.angleBetweenTwoPoints = angleBetweenTwoPoints;
 exports.angleBetweenTwoPointsAndOrigin = angleBetweenTwoPointsAndOrigin;
 exports.buildRectFromLines = buildRectFromLines;
 exports.calcCreateSnap = calcCreateSnap;
+exports.calcDistancesFromItemToWalls = calcDistancesFromItemToWalls;
 exports.calcSnap = calcSnap;
 exports.calcSnap1 = calcSnap1;
 exports.calcSnap2 = calcSnap2;
@@ -2542,4 +2543,209 @@ function validRect(itemRect, rects) {
   return rects.every(function (rect) {
     return !intersectRect(rect.rect, updatedItemRect.rect);
   });
+}
+function getCalcRectFromItem2(itemInfo) {
+  var x = itemInfo.pos.x;
+  var y = itemInfo.pos.y;
+  var w = itemInfo.size.width / 2;
+  var h = itemInfo.size.height / 2;
+  var rotRad = itemInfo.rotRad;
+  var mh = 3 * h / 4;
+  var mx = x - w * Math.cos(rotRad) - mh * Math.sin(rotRad);
+  var my = y - w * Math.sin(rotRad) + mh * Math.cos(rotRad);
+  var m2x = x + w * Math.cos(rotRad) - mh * Math.sin(rotRad);
+  var m2y = y + w * Math.sin(rotRad) + mh * Math.cos(rotRad);
+  var m3x = x - h * Math.sin(rotRad);
+  var m3y = y + h * Math.cos(rotRad);
+  var m1x = x + h * Math.sin(rotRad);
+  var m1y = y - h * Math.cos(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;
+  return {
+    rectCenterPoint: [[point(mx, my), 180], [point(m1x, m1y), -90], [point(m2x, m2y), 0], [point(m3x, m3y), 90]]
+  };
+}
+function getAllItems2(layer, catalog) {
+  var rectarray = [];
+  var currentItem;
+  var selectedItem;
+  if (layer.selected.items.size > 0) {
+    selectedItem = layer.getIn(['items', layer.selected.items.get(0)]);
+    var catid = selectedItem.type;
+    var cat = findCatalogElement(catalog, catid);
+    currentItem = {
+      selectedItem: selectedItem,
+      cat: cat
+    };
+  }
+  layer.items.forEach(function (item) {
+    var val = {
+      pos: {
+        x: item.x,
+        y: item.y
+      },
+      rotRad: item.rotation / 180 * Math.PI
+    };
+    var catid = item.type;
+    var cat = 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;
+    // let height = cat.info.sizeinfo.depth;
+    val.size = {
+      width: width,
+      height: height
+    };
+    var otherItem = {
+      item: item,
+      cat: cat
+    };
+
+    // if (!GeometryUtils.needSnap(currentItem, otherItem)) {
+    //   return;
+    // }
+
+    if (!item.selected) {
+      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)]
+        });
+      }
+    }
+  });
+
+  // layer.holes.forEach(hole => {
+  //   let val = {pos:{x:hole.x, y:hole.y}, rotRad:hole.rotation};
+  //   let catid = hole.type;
+  //   let cat = catalog.elements[catid];
+  //   let width = hole.properties.getIn(['width']).getIn(['length']);
+  //   let height = hole.properties.getIn(['height']).getIn(['length']);
+  //   val.size = {width, height};
+  //   let otherItem = {
+  //     hole,
+  //     cat
+  //   }
+
+  //   // if (!GeometryUtils.needSnap(currentItem, otherItem)) {
+  //   //   return;
+  //   // }
+
+  //   if (!hole.selected) {
+  //     let x = val.pos.x;
+  //     let y = val.pos.y;
+  //     let rotRad = val.rotRad;
+  //     let w = val.size.width / 2;
+  //     let mx = x - w * Math.cos(rotRad);
+  //     let my = y - w * Math.sin(rotRad);
+  //     let kx = x + w * Math.cos(rotRad);
+  //     let ky = y + w * Math.sin(rotRad);
+  //     let x0 = mx - 10 * Math.sin(rotRad);
+  //     let y0 = my + 10 * Math.cos(rotRad);
+  //     let x3 = mx + 10 * Math.sin(rotRad);
+  //     let y3 = my - 10 * Math.cos(rotRad);
+  //     let x1 = kx - 10 * Math.sin(rotRad);
+  //     let y1 = ky + 10 * Math.cos(rotRad);
+  //     let x2 = kx + 10 * Math.sin(rotRad);
+  //     let y2 = ky - 10 * Math.cos(rotRad);
+  //     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)]}); // right
+  //     rectarray.push({'rect':[point(x2,y2), point(x3,y3), point(x2,y2), point(x3,y3)]}); // front
+  //     rectarray.push({'rect':[point(x3,y3), point(x0,y0), point(x3,y3), point(x0,y0)]}); // left
+  //   }
+  // });
+  return {
+    others: rectarray
+  };
+}
+function calcDistancesFromItemToWalls(attributesFormData, layer, catalog) {
+  if ((0, _helper.isEmpty)(attributesFormData)) return [];
+  var x = attributesFormData.get('x');
+  var y = attributesFormData.get('y');
+  var rotRad = attributesFormData.get('rotation') / 180 * Math.PI;
+  var width, height;
+  if (attributesFormData.get('properties').get('width') || attributesFormData.get('properties').get('depth')) {
+    width = (0, _convertUnitsLite.convert)(attributesFormData.get('properties').get('width').get('_length')).from(attributesFormData.get('properties').get('width').get('_unit')).to('cm');
+    height = (0, _convertUnitsLite.convert)(attributesFormData.get('properties').get('depth').get('_length')).from(attributesFormData.get('properties').get('depth').get('_unit')).to('cm');
+  } else {
+    width = (0, _convertUnitsLite.convert)(attributesFormData.info.sizeinfo.width).from('in').to('cm');
+    height = (0, _convertUnitsLite.convert)(attributesFormData.info.sizeinfo.depth).from('in').to('cm');
+  }
+  var center_h = 3 * height / 8;
+  var center_x = x;
+  var center_y = y;
+  var center_x1 = x - center_h * Math.sin(rotRad);
+  var center_y1 = y + center_h * Math.cos(rotRad);
+  var PointArray = [];
+  var itemInfo = {
+    pos: {
+      x: x,
+      y: y
+    },
+    rotRad: rotRad
+  };
+  itemInfo.size = {
+    width: width,
+    height: height
+  };
+  var curiteminfo = getCalcRectFromItem2(itemInfo);
+  var allItemRect = getAllItems2(layer, catalog);
+  var allLines = getAllLines(layer);
+  var allLineRects = buildRectFromLines(layer, allLines);
+  var allRect = allLineRects.concat(allItemRect.others);
+  curiteminfo.rectCenterPoint.forEach(function (centerpoint) {
+    var comparelength = [];
+    var a;
+    var RectLineFuction;
+    if (centerpoint[1] === 180 || centerpoint[1] === 0) RectLineFuction = linePassingThroughTwoPoints(centerpoint[0].x, centerpoint[0].y, center_x1, center_y1);else RectLineFuction = linePassingThroughTwoPoints(centerpoint[0].x, centerpoint[0].y, center_x, center_y);
+    allRect.forEach(function (linerect) {
+      var p0 = clone_point(linerect.rect[2]);
+      var p1 = clone_point(linerect.rect[3]);
+      var lineFunction = {};
+      if (p0.x !== p1.x || p0.y !== p1.y) lineFunction = linePassingThroughTwoPoints(p0.x, p0.y, p1.x, p1.y);
+      var coordinatePoint = twoLinesIntersection(lineFunction.a, lineFunction.b, lineFunction.c, RectLineFuction.a, RectLineFuction.b, RectLineFuction.c);
+      if (coordinatePoint !== undefined) {
+        if (pointsDistance(p0.x, p0.y, p1.x, p1.y) > pointsDistance(p0.x, p0.y, coordinatePoint.x, coordinatePoint.y) && pointsDistance(p0.x, p0.y, p1.x, p1.y) > pointsDistance(p1.x, p1.y, coordinatePoint.x, coordinatePoint.y)) {
+          if (pointsDistance(coordinatePoint.x, coordinatePoint.y, center_x, center_y) > pointsDistance(centerpoint[0].x, centerpoint[0].y, coordinatePoint.x, coordinatePoint.y)) {
+            comparelength.push(pointsDistance(centerpoint[0].x, centerpoint[0].y, coordinatePoint.x, coordinatePoint.y));
+            a = Math.min.apply(null, comparelength);
+          }
+        }
+      }
+    });
+    PointArray.push([a, centerpoint[1]]);
+  });
+  return {
+    PointArray: PointArray
+  };
 }

package/lib/utils/isolate-event-handler.js

@@ -673,9 +673,9 @@ function initPropData(element, catalog) {
   }
   return new _immutable.Map(mapped);
 }
-function updateAttributeOfSelectedElement(element, attrPayload, state, layer, projectActions) {
+function updateAttributeOfSelectedElement(element, attrPayload, state, layer, catalog, projectActions) {
   var _attributesFormData;
-  var callback = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : null;
+  var callback = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : null;
   var attributesFormData = initAttrData(element, layer, state);
   var value = attrPayload.value;
   var attributeName = attrPayload.attributeName;
@@ -728,6 +728,10 @@ function updateAttributeOfSelectedElement(element, attrPayload, state, layer, pr
           attributesFormData = attributesFormData.set('y', yVal);
         } else {
           attributesFormData = attributesFormData.set(attributeName, value);
+          // update the distances from wall
+          var _GeometryUtils$calcDi = _export.GeometryUtils.calcDistancesFromItemToWalls(attributesFormData, layer, catalog),
+            PointArray = _GeometryUtils$calcDi.PointArray;
+          attributesFormData = attributesFormData.set('distArray', PointArray);
         }
         break;
       }
@@ -1357,9 +1361,9 @@ function _handleExternalEvent() {
           _layerId = state.getIn(['scene', 'selectedLayer']);
           layer = state.getIn(['scene', 'layers', _layerId]);
           _layer$getIn = layer.getIn(['selected']), selectedLines = _layer$getIn.lines, selectedHoles = _layer$getIn.holes, selectedItems = _layer$getIn.items;
-          for (_i4 = 0; _i4 < selectedLines.size; _i4++) (evt === null || evt === void 0 ? void 0 : evt.type) === _constants.EXTERNAL_EVENT_UPDATE_ATTRIBUTE ? updateAttributeOfSelectedElement(layer.getIn(['lines', selectedLines.get(_i4)]), evt.payload, state, layer, props.projectActions, evt.callback) : updatePropertyOfSelectedElement(layer.getIn(['lines', selectedLines.get(_i4)]), evt.payload, props.catalog, props.projectActions, evt.callback);
-          for (_i5 = 0; _i5 < selectedHoles.size; _i5++) (evt === null || evt === void 0 ? void 0 : evt.type) === _constants.EXTERNAL_EVENT_UPDATE_ATTRIBUTE ? updateAttributeOfSelectedElement(layer.getIn(['holes', selectedHoles.get(_i5)]), evt.payload, state, layer, props.projectActions, evt.callback) : updatePropertyOfSelectedElement(layer.getIn(['holes', selectedHoles.get(_i5)]), evt.payload, props.catalog, props.projectActions, evt.callback);
-          for (_i6 = 0; _i6 < selectedItems.size; _i6++) (evt === null || evt === void 0 ? void 0 : evt.type) === _constants.EXTERNAL_EVENT_UPDATE_ATTRIBUTE ? updateAttributeOfSelectedElement(layer.getIn(['items', selectedItems.get(_i6)]), evt.payload, state, layer, props.projectActions, evt.callback) : updatePropertyOfSelectedElement(layer.getIn(['items', selectedItems.get(_i6)]), evt.payload, props.catalog, props.projectActions, evt.callback);
+          for (_i4 = 0; _i4 < selectedLines.size; _i4++) (evt === null || evt === void 0 ? void 0 : evt.type) === _constants.EXTERNAL_EVENT_UPDATE_ATTRIBUTE ? updateAttributeOfSelectedElement(layer.getIn(['lines', selectedLines.get(_i4)]), evt.payload, state, layer, props.catalog, props.projectActions, evt.callback) : updatePropertyOfSelectedElement(layer.getIn(['lines', selectedLines.get(_i4)]), evt.payload, props.catalog, props.projectActions, evt.callback);
+          for (_i5 = 0; _i5 < selectedHoles.size; _i5++) (evt === null || evt === void 0 ? void 0 : evt.type) === _constants.EXTERNAL_EVENT_UPDATE_ATTRIBUTE ? updateAttributeOfSelectedElement(layer.getIn(['holes', selectedHoles.get(_i5)]), evt.payload, state, layer, props.catalog, props.projectActions, evt.callback) : updatePropertyOfSelectedElement(layer.getIn(['holes', selectedHoles.get(_i5)]), evt.payload, props.catalog, props.projectActions, evt.callback);
+          for (_i6 = 0; _i6 < selectedItems.size; _i6++) (evt === null || evt === void 0 ? void 0 : evt.type) === _constants.EXTERNAL_EVENT_UPDATE_ATTRIBUTE ? updateAttributeOfSelectedElement(layer.getIn(['items', selectedItems.get(_i6)]), evt.payload, state, layer, props.catalog, props.projectActions, evt.callback) : updatePropertyOfSelectedElement(layer.getIn(['items', selectedItems.get(_i6)]), evt.payload, props.catalog, props.projectActions, evt.callback);
           return _context1.abrupt("continue", 35);
         case 31:
           _layerID = state.scene.selectedLayer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kitchen-simulator",
-  "version": "3.1.0",
+  "version": "3.1.2",
   "description": "It is a kitchen simulator (self-contained micro-frontend).",
   "license": "MIT",
   "main": "lib/index.js",