GEP-200 add toolbar actions

Author: Aiga115

examples/vite-3DCanvas-react-app/src/components/toolbar/CameraControlsContext.tsx

@@ -0,0 +1,26 @@
+import React, { createContext, useContext } from 'react';
+import { CameraControls } from '@react-three/drei';
+
+type CameraControlsContextType = {
+  cameraControls: React.RefObject<CameraControls> | null;
+};
+
+const CameraControlsContext = createContext<CameraControlsContextType>({
+  cameraControls: null,
+});
+
+export const CameraControlsProvider: React.FC<{
+  children: React.ReactNode;
+  cameraControlsRef: React.RefObject<CameraControls>;
+}> = ({ children, cameraControlsRef }) => {
+  return (
+    <CameraControlsContext.Provider value={{ cameraControls: cameraControlsRef }}>
+      {children}
+    </CameraControlsContext.Provider>
+  );
+};
+
+export const useCameraControls = () => {
+  const context = useContext(CameraControlsContext);
+  return context.cameraControls;
+};

examples/vite-3DCanvas-react-app/src/components/toolbar/Toolbar3D.tsx

@@ -18,6 +18,15 @@ const toolbarButtonBaseStyles: React.CSSProperties = {
   alignItems: "center",
   justifyContent: "center",
   cursor: "pointer",
+  border: "none",
+  backgroundColor: "transparent",
+  transition: "all 0.2s ease",
+};
+
+const toolbarButtonActiveStyles: React.CSSProperties = {
+  ...toolbarButtonBaseStyles,
+  color: "#1976d2",
+  backgroundColor: "#e3f2fd",
 };
 
 const CanvasIdContext = React.createContext<string | undefined>(undefined);
@@ -44,23 +53,35 @@ export const Toolbar3DButton = ({
   tooltip,
   onClick,
   style,
+  active = false,
 }: {
   icon: React.ReactNode;
   tooltip: string;
   onClick: (fiber: RootState) => void;
   style?: React.CSSProperties;
+  active?: boolean;
 }) => {
   const canvasId = useCanvasId();
   const fiber = useFiber(canvasId ?? "default");
 
+  const buttonStyle = active ? toolbarButtonActiveStyles : toolbarButtonBaseStyles;
+
+  const handleClick = () => {
+    if (fiber) {
+      onClick(fiber);
+    } else {
+      console.log("No fiber found - canvas might not be ready");
+    }
+  };
+
   return (
-    <div
-      style={{ ...toolbarButtonBaseStyles, ...style }}
+    <button
+      style={{ ...buttonStyle, ...style }}
       title={tooltip}
-      onClick={() => fiber && onClick(fiber)}
+      onClick={handleClick}
     >
       {icon}
-    </div>
+    </button>
   );
 };
 

examples/vite-3DCanvas-react-app/src/components/toolbar/groups/Backward3D.tsx

@@ -1,12 +1,26 @@
 import React from "react";
-import { Toolbar3DButton } from "../toolbar";
+import { Toolbar3DButton } from "../Toolbar3D";
+import { useCameraControls } from "../CameraControlsContext";
 
 const Backward3D: React.FC = () => {
+  const cameraControlsRef = useCameraControls();
+
+  const handleBackward = (fiber: any) => {
+    if (cameraControlsRef?.current) {
+      cameraControlsRef.current.dolly(0.5, true);
+    } else if (fiber?.camera) {
+      const camera = fiber.camera;
+      const moveDistance = 1;
+      camera.position.z += moveDistance;
+      camera.updateMatrixWorld();
+    }
+  };
+
   return (
     <Toolbar3DButton
       icon={<i className="fas fa-arrow-down" />}
       tooltip="Move Backward"
-      onClick={() => console.log("Move backward clicked")}
+      onClick={handleBackward}
     />
   );
 };

examples/vite-3DCanvas-react-app/src/components/toolbar/groups/EnhancedZoomGroup3D.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { Toolbar3DButton } from "../Toolbar3D";
+import { useCameraControls } from "../CameraControlsContext";
+
+const EnhancedZoom3DButtons: React.FC = () => {
+  const cameraControlsRef = useCameraControls();
+
+  const handleZoomIn = (fiber: any) => {
+    if (fiber?.camera) {
+      const camera = fiber.camera;
+      if (camera.isPerspectiveCamera) {
+        camera.fov = Math.max(camera.fov - 5, 10);
+        camera.updateProjectionMatrix();
+      }
+    }
+  };
+
+  const handleZoomOut = (fiber: any) => {
+    if (fiber?.camera) {
+      const camera = fiber.camera;
+      if (camera.isPerspectiveCamera) {
+        camera.fov = Math.min(camera.fov + 5, 120);
+        camera.updateProjectionMatrix();
+      }
+    }
+  };
+
+  const handleDollyIn = (_fiber: any) => {
+    if (cameraControlsRef?.current) {
+      cameraControlsRef.current.dolly(-0.5, true);
+    }
+  };
+
+  const handleDollyOut = (_fiber: any) => {
+    if (cameraControlsRef?.current) {
+      cameraControlsRef.current.dolly(0.5, true);
+    }
+  };
+
+  return (
+    <>
+      <Toolbar3DButton
+        icon={<i className="fas fa-search-plus" />}
+        tooltip="Zoom In (FOV)"
+        onClick={handleZoomIn}
+      />
+      <Toolbar3DButton
+        icon={<i className="fas fa-search-minus" />}
+        tooltip="Zoom Out (FOV)"
+        onClick={handleZoomOut}
+      />
+
+      <Toolbar3DButton
+        icon={<i className="fas fa-plus" />}
+        tooltip="Dolly In (Move Closer)"
+        onClick={handleDollyIn}
+      />
+      <Toolbar3DButton
+        icon={<i className="fas fa-minus" />}
+        tooltip="Dolly Out (Move Away)"
+        onClick={handleDollyOut}
+      />
+    </>
+  );
+};
+
+export default EnhancedZoom3DButtons;

examples/vite-3DCanvas-react-app/src/components/toolbar/groups/Forward3D.tsx

@@ -1,12 +1,26 @@
 import React from "react";
-import { Toolbar3DButton } from "../toolbar";
+import { Toolbar3DButton } from "../Toolbar3D";
+import { useCameraControls } from "../CameraControlsContext";
 
 const Forward3D: React.FC = () => {
+  const cameraControlsRef = useCameraControls();
+
+  const handleForward = (fiber: any) => {
+    if (cameraControlsRef?.current) {
+      cameraControlsRef.current.dolly(-0.5, true);
+    } else if (fiber?.camera) {
+      const camera = fiber.camera;
+      const moveDistance = 1;
+      camera.position.z -= moveDistance;
+      camera.updateMatrixWorld();
+    }
+  };
+
   return (
     <Toolbar3DButton
       icon={<i className="fas fa-arrow-up" />}
       tooltip="Move Forward"
-      onClick={() => console.log("Move forward clicked")}
+      onClick={handleForward}
     />
   );
 };

examples/vite-3DCanvas-react-app/src/components/toolbar/groups/PanLeft3D.tsx

@@ -1,12 +1,32 @@
 import React from "react";
-import { Toolbar3DButton } from "../toolbar";
+import { Toolbar3DButton } from "../Toolbar3D";
+import { useCameraControls } from "../CameraControlsContext";
+import * as THREE from "three";
 
 const PanLeft3D: React.FC = () => {
+  const cameraControlsRef = useCameraControls();
+
+  const handlePanLeft = (fiber: any) => {
+    if (cameraControlsRef?.current) {
+      cameraControlsRef.current.truck(-0.5, 0, true);
+    } else if (fiber?.camera) {
+      const camera = fiber.camera;
+      const right = new THREE.Vector3();
+      camera.getWorldDirection(right);
+      right.cross(camera.up).normalize();
+
+      const moveDistance = 1;
+      camera.position.add(right.multiplyScalar(-moveDistance));
+    } else {
+      console.log("No camera controls or camera found!");
+    }
+  };
+
   return (
     <Toolbar3DButton
       icon={<i className="fas fa-arrow-left" />}
       tooltip="Pan Left"
-      onClick={() => console.log("Pan left clicked")}
+      onClick={handlePanLeft}
     />
   );
 };

examples/vite-3DCanvas-react-app/src/components/toolbar/groups/PanRight3D.tsx

@@ -1,12 +1,26 @@
 import React from "react";
-import { Toolbar3DButton } from "../toolbar";
+import { Toolbar3DButton } from "../Toolbar3D";
+import { useCameraControls } from "../CameraControlsContext";
 
 const PanRight3D: React.FC = () => {
+  const cameraControlsRef = useCameraControls();
+
+  const handlePanRight = (fiber: any) => {
+    if (cameraControlsRef?.current) {
+      cameraControlsRef.current.truck(0.5, 0, true);
+    } else if (fiber?.camera) {
+      const camera = fiber.camera;
+      const moveDistance = 1;
+      camera.position.x += moveDistance;
+      camera.updateMatrixWorld();
+    }
+  };
+
   return (
     <Toolbar3DButton
       icon={<i className="fas fa-arrow-right" />}
       tooltip="Pan Right"
-      onClick={() => console.log("Pan right clicked")}
+      onClick={handlePanRight}
     />
   );
 };