refactor: enhance event handling in DashboardCard, ZoneGroup, SelectionControls, and KeyPressListener components

app/src/components/Dashboard/DashboardCard.tsx

@@ -187,7 +187,7 @@ const DashboardCard: React.FC<DashBoardCardProps> = ({
                 <div className="preview-container">
                     {thumbnail ? <img src={thumbnail} alt="" /> : <img src={img} alt="" />}
                 </div>
-                <div className="project-details-container">
+                <div className="project-details-container" onClick={(e) => { e.stopPropagation() }}>
                     <div className="project-details">
                         {isRenaming ? (
                             <input

app/src/modules/builder/groups/zoneGroup.tsx

@@ -433,6 +433,7 @@ const ZoneGroup: React.FC = () => {
     };
 
     const onMouseMove = () => {
+      if (!groupsRef.current) return;
       if (isLeftMouseDown) {
         drag = true;
       }

app/src/modules/scene/controls/selectionControls/selectionControls.tsx

@@ -1,5 +1,5 @@
 import * as THREE from "three";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { SelectionBox } from "three/examples/jsm/interactive/SelectionBox";
 import { SelectionHelper } from "./selectionHelper";
 import { useFrame, useThree } from "@react-three/fiber";
@@ -212,7 +212,7 @@ const SelectionControls: React.FC = () => {
         }
     });
 
-    const selectAssets = () => {
+    const selectAssets = useCallback(() => {
         selectionBox.endPoint.set(pointer.x, pointer.y, 0);
         if (controls) (controls as any).enabled = true;
 
@@ -241,7 +241,7 @@ const SelectionControls: React.FC = () => {
         const selected = Array.from(updatedSelections);
 
         setSelectedAssets(selected);
-    };
+    }, [selectionBox, pointer, controls, selectedAssets, setSelectedAssets]);
 
     const clearSelection = () => {
         selectionGroup.current.children = [];
@@ -280,11 +280,18 @@ const SelectionControls: React.FC = () => {
                     userId
                 };
 
-                socket.emit("v1:model-asset:delete", data);
+                const response = socket.emit("v1:model-asset:delete", data);
 
                 useEventsStore.getState().removeEvent(selectedMesh.uuid);
                 useProductStore.getState().deleteEvent(selectedMesh.uuid);
 
+                if (response) {
+
+                    removeAsset(selectedMesh.uuid);
+
+                    echo.success("Model Removed!");
+                }
+
                 selectedMesh.traverse((child: THREE.Object3D) => {
                     if (child instanceof THREE.Mesh) {
                         if (child.geometry) child.geometry.dispose();

app/src/utils/shortcutkeys/handleShortcutKeys.ts

@@ -160,10 +160,6 @@ const KeyPressListener: React.FC = () => {
   };
 
   const handleKeyPress = (event: KeyboardEvent) => {
-    console.log(
-      "isTextInput(document.activeElement): ",
-      isTextInput(document.activeElement)
-    );
     if (isTextInput(document.activeElement)) return;
 
     const keyCombination = detectModifierKeys(event);
@@ -172,7 +168,6 @@ const KeyPressListener: React.FC = () => {
       return;
 
     if (keyCombination === "ESCAPE") {
-      console.log("esc");
       setWalkMode(false);
       setActiveTool("cursor");
       setActiveSubTool("cursor");
@@ -191,7 +186,6 @@ const KeyPressListener: React.FC = () => {
       keyCombination === "Ctrl+R"
     )
       return;
-    console.log("keyCombination: ", keyCombination);
 
     event.preventDefault();