refactor: Update selectedObjects iteration method in SelectionControls

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

@@ -3,25 +3,12 @@ import { useMemo } from "react";
 import * as THREE from "three";
 import { useSelectedAssets } from "../../../../store/builder/store";
 
-const BoundingBox = ({ boundingBoxRef }: any) => {
+interface BoundingBoxProps {
-    const { selectedAssets } = useSelectedAssets();
+    boundingBoxRef?: any;
+    isPerAsset?: boolean;
+}
 
-    const { points, boxProps } = useMemo(() => {
+const getBoxLines = (min: THREE.Vector3, max: THREE.Vector3) => [
-        if (selectedAssets.length === 0) return { points: [], boxProps: {} };
-
-        const box = new THREE.Box3();
-        selectedAssets.forEach((obj: any) => box.expandByObject(obj.clone()));
-
-        const size = new THREE.Vector3();
-        box.getSize(size);
-        const center = new THREE.Vector3();
-        box.getCenter(center);
-
-        const halfSize = size.clone().multiplyScalar(0.5);
-        const min = center.clone().sub(halfSize);
-        const max = center.clone().add(halfSize);
-
-        const points: any = [
     [min.x, min.y, min.z], [max.x, min.y, min.z],
     [max.x, min.y, min.z], [max.x, max.y, min.z],
     [max.x, max.y, min.z], [min.x, max.y, min.z],
@@ -38,25 +25,74 @@ const BoundingBox = ({ boundingBoxRef }: any) => {
     [min.x, max.y, min.z], [min.x, max.y, max.z],
 ];
 
-        return {
+const BoundingBox = ({ boundingBoxRef, isPerAsset = true }: BoundingBoxProps) => {
-            points,
+    const { selectedAssets } = useSelectedAssets();
-            boxProps: { position: center.toArray(), args: size.toArray() }
+    const savedTheme: string = localStorage.getItem("theme") || "light";
-        };
-    }, [selectedAssets]);
 
-    const savedTheme: string | null = localStorage.getItem("theme") || "light";
+    const boxes = useMemo(() => {
+        if (selectedAssets.length === 0) return [];
+
+        if (isPerAsset) {
+            return selectedAssets.map((obj: any) => {
+                const box = new THREE.Box3().setFromObject(obj.clone());
+                const size = new THREE.Vector3();
+                const center = new THREE.Vector3();
+                box.getSize(size);
+                box.getCenter(center);
+
+                const halfSize = size.clone().multiplyScalar(0.5);
+                const min = center.clone().sub(halfSize);
+                const max = center.clone().add(halfSize);
+
+                return {
+                    points: getBoxLines(min, max),
+                    position: center.toArray(),
+                    size: size.toArray(),
+                };
+            });
+        } else {
+            const box = new THREE.Box3();
+            selectedAssets.forEach((obj: any) => box.expandByObject(obj.clone()));
+            const size = new THREE.Vector3();
+            const center = new THREE.Vector3();
+            box.getSize(size);
+            box.getCenter(center);
+
+            const halfSize = size.clone().multiplyScalar(0.5);
+            const min = center.clone().sub(halfSize);
+            const max = center.clone().add(halfSize);
+
+            return [
+                {
+                    points: getBoxLines(min, max),
+                    position: center.toArray(),
+                    size: size.toArray(),
+                },
+            ];
+        }
+    }, [selectedAssets, isPerAsset]);
 
     return (
         <>
-            {points.length > 0 && (
+            {boxes.map((box: any, index: number) => (
-                <>
+                <group key={index}>
-                    <Line depthWrite={false} points={points} color={savedTheme === "dark" ? "#c4abf1" : "#6f42c1"} lineWidth={2.7} segments />
+                    <Line
-                    <mesh ref={boundingBoxRef} visible={false} position={boxProps.position}>
+                        depthWrite={false}
-                        <boxGeometry args={boxProps.args} />
+                        points={box.points}
+                        color={savedTheme === "dark" ? "#c4abf1" : "#6f42c1"}
+                        lineWidth={2.7}
+                        segments
+                    />
+                    <mesh
+                        ref={index === 0 ? boundingBoxRef : null}
+                        visible={false}
+                        position={box.position}
+                    >
+                        <boxGeometry args={box.size} />
                         <meshBasicMaterial />
                     </mesh>
-                </>
+                </group>
-            )}
+            ))}
         </>
     );
 };

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

@@ -158,7 +158,7 @@ const SelectionControls: React.FC = () => {
         let selectedObjects = selectionBox.select();
         let Objects = new Set<THREE.Object3D>();
 
-        selectedObjects.map((object) => {
+        selectedObjects.forEach((object) => {
             let currentObject: THREE.Object3D | null = object;
             while (currentObject) {
                 if (currentObject.userData.modelUuid) {