diff --git a/Web/textwindow.js b/Web/textwindow.js index 82112eb..7d93407 100644 --- a/Web/textwindow.js +++ b/Web/textwindow.js @@ -31,13 +31,17 @@ function textMenuPrint(TextToPrint, selectedindex = -1, highlightedindex = -1) } //If we get here, it is already created. Get the context var cTMCctx = cachedTextMenuCanvas.getContext('2d'); - + var rect; + //Fill in the background cTMCctx.fillStyle = tmWindowBackground; cTMCctx.fillRect(0,0, cachedTextMenuCanvas.width, cachedTextMenuCanvas.height); //Put the X there so we can click on it - cTMCctx.drawImage(imageFromName("x"),cachedTextMenuCanvas.width - tmScrollBarWidth,0,tmScrollBarWidth,tmMenuBarHight); + rect = makeRectangle(cachedTextMenuCanvas.width - tmScrollBarWidth, 0, tmScrollBarWidth, tmMenuBarHight, tmOutsideXMargin, tmOutsideYMargin); + cTMCctx.drawImage(imageFromName("x"), rect.sx, rect.sy, rect.deltax, rect.deltay); + registerActionStruct("square", rect, null, textwindow_XClick); + //Put the DownArrow there so we can click on it cTMCctx.drawImage(imageFromName("ArrowUp"),cachedTextMenuCanvas.width - tmScrollBarWidth,tmMenuBarHight,tmScrollBarWidth,tmMenuBarHight); @@ -165,15 +169,7 @@ function TextWindow_handleMouseUp(evt) //We clicked the X - //Dispose of the text window - uiMode=0; - - //dispose of temp canvas; will recreate later if needed - cachedTextMenuCanvas = null; - cachedTextMenuTextCanvas = null; - - //Redraw the screen - PrintScreen(); + textwindow_XClick(); } } else @@ -195,6 +191,19 @@ function TextWindow_handleMouseUp(evt) mouseDidMovement=false; //reset it after we raise the button } +function textwindow_XClick(point, object) { + //When the x is clicked, we do not care about the position or object. There is no object + //Dispose of the text window + uiMode = 0; + + //dispose of temp canvas; will recreate later if needed + cachedTextMenuCanvas = null; + cachedTextMenuTextCanvas = null; + + //Redraw the screen + PrintScreen(); +} + function PrintPuzzleSelectMenu(level=0) { var levellist=networkNamesMatchingText("Level"+level); diff --git a/Web/ui.js b/Web/ui.js index 2a04757..3783810 100644 --- a/Web/ui.js +++ b/Web/ui.js @@ -10,6 +10,7 @@ var mouseDidMovement=false; var imageSize=40; 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. //The user interface mode. 0=network, 1=network information, 2=puzzle-selection menu var uiMode=1; @@ -90,40 +91,45 @@ function PrintScreen(WhatPassedIn=-1) var what=uiMode; if(WhatPassedIn >=0) what=WhatPassedIn; + //Clear out any old ActionStructs. They will get filled in as we print the screen. + clearActionStructs(); + console.log("PrintingScreen for mode: " + what); + var rect; if(what == 0) { - //The network drawing mode. Print the network - //Clear the old screen - MainCanvas_ctx.fillStyle = maincanvasBackground; - MainCanvas_ctx.fillRect(0,0, MainCanvas.width, MainCanvas.height); - - //Draw the puzzle-select button + //The network drawing mode. Print the network + //Clear the old screen + MainCanvas_ctx.fillStyle = maincanvasBackground; + MainCanvas_ctx.fillRect(0, 0, MainCanvas.width, MainCanvas.height); + + //Draw the puzzle-select button //Put the X there so we can click on it - MainCanvas_ctx.drawImage(imageFromName("menu"),MainCanvas.width - small_button_size,0,small_button_size,small_button_size); + rect = makeRectangle(MainCanvas.width - small_button_size, 0, small_button_size, small_button_size); + MainCanvas_ctx.drawImage(imageFromName("menu"),rect.sx,rect.sy,rect.deltax,rect.deltay); + //registerActionStruct("square", rect, null, textwindow_XClick); - //Draw the info button - MainCanvas_ctx.drawImage(imageFromName("info"),MainCanvas.width - small_button_size,small_button_size,small_button_size,small_button_size); + //Draw the info button + MainCanvas_ctx.drawImage(imageFromName("info"),MainCanvas.width - small_button_size,small_button_size,small_button_size,small_button_size); - //Draw the info button - MainCanvas_ctx.drawImage(imageFromName("eye"), MainCanvas.width - small_button_size, small_button_size*2, small_button_size, small_button_size); + //Draw the info button + MainCanvas_ctx.drawImage(imageFromName("eye"), MainCanvas.width - small_button_size, small_button_size*2, small_button_size, small_button_size); - drawSelectMenu(); - PrintAllNetworkLinks(); - PrintAllNetworkDevices(); - } - else if(what == 1) //PuzzleDescription/Info - { + drawSelectMenu(); + PrintAllNetworkLinks(); + PrintAllNetworkDevices(); + } + else if(what == 1) //PuzzleDescription/Info + { //Display the text about the puzzle textMenuPrint(puzzle.en_message); - } - else if(what == 2) //PuzzleSelect - { + } + else if(what == 2) //PuzzleSelect + { //TextMenuSelection PrintPuzzleSelectMenu(0); - } - + } } function handleTouchStart(evt) @@ -158,6 +164,47 @@ function handleMouseDown(evt) if(uiMode==0) SelectMenu_handleMouseDown(mouseDownLocation); } +function CheckForActions(actionPoint, action) { + if (uiActions.length >= 0) { + var checkit = false; + var inside = false; + for (var index = 0; index < uiActions.length; index++) + { + if (action == "leftclick" && uiActions[index].funcLeftClick !== null) checkit = true; + if (action == "rightclick" && uiActions[index].funcRightClick !== null) checkit = true; + if (action == "mouseover" && uiActions[index].funcMouseover !== null) checkit = true; + checklocation = uiActions[index]; + 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 (inside) { + console.log("Is inside"); + switch (action) { + case "leftclick": + if (checklocation.funcLeftClick != null) { + checklocation.funcLeftClick(actionPoint, checklocation.theObject); + console.log("Successfully did a UI action"); + return true; + } + } + } + } + return false; +} + function handleMouseUp(evt) { //evt.preventDefault(); @@ -177,6 +224,9 @@ function handleMouseUp(evt) } if(!mouseDidMovement) { //If we are not dragging, it is a click + var myevt = copyLocation(evt); + 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==0 && evt.pageX >= MainCanvas.width - small_button_size) @@ -299,7 +349,7 @@ function PrintNetworkDevice(ToPrint) var gap = 3; var delta; var ipaddresses = ipsFromDevice(ToPrint); - console.log("addresses: " + JSON.stringify(ipaddresses)); + //console.log("addresses: " + JSON.stringify(ipaddresses)); switch (uiDeviceInfoLevel) { case 0: //Do not print anything @@ -415,3 +465,48 @@ function deviceRectangle(theDevice) } return rect; } + +function makeRectangle(x1, y1, deltax, deltay, offsetx = 0, offsety = 0) { + //The offset is for when we are drawing on a cached surface. It adds x or y to the point we are looking at + var struct = { + sx: x1, + sy: y1, + dx: x1 + deltax, + dy: y1 + deltay, + deltay: deltay, + deltax: deltax, + offsetx: offsetx, + offsety: offsety, + } + return struct; +} + +//Make a structure to hold all our data +function actionStruct(shapeText, shapePoints, theObject=null, funcLeftClick=null, funcRightClick=null, funcMouseover=null) { + var struct = { + shapeText: shapeText, + shapePoints: shapePoints, + theObject: theObject, + funcLeftClick: funcLeftClick, + funcRightClick: funcRightClick, + funcMouseover: funcMouseover, + } + return struct; +} + +function registerActionStruct(shapeText, shapePoints, theObject=null, funcLeftClick=null, funcRightClick=null, funcMouseover=null) { + //Make an object with all the data + var what = actionStruct(shapeText, shapePoints, theObject, funcLeftClick, funcRightClick, funcMouseover); + console.log("Pushing an action: " + shapeText); + //Push it onto the uiActions list + uiActions.push(what); +} + +function clearActionStructs() { + uiActions = []; +} + +//This is what happens when we click on the x to close the window. +function xclicked() { + +} \ No newline at end of file