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

Most of the mouse-over highlighting is working properly

Browse Source
This commit is contained in:
Tim Young 2024-04-27 13:39:36 -05:00
parent 50b4843d76
commit d7f73f04d8
1 changed files with 119 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

162
Web/ui.js
View File

@ -12,6 +12,7 @@ var small_button_size = 20;
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_HadHighlight = false;
//The user interface mode. 0=network, 1=network information, 2=puzzle-selection menu //The user interface mode. 0=network, 1=network information, 2=puzzle-selection menu
var uiMode=1; var uiMode=1;
@ -110,10 +111,24 @@ function PrintScreen(WhatPassedIn=-1)
//console.log("trying to highlight something: " + JSON.stringify(ui_highlightRect)); //console.log("trying to highlight something: " + JSON.stringify(ui_highlightRect));
MainCanvas_ctx.fillStyle = "white"; MainCanvas_ctx.fillStyle = "white";
MainCanvas_ctx.globalAlpha = 0.3; //mostly transparent MainCanvas_ctx.globalAlpha = 0.3; //mostly transparent
MainCanvas_ctx.fillRect(ui_highlightRect.sx, ui_highlightRect.sy, ui_highlightRect.deltax, ui_highlightRect.deltay); 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.globalAlpha = 1.0; //reset
MainCanvas_ctx.fillStyle = "black"; //reset MainCanvas_ctx.fillStyle = "black"; //reset
} ui_HadHighlight = true;
}
else ui_HadHighlight = false;
//Draw the puzzle-select button //Draw the puzzle-select button
//Put the X there so we can click on it //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 == "rightclick" && uiActions[index].funcRightClick !== null) checkit = true;
if (action == "mouseover" && uiActions[index].funcMouseover !== null) checkit = true; if (action == "mouseover" && uiActions[index].funcMouseover !== null) checkit = true;
checklocation = uiActions[index]; checklocation = uiActions[index];
var point = newPointFromPair(actionPoint.pageX - checklocation.shapePoints.offsetx, actionPoint.pageY - checklocation.shapePoints.offsety);
if (checkit) { if (checkit) {
//See if the click is inside the shape //See if the click is inside the shape
if (checklocation.shapeText == "square") { 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) { inside = true;
if (actionPoint.pageY - checklocation.shapePoints.offsety >= checklocation.shapePoints.sy) { }
if (actionPoint.pageY - checklocation.shapePoints.offsety <= checklocation.shapePoints.dy) { if (checklocation.shapeText == "line") {
inside = true; 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) { if (inside) {
//console.log("Is inside"); //console.log("Is inside");
@ -211,12 +234,14 @@ function CheckForActions(actionPoint, action) {
//console.log("Successfully did a UI action"); //console.log("Successfully did a UI action");
return true; return true;
} }
break;
case "mouseover": case "mouseover":
if (checklocation.funcMouseover != null) { if (checklocation.funcMouseover != null) {
checklocation.funcMouseover(actionPoint, checklocation); checklocation.funcMouseover(actionPoint, checklocation);
//console.log("Successfully did a UI action"); //console.log("Successfully did a UI action");
return true; return true;
} }
break;
} }
} }
} }
@ -224,6 +249,24 @@ function CheckForActions(actionPoint, action) {
return false; 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) function handleMouseUp(evt)
{ {
//evt.preventDefault(); //evt.preventDefault();
@ -281,29 +324,37 @@ function handleMouseMove(evt)
//evt.preventDefault(); //evt.preventDefault();
if(mouseIsDown) if(mouseIsDown)
{ {
let deltaX = evt.pageX - mouseDownLocation.pageX; let deltaX = evt.pageX - mouseDownLocation.pageX;
let deltaY = evt.pageY - mouseDownLocation.pageY; let deltaY = evt.pageY - mouseDownLocation.pageY;
if(isNaN(deltaY)) deltaY=0; if(isNaN(deltaY)) deltaY=0;
if(isNaN(deltaX)) deltaX=0; if(isNaN(deltaX)) deltaX=0;
//we are dragging //we are dragging
//console.log('mousemove ' + evt.pageX + " " + evt.pageY + " delta " + deltaY ); //console.log('mousemove ' + evt.pageX + " " + evt.pageY + " delta " + deltaY );
if(uiMode == 0) if(uiMode == 0)
{ {
SelectMenu_handleMouseMove(evt); SelectMenu_handleMouseMove(evt);
} }
mouseDidMovement=true; mouseDidMovement=true;
} }
else //Mouse is not down. Not dragging else //Mouse is not down. Not dragging
{ {
var needrefresh = false; var needrefresh = false;
var oldRect = structuredClone(ui_highlightRect);
if (!CheckForActions(evt, "mouseover")) { if (!CheckForActions(evt, "mouseover")) {
//We did not find anything //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; needrefresh = true;
} }
ui_highlightRect = null; //nothing to highlight ui_highlightRect = null; //nothing to highlight
PrintScreen(); if (ui_HadHighlight) { needrefresh = true; }
if (needrefresh) {
PrintScreen();
}
} }
if(uiMode==2) if(uiMode==2)
{ {
@ -311,6 +362,7 @@ function handleMouseMove(evt)
} }
} }
return;
} }
function copyLocation({ pageX, pageY }) { function copyLocation({ pageX, pageY }) {
@ -322,25 +374,31 @@ function PrintNetworkLink(linkToPrint)
//We should have passed in a working link, make sure it exists //We should have passed in a working link, make sure it exists
if(linkToPrint !== null) if(linkToPrint !== null)
{ {
if(linkToPrint.SrcNic !== null && linkToPrint.DestNic !== null) if(linkToPrint.SrcNic !== null && linkToPrint.DestNic !== null)
{ {
//console.log("printing link from " + linkToPrint.SrcNic.hostname); //console.log("printing link from " + linkToPrint.SrcNic.hostname);
sdevice = deviceFromID(linkToPrint.SrcNic.hostid); sdevice = deviceFromID(linkToPrint.SrcNic.hostid);
ddevice = deviceFromID(linkToPrint.DstNic.hostid); ddevice = deviceFromID(linkToPrint.DstNic.hostid);
if(sdevice !== null && ddevice !== null) if(sdevice !== null && ddevice !== null)
{ {
//We have an existing link with two devices. Find the device locations and print //We have an existing link with two devices. Find the device locations and print
var spoint = convertXYPointToActual(newPointFromString(sdevice.location)); var spoint = convertXYPointToActual(newPointFromString(sdevice.location));
var dpoint = convertXYPointToActual(newPointFromString(ddevice.location)); var dpoint = convertXYPointToActual(newPointFromString(ddevice.location));
//Now we draw a line between them //Make an actionstruct
MainCanvas_ctx.beginPath(); var actionLine = makeLine(spoint.x, spoint.y, dpoint.x, dpoint.y);
MainCanvas_ctx.moveTo(spoint.x,spoint.y); registerActionStruct("line", actionLine, linkToPrint, null, null, generic_mouseoverHighlight);
MainCanvas_ctx.lineTo(dpoint.x,dpoint.y);
MainCanvas_ctx.stroke(); var old
} //Now we draw a line between them
MainCanvas_ctx.beginPath();
MainCanvas_ctx.moveTo(spoint.x,spoint.y);
MainCanvas_ctx.lineTo(dpoint.x,dpoint.y);
MainCanvas_ctx.stroke();
}
}
} }
}
} }
function PrintAllNetworkLinks() function PrintAllNetworkLinks()
@ -510,6 +568,12 @@ function makeRectangle(x1, y1, deltax, deltay, offsetx = 0, offsety = 0) {
return struct; 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 //Make a structure to hold all our data
function actionStruct(shapeText, shapePoints, theObject=null, funcLeftClick=null, funcRightClick=null, funcMouseover=null) { function actionStruct(shapeText, shapePoints, theObject=null, funcLeftClick=null, funcRightClick=null, funcMouseover=null) {
var struct = { var struct = {
@ -520,6 +584,7 @@ function actionStruct(shapeText, shapePoints, theObject=null, funcLeftClick=null
funcRightClick: funcRightClick, funcRightClick: funcRightClick,
funcMouseover: funcMouseover, funcMouseover: funcMouseover,
} }
shapePoints.shapeText = shapeText;
return struct; return struct;
} }
@ -528,7 +593,7 @@ function registerActionStruct(shapeText, shapePoints, theObject=null, funcLeftCl
var what = actionStruct(shapeText, shapePoints, theObject, funcLeftClick, funcRightClick, funcMouseover); var what = actionStruct(shapeText, shapePoints, theObject, funcLeftClick, funcRightClick, funcMouseover);
//console.log("Pushing an action: " + shapeText); //console.log("Pushing an action: " + shapeText);
//Push it onto the uiActions list //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)); //console.log("ActionList: " + JSON.stringify(uiActions));
} }
@ -540,9 +605,20 @@ function clearActionStructs() {
function generic_mouseoverHighlight(point, actionrec) { function generic_mouseoverHighlight(point, actionrec) {
//console.log("Found highlight " + JSON.stringify(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 //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") { if (actionrec.shapeText == "square") {
ui_highlightRect = structuredClone(actionrec.shapePoints); ui_highlightRect = structuredClone(actionrec.shapePoints);
ui_highlightRect.shapeText = "square";
//console.log("setting highlights to:" + JSON.stringify(ui_highlightRect)); //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
} }