From 22264195cd1ae05654ef517625d09db492cd4beb Mon Sep 17 00:00:00 2001
From: Giovanni Caruso <gc4117@cloud-vm-36-76.doc.ic.ac.uk>
Date: Wed, 23 Oct 2019 17:55:49 +0100
Subject: [PATCH] Implement colour selection
---
src/app.js | 13 +++++++++++++
src/canvas.js | 10 +++++++---
src/elements.js | 1 +
3 files changed, 21 insertions(+), 3 deletions(-)
diff --git a/src/app.js b/src/app.js
index df4446c..b0f0e21 100644
--- a/src/app.js
+++ b/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")
diff --git a/src/canvas.js b/src/canvas.js
index c4b844d..a2d2161 100644
--- a/src/canvas.js
+++ b/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
+}
diff --git a/src/elements.js b/src/elements.js
index fbb1602..a22f2b1 100644
--- a/src/elements.js
+++ b/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")
--
GitLab