91 lines
1.9 KiB
JavaScript
91 lines
1.9 KiB
JavaScript
import * as Dom from UnitJS.Dom;
|
|
import {color, tool} from Toolbox;
|
|
|
|
var grid = {
|
|
element: null,
|
|
data: null
|
|
};
|
|
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 = emptyGrid(size);
|
|
grid.element.addEventListener('mouseleave', function() {
|
|
down = false;
|
|
});
|
|
}
|
|
|
|
function emptyGrid(size) {
|
|
var result = {};
|
|
for(var i = 0; i < size; i++) {
|
|
result[i] = {};
|
|
}
|
|
return result;
|
|
}
|
|
|
|
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.target);
|
|
}
|
|
},
|
|
onMouseup: function(e) {
|
|
down = false;
|
|
if(tool() == 'paint') {
|
|
paint(i, j);
|
|
}
|
|
},
|
|
onMouseenter: function(e) {
|
|
if(down && tool() == 'draw') {
|
|
colorize(i, j, e.target);
|
|
}
|
|
}
|
|
};
|
|
}
|
|
|
|
function colorize(i, j, element) {
|
|
grid.data[i][j] = color();
|
|
element.className = grid.data[i][j];
|
|
}
|
|
|
|
function paint(i0, j0) {
|
|
var originColor = grid.data[i0][j0];
|
|
var size = grid.element.children.length;
|
|
var done = emptyGrid(size);
|
|
var queue = [{i: i0, j: j0}];
|
|
while(queue.length > 0) {
|
|
var p0 = queue[0];
|
|
colorize(p0.i, p0.j, grid.element.children[p0.i].children[p0.j]);
|
|
done[p0.i][p0.j] = true;
|
|
for(var d = -1; d < 2; d += 2) {
|
|
[{i: p0.i + d, j: p0.j}, {i: p0.i, j: p0.j + d}].forEach(function(p1) {
|
|
if(p1.i >= 0 && p1.i < size && p1.j >= 0 && p1.j < size
|
|
&& !done[p1.i][p1.j]
|
|
&& grid.data[p1.i][p1.j] == originColor) {
|
|
queue.push(p1);
|
|
}
|
|
});
|
|
}
|
|
queue.shift();
|
|
}
|
|
}
|