EduNetworkBuilder/Web/selectmenu.js

132 lines
4.3 KiB
JavaScript
Raw Normal View History

//Make sure canvasses are in the correct position
var mouseIsDown=false;
var selectedMenuItemName="";
var selectedMenuYOffset=0;
const selectMenuNames = ["link", "router", "firewall", "hub", "switch",
"pc", "laptop", "server", "ip_phone", "printer",
"copier", "microwave", "fluorescent",
"wap", "wrepeater", "wbridge", "wrepeater"];
var cachedSelectMenuCanvas=null;
var menuItemSize=50;
function InitializeSelectMenu() {
cachedSelectMenuCanvas = document.createElement('canvas');
cachedSelectMenuCanvas.width = menuItemSize;
console.log("length= " + selectMenuNames.length);
cachedSelectMenuCanvas.height = menuItemSize * selectMenuNames.length;
var cSMCctx = cachedSelectMenuCanvas.getContext('2d');
var starty = 0;
selectMenuNames.forEach((element) => {
//console.log("Printing to select: "+ element);
cSMCctx.drawImage(imageCollection[element], 0, starty, menuItemSize, menuItemSize);
starty += menuItemSize;
});
}
function drawSelectMenu()
{
//console.log("Printing on main canvass");
MainCanvas_ctx.fillStyle = maincanvasBackground;
MainCanvas_ctx.fillRect(0, 0, menuItemSize, MainCanvas.height);
if (selectedMenuYOffset < 0) selectedMenuYOffset = 0;
if (cachedSelectMenuCanvas == null) InitializeSelectMenu();//initialize it if not done yet
if(selectedMenuYOffset + MainCanvas.height > cachedSelectMenuCanvas.height) selectedMenuYOffset = cachedSelectMenuCanvas.height -MainCanvas.height;
MainCanvas_ctx.drawImage(cachedSelectMenuCanvas,0,selectedMenuYOffset,50,MainCanvas.height,0,0,50,MainCanvas.height);
let index = selectMenuNames.indexOf(selectedMenuItemName);
if(index > -1)
{
//We have a selected menu item
const cachedSelectMenuCanvasOverlay = document.createElement('canvas');
let boxwidth=3;
cachedSelectMenuCanvasOverlay.width = cachedSelectMenuCanvas.width;
cachedSelectMenuCanvasOverlay.height = cachedSelectMenuCanvas.height;
var overlay = cachedSelectMenuCanvasOverlay.getContext("2d");
let ty = index * menuItemSize;
overlay.beginPath();
overlay.lineWidth = boxwidth;
overlay.strokeStyle = "green";
overlay.rect(boxwidth,ty,menuItemSize-(boxwidth * 2),menuItemSize);
overlay.stroke();
MainCanvas_ctx.drawImage(cachedSelectMenuCanvasOverlay,0,selectedMenuYOffset,50,MainCanvas.height,0,0,50,MainCanvas.height);
//console.log("drawing select box around 0," + ty + " -> " + menuItemSize);
}
//Now, if we have more to the top or bottom, draw the arrows showing as much
if(selectedMenuYOffset > (menuItemSize / 2))
{
//We have one item above us. Draw the arrow
//console.log("Drawing up arrow");
MainCanvas_ctx.drawImage(imageFromName("ArrowUp"),0,0,50,25);
}
//Now, if we have more to the top or bottom, draw the arrows showing as much
if(selectedMenuYOffset + (MainCanvas.height + 25) < cachedSelectMenuCanvas.height)
{
//We have one item below us. Draw the arrow
//console.log("Drawing down arrow");
MainCanvas_ctx.drawImage(imageFromName("ArrowDown"),0,MainCanvas.height - 25,50,25);
}
}
function SelectMenu_handleMouseDown(evt)
{
mouseDownLocation = copyLocation(evt);
mouseIsDown=true;
}
function SelectMenu_handleMouseUp(evt)
{
mouseIsDown=false;
//console.log("mouseup");
//See if we have a mouse click
let deltaX = Math.abs(evt.pageX - mouseDownLocation.pageX);
let deltaY = Math.abs(evt.pageY - mouseDownLocation.pageY);
//console.log("delta " + deltaX + "," + deltaY);
if(deltaY < 3 && deltaX <3)
{
//We did not move much. Assume click
if(evt.pageX <= menuItemSize && !mouseDidMovement)
{
//We are in the item select menu.
let actualMenuLocation = selectedMenuYOffset + evt.pageY;
let newitemindex = Math.floor( actualMenuLocation / menuItemSize);
console.log("clicked on item " + selectMenuNames[newitemindex]);
selectedMenuItemName = selectMenuNames[newitemindex];
drawSelectMenu();
}
}
mouseDidMovement=false; //reset it after we raise the button
}
function SelectMenu_handleMouseMove(evt)
{
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 );
selectedMenuYOffset-=deltaY;
mouseDownLocation = copyLocation(evt); //reset the pointer
drawSelectMenu();
mouseDidMovement=true;
}
}
function copyLocation({ pageX, pageY }) {
return { pageX, pageY };
}