Merge remote-tracking branch 'origin/simulation-agv' into realTimeVisulization

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

@@ -9,13 +9,14 @@ import { getCategoryAsset } from "../../../services/factoryBuilder/assest/assets
 import arch from "../../../assets/gltf-glb/arch.glb";
 import door from "../../../assets/gltf-glb/door.glb";
 import window from "../../../assets/gltf-glb/window.glb";
+import { fetchAssets } from "../../../services/marketplace/fetchAssets";
 import { useSelectedItem } from "../../../store/store";
 interface AssetProp {
   filename: string;
   thumbnail?: string;
   category: string;
   description?: string;
-  tags?: string;
+  tags: string;
   url?: String;
   uploadDate?: number;
   isArchieve?: boolean;
@@ -23,19 +24,58 @@ 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 [filteredAsset, setFilteredAsset] = useState<AssetProp[]>([]);
+  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); // Reset selected category when search changes
+    if (searchTerm.trim() === "" && !selectedCategory) {
-  };
+      setCategoryAssets([]);
+      return;
+    }
+    const filteredModels = filtereredAssets?.filter((model) => {
+      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 (selectedCategory) {
+        return (
+          model.category
+            .toLowerCase()
+            .includes(selectedCategory.toLowerCase()) &&
+          model.filename.toLowerCase().includes(searchTerm)
+        );
+      } else {
+        return model.filename.toLowerCase().includes(searchTerm);
+      }
+    });
 
-  const categoryList = useMemo(
+    setCategoryAssets(filteredModels);
-    () => [
+  };
+  useEffect(() => {
+    const filteredAssets = async () => {
+      try {
+        const filt = await fetchAssets();
+        setFiltereredAssets(filt);
+      } catch {}
+    };
+    filteredAssets();
+  }, [categoryAssets]);
+
+  useEffect(() => {
+    setCategoryList([
       {
         assetName: "Doors",
         assetImage: "",
@@ -58,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") {
@@ -70,60 +108,93 @@ const Assets: React.FC = () => {
           filename: "arch",
           category: "Feneration",
           url: arch,
+          tags: "arch",
         },
         {
           filename: "door",
           category: "Feneration",
           url: door,
+          thumbnail: feneration,
+          tags: "door",
         },
         {
           filename: "window",
           category: "Feneration",
           url: window,
+          tags: "window",
         },
       ];
-      setFilteredAsset(localAssets);
+      setCategoryAssets(localAssets);
+      setFiltereredAssets(localAssets);
     } else {
       try {
         const res = await getCategoryAsset(asset);
-        setFilteredAsset(res || []); // Ensure it's always an array
+        setCategoryAssets(res);
-      } catch (error) { }
+        setFiltereredAssets(res);
+      } catch (error) {}
     }
   };
-
-  useEffect(() => { }, [filteredAsset]);
   return (
     <div className="assets-container">
       <Search onChange={handleSearchChange} />
       {searchValue ? (
-        <div className="searched-content">
+        <div className="assets-result">
-          <p>Results for "{searchValue}"</p>
+          <div className="assets-wrapper">
+            <div className="searched-content">
+              <p>Results for {searchValue}</p>
+            </div>
+          </div>
+          <div className="assets-container">
+            {categoryAssets &&
+              categoryAssets?.map((asset: any, index: number) => (
+                <div key={index} className="assets">
+                  <img
+                    src={asset?.thumbnail}
+                    alt={asset.filename}
+                    className="asset-image"
+                  />
+
+                  <div className="asset-name">
+                    {asset.filename
+                      .split("_")
+                      .map(
+                        (word: any) =>
+                          word.charAt(0).toUpperCase() + word.slice(1)
+                      )
+                      .join(" ")}
+                  </div>
+                </div>
+              ))}
+          </div>
         </div>
       ) : selectedCategory ? (
         <div className="assets-wrapper">
-          {/* Back Button */}
           <div
             className="back-button"
             onClick={() => {
               setSelectedCategory(null);
-              setFilteredAsset([]);
+              setCategoryAssets([]);
             }}
           >
             ← Back
           </div>
           <h2>{selectedCategory}</h2>
           <div className="assets-container">
-            {filteredAsset &&
+            {categoryAssets &&
-              filteredAsset?.map((asset: any, index: number) => (
+              categoryAssets?.map((asset: any, index: number) => (
                 <div key={index} className="assets">
-                  {asset?.thumbnail && (
+                  <img
-                    <img
+                    src={asset?.thumbnail}
-                      src={asset?.thumbnail}
+                    alt={asset.filename}
-                      alt={asset.filename}
+                    className="asset-image"
-                      className="asset-image"
+                    onPointerDown={() =>
-                      onPointerDown={() => setSelectedItem({ name: asset.filename, id: asset.modelfileID })}
+                      setSelectedItem({
-                    />
+                        name: asset.filename,
-                  )}
+                        id: asset.modelfileID,
+                      })
+                    }
+                  />
+
                   <div className="asset-name">
                     {asset.filename
                       .split("_")

app/src/components/layout/sidebarRight/analysis/RenderAnalysisInputs.tsx

@@ -33,6 +33,7 @@ const RenderAnalysisInputs: React.FC<InputRendererProps> = ({
               label={preset.inputs.label}
               min={0}
               max={0}
+              value={5}
             />
           );
         }

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

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import InputRange from "../../../ui/inputs/InputRange";
 import InputToggle from "../../../ui/inputs/InputToggle";
 import { AI_Icon } from "../../../icons/ExportCommonIcons";
@@ -6,17 +6,20 @@ import LabeledButton from "../../../ui/inputs/LabledButton";
 import {
   useAzimuth,
   useElevation,
+  useLimitDistance,
   useRenderDistance,
   useResetCamera,
   useRoofVisibility,
   useSelectedWallItem,
   useShadows,
   useSocketStore,
+  useTileDistance,
   useToggleView,
   useWallVisibility,
 } from "../../../../store/store";
 import { setEnvironment } from "../../../../services/factoryBuilder/environment/setEnvironment";
 import * as CONSTANTS from "../../../../types/world/worldConstants";
+import { validateBBox } from "@turf/helpers";
 const GlobalProperties: React.FC = () => {
   const { toggleView, setToggleView } = useToggleView();
   const { selectedWallItem, setSelectedWallItem } = useSelectedWallItem();
@@ -27,26 +30,95 @@ 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] = useState(false);
+  const { limitDistance, setLimitDistance } = useLimitDistance();
-  const [distance, setDistance] = useState<number>(30);
+  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);
 
-  function optimizeScene() {
+  const optimizeScene = async (value: any) => {
+    const email = localStorage.getItem("email");
+    const organization = email?.split("@")[1]?.split(".")[0] || "defaultOrg";
+
+    const data = await setEnvironment(
+      organization,
+      localStorage.getItem("userId")!,
+      wallVisibility,
+      roofVisibility,
+      shadows,
+      30,
+      true
+    );
+    setRenderDistance(30);
     setLimitDistance(true);
-    setDistance(30);
+  };
-  }
+  const limitRenderDistance = async () => {
+    const email = localStorage.getItem("email");
+    const organization = email?.split("@")[1]?.split(".")[0] || "defaultOrg";
+
+    if (limitDistance) {
+      let data = await setEnvironment(
+        organization,
+        localStorage.getItem("userId")!,
+        wallVisibility,
+        roofVisibility,
+        shadows,
+        75,
+        !limitDistance
+      );
+      setRenderDistance(75);
+    } else {
+      let data = await setEnvironment(
+        organization,
+        localStorage.getItem("userId")!,
+        wallVisibility,
+        roofVisibility,
+        shadows,
+        renderDistance,
+        !limitDistance
+      );
+    }
+    setLimitDistance(!limitDistance);
+  };
 
   function updateDistance(value: number) {
     setDistance(value);
     setRenderDistance(value);
   }
-
   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";
+    setRenderDistance(value);
+    // setDistance(value);
+    const data = await setEnvironment(
+      organization,
+      localStorage.getItem("userId")!,
+      wallVisibility,
+      roofVisibility,
+      shadows,
+      value,
+      limitDistance
+    );
+  };
+
   // Function to toggle roof visibility
   const changeRoofVisibility = async () => {
     const email = localStorage.getItem("email");
@@ -58,7 +130,9 @@ const GlobalProperties: React.FC = () => {
       localStorage.getItem("userId")!,
       wallVisibility,
       !roofVisibility,
-      shadows
+      shadows,
+      renderDistance,
+      limitDistance
     );
     //
 
@@ -85,7 +159,9 @@ const GlobalProperties: React.FC = () => {
       localStorage.getItem("userId")!,
       !wallVisibility,
       roofVisibility,
-      shadows
+      shadows,
+      renderDistance,
+      limitDistance
     );
     //
 
@@ -112,7 +188,9 @@ const GlobalProperties: React.FC = () => {
       localStorage.getItem("userId")!,
       wallVisibility,
       roofVisibility,
-      !shadows
+      !shadows,
+      renderDistance,
+      limitDistance
     );
     //
 
@@ -184,18 +262,24 @@ const GlobalProperties: React.FC = () => {
         inputKey="4"
         label="Limit Render Distance"
         value={limitDistance}
-        onClick={() => {
+        // onClick={() => {
-          setLimitDistance(!limitDistance);
+        //   setLimitDistance(!limitDistance);
+        //   // setDistance(75);
+        //   // setRenderDistance(75);
+        // }}
+        onClick={async () => {
+          await limitRenderDistance(); // Call the function here
         }}
       />
       <InputRange
         label="Distance"
         disabled={!limitDistance}
-        value={distance}
+        value={renderDistance}
-        key={"5"}
         min={CONSTANTS.distanceConfig.minDistance}
         max={CONSTANTS.distanceConfig.maxDistance}
         onChange={(value: number) => updateDistance(value)}
+        onPointerUp={updatedDist}
+        key={"6"}
       />
 
       <div className="split"></div>
@@ -213,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>
   );

app/src/components/templates/CollaborationPopup.tsx

@@ -1,10 +1,11 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import RenderOverlay from "./Overlay";
 import { ArrowIcon, CloseIcon } from "../icons/ExportCommonIcons";
 import { AccessOption, User } from "../../types/users";
 import RegularDropDown from "../ui/inputs/RegularDropDown";
 import { access } from "fs";
 import MultiEmailInvite from "../ui/inputs/MultiEmailInvite";
+import { useActiveUsers } from "../../store/store";
 
 interface UserListTemplateProps {
   user: User;
@@ -57,6 +58,10 @@ interface CollaborateProps {
 const CollaborationPopup: React.FC<CollaborateProps> = ({
   setUserManagement,
 }) => {
+  const { activeUsers } = useActiveUsers();
+  useEffect(() => {
+    console.log("activeUsers: ", activeUsers);
+  }, [activeUsers]);
   const userName = localStorage.getItem("userName") || "Anonymous";
   const users = [
     {

app/src/components/ui/inputs/InputRange.tsx

@@ -8,6 +8,7 @@ interface InputToggleProps {
   onChange?: (value: number) => void; // Function to handle toggle clicks
   disabled?: boolean;
   value?: number;
+  onPointerUp?: (value: number) => void;
 }
 
 const InputRange: React.FC<InputToggleProps> = ({
@@ -17,9 +18,10 @@ const InputRange: React.FC<InputToggleProps> = ({
   min,
   max,
   disabled,
-  value = 5,
+  value,
+  onPointerUp,
 }) => {
-  const [rangeValue, setRangeValue] = useState<number>(value);
+  const [rangeValue, setRangeValue] = useState<number>(value ? value : 5);
 
   function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
     const newValue = parseInt(e.target.value); // Parse the value to an integer
@@ -31,8 +33,22 @@ const InputRange: React.FC<InputToggleProps> = ({
     }
   }
   useEffect(() => {
-    setRangeValue(value);
+    value && setRangeValue(value);
   }, [value]);
+  function handlePointerUp(e: React.PointerEvent<HTMLInputElement>) {
+    const newValue = parseInt(e.currentTarget.value, 10); // Parse value correctly
+
+    if (onPointerUp) {
+      onPointerUp(newValue); // Call the callback function if it exists
+    }
+  }
+  function handlekey(e: React.KeyboardEvent<HTMLInputElement>) {
+    const newValue = parseInt(e.currentTarget.value, 10); // Parse value correctly
+
+    if (onPointerUp) {
+      onPointerUp(newValue); // Call the callback function if it exists
+    }
+  }
 
   return (
     <div className="input-range-container">
@@ -52,6 +68,7 @@ const InputRange: React.FC<InputToggleProps> = ({
           onChange={handleChange}
           disabled={disabled}
           value={rangeValue}
+          onPointerUp={handlePointerUp}
         />
         <input
           type="number"
@@ -61,6 +78,12 @@ const InputRange: React.FC<InputToggleProps> = ({
           value={rangeValue}
           onChange={handleChange}
           disabled={disabled}
+          onKeyUp={(e) => {
+            if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+              console.log("e.key: ", e.key);
+              handlekey(e);
+            }
+          }}
         />
       </div>
     </div>

app/src/modules/market/FilterSearch.tsx

@@ -57,7 +57,6 @@ const FilterSearch: React.FC<ModelsProps> = ({
     const filteredModel = filteredModels?.filter((model) =>
       model.filename.toLowerCase().includes(val.toLowerCase())
     );
-
     setModels(filteredModel);
   };
 

app/src/modules/market/MarketPlace.tsx

@@ -25,7 +25,6 @@ const MarketPlace = () => {
     const filteredAssets = async () => {
       try {
         const filt = await getAssetImages("67d934ad0f42a1fdadb19aa6");
-        
         setModels(filt.items);
         setFilteredModels(filt.items);
       } catch {}

app/src/modules/scene/environment/ground.tsx

@@ -1,22 +1,52 @@
-import { useToggleView } from '../../../store/store';
+import { useTileDistance, useToggleView } from "../../../store/store";
-import * as CONSTANTS from '../../../types/world/worldConstants';
+import * as CONSTANTS from "../../../types/world/worldConstants";
 
 const Ground = ({ grid, plane }: any) => {
-    const { toggleView } = useToggleView();
+  const { toggleView } = useToggleView();
-    const savedTheme: string | null = localStorage.getItem('theme');
+  const savedTheme: string | null = localStorage.getItem("theme");
+  const { planeValue, gridValue } = useTileDistance();
 
-    return (
+  return (
-
+    <mesh name="Ground">
-        <mesh name="Ground">
+      <mesh
-            <mesh ref={grid} name="Grid" position={!toggleView ? CONSTANTS.gridConfig.position3D : CONSTANTS.gridConfig.position2D}>
+        ref={grid}
-                <gridHelper args={[CONSTANTS.gridConfig.size, CONSTANTS.gridConfig.divisions, CONSTANTS.gridConfig.primaryColor, CONSTANTS.gridConfig.secondaryColor]} />
+        name="Grid"
-            </mesh>
+        position={
-            <mesh ref={plane} rotation-x={CONSTANTS.planeConfig.rotation} position={!toggleView ? CONSTANTS.planeConfig.position3D : CONSTANTS.planeConfig.position2D} name="Plane" receiveShadow>
+          !toggleView
-                <planeGeometry args={[CONSTANTS.planeConfig.width, CONSTANTS.planeConfig.height]} />
+            ? CONSTANTS.gridConfig.position3D
-                <meshBasicMaterial color={CONSTANTS.planeConfig.color} />
+            : CONSTANTS.gridConfig.position2D
-            </mesh>
+        }
-        </mesh>
+      >
-    )
+        <gridHelper
-}
+          args={[
+            gridValue.size,
+            gridValue.divisions,
+            // CONSTANTS.gridConfig.size,
+            // CONSTANTS.gridConfig.divisions,
+            CONSTANTS.gridConfig.primaryColor,
+            CONSTANTS.gridConfig.secondaryColor,
+          ]}
+        />
+      </mesh>
+      <mesh
+        ref={plane}
+        rotation-x={CONSTANTS.planeConfig.rotation}
+        position={
+          !toggleView
+            ? CONSTANTS.planeConfig.position3D
+            : CONSTANTS.planeConfig.position2D
+        }
+        name="Plane"
+        receiveShadow
+      >
+        <planeGeometry
+          args={[planeValue.width, planeValue.height]}
+          //   args={[CONSTANTS.planeConfig.width, CONSTANTS.planeConfig.height]}
+        />
+        <meshBasicMaterial color={CONSTANTS.planeConfig.color} />
+      </mesh>
+    </mesh>
+  );
+};
 
 export default Ground;

app/src/modules/scene/environment/shadow.tsx

@@ -1,9 +1,22 @@
-import { useRef, useEffect} from 'react';
+import { useRef, useEffect } from "react";
-import { useThree } from '@react-three/fiber';
+import { useThree } from "@react-three/fiber";
-import * as THREE from 'three';
+import * as THREE from "three";
-import { useAzimuth, useElevation, useShadows, useSunPosition, useFloorItems, useWallItems } from '../../../store/store';
+import {
-import * as CONSTANTS from '../../../types/world/worldConstants';
+  useAzimuth,
-const shadowWorker = new Worker(new URL('../../../services/factoryBuilder/webWorkers/shadowWorker', import.meta.url));
+  useElevation,
+  useShadows,
+  useSunPosition,
+  useFloorItems,
+  useWallItems,
+  useTileDistance,
+} from "../../../store/store";
+import * as CONSTANTS from "../../../types/world/worldConstants";
+const shadowWorker = new Worker(
+  new URL(
+    "../../../services/factoryBuilder/webWorkers/shadowWorker",
+    import.meta.url
+  )
+);
 
 export default function Shadows() {
   const { shadows, setShadows } = useShadows();
@@ -15,6 +28,7 @@ export default function Shadows() {
   const { azimuth, setAzimuth } = useAzimuth();
   const { floorItems } = useFloorItems();
   const { wallItems } = useWallItems();
+  const { planeValue } = useTileDistance();
 
   useEffect(() => {
     gl.shadowMap.enabled = true;
@@ -48,9 +62,9 @@ export default function Shadows() {
   useEffect(() => {
     if (controls && shadows) {
       updateShadows();
-      (controls as any).addEventListener('update', updateShadows);
+      (controls as any).addEventListener("update", updateShadows);
       return () => {
-        (controls as any).removeEventListener('update', updateShadows);
+        (controls as any).removeEventListener("update", updateShadows);
       };
     }
   }, [controls, elevation, azimuth, shadows]);
@@ -75,10 +89,24 @@ export default function Shadows() {
         shadow-normalBias={CONSTANTS.shadowConfig.shadownormalBias}
       />
       <object3D ref={targetRef} />
-      <mesh position={CONSTANTS.shadowConfig.shadowMaterialPosition} rotation={CONSTANTS.shadowConfig.shadowMaterialRotation} receiveShadow>
+      <mesh
-        <planeGeometry args={[CONSTANTS.planeConfig.width, CONSTANTS.planeConfig.height]} />
+        position={CONSTANTS.shadowConfig.shadowMaterialPosition}
-        <shadowMaterial opacity={CONSTANTS.shadowConfig.shadowMaterialOpacity} transparent />
+        rotation={CONSTANTS.shadowConfig.shadowMaterialRotation}
+        receiveShadow
+      >
+        {/* <planeGeometry
+          args={[CONSTANTS.planeConfig.width, CONSTANTS.planeConfig.height]}
+        />
+        <shadowMaterial
+          opacity={CONSTANTS.shadowConfig.shadowMaterialOpacity}
+          transparent
+        /> */}
+        <planeGeometry args={[planeValue.width, planeValue.height]} />
+        <shadowMaterial
+          opacity={CONSTANTS.shadowConfig.shadowMaterialOpacity}
+          transparent
+        />
       </mesh>
     </>
   );
-}
+}

app/src/modules/scene/world/world.tsx

@@ -30,6 +30,8 @@ import {
   useWalls,
   useToolMode,
   useRefTextUpdate,
+  useRenderDistance,
+  useLimitDistance,
 } from "../../../store/store";
 
 //////////  3D Function Imports  //////////
@@ -117,6 +119,8 @@ export default function World() {
   const { roofVisibility, setRoofVisibility } = useRoofVisibility();
   const { wallVisibility, setWallVisibility } = useWallVisibility();
   const { shadows, setShadows } = useShadows();
+  const { renderDistance, setRenderDistance } = useRenderDistance();
+  const { limitDistance, setLimitDistance } = useLimitDistance();
   const { updateScene, setUpdateScene } = useUpdateScene();
   const { walls, setWalls } = useWalls();
   const { refTextupdate, setRefTextUpdate } = useRefTextUpdate();
@@ -200,6 +204,8 @@ export default function World() {
         setRoofVisibility(visibility.roofVisibility);
         setWallVisibility(visibility.wallVisibility);
         setShadows(visibility.shadowVisibility);
+        setRenderDistance(visibility.renderDistance);
+        setLimitDistance(visibility.limitDistance);
       }
     }
     fetchVisibility();

app/src/services/factoryBuilder/environment/findEnvironment.ts

@@ -1,32 +1,43 @@
-import { setEnvironment } from './setEnvironment';
+import { setEnvironment } from "./setEnvironment";
 
 let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
 
 export const findEnvironment = async (organization: string, userId: string) => {
-    try {
+  try {
-        const response = await fetch(`${url_Backend_dwinzo}/api/v1/findEnvironments/${organization}/${userId}`, {
+    const response = await fetch(
-            method: "GET",
+      `${url_Backend_dwinzo}/api/v1/findEnvironments/${organization}/${userId}`,
-            headers: {
+      {
-                "Content-Type": "application/json",
+        method: "GET",
-            },
+        headers: {
-        });
+          "Content-Type": "application/json",
+        },
+      }
+    );
 
-        if (!response.ok) {
+    if (!response.ok) {
-            throw new Error("Failed to get wall and roof visibility");
+      throw new Error("Failed to get wall and roof visibility");
-        }
-
-        const result = await response.json();
-        if (result === "user not found") {
-            const userpos = setEnvironment(organization, userId, false, false, false);
-            return userpos;
-        } else {
-            return result;
-        }
-    } catch (error) {
-        if (error instanceof Error) {
-            throw new Error(error.message);
-        } else {
-            throw new Error("An unknown error occurred");
-        }
     }
-};
+
+    const result = await response.json();
+    if (result === "user not found") {
+      const userpos = setEnvironment(
+        organization,
+        userId,
+        false,
+        false,
+        false,
+        0,
+        true
+      );
+      return userpos;
+    } else {
+      return result;
+    }
+  } catch (error) {
+    if (error instanceof Error) {
+      throw new Error(error.message);
+    } else {
+      throw new Error("An unknown error occurred");
+    }
+  }
+};

app/src/services/factoryBuilder/environment/setEnvironment.ts

@@ -1,26 +1,45 @@
 let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
 
-export const setEnvironment = async (organization: string, userId: string, wallVisibility: Boolean, roofVisibility: Boolean, shadowVisibility: Boolean) => {
+export const setEnvironment = async (
-    try {
+  organization: string,
-        const response = await fetch(`${url_Backend_dwinzo}/api/v1/setEvironments`, {
+  userId: string,
-            method: "POST",
+  wallVisibility: Boolean,
-            headers: {
+  roofVisibility: Boolean,
-                "Content-Type": "application/json",
+  shadowVisibility: Boolean,
-            },
+  renderDistance: number,
-            body: JSON.stringify({ organization, userId, wallVisibility, roofVisibility, shadowVisibility }),
+  limitDistance: boolean
-        });
+) => {
+  try {
+    const response = await fetch(
+      `${url_Backend_dwinzo}/api/v1/setEvironments`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          organization,
+          userId,
+          wallVisibility,
+          roofVisibility,
+          shadowVisibility,
+          renderDistance,
+          limitDistance,
+        }),
+      }
+    );
 
-        if (!response.ok) {
+    if (!response.ok) {
-            throw new Error("Failed to set wall and roof visibility");
+      throw new Error("Failed to set wall and roof visibility");
-        }
-
-        const result = await response.json();
-        return result;
-    } catch (error) {
-        if (error instanceof Error) {
-            throw new Error(error.message);
-        } else {
-            throw new Error("An unknown error occurred");
-        }
     }
-};
+
+    const result = await response.json();
+    return result;
+  } catch (error) {
+    if (error instanceof Error) {
+      throw new Error(error.message);
+    } else {
+      throw new Error("An unknown error occurred");
+    }
+  }
+};

app/src/services/marketplace/fetchAssets.ts

@@ -6,8 +6,8 @@ export const fetchAssets = async () => {
       throw new Error("Network response was not ok");
     }
     const result = await response.json();
-    const last10Assets = result.slice(-10);
+    // const last10Assets = result.slice(-10);
-    console.log('last10Assets: ', last10Assets);
+    // console.log('last10Assets: ', last10Assets);
     return result;
   } catch (error) {
     console.log("error: ", error);

app/src/store/store.ts

@@ -11,10 +11,13 @@ export const useSocketStore = create<any>((set: any, get: any) => ({
       return;
     }
 
-    const socket = io(`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}`, {
+    const socket = io(
-      reconnection: false,
+      `http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Builder`,
-      auth: { email, organization },
+      {
-    });
+        reconnection: false,
+        auth: { email, organization },
+      }
+    );
 
     set({ socket });
   },
@@ -205,7 +208,9 @@ export const useActiveLayer = create<any>((set: any) => ({
 
 interface RefTextUpdateState {
   refTextupdate: number;
-  setRefTextUpdate: (callback: (currentValue: number) => number | number) => void;
+  setRefTextUpdate: (
+    callback: (currentValue: number) => number | number
+  ) => void;
 }
 
 export const useRefTextUpdate = create<RefTextUpdateState>((set) => ({
@@ -213,7 +218,9 @@ export const useRefTextUpdate = create<RefTextUpdateState>((set) => ({
   setRefTextUpdate: (callback) =>
     set((state) => ({
       refTextupdate:
-        typeof callback === "function" ? callback(state.refTextupdate) : callback,
+        typeof callback === "function"
+          ? callback(state.refTextupdate)
+          : callback,
     })),
 }));
 
@@ -248,7 +255,7 @@ export const useAzimuth = create<any>((set: any) => ({
 }));
 
 export const useRenderDistance = create<any>((set: any) => ({
-  renderDistance: 50,
+  renderDistance: 40,
   setRenderDistance: (x: any) => set({ renderDistance: x }),
 }));
 
@@ -393,4 +400,22 @@ export const useWidgetSubOption = create<any>((set: any) => ({
   widgetSubOption: "2D",
   setWidgetSubOption: (x: any) => set({ widgetSubOption: x }),
 }));
+export const useLimitDistance = create<any>((set: any) => ({
+  limitDistance: true,
+  setLimitDistance: (x: any) => set({ limitDistance: x }),
+}));
 
+export const useTileDistance = create<any>((set: any) => ({
+  gridValue: { size: 300, divisions: 75 },
+  planeValue: { height: 300, width: 300 },
+
+  setGridValue: (value: any) =>
+    set((state: any) => ({
+      gridValue: { ...state.gridValue, ...value },
+    })),
+
+  setPlaneValue: (value: any) =>
+    set((state: any) => ({
+      planeValue: { ...state.planeValue, ...value },
+    })),
+}));

app/src/styles/components/input.scss

@@ -551,7 +551,7 @@ input {
     }
 
     .input-value {
-      width: 40px;
+      width: 42px;
       text-align: center;
       &::-webkit-inner-spin-button,
       &::-webkit-outer-spin-button {

app/src/styles/components/marketPlace/marketPlace.scss

@@ -113,7 +113,9 @@
           flex-direction: column;
           justify-content: center;
           gap: 6px;
-
+          .assets-container {
+            height: auto;
+          }
           .icon {
             position: absolute;
             top: 12px;

app/src/styles/layout/sidebar.scss

@@ -253,7 +253,7 @@
 
       .user-profile-container {
         display: flex;
-        .user-profile{
+        .user-profile {
           background: var(--accent-color);
           color: var(--primary-color);
         }
@@ -320,9 +320,7 @@
       .dataSideBar {
         .inputs-wrapper {
           .datas {
-
             .input-value {
-
               padding: 5px 10px;
             }
 
@@ -688,7 +686,7 @@
         font-weight: var(--font-weight-regular);
         padding: 8px 0;
       }
-      .input-toggle-container{
+      .input-toggle-container {
         padding: 0;
         margin-bottom: 6px;
       }
@@ -963,6 +961,7 @@
   padding: 0 6px;
 
   .assets-wrapper {
+    width: 100%;
     position: relative;
     margin: 8px 10px;
 
@@ -1010,9 +1009,11 @@
           top: 50%;
           right: -10px;
           transform: translate(0, -50%);
-          background: linear-gradient(144.19deg,
+          background: linear-gradient(
-              #f1e7cd 16.62%,
+            144.19deg,
-              #fffaef 85.81%);
+            #f1e7cd 16.62%,
+            #fffaef 85.81%
+          );
         }
 
         .category-image {
@@ -1075,4 +1076,52 @@
       cursor: pointer;
     }
   }
-}
+}
+
+.assets-container {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  height: 100%;
+  gap: 3px;
+  padding: 10px 0;
+
+  .assets {
+    width: 117px;
+    height: 95px;
+    border-radius: 3.59px;
+    background-color: var(--background-color-gray);
+    padding: 8px;
+    padding-top: 12px;
+    font-weight: $medium-weight;
+    position: relative;
+    overflow: hidden;
+
+    .asset-name {
+      position: relative;
+      z-index: 3;
+      font-size: var(--font-size-regular);
+    }
+
+    .asset-image {
+      height: 100%;
+      width: 100%;
+      position: absolute;
+      // top: 50%;
+      // right: 5px;
+      // transform: translate(0, -50%);
+      top: 0;
+      left: 0;
+      z-index: 2;
+    }
+  }
+}
+.assets-result {
+  width: 100%;
+  height: 100%;
+  margin: 8px 10px;
+  .assets-wrapper {
+    margin: 0;
+  }
+}

app/src/types/world/worldConstants.ts

@@ -59,39 +59,39 @@ export type ThreeDimension = {
 };
 
 export type GridConfig = {
-    size: number;
+  size: number;
-    divisions: number;
+  divisions: number;
-    primaryColor: string;
+  primaryColor: string;
-    secondaryColor: string;
+  secondaryColor: string;
-    position2D: [x: number, y: number, z: number];
+  position2D: [x: number, y: number, z: number];
-    position3D: [x: number, y: number, z: number];
+  position3D: [x: number, y: number, z: number];
-}
+};
 
 export type PlaneConfig = {
-    position2D: [x: number, y: number, z: number];
+  position2D: [x: number, y: number, z: number];
-    position3D: [x: number, y: number, z: number];
+  position3D: [x: number, y: number, z: number];
-    rotation: number;
+  rotation: number;
-    width: number;
+  width: number;
-    height: number;
+  height: number;
-    color: string;
+  color: string;
-}
+};
 
 export type ShadowConfig = {
-    shadowOffset: number,
+  shadowOffset: number;
-    shadowmapSizewidth: number,
+  shadowmapSizewidth: number;
-    shadowmapSizeheight: number,
+  shadowmapSizeheight: number;
-    shadowcamerafar: number,
+  shadowcamerafar: number;
-    shadowcameranear: number,
+  shadowcameranear: number;
-    shadowcameratop: number,
+  shadowcameratop: number;
-    shadowcamerabottom: number,
+  shadowcamerabottom: number;
-    shadowcameraleft: number,
+  shadowcameraleft: number;
-    shadowcameraright: number,
+  shadowcameraright: number;
-    shadowbias: number,
+  shadowbias: number;
-    shadownormalBias: number,
+  shadownormalBias: number;
-    shadowMaterialPosition: [x: number, y: number, z: number],
+  shadowMaterialPosition: [x: number, y: number, z: number];
-    shadowMaterialRotation: [x: number, y: number, z: number],
+  shadowMaterialRotation: [x: number, y: number, z: number];
-    shadowMaterialOpacity: number,
+  shadowMaterialOpacity: number;
-}
+};
 
 export type SkyConfig = {
   defaultTurbidity: number;
@@ -109,34 +109,34 @@ export type AssetConfig = {
 };
 
 export type PointConfig = {
-    defaultInnerColor: string;
+  defaultInnerColor: string;
-    defaultOuterColor: string;
+  defaultOuterColor: string;
-    deleteColor: string;
+  deleteColor: string;
-    boxScale: [number, number, number];
+  boxScale: [number, number, number];
-    wallOuterColor: string;
+  wallOuterColor: string;
-    floorOuterColor: string;
+  floorOuterColor: string;
-    aisleOuterColor: string;
+  aisleOuterColor: string;
-    zoneOuterColor: string;
+  zoneOuterColor: string;
-    snappingThreshold: number;
+  snappingThreshold: number;
-}
+};
 
 export type LineConfig = {
-    tubularSegments: number;
+  tubularSegments: number;
-    radius: number;
+  radius: number;
-    radialSegments: number;
+  radialSegments: number;
-    wallName: string;
+  wallName: string;
-    floorName: string;
+  floorName: string;
-    aisleName: string;
+  aisleName: string;
-    zoneName: string;
+  zoneName: string;
-    referenceName: string;
+  referenceName: string;
-    lineIntersectionPoints: number;
+  lineIntersectionPoints: number;
-    defaultColor: string;
+  defaultColor: string;
-    wallColor: string;
+  wallColor: string;
-    floorColor: string;
+  floorColor: string;
-    aisleColor: string;
+  aisleColor: string;
-    zoneColor: string;
+  zoneColor: string;
-    helperColor: string;
+  helperColor: string;
-}
+};
 
 export type WallConfig = {
   defaultColor: string;
@@ -145,10 +145,10 @@ export type WallConfig = {
 };
 
 export type FloorConfig = {
-    defaultColor: string;
+  defaultColor: string;
-    height: number;
+  height: number;
-    textureScale: number;
+  textureScale: number;
-}
+};
 
 export type RoofConfig = {
   defaultColor: string;
@@ -156,16 +156,16 @@ export type RoofConfig = {
 };
 
 export type AisleConfig = {
-    width: number;
+  width: number;
-    height: number;
+  height: number;
-    defaultColor: number;
+  defaultColor: number;
-}
+};
 
 export type ZoneConfig = {
-    defaultColor: string;
+  defaultColor: string;
-    height: number;
+  height: number;
-    color: string;
+  color: string;
-}
+};
 
 export type ColumnConfig = {
   defaultColor: string;
@@ -242,24 +242,24 @@ export const threeDimension: ThreeDimension = {
 export const camPositionUpdateInterval: number = 200; // Interval for updating the camera position
 
 export const gridConfig: GridConfig = {
-    size: 300, // Size of the grid
+  size: 300, // Size of the grid
-    divisions: 75, // Number of divisions in the grid
+  divisions: 75, // Number of divisions in the grid
-    primaryColor: savedTheme === "dark" ? "#131313" : "#d5d5d5", // Primary color of the grid
+  primaryColor: savedTheme === "dark" ? "#131313" : "#d5d5d5", // Primary color of the grid
-    secondaryColor: savedTheme === "dark" ? "#434343" : "#e3e3e3", // Secondary color of the grid
+  secondaryColor: savedTheme === "dark" ? "#434343" : "#e3e3e3", // Secondary color of the grid
 
-    position2D: [0, 0.1, 0], // Position of the grid in 2D view
+  position2D: [0, 0.1, 0], // Position of the grid in 2D view
-    position3D: [0, -0.5, 0], // Position of the grid in 3D view
+  position3D: [0, -0.5, 0], // Position of the grid in 3D view
-}
+};
 
 export const planeConfig: PlaneConfig = {
   position2D: [0, -0.5, 0], // Position of the plane
   position3D: [0, -0.65, 0], // Position of the plane
   rotation: -Math.PI / 2, // Rotation of the plane
 
-    width: 300, // Width of the plane
+  width: 300, // Width of the plane
-    height: 300, // Height of the plane
+  height: 300, // Height of the plane
-    color: savedTheme === "dark" ? "#323232" : "#f3f3f3" // Color of the plane
+  color: savedTheme === "dark" ? "#323232" : "#f3f3f3", // Color of the plane
-}
+};
 
 export const shadowConfig: ShadowConfig = {
   shadowOffset: 50, // Offset of the shadow
@@ -349,10 +349,10 @@ export const aisleConfig: AisleConfig = {
 };
 
 export const zoneConfig: ZoneConfig = {
-    defaultColor: "black", // Default color of the zones
+  defaultColor: "black", // Default color of the zones
-    height: 3,
+  height: 3,
-    color: "#8656DF" // Color of the zones
+  color: "#8656DF", // Color of the zones
-}
+};
 
 export const columnConfig: ColumnConfig = {
   defaultColor: "White", // Default color of the columns