From b630864844451a3fdbd506110a4c0eb365a2ef7e Mon Sep 17 00:00:00 2001
From: Tissevert <tissevert+devel@marvid.fr>
Date: Mon, 25 Jul 2022 13:43:47 +0200
Subject: [PATCH] Implement continuous draw + use select control for colors

---
 css/toolbox.css | 23 ++---------------------
 index.html      |  6 +++---
 js/Grid.js      | 27 +++++++++++++++++++++++----
 js/Toolbox.js   | 40 +++++++++++++++-------------------------
 4 files changed, 43 insertions(+), 53 deletions(-)

diff --git a/css/toolbox.css b/css/toolbox.css
index 52cdaad..7dba7f7 100644
--- a/css/toolbox.css
+++ b/css/toolbox.css
@@ -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;
-}
diff --git a/index.html b/index.html
index c8393fa..b04b833 100644
--- a/index.html
+++ b/index.html
@@ -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"/>
diff --git a/js/Grid.js b/js/Grid.js
index 3559c6e..c4bc787 100644
--- a/js/Grid.js
+++ b/js/Grid.js
@@ -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];
+}
diff --git a/js/Toolbox.js b/js/Toolbox.js
index a3c573d..cd9f264 100644
--- a/js/Toolbox.js
+++ b/js/Toolbox.js
@@ -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;
 }