add a Slider

2023-07-13 16:06:22 +08:00
parent cb2bb8663f
commit eddf31332f
4 changed files with 83 additions and 2 deletions
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -8,6 +8,7 @@ import LeftBar from '../components/LeftBar';
 import BottomBar from '../components/BottomBar';
 import RightBar from '../components/RightBar';
 import CenterTopData from '../components/CenterTopData';
+import Slider from '../components/Slider';

 import V3DBG from '../assets/V3DBG.png';

@@ -17,11 +18,43 @@ import { SocketContextProvider } from '../store/socket-data-provider';

 export default function index() {
 	const [width, setWidth] = useState(window.innerWidth);
+	const [value, setValue] = useState(100);
+
+	const v = (value / 100).toFixed(2);
+	const styles = {
+		transform: `scale(${v})`,
+		// transform: `scale(${v * 24 / 33}, ${v})`,
+		transformOrigin: 'top left',
+	};
+
+	useEffect(() => {
+		let fn = (e) => {
+			console.log('add fn');
+			if (e.shiftKey && e.key === 'L') {
+				document.getElementById('slider').classList.toggle('show');
+			}
+		};
+		let fn2 = () => {
+			console.log('add fn2');
+			setTimeout(() => {
+				document.getElementById('slider').classList.remove('show');
+			}, 200);
+		};
+
+		document.addEventListener('keydown', fn);
+		document.getElementById('slider').addEventListener('mouseleave', fn2);
+
+		return () => {
+			console.log('remove fn, fn2');
+			document.removeEventListener('keydown', fn);
+			document.getElementById('slider').removeEventListener('mouseleave', fn2);
+		};
+	}, [value]);

 	return (
 		// <FullScreenContainer>
 		<SocketContextProvider>
-			<div id="FullScreen">
+			<div id="FullScreen" style={styles}>
 				<Head />
 				<div className="Main">
 					<LeftBar />
@@ -38,6 +71,7 @@ export default function index() {
 					<RightBar />
 				</div>
 			</div>
+			<Slider handleSlide={setValue} />
 		</SocketContextProvider>
 		// </FullScreenContainer>
 	);