Implement colour selection

src/app.js

@@ -79,6 +79,9 @@ HTML.span.addEventListener("click", () => {
 window.addEventListener("click", (event) => {
   if (event.target == HTML.properties) {
     HTML.properties.style.display = "none"
+  } else if (event.target == HTML.palette) {
+    HTML.palette.style.display = "none"
+    HTML.properties.style.display = "none"
   }
 })
 
@@ -86,6 +89,16 @@ HTML.rectangle.addEventListener("click", () => {
   HTML.palette.style.display = "block"
 })
 
+var svg = HTML.wheel.children
+for (var i = 1; i < svg.length; i++) {
+  svg[i].addEventListener("click", (event) => {
+    var paletteColour = event.target.getAttribute("fill")
+    HTML.rectangle.style.backgroundColor = paletteColour
+    canvas.setStrokeColour(paletteColour)
+    HTML.palette.style.display = "none"
+  })
+}
+
 HTML.eraserButton.addEventListener("click", () => {
   currentTool = tools.ERASER
   HTML.penButton.classList.remove("selected")

src/canvas.js

@@ -14,7 +14,7 @@ const lineFn = line()
 
 const pathElems = new Map()
 
-export const STROKE_COLOUR = "blue"
+export var stroke_colour = "blue"
 export const STROKE_RADIUS = 2
 
 export const input = new EventTarget()
@@ -25,7 +25,7 @@ export const renderPath = (id, points) => {
   if (pathElem == null) {
     pathElem = document.createElementNS("http://www.w3.org/2000/svg", "g")
 
-    pathElem.setAttribute("stroke", STROKE_COLOUR)
+    pathElem.setAttribute("stroke", stroke_colour)
     pathElem.setAttribute("stroke-width", STROKE_RADIUS * 2)
     pathElem.setAttribute("fill", "none")
     pathElem.setAttribute("stroke-linecap", "round")
@@ -59,7 +59,7 @@ export const renderPath = (id, points) => {
         )
 
         subpathElem.setAttribute("stroke", "none")
-        subpathElem.setAttribute("fill", STROKE_COLOUR)
+        subpathElem.setAttribute("fill", stroke_colour)
         subpathElem.setAttribute("cx", subpath[0][0])
         subpathElem.setAttribute("cy", subpath[0][1])
         subpathElem.setAttribute("r", STROKE_RADIUS)
@@ -119,3 +119,7 @@ canvas.addEventListener("pointermove", (e) => {
   }
 })
 canvas.addEventListener("touchmove", (e) => e.preventDefault())
+
+export function setStrokeColour(colour) {
+  stroke_colour = colour
+}

src/elements.js

@@ -19,3 +19,4 @@ export const properties = document.getElementById("pen-properties")
 export const span = document.getElementsByClassName("close")[0]
 export const palette = document.getElementById("palette")
 export const rectangle = document.getElementById("rectangle")
+export const wheel = document.getElementById("wheel")