Loosen constraints on window positions

1j01 · Feb 1, 2021 · efc65e5 · efc65e5
1 parent 57586fa
commit efc65e5
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 7 deletions.
diff --git a/lib/os-gui/$Window.js b/lib/os-gui/$Window.js
@@ -256,10 +256,28 @@ function $Window(options){
 	});
 	// @TODO: restore last focused controls when clicking/mousing down on the window
 
-	$w.applyBounds = function(){
+	$w.applyBounds = () => {
 		$w.css({
-			left: Math.max(0, Math.min(document.body.scrollWidth - $w.width(), $w.position().left)),
-			top: Math.max(0, Math.min(document.body.scrollHeight - $w.height(), $w.position().top)),
+			left: Math.max(0, Math.min(innerWidth - $w.outerWidth(), $w[0].getBoundingClientRect().left)),
+			top: Math.max(0, Math.min(innerHeight - $w.outerHeight(), $w[0].getBoundingClientRect().top)),
+		});
+	};
+
+	$w.bringTitleBarOnScreen = () => {
+		// Try to make the titlebar always accessible
+		const min_horizontal_pixels_on_screen = 40; // enough for space past a close button
+		$w.css({
+			left: Math.max(
+				min_horizontal_pixels_on_screen - $w.outerWidth(),
+				Math.min(
+					innerWidth - min_horizontal_pixels_on_screen,
+					$w[0].getBoundingClientRect().left
+				)
+			),
+			top: Math.max(0, Math.min(
+				innerHeight - $w.$titlebar.outerHeight() - 5,
+				$w[0].getBoundingClientRect().top
+			)),
 		});
 	};
 
@@ -272,7 +290,7 @@ function $Window(options){
 	};
 
 
-	$G.on("resize", $w.applyBounds);
+	$G.on("resize", $w.bringTitleBarOnScreen);
 
 	var drag_offset_x, drag_offset_y;
 	var mouse_x, mouse_y;
@@ -305,7 +323,9 @@ function $Window(options){
 		$G.off("pointermove", update_drag);
 		$G.off("scroll", update_drag);
 		$("body").removeClass("dragging");
-		$w.applyBounds();
+		// $w.applyBounds(); // Windows doesn't really try to keep windows on screen
+		// but you also can't really drag off of the desktop, whereas here you can drag to way outside the web page.
+		$w.bringTitleBarOnScreen();
 	});
 	$w.$titlebar.on("dblclick", function(e){
 		if($component){

diff --git a/src/$ToolWindow.js b/src/$ToolWindow.js
@@ -105,6 +105,24 @@ function $ToolWindow($component){
 		});
 	};
 
+	$w.bringTitleBarOnScreen = () => {
+		// Try to make the titlebar always accessible
+		const min_horizontal_pixels_on_screen = 40; // enough for space past a close button
+		$w.css({
+			left: Math.max(
+				min_horizontal_pixels_on_screen - $w.outerWidth(),
+				Math.min(
+					innerWidth - min_horizontal_pixels_on_screen,
+					$w[0].getBoundingClientRect().left
+				)
+			),
+			top: Math.max(0, Math.min(
+				innerHeight - $w.$titlebar.outerHeight() - 5,
+				$w[0].getBoundingClientRect().top
+			)),
+		});
+	};
+
 	$w.center = () => {
 		$w.css({
 			left: (innerWidth - $w.outerWidth()) / 2,
@@ -114,7 +132,7 @@ function $ToolWindow($component){
 	};
 
 
-	$G.on("resize", $w.applyBounds);
+	$G.on("resize", $w.bringTitleBarOnScreen);
 
 	let drag_offset_x, drag_offset_y;
 	const drag = e => {
@@ -136,7 +154,10 @@ function $ToolWindow($component){
 		$G.on("pointermove", drag);
 		$("body").addClass("dragging");
 		const stop_drag = ()=> {
-			$w.applyBounds();
+			// $w.applyBounds(); // Windows doesn't really try to keep windows on screen
+			// but you also can't really drag off of the desktop, whereas here you can drag to way outside the web page.
+			$w.bringTitleBarOnScreen();
+
 			$G.off("pointermove", drag);
 			$G.off("pointerup pointercancel", stop_drag);
 			$("body").removeClass("dragging");