kitchen-simulator 1.1.1-test.9 → 2.0.1

package/es/components/viewer2d/line.js

@@ -1,14 +1,17 @@
+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, WALL_CABINET_LAYOUTPOS } from "../../constants";
+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 * as Three from 'three';
 import { isEmpty } from "./utils";
-import Tooltip from '@material-ui/core/Tooltip';
 var STYLE = {
-  stroke: 'rgb(77, 77, 77)',
-  strokeWidth: '1px'
+  stroke: '#78909C',
+  strokeWidth: '1px',
+  strokeDasharray: '4 8'
 };
 var STYLE_ANGLE = {
   stroke: 'rgb(77, 77, 77)',
@@ -22,7 +25,40 @@ var STYLE_TEXT = {
   textAnchor: 'middle',
   fontSize: '7px',
   fontWeight: 'middle',
-  fontFamily: "'Microsoft YaHei UI', Courier, monospace"
+  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;
@@ -48,9 +84,27 @@ 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) {
@@ -63,17 +117,19 @@ export default function Line(_ref) {
   });
   var thickness = 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 = 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);
-  var baseSpace = 20;
-  var base_item = GeometryUtils.getAllItemSpecified(scene, catalog, BASE_CABINET_LAYOUTPOS);
+  // 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);
+  }
   // let relatedLines = [];
   var angleVertices = [];
   var layerID = state.getIn(['scene', 'selectedLayer']);
@@ -135,117 +191,108 @@ export default 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 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;
-    }
-  };
-  // 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 || 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 || 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 || 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 || GeometryUtils.almostEqual(y1, y2)) {
+      if (Math.sin(angle) === 0 || 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
+            y2: pAw.pos.y - thickness / 2 - wallSpace,
+            style: STYLE_DASH
           }), /*#__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)")
+            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.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.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
+            y2: pAw.pos.y + thickness / 2 + wallSpace,
+            style: STYLE_DASH
           }), /*#__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)")
+            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.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 {
@@ -254,43 +301,45 @@ 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
+              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.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)")
+              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.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.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
+              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.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)")
+              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.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 {
@@ -298,185 +347,164 @@ 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
+              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.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)")
+              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.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.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
+              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.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)")
+              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.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.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 = GeometryUtils.getAllItemSpecified(scene, catalog, 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 = 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);
   }
-  wall_item.others.forEach(function (itemRect) {
-    var r2 = itemRect.rect[2];
-    var r3 = itemRect.rect[3];
+  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;
+  });
+  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 || 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 || 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 || GeometryUtils.almostEqual(y1, y2)) {
+      if (Math.sin(angle) === 0 || 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
+            y2: pAw.pos.y - thickness / 2 - baseSpace,
+            style: STYLE_DASH
           }), /*#__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)")
+            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.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.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
+            y2: pAw.pos.y + thickness / 2 + baseSpace,
+            style: STYLE_DASH
           }), /*#__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)")
+            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.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 {
@@ -485,43 +513,45 @@ 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
+              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.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)")
+              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.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.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
+              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.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)")
+              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.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 {
@@ -529,95 +559,141 @@ 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
+              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.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)")
+              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.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.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
+              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.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)")
+              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.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.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.createElement("g", null, /*#__PURE__*/React.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.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)")
+      transform: "translate(".concat(length, ", ").concat(half_thickness + lineSpace, ") scale(-1, -1)"),
+      style: STYLE_ROOM_SHAPE
     }), /*#__PURE__*/React.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.createElement("g", null, /*#__PURE__*/React.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.createElement(Ruler, {
       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.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) {
@@ -653,20 +729,21 @@ export default function Line(_ref) {
             y1: half_thickness,
             x2: allRuler[index],
             y2: half_thickness + doorSpace,
-            style: STYLE
+            style: STYLE_DASH
           }), /*#__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)")
+            transform: "translate(".concat(allRuler[index] + element, ", ").concat(half_thickness + doorSpace, " ) scale(-1, -1)"),
+            style: STYLE_ROOM_ELEMENT
           }), /*#__PURE__*/React.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.createElement("g", {
@@ -676,20 +753,21 @@ export default function Line(_ref) {
             y1: half_thickness,
             x2: allRuler[index],
             y2: half_thickness + doorSpace,
-            style: STYLE
+            style: STYLE_DASH
           }), /*#__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, " )")
+            transform: "translate(".concat(allRuler[index], ", ").concat(half_thickness + doorSpace, " )"),
+            style: STYLE_ROOM_ELEMENT
           }), /*#__PURE__*/React.createElement("line", {
             x1: allRuler[index] + element,
             y1: half_thickness,
             x2: allRuler[index] + element,
             y2: half_thickness + doorSpace,
-            style: STYLE
+            style: STYLE_DASH
           })));
         }
       }
@@ -704,22 +782,32 @@ export default function Line(_ref) {
     "data-layer": layer.id,
     "data-length": length
   }, showWallLengthMeasure ? renderedRuler : null), line.selected && angleVertices.map(function (vertex, index) {
+    var _relateLineLengthArra2;
     var lineGroup = vertex[0].lines;
     var angles = [];
     var thickness = [];
     var vectories = [];
+    var relateLineLengthArray = [];
+
     // get the vector of lines
     lineGroup.forEach(function (line) {
+      var _relateLineLengthArra;
       line = layer.lines.get(line);
       var vertex0 = layer.vertices.get(line.vertices.get(0));
       var vertex1 = layer.vertices.get(line.vertices.get(1));
       var vec = vertex0 === vertex[0] ? new Three.Vector2(vertex1.x - vertex0.x, vertex1.y - vertex0.y) : new Three.Vector2(vertex0.x - vertex1.x, vertex0.y - vertex1.y);
+      (_relateLineLengthArra = relateLineLengthArray) === null || _relateLineLengthArra === void 0 || _relateLineLengthArra.push(GeometryUtils.verticesDistance(vertex0, vertex1));
       var angle = vec.angle();
       var thick = 15;
       angles.push(angle);
       thickness.push(thick);
       vectories.push(vec.normalize());
     });
+    relateLineLengthArray = (_relateLineLengthArra2 = relateLineLengthArray) === null || _relateLineLengthArra2 === void 0 ? void 0 : _relateLineLengthArra2.sort(function (a, b) {
+      return a - b;
+    });
+    var minLineLength = relateLineLengthArray[0] < MAX_ANGLE_SCALE * 2 ? relateLineLengthArray[0] / 2 //  scale down to half of the smallest adjacent surface
+    : MAX_ANGLE_SCALE;
 
     // calculate the angle between two lines
     var center = new Three.Vector2(vertex[0].x, vertex[0].y);
@@ -738,16 +826,15 @@ export default function Line(_ref) {
     var rotDir = vec1.cross(vec2) > 0; // true: rotate CCW, false: rotate CW
 
     // Angle Text Position
-
     var angleTextO = center.clone();
-    var textTranslation = vec1.clone().add(vec2).normalize().multiplyScalar(25);
+    var textTranslation = vec1.clone().add(vec2).normalize().multiplyScalar(minLineLength * 2 / 3);
     angleTextO.add(textTranslation);
-    angleTextO.y -= 5; // half the height of text `angle`
-
+    angleTextO.y -= minLineLength / 10; // half the height of text `angle`
+    angleTextO.x += minLineLength / 10;
     var tx = 0;
     var ty = 0;
-    vec = vec.multiplyScalar(35);
-    vec1 = vec1.multiplyScalar(35);
+    vec = vec.multiplyScalar(minLineLength);
+    vec1 = vec1.multiplyScalar(minLineLength);
     var cen1 = center.clone(),
       cen2 = center.clone();
     center = center.add(vec);
@@ -760,7 +847,7 @@ export default function Line(_ref) {
     // Angle SVG Path
     lines.push(/*#__PURE__*/React.createElement("path", {
       style: STYLE_ANGLE,
-      d: "\n          M ".concat(vertex[0].x, ",").concat(vertex[0].y, "           L ").concat(pos1.x, ",").concat(pos1.y, "           A 30,30 ").concat(angle, " 0 ").concat(t > 0 ? 1 : 0, " ").concat(pos2.x, ",").concat(pos2.y, " z\n        ")
+      d: "\n          M ".concat(vertex[0].x, ",").concat(vertex[0].y, "           L ").concat(pos1.x, ",").concat(pos1.y, "           A ").concat(minLineLength, " ").concat(minLineLength, " ").concat(angle, " 0 ").concat(t > 0 ? 1 : 0, " ").concat(pos2.x, ",").concat(pos2.y, " z\n        ")
     }));
     var length = angle;
     // draw angle and angle text
@@ -774,15 +861,9 @@ export default function Line(_ref) {
       "data-id": [vertex[0].id, vertex[1].id, rotDir],
       "data-length": length
     }, lines, /*#__PURE__*/React.createElement("text", {
-      transform: "translate(".concat(angleTextO.x, ", ").concat(angleTextO.y, ") scale(1.5, -1.5)"),
+      transform: "translate(".concat(angleTextO.x, ", ").concat(angleTextO.y, ") scale(").concat(minLineLength / 20, ", ").concat(-minLineLength / 20, ")"),
       style: STYLE_TEXT
-    }, angle), /*#__PURE__*/React.createElement("circle", {
-      transform: "translate(".concat(angleTextO.x, ", ").concat(angleTextO.y, ") translate(10, 9)"),
-      fill: "transparent",
-      stroke: "rgb(77, 77, 77)",
-      strokeWidth: 1,
-      r: 2
-    }));
+    }, angle + '° '));
   }), showWindowDoorMeasure ? renderedAllRuler : null, showBaseCabinetMeasure ? baseRuler : null, showWallCabinetMeasure ? wallRuler : null, /*#__PURE__*/React.createElement("g", {
     "data-element-root": true,
     "data-prototype": line.prototype,
@@ -795,9 +876,7 @@ export default function Line(_ref) {
     } : {}
   }, renderedLine, /*#__PURE__*/React.createElement("g", {
     transform: "translate(".concat(x1, ", ").concat(y1, ") rotate(").concat(angle, ", 0, 0)")
-  }, renderedHoles)), line.selected && /*#__PURE__*/React.createElement(Tooltip, {
-    title: "Elevation View"
-  }, /*#__PURE__*/React.createElement("g", {
+  }, renderedHoles)), line.selected && /*#__PURE__*/React.createElement("g", {
     id: 'elevation-button',
     key: 1,
     transform: "translate(".concat(x1 + 35, ", ").concat(y1 - 15, ")"),
@@ -827,7 +906,7 @@ export default function Line(_ref) {
     style: {
       transform: 'rotateX(180deg)'
     }
-  }))), line.selected && /*#__PURE__*/React.createElement("g", {
+  })), line.selected && /*#__PURE__*/React.createElement("g", {
     id: 'remove-button',
     key: 2,
     transform: "translate(".concat(x1 + 10, ", ").concat(y1, ")"),