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
-
+ */}