bold, italic, underline*, size

underline doesn't render

$FontBox.js

@@ -2,27 +2,56 @@
 function $FontBox(){
 	var $fb = $(E("div")).addClass("jspaint-font-box");
 	
-	var $select_font = $(E("select"));
-	var $select_size = $(E("input")).attr({type: "number", min: 8, max: 72, value: 14});
+	var $family = $(E("select"));
+	var $size = $(E("input")).attr({type: "number", min: 8, max: 72, value: font.size});
 	var $button_group = $(E("span"));
-	var $bold = $(E("button"));
-	var $italic = $(E("button"));
-	var $underline = $(E("button"));
-	var $vertical = $(E("button")).prop("disabled", "disabled");
+	var $bold = $Toggle(0, "bold");
+	var $italic = $Toggle(1, "italic");
+	var $underline = $Toggle(2, "underline");
+	var $vertical = $Toggle(3, "vertical");
 	
 	$button_group.append($bold, $italic, $underline, $vertical);
-	$fb.append($select_font, $select_size, $button_group);
+	$fb.append($family, $size, $button_group);
 	
-	$select_font.on("change", function(){
+	var update_font = function(){
+		font.size = Number($size.val());
+		//font.family = $family.val(); (would currently just break the font)
 		$G.trigger("option-changed");
-	});
-	$select_size.on("change", function(){
-		$G.trigger("option-changed");
-	});
+	};
+	
+	$family.on("change", update_font);
+	$size.on("change", update_font);
 	
 	var $w = $Window();
 	$w.title("Fonts");
 	$w.$content.append($fb);
 	$w.center();
 	return $w;
+	
+	
+	function $Toggle(xi, thing){
+		var $button = $(E("button")).addClass("jspaint-button");
+		var $image = $(E("span")).appendTo($button);
+		$button.css({
+			width: 23,
+			height: 22
+		});
+		$image.css({
+			display: "block",
+			width: 16,
+			height: 16,
+			marginLeft: 2,
+			backgroundImage: "url(images/text-tools.png)",
+			backgroundPosition: xi*-16 + "px 0px"
+		});
+		$button.on("click", function(){
+			$button.toggleClass("selected");
+			font[thing] = $button.hasClass("selected");
+			update_font();
+		});
+		if(font[thing]){
+			$button.addClass("selected");
+		}
+		return $button;
+	}
 }

$Window.js

@@ -3,7 +3,7 @@ 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.$x = $(E("button")).addClass("jspaint-window-close-button jspaint-window-button jspaint-button").appendTo($w.$titlebar);
 	$w.$content = $(E("div")).addClass("jspaint-window-content").appendTo($w);
 	
 	if($component){
@@ -15,6 +15,10 @@ function $Window($component){
 		$w.close();
 		$w.closed = true;
 	});
+	$w.$x.on("mousedown", function(e){
+		e.preventDefault();
+		e.stopPropagation();
+	});
 	
 	$w.css({position: "absolute"});
 	

TODO.md

@@ -111,6 +111,8 @@
 	* Expanding to new lines
 	* Minimum size of 3em x 1em (that is, the width of 3 'm's by the height of one line)
 	* Fonts (with `FontBox`)
+		* Detect fonts
+		
 	* Keep the old textbox while drawing a new one (this somewhat complicates the "singleton" pattern I'm using now)
 	* Save text and record transformations so it can be saved as an SVG (or HTML?) with invisible selectable elements
 

TextBox.js

@@ -17,23 +17,29 @@ function TextBox(x, y, w, h){
 		e.stopPropagation();
 	});
 	
-	tb.fontFamily = "Arial";
-	tb.fontSize = "12pt";
-	tb.lineHeight = 20;
-	
 	var update = function(){
-		tb.color = colors[0];
-		tb.background = ({
+		font.color = colors[0];
+		font.background = ({
 			transparent: "transparent",
 			opaque: colors[1]
 		}[transparent_opaque]);
 		
 		tb.$editor.css({
-			fontFamily: tb.fontFamily,
-			fontSize: tb.fontSize,
-			lineHeight: tb.lineHeight + "px",
-			color: tb.color,
-			background: tb.background
+			fontFamily: font.family,
+			fontSize: font.size + "px",
+			fontWeight: font.bold ? "bold" : "normal",
+			fontStyle: font.italic ? "italic" : "none",
+			textDecoration: font.underline ? "underline" : "none",
+			writingMode: font.vertical ? "vertical-lr" : "",
+			oWritingMode: font.vertical ? "vertical-lr" : "",
+			msWritingMode: font.vertical ? "vertical-lr" : "",
+			mozWritingMode: font.vertical ? "vertical-lr" : "",
+			kxmlWritingMode: font.vertical ? "vertical-lr" : "",
+			khtmlWritingMode: font.vertical ? "vertical-lr" : "",
+			webkitWritingMode: font.vertical ? "vertical-lr" : "",
+			lineHeight: font.size * font.line_scale + "px",
+			color: font.color,
+			background: font.background
 		});
 	};
 	update();
@@ -133,15 +139,16 @@ TextBox.prototype.draw = function(){
 	var text = tb.$editor.val();
 	if(text){
 		undoable(0, function(){
-			ctx.fillStyle = tb.background;
+			ctx.fillStyle = font.background;
 			ctx.fillRect(tb._x, tb._y, tb._w, tb._h);
 			
-			ctx.fillStyle = tb.color;
-			ctx.font = tb.fontSize + " " + tb.fontFamily;
+			ctx.fillStyle = font.color;
+			var style_ = (font.bold ? (font.italic ? "italic bold " : "bold ") : (font.italic ? "italic " : ""));
+			ctx.font = style_ + font.size + "px " + font.family;
 			ctx.textBaseline = "middle";
 			var lines = text.split("\n")
 			for(var i=0; i<lines.length; i++){
-				ctx.fillText(lines[i], tb._x+1, tb._y+1 + (i+0.5)*tb.lineHeight, tb._w);
+				ctx.fillText(lines[i], tb._x+1, tb._y+1 + (i+0.5)*(font.size * font.line_scale), tb._w);
 			}
 		});
 	}

app.js

@@ -30,6 +30,12 @@ var colors = ["", "", ""];
 
 var selection; //the one and only Selection
 var textbox; //the one and only TextBox
+var font = {
+	family: "Arial",
+	size: 12,
+	line_scale: 20 / 12
+};
+
 var undos = []; //array of <canvas>
 var redos = []; //array of <canvas>
 var frames = []; //array of {delay:N, undos:[<canvas>], redos:[<canvas>], canvas:<canvas>}

classic.css

@@ -232,6 +232,7 @@
 }
 
 .jspaint-tool.selected,
+.jspaint-button.selected,
 .jspaint-current-colors {
 	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACAQMAAABIeJ9nAAAABlBMVEW9vb3///8EwsWUAAAADElEQVQI12NoYHAAAAHEAMFJRSpJAAAAAElFTkSuQmCC) repeat;
 }
@@ -345,9 +346,11 @@
 .jspaint-window-title {
 	padding-left: 2px;
 }
-.jspaint-window-close-button {
-	padding: 0;
+.jspaint-window-button {
 	margin: 2px;
+}
+.jspaint-button {
+	padding: 0;
 	vertical-align: middle;
 	font-size: 12px;
 	background: #c0c0c0;
@@ -357,7 +360,7 @@
 	border-bottom: 1px solid #000;
 	position: relative;
 }
-.jspaint-window-close-button:after {
+.jspaint-button:after {
 	content: '';
 	pointer-events: none;
 	position: absolute;
@@ -370,23 +373,25 @@
 	border-right: 1px solid #808080;
 	border-bottom: 1px solid #808080;
 }
-.jspaint-window-close-button:hover:active {
+.jspaint-button:hover:active,
+.jspaint-button.selected {
 	border-top: 1px solid #000;
 	border-left: 1px solid #000;
 	border-right: 1px solid #fff;
 	border-bottom: 1px solid #fff;
 }
-.jspaint-window-close-button:hover:active:after {
+.jspaint-button:hover:active:after,
+.jspaint-button.selected:after {
 	border-top: 1px solid #808080;
 	border-left: 1px solid #808080;
 	border-right: 1px solid #dfdfdf;
 	border-bottom: 1px solid #dfdfdf;
 }
-.jspaint-window-close-button:before {
+.jspaint-button:before {
 	right: 0px;
 	top: -3px;
 }
-.jspaint-window-close-button:hover:active:before {
+.jspaint-button:hover:active:before {
 	right: -1px;
 	top: -2px;
 }