From 0859bffc23a1a91f840d793baa7c5e735509b9e8 Mon Sep 17 00:00:00 2001
From: Tim Young <tim.young@lightsys.org>
Date: Fri, 17 May 2024 10:33:33 -0600
Subject: [PATCH] Put a selection-box around an item if we clicked on something

---
 Web/ui.js | 40 +++++++++++++++++++++++++++++++++++++---
 1 file changed, 37 insertions(+), 3 deletions(-)

diff --git a/Web/ui.js b/Web/ui.js
index 6a5769b..582381f 100644
--- a/Web/ui.js
+++ b/Web/ui.js
@@ -12,6 +12,7 @@ var small_button_size = 25;
 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_selectRect = null;
 var ui_HadHighlight = false;
 var ui_status_height = 25;
 var ui_StatusText = "";
@@ -176,6 +177,13 @@ function PrintScreen(WhatPassedIn=-1)
 
 		MainCanvas_ctx.strokeStyle = "black";
 
+		if (ui_selectRect == null) { }
+		else {
+			//console.log("We have something selected.");
+			var tmp_select = returnHighlightShape("selectbox", ui_selectRect, "green", "none", 0.8);
+			drawshape(tmp_select);
+        }
+
 		drawSelectMenu();
 		PrintAllNetworkLinks();
 		PrintAllNetworkDevices();
@@ -303,7 +311,7 @@ function distance(x1, y1, x2, y2) {
 function handleMouseUp(evt)
 {
 	//evt.preventDefault();
-	mouseIsDown=false;
+	mouseIsDown = false;
 	//See if we have a mouse click
 	let deltaX = Math.abs(evt.pageX - mouseDownLocation.pageX);
 	let deltaY = Math.abs(evt.pageY - mouseDownLocation.pageY);
@@ -320,10 +328,17 @@ function handleMouseUp(evt)
 		if(!mouseDidMovement)
 		{ //If we are not dragging, it is a click
 			var myevt = copyLocation(evt);
+			var needsrefresh = true;;
+			if (ui_selectRect == null) needsrefresh = false;
+			ui_selectRect = null; //remove any previous selected marker
 			//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 == 2) TextWindow_handleMouseUp(evt);
+			if (needsrefresh) {
+				if (ui_selectRect == null) setStatus(""); //we clicked on nothing
+				PrintScreen();
+			}
 		}
 		
 	}
@@ -720,10 +735,11 @@ function printHighlights(countof="mouseover") {
 function drawshape(highlight) {
 	MainCanvas_ctx.fillStyle = highlight.shapeColor;
 	MainCanvas_ctx.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);
 	else if (highlight.shapeText == "line") {
-		var oldWidth = MainCanvas_ctx.lineWidth;
+		oldWidth = MainCanvas_ctx.lineWidth;
 		MainCanvas_ctx.lineWidth += 6;
 		MainCanvas_ctx.strokeStyle = highlight.shapeColor;
 		MainCanvas_ctx.beginPath();
@@ -733,6 +749,22 @@ function drawshape(highlight) {
 		MainCanvas_ctx.lineWidth = oldWidth;
 		MainCanvas_ctx.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";
+	}
 	MainCanvas_ctx.globalAlpha = 1.0; //reset
 	MainCanvas_ctx.fillStyle = "black"; //reset
 }
@@ -824,6 +856,8 @@ function generic_mouseoverHighlight(point, actionrec) {
 
 function device_clickOn(point, actionrec) {
 	if (actionrec.theObject !== null && actionrec.theObject.name !== null) {
+		ui_selectRect = structuredClone(actionrec.shapePoints);
+		//console.log("Setting select rect:" + JSON.stringify(ui_selectRect));
 		setStatus(actionrec.theObject.hostname);
 		//We probably do not want to do printecreen here, but we are doing it here now...
 		PrintScreen();