54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
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 },
|
|
{ name: "Widget 2", img: widget2 },
|
|
{ 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
|
|
onDragStart={(e) => {
|
|
let name = widget.name
|
|
let crt = e.target
|
|
if (crt instanceof HTMLElement) {
|
|
const widget = crt.cloneNode(true) as HTMLElement;
|
|
e.dataTransfer.setDragImage(widget, 0, 0)
|
|
e.dataTransfer.effectAllowed = "move"
|
|
e.dataTransfer.setData("text/plain", "ui-" + name)
|
|
}
|
|
}}
|
|
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}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Widgets3D;
|