diff --git a/frontend/realtime/src/KonvaApp/EngineUtitlities/CommandManager.ts b/frontend/realtime/src/KonvaApp/EngineUtitlities/CommandManager.ts index c14510f0b4..012e1e23ea 100644 --- a/frontend/realtime/src/KonvaApp/EngineUtitlities/CommandManager.ts +++ b/frontend/realtime/src/KonvaApp/EngineUtitlities/CommandManager.ts @@ -49,7 +49,8 @@ export class CommandManager { this.undoStackManagerRef = engineRefs.undoStackManagerRef; } - createNode(node: VideoNode | ImageNode | TextNode | ShapeNode | PaintNode) { + createNode(node: MediaNode) { + console.log("CREATE?!?!?!?!") const command = new CreateCommand({ nodes: new Set([node]), mediaLayerRef: this.mediaLayerRef, @@ -63,6 +64,7 @@ export class CommandManager { // Set the kNode's manual id to same as kNode's internal _id // This helps identify the kNode in the Konva layer with find node.kNode.id(node.kNode._id.toString()); + this.renderEngineRef.render(); } deleteNodes() { const nodes = this.selectionManagerRef.getSelectedNodes(); @@ -75,6 +77,7 @@ export class CommandManager { renderEngineRef: this.renderEngineRef, }); this.undoStackManagerRef.executeCommand(command); + this.renderEngineRef.render(); } toggleLockNodes() { const nodes = this.selectionManagerRef.getSelectedNodes(); @@ -102,6 +105,7 @@ export class CommandManager { mediaLayerRef: this.mediaLayerRef, }); this.undoStackManagerRef.executeCommand(command); + this.renderEngineRef.render(); } moveNodesDown() { const command = new MoveLayerDown({ @@ -110,6 +114,7 @@ export class CommandManager { mediaLayerRef: this.mediaLayerRef, }); this.undoStackManagerRef.executeCommand(command); + this.renderEngineRef.render(); } translateNodes(props: { nodes: Set; @@ -121,6 +126,7 @@ export class CommandManager { layerRef: this.mediaLayerRef, }); this.undoStackManagerRef.pushCommand(command); + } transformNodes(props: { nodes: Set; diff --git a/frontend/realtime/src/KonvaApp/RenderingPrimitives/RealTimeDrawEngine.ts b/frontend/realtime/src/KonvaApp/RenderingPrimitives/RealTimeDrawEngine.ts index 6c23fd4039..dd9d1a7da2 100644 --- a/frontend/realtime/src/KonvaApp/RenderingPrimitives/RealTimeDrawEngine.ts +++ b/frontend/realtime/src/KonvaApp/RenderingPrimitives/RealTimeDrawEngine.ts @@ -541,6 +541,7 @@ export class RealTimeDrawEngine { console.log(this.imageNodes) node.kNode.on("dragend", this.handleNodeDragEnd); } + await this.render(); } public removeNodes(node: MediaNode) { @@ -550,7 +551,7 @@ export class RealTimeDrawEngine { node.kNode.off("dragend", this.handleNodeDragEnd); this.videoNodes.splice(index, 1); } - } else if (node instanceof ImageNode || node instanceof TextNode) { + } else if (node instanceof ImageNode || node instanceof TextNode || node instanceof ShapeNode || node instanceof PaintNode) { const index = this.imageNodes.indexOf(node); if (index > -1) { node.kNode.off("dragend", this.handleNodeDragEnd); diff --git a/frontend/realtime/src/KonvaApp/UndoRedo/CreateCommand.ts b/frontend/realtime/src/KonvaApp/UndoRedo/CreateCommand.ts index f99d3236cf..4e2befc5ae 100644 --- a/frontend/realtime/src/KonvaApp/UndoRedo/CreateCommand.ts +++ b/frontend/realtime/src/KonvaApp/UndoRedo/CreateCommand.ts @@ -53,6 +53,7 @@ export class CreateCommand implements ICommand { this.renderEngineRef.addNodes(node); }); this.mediaLayerRef.draw(); + } undo() { @@ -71,5 +72,7 @@ export class CreateCommand implements ICommand { this.nodeTransformerRef.clear(); toolbarNode.hide(); this.mediaLayerRef.draw(); + this.renderEngineRef.render(); + } } diff --git a/frontend/realtime/src/KonvaApp/types/NodeData.ts b/frontend/realtime/src/KonvaApp/types/NodeData.ts index fb220c43d1..a5e3f91b6b 100644 --- a/frontend/realtime/src/KonvaApp/types/NodeData.ts +++ b/frontend/realtime/src/KonvaApp/types/NodeData.ts @@ -3,10 +3,11 @@ import { NodeType, BaseNode, ImageNode, TextNode, VideoNode, ShapeNode } from ". import { TransformationData } from "./Transformation"; import { TextNodeData } from "./Text"; +import { PaintNode } from "../Nodes/PaintNode"; export type MediaNode = // | NetworkedNode - BaseNode | VideoNode | ImageNode | TextNode | ShapeNode; + BaseNode | VideoNode | ImageNode | TextNode | ShapeNode | PaintNode; export type ImageNodeData = { mediaFileUrl: string;