Change Paint Color

frontend/realtime/src/KonvaApp/Engine.ts

@@ -76,7 +76,7 @@ export class Engine {
       console.log("Engine Created");
     }
     this.navigateRef = options.navigate;
-    this.appMode = AppModes.SELECT;
+    this.appMode = AppModes.PAINT;
 
     this.boardCanvasRef = boardCanvasRef;
     this.stage = new Konva.Stage({
@@ -178,8 +178,7 @@ export class Engine {
     // some of the managers has events
     // hence, lastly, setup these events
     this.setupEventSystem();
-    this.setAppMode(AppModes.SELECT);
-    
+    this.setAppMode(this.appMode);
   }
 
   private setAppMode(newAppMode: AppModes) {
@@ -187,13 +186,13 @@ export class Engine {
     switch (this.appMode) {
       case AppModes.PAINT: {
         console.log("APPMODE: PAINT");
-        this.selectorSquare.disable();
-        this.selectionManager.disable();
-        // uiAccess.toolbarMain.enable();
-        // uiAccess.toolbarMain.changeButtonState(ToolbarMainButtonNames.SELECT, {
-        //   active: true,
-        // });
-        // this.matteBox.disable();
+        //this.selectorSquare.disable(); // this breaks the paint?
+        this.selectionManager.disable(); // this prevents selection.
+        uiAccess.toolbarMain.enable();
+        uiAccess.toolbarMain.changeButtonState(ToolbarMainButtonNames.SELECT, {
+          active: false,  
+        });
+        this.matteBox.disable();
         return;
       }
       case AppModes.SELECT: {
@@ -378,14 +377,17 @@ export class Engine {
 
     uiEvents.toolbarMain.SELECT.onClick(() => {
       console.log("Toolbar Main >> Select");
+      this.setAppMode(AppModes.SELECT)
     });
 
     uiEvents.toolbarMain.PAINT.onClick(() => {
       console.log("Toolbar Main >> Paint");
+      this.setAppMode(AppModes.PAINT)
     });
 
     uiEvents.toolbarMain.ERASER.onClick(() => {
       console.log("Toolbar Main >> Eraser");
+      
     });
 
     uiEvents.toolbarMain.PREVIEW.onClick(async () => {
@@ -481,6 +483,9 @@ export class Engine {
       }
       this.changeNodeColor(nodeColor);
     });
+    uiEvents.toolbarMain.onPaintColorChanged((color)=> {
+      this.realTimeDrawEngine.paintColor = color;
+    });
   }
 
   disableAllButtons() {

frontend/realtime/src/KonvaApp/RenderingPrimitives/RealTimeDrawEngine.ts

@@ -47,6 +47,15 @@ export class RealTimeDrawEngine {
   public currentPrompt: string;
   public currentStrength: number;
 
+
+
+  // Paint Color
+  // paint Brush Size
+  // has to exit out of paint mode when shape or image are used.
+  public paintColor: string = "#000000";
+  public paintBrushSize: number = 5;
+  public isPaintMode: boolean = false;
+
   constructor({
     width,
     height,
@@ -85,7 +94,7 @@ export class RealTimeDrawEngine {
     this.drawingsLayer = new Konva.Layer({
       clearBeforeDraw: true, // Ensures transparent background
     });
-    this.mediaLayerRef.getStage()?.add(this.drawingsLayer);
+    this.mediaLayerRef.getStage()?.add(this.drawingsLayer);// to od pass in stage
 
     // Set background layer to red and media layer to green for visibility
 
@@ -128,7 +137,7 @@ export class RealTimeDrawEngine {
     this.previewCanvas.setZIndex(1);
     // Add mouse events for preview canvas copying
     //this.previewCopyListener();
-    //this.paintMode();
+    this.paintMode();
   }
 
   public paintMode() {
@@ -146,7 +155,7 @@ export class RealTimeDrawEngine {
 
       currentLine = new Konva.Line({
         points: [relativeX, relativeY],
-        stroke: "#df4b26",
+        stroke: this.paintColor,
         strokeWidth: 5,
         lineCap: "round",
         lineJoin: "round",
@@ -215,9 +224,10 @@ export class RealTimeDrawEngine {
         strokeWidth: 2,
         dash: [5, 5], // Creates dotted outline
         globalCompositeOperation: 'source-over',
-        fill: 'green' // Add green background
+        fill: 'transparent' // Add green background
       });
 
+
       // Add the image to the drawingsLayer
       this.drawingsLayer.add(drawingImage);