diff --git a/src/app.js b/src/app.js index ecf3a3f87d1ac9b51852cd25d9db48758dde411a..f420934d4bddde036c3cac36b6526fc95ec51025 100644 --- a/src/app.js +++ b/src/app.js @@ -91,10 +91,10 @@ HTML.rectangle.addEventListener("click", () => { showElement(HTML.palette) }) -var svg = HTML.wheel.children +let svg = HTML.wheel.children for (var i = 1; i < svg.length; i++) { svg[i].addEventListener("click", (event) => { - var paletteColour = event.target.getAttribute("fill") + let paletteColour = event.target.getAttribute("fill") HTML.rectangle.style.backgroundColor = paletteColour canvas.setStrokeColour(paletteColour) hideElement(HTML.palette) @@ -110,7 +110,7 @@ function hideElement(element) { } HTML.picker.addEventListener("change", () => { - var paletteColour = event.target.value + let paletteColour = event.target.value HTML.rectangle.style.backgroundColor = paletteColour canvas.setStrokeColour(paletteColour) }) @@ -176,7 +176,7 @@ canvas.input.addEventListener("strokestart", ({ detail: e }) => { if (currentTool == tools.PEN) { pathIDsByPointerID.set( e.pointerId, - room.addPath([...mousePos, e.pressure, canvas.stroke_colour]), + room.addPath([...mousePos, e.pressure, canvas.getStrokeColour()]), ) } else if (currentTool == tools.ERASER) { erasePoint(mousePos) @@ -198,7 +198,7 @@ canvas.input.addEventListener("strokemove", ({ detail: e }) => { room.extendPath(pathIDsByPointerID.get(e.pointerId), [ ...mousePos, e.pressure, - canvas.stroke_colour, + canvas.getStrokeColour(), ]) } else if (currentTool == tools.ERASER) { erasePoint(mousePos) diff --git a/src/canvas.js b/src/canvas.js index 5edeaccf78ba6ee7b44cb39507a0ed8924d6be86..99294e5c6c49bac839c86b897330a50db12f911d 100644 --- a/src/canvas.js +++ b/src/canvas.js @@ -16,7 +16,7 @@ const lineFn = line() const pathGroupElems = new Map() -export var stroke_colour = "blue" +let stroke_colour = "blue" export const MIN_STROKE_RADIUS = 0.1 export const MAX_STROKE_RADIUS = 3.9 @@ -35,7 +35,7 @@ const createPathElem = (d, width) => { export const renderPath = (id, points) => { points = points.filter(([x]) => x != null) - var colour = "" + let colour = "" // Split up points into completely non-erased segments. let segments = [[]] @@ -125,3 +125,7 @@ canvas.addEventListener("touchmove", (e) => e.preventDefault()) export function setStrokeColour(colour) { stroke_colour = colour } + +export function getStrokeColour() { + return stroke_colour +}