Merge pull request '3dWidget dnd and 2d widgets backend api updated' (#21) from rtViz into main

Reviewed-on: http://185.100.212.76:7776/Dwinzo-Beta/Dwinzo_dev/pulls/21
2025-03-28 13:57:58 +00:00
parent b10613f360 71310bdbdd
commit 01588cf6c1
27 changed files with 400 additions and 133 deletions
--- a/app/src/components/layout/3D-cards/CardsScene.tsx
+++ b/app/src/components/layout/3D-cards/CardsScene.tsx
@@ -11,10 +11,10 @@ const CardsScene = () => {
      <Canvas>
        {/* 3d-cards */}

-        <Throughput />
-        {/* <ReturnOfInvestment /> */}
        {/* <ProductionCapacity /> */}
+        {/* <ReturnOfInvestment /> */}
        {/* <StateWorking /> */}
+        {/* <Throughput /> */}

        <OrbitControls />
      </Canvas>
--- a/app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx
+++ b/app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx
@@ -21,8 +21,11 @@ ChartJS.register(
  Tooltip,
  Legend
 );
+interface ProductionCapacityProps {
+  position: [number, number, number];
+}

-const ProductionCapacity = () => {
+const ProductionCapacity : React.FC<ProductionCapacityProps> = ({ position }) => {
  // Chart data for a week
  const chartData = {
    labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], // Days of the week
@@ -76,7 +79,10 @@ const ProductionCapacity = () => {
  };

  return (
-    <Html position={[0, 0, 0]} transform occlude>
+   <Html position={[position[0], position[1], position[2]]}
+        scale={[0.5, 0.5, 0.5]}
+        transform
+        sprite>
      <div className="productionCapacity-wrapper card">
        <div className="headeproductionCapacityr-wrapper">
          <div className="header">Production Capacity</div>
--- a/app/src/components/layout/3D-cards/cards/ReturnOfInvestment.tsx
+++ b/app/src/components/layout/3D-cards/cards/ReturnOfInvestment.tsx
@@ -35,8 +35,10 @@ const SmoothLineGraphComponent: React.FC<SmoothLineGraphProps> = ({
 }) => {
  return <Line data={data} options={options} />;
 };
-
-const ReturnOfInvestment = () => {
+interface ReturnOfInvestmentProps {
+  position: [number, number, number];
+}
+const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({ position }) => {
  // Improved sample data for the smooth curve graph (single day)
  const graphData: ChartData<"line"> = {
    labels: [
@@ -106,7 +108,10 @@ const ReturnOfInvestment = () => {
  };

  return (
-    <Html position={[0, 0, 0]} transform occlude>
+    <Html position={[position[0], position[1], position[2]]}
+      scale={[0.5, 0.5, 0.5]}
+      transform
+      sprite>
      <div className="returnOfInvestment card">
        <div className="header">Return of Investment</div>
        <div className="lineGraph charts">
--- a/app/src/components/layout/3D-cards/cards/StateWorking.tsx
+++ b/app/src/components/layout/3D-cards/cards/StateWorking.tsx
@@ -1,6 +1,9 @@
 import { Html } from "@react-three/drei";
-import image from "../../../../assets/image/temp/image.png";
-const StateWorking = () => {
+// import image from "../../../../assets/image/temp/image.png";
+interface StateWorkingProps {
+  position: [number, number, number];
+}
+const StateWorking: React.FC<StateWorkingProps> = ({ position }) => {
  const datas = [
    { key: "Oil Tank:", value: "24/341" },
    { key: "Oil Refin:", value: 36.023 },
@@ -10,7 +13,10 @@ const StateWorking = () => {
    { key: "Time:", value: 13 - 9 - 2023 },
  ];
  return (
-    <Html position={[0, 0, 0]} transform occlude>
+    <Html position={[position[0], position[1], position[2]]}
+      scale={[0.5, 0.5, 0.5]}
+      transform
+      sprite>
      <div className="stateWorking-wrapper card">
        <div className="header-wrapper">
          <div className="header">
@@ -20,7 +26,7 @@ const StateWorking = () => {
            </span>
          </div>
          <div className="img">
-            <img src={image} alt="" />
+            {/* <img src={image} alt="" /> */}
          </div>
        </div>
        {/* Data */}
--- a/app/src/components/layout/3D-cards/cards/Throughput.tsx
+++ b/app/src/components/layout/3D-cards/cards/Throughput.tsx
@@ -37,7 +37,12 @@ const LineGraphComponent: React.FC<LineGraphProps> = ({ data, options }) => {
  return <Line data={data} options={options} />;
 };

-const Throughput = () => {
+interface ThroughputProps {
+  position: [number, number, number];
+}
+
+const Throughput: React.FC<ThroughputProps> = ({ position }) => {
+
  // Sample data for the line graph
  const graphData: ChartData<"line"> = {
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
@@ -86,7 +91,10 @@ const Throughput = () => {
  };

  return (
-    <Html position={[0, 0, 0]} transform occlude>
+    <Html position={[position[0], position[1], position[2]]}
+      scale={[0.5, 0.5, 0.5]}
+      transform
+      sprite>
      <div className="throughput-wrapper">
        <div className="header">Throughput</div>
        <div className="display-value">
--- a/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets2D.tsx
+++ b/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets2D.tsx
@@ -3,6 +3,7 @@ import { useWidgetStore } from "../../../../../store/useWidgetStore";
 import { ChartType } from "chart.js/auto";
 import ChartComponent from "./ChartComponent";
 import { StockIncreseIcon } from "../../../../icons/RealTimeVisulationIcons";
+import { generateUniqueId } from "../../../../../functions/generateUniqueId";

 const chartTypes: ChartType[] = [
  "bar",
@@ -40,7 +41,8 @@ const ChartWidget: React.FC<WidgetProps> = ({ type, index, title }) => {
      onDragStart={() => {
        setDraggedAsset({
          type,
-          id: `widget-${index + 1}`,
+          id: generateUniqueId(
+          ),
          title,
          panel: "top",
          data: sampleData,
--- a/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets3D.tsx
+++ b/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>
      ))}