diff --git a/frontend/realtime/src/KonvaApp/Nodes/BaseNode.ts b/frontend/realtime/src/KonvaApp/Nodes/BaseNode.ts index de47252474..1ca2cd8c83 100644 --- a/frontend/realtime/src/KonvaApp/Nodes/BaseNode.ts +++ b/frontend/realtime/src/KonvaApp/Nodes/BaseNode.ts @@ -29,7 +29,7 @@ export abstract class BaseNode { }: { selectionManagerRef: SelectionManager; mediaLayerRef: Konva.Layer; - kNode: Konva.Image | Konva.Group; + kNode: Konva.Image | Konva.Group | Konva.Shape; }) { // console.log("Node constructed"); // this.uuid = uuidv4(); diff --git a/frontend/realtime/src/KonvaApp/Nodes/ImageNode.ts b/frontend/realtime/src/KonvaApp/Nodes/ImageNode.ts index 9b2685ecf7..0db9c4bc14 100644 --- a/frontend/realtime/src/KonvaApp/Nodes/ImageNode.ts +++ b/frontend/realtime/src/KonvaApp/Nodes/ImageNode.ts @@ -83,8 +83,10 @@ export class ImageNode extends NetworkedNode { }) { const imageComponent = new Image(); imageComponent.crossOrigin = "anonymous"; + // this.setProgress({ progress: 100, status: UploadStatus.SUCCESS }); + imageComponent.onload = () => { - this.setProgress({ progress: 0, status: UploadStatus.FILE_STAGED }); + //this.setProgress({ progress: 0, status: UploadStatus.FILE_STAGED }); this.imageSize = { width: imageComponent.width, height: imageComponent.height, @@ -105,33 +107,33 @@ export class ImageNode extends NetworkedNode { this.kNode.fill(transparent); this.listenToBaseKNode(); this.mediaLayerRef.draw(); - this.uploadImage(imageFile); + //this.uploadImage(imageFile); }; imageComponent.onerror = () => { - this.setProgress({ progress: 0, status: UploadStatus.ERROR_ON_FILE }); + //this.setProgress({ progress: 0, status: UploadStatus.ERROR_ON_FILE }); }; imageComponent.src = URL.createObjectURL(imageFile); } private async loadImageFromUrl(mediaFileUrl: string) { - this.setProgress({ progress: 75, status: UploadStatus.LOADING }); + //this.setProgress({ progress: 75, status: UploadStatus.LOADING }); const newImage = new Image(); newImage.crossOrigin = "anonymous"; newImage.onerror = () => { - this.setProgress({ progress: 90, status: UploadStatus.ERROR_ON_LOAD }); + //this.setProgress({ progress: 90, status: UploadStatus.ERROR_ON_LOAD }); }; newImage.onload = () => { // console.log("network image", newImage); this.kNode.image(newImage); this.kNode.draw(); - this.setProgress({ progress: 100, status: UploadStatus.SUCCESS }); + //this.setProgress({ progress: 100, status: UploadStatus.SUCCESS }); }; newImage.src = mediaFileUrl; this.listenToBaseKNode(); } private async uploadImage(imageFile: File) { - this.setProgress({ progress: 10, status: UploadStatus.UPLOADING }); + //this.setProgress({ progress: 10, status: UploadStatus.UPLOADING }); const mediaUploadApi = new MediaUploadApi(); const uploadResponse = await mediaUploadApi.UploadImage({ @@ -149,7 +151,7 @@ export class ImageNode extends NetworkedNode { } private async retreiveImage(mediaFileToken: string) { - this.setProgress({ progress: 50, status: UploadStatus.RETREIVING }); + //this.setProgress({ progress: 50, status: UploadStatus.RETREIVING }); const mediaFileApi = new MediaFilesApi(); const mediaFileResponse = await mediaFileApi.GetMediaFileByToken({ mediaFileToken: mediaFileToken, diff --git a/frontend/realtime/src/KonvaApp/Nodes/ShapeNode.ts b/frontend/realtime/src/KonvaApp/Nodes/ShapeNode.ts index 1a6c12b282..df4e3446a7 100644 --- a/frontend/realtime/src/KonvaApp/Nodes/ShapeNode.ts +++ b/frontend/realtime/src/KonvaApp/Nodes/ShapeNode.ts @@ -6,11 +6,11 @@ import { NodeType } from "./constants"; import { NodeUtilities } from "./NodeUtilities"; export enum ShapeType { - CIRCLE = "circle", - SQUARE = "square", - TRIANGLE = "triangle" - } - + CIRCLE = "circle", + SQUARE = "square", + TRIANGLE = "triangle", +} + interface ShapeNodeConstructor { canvasPosition: Position; canvasSize: Size; @@ -37,68 +37,72 @@ export class ShapeNode extends BaseNode { mediaLayerRef, selectionManagerRef, }: ShapeNodeConstructor) { - + // Create the actual shape inside the group const transform = NodeUtilities.getInitialTransform({ existingTransform, canvasPosition, canvasSize, }); - - // Create group to satisfy BaseNode type requirements - const group = new Konva.Group({ - ...transform, - draggable: true, - }); - - super({ - selectionManagerRef: selectionManagerRef, - mediaLayerRef: mediaLayerRef, - kNode: group - }); - - this.kNode = group; - this.shapeType = shapeType; - - // Create the actual shape inside the group + let shape = null; switch (shapeType) { case ShapeType.CIRCLE: - this.shape = new Konva.Circle({ + shape = new Konva.Circle({ radius: 50, fill: color, - strokeScaleEnabled: false + ...transform, + strokeScaleEnabled: false, + draggable: true, }); break; case ShapeType.SQUARE: - this.shape = new Konva.Rect({ + shape = new Konva.Rect({ width: 100, height: 100, + ...transform, fill: color, - strokeScaleEnabled: false + strokeScaleEnabled: false, + draggable: true, }); break; case ShapeType.TRIANGLE: - this.shape = new Konva.RegularPolygon({ + shape = new Konva.RegularPolygon({ sides: 3, radius: 50, + ...transform, fill: color, - strokeScaleEnabled: false + strokeScaleEnabled: false, + draggable: true, }); break; default: - throw new Error('Invalid shape type'); + throw new Error("Invalid shape type"); } + // Create group to satisfy BaseNode type requirements + // const group = new Konva.Group({ + // ...transform, + // draggable: true, + // }); + + super({ + selectionManagerRef: selectionManagerRef, + mediaLayerRef: mediaLayerRef, + kNode: shape, + }); + + this.kNode = shape; + this.shapeType = shapeType; + // Add shape to group const centerPosition = NodeUtilities.positionNodeOnCanvasCenter({ - canvasOffset: canvasPosition, - componentSize: canvasSize, - maxSize: canvasSize, - }); + canvasOffset: canvasPosition, + componentSize: canvasSize, + maxSize: canvasSize, + }); this.kNode.setPosition(centerPosition); - this.kNode.add(this.shape); this.mediaLayerRef.add(this.kNode); this.listenToBaseKNode(); this.mediaLayerRef.draw(); @@ -119,7 +123,7 @@ export class ShapeNode extends BaseNode { y: this.kNode.scaleY(), }, zIndex: this.kNode.getZIndex(), - } + }, }; return data; } diff --git a/frontend/realtime/src/components/features/DialogAddImage/DialogAddImage.tsx b/frontend/realtime/src/components/features/DialogAddImage/DialogAddImage.tsx index cf03008333..2222c92286 100644 --- a/frontend/realtime/src/components/features/DialogAddImage/DialogAddImage.tsx +++ b/frontend/realtime/src/components/features/DialogAddImage/DialogAddImage.tsx @@ -42,12 +42,6 @@ export const DialogAddImage = ({ closeCallback(); } - function handleEnter() { - if (currFile) { - onAddImage(currFile); - } - handleClose(); - } return (
@@ -66,6 +60,10 @@ export const DialogAddImage = ({ file={currFile} setFile={(file: File | null) => { setAssetFile(file); + if (file) { + onAddImage(file); + handleClose(); + } }} /> {currFile && ( @@ -84,9 +82,6 @@ export const DialogAddImage = ({ -
diff --git a/frontend/realtime/src/signals/uiEvents/addMedia.ts b/frontend/realtime/src/signals/uiEvents/addMedia.ts index 1b1f29a8be..e2d09e2757 100644 --- a/frontend/realtime/src/signals/uiEvents/addMedia.ts +++ b/frontend/realtime/src/signals/uiEvents/addMedia.ts @@ -6,6 +6,7 @@ const stagedImage = signal(null); const addImageToEngine = (image: File) => { stagedImage.value = image; }; + const onGetStagedImage = (callback: (file: File) => void) => { effect(() => { if (stagedImage.value) {