mirror of
https://github.com/bitburner-official/bitburner-src.git
synced 2024-12-22 14:12:27 +01:00
use react-draggable
This commit is contained in:
parent
bb0bdb776b
commit
70796e7674
23
package-lock.json
generated
23
package-lock.json
generated
@ -53,6 +53,7 @@
|
||||
"numeral": "2.0.6",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-draggable": "^4.4.4",
|
||||
"react-modal": "^3.12.1",
|
||||
"sprintf-js": "^1.1.1",
|
||||
"tapable": "^1.0.0",
|
||||
@ -22097,6 +22098,19 @@
|
||||
"react": "17.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/react-draggable": {
|
||||
"version": "4.4.4",
|
||||
"resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.4.tgz",
|
||||
"integrity": "sha512-6e0WdcNLwpBx/YIDpoyd2Xb04PB0elrDrulKUgdrIlwuYvxh5Ok9M+F8cljm8kPXXs43PmMzek9RrB1b7mLMqA==",
|
||||
"dependencies": {
|
||||
"clsx": "^1.1.1",
|
||||
"prop-types": "^15.6.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">= 16.3.0",
|
||||
"react-dom": ">= 16.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-is": {
|
||||
"version": "16.8.3",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.3.tgz",
|
||||
@ -45494,6 +45508,15 @@
|
||||
"scheduler": "^0.20.2"
|
||||
}
|
||||
},
|
||||
"react-draggable": {
|
||||
"version": "4.4.4",
|
||||
"resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.4.tgz",
|
||||
"integrity": "sha512-6e0WdcNLwpBx/YIDpoyd2Xb04PB0elrDrulKUgdrIlwuYvxh5Ok9M+F8cljm8kPXXs43PmMzek9RrB1b7mLMqA==",
|
||||
"requires": {
|
||||
"clsx": "^1.1.1",
|
||||
"prop-types": "^15.6.0"
|
||||
}
|
||||
},
|
||||
"react-is": {
|
||||
"version": "16.8.3",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.3.tgz",
|
||||
|
@ -54,6 +54,7 @@
|
||||
"numeral": "2.0.6",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-draggable": "^4.4.4",
|
||||
"react-modal": "^3.12.1",
|
||||
"sprintf-js": "^1.1.1",
|
||||
"tapable": "^1.0.0",
|
||||
|
@ -6,6 +6,7 @@ import Typography from "@mui/material/Typography";
|
||||
import Box from "@mui/material/Box";
|
||||
import Button from "@mui/material/Button";
|
||||
import Paper from "@mui/material/Paper";
|
||||
import Draggable from "react-draggable";
|
||||
|
||||
export const LogBoxEvents = new EventEmitter<[RunningScript]>();
|
||||
|
||||
@ -64,20 +65,6 @@ function LogWindow(props: IProps): React.ReactElement {
|
||||
return () => clearInterval(id);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
function closeHandler(event: KeyboardEvent): void {
|
||||
if (event.keyCode === 27) {
|
||||
props.onClose();
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("keydown", closeHandler);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener("keydown", closeHandler);
|
||||
};
|
||||
}, []);
|
||||
|
||||
function kill(): void {
|
||||
killWorkerScript(props.script, props.script.server, true);
|
||||
props.onClose();
|
||||
@ -113,51 +100,53 @@ function LogWindow(props: IProps): React.ReactElement {
|
||||
}
|
||||
|
||||
return (
|
||||
<Paper
|
||||
style={{
|
||||
display: "flex",
|
||||
flexFlow: "column",
|
||||
backgroundColor: "gray",
|
||||
width: "50%",
|
||||
position: "fixed",
|
||||
left: "50%",
|
||||
top: "40%",
|
||||
margin: "-10% 0 0 -25%",
|
||||
height: "auto",
|
||||
maxHeight: "50%",
|
||||
zIndex: 10,
|
||||
border: "2px solid $hacker-green",
|
||||
}}
|
||||
ref={container}
|
||||
>
|
||||
<Draggable handle="#drag">
|
||||
<Paper
|
||||
style={{
|
||||
cursor: "grab",
|
||||
display: "flex",
|
||||
flexFlow: "column",
|
||||
backgroundColor: "gray",
|
||||
width: "50%",
|
||||
position: "fixed",
|
||||
left: "50%",
|
||||
top: "40%",
|
||||
margin: "-10% 0 0 -25%",
|
||||
height: "auto",
|
||||
maxHeight: "50%",
|
||||
zIndex: 10,
|
||||
border: "2px solid $hacker-green",
|
||||
}}
|
||||
ref={container}
|
||||
>
|
||||
<Box display="flex" alignItems="center" onMouseDown={drag}>
|
||||
<Typography color="primary" variant="h6" noWrap component="div">
|
||||
{props.script.filename} {props.script.args.map((x: any): string => `${x}`).join(" ")}
|
||||
</Typography>
|
||||
<Paper
|
||||
style={{
|
||||
cursor: "grab",
|
||||
}}
|
||||
>
|
||||
<Box id="drag" display="flex" alignItems="center">
|
||||
<Typography color="primary" variant="h6" noWrap component="div">
|
||||
{props.script.filename} {props.script.args.map((x: any): string => `${x}`).join(" ")}
|
||||
</Typography>
|
||||
|
||||
<Box display="flex" marginLeft="auto">
|
||||
<Button onClick={kill}>Kill Script</Button>
|
||||
<Button onClick={props.onClose}>Close</Button>
|
||||
<Box display="flex" marginLeft="auto">
|
||||
<Button onClick={kill}>Kill Script</Button>
|
||||
<Button onClick={props.onClose}>Close</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Paper>
|
||||
<Paper>
|
||||
<Box maxHeight="25vh" overflow="scroll" sx={{ overflowWrap: "break-word", whiteSpace: "pre-line" }}>
|
||||
{props.script.logs.map(
|
||||
(line: string, i: number): JSX.Element => (
|
||||
<Typography key={i}>
|
||||
{line}
|
||||
<br />
|
||||
</Typography>
|
||||
),
|
||||
)}
|
||||
</Box>
|
||||
</Paper>
|
||||
</Paper>
|
||||
<Paper>
|
||||
<Box maxHeight="25vh" overflow="scroll" sx={{ overflowWrap: "break-word", whiteSpace: "pre-line" }}>
|
||||
{props.script.logs.map(
|
||||
(line: string, i: number): JSX.Element => (
|
||||
<Typography key={i}>
|
||||
{line}
|
||||
<br />
|
||||
</Typography>
|
||||
),
|
||||
)}
|
||||
</Box>
|
||||
</Paper>
|
||||
</Paper>
|
||||
</Draggable>
|
||||
);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user