3dWidget dnd and 2d widgets backend api updated

app/src/components/ui/componets/Dropped3dWidget.tsx

@@ -0,0 +1,79 @@
+
+import { useThree } from "@react-three/fiber";
+import React, { useState, useEffect } from "react";
+import { useAsset3dWidget } from "../../../store/store";
+import useModuleStore from "../../../store/useModuleStore";
+import { ThreeState } from "../../../types/world/worldTypes";
+import * as THREE from "three";
+import Throughput from "../../layout/3D-cards/cards/Throughput";
+import ProductionCapacity from "../../layout/3D-cards/cards/ProductionCapacity";
+import ReturnOfInvestment from "../../layout/3D-cards/cards/ReturnOfInvestment";
+import StateWorking from "../../layout/3D-cards/cards/StateWorking";
+
+export default function Dropped3dWidgets() {
+    const { widgetSelect } = useAsset3dWidget();
+    const { activeModule } = useModuleStore();
+    const { raycaster, gl, scene }: ThreeState = useThree();
+
+    // 🔥 Store multiple instances per widget type
+    const [widgetPositions, setWidgetPositions] = useState<Record<string, [number, number, number][]>>({});
+
+    useEffect(() => {
+        if (activeModule !== "visualization") return;
+        const canvasElement = gl.domElement;
+
+        const onDrop = (event: DragEvent) => {
+            event.preventDefault(); // Prevent default browser behavior
+
+            if (!widgetSelect.startsWith("ui")) return;
+
+
+            const group1 = scene.getObjectByName("itemsGroup");
+            if (!group1) return;
+
+
+
+            const Assets = group1.children
+                .map((val) => scene.getObjectByProperty("uuid", val.uuid))
+                .filter(Boolean) as THREE.Object3D[];
+
+
+            const intersects = raycaster.intersectObjects(Assets);
+
+            if (intersects.length > 0) {
+                const { x, y, z } = intersects[0].point;
+
+
+                // ✅ Allow multiple instances by storing positions in an array
+                setWidgetPositions((prev) => ({
+                    ...prev,
+                    [widgetSelect]: [...(prev[widgetSelect] || []), [x, y, z]],
+                }));
+            }
+        };
+
+        canvasElement.addEventListener("drop", onDrop);
+
+        return () => {
+            canvasElement.removeEventListener("drop", onDrop);
+        };
+    }, [widgetSelect, activeModule]);
+
+    return (
+        <>
+            {widgetPositions["ui-Widget 1"]?.map((pos, index) => (
+                <ProductionCapacity key={`Widget1-${index}`} position={pos} />
+            ))}
+            {widgetPositions["ui-Widget 2"]?.map((pos, index) => (
+                <ReturnOfInvestment key={`Widget2-${index}`} position={pos} />
+            ))}
+            {widgetPositions["ui-Widget 3"]?.map((pos, index) => (
+                <StateWorking key={`Widget3-${index}`} position={pos} />
+            ))}
+            {widgetPositions["ui-Widget 4"]?.map((pos, index) => (
+                <Throughput key={`Widget4-${index}`} position={pos} />
+            ))}
+        </>
+    );
+}
+