From c25067c0620502c5a8d7f2587c4dcf5490607ae2 Mon Sep 17 00:00:00 2001
From: SlyCedix <slycedix@gmail.com>
Date: Wed, 12 Jan 2022 20:56:46 -0500
Subject: [PATCH 1/2] bound log box to parent div

---
 src/ui/React/LogBoxManager.tsx | 37 ++++++++++++++++++++++++++++++++--
 1 file changed, 35 insertions(+), 2 deletions(-)

diff --git a/src/ui/React/LogBoxManager.tsx b/src/ui/React/LogBoxManager.tsx
index 5dcd4c7ef..224cd6ae0 100644
--- a/src/ui/React/LogBoxManager.tsx
+++ b/src/ui/React/LogBoxManager.tsx
@@ -17,6 +17,7 @@ import { GetServer } from "../../Server/AllServers";
 import { Theme } from "@mui/material";
 import { findRunningScript } from "../../Script/ScriptHelpers";
 import { Player } from "../../Player";
+import { debounce } from "lodash";
 
 let layerCounter = 0;
 
@@ -118,6 +119,7 @@ const useStyles = makeStyles((theme: Theme) =>
 export const logBoxBaseZIndex = 1500;
 
 function LogWindow(props: IProps): React.ReactElement {
+  const draggableRef = useRef<HTMLDivElement>(null);
   const [script, setScript] = useState(props.script);
   const classes = useStyles();
   const container = useRef<HTMLDivElement>(null);
@@ -185,8 +187,39 @@ function LogWindow(props: IProps): React.ReactElement {
     return classes.primary;
   }
 
+  // Trigger fakeDrag once to make sure loaded data is not outside bounds
+  useEffect(() => fakeDrag(), []);
+
+  // And trigger fakeDrag when the window is resized
+  useEffect(() => {
+    window.addEventListener("resize", fakeDrag);
+    return () => {
+      window.removeEventListener("resize", fakeDrag);
+    };
+  }, []);
+
+
+  const fakeDrag = debounce((): void => {
+    const node = draggableRef?.current;
+    if (!node) return;
+
+    // No official way to trigger an onChange to recompute the bounds
+    // See: https://github.com/react-grid-layout/react-draggable/issues/363#issuecomment-947751127
+    triggerMouseEvent(node, "mouseover");
+    triggerMouseEvent(node, "mousedown");
+    triggerMouseEvent(document, "mousemove");
+    triggerMouseEvent(node, "mouseup");
+    triggerMouseEvent(node, "click");
+  }, 100);
+
+  const triggerMouseEvent = (node: HTMLDivElement | Document, eventType: string): void => {
+    const clickEvent = document.createEvent("MouseEvents");
+    clickEvent.initEvent(eventType, true, true);
+    node.dispatchEvent(clickEvent);
+  };
+
   return (
-    <Draggable handle=".drag">
+    <Draggable handle=".drag" bounds="body">
       <Paper
         style={{
           display: "flex",
@@ -205,7 +238,7 @@ function LogWindow(props: IProps): React.ReactElement {
               cursor: "grab",
             }}
           >
-            <Box className="drag" display="flex" alignItems="center">
+            <Box className="drag" display="flex" alignItems="center" ref={draggableRef}>
               <Typography color="primary" variant="h6" title={title(true)}>
                 {title()}
               </Typography>

From 8d7b71c5aa3ee7984dd86aeccc935afcfe98d846 Mon Sep 17 00:00:00 2001
From: Cyn <SlyCedix@gmail.com>
Date: Sat, 15 Jan 2022 20:51:12 -0500
Subject: [PATCH 2/2] Prevent dragging log window off screen & reset log window
 position if resized off screen

---
 src/ui/React/LogBoxManager.tsx | 54 +++++++++++++++++++++-------------
 1 file changed, 33 insertions(+), 21 deletions(-)

diff --git a/src/ui/React/LogBoxManager.tsx b/src/ui/React/LogBoxManager.tsx
index 224cd6ae0..26899e882 100644
--- a/src/ui/React/LogBoxManager.tsx
+++ b/src/ui/React/LogBoxManager.tsx
@@ -120,6 +120,7 @@ export const logBoxBaseZIndex = 1500;
 
 function LogWindow(props: IProps): React.ReactElement {
   const draggableRef = useRef<HTMLDivElement>(null);
+  const rootRef = useRef<Draggable>(null)
   const [script, setScript] = useState(props.script);
   const classes = useStyles();
   const container = useRef<HTMLDivElement>(null);
@@ -187,39 +188,50 @@ function LogWindow(props: IProps): React.ReactElement {
     return classes.primary;
   }
 
-  // Trigger fakeDrag once to make sure loaded data is not outside bounds
-  useEffect(() => fakeDrag(), []);
-
   // And trigger fakeDrag when the window is resized
   useEffect(() => {
-    window.addEventListener("resize", fakeDrag);
+    window.addEventListener("resize", onResize);
     return () => {
-      window.removeEventListener("resize", fakeDrag);
+      window.removeEventListener("resize", onResize);
     };
   }, []);
 
-
-  const fakeDrag = debounce((): void => {
+  const onResize = debounce((): void => {
     const node = draggableRef?.current;
     if (!node) return;
 
-    // No official way to trigger an onChange to recompute the bounds
-    // See: https://github.com/react-grid-layout/react-draggable/issues/363#issuecomment-947751127
-    triggerMouseEvent(node, "mouseover");
-    triggerMouseEvent(node, "mousedown");
-    triggerMouseEvent(document, "mousemove");
-    triggerMouseEvent(node, "mouseup");
-    triggerMouseEvent(node, "click");
+    if(!isOnScreen(node)) {
+      resetPosition();
+    }
   }, 100);
 
-  const triggerMouseEvent = (node: HTMLDivElement | Document, eventType: string): void => {
-    const clickEvent = document.createEvent("MouseEvents");
-    clickEvent.initEvent(eventType, true, true);
-    node.dispatchEvent(clickEvent);
-  };
+  const isOnScreen = (node: HTMLDivElement): boolean => {
+    const bounds = node.getBoundingClientRect();
+
+    return !(bounds.right < 0 ||
+            bounds.bottom < 0 ||
+            bounds.left > innerWidth ||
+            bounds.top > outerWidth);
+  }
+
+  const resetPosition = (): void => {
+    const node = rootRef?.current;
+    if (!node) return;
+    const state = node.state as {x: number; y: number};
+    state.x = 0;
+    state.y = 0;
+    node.setState(state);
+  }
+
+  const boundToBody = (e: any): void | false => {
+    if(e.clientX < 0 ||
+       e.clientY < 0 ||
+       e.clientX > innerWidth ||
+       e.clientY > innerHeight) return false;
+  }
 
   return (
-    <Draggable handle=".drag" bounds="body">
+    <Draggable handle=".drag" onDrag={boundToBody} ref={rootRef}>
       <Paper
         style={{
           display: "flex",
@@ -278,4 +290,4 @@ function LogWindow(props: IProps): React.ReactElement {
       </Paper>
     </Draggable>
   );
-}
+}
\ No newline at end of file