kitchen-simulator 5.0.0-test.5 → 5.0.0-test.6

package/src/components/viewer2d/line.jsx

@@ -0,0 +1,1358 @@
+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 '../../../src/constants';
+import * as Three from 'three';
+import { isEmpty } from './utils';
+import Tooltip from '@material-ui/core/Tooltip';
+
+const STYLE = {
+  stroke: 'rgb(77, 77, 77)',
+  strokeWidth: '1px'
+};
+const STYLE_ANGLE = {
+  stroke: 'rgb(77, 77, 77)',
+  strokeWidth: 1,
+  strokeLinecap: 'round',
+  strokeLinejoin: 'round',
+  strokeMiterlimit: 2.613,
+  fill: 'transparent'
+};
+const 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({
+  line,
+  allLine,
+  layer,
+  scene,
+  num,
+  catalog,
+  state,
+  relatedLines
+}) {
+  let {
+    showWallLengthMeasure,
+    showWallCabinetMeasure,
+    showBaseCabinetMeasure,
+    showWindowDoorMeasure
+  } = scene;
+  if (!catalog.getElement(line.type)) {
+    return null;
+  }
+
+  let vertex0 = layer.vertices.get(line.vertices.get(0));
+  let vertex1 = layer.vertices.get(line.vertices.get(1));
+  if (vertex0.id === vertex1.id || GeometryUtils.samePoints(vertex0, vertex1))
+    return null; //avoid 0-length lines
+  let { x: x1, y: y1 } = vertex0;
+  let { x: x2, y: y2 } = vertex1;
+  let relatedvertice0x, relatedvertice0y, relatedvertice1x, relatedvertice1y;
+  // relatedvertice0x = relatedVertice.point.x;
+  // relatedvertice0y = relatedVertice.point.y;
+  line.relatedVertices.forEach(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;
+    }
+  });
+
+  let thickness = LINE_THICKNESS;
+  let half_thickness = thickness / 2;
+  // if (compareVertices(vertex0, vertex1) >= 0 && vertex0.x !== vertex1.x) {
+  //   ({ x: x1, y: y1 } = vertex1);
+  //   ({ x: x2, y: y2 } = vertex0);
+  // }
+
+  let length = GeometryUtils.pointsDistance(x1, y1, x2, y2);
+  // let length = GeometryUtils.pointsDistance(relatedvertice0x,relatedvertice0y,relatedvertice1x,relatedvertice1y);
+  let rightHoleLength, leftHoleLength, holeLength;
+  let angle = GeometryUtils.angleBetweenTwoPointsAndOrigin(x1, y1, x2, y2);
+  let baseSpace = 20;
+  let base_item = GeometryUtils.getAllItemSpecified(
+    scene,
+    catalog,
+    BASE_CABINET_LAYOUTPOS
+  );
+  // let relatedLines = [];
+  let angleVertices = [];
+  let layerID = state.getIn(['scene', 'selectedLayer']);
+  let drawingLineID = state
+    .getIn(['scene', 'layers', layerID, 'selected', 'lines'])
+    ?.toJS();
+  if (!isEmpty(drawingLineID)) {
+    let drawingLine = state
+      .getIn(['scene', 'layers', layerID, 'lines', drawingLineID[0]])
+      .toJS();
+    let allLines = state.getIn(['scene', 'layers', layerID, 'lines']).toJS();
+    let allLinesArray = state
+      .getIn(['scene', 'layers', layerID, 'lines'])
+      .toArray();
+    let vertices = state.getIn(['scene', 'layers', layerID, 'vertices']).toJS();
+    let reget = false;
+    relatedLines.forEach(relLine => {
+      if (!allLinesArray.some(alLine => 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(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)) {
+          let points = [];
+          let anglePoints = [];
+          line.vertices.forEach(vt => {
+            if (drawingLine.vertices.some(dvt => dvt === vt)) {
+              points.push(vt);
+            }
+          });
+          line.vertices.forEach(vt => {
+            if (!points.some(pt => pt === vt)) {
+              points.push(vt);
+            }
+          });
+          drawingLine.vertices.forEach(vt => {
+            if (!points.some(pt => pt === vt)) {
+              points.push(vt);
+            }
+          });
+          if (points.length < 3) {
+            points.push(points[points.length - 1]);
+          }
+          points.forEach(point => anglePoints.push(vertices[point]));
+          angleVertices.push(anglePoints);
+        }
+      });
+    }
+  }
+  const l2 = { x: x1, y: y1 };
+  const l3 = { x: x2, y: y2 };
+  const isSnapped = itemRect => {
+    const r0 = itemRect.rect[0];
+    const r1 = itemRect.rect[1];
+    const r2 = itemRect.rect[2];
+    const r3 = itemRect.rect[3];
+    let 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
+  let baseRuler = [];
+  let base_posArray = [];
+  if (base_item.cur) {
+    base_item.others.push(base_item.cur);
+  }
+  base_item.others.forEach(itemRect => {
+    const r2 = itemRect.rect[2];
+    const r3 = itemRect.rect[3];
+    if (isSnapped(itemRect)) {
+      base_posArray.push(r2);
+      base_posArray.push(r3);
+    }
+  });
+  base_posArray.push(l2);
+  base_posArray.push(l3);
+  let base_posAndwidth = [];
+  if (
+    Math.abs(angle) === 0 ||
+    Math.abs(angle) === 180 ||
+    GeometryUtils.almostEqual(y1, y2)
+  ) {
+    base_posArray.sort((a, b) => {
+      return a.x - b.x;
+    });
+    if (base_posArray.length > 2) {
+      for (let index = 0; index < base_posArray.length - 1; index++) {
+        const element = base_posArray[index];
+        base_posAndwidth.push({
+          pos: element,
+          length: base_posArray[index + 1].x - element.x
+        });
+      }
+    }
+  } else {
+    base_posArray.sort((a, b) => {
+      return a.y - b.y;
+    });
+    if (base_posArray.length > 2) {
+      for (let index = 0; index < base_posArray.length - 1; index++) {
+        const 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(pAw => {
+    if (pAw.length > 1) {
+      if (
+        Math.abs(angle) === 0 ||
+        Math.abs(angle) === 180 ||
+        GeometryUtils.almostEqual(y1, y2)
+      ) {
+        if (x1 - x2 > 0) {
+          return (
+            <g>
+              <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}
+              />
+              <Ruler
+                key={4}
+                layer={layer}
+                unit={scene.unit}
+                rulerUnit={scene.rulerUnit}
+                length={pAw.length}
+                transform={`translate(${pAw.pos.x}, ${
+                  pAw.pos.y - thickness / 2 - baseSpace
+                } ) rotate(${angle + 180}, 0, 0)`}
+              />
+              <line
+                x1={pAw.pos.x}
+                y1={pAw.pos.y}
+                x2={pAw.pos.x}
+                y2={pAw.pos.y - thickness / 2 - baseSpace}
+                style={STYLE}
+              />
+            </g>
+          );
+        } else {
+          return (
+            <g>
+              <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}
+              />
+              <Ruler
+                key={4}
+                layer={layer}
+                unit={scene.unit}
+                rulerUnit={scene.rulerUnit}
+                length={pAw.length}
+                transform={`translate(${pAw.pos.x}, ${
+                  pAw.pos.y + thickness / 2 + baseSpace
+                } ) rotate(${angle}, 0, 0)`}
+              />
+              <line
+                x1={pAw.pos.x}
+                y1={pAw.pos.y}
+                x2={pAw.pos.x}
+                y2={pAw.pos.y + thickness / 2 + baseSpace}
+                style={STYLE}
+              />
+            </g>
+          );
+        }
+      } else {
+        if (y1 - y2 > 0) {
+          if (x1 - x2 < 0 || GeometryUtils.almostEqual(x1, x2)) {
+            return (
+              <g>
+                <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}
+                />
+                <Ruler
+                  key={5}
+                  layer={layer}
+                  unit={scene.unit}
+                  rulerUnit={scene.rulerUnit}
+                  length={pAw.length}
+                  transform={`translate(${
+                    pAw.pos.x -
+                    pAw.length * Math.cos((angle / 180) * Math.PI) -
+                    (thickness / 2 + baseSpace) *
+                      Math.sin((angle / 180) * Math.PI)
+                  }, ${
+                    pAw.pos.y -
+                    pAw.length * Math.sin((angle / 180) * Math.PI) +
+                    (thickness / 2 + baseSpace) *
+                      Math.cos((angle / 180) * Math.PI)
+                  } ) rotate(${angle}, 0, 0)`}
+                />
+                <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}
+                />
+              </g>
+            );
+          } else {
+            return (
+              <g>
+                <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}
+                />
+                <Ruler
+                  key={5}
+                  layer={layer}
+                  unit={scene.unit}
+                  rulerUnit={scene.rulerUnit}
+                  length={pAw.length}
+                  transform={`translate(${
+                    pAw.pos.x -
+                    (thickness / 2 + baseSpace) *
+                      Math.sin((angle / 180) * Math.PI)
+                  }, ${
+                    pAw.pos.y +
+                    (thickness / 2 + baseSpace) *
+                      Math.cos((angle / 180) * Math.PI)
+                  } ) rotate(${angle}, 0, 0) scale(-1, -1)`}
+                />
+                <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}
+                />
+              </g>
+            );
+          }
+        } else {
+          if (x1 - x2 < 0 || GeometryUtils.almostEqual(x1, x2)) {
+            return (
+              <g>
+                <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}
+                />
+                <Ruler
+                  key={5}
+                  layer={layer}
+                  unit={scene.unit}
+                  rulerUnit={scene.rulerUnit}
+                  length={pAw.length}
+                  transform={`translate(${
+                    pAw.pos.x -
+                    (thickness / 2 + baseSpace) *
+                      Math.sin((angle / 180) * Math.PI)
+                  }, ${
+                    pAw.pos.y +
+                    (thickness / 2 + baseSpace) *
+                      Math.cos((angle / 180) * Math.PI)
+                  } ) rotate(${angle}, 0, 0)`}
+                />
+
+                <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}
+                />
+              </g>
+            );
+          } else {
+            return (
+              <g>
+                <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}
+                />
+                <Ruler
+                  key={5}
+                  layer={layer}
+                  unit={scene.unit}
+                  rulerUnit={scene.rulerUnit}
+                  length={pAw.length}
+                  transform={`translate(${
+                    pAw.pos.x +
+                    pAw.length * Math.cos((angle / 180) * Math.PI) -
+                    (thickness / 2 + baseSpace) *
+                      Math.sin((angle / 180) * Math.PI)
+                  }, ${
+                    pAw.pos.y +
+                    pAw.length * Math.sin((angle / 180) * Math.PI) +
+                    (thickness / 2 + baseSpace) *
+                      Math.cos((angle / 180) * Math.PI)
+                  } ) rotate(${angle}, 0, 0) scale(-1, -1)`}
+                />
+                <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}
+                />
+              </g>
+            );
+          }
+        }
+      }
+    }
+  });
+  let doorSpace = baseSpace + 20;
+  let renderedHoles = line.holes.map(holeID => {
+    let hole = layer.holes.get(holeID);
+    if (hole === undefined) {
+      return '';
+    }
+    let startAt = length * hole.offset;
+
+    let renderedHole = catalog
+      .getElement(hole.type)
+      .render2D(hole, layer, scene);
+    return (
+      <g
+        key={holeID}
+        transform={`translate(${startAt}, 3.5)`}
+        data-element-root
+        data-prototype={hole.prototype}
+        data-id={hole.id}
+        data-selected={hole.selected}
+        data-layer={layer.id}
+      >
+        {renderedHole}
+      </g>
+    );
+  });
+  let renderedLine = catalog
+    .getElement(line.type)
+    .render2D(line, layer, scene, state);
+  let holeTemp = [];
+  let renderedRuler = [];
+  let renderedAllRuler = [];
+
+  if (!line.holes.size || !showWindowDoorMeasure) {
+    doorSpace -= 20;
+  }
+
+  let allRuler = [0],
+    holeData = [];
+  let lineHoles = line.holes.sortBy(holeID => {
+    let hole = layer.holes.get(holeID);
+    return !hole ? 0 : hole.offset;
+  });
+  lineHoles.forEach(holeID => {
+    let hole = layer.holes.get(holeID);
+    if (hole !== undefined) {
+      let startAt = length * hole.offset;
+
+      let holeWidth = hole.properties.toJS().width.length;
+      allRuler.push(startAt - holeWidth / 2);
+      allRuler.push(startAt + holeWidth / 2);
+      holeData[`${startAt - holeWidth / 2}_${startAt + holeWidth / 2}`] =
+        holeID;
+    }
+  });
+  allRuler.push(length);
+
+  // wall cabinet
+  let wallSpace = doorSpace + 20;
+  let wall_item = GeometryUtils.getAllItemSpecified(
+    scene,
+    catalog,
+    WALL_CABINET_LAYOUTPOS
+  );
+  let wallRuler = [];
+  let wall_posArray = [];
+  if (wall_item.cur) {
+    wall_item.others.push(wall_item.cur);
+  }
+  wall_item.others.forEach(itemRect => {
+    const r2 = itemRect.rect[2];
+    const r3 = itemRect.rect[3];
+    if (isSnapped(itemRect)) {
+      wall_posArray.push(r2);
+      wall_posArray.push(r3);
+    }
+  });
+  wall_posArray.push(l2);
+  wall_posArray.push(l3);
+  let wall_posAndwidth = [];
+  if (
+    Math.abs(angle) === 0 ||
+    Math.abs(angle) === 180 ||
+    GeometryUtils.almostEqual(y1, y2)
+  ) {
+    wall_posArray.sort((a, b) => {
+      return a.x - b.x;
+    });
+    if (wall_posArray.length > 2) {
+      for (let index = 0; index < wall_posArray.length - 1; index++) {
+        const element = wall_posArray[index];
+        wall_posAndwidth.push({
+          pos: element,
+          length: wall_posArray[index + 1].x - element.x
+        });
+      }
+    }
+  } else {
+    wall_posArray.sort((a, b) => {
+      return a.y - b.y;
+    });
+    if (wall_posArray.length > 2) {
+      for (let index = 0; index < wall_posArray.length - 1; index++) {
+        const element = wall_posArray[index];
+        wall_posAndwidth.push({
+          pos: element,
+          length: Math.abs(
+            (wall_posArray[index + 1].y - element.y) /
+              Math.sin((angle / 180) * Math.PI)
+          )
+        });
+      }
+    }
+  }
+  if (!showWallCabinetMeasure || wall_posArray.length <= 2) {
+    wallSpace -= 20;
+  }
+  wallRuler = wall_posAndwidth.map(pAw => {
+    if (pAw.length > 1) {
+      if (
+        Math.abs(angle) === 0 ||
+        Math.abs(angle) === 180 ||
+        GeometryUtils.almostEqual(y1, y2)
+      ) {
+        if (x1 - x2 > 0) {
+          return (
+            <g>
+              <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}
+              />
+              <Ruler
+                key={4}
+                layer={layer}
+                unit={scene.unit}
+                rulerUnit={scene.rulerUnit}
+                length={pAw.length}
+                transform={`translate(${pAw.pos.x}, ${
+                  pAw.pos.y - thickness / 2 - wallSpace
+                } ) rotate(${angle + 180}, 0, 0)`}
+              />
+              <line
+                x1={pAw.pos.x}
+                y1={pAw.pos.y}
+                x2={pAw.pos.x}
+                y2={pAw.pos.y - thickness / 2 - wallSpace}
+                style={STYLE}
+              />
+            </g>
+          );
+        } else {
+          return (
+            <g>
+              <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}
+              />
+              <Ruler
+                key={4}
+                layer={layer}
+                unit={scene.unit}
+                rulerUnit={scene.rulerUnit}
+                length={pAw.length}
+                transform={`translate(${pAw.pos.x}, ${
+                  pAw.pos.y + thickness / 2 + wallSpace
+                } ) rotate(${angle}, 0, 0)`}
+              />
+              <line
+                x1={pAw.pos.x}
+                y1={pAw.pos.y}
+                x2={pAw.pos.x}
+                y2={pAw.pos.y + thickness / 2 + wallSpace}
+                style={STYLE}
+              />
+            </g>
+          );
+        }
+      } else {
+        if (y1 - y2 > 0) {
+          if (x1 - x2 < 0 || GeometryUtils.almostEqual(x1, x2)) {
+            return (
+              <g>
+                <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}
+                />
+                <Ruler
+                  key={5}
+                  layer={layer}
+                  unit={scene.unit}
+                  rulerUnit={scene.rulerUnit}
+                  length={pAw.length}
+                  transform={`translate(${
+                    pAw.pos.x -
+                    pAw.length * Math.cos((angle / 180) * Math.PI) -
+                    (thickness / 2 + wallSpace) *
+                      Math.sin((angle / 180) * Math.PI)
+                  }, ${
+                    pAw.pos.y -
+                    pAw.length * Math.sin((angle / 180) * Math.PI) +
+                    (thickness / 2 + wallSpace) *
+                      Math.cos((angle / 180) * Math.PI)
+                  } ) rotate(${angle}, 0, 0)`}
+                />
+                <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}
+                />
+              </g>
+            );
+          } else {
+            return (
+              <g>
+                <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}
+                />
+                <Ruler
+                  key={5}
+                  layer={layer}
+                  unit={scene.unit}
+                  rulerUnit={scene.rulerUnit}
+                  length={pAw.length}
+                  transform={`translate(${
+                    pAw.pos.x -
+                    (thickness / 2 + wallSpace) *
+                      Math.sin((angle / 180) * Math.PI)
+                  }, ${
+                    pAw.pos.y +
+                    (thickness / 2 + wallSpace) *
+                      Math.cos((angle / 180) * Math.PI)
+                  } ) rotate(${angle}, 0, 0) scale(-1, -1)`}
+                />
+                <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}
+                />
+              </g>
+            );
+          }
+        } else {
+          if (x1 - x2 < 0 || GeometryUtils.almostEqual(x1, x2)) {
+            return (
+              <g>
+                <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}
+                />
+                <Ruler
+                  key={5}
+                  layer={layer}
+                  unit={scene.unit}
+                  rulerUnit={scene.rulerUnit}
+                  length={pAw.length}
+                  transform={`translate(${
+                    pAw.pos.x -
+                    (thickness / 2 + wallSpace) *
+                      Math.sin((angle / 180) * Math.PI)
+                  }, ${
+                    pAw.pos.y +
+                    (thickness / 2 + wallSpace) *
+                      Math.cos((angle / 180) * Math.PI)
+                  } ) rotate(${angle}, 0, 0)`}
+                />
+                <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}
+                />
+              </g>
+            );
+          } else {
+            return (
+              <g>
+                <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}
+                />
+
+                <Ruler
+                  key={5}
+                  layer={layer}
+                  unit={scene.unit}
+                  rulerUnit={scene.rulerUnit}
+                  length={pAw.length}
+                  transform={`translate(${
+                    pAw.pos.x +
+                    pAw.length * Math.cos((angle / 180) * Math.PI) -
+                    (thickness / 2 + wallSpace) *
+                      Math.sin((angle / 180) * Math.PI)
+                  }, ${
+                    pAw.pos.y +
+                    pAw.length * Math.sin((angle / 180) * Math.PI) +
+                    (thickness / 2 + wallSpace) *
+                      Math.cos((angle / 180) * Math.PI)
+                  } ) rotate(${angle}, 0, 0) scale(-1, -1)`}
+                />
+                <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}
+                />
+              </g>
+            );
+          }
+        }
+      }
+    }
+  });
+  let lineSpace = wallSpace + 20;
+  //the space from the dimensioning line to the top
+  let lineSpacedimension1 = 5;
+  //the space from the dimensioning line to the bottom
+  let lineSpacedimension2 = 15;
+  if (compareVertices(vertex0, vertex1) >= 0 && vertex0.x !== vertex1.x) {
+    renderedRuler.push(
+      <g>
+        <line
+          x1={length}
+          y1={half_thickness + lineSpace + lineSpacedimension1}
+          x2={length}
+          y2={half_thickness + lineSpacedimension2}
+          style={STYLE}
+        />
+        <Ruler
+          key={0}
+          layer={layer}
+          unit={scene.unit}
+          rulerUnit={scene.rulerUnit}
+          length={length}
+          transform={`translate(${length}, ${
+            half_thickness + lineSpace
+          }) scale(-1, -1)`}
+        />
+        <line
+          x1={0}
+          y1={half_thickness + lineSpace + lineSpacedimension1}
+          x2={0}
+          y2={half_thickness + lineSpacedimension2}
+          style={STYLE}
+        />
+      </g>
+    );
+  } else {
+    renderedRuler.push(
+      <g>
+        <line
+          x1={0}
+          y1={half_thickness + lineSpace + lineSpacedimension1}
+          x2={0}
+          y2={half_thickness + lineSpacedimension2}
+          style={STYLE}
+        />
+        <Ruler
+          key={0}
+          layer={layer}
+          unit={scene.unit}
+          rulerUnit={scene.rulerUnit}
+          length={length}
+          transform={`translate(0, ${half_thickness + lineSpace})`}
+        />
+        <line
+          x1={length}
+          y1={half_thickness + lineSpace + lineSpacedimension1}
+          x2={length}
+          y2={half_thickness + lineSpacedimension2}
+          style={STYLE}
+        />
+      </g>
+    );
+  }
+
+  allRuler.sort((a, b) => a - b);
+
+  if (allRuler.length > 2) {
+    allRuler.forEach((rulerData, index) => {
+      const element = allRuler[index + 1] - allRuler[index];
+      if (!Number.isNaN(element)) {
+        let dataProtoType = 'ruler';
+        let dataId = holeData[`${allRuler[index]}_${allRuler[index + 1]}`];
+        if (!dataId) {
+          let holeID1 = holeData[`${allRuler[index - 1]}_${allRuler[index]}`];
+          let holeID2 =
+            holeData[`${allRuler[index + 1]}_${allRuler[index + 2]}`];
+          if (holeID1 && holeID2) {
+            dataId = `${holeID1},${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(
+            <g transform={`translate(${x1}, ${y1}) rotate(${angle}, 0, 0)`}>
+              <line
+                x1={allRuler[index]}
+                y1={half_thickness}
+                x2={allRuler[index]}
+                y2={half_thickness + doorSpace}
+                style={STYLE}
+              />
+              <Ruler
+                key={`allRuler_${index}`}
+                layer={layer}
+                unit={scene.unit}
+                rulerUnit={scene.rulerUnit}
+                length={element}
+                transform={`translate(${allRuler[index] + element}, ${
+                  half_thickness + doorSpace
+                } ) scale(-1, -1)`}
+              />
+              <line
+                x1={allRuler[index] + element}
+                y1={half_thickness}
+                x2={allRuler[index] + element}
+                y2={half_thickness + doorSpace}
+                style={STYLE}
+              />
+            </g>
+          );
+        } else {
+          renderedAllRuler.push(
+            <g transform={`translate(${x1}, ${y1}) rotate(${angle}, 0, 0)`}>
+              <line
+                x1={allRuler[index]}
+                y1={half_thickness}
+                x2={allRuler[index]}
+                y2={half_thickness + doorSpace}
+                style={STYLE}
+              />
+              <Ruler
+                key={`allRuler_${index}`}
+                layer={layer}
+                unit={scene.unit}
+                rulerUnit={scene.rulerUnit}
+                length={element}
+                transform={`translate(${allRuler[index]}, ${
+                  half_thickness + doorSpace
+                } )`}
+              />
+              <line
+                x1={allRuler[index] + element}
+                y1={half_thickness}
+                x2={allRuler[index] + element}
+                y2={half_thickness + doorSpace}
+                style={STYLE}
+              />
+            </g>
+          );
+        }
+      }
+    });
+  }
+  return (
+    <g>
+      <g
+        transform={`translate(${x1}, ${y1}) rotate(${angle}, 0, 0)`}
+        data-element-root
+        data-prototype={'ruler'}
+        data-id={line.id}
+        data-selected={line.selected}
+        data-layer={layer.id}
+        data-length={length}
+      >
+        {showWallLengthMeasure ? renderedRuler : null}
+      </g>
+      {/* Show the angle and angle text */}
+      {line.selected &&
+        angleVertices.map((vertex, index) => {
+          let lineGroup = vertex[0].lines;
+          let angles = [];
+          let thickness = [];
+          let vectories = [];
+          // get the vector of lines
+          lineGroup.forEach(line => {
+            line = layer.lines.get(line);
+            let vertex0 = layer.vertices.get(line.vertices.get(0));
+            let vertex1 = layer.vertices.get(line.vertices.get(1));
+            let 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
+                  );
+            let angle = vec.angle();
+            let thick = 15;
+            angles.push(angle);
+            thickness.push(thick);
+            vectories.push(vec.normalize());
+          });
+
+          // calculate the angle between two lines
+          let center = new Three.Vector2(vertex[0].x, vertex[0].y);
+          let pos1 = new Three.Vector2(vertex[1].x, vertex[1].y);
+          let pos2 = new Three.Vector2(vertex[2].x, vertex[2].y);
+          let cen = center.clone();
+          let pos = pos1.clone();
+
+          let vec1 = pos.sub(cen).normalize();
+          pos = pos2.clone();
+          let vec2 = pos.sub(cen).normalize();
+          let v1 = vec1.clone(),
+            v2 = vec2.clone();
+          let vec = v1.add(v2).normalize();
+          let angle = Math.abs(
+            Math.floor(
+              (vec1.angle() * 180) / Math.PI -
+                (vec2.angle() * 180) / Math.PI +
+                0.5
+            )
+          );
+          angle = angle > 180 ? 360 - angle : angle;
+
+          let rotDir = vec1.cross(vec2) > 0; // true: rotate CCW, false: rotate CW
+
+          // Angle Text Position
+
+          let angleTextO = center.clone();
+          let textTranslation = vec1
+            .clone()
+            .add(vec2)
+            .normalize()
+            .multiplyScalar(25);
+          angleTextO.add(textTranslation);
+          angleTextO.y -= 5; // half the height of text `angle`
+
+          let tx = 0;
+          let ty = 0;
+
+          vec = vec.multiplyScalar(35);
+          vec1 = vec1.multiplyScalar(35);
+          let cen1 = center.clone(),
+            cen2 = center.clone();
+          center = center.add(vec);
+
+          pos1 = cen1.add(vec1);
+          let rotated = pos1
+            .clone()
+            .rotateAround(cen2, ((angle / 2.0) * Math.PI) / 180);
+          let lines = [];
+
+          let t = center.distanceTo(rotated) < 5 ? 1 : -1;
+          pos2 = pos1.clone().rotateAround(cen2, (t * angle * Math.PI) / 180);
+
+          // Angle SVG Path
+          lines.push(
+            <path
+              style={STYLE_ANGLE}
+              d={`
+          M ${vertex[0].x},${vertex[0].y} \
+          L ${pos1.x},${pos1.y} \
+          A 30,30 ${angle} 0 ${t > 0 ? 1 : 0} ${pos2.x},${pos2.y} z
+        `}
+            />
+          );
+
+          let length = angle;
+          // draw angle and angle text
+          return (
+            <g
+              key={index}
+              transform={`translate(${tx}, ${ty})`}
+              data-element-root
+              data-prototype="angleChange"
+              data-layer={layer.id}
+              data-selected="true"
+              data-id={[vertex[0].id, vertex[1].id, rotDir]}
+              data-length={length}
+            >
+              {lines}
+              <text
+                transform={`translate(${angleTextO.x}, ${angleTextO.y}) scale(1.5, -1.5)`}
+                style={STYLE_TEXT}
+              >
+                {angle}
+              </text>
+              <circle
+                transform={`translate(${angleTextO.x}, ${angleTextO.y}) translate(10, 9)`}
+                fill="transparent"
+                stroke="rgb(77, 77, 77)"
+                strokeWidth={1}
+                r={2}
+              ></circle>
+            </g>
+          );
+        })}
+      {showWindowDoorMeasure ? renderedAllRuler : null}
+      {showBaseCabinetMeasure ? baseRuler : null}
+      {showWallCabinetMeasure ? wallRuler : null}
+      <g
+        data-element-root
+        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}
+        <g transform={`translate(${x1}, ${y1}) rotate(${angle}, 0, 0)`}>
+          {renderedHoles}
+        </g>
+      </g>
+      {line.selected && (
+        <Tooltip title="Elevation View">
+          <g
+            id={'elevation-button'}
+            key={1}
+            transform={`translate(${x1 + 35}, ${y1 - 15})`}
+            style={{ cursor: 'pointer' }}
+          >
+            <defs>
+              <filter id="shadow">
+                <feDropShadow dx="0" dy="0" stdDeviation="0.6"></feDropShadow>
+              </filter>
+            </defs>
+            <rect
+              rx="4"
+              ry="4"
+              y="20"
+              height="22"
+              width="22"
+              fill="white"
+              filter="url(#shadow)"
+            />
+            <image
+              href="/assets/img/svg/bottombar/elevation.svg"
+              x="5"
+              y="-36"
+              height="12"
+              width="12"
+              style={{ transform: 'rotateX(180deg)' }}
+            />
+          </g>
+        </Tooltip>
+      )}
+      {line.selected && (
+        <g
+          id={'remove-button'}
+          key={2}
+          transform={`translate(${x1 + 10}, ${y1})`}
+          style={{ cursor: 'pointer' }}
+        >
+          <defs>
+            <filter id="shadow">
+              <feDropShadow dx="0" dy="0" stdDeviation="0.6"></feDropShadow>
+            </filter>
+          </defs>
+          <rect
+            rx="4"
+            ry="4"
+            y="5"
+            height="22"
+            width="22"
+            fill="white"
+            filter="url(#shadow)"
+          />
+          <image
+            href="/assets/img/svg/delete.svg"
+            x="3"
+            y="-24"
+            height="16"
+            width="16"
+            style={{ transform: 'rotateX(180deg)' }}
+          />
+        </g>
+      )}
+      <use
+        id={'use elevation button'}
+        xlinkHref={'#elevation-button'}
+        data-element-root
+        data-prototype={line.prototype}
+        data-id={line.id}
+        data-selected={line.selected}
+        data-layer={layer.id}
+        data-part="elevation"
+      />
+      <use
+        id={'use remove button'}
+        xlinkHref={'#remove-button'}
+        data-element-root
+        data-prototype={line.prototype}
+        data-id={line.id}
+        data-selected={line.selected}
+        data-layer={layer.id}
+        data-part="remove"
+      />
+    </g>
+  );
+}
+
+Line.propTypes = {
+  line: PropTypes.object.isRequired,
+  layer: PropTypes.object.isRequired,
+  scene: PropTypes.object.isRequired,
+  catalog: PropTypes.object.isRequired
+};