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

92
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 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
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) {
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();
@ -297,20 +340,29 @@ function handleMouseMove(evt)
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
if (ui_HadHighlight) { needrefresh = true; }
if (needrefresh) {
PrintScreen();
}
}
if(uiMode==2)
{
textMenu_HandleMouseMove(evt);
}
}
return;
}
function copyLocation({ pageX, pageY }) {
@ -333,6 +385,11 @@ function PrintNetworkLink(linkToPrint)
var spoint = convertXYPointToActual(newPointFromString(sdevice.location));
var dpoint = convertXYPointToActual(newPointFromString(ddevice.location));
//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);
@ -341,6 +398,7 @@ function PrintNetworkLink(linkToPrint)
}
}
}
}
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
}