diff --git a/frontend/realtime/src/KonvaApp/Engine.ts b/frontend/realtime/src/KonvaApp/Engine.ts index 1d506e9200..0e6c3f271b 100644 --- a/frontend/realtime/src/KonvaApp/Engine.ts +++ b/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); diff --git a/frontend/realtime/src/KonvaApp/Nodes/ImageNode.ts b/frontend/realtime/src/KonvaApp/Nodes/ImageNode.ts index a630be1207..fc57c971c2 100644 --- a/frontend/realtime/src/KonvaApp/Nodes/ImageNode.ts +++ b/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(); diff --git a/frontend/realtime/src/KonvaApp/Nodes/PaintNode.ts b/frontend/realtime/src/KonvaApp/Nodes/PaintNode.ts index 876967ffea..dd6e221b4b 100644 --- a/frontend/realtime/src/KonvaApp/Nodes/PaintNode.ts +++ b/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; } @@ -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(); diff --git a/frontend/realtime/src/KonvaApp/Nodes/ShapeNode.ts b/frontend/realtime/src/KonvaApp/Nodes/ShapeNode.ts index 6e772a5648..385b60a523 100644 --- a/frontend/realtime/src/KonvaApp/Nodes/ShapeNode.ts +++ b/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(); diff --git a/frontend/realtime/src/KonvaApp/RenderingPrimitives/RealTimeDrawEngine.ts b/frontend/realtime/src/KonvaApp/RenderingPrimitives/RealTimeDrawEngine.ts index 6707fa9e7e..83e2c31c4f 100644 --- a/frontend/realtime/src/KonvaApp/RenderingPrimitives/RealTimeDrawEngine.ts +++ b/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);