Started implementation of rotated-cluster support.

-- Each key has a rotation angle, and center of rotation; available in
the editor.
-- Displaying crosshairs in the editor for the center of rotation.
-- Keyboard shortcuts to move CoR, and change angle.
-- Keyboard height is correctly calculated.
TODO:
-- Serialization is still wonky.
-- Can't click on rotated keys to select them.

Author: Ian Prest

extensions.js

@@ -22,12 +22,32 @@
 		String.prototype.trim = function() { this.trimStart().trimEnd(); };
 	}
 
+
+	// a c e
+	// b d f
+	// 0 0 1
+	function Matrix(a,b,c,d,e,f) { this.a = a || 1; this.b = b || 0; this.c = c || 0; this.d = d || 1; this.e = e || 0; this.f = f || 0; }
+	Matrix.prototype.mult = function(Y) {
+		return new Matrix(this.a*Y.a + this.c*Y.b, this.b*Y.a + this.d*Y.b, this.a*Y.c + this.c*Y.d, this.b*Y.c + this.d*Y.d, this.a*Y.e + this.c*Y.f + this.e, this.b*Y.e + this.d*Y.f + this.f);																		
+	};
+	Matrix.prototype.transformPt = function(pt) {
+		return { x: this.a*pt.x + this.c*pt.y + this.e, y: this.b*pt.x + this.d*pt.y + this.f };
+	};
+	Math.Matrix = function(a,b,c,d,e,f) { return new Matrix(a,b,c,d,e,f); }
+	Math.transMatrix = function(x,y) {
+		return new Matrix(1, 0, 0, 1, x, y);
+	}
+	Math.rotMatrix = function(angleInDegrees) {
+		var angleInRad = (angleInDegrees*Math.PI/180.0);
+		var cos = Math.cos(angleInRad), sin = Math.sin(angleInRad);
+		return new Matrix(cos, sin, -sin, cos, 0, 0);
+	};
+
 	// Extend array objects with a last() function that returns the last element 
 	// in the array.
 	if(!Array.prototype.last) {
 		Array.prototype.last = function() {
 			return this[this.length-1];
-		}
+		};
 	}
-
 }());

kb.css

@@ -190,6 +190,18 @@ html, body {
 .hidden { display: none; }
 .error { border: solid 2px rgb(217,83,79); }
 #selectionRectangle { position: absolute; border: dashed 2px red; }
+#rotationCrosshairs { 	
+	display: none;
+	position: absolute;
+	margin: 0px;
+	padding: 0px;
+	font-size: 25px;
+	line-height: 23px;
+	width: 25px;
+	height: 25px;
+	color: black;
+	text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
+}
 
 #rawdata { 
 	width: 100%;
@@ -228,4 +240,4 @@ html, body {
 .hint:before, .hint:after, [data-hint]:before, [data-hint]:after { -webkit-transition: 0.1s ease; -moz-transition: 0.1s ease; transition: 0.1s ease; }
 
 #swap-colors { position: relative; top: 15px; }
-.color-name { display: inline-block; min-width: 3em; font-size: 10px; white-space: nowrap; }
+.color-name { display: inline-block; min-width: 3em; font-size: 10px; white-space: nowrap; }

kb.html

@@ -110,6 +110,12 @@
 					 'shift-right':'sizeKeys(.25,0,$event)',
 					 'shift-up':'sizeKeys(0,-.25,$event)',
 					 'shift-down':'sizeKeys(0,.25,$event)',
+					 'pageup':'rotateKeys(-15,$event)',
+					 'pagedown':'rotateKeys(15,$event)',
+					 'ctrl-left':'moveCenterKeys(-.25,0,$event)', 
+					 'ctrl-right':'moveCenterKeys(.25,0,$event)', 
+					 'ctrl-up':'moveCenterKeys(0,-.25,$event)', 
+					 'ctrl-down':'moveCenterKeys(0,.25,$event)', 
 					 delete:'deleteKeys()', 
 					 insert:'addKey()',
 					 74: 'prevKey($event)', 
@@ -129,6 +135,7 @@
 
 		<div ng-repeat="key in keys()" 
 			 class="key {{key.profile}}" 
+			 style="{{rotationStyle(key)}}"
 			 ng-mouseover="hoveredKey=key" 
 			 ng-mouseleave="hoveredKey=null" 
 			 ng-class="{hover: hoveredKey==key, selected: selectedKeys.indexOf(key)>=0}"
@@ -139,6 +146,7 @@
 		{{calcKbHeight()}}
 	</div>
 	<div id="selectionRectangle" ng-style="{display:selRect.display, left:selRect.l+'px', width:selRect.w+'px', top:selRect.t+'px', height:selRect.h+'px'}"></div>
+	<div id="rotationCrosshairs" ng-style="{display:multi.crosshairs, left:(keyboardLeft()+multi.crosshairs_x-5)+'px', top:(keyboardTop()+multi.crosshairs_y-7)+'px'}"><i class="icon-screenshot"></i></div>
 
 	<ul class="nav nav-tabs">
 		<li ng-class="{active:selTab==0}"><a ng-click="selTab=0" data-toggle="tab"><i class="fa fa-edit"></i> Properties</a></li>
@@ -267,6 +275,14 @@
 						<div class="color-name">{{colorName(multi.text)}}</div>
 					</div>
 				</div>
+				<div class="control-group">
+					<label class="control-label" for="angleeditor">Rotation:</label>
+					<div class="controls hint--top hint--rounded" data-hint="Specify the angle (in degrees) by which to rotate the keycaps, and the x &amp; y coordinates of the center of rotation.">
+						<input id="angleeditor" size="3" type="number" min="-180" max="180" step="15" ng-model="multi.rotation_angle" ng-change="updateMulti('rotation_angle')" ng-blur="validateMulti('rotation_angle')" ng-disabled="selectedKeys.length<1">&#176;
+						<input id="rotxeditor" size="3" type="number" min="0" max="36" step=".25" ng-model="multi.rotation_x" ng-change="updateMulti('rotation_x')" ng-blur="validateMulti('rotation_x')" ng-disabled="selectedKeys.length<1">, 
+						<input id="rotxeditor" size="3" type="number" min="0" max="36" step=".25" ng-model="multi.rotation_y" ng-change="updateMulti('rotation_y')" ng-blur="validateMulti('rotation_y')" ng-disabled="selectedKeys.length<1">
+					</div>
+				</div>
 				<div class="control-group">
 					<label class="control-label">Misc:</label>
 
@@ -375,6 +391,8 @@ <h5>Keyboard Shortcuts</h5>
 					<tr><td><span class='shortcut'>?</span></td><td>Show this help dialog</td></tr>
 					<tr><td><span class='shortcut'>↑↓←→</span></td><td>Move the selected keys</td></tr>
 					<tr><td><span class='shortcut'>Shift&ndash;↑↓←→</span></td><td>Resize the selected keys</td></tr>
+					<tr><td><span class='shortcut'>Ctrl&ndash;↑↓←→</span></td><td>Move the center of rotation for the selected keys</td></tr>
+					<tr><td><span class='shortcut'>PgUp</span> / <span class='shortcut'>PgDn</span></td><td>Change the angle of rotation for the selected keys</td></tr>
 					<tr><td><span class='shortcut'>Ins</span></td><td>Add a new key</td></tr>
 					<tr><td><span class='shortcut'>Del</span></td><td>Delete the selected keys</td></tr>
 					<tr><td><span class='shortcut'>F2</span></td><td>Edit the text of the selected key</td></tr>

kb.js

@@ -167,12 +167,13 @@
 		$scope.calcKbHeight = function() {
 			var bottom = 0;
 			$scope.keys().forEach(function(key) {
-				bottom = Math.max(bottom, key.renderBottom);
+				bottom = Math.max(bottom, key.rectTrans.y2);
 			});
 			$scope.kbHeight = bottom + 8;
 		};
 
 		// Given a key, generate the HTML needed to render it	
+		$scope.rotationStyle = $renderKey.getKeyRotationStyles;
 		function renderKey(key) {
 			key.html = $sce.trustAsHtml($renderKey.html(key,$sanitize));
 		}
@@ -298,6 +299,9 @@
 				height2 : function() { return Math.max(0.5, Math.min(12, value)); },
 				fontheight : function() { return Math.max(1, Math.min(9, value)); },
 				fontheight2 : function() { return Math.max(1, Math.min(9, value)); },
+				rotation_angle : function() { return Math.max(-180, Math.min(180, value)); },
+				rotation_x : function() { return Math.max(0, Math.min(36, value)); },
+				rotation_y : function() { return Math.max(0, Math.min(36, value)); },
 			};
 			return (v[prop] || v._)();
 		}
@@ -321,6 +325,7 @@
 						}
 					}
 				},
+				rotation_angle : function() { key.rotation_angle = value; key.rotation_x = $scope.multi.rotation_x; key.rotation_y = $scope.multi.rotation_y; },
 			};
 			return (u[prop] || u._)();
 		}
@@ -441,6 +446,37 @@
 			});
 			if(y!==0) { $scope.calcKbHeight(); }
 		};
+		$scope.rotateKeys = function(angle,$event) {
+			$event.preventDefault();
+			if($scope.selectedKeys.length<1) { 
+				return; 
+			}
+			transaction("rotate", function() {
+				$scope.selectedKeys.forEach(function(selectedKey) {
+					var newangle = (selectedKey.rotation_angle+angle+360)%360;
+					while(newangle > 180) { newangle -= 360; }
+					update(selectedKey, 'rotation_angle', newangle);
+					renderKey(selectedKey);
+				});
+				$scope.multi = angular.copy($scope.selectedKeys.last());
+			});
+			$scope.calcKbHeight();
+		};
+		$scope.moveCenterKeys = function(x,y,$event) {
+			$event.preventDefault();
+			if($scope.selectedKeys.length<1) { 
+				return; 
+			}
+			transaction("moveCenter", function() {
+				$scope.selectedKeys.forEach(function(selectedKey) {
+					update(selectedKey, 'rotation_x', validate(selectedKey, 'rotation_x', $scope.multi.rotation_x + x));
+					update(selectedKey, 'rotation_y', validate(selectedKey, 'rotation_y', $scope.multi.rotation_y + y));
+					renderKey(selectedKey);
+				});
+				$scope.multi = angular.copy($scope.selectedKeys.last());
+			});
+			$scope.calcKbHeight();
+		};
 
 		$scope.loadPalette = function(p) {
 			$scope.palette = p;
@@ -802,8 +838,11 @@
 				});
 			});
 		};
-		$scope.canCopy = function() { return $scope.selectedKeys.length > 0; }
-		$scope.canPaste = function() { return clipboard.length > 0; }
+		$scope.canCopy = function() { return $scope.selectedKeys.length > 0; };
+		$scope.canPaste = function() { return clipboard.length > 0; };
+
+		$scope.keyboardTop = function() { var kbElem = $("#keyboard"); return kbElem.position().top + parseInt(kbElem.css('margin-top'),10); };
+		$scope.keyboardLeft = function() { var kbElem = $("#keyboard"); return kbElem.position().left + parseInt(kbElem.css('margin-left'),10); };
 	}]);
 
 	// Modernizr-inspired check to see if "color" input fields are supported; 

render.js

@@ -12,6 +12,16 @@ var $renderKey = {};
 		c.l = Math.min(100,c.l*mod);
 		return c.sRGB8();
 	}
+
+	$renderKey.getKeyRotationStyles = function(key) {
+		if(key.rotation_angle == 0) {
+			return "";
+		}
+		var angle = key.rotation_angle.toString() + "deg";
+		var origin = (sizes.capsize(key.rotation_x) + sizes.margin).toString() + "px " + (sizes.capsize(key.rotation_y) + sizes.margin).toString() + "px";
+		return "transform: rotate("+angle+"); -ms-transform: rotate("+angle+"); -webkit-transform: rotate("+angle+"); " + 
+		       "transform-origin: "+origin+"; -ms-transform-origin: "+origin+"; -webkit-transform-origin: "+origin+";";		
+	};
 
 	// Given a key, generate the HTML needed to render it	
 	var noRenderText = [0,2,1,3,0,4,2,3];
@@ -84,9 +94,46 @@ var $renderKey = {};
 			html += "</div></div>";
 		}
 
-		key.rect = { x:capx, y:capy, w:capwidth, h:capheight };
-		key.rect2 = { x:capx2, y:capy2, w:capwidth2, h:capheight2 };
-		key.renderBottom = Math.max(capy + capheight, capy2 + capheight2);
+		key.rect = { x:capx, y:capy, w:capwidth, h:capheight, x2:capx+capwidth, y2:capy+capheight };
+		key.rect2 = { x:capx2, y:capy2, w:capwidth2, h:capheight2, x2:capx2+capwidth2, y2:capy2+capheight2 };
+		key.rectMax = { x:Math.min(capx,capx2), y:Math.min(capy,capy2), x2:Math.max(capx+capwidth,capx2+capwidth2), y2:Math.max(capy+capheight,capy2+capheight2) };
+		key.rectMax.w = key.rectMax.x2 - key.rectMax.x;
+		key.rectMax.h = key.rectMax.y2 - key.rectMax.y;
+
+		// Rotation matrix about the origin
+		var origin_x = sizes.capsize(key.rotation_x)+sizes.margin;
+		var origin_y = sizes.capsize(key.rotation_y)+sizes.margin;
+		var mat = Math.transMatrix(origin_x, origin_y).mult(Math.rotMatrix(key.rotation_angle)).mult(Math.transMatrix(-origin_x, -origin_y));
+
+		// Construct the *eight* corner points, transform them, and determine the transformed bbox.
+		key.rectTrans = { x:9999999, y:9999999, x2:-9999999, y2:-9999999 };
+		var corners = [ 
+			{x:key.rect.x, y:key.rect.y}, 
+			{x:key.rect.x, y:key.rect.y2}, 
+			{x:key.rect.x2, y:key.rect.y}, 
+			{x:key.rect.x2, y:key.rect.y2},
+			{x:key.rect2.x, y:key.rect2.y}, 
+			{x:key.rect2.x, y:key.rect2.y2}, 
+			{x:key.rect2.x2, y:key.rect2.y}, 
+			{x:key.rect2.x2, y:key.rect2.y2},
+		];
+		for(var i = 0; i < corners.length; ++i) {
+			corners[i] = mat.transformPt(corners[i]); 
+			key.rectTrans.x = Math.min(key.rectTrans.x, corners[i].x);
+			key.rectTrans.y = Math.min(key.rectTrans.y, corners[i].y);
+			key.rectTrans.x2 = Math.max(key.rectTrans.x2, corners[i].x);
+			key.rectTrans.y2 = Math.max(key.rectTrans.y2, corners[i].y);
+		}
+		key.rectTrans.w = key.rectTrans.x2 - key.rectTrans.x;
+		key.rectTrans.h = key.rectTrans.y2 - key.rectTrans.y;
+
+		key.crosshairs = "none";
+		if(key.rotation_x || key.rotation_y || key.rotation_angle) {
+			key.crosshairs_x = sizes.capsize(key.rotation_x) + sizes.margin;
+			key.crosshairs_y = sizes.capsize(key.rotation_y) + sizes.margin;
+			key.crosshairs = "block";
+		}
+
 		return html;
 	};
 }());

serial.js

@@ -22,8 +22,11 @@ var $serial = {};
 
 	// function to sort the key array
 	$serial.sortKeys = function(keys) {
-		keys.sort(function(a,b) { 
-			return (a.y - b.y) ||
+		keys.sort(function(a,b) {
+			return ((a.rotation_angle+360)%360 - (b.rotation_angle+360)%360) || 
+				   (a.rotation_x - b.rotation_x) || 
+				   (a.rotation_y - b.rotation_y) || 
+				   (a.y - b.y) ||
 				   (a.x - b.x);
 		});
 	};
@@ -34,6 +37,7 @@ var $serial = {};
 			width: 1, height: 1, width2: 1, height2: 1,				// size
 			color: "#cccccc", text: "#000000",						// colors
 			labels:[], align: 4, fontheight: 3, fontheight2: 3,		// label properties	
+			rotation_angle: 0, rotation_x: 0, rotation_y: 0,		// rotation
 			profile: "", nub: false, ghost: false, stepped: false	// misc
 		};
 	};
@@ -43,20 +47,39 @@ var $serial = {};
 		var keys = keyboard.keys;
 		var rows = [], row = [];
 		var current = $serial.defaultKeyProps();
+		var rowmeta = {r:0,rx:0,ry:0};
+		var lastrowmeta = angular.copy(rowmeta);
 		if(keyboard.meta) {
 			var meta = angular.copy(keyboard.meta); 
 			if(meta.backcolor === '#eeeeee') { delete meta.backcolor; }
 			if(!$.isEmptyObject(meta)) {
 				rows.push(meta);
 			}
 		}
+		function pushRow() {
+			if(rowmeta.r != lastrowmeta.r || rowmeta.rx != lastrowmeta.rx || rowmeta.ry != lastrowmeta.ry) {
+				rows.push(rowmeta);
+				lastrowmeta = angular.copy(rowmeta);
+			}
+			rows.push(row);
+			current.y++; 
+			current.x = rowmeta.rx;
+			row = []; 
+		};
+
 		$serial.sortKeys(keys);
 		keys.forEach(function(key) {
 			var props = {};
 			var label = key.labels.join("\n").trimEnd();
 
 			// start a new row when necessary
-			if(key.y !== current.y) { rows.push(row); row = []; current.y++; current.x = 0; }
+			if((row.length>0) && (key.y !== current.y || key.rotation_angle != rowmeta.r || key.rotation_x != rowmeta.rx || key.rotation_y != rowmeta.ry)) { 
+				pushRow();
+			}
+
+			if(key.rotation_angle != rowmeta.r) { rowmeta.r = key.rotation_angle; }
+			if(key.rotation_x != rowmeta.rx) { current.x = rowmeta.rx = key.rotation_x; }
+			if(key.rotation_y != rowmeta.ry) { current.y = rowmeta.ry = key.rotation_y; }
 
 			function serializeProp(nname,val,defval) { 
 				if(val !== defval) { 
@@ -89,7 +112,7 @@ var $serial = {};
 			if(!jQuery.isEmptyObject(props)) { row.push(props); }
 			row.push(label);
 		});
-		if(row.length>0) { rows.push(row); }
+		if(row.length>0) { pushRow(); }
 		return rows;
 	}