NMSjs: Enable interactive movement of switches!

Fixes #24

God that felt good.

It's not very pretty, but it does seem very functional.

5 files changed, 107 insertions, 22 deletions

diff --git a/web/nms.gathering.org/api/private/switch-add b/web/nms.gathering.org/api/private/switch-add
index 64e5e58..e177b5e 100755
--- a/web/nms.gathering.org/api/private/switch-add
+++ b/web/nms.gathering.org/api/private/switch-add
@@ -30,10 +30,10 @@ sub convertplace
 	my %out = ();
 
 	if (not defined $in{'x1'} and defined($in{'x'})) {
-		$out{'x1'} = $in{'x'};
-		$out{'y1'} = $in{'y'};
-		$out{'xx'} = $in{'x'} + $in{'width'};
-		$out{'yy'} = $in{'y'} + $in{'height'};
+		$out{'x1'} = int($in{'x'});
+		$out{'y1'} = int($in{'y'});
+		$out{'xx'} = int($in{'x'} + $in{'width'});
+		$out{'yy'} = int($in{'y'} + $in{'height'});
 	} else {
 		return \%in;
 	}
@@ -89,6 +89,7 @@ foreach my $tmp2 (@tmp) {
 			$x2 = $placement{'xx'};
 			$y2 = $placement{'yy'};
 			$switch{'placement'} = "(($x1,$y1),($x2,$y2))";
+			push @dups, "not really, but: " . $switch{'placement'};
 		}
 		if (not defined($switch{'ip'}) and defined($switch{'mgtmt4'})) {
 			$switch{'ip'} = $switch{'mgtmt4'};
diff --git a/web/nms.gathering.org/index.html b/web/nms.gathering.org/index.html
index 7c6f2ce..c5c5b04 100644
--- a/web/nms.gathering.org/index.html
+++ b/web/nms.gathering.org/index.html
@@ -71,6 +71,10 @@
 		<li class="dropdown-header">View</li>
 		<li><a href="#" onclick="toggleNightMode()">Toggle Night Mode</a></li>
 		<li class="divider"> </li>
+		<li class="dropdown-header">Move switches</li>
+	  	<li><a href="#" onclick="nmsMap.moveSet(true);">Enable switch moving</a></li>
+	  	<li><a href="#" onclick="nmsMap.moveSet(false);">Disable switch moving</a></li>
+		<li class="divider"> </li>
 		<li class="dropdown-header">Help</li>
 	  	<li><a href="#" onclick="toggleLayer('aboutKeybindings');" >Keyboard Shortcuts</a></li>
 	      </ul>
@@ -230,7 +234,7 @@
 	<canvas id="textCanvas" width="1920" height="1032" style="position: absolute; z-index: 40;"> </canvas>
 	<canvas id="textInfoCanvas" width="1920" height="1032" style="position: absolute; z-index: 45;"> </canvas>
 	<canvas id="topCanvas" width="1920" height="1032" style="position: absolute; z-index: 50;"> </canvas>
-	<canvas id="inputCanvas" width="1920" height="1032" style="position: absolute; z-index: 60; cursor: pointer;" onclick="canvasClick(event)">
+	<canvas id="inputCanvas" width="1920" height="1032" style="position: absolute; z-index: 60; cursor: pointer;" onmousedown="nmsMap.canvasClick(event)">
 	</canvas>
 	<canvas id="hiddenCanvas" width="1000" height="10" style="display: none; position: absolute; z-index: 1000 "></canvas>
 
diff --git a/web/nms.gathering.org/js/nms-data.js b/web/nms.gathering.org/js/nms-data.js
index 89d93fd..ef41a3a 100644
--- a/web/nms.gathering.org/js/nms-data.js
+++ b/web/nms.gathering.org/js/nms-data.js
@@ -71,8 +71,11 @@ var nmsData = nmsData || {
 	/*
 	 * Maximum number of AJAX requests in transit before we start
 	 * skipping updates.
+	 *
+	 * A problem right now is that it will typically always hit the
+	 * same thing since everything starts at the same time...
 	 */
-	_ajaxThreshold: 5
+	_ajaxThreshold: 10
 };
 
 
diff --git a/web/nms.gathering.org/js/nms-map.js b/web/nms.gathering.org/js/nms-map.js
index 48011e5..13a8103 100644
--- a/web/nms.gathering.org/js/nms-map.js
+++ b/web/nms.gathering.org/js/nms-map.js
@@ -13,6 +13,7 @@
 
 
 var nmsMap = nmsMap || {
+	_moveInProgress: false,
 	stats: {
 		earlyDrawAll:0,
 		colorChange:0,
@@ -47,7 +48,7 @@ var nmsMap = nmsMap || {
 nmsMap.init = function() {
 	this._initContexts();
 	this._drawBG();
-	nmsData.addHandler("switches","nmsMap",function(){nmsMap._drawAllSwitches();});
+	nmsData.addHandler("switches","nmsMap",function(){nmsMap._resizeEvent();});
 	window.addEventListener('resize',nmsMap._resizeEvent,true);
 	document.addEventListener('load',nmsMap._resizeEvent,true);
 	this._drawAllSwitches();
@@ -230,7 +231,6 @@ nmsMap._drawText = function(ctx, text, box, align) {
 	ctx.save();
 	ctx.scale(this.scale, this.scale);
 	ctx.font = "bold " + this._settings.fontSize + "px " + this._settings.fontFace;
-	console.log(ctx.font);
 	ctx.lineWidth = nmsMap._settings.fontLineFactor;
 	ctx.fillStyle = "white";
 	ctx.strokeStyle = "black";
@@ -275,7 +275,6 @@ nmsMap._drawBox = function(ctx, x, y, boxw, boxh) {
 	ctx.strokeStyle = "#000000";
 	ctx.strokeRect(x,y, boxw, boxh);
 	ctx.restore();
-
 }
 
 nmsMap._connectSwitches = function(sw1, sw2, color1, color2) {
@@ -310,6 +309,96 @@ nmsMap._connectBoxes = function(box1, box2,color1, color2) {
 	ctx.restore();
 }
 
+nmsMap.moveSet = function(toggle) {
+	nmsMap._moveInProgress = toggle;
+	if (!toggle)
+		nmsMap._moveStopListen();
+}
+
+/*
+ * onclick handler for the canvas.
+ *
+ * Currently just shows info for a switch.
+ */
+nmsMap.canvasClick = function(e)
+{
+	var sw = findSwitch(e.pageX - e.target.offsetLeft, e.pageY - e.target.offsetTop);
+	if (sw != undefined) {
+		if (nmsMap._moveInProgress) {
+			nmsMap._moveStart(sw, e);
+		} else {
+			nmsInfoBox.click(sw);
+		}
+	}
+}
+
+nmsMap._clearOld = function(box) {
+	if (box) {
+		nmsMap._c.top.ctx.save();
+		nmsMap._c.top.ctx.fillStyle = "#000000";
+		nmsMap._c.top.ctx.scale(nmsMap.scale, nmsMap.scale); // FIXME
+		nmsMap._c.top.ctx.clearRect(box['x'] - 5, box['y'] - 5, box['width'] + 10, box['height'] + 10);
+		nmsMap._c.top.ctx.restore();
+	}
+}
+
+nmsMap._moveMove = function(e) {
+	nmsMap._moveX = (e.pageX - e.target.offsetLeft) / nmsMap.scale;
+	nmsMap._moveY = (e.pageY - e.target.offsetTop) / nmsMap.scale;
+	var diffx = nmsMap._moveX - nmsMap._moveXstart;
+	var diffy = nmsMap._moveY - nmsMap._moveYstart;
+	var box = {};
+	nmsMap._clearOld(nmsMap._moveOldBox);
+	box['x'] = nmsMap._moveBox['x'] + diffx;
+	box['y'] = nmsMap._moveBox['y'] + diffy;
+	box['height'] = nmsMap._moveBox['height'];
+	box['width'] = nmsMap._moveBox['width'];
+	nmsMap._moveOldBox = box;
+	nmsMap._c.top.ctx.save();
+	nmsMap._c.top.ctx.fillStyle = "red";
+	nmsMap._drawBox(nmsMap._c.top.ctx, box['x'], box['y'], box['width'], box['height']);
+	nmsMap._c.top.ctx.restore();
+}
+
+nmsMap._moveSubmit = function() {
+	var data = {
+		sysname: nmsMap._moving,
+		placement: nmsMap._moveOldBox
+	}
+	var myData = JSON.stringify([data]);
+	$.ajax({
+		type: "POST",
+		url: "/api/private/switch-add",
+		dataType: "text",
+		data:myData,
+		success: function (data, textStatus, jqXHR) {
+			nmsData.invalidate("switches");
+		}
+	});
+}
+nmsMap._moveStopListen = function() {
+	nmsMap._c.input.c.removeEventListener('mousemove',nmsMap._moveMove, true);
+	nmsMap._c.input.c.removeEventListener('mouseup',nmsMap._moveDone, true);
+}
+
+nmsMap._moveDone = function(e) {
+	nmsMap._moveStopListen();
+	nmsMap._moveSubmit();
+	nmsMap._clearOld(nmsMap._moveOldBox);
+}
+
+nmsMap._moveStart = function(sw, e)
+{
+	console.log("moving " + sw);
+	nmsMap._moving = sw;
+	nmsMap._moveXstart = (e.pageX - e.target.offsetLeft) / nmsMap.scale;
+	nmsMap._moveYstart = (e.pageY - e.target.offsetTop) / nmsMap.scale;
+	nmsMap._moveBox = nmsData.switches.switches[sw].placement;
+	nmsMap._c.input.c.addEventListener('mousemove',nmsMap._moveMove,true);
+	nmsMap._c.input.c.addEventListener('mouseup',nmsMap._moveDone,true);
+}
+
+
 /*
  * STUFF NOT YET INTEGRATED, BUT MOVED AWAY FROM nms.js TO TIDY.
  *
@@ -382,3 +471,4 @@ function applyBlur()
 	resetBlur();
 	saveSettings();
 }
+
diff --git a/web/nms.gathering.org/js/nms.js b/web/nms.gathering.org/js/nms.js
index 52bea9a..ec7ed06 100644
--- a/web/nms.gathering.org/js/nms.js
+++ b/web/nms.gathering.org/js/nms.js
@@ -424,19 +424,6 @@ function findSwitch(x,y) {
 }
 
 /*
- * onclick handler for the canvas.
- *
- * Currently just shows info for a switch.
- */
-function canvasClick(e)
-{
-	var sw = findSwitch(e.pageX - e.target.offsetLeft, e.pageY - e.target.offsetTop);
-	if (sw != undefined) {
-		nmsInfoBox.click(sw);
-	}
-}
-
-/*
  * Set night mode to whatever 'toggle' is.
  *
  * Changes background and nav-bar, then leaves the rest to nmsMap.