timy/EduNetworkBuilder
timy/EduNetworkBuilder
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Tim Young 2024-05-17 10:33:33 -06:00
parent 9be833dd2c
commit 0859bffc23
1 changed files with 37 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
Web/ui.js
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 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 uiActions = [];//a list of things on the screen we can click on or process.
var ui_highlightRect = null; var ui_highlightRect = null;
var ui_selectRect = null;
var ui_HadHighlight = false; var ui_HadHighlight = false;
var ui_status_height = 25; var ui_status_height = 25;
var ui_StatusText = ""; var ui_StatusText = "";
@ -176,6 +177,13 @@ function PrintScreen(WhatPassedIn=-1)
MainCanvas_ctx.strokeStyle = "black"; 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(); drawSelectMenu();
PrintAllNetworkLinks(); PrintAllNetworkLinks();
PrintAllNetworkDevices(); PrintAllNetworkDevices();
@ -303,7 +311,7 @@ function distance(x1, y1, x2, y2) {
function handleMouseUp(evt) function handleMouseUp(evt)
{ {
//evt.preventDefault(); //evt.preventDefault();
mouseIsDown=false; mouseIsDown = false;
//See if we have a mouse click //See if we have a mouse click
let deltaX = Math.abs(evt.pageX - mouseDownLocation.pageX); let deltaX = Math.abs(evt.pageX - mouseDownLocation.pageX);
let deltaY = Math.abs(evt.pageY - mouseDownLocation.pageY); let deltaY = Math.abs(evt.pageY - mouseDownLocation.pageY);
@ -320,10 +328,17 @@ function handleMouseUp(evt)
if(!mouseDidMovement) if(!mouseDidMovement)
{ //If we are not dragging, it is a click { //If we are not dragging, it is a click
var myevt = copyLocation(evt); 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)); //console.log("evt:" + JSON.stringify(myevt));
if (CheckForActions(myevt, "leftclick")) return; //If we did this, do not do anything else. if (CheckForActions(myevt, "leftclick")) return; //If we did this, do not do anything else.
if(uiMode==1) TextWindow_handleMouseUp(evt); 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) { function drawshape(highlight) {
MainCanvas_ctx.fillStyle = highlight.shapeColor; MainCanvas_ctx.fillStyle = highlight.shapeColor;
MainCanvas_ctx.globalAlpha = highlight.opaciticy; //mostly transparent MainCanvas_ctx.globalAlpha = highlight.opaciticy; //mostly transparent
var oldWidth;
if (highlight.shapeText == "square") if (highlight.shapeText == "square")
MainCanvas_ctx.fillRect(highlight.shapePoints.sx, highlight.shapePoints.sy, highlight.shapePoints.deltax, highlight.shapePoints.deltay); MainCanvas_ctx.fillRect(highlight.shapePoints.sx, highlight.shapePoints.sy, highlight.shapePoints.deltax, highlight.shapePoints.deltay);
else if (highlight.shapeText == "line") { else if (highlight.shapeText == "line") {
var oldWidth = MainCanvas_ctx.lineWidth; oldWidth = MainCanvas_ctx.lineWidth;
MainCanvas_ctx.lineWidth += 6; MainCanvas_ctx.lineWidth += 6;
MainCanvas_ctx.strokeStyle = highlight.shapeColor; MainCanvas_ctx.strokeStyle = highlight.shapeColor;
MainCanvas_ctx.beginPath(); MainCanvas_ctx.beginPath();
@ -733,6 +749,22 @@ function drawshape(highlight) {
MainCanvas_ctx.lineWidth = oldWidth; MainCanvas_ctx.lineWidth = oldWidth;
MainCanvas_ctx.strokeStyle = "black"; 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.globalAlpha = 1.0; //reset
MainCanvas_ctx.fillStyle = "black"; //reset MainCanvas_ctx.fillStyle = "black"; //reset
} }
@ -824,6 +856,8 @@ function generic_mouseoverHighlight(point, actionrec) {
function device_clickOn(point, actionrec) { function device_clickOn(point, actionrec) {
if (actionrec.theObject !== null && actionrec.theObject.name !== null) { 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); setStatus(actionrec.theObject.hostname);
//We probably do not want to do printecreen here, but we are doing it here now... //We probably do not want to do printecreen here, but we are doing it here now...
PrintScreen(); PrintScreen();