Change how the text menu works. It is somewhat behind in that it does

not have all the same old functionality, but it uses menuitems now.
This will allow us to much-better utilize the textwindows.

Web/.editorconfig

@@ -0,0 +1,4 @@
+
+root = true
+[*]
+end_of_line = lf

Web/network.js

@@ -50,7 +50,7 @@ function networkFromIndex(what)
 			var oneitem = newitem.nettest; //this is an object
 			newitem.nettest = [];
 			newitem.nettest.push(oneitem); //make it an one-item array.
-        }
+		}
 
 		//Set the help level to be whatever we need
 		if (newitem.startinghelplevel == "full") ui_helplevel = 3;
@@ -75,8 +75,8 @@ function deviceHasProblem(Device) {
 				//It has not yet been solved.
 				//console.log("Found problem on device: " + hostname);
 				return true;
-            }
-        }
+			}
+		}
 	}
 	return false;
 }

Web/textwindow.js

@@ -208,18 +208,202 @@ function PrintPuzzleSelectMenu(level=0)
 {
 	var levellist=networkNamesMatchingText("Level"+level);
 	//console.log("list is this long: " + levellist.length);
-	textMenuPrint(levellist, -1, tmLastHighlightedIndex);
-	tmPuzzleSelectMenuLevel=level;
+	//textMenuPrint(levellist, -1, tmLastHighlightedIndex);
+	//tmPuzzleSelectMenuLevel=level;
+
+	//
+	var local_menuitems = [];
+	for (var i = 1; i < levellist.length; i++) {
+		var item = new menuitem(null, levellist[i], levellist[i], null, null, textMenu_PuzzleClick)
+		local_menuitems.push(item);
+	}
+	var local_menu = new menuclass(null);
+	local_menu.items = local_menuitems;
+	menuPrint(local_menu);
 }
 
+function textMenu_PuzzleClick(text, name, source, dest) {
+	//If we get here, someone clicked on a puzzle name.  Select it and move on
+	//We are in puzzle-select mode and clicked somewhere.
+	//if (text == null) { } //!== does not work properly
+	//else {
+	//	console.log("Clicked on puzzle: " + text);
+	//	uiMode = 1;
+	//	switchPuzzle(text);
+	//}
+}
 function textMenu_HandleMouseMove(evt)
 {
-	var highlighted_index = Math.floor(((evt.pageY - tmOutsideYMargin) - (tmTextHeight/3)) / tmTextHeight);
-	if(tmLastHighlightedIndex != highlighted_index) 
-	{
-		//the index has changed
-		console.log("index = " + highlighted_index);
-		tmLastHighlightedIndex = highlighted_index;
-		PrintPuzzleSelectMenu(tmPuzzleSelectMenuLevel);
+	//var highlighted_index = Math.floor(((evt.pageY - tmOutsideYMargin) - (tmTextHeight/3)) / tmTextHeight);
+	//if(tmLastHighlightedIndex != highlighted_index) 
+	//{
+	//	//the index has changed
+	//	console.log("index = " + highlighted_index);
+	//	tmLastHighlightedIndex = highlighted_index;
+	//	PrintPuzzleSelectMenu(tmPuzzleSelectMenuLevel);
+	//}
+}
+
+
+class menuitem {
+	constructor(rectangle, shownText, payloadName = null, payloadSource = null, payloadDest = null, clickFunc=null) {
+		this.rectangle = rectangle
+		this.shownText = shownText
+		this.payloadName = payloadName //The command, such as 'delete', 'power-on', 'ping', etc
+		this.payloadSource = payloadSource //The link, device, or original item.
+		this.payloadDest = payloadDest //The destination device, etc.  Often null unless we are pinging or tracert
+		this.clickFunc = clickFunc
 	}
+}
+
+//Our menuclass will have a menu.  We need to be able to have cascading menus (one on top of the other)
+//so we can return to a past menu if we have moved on to a child menu.
+class menuclass {
+	constructor(sourceItem) {
+		this.SourceItem = sourceItem
+		this.hmargin = 10 //horizontal margin on both left and right
+		this.vmargin = 10 //virtical margin on both top and bottom
+		this.backcolor = "grey" //The background color
+		this.font = "20px serif" //font and size
+		this.textcolor = "black" //Font color
+		this.items = [] //An array of menuitems
+		this.TextYGap = 3; //The gap to add to the size
+	}
+}
+
+
+function menuPrint(menu, menutop = 0, highlightedindex = -1) {
+	//the menu is the menuclass that holds everything
+	//menutop is the top=most item.  If we scroll up and down, this changes.
+	//highlighted index is the item that has been moused-over.  When this changes, re-draw the menu
+
+	PrintScreen(0); //Print the network, then we can lay over it
+
+	//This menu covers the entire place.
+	cachedTextMenuCanvas = document.createElement('canvas');
+	cachedTextMenuCanvas.width = MainCanvas.width - (tmOutsideXMargin * 2);
+	cachedTextMenuCanvas.height = MainCanvas.height - (tmOutsideYMargin * 2);
+
+	//Get the context
+	var cTMCctx = cachedTextMenuCanvas.getContext('2d');
+	var tw_rect;
+
+	var tw_width=0;      //the width of the menu alltogether
+	var tw_height=0;     //the height of the menu alltogether
+	var tw_itemHeight=0; //the height of both the font and margin spacing
+	var tw_rect;         //the rectangle we end up using
+	//We need to figure out the size of the menu.
+	//Do we have an item to print?  If so, add that at top
+	if (menu.SourceItem == null) {
+		//!== null does not work right
+	}
+	else {
+		tw_height = imageSize + 10;
+	}
+	var tw_startY = tw_height;
+	//Calculate the size of each text line
+	//Add spacing.  If we are larger than the alloted space, add arrows at top and bottom
+	//Then we can fill in the area based on all of this.
+
+	cTMCctx.strokeStyle = menu.textcolor;
+	cTMCctx.font = menu.font;
+
+	var metrics = cTMCctx.measureText("test");
+	var yHeight = metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent + menu.TextYGap; //the hight of the default font and gap
+	var tw_TextHeight = yHeight; //store it for use
+
+	var maxWidth = 0;
+	//determine max width (width of longest text line)
+	for (var index = 0; index < menu.items.length; index++) {
+		var tmetrics = cTMCctx.measureText(menu.items[index].shownText);
+		var xWidth = tmetrics.width;
+		if (xWidth > maxWidth) maxWidth = xWidth; 
+	}
+
+	maxWidth = maxWidth + 20 + menu.hmargin;
+
+	if (maxWidth > cachedTextMenuCanvas.width) maxWidth = cachedTextMenuCanvas.width;
+
+	tw_width = maxWidth;
+	//determine height (if we have more items than fit, figure out what will fit)
+
+	tw_height += menu.items.length * yHeight;
+	if(tw_height > cachedTextMenuCanvas.height) tw_height = cachedTextMenuCanvas.height;
+
+	//Now that we have the width and height, center it
+    var x = (cachedTextMenuCanvas.width - tw_width) / 2;
+    var y = (cachedTextMenuCanvas.height - tw_height) / 2;
+
+	//make a rectangle of the correct size
+	//Use that rectangle to place the closing X at the top
+
+	tw_rect = makeRectangle(x, y, tw_width, tw_height);
+
+	//fill in the whole thing with white and opaque
+	drawshape("square", makeRectangle(0, 0, cachedTextMenuCanvas.width, cachedTextMenuCanvas.height), "white", .5, cTMCctx);
+
+
+	//Fill in the background, nearly fully but showing a very little behind
+	drawshape("square", tw_rect, menu.backcolor, .9, cTMCctx);
+
+
+	//Put the X there so we can click on it
+	rect = makeRectangle(cachedTextMenuCanvas.width - tmScrollBarWidth, y, tmScrollBarWidth, tmMenuBarHight, tmOutsideXMargin, tmOutsideYMargin);
+	cTMCctx.drawImage(imageFromName("x"), rect.sx, rect.sy, rect.deltax, rect.deltay);
+	registerActionStruct("square", rect, null, textwindow_XClick);
+
+
+	//Put the UpArrow there so we can click on it
+	cTMCctx.drawImage(imageFromName("ArrowUp"), cachedTextMenuCanvas.width - tmScrollBarWidth, tmMenuBarHight, tmScrollBarWidth, tmMenuBarHight);
+
+	//Put the DownArrow there so we can click on it
+	cTMCctx.drawImage(imageFromName("ArrowDown"), cachedTextMenuCanvas.width - tmScrollBarWidth, cachedTextMenuCanvas.height - tmMenuBarHight, tmScrollBarWidth, tmMenuBarHight);
+
+	//Create and Draw the menu bar
+	cTMCctx.beginPath();
+	cTMCctx.moveTo(cachedTextMenuCanvas.width - tmScrollBarWidth, 0);
+	cTMCctx.lineTo(cachedTextMenuCanvas.width - tmScrollBarWidth, cachedTextMenuCanvas.height);
+	cTMCctx.strokeStyle = "white";
+	cTMCctx.stroke();
+
+	//horizontal line under the X
+	cTMCctx.beginPath();
+	cTMCctx.moveTo(cachedTextMenuCanvas.width - tmScrollBarWidth, tmMenuBarHight);
+	cTMCctx.lineTo(cachedTextMenuCanvas.width, tmMenuBarHight);
+	cTMCctx.strokeStyle = "white";
+	cTMCctx.stroke();
+	
+	var oldfill = cTMCctx.fillStyle;
+	var oldstroke = cTMCctx.strokeStyle;
+
+	cTMCctx.font = menu.font;
+	cTMCctx.fillStyle = menu.textcolor;
+	cTMCctx.strokeStyle = menu.textcolor;
+
+	for (var index = menutop; index < menu.items.length; index++) {
+		var ty = tw_startY + (tw_TextHeight * (index - menutop));
+		//x is already defined
+		cTMCctx.fillText(menu.items[index].shownText, x, ty);
+		metrics = cTMCctx.measureText(menu.items[index].shownText);
+		var trect = makeRectangle(x + 20, ty, metrics.width, tw_TextHeight);
+		menu.items[index].rectangle = trect;
+
+		registerActionStruct("square", trect, menu.items[index], puzzle_clickOn, null, generic_mouseoverHighlight);
+	}
+
+	cTMCctx.fillStyle = oldfill;
+	cTMCctx.strokeStyle = oldstroke;
+
+
+
+	MainCanvas_ctx.globalAlpha = 0.9; //some transparancy
+	MainCanvas_ctx.drawImage(cachedTextMenuCanvas, tmOutsideXMargin, tmOutsideYMargin)
+	MainCanvas_ctx.globalAlpha = 1; //reset transparancy
+
+}
+
+function puzzle_clickOn(point, actionrec) {
+	console.log("clicking on puzzle:" + actionrec.theObject.shownText);
+	uiMode = 1;
+	switchPuzzle(actionrec.theObject.shownText);
 }

Web/ui.js

@@ -144,7 +144,7 @@ function PrintScreen(WhatPassedIn=-1)
 		if (ui_helplevel == 2) tmp_queryhighlight = returnHighlightShape("square", rect, "yellow", "none", 0.3);
 		if (ui_helplevel == 3) tmp_queryhighlight = returnHighlightShape("square", rect, "green", "none", 0.3);
 		if (tmp_queryhighlight == null) { }
-		else drawshape(tmp_queryhighlight);
+		else drawhighlight(tmp_queryhighlight);
 
 		MainCanvas_ctx.drawImage(imageFromName("queryuser"), rect.sx, rect.sy, rect.deltax, rect.deltay);
 
@@ -181,7 +181,7 @@ function PrintScreen(WhatPassedIn=-1)
 		else {
 			//console.log("We have something selected.");
 			var tmp_select = returnHighlightShape("selectbox", ui_selectRect, "green", "none", 0.8);
-			drawshape(tmp_select);
+			drawhighlight(tmp_select);
 		}
 
 		drawSelectMenu();
@@ -492,7 +492,7 @@ function PrintNetworkDevice(ToPrint)
 
 		if (deviceHasProblem(ToPrint)) {
 			var thshape = returnHighlightShape("square", actionrect, "red", "problem", 0.2);
-			drawshape(thshape);
+			drawhighlight(thshape);
 		}
 
 		MainCanvas_ctx.drawImage(imageFromName(dname), rect.spoint.x, rect.spoint.y, rect.width, rect.height);
@@ -727,48 +727,57 @@ function printHighlights(countof="mouseover") {
 		var highlight = ui_HighlightArray[index];
 		//console.log("trying to highlight something: " + JSON.stringify(highlight));
 		if (highlight.shapeName == countof) count++;
-		drawshape(highlight);
+		drawhighlight(highlight);
 	}
 	return countof; //the count of the item we were supposed to count
 }
 
-function drawshape(highlight) {
-	MainCanvas_ctx.fillStyle = highlight.shapeColor;
-	MainCanvas_ctx.globalAlpha = highlight.opaciticy; //mostly transparent
+function drawhighlight(highlight, canvas = null) {
+	if (canvas == null)
+		canvas = MainCanvas_ctx;
+	canvas.fillStyle = highlight.shapeColor;
+	canvas.globalAlpha = highlight.opaciticy; //mostly transparent
 	var oldWidth;
 	if (highlight.shapeText == "square")
-		MainCanvas_ctx.fillRect(highlight.shapePoints.sx, highlight.shapePoints.sy, highlight.shapePoints.deltax, highlight.shapePoints.deltay);
+		canvas.fillRect(highlight.shapePoints.sx, highlight.shapePoints.sy, highlight.shapePoints.deltax, highlight.shapePoints.deltay);
 	else if (highlight.shapeText == "line") {
-		oldWidth = MainCanvas_ctx.lineWidth;
-		MainCanvas_ctx.lineWidth += 6;
-		MainCanvas_ctx.strokeStyle = highlight.shapeColor;
-		MainCanvas_ctx.beginPath();
-		MainCanvas_ctx.moveTo(highlight.shapePoints.sx, highlight.shapePoints.sy);
-		MainCanvas_ctx.lineTo(highlight.shapePoints.dx, highlight.shapePoints.dy);
-		MainCanvas_ctx.stroke();
-		MainCanvas_ctx.lineWidth = oldWidth;
-		MainCanvas_ctx.strokeStyle = "black";
+		oldWidth = canvas.lineWidth;
+		canvas.lineWidth += 6;
+		canvas.strokeStyle = highlight.shapeColor;
+		canvas.beginPath();
+		canvas.moveTo(highlight.shapePoints.sx, highlight.shapePoints.sy);
+		canvas.lineTo(highlight.shapePoints.dx, highlight.shapePoints.dy);
+		canvas.stroke();
+		canvas.lineWidth = oldWidth;
+		canvas.strokeStyle = "black";
 	}
 	else if (highlight.shapeText == "selectbox") {
 		//console.log("Printing a selectbox");
-		MainCanvas_ctx.fillStyle = "green";
-		oldWidth = MainCanvas_ctx.lineWidth;
-		MainCanvas_ctx.lineWidth += 2;
-		MainCanvas_ctx.strokeStyle = "green";
-		MainCanvas_ctx.beginPath();
-		MainCanvas_ctx.moveTo(highlight.shapePoints.sx, highlight.shapePoints.sy);
-		MainCanvas_ctx.lineTo(highlight.shapePoints.dx, highlight.shapePoints.sy);
-		MainCanvas_ctx.lineTo(highlight.shapePoints.dx, highlight.shapePoints.dy);
-		MainCanvas_ctx.lineTo(highlight.shapePoints.sx, highlight.shapePoints.dy);
-		MainCanvas_ctx.lineTo(highlight.shapePoints.sx, highlight.shapePoints.sy);
-		MainCanvas_ctx.stroke();
-		MainCanvas_ctx.lineWidth = oldWidth;
-		MainCanvas_ctx.strokeStyle = "black";
+		canvas.fillStyle = "green";
+		oldWidth = canvas.lineWidth;
+		canvas.lineWidth += 2;
+		canvas.strokeStyle = "green";
+		canvas.beginPath();
+		canvas.moveTo(highlight.shapePoints.sx, highlight.shapePoints.sy);
+		canvas.lineTo(highlight.shapePoints.dx, highlight.shapePoints.sy);
+		canvas.lineTo(highlight.shapePoints.dx, highlight.shapePoints.dy);
+		canvas.lineTo(highlight.shapePoints.sx, highlight.shapePoints.dy);
+		canvas.lineTo(highlight.shapePoints.sx, highlight.shapePoints.sy);
+		canvas.stroke();
+		canvas.lineWidth = oldWidth;
+		canvas.strokeStyle = "black";
 	}
-	MainCanvas_ctx.globalAlpha = 1.0; //reset
-	MainCanvas_ctx.fillStyle = "black"; //reset
+	canvas.globalAlpha = 1.0; //reset
+	canvas.fillStyle = "black"; //reset
 }
 
+//We use drawhighlight to draw one-off shapes
+function drawshape( shape, rect, color, opaciticy = 0.4, canvas = null) {
+	if (canvas == null)
+		canvas = MainCanvas_ctx;
+	var tmp_queryhighlight = returnHighlightShape(shape, rect, color, "none", opaciticy);
+	drawhighlight(tmp_queryhighlight, canvas);
+}
 
 function countHighlightsNamed(countof = "mouseover") {
 	var count = 0;