Fixed Modal to have the image enter the scene right away.

Added Shape Fixes resizes properly and drags.
Removing Progress Fill.

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();

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,

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;
   }

frontend/realtime/src/components/features/DialogAddImage/DialogAddImage.tsx

@@ -42,12 +42,6 @@ export const DialogAddImage = ({
     closeCallback();
   }
 
-  function handleEnter() {
-    if (currFile) {
-      onAddImage(currFile);
-    }
-    handleClose();
-  }
   return (
     <Dialog open={isOpen} onClose={closeCallback} className="relative z-50">
       <div className={dialogBackgroundStyles}>
@@ -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 = ({
             <Button onClick={handleClose} variant="secondary">
               Cancel
             </Button>
-            <Button onClick={handleEnter} disabled={currFile === null}>
-              Enter
-            </Button>
           </div>
         </DialogPanel>
       </div>

frontend/realtime/src/signals/uiEvents/addMedia.ts

@@ -6,6 +6,7 @@ const stagedImage = signal<File | null>(null);
 const addImageToEngine = (image: File) => {
   stagedImage.value = image;
 };
+
 const onGetStagedImage = (callback: (file: File) => void) => {
   effect(() => {
     if (stagedImage.value) {