From 9aa26b82c609544f57d3615a3425c4ccf5e47991 Mon Sep 17 00:00:00 2001
From: Tim Young <tim.young@lightsys.org>
Date: Thu, 6 Jun 2024 14:16:01 -0700
Subject: [PATCH] make drawshape work better

---
 Web/ui.js | 65 +++++++++++++++++++++++++++++++------------------------
 1 file changed, 37 insertions(+), 28 deletions(-)

diff --git a/Web/ui.js b/Web/ui.js
index c6f7899..8e16d57 100644
--- a/Web/ui.js
+++ b/Web/ui.js
@@ -732,43 +732,52 @@ function printHighlights(countof="mouseover") {
 	return countof; //the count of the item we were supposed to count
 }
 
-function drawhighlight(highlight) {
-	MainCanvas_ctx.fillStyle = highlight.shapeColor;
-	MainCanvas_ctx.globalAlpha = highlight.opaciticy; //mostly transparent
+function drawhighlight(highlight, canvas = null) {
+	if (canvas == null)
+		canvas = MainCanvas_ctx;
+	canvas.fillStyle = highlight.shapeColor;
+	canvas.globalAlpha = highlight.opaciticy; //mostly transparent
 	var oldWidth;
 	if (highlight.shapeText == "square")
-		MainCanvas_ctx.fillRect(highlight.shapePoints.sx, highlight.shapePoints.sy, highlight.shapePoints.deltax, highlight.shapePoints.deltay);
+		canvas.fillRect(highlight.shapePoints.sx, highlight.shapePoints.sy, highlight.shapePoints.deltax, highlight.shapePoints.deltay);
 	else if (highlight.shapeText == "line") {
-		oldWidth = MainCanvas_ctx.lineWidth;
-		MainCanvas_ctx.lineWidth += 6;
-		MainCanvas_ctx.strokeStyle = highlight.shapeColor;
-		MainCanvas_ctx.beginPath();
-		MainCanvas_ctx.moveTo(highlight.shapePoints.sx, highlight.shapePoints.sy);
-		MainCanvas_ctx.lineTo(highlight.shapePoints.dx, highlight.shapePoints.dy);
-		MainCanvas_ctx.stroke();
-		MainCanvas_ctx.lineWidth = oldWidth;
-		MainCanvas_ctx.strokeStyle = "black";
+		oldWidth = canvas.lineWidth;
+		canvas.lineWidth += 6;
+		canvas.strokeStyle = highlight.shapeColor;
+		canvas.beginPath();
+		canvas.moveTo(highlight.shapePoints.sx, highlight.shapePoints.sy);
+		canvas.lineTo(highlight.shapePoints.dx, highlight.shapePoints.dy);
+		canvas.stroke();
+		canvas.lineWidth = oldWidth;
+		canvas.strokeStyle = "black";
 	}
 	else if (highlight.shapeText == "selectbox") {
 		//console.log("Printing a selectbox");
-		MainCanvas_ctx.fillStyle = "green";
-		oldWidth = MainCanvas_ctx.lineWidth;
-		MainCanvas_ctx.lineWidth += 2;
-		MainCanvas_ctx.strokeStyle = "green";
-		MainCanvas_ctx.beginPath();
-		MainCanvas_ctx.moveTo(highlight.shapePoints.sx, highlight.shapePoints.sy);
-		MainCanvas_ctx.lineTo(highlight.shapePoints.dx, highlight.shapePoints.sy);
-		MainCanvas_ctx.lineTo(highlight.shapePoints.dx, highlight.shapePoints.dy);
-		MainCanvas_ctx.lineTo(highlight.shapePoints.sx, highlight.shapePoints.dy);
-		MainCanvas_ctx.lineTo(highlight.shapePoints.sx, highlight.shapePoints.sy);
-		MainCanvas_ctx.stroke();
-		MainCanvas_ctx.lineWidth = oldWidth;
-		MainCanvas_ctx.strokeStyle = "black";
+		canvas.fillStyle = "green";
+		oldWidth = canvas.lineWidth;
+		canvas.lineWidth += 2;
+		canvas.strokeStyle = "green";
+		canvas.beginPath();
+		canvas.moveTo(highlight.shapePoints.sx, highlight.shapePoints.sy);
+		canvas.lineTo(highlight.shapePoints.dx, highlight.shapePoints.sy);
+		canvas.lineTo(highlight.shapePoints.dx, highlight.shapePoints.dy);
+		canvas.lineTo(highlight.shapePoints.sx, highlight.shapePoints.dy);
+		canvas.lineTo(highlight.shapePoints.sx, highlight.shapePoints.sy);
+		canvas.stroke();
+		canvas.lineWidth = oldWidth;
+		canvas.strokeStyle = "black";
 	}
-	MainCanvas_ctx.globalAlpha = 1.0; //reset
-	MainCanvas_ctx.fillStyle = "black"; //reset
+	canvas.globalAlpha = 1.0; //reset
+	canvas.fillStyle = "black"; //reset
 }
 
+//We use drawhighlight to draw one-off shapes
+function drawshape( shape, rect, color, opaciticy = 0.4, canvas = null) {
+	if (canvas == null)
+		canvas = MainCanvas_ctx;
+	var tmp_queryhighlight = returnHighlightShape(shape, rect, color, "none", opaciticy);
+	drawhighlight(tmp_queryhighlight, canvas);
+}
 
 function countHighlightsNamed(countof = "mouseover") {
 	var count = 0;