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

2025-03-31 14:29:04 +05:30
parent 6e4c8282c5 cacb23ea5a
commit b71fdbddbb
15 changed files with 581 additions and 519 deletions
--- a/app/src/components/layout/sidebarLeft/Assets.tsx
+++ b/app/src/components/layout/sidebarLeft/Assets.tsx
@@ -1,105 +1,95 @@
-import React, { useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import Search from "../../ui/inputs/Search";
 import vehicle from "../../../assets/image/vehicles.png";
 import workStation from "../../../assets/image/workStation.png";
 import machines from "../../../assets/image/machines.png";
 import feneration from "../../../assets/image/feneration.png";
 import worker from "../../../assets/image/worker.png";
+import { getCategoryAsset } from "../../../services/factoryBuilder/assest/assets/getCategoryAsset";
+import arch from "../../../assets/gltf-glb/arch.glb";
+import door from "../../../assets/gltf-glb/door.glb";
+import window from "../../../assets/gltf-glb/window.glb";
+interface AssetProp {
+  filename: string;
+  thumbnail?: string;
+  category: string;
+  description?: string;
+  tags?: string;
+  url?: String;
+  uploadDate?: number;
+  isArchieve?: boolean;
+  animated?: boolean;
+  price?: number;
+  CreatedBy?: String;
+}
 const Assets: React.FC = () => {
  const [searchValue, setSearchValue] = useState<string>("");
  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
+  const [filteredAsset, setFilteredAsset] = useState<AssetProp[]>([]);

  const handleSearchChange = (value: string) => {
    setSearchValue(value);
    setSelectedCategory(null); // Reset selected category when search changes
  };

-  const categoryList = [
-    {
-      assetName: "Doors",
-      assetImage: "",
-      category: "Feneration",
-      categoryImage: feneration,
-    },
-    {
-      assetName: "Windows",
-      assetImage: "",
-      category: "Feneration",
-      categoryImage: feneration,
-    },
-    {
-      assetName: "Pillars",
-      assetImage: "",
-      category: "Feneration",
-      categoryImage: feneration,
-    },
-    {
-      assetName: "Forklift",
-      assetImage: "",
-      category: "Vehicles",
-      categoryImage: vehicle,
-    },
-    {
-      assetName: "AGV",
-      assetImage: "",
-      category: "Vehicles",
-      categoryImage: vehicle,
-    },
-    {
-      assetName: "Pallet",
-      assetImage: "",
-      category: "Workstation",
-      categoryImage: workStation,
-    },
-    {
-      assetName: "Controller",
-      assetImage: "",
-      category: "Workstation",
-      categoryImage: workStation,
-    },
-    {
-      assetName: "Conveyor",
-      assetImage: "",
-      category: "Workstation",
-      categoryImage: workStation,
-    },
-    {
-      assetName: "VMC",
-      assetImage: "",
-      category: "Machines",
-      categoryImage: machines,
-    },
-    {
-      assetName: "CMC",
-      assetImage: "",
-      category: "Machines",
-      categoryImage: machines,
-    },
-    {
-      assetName: "Male Worker",
-      assetImage: "",
-      category: "Workers",
-      categoryImage: worker,
-    },
-    {
-      assetName: "Female Worker",
-      assetImage: "",
-      category: "Workers",
-      categoryImage: worker,
-    },
-  ];
-
-  // Get unique categories
-  const uniqueCategories = Array.from(
-    new Set(categoryList.map((asset) => asset.category))
+  const categoryList = useMemo(
+    () => [
+      {
+        assetName: "Doors",
+        assetImage: "",
+        category: "Feneration",
+        categoryImage: feneration,
+      },
+      {
+        assetName: "Windows",
+        assetImage: "",
+        category: "Feneration",
+        categoryImage: feneration,
+      },
+      {
+        assetName: "Pillars",
+        assetImage: "",
+        category: "Feneration",
+        categoryImage: feneration,
+      },
+      { category: "Vehicles", categoryImage: vehicle },
+      { category: "Workstation", categoryImage: workStation },
+      { category: "Machines", categoryImage: machines },
+      { category: "Workers", categoryImage: worker },
+    ],
+    []
  );

-  // Filter assets based on the selected category
-  const filteredAssets =
-    selectedCategory !== null
-      ? categoryList.filter((asset) => asset.category === selectedCategory)
-      : [];
+  const fetchCategoryAssets = async (asset: any) => {
+    setSelectedCategory(asset);
+    if (asset === "Feneration") {
+      const localAssets: AssetProp[] = [
+        {
+          filename: "arch",
+          category: "Feneration",
+          url: arch,
+        },
+        {
+          filename: "door",
+          category: "Feneration",
+          url: door,
+        },
+        {
+          filename: "window",
+          category: "Feneration",
+          url: window,
+        },
+      ];
+      setFilteredAsset(localAssets);
+    } else {
+      try {
+        const res = await getCategoryAsset(asset);
+        setFilteredAsset(res || []); // Ensure it's always an array
+      } catch (error) {}
+    }
+  };

+  useEffect(() => {}, [filteredAsset]);
  return (
    <div className="assets-container">
      <Search onChange={handleSearchChange} />
@@ -118,23 +108,36 @@ const Assets: React.FC = () => {
          </div>
          <h2>{selectedCategory}</h2>
          <div className="assets-container">
-            {filteredAssets.map((asset, index) => (
-              <div key={index} className="assets">
-                <img
-                  src={asset.assetImage}
-                  alt={asset.assetName}
-                  className="asset-image"
-                />
-                <div className="asset-name">{asset.assetName}</div>
-              </div>
-            ))}
+            {filteredAsset &&
+              filteredAsset?.map((asset: any, index: number) => (
+                <div key={index} className="assets">
+                  {asset?.thumbnail && (
+                    <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>
      ) : (
        <div className="assets-wrapper">
          <h2>Categories</h2>
          <div className="categories-container">
-            {uniqueCategories.map((category, index) => {
+            {Array.from(
+              new Set(categoryList.map((asset) => asset.category))
+            ).map((category, index) => {
              const categoryInfo = categoryList.find(
                (asset) => asset.category === category
              );
@@ -142,7 +145,7 @@ const Assets: React.FC = () => {
                <div
                  key={index}
                  className="category"
-                  onClick={() => setSelectedCategory(category)}
+                  onClick={() => fetchCategoryAssets(category)}
                >
                  <img
                    src={categoryInfo?.categoryImage || ""}
@@ -161,4 +164,3 @@ const Assets: React.FC = () => {
 };

 export default Assets;
-
--- a/app/src/components/layout/sidebarRight/analysis/RenderAnalysisInputs.tsx
+++ b/app/src/components/layout/sidebarRight/analysis/RenderAnalysisInputs.tsx
@@ -27,7 +27,14 @@ const RenderAnalysisInputs: React.FC<InputRendererProps> = ({
          );
        }
        if (preset.type === "range") {
-          return <InputRange key={index} label={preset.inputs.label} />;
+          return (
+            <InputRange
+              key={index}
+              label={preset.inputs.label}
+              min={0}
+              max={0}
+            />
+          );
        }
        return null;
      })}
--- a/app/src/components/layout/sidebarRight/properties/AssetProperties.tsx
+++ b/app/src/components/layout/sidebarRight/properties/AssetProperties.tsx
@@ -17,12 +17,6 @@ const AssetProperties: React.FC = () => {
  const [userData, setUserData] = useState<UserData[]>([]); // State to track user data
  const [nextId, setNextId] = useState(1); // Unique ID for new entries
  const { selectedFloorItem } = useselectedFloorItem();
-  let xValue = selectedFloorItem.position.x;
-  let zValue = selectedFloorItem.position.z;
-  let rotationRad = selectedFloorItem.rotation.y;
-  let rotationDeg = THREE.MathUtils.radToDeg(rotationRad);
-
-  // useEffect(() => {}, [selectedFloorItem]);
  // Function to handle adding new user data
  const handleAddUserData = () => {
    const newUserData: UserData = {
@@ -57,10 +51,15 @@ const AssetProperties: React.FC = () => {

      <PositionInput
        onChange={() => {}}
-        value1={xValue.toFixed(5)}
-        value2={zValue.toFixed(5)}
+        value1={selectedFloorItem.position.x.toFixed(5)}
+        value2={selectedFloorItem.position.z.toFixed(5)}
+      />
+      <RotationInput
+        onChange={() => {}}
+        value={parseFloat(
+          THREE.MathUtils.radToDeg(selectedFloorItem.rotation.y).toFixed(5)
+        )}
      />
-      <RotationInput onChange={() => {}} value={rotationDeg} />

      <div className="split"></div>

--- a/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx
+++ b/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx
@@ -16,7 +16,7 @@ import {
  useWallVisibility,
 } from "../../../../store/store";
 import { setEnvironment } from "../../../../services/factoryBuilder/environment/setEnvironment";
-
+import * as CONSTANTS from "../../../../types/world/worldConstants";
 const GlobalProperties: React.FC = () => {
  const { toggleView, setToggleView } = useToggleView();
  const { selectedWallItem, setSelectedWallItem } = useSelectedWallItem();
@@ -29,18 +29,20 @@ const GlobalProperties: React.FC = () => {
  const { renderDistance, setRenderDistance } = useRenderDistance();
  const { socket } = useSocketStore();
  const [limitDistance, setLimitDistance] = useState(false);
-  const [distance, setDistance] = useState<number>(5);
+  const [distance, setDistance] = useState<number>(30);

  const [limitGridDistance, setLimitGridDistance] = useState(false);
  const [gridDistance, setGridDistance] = useState<number>(5);

  function optimizeScene() {
    setLimitDistance(true);
-    setDistance(5);
+    setDistance(30);
  }

  function updateDistance(value: number) {
+    console.log("value: ", value);
    setDistance(value);
+    setRenderDistance(value);
  }

  function updateGridDistance(value: number) {
@@ -134,6 +136,15 @@ const GlobalProperties: React.FC = () => {
    }
  };

+  // function changeRenderDistance(e: any) {
+  //   if (parseInt(e.target.value) < 20) {
+  //     setRenderDistance(20);
+  //   } else if (parseInt(e.target.value) > 75) {
+  //     setRenderDistance(75);
+  //   } else {
+  //     setRenderDistance(parseInt(e.target.value));
+  //   }
+  // }
  return (
    <div className="global-properties-container">
      <div className="header">Environment</div>
@@ -169,7 +180,7 @@ const GlobalProperties: React.FC = () => {
      />

      <div className="split"></div>
-
+      {/* //visibleEdgeColor={CONSTANTS.outlineConfig.assetDeleteColor} */}
      <InputToggle
        inputKey="4"
        label="Limit Render Distance"
@@ -183,6 +194,8 @@ const GlobalProperties: React.FC = () => {
        disabled={!limitDistance}
        value={distance}
        key={"5"}
+        min={CONSTANTS.distanceConfig.minDistance}
+        max={CONSTANTS.distanceConfig.maxDistance}
        onChange={(value: number) => updateDistance(value)}
      />

--- a/app/src/components/ui/Tools.tsx
+++ b/app/src/components/ui/Tools.tsx
@@ -68,7 +68,7 @@ const Tools: React.FC = () => {
        : true
    );
  }, []);
-
+  useEffect(() => {}, [activeModule]);
  useEffect(() => {
    setActiveTool(activeSubTool);
    setActiveSubTool(activeSubTool);
@@ -433,28 +433,20 @@ const Tools: React.FC = () => {
                </div>
              )}
            </div>
-            {activeModule === "builder" && (
-              <>
-                <div className="split"></div>
-                <div
-                  className={`toggle-threed-button${
-                    toggleThreeD ? " toggled" : ""
-                  }`}
-                  onClick={toggleSwitch}
-                >
-                  <div
-                    className={`toggle-option${!toggleThreeD ? " active" : ""}`}
-                  >
-                    2d
-                  </div>
-                  <div
-                    className={`toggle-option${toggleThreeD ? " active" : ""}`}
-                  >
-                    3d
-                  </div>
-                </div>
-              </>
-            )}
+            <div className="split"></div>
+            <div
+              className={`toggle-threed-button${
+                toggleThreeD ? " toggled" : ""
+              }`}
+              onClick={toggleSwitch}
+            >
+              <div className={`toggle-option${!toggleThreeD ? " active" : ""}`}>
+                2d
+              </div>
+              <div className={`toggle-option${toggleThreeD ? " active" : ""}`}>
+                3d
+              </div>
+            </div>
          </div>
        </>
      ) : (
--- a/app/src/components/ui/inputs/InputRange.tsx
+++ b/app/src/components/ui/inputs/InputRange.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-
+import * as CONSTANTS from "../../../types/world/worldConstants";
 interface InputToggleProps {
  label: string; // Represents the toggle state (on/off)
  min?: number;
@@ -14,8 +14,8 @@ const InputRange: React.FC<InputToggleProps> = ({
  label,
  onClick,
  onChange,
-  min = 0,
-  max = 10,
+  min,
+  max,
  disabled,
  value = 5,
 }) => {
@@ -23,6 +23,7 @@ const InputRange: React.FC<InputToggleProps> = ({

  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
    const newValue = parseInt(e.target.value); // Parse the value to an integer
+
    setRangeValue(newValue); // Update the local state

    if (onChange) {