Selector Square Bug fixed.

Added Loading to RealTimeDrawEngine.

frontend/realtime/src/KonvaApp/NodesManagers/SelectorSquare.ts

@@ -61,8 +61,12 @@ export class SelectorSquare {
     this.stageRef.off("mousedown touchstart");
     this.stageRef.off("mousemove touchmove");
     this.stageRef.off("mouseup touchend");
+    this.stageRef.off("mouseleave");
   }
   public enable() {
+    // Remove any existing event handlers first to prevent duplicates
+    this.disable();
+
     this.stageRef.on("mousedown touchstart", (e) => {
       const stagePointerPos = this.stageRef.getPointerPosition();
       if (
@@ -87,6 +91,7 @@ export class SelectorSquare {
         x2: stagePointerPos.x,
         y2: stagePointerPos.y,
       };
+      
       this.kSquare.size({
         width: 0,
         height: 0,
@@ -117,47 +122,55 @@ export class SelectorSquare {
         width: Math.abs(x2 - x1),
         height: Math.abs(y2 - y1),
       });
+    });
 
-      this.stageRef.on("mouseup touchend", (e) => {
-        // do nothing if we didn't start selection
-        this.selecting = false;
-        if (!this.kSquare.visible()) {
-          return;
-        }
-        e.evt.preventDefault();
-        // update visibility
-        this.kSquare.visible(false);
-        // Find all the Nodes and feed them into Selectmanager
-        var shapes = this.mediaLayerRef.getChildren();
-        var box = this.kSquare.getClientRect();
-        var foundKNodes = shapes.filter((shape) =>
-          Konva.Util.haveIntersection(box, shape.getClientRect()),
-        );
-        if (foundKNodes.length > 0) {
-          const kNodeIds = foundKNodes.map((kNode) => kNode._id);
-          const foundNodes = Array.from(
-            this.nodesManagerRef.getAllNodes(),
-          ).reduce((accNodes, currNode) => {
-            if (kNodeIds.includes(currNode.kNode._id) && !currNode.isLocked()) {
-              accNodes.push(currNode);
-            }
-            return accNodes;
-          }, [] as MediaNode[]);
-          console.log("selector square found", foundNodes);
-          this.selectionManagerRef.selectNodes(foundNodes);
-        }
-      });
+    this.stageRef.on("mouseup touchend", (e) => {
+      // do nothing if we didn't start selection
+      if (!this.selecting) {
+        return;
+      }
 
-      this.stageRef.on("mouseleave", (e) => {
-        this.selecting = false;
-        if (!this.kSquare.visible()) {
-          return;
-        }
-        e.evt.preventDefault();
-        // update visibility
-        this.kSquare.visible(false);
-        // and then do nothing, this is considered a cancel
-      });
+      this.selecting = false;
+      if (!this.kSquare.visible()) {
+        return;
+      }
+      e.evt.preventDefault();
+      // update visibility
+      this.kSquare.visible(false);
+      // Find all the Nodes and feed them into Selectmanager
+      var shapes = this.mediaLayerRef.getChildren();
+      var box = this.kSquare.getClientRect();
+      var foundKNodes = shapes.filter((shape) =>
+        Konva.Util.haveIntersection(box, shape.getClientRect()),
+      );
+      if (foundKNodes.length > 0) {
+        const kNodeIds = foundKNodes.map((kNode) => kNode._id);
+        const foundNodes = Array.from(
+          this.nodesManagerRef.getAllNodes(),
+        ).reduce((accNodes, currNode) => {
+          if (kNodeIds.includes(currNode.kNode._id) && !currNode.isLocked()) {
+            accNodes.push(currNode);
+          }
+          return accNodes;
+        }, [] as MediaNode[]);
+        console.log("selector square found", foundNodes);
+        this.selectionManagerRef.selectNodes(foundNodes);
+      }
+    });
+
+    this.stageRef.on("mouseleave", (e) => {
+      if (!this.selecting) {
+        return;
+      }
+
+      this.selecting = false;
+      if (!this.kSquare.visible()) {
+        return;
+      }
+      e.evt.preventDefault();
+      // update visibility
+      this.kSquare.visible(false);
+      // and then do nothing, this is considered a cancel
     });
   }
 }

frontend/realtime/src/KonvaApp/RenderingPrimitives/RealTimeDrawEngine.ts

@@ -4,6 +4,7 @@ import { Shape } from "konva/lib/Shape";
 import { Group } from "konva/lib/Group";
 
 import { invoke } from "@tauri-apps/api/core";
+import { listen } from '@tauri-apps/api/event';
 
 import { FileUtilities } from "../FileUtilities/FileUtilities";
 import { ImageNode, VideoNode, TextNode, ShapeNode, ShapeType } from "../Nodes";
@@ -25,18 +26,11 @@ import {
   loadingProgress,
 } from "~/signals/uiEvents/loadingIndicator";
 
-import { listen } from "@tauri-apps/api/event";
-
 interface ServerSettings {
   model_path: string;
   lora_path?: string;
 }
 
-type TauriMessage = {
-  message: string;
-  progress: number;
-  type: string;
-};
 
 interface GenerateImageParams {
   image: string;
@@ -207,12 +201,52 @@ export class RealTimeDrawEngine {
     //     isLoadingVisible.value = false;
     //   }
     // }, 1000);
+
+    this.listenToServerEvents();
   }
 
-  public listenToTauri() {
-    listen<TauriMessage>("progress", (event) => {
+  public async listenToServerEvents() {
+    listen("notification", (event) => {
       console.log(event);
+      // Handle model download events
+      const payload = event.payload as any;
+      
+      // Model download started
+      if (payload.model_download_started) {
+        const modelInfo = payload.model_download_started;
+        console.log(`Model download started: ${modelInfo.model_name} (${modelInfo.model_type})`);
+        
+        // Set up loading indicator
+        isLoadingVisible.value = true;
+        loadingProgress.value = 0;
+        
+        // Create fake progress updates
+        const downloadTimer = setInterval(() => {
+          loadingProgress.value += 2;
+          // Cap at 95% until we get the completed event
+          if (loadingProgress.value >= 95) {
+            loadingProgress.value = 95;
+            clearInterval(downloadTimer);
+          }
+        }, 500);
+      }
+      
+      // Model download completed
+      if (payload.model_download_complete) {
+        const modelInfo = payload.model_download_complete;
+        console.log(`Model download completed: ${modelInfo.model_name} (${modelInfo.model_type})`);
+        
+        // Complete the loading progress
+        loadingProgress.value = 100;
+        
+        // Hide loading indicator after a short delay
+        setTimeout(() => {
+          isLoadingVisible.value = false;
+        }, 1000);
+      }
+  
     });
+    
   }
 
   private isEnabled: boolean = false;
@@ -957,7 +991,7 @@ export class RealTimeDrawEngine {
         strength: this.currentStrength * 100,
       });
 
-      console.log(base64BitmapResponse);
+      //console.log(base64BitmapResponse);
       const decoded = await this.base64ToImageBitmap(
         base64BitmapResponse as string,
       );