3dWidget dnd and 2d widgets backend api updated

app/src/components/layout/sidebarLeft/visualization/widgets/Widgets3D.tsx

@@ -2,6 +2,7 @@ import widget1 from "../../../../../assets/image/3D/ProductionCapacity.png";
 import widget2 from "../../../../../assets/image/3D/ReturnOfInvestment.png";
 import widget3 from "../../../../../assets/image/3D/StateWorking.png";
 import widget4 from "../../../../../assets/image/3D/Throughput.png";
+import { useAsset3dWidget } from "../../../../../store/store";
 const Widgets3D = () => {
   const widgets = [
     { name: "Widget 1", img: widget1 },
@@ -9,17 +10,38 @@ const Widgets3D = () => {
     { name: "Widget 3", img: widget3 },
     { name: "Widget 4", img: widget4 },
   ];
+  const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
+
 
   return (
     <div className="widgets-container widget3D">
       {widgets?.map((widget, index) => (
-        <div key={index} className="widget-item" draggable>
-          <div className="widget-name">{widget.name}</div>
+        <div
+          key={index}
+          className="widget-item"
+          draggable
+          onDragStart={(e) => {
+            let crt = e.target
+            if (crt instanceof HTMLElement) {
+              const widget = crt.cloneNode(true) as HTMLElement;
+              console.log('widget: ', widget);
+              e.dataTransfer.setDragImage(widget,0,0)
+              e.dataTransfer.effectAllowed="move"
+            }
+          }}
+          onPointerDown={() => {
+            setWidgetSelect("ui-" + widget.name);
+          }}
+          onPointerUp={() => {
+            setWidgetSelect(""); // Clearing selection correctly
+          }}
+        >
+          {/* <div className="widget-name">{widget.name}</div> */}
           <img
             className="widget-image"
             src={widget.img}
             alt={widget.name}
-            draggable={false}
+            // draggable={false}
           />
         </div>
       ))}