diff --git a/frontend/realtime/src/KonvaApp/Engine.ts b/frontend/realtime/src/KonvaApp/Engine.ts index 9bb3cc5cc3..1d506e9200 100644 --- a/frontend/realtime/src/KonvaApp/Engine.ts +++ b/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(); diff --git a/frontend/realtime/src/KonvaApp/Nodes/PreviewCopy.ts b/frontend/realtime/src/KonvaApp/Nodes/PreviewCopy.ts index 7aaa0afbb2..7fa8da25cc 100644 --- a/frontend/realtime/src/KonvaApp/Nodes/PreviewCopy.ts +++ b/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(); diff --git a/frontend/realtime/src/KonvaApp/RenderingPrimitives/RealTimeDrawEngine.ts b/frontend/realtime/src/KonvaApp/RenderingPrimitives/RealTimeDrawEngine.ts index 3523bd0f09..6707fa9e7e 100644 --- a/frontend/realtime/src/KonvaApp/RenderingPrimitives/RealTimeDrawEngine.ts +++ b/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) {