From 2e6823834f3f6af5035e79f0c3862987fe4e8dfd Mon Sep 17 00:00:00 2001
From: Tanish Manku <tanish2k09.dev@gmail.com>
Date: Tue, 15 Apr 2025 17:24:29 -0700
Subject: [PATCH] Create the shapes centered on the canvas (#515)

- Also match all the shape sizes
---
 .../editor2d/src/KonvaApp/Nodes/ShapeNode.ts  | 21 +++++++++++--------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/frontend/apps/editor2d/src/KonvaApp/Nodes/ShapeNode.ts b/frontend/apps/editor2d/src/KonvaApp/Nodes/ShapeNode.ts
index 3803cad7d9..4293a7d623 100644
--- a/frontend/apps/editor2d/src/KonvaApp/Nodes/ShapeNode.ts
+++ b/frontend/apps/editor2d/src/KonvaApp/Nodes/ShapeNode.ts
@@ -56,11 +56,8 @@ export class ShapeNode extends NetworkedNode {
     switch (shapeType) {
       case ShapeType.CIRCLE:
         shape = new Konva.Ellipse({
-          x: size.width,
-          y: size.height,
-          radiusX: size.width,
-          radiusY: size.height,
-          ...transform,
+          radiusX: size.width / 2,
+          radiusY: size.height / 2,
           fill: color,
           strokeScaleEnabled: false,
           draggable: true,
@@ -80,8 +77,6 @@ export class ShapeNode extends NetworkedNode {
 
       case ShapeType.TRIANGLE:
         shape = new Konva.Shape({
-          x: 0,
-          y: 0,
           width: size.width,
           height: size.height,
           ...transform,
@@ -113,12 +108,20 @@ export class ShapeNode extends NetworkedNode {
     this.size = size;
     this.color = color;
 
-    // Add shape to group
+    // Center the shape
     const centerPosition = NodeUtilities.positionNodeOnCanvasCenter({
       canvasOffset: canvasPosition,
-      componentSize: canvasSize,
+      componentSize: this.size,
       maxSize: canvasSize,
     });
+
+    // If the shape is an ellipse, the center is the origin so we need to offset it
+    if (shapeType === ShapeType.CIRCLE) {
+      centerPosition.x += size.width / 2;
+      centerPosition.y += size.height / 2;
+    }
+
+    // Add shape to group
     // bring to the front
     this.kNode.moveToTop();
     this.kNode.setPosition(centerPosition);