Most of the mouse-over highlighting is working properly
This commit is contained in:
parent
50b4843d76
commit
d7f73f04d8
162
Web/ui.js
162
Web/ui.js
|
|
@ -12,6 +12,7 @@ var small_button_size = 20;
|
|||
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_HadHighlight = false;
|
||||
|
||||
//The user interface mode. 0=network, 1=network information, 2=puzzle-selection menu
|
||||
var uiMode=1;
|
||||
|
|
@ -110,10 +111,24 @@ function PrintScreen(WhatPassedIn=-1)
|
|||
//console.log("trying to highlight something: " + JSON.stringify(ui_highlightRect));
|
||||
MainCanvas_ctx.fillStyle = "white";
|
||||
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.fillStyle = "black"; //reset
|
||||
}
|
||||
ui_HadHighlight = true;
|
||||
}
|
||||
else ui_HadHighlight = false;
|
||||
|
||||
//Draw the puzzle-select button
|
||||
//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 == "mouseover" && uiActions[index].funcMouseover !== null) checkit = true;
|
||||
checklocation = uiActions[index];
|
||||
var point = newPointFromPair(actionPoint.pageX - checklocation.shapePoints.offsetx, actionPoint.pageY - checklocation.shapePoints.offsety);
|
||||
if (checkit) {
|
||||
//See if the click is inside the shape
|
||||
if (checklocation.shapeText == "square") {
|
||||
if (actionPoint.pageX - checklocation.shapePoints.offsetx >= checklocation.shapePoints.sx) {
|
||||
if (actionPoint.pageX - checklocation.shapePoints.offsetx <= checklocation.shapePoints.dx) {
|
||||
if (actionPoint.pageY - checklocation.shapePoints.offsety >= checklocation.shapePoints.sy) {
|
||||
if (actionPoint.pageY - checklocation.shapePoints.offsety <= checklocation.shapePoints.dy) {
|
||||
inside = true;
|
||||
}
|
||||
}
|
||||
if (pointInRect(point, checklocation.shapePoints))
|
||||
inside = true;
|
||||
}
|
||||
if (checklocation.shapeText == "line") {
|
||||
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) {
|
||||
//console.log("Is inside");
|
||||
|
|
@ -211,12 +234,14 @@ function CheckForActions(actionPoint, action) {
|
|||
//console.log("Successfully did a UI action");
|
||||
return true;
|
||||
}
|
||||
break;
|
||||
case "mouseover":
|
||||
if (checklocation.funcMouseover != null) {
|
||||
checklocation.funcMouseover(actionPoint, checklocation);
|
||||
//console.log("Successfully did a UI action");
|
||||
return true;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -224,6 +249,24 @@ function CheckForActions(actionPoint, action) {
|
|||
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)
|
||||
{
|
||||
//evt.preventDefault();
|
||||
|
|
@ -281,29 +324,37 @@ function handleMouseMove(evt)
|
|||
//evt.preventDefault();
|
||||
if(mouseIsDown)
|
||||
{
|
||||
let deltaX = evt.pageX - mouseDownLocation.pageX;
|
||||
let deltaY = evt.pageY - mouseDownLocation.pageY;
|
||||
if(isNaN(deltaY)) deltaY=0;
|
||||
if(isNaN(deltaX)) deltaX=0;
|
||||
//we are dragging
|
||||
//console.log('mousemove ' + evt.pageX + " " + evt.pageY + " delta " + deltaY );
|
||||
if(uiMode == 0)
|
||||
{
|
||||
SelectMenu_handleMouseMove(evt);
|
||||
}
|
||||
let deltaX = evt.pageX - mouseDownLocation.pageX;
|
||||
let deltaY = evt.pageY - mouseDownLocation.pageY;
|
||||
if(isNaN(deltaY)) deltaY=0;
|
||||
if(isNaN(deltaX)) deltaX=0;
|
||||
//we are dragging
|
||||
//console.log('mousemove ' + evt.pageX + " " + evt.pageY + " delta " + deltaY );
|
||||
if(uiMode == 0)
|
||||
{
|
||||
SelectMenu_handleMouseMove(evt);
|
||||
}
|
||||
|
||||
mouseDidMovement=true;
|
||||
}
|
||||
mouseDidMovement=true;
|
||||
}
|
||||
else //Mouse is not down. Not dragging
|
||||
{
|
||||
var needrefresh = false;
|
||||
var oldRect = structuredClone(ui_highlightRect);
|
||||
if (!CheckForActions(evt, "mouseover")) {
|
||||
//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;
|
||||
}
|
||||
}
|
||||
ui_highlightRect = null; //nothing to highlight
|
||||
PrintScreen();
|
||||
if (ui_HadHighlight) { needrefresh = true; }
|
||||
if (needrefresh) {
|
||||
PrintScreen();
|
||||
}
|
||||
}
|
||||
if(uiMode==2)
|
||||
{
|
||||
|
|
@ -311,6 +362,7 @@ function handleMouseMove(evt)
|
|||
}
|
||||
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
function copyLocation({ pageX, pageY }) {
|
||||
|
|
@ -322,25 +374,31 @@ function PrintNetworkLink(linkToPrint)
|
|||
//We should have passed in a working link, make sure it exists
|
||||
if(linkToPrint !== null)
|
||||
{
|
||||
if(linkToPrint.SrcNic !== null && linkToPrint.DestNic !== null)
|
||||
{
|
||||
//console.log("printing link from " + linkToPrint.SrcNic.hostname);
|
||||
sdevice = deviceFromID(linkToPrint.SrcNic.hostid);
|
||||
ddevice = deviceFromID(linkToPrint.DstNic.hostid);
|
||||
if(sdevice !== null && ddevice !== null)
|
||||
{
|
||||
//We have an existing link with two devices. Find the device locations and print
|
||||
var spoint = convertXYPointToActual(newPointFromString(sdevice.location));
|
||||
var dpoint = convertXYPointToActual(newPointFromString(ddevice.location));
|
||||
if(linkToPrint.SrcNic !== null && linkToPrint.DestNic !== null)
|
||||
{
|
||||
//console.log("printing link from " + linkToPrint.SrcNic.hostname);
|
||||
sdevice = deviceFromID(linkToPrint.SrcNic.hostid);
|
||||
ddevice = deviceFromID(linkToPrint.DstNic.hostid);
|
||||
if(sdevice !== null && ddevice !== null)
|
||||
{
|
||||
//We have an existing link with two devices. Find the device locations and print
|
||||
var spoint = convertXYPointToActual(newPointFromString(sdevice.location));
|
||||
var dpoint = convertXYPointToActual(newPointFromString(ddevice.location));
|
||||
|
||||
//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();
|
||||
}
|
||||
//Make an actionstruct
|
||||
var actionLine = makeLine(spoint.x, spoint.y, dpoint.x, dpoint.y);
|
||||
registerActionStruct("line", actionLine, linkToPrint, null, null, generic_mouseoverHighlight);
|
||||
|
||||
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()
|
||||
|
|
@ -510,6 +568,12 @@ function makeRectangle(x1, y1, deltax, deltay, offsetx = 0, offsety = 0) {
|
|||
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
|
||||
function actionStruct(shapeText, shapePoints, theObject=null, funcLeftClick=null, funcRightClick=null, funcMouseover=null) {
|
||||
var struct = {
|
||||
|
|
@ -520,6 +584,7 @@ function actionStruct(shapeText, shapePoints, theObject=null, funcLeftClick=null
|
|||
funcRightClick: funcRightClick,
|
||||
funcMouseover: funcMouseover,
|
||||
}
|
||||
shapePoints.shapeText = shapeText;
|
||||
return struct;
|
||||
}
|
||||
|
||||
|
|
@ -528,7 +593,7 @@ function registerActionStruct(shapeText, shapePoints, theObject=null, funcLeftCl
|
|||
var what = actionStruct(shapeText, shapePoints, theObject, funcLeftClick, funcRightClick, funcMouseover);
|
||||
//console.log("Pushing an action: " + shapeText);
|
||||
//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));
|
||||
}
|
||||
|
||||
|
|
@ -540,9 +605,20 @@ function clearActionStructs() {
|
|||
function generic_mouseoverHighlight(point, 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
|
||||
var oldrec = structuredClone(ui_highlightRect);
|
||||
if (actionrec.shapeText == "square") {
|
||||
ui_highlightRect = structuredClone(actionrec.shapePoints);
|
||||
ui_highlightRect.shapeText = "square";
|
||||
//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
|
||||
}
|
||||
Loading…
Reference in New Issue