Put a selection-box around an item if we clicked on something

This commit is contained in:
Tim Young 2024-05-17 10:33:33 -06:00
parent 9be833dd2c
commit 0859bffc23

View File

@ -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();