kitchen-simulator 3.1.15 → 4.0.0-alpha.12

package/es/components/viewer2d/line.js

@@ -1,17 +1,13 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-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) { _defineProperty(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; }
 import React from 'react';
 import PropTypes from 'prop-types';
 import { GeometryUtils } from "../../utils/export";
 import Ruler from "./ruler";
-import { BASE_CABINET_LAYOUTPOS, LINE_THICKNESS, MODE_DRAGGING_LINE, MODE_DRAWING_LINE, WALL_CABINET_LAYOUTPOS, MAX_ANGLE_SCALE, ROOM_SHAPE_MEASUREMENT_LINE_COLOR, ROOM_ELEMENT_MEASUREMENT_LINE_COLOR, BASE_ITEM_MEASUREMENT_LINE_COLOR, WALL_ITEM_MEASUREMENT_LINE_COLOR, DISTANCE_MEASUREMENT_LINE_COLOR, DASH_LINE_COLOR, TALL_CABINET_LAYOUTPOS } from "../../constants";
+import { BASE_CABINET_LAYOUTPOS, LINE_THICKNESS, MODE_DRAGGING_LINE, MODE_DRAWING_LINE, WALL_CABINET_LAYOUTPOS, MAX_ANGLE_SCALE } from "../../constants";
 import * as Three from 'three';
 import { isEmpty } from "./utils";
 var STYLE = {
-  stroke: '#78909C',
-  strokeWidth: '1px',
-  strokeDasharray: '4 8'
+  stroke: 'rgb(77, 77, 77)',
+  strokeWidth: '1px'
 };
 var STYLE_ANGLE = {
   stroke: 'rgb(77, 77, 77)',
@@ -27,39 +23,6 @@ var STYLE_TEXT = {
   fontWeight: 'middle',
   fontFamily: "'Courier New', Courier, monospace"
 };
-export var STYLE_ROOM_SHAPE = {
-  stroke: ROOM_SHAPE_MEASUREMENT_LINE_COLOR,
-  strokeWidth: '2px'
-};
-var STYLE_DASH = {
-  stroke: DASH_LINE_COLOR,
-  strokeDasharray: '4 4',
-  strokeWidth: '2px',
-  strokeLinecap: 'round'
-};
-var STYLE_ROOM_ELEMENT = {
-  fill: ROOM_ELEMENT_MEASUREMENT_LINE_COLOR,
-  stroke: ROOM_ELEMENT_MEASUREMENT_LINE_COLOR,
-  strokeWidth: '2px'
-};
-var STYLE_BASE_ITEM = {
-  fill: BASE_ITEM_MEASUREMENT_LINE_COLOR,
-  stroke: BASE_ITEM_MEASUREMENT_LINE_COLOR,
-  strokeWidth: '2px'
-};
-var STYLE_WALL_ITEM = {
-  fill: WALL_ITEM_MEASUREMENT_LINE_COLOR,
-  stroke: WALL_ITEM_MEASUREMENT_LINE_COLOR,
-  strokeWidth: '2px'
-};
-var STYLE_DISTANCE = {
-  fill: DISTANCE_MEASUREMENT_LINE_COLOR,
-  stroke: DISTANCE_MEASUREMENT_LINE_COLOR,
-  strokeWidth: '2px'
-};
-var selectStyle = function selectStyle(element, style) {
-  return element.iFlag ? style : STYLE_DISTANCE;
-};
 export function compareVertices(v0, v1) {
   return v0.x === v1.x ? v0.y - v1.y : v0.x - v1.x;
 }
@@ -84,27 +47,9 @@ export default 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 = GeometryUtils.verticesDistance(l2, r3) + GeometryUtils.verticesDistance(r3, r2) + GeometryUtils.verticesDistance(r2, l3) - 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) {
@@ -117,19 +62,17 @@ export default function Line(_ref) {
   });
   var thickness = LINE_THICKNESS;
   var half_thickness = thickness / 2;
-  var STEP = 20;
+  // if (compareVertices(vertex0, vertex1) >= 0 && vertex0.x !== vertex1.x) {
+  //   ({ x: x1, y: y1 } = vertex1);
+  //   ({ x: x2, y: y2 } = vertex0);
+  // }
+
   var length = GeometryUtils.pointsDistance(x1, y1, x2, y2);
   // let length = GeometryUtils.pointsDistance(relatedvertice0x,relatedvertice0y,relatedvertice1x,relatedvertice1y);
   var rightHoleLength, leftHoleLength, holeLength;
   var angle = GeometryUtils.angleBetweenTwoPointsAndOrigin(x1, y1, x2, y2);
-  // wall cabinet
-  var wallSpace = STEP;
-  var wall_item = GeometryUtils.getAllItemSpecified(scene, catalog, [WALL_CABINET_LAYOUTPOS, TALL_CABINET_LAYOUTPOS]);
-  var wallRuler = [];
-  var wall_posArray = [];
-  if (wall_item.cur) {
-    wall_item.others.push(wall_item.cur);
-  }
+  var baseSpace = 20;
+  var base_item = GeometryUtils.getAllItemSpecified(scene, catalog, BASE_CABINET_LAYOUTPOS);
   // let relatedLines = [];
   var angleVertices = [];
   var layerID = state.getIn(['scene', 'selectedLayer']);
@@ -191,108 +134,124 @@ export default function Line(_ref) {
       });
     }
   }
-  if (Math.sin(angle) === 0 || 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];
+  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 = GeometryUtils.verticesDistance(tverArray[0], tverArray[1]) + GeometryUtils.verticesDistance(tverArray[1], tverArray[2]) + GeometryUtils.verticesDistance(tverArray[2], tverArray[3]) - 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 (isSnapped(itemRect)) {
-      wall_posArray.push(_objectSpread(_objectSpread({}, r2), {}, {
-        iFlag: itemRect.itemInfo.id
-      }));
-      wall_posArray.push(_objectSpread(_objectSpread({}, r3), {}, {
-        iFlag: itemRect.itemInfo.id
-      }));
+      base_posArray.push(r2);
+      base_posArray.push(r3);
     }
   });
-  wall_posArray.push(_objectSpread(_objectSpread({}, l3), {}, {
-    iFlag: false
-  }));
-  var wall_posAndwidth = [];
-  if (Math.sin(angle) === 0 || GeometryUtils.almostEqual(y1, y2)) {
-    wall_posArray.sort(function (a, b) {
+  base_posArray.push(l2);
+  base_posArray.push(l3);
+  var base_posAndwidth = [];
+  if (Math.abs(angle) === 0 || Math.abs(angle) === 180 || GeometryUtils.almostEqual(y1, y2)) {
+    base_posArray.sort(function (a, b) {
       return a.x - b.x;
     });
-    if (wall_posArray.length > 2) {
-      for (var index = 0; index < wall_posArray.length - 1; index++) {
-        var element = wall_posArray[index];
-        wall_posAndwidth.push({
+    if (base_posArray.length > 2) {
+      for (var index = 0; index < base_posArray.length - 1; index++) {
+        var element = base_posArray[index];
+        base_posAndwidth.push({
           pos: element,
-          length: wall_posArray[index + 1].x - element.x,
-          iFlag: wall_posArray[index + 1].iFlag === element.iFlag ? true : false
+          length: base_posArray[index + 1].x - element.x
         });
       }
     }
   } 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 _index = 0; _index < wall_posArray.length - 1; _index++) {
-        var _element = wall_posArray[_index];
-        wall_posAndwidth.push({
+    if (base_posArray.length > 2) {
+      for (var _index = 0; _index < base_posArray.length - 1; _index++) {
+        var _element = base_posArray[_index];
+        base_posAndwidth.push({
           pos: _element,
-          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
+          length: Math.abs((base_posArray[_index + 1].y - _element.y) / Math.sin(angle / 180 * Math.PI))
         });
       }
     }
   }
-  if (!showWallCabinetMeasure || wall_posArray.length <= 2) {
-    wallSpace = 0;
+  if (!showBaseCabinetMeasure || base_posArray.length <= 2) {
+    baseSpace -= 20;
   }
-  wallRuler = wall_posAndwidth.map(function (pAw) {
+  baseRuler = base_posAndwidth.map(function (pAw) {
     if (pAw.length > 1) {
-      if (Math.sin(angle) === 0 || GeometryUtils.almostEqual(y1, y2)) {
+      if (Math.abs(angle) === 0 || Math.abs(angle) === 180 || GeometryUtils.almostEqual(y1, y2)) {
         if (x1 - x2 > 0) {
           return /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.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_DASH
+            y2: pAw.pos.y - thickness / 2 - baseSpace,
+            style: STYLE
           }), /*#__PURE__*/React.createElement(Ruler, {
             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)"),
-            style: selectStyle(pAw, STYLE_WALL_ITEM)
+            transform: "translate(".concat(pAw.pos.x, ", ").concat(pAw.pos.y - thickness / 2 - baseSpace, " ) rotate(").concat(angle + 180, ", 0, 0)")
           }), /*#__PURE__*/React.createElement("line", {
             x1: pAw.pos.x,
             y1: pAw.pos.y,
             x2: pAw.pos.x,
-            y2: pAw.pos.y - thickness / 2 - wallSpace,
-            style: STYLE_DASH
+            y2: pAw.pos.y - thickness / 2 - baseSpace,
+            style: STYLE
           }));
         } else {
           return /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.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_DASH
+            y2: pAw.pos.y + thickness / 2 + baseSpace,
+            style: STYLE
           }), /*#__PURE__*/React.createElement(Ruler, {
             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)"),
-            style: selectStyle(pAw, STYLE_WALL_ITEM)
+            transform: "translate(".concat(pAw.pos.x, ", ").concat(pAw.pos.y + thickness / 2 + baseSpace, " ) rotate(").concat(angle, ", 0, 0)")
           }), /*#__PURE__*/React.createElement("line", {
             x1: pAw.pos.x,
             y1: pAw.pos.y,
             x2: pAw.pos.x,
-            y2: pAw.pos.y + thickness / 2 + wallSpace,
-            style: STYLE_DASH
+            y2: pAw.pos.y + thickness / 2 + baseSpace,
+            style: STYLE
           }));
         }
       } else {
@@ -301,45 +260,43 @@ export default function Line(_ref) {
             return /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.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_DASH
+              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
             }), /*#__PURE__*/React.createElement(Ruler, {
               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)"),
-              style: selectStyle(pAw, STYLE_WALL_ITEM)
+              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)")
             }), /*#__PURE__*/React.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_DASH
+              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
             }));
           } else {
             return /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.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_DASH
+              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
             }), /*#__PURE__*/React.createElement(Ruler, {
               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)"),
-              style: selectStyle(pAw, STYLE_WALL_ITEM)
+              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)")
             }), /*#__PURE__*/React.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_DASH
+              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
             }));
           }
         } else {
@@ -347,164 +304,185 @@ export default function Line(_ref) {
             return /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.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_DASH
+              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
             }), /*#__PURE__*/React.createElement(Ruler, {
               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)"),
-              style: selectStyle(pAw, STYLE_WALL_ITEM)
+              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)")
             }), /*#__PURE__*/React.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_DASH
+              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
             }));
           } else {
             return /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.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_DASH
+              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
             }), /*#__PURE__*/React.createElement(Ruler, {
               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)"),
-              style: selectStyle(pAw, STYLE_WALL_ITEM)
+              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)")
             }), /*#__PURE__*/React.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_DASH
+              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
             }));
           }
         }
       }
     }
   });
-
-  //base cabinet
-  var baseSpace = wallSpace + STEP;
-  var base_item = GeometryUtils.getAllItemSpecified(scene, catalog, BASE_CABINET_LAYOUTPOS);
-
-  // base cabinet
-  var baseRuler = [];
-  var base_posArray = [];
-  if (base_item.cur) {
-    base_item.others.push(base_item.cur);
+  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.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;
   }
-  if (Math.sin(angle) === 0 || 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;
+  var allRuler = [0],
+    holeData = [];
+  var lineHoles = line.holes.sortBy(function (holeID) {
+    var hole = layer.holes.get(holeID);
+    return !hole ? 0 : hole.offset;
   });
-  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];
+  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 = GeometryUtils.getAllItemSpecified(scene, catalog, WALL_CABINET_LAYOUTPOS);
+  var wallRuler = [];
+  var wall_posArray = [];
+  if (wall_item.cur) {
+    wall_item.others.push(wall_item.cur);
+  }
+  wall_item.others.forEach(function (itemRect) {
+    var r2 = itemRect.rect[2];
+    var r3 = itemRect.rect[3];
     if (isSnapped(itemRect)) {
-      base_posArray.push(_objectSpread(_objectSpread({}, r2), {}, {
-        iFlag: itemRect.itemInfo.id
-      }));
-      base_posArray.push(_objectSpread(_objectSpread({}, r3), {}, {
-        iFlag: itemRect.itemInfo.id
-      }));
+      wall_posArray.push(r2);
+      wall_posArray.push(r3);
     }
   });
-  base_posArray.push(_objectSpread(_objectSpread({}, l3), {}, {
-    iFlag: false
-  }));
-  var base_posAndwidth = [];
-  if (Math.sin(angle) === 0 || GeometryUtils.almostEqual(y1, y2)) {
-    base_posArray.sort(function (a, b) {
+  wall_posArray.push(l2);
+  wall_posArray.push(l3);
+  var wall_posAndwidth = [];
+  if (Math.abs(angle) === 0 || Math.abs(angle) === 180 || GeometryUtils.almostEqual(y1, y2)) {
+    wall_posArray.sort(function (a, b) {
       return a.x - b.x;
     });
-    if (base_posArray.length > 2) {
-      for (var _index2 = 0; _index2 < base_posArray.length - 1; _index2++) {
-        var _element2 = base_posArray[_index2];
-        base_posAndwidth.push({
+    if (wall_posArray.length > 2) {
+      for (var _index2 = 0; _index2 < wall_posArray.length - 1; _index2++) {
+        var _element2 = wall_posArray[_index2];
+        wall_posAndwidth.push({
           pos: _element2,
-          length: base_posArray[_index2 + 1].x - _element2.x,
-          iFlag: base_posArray[_index2 + 1].iFlag === _element2.iFlag ? true : false
+          length: wall_posArray[_index2 + 1].x - _element2.x
         });
       }
     }
   } 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 _index3 = 0; _index3 < base_posArray.length - 1; _index3++) {
-        var _element3 = base_posArray[_index3];
-        base_posAndwidth.push({
+    if (wall_posArray.length > 2) {
+      for (var _index3 = 0; _index3 < wall_posArray.length - 1; _index3++) {
+        var _element3 = wall_posArray[_index3];
+        wall_posAndwidth.push({
           pos: _element3,
-          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
+          length: Math.abs((wall_posArray[_index3 + 1].y - _element3.y) / Math.sin(angle / 180 * Math.PI))
         });
       }
     }
   }
-  if (!showBaseCabinetMeasure || base_posArray.length <= 2) {
-    baseSpace -= STEP;
+  if (!showWallCabinetMeasure || wall_posArray.length <= 2) {
+    wallSpace -= 20;
   }
-  baseRuler = base_posAndwidth.map(function (pAw) {
+  wallRuler = wall_posAndwidth.map(function (pAw) {
     if (pAw.length > 1) {
-      if (Math.sin(angle) === 0 || GeometryUtils.almostEqual(y1, y2)) {
+      if (Math.abs(angle) === 0 || Math.abs(angle) === 180 || GeometryUtils.almostEqual(y1, y2)) {
         if (x1 - x2 > 0) {
           return /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.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_DASH
+            y2: pAw.pos.y - thickness / 2 - wallSpace,
+            style: STYLE
           }), /*#__PURE__*/React.createElement(Ruler, {
             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)"),
-            style: selectStyle(pAw, STYLE_BASE_ITEM)
+            transform: "translate(".concat(pAw.pos.x, ", ").concat(pAw.pos.y - thickness / 2 - wallSpace, " ) rotate(").concat(angle + 180, ", 0, 0)")
           }), /*#__PURE__*/React.createElement("line", {
             x1: pAw.pos.x,
             y1: pAw.pos.y,
             x2: pAw.pos.x,
-            y2: pAw.pos.y - thickness / 2 - baseSpace,
-            style: STYLE_DASH
+            y2: pAw.pos.y - thickness / 2 - wallSpace,
+            style: STYLE
           }));
         } else {
           return /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.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_DASH
+            y2: pAw.pos.y + thickness / 2 + wallSpace,
+            style: STYLE
           }), /*#__PURE__*/React.createElement(Ruler, {
             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)"),
-            style: selectStyle(pAw, STYLE_BASE_ITEM)
+            transform: "translate(".concat(pAw.pos.x, ", ").concat(pAw.pos.y + thickness / 2 + wallSpace, " ) rotate(").concat(angle, ", 0, 0)")
           }), /*#__PURE__*/React.createElement("line", {
             x1: pAw.pos.x,
             y1: pAw.pos.y,
             x2: pAw.pos.x,
-            y2: pAw.pos.y + thickness / 2 + baseSpace,
-            style: STYLE_DASH
+            y2: pAw.pos.y + thickness / 2 + wallSpace,
+            style: STYLE
           }));
         }
       } else {
@@ -513,45 +491,43 @@ export default function Line(_ref) {
             return /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.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_DASH
+              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
             }), /*#__PURE__*/React.createElement(Ruler, {
               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)"),
-              style: selectStyle(pAw, STYLE_BASE_ITEM)
+              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)")
             }), /*#__PURE__*/React.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_DASH
+              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
             }));
           } else {
             return /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.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_DASH
+              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
             }), /*#__PURE__*/React.createElement(Ruler, {
               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)"),
-              style: selectStyle(pAw, STYLE_BASE_ITEM)
+              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)")
             }), /*#__PURE__*/React.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_DASH
+              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
             }));
           }
         } else {
@@ -559,141 +535,95 @@ export default function Line(_ref) {
             return /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.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_DASH
+              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
             }), /*#__PURE__*/React.createElement(Ruler, {
               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)"),
-              style: selectStyle(pAw, STYLE_BASE_ITEM)
+              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)")
             }), /*#__PURE__*/React.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_DASH
+              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
             }));
           } else {
             return /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.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_DASH
+              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
             }), /*#__PURE__*/React.createElement(Ruler, {
               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)"),
-              style: selectStyle(pAw, STYLE_BASE_ITEM)
+              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)")
             }), /*#__PURE__*/React.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_DASH
+              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
             }));
           }
         }
       }
     }
   });
-  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.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;
+  var lineSpace = wallSpace + 20;
   //the space from the dimensioning line to the top
-  var lineSpacedimension1 = 4;
+  var lineSpacedimension1 = 5;
   //the space from the dimensioning line to the bottom
-  var lineSpacedimension2 = 14;
+  var lineSpacedimension2 = 15;
   if (compareVertices(vertex0, vertex1) >= 0 && vertex0.x !== vertex1.x) {
     renderedRuler.push(/*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("line", {
       x1: length,
-      y1: lineSpace + lineSpacedimension1,
+      y1: half_thickness + lineSpace + lineSpacedimension1,
       x2: length,
-      y2: lineSpace + lineSpacedimension2,
-      style: STYLE_ROOM_SHAPE
+      y2: half_thickness + lineSpacedimension2,
+      style: STYLE
     }), /*#__PURE__*/React.createElement(Ruler, {
       key: 0,
       layer: layer,
       unit: scene.unit,
       rulerUnit: scene.rulerUnit,
       length: length,
-      transform: "translate(".concat(length, ", ").concat(half_thickness + lineSpace, ") scale(-1, -1)"),
-      style: STYLE_ROOM_SHAPE
+      transform: "translate(".concat(length, ", ").concat(half_thickness + lineSpace, ") scale(-1, -1)")
     }), /*#__PURE__*/React.createElement("line", {
       x1: 0,
-      y1: lineSpace + lineSpacedimension1,
+      y1: half_thickness + lineSpace + lineSpacedimension1,
       x2: 0,
-      y2: lineSpace + lineSpacedimension2,
-      style: STYLE_ROOM_SHAPE
+      y2: half_thickness + lineSpacedimension2,
+      style: STYLE
     })));
   } else {
     renderedRuler.push(/*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("line", {
       x1: 0,
-      y1: lineSpace + lineSpacedimension1,
+      y1: half_thickness + lineSpace + lineSpacedimension1,
       x2: 0,
-      y2: lineSpace + lineSpacedimension2,
-      style: STYLE_ROOM_SHAPE
+      y2: half_thickness + lineSpacedimension2,
+      style: STYLE
     }), /*#__PURE__*/React.createElement(Ruler, {
       key: 0,
       layer: layer,
       unit: scene.unit,
       rulerUnit: scene.rulerUnit,
       length: length,
-      transform: "translate(0, ".concat(half_thickness + lineSpace, ")"),
-      style: STYLE_ROOM_SHAPE
+      transform: "translate(0, ".concat(half_thickness + lineSpace, ")")
     }), /*#__PURE__*/React.createElement("line", {
       x1: length,
-      y1: lineSpace + lineSpacedimension1,
+      y1: half_thickness + lineSpace + lineSpacedimension1,
       x2: length,
-      y2: lineSpace + lineSpacedimension2,
-      style: STYLE_ROOM_SHAPE
+      y2: half_thickness + lineSpacedimension2,
+      style: STYLE
     })));
   }
   allRuler.sort(function (a, b) {
@@ -729,21 +659,20 @@ export default function Line(_ref) {
             y1: half_thickness,
             x2: allRuler[index],
             y2: half_thickness + doorSpace,
-            style: STYLE_DASH
+            style: STYLE
           }), /*#__PURE__*/React.createElement(Ruler, {
             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)"),
-            style: STYLE_ROOM_ELEMENT
+            transform: "translate(".concat(allRuler[index] + element, ", ").concat(half_thickness + doorSpace, " ) scale(-1, -1)")
           }), /*#__PURE__*/React.createElement("line", {
             x1: allRuler[index] + element,
             y1: half_thickness,
             x2: allRuler[index] + element,
             y2: half_thickness + doorSpace,
-            style: STYLE_DASH
+            style: STYLE
           })));
         } else {
           renderedAllRuler.push(/*#__PURE__*/React.createElement("g", {
@@ -753,21 +682,20 @@ export default function Line(_ref) {
             y1: half_thickness,
             x2: allRuler[index],
             y2: half_thickness + doorSpace,
-            style: STYLE_DASH
+            style: STYLE
           }), /*#__PURE__*/React.createElement(Ruler, {
             key: "allRuler_".concat(index),
             layer: layer,
             unit: scene.unit,
             rulerUnit: scene.rulerUnit,
             length: element,
-            transform: "translate(".concat(allRuler[index], ", ").concat(half_thickness + doorSpace, " )"),
-            style: STYLE_ROOM_ELEMENT
+            transform: "translate(".concat(allRuler[index], ", ").concat(half_thickness + doorSpace, " )")
           }), /*#__PURE__*/React.createElement("line", {
             x1: allRuler[index] + element,
             y1: half_thickness,
             x2: allRuler[index] + element,
             y2: half_thickness + doorSpace,
-            style: STYLE_DASH
+            style: STYLE
           })));
         }
       }