diff --git a/frontend/realtime/src/KonvaApp/Engine.ts b/frontend/realtime/src/KonvaApp/Engine.ts index 7be2a9ce05..687299334f 100644 --- a/frontend/realtime/src/KonvaApp/Engine.ts +++ b/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() { diff --git a/frontend/realtime/src/KonvaApp/Nodes/ShapeNode.ts b/frontend/realtime/src/KonvaApp/Nodes/ShapeNode.ts index 6e0b7520c5..0f0d7e73ea 100644 --- a/frontend/realtime/src/KonvaApp/Nodes/ShapeNode.ts +++ b/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, diff --git a/frontend/realtime/src/KonvaApp/NodesManagers/SelectionManager.ts b/frontend/realtime/src/KonvaApp/NodesManagers/SelectionManager.ts index 8a7858b66e..999044072b 100644 --- a/frontend/realtime/src/KonvaApp/NodesManagers/SelectionManager.ts +++ b/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(), diff --git a/frontend/realtime/src/components/features/ToolbarMain/ToolbarMain.tsx b/frontend/realtime/src/components/features/ToolbarMain/ToolbarMain.tsx index ef88aed47a..fd87e3d8d3 100644 --- a/frontend/realtime/src/components/features/ToolbarMain/ToolbarMain.tsx +++ b/frontend/realtime/src/components/features/ToolbarMain/ToolbarMain.tsx @@ -110,9 +110,9 @@ export const ToolbarMain = ({ Add Image - + {/* Add Video - + */}