tool-selection.js

import * as HTML from "./elements.js"

export const Tools = Object.freeze({
  PEN: Symbol("pen"),
  ERASER: Symbol("eraser"),
})

let selectedTool = Tools.PEN
let strokeColour = "#000000"
let strokeRadius = 2
let recognitionEnabled = false
// TODO: The erase radius should also be selectable.
const ERASE_RADIUS = 20

export const getTool = () => selectedTool
export const getStrokeColour = () => strokeColour
export const getStrokeRadius = () => strokeRadius

export const getEraseRadius = () => ERASE_RADIUS
export const isRecognitionModeSet = () => recognitionEnabled

const showElement = (element) => {
  element.style.display = "block"
}

const hideElement = (element) => {
  element.style.display = "none"
}

HTML.strokeColorPicker.setAttribute("value", strokeColour)
HTML.strokeRadiusSlider.setAttribute("value", strokeRadius)

HTML.recognitionModeButton.addEventListener("click", () => {
  recognitionEnabled = !recognitionEnabled
  if (recognitionEnabled) {
    HTML.recognitionModeButton.classList.add("selected")
  } else {
    HTML.recognitionModeButton.classList.remove("selected")
  }
})

HTML.penButton.addEventListener("click", () => {
  if (selectedTool == Tools.PEN) {
    showElement(HTML.penProperties)
  } else {
    selectedTool = Tools.PEN
    HTML.penButton.classList.add("selected")
    HTML.eraserButton.classList.remove("selected")
  }
})

HTML.eraserButton.addEventListener("click", () => {
  selectedTool = Tools.ERASER
  HTML.penButton.classList.remove("selected")
  HTML.eraserButton.classList.add("selected")
})

HTML.strokeColorPicker.addEventListener("change", () => {
  const paletteColour = event.target.value
  HTML.rectangle.style.backgroundColor = paletteColour
  HTML.labelColours.style.backgroundColor = paletteColour
  strokeColour = paletteColour
})

HTML.strokeRadiusSlider.oninput = function() {
  HTML.output.innerHTML = this.value
  strokeRadius = this.value / 2
}

HTML.output.innerHTML = HTML.strokeRadiusSlider.value

// If the page has been refreshed
if (performance.navigation.type == 1) {
  const sliderValue = parseInt(HTML.output.innerHTML)
  HTML.strokeRadiusSlider.setAttribute("value", sliderValue)
  strokeRadius = sliderValue / 2
}

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.strokeColorPicker.value = paletteColour
    HTML.labelColours.style.backgroundColor = paletteColour
    strokeColour = paletteColour
    hideElement(HTML.palette)
  })
}