fix linting errors

package.json

@@ -13,7 +13,8 @@
     "build": "vite build",
     "serve": "vite preview",
     "format": "biome format --write .",
-    "check": "biome check ."
+    "check": "biome check .",
+    "fix": "biome check --apply ."
   },
   "dependencies": {
     "vanilla-picker": "2.12.2"

src/index.ts

@@ -38,7 +38,7 @@ import ResizeCanvas from "./utils/resizer";
   new Picker({
     parent: penColorElement,
     color: config.penColor,
-    onDone: function (color) {
+    onDone: (color) => {
       penColorElement.style.background = color.hex;
       canvas.penColor = color.hex;
     },

src/models/pencil.ts

@@ -24,10 +24,9 @@ export default class Pencil extends Shape {
     ctx.beginPath();
     ctx.moveTo(this.position.x, this.position.y);
 
-    this.points.forEach((point) => {
+    for (const point of this.points) {
       ctx.lineTo(point.x, point.y);
-    });
-
+    }
     ctx.lineWidth = this.lineWidth;
     ctx.strokeStyle = this.color;
     ctx.stroke();

src/models/point.ts

@@ -1,3 +1,6 @@
 export default class Point {
-  constructor(public x: number, public y: number) {}
+  constructor(
+    public x: number,
+    public y: number,
+  ) {}
 }

src/models/shape.ts

@@ -3,7 +3,11 @@ import Point from "./point";
 export default abstract class Shape {
   private _position: Point;
 
-  constructor(x: number, y: number, public color: string) {
+  constructor(
+    x: number,
+    y: number,
+    public color: string,
+  ) {
     this._position = new Point(x, y);
   }
 

src/utils/canvas.ts

@@ -100,77 +100,96 @@ export default class Canvas {
   // the saved array and remakes items
   // biome-ignore lint/suspicious/noExplicitAny: todo
   public drawLoaded(objects: any[]): void {
-    objects.forEach((object) => {
+    for (const object of objects) {
       // TODO: Clean up switch statement so I dont
       // have to use the shape variable for casting
-      let shape;
+      // let shape: Shape;
       let start: Point;
       let end: Point;
       const points: Point[] = object.points;
 
       switch (object.type) {
         case "eraser":
-        case "pencil":
+        case "pencil": {
           start = object.position;
-          shape = new Pencil(start.x, start.y, object.color, object.lineWidth);
-          points.forEach((point) => shape.addPoint(point.x, point.y));
+          const shape = new Pencil(
+            start.x,
+            start.y,
+            object.color,
+            object.lineWidth,
+          );
+          for (const point of points) {
+            shape.addPoint(point.x, point.y);
+          }
+          this.shapes.push(shape);
           break;
-        case "line":
+        }
+        case "line": {
           start = object.position;
           end = object.endPoint;
-          shape = new Line(
+          const shape = new Line(
             start.x,
             start.y,
             object.color,
             object.lineWidth,
             end.x,
             end.y,
           );
+          this.shapes.push(shape);
           break;
-        case "rectangle":
+        }
+        case "rectangle": {
           start = object.position;
-          shape = new Rectangle(
+          const shape = new Rectangle(
             start.x,
             start.y,
             object.color,
             object.size,
             object.width,
             object.height,
           );
+          this.shapes.push(shape);
           break;
-        case "circle":
+        }
+        case "circle": {
           start = object.position;
           end = object.endPoint;
-          shape = new Circle(
+          const shape = new Circle(
             start.x,
             start.y,
             object.color,
             object.lineWidth,
             end.x,
             end.y,
           );
+          this.shapes.push(shape);
           break;
-        case "text":
+        }
+        case "text": {
+          console.log("text case");
+
           start = object.position;
-          shape = new Text(
+          const shape = new Text(
             start.x,
             start.y,
             object.color,
             object.fontSize,
             object.text,
           );
+          this.shapes.push(shape);
           break;
+        }
       }
-
-      this.shapes.push(shape);
-    });
+    }
 
     this.redraw();
   }
 
   public redraw(): void {
     this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-    this.shapes.forEach((shape) => shape.draw(this.ctx));
+    for (const shape of this.shapes) {
+      shape.draw(this.ctx);
+    }
   }
 
   public clearCanvas(): void {
@@ -205,9 +224,12 @@ export default class Canvas {
     }
 
     this.currentInputBox = document.createElement("input");
-    this.currentInputBox.style.position = "fixed";
-    this.currentInputBox.style.top = `${y}px`;
-    this.currentInputBox.style.left = `${x}px`;
+    // Coordinates minus roughly the height on the input
+    // so it's placed directly under the cursor.
+    this.currentInputBox.style.top = `${y - 10}px`;
+    this.currentInputBox.style.left = `${x - 10}px`;
+    this.currentInputBox.className =
+      "top-[100px] fixed border border-black rounded-sm p-1";
 
     document.querySelector(".text-spawner")?.append(this.currentInputBox);
     this.currentInputBox.focus();