GEP-200 make changes

Author: Aiga115

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { Toolbar3DButton } from "../Toolbar3D";
+import { Toolbar3DButton } from "../toolbar";
 
 const Backward3D: React.FC = () => {
   return (

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { Toolbar3DButton } from "../Toolbar3D";
+import { Toolbar3DButton } from "../toolbar";
 
 const Forward3D: React.FC = () => {
   return (

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { Toolbar3DButton } from "../Toolbar3D";
+import { Toolbar3DButton } from "../toolbar";
 
 const PanLeft3D: React.FC = () => {
   return (

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { Toolbar3DButton } from "../Toolbar3D";
+import { Toolbar3DButton } from "../toolbar";
 
 const PanRight3D: React.FC = () => {
   return (

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { Toolbar3DButton } from "../Toolbar3D";
+import { Toolbar3DButton } from "../toolbar";
 
 const Animation3DControls: React.FC = () => {
   return (

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { Toolbar3DButton } from "../Toolbar3D";
+import { Toolbar3DButton } from "../toolbar";
 
 const Zoom3DButtons: React.FC = () => {
   return (

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

@@ -0,0 +1,4 @@
+import Toolbar3D, { Toolbar3DButton, Toolbar3DSeparator } from './toolbar';
+
+export { Toolbar3D, Toolbar3DButton, Toolbar3DSeparator };
+export default Toolbar3D;

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

@@ -0,0 +1,71 @@
+import React from 'react';
+import { Box, SxProps, Theme, Divider } from '@mui/material';
+
+const baseStyles: SxProps<Theme> = {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    backgroundColor: "#f0f0f0"
+}
+
+
+const baseButtonStyles: React.CSSProperties = {
+    padding: "0.75rem",
+    fontSize: "1.25rem",
+    color: "#666",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    cursor: "pointer"
+}
+
+const Toolbar3D = ({ children, sx, canvasId }: {
+    children: React.ReactNode,
+    sx?: SxProps<Theme>,
+    canvasId?: string
+}) => {
+    return (
+        <Box sx={{ ...baseStyles, ...sx }} data-canvas-id={canvasId}>
+            {children}
+        </Box>
+    );
+}
+
+
+const Toolbar3DButton = ({ icon, tooltip, onClick, style }: { 
+    icon: React.ReactNode, 
+    tooltip: string, 
+    onClick: (context: { camera?: any, [key: string]: any }) => void, 
+    style?: React.CSSProperties
+}) => {
+    const handleClick = () => {
+        // Here we can gather context data that might be useful
+        // For now, let's provide a basic camera context
+        const context = {
+            camera: "default-camera", // This could be retrieved from React context, props, or refs
+            // You can add more context data here as needed
+        };
+        onClick(context);
+    };
+
+    return (
+        <button style={{ ...baseButtonStyles, ...style }} title={tooltip} onClick={handleClick}>
+            {icon}
+        </button>
+    );
+}
+
+const Toolbar3DSeparator = () => {
+    return (
+        <Divider
+            orientation="horizontal"
+            sx={{
+                width: '100%',
+                my: 0.5
+            }}
+        />
+    )
+}
+
+export { Toolbar3D, Toolbar3DButton, Toolbar3DSeparator };
+export default Toolbar3D;

examples/vite-3DCanvas-react-app/src/components/viewers/Canvas3DExample.tsx

@@ -3,11 +3,7 @@ import { Canvas3D } from "@metacell/geppetto-meta-ui/3d-canvas/Canvas3D";
 import { Box } from "@mui/material";
 import { useFrame } from "@react-three/fiber";
 import { Mesh } from "three";
-import {
-  Toolbar3DButton,
-  Toolbar3D,
-  Toolbar3DSeparator,
-} from "../toolbar/Toolbar3D";
+import { Toolbar3DButton, Toolbar3D, Toolbar3DSeparator } from "../toolbar";
 import {
   Navigation3D,
   Zoom3DButtons,
@@ -86,7 +82,7 @@ const Canvas3DExample: React.FC = () => {
           <Toolbar3DButton
             icon={<i className="fas fa-camera" />}
             tooltip="Camera"
-            onClick={({ camera }) => console.log("Camera clicked", camera)}
+            onClick={() => console.log("Camera clicked")}
           />
         </Toolbar3D>
         <Box sx={classes.canvasContainer}>