made log box resizable

This commit is contained in:
Olivier Gagnon 2021-10-05 01:23:20 -04:00
parent 70796e7674
commit 227fbd7060
8 changed files with 90 additions and 35 deletions

38
dist/vendor.bundle.js vendored

File diff suppressed because one or more lines are too long

@ -53,4 +53,5 @@
<body> <body>
<div id="root"/> <div id="root"/>
<script type="text/javascript" src="dist/vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script></body> <script type="text/javascript" src="dist/vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script></body>
<!-- http://plaza.dsolver.ca/m/hydroflame4418 -->
</html> </html>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

39
package-lock.json generated

@ -21,6 +21,7 @@
"@types/numeral": "0.0.25", "@types/numeral": "0.0.25",
"@types/react": "^17.0.21", "@types/react": "^17.0.21",
"@types/react-dom": "^17.0.9", "@types/react-dom": "^17.0.9",
"@types/react-resizable": "^1.7.3",
"acorn": "^8.4.1", "acorn": "^8.4.1",
"acorn-walk": "^8.1.1", "acorn-walk": "^8.1.1",
"ajv": "^5.1.5", "ajv": "^5.1.5",
@ -55,6 +56,7 @@
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-draggable": "^4.4.4", "react-draggable": "^4.4.4",
"react-modal": "^3.12.1", "react-modal": "^3.12.1",
"react-resizable": "^3.0.4",
"sprintf-js": "^1.1.1", "sprintf-js": "^1.1.1",
"tapable": "^1.0.0", "tapable": "^1.0.0",
"treant-js": "^1.0.1", "treant-js": "^1.0.1",
@ -4674,6 +4676,14 @@
"@types/react": "*" "@types/react": "*"
} }
}, },
"node_modules/@types/react-resizable": {
"version": "1.7.3",
"resolved": "https://registry.npmjs.org/@types/react-resizable/-/react-resizable-1.7.3.tgz",
"integrity": "sha512-DAx+hdnHFMJHgl8geiKo3jLt1GCT838SwQixjCtbRRfqCBawAKriVLCZ1nvp7B/2Pxd94MWod8NyJEnAAmNHNA==",
"dependencies": {
"@types/react": "*"
}
},
"node_modules/@types/react-transition-group": { "node_modules/@types/react-transition-group": {
"version": "4.4.1", "version": "4.4.1",
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.1.tgz", "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.1.tgz",
@ -22144,6 +22154,18 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/react-resizable": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/react-resizable/-/react-resizable-3.0.4.tgz",
"integrity": "sha512-StnwmiESiamNzdRHbSSvA65b0ZQJ7eVQpPusrSmcpyGKzC0gojhtO62xxH6YOBmepk9dQTBi9yxidL3W4s3EBA==",
"dependencies": {
"prop-types": "15.x",
"react-draggable": "^4.0.3"
},
"peerDependencies": {
"react": ">= 16.3"
}
},
"node_modules/react-transition-group": { "node_modules/react-transition-group": {
"version": "4.4.1", "version": "4.4.1",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
@ -31587,6 +31609,14 @@
"@types/react": "*" "@types/react": "*"
} }
}, },
"@types/react-resizable": {
"version": "1.7.3",
"resolved": "https://registry.npmjs.org/@types/react-resizable/-/react-resizable-1.7.3.tgz",
"integrity": "sha512-DAx+hdnHFMJHgl8geiKo3jLt1GCT838SwQixjCtbRRfqCBawAKriVLCZ1nvp7B/2Pxd94MWod8NyJEnAAmNHNA==",
"requires": {
"@types/react": "*"
}
},
"@types/react-transition-group": { "@types/react-transition-group": {
"version": "4.4.1", "version": "4.4.1",
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.1.tgz", "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.1.tgz",
@ -45544,6 +45574,15 @@
"integrity": "sha512-PgidR3wST3dDYKr6b4pJoqQFpPGNKDSCDx4cZoshjXipw3LzO7mG1My2pwEzz2JVkF+inx3xRpDeQLFQGH/hsQ==", "integrity": "sha512-PgidR3wST3dDYKr6b4pJoqQFpPGNKDSCDx4cZoshjXipw3LzO7mG1My2pwEzz2JVkF+inx3xRpDeQLFQGH/hsQ==",
"dev": true "dev": true
}, },
"react-resizable": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/react-resizable/-/react-resizable-3.0.4.tgz",
"integrity": "sha512-StnwmiESiamNzdRHbSSvA65b0ZQJ7eVQpPusrSmcpyGKzC0gojhtO62xxH6YOBmepk9dQTBi9yxidL3W4s3EBA==",
"requires": {
"prop-types": "15.x",
"react-draggable": "^4.0.3"
}
},
"react-transition-group": { "react-transition-group": {
"version": "4.4.1", "version": "4.4.1",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",

@ -22,6 +22,7 @@
"@types/numeral": "0.0.25", "@types/numeral": "0.0.25",
"@types/react": "^17.0.21", "@types/react": "^17.0.21",
"@types/react-dom": "^17.0.9", "@types/react-dom": "^17.0.9",
"@types/react-resizable": "^1.7.3",
"acorn": "^8.4.1", "acorn": "^8.4.1",
"acorn-walk": "^8.1.1", "acorn-walk": "^8.1.1",
"ajv": "^5.1.5", "ajv": "^5.1.5",
@ -56,6 +57,7 @@
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-draggable": "^4.4.4", "react-draggable": "^4.4.4",
"react-modal": "^3.12.1", "react-modal": "^3.12.1",
"react-resizable": "^3.0.4",
"sprintf-js": "^1.1.1", "sprintf-js": "^1.1.1",
"tapable": "^1.0.0", "tapable": "^1.0.0",
"treant-js": "^1.0.1", "treant-js": "^1.0.1",

@ -53,4 +53,5 @@
<body> <body>
<div id="root" /> <div id="root" />
</body> </body>
<!-- http://plaza.dsolver.ca/m/hydroflame4418 -->
</html> </html>

@ -7,6 +7,8 @@ import Box from "@mui/material/Box";
import Button from "@mui/material/Button"; import Button from "@mui/material/Button";
import Paper from "@mui/material/Paper"; import Paper from "@mui/material/Paper";
import Draggable from "react-draggable"; import Draggable from "react-draggable";
import { ResizableBox } from "react-resizable";
import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
export const LogBoxEvents = new EventEmitter<[RunningScript]>(); export const LogBoxEvents = new EventEmitter<[RunningScript]>();
@ -106,12 +108,12 @@ function LogWindow(props: IProps): React.ReactElement {
display: "flex", display: "flex",
flexFlow: "column", flexFlow: "column",
backgroundColor: "gray", backgroundColor: "gray",
width: "50%",
position: "fixed", position: "fixed",
left: "50%", left: "50%",
top: "40%", top: "40%",
margin: "-10% 0 0 -25%", margin: "-10% 0 0 -25%",
height: "auto",
maxHeight: "50%", maxHeight: "50%",
zIndex: 10, zIndex: 10,
border: "2px solid $hacker-green", border: "2px solid $hacker-green",
@ -134,17 +136,27 @@ function LogWindow(props: IProps): React.ReactElement {
</Box> </Box>
</Box> </Box>
</Paper> </Paper>
<Paper> <Paper sx={{ overflow: "scroll", overflowWrap: "break-word", whiteSpace: "pre-line" }}>
<Box maxHeight="25vh" overflow="scroll" sx={{ overflowWrap: "break-word", whiteSpace: "pre-line" }}> <ResizableBox
{props.script.logs.map( height={500}
(line: string, i: number): JSX.Element => ( width={500}
<Typography key={i}> handle={
{line} <span style={{ position: "absolute", right: 0, bottom: 0 }}>
<br /> <ArrowForwardIosIcon color="primary" style={{ transform: "rotate(45deg)" }} />
</Typography> </span>
), }
)} >
</Box> <Box>
{props.script.logs.map(
(line: string, i: number): JSX.Element => (
<Typography key={i}>
{line}
<br />
</Typography>
),
)}
</Box>
</ResizableBox>
</Paper> </Paper>
</Paper> </Paper>
</Draggable> </Draggable>