Most of the mouse-over highlighting is working properly

Web/ui.js

@@ -12,6 +12,7 @@ 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;
+var ui_HadHighlight = false;
 
 //The user interface mode.  0=network, 1=network information, 2=puzzle-selection menu
 var uiMode=1;
@@ -110,10 +111,24 @@ function PrintScreen(WhatPassedIn=-1)
 			//console.log("trying to highlight something: " + JSON.stringify(ui_highlightRect));
 			MainCanvas_ctx.fillStyle = "white";
 			MainCanvas_ctx.globalAlpha = 0.3; //mostly transparent
+			if (ui_highlightRect.shapeText == "square")
 				MainCanvas_ctx.fillRect(ui_highlightRect.sx, ui_highlightRect.sy, ui_highlightRect.deltax, ui_highlightRect.deltay);
+			else if (ui_highlightRect.shapeText == "line") {
+				var oldWidth = MainCanvas_ctx.lineWidth;
+				MainCanvas_ctx.lineWidth += 4;
+				MainCanvas_ctx.strokeStyle = "white";
+				MainCanvas_ctx.beginPath();
+				MainCanvas_ctx.moveTo(ui_highlightRect.sx, ui_highlightRect.sy);
+				MainCanvas_ctx.lineTo(ui_highlightRect.dx, ui_highlightRect.dy);
+				MainCanvas_ctx.stroke();
+				MainCanvas_ctx.lineWidth = oldWidth;
+				MainCanvas_ctx.strokeStyle = "black";
+            }
 			MainCanvas_ctx.globalAlpha = 1.0; //reset
 			MainCanvas_ctx.fillStyle = "black"; //reset
+			ui_HadHighlight = true;
 		}
+		else ui_HadHighlight = false;
 
 		//Draw the puzzle-select button
 		//Put the X there so we can click on it
@@ -188,19 +203,27 @@ function CheckForActions(actionPoint, action) {
 			if (action == "rightclick" && uiActions[index].funcRightClick !== null) checkit = true;
 			if (action == "mouseover" && uiActions[index].funcMouseover !== null) checkit = true;
 			checklocation = uiActions[index];
+			var point = newPointFromPair(actionPoint.pageX - checklocation.shapePoints.offsetx, actionPoint.pageY - checklocation.shapePoints.offsety);
 			if (checkit) {
 				//See if the click is inside the shape
 				if (checklocation.shapeText == "square") {
-					if (actionPoint.pageX - checklocation.shapePoints.offsetx >= checklocation.shapePoints.sx) {
+					if (pointInRect(point, checklocation.shapePoints))
-						if (actionPoint.pageX - checklocation.shapePoints.offsetx <= checklocation.shapePoints.dx) {
-							if (actionPoint.pageY - checklocation.shapePoints.offsety >= checklocation.shapePoints.sy) {
-								if (actionPoint.pageY - checklocation.shapePoints.offsety <= checklocation.shapePoints.dy) {
 						inside = true;
 				}
+				if (checklocation.shapeText == "line") {
+					if (pointInRect(point, checklocation.shapePoints)) {
+						//console.log("inside line square");
+						//We are inside the box.  Now determine if we are on the line...
+						var d1 = distance(checklocation.shapePoints.sx, checklocation.shapePoints.sy, actionPoint.pageX, actionPoint.pageY);
+						d1 += distance(checklocation.shapePoints.dx, checklocation.shapePoints.dy, actionPoint.pageX, actionPoint.pageY);
+						var d2 = distance(checklocation.shapePoints.sx, checklocation.shapePoints.sy, checklocation.shapePoints.dx, checklocation.shapePoints.dy);
+						if (Math.abs(d1 - d2) < 3) {
+							inside = true;
+							//console.log("on a line!");
 						}
 					}
 				}
-				}
+
 			}
 			if (inside) {
 				//console.log("Is inside");
@@ -211,12 +234,14 @@ function CheckForActions(actionPoint, action) {
 							//console.log("Successfully did a UI action");
 							return true;
 						}
+						break;
 					case "mouseover":
 						if (checklocation.funcMouseover != null) {
 							checklocation.funcMouseover(actionPoint, checklocation);
 							//console.log("Successfully did a UI action");
 							return true;
 						}
+						break;
 				}
 			}
 		}
@@ -224,6 +249,24 @@ function CheckForActions(actionPoint, action) {
 	return false;
 }
 
+function pointInRect(point, rectangle) {
+	if (point.x  >= Math.min(rectangle.sx,rectangle.dx)) {
+		if (point.x <= Math.max(rectangle.sx, rectangle.dx)) {
+			if (point.y >= Math.min(rectangle.sy, rectangle.dy)) {
+				if (point.y <= Math.max(rectangle.sy, rectangle.dy)) {
+					return true;
+				}
+			}
+		}
+	}
+	return false;
+}
+
+//return the distance between two points
+function distance(x1, y1, x2, y2) {
+	return Math.hypot(x2 - x1, y2 - y1);
+}
+
 function handleMouseUp(evt)
 {
     //evt.preventDefault();
@@ -297,20 +340,29 @@ function handleMouseMove(evt)
 	else //Mouse is not down.  Not dragging
 	{
 		var needrefresh = false;
+		var oldRect = structuredClone(ui_highlightRect);
 		if (!CheckForActions(evt, "mouseover")) {
 			//We did not find anything
-			if (ui_highlightRect != null) {
+			if (JSON.stringify(ui_highlightRect) === JSON.stringify(oldRect)) {
+
+			}
+			else {
+				//console.log("Rects are not equal:" + JSON.stringify(ui_highlightRect) + " - " + JSON.stringify(oldRect) )
 				needrefresh = true;
 			}
 			ui_highlightRect = null; //nothing to highlight
+			if (ui_HadHighlight) { needrefresh = true; }
+			if (needrefresh) {
 				PrintScreen();
 			}
+        }
 		if(uiMode==2)
 		{
 			textMenu_HandleMouseMove(evt);
 		}
 
 	}
+	return;
 }
 
 function copyLocation({ pageX, pageY }) {
@@ -333,6 +385,11 @@ function PrintNetworkLink(linkToPrint)
 				var spoint = convertXYPointToActual(newPointFromString(sdevice.location));
 				var dpoint = convertXYPointToActual(newPointFromString(ddevice.location));
 
+				//Make an actionstruct
+				var actionLine = makeLine(spoint.x, spoint.y, dpoint.x, dpoint.y);
+				registerActionStruct("line", actionLine, linkToPrint, null, null, generic_mouseoverHighlight);
+
+				var old
 				//Now we draw a line between them
 				MainCanvas_ctx.beginPath();
 				MainCanvas_ctx.moveTo(spoint.x,spoint.y);
@@ -341,6 +398,7 @@ function PrintNetworkLink(linkToPrint)
 			}
 		}
 	}
+
 }
 
 function PrintAllNetworkLinks()
@@ -510,6 +568,12 @@ function makeRectangle(x1, y1, deltax, deltay, offsetx = 0, offsety = 0) {
 	return struct;
 }
 
+function makeLine(x1, y1, x2, y2, offsetx = 0, offsety = 0) {
+	var linestruct = makeRectangle(x1, y1, x2 - x1, y2 - y1, offsetx, offsety);
+	//console.log("Creating a line: " + JSON.stringify(linestruct));
+	return linestruct;
+}
+
 //Make a structure to hold all our data
 function actionStruct(shapeText, shapePoints, theObject=null, funcLeftClick=null, funcRightClick=null, funcMouseover=null) {
 	var struct = {
@@ -520,6 +584,7 @@ function actionStruct(shapeText, shapePoints, theObject=null, funcLeftClick=null
 		funcRightClick: funcRightClick,
 		funcMouseover: funcMouseover,
 	}
+	shapePoints.shapeText = shapeText;
 	return struct;
 }
 
@@ -528,7 +593,7 @@ function registerActionStruct(shapeText, shapePoints, theObject=null, funcLeftCl
 	var what = actionStruct(shapeText, shapePoints, theObject, funcLeftClick, funcRightClick, funcMouseover);
 	//console.log("Pushing an action: " + shapeText);
 	//Push it onto the uiActions list
-	uiActions.push(what);
+	uiActions.unshift(what); //Put it at the beginning of the list
 	//console.log("ActionList: " + JSON.stringify(uiActions));
 }
 
@@ -540,9 +605,20 @@ function clearActionStructs() {
 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
+	var oldrec = structuredClone(ui_highlightRect);
 	if (actionrec.shapeText == "square") {
 		ui_highlightRect = structuredClone(actionrec.shapePoints);
+		ui_highlightRect.shapeText = "square";
 		//console.log("setting highlights to:" + JSON.stringify(ui_highlightRect));
 	}
-	PrintScreen();
+	if (actionrec.shapeText == "line") {
+		ui_highlightRect = structuredClone(actionrec.shapePoints);
+		ui_highlightRect.shapeText = "line";
+		//console.log("setting highlights to:" + JSON.stringify(ui_highlightRect));
+	}
+	if (JSON.stringify(ui_highlightRect) === JSON.stringify(oldrec)) {
+		//they are the same.  Nothing to do
+	}
+	else
+		PrintScreen();  //two different areas.  Need to print the screen
 }