Ok the canvas code appears to save the correct images.

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

@@ -3,9 +3,11 @@ import Konva from "konva";
 import { SelectionManager } from "../NodesManagers";
 import { highlightStrokeWidth, primaryOrange } from "./constants";
 import { NodeData, Position } from "../types";
+import { RealTimeDrawEngine } from "../RenderingPrimitives/RealTimeDrawEngine";
 
 export abstract class BaseNode {
   protected selectionManagerRef: SelectionManager;
+  protected realTimeDrawEngineRef: RealTimeDrawEngine;
   public kNode: Konva.Image | Konva.Group;
   protected mediaLayerRef: Konva.Layer;
 
@@ -25,16 +27,19 @@ export abstract class BaseNode {
     selectionManagerRef,
     mediaLayerRef,
     kNode,
+    realTimeDrawEngineRef,
   }: {
     selectionManagerRef: SelectionManager;
     mediaLayerRef: Konva.Layer;
     kNode: Konva.Image | Konva.Group;
+    realTimeDrawEngineRef: RealTimeDrawEngine;
   }) {
     // console.log("Node constructed");
     // this.uuid = uuidv4();
     this.mediaLayerRef = mediaLayerRef;
     this.selectionManagerRef = selectionManagerRef;
     this.kNode = kNode;
+    this.realTimeDrawEngineRef = realTimeDrawEngineRef;
   }
 
   protected delete() {
@@ -170,24 +175,26 @@ export abstract class BaseNode {
     this._areBaseEventsListening = false;
     this.kNode.removeEventListener("mousedown mouseup");
   }
-  public listenToBaseKNodeDrags() {
-    this.kNode.on("dragstart", () => {
-      // console.log("Drag start", this.kNode._id);
-      if (this.isProcessing) {
-        return;
-      }
-      this.selectionManagerRef.dragStart();
-    });
+  private handleDragStart = () => {
+    console.log("Drag start", this.kNode._id);
+    if (this.isProcessing) {
+      return;
+    }
+    this.selectionManagerRef.dragStart();
+  };
 
-    this.kNode.on("dragend", () => {
-      // console.log("Drag End", this.kNode._id);
-      this.selectionManagerRef.dragEnd();
-    });
+  private handleDragEnd = () => {
+    this.selectionManagerRef.dragEnd();
+  };
+
+  public listenToBaseKNodeDrags() {
+    this.kNode.on("dragstart", this.handleDragStart);
+    this.kNode.on("dragend", this.handleDragEnd);
   }
 
   public removeListenToBaseKNodeDrags() {
-    this.kNode.removeEventListener("dragstart");
-    this.kNode.removeEventListener("dragend");
+    this.kNode.off("dragstart", this.handleDragStart);
+    this.kNode.off("dragend", this.handleDragEnd);
   }
   public listenToBaseKNodeTransformations() {
     this.kNode.on("transformstart", (event) => {

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

@@ -152,17 +152,10 @@ export class RealTimeDrawEngine {
     this.previewCanvas.setZIndex(0);
 
     this.canUseSharedWorker = false;
-    this.setupSharedWorker();
+
     //this.debug();
   }
 
-  private onRenderingSystemMessageRecieved: (
-    response: SharedWorkerResponse<
-      DiffusionSharedWorkerResponseData,
-      DiffusionSharedWorkerProgressData
-    >,
-  ) => void;
-
   async updateCaptureCanvas(
     width: number | undefined,
     height: number | undefined,
@@ -257,23 +250,6 @@ export class RealTimeDrawEngine {
     this.port.postMessage(renderTask);
   }
 
-  setupSharedWorker() {
-    if (typeof SharedWorker !== "undefined") {
-      console.log("Shared Workers are supported in this browser.");
-      // Debug chrome://inspect/#workers
-      //  "src\\KonvaApp\\SharedWorkers\\Diffusion\\DiffusionSharedWorker.ts",
-      this.diffusionWorker = new DiffusionSharedWorkerClient(
-        this.onRenderingSystemMessageRecieved,
-      );
-
-      this.canUseSharedWorker = true;
-    } else {
-      console.log("Shared Workers are not supported in this browser.");
-      // Handle the lack of Shared Worker support (e.g., fallback to another solution)
-      this.canUseSharedWorker = false;
-    }
-  }
-
   public placeDebugRect(
     x: number,
     y: number,
@@ -312,27 +288,18 @@ export class RealTimeDrawEngine {
     return canvas;
   }
 
-  private findLongestVideoLength(): number {
-    let maxLength = 0;
-    // could simplify this logic to ensure that imageNodes has number of frames.
-    if (this.imageNodes.length > 0 && this.videoNodes.length === 0) {
-      return this.fps * 3; // three seconds determine whether to change this
-    }
-
-    this.videoNodes.forEach((node) => {
-      const videoLength = node.getNumberFrames();
-      if (videoLength > maxLength) {
-        maxLength = videoLength;
-      }
-    });
-    return maxLength;
-  }
-
+  private handleNodeDragEnd = () => {
+    // Clean up any existing state
+    console.log("Node drag ended");
+    this.render();
+  };
   public addNodes(node: MediaNode) {
     if (node instanceof VideoNode) {
       this.videoNodes.push(node);
+      node.kNode.on("dragend", this.handleNodeDragEnd);
     } else if (node instanceof ImageNode || node instanceof TextNode) {
       this.imageNodes.push(node);
+      node.kNode.on("dragend", this.handleNodeDragEnd);
     }
   }
 
@@ -340,11 +307,13 @@ export class RealTimeDrawEngine {
     if (node instanceof VideoNode) {
       const index = this.videoNodes.indexOf(node);
       if (index > -1) {
+        node.kNode.off("dragend", this.handleNodeDragEnd);
         this.videoNodes.splice(index, 1);
       }
     } else if (node instanceof ImageNode || node instanceof TextNode) {
       const index = this.imageNodes.indexOf(node);
       if (index > -1) {
+        node.kNode.off("dragend", this.handleNodeDragEnd);
         this.imageNodes.splice(index, 1);
       }
     }
@@ -431,16 +400,11 @@ export class RealTimeDrawEngine {
       throw error;
     }
   }
-  /** 
-  find longest video
-  then seek through each node 1 step.
-  stop ignore stepping if the duration is less.
-  **/
-  private async render() {
+
+  public async render() {
     // only pick nodes that intersect with the canvas on screen bounds to freeze.
 
     this.mediaLayerRef.draw();
-
     console.log(
       `context: x:${this.positionX} y:${this.positionY} ${this.width} x ${this.height}`,
     );