Implement continuous draw + use select control for colors

This commit is contained in:
Tissevert 2022-07-25 13:43:47 +02:00
parent c6c2bbbb84
commit b630864844
4 changed files with 43 additions and 53 deletions

View File

@ -1,28 +1,9 @@
#toolbox, #colors {
#toolbox {
list-style: none;
padding: 0;
}
#colors, #colors * {
#colors {
width: 2em;
height: 2em;
}
#colors * {
padding: 2px;
display: none;
}
#colors.open *, #colors .current {
display: block;
}
#colors.open li:hover {
border: 2px dashed #777;
padding: 0;
}
#colors {
cursor: pointer;
display: inline-block;
}

View File

@ -15,13 +15,13 @@
<li id="toolpicker">
<span>Tool</span>
<select id="tool">
<option>Toggle</option>
<option>Surface</option>
<option value="draw">Draw</option>
<option value="paint">Paint</option>
</select>
</li>
<li id="palette">
<span>Color</span>
<ul id="colors"></ul>
<select id="colors" class="color0"></select>
</li>
</ul>
<table id="grid"/>

View File

@ -1,10 +1,11 @@
import * as Dom from UnitJS.Dom;
import currentColor from Toolbox;
import {color, tool} from Toolbox;
var grid = {
element: null,
data: {}
};
var down = false;
return {
init: init
@ -18,6 +19,9 @@ function init(size, elementId) {
);
grid.data[row] = {};
}
grid.element.addEventListener('mouseleave', function() {
down = false;
});
}
function makeRow(config) {
@ -30,9 +34,24 @@ function makeRow(config) {
function bodyAttributes(i, j) {
return {
onClick: function(e) {
grid.data[i][j] = currentColor();
e.target.className = 'color' + grid.data[i][j];
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];
}

View File

@ -1,40 +1,30 @@
import * as Dom from UnitJS.Dom;
var tool = 'toggle';
var colorPicker = {
element: null,
current: 0
};
var tool;
var colors;
return {
init: init,
currentColor: currentColor
tool: tool,
color: color
};
function init(size, elementId) {
colorPicker.element = document.getElementById(elementId || 'colors');
for(var color = 0; color < size; color++) {
colorPicker.element.appendChild(Dom.make('li', colorBox(color)));
root = document.getElementById(elementId || 'toolbox');
colors = root.querySelector('#colors');
for(var i = 0; i < size; i++) {
colors.appendChild(Dom.make('option', {class: 'color' + i}));
}
colorPicker.element.addEventListener('click', function() {
colorPicker.element.classList.toggle('open');
colors.addEventListener('change', function() {
colors.className = color();
});
colorPicker.element.children[0].classList.add('current');
tool = root.querySelector('#tool');
}
function colorBox(i) {
return {
class: 'color' + i,
onClick: function(e) {
if(colorPicker.element.classList.contains('open')) {
colorPicker.element.children[colorPicker.current].classList.remove('current');
colorPicker.current = i;
colorPicker.element.children[colorPicker.current].classList.add('current');
}
}
};
function tool() {
return tool.value;
}
function currentColor() {
return colorPicker.current;
function color() {
return 'color' + colors.selectedIndex;
}