rotation added

2025-04-04 15:17:38 +05:30
parent 713738520b
commit 60b778ff3d
6 changed files with 239 additions and 91 deletions
--- a/app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx
+++ b/app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx
@@ -30,14 +30,13 @@ interface ProductionCapacityProps {
  id: string;
  type: string;
  position: [number, number, number];
+  rotation: [number, number, number];
  onContextMenu?: (event: React.MouseEvent) => void;
  // onPointerDown:any
 }

-const ProductionCapacity: React.FC<ProductionCapacityProps> = ({ id, type, position, onContextMenu }) => {
-
+const ProductionCapacity: React.FC<ProductionCapacityProps> = ({ id, type, position, rotation, onContextMenu }) => {
  const { selectedChartId, setSelectedChartId } = useWidgetStore();
-
  const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
  const [measurements, setmeasurements] = useState<any>({});
  const [duration, setDuration] = useState("1h")
@@ -177,15 +176,43 @@ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({ id, type, posit
  }
    , [chartMeasurements, chartDuration, widgetName])

+  useEffect(() => {
+
+    console.log('rotation: ', rotation);
+  }, [rotation])
+  const rotationDegrees = {
+    x: (rotation[0] * 180) / Math.PI,
+    y: (rotation[1] * 180) / Math.PI,
+    z: (rotation[2] * 180) / Math.PI,
+  };
+
+  const transformStyle = {
+    transform: `rotateX(${rotationDegrees.x}deg) rotateY(${rotationDegrees.y}deg) rotateZ(${rotationDegrees.z}deg)`,
+  };
+
  return (
-    <Html position={[position[0], position[1], position[2]]}
+    <Html position={position}
      scale={[0.5, 0.5, 0.5]}
-      zIndexRange={[1, 0]}
      transform
-      sprite>
+      sprite
+      zIndexRange={[1,0]}
+      // center
+      // distanceFactor={10} // Adjusted for visual balance
+      style={{
+        transform: transformStyle.transform,
+        transformStyle: 'preserve-3d',
+        transition: 'transform 0.1s ease-out'
+
+      }}>
      <div className="productionCapacity-wrapper card"
        onClick={() => setSelectedChartId({ id: id, type: type })}
        onContextMenu={onContextMenu}
+        style={{
+          width: '300px', // Original width
+          height: '300px', // Original height
+          transform: transformStyle.transform,
+          transformStyle: 'preserve-3d'
+        }}
      >
        <div className="headeproductionCapacityr-wrapper">
          <div className="header">Production Capacity</div>