Moving all nodes to the front as soon as they are created. Probably want that other PreviewLayer to stay at the front always.

frontend/realtime/src/KonvaApp/Engine.ts

@@ -464,12 +464,14 @@ export class Engine {
       }
     });
 
-    uiEvents.promptEvents.onPromptStrengthChanged((strength) => {
+    uiEvents.promptEvents.onPromptStrengthChanged(async (strength) => {
       this.realTimeDrawEngine.currentStrength = strength / 100.0;
+      this.realTimeDrawEngine.render();
     });
 
-    uiEvents.promptEvents.onPromptTextChanged((prompt) => {
+    uiEvents.promptEvents.onPromptTextChanged(async (prompt) => {
       this.realTimeDrawEngine.currentPrompt = prompt;
+      this.realTimeDrawEngine.render();
     });
 
     uiEvents.onAddShapeToEngine((shapeData) => {
@@ -650,7 +652,6 @@ export class Engine {
         await this.realTimeDrawEngine.render();
       },
     });
-    shapeNode.kNode.zIndex(1); // Replace desiredZIndex with a number
 
     this.commandManager.createNode(shapeNode);
 

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

@@ -106,7 +106,7 @@ export class ImageNode extends NetworkedNode {
       this.kNode.image(imageComponent);
       this.kNode.setSize(adjustedSize);
       this.kNode.setPosition(centerPosition);
-
+      this.kNode.moveToTop();
       this.kNode.fill(transparent);
       this.listenToBaseKNode();
       this.mediaLayerRef.draw();

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

@@ -6,16 +6,16 @@ import { NodeType } from "./constants";
 import { NetworkedNode } from "./NetworkedNode";
 
 interface PaintNodeConstructor {
-  canvasElement:HTMLCanvasElement;
+  canvasElement: HTMLCanvasElement;
   lineBounds: {
     width: number;
     height: number;
     x: number;
     y: number;
-    };
+  };
   mediaLayerRef: Konva.Layer;
   selectionManagerRef: SelectionManager;
-  
+
   loaded: () => Promise<void>;
 }
 
@@ -31,8 +31,7 @@ export class PaintNode extends NetworkedNode {
     selectionManagerRef,
     loaded,
   }: PaintNodeConstructor) {
-
-    const cl = canvasElement
+    const cl = canvasElement;
 
     // Convert circle to image
     const dataURL = cl.toDataURL();
@@ -40,31 +39,31 @@ export class PaintNode extends NetworkedNode {
     imageObj.src = dataURL;
 
     const paintShape = new Konva.Image({
-        x: lineBounds.x,
-        y: lineBounds.y,
-        width: lineBounds.width,
-        height: lineBounds.height,
-        image: imageObj,
-        listening: false, // Disable event listening to allow captureCanvas to receive events
-        draggable: true,
-        // stroke: '#000000',
-        // strokeWidth: 2,
-        // dash: [5, 5], // Creates dotted outline THIS IS FOR DEBUG
-        globalCompositeOperation: 'source-over',
-        fill: 'transparent' 
-      });
+      x: lineBounds.x,
+      y: lineBounds.y,
+      width: lineBounds.width,
+      height: lineBounds.height,
+      image: imageObj,
+      listening: false, // Disable event listening to allow captureCanvas to receive events
+      draggable: true,
+      // stroke: '#000000',
+      // strokeWidth: 2,
+      // dash: [5, 5], // Creates dotted outline THIS IS FOR DEBUG
+      globalCompositeOperation: "source-over",
+      fill: "transparent",
+    });
 
     imageObj.onload = () => {
-        this.mediaLayerRef.draw();
-        loaded();
+      this.mediaLayerRef.draw();
+      loaded();
     };
-  
+
     super({
       selectionManagerRef: selectionManagerRef,
       mediaLayerRef: mediaLayerRef,
       kNode: paintShape,
     });
-
+    this.kNode.moveToTop();
     this.mediaLayerRef.add(this.kNode);
     this.listenToBaseKNode();
     this.mediaLayerRef.draw();

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

@@ -117,7 +117,7 @@ export class ShapeNode extends NetworkedNode {
 
         squareImageObj.onload = () => {
           this.mediaLayerRef.draw();
-          loaded()
+          loaded();
         };
 
         // Clean up the temporary square
@@ -153,7 +153,7 @@ export class ShapeNode extends NetworkedNode {
 
         triangleImageObj.onload = () => {
           this.mediaLayerRef.draw();
-          loaded()
+          loaded();
         };
 
         // Clean up the temporary triangle
@@ -180,6 +180,8 @@ export class ShapeNode extends NetworkedNode {
       componentSize: canvasSize,
       maxSize: canvasSize,
     });
+    // bring to the front
+    this.kNode.moveToTop();
     this.kNode.setPosition(centerPosition);
     this.mediaLayerRef.add(this.kNode);
     this.listenToBaseKNode();

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

@@ -670,6 +670,7 @@ export class RealTimeDrawEngine {
       node instanceof ImageNode ||
       node instanceof TextNode ||
       node instanceof ShapeNode ||
+      node instanceof PaintNode ||
       node instanceof PreviewCopyNode
     ) {
       const index = this.imageNodes.indexOf(node);