functionality for grid distance

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>
   );