Refactor distance finding controls and move controls for improved functionality and performance

- Updated `getRoomsFromLines.ts` to filter valid line features before polygonization.
- Enhanced `distanceFindingControls.tsx` to streamline measurement line updates and improve text label rendering.
- Refactored `moveControls.tsx` to optimize event handling and asset movement logic, ensuring smoother interactions.
- Adjusted `selectionControls.tsx` to safely parse stored floor items from local storage.
- Commented out unused imports in `roboticArmInstances.tsx` for cleaner code.
- Modified `polygonGenerator.tsx` to ensure only valid line features are processed for polygon generation.

app/src/modules/builder/geomentries/lines/getRoomsFromLines.ts

@@ -27,7 +27,12 @@ async function getRoomsFromLines(lines: Types.RefLines) {
                 }))
             );
             const lineFeatures = result.map(line => turf.lineString(line.map(p => p.position)));
-            const polygons = turf.polygonize(turf.featureCollection(lineFeatures));
+            const validLineFeatures = lineFeatures.filter((line) => {
+                const coords = line.geometry.coordinates;
+                return coords.length >= 4;
+            });
+    
+            const polygons = turf.polygonize(turf.featureCollection(validLineFeatures));    
 
             let union: any[] = [];
 

app/src/modules/scene/controls/selectionControls/distanceFindingControls.tsx

@@ -1,18 +1,27 @@
-import React, { useEffect, useRef } from "react";
+import React, { useRef } from "react";
-import { Vector3, Raycaster, BufferGeometry, LineBasicMaterial, Line, Object3D, Mesh } from "three";
+import {
+  Vector3,
+  Raycaster,
+  BufferGeometry,
+  LineBasicMaterial,
+  Line,
+  Mesh,
+  Group,
+} from "three";
 import { useThree, useFrame } from "@react-three/fiber";
-import { Group } from "three";
 import { Html } from "@react-three/drei";
-import * as THREE from "three";
 
 interface DistanceFindingControlsProps {
   boundingBoxRef: React.RefObject<Mesh>;
+  object: number;
 }
 
-const DistanceFindingControls = ({ boundingBoxRef }: DistanceFindingControlsProps) => {
+const DistanceFindingControls = ({
+  boundingBoxRef,
+  object,
+}: DistanceFindingControlsProps) => {
   const { camera, scene } = useThree();
 
-
   // Refs for measurement lines
   const line1 = useRef<Line>(null);
   const line2 = useRef<Line>(null);
@@ -33,10 +42,9 @@ const DistanceFindingControls = ({ boundingBoxRef }: DistanceFindingControlsProp
     negX: new BufferGeometry(),
     posZ: new BufferGeometry(),
     negZ: new BufferGeometry(),
-        posY: new BufferGeometry()
+    posY: new BufferGeometry(),
   });
 
-
   useFrame(() => {
     if (!boundingBoxRef?.current) return;
 
@@ -48,7 +56,7 @@ const DistanceFindingControls = ({ boundingBoxRef }: DistanceFindingControlsProp
     const size = {
       x: bbox.max.x - bbox.min.x,
       y: bbox.max.y - bbox.min.y,
-            z: bbox.max.z - bbox.min.z
+      z: bbox.max.z - bbox.min.z,
     };
 
     const vec = boundingBoxRef.current?.getWorldPosition(new Vector3()).clone();
@@ -58,46 +66,46 @@ const DistanceFindingControls = ({ boundingBoxRef }: DistanceFindingControlsProp
       line: line1.current,
       geometry: lineGeometries.current.posX,
       direction: new Vector3(1, 0, 0), // Positive X
-            angle: 'pos',
+      angle: "pos",
       mesh: textPosX,
       vec,
-            size
+      size,
     });
     updateLine({
       line: line2.current,
       geometry: lineGeometries.current.negX,
       direction: new Vector3(-1, 0, 0), // Negative X
-            angle: 'neg',
+      angle: "neg",
       mesh: textNegX,
       vec,
-            size
+      size,
     });
     updateLine({
       line: line3.current,
       geometry: lineGeometries.current.posZ,
       direction: new Vector3(0, 0, 1), // Positive Z
-            angle: 'pos',
+      angle: "pos",
       mesh: textPosZ,
       vec,
-            size
+      size,
     });
     updateLine({
       line: line4.current,
       geometry: lineGeometries.current.negZ,
       direction: new Vector3(0, 0, -1), // Negative Z
-            angle: 'neg',
+      angle: "neg",
       mesh: textNegZ,
       vec,
-            size
+      size,
     });
     updateLine({
       line: line5.current,
       geometry: lineGeometries.current.posY,
       direction: new Vector3(0, -1, 0), // Down (Y)
-            angle: 'posY',
+      angle: "posY",
       mesh: textPosY,
       vec,
-            size
+      size,
     });
   });
 
@@ -108,15 +116,15 @@ const DistanceFindingControls = ({ boundingBoxRef }: DistanceFindingControlsProp
     angle,
     mesh,
     vec,
-        size
+    size,
   }: {
-        line: Line | null,
+    line: Line | null;
-        geometry: BufferGeometry,
+    geometry: BufferGeometry;
-        direction: Vector3,
+    direction: Vector3;
-        angle: string,
+    angle: string;
-        mesh: React.RefObject<Group>,
+    mesh: React.RefObject<Group>;
-        vec: Vector3,
+    vec: Vector3;
-        size: { x: number, y: number, z: number }
+    size: { x: number; y: number; z: number };
   }) => {
     if (!line) return;
 
@@ -142,14 +150,19 @@ const DistanceFindingControls = ({ boundingBoxRef }: DistanceFindingControlsProp
     ray.params.Line.threshold = 0.1;
 
     // Find intersection points
-        const wallsGroup = scene.children.find(val => val?.name.includes("Walls"));
+    const wallsGroup = scene.children.find((val) =>
-        const intersects = wallsGroup ? ray.intersectObjects([wallsGroup], true) : [];
+      val?.name.includes("Walls")
+    );
+    const intersects = wallsGroup
+      ? ray.intersectObjects([wallsGroup], true)
+      : [];
 
     // Find intersection point
     if (intersects[0]) {
       for (const intersect of intersects) {
         if (intersect.object.name.includes("Wall")) {
-                    points[1] = angle !== "posY" ? intersect.point : new Vector3(vec.x, 0, vec.z); // Floor
+          points[1] =
+            angle !== "posY" ? intersect.point : new Vector3(vec.x, 0, vec.z); // Floor
           break;
         }
       }
@@ -178,72 +191,76 @@ const DistanceFindingControls = ({ boundingBoxRef }: DistanceFindingControlsProp
       geometry.dispose();
       geometry.setFromPoints([new Vector3(), new Vector3()]);
       line.geometry = geometry;
-            const label = document.getElementById(mesh?.current?.name || "");
+      const label = document.getElementById(mesh?.current?.name ?? "");
       if (label) label.innerText = "";
     }
   };
 
-    const Material = new LineBasicMaterial({ color: "red" });
+  const Material = new LineBasicMaterial({ color: "#d2baff" });
 
   return (
     <>
       {/* Measurement text labels */}
-            {boundingBoxRef.current && (
+      {boundingBoxRef.current && object > 0 && (
         <>
           <group name="textPosX" ref={textPosX}>
-                        <Html zIndexRange={[1, 0]} style={{ pointerEvents: 'none' }}>
+            <Html
-                            <div className="distance-label" id="textPosX" style={{
+              wrapperClass="distance-text-wrapper"
-                                background: 'rgba(0,0,0,0.7)',
+              className="distance-text"
-                                color: 'white',
+              zIndexRange={[1, 0]}
-                                padding: '2px 5px',
+              style={{ pointerEvents: "none" }}
-                                borderRadius: '3px',
+            >
-                                fontSize: '12px',
+              <div className="distance-label" id="textPosX"></div>
-                                whiteSpace: 'nowrap'
-                            }}></div>
             </Html>
           </group>
           <group name="textNegX" ref={textNegX}>
-                        <Html zIndexRange={[1, 0]} style={{ pointerEvents: 'none' }}>
+            <Html
-                            <div className="distance-label" id="textNegX" style={{
+              wrapperClass="distance-text-wrapper"
-                                background: 'rgba(0,0,0,0.7)',
+              className="distance-text"
-                                color: 'white',
+              zIndexRange={[1, 0]}
-                                padding: '2px 5px',
+              style={{ pointerEvents: "none" }}
-                                borderRadius: '3px',
+            >
-                                fontSize: '12px',
+              <div className="distance-label" id="textNegX"></div>
-                                whiteSpace: 'nowrap'
-                            }}></div>
             </Html>
           </group>
           <group name="textPosZ" ref={textPosZ}>
-                        <Html zIndexRange={[2, 0]} style={{ pointerEvents: 'none' }}>
+            <Html
-                            <div className="distance-label" id="textPosZ" style={{
+              wrapperClass="distance-text-wrapper"
-                                background: 'rgba(0,0,0,0.7)',
+              className="distance-text"
-                                color: 'white',
+              zIndexRange={[2, 0]}
-                                padding: '2px 5px',
+              style={{ pointerEvents: "none" }}
-                                borderRadius: '3px',
+            >
-                                fontSize: '12px',
+              <div className="distance-label" id="textPosZ"></div>
-                                whiteSpace: 'nowrap'
-                            }}></div>
             </Html>
           </group>
           <group name="textNegZ" ref={textNegZ}>
-                        <Html zIndexRange={[1, 0]} style={{ pointerEvents: 'none' }}>
+            <Html
-                            <div className="distance-label" id="textNegZ" style={{
+              wrapperClass="distance-text-wrapper"
-                                background: 'rgba(0,0,0,0.7)',
+              className="distance-text"
-                                color: 'white',
+              zIndexRange={[1, 0]}
-                                padding: '2px 5px',
+              style={{ pointerEvents: "none" }}
-                                borderRadius: '3px',
+            >
-                                fontSize: '12px',
+              <div className="distance-label" id="textNegZ"></div>
-                                whiteSpace: 'nowrap'
-                            }}></div>
             </Html>
           </group>
 
           {/* Measurement lines */}
-                    <primitive object={new Line(new BufferGeometry(), Material)} ref={line1} />
+          <primitive
-                    <primitive object={new Line(new BufferGeometry(), Material)} ref={line2} />
+            object={new Line(new BufferGeometry(), Material)}
-                    <primitive object={new Line(new BufferGeometry(), Material)} ref={line3} />
+            ref={line1}
-                    <primitive object={new Line(new BufferGeometry(), Material)} ref={line4} />
+          />
+          <primitive
+            object={new Line(new BufferGeometry(), Material)}
+            ref={line2}
+          />
+          <primitive
+            object={new Line(new BufferGeometry(), Material)}
+            ref={line3}
+          />
+          <primitive
+            object={new Line(new BufferGeometry(), Material)}
+            ref={line4}
+          />
         </>
       )}
     </>

app/src/modules/scene/controls/selectionControls/moveControls.tsx

@@ -1,7 +1,12 @@
 import * as THREE from "three";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useFrame, useThree } from "@react-three/fiber";
-import { useFloorItems, useSelectedAssets, useSocketStore, useStartSimulation, useToggleView } from "../../../../store/store";
+import {
+  useFloorItems,
+  useSelectedAssets,
+  useSocketStore,
+  useToggleView,
+} from "../../../../store/store";
 // import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi';
 import { toast } from "react-toastify";
 import * as Types from "../../../../types/world/worldTypes";
@@ -13,10 +18,26 @@ import { upsertProductOrEventApi } from "../../../../services/simulation/UpsertP
 import { snapControls } from "../../../../utils/handleSnap";
 import DistanceFindingControls from "./distanceFindingControls";
 
-function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObjects, setCopiedObjects, pastedObjects, setpastedObjects, duplicatedObjects, setDuplicatedObjects, selectionGroup, rotatedObjects, setRotatedObjects, boundingBoxRef }: any) {
+function MoveControls({
-
+  movedObjects,
+  setMovedObjects,
+  itemsGroupRef,
+  copiedObjects,
+  setCopiedObjects,
+  pastedObjects,
+  setpastedObjects,
+  duplicatedObjects,
+  setDuplicatedObjects,
+  selectionGroup,
+  rotatedObjects,
+  setRotatedObjects,
+  boundingBoxRef,
+}: any) {
   const { camera, controls, gl, scene, pointer, raycaster } = useThree();
-    const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), []);
+  const plane = useMemo(
+    () => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0),
+    []
+  );
 
   const { toggleView } = useToggleView();
   const { selectedAssets, setSelectedAssets } = useSelectedAssets();
@@ -24,9 +45,11 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje
   const { floorItems, setFloorItems } = useFloorItems();
   const { socket } = useSocketStore();
   const itemsData = useRef<Types.FloorItems>([]);
-    const [keyEvent, setKeyEvent] = useState<"Ctrl" | "Shift" | "Ctrl+Shift" | "">("")
+  const [keyEvent, setKeyEvent] = useState<
-    const email = localStorage.getItem('email')
+    "Ctrl" | "Shift" | "Ctrl+Shift" | ""
-    const organization = (email!.split("@")[1]).split(".")[0];
+  >("");
+  const email = localStorage.getItem("email");
+  const organization = email!.split("@")[1].split(".")[0];
 
   const updateBackend = (
     productName: string,
@@ -38,9 +61,9 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje
       productName: productName,
       productId: productId,
       organization: organization,
-            eventDatas: eventData
+      eventDatas: eventData,
-        })
+    });
-    }
+  };
 
   useEffect(() => {
     if (!camera || !scene || toggleView || !itemsGroupRef.current) return;
@@ -59,8 +82,7 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje
     };
     const onKeyUp = (event: KeyboardEvent) => {
       // When any modifier is released, reset snap
-            const isModifierKey =
+      const isModifierKey = event.key === "Control" || event.key === "Shift";
-                event.key === "Control" || event.key === "Shift";
 
       if (isModifierKey) {
         setKeyEvent("");
@@ -87,25 +109,36 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje
         setMovedObjects([]);
         itemsData.current = [];
       }
-            setKeyEvent("")
+      setKeyEvent("");
     };
 
     const onKeyDown = (event: KeyboardEvent) => {
       const keyCombination = detectModifierKeys(event);
 
-            if (pastedObjects.length > 0 || duplicatedObjects.length > 0 || rotatedObjects.length > 0) return;
+      if (
+        pastedObjects.length > 0 ||
+        duplicatedObjects.length > 0 ||
+        rotatedObjects.length > 0
+      )
+        return;
 
-            if (keyCombination === "Ctrl" || keyCombination === "Ctrl+Shift" || keyCombination === "Shift") {
+      if (
+        keyCombination === "Ctrl" ||
+        keyCombination === "Ctrl+Shift" ||
+        keyCombination === "Shift"
+      ) {
         // update state here
-                setKeyEvent(keyCombination)
+        setKeyEvent(keyCombination);
       } else {
-                setKeyEvent("")
+        setKeyEvent("");
       }
 
       if (keyCombination === "G") {
         if (selectedAssets.length > 0) {
           moveAssets();
-                    itemsData.current = floorItems.filter((item: { modelUuid: string }) => selectedAssets.some((asset: any) => asset.uuid === item.modelUuid));
+          itemsData.current = floorItems.filter((item: { modelUuid: string }) =>
+            selectedAssets.some((asset: any) => asset.uuid === item.modelUuid)
+          );
         }
       }
 
@@ -141,7 +174,20 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje
       canvasElement.removeEventListener("keydown", onKeyDown);
       canvasElement?.removeEventListener("keyup", onKeyUp);
     };
-    }, [camera, controls, scene, toggleView, selectedAssets, socket, floorItems, pastedObjects, duplicatedObjects, movedObjects, rotatedObjects, keyEvent]);
+  }, [
+    camera,
+    controls,
+    scene,
+    toggleView,
+    selectedAssets,
+    socket,
+    floorItems,
+    pastedObjects,
+    duplicatedObjects,
+    movedObjects,
+    rotatedObjects,
+    keyEvent,
+  ]);
 
   let moveSpeed = keyEvent === "Ctrl" || "Ctrl+Shift" ? 1 : 0.25;
 
@@ -181,7 +227,9 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje
           );
         } else {
           const box = new THREE.Box3();
-                    movedObjects.forEach((obj: THREE.Object3D) => box.expandByObject(obj));
+          movedObjects.forEach((obj: THREE.Object3D) =>
+            box.expandByObject(obj)
+          );
           const center = new THREE.Vector3();
           box.getCenter(center);
 
@@ -196,16 +244,19 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje
         }
       }
     }
-
   });
 
-
   const moveAssets = () => {
-        const updatedItems = floorItems.filter((item: { modelUuid: string }) => !selectedAssets.some((asset: any) => asset.uuid === item.modelUuid));
+    const updatedItems = floorItems.filter(
+      (item: { modelUuid: string }) =>
+        !selectedAssets.some((asset: any) => asset.uuid === item.modelUuid)
+    );
     setFloorItems(updatedItems);
     setMovedObjects(selectedAssets);
-        selectedAssets.forEach((asset: any) => { selectionGroup.current.attach(asset); });
+    selectedAssets.forEach((asset: any) => {
-    }
+      selectionGroup.current.attach(asset);
+    });
+  };
 
   const placeMovedAssets = () => {
     if (movedObjects.length === 0) return;
@@ -223,26 +274,39 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje
           modelName: obj.userData.name,
           modelfileID: obj.userData.modelId,
           position: [worldPosition.x, worldPosition.y, worldPosition.z],
-                    rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z, },
+          rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z },
           isLocked: false,
-                    isVisible: true
+          isVisible: true,
         };
 
         if (obj.userData.eventData) {
-                    const eventData = useEventsStore.getState().getEventByModelUuid(obj.userData.modelUuid);
+          const eventData = useEventsStore
-                    const productData = useProductStore.getState().getEventByModelUuid(useSelectedProduct.getState().selectedProduct.productId, obj.userData.modelUuid);
+            .getState()
+            .getEventByModelUuid(obj.userData.modelUuid);
+          const productData = useProductStore
+            .getState()
+            .getEventByModelUuid(
+              useSelectedProduct.getState().selectedProduct.productId,
+              obj.userData.modelUuid
+            );
 
           if (eventData) {
             useEventsStore.getState().updateEvent(obj.userData.modelUuid, {
               position: [worldPosition.x, worldPosition.y, worldPosition.z],
               rotation: [obj.rotation.x, obj.rotation.y, obj.rotation.z],
-                        })
+            });
           }
           if (productData) {
-                        const event = useProductStore.getState().updateEvent(useSelectedProduct.getState().selectedProduct.productId, obj.userData.modelUuid, {
+            const event = useProductStore
+              .getState()
+              .updateEvent(
+                useSelectedProduct.getState().selectedProduct.productId,
+                obj.userData.modelUuid,
+                {
                   position: [worldPosition.x, worldPosition.y, worldPosition.z],
                   rotation: [obj.rotation.x, obj.rotation.y, obj.rotation.z],
-                        })
+                }
+              );
 
             if (event) {
               updateBackend(
@@ -299,7 +363,7 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje
 
     itemsData.current = [];
     clearSelection();
-    }
+  };
 
   const clearSelection = () => {
     selectionGroup.current.children = [];
@@ -310,10 +374,15 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje
     setMovedObjects([]);
     setRotatedObjects([]);
     setSelectedAssets([]);
-        setKeyEvent("")
+    setKeyEvent("");
+  };
+
+  return (
+    <DistanceFindingControls
+      boundingBoxRef={boundingBoxRef}
+      object={movedObjects.length}
+    />
+  );
 }
 
-    return <DistanceFindingControls boundingBoxRef={boundingBoxRef} />;
+export default MoveControls;
-}
-
-export default MoveControls

app/src/modules/scene/controls/selectionControls/selectionControls.tsx

@@ -205,7 +205,7 @@ const SelectionControls: React.FC = () => {
             const email = localStorage.getItem("email");
             const organization = email!.split("@")[1].split(".")[0];
 
-            const storedItems = JSON.parse(localStorage.getItem("FloorItems") || "[]");
+            const storedItems = JSON.parse(localStorage.getItem("FloorItems") ?? "[]");
             const selectedUUIDs = selectedAssets.map((mesh: THREE.Object3D) => mesh.uuid);
 
             const updatedStoredItems = storedItems.filter((item: { modelUuid: string }) => !selectedUUIDs.includes(item.modelUuid));

app/src/modules/simulation/roboticArm/instances/roboticArmInstances.tsx

@@ -1,6 +1,6 @@
 import RoboticArmInstance from "./armInstance/roboticArmInstance";
 import { useArmBotStore } from "../../../../store/simulation/useArmBotStore";
-import RoboticArmContentUi from "../../ui3d/RoboticArmContentUi";
+// import RoboticArmContentUi from "../../ui3d/RoboticArmContentUi";
 import React from "react";
 
 function RoboticArmInstances() {
@@ -11,7 +11,7 @@ function RoboticArmInstances() {
             {armBots?.map((robot: ArmBotStatus) => (
                 <React.Fragment key={robot.modelUuid}>
                     <RoboticArmInstance armBot={robot} />
-                    <RoboticArmContentUi roboticArm={robot} />
+                    {/* <RoboticArmContentUi roboticArm={robot} /> */}
                 </React.Fragment>
             ))}
         </>

app/src/modules/simulation/vehicle/navMesh/polygonGenerator.tsx

@@ -38,7 +38,12 @@ export default function PolygonGenerator({
             turf.lineString(line.map((p: any) => p?.position))
         );
 
-        const polygons = turf.polygonize(turf.featureCollection(lineFeatures));
+        const validLineFeatures = lineFeatures.filter((line) => {
+            const coords = line.geometry.coordinates;
+            return coords.length >= 2;
+        });
+
+        const polygons = turf.polygonize(turf.featureCollection(validLineFeatures));
                 
         renderWallGeometry(wallPoints);