feat: add line shape (#371)

* feat: add line shape

* fix: align line tool

* fix: hitbox bug sw to ne

* fix: add stroke width n sloppiness  for line

* fix: center line inside a panel box

* fix: use color as a unique key

src/element/bounds.ts

@@ -48,3 +48,12 @@ export function getArrowPoints(element: ExcalidrawElement) {
 
   return [x1, y1, x2, y2, x3, y3, x4, y4];
 }
+
+export function getLinePoints(element: ExcalidrawElement) {
+  const x1 = 0;
+  const y1 = 0;
+  const x2 = element.width;
+  const y2 = element.height;
+
+  return [x1, y1, x2, y2];
+}

src/element/collision.ts

@@ -4,7 +4,8 @@ import { ExcalidrawElement } from "./types";
 import {
   getArrowPoints,
   getDiamondPoints,
-  getElementAbsoluteCoords
+  getElementAbsoluteCoords,
+  getLinePoints
 } from "./bounds";
 
 export function hitTest(
@@ -153,6 +154,13 @@ export function hitTest(
       //    /
       distanceBetweenPointAndSegment(x, y, x4, y4, x2, y2) < lineThreshold
     );
+  } else if (element.type === "line") {
+    const [x1, y1, x2, y2] = getLinePoints(element);
+    // The computation is done at the origin, we need to add a translation
+    x -= element.x;
+    y -= element.y;
+
+    return distanceBetweenPointAndSegment(x, y, x1, y1, x2, y2) < lineThreshold;
   } else if (element.type === "text") {
     const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
 

src/element/handlerRectangles.ts

@@ -76,7 +76,7 @@ export function handlerRectangles(
     8
   ]; // se
 
-  if (element.type === "arrow") {
+  if (element.type === "arrow" || element.type === "line") {
     return {
       nw: handlers.nw,
       se: handlers.se

src/element/index.ts

@@ -2,7 +2,8 @@ export { newElement, duplicateElement } from "./newElement";
 export {
   getElementAbsoluteCoords,
   getDiamondPoints,
-  getArrowPoints
+  getArrowPoints,
+  getLinePoints
 } from "./bounds";
 
 export { handlerRectangles } from "./handlerRectangles";