Fixed the issues with the PreviewCopy and added the node correctly to the layer tracking.

frontend/realtime/src/KonvaApp/Engine.ts

@@ -196,7 +196,6 @@ export class Engine {
         this.selectorSquare.disable(); // this breaks the paint if you use it in the wrong spot
         this.selectionManager.disable(); // this prevents selection.
         this.realTimeDrawEngine.enablePaintMode();
-        this.realTimeDrawEngine.disableDragging();
 
         uiAccess.toolbarMain.enable();
         uiAccess.toolbarMain.changeButtonState(ToolbarMainButtonNames.SELECT, {
@@ -208,7 +207,6 @@ export class Engine {
       case AppModes.SELECT: {
         console.log("APPMODE: SELECT");
         this.realTimeDrawEngine.disablePaintMode();
-        this.realTimeDrawEngine.enableDragging();
 
         this.selectorSquare.enable();
         this.selectionManager.enable();

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

@@ -30,7 +30,7 @@ export class PreviewCopyNode extends NetworkedNode {
       mediaLayerRef: mediaLayerRef,
       kNode: image,
     });
-
+    this.kNode.moveToTop();
     this.mediaLayerRef.add(this.kNode);
     this.listenToBaseKNode();
     this.mediaLayerRef.draw();

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

@@ -16,6 +16,7 @@ import { Image } from "@tauri-apps/api/image";
 import { PaintNode } from "../Nodes/PaintNode";
 
 import { WebSocketClient } from "../../PyServer/DrawServer";
+import { PreviewCopyNode } from "../Nodes/PreviewCopy";
 
 // https://www.aiseesoft.com/resource/phone-aspect-ratio-screen-resolution.html#:~:text=16%3A9%20Aspect%20Ratio
 
@@ -374,6 +375,7 @@ export class RealTimeDrawEngine {
 
   public enablePaintMode() {
     this.isEnabled = true;
+    this.disableDragging();
     if (!this.cleanupFunction) {
       this.paintMode();
     }
@@ -382,9 +384,12 @@ export class RealTimeDrawEngine {
   public enableDragging() {
     // Enable dragging for all nodes in media layer
     this.imageNodes?.forEach((node) => {
+      console.log("Image Nodes Enable");
+      console.log(node);
       node.kNode.draggable(true);
       node.kNode.listening(true);
     });
+
     this.mediaLayerRef.batchDraw();
   }
 
@@ -399,9 +404,9 @@ export class RealTimeDrawEngine {
 
   public disablePaintMode() {
     this.isEnabled = false;
+    this.enableDragging();
     if (this.cleanupFunction) {
       this.cleanupFunction();
-      this.cleanupFunction = null;
     }
   }
 
@@ -438,8 +443,8 @@ export class RealTimeDrawEngine {
             x: this.captureCanvas.x(),
             y: this.captureCanvas.y(),
           });
+
           e.target.off("dragend");
-          previewCopy.moveToTop();
         } else {
           // Start Generation Here
           previewCopy.destroy();
@@ -638,13 +643,12 @@ export class RealTimeDrawEngine {
       node instanceof ImageNode ||
       node instanceof TextNode ||
       node instanceof ShapeNode ||
-      node instanceof PaintNode
+      node instanceof PaintNode ||
+      node instanceof PreviewCopyNode
     ) {
       console.debug("Adding node:", node);
       this.imageNodes.push(node);
       console.log(this.imageNodes);
-
-      //node.kNode.on("dragend", this.handleNodeDragEnd);
     }
 
     // ensure the layer doesn't move if added while painting.
@@ -666,7 +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);
       if (index > -1) {