EduNetworkBuilder/Web/textwindow.js

//This file pertains to the textwindow.
//We use this for displaying a puzzle's starting instructions
//and for choosing new puzzles.

var tmOutsideYMargin=20; //How far from the top and bottom left blank
var tmOutsideXMargin=20; //How far from right and left side left blank
var tmBorderWidth=4;
var tmMenuBarHight=20;
var tmScrollBarWidth=20;
var tmWindowBackground="grey";
var tmTextYGap=5; //The gap between lines

var cachedTextMenuCanvas = null;


//Print the textmenu
function textMenuPrint(TextToPrint, selectedindex = -1, highlightedindex = -1)
{
    //It would be nice to print it on top of whatever is currently there.
    //But we will do that later.
    PrintScreen(0); //Print the network, then we can lay over it

	if(cachedTextMenuCanvas == null)
	{		
		cachedTextMenuCanvas = document.createElement('canvas');
		cachedTextMenuCanvas.width = MainCanvas.width - (tmOutsideXMargin * 2);
		cachedTextMenuCanvas.height = MainCanvas.height - (tmOutsideYMargin * 2);
	}
	//If we get here, it is already created.  Get the context
	var cTMCctx = cachedTextMenuCanvas.getContext('2d');
	
	//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);

	//Put the DownArrow there so we can click on it
	cTMCctx.drawImage(imageFromName("ArrowUp"),cachedTextMenuCanvas.width - tmScrollBarWidth,tmMenuBarHight,tmScrollBarWidth,tmMenuBarHight);

	//Put the X there so we can click on it
	cTMCctx.drawImage(imageFromName("ArrowDown"),cachedTextMenuCanvas.width - tmScrollBarWidth,cachedTextMenuCanvas.height - tmMenuBarHight,tmScrollBarWidth,tmMenuBarHight);

    //Create and Draw the menu bar
	cTMCctx.beginPath();
	cTMCctx.moveTo(cachedTextMenuCanvas.width - tmScrollBarWidth,0);
	cTMCctx.lineTo(cachedTextMenuCanvas.width - tmScrollBarWidth,cachedTextMenuCanvas.height);
	cTMCctx.strokeStyle="white";
	cTMCctx.stroke();
	
	//horizontal line under the X
	cTMCctx.beginPath();
	cTMCctx.moveTo(cachedTextMenuCanvas.width - tmScrollBarWidth,tmMenuBarHight);
	cTMCctx.lineTo(cachedTextMenuCanvas.width,tmMenuBarHight);
	cTMCctx.strokeStyle="white";
	cTMCctx.stroke();
	
	var cachedTextMenuTextCanvas = document.createElement('canvas');
	//Figure out how much space we need. - start with a simple canvas (non expandable)
	
	cachedTextMenuTextCanvas.width = cachedTextMenuCanvas.width - tmScrollBarWidth;
	cachedTextMenuTextCanvas.height = cachedTextMenuCanvas.height;

	var cTMTCctx = cachedTextMenuTextCanvas.getContext('2d');
	
	cTMTCctx.strokeStyle="black";
	cTMTCctx.font = "20px serif";

	var lines = [];
	if(typeof(TextToPrint) === "string") 
		lines = fragmentTextIntoLines(cTMTCctx, TextToPrint, cachedTextMenuTextCanvas.width - 10);
	else
		lines = TextToPrint; //If we passed in a list of strings
	//Now we have the number of lines.
	var metrics = cTMTCctx.measureText("test");
	var yHeight = metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent + tmTextYGap; //the hight of the default font and gap
	//console.log("Height = "+yHeight);

	var totalHeight = (lines.length * yHeight) + tmTextYGap;
	
	if(cachedTextMenuTextCanvas.height < totalHeight) cachedTextMenuTextCanvas.height = totalHeight;// resize if needed

	//Highlight text
	if (highlightedindex >= 0)
	{
		//console.log("Showing hilighted index " +  highlightedindex);
		//Fill in the area highlighted
		cTMTCctx.fillStyle = "white";
		cTMTCctx.globalAlpha = 0.3; //mostly transparent
		cTMTCctx.fillRect(0,highlightedindex * yHeight + (yHeight/3), cachedTextMenuCanvas.width, yHeight);
		cTMTCctx.globalAlpha = 1.0; //reset
	}
	
	//Chosen text
	if (selectedindex >= 0)
	{
		//console.log("Showing selected index " +  selectedindex + " " + yHeight);
		//Fill in the area highlighted
		cTMTCctx.fillStyle = "green";
		cTMTCctx.globalAlpha = 0.4; //mostly transparent
		cTMTCctx.fillRect(0,selectedindex * yHeight + (yHeight/3), cachedTextMenuCanvas.width, yHeight);
		cTMTCctx.globalAlpha = 1.0; //reset
	}
	
	cTMTCctx.fillStyle = "black";
	cTMTCctx.strokeStyle="black";

	
	//Now, print text on the canvas.
	for (var i = 0; i < lines.length; i++)
	{
		cTMTCctx.fillText(lines[i], 5, ((i+1) * yHeight));
		//console.log("printing text part: " + lines[i]);
	}
	
	//Write the text canvas on the main canvas.  If we are scrolled up or down, do that.
	cTMCctx.drawImage(cachedTextMenuTextCanvas,0,0);
	
    //create and Draw the scroll-bar on the side
    //Then make the text if we have not done so
    //Finally print on top of the main canvas
	MainCanvas_ctx.globalAlpha = 0.9; //some transparancy
	MainCanvas_ctx.drawImage(cachedTextMenuCanvas,tmOutsideXMargin, tmOutsideYMargin)
	MainCanvas_ctx.globalAlpha = 1; //reset transparancy
}


function fragmentTextIntoLines(ctx, text, maxWidth) {
    var words = text.split(" ");
    var lines = [];
    var currentLine = words[0];

    for (var i = 1; i < words.length; i++) {
        var word = words[i];
        var width = ctx.measureText(currentLine + " " + word).width;
        if (width < maxWidth) {
            currentLine += " " + word;
        } else {
            lines.push(currentLine);
            currentLine = word;
        }
    }
    lines.push(currentLine);
    return lines;
}

function TextWindow_handleMouseUp(evt)
{
	console.log("TextWindow Mouse Up");
    //If we get here, it is a mouse-click event.  See if we are on the X
	if(mouseDownLocation.pageX + tmScrollBarWidth >= cachedTextMenuCanvas.width - tmScrollBarWidth)
	{
			console.log("TextWindow Mouse Up - X fits");

		//The X fits.  Now, see which button, or scroll-bar we clicked on.
		if(mouseDownLocation.pageY - tmOutsideYMargin <= tmMenuBarHight 
			&& mouseDownLocation.pageY - tmOutsideYMargin >= 0)
		{
			console.log("TextWindow Mouse Up - Y fits");

			//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();
		}
	}
    mouseDidMovement=false; //reset it after we raise the button
}

function PrintPuzzleSelectMenu(level=0)
{
	var levellist=networkNamesMatchingText("Level"+level);
	//console.log("list is this long: " + levellist.length);
	textMenuPrint(levellist,1,2);
}