Fix resizing for triangle shape

README.md

@@ -11,7 +11,7 @@ Project management is handled through [Issues](https://github.com/low-earth-orbi
 - Front-end: `React`, `Redux`, `Next.js`, `Konva.js`,`Material UI`
 - Programming language: `TypeScript`
 
-## Planning
+## Roadmap
 
 Although there isn’t a strict timeline, the project is divided into three phases:
 
@@ -23,14 +23,17 @@ Although there isn’t a strict timeline, the project is divided into three phas
 
 - Canvas objects
 
-  - Pen & eraser
+  - Draw
   - Text fields
   - Shapes
     - Rectangle
     - Oval
+    - Triangle
+    - Star
   - Adjustable shape borders (width & color)
 
 - Canvas
+  - Select object
   - History (undo & redo)
   - Delete an object or clear the entire canvas
   - Keyboard shortcuts for delete/undo/redo actions

components/Canvas.tsx

@@ -289,6 +289,7 @@ export default function Canvas() {
       case "triangle":
         newShape = {
           ...baseShape,
+          height: 43.3, // equilateral triangle
         };
         break;
       case "star":

components/shapes/TriangleShape.tsx

@@ -33,14 +33,14 @@ export default function TriangleShape({
 
   const adjustedStrokeWidth = getStrokeWidth(strokeWidth, width, height);
 
-  // Coordinates for a triangle (equilateral triangle)
+  // Coordinates for a triangle
   const points = [
-    0,
-    0, // Top point
     width! / 2,
-    height!, // Bottom-right point
-    -width! / 2,
-    height!, // Bottom-left point
+    adjustedStrokeWidth! / 2, // Top point
+    width! - adjustedStrokeWidth! / 2,
+    height! - adjustedStrokeWidth! / 2, // Bottom-right point
+    adjustedStrokeWidth! / 2,
+    height! - adjustedStrokeWidth! / 2, // Bottom-left point
   ];
 
   return (