Merge branch 'main' into feature/shapes-button

frontend/realtime/src/KonvaApp/Engine.ts

@@ -180,10 +180,8 @@ export class Engine {
     this.setupEventSystem();
     this.setAppMode(AppModes.SELECT);
 
-  
-    this.addShape(ShapeType.Circle,100);
-    this.addShape(ShapeType.Square,100);
-    this.addShape(ShapeType.Triangle,100);
+    
+ 
   }
 
 
@@ -400,6 +398,7 @@ export class Engine {
       this.addImage(image);
     });
 
+  
 
     uiEvents.onAddTextToEngine((textdata) => {
       this.addText(textdata);
@@ -440,10 +439,21 @@ export class Engine {
       this.realTimeDrawEngine.currentPrompt = prompt;
     });
 
-    uiEvents.onAddShapeToEngine((shapeData) => {
-      // TODO: Do something with shapes
-      console.log("Shape Data", shapeData);
-    })
+    uiEvents.onAddShapeToEngine((shapeData)=> {
+
+      switch (shapeData.shape) {
+        case "circle":
+          this.addShape(ShapeType.Circle, 100);
+          break;
+        case "square": 
+          this.addShape(ShapeType.Square, 100);
+          break;
+        case "triangle":
+          this.addShape(ShapeType.Triangle, 100);
+          break;
+      }
+    });
+
   }
 
   disableAllButtons() {

frontend/realtime/src/KonvaApp/Nodes/ShapeNode.ts

@@ -4,6 +4,7 @@ import { Position, Size, NodeData, TransformationData } from "../types";
 import { BaseNode } from "./BaseNode";
 import { NodeType } from "./constants";
 import { NodeUtilities } from "./NodeUtilities";
+import { NetworkedNode } from "./NetworkedNode";
 
 export enum ShapeType {
   CIRCLE = "circle",
@@ -22,8 +23,7 @@ interface ShapeNodeConstructor {
   selectionManagerRef: SelectionManager;
 }
 
-export class ShapeNode extends BaseNode {
-  public kNode: Konva.Group;
+export class ShapeNode extends NetworkedNode {
 
   constructor({
     canvasPosition,
@@ -41,7 +41,9 @@ export class ShapeNode extends BaseNode {
       canvasPosition,
       canvasSize,
     });
+
     let shape = null;
+    
     switch (shapeType) {
       case ShapeType.CIRCLE:
         const circleShape = new Konva.Circle({
@@ -157,9 +159,6 @@ export class ShapeNode extends BaseNode {
       kNode: shape,
     });
 
-    this.kNode = shape;
-    this.shapeType = shapeType;
-
     // Add shape to group
     const centerPosition = NodeUtilities.positionNodeOnCanvasCenter({
       canvasOffset: canvasPosition,

frontend/realtime/src/KonvaApp/NodesManagers/SelectionManager.ts

@@ -4,7 +4,7 @@ import { MediaNode, Position, Transformation } from "../types";
 import { uiAccess, uiEvents } from "~/signals";
 import { NetworkedNode } from "../Nodes/NetworkedNode";
 import { LoadingBarStatus } from "~/components/ui";
-import { ImageNode, TextNode, VideoNode } from "../Nodes";
+import { ImageNode, ShapeNode, TextNode, VideoNode } from "../Nodes";
 import {
   calculateContextualsPosition,
   getImageNodeButtonStates,
@@ -271,10 +271,11 @@ export class SelectionManager {
       return; // no node
     }
     if (this.selectedNodes.size === 1) {
-      if (node instanceof ImageNode) {
+      if (node instanceof ImageNode || node instanceof ShapeNode) {
         showOrUpdate({
           locked: node.isLocked(),
           buttonStates: getImageNodeButtonStates({ locked: node.isLocked() }),
+          color: node.getNodeData({ x: 0, y: 0 })?.textNodeData?.color ?? "#000000",
         });
       }
       if (node instanceof TextNode) {
@@ -282,7 +283,7 @@ export class SelectionManager {
           // TODO: Add ID to identify/mutate the color?
           locked: node.isLocked(),
           buttonStates: getTextNodeButtonStates({ locked: node.isLocked() }),
-          color: node.getNodeData({ x: 0, y: 0 }).textNodeData?.color ?? "#000000",
+        
         });
       }
       if (node instanceof VideoNode) {
@@ -316,7 +317,7 @@ export class SelectionManager {
       this.hideContextComponents();
       return; // no nodes
     }
-
+  
     // console.log("SelectionManager > updateContextComponents for node:", node);
     const coord = calculateContextualsPosition(
       this.nodeTransformerRef.getKonvaNode(),

frontend/realtime/src/components/features/ToolbarMain/ToolbarMain.tsx

@@ -110,9 +110,9 @@ export const ToolbarMain = ({
               <ToolbarButton icon={faImage} buttonProps={buttonProps.ADD_IMAGE}>
                 Add Image
               </ToolbarButton>
-              <ToolbarButton icon={faFilm} buttonProps={buttonProps.ADD_VIDEO}>
+              {/* <ToolbarButton icon={faFilm} buttonProps={buttonProps.ADD_VIDEO}>
                 Add Video
-              </ToolbarButton>
+              </ToolbarButton> */}
             </PopoverPanel>
           </Popover>