kitchen-simulator 4.0.8 → 4.0.9

package/es/catalog/factories/wall-factory.js

@@ -16,7 +16,7 @@ var STYLE_LINE = {
   // strokeWidth:1
 };
 var STYLE_INTERIOR_LINE = {
-  strokeWidth: 2,
+  strokeWidth: 4,
   stroke: SharedStyle.INTERIOR_LINE.unselected
 };
 var STYLE_INTERIOR_LINE_SELECTED = {

package/es/class/layer.js

@@ -567,7 +567,7 @@ var Layer = /*#__PURE__*/function () {
         return v.id !== vertexID && GeometryUtils.samePoints(vertex, v) // &&
         //!v.lines.contains( vertexID ) &&
         //!v.areas.contains( vertexID )
-        ;
+;
       });
       if (doubleVertices.isEmpty()) return {
         updatedState: state

package/es/class/project.js

@@ -170,6 +170,8 @@ var Project = /*#__PURE__*/function () {
       // Matching state.doorStyle with layer.doorStyle
       if (state.getIn(['scene', 'layers', layerID, 'doorStyle'])) {
         doorStyle = state.getIn(['scene', 'layers', layerID, 'doorStyle']);
+      } else if (!isEmpty(doorStyle)) {
+        state = state.setIn(['scene', 'layers', layerID, 'doorStyle'], doorStyle);
       }
       state = state.merge({
         doorStyle: doorStyle,

package/es/components/viewer2d/line.js

@@ -34,28 +34,28 @@ export var STYLE_ROOM_SHAPE = {
 var STYLE_DASH = {
   stroke: DASH_LINE_COLOR,
   strokeDasharray: '4 4',
-  strokeWidth: '2px',
+  strokeWidth: '1px',
   strokeLinecap: 'round'
 };
 var STYLE_ROOM_ELEMENT = {
   fill: ROOM_ELEMENT_MEASUREMENT_LINE_COLOR,
   stroke: ROOM_ELEMENT_MEASUREMENT_LINE_COLOR,
-  strokeWidth: '2px'
+  strokeWidth: '1.5px'
 };
 var STYLE_BASE_ITEM = {
   fill: BASE_ITEM_MEASUREMENT_LINE_COLOR,
   stroke: BASE_ITEM_MEASUREMENT_LINE_COLOR,
-  strokeWidth: '2px'
+  strokeWidth: '1.5px'
 };
 var STYLE_WALL_ITEM = {
   fill: WALL_ITEM_MEASUREMENT_LINE_COLOR,
   stroke: WALL_ITEM_MEASUREMENT_LINE_COLOR,
-  strokeWidth: '2px'
+  strokeWidth: '1.5px'
 };
 var STYLE_DISTANCE = {
   fill: DISTANCE_MEASUREMENT_LINE_COLOR,
   stroke: DISTANCE_MEASUREMENT_LINE_COLOR,
-  strokeWidth: '2px'
+  strokeWidth: '1.5px'
 };
 var selectStyle = function selectStyle(element, style) {
   return element.iFlag ? style : STYLE_DISTANCE;

package/es/components/viewer2d/ruler.js

@@ -1,13 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { convert } from "../../utils/convert-units-lite";
 import IDBroker from "../../utils/id-broker";
-import { LINE_THICKNESS, TEXT_COLOR_NEUTRAL_7, UNIT_FOOT, UNIT_METER } from "../../constants";
+import { TEXT_COLOR_NEUTRAL_7 } from "../../constants";
 import { STYLE_ROOM_SHAPE } from "./line";
-var STYLE = {
-  stroke: TEXT_COLOR_NEUTRAL_7,
-  strokeWidth: '1px'
-};
+import { getRulerDisplayData } from "../../utils/ruler";
 var BACKGROUNDSTYLE = {
   fill: 'transparent',
   fillOpacity: 0.8
@@ -31,13 +27,20 @@ export default function Ruler(_ref) {
     rulerUnit = _ref.rulerUnit,
     transform = _ref.transform,
     style = _ref.style;
-  var ruLength = convert(length).from(unit).to(rulerUnit);
-  var fixedLength = layer.unit === UNIT_METER || layer.unit === UNIT_FOOT ? 2 : 0;
-  var distanceText = (Math.round(convert(ruLength).from(rulerUnit).to(layer.unit) * 100) / 100).toFixed(fixedLength);
-  var textLength = (distanceText.length + layer.unit.length) * 9;
+  var _getRulerDisplayData = getRulerDisplayData({
+      length: length,
+      unit: unit,
+      rulerUnit: rulerUnit,
+      layerUnit: layer.unit
+    }),
+    distanceText = _getRulerDisplayData.distanceText,
+    unitStr = _getRulerDisplayData.unitStr,
+    textLength = _getRulerDisplayData.textLength,
+    bShowText = _getRulerDisplayData.bShowText,
+    bShowLine = _getRulerDisplayData.bShowLine;
   return /*#__PURE__*/React.createElement("g", {
     transform: transform
-  }, /*#__PURE__*/React.createElement("g", {
+  }, bShowText && /*#__PURE__*/React.createElement("g", {
     id: "ruler"
   }, /*#__PURE__*/React.createElement("rect", {
     id: "ruler_rect_".concat(IDBroker.acquireID()),
@@ -54,7 +57,7 @@ export default function Ruler(_ref) {
     transform: "scale(1, -1)",
     style: STYLE_TEXT,
     fill: TEXT_COLOR_NEUTRAL_7
-  }, distanceText, layer.unit === 'in' ? '"' : layer.unit)), /*#__PURE__*/React.createElement("line", {
+  }, distanceText, unitStr)), bShowLine && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("line", {
     x1: style === STYLE_ROOM_SHAPE ? 0 : 4,
     y1: "0",
     x2: (length - textLength) / 2 < 0 ? 0 : (length - textLength) / 2,
@@ -72,7 +75,7 @@ export default function Ruler(_ref) {
   }), /*#__PURE__*/React.createElement("polygon", {
     points: "".concat(length - 3, ", 0, ").concat(length - 6.5, ", 2, ").concat(length - 6.5, ", -2"),
     style: style
-  })));
+  }))));
 }
 Ruler.propTypes = {
   length: PropTypes.number.isRequired,

package/es/components/viewer2d/rulerDist.js

@@ -1,12 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { convert } from "../../utils/convert-units-lite";
-import { UNIT_FOOT, UNIT_METER } from "../../constants";
-var ARROW_STYLE = {
-  stroke: '#1183B7',
-  strokeWidth: '2px',
-  strokeLinecap: 'round'
-};
+import { getRulerDisplayData } from "../../utils/ruler";
 var STYLE = {
   stroke: '#455A64',
   fill: '#455A64',
@@ -32,10 +26,17 @@ export default function RulerDist(_ref) {
     transform = _ref.transform,
     angle = _ref.angle,
     rotation = _ref.rotation;
-  var ruLength = convert(length).from(unit).to(rulerUnit);
-  var fixedLength = layer.unit === UNIT_METER || layer.unit === UNIT_FOOT ? 2 : 0;
-  var distanceText = (Math.round(convert(ruLength).from(rulerUnit).to(layer.unit) * 100) / 100).toFixed(fixedLength);
-  var textLength = (distanceText.length + layer.unit.length) * 8;
+  var _getRulerDisplayData = getRulerDisplayData({
+      length: length,
+      unit: unit,
+      rulerUnit: rulerUnit,
+      layerUnit: layer.unit
+    }),
+    distanceText = _getRulerDisplayData.distanceText,
+    unitStr = _getRulerDisplayData.unitStr,
+    textLength = _getRulerDisplayData.textLength,
+    bShowText = _getRulerDisplayData.bShowText,
+    bShowLine = _getRulerDisplayData.bShowLine;
   var textangle = angle + 90;
   var textRotation = 1;
   var ay = 2;
@@ -67,47 +68,32 @@ export default function RulerDist(_ref) {
     textRotation = 180;
     ay = 5;
   }
-  if (ruLength > 0) {
-    if (convert(ruLength).from(rulerUnit).to('in') < 3) {
-      return /*#__PURE__*/React.createElement("g", {
-        transform: transform
-      }, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("text", {
-        x: "0",
-        y: "0",
-        transform: "translate(".concat(length / 2, ",").concat(ay, ") scale(1, -1) rotate(").concat(textRotation, ")"),
-        style: STYLE_TEXT
-      }, distanceText, layer.unit === 'in' ? '"' : layer.unit)));
-    } else {
-      return /*#__PURE__*/React.createElement("g", {
-        transform: transform
-      }, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("text", {
-        x: "0",
-        y: "0",
-        transform: "translate(".concat(length / 2, ",").concat(ay, ") scale(1, -1) rotate(").concat(textRotation, ")"),
-        style: STYLE_TEXT
-      }, distanceText, layer.unit === 'in' ? '"' : layer.unit)), /*#__PURE__*/React.createElement("line", {
-        x1: "2",
-        y1: "0",
-        x2: (length - textLength) / 2 < 0 ? 0 : (length - textLength) / 2,
-        y2: "0",
-        style: STYLE
-      }), /*#__PURE__*/React.createElement("polygon", {
-        points: "1, 0, 4.5, -2, 4.5, 2 ",
-        style: STYLE
-      }), /*#__PURE__*/React.createElement("line", {
-        x1: (length + textLength) / 2 < 0 ? 0 : (length + textLength) / 2 < length ? (length + textLength) / 2 : length,
-        y1: "0",
-        x2: length,
-        y2: "0",
-        style: STYLE
-      }), /*#__PURE__*/React.createElement("polygon", {
-        points: "".concat(length - 1, ", 0, ").concat(length - 4.5, ", 2, ").concat(length - 4.5, ", -2"),
-        style: STYLE
-      }));
-    }
-  } else {
-    return null;
-  }
+  return /*#__PURE__*/React.createElement("g", {
+    transform: transform
+  }, bShowText && /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("text", {
+    x: "0",
+    y: "0",
+    transform: "translate(".concat(length / 2, ",").concat(ay, ") scale(1, -1) rotate(").concat(textRotation, ")"),
+    style: STYLE_TEXT
+  }, distanceText, unitStr)), bShowLine && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("line", {
+    x1: "2",
+    y1: "0",
+    x2: (length - textLength) / 2 < 0 ? 0 : (length - textLength) / 2,
+    y2: "0",
+    style: STYLE
+  }), /*#__PURE__*/React.createElement("polygon", {
+    points: "1, 0, 4.5, -2, 4.5, 2 ",
+    style: STYLE
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: (length + textLength) / 2 < 0 ? 0 : (length + textLength) / 2 < length ? (length + textLength) / 2 : length,
+    y1: "0",
+    x2: length,
+    y2: "0",
+    style: STYLE
+  }), /*#__PURE__*/React.createElement("polygon", {
+    points: "".concat(length - 1, ", 0, ").concat(length - 4.5, ", 2, ").concat(length - 4.5, ", -2"),
+    style: STYLE
+  })));
 }
 RulerDist.propTypes = {
   length: PropTypes.number.isRequired,

package/es/components/viewer2d/viewer2d.js

@@ -835,11 +835,15 @@ export default function Viewer2D(_ref, _ref2) {
     var event = viewerEvent.originalEvent;
     var parent = document.querySelector('#kitchen-simulator-container');
     var targetRect = event.target.getBoundingClientRect();
-    var parentRect = parent.getBoundingClientRect();
-    var left = targetRect.left - parentRect.left;
-    var top = targetRect.top - parentRect.top;
-    left = left - (200 - targetRect.width) / 2;
-    top = top - (50 - targetRect.height) / 2;
+    var left = targetRect.left;
+    var top = targetRect.top;
+    if (!isEmpty(parent)) {
+      var parentRect = parent.getBoundingClientRect();
+      left = targetRect.left - parentRect.left;
+      top = targetRect.top - parentRect.top;
+      left = left - (200 - targetRect.width) / 2;
+      top = top - (50 - targetRect.height) / 2;
+    }
     if (!mode.includes('ING')) {
       setToolbar('');
     }

package/es/components/viewer3d/scene-creator.js

@@ -12,7 +12,7 @@ import { disposeObject } from "./three-memory-cleaner";
 import { ANIMATE_STEP_MAX, ANIMATE_STEP_MIN, ARRAY_3D_MODES, ARROW_TEXT_BACKCOLOR, ARROW_TEXT_FONTFACE, ARROW_TEXT_FORECOLOR, BASE_CABINET_LAYOUTPOS, BOTTOM_MOLDING_LOCATION, DECIMAL_PLACES_2, DIFFERENT_VALUES_PATH_LENGTH, DISTANCE_EPSILON, EPSILON, MIDDLE_MOLDING_LOCATION, MODE_DRAGGING_ITEM_3D, MODE_DRAWING_ITEM_3D, MODE_IDLE, MODE_IDLE_3D, MODE_ROTATING_ITEM_3D, OBJTYPE_MESH, SHADE_DARK_PURPLE_COLOR, TOP_MOLDING_LOCATION, UNIT_CENTIMETER, UNIT_FOOT, UNIT_INCH, UNIT_METER, WALL_CABINET_LAYOUTPOS } from "../../constants";
 import { GeometryUtils, IDBroker, MoldingUtils } from "../../utils/export";
 import { convert } from "../../utils/convert-units-lite";
-import { verticesDistance } from "../../utils/geometry";
+import { calcDistancesFromItemToWalls, verticesDistance } from "../../utils/geometry";
 import * as GeomUtils from "../../catalog/utils/geom-utils";
 import { loadTexture } from "../../catalog/utils/item-loader";
 import { returnReplaceableDeepSearchType } from "../viewer2d/utils";
@@ -479,19 +479,19 @@ function replaceObject(modifiedPath, layer, planData, actions, sceneData, oldSce
         if (modifiedPath[keyIndex] == 'rotation') {
           item3D.rotation.set(0, value * Math.PI / 180 + Math.PI, 0);
           setTimeout(function () {
-            getDistances(layer);
+            getDistances(layer, item);
           }, 50);
           removeSelItemMesh(tmpMoldings, item, planData, mode);
         } else if (modifiedPath[keyIndex] == 'x') {
           item3D.position.x = value;
           setTimeout(function () {
-            getDistances(layer);
+            getDistances(layer, item);
           }, 50);
           removeSelItemMesh(tmpMoldings, item, planData, mode);
         } else if (modifiedPath[keyIndex] == 'y') {
           item3D.position.z = -value;
           setTimeout(function () {
-            getDistances(layer);
+            getDistances(layer, item);
           }, 50);
           removeSelItemMesh(tmpMoldings, item, planData, mode);
         } else if (modifiedPath[keyIndex] == 'selected') {
@@ -717,7 +717,7 @@ function replaceObject(modifiedPath, layer, planData, actions, sceneData, oldSce
               return actions.itemsActions.selectItem(layer.id, modifiedPath[4]);
             });
             setTimeout(function () {
-              getDistances(layer);
+              getDistances(layer, item);
             }, 100);
           }
         } else if (modifiedPath[keyIndex] == 'length') {
@@ -845,7 +845,7 @@ function replaceObject(modifiedPath, layer, planData, actions, sceneData, oldSce
             removeItemWithoutItem(planData, layer.id, modifiedPath[4]);
             promises.push(addItem(sceneData, planData, layer, modifiedPath[4], catalog, actions.itemsActions, mode, null, rItem));
             setTimeout(function () {
-              getDistances(layer);
+              getDistances(layer, item);
             }, 100);
           }
           break;
@@ -891,7 +891,25 @@ function replaceObject(modifiedPath, layer, planData, actions, sceneData, oldSce
     promise: p1
   };
 }
-export function getDistances(layer, isCalcWall) {
+export function getDistances(layer, curItem, isCalcWall) {
+  // matching fvLine distance with OP
+  var pointArray = calcDistancesFromItemToWalls(curItem, layer).PointArray;
+  if ((pointArray === null || pointArray === void 0 ? void 0 : pointArray.length) > 0) {
+    var _loop2 = function _loop2() {
+      var direction = i === 0 ? 90 : i === 1 ? -90 : i === 2 ? 180 : 0;
+      if (fVLine[i].userData) {
+        var _pointArray$filter$;
+        var opDist = (_pointArray$filter$ = pointArray.filter(function (v) {
+          return v[1] === direction;
+        })[0]) !== null && _pointArray$filter$ !== void 0 ? _pointArray$filter$ : fVLine[i].userData.distance;
+        fVLine[i].userData.opDist = opDist[0];
+      }
+    };
+    for (var i = 0; i < ((_fVLine = fVLine) === null || _fVLine === void 0 ? void 0 : _fVLine.length); i++) {
+      var _fVLine;
+      _loop2();
+    }
+  }
   fVLine.forEach(function (line, index) {
     getLineDistance(line, layer, isEmpty(isCalcWall) ? false : isCalcWall, index);
   });
@@ -1809,7 +1827,7 @@ function addArea(sceneData, planData, layer, areaID, catalog, areaActions, mode)
     layer.lines.forEach(function (data) {
       lines.push(data);
     });
-    var _loop2 = function _loop2() {
+    var _loop3 = function _loop3() {
       var data = lines[i];
       var realVec = [];
       data.vertices.forEach(function (vec) {
@@ -1822,7 +1840,7 @@ function addArea(sceneData, planData, layer, areaID, catalog, areaActions, mode)
       }
     };
     for (var i = 0; i < lines.length; i++) {
-      if (_loop2()) break;
+      if (_loop3()) break;
     }
     ceil.translateZ(convert(layer.ceilHeight).from(layer.unit).to(UNIT_CENTIMETER));
     pivot.name = 'pivot';
@@ -1934,7 +1952,7 @@ function addItem(sceneData, planData, layer, itemID, catalog, itemsActions) {
         if (child.type === 'Line' && child.geometry.attributes !== undefined) fVLine.push(child);
       });
       setTimeout(function () {
-        getDistances();
+        getDistances(layer, item);
       }, 50);
     }
     applyOpacity(pivot, opacity);
@@ -2049,7 +2067,7 @@ function addItem(sceneData, planData, layer, itemID, catalog, itemsActions) {
       return itemsActions.selectItem(layer.id, item.id);
     });
     setTimeout(function () {
-      return getDistances(layer);
+      return getDistances(layer, item);
     }, 100);
     if (!sceneData.loadFlag && scene_mode == MODE_DRAWING_ITEM_3D) {
       itemsActions.endLoading();
@@ -3387,7 +3405,7 @@ export function updateMoldingGroupArray(MGArray, selItem, planData, layer) {
       if (isEmpty(filteredNewMGList)) {
         return true;
       }
-      var _loop3 = function _loop3() {
+      var _loop4 = function _loop4() {
           var newMG = filteredNewMGList[k];
           if (oldMG.items.some(function (it) {
             return it.id === selItem.id;
@@ -3440,7 +3458,7 @@ export function updateMoldingGroupArray(MGArray, selItem, planData, layer) {
         },
         _ret;
       for (var k = 0; k < filteredNewMGList.length; k++) {
-        _ret = _loop3();
+        _ret = _loop4();
         if (_ret) return _ret.v;
       }
       return true;

package/es/components/viewer3d/viewer3d.js

@@ -816,6 +816,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
       this.snap = function (obj, layer) {
         // snap operation
         var target = obj.userData.target;
+        if (isEmpty(target)) return;
         for (; target.parent != null;) {
           if (target.name == 'pivot') break;
           target = target.parent;
@@ -1361,10 +1362,12 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
         }
       };
       this.mouseUpEvent = function (event) {
+        var _selectedObject;
         var internalType = ''; // internalEvent type - select/drag/draw
         var selectedElement; // internalEvent data
         firstMove = 0;
         var altitude = 0;
+        var curLayer = _this2.props.state.scene.getIn(['layers', (_selectedObject = selectedObject) === null || _selectedObject === void 0 ? void 0 : _selectedObject.layerID]);
         if (allItemRect && allItemRect.cur && allItemRect.cur.itemInfo !== undefined) {
           var properties = allItemRect.cur.itemInfo.properties;
           altitude = properties.getIn(['altitude', '_length']);
@@ -1385,7 +1388,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
             actions.itemsActions.endDrawingItem(_this2.props.state.scene.selectedLayer, sPoint.x, sPoint.y);
           } else {
             removeSnapBox();
-            var polygon = GeometryUtils.getPoylgonPoints(layer);
+            var polygon = GeometryUtils.getPoylgonPoints(curLayer !== null && curLayer !== void 0 ? curLayer : layer);
             // if cursor is outside of room
             if (polygon.length > 0 && !GeometryUtils.ContainsPoint(polygon, Point.x, Point.y)) {
               actions.itemsActions.endDrawingItem(_this2.props.state.scene.selectedLayer, sPoint.x, sPoint.y);
@@ -1479,8 +1482,8 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
           }
           gridMatrix.copy(gridPlane.matrixWorld).invert();
           var addItemToolObj = function addItemToolObj() {
-            var _planData$sceneGraph, _selectedObject, _intersects$_i;
-            var selectedItem = (_planData$sceneGraph = planData.sceneGraph) === null || _planData$sceneGraph === void 0 || (_planData$sceneGraph = _planData$sceneGraph.layers[selectedObject.layerID]) === null || _planData$sceneGraph === void 0 ? void 0 : _planData$sceneGraph.items[(_selectedObject = selectedObject) === null || _selectedObject === void 0 ? void 0 : _selectedObject.itemID];
+            var _planData$sceneGraph, _selectedObject2, _intersects$_i;
+            var selectedItem = (_planData$sceneGraph = planData.sceneGraph) === null || _planData$sceneGraph === void 0 || (_planData$sceneGraph = _planData$sceneGraph.layers[selectedObject.layerID]) === null || _planData$sceneGraph === void 0 ? void 0 : _planData$sceneGraph.items[(_selectedObject2 = selectedObject) === null || _selectedObject2 === void 0 ? void 0 : _selectedObject2.itemID];
             if (isUndefined(selectedItem)) return;
             selectedElement = _this2.props.state.scene.layers.get(selectedObject.layerID).items.get(selectedObject.itemID);
             var itemPos = selectedItem.position.clone();
@@ -1513,8 +1516,9 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
                 }
                 isSelected = true;
                 setTimeout(function () {
-                  getDistances(layer);
+                  var _curLayer$id;
                   addItemToolObj();
+                  getDistances(curLayer !== null && curLayer !== void 0 ? curLayer : layer, selectedElement);
                   _this2.setState({
                     toolObj: toolObj
                   });
@@ -1524,8 +1528,8 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
                   // pointArray.push([fVLine[1].userData.distance, -90]);
                   // pointArray.push([fVLine[2].userData.distance, 180]);
                   // pointArray.push([fVLine[3].userData.distance, 0]);
-                  pointArray = GeometryUtils.calcDistancesFromItemToWalls(selectedElement, layer).PointArray;
-                  actions.itemsActions.storeDistArray(layer.id, selectedObject.itemID, pointArray);
+                  pointArray = GeometryUtils.calcDistancesFromItemToWalls(selectedElement, curLayer !== null && curLayer !== void 0 ? curLayer : layer).PointArray;
+                  actions.itemsActions.storeDistArray((_curLayer$id = curLayer === null || curLayer === void 0 ? void 0 : curLayer.id) !== null && _curLayer$id !== void 0 ? _curLayer$id : layer.id, selectedObject.itemID, pointArray);
                   internalType = internalType ? internalType : INTERNAL_EVENT_SELECT_ELEMENT;
                   sendInternalEvent(internalType, selectedElement, pointArray);
                 });
@@ -1577,11 +1581,11 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
             bRotate = false;
             bMoveUP = false;
             if (isSelected) {
-              prepareSnap(layer);
+              prepareSnap(curLayer !== null && curLayer !== void 0 ? curLayer : layer);
               selectedObj = allItemRect.cur;
             }
           } else {
-            var _planData$sceneGraph2, _selectedObject2, _selectedObject3;
+            var _planData$sceneGraph2, _selectedObject3, _selectedObject4;
             visibleTransformBox(false);
             var alti = 0;
             if (allItemRect && allItemRect.cur && allItemRect.cur.itemInfo !== undefined) {
@@ -1591,7 +1595,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
               alti = convert(alti).from(_unit2).to(_this2.props.state.scene.unit);
             }
             getPoint(event, alti);
-            var _selectedItem = planData === null || planData === void 0 || (_planData$sceneGraph2 = planData.sceneGraph) === null || _planData$sceneGraph2 === void 0 || (_planData$sceneGraph2 = _planData$sceneGraph2.layers[(_selectedObject2 = selectedObject) === null || _selectedObject2 === void 0 ? void 0 : _selectedObject2.layerID]) === null || _planData$sceneGraph2 === void 0 ? void 0 : _planData$sceneGraph2.items[(_selectedObject3 = selectedObject) === null || _selectedObject3 === void 0 ? void 0 : _selectedObject3.itemID];
+            var _selectedItem = planData === null || planData === void 0 || (_planData$sceneGraph2 = planData.sceneGraph) === null || _planData$sceneGraph2 === void 0 || (_planData$sceneGraph2 = _planData$sceneGraph2.layers[(_selectedObject3 = selectedObject) === null || _selectedObject3 === void 0 ? void 0 : _selectedObject3.layerID]) === null || _planData$sceneGraph2 === void 0 ? void 0 : _planData$sceneGraph2.items[(_selectedObject4 = selectedObject) === null || _selectedObject4 === void 0 ? void 0 : _selectedObject4.itemID];
             if (isSelected && !isEmpty(_selectedItem)) addItemToolObj();
             if (bRotate) {
               _this2.setState({
@@ -1629,7 +1633,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
           removeSnapBox();
           actions.sceneActions.updateMovingState(true);
           if (isSelected === true) {
-            prepareSnap(layer);
+            prepareSnap(curLayer !== null && curLayer !== void 0 ? curLayer : layer);
             selectedObj = allItemRect.cur;
           }
         }
@@ -2028,8 +2032,9 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
       // handle snapBox, distArray, backsplash
       this.handleAfterMovingItem = function () {
         var layer = _this2.props.state.scene.getIn(['layers', selectedObject.layerID]);
+        var item = layer.getIn(['items', selectedObject.itemID]);
         var item3D = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
-        getDistances(layer);
+        getDistances(layer, item);
         var pointArray = [],
           cnt = 0;
         pointArray.push([fVLine[0].userData.distance, 90]);
@@ -2068,7 +2073,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
         if (minDis < snapDelta && !snapFlag) {
           _this2.snap(snapObj, layer);
           snapFlag = true;
-          getDistances(layer);
+          getDistances(layer, item);
           var _i13 = 0;
           for (_i13 = 0; _i13 < fVLine.length; _i13++) {
             if (fVLine[_i13].userData.distance < snapDelta) {

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

@@ -1234,7 +1234,7 @@ export function handleExternalEvent(_x10) {
 function _handleExternalEvent() {
   _handleExternalEvent = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee0(props) {
     var _evt$payload3, _evt$payload4;
-    var evt, state, layerId, layer, _evt$payload, cdsItems, itemKeys, _loop6, i, newScene, _props$onInternalEven, sLineCnt, element, _state$viewer2D, _evt$payload$initialP, mouseX, mouseY, v2d, vPosX, vPosY, layerID, defaulTitle, _Object$keys, _evt$payload5, doorStyle, itemCDS, isAll, _layerId, _cdsItems, allItems, selectedItemId, _itemKeys, _loop7, _i2, _props$onInternalEven2, _evt$payload6, roomShapeType, width, height, _doorStyle, value, _value, _evt$payload7, moldingInfo, isGlobal, distElement, _distElement, _evt$payload8, option, _value2, _layerId2, _layer, _layer$getIn, selectedLines, selectedHoles, selectedItems, _i4, _i5, _i6, _evt$payload9, _evt$payload0, _evt$payload1, _evt$payload10, _layerID, _layer2, orginalItemInfo, originalItem, originalItemPos, replaceItem, _props$onInternalEven3, sceneData, currentTexture, _t5, _t6;
+    var evt, state, layerId, layer, _evt$payload, _state$catalog, cdsItems, itemKeys, _loop6, i, newScene, tempState, _props$onInternalEven, sLineCnt, element, _state$viewer2D, _evt$payload$initialP, mouseX, mouseY, v2d, vPosX, vPosY, layerID, defaulTitle, _Object$keys, _evt$payload5, doorStyle, itemCDS, isAll, _layerId, _cdsItems, allItems, selectedItemId, _itemKeys, _loop7, _i2, _props$onInternalEven2, _evt$payload6, roomShapeType, width, height, _doorStyle, value, _value, _evt$payload7, moldingInfo, isGlobal, distElement, _distElement, _evt$payload8, option, _value2, _layerId2, _layer, _layer$getIn, selectedLines, selectedHoles, selectedItems, _i4, _i5, _i6, _evt$payload9, _evt$payload0, _evt$payload1, _evt$payload10, _layerID, _layer2, orginalItemInfo, originalItem, originalItemPos, replaceItem, _props$onInternalEven3, sceneData, currentTexture, _t5, _t6;
     return _regeneratorRuntime.wrap(function (_context11) {
       while (1) switch (_context11.prev = _context11.next) {
         case 0:
@@ -1302,10 +1302,10 @@ function _handleExternalEvent() {
           break;
         case 5:
           newScene = new Scene(evt === null || evt === void 0 ? void 0 : evt.payload);
-          state = new State({
-            scene: newScene.toJS()
-          });
-          // request item catalog data to host app
+          tempState = new State({
+            scene: newScene.toJS(),
+            catalog: (_state$catalog = state.catalog) === null || _state$catalog === void 0 ? void 0 : _state$catalog.toJS()
+          }); // request item catalog data to host app
           if (cdsItems.length > 0) {
             (_props$onInternalEven = props.onInternalEvent) === null || _props$onInternalEven === void 0 || _props$onInternalEven.call(props, {
               type: INTERNAL_EVENT_ITEMS_CATALOG,
@@ -1326,7 +1326,7 @@ function _handleExternalEvent() {
                         break;
                       }
                       _context9.next = 2;
-                      return addItemToCatalog(rt[_i], state, props.catalog, props.projectActions);
+                      return addItemToCatalog(rt[_i], tempState, props.catalog, props.projectActions);
                     case 2:
                       _i++;
                       _context9.next = 1;

package/es/utils/molding.js

@@ -305,6 +305,7 @@ export function getLinesOfItem(item, allLineRects, catalog) {
   return lines;
 }
 export function getLinesOfItem2(item, allLineRects, catalog) {
+  var _lines;
   var lines = [];
   var outline = null;
   var element = catalog.elements[item.get('type')];
@@ -317,8 +318,9 @@ export function getLinesOfItem2(item, allLineRects, catalog) {
   var hUnit = item.properties.get('depth').get('_unit') || 'cm';
   newDepth = convert(newDepth).from(hUnit).to('cm');
   if (item) {
+    var _element;
     // Get Outline Data of Selected Item
-    outline = element.info.outline;
+    outline = (_element = element) === null || _element === void 0 ? void 0 : _element.info.outline;
     if (outline) {
       // Extract Points from `outline`
       var outlinePaths = outline.paths;
@@ -359,7 +361,7 @@ export function getLinesOfItem2(item, allLineRects, catalog) {
       }
     }
   }
-  lines = lines.filter(function (line) {
+  lines = (_lines = lines) === null || _lines === void 0 ? void 0 : _lines.filter(function (line) {
     return !GeometryUtils.isSnappedLine({
       rect: [{
         x: 0,

package/es/utils/ruler.js

@@ -0,0 +1,58 @@
+import { convert } from "../utils/convert-units-lite.js";
+import { UNIT_CENTIMETER, UNIT_INCH, UNIT_MILLIMETER } from "../constants";
+
+// Below this length, the measurement LINE is hidden
+var MIN_LENGTH_TO_SHOW_RULER_LINE_INCH = 13;
+
+// Below this length, the measurement VALUE (text) is hidden
+var MIN_LENGTH_TO_SHOW_RULER_VALUE_INCH = 5;
+function formatDistance(value, fixed) {
+  // format with fixed decimals first
+  var text = value.toFixed(fixed);
+
+  // remove trailing zeros AFTER decimal, then remove trailing dot if needed
+  // examples:
+  // 2.00 -> 2
+  // 2.50 -> 2.5
+  // 200.00 -> 200
+  text = text.replace(/\.?0+$/, '');
+  return text;
+}
+function getUnitString(unit) {
+  if (unit === 'cm' || unit === 'mm') return '';
+  if (unit === 'in') return '"';
+  return unit;
+}
+export function getRulerDisplayData(_ref) {
+  var length = _ref.length,
+    unit = _ref.unit,
+    rulerUnit = _ref.rulerUnit,
+    layerUnit = _ref.layerUnit,
+    _ref$charWidth = _ref.charWidth,
+    charWidth = _ref$charWidth === void 0 ? 8 : _ref$charWidth;
+  // 7.62 cm -> ruLength 2.99 in
+  var ruLength = convert(length).from(unit).to(rulerUnit);
+  var fixedLength = layerUnit === UNIT_MILLIMETER ? 0 : layerUnit === UNIT_CENTIMETER ? 1 : 2;
+
+  // 2.99 in -> valueInLayerUnit 2.99 in
+  var valueInLayerUnit = convert(ruLength).from(rulerUnit).to(layerUnit);
+
+  // 2.99 -> "3"
+  var distanceText = formatDistance(valueInLayerUnit, fixedLength);
+  var unitStr = getUnitString(layerUnit);
+  var textCount = distanceText.length + unitStr.length;
+  // textLength = (3 + ") * 8 = 16
+  var textLength = textCount * charWidth;
+
+  // lengthInInch = 7.62 cm -> 2.99 inch
+  var lengthInInch = convert(length).from(unit).to(UNIT_INCH);
+  var bShowText = lengthInInch > MIN_LENGTH_TO_SHOW_RULER_VALUE_INCH && length - textLength + 24 > 0;
+  var bShowLine = lengthInInch > MIN_LENGTH_TO_SHOW_RULER_LINE_INCH && length - textLength - 8 > 0;
+  return {
+    distanceText: distanceText,
+    unitStr: unitStr,
+    textLength: textLength,
+    bShowText: bShowText,
+    bShowLine: bShowLine
+  };
+}

package/lib/catalog/factories/wall-factory.js

@@ -27,7 +27,7 @@ var STYLE_LINE = {
   // strokeWidth:1
 };
 var STYLE_INTERIOR_LINE = {
-  strokeWidth: 2,
+  strokeWidth: 4,
   stroke: SharedStyle.INTERIOR_LINE.unselected
 };
 var STYLE_INTERIOR_LINE_SELECTED = {

package/lib/class/layer.js

@@ -574,7 +574,7 @@ var Layer = exports["default"] = /*#__PURE__*/function () {
         return v.id !== vertexID && _export2.GeometryUtils.samePoints(vertex, v) // &&
         //!v.lines.contains( vertexID ) &&
         //!v.areas.contains( vertexID )
-        ;
+;
       });
       if (doubleVertices.isEmpty()) return {
         updatedState: state

package/lib/class/project.js

@@ -179,6 +179,8 @@ var Project = exports["default"] = /*#__PURE__*/function () {
       // Matching state.doorStyle with layer.doorStyle
       if (state.getIn(['scene', 'layers', layerID, 'doorStyle'])) {
         doorStyle = state.getIn(['scene', 'layers', layerID, 'doorStyle']);
+      } else if (!(0, _helper.isEmpty)(doorStyle)) {
+        state = state.setIn(['scene', 'layers', layerID, 'doorStyle'], doorStyle);
       }
       state = state.merge({
         doorStyle: doorStyle,

package/lib/components/viewer2d/line.js

@@ -45,28 +45,28 @@ var STYLE_ROOM_SHAPE = exports.STYLE_ROOM_SHAPE = {
 var STYLE_DASH = {
   stroke: _constants.DASH_LINE_COLOR,
   strokeDasharray: '4 4',
-  strokeWidth: '2px',
+  strokeWidth: '1px',
   strokeLinecap: 'round'
 };
 var STYLE_ROOM_ELEMENT = {
   fill: _constants.ROOM_ELEMENT_MEASUREMENT_LINE_COLOR,
   stroke: _constants.ROOM_ELEMENT_MEASUREMENT_LINE_COLOR,
-  strokeWidth: '2px'
+  strokeWidth: '1.5px'
 };
 var STYLE_BASE_ITEM = {
   fill: _constants.BASE_ITEM_MEASUREMENT_LINE_COLOR,
   stroke: _constants.BASE_ITEM_MEASUREMENT_LINE_COLOR,
-  strokeWidth: '2px'
+  strokeWidth: '1.5px'
 };
 var STYLE_WALL_ITEM = {
   fill: _constants.WALL_ITEM_MEASUREMENT_LINE_COLOR,
   stroke: _constants.WALL_ITEM_MEASUREMENT_LINE_COLOR,
-  strokeWidth: '2px'
+  strokeWidth: '1.5px'
 };
 var STYLE_DISTANCE = {
   fill: _constants.DISTANCE_MEASUREMENT_LINE_COLOR,
   stroke: _constants.DISTANCE_MEASUREMENT_LINE_COLOR,
-  strokeWidth: '2px'
+  strokeWidth: '1.5px'
 };
 var selectStyle = function selectStyle(element, style) {
   return element.iFlag ? style : STYLE_DISTANCE;

package/lib/components/viewer2d/ruler.js

@@ -7,14 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = Ruler;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _convertUnitsLite = require("../../utils/convert-units-lite");
 var _idBroker = _interopRequireDefault(require("../../utils/id-broker"));
 var _constants = require("../../constants");
 var _line = require("./line");
-var STYLE = {
-  stroke: _constants.TEXT_COLOR_NEUTRAL_7,
-  strokeWidth: '1px'
-};
+var _ruler = require("../../utils/ruler");
 var BACKGROUNDSTYLE = {
   fill: 'transparent',
   fillOpacity: 0.8
@@ -38,13 +34,20 @@ function Ruler(_ref) {
     rulerUnit = _ref.rulerUnit,
     transform = _ref.transform,
     style = _ref.style;
-  var ruLength = (0, _convertUnitsLite.convert)(length).from(unit).to(rulerUnit);
-  var fixedLength = layer.unit === _constants.UNIT_METER || layer.unit === _constants.UNIT_FOOT ? 2 : 0;
-  var distanceText = (Math.round((0, _convertUnitsLite.convert)(ruLength).from(rulerUnit).to(layer.unit) * 100) / 100).toFixed(fixedLength);
-  var textLength = (distanceText.length + layer.unit.length) * 9;
+  var _getRulerDisplayData = (0, _ruler.getRulerDisplayData)({
+      length: length,
+      unit: unit,
+      rulerUnit: rulerUnit,
+      layerUnit: layer.unit
+    }),
+    distanceText = _getRulerDisplayData.distanceText,
+    unitStr = _getRulerDisplayData.unitStr,
+    textLength = _getRulerDisplayData.textLength,
+    bShowText = _getRulerDisplayData.bShowText,
+    bShowLine = _getRulerDisplayData.bShowLine;
   return /*#__PURE__*/_react["default"].createElement("g", {
     transform: transform
-  }, /*#__PURE__*/_react["default"].createElement("g", {
+  }, bShowText && /*#__PURE__*/_react["default"].createElement("g", {
     id: "ruler"
   }, /*#__PURE__*/_react["default"].createElement("rect", {
     id: "ruler_rect_".concat(_idBroker["default"].acquireID()),
@@ -61,7 +64,7 @@ function Ruler(_ref) {
     transform: "scale(1, -1)",
     style: STYLE_TEXT,
     fill: _constants.TEXT_COLOR_NEUTRAL_7
-  }, distanceText, layer.unit === 'in' ? '"' : layer.unit)), /*#__PURE__*/_react["default"].createElement("line", {
+  }, distanceText, unitStr)), bShowLine && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("line", {
     x1: style === _line.STYLE_ROOM_SHAPE ? 0 : 4,
     y1: "0",
     x2: (length - textLength) / 2 < 0 ? 0 : (length - textLength) / 2,
@@ -79,7 +82,7 @@ function Ruler(_ref) {
   }), /*#__PURE__*/_react["default"].createElement("polygon", {
     points: "".concat(length - 3, ", 0, ").concat(length - 6.5, ", 2, ").concat(length - 6.5, ", -2"),
     style: style
-  })));
+  }))));
 }
 Ruler.propTypes = {
   length: _propTypes["default"].number.isRequired,

package/lib/components/viewer2d/rulerDist.js

@@ -7,13 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = RulerDist;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _convertUnitsLite = require("../../utils/convert-units-lite");
-var _constants = require("../../constants");
-var ARROW_STYLE = {
-  stroke: '#1183B7',
-  strokeWidth: '2px',
-  strokeLinecap: 'round'
-};
+var _ruler = require("../../utils/ruler");
 var STYLE = {
   stroke: '#455A64',
   fill: '#455A64',
@@ -39,10 +33,17 @@ function RulerDist(_ref) {
     transform = _ref.transform,
     angle = _ref.angle,
     rotation = _ref.rotation;
-  var ruLength = (0, _convertUnitsLite.convert)(length).from(unit).to(rulerUnit);
-  var fixedLength = layer.unit === _constants.UNIT_METER || layer.unit === _constants.UNIT_FOOT ? 2 : 0;
-  var distanceText = (Math.round((0, _convertUnitsLite.convert)(ruLength).from(rulerUnit).to(layer.unit) * 100) / 100).toFixed(fixedLength);
-  var textLength = (distanceText.length + layer.unit.length) * 8;
+  var _getRulerDisplayData = (0, _ruler.getRulerDisplayData)({
+      length: length,
+      unit: unit,
+      rulerUnit: rulerUnit,
+      layerUnit: layer.unit
+    }),
+    distanceText = _getRulerDisplayData.distanceText,
+    unitStr = _getRulerDisplayData.unitStr,
+    textLength = _getRulerDisplayData.textLength,
+    bShowText = _getRulerDisplayData.bShowText,
+    bShowLine = _getRulerDisplayData.bShowLine;
   var textangle = angle + 90;
   var textRotation = 1;
   var ay = 2;
@@ -74,47 +75,32 @@ function RulerDist(_ref) {
     textRotation = 180;
     ay = 5;
   }
-  if (ruLength > 0) {
-    if ((0, _convertUnitsLite.convert)(ruLength).from(rulerUnit).to('in') < 3) {
-      return /*#__PURE__*/_react["default"].createElement("g", {
-        transform: transform
-      }, /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("text", {
-        x: "0",
-        y: "0",
-        transform: "translate(".concat(length / 2, ",").concat(ay, ") scale(1, -1) rotate(").concat(textRotation, ")"),
-        style: STYLE_TEXT
-      }, distanceText, layer.unit === 'in' ? '"' : layer.unit)));
-    } else {
-      return /*#__PURE__*/_react["default"].createElement("g", {
-        transform: transform
-      }, /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("text", {
-        x: "0",
-        y: "0",
-        transform: "translate(".concat(length / 2, ",").concat(ay, ") scale(1, -1) rotate(").concat(textRotation, ")"),
-        style: STYLE_TEXT
-      }, distanceText, layer.unit === 'in' ? '"' : layer.unit)), /*#__PURE__*/_react["default"].createElement("line", {
-        x1: "2",
-        y1: "0",
-        x2: (length - textLength) / 2 < 0 ? 0 : (length - textLength) / 2,
-        y2: "0",
-        style: STYLE
-      }), /*#__PURE__*/_react["default"].createElement("polygon", {
-        points: "1, 0, 4.5, -2, 4.5, 2 ",
-        style: STYLE
-      }), /*#__PURE__*/_react["default"].createElement("line", {
-        x1: (length + textLength) / 2 < 0 ? 0 : (length + textLength) / 2 < length ? (length + textLength) / 2 : length,
-        y1: "0",
-        x2: length,
-        y2: "0",
-        style: STYLE
-      }), /*#__PURE__*/_react["default"].createElement("polygon", {
-        points: "".concat(length - 1, ", 0, ").concat(length - 4.5, ", 2, ").concat(length - 4.5, ", -2"),
-        style: STYLE
-      }));
-    }
-  } else {
-    return null;
-  }
+  return /*#__PURE__*/_react["default"].createElement("g", {
+    transform: transform
+  }, bShowText && /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("text", {
+    x: "0",
+    y: "0",
+    transform: "translate(".concat(length / 2, ",").concat(ay, ") scale(1, -1) rotate(").concat(textRotation, ")"),
+    style: STYLE_TEXT
+  }, distanceText, unitStr)), bShowLine && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("line", {
+    x1: "2",
+    y1: "0",
+    x2: (length - textLength) / 2 < 0 ? 0 : (length - textLength) / 2,
+    y2: "0",
+    style: STYLE
+  }), /*#__PURE__*/_react["default"].createElement("polygon", {
+    points: "1, 0, 4.5, -2, 4.5, 2 ",
+    style: STYLE
+  }), /*#__PURE__*/_react["default"].createElement("line", {
+    x1: (length + textLength) / 2 < 0 ? 0 : (length + textLength) / 2 < length ? (length + textLength) / 2 : length,
+    y1: "0",
+    x2: length,
+    y2: "0",
+    style: STYLE
+  }), /*#__PURE__*/_react["default"].createElement("polygon", {
+    points: "".concat(length - 1, ", 0, ").concat(length - 4.5, ", 2, ").concat(length - 4.5, ", -2"),
+    style: STYLE
+  })));
 }
 RulerDist.propTypes = {
   length: _propTypes["default"].number.isRequired,

package/lib/components/viewer2d/viewer2d.js

@@ -844,11 +844,15 @@ function Viewer2D(_ref, _ref2) {
     var event = viewerEvent.originalEvent;
     var parent = document.querySelector('#kitchen-simulator-container');
     var targetRect = event.target.getBoundingClientRect();
-    var parentRect = parent.getBoundingClientRect();
-    var left = targetRect.left - parentRect.left;
-    var top = targetRect.top - parentRect.top;
-    left = left - (200 - targetRect.width) / 2;
-    top = top - (50 - targetRect.height) / 2;
+    var left = targetRect.left;
+    var top = targetRect.top;
+    if (!(0, _helper.isEmpty)(parent)) {
+      var parentRect = parent.getBoundingClientRect();
+      left = targetRect.left - parentRect.left;
+      top = targetRect.top - parentRect.top;
+      left = left - (200 - targetRect.width) / 2;
+      top = top - (50 - targetRect.height) / 2;
+    }
     if (!mode.includes('ING')) {
       setToolbar('');
     }

package/lib/components/viewer3d/scene-creator.js

@@ -514,19 +514,19 @@ function replaceObject(modifiedPath, layer, planData, actions, sceneData, oldSce
         if (modifiedPath[keyIndex] == 'rotation') {
           item3D.rotation.set(0, value * Math.PI / 180 + Math.PI, 0);
           setTimeout(function () {
-            getDistances(layer);
+            getDistances(layer, item);
           }, 50);
           removeSelItemMesh(tmpMoldings, item, planData, mode);
         } else if (modifiedPath[keyIndex] == 'x') {
           item3D.position.x = value;
           setTimeout(function () {
-            getDistances(layer);
+            getDistances(layer, item);
           }, 50);
           removeSelItemMesh(tmpMoldings, item, planData, mode);
         } else if (modifiedPath[keyIndex] == 'y') {
           item3D.position.z = -value;
           setTimeout(function () {
-            getDistances(layer);
+            getDistances(layer, item);
           }, 50);
           removeSelItemMesh(tmpMoldings, item, planData, mode);
         } else if (modifiedPath[keyIndex] == 'selected') {
@@ -752,7 +752,7 @@ function replaceObject(modifiedPath, layer, planData, actions, sceneData, oldSce
               return actions.itemsActions.selectItem(layer.id, modifiedPath[4]);
             });
             setTimeout(function () {
-              getDistances(layer);
+              getDistances(layer, item);
             }, 100);
           }
         } else if (modifiedPath[keyIndex] == 'length') {
@@ -880,7 +880,7 @@ function replaceObject(modifiedPath, layer, planData, actions, sceneData, oldSce
             removeItemWithoutItem(planData, layer.id, modifiedPath[4]);
             promises.push(addItem(sceneData, planData, layer, modifiedPath[4], catalog, actions.itemsActions, mode, null, rItem));
             setTimeout(function () {
-              getDistances(layer);
+              getDistances(layer, item);
             }, 100);
           }
           break;
@@ -926,7 +926,25 @@ function replaceObject(modifiedPath, layer, planData, actions, sceneData, oldSce
     promise: p1
   };
 }
-function getDistances(layer, isCalcWall) {
+function getDistances(layer, curItem, isCalcWall) {
+  // matching fvLine distance with OP
+  var pointArray = (0, _geometry2.calcDistancesFromItemToWalls)(curItem, layer).PointArray;
+  if ((pointArray === null || pointArray === void 0 ? void 0 : pointArray.length) > 0) {
+    var _loop2 = function _loop2() {
+      var direction = i === 0 ? 90 : i === 1 ? -90 : i === 2 ? 180 : 0;
+      if (fVLine[i].userData) {
+        var _pointArray$filter$;
+        var opDist = (_pointArray$filter$ = pointArray.filter(function (v) {
+          return v[1] === direction;
+        })[0]) !== null && _pointArray$filter$ !== void 0 ? _pointArray$filter$ : fVLine[i].userData.distance;
+        fVLine[i].userData.opDist = opDist[0];
+      }
+    };
+    for (var i = 0; i < ((_fVLine = fVLine) === null || _fVLine === void 0 ? void 0 : _fVLine.length); i++) {
+      var _fVLine;
+      _loop2();
+    }
+  }
   fVLine.forEach(function (line, index) {
     getLineDistance(line, layer, (0, _helper.isEmpty)(isCalcWall) ? false : isCalcWall, index);
   });
@@ -1844,7 +1862,7 @@ function addArea(sceneData, planData, layer, areaID, catalog, areaActions, mode)
     layer.lines.forEach(function (data) {
       lines.push(data);
     });
-    var _loop2 = function _loop2() {
+    var _loop3 = function _loop3() {
       var data = lines[i];
       var realVec = [];
       data.vertices.forEach(function (vec) {
@@ -1857,7 +1875,7 @@ function addArea(sceneData, planData, layer, areaID, catalog, areaActions, mode)
       }
     };
     for (var i = 0; i < lines.length; i++) {
-      if (_loop2()) break;
+      if (_loop3()) break;
     }
     ceil.translateZ((0, _convertUnitsLite.convert)(layer.ceilHeight).from(layer.unit).to(_constants.UNIT_CENTIMETER));
     pivot.name = 'pivot';
@@ -1969,7 +1987,7 @@ function addItem(sceneData, planData, layer, itemID, catalog, itemsActions) {
         if (child.type === 'Line' && child.geometry.attributes !== undefined) fVLine.push(child);
       });
       setTimeout(function () {
-        getDistances();
+        getDistances(layer, item);
       }, 50);
     }
     applyOpacity(pivot, opacity);
@@ -2084,7 +2102,7 @@ function addItem(sceneData, planData, layer, itemID, catalog, itemsActions) {
       return itemsActions.selectItem(layer.id, item.id);
     });
     setTimeout(function () {
-      return getDistances(layer);
+      return getDistances(layer, item);
     }, 100);
     if (!sceneData.loadFlag && scene_mode == _constants.MODE_DRAWING_ITEM_3D) {
       itemsActions.endLoading();
@@ -3422,7 +3440,7 @@ function updateMoldingGroupArray(MGArray, selItem, planData, layer) {
       if ((0, _helper.isEmpty)(filteredNewMGList)) {
         return true;
       }
-      var _loop3 = function _loop3() {
+      var _loop4 = function _loop4() {
           var newMG = filteredNewMGList[k];
           if (oldMG.items.some(function (it) {
             return it.id === selItem.id;
@@ -3475,7 +3493,7 @@ function updateMoldingGroupArray(MGArray, selItem, planData, layer) {
         },
         _ret;
       for (var k = 0; k < filteredNewMGList.length; k++) {
-        _ret = _loop3();
+        _ret = _loop4();
         if (_ret) return _ret.v;
       }
       return true;

package/lib/components/viewer3d/viewer3d.js

@@ -823,6 +823,7 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
       this.snap = function (obj, layer) {
         // snap operation
         var target = obj.userData.target;
+        if ((0, _helper.isEmpty)(target)) return;
         for (; target.parent != null;) {
           if (target.name == 'pivot') break;
           target = target.parent;
@@ -1368,10 +1369,12 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
         }
       };
       this.mouseUpEvent = function (event) {
+        var _selectedObject;
         var internalType = ''; // internalEvent type - select/drag/draw
         var selectedElement; // internalEvent data
         firstMove = 0;
         var altitude = 0;
+        var curLayer = _this2.props.state.scene.getIn(['layers', (_selectedObject = selectedObject) === null || _selectedObject === void 0 ? void 0 : _selectedObject.layerID]);
         if (allItemRect && allItemRect.cur && allItemRect.cur.itemInfo !== undefined) {
           var properties = allItemRect.cur.itemInfo.properties;
           altitude = properties.getIn(['altitude', '_length']);
@@ -1392,7 +1395,7 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
             actions.itemsActions.endDrawingItem(_this2.props.state.scene.selectedLayer, sPoint.x, sPoint.y);
           } else {
             removeSnapBox();
-            var polygon = _export.GeometryUtils.getPoylgonPoints(layer);
+            var polygon = _export.GeometryUtils.getPoylgonPoints(curLayer !== null && curLayer !== void 0 ? curLayer : layer);
             // if cursor is outside of room
             if (polygon.length > 0 && !_export.GeometryUtils.ContainsPoint(polygon, Point.x, Point.y)) {
               actions.itemsActions.endDrawingItem(_this2.props.state.scene.selectedLayer, sPoint.x, sPoint.y);
@@ -1486,8 +1489,8 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
           }
           gridMatrix.copy(gridPlane.matrixWorld).invert();
           var addItemToolObj = function addItemToolObj() {
-            var _planData$sceneGraph, _selectedObject, _intersects$_i;
-            var selectedItem = (_planData$sceneGraph = planData.sceneGraph) === null || _planData$sceneGraph === void 0 || (_planData$sceneGraph = _planData$sceneGraph.layers[selectedObject.layerID]) === null || _planData$sceneGraph === void 0 ? void 0 : _planData$sceneGraph.items[(_selectedObject = selectedObject) === null || _selectedObject === void 0 ? void 0 : _selectedObject.itemID];
+            var _planData$sceneGraph, _selectedObject2, _intersects$_i;
+            var selectedItem = (_planData$sceneGraph = planData.sceneGraph) === null || _planData$sceneGraph === void 0 || (_planData$sceneGraph = _planData$sceneGraph.layers[selectedObject.layerID]) === null || _planData$sceneGraph === void 0 ? void 0 : _planData$sceneGraph.items[(_selectedObject2 = selectedObject) === null || _selectedObject2 === void 0 ? void 0 : _selectedObject2.itemID];
             if ((0, _util.isUndefined)(selectedItem)) return;
             selectedElement = _this2.props.state.scene.layers.get(selectedObject.layerID).items.get(selectedObject.itemID);
             var itemPos = selectedItem.position.clone();
@@ -1520,8 +1523,9 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
                 }
                 isSelected = true;
                 setTimeout(function () {
-                  (0, _sceneCreator.getDistances)(layer);
+                  var _curLayer$id;
                   addItemToolObj();
+                  (0, _sceneCreator.getDistances)(curLayer !== null && curLayer !== void 0 ? curLayer : layer, selectedElement);
                   _this2.setState({
                     toolObj: toolObj
                   });
@@ -1531,8 +1535,8 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
                   // pointArray.push([fVLine[1].userData.distance, -90]);
                   // pointArray.push([fVLine[2].userData.distance, 180]);
                   // pointArray.push([fVLine[3].userData.distance, 0]);
-                  pointArray = _export.GeometryUtils.calcDistancesFromItemToWalls(selectedElement, layer).PointArray;
-                  actions.itemsActions.storeDistArray(layer.id, selectedObject.itemID, pointArray);
+                  pointArray = _export.GeometryUtils.calcDistancesFromItemToWalls(selectedElement, curLayer !== null && curLayer !== void 0 ? curLayer : layer).PointArray;
+                  actions.itemsActions.storeDistArray((_curLayer$id = curLayer === null || curLayer === void 0 ? void 0 : curLayer.id) !== null && _curLayer$id !== void 0 ? _curLayer$id : layer.id, selectedObject.itemID, pointArray);
                   internalType = internalType ? internalType : _constants.INTERNAL_EVENT_SELECT_ELEMENT;
                   sendInternalEvent(internalType, selectedElement, pointArray);
                 });
@@ -1584,11 +1588,11 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
             bRotate = false;
             bMoveUP = false;
             if (isSelected) {
-              prepareSnap(layer);
+              prepareSnap(curLayer !== null && curLayer !== void 0 ? curLayer : layer);
               selectedObj = allItemRect.cur;
             }
           } else {
-            var _planData$sceneGraph2, _selectedObject2, _selectedObject3;
+            var _planData$sceneGraph2, _selectedObject3, _selectedObject4;
             (0, _sceneCreator.visibleTransformBox)(false);
             var alti = 0;
             if (allItemRect && allItemRect.cur && allItemRect.cur.itemInfo !== undefined) {
@@ -1598,7 +1602,7 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
               alti = (0, _convertUnitsLite.convert)(alti).from(_unit2).to(_this2.props.state.scene.unit);
             }
             getPoint(event, alti);
-            var _selectedItem = planData === null || planData === void 0 || (_planData$sceneGraph2 = planData.sceneGraph) === null || _planData$sceneGraph2 === void 0 || (_planData$sceneGraph2 = _planData$sceneGraph2.layers[(_selectedObject2 = selectedObject) === null || _selectedObject2 === void 0 ? void 0 : _selectedObject2.layerID]) === null || _planData$sceneGraph2 === void 0 ? void 0 : _planData$sceneGraph2.items[(_selectedObject3 = selectedObject) === null || _selectedObject3 === void 0 ? void 0 : _selectedObject3.itemID];
+            var _selectedItem = planData === null || planData === void 0 || (_planData$sceneGraph2 = planData.sceneGraph) === null || _planData$sceneGraph2 === void 0 || (_planData$sceneGraph2 = _planData$sceneGraph2.layers[(_selectedObject3 = selectedObject) === null || _selectedObject3 === void 0 ? void 0 : _selectedObject3.layerID]) === null || _planData$sceneGraph2 === void 0 ? void 0 : _planData$sceneGraph2.items[(_selectedObject4 = selectedObject) === null || _selectedObject4 === void 0 ? void 0 : _selectedObject4.itemID];
             if (isSelected && !(0, _helper.isEmpty)(_selectedItem)) addItemToolObj();
             if (bRotate) {
               _this2.setState({
@@ -1636,7 +1640,7 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
           removeSnapBox();
           actions.sceneActions.updateMovingState(true);
           if (isSelected === true) {
-            prepareSnap(layer);
+            prepareSnap(curLayer !== null && curLayer !== void 0 ? curLayer : layer);
             selectedObj = allItemRect.cur;
           }
         }
@@ -2035,8 +2039,9 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
       // handle snapBox, distArray, backsplash
       this.handleAfterMovingItem = function () {
         var layer = _this2.props.state.scene.getIn(['layers', selectedObject.layerID]);
+        var item = layer.getIn(['items', selectedObject.itemID]);
         var item3D = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
-        (0, _sceneCreator.getDistances)(layer);
+        (0, _sceneCreator.getDistances)(layer, item);
         var pointArray = [],
           cnt = 0;
         pointArray.push([_sceneCreator.fVLine[0].userData.distance, 90]);
@@ -2075,7 +2080,7 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
         if (minDis < snapDelta && !snapFlag) {
           _this2.snap(snapObj, layer);
           snapFlag = true;
-          (0, _sceneCreator.getDistances)(layer);
+          (0, _sceneCreator.getDistances)(layer, item);
           var _i13 = 0;
           for (_i13 = 0; _i13 < _sceneCreator.fVLine.length; _i13++) {
             if (_sceneCreator.fVLine[_i13].userData.distance < snapDelta) {

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

@@ -1242,7 +1242,7 @@ function handleExternalEvent(_x10) {
 function _handleExternalEvent() {
   _handleExternalEvent = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee0(props) {
     var _evt$payload3, _evt$payload4;
-    var evt, state, layerId, layer, _evt$payload, cdsItems, itemKeys, _loop6, i, newScene, _props$onInternalEven, sLineCnt, element, _state$viewer2D, _evt$payload$initialP, mouseX, mouseY, v2d, vPosX, vPosY, layerID, defaulTitle, _Object$keys, _evt$payload5, doorStyle, itemCDS, isAll, _layerId, _cdsItems, allItems, selectedItemId, _itemKeys, _loop7, _i2, _props$onInternalEven2, _evt$payload6, roomShapeType, width, height, _doorStyle, value, _value, _evt$payload7, moldingInfo, isGlobal, distElement, _distElement, _evt$payload8, option, _value2, _layerId2, _layer, _layer$getIn, selectedLines, selectedHoles, selectedItems, _i4, _i5, _i6, _evt$payload9, _evt$payload0, _evt$payload1, _evt$payload10, _layerID, _layer2, orginalItemInfo, originalItem, originalItemPos, replaceItem, _props$onInternalEven3, sceneData, currentTexture, _t5, _t6;
+    var evt, state, layerId, layer, _evt$payload, _state$catalog, cdsItems, itemKeys, _loop6, i, newScene, tempState, _props$onInternalEven, sLineCnt, element, _state$viewer2D, _evt$payload$initialP, mouseX, mouseY, v2d, vPosX, vPosY, layerID, defaulTitle, _Object$keys, _evt$payload5, doorStyle, itemCDS, isAll, _layerId, _cdsItems, allItems, selectedItemId, _itemKeys, _loop7, _i2, _props$onInternalEven2, _evt$payload6, roomShapeType, width, height, _doorStyle, value, _value, _evt$payload7, moldingInfo, isGlobal, distElement, _distElement, _evt$payload8, option, _value2, _layerId2, _layer, _layer$getIn, selectedLines, selectedHoles, selectedItems, _i4, _i5, _i6, _evt$payload9, _evt$payload0, _evt$payload1, _evt$payload10, _layerID, _layer2, orginalItemInfo, originalItem, originalItemPos, replaceItem, _props$onInternalEven3, sceneData, currentTexture, _t5, _t6;
     return _regenerator["default"].wrap(function (_context11) {
       while (1) switch (_context11.prev = _context11.next) {
         case 0:
@@ -1310,10 +1310,10 @@ function _handleExternalEvent() {
           break;
         case 5:
           newScene = new _models.Scene(evt === null || evt === void 0 ? void 0 : evt.payload);
-          state = new _models.State({
-            scene: newScene.toJS()
-          });
-          // request item catalog data to host app
+          tempState = new _models.State({
+            scene: newScene.toJS(),
+            catalog: (_state$catalog = state.catalog) === null || _state$catalog === void 0 ? void 0 : _state$catalog.toJS()
+          }); // request item catalog data to host app
           if (cdsItems.length > 0) {
             (_props$onInternalEven = props.onInternalEvent) === null || _props$onInternalEven === void 0 || _props$onInternalEven.call(props, {
               type: _constants.INTERNAL_EVENT_ITEMS_CATALOG,
@@ -1334,7 +1334,7 @@ function _handleExternalEvent() {
                         break;
                       }
                       _context9.next = 2;
-                      return addItemToCatalog(rt[_i], state, props.catalog, props.projectActions);
+                      return addItemToCatalog(rt[_i], tempState, props.catalog, props.projectActions);
                     case 2:
                       _i++;
                       _context9.next = 1;

package/lib/utils/molding.js

@@ -334,6 +334,7 @@ function getLinesOfItem(item, allLineRects, catalog) {
   return lines;
 }
 function getLinesOfItem2(item, allLineRects, catalog) {
+  var _lines;
   var lines = [];
   var outline = null;
   var element = catalog.elements[item.get('type')];
@@ -346,8 +347,9 @@ function getLinesOfItem2(item, allLineRects, catalog) {
   var hUnit = item.properties.get('depth').get('_unit') || 'cm';
   newDepth = (0, _convertUnitsLite.convert)(newDepth).from(hUnit).to('cm');
   if (item) {
+    var _element;
     // Get Outline Data of Selected Item
-    outline = element.info.outline;
+    outline = (_element = element) === null || _element === void 0 ? void 0 : _element.info.outline;
     if (outline) {
       // Extract Points from `outline`
       var outlinePaths = outline.paths;
@@ -388,7 +390,7 @@ function getLinesOfItem2(item, allLineRects, catalog) {
       }
     }
   }
-  lines = lines.filter(function (line) {
+  lines = (_lines = lines) === null || _lines === void 0 ? void 0 : _lines.filter(function (line) {
     return !_export.GeometryUtils.isSnappedLine({
       rect: [{
         x: 0,

package/lib/utils/ruler.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getRulerDisplayData = getRulerDisplayData;
+var _convertUnitsLite = require("../utils/convert-units-lite.js");
+var _constants = require("../constants");
+// Below this length, the measurement LINE is hidden
+var MIN_LENGTH_TO_SHOW_RULER_LINE_INCH = 13;
+
+// Below this length, the measurement VALUE (text) is hidden
+var MIN_LENGTH_TO_SHOW_RULER_VALUE_INCH = 5;
+function formatDistance(value, fixed) {
+  // format with fixed decimals first
+  var text = value.toFixed(fixed);
+
+  // remove trailing zeros AFTER decimal, then remove trailing dot if needed
+  // examples:
+  // 2.00 -> 2
+  // 2.50 -> 2.5
+  // 200.00 -> 200
+  text = text.replace(/\.?0+$/, '');
+  return text;
+}
+function getUnitString(unit) {
+  if (unit === 'cm' || unit === 'mm') return '';
+  if (unit === 'in') return '"';
+  return unit;
+}
+function getRulerDisplayData(_ref) {
+  var length = _ref.length,
+    unit = _ref.unit,
+    rulerUnit = _ref.rulerUnit,
+    layerUnit = _ref.layerUnit,
+    _ref$charWidth = _ref.charWidth,
+    charWidth = _ref$charWidth === void 0 ? 8 : _ref$charWidth;
+  // 7.62 cm -> ruLength 2.99 in
+  var ruLength = (0, _convertUnitsLite.convert)(length).from(unit).to(rulerUnit);
+  var fixedLength = layerUnit === _constants.UNIT_MILLIMETER ? 0 : layerUnit === _constants.UNIT_CENTIMETER ? 1 : 2;
+
+  // 2.99 in -> valueInLayerUnit 2.99 in
+  var valueInLayerUnit = (0, _convertUnitsLite.convert)(ruLength).from(rulerUnit).to(layerUnit);
+
+  // 2.99 -> "3"
+  var distanceText = formatDistance(valueInLayerUnit, fixedLength);
+  var unitStr = getUnitString(layerUnit);
+  var textCount = distanceText.length + unitStr.length;
+  // textLength = (3 + ") * 8 = 16
+  var textLength = textCount * charWidth;
+
+  // lengthInInch = 7.62 cm -> 2.99 inch
+  var lengthInInch = (0, _convertUnitsLite.convert)(length).from(unit).to(_constants.UNIT_INCH);
+  var bShowText = lengthInInch > MIN_LENGTH_TO_SHOW_RULER_VALUE_INCH && length - textLength + 24 > 0;
+  var bShowLine = lengthInInch > MIN_LENGTH_TO_SHOW_RULER_LINE_INCH && length - textLength - 8 > 0;
+  return {
+    distanceText: distanceText,
+    unitStr: unitStr,
+    textLength: textLength,
+    bShowText: bShowText,
+    bShowLine: bShowLine
+  };
+}

package/package.json

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