Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
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)
})
}