From 5f332c570899ea7d0e530fc6738f6f48045e4a8b Mon Sep 17 00:00:00 2001
From: Nayeem Rahman <muhammed.rahman17@imperial.ac.uk>
Date: Wed, 6 Nov 2019 13:44:28 +0000
Subject: [PATCH] Move radius and colour variables to app.js

My original intention for canvas.js was to receive all such data as
parameters per function call so it reflects room.js. What's confusing is
that it already is! It's been storing and exporting these properties and
then getting them back as arguments, as silly as that sounds.
---
 src/app.js    | 38 ++++++++++++++++++++++++++++++--------
 src/canvas.js | 38 --------------------------------------
 2 files changed, 30 insertions(+), 46 deletions(-)

diff --git a/src/app.js b/src/app.js
index 8329064..934bd0f 100644
--- a/src/app.js
+++ b/src/app.js
@@ -10,6 +10,28 @@ 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
+
+// This is a quadratic such that:
+// - getPressureFactor(0.0) = MIN_PRESSURE_FACTOR
+// - getPressureFactor(0.5) = 1.0
+// - getPressureFactor(1.0) = MAX_PRESSURE_FACTOR
+// For sensible results, maintain that:
+// - 0.0 <= MIN_PRESSURE_FACTOR <= 1.0
+// - 1.0 <= MAX_PRESSURE_FACTOR
+// For intuitive results, maintain that:
+// - MAX_PRESSURE_FACTOR <= ~2.0
+const getPressureFactor = (pressure) => {
+  const a = 2 * (MAX_PRESSURE_FACTOR + MIN_PRESSURE_FACTOR) - 4
+  const b = -MAX_PRESSURE_FACTOR - 3 * MIN_PRESSURE_FACTOR + 4
+  const c = MIN_PRESSURE_FACTOR
+  return a * pressure ** 2 + b * pressure + c
+}
+
 const onRoomConnect = (room_) => {
   room = room_
 
@@ -133,7 +155,7 @@ for (let i = 1; i < svg.length; i++) {
     HTML.rectangle.style.backgroundColor = paletteColour
     HTML.picker.value = paletteColour
     HTML.labelColours.style.backgroundColor = paletteColour
-    canvas.setStrokeColour(paletteColour)
+    strokeColour = paletteColour
     hideElement(HTML.palette)
   })
 }
@@ -150,14 +172,14 @@ HTML.picker.addEventListener("change", () => {
   const paletteColour = event.target.value
   HTML.rectangle.style.backgroundColor = paletteColour
   HTML.labelColours.style.backgroundColor = paletteColour
-  canvas.setStrokeColour(paletteColour)
+  strokeColour = paletteColour
 })
 
 HTML.output.innerHTML = HTML.slider.value
 
 HTML.slider.oninput = function() {
   HTML.output.innerHTML = this.value
-  canvas.setStrokeRadius(this.value / 10)
+  strokeRadius = this.value / 10
 }
 
 const x = window.matchMedia(
@@ -176,7 +198,7 @@ HTML.picker.addEventListener("change", () => {
   const paletteColour = event.target.value
   HTML.rectangle.style.backgroundColor = paletteColour
   HTML.labelColours.style.backgroundColor = paletteColour
-  canvas.setStrokeColour(paletteColour)
+  strokeColour = paletteColour
 })
 
 HTML.eraserButton.addEventListener("click", () => {
@@ -301,8 +323,8 @@ canvas.input.addEventListener("strokestart", ({ detail: e }) => {
       e.pointerId,
       room.addPath([
         ...mousePos,
-        canvas.getStrokeRadius(e.pressure),
-        canvas.getStrokeColour(),
+        strokeRadius * getPressureFactor(e.pressure),
+        strokeColour,
       ]),
     )
   } else if (currentTool == tools.ERASER) {
@@ -324,8 +346,8 @@ canvas.input.addEventListener("strokemove", ({ detail: e }) => {
   if (currentTool == tools.PEN) {
     room.extendPath(pathIDsByPointerID.get(e.pointerId), [
       ...mousePos,
-      canvas.getStrokeRadius(e.pressure),
-      canvas.getStrokeColour(),
+      strokeRadius * getPressureFactor(e.pressure),
+      strokeColour,
     ])
   } else if (currentTool == tools.ERASER) {
     erasePoint(mousePos)
diff --git a/src/canvas.js b/src/canvas.js
index 5aceb59..d04e6fa 100644
--- a/src/canvas.js
+++ b/src/canvas.js
@@ -16,9 +16,6 @@ const lineFn = line()
 
 const pathGroupElems = new Map()
 
-let strokeColour = "#0000ff"
-let strokeRadius = 5
-
 const MAX_POINT_DISTANCE = 5
 const MAX_RADIUS_DELTA = 0.05
 
@@ -168,38 +165,3 @@ canvas.addEventListener("pointerup", dispatchPointerEvent("strokeend"))
 canvas.addEventListener("pointerleave", dispatchPointerEvent("strokeend"))
 canvas.addEventListener("pointermove", dispatchPointerEvent("strokemove"))
 canvas.addEventListener("touchmove", (e) => e.preventDefault())
-
-export function setStrokeColour(colour) {
-  strokeColour = colour
-}
-
-export function getStrokeColour() {
-  return strokeColour
-}
-
-const MIN_PRESSURE_FACTOR = 0.1
-const MAX_PRESSURE_FACTOR = 1.5
-
-// This is a quadratic such that:
-// - getPressureFactor(0.0) = MIN_PRESSURE_FACTOR
-// - getPressureFactor(0.5) = 1.0
-// - getPressureFactor(1.0) = MAX_PRESSURE_FACTOR
-// For sensible results, maintain that:
-// - 0.0 <= MIN_PRESSURE_FACTOR <= 1.0
-// - 1.0 <= MAX_PRESSURE_FACTOR
-// For intuitive results, maintain that:
-// - MAX_PRESSURE_FACTOR <= ~2.0
-const getPressureFactor = (pressure) => {
-  const a = 2 * (MAX_PRESSURE_FACTOR + MIN_PRESSURE_FACTOR) - 4
-  const b = -MAX_PRESSURE_FACTOR - 3 * MIN_PRESSURE_FACTOR + 4
-  const c = MIN_PRESSURE_FACTOR
-  return a * pressure ** 2 + b * pressure + c
-}
-
-export function getStrokeRadius(pressure) {
-  return strokeRadius * getPressureFactor(pressure)
-}
-
-export function setStrokeRadius(radius) {
-  strokeRadius = radius
-}
-- 
GitLab