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

package/es/components/viewer2d/line.js

@@ -1,882 +0,0 @@
-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
-};