Decoupled stroke color and radius from html

public/index.html

@@ -87,7 +87,6 @@
                   type="range"
                   min="1"
                   max="10"
-                  value="2"
                   class="slider"
                   id="range"
                 />
@@ -192,7 +191,7 @@
                 <b>Other colours</b>
               </div>
               <label id="colours">
-                <input id="other-colours" type="color" value="#0000ff" />
+                <input id="other-colours" type="color" />
               </label>
             </div>
           </div>

src/elements.js

@@ -29,8 +29,8 @@ export const closeButton = document.querySelectorAll(".close")
 export const palette = document.getElementById("palette")
 export const rectangle = document.getElementById("rectangle")
 export const wheel = document.getElementById("wheel")
-export const picker = document.getElementById("other-colours")
-export const slider = document.getElementById("range")
+export const strokeColorPicker = document.getElementById("other-colours")
+export const strokeRadiusSlider = document.getElementById("range")
 export const output = document.getElementById("value")
 export const labelColours = document.getElementById("colours")
 export const userInfo = document.getElementById("user-avatar")

src/tool-selection.js

@@ -5,14 +5,14 @@ export const Tools = Object.freeze({
   ERASER: Symbol("eraser"),
 })
 
-let tool = Tools.PEN
+let selectedTool = Tools.PEN
 let strokeColour = "#000000"
 let strokeRadius = 2
 let recognitionEnabled = false
 // TODO: The erase radius should also be selectable.
 const ERASE_RADIUS = 20
 
-export const getTool = () => tool
+export const getTool = () => selectedTool
 export const getStrokeColour = () => strokeColour
 export const getStrokeRadius = () => strokeRadius
 
@@ -27,6 +27,9 @@ const hideElement = (element) => {
   element.style.display = "none"
 }
 
+HTML.strokeColorPicker.setAttribute("value", strokeColour)
+HTML.strokeRadiusSlider.setAttribute("value", strokeRadius)
+
 HTML.recognitionModeButton.addEventListener("click", () => {
   recognitionEnabled = !recognitionEnabled
   if (recognitionEnabled) {
@@ -37,39 +40,39 @@ HTML.recognitionModeButton.addEventListener("click", () => {
 })
 
 HTML.penButton.addEventListener("click", () => {
-  if (tool == Tools.PEN) {
+  if (selectedTool == Tools.PEN) {
     showElement(HTML.penProperties)
   } else {
-    tool = Tools.PEN
+    selectedTool = Tools.PEN
     HTML.penButton.classList.add("selected")
     HTML.eraserButton.classList.remove("selected")
   }
 })
 
 HTML.eraserButton.addEventListener("click", () => {
-  tool = Tools.ERASER
+  selectedTool = Tools.ERASER
   HTML.penButton.classList.remove("selected")
   HTML.eraserButton.classList.add("selected")
 })
 
-HTML.picker.addEventListener("change", () => {
+HTML.strokeColorPicker.addEventListener("change", () => {
   const paletteColour = event.target.value
   HTML.rectangle.style.backgroundColor = paletteColour
   HTML.labelColours.style.backgroundColor = paletteColour
   strokeColour = paletteColour
 })
 
-HTML.slider.oninput = function() {
+HTML.strokeRadiusSlider.oninput = function() {
   HTML.output.innerHTML = this.value
   strokeRadius = this.value / 2
 }
 
-HTML.output.innerHTML = HTML.slider.value
+HTML.output.innerHTML = HTML.strokeRadiusSlider.value
 
 // If the page has been refreshed
 if (performance.navigation.type == 1) {
   const sliderValue = parseInt(HTML.output.innerHTML)
-  HTML.slider.setAttribute("value", sliderValue)
+  HTML.strokeRadiusSlider.setAttribute("value", sliderValue)
   strokeRadius = sliderValue / 2
 }
 
@@ -109,7 +112,7 @@ for (let i = 1; i < svg.length; i++) {
   svg[i].addEventListener("click", (event) => {
     const paletteColour = event.target.getAttribute("fill")
     HTML.rectangle.style.backgroundColor = paletteColour
-    HTML.picker.value = paletteColour
+    HTML.strokeColorPicker.value = paletteColour
     HTML.labelColours.style.backgroundColor = paletteColour
     strokeColour = paletteColour
     hideElement(HTML.palette)