kitchen-simulator 1.1.1-test.49 → 1.1.1-test.50

package/es/components/viewer2d/line.js

@@ -0,0 +1,882 @@
+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 * as Three from 'three';
+import { isEmpty } from "./utils";
+var STYLE = {
+  stroke: 'rgb(77, 77, 77)',
+  strokeWidth: '1px'
+};
+var STYLE_ANGLE = {
+  stroke: 'rgb(77, 77, 77)',
+  strokeWidth: 1,
+  strokeLinecap: 'round',
+  strokeLinejoin: 'round',
+  strokeMiterlimit: 2.613,
+  fill: 'transparent'
+};
+var STYLE_TEXT = {
+  textAnchor: 'middle',
+  fontSize: '7px',
+  fontWeight: 'middle',
+  fontFamily: "'Microsoft YaHei UI', Courier, monospace"
+};
+export function compareVertices(v0, v1) {
+  return v0.x === v1.x ? v0.y - v1.y : v0.x - v1.x;
+}
+export default function Line(_ref) {
+  var _state$getIn;
+  var line = _ref.line,
+    allLine = _ref.allLine,
+    layer = _ref.layer,
+    scene = _ref.scene,
+    num = _ref.num,
+    catalog = _ref.catalog,
+    state = _ref.state,
+    relatedLines = _ref.relatedLines;
+  var showWallLengthMeasure = scene.showWallLengthMeasure,
+    showWallCabinetMeasure = scene.showWallCabinetMeasure,
+    showBaseCabinetMeasure = scene.showBaseCabinetMeasure,
+    showWindowDoorMeasure = scene.showWindowDoorMeasure;
+  var vertex0 = layer.vertices.get(line.vertices.get(0));
+  var vertex1 = layer.vertices.get(line.vertices.get(1));
+  if (vertex0.id === vertex1.id || GeometryUtils.samePoints(vertex0, vertex1)) return null; //avoid 0-length lines
+  var x1 = vertex0.x,
+    y1 = vertex0.y;
+  var x2 = vertex1.x,
+    y2 = vertex1.y;
+  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) {
+      relatedvertice0x = relatedVertice.point.x;
+      relatedvertice0y = relatedVertice.point.y;
+    } else {
+      relatedvertice1x = relatedVertice.point.x;
+      relatedvertice1y = relatedVertice.point.y;
+    }
+  });
+  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 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);
+  // let relatedLines = [];
+  var angleVertices = [];
+  var layerID = state.getIn(['scene', 'selectedLayer']);
+  var drawingLineID = (_state$getIn = state.getIn(['scene', 'layers', layerID, 'selected', 'lines'])) === null || _state$getIn === void 0 ? void 0 : _state$getIn.toJS();
+  if (!isEmpty(drawingLineID)) {
+    var drawingLine = state.getIn(['scene', 'layers', layerID, 'lines', drawingLineID[0]]).toJS();
+    var allLines = state.getIn(['scene', 'layers', layerID, 'lines']).toJS();
+    var allLinesArray = state.getIn(['scene', 'layers', layerID, 'lines']).toArray();
+    var vertices = state.getIn(['scene', 'layers', layerID, 'vertices']).toJS();
+    var reget = false;
+    relatedLines.forEach(function (relLine) {
+      if (!allLinesArray.some(function (alLine) {
+        return alLine.id === relLine.id;
+      })) {
+        reget = true;
+      }
+    });
+    if (reget) {
+      relatedLines = [];
+      GeometryUtils.getRelatedLines(relatedLines, drawingLine, vertices, allLines);
+    }
+    // get the angle of two lines and check the angle.
+    if (drawingLine.vertices[0] !== drawingLine.vertices[1]) {
+      relatedLines.forEach(function (line) {
+        // get the points of two lines(drawing line and related line)
+        // the first value is overlapped point of two lines as a center of angle.
+        if (!isEmpty(line)) {
+          var points = [];
+          var anglePoints = [];
+          line.vertices.forEach(function (vt) {
+            if (drawingLine.vertices.some(function (dvt) {
+              return dvt === vt;
+            })) {
+              points.push(vt);
+            }
+          });
+          line.vertices.forEach(function (vt) {
+            if (!points.some(function (pt) {
+              return pt === vt;
+            })) {
+              points.push(vt);
+            }
+          });
+          drawingLine.vertices.forEach(function (vt) {
+            if (!points.some(function (pt) {
+              return pt === vt;
+            })) {
+              points.push(vt);
+            }
+          });
+          if (points.length < 3) {
+            points.push(points[points.length - 1]);
+          }
+          points.forEach(function (point) {
+            return anglePoints.push(vertices[point]);
+          });
+          angleVertices.push(anglePoints);
+        }
+      });
+    }
+  }
+  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 (isSnapped(itemRect)) {
+      base_posArray.push(r2);
+      base_posArray.push(r3);
+    }
+  });
+  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 (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: base_posArray[index + 1].x - element.x
+        });
+      }
+    }
+  } else {
+    base_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({
+          pos: _element,
+          length: Math.abs((base_posArray[_index + 1].y - _element.y) / Math.sin(angle / 180 * Math.PI))
+        });
+      }
+    }
+  }
+  if (!showBaseCabinetMeasure || base_posArray.length <= 2) {
+    baseSpace -= 20;
+  }
+  baseRuler = base_posAndwidth.map(function (pAw) {
+    if (pAw.length > 1) {
+      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
+          }), /*#__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)")
+          }), /*#__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
+          }));
+        } 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
+          }), /*#__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)")
+          }), /*#__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
+          }));
+        }
+      } else {
+        if (y1 - y2 > 0) {
+          if (x1 - x2 < 0 || GeometryUtils.almostEqual(x1, x2)) {
+            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
+            }), /*#__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)")
+            }), /*#__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
+            }));
+          } 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
+            }), /*#__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)")
+            }), /*#__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
+            }));
+          }
+        } else {
+          if (x1 - x2 < 0 || GeometryUtils.almostEqual(x1, x2)) {
+            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
+            }), /*#__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)")
+            }), /*#__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
+            }));
+          } 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
+            }), /*#__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)")
+            }), /*#__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
+            }));
+          }
+        }
+      }
+    }
+  });
+  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);
+  }
+  wall_item.others.forEach(function (itemRect) {
+    var r2 = itemRect.rect[2];
+    var r3 = itemRect.rect[3];
+    if (isSnapped(itemRect)) {
+      wall_posArray.push(r2);
+      wall_posArray.push(r3);
+    }
+  });
+  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 (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: wall_posArray[_index2 + 1].x - _element2.x
+        });
+      }
+    }
+  } else {
+    wall_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({
+          pos: _element3,
+          length: Math.abs((wall_posArray[_index3 + 1].y - _element3.y) / Math.sin(angle / 180 * Math.PI))
+        });
+      }
+    }
+  }
+  if (!showWallCabinetMeasure || wall_posArray.length <= 2) {
+    wallSpace -= 20;
+  }
+  wallRuler = wall_posAndwidth.map(function (pAw) {
+    if (pAw.length > 1) {
+      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
+          }), /*#__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)")
+          }), /*#__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
+          }));
+        } 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
+          }), /*#__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)")
+          }), /*#__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
+          }));
+        }
+      } else {
+        if (y1 - y2 > 0) {
+          if (x1 - x2 < 0 || GeometryUtils.almostEqual(x1, x2)) {
+            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
+            }), /*#__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)")
+            }), /*#__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
+            }));
+          } 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
+            }), /*#__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)")
+            }), /*#__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
+            }));
+          }
+        } else {
+          if (x1 - x2 < 0 || GeometryUtils.almostEqual(x1, x2)) {
+            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
+            }), /*#__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)")
+            }), /*#__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
+            }));
+          } 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
+            }), /*#__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)")
+            }), /*#__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
+            }));
+          }
+        }
+      }
+    }
+  });
+  var lineSpace = wallSpace + 20;
+  //the space from the dimensioning line to the top
+  var lineSpacedimension1 = 5;
+  //the space from the dimensioning line to the bottom
+  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: half_thickness + lineSpace + lineSpacedimension1,
+      x2: length,
+      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)")
+    }), /*#__PURE__*/React.createElement("line", {
+      x1: 0,
+      y1: half_thickness + lineSpace + lineSpacedimension1,
+      x2: 0,
+      y2: half_thickness + lineSpacedimension2,
+      style: STYLE
+    })));
+  } else {
+    renderedRuler.push(/*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("line", {
+      x1: 0,
+      y1: half_thickness + lineSpace + lineSpacedimension1,
+      x2: 0,
+      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, ")")
+    }), /*#__PURE__*/React.createElement("line", {
+      x1: length,
+      y1: half_thickness + lineSpace + lineSpacedimension1,
+      x2: length,
+      y2: half_thickness + lineSpacedimension2,
+      style: STYLE
+    })));
+  }
+  allRuler.sort(function (a, b) {
+    return a - b;
+  });
+  if (allRuler.length > 2) {
+    allRuler.forEach(function (rulerData, index) {
+      var element = allRuler[index + 1] - allRuler[index];
+      if (!Number.isNaN(element)) {
+        var dataProtoType = 'ruler';
+        var dataId = holeData["".concat(allRuler[index], "_").concat(allRuler[index + 1])];
+        if (!dataId) {
+          var holeID1 = holeData["".concat(allRuler[index - 1], "_").concat(allRuler[index])];
+          var holeID2 = holeData["".concat(allRuler[index + 1], "_").concat(allRuler[index + 2])];
+          if (holeID1 && holeID2) {
+            dataId = "".concat(holeID1, ",").concat(holeID2);
+            dataProtoType = 'twoHoleRuler';
+          } else if (holeID1) {
+            dataId = holeID1;
+            dataProtoType = 'rightHoleRuler';
+          } else if (holeID2) {
+            dataId = holeID2;
+            dataProtoType = 'leftHoleRuler';
+          }
+        } else {
+          dataProtoType = 'rulerHole';
+        }
+        if (compareVertices(vertex0, vertex1) >= 0 && vertex0.x !== vertex1.x) {
+          renderedAllRuler.push(/*#__PURE__*/React.createElement("g", {
+            transform: "translate(".concat(x1, ", ").concat(y1, ") rotate(").concat(angle, ", 0, 0)")
+          }, /*#__PURE__*/React.createElement("line", {
+            x1: allRuler[index],
+            y1: half_thickness,
+            x2: allRuler[index],
+            y2: half_thickness + doorSpace,
+            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)")
+          }), /*#__PURE__*/React.createElement("line", {
+            x1: allRuler[index] + element,
+            y1: half_thickness,
+            x2: allRuler[index] + element,
+            y2: half_thickness + doorSpace,
+            style: STYLE
+          })));
+        } else {
+          renderedAllRuler.push(/*#__PURE__*/React.createElement("g", {
+            transform: "translate(".concat(x1, ", ").concat(y1, ") rotate(").concat(angle, ", 0, 0)")
+          }, /*#__PURE__*/React.createElement("line", {
+            x1: allRuler[index],
+            y1: half_thickness,
+            x2: allRuler[index],
+            y2: half_thickness + doorSpace,
+            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, " )")
+          }), /*#__PURE__*/React.createElement("line", {
+            x1: allRuler[index] + element,
+            y1: half_thickness,
+            x2: allRuler[index] + element,
+            y2: half_thickness + doorSpace,
+            style: STYLE
+          })));
+        }
+      }
+    });
+  }
+  return /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("g", {
+    transform: "translate(".concat(x1, ", ").concat(y1, ") rotate(").concat(angle, ", 0, 0)"),
+    "data-element-root": true,
+    "data-prototype": 'ruler',
+    "data-id": line.id,
+    "data-selected": line.selected,
+    "data-layer": layer.id,
+    "data-length": length
+  }, showWallLengthMeasure ? renderedRuler : null), line.selected && angleVertices.map(function (vertex, index) {
+    var lineGroup = vertex[0].lines;
+    var angles = [];
+    var thickness = [];
+    var vectories = [];
+    // get the vector of lines
+    lineGroup.forEach(function (line) {
+      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);
+      var angle = vec.angle();
+      var thick = 15;
+      angles.push(angle);
+      thickness.push(thick);
+      vectories.push(vec.normalize());
+    });
+
+    // calculate the angle between two lines
+    var center = new Three.Vector2(vertex[0].x, vertex[0].y);
+    var pos1 = new Three.Vector2(vertex[1].x, vertex[1].y);
+    var pos2 = new Three.Vector2(vertex[2].x, vertex[2].y);
+    var cen = center.clone();
+    var pos = pos1.clone();
+    var vec1 = pos.sub(cen).normalize();
+    pos = pos2.clone();
+    var vec2 = pos.sub(cen).normalize();
+    var v1 = vec1.clone(),
+      v2 = vec2.clone();
+    var vec = v1.add(v2).normalize();
+    var angle = Math.abs(Math.floor(vec1.angle() * 180 / Math.PI - vec2.angle() * 180 / Math.PI + 0.5));
+    angle = angle > 180 ? 360 - angle : angle;
+    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);
+    angleTextO.add(textTranslation);
+    angleTextO.y -= 5; // half the height of text `angle`
+
+    var tx = 0;
+    var ty = 0;
+    vec = vec.multiplyScalar(35);
+    vec1 = vec1.multiplyScalar(35);
+    var cen1 = center.clone(),
+      cen2 = center.clone();
+    center = center.add(vec);
+    pos1 = cen1.add(vec1);
+    var rotated = pos1.clone().rotateAround(cen2, angle / 2.0 * Math.PI / 180);
+    var lines = [];
+    var t = center.distanceTo(rotated) < 5 ? 1 : -1;
+    pos2 = pos1.clone().rotateAround(cen2, t * angle * Math.PI / 180);
+
+    // 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        ")
+    }));
+    var length = angle;
+    // draw angle and angle text
+    return /*#__PURE__*/React.createElement("g", {
+      key: index,
+      transform: "translate(".concat(tx, ", ").concat(ty, ")"),
+      "data-element-root": true,
+      "data-prototype": "angleChange",
+      "data-layer": layer.id,
+      "data-selected": "true",
+      "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)"),
+      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
+    }));
+  }), showWindowDoorMeasure ? renderedAllRuler : null, showBaseCabinetMeasure ? baseRuler : null, showWallCabinetMeasure ? wallRuler : null, /*#__PURE__*/React.createElement("g", {
+    "data-element-root": true,
+    "data-prototype": line.prototype,
+    "data-id": line.id,
+    id: line.id,
+    "data-selected": line.selected,
+    "data-layer": layer.id,
+    style: line.selected ? {
+      cursor: 'move'
+    } : {}
+  }, renderedLine, /*#__PURE__*/React.createElement("g", {
+    transform: "translate(".concat(x1, ", ").concat(y1, ") rotate(").concat(angle, ", 0, 0)")
+  }, renderedHoles)), line.selected && /*#__PURE__*/React.createElement("g", {
+    id: 'elevation-button',
+    key: 1,
+    transform: "translate(".concat(x1 + 35, ", ").concat(y1 - 15, ")"),
+    style: {
+      cursor: 'pointer'
+    }
+  }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("filter", {
+    id: "shadow"
+  }, /*#__PURE__*/React.createElement("feDropShadow", {
+    dx: "0",
+    dy: "0",
+    stdDeviation: "0.6"
+  }))), /*#__PURE__*/React.createElement("rect", {
+    rx: "4",
+    ry: "4",
+    y: "20",
+    height: "22",
+    width: "22",
+    fill: "white",
+    filter: "url(#shadow)"
+  }), /*#__PURE__*/React.createElement("image", {
+    href: "/assets/img/svg/bottombar/elevation.svg",
+    x: "5",
+    y: "-36",
+    height: "12",
+    width: "12",
+    style: {
+      transform: 'rotateX(180deg)'
+    }
+  })), line.selected && /*#__PURE__*/React.createElement("g", {
+    id: 'remove-button',
+    key: 2,
+    transform: "translate(".concat(x1 + 10, ", ").concat(y1, ")"),
+    style: {
+      cursor: 'pointer'
+    }
+  }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("filter", {
+    id: "shadow"
+  }, /*#__PURE__*/React.createElement("feDropShadow", {
+    dx: "0",
+    dy: "0",
+    stdDeviation: "0.6"
+  }))), /*#__PURE__*/React.createElement("rect", {
+    rx: "4",
+    ry: "4",
+    y: "5",
+    height: "22",
+    width: "22",
+    fill: "white",
+    filter: "url(#shadow)"
+  }), /*#__PURE__*/React.createElement("image", {
+    href: "/assets/img/svg/delete.svg",
+    x: "3",
+    y: "-24",
+    height: "16",
+    width: "16",
+    style: {
+      transform: 'rotateX(180deg)'
+    }
+  })), /*#__PURE__*/React.createElement("use", {
+    id: 'use elevation button',
+    xlinkHref: '#elevation-button',
+    "data-element-root": true,
+    "data-prototype": line.prototype,
+    "data-id": line.id,
+    "data-selected": line.selected,
+    "data-layer": layer.id,
+    "data-part": "elevation"
+  }), /*#__PURE__*/React.createElement("use", {
+    id: 'use remove button',
+    xlinkHref: '#remove-button',
+    "data-element-root": true,
+    "data-prototype": line.prototype,
+    "data-id": line.id,
+    "data-selected": line.selected,
+    "data-layer": layer.id,
+    "data-part": "remove"
+  }));
+}
+Line.propTypes = {
+  line: PropTypes.object.isRequired,
+  layer: PropTypes.object.isRequired,
+  scene: PropTypes.object.isRequired,
+  catalog: PropTypes.object.isRequired
+};