app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx

@@ -57,7 +57,7 @@ const ZoneProperties: React.FC = () => {
     };
     // Call your API to update the zone
     let response = await zoneCameraUpdate(zonesdata, organization);
-    console.log("response: ", response);
+    // console.log("response: ", response);
     if (response.message === "updated successfully") {
       setZones((prevZones: any[]) =>
         prevZones.map((zone) =>

app/src/components/ui/list/DropDownList.tsx

@@ -98,6 +98,7 @@ const DropDownList: React.FC<DropDownListProps> = ({
         assets: assetsInZone,
       };
     });
+  
     setZoneDataList(updatedZoneList);
   }, [zones, floorItems]);
 

app/src/components/ui/list/List.tsx

@@ -19,6 +19,7 @@ import {
 } from "../../../store/builder/store";
 import { zoneCameraUpdate } from "../../../services/visulization/zone/zoneCameraUpdation";
 import { setFloorItemApi } from "../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi";
+import OuterClick from "../../../utils/outerClick";
 
 interface Asset {
   id: string;
@@ -43,13 +44,14 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
   const { activeModule } = useModuleStore();
   const { selectedZone, setSelectedZone } = useSelectedZoneStore();
   const { zoneAssetId, setZoneAssetId } = useZoneAssetId();
-  const { zones } = useZones();
+  const { zones, setZones } = useZones();
   const { setSubModule } = useSubModuleStore();
   const [expandedZones, setExpandedZones] = useState<Record<string, boolean>>(
     {}
   );
   const { setFloorItems } = useFloorItems();
 
+
   useEffect(() => {
     useSelectedZoneStore.getState().setSelectedZone({
       zoneName: "",
@@ -82,7 +84,6 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
       const organization = email?.split("@")[1]?.split(".")[0] ?? "";
 
       let response = await getZoneData(id, organization);
-
       setSelectedZone({
         zoneName: response?.zoneName,
         activeSides: response?.activeSides ?? [],
@@ -125,6 +126,14 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
     const response = await zoneCameraUpdate(zonesdata, organization);
     if (response.message === "updated successfully") {
       setSelectedZone((prev) => ({ ...prev, zoneName: newName }));
+
+      setZones((prevZones: any[]) =>
+        prevZones.map((zone) =>
+          zone.zoneId === selectedZone.zoneId
+            ? { ...zone, zoneName: newName }
+            : zone
+        )
+      );
     }
   }
 
@@ -138,7 +147,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
         zoneAssetId.id,
         newName
       );
-      console.log("response: ", response);
+      // console.log("response: ", response);
       setFloorItems((prevFloorItems: any[]) =>
         prevFloorItems.map((floorItems) =>
           floorItems.modelUuid === zoneAssetId.id
@@ -156,6 +165,69 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
     );
   };
 
+  useEffect(() => {
+    let drag = false;
+    let isLeftMouseDown = false;
+
+    const contextClassNames = ["list-wrapper", "zone-properties-container", "list-container"];
+
+    const isOutsideClick = (target: EventTarget | null) => {
+      if (!(target instanceof HTMLElement)) return true;
+      return !contextClassNames.some(className =>
+        target.closest(`.${className}`)
+      );
+    };
+
+    const onMouseDown = (evt: MouseEvent) => {
+      if (evt.button === 0) {
+        isLeftMouseDown = true;
+        drag = false;
+      }
+    };
+
+    const onMouseMove = () => {
+      if (isLeftMouseDown) {
+        drag = true;
+      }
+    };
+
+    const onMouseUp = (evt: MouseEvent) => {
+      if (evt.button === 0) {
+        isLeftMouseDown = false;
+        if (drag) return;
+
+        if (isOutsideClick(evt.target)) {
+          // Clear selected zone
+          setSelectedZone({
+            zoneId: '',
+            zoneName: '',
+            activeSides: [],
+            panelOrder: [],
+            lockedPanels: [],
+            widgets: [],
+            zoneViewPortTarget: [],
+            zoneViewPortPosition: []
+          });
+          setZoneAssetId({
+            id: '',
+            name: '',
+          });
+        }
+      }
+    };
+
+    document.addEventListener('mousedown', onMouseDown);
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+
+    return () => {
+      document.removeEventListener('mousedown', onMouseDown);
+      document.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener('mouseup', onMouseUp);
+    };
+  }, []);
+
+
   return (
     <>
       {items?.length > 0 ? (
@@ -169,7 +241,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
                   toggleZoneExpansion(item.id);
                 }}
               >
-                <div className={`list-item ${item.active ? "active" : ""}`}>
+                <div className={`list-item ${selectedZone.zoneId === item.id ? "active" : ""}`}>
                   <div className="zone-header">
                     <button className="value" id="zone-name">
                       <RenameInput
@@ -211,7 +283,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
                     {item.assets.map((asset) => (
                       <li
                         key={`asset-${asset.id}`}
-                        className="list-container asset-item"
+                        className={`list-container asset-item ${zoneAssetId?.id === asset.id ? "active" : ""}`}
                       >
                         <div className="list-item">
                           <button

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

@@ -534,7 +534,7 @@ const ZoneGroup: React.FC = () => {
           <group
             key={zone.zoneId}
             name={zone.zoneName}
-            visible={zone.zoneName === selectedZone.zoneName}
+            visible={zone.zoneId === selectedZone.zoneId}
           >
             {zone.points
               .slice(0, -1)

app/src/modules/visualization/widgets/3d/Dropped3dWidget.tsx

@@ -41,6 +41,7 @@ export default function Dropped3dWidgets() {
   const { raycaster, gl, scene, mouse, camera }: ThreeState = useThree();
   const { widgetSubOption } = useWidgetSubOption();
   const { selectedZone } = useSelectedZoneStore();
+  let lastClientY = useRef<number | null>(null);
   const { top, setTop } = useTopData();
   const { left, setLeft } = useLeftData();
   const { rightSelect, setRightSelect } = useRightSelected();
@@ -411,6 +412,7 @@ export default function Dropped3dWidgets() {
         }
       }
     };
+   
 
     const handleMouseMove = (event: MouseEvent) => {
       if (!rightClickSelected || !rightSelect) return;
@@ -465,27 +467,59 @@ export default function Dropped3dWidgets() {
         }
       }
 
+      // if (rightSelect === "Vertical Move") {
+      //   // console.log('rightSelect: ', rightSelect);
+
+      //   // console.log('floorPlanesVertical: ', floorPlanesVertical);
+      //   // console.log('planeIntersect.current: ', planeIntersect.current);
+      //   // const intersect = raycaster.ray.intersectPlane(
+      //   //   floorPlanesVertical,
+      //   //   planeIntersect.current
+      //   // );
+      //   // console.log('intersect: ', intersect);
+     
+      //   let intersect = event.clientY
+        
+      //   if (intersect && typeof intersectcontextmenu === "number") {
+      //     console.log('intersect: ', intersect);
+      //     const diff = intersect - intersectcontextmenu;
+      //     const unclampedY = selectedWidget.position[1] + diff;
+      //     const newY = Math.max(0, unclampedY); // Prevent going below floor (y=0)
+
+      //     setintersectcontextmenu(intersect);
+
+      //     const newPosition: [number, number, number] = [
+      //       selectedWidget.position[0],
+      //       newY,
+      //       selectedWidget.position[2],
+      //     ];
+      //     console.log('newPosition: ', newPosition);
+
+
+      //     updateWidgetPosition(selectedZoneId, rightClickSelected, newPosition);
+      //   }
+      // }
       if (rightSelect === "Vertical Move") {
-        const intersect = raycaster.ray.intersectPlane(
+        if (lastClientY.current === null) {
-          floorPlanesVertical,
+          lastClientY.current = event.clientY;
-          planeIntersect.current
+          return;
-        );
-
-        if (intersect && typeof intersectcontextmenu === "number") {
-          const diff = intersect.y - intersectcontextmenu;
-          const unclampedY = selectedWidget.position[1] + diff;
-          const newY = Math.max(0, unclampedY); // Prevent going below floor (y=0)
-
-          setintersectcontextmenu(intersect.y);
-
-          const newPosition: [number, number, number] = [
-            selectedWidget.position[0],
-            newY,
-            selectedWidget.position[2],
-          ];
-
-          updateWidgetPosition(selectedZoneId, rightClickSelected, newPosition);
         }
+    
+        const diff = lastClientY.current - event.clientY; // dragging up = increase Y
+        const scaleFactor = 0.05; // tune this based on your scene scale
+    
+        const unclampedY = selectedWidget.position[1] + diff * scaleFactor;
+        const newY = Math.max(0, unclampedY);
+    
+        lastClientY.current = event.clientY;
+    
+        const newPosition: [number, number, number] = [
+          selectedWidget.position[0],
+          newY,
+          selectedWidget.position[2],
+        ];
+    
+        updateWidgetPosition(selectedZoneId, rightClickSelected, newPosition);
       }
 
       if (rightSelect?.startsWith("Rotate")) {
@@ -668,9 +702,12 @@ export default function Dropped3dWidgets() {
 
     raycaster.setFromCamera(mouse, camera);
 
+    const up = new THREE.Vector3(0, 1, 0);
     const cameraDirection = new THREE.Vector3();
     camera.getWorldDirection(cameraDirection);
-    const verticalPlane = new THREE.Plane(cameraDirection);
+    const right = new THREE.Vector3().crossVectors(up, cameraDirection).normalize();
+    const verticalPlane = new THREE.Plane(right, 0);
+    // const verticalPlane = new THREE.Plane(cameraDirection);
     setFloorPlanesVertical(verticalPlane);
 
     const intersectPoint = raycaster.ray.intersectPlane(

app/src/modules/visualization/widgets/3d/cards/ProductionCapacity.tsx

@@ -195,35 +195,35 @@ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({
     }
   }, [chartMeasurements, chartDuration, widgetName]);
 
-  useEffect(() => {}, [rotation]);
+  useEffect(() => { }, [rotation]);
 
   return (
+
     <Html
+      // data
       position={position}
       scale={[0.5, 0.5, 0.5]}
       rotation={rotation}
+      // class
+      wrapperClass="pointer-none"
+      // other
       transform
-      sprite={true}
       zIndexRange={[1, 0]}
-      // style={{
+      prepend
-      //   transform: transformStyle.transform,
+      // sprite
-      //   transformStyle: "preserve-3d",
+      distanceFactor={20}
-      //   transition: "transform 0.1s ease-out",
+      // events
-      // }}
       onDragOver={(e) => {
         e.preventDefault();
         e.stopPropagation();
       }}
       onDrop={(e) => {
         e.preventDefault();
-        // e.stopPropagation();
       }}
-      wrapperClass="pointer-none"
     >
       <div
-        className={`productionCapacity-wrapper card ${
+        className={`productionCapacity-wrapper card ${selectedChartId?.id === id ? "activeChart" : ""
-          selectedChartId?.id === id ? "activeChart" : ""
+          }`}
-        }`}
         onClick={() => setSelectedChartId({ id: id, type: type })}
         onContextMenu={onContextMenu}
         style={{

app/src/modules/visualization/widgets/3d/cards/ReturnOfInvestment.tsx

@@ -242,12 +242,12 @@ const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({
       rotation={rotation}
       scale={[0.5, 0.5, 0.5]}
       transform
-      sprite={true}
+      zIndexRange={[1, 0]}
-      // style={{
+      prepend 
-      //   transform: transformStyle.transform,
+      distanceFactor={20}
-      //   transformStyle: "preserve-3d",
+      
-      //   transition: "transform 0.1s ease-out",
+
-      // }}
+  
     >
       <div
         className={`returnOfInvestment card ${

app/src/modules/visualization/widgets/3d/cards/StateWorking.tsx

@@ -121,7 +121,9 @@ const StateWorking: React.FC<StateWorkingProps> = ({
       scale={[0.5, 0.5, 0.5]}
       transform
       zIndexRange={[1, 0]}
-      sprite={true}
+      // sprite={true}
+      prepend 
+      distanceFactor={20}
       // style={{
       //   transform: transformStyle.transform,
       //   transformStyle: "preserve-3d",

app/src/modules/visualization/widgets/3d/cards/Throughput.tsx

@@ -223,7 +223,9 @@ const Throughput: React.FC<ThroughputProps> = ({
       scale={[0.5, 0.5, 0.5]}
       transform
       zIndexRange={[1, 0]}
-      sprite={true}
+      prepend 
+      distanceFactor={20}
+      // sprite={true}
     >
       <div
         className={`throughput-wrapper card ${selectedChartId?.id === id ? "activeChart" : ""

app/src/modules/visualization/widgets/floating/DroppedFloatingWidgets.tsx

@@ -478,7 +478,6 @@ const DroppedObjects: React.FC = () => {
 
   const widthMultiplier = parseFloat(containerWidth) * 0.13;
 
-  console.log('zone?.objects: ', zone?.objects);
   return (
     <div
       onPointerMove={handlePointerMove}

app/src/modules/visualization/zone/DisplayZone.tsx

@@ -176,7 +176,7 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
       const email = localStorage.getItem("email") || "";
       const organization = email?.split("@")[1]?.split(".")[0];
       let response = await getSelect2dZoneData(zoneId, organization);
-      console.log("response: ", response);
+
       let res = await getFloatingZoneData(zoneId, organization);
       console.log("res: ", res);
 

app/src/styles/components/lists.scss

@@ -85,3 +85,12 @@
     margin-left: 20px;
   }
 }
+
+.list-container.active {
+  .list-item {
+    background: var(--highlight-accent-color);
+    .input-value {
+      color: var(--highlight-text-color);
+    }
+  }
+}