use react-draggable

package-lock.json

@@ -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",

package.json

@@ -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",

src/ui/React/LogBoxManager.tsx

@@ -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,6 +100,7 @@ function LogWindow(props: IProps): React.ReactElement {
   }
 
   return (
+    <Draggable handle="#drag">
       <Paper
         style={{
           display: "flex",
@@ -135,7 +123,7 @@ function LogWindow(props: IProps): React.ReactElement {
             cursor: "grab",
           }}
         >
-        <Box display="flex" alignItems="center" onMouseDown={drag}>
+          <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>
@@ -159,5 +147,6 @@ function LogWindow(props: IProps): React.ReactElement {
           </Box>
         </Paper>
       </Paper>
+    </Draggable>
   );
 }