functionality for grid distance

app/src/components/layout/sidebarLeft/Assets.tsx

@@ -24,26 +24,42 @@ interface AssetProp {
   price?: number;
   CreatedBy?: String;
 }
+interface CategoryListProp {
+  assetImage?: string;
+  assetName?: string;
+  categoryImage: string;
+  category: string;
+}
 const Assets: React.FC = () => {
   const { setSelectedItem } = useSelectedItem();
   const [searchValue, setSearchValue] = useState<string>("");
   const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
   const [categoryAssets, setCategoryAssets] = useState<AssetProp[]>([]);
   const [filtereredAssets, setFiltereredAssets] = useState<AssetProp[]>([]);
+  const [categoryList, setCategoryList] = useState<CategoryListProp[]>([]);
 
   const handleSearchChange = (value: string) => {
+    const searchTerm = value.toLowerCase();
     setSearchValue(value);
-    setSelectedCategory(null);
-    const searchTerm = value.toLowerCase(); // Convert input to lowercase
+    if (searchTerm.trim() === "" && !selectedCategory) {
+      setCategoryAssets([]);
+      return;
+    }
     const filteredModels = filtereredAssets?.filter((model) => {
-      if (!model?.tags || !model?.filename) return false;
+      if (!model?.tags || !model?.filename || !model?.category) return false;
       if (searchTerm.startsWith(":") && searchTerm.length > 1) {
         const tagSearchTerm = searchTerm.slice(1);
         return model.tags.toLowerCase().includes(tagSearchTerm);
-      } else if (!searchTerm.startsWith(":")) {
+      } else if (selectedCategory) {
+        return (
+          model.category
+            .toLowerCase()
+            .includes(selectedCategory.toLowerCase()) &&
+          model.filename.toLowerCase().includes(searchTerm)
+        );
+      } else {
         return model.filename.toLowerCase().includes(searchTerm);
       }
-      return false;
     });
 
     setCategoryAssets(filteredModels);
@@ -56,10 +72,10 @@ const Assets: React.FC = () => {
       } catch {}
     };
     filteredAssets();
-  }, []);
+  }, [categoryAssets]);
 
-  const categoryList = useMemo(
-    () => [
+  useEffect(() => {
+    setCategoryList([
       {
         assetName: "Doors",
         assetImage: "",
@@ -82,10 +98,8 @@ const Assets: React.FC = () => {
       { category: "Workstation", categoryImage: workStation },
       { category: "Machines", categoryImage: machines },
       { category: "Workers", categoryImage: worker },
-    ],
-    []
-  );
-
+    ]);
+  }, []);
   const fetchCategoryAssets = async (asset: any) => {
     setSelectedCategory(asset);
     if (asset === "Feneration") {
@@ -127,7 +141,7 @@ const Assets: React.FC = () => {
         <div className="assets-result">
           <div className="assets-wrapper">
             <div className="searched-content">
-              <p>Results for "{searchValue}"</p>
+              <p>Results for {searchValue}</p>
             </div>
           </div>
           <div className="assets-container">
@@ -155,10 +169,12 @@ const Assets: React.FC = () => {
         </div>
       ) : selectedCategory ? (
         <div className="assets-wrapper">
-          {/* Back Button */}
           <div
             className="back-button"
-            onClick={() => setSelectedCategory(null)}
+            onClick={() => {
+              setSelectedCategory(null);
+              setCategoryAssets([]);
+            }}
           >
             ← Back
           </div>

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

@@ -13,6 +13,7 @@ import {
   useSelectedWallItem,
   useShadows,
   useSocketStore,
+  useTileDistance,
   useToggleView,
   useWallVisibility,
 } from "../../../../store/store";
@@ -29,14 +30,18 @@ const GlobalProperties: React.FC = () => {
   const { elevation, setElevation } = useElevation();
   const { azimuth, setAzimuth } = useAzimuth();
   const { renderDistance, setRenderDistance } = useRenderDistance();
-
+  const { setPlaneValue, setGridValue, planeValue, gridValue } =
+    useTileDistance();
+  useEffect(() => {
+    console.log(gridValue, planeValue, "values");
+  }, [gridValue, planeValue]);
   const { socket } = useSocketStore();
   const { limitDistance, setLimitDistance } = useLimitDistance();
   const [distance, setDistance] = useState<number>(40);
   useEffect(() => {}, [limitDistance]);
 
   const [limitGridDistance, setLimitGridDistance] = useState(false);
-  const [gridDistance, setGridDistance] = useState<number>(5);
+  const [gridDistance, setGridDistance] = useState<number>(3);
 
   const optimizeScene = async (value: any) => {
     const email = localStorage.getItem("email");
@@ -89,7 +94,15 @@ const GlobalProperties: React.FC = () => {
   }
   function updateGridDistance(value: number) {
     setGridDistance(value);
+    // setGridValue({ size: value * 100, divisions: (value * 100) / 4 });
+    // setPlaneValue({ height: value * 100, width: value * 100 });
   }
+  function updatedGrid(value: number) {
+    console.log(" (value * 100) / 4 : ", (value * 100) / 4);
+    setGridValue({ size: value * 100, divisions: (value * 100) / 4 });
+    setPlaneValue({ height: value * 100, width: value * 100 });
+  }
+
   const updatedDist = async (value: number) => {
     const email = localStorage.getItem("email");
     const organization = email?.split("@")[1]?.split(".")[0] || "defaultOrg";
@@ -266,6 +279,7 @@ const GlobalProperties: React.FC = () => {
         max={CONSTANTS.distanceConfig.maxDistance}
         onChange={(value: number) => updateDistance(value)}
         onPointerUp={updatedDist}
+        key={"6"}
       />
 
       <div className="split"></div>
@@ -283,7 +297,10 @@ const GlobalProperties: React.FC = () => {
         disabled={!limitGridDistance}
         value={gridDistance}
         key={"7"}
+        min={1}
+        max={5}
         onChange={(value: number) => updateGridDistance(value)}
+        onPointerUp={updatedGrid}
       />
     </div>
   );