From 9ef2737bc3fb9a200373db98b23bcced1c2b4f6b Mon Sep 17 00:00:00 2001
From: Nic Limper <nic@xs4all.nl>
Date: Mon, 10 Jul 2023 20:33:50 +0200
Subject: [PATCH] fixes issue #80 on painter

---
 ESP32_AP-Flasher/data/www/index.html |  2 +-
 ESP32_AP-Flasher/data/www/main.css   |  7 +++++++
 ESP32_AP-Flasher/data/www/main.js    |  4 ++--
 ESP32_AP-Flasher/data/www/painter.js | 24 ++++++++++++++----------
 4 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/ESP32_AP-Flasher/data/www/index.html b/ESP32_AP-Flasher/data/www/index.html
index dfa5c1ac..e50820ba 100644
--- a/ESP32_AP-Flasher/data/www/index.html
+++ b/ESP32_AP-Flasher/data/www/index.html
@@ -54,7 +54,7 @@
 		</div>
 		<p id="savebar">
 			<span><input type="button" value="Save" id="cfgsave"></span>
-			<span id="cfgmore" title="advanced options">&#x1f783;</span>
+			<span id="cfgmore" title="advanced options">&#x25BC;</span>
 		</p>
 	</div>
 
diff --git a/ESP32_AP-Flasher/data/www/main.css b/ESP32_AP-Flasher/data/www/main.css
index bb288213..f9960425 100644
--- a/ESP32_AP-Flasher/data/www/main.css
+++ b/ESP32_AP-Flasher/data/www/main.css
@@ -609,4 +609,11 @@ ul.messages li.new {
 	.actionbox>div:first-child>div:first-child {
 		flex-basis: 100%;
 	}
+
+	#buttonbar button {
+		font-size: 1.1em;
+		overflow: hidden;
+		padding: 1px 1px;
+	}
+
 }
diff --git a/ESP32_AP-Flasher/data/www/main.js b/ESP32_AP-Flasher/data/www/main.js
index c562d5fd..53163a1a 100644
--- a/ESP32_AP-Flasher/data/www/main.js
+++ b/ESP32_AP-Flasher/data/www/main.js
@@ -337,13 +337,13 @@ $('#taglist').addEventListener("click", (event) => {
 			}
 			$('#cfgrotate').value = tagdata.rotate;
 			$('#cfglut').value = tagdata.lut;
-			$('#cfgmore').innerHTML = '&#x1f783;';
+			$('#cfgmore').innerHTML = '&#x25BC;';
 			$('#configbox').style.display = 'block';
 		})
 })
 
 $('#cfgmore').onclick = function () {
-	$('#cfgmore').innerHTML = $('#advancedoptions').style.height == '0px' ? '&#x1f781;' : '&#x1f783;';
+	$('#cfgmore').innerHTML = $('#advancedoptions').style.height == '0px' ? '&#x25B2;' : '&#x25BC;';
 	$('#advancedoptions').style.height = $('#advancedoptions').style.height == '0px' ? $('#advancedoptions').scrollHeight + 'px' : '0px';
 };
 
diff --git a/ESP32_AP-Flasher/data/www/painter.js b/ESP32_AP-Flasher/data/www/painter.js
index 1244dff2..4178c3e8 100644
--- a/ESP32_AP-Flasher/data/www/painter.js
+++ b/ESP32_AP-Flasher/data/www/painter.js
@@ -26,12 +26,12 @@ function startPainter(mac, width, height) {
 	canvas.style.imageRendering = 'pixelated';
 
 	canvas.addEventListener('mousedown', startDrawing);
-	canvas.addEventListener('mouseup', stopDrawing);
+	window.addEventListener('mouseup', stopDrawing);
 	canvas.addEventListener('mousemove', draw);
 
-	canvas.addEventListener('touchstart', startDrawing, { passive: true });
-	canvas.addEventListener('touchend', stopDrawing);
-	canvas.addEventListener('touchmove', draw, { passive: true });
+	canvas.addEventListener('touchstart', startDrawing, { passive: false });
+	window.addEventListener('touchend', stopDrawing);
+	canvas.addEventListener('touchmove', draw, { passive: false });
 
 	const bgCanvas = document.createElement('canvas');
 	bgCanvas.width = canvas.width;
@@ -127,31 +127,35 @@ function startPainter(mac, width, height) {
 	});
 
 	function startDrawing(e) {
+		e.stopPropagation();
+		e.preventDefault();
 		if (isAddingText) return;
 		isDrawing = true;
 		var rect = canvas.getBoundingClientRect();
-		lastX = e.pageX - rect.left - window.pageXOffset;
-		lastY = e.pageY - rect.top - window.pageYOffset;
+		lastX = e.pageX - rect.left - window.scrollX;
+		lastY = e.pageY - rect.top - window.scrollY;
 	}
 
-	function stopDrawing() {
+	function stopDrawing(e) {
 		if (isAddingText) return;
 		isDrawing = false;
 	}
 
 	function draw(e) {
+		e.stopPropagation();
+		e.preventDefault();
 		if (isAddingText) return;
 		if (!isDrawing) return;
 		var rect = canvas.getBoundingClientRect();
 		ctx.beginPath();
 		ctx.moveTo(lastX, lastY);
-		ctx.lineTo(e.pageX - rect.left - window.pageXOffset, e.pageY - rect.top - window.pageYOffset);
+		ctx.lineTo(e.pageX - rect.left - window.scrollX, e.pageY - rect.top - window.scrollY);
 		ctx.strokeStyle = color;
 		ctx.lineWidth = linewidth;
 		ctx.lineCap = "round";
 		ctx.stroke();
-		lastX = e.pageX - rect.left - window.pageXOffset;
-		lastY = e.pageY - rect.top - window.pageYOffset;
+		lastX = e.pageX - rect.left - window.scrollX;
+		lastY = e.pageY - rect.top - window.scrollY;
 	}
 
 	function addText() {