drag windows; windows start centered

$Component.js

@@ -9,6 +9,8 @@ function $Component(name, orientation, $el){
 		wide: $bottom,
 	}[orientation]);
 	
+	var $w;
+	
 	var ox, oy, w, h, pos, pos_axis;
 	var dragging = false;
 	var $dock_to;
@@ -86,7 +88,12 @@ function $Component(name, orientation, $el){
 		if(!dragging) return;
 		dragging = false;
 		
+		if($w){
+			$w.close();
+			$w = null;
+		}
 		if($dock_to){
+			//dock component to $dock_to
 			$dock_to.append($c);
 			
 			pos = Math.max(pos, 0);
@@ -99,7 +106,20 @@ function $Component(name, orientation, $el){
 			$c.css("position", "relative");
 			$c.css(pos_axis, pos);
 		}else{
-			//put component in window
+			//put component in a window
+			/*
+			$w = new $Window($c);
+			$w.title(name);
+			$w.$content.append($c);
+			$w.$content.addClass({
+				tall: "jspaint-vertical",
+				wide: "jspaint-horizontal",
+			}[orientation]);
+			$w.css({
+				left: e.clientX + ox,
+				top: e.clientY + oy
+			});
+			*/
 		}
 		
 		$ghost && $ghost.remove(), $ghost = null;

$Window.js

@@ -1,23 +1,65 @@
 
-function $Window(){
+function $Window($component){
 	var $w = $(E("div")).addClass("jspaint-window").appendTo("body");
 	$w.$titlebar = $(E("div")).addClass("jspaint-window-titlebar").appendTo($w);
 	$w.$title = $(E("span")).addClass("jspaint-window-title").appendTo($w.$titlebar);
 	$w.$x = $(E("button")).addClass("jspaint-window-close-button").appendTo($w.$titlebar);
 	$w.$content = $(E("div")).addClass("jspaint-window-content").appendTo($w);
 	
+	if($component){
+		$w.addClass("jspaint-component-window");
+	}
+	
 	$w.$x.on("click", function(){
 		$w.close();
 	});
 	
+	$w.css({position: "absolute"});
+	
+	$w.apply_bounds = function(){
+		$w.css({
+			left: Math.max(0, Math.min(innerWidth - $w.width(), $w[0].getBoundingClientRect().left)),
+			top: Math.max(0, Math.min(innerHeight - $w.height(), $w[0].getBoundingClientRect().top)),
+		});
+	};
+	
+	$w.center = function(){
+		console.log($w.width(), $w.height());
+		$w.css({
+			left: (innerWidth - $w.width()) / 2,
+			top: (innerHeight - $w.height()) / 2,
+		});
+		$w.apply_bounds();
+	};
+	
+	setTimeout(function(){ $w.center(); });
+	
+	$(window).on("resize", $w.apply_bounds);
+	
+	var mx, my;
+	var drag = function(e){
+		$w.css({
+			left: e.clientX - mx,
+			top: e.clientY - my,
+		});
+	};
+	$w.$titlebar.on("mousedown", function(e){
+		mx = e.clientX - $w[0].getBoundingClientRect().left;
+		my = e.clientY - $w[0].getBoundingClientRect().top;
+		$G.on("mousemove", drag);
+	});
+	$G.on("mouseup", function(e){
+		$G.off("mousemove", drag);
+	});
+	
 	$w.$Button = function(text, handler){
 		$w.$content.append(
 			$(E("button"))
-				.text(text)
-				.on("click", function(){
-					handler();
-					$w.close();
-				})
+			.text(text)
+			.on("click", function(){
+				handler();
+				$w.close();
+			})
 		);
 	};
 	$w.title = function(title){
@@ -29,14 +71,11 @@ function $Window(){
 		}
 	};
 	$w.close = function(){
+		if($component){
+			$component.detach();
+		}
 		$w.remove();
 	};
 	
-	$w.css({
-		position: "absolute",
-		right: 50,
-		top: 50
-	});
-	
 	return $w;
 }

TODO.md

@@ -26,6 +26,7 @@
 	`var mouse_was_pressed = false;`
 * BUG: status text gets cut off
 	Also, it should gracefully push the dimension displays off the edge instead of covering up the text with usually blank space
+* BUG: cropping doesn't update the canvas handles
 
 * Handle some edge cases
 	* Undoing/redoing should stop brush drawing
@@ -112,7 +113,7 @@ This isn't in mspaint, but maybe use should be able to click (double-click?) one
 
 ### Components / Windows
 * Drag components into a window
-* Drag windows
+* Drag windows by the contained component seamlessly
 * Double-click a component window's titlebar to dock the component to its most recent location.
 
 

functions.js

@@ -192,7 +192,9 @@ function render_history_as_gif(){
 		var url = URL.createObjectURL(blob);
 		$output.empty().append(
 			$(E("a")).attr({href: url, target: "_blank"}).append(
-				$(E("img")).attr({src: url})
+				$(E("img")).on("load", function(){
+					$win.center();
+				}).attr({src: url})
 			).on("click", function(e){
 				$win.close();
 				if(window.chrome && chrome.fileSystem && chrome.fileSystem.chooseEntry){

layout.css

@@ -168,4 +168,4 @@ html, body, .jspaint {
 
 ::before, ::after {
 	pointer-events: none;
-}
+}

print.css

@@ -26,4 +26,4 @@ c-area {
 
 * {
 	background: transparent !important;
-}
+}