Split tool-selection.js from app.js

src/app.js

 // Room connection and synchronisation.
-// Translate local canvas input events to draw messages and send to the room.
+// Translate local canvas input events to draw messages in light of current tool
+// selections and send to the room.
 // Get back room updates and invoke the local canvas renderer.
 
 import * as canvas from "./canvas.js"
 import * as HTML from "./elements.js"
 import { connect } from "./room.js"
+import * as toolSelection from "./tool-selection.js"
 
 const TEST_ROOM = "imperial"
 
-let room = null
-
-let strokeColour = "#0000ff"
-let strokeRadius = 5
-
 const MIN_PRESSURE_FACTOR = 0.1
 const MAX_PRESSURE_FACTOR = 1.5
 
@@ -32,6 +29,8 @@ const getPressureFactor = (pressure) => {
   return a * pressure ** 2 + b * pressure + c
 }
 
+let room = null
+
 const onRoomConnect = (room_) => {
   room = room_
 
@@ -111,102 +110,8 @@ const tryRoomConnect = async (roomID) => {
     .catch((err) => alert(`Error connecting to a room:\n${err}`))
 }
 
-const ERASER_RADIUS = 10
-const tools = {
-  PEN: Symbol("pen"),
-  ERASER: Symbol("eraser"),
-}
-let currentTool = tools.PEN
 const pathIDsByPointerID = new Map()
 
-HTML.penButton.addEventListener("click", () => {
-  if (currentTool == tools.PEN) {
-    showElement(HTML.penProperties)
-  } else {
-    currentTool = tools.PEN
-    HTML.penButton.classList.add("selected")
-    HTML.eraserButton.classList.remove("selected")
-  }
-})
-
-HTML.closeButton.forEach((element) => {
-  element.addEventListener("click", () => {
-    hideElement(element.parentNode.parentNode.parentNode)
-  })
-})
-
-window.addEventListener("click", (event) => {
-  if (event.target == HTML.penProperties) {
-    hideElement(HTML.penProperties)
-  } else if (event.target == HTML.palette) {
-    hideElement(HTML.palette)
-    hideElement(HTML.penProperties)
-  }
-})
-
-HTML.rectangle.addEventListener("click", () => {
-  showElement(HTML.palette)
-})
-
-const svg = HTML.wheel.children
-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.labelColours.style.backgroundColor = paletteColour
-    strokeColour = paletteColour
-    hideElement(HTML.palette)
-  })
-}
-
-function showElement(element) {
-  element.style.display = "block"
-}
-
-function hideElement(element) {
-  element.style.display = "none"
-}
-
-HTML.picker.addEventListener("change", () => {
-  const paletteColour = event.target.value
-  HTML.rectangle.style.backgroundColor = paletteColour
-  HTML.labelColours.style.backgroundColor = paletteColour
-  strokeColour = paletteColour
-})
-
-HTML.output.innerHTML = HTML.slider.value
-
-HTML.slider.oninput = function() {
-  HTML.output.innerHTML = this.value
-  strokeRadius = this.value / 10
-}
-
-const x = window.matchMedia(
-  "only screen and (orientation: landscape) and (max-width: 600px)",
-)
-x.addListener(() => {
-  if (x.matches) {
-    HTML.wheel.setAttribute("viewBox", "-50 10 200 100")
-    HTML.palette.setAttribute("style", "padding-top: 50px")
-  } else {
-    HTML.wheel.setAttribute("viewBox", "0 10 100 100")
-  }
-})
-
-HTML.picker.addEventListener("change", () => {
-  const paletteColour = event.target.value
-  HTML.rectangle.style.backgroundColor = paletteColour
-  HTML.labelColours.style.backgroundColor = paletteColour
-  strokeColour = paletteColour
-})
-
-HTML.eraserButton.addEventListener("click", () => {
-  currentTool = tools.ERASER
-  HTML.penButton.classList.remove("selected")
-  HTML.eraserButton.classList.add("selected")
-})
-
 HTML.peerButton.addEventListener("click", () => {
   const peerID = HTML.peerIDElem.value
   if (room == null || peerID == "") {
@@ -304,7 +209,7 @@ const erasePoint = ([x, y]) => {
   }
   room.getPaths().forEach((points, pathID) => {
     points.forEach((point, i) => {
-      if (getDistance([x, y], point) <= ERASER_RADIUS) {
+      if (getDistance([x, y], point) <= toolSelection.getEraseRadius()) {
         room.erasePoint(pathID, i)
       }
     })
@@ -315,19 +220,18 @@ canvas.input.addEventListener("strokestart", ({ detail: e }) => {
   if (room == null) {
     return
   }
-
+  const currentTool = toolSelection.getTool()
   const mousePos = [e.offsetX, e.offsetY]
-
-  if (currentTool == tools.PEN) {
+  if (currentTool == toolSelection.Tools.PEN) {
     pathIDsByPointerID.set(
       e.pointerId,
       room.addPath([
         ...mousePos,
-        strokeRadius * getPressureFactor(e.pressure),
-        strokeColour,
+        toolSelection.getStrokeRadius() * getPressureFactor(e.pressure),
+        toolSelection.getStrokeColour(),
       ]),
     )
-  } else if (currentTool == tools.ERASER) {
+  } else if (currentTool == toolSelection.Tools.ERASER) {
     erasePoint(mousePos)
   }
 })
@@ -340,16 +244,15 @@ canvas.input.addEventListener("strokemove", ({ detail: e }) => {
   if (room == null) {
     return
   }
-
+  const currentTool = toolSelection.getTool()
   const mousePos = [e.offsetX, e.offsetY]
-
-  if (currentTool == tools.PEN) {
+  if (currentTool == toolSelection.Tools.PEN) {
     room.extendPath(pathIDsByPointerID.get(e.pointerId), [
       ...mousePos,
-      strokeRadius * getPressureFactor(e.pressure),
-      strokeColour,
+      toolSelection.getStrokeRadius() * getPressureFactor(e.pressure),
+      toolSelection.getStrokeColour(),
     ])
-  } else if (currentTool == tools.ERASER) {
+  } else if (currentTool == toolSelection.Tools.ERASER) {
     erasePoint(mousePos)
   }
 })

src/tool-selection.js

+import * as HTML from "./elements.js"
+
+export const Tools = Object.freeze({
+  PEN: Symbol("pen"),
+  ERASER: Symbol("eraser"),
+})
+
+let tool = Tools.PEN
+let strokeColour = "#0000ff"
+let strokeRadius = 5
+// TODO: The erase radius should also be selectable.
+const ERASE_RADIUS = 10
+
+export const getTool = () => tool
+export const getStrokeColour = () => strokeColour
+export const getStrokeRadius = () => strokeRadius
+export const getEraseRadius = () => ERASE_RADIUS
+
+const showElement = (element) => {
+  element.style.display = "block"
+}
+
+const hideElement = (element) => {
+  element.style.display = "none"
+}
+
+HTML.penButton.addEventListener("click", () => {
+  if (tool == Tools.PEN) {
+    showElement(HTML.penProperties)
+  } else {
+    tool = Tools.PEN
+    HTML.penButton.classList.add("selected")
+    HTML.eraserButton.classList.remove("selected")
+  }
+})
+
+HTML.eraserButton.addEventListener("click", () => {
+  tool = Tools.ERASER
+  HTML.penButton.classList.remove("selected")
+  HTML.eraserButton.classList.add("selected")
+})
+
+HTML.picker.addEventListener("change", () => {
+  const paletteColour = event.target.value
+  HTML.rectangle.style.backgroundColor = paletteColour
+  HTML.labelColours.style.backgroundColor = paletteColour
+  strokeColour = paletteColour
+})
+
+HTML.slider.oninput = function() {
+  HTML.output.innerHTML = this.value
+  strokeRadius = this.value / 10
+}
+
+HTML.output.innerHTML = HTML.slider.value
+
+const x = window.matchMedia(
+  "only screen and (orientation: landscape) and (max-width: 600px)",
+)
+x.addListener(() => {
+  if (x.matches) {
+    HTML.wheel.setAttribute("viewBox", "-50 10 200 100")
+    HTML.palette.setAttribute("style", "padding-top: 50px")
+  } else {
+    HTML.wheel.setAttribute("viewBox", "0 10 100 100")
+  }
+})
+
+HTML.closeButton.forEach((element) => {
+  element.addEventListener("click", () => {
+    hideElement(element.parentNode.parentNode.parentNode)
+  })
+})
+
+window.addEventListener("click", (event) => {
+  if (event.target == HTML.penProperties) {
+    hideElement(HTML.penProperties)
+  } else if (event.target == HTML.palette) {
+    hideElement(HTML.palette)
+    hideElement(HTML.penProperties)
+  }
+})
+
+HTML.rectangle.addEventListener("click", () => {
+  showElement(HTML.palette)
+})
+
+const svg = HTML.wheel.children
+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.labelColours.style.backgroundColor = paletteColour
+    strokeColour = paletteColour
+    hideElement(HTML.palette)
+  })
+}