From d7f73f04d8f2566ae7bd80a62f23d28861e28b99 Mon Sep 17 00:00:00 2001 From: Tim Young Date: Sat, 27 Apr 2024 13:39:36 -0500 Subject: [PATCH] Most of the mouse-over highlighting is working properly --- Web/ui.js | 162 +++++++++++++++++++++++++++++++++++++++--------------- 1 file changed, 119 insertions(+), 43 deletions(-) diff --git a/Web/ui.js b/Web/ui.js index 187ebe1..7200563 100644 --- a/Web/ui.js +++ b/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 } \ No newline at end of file