kitchen-simulator 4.0.0-queuedEvents → 4.0.0

package/lib/components/viewer2d/line.js

@@ -5,8 +5,10 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.STYLE_ROOM_SHAPE = void 0;
 exports.compareVertices = compareVertices;
 exports["default"] = Line;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _export = require("../../utils/export");
@@ -15,9 +17,12 @@ var _constants = require("../../constants");
 var Three = _interopRequireWildcard(require("three"));
 var _utils = require("./utils");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var STYLE = {
-  stroke: 'rgb(77, 77, 77)',
-  strokeWidth: '1px'
+  stroke: '#78909C',
+  strokeWidth: '1px',
+  strokeDasharray: '4 8'
 };
 var STYLE_ANGLE = {
   stroke: 'rgb(77, 77, 77)',
@@ -33,6 +38,39 @@ var STYLE_TEXT = {
   fontWeight: 'middle',
   fontFamily: "'Courier New', Courier, monospace"
 };
+var STYLE_ROOM_SHAPE = exports.STYLE_ROOM_SHAPE = {
+  stroke: _constants.ROOM_SHAPE_MEASUREMENT_LINE_COLOR,
+  strokeWidth: '2px'
+};
+var STYLE_DASH = {
+  stroke: _constants.DASH_LINE_COLOR,
+  strokeDasharray: '4 4',
+  strokeWidth: '2px',
+  strokeLinecap: 'round'
+};
+var STYLE_ROOM_ELEMENT = {
+  fill: _constants.ROOM_ELEMENT_MEASUREMENT_LINE_COLOR,
+  stroke: _constants.ROOM_ELEMENT_MEASUREMENT_LINE_COLOR,
+  strokeWidth: '2px'
+};
+var STYLE_BASE_ITEM = {
+  fill: _constants.BASE_ITEM_MEASUREMENT_LINE_COLOR,
+  stroke: _constants.BASE_ITEM_MEASUREMENT_LINE_COLOR,
+  strokeWidth: '2px'
+};
+var STYLE_WALL_ITEM = {
+  fill: _constants.WALL_ITEM_MEASUREMENT_LINE_COLOR,
+  stroke: _constants.WALL_ITEM_MEASUREMENT_LINE_COLOR,
+  strokeWidth: '2px'
+};
+var STYLE_DISTANCE = {
+  fill: _constants.DISTANCE_MEASUREMENT_LINE_COLOR,
+  stroke: _constants.DISTANCE_MEASUREMENT_LINE_COLOR,
+  strokeWidth: '2px'
+};
+var selectStyle = function selectStyle(element, style) {
+  return element.iFlag ? style : STYLE_DISTANCE;
+};
 function compareVertices(v0, v1) {
   return v0.x === v1.x ? v0.y - v1.y : v0.x - v1.x;
 }
@@ -57,9 +95,27 @@ function Line(_ref) {
     y1 = vertex0.y;
   var x2 = vertex1.x,
     y2 = vertex1.y;
+  var l2 = {
+    x: x1,
+    y: y1
+  };
+  var l3 = {
+    x: x2,
+    y: y2
+  };
+  var isSnapped = function isSnapped(itemRect) {
+    var r0 = itemRect.rect[0];
+    var r1 = itemRect.rect[1];
+    var r2 = itemRect.rect[2];
+    var r3 = itemRect.rect[3];
+    var delta23 = _export.GeometryUtils.verticesDistance(l2, r3) + _export.GeometryUtils.verticesDistance(r3, r2) + _export.GeometryUtils.verticesDistance(r2, l3) - _export.GeometryUtils.verticesDistance(l3, l2);
+    if (delta23 < 0.1) {
+      return true;
+    } else {
+      return false;
+    }
+  };
   var relatedvertice0x, relatedvertice0y, relatedvertice1x, relatedvertice1y;
-  // relatedvertice0x = relatedVertice.point.x;
-  // relatedvertice0y = relatedVertice.point.y;
   line.relatedVertices.forEach(function (relatedVertice) {
     if (relatedVertice.index == undefined) relatedVertice = relatedVertice.toJSON();
     if (relatedVertice.index == 0) {
@@ -72,17 +128,19 @@ function Line(_ref) {
   });
   var thickness = _constants.LINE_THICKNESS;
   var half_thickness = thickness / 2;
-  // if (compareVertices(vertex0, vertex1) >= 0 && vertex0.x !== vertex1.x) {
-  //   ({ x: x1, y: y1 } = vertex1);
-  //   ({ x: x2, y: y2 } = vertex0);
-  // }
-
+  var STEP = 20;
   var length = _export.GeometryUtils.pointsDistance(x1, y1, x2, y2);
   // let length = GeometryUtils.pointsDistance(relatedvertice0x,relatedvertice0y,relatedvertice1x,relatedvertice1y);
   var rightHoleLength, leftHoleLength, holeLength;
   var angle = _export.GeometryUtils.angleBetweenTwoPointsAndOrigin(x1, y1, x2, y2);
-  var baseSpace = 20;
-  var base_item = _export.GeometryUtils.getAllItemSpecified(scene, catalog, _constants.BASE_CABINET_LAYOUTPOS);
+  // wall cabinet
+  var wallSpace = STEP;
+  var wall_item = _export.GeometryUtils.getAllItemSpecified(scene, catalog, [_constants.WALL_CABINET_LAYOUTPOS, _constants.TALL_CABINET_LAYOUTPOS]);
+  var wallRuler = [];
+  var wall_posArray = [];
+  if (wall_item.cur) {
+    wall_item.others.push(wall_item.cur);
+  }
   // let relatedLines = [];
   var angleVertices = [];
   var layerID = state.getIn(['scene', 'selectedLayer']);
@@ -144,124 +202,108 @@ function Line(_ref) {
       });
     }
   }
-  var l2 = {
-    x: x1,
-    y: y1
-  };
-  var l3 = {
-    x: x2,
-    y: y2
-  };
-  var isSnapped = function isSnapped(itemRect) {
-    var r0 = itemRect.rect[0];
-    var r1 = itemRect.rect[1];
-    var r2 = itemRect.rect[2];
-    var r3 = itemRect.rect[3];
-    var tverArray = [l2, l3, r2, r3].sort(function (_ref2, _ref3) {
-      var x1 = _ref2.x,
-        y1 = _ref2.y;
-      var x2 = _ref3.x,
-        y2 = _ref3.y;
-      return x1 === x2 ? y1 - y2 : x1 - x2;
-    });
-    var delta23 = _export.GeometryUtils.verticesDistance(tverArray[0], tverArray[1]) + _export.GeometryUtils.verticesDistance(tverArray[1], tverArray[2]) + _export.GeometryUtils.verticesDistance(tverArray[2], tverArray[3]) - _export.GeometryUtils.verticesDistance(tverArray[0], tverArray[3]);
-    if (delta23 < 0.1) {
-      return true;
-    } else {
-      return false;
-    }
-  };
-  // base cabinet
-  var baseRuler = [];
-  var base_posArray = [];
-  if (base_item.cur) {
-    base_item.others.push(base_item.cur);
-  }
-  base_item.others.forEach(function (itemRect) {
-    var r2 = itemRect.rect[2];
-    var r3 = itemRect.rect[3];
+  if (Math.sin(angle) === 0 || _export.GeometryUtils.almostEqual(y1, y2)) wall_item.others.sort(function (a, b) {
+    return a.pos.x - b.pos.x;
+  });else wall_item.others.sort(function (a, b) {
+    return a.pos.y - b.pos.y;
+  });
+  wall_posArray.push(_objectSpread(_objectSpread({}, l2), {}, {
+    iFlag: false
+  }));
+  wall_item.others.forEach(function (itemRect) {
+    var r2 = l2 > l3 ? itemRect.rect[2] : itemRect.rect[3];
+    var r3 = l2 > l3 ? itemRect.rect[3] : itemRect.rect[2];
     if (isSnapped(itemRect)) {
-      base_posArray.push(r2);
-      base_posArray.push(r3);
+      wall_posArray.push(_objectSpread(_objectSpread({}, r2), {}, {
+        iFlag: itemRect.itemInfo.id
+      }));
+      wall_posArray.push(_objectSpread(_objectSpread({}, r3), {}, {
+        iFlag: itemRect.itemInfo.id
+      }));
     }
   });
-  base_posArray.push(l2);
-  base_posArray.push(l3);
-  var base_posAndwidth = [];
-  if (Math.abs(angle) === 0 || Math.abs(angle) === 180 || _export.GeometryUtils.almostEqual(y1, y2)) {
-    base_posArray.sort(function (a, b) {
+  wall_posArray.push(_objectSpread(_objectSpread({}, l3), {}, {
+    iFlag: false
+  }));
+  var wall_posAndwidth = [];
+  if (Math.sin(angle) === 0 || _export.GeometryUtils.almostEqual(y1, y2)) {
+    wall_posArray.sort(function (a, b) {
       return a.x - b.x;
     });
-    if (base_posArray.length > 2) {
-      for (var index = 0; index < base_posArray.length - 1; index++) {
-        var element = base_posArray[index];
-        base_posAndwidth.push({
+    if (wall_posArray.length > 2) {
+      for (var index = 0; index < wall_posArray.length - 1; index++) {
+        var element = wall_posArray[index];
+        wall_posAndwidth.push({
           pos: element,
-          length: base_posArray[index + 1].x - element.x
+          length: wall_posArray[index + 1].x - element.x,
+          iFlag: wall_posArray[index + 1].iFlag === element.iFlag ? true : false
         });
       }
     }
   } else {
-    base_posArray.sort(function (a, b) {
+    wall_posArray.sort(function (a, b) {
       return a.y - b.y;
     });
-    if (base_posArray.length > 2) {
-      for (var _index = 0; _index < base_posArray.length - 1; _index++) {
-        var _element = base_posArray[_index];
-        base_posAndwidth.push({
+    if (wall_posArray.length > 2) {
+      for (var _index = 0; _index < wall_posArray.length - 1; _index++) {
+        var _element = wall_posArray[_index];
+        wall_posAndwidth.push({
           pos: _element,
-          length: Math.abs((base_posArray[_index + 1].y - _element.y) / Math.sin(angle / 180 * Math.PI))
+          length: Math.abs((wall_posArray[_index + 1].y - _element.y) / Math.sin(angle / 180 * Math.PI)),
+          iFlag: wall_posArray[_index + 1].iFlag === _element.iFlag ? true : false
         });
       }
     }
   }
-  if (!showBaseCabinetMeasure || base_posArray.length <= 2) {
-    baseSpace -= 20;
+  if (!showWallCabinetMeasure || wall_posArray.length <= 2) {
+    wallSpace = 0;
   }
-  baseRuler = base_posAndwidth.map(function (pAw) {
+  wallRuler = wall_posAndwidth.map(function (pAw) {
     if (pAw.length > 1) {
-      if (Math.abs(angle) === 0 || Math.abs(angle) === 180 || _export.GeometryUtils.almostEqual(y1, y2)) {
+      if (Math.sin(angle) === 0 || _export.GeometryUtils.almostEqual(y1, y2)) {
         if (x1 - x2 > 0) {
           return /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("line", {
             x1: pAw.pos.x + pAw.length,
             y1: pAw.pos.y,
             x2: pAw.pos.x + pAw.length,
-            y2: pAw.pos.y - thickness / 2 - baseSpace,
-            style: STYLE
+            y2: pAw.pos.y - thickness / 2 - wallSpace,
+            style: STYLE_DASH
           }), /*#__PURE__*/_react["default"].createElement(_ruler["default"], {
             key: 4,
             layer: layer,
             unit: scene.unit,
             rulerUnit: scene.rulerUnit,
             length: pAw.length,
-            transform: "translate(".concat(pAw.pos.x, ", ").concat(pAw.pos.y - thickness / 2 - baseSpace, " ) rotate(").concat(angle + 180, ", 0, 0)")
+            transform: "translate(".concat(pAw.pos.x, ", ").concat(pAw.pos.y - thickness / 2 - wallSpace, " ) rotate(").concat(angle + 180, ", 0, 0)"),
+            style: selectStyle(pAw, STYLE_WALL_ITEM)
           }), /*#__PURE__*/_react["default"].createElement("line", {
             x1: pAw.pos.x,
             y1: pAw.pos.y,
             x2: pAw.pos.x,
-            y2: pAw.pos.y - thickness / 2 - baseSpace,
-            style: STYLE
+            y2: pAw.pos.y - thickness / 2 - wallSpace,
+            style: STYLE_DASH
           }));
         } else {
           return /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("line", {
             x1: pAw.pos.x + pAw.length,
             y1: pAw.pos.y,
             x2: pAw.pos.x + pAw.length,
-            y2: pAw.pos.y + thickness / 2 + baseSpace,
-            style: STYLE
+            y2: pAw.pos.y + thickness / 2 + wallSpace,
+            style: STYLE_DASH
           }), /*#__PURE__*/_react["default"].createElement(_ruler["default"], {
             key: 4,
             layer: layer,
             unit: scene.unit,
             rulerUnit: scene.rulerUnit,
             length: pAw.length,
-            transform: "translate(".concat(pAw.pos.x, ", ").concat(pAw.pos.y + thickness / 2 + baseSpace, " ) rotate(").concat(angle, ", 0, 0)")
+            transform: "translate(".concat(pAw.pos.x, ", ").concat(pAw.pos.y + thickness / 2 + wallSpace, " ) rotate(").concat(angle, ", 0, 0)"),
+            style: selectStyle(pAw, STYLE_WALL_ITEM)
           }), /*#__PURE__*/_react["default"].createElement("line", {
             x1: pAw.pos.x,
             y1: pAw.pos.y,
             x2: pAw.pos.x,
-            y2: pAw.pos.y + thickness / 2 + baseSpace,
-            style: STYLE
+            y2: pAw.pos.y + thickness / 2 + wallSpace,
+            style: STYLE_DASH
           }));
         }
       } else {
@@ -270,43 +312,45 @@ function Line(_ref) {
             return /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("line", {
               x1: pAw.pos.x - pAw.length * Math.cos(angle / 180 * Math.PI),
               y1: pAw.pos.y - pAw.length * Math.sin(angle / 180 * Math.PI),
-              x2: pAw.pos.x - pAw.length * Math.cos(angle / 180 * Math.PI) - (thickness / 2 + baseSpace) * Math.sin(angle / 180 * Math.PI),
-              y2: pAw.pos.y - pAw.length * Math.sin(angle / 180 * Math.PI) + (thickness / 2 + baseSpace) * Math.cos(angle / 180 * Math.PI),
-              style: STYLE
+              x2: pAw.pos.x - pAw.length * Math.cos(angle / 180 * Math.PI) - (thickness / 2 + wallSpace) * Math.sin(angle / 180 * Math.PI),
+              y2: pAw.pos.y - pAw.length * Math.sin(angle / 180 * Math.PI) + (thickness / 2 + wallSpace) * Math.cos(angle / 180 * Math.PI),
+              style: STYLE_DASH
             }), /*#__PURE__*/_react["default"].createElement(_ruler["default"], {
               key: 5,
               layer: layer,
               unit: scene.unit,
               rulerUnit: scene.rulerUnit,
               length: pAw.length,
-              transform: "translate(".concat(pAw.pos.x - pAw.length * Math.cos(angle / 180 * Math.PI) - (thickness / 2 + baseSpace) * Math.sin(angle / 180 * Math.PI), ", ").concat(pAw.pos.y - pAw.length * Math.sin(angle / 180 * Math.PI) + (thickness / 2 + baseSpace) * Math.cos(angle / 180 * Math.PI), " ) rotate(").concat(angle, ", 0, 0)")
+              transform: "translate(".concat(pAw.pos.x - pAw.length * Math.cos(angle / 180 * Math.PI) - (thickness / 2 + wallSpace) * Math.sin(angle / 180 * Math.PI), ", ").concat(pAw.pos.y - pAw.length * Math.sin(angle / 180 * Math.PI) + (thickness / 2 + wallSpace) * Math.cos(angle / 180 * Math.PI), " ) rotate(").concat(angle, ", 0, 0)"),
+              style: selectStyle(pAw, STYLE_WALL_ITEM)
             }), /*#__PURE__*/_react["default"].createElement("line", {
               x1: pAw.pos.x,
               y1: pAw.pos.y,
-              x2: pAw.pos.x - (thickness / 2 + baseSpace) * Math.sin(angle / 180 * Math.PI),
-              y2: pAw.pos.y + (thickness / 2 + baseSpace) * Math.cos(angle / 180 * Math.PI),
-              style: STYLE
+              x2: pAw.pos.x - (thickness / 2 + wallSpace) * Math.sin(angle / 180 * Math.PI),
+              y2: pAw.pos.y + (thickness / 2 + wallSpace) * Math.cos(angle / 180 * Math.PI),
+              style: STYLE_DASH
             }));
           } else {
             return /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("line", {
               x1: pAw.pos.x,
               y1: pAw.pos.y,
-              x2: pAw.pos.x - (thickness / 2 + baseSpace) * Math.sin(angle / 180 * Math.PI),
-              y2: pAw.pos.y + (thickness / 2 + baseSpace) * Math.cos(angle / 180 * Math.PI),
-              style: STYLE
+              x2: pAw.pos.x - (thickness / 2 + wallSpace) * Math.sin(angle / 180 * Math.PI),
+              y2: pAw.pos.y + (thickness / 2 + wallSpace) * Math.cos(angle / 180 * Math.PI),
+              style: STYLE_DASH
             }), /*#__PURE__*/_react["default"].createElement(_ruler["default"], {
               key: 5,
               layer: layer,
               unit: scene.unit,
               rulerUnit: scene.rulerUnit,
               length: pAw.length,
-              transform: "translate(".concat(pAw.pos.x - (thickness / 2 + baseSpace) * Math.sin(angle / 180 * Math.PI), ", ").concat(pAw.pos.y + (thickness / 2 + baseSpace) * Math.cos(angle / 180 * Math.PI), " ) rotate(").concat(angle, ", 0, 0) scale(-1, -1)")
+              transform: "translate(".concat(pAw.pos.x - (thickness / 2 + wallSpace) * Math.sin(angle / 180 * Math.PI), ", ").concat(pAw.pos.y + (thickness / 2 + wallSpace) * Math.cos(angle / 180 * Math.PI), " ) rotate(").concat(angle, ", 0, 0) scale(-1, -1)"),
+              style: selectStyle(pAw, STYLE_WALL_ITEM)
             }), /*#__PURE__*/_react["default"].createElement("line", {
               x1: pAw.pos.x - pAw.length * Math.cos(angle / 180 * Math.PI),
               y1: pAw.pos.y - pAw.length * Math.sin(angle / 180 * Math.PI),
-              x2: pAw.pos.x - pAw.length * Math.cos(angle / 180 * Math.PI) - (thickness / 2 + baseSpace) * Math.sin(angle / 180 * Math.PI),
-              y2: pAw.pos.y - pAw.length * Math.sin(angle / 180 * Math.PI) + (thickness / 2 + baseSpace) * Math.cos(angle / 180 * Math.PI),
-              style: STYLE
+              x2: pAw.pos.x - pAw.length * Math.cos(angle / 180 * Math.PI) - (thickness / 2 + wallSpace) * Math.sin(angle / 180 * Math.PI),
+              y2: pAw.pos.y - pAw.length * Math.sin(angle / 180 * Math.PI) + (thickness / 2 + wallSpace) * Math.cos(angle / 180 * Math.PI),
+              style: STYLE_DASH
             }));
           }
         } else {
@@ -314,185 +358,164 @@ function Line(_ref) {
             return /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("line", {
               x1: pAw.pos.x,
               y1: pAw.pos.y,
-              x2: pAw.pos.x - (thickness / 2 + baseSpace) * Math.sin(angle / 180 * Math.PI),
-              y2: pAw.pos.y + (thickness / 2 + baseSpace) * Math.cos(angle / 180 * Math.PI),
-              style: STYLE
+              x2: pAw.pos.x - (thickness / 2 + wallSpace) * Math.sin(angle / 180 * Math.PI),
+              y2: pAw.pos.y + (thickness / 2 + wallSpace) * Math.cos(angle / 180 * Math.PI),
+              style: STYLE_DASH
             }), /*#__PURE__*/_react["default"].createElement(_ruler["default"], {
               key: 5,
               layer: layer,
               unit: scene.unit,
               rulerUnit: scene.rulerUnit,
               length: pAw.length,
-              transform: "translate(".concat(pAw.pos.x - (thickness / 2 + baseSpace) * Math.sin(angle / 180 * Math.PI), ", ").concat(pAw.pos.y + (thickness / 2 + baseSpace) * Math.cos(angle / 180 * Math.PI), " ) rotate(").concat(angle, ", 0, 0)")
+              transform: "translate(".concat(pAw.pos.x - (thickness / 2 + wallSpace) * Math.sin(angle / 180 * Math.PI), ", ").concat(pAw.pos.y + (thickness / 2 + wallSpace) * Math.cos(angle / 180 * Math.PI), " ) rotate(").concat(angle, ", 0, 0)"),
+              style: selectStyle(pAw, STYLE_WALL_ITEM)
             }), /*#__PURE__*/_react["default"].createElement("line", {
               x1: pAw.pos.x + pAw.length * Math.cos(angle / 180 * Math.PI),
               y1: pAw.pos.y + pAw.length * Math.sin(angle / 180 * Math.PI),
-              x2: pAw.pos.x + pAw.length * Math.cos(angle / 180 * Math.PI) - (thickness / 2 + baseSpace) * Math.sin(angle / 180 * Math.PI),
-              y2: pAw.pos.y + pAw.length * Math.sin(angle / 180 * Math.PI) + (thickness / 2 + baseSpace) * Math.cos(angle / 180 * Math.PI),
-              style: STYLE
+              x2: pAw.pos.x + pAw.length * Math.cos(angle / 180 * Math.PI) - (thickness / 2 + wallSpace) * Math.sin(angle / 180 * Math.PI),
+              y2: pAw.pos.y + pAw.length * Math.sin(angle / 180 * Math.PI) + (thickness / 2 + wallSpace) * Math.cos(angle / 180 * Math.PI),
+              style: STYLE_DASH
             }));
           } else {
             return /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("line", {
               x1: pAw.pos.x + pAw.length * Math.cos(angle / 180 * Math.PI),
               y1: pAw.pos.y + pAw.length * Math.sin(angle / 180 * Math.PI),
-              x2: pAw.pos.x + pAw.length * Math.cos(angle / 180 * Math.PI) - (thickness / 2 + baseSpace) * Math.sin(angle / 180 * Math.PI),
-              y2: pAw.pos.y + pAw.length * Math.sin(angle / 180 * Math.PI) + (thickness / 2 + baseSpace) * Math.cos(angle / 180 * Math.PI),
-              style: STYLE
+              x2: pAw.pos.x + pAw.length * Math.cos(angle / 180 * Math.PI) - (thickness / 2 + wallSpace) * Math.sin(angle / 180 * Math.PI),
+              y2: pAw.pos.y + pAw.length * Math.sin(angle / 180 * Math.PI) + (thickness / 2 + wallSpace) * Math.cos(angle / 180 * Math.PI),
+              style: STYLE_DASH
             }), /*#__PURE__*/_react["default"].createElement(_ruler["default"], {
               key: 5,
               layer: layer,
               unit: scene.unit,
               rulerUnit: scene.rulerUnit,
               length: pAw.length,
-              transform: "translate(".concat(pAw.pos.x + pAw.length * Math.cos(angle / 180 * Math.PI) - (thickness / 2 + baseSpace) * Math.sin(angle / 180 * Math.PI), ", ").concat(pAw.pos.y + pAw.length * Math.sin(angle / 180 * Math.PI) + (thickness / 2 + baseSpace) * Math.cos(angle / 180 * Math.PI), " ) rotate(").concat(angle, ", 0, 0) scale(-1, -1)")
+              transform: "translate(".concat(pAw.pos.x + pAw.length * Math.cos(angle / 180 * Math.PI) - (thickness / 2 + wallSpace) * Math.sin(angle / 180 * Math.PI), ", ").concat(pAw.pos.y + pAw.length * Math.sin(angle / 180 * Math.PI) + (thickness / 2 + wallSpace) * Math.cos(angle / 180 * Math.PI), " ) rotate(").concat(angle, ", 0, 0) scale(-1, -1)"),
+              style: selectStyle(pAw, STYLE_WALL_ITEM)
             }), /*#__PURE__*/_react["default"].createElement("line", {
               x1: pAw.pos.x,
               y1: pAw.pos.y,
-              x2: pAw.pos.x - (thickness / 2 + baseSpace) * Math.sin(angle / 180 * Math.PI),
-              y2: pAw.pos.y + (thickness / 2 + baseSpace) * Math.cos(angle / 180 * Math.PI),
-              style: STYLE
+              x2: pAw.pos.x - (thickness / 2 + wallSpace) * Math.sin(angle / 180 * Math.PI),
+              y2: pAw.pos.y + (thickness / 2 + wallSpace) * Math.cos(angle / 180 * Math.PI),
+              style: STYLE_DASH
             }));
           }
         }
       }
     }
   });
-  var doorSpace = baseSpace + 20;
-  var renderedHoles = line.holes.map(function (holeID) {
-    var hole = layer.holes.get(holeID);
-    if (hole === undefined) {
-      return '';
-    }
-    var startAt = length * hole.offset;
-    var renderedHole = catalog.getElement(hole.type).render2D(hole, layer, scene);
-    return /*#__PURE__*/_react["default"].createElement("g", {
-      key: holeID,
-      transform: "translate(".concat(startAt, ", 3.5)"),
-      "data-element-root": true,
-      "data-prototype": hole.prototype,
-      "data-id": hole.id,
-      "data-selected": hole.selected,
-      "data-layer": layer.id
-    }, renderedHole);
-  });
-  var renderedLine = catalog.getElement(line.type).render2D(line, layer, scene, state);
-  var holeTemp = [];
-  var renderedRuler = [];
-  var renderedAllRuler = [];
-  if (!line.holes.size || !showWindowDoorMeasure) {
-    doorSpace -= 20;
-  }
-  var allRuler = [0],
-    holeData = [];
-  var lineHoles = line.holes.sortBy(function (holeID) {
-    var hole = layer.holes.get(holeID);
-    return !hole ? 0 : hole.offset;
-  });
-  lineHoles.forEach(function (holeID) {
-    var hole = layer.holes.get(holeID);
-    if (hole !== undefined) {
-      var startAt = length * hole.offset;
-      var holeWidth = hole.properties.toJS().width.length;
-      allRuler.push(startAt - holeWidth / 2);
-      allRuler.push(startAt + holeWidth / 2);
-      holeData["".concat(startAt - holeWidth / 2, "_").concat(startAt + holeWidth / 2)] = holeID;
-    }
-  });
-  allRuler.push(length);
 
-  // wall cabinet
-  var wallSpace = doorSpace + 20;
-  var wall_item = _export.GeometryUtils.getAllItemSpecified(scene, catalog, _constants.WALL_CABINET_LAYOUTPOS);
-  var wallRuler = [];
-  var wall_posArray = [];
-  if (wall_item.cur) {
-    wall_item.others.push(wall_item.cur);
+  //base cabinet
+  var baseSpace = wallSpace + STEP;
+  var base_item = _export.GeometryUtils.getAllItemSpecified(scene, catalog, _constants.BASE_CABINET_LAYOUTPOS);
+
+  // base cabinet
+  var baseRuler = [];
+  var base_posArray = [];
+  if (base_item.cur) {
+    base_item.others.push(base_item.cur);
   }
-  wall_item.others.forEach(function (itemRect) {
-    var r2 = itemRect.rect[2];
-    var r3 = itemRect.rect[3];
+  if (Math.sin(angle) === 0 || _export.GeometryUtils.almostEqual(y1, y2)) base_item.others.sort(function (a, b) {
+    return a.pos.x - b.pos.x;
+  });else base_item.others.sort(function (a, b) {
+    return a.pos.y - b.pos.y;
+  });
+  base_posArray.push(_objectSpread(_objectSpread({}, l2), {}, {
+    iFlag: false
+  }));
+  base_item.others.forEach(function (itemRect) {
+    var r2 = l2 > l3 ? itemRect.rect[2] : itemRect.rect[3];
+    var r3 = l2 > l3 ? itemRect.rect[3] : itemRect.rect[2];
     if (isSnapped(itemRect)) {
-      wall_posArray.push(r2);
-      wall_posArray.push(r3);
+      base_posArray.push(_objectSpread(_objectSpread({}, r2), {}, {
+        iFlag: itemRect.itemInfo.id
+      }));
+      base_posArray.push(_objectSpread(_objectSpread({}, r3), {}, {
+        iFlag: itemRect.itemInfo.id
+      }));
     }
   });
-  wall_posArray.push(l2);
-  wall_posArray.push(l3);
-  var wall_posAndwidth = [];
-  if (Math.abs(angle) === 0 || Math.abs(angle) === 180 || _export.GeometryUtils.almostEqual(y1, y2)) {
-    wall_posArray.sort(function (a, b) {
+  base_posArray.push(_objectSpread(_objectSpread({}, l3), {}, {
+    iFlag: false
+  }));
+  var base_posAndwidth = [];
+  if (Math.sin(angle) === 0 || _export.GeometryUtils.almostEqual(y1, y2)) {
+    base_posArray.sort(function (a, b) {
       return a.x - b.x;
     });
-    if (wall_posArray.length > 2) {
-      for (var _index2 = 0; _index2 < wall_posArray.length - 1; _index2++) {
-        var _element2 = wall_posArray[_index2];
-        wall_posAndwidth.push({
+    if (base_posArray.length > 2) {
+      for (var _index2 = 0; _index2 < base_posArray.length - 1; _index2++) {
+        var _element2 = base_posArray[_index2];
+        base_posAndwidth.push({
           pos: _element2,
-          length: wall_posArray[_index2 + 1].x - _element2.x
+          length: base_posArray[_index2 + 1].x - _element2.x,
+          iFlag: base_posArray[_index2 + 1].iFlag === _element2.iFlag ? true : false
         });
       }
     }
   } else {
-    wall_posArray.sort(function (a, b) {
+    base_posArray.sort(function (a, b) {
       return a.y - b.y;
     });
-    if (wall_posArray.length > 2) {
-      for (var _index3 = 0; _index3 < wall_posArray.length - 1; _index3++) {
-        var _element3 = wall_posArray[_index3];
-        wall_posAndwidth.push({
+    if (base_posArray.length > 2) {
+      for (var _index3 = 0; _index3 < base_posArray.length - 1; _index3++) {
+        var _element3 = base_posArray[_index3];
+        base_posAndwidth.push({
           pos: _element3,
-          length: Math.abs((wall_posArray[_index3 + 1].y - _element3.y) / Math.sin(angle / 180 * Math.PI))
+          length: Math.abs((base_posArray[_index3 + 1].y - _element3.y) / Math.sin(angle / 180 * Math.PI)),
+          iFlag: base_posArray[_index3 + 1].iFlag === _element3.iFlag ? true : false
         });
       }
     }
   }
-  if (!showWallCabinetMeasure || wall_posArray.length <= 2) {
-    wallSpace -= 20;
+  if (!showBaseCabinetMeasure || base_posArray.length <= 2) {
+    baseSpace -= STEP;
   }
-  wallRuler = wall_posAndwidth.map(function (pAw) {
+  baseRuler = base_posAndwidth.map(function (pAw) {
     if (pAw.length > 1) {
-      if (Math.abs(angle) === 0 || Math.abs(angle) === 180 || _export.GeometryUtils.almostEqual(y1, y2)) {
+      if (Math.sin(angle) === 0 || _export.GeometryUtils.almostEqual(y1, y2)) {
         if (x1 - x2 > 0) {
           return /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("line", {
             x1: pAw.pos.x + pAw.length,
             y1: pAw.pos.y,
             x2: pAw.pos.x + pAw.length,
-            y2: pAw.pos.y - thickness / 2 - wallSpace,
-            style: STYLE
+            y2: pAw.pos.y - thickness / 2 - baseSpace,
+            style: STYLE_DASH
           }), /*#__PURE__*/_react["default"].createElement(_ruler["default"], {
             key: 4,
             layer: layer,
             unit: scene.unit,
             rulerUnit: scene.rulerUnit,
             length: pAw.length,
-            transform: "translate(".concat(pAw.pos.x, ", ").concat(pAw.pos.y - thickness / 2 - wallSpace, " ) rotate(").concat(angle + 180, ", 0, 0)")
+            transform: "translate(".concat(pAw.pos.x, ", ").concat(pAw.pos.y - thickness / 2 - baseSpace, " ) rotate(").concat(angle + 180, ", 0, 0)"),
+            style: selectStyle(pAw, STYLE_BASE_ITEM)
           }), /*#__PURE__*/_react["default"].createElement("line", {
             x1: pAw.pos.x,
             y1: pAw.pos.y,
             x2: pAw.pos.x,
-            y2: pAw.pos.y - thickness / 2 - wallSpace,
-            style: STYLE
+            y2: pAw.pos.y - thickness / 2 - baseSpace,
+            style: STYLE_DASH
           }));
         } else {
           return /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("line", {
             x1: pAw.pos.x + pAw.length,
             y1: pAw.pos.y,
             x2: pAw.pos.x + pAw.length,
-            y2: pAw.pos.y + thickness / 2 + wallSpace,
-            style: STYLE
+            y2: pAw.pos.y + thickness / 2 + baseSpace,
+            style: STYLE_DASH
           }), /*#__PURE__*/_react["default"].createElement(_ruler["default"], {
             key: 4,
             layer: layer,
             unit: scene.unit,
             rulerUnit: scene.rulerUnit,
             length: pAw.length,
-            transform: "translate(".concat(pAw.pos.x, ", ").concat(pAw.pos.y + thickness / 2 + wallSpace, " ) rotate(").concat(angle, ", 0, 0)")
+            transform: "translate(".concat(pAw.pos.x, ", ").concat(pAw.pos.y + thickness / 2 + baseSpace, " ) rotate(").concat(angle, ", 0, 0)"),
+            style: selectStyle(pAw, STYLE_BASE_ITEM)
           }), /*#__PURE__*/_react["default"].createElement("line", {
             x1: pAw.pos.x,
             y1: pAw.pos.y,
             x2: pAw.pos.x,
-            y2: pAw.pos.y + thickness / 2 + wallSpace,
-            style: STYLE
+            y2: pAw.pos.y + thickness / 2 + baseSpace,
+            style: STYLE_DASH
           }));
         }
       } else {
@@ -501,43 +524,45 @@ function Line(_ref) {
             return /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("line", {
               x1: pAw.pos.x - pAw.length * Math.cos(angle / 180 * Math.PI),
               y1: pAw.pos.y - pAw.length * Math.sin(angle / 180 * Math.PI),
-              x2: pAw.pos.x - pAw.length * Math.cos(angle / 180 * Math.PI) - (thickness / 2 + wallSpace) * Math.sin(angle / 180 * Math.PI),
-              y2: pAw.pos.y - pAw.length * Math.sin(angle / 180 * Math.PI) + (thickness / 2 + wallSpace) * Math.cos(angle / 180 * Math.PI),
-              style: STYLE
+              x2: pAw.pos.x - pAw.length * Math.cos(angle / 180 * Math.PI) - (thickness / 2 + baseSpace) * Math.sin(angle / 180 * Math.PI),
+              y2: pAw.pos.y - pAw.length * Math.sin(angle / 180 * Math.PI) + (thickness / 2 + baseSpace) * Math.cos(angle / 180 * Math.PI),
+              style: STYLE_DASH
             }), /*#__PURE__*/_react["default"].createElement(_ruler["default"], {
               key: 5,
               layer: layer,
               unit: scene.unit,
               rulerUnit: scene.rulerUnit,
               length: pAw.length,
-              transform: "translate(".concat(pAw.pos.x - pAw.length * Math.cos(angle / 180 * Math.PI) - (thickness / 2 + wallSpace) * Math.sin(angle / 180 * Math.PI), ", ").concat(pAw.pos.y - pAw.length * Math.sin(angle / 180 * Math.PI) + (thickness / 2 + wallSpace) * Math.cos(angle / 180 * Math.PI), " ) rotate(").concat(angle, ", 0, 0)")
+              transform: "translate(".concat(pAw.pos.x - pAw.length * Math.cos(angle / 180 * Math.PI) - (thickness / 2 + baseSpace) * Math.sin(angle / 180 * Math.PI), ", ").concat(pAw.pos.y - pAw.length * Math.sin(angle / 180 * Math.PI) + (thickness / 2 + baseSpace) * Math.cos(angle / 180 * Math.PI), " ) rotate(").concat(angle, ", 0, 0)"),
+              style: selectStyle(pAw, STYLE_BASE_ITEM)
             }), /*#__PURE__*/_react["default"].createElement("line", {
               x1: pAw.pos.x,
               y1: pAw.pos.y,
-              x2: pAw.pos.x - (thickness / 2 + wallSpace) * Math.sin(angle / 180 * Math.PI),
-              y2: pAw.pos.y + (thickness / 2 + wallSpace) * Math.cos(angle / 180 * Math.PI),
-              style: STYLE
+              x2: pAw.pos.x - (thickness / 2 + baseSpace) * Math.sin(angle / 180 * Math.PI),
+              y2: pAw.pos.y + (thickness / 2 + baseSpace) * Math.cos(angle / 180 * Math.PI),
+              style: STYLE_DASH
             }));
           } else {
             return /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("line", {
               x1: pAw.pos.x,
               y1: pAw.pos.y,
-              x2: pAw.pos.x - (thickness / 2 + wallSpace) * Math.sin(angle / 180 * Math.PI),
-              y2: pAw.pos.y + (thickness / 2 + wallSpace) * Math.cos(angle / 180 * Math.PI),
-              style: STYLE
+              x2: pAw.pos.x - (thickness / 2 + baseSpace) * Math.sin(angle / 180 * Math.PI),
+              y2: pAw.pos.y + (thickness / 2 + baseSpace) * Math.cos(angle / 180 * Math.PI),
+              style: STYLE_DASH
             }), /*#__PURE__*/_react["default"].createElement(_ruler["default"], {
               key: 5,
               layer: layer,
               unit: scene.unit,
               rulerUnit: scene.rulerUnit,
               length: pAw.length,
-              transform: "translate(".concat(pAw.pos.x - (thickness / 2 + wallSpace) * Math.sin(angle / 180 * Math.PI), ", ").concat(pAw.pos.y + (thickness / 2 + wallSpace) * Math.cos(angle / 180 * Math.PI), " ) rotate(").concat(angle, ", 0, 0) scale(-1, -1)")
+              transform: "translate(".concat(pAw.pos.x - (thickness / 2 + baseSpace) * Math.sin(angle / 180 * Math.PI), ", ").concat(pAw.pos.y + (thickness / 2 + baseSpace) * Math.cos(angle / 180 * Math.PI), " ) rotate(").concat(angle, ", 0, 0) scale(-1, -1)"),
+              style: selectStyle(pAw, STYLE_BASE_ITEM)
             }), /*#__PURE__*/_react["default"].createElement("line", {
               x1: pAw.pos.x - pAw.length * Math.cos(angle / 180 * Math.PI),
               y1: pAw.pos.y - pAw.length * Math.sin(angle / 180 * Math.PI),
-              x2: pAw.pos.x - pAw.length * Math.cos(angle / 180 * Math.PI) - (thickness / 2 + wallSpace) * Math.sin(angle / 180 * Math.PI),
-              y2: pAw.pos.y - pAw.length * Math.sin(angle / 180 * Math.PI) + (thickness / 2 + wallSpace) * Math.cos(angle / 180 * Math.PI),
-              style: STYLE
+              x2: pAw.pos.x - pAw.length * Math.cos(angle / 180 * Math.PI) - (thickness / 2 + baseSpace) * Math.sin(angle / 180 * Math.PI),
+              y2: pAw.pos.y - pAw.length * Math.sin(angle / 180 * Math.PI) + (thickness / 2 + baseSpace) * Math.cos(angle / 180 * Math.PI),
+              style: STYLE_DASH
             }));
           }
         } else {
@@ -545,95 +570,141 @@ function Line(_ref) {
             return /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("line", {
               x1: pAw.pos.x,
               y1: pAw.pos.y,
-              x2: pAw.pos.x - (thickness / 2 + wallSpace) * Math.sin(angle / 180 * Math.PI),
-              y2: pAw.pos.y + (thickness / 2 + wallSpace) * Math.cos(angle / 180 * Math.PI),
-              style: STYLE
+              x2: pAw.pos.x - (thickness / 2 + baseSpace) * Math.sin(angle / 180 * Math.PI),
+              y2: pAw.pos.y + (thickness / 2 + baseSpace) * Math.cos(angle / 180 * Math.PI),
+              style: STYLE_DASH
             }), /*#__PURE__*/_react["default"].createElement(_ruler["default"], {
               key: 5,
               layer: layer,
               unit: scene.unit,
               rulerUnit: scene.rulerUnit,
               length: pAw.length,
-              transform: "translate(".concat(pAw.pos.x - (thickness / 2 + wallSpace) * Math.sin(angle / 180 * Math.PI), ", ").concat(pAw.pos.y + (thickness / 2 + wallSpace) * Math.cos(angle / 180 * Math.PI), " ) rotate(").concat(angle, ", 0, 0)")
+              transform: "translate(".concat(pAw.pos.x - (thickness / 2 + baseSpace) * Math.sin(angle / 180 * Math.PI), ", ").concat(pAw.pos.y + (thickness / 2 + baseSpace) * Math.cos(angle / 180 * Math.PI), " ) rotate(").concat(angle, ", 0, 0)"),
+              style: selectStyle(pAw, STYLE_BASE_ITEM)
             }), /*#__PURE__*/_react["default"].createElement("line", {
               x1: pAw.pos.x + pAw.length * Math.cos(angle / 180 * Math.PI),
               y1: pAw.pos.y + pAw.length * Math.sin(angle / 180 * Math.PI),
-              x2: pAw.pos.x + pAw.length * Math.cos(angle / 180 * Math.PI) - (thickness / 2 + wallSpace) * Math.sin(angle / 180 * Math.PI),
-              y2: pAw.pos.y + pAw.length * Math.sin(angle / 180 * Math.PI) + (thickness / 2 + wallSpace) * Math.cos(angle / 180 * Math.PI),
-              style: STYLE
+              x2: pAw.pos.x + pAw.length * Math.cos(angle / 180 * Math.PI) - (thickness / 2 + baseSpace) * Math.sin(angle / 180 * Math.PI),
+              y2: pAw.pos.y + pAw.length * Math.sin(angle / 180 * Math.PI) + (thickness / 2 + baseSpace) * Math.cos(angle / 180 * Math.PI),
+              style: STYLE_DASH
             }));
           } else {
             return /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("line", {
               x1: pAw.pos.x + pAw.length * Math.cos(angle / 180 * Math.PI),
               y1: pAw.pos.y + pAw.length * Math.sin(angle / 180 * Math.PI),
-              x2: pAw.pos.x + pAw.length * Math.cos(angle / 180 * Math.PI) - (thickness / 2 + wallSpace) * Math.sin(angle / 180 * Math.PI),
-              y2: pAw.pos.y + pAw.length * Math.sin(angle / 180 * Math.PI) + (thickness / 2 + wallSpace) * Math.cos(angle / 180 * Math.PI),
-              style: STYLE
+              x2: pAw.pos.x + pAw.length * Math.cos(angle / 180 * Math.PI) - (thickness / 2 + baseSpace) * Math.sin(angle / 180 * Math.PI),
+              y2: pAw.pos.y + pAw.length * Math.sin(angle / 180 * Math.PI) + (thickness / 2 + baseSpace) * Math.cos(angle / 180 * Math.PI),
+              style: STYLE_DASH
             }), /*#__PURE__*/_react["default"].createElement(_ruler["default"], {
               key: 5,
               layer: layer,
               unit: scene.unit,
               rulerUnit: scene.rulerUnit,
               length: pAw.length,
-              transform: "translate(".concat(pAw.pos.x + pAw.length * Math.cos(angle / 180 * Math.PI) - (thickness / 2 + wallSpace) * Math.sin(angle / 180 * Math.PI), ", ").concat(pAw.pos.y + pAw.length * Math.sin(angle / 180 * Math.PI) + (thickness / 2 + wallSpace) * Math.cos(angle / 180 * Math.PI), " ) rotate(").concat(angle, ", 0, 0) scale(-1, -1)")
+              transform: "translate(".concat(pAw.pos.x + pAw.length * Math.cos(angle / 180 * Math.PI) - (thickness / 2 + baseSpace) * Math.sin(angle / 180 * Math.PI), ", ").concat(pAw.pos.y + pAw.length * Math.sin(angle / 180 * Math.PI) + (thickness / 2 + baseSpace) * Math.cos(angle / 180 * Math.PI), " ) rotate(").concat(angle, ", 0, 0) scale(-1, -1)"),
+              style: selectStyle(pAw, STYLE_BASE_ITEM)
             }), /*#__PURE__*/_react["default"].createElement("line", {
               x1: pAw.pos.x,
               y1: pAw.pos.y,
-              x2: pAw.pos.x - (thickness / 2 + wallSpace) * Math.sin(angle / 180 * Math.PI),
-              y2: pAw.pos.y + (thickness / 2 + wallSpace) * Math.cos(angle / 180 * Math.PI),
-              style: STYLE
+              x2: pAw.pos.x - (thickness / 2 + baseSpace) * Math.sin(angle / 180 * Math.PI),
+              y2: pAw.pos.y + (thickness / 2 + baseSpace) * Math.cos(angle / 180 * Math.PI),
+              style: STYLE_DASH
             }));
           }
         }
       }
     }
   });
-  var lineSpace = wallSpace + 20;
+  var doorSpace = baseSpace + STEP;
+  var renderedHoles = line.holes.map(function (holeID) {
+    var hole = layer.holes.get(holeID);
+    if (hole === undefined) {
+      return '';
+    }
+    var startAt = length * hole.offset;
+    var renderedHole = catalog.getElement(hole.type).render2D(hole, layer, scene);
+    return /*#__PURE__*/_react["default"].createElement("g", {
+      key: holeID,
+      transform: "translate(".concat(startAt, ", 3.5)"),
+      "data-element-root": true,
+      "data-prototype": hole.prototype,
+      "data-id": hole.id,
+      "data-selected": hole.selected,
+      "data-layer": layer.id
+    }, renderedHole);
+  });
+  var renderedLine = catalog.getElement(line.type).render2D(line, layer, scene, state);
+  var holeTemp = [];
+  var renderedRuler = [];
+  var renderedAllRuler = [];
+  if (!line.holes.size || !showWindowDoorMeasure) {
+    doorSpace -= STEP;
+  }
+  var allRuler = [0],
+    holeData = [];
+  var lineHoles = line.holes.sortBy(function (holeID) {
+    var hole = layer.holes.get(holeID);
+    return !hole ? 0 : hole.offset;
+  });
+  lineHoles.forEach(function (holeID) {
+    var hole = layer.holes.get(holeID);
+    if (hole !== undefined) {
+      var startAt = length * hole.offset;
+      var holeWidth = hole.properties.toJS().width.length;
+      allRuler.push(startAt - holeWidth / 2);
+      allRuler.push(startAt + holeWidth / 2);
+      holeData["".concat(startAt - holeWidth / 2, "_").concat(startAt + holeWidth / 2)] = holeID;
+    }
+  });
+  allRuler.push(length);
+  var lineSpace = doorSpace + STEP;
   //the space from the dimensioning line to the top
-  var lineSpacedimension1 = 5;
+  var lineSpacedimension1 = 4;
   //the space from the dimensioning line to the bottom
-  var lineSpacedimension2 = 15;
+  var lineSpacedimension2 = 14;
   if (compareVertices(vertex0, vertex1) >= 0 && vertex0.x !== vertex1.x) {
     renderedRuler.push(/*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("line", {
       x1: length,
-      y1: half_thickness + lineSpace + lineSpacedimension1,
+      y1: lineSpace + lineSpacedimension1,
       x2: length,
-      y2: half_thickness + lineSpacedimension2,
-      style: STYLE
+      y2: lineSpace + lineSpacedimension2,
+      style: STYLE_ROOM_SHAPE
     }), /*#__PURE__*/_react["default"].createElement(_ruler["default"], {
       key: 0,
       layer: layer,
       unit: scene.unit,
       rulerUnit: scene.rulerUnit,
       length: length,
-      transform: "translate(".concat(length, ", ").concat(half_thickness + lineSpace, ") scale(-1, -1)")
+      transform: "translate(".concat(length, ", ").concat(half_thickness + lineSpace, ") scale(-1, -1)"),
+      style: STYLE_ROOM_SHAPE
     }), /*#__PURE__*/_react["default"].createElement("line", {
       x1: 0,
-      y1: half_thickness + lineSpace + lineSpacedimension1,
+      y1: lineSpace + lineSpacedimension1,
       x2: 0,
-      y2: half_thickness + lineSpacedimension2,
-      style: STYLE
+      y2: lineSpace + lineSpacedimension2,
+      style: STYLE_ROOM_SHAPE
     })));
   } else {
     renderedRuler.push(/*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("line", {
       x1: 0,
-      y1: half_thickness + lineSpace + lineSpacedimension1,
+      y1: lineSpace + lineSpacedimension1,
       x2: 0,
-      y2: half_thickness + lineSpacedimension2,
-      style: STYLE
+      y2: lineSpace + lineSpacedimension2,
+      style: STYLE_ROOM_SHAPE
     }), /*#__PURE__*/_react["default"].createElement(_ruler["default"], {
       key: 0,
       layer: layer,
       unit: scene.unit,
       rulerUnit: scene.rulerUnit,
       length: length,
-      transform: "translate(0, ".concat(half_thickness + lineSpace, ")")
+      transform: "translate(0, ".concat(half_thickness + lineSpace, ")"),
+      style: STYLE_ROOM_SHAPE
     }), /*#__PURE__*/_react["default"].createElement("line", {
       x1: length,
-      y1: half_thickness + lineSpace + lineSpacedimension1,
+      y1: lineSpace + lineSpacedimension1,
       x2: length,
-      y2: half_thickness + lineSpacedimension2,
-      style: STYLE
+      y2: lineSpace + lineSpacedimension2,
+      style: STYLE_ROOM_SHAPE
     })));
   }
   allRuler.sort(function (a, b) {
@@ -669,20 +740,21 @@ function Line(_ref) {
             y1: half_thickness,
             x2: allRuler[index],
             y2: half_thickness + doorSpace,
-            style: STYLE
+            style: STYLE_DASH
           }), /*#__PURE__*/_react["default"].createElement(_ruler["default"], {
             key: "allRuler_".concat(index),
             layer: layer,
             unit: scene.unit,
             rulerUnit: scene.rulerUnit,
             length: element,
-            transform: "translate(".concat(allRuler[index] + element, ", ").concat(half_thickness + doorSpace, " ) scale(-1, -1)")
+            transform: "translate(".concat(allRuler[index] + element, ", ").concat(half_thickness + doorSpace, " ) scale(-1, -1)"),
+            style: STYLE_ROOM_ELEMENT
           }), /*#__PURE__*/_react["default"].createElement("line", {
             x1: allRuler[index] + element,
             y1: half_thickness,
             x2: allRuler[index] + element,
             y2: half_thickness + doorSpace,
-            style: STYLE
+            style: STYLE_DASH
           })));
         } else {
           renderedAllRuler.push(/*#__PURE__*/_react["default"].createElement("g", {
@@ -692,20 +764,21 @@ function Line(_ref) {
             y1: half_thickness,
             x2: allRuler[index],
             y2: half_thickness + doorSpace,
-            style: STYLE
+            style: STYLE_DASH
           }), /*#__PURE__*/_react["default"].createElement(_ruler["default"], {
             key: "allRuler_".concat(index),
             layer: layer,
             unit: scene.unit,
             rulerUnit: scene.rulerUnit,
             length: element,
-            transform: "translate(".concat(allRuler[index], ", ").concat(half_thickness + doorSpace, " )")
+            transform: "translate(".concat(allRuler[index], ", ").concat(half_thickness + doorSpace, " )"),
+            style: STYLE_ROOM_ELEMENT
           }), /*#__PURE__*/_react["default"].createElement("line", {
             x1: allRuler[index] + element,
             y1: half_thickness,
             x2: allRuler[index] + element,
             y2: half_thickness + doorSpace,
-            style: STYLE
+            style: STYLE_DASH
           })));
         }
       }