app.js

var matrix;
var matrix_select;
var $table;
var rowMajor = false;
var msbendian = true; // big endian by default
var pencilMode = true;
var mouse_left_is_held = false;

class Point {
	constructor(x, y) {
	  this.x = x;
	  this.y = y;
	}
}

var anchor_1 = undefined;
var anchor_2 = undefined;

$(function() {
  	matrix = createArray(16,16);
  	updateTable();
	initOptions();

	$('#_output').hide();

	$('html').keydown(function(e){
		if (e.keyCode < 37 && e.keyCode > 40) return
		if(matrix_select == undefined) return

		switch (e.keyCode) {
			case 37: // left
				matrix_select = matrix_select.map(arr => { 
					arr.shift();
					arr.push(0);
					return arr;
				})
				break;
			case 39: // right
				matrix_select = matrix_select.map(arr => { 
					arr.pop();
					arr.unshift(0);
					return arr;
				})
				break;
			case 38: // UP
				matrix_select.shift();
				matrix_select.push(new Array(matrix_select[0].length).fill(0));
				break;
			case 40: // DOWN
				matrix_select.pop();
				matrix_select.unshift(new Array(matrix_select[0].length).fill(0));
				break;
			default:
			  break;
		}
		draw_from_data();
    });
});

function updateTable() {
	var width = matrix[0].length;
	var height = matrix.length;

	$('#_grid').html('');
	$('#_grid').append(populateTable(null, height, width));

	// events
	$table.on("mousedown", "td", toggle);
	$table.on("mouseup", function() {
		 mouse_left_is_held = false; 
		 cutSelection();
	});
    $table.on("mouseenter", "td", toggle);
    $table.on("dragstart", function() { return false; });
}

function cutSelection() {
	if(anchor_1 == undefined) return;

	var height = matrix.length;
	var width = matrix[0].length;
	matrix_select = createArray(height, width);
	
	for (var y = 0; y < width; y++) {
			for (var x = 0; x < height; x++) {
			var is_in_x_range = (Math.min(anchor_1.x, anchor_2.x) <= x) && (x <= Math.max(anchor_1.x, anchor_2.x))
			var is_in_y_range = (Math.min(anchor_1.y, anchor_2.y) <= y) && (y <= Math.max(anchor_1.y, anchor_2.y))
			
			if(!is_in_x_range || !is_in_y_range) continue

			matrix_select[x][y] = matrix[x][y]
			matrix[x][y] = 0
		}
	}
	draw_from_data()
}

function paste(){
	if(anchor_1 != undefined || matrix_select != undefined){
		var height = matrix.length;
		var width = matrix[0].length;
		
		for (var x = 0; x < width; x++) {
			for (var y = 0; y < height; y++) {
				matrix[y][x] |= matrix_select[y][x]
			}
		}
	}

	matrix_select = undefined
	anchor_1 = undefined
	anchor_2 = undefined
	
	draw_from_data()
}

function initOptions() {
	$('#clearButton').click(function() { matrix = createArray(matrix.length,matrix[0].length); updateTable(); $('#_output').hide(); });
	$('#generateButton').click(updateCode);
	$('#loadButton').click(load_textarea);

	$('#modeButton').click(function() {
		if(!pencilMode){
			paste()
		}
		pencilMode = !pencilMode;
		$(this).text(pencilMode ? "Mode: Pencil" : "Mode: Select")
	});

	 $('#widthDropDiv li a').click(function () {
	 	var width = parseInt($(this).html());
	 	var height = matrix.length;
        matrix = createArray(height, width);
        updateTable();
        updateSummary();
     });

     $('#heightDropDiv li a').click(function () {
	 	var width = matrix[0].length;
	 	var height = parseInt($(this).html());
        matrix = createArray(height, width);
        updateTable();
        updateSummary();
     });

     $('#byteDropDiv li a').click(function () {
	 	var selection = $(this).html();
        rowMajor = selection.startsWith("Row");  
        updateSummary();      	
     });

     $('#endianDropDiv li a').click(function () {
	 	var selection = $(this).html();
        msbendian = selection.startsWith("Big");  
        updateSummary();      	
     });

     updateSummary();
}

function updateSummary() {
	var width = matrix[0].length;
	var height = matrix.length;
	var summary = width + "px by " + height + "px, ";

	if (rowMajor) summary += "row major, ";
	else summary += "column major, ";

	if (msbendian) summary += "big endian.";
	else summary += "little endian.";

	$('#_summary').html(summary);
}

function updateCode() {
	$('#_output').show();
	var bytes = generateByteArray();
	var output = "const uint_8 data[] =\n{\n" + bytes + "\n};"
	$('#_output').html(output);
	$('#_output').removeClass('prettyprinted');
	prettyPrint();
}

function generateByteArray() {
	var width = matrix[0].length;
	var height = matrix.length;
	var buffer = new Array(width * height);
	var bytes = new Array((width * height) / 8);

	// Column Major
	var temp;
	for (var x = 0; x < width; x++) {
		for (var y = 0; y < height; y++) {
			temp = matrix[y][x];
			if (!temp) temp = 0;
			// Row Major or Column Major?
			if (!rowMajor) {
				buffer[x * height + y] = temp;	
			}
			else {
				buffer[y * width + x] = temp;
			}
			
		}
	}

	// Read buffer 8-bits at a time
	// and turn it into bytes
	for (var i = 0; i < buffer.length; i+=8) {
		var newByte = 0;
		for (var j = 0; j < 8; j++) {
            if (buffer[i+j]) {
            	if (msbendian) {
                	newByte |= 1 << (7-j);
                }
                else {
                	newByte |= 1 << j;
                }
            }
        }
        bytes[i / 8] = newByte;
	}

	var formatted = bytes.map(function (x) {
	    x = x + 0xFFFFFFFF + 1;  // twos complement
	    x = x.toString(16); // to hex
	    x = ("0"+x).substr(-2); // zero-pad to 8-digits
	    x = "0x" + x;
	    return x;
	}).join(', ');

	return formatted;
}

function load_textarea(){
	var width = matrix[0].length;
	var height = matrix.length;
	matrix = load($("#load_area").val(), height, width, rowMajor, msbendian)
	draw_from_data()
}

function load(formatted, height, width, rowMajor, msbendian){
	return buffer_to_matrix(formatted_to_bits(formatted, msbendian), height, width, rowMajor)
}

function formatted_to_bits(formatted, is_msb){
	var bytes = formatted.split(', ').map(s => parseInt(s.slice(2), 16))
	var bits = bytes.flatMap(b => byte_to_bits(b, is_msb))
	return bits
}

function byte_to_bits(byte, is_msb){
	var bits = new Array(8);
	for (var j = 0; j < 8; j++) {
		if (is_msb) {
			bits[j] = (byte >> (7-j)) & 1;
		} else {
			bits[j] = (byte >> j) & 1;
		}
	}
	return bits
}

function buffer_to_matrix(buffer, height, width, is_row_major){
	var new_matrix = createArray(height, width);

	if (!is_row_major) {
		for (var i = 0; i < buffer.length; i++) {
			var x = Math.floor(i / height)
			var y = i % height
			if(buffer[i] == 1) new_matrix[y][x] = buffer[i]
		}
	}else{
		for (var i = 0; i < buffer.length; i++) {
			var x = i % width
			var y = Math.floor(i / width)
			if(buffer[i] == 1) new_matrix[y][x] = buffer[i]
		}
	}
	return new_matrix
}

// not the most efficient paradigm, but it's always true to the data
function draw_from_data() { 
	$('#_grid>table>tr>td').each(function(i){
		var x = $(this).data('i');
		var y = $(this).data('j');

		if(matrix[x][y] == 1) $(this).addClass('on')
		else $(this).removeClass('on')

		if(matrix_select && matrix_select[x][y] == 1){
			$(this).addClass('cut')
		}
		else 
			$(this).removeClass('cut')

		if(anchor_1 != undefined){
			var is_in_x_range = (Math.min(anchor_1.x, anchor_2.x) <= x) && (x <= Math.max(anchor_1.x, anchor_2.x))
			var is_in_y_range = (Math.min(anchor_1.y, anchor_2.y) <= y) && (y <= Math.max(anchor_1.y, anchor_2.y))
	
			if(is_in_x_range && is_in_y_range) $(this).addClass('selected')
			else $(this).removeClass('selected')
		}else{
			$(this).removeClass('selected')
		}
	})
}

function toggle(e) {
	var x = $(this).data('i');
	var y = $(this).data('j');

	if(pencilMode){
		if (e.buttons == 1 && !e.ctrlKey) {
			matrix[x][y] = 1;
		}
		else if (e.buttons == 2 || (e.buttons == 1 && e.ctrlKey)) {			
			matrix[x][y] = 0;
		}
	}else{
		if(e.type == "mousedown")
		{
			paste()
			if(e.buttons == 1){
				mouse_left_is_held = true
				anchor_1 = new Point(x, y)
				anchor_2 = new Point(x, y)
			}else{
				anchor_1 = undefined
				anchor_2 = undefined	
			}
		}
		else if (e.type == "mouseenter" && mouse_left_is_held)
		{
			anchor_2.x = x
			anchor_2.y = y
		}
	}

	draw_from_data();

	return false;
}

function populateTable(table, rows, cells) {
    if (!table) table = document.createElement('table');
    for (var i = 0; i < rows; ++i) {
        var row = document.createElement('tr');
        for (var j = 0; j < cells; ++j) {
            row.appendChild(document.createElement('td'));
            $(row.cells[j]).data('i', i);
            $(row.cells[j]).data('j', j);
        }
        table.appendChild(row);        
    }
    $table = $(table);
    return table;
}

// (height, width)
function createArray(length) {
    var arr = new Array(length || 0),
        i = length;

    if (arguments.length > 1) {
        var args = Array.prototype.slice.call(arguments, 1);
        while(i--) arr[length-1 - i] = createArray.apply(this, args);
    }

    return arr;
}