132 lines
4.4 KiB
JavaScript
132 lines
4.4 KiB
JavaScript
//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 };
|
|
}
|