From becbfa06f5ae2bafe59c6e97209cf708d927e3ca Mon Sep 17 00:00:00 2001
From: Tanish Manku <tanish2k09.dev@gmail.com>
Date: Fri, 7 Mar 2025 00:15:54 -0800
Subject: [PATCH] Fix Shape size jumping after recreation (on color change)

---
 frontend/realtime/src/KonvaApp/Engine.ts      |  4 ++--
 .../realtime/src/KonvaApp/Nodes/ShapeNode.ts  | 21 ++++++++++---------
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/frontend/realtime/src/KonvaApp/Engine.ts b/frontend/realtime/src/KonvaApp/Engine.ts
index d91b7edc02..ef2814b226 100644
--- a/frontend/realtime/src/KonvaApp/Engine.ts
+++ b/frontend/realtime/src/KonvaApp/Engine.ts
@@ -546,7 +546,7 @@ export class Engine {
           canvasPosition: this.realTimeDrawEngine.captureCanvas.position(),
           canvasSize: this.realTimeDrawEngine.captureCanvas.size(),
           shapeType: shapeNode.shapeType,
-          size: shapeNode.size,
+          size: shapeNode.kNode.size(),
           color: nodeColor.color,
           mediaLayerRef: this.mediaLayer,
           selectionManagerRef: this.selectionManager,
@@ -581,7 +581,7 @@ export class Engine {
       canvasPosition: this.realTimeDrawEngine.captureCanvas.position(),
       canvasSize: this.realTimeDrawEngine.captureCanvas.size(),
       shapeType: type,
-      size: size,
+      size: { width: size, height: size },
       color: color,
       mediaLayerRef: this.mediaLayer,
       selectionManagerRef: this.selectionManager,
diff --git a/frontend/realtime/src/KonvaApp/Nodes/ShapeNode.ts b/frontend/realtime/src/KonvaApp/Nodes/ShapeNode.ts
index c2a90a9f0a..3803cad7d9 100644
--- a/frontend/realtime/src/KonvaApp/Nodes/ShapeNode.ts
+++ b/frontend/realtime/src/KonvaApp/Nodes/ShapeNode.ts
@@ -15,7 +15,7 @@ interface ShapeNodeConstructor {
   canvasPosition: Position;
   canvasSize: Size;
   shapeType: ShapeType;
-  size: number;
+  size: Size;
   color?: string; // Hex color string
   transform?: TransformationData;
   mediaLayerRef: Konva.Layer;
@@ -29,7 +29,7 @@ export class ShapeNode extends NetworkedNode {
   }
 
   public shapeType: ShapeType;
-  public size: number;
+  public size: Size;
   public color: string;
 
   constructor({
@@ -46,6 +46,7 @@ export class ShapeNode extends NetworkedNode {
     // Create the actual shape inside the group
     const transform = NodeUtilities.getInitialTransform({
       existingTransform,
+      mediaFileSize: size,
       canvasPosition,
       canvasSize,
     });
@@ -55,10 +56,10 @@ export class ShapeNode extends NetworkedNode {
     switch (shapeType) {
       case ShapeType.CIRCLE:
         shape = new Konva.Ellipse({
-          x: 50,
-          y: 50,
-          radiusX: 50,
-          radiusY: 50,
+          x: size.width,
+          y: size.height,
+          radiusX: size.width,
+          radiusY: size.height,
           ...transform,
           fill: color,
           strokeScaleEnabled: false,
@@ -68,8 +69,8 @@ export class ShapeNode extends NetworkedNode {
 
       case ShapeType.SQUARE:
         shape = new Konva.Rect({
-          width: 100,
-          height: 100,
+          width: size.width,
+          height: size.height,
           ...transform,
           fill: color,
           strokeScaleEnabled: false,
@@ -81,8 +82,8 @@ export class ShapeNode extends NetworkedNode {
         shape = new Konva.Shape({
           x: 0,
           y: 0,
-          width: 25,
-          height: 50,
+          width: size.width,
+          height: size.height,
           ...transform,
           fill: color,
           strokeScaleEnabled: false,