58 lines
1.1 KiB
JavaScript
58 lines
1.1 KiB
JavaScript
import * as Dom from UnitJS.Dom;
|
|
import {color, tool} from Toolbox;
|
|
|
|
var grid = {
|
|
element: null,
|
|
data: {}
|
|
};
|
|
var down = false;
|
|
|
|
return {
|
|
init: init
|
|
};
|
|
|
|
function init(size, elementId) {
|
|
grid.element = document.getElementById(elementId || 'grid');
|
|
for(var row = 0; row < size; row++) {
|
|
grid.element.appendChild(
|
|
makeRow({tag: 'td', attributes: bodyAttributes, row: row, size: size})
|
|
);
|
|
grid.data[row] = {};
|
|
}
|
|
grid.element.addEventListener('mouseleave', function() {
|
|
down = false;
|
|
});
|
|
}
|
|
|
|
function makeRow(config) {
|
|
var cells = [];
|
|
for(var column = 0; column < config.size; column++) {
|
|
cells.push(Dom.make(config.tag, config.attributes(config.row, column)));
|
|
}
|
|
return Dom.make('tr', {}, cells);
|
|
}
|
|
|
|
function bodyAttributes(i, j) {
|
|
return {
|
|
onMousedown: function(e) {
|
|
down = true;
|
|
if(tool() == 'draw') {
|
|
colorize(i, j, e);
|
|
}
|
|
},
|
|
onMouseup: function(e) {
|
|
down = false;
|
|
},
|
|
onMouseenter: function(e) {
|
|
if(down && tool() == 'draw') {
|
|
colorize(i, j, e);
|
|
}
|
|
}
|
|
};
|
|
}
|
|
|
|
function colorize(i, j, e) {
|
|
grid.data[i][j] = color();
|
|
e.target.className = grid.data[i][j];
|
|
}
|