Eydropper functionality, Middle click and ctrl click to set Pallete entry to current color

web/page/bspaint.js

@@ -397,10 +397,24 @@ function initPaint(){
       eraser = true;
     } 
     if (e.which == 1) {
-      $("#foreground").val(c).data("eraser",eraser);
+      if (e.ctrlKey && !eraser) {
+        c=$("#foreground").val();
+        $(e.currentTarget).data("colour",c).css("background-color",c)
+      } else {
+        $("#foreground").val(c).data("eraser",eraser);
+      }
     }
-    if (e.which == 3) {
-      $("#background").val(c).data("eraser",eraser);
+    if (e.which == 2 && !eraser) {
+      c=$("#foreground").val();
+      $(e.currentTarget).data("colour",c).css("background-color",c)
+    }    
+    if (e.which == 3 && !eraser) {
+      if (e.ctrlKey) {
+        c=$("#background").val();
+        $(e.currentTarget).data("colour",c).css("background-color",c)
+      } else {
+        $("#background").val(c).data("eraser",eraser);
+      }
     }
 
   }).on("contextmenu",
@@ -413,11 +427,13 @@ function initPaint(){
   $("#pixels").on("click",function(e) {tool=pixelTip;});
   $("#pen").on("click",function(e) {tool=feltTip; });
   $("#clear").on("click",function(e) {activePic.clearLayer()});
-  $("#tip3").on("click",function(e) {tip.size=3; tool=feltTip;});
+/*  $("#tip3").on("click",function(e) {tip.size=3; tool=feltTip;});
   $("#tip5").on("click",function(e) {tip.size=5; tool=feltTip;});
   $("#tip9").on("click",function(e) {tip.size=9; tool=feltTip;});
+*/  
   $("#eraser").on("click",function(e) { tool=eraserTip;});
   $("#fine_eraser").on("click",function(e) {tool=pixelClear;});
+  $("#eyedropper").on("click",function(e) { tool=eyeDropper;});
 
   $(".tool.button").on("click", function(e) {
     $(".tool.button").removeClass("down");
@@ -653,7 +669,6 @@ function setScale(newfactor, around) {
 }
   
 function pixelTip(ctx,toolInfo,strokePath) {
-  console.log(toolInfo)
   ctx.fillStyle=toolInfo.colour;
   for (let {x,y} of strokePath) {
     x=Math.floor(x-0.25);
@@ -662,6 +677,20 @@ function pixelTip(ctx,toolInfo,strokePath) {
   };
 }
 
+function eyeDropper(ctx,toolInfo,strokePath) {
+  const last = strokePath.at(-1);
+  let {x,y} = last;
+  x=Math.floor(x-0.25);
+  y=Math.floor(y-0.25);
+  let canvas = ctx.canvas;
+  if (x>=0 && y>=0 && x<canvas.width && y<canvas.height) {
+    const sample = activePic.canvas.ctx.getImageData(x,y,1,1).data;
+    const toHex = (byte) => byte.toString(16).padStart(2, '0');
+    const color= "#" + toHex(sample[0]) + toHex(sample[1]) + toHex(sample[2]);
+    $("#foreground").val(color)
+  }
+}
+
 function feltTip(ctx,toolInfo,strokePath) {
   ctx.lineWidth=toolInfo.size;
   ctx.strokeStyle=toolInfo.colour;

web/page/style.css

@@ -66,7 +66,7 @@ svg.tool.button {
   fill:currentColor;
 }
 
-#tip1.tool.button {
+#pen.tool.button {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M18 35 12 29 29 11 36 17ZM37 16 30 10A1 1 0 0137 16M16 36 7 40 11 31Z'/%3E%3C/svg%3E");
 }