Put a selection-box around an item if we clicked on something
This commit is contained in:
parent
9be833dd2c
commit
0859bffc23
40
Web/ui.js
40
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();
|
||||
|
Loading…
Reference in New Issue
Block a user