diff --git a/README.md b/README.md index e60570f..349d05c 100644 --- a/README.md +++ b/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 diff --git a/components/Canvas.tsx b/components/Canvas.tsx index c5729fa..fbc60eb 100644 --- a/components/Canvas.tsx +++ b/components/Canvas.tsx @@ -289,6 +289,7 @@ export default function Canvas() { case "triangle": newShape = { ...baseShape, + height: 43.3, // equilateral triangle }; break; case "star": diff --git a/components/shapes/TriangleShape.tsx b/components/shapes/TriangleShape.tsx index 23e5857..9375fa4 100644 --- a/components/shapes/TriangleShape.tsx +++ b/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 (