Skip to content

Commit 311ed6d

Browse files
Aiga115Aiga115
committed
GEP-200 add custom toolbar components
1 parent de03d0a commit 311ed6d

File tree

14 files changed

+242
-14
lines changed

14 files changed

+242
-14
lines changed

‎examples/vite-3DCanvas-react-app/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<meta charset="UTF-8" />
55
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
78
<title>3D Canvas</title>
89
</head>
910
<body>

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from 'react';
2+
import { Box, SxProps, Theme } from '@mui/material';
3+
4+
const baseStyles: SxProps<Theme> = {
5+
display: "flex",
6+
flexDirection: "column",
7+
alignItems: "center",
8+
backgroundColor: "#f0f0f0"
9+
}
10+
11+
const Toolbar3D = ({ children, sx }: { children: React.ReactNode, sx?: SxProps<Theme> }) => {
12+
return (
13+
<Box sx={{ ...baseStyles, ...sx }}>
14+
{children}
15+
</Box>
16+
)
17+
}
18+
19+
export default Toolbar3D;

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from "react";
2+
3+
const baseStyles: React.CSSProperties = {
4+
padding: "0.75rem",
5+
fontSize: "1.25rem",
6+
color: "#666",
7+
display: "flex",
8+
alignItems: "center",
9+
justifyContent: "center",
10+
cursor: "pointer"
11+
}
12+
13+
const Toolbar3DButton = ({ icon, tooltip, onClick, style }: { icon: React.ReactNode, tooltip: string, onClick: () => void, style?: React.CSSProperties }) => {
14+
return (
15+
<div style={{ ...baseStyles, ...style }} title={tooltip} onClick={onClick}>
16+
{icon}
17+
</div>
18+
);
19+
}
20+
21+
export default Toolbar3DButton;

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import React from "react";
2+
import { Divider } from "@mui/material";
3+
4+
const Toolbar3DSeparator = ({ style, variant = "horizontal" }: { style?: React.CSSProperties, variant?: "horizontal" | "vertical" }) => {
5+
return (
6+
<Divider style={{ ...style }} orientation={variant === "horizontal" ? "horizontal" : "vertical"} />
7+
);
8+
}
9+
10+
export default Toolbar3DSeparator;

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from "react";
2+
import Toolbar3DButton from "../Toolbar3DButton";
3+
4+
const Backward3D: React.FC = () => {
5+
return (
6+
<>
7+
<Toolbar3DButton
8+
icon={<i className="fas fa-arrow-down" />}
9+
tooltip="Move Backward"
10+
onClick={() => console.log("Move backward clicked")}
11+
/>
12+
</>
13+
);
14+
};
15+
16+
export default Backward3D;

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from "react";
2+
import Toolbar3DButton from "../Toolbar3DButton";
3+
4+
const Forward3D: React.FC = () => {
5+
return (
6+
<>
7+
<Toolbar3DButton
8+
icon={<i className="fas fa-arrow-up" />}
9+
tooltip="Move Forward"
10+
onClick={() => console.log("Move forward clicked")}
11+
/>
12+
</>
13+
);
14+
};
15+
16+
export default Forward3D;

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from "react";
2+
import PanLeft3D from "./PanLeft3D";
3+
import PanRight3D from "./PanRight3D";
4+
import Forward3D from "./Forward3D";
5+
import Backward3D from "./Backward3D";
6+
7+
const Navigation3D: React.FC = () => {
8+
return (
9+
<>
10+
<PanLeft3D />
11+
<PanRight3D />
12+
<Forward3D />
13+
<Backward3D />
14+
</>
15+
);
16+
};
17+
18+
export default Navigation3D;

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from "react";
2+
import Toolbar3DButton from "../Toolbar3DButton";
3+
4+
const PanLeft3D: React.FC = () => {
5+
return (
6+
<>
7+
<Toolbar3DButton
8+
icon={<i className="fas fa-arrow-left" />}
9+
tooltip="Pan Left"
10+
onClick={() => console.log("Pan left clicked")}
11+
/>
12+
</>
13+
);
14+
};
15+
16+
export default PanLeft3D;

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from "react";
2+
import Toolbar3DButton from "../Toolbar3DButton";
3+
4+
const PanRight3D: React.FC = () => {
5+
return (
6+
<>
7+
<Toolbar3DButton
8+
icon={<i className="fas fa-arrow-right" />}
9+
tooltip="Pan Right"
10+
onClick={() => console.log("Pan right clicked")}
11+
/>
12+
</>
13+
);
14+
};
15+
16+
export default PanRight3D;

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import React from "react";
2+
import Toolbar3DButton from "../Toolbar3DButton";
3+
4+
const Animation3DControls: React.FC = () => {
5+
return (
6+
<>
7+
<Toolbar3DButton
8+
icon={<i className="fas fa-play" />}
9+
tooltip="Play Animation"
10+
onClick={() => console.log("Play animation clicked")}
11+
/>
12+
<Toolbar3DButton
13+
icon={<i className="fas fa-pause" />}
14+
tooltip="Pause Animation"
15+
onClick={() => console.log("Pause animation clicked")}
16+
/>
17+
<Toolbar3DButton
18+
icon={<i className="fas fa-stop" />}
19+
tooltip="Stop Animation"
20+
onClick={() => console.log("Stop animation clicked")}
21+
/>
22+
<Toolbar3DButton
23+
icon={<i className="fas fa-rotate-left" />}
24+
tooltip="Rotate Left"
25+
onClick={() => console.log("Rotate left clicked")}
26+
/>
27+
<Toolbar3DButton
28+
icon={<i className="fas fa-rotate-right" />}
29+
tooltip="Rotate Right"
30+
onClick={() => console.log("Rotate right clicked")}
31+
/>
32+
</>
33+
);
34+
};
35+
36+
export default Animation3DControls;

0 commit comments

Comments
 (0)