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

package/src/components/viewer2d/line.jsx

@@ -1,1358 +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 '../../../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
-};