Get highlights working (mostly)

Web/ui.js

@@ -11,6 +11,7 @@ var imageSize=40;
 var small_button_size = 20;
 var uiDeviceInfoLevel = 1; //What do we display when we look at the network
 var uiActions = [];//a list of things on the screen we can click on or process.
+var ui_highlightRect = null;
 
 //The user interface mode.  0=network, 1=network information, 2=puzzle-selection menu
 var uiMode=1;
@@ -104,17 +105,31 @@ function PrintScreen(WhatPassedIn=-1)
 		MainCanvas_ctx.fillStyle = maincanvasBackground;
 		MainCanvas_ctx.fillRect(0, 0, MainCanvas.width, MainCanvas.height);
 
+		//Do any highlight we need to
+		if (ui_highlightRect !== null) {
+			//console.log("trying to highlight something: " + JSON.stringify(ui_highlightRect));
+			MainCanvas_ctx.fillStyle = "white";
+			MainCanvas_ctx.globalAlpha = 0.3; //mostly transparent
+			MainCanvas_ctx.fillRect(ui_highlightRect.sx, ui_highlightRect.sy, ui_highlightRect.deltax, ui_highlightRect.deltay);
+			MainCanvas_ctx.globalAlpha = 1.0; //reset
+			MainCanvas_ctx.fillStyle = "black"; //reset
+        }
+
 		//Draw the puzzle-select button
 		//Put the X there so we can click on it
 		rect = makeRectangle(MainCanvas.width - small_button_size, 0, small_button_size, small_button_size);
 		MainCanvas_ctx.drawImage(imageFromName("menu"),rect.sx,rect.sy,rect.deltax,rect.deltay);
-		//registerActionStruct("square", rect, null, textwindow_XClick);
+		registerActionStruct("square", rect, null, ui_PuzzleChoiceMenuLeftClick, null, generic_mouseoverHighlight);
 
 		//Draw the info button
-		MainCanvas_ctx.drawImage(imageFromName("info"),MainCanvas.width - small_button_size,small_button_size,small_button_size,small_button_size);
+		rect = makeRectangle(MainCanvas.width - small_button_size, small_button_size, small_button_size, small_button_size);
+		MainCanvas_ctx.drawImage(imageFromName("info"), rect.sx, rect.sy, rect.deltax, rect.deltay);
+		registerActionStruct("square", rect, null, ui_InfoLeftClick, null, generic_mouseoverHighlight);
 
-		//Draw the info button
+		//Draw the eye button
-		MainCanvas_ctx.drawImage(imageFromName("eye"), MainCanvas.width - small_button_size, small_button_size*2, small_button_size, small_button_size);
+		rect = makeRectangle(MainCanvas.width - small_button_size, small_button_size * 2, small_button_size, small_button_size);
+		MainCanvas_ctx.drawImage(imageFromName("eye"), rect.sx, rect.sy, rect.deltax, rect.deltay);
+		registerActionStruct("square", rect, null, ui_eyeLeftClick, null, generic_mouseoverHighlight);
 
 		drawSelectMenu();
 		PrintAllNetworkLinks();
@@ -168,8 +183,7 @@ function CheckForActions(actionPoint, action) {
 	if (uiActions.length >= 0) {
 		var checkit = false;
 		var inside = false;
-		for (var index = 0; index < uiActions.length; index++)
+		for (var index = 0; index < uiActions.length; index++) {
-		{
 			if (action == "leftclick" && uiActions[index].funcLeftClick !== null) checkit = true;
 			if (action == "rightclick" && uiActions[index].funcRightClick !== null) checkit = true;
 			if (action == "mouseover" && uiActions[index].funcMouseover !== null) checkit = true;
@@ -186,19 +200,24 @@ function CheckForActions(actionPoint, action) {
 							}
 						}
 					}
-                }
+				}
-            }
+			}
-		}
+			if (inside) {
-
+				//console.log("Is inside");
-		if (inside) {
+				switch (action) {
-			console.log("Is inside");
+					case "leftclick":
-			switch (action) {
+						if (checklocation.funcLeftClick != null) {
-				case "leftclick":
+							checklocation.funcLeftClick(actionPoint, checklocation);
-					if (checklocation.funcLeftClick != null) {
+							//console.log("Successfully did a UI action");
-						checklocation.funcLeftClick(actionPoint, checklocation.theObject);
+							return true;
-						console.log("Successfully did a UI action");
+						}
-						return true;
+					case "mouseover":
-					}
+						if (checklocation.funcMouseover != null) {
+							checklocation.funcMouseover(actionPoint, checklocation);
+							//console.log("Successfully did a UI action");
+							return true;
+						}
+				}
 			}
 		}
 	}
@@ -225,40 +244,37 @@ function handleMouseUp(evt)
 		if(!mouseDidMovement)
 		{ //If we are not dragging, it is a click
 			var myevt = copyLocation(evt);
-			console.log("evt:" + JSON.stringify(myevt));
+			//console.log("evt:" + JSON.stringify(myevt));
 			if (CheckForActions(myevt, "leftclick")) return; //If we did this, do not do anything else.
 			if(uiMode==1) TextWindow_handleMouseUp(evt);
 			else if(uiMode==2) TextWindow_handleMouseUp(evt);
-			else if(uiMode==0 && evt.pageX >= MainCanvas.width - small_button_size)
-			{
-					console.log("clicked far enough x wise");
-				//We may be clicking on one of the small buttons
-				if(evt.pageY < small_button_size) 
-				{
-					//We clicked on the puzzle-select menu
-					console.log("PuzzleSelect pressed");
-					uiMode=2;
-					PrintScreen();
-				} else if(evt.pageY < small_button_size *2)
-				{
-					console.log("Selected info button");
-					//It is the info button
-					uiMode=1;
-					PrintScreen();
-				} else if (evt.pageY < small_button_size * 3) {
-					console.log("Selected 'eye' button");
-					//It is the eye button
-					uiDeviceInfoLevel++;
-					if (uiDeviceInfoLevel > 3) uiDeviceInfoLevel = 0;
-					PrintScreen();
-				}
-			}
 		}
 		
     }
     mouseDidMovement=false; //reset it after we raise the button
 }
 
+function ui_PuzzleChoiceMenuLeftClick(evt) {
+	//We clicked on the puzzle-select menu
+	console.log("PuzzleSelect pressed in action");
+	uiMode = 2;
+	PrintScreen();
+}
+
+function ui_eyeLeftClick(evt) {
+	console.log("Selected 'eye' button in action");
+	//It is the eye button
+	uiDeviceInfoLevel++;
+	if (uiDeviceInfoLevel > 3) uiDeviceInfoLevel = 0;
+	PrintScreen();
+}
+
+function ui_InfoLeftClick(evt) {
+	console.log("Selected info button in action");
+	//It is the info button
+	uiMode = 1;
+	PrintScreen();
+}
 
 function handleMouseMove(evt)
 {
@@ -280,6 +296,15 @@ function handleMouseMove(evt)
     }
 	else //Mouse is not down.  Not dragging
 	{
+		var needrefresh = false;
+		if (!CheckForActions(evt, "mouseover")) {
+			//We did not find anything
+			if (ui_highlightRect != null) {
+				needrefresh = true;
+            }
+			ui_highlightRect = null; //nothing to highlight
+			PrintScreen();
+        }
 		if(uiMode==2)
 		{
 			textMenu_HandleMouseMove(evt);
@@ -338,11 +363,15 @@ function PrintNetworkDevice(ToPrint)
     if(ToPrint !== null)
     {
 		var rect = deviceRectangle(ToPrint);
+		var actionrect = makeRectangle(rect.spoint.x, rect.spoint.y, rect.width, rect.height);
+
 		var dname = ToPrint.mytype;
 		if(dname=="net_switch") dname="switch";	
 		if(dname=="net_hub") dname="hub";	
 		//console.log("printing device " + dname);
 		MainCanvas_ctx.drawImage(imageFromName(dname), rect.spoint.x, rect.spoint.y, rect.width, rect.height);
+		registerActionStruct("square", actionrect, ToPrint, null, null, generic_mouseoverHighlight);
+
 		//Now, we see if we need to print the name, or a list of IPs..
 		var xpoint = rect.center.x;
 		var ystart = rect.epoint.y; //the bottom-most Y point
@@ -360,7 +389,7 @@ function PrintNetworkDevice(ToPrint)
 				break;
 			case 2:
 			case 3:
-				console.log("printing device " + ToPrint.hostname);
+				//console.log("printing device " + ToPrint.hostname);
 				//Print both the name and the IP addresses
 				if (uiDeviceInfoLevel == 2) {
 					delta = printCenteredText(MainCanvas_ctx, ToPrint.hostname, xpoint, ystart) + gap;
@@ -369,11 +398,11 @@ function PrintNetworkDevice(ToPrint)
 				//print the ip addresses
 				for (var x = 0; x < ipaddresses.length; x++) {
 					//Print the IP address if the type is correct.
-					console.log(JSON.stringify(ipaddresses[x]));
+					//console.log(JSON.stringify(ipaddresses[x]));
 					switch (ipaddresses[x].nictype) {
 						case "eth":
 						case "management_interface":
-							console.log("Found a " + ipaddresses[x].nictype)
+							//console.log("Found a " + ipaddresses[x].nictype)
 							let mystring = ipaddresses[x].cidrip;
 							delta = printCenteredText(MainCanvas_ctx, mystring, xpoint, ystart);
 							ystart += (delta / 2);
@@ -485,7 +514,7 @@ function makeRectangle(x1, y1, deltax, deltay, offsetx = 0, offsety = 0) {
 function actionStruct(shapeText, shapePoints, theObject=null, funcLeftClick=null, funcRightClick=null, funcMouseover=null) {
 	var struct = {
 		shapeText: shapeText,
-		shapePoints: shapePoints,
+		shapePoints: structuredClone(shapePoints),
 		theObject: theObject,
 		funcLeftClick: funcLeftClick,
 		funcRightClick: funcRightClick,
@@ -497,16 +526,23 @@ function actionStruct(shapeText, shapePoints, theObject=null, funcLeftClick=null
 function registerActionStruct(shapeText, shapePoints, theObject=null, funcLeftClick=null, funcRightClick=null, funcMouseover=null) {
 	//Make an object with all the data
 	var what = actionStruct(shapeText, shapePoints, theObject, funcLeftClick, funcRightClick, funcMouseover);
-	console.log("Pushing an action: " + shapeText);
+	//console.log("Pushing an action: " + shapeText);
 	//Push it onto the uiActions list
 	uiActions.push(what);
+	//console.log("ActionList: " + JSON.stringify(uiActions));
 }
 
 function clearActionStructs() {
 	uiActions = [];
 }
 
-//This is what happens when we click on the x to close the window.
+//This takes generic information for us to highlight the background
-function xclicked() {
+function generic_mouseoverHighlight(point, actionrec) {
-	
+	//console.log("Found highlight " + JSON.stringify(actionrec));
+	//The point is the place where the mouse is, but the actionrec.shapePoints is the rectangle (or shape) we want to highlight
+	if (actionrec.shapeText == "square") {
+		ui_highlightRect = structuredClone(actionrec.shapePoints);
+		//console.log("setting highlights to:" + JSON.stringify(ui_highlightRect));
+	}
+	PrintScreen();
 }