diff --git a/src/ui/React/LogBoxManager.tsx b/src/ui/React/LogBoxManager.tsx index 5dcd4c7ef..26899e882 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,8 @@ const useStyles = makeStyles((theme: Theme) => export const logBoxBaseZIndex = 1500; function LogWindow(props: IProps): React.ReactElement { + const draggableRef = useRef(null); + const rootRef = useRef(null) const [script, setScript] = useState(props.script); const classes = useStyles(); const container = useRef(null); @@ -185,8 +188,50 @@ function LogWindow(props: IProps): React.ReactElement { return classes.primary; } + // And trigger fakeDrag when the window is resized + useEffect(() => { + window.addEventListener("resize", onResize); + return () => { + window.removeEventListener("resize", onResize); + }; + }, []); + + const onResize = debounce((): void => { + const node = draggableRef?.current; + if (!node) return; + + if(!isOnScreen(node)) { + resetPosition(); + } + }, 100); + + 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 ( - + - + {title()} @@ -245,4 +290,4 @@ function LogWindow(props: IProps): React.ReactElement { ); -} +} \ No newline at end of file