EduNetworkBuilder/Web/selectmenu.js

//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 };
}