1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37
38. 38
39. 39
40. 40

import { css, html, svg } from "lit-element";
import { styleMap, StyleInfo } from "lit-html/directives/style-map";

import { DistanceGuide as TDistanceGuide, Point2D, round } from "./utils";

export interface DistaneGuideProps {
  guide: TDistanceGuide;

  reverseScale: number;
}

export const DistanceGuide = ({ guide, reverseScale }: DistaneGuideProps) => {
  return svg`
    <line
      x1=${guide.points[0].x}
      y1=${guide.points[0].y}
      x2=${guide.points[1].x}
      y2=${guide.points[1].y}
      shape-rendering="geometricPrecision"
    />

    ${
      guide.bisector &&
      svg`
        <line
          x1=${guide.bisector[0].x}
          y1=${guide.bisector[0].y}
          x2=${guide.bisector[1].x}
          y2=${guide.bisector[1].y}
          style=${styleMap({
            strokeDasharray: `${4 * reverseScale}`,
          })}
          shape-rendering="geometricPrecision"
        />
      `
    }
  `;
};

export const styles = css``;