Add free draw mode (#1570)

src/element/bounds.ts

@@ -52,7 +52,6 @@ const getMinMaxXYFromCurvePathOps = (
   transformXY?: (x: number, y: number) => [number, number],
 ): [number, number, number, number] => {
   let currentP: Point = [0, 0];
-
   const { minX, minY, maxX, maxY } = ops.reduce(
     (limits, { op, data }) => {
       // There are only four operation types:

src/element/collision.ts

@@ -26,7 +26,7 @@ function isElementDraggableFromInside(
   const dragFromInside =
     element.backgroundColor !== "transparent" ||
     appState.selectedElementIds[element.id];
-  if (element.type === "line") {
+  if (element.type === "line" || element.type === "draw") {
     return dragFromInside && isPathALoop(element.points);
   }
   return dragFromInside;

src/element/handlerRectangles.ts

@@ -187,7 +187,11 @@ export function handlerRectangles(
     pointerType,
   );
 
-  if (element.type === "arrow" || element.type === "line") {
+  if (
+    element.type === "arrow" ||
+    element.type === "line" ||
+    element.type === "draw"
+  ) {
     if (element.points.length === 2) {
       // only check the last point because starting point is always (0,0)
       const [, p1] = element.points;

src/element/sizeHelpers.ts

@@ -21,7 +21,11 @@ export function getPerfectElementSize(
   const absWidth = Math.abs(width);
   const absHeight = Math.abs(height);
 
-  if (elementType === "line" || elementType === "arrow") {
+  if (
+    elementType === "line" ||
+    elementType === "arrow" ||
+    elementType === "draw"
+  ) {
     const lockedAngle =
       Math.round(Math.atan(absHeight / absWidth) / SHIFT_LOCKING_ANGLE) *
       SHIFT_LOCKING_ANGLE;

src/element/typeChecks.ts

@@ -14,7 +14,10 @@ export function isLinearElement(
   element?: ExcalidrawElement | null,
 ): element is ExcalidrawLinearElement {
   return (
-    element != null && (element.type === "arrow" || element.type === "line")
+    element != null &&
+    (element.type === "arrow" ||
+      element.type === "line" ||
+      element.type === "draw")
   );
 }
 
@@ -25,6 +28,7 @@ export function isExcalidrawElement(element: any): boolean {
     element?.type === "rectangle" ||
     element?.type === "ellipse" ||
     element?.type === "arrow" ||
+    element?.type === "draw" ||
     element?.type === "line"
   );
 }

src/element/types.ts

@@ -50,7 +50,7 @@ export type ExcalidrawTextElement = _ExcalidrawElementBase &
 
 export type ExcalidrawLinearElement = _ExcalidrawElementBase &
   Readonly<{
-    type: "arrow" | "line";
+    type: "arrow" | "line" | "draw";
     points: Point[];
     lastCommittedPoint?: Point | null;
   }>;