diff --git a/frontend/realtime/src/KonvaApp/Nodes/BaseNode.ts b/frontend/realtime/src/KonvaApp/Nodes/BaseNode.ts index 3e2adfb806..e282557a7e 100644 --- a/frontend/realtime/src/KonvaApp/Nodes/BaseNode.ts +++ b/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) => { diff --git a/frontend/realtime/src/KonvaApp/RenderingPrimitives/RealTimeDrawEngine.ts b/frontend/realtime/src/KonvaApp/RenderingPrimitives/RealTimeDrawEngine.ts index 715c909528..bc14732cdb 100644 --- a/frontend/realtime/src/KonvaApp/RenderingPrimitives/RealTimeDrawEngine.ts +++ b/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}`, );