tool-selection.js

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

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

let canvasOffset = [0, 0]
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 getCanvasOffset = () => canvasOffset
export const applyCanvasOffset = ([x, y]) => {
  canvasOffset[0] += x
  canvasOffset[1] += y
}

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

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

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

function setStrokeColour(colour) {
  HTML.rectangle.style.backgroundColor = colour
  HTML.strokeColorPicker.value = colour
  HTML.labelColours.style.backgroundColor = colour
  strokeColour = colour
}

function setStrokeRadius(value) {
  HTML.strokeRadiusSlider.setAttribute("value", value)
  strokeRadius = value / 2
}

setStrokeColour(strokeColour)
setStrokeRadius(strokeRadius)

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

const toolElements = {
  [Tools.PEN]: HTML.penButton,
  [Tools.ERASER]: HTML.eraserButton,
  [Tools.DRAGGER]: HTML.draggingToolButton,
}

function setSelectedTool(newSelectedTool) {
  selectedTool = newSelectedTool

  Object.getOwnPropertySymbols(toolElements).forEach((e) =>
    toolElements[e].classList.remove("selected"),
  )

  toolElements[newSelectedTool].classList.add("selected")
}

function centerCanvas() {
  canvasOffset = [0, 0]
}

HTML.penButton.addEventListener("click", () => {
  if (selectedTool == Tools.PEN) {
    showElement(HTML.penProperties)
  } else {
    setSelectedTool(Tools.PEN)
  }
})

HTML.eraserButton.addEventListener("click", () => {
  setSelectedTool(Tools.ERASER)
})

HTML.draggingToolButton.addEventListener("click", () => {
  setSelectedTool(Tools.DRAGGER)
})

HTML.canvasCenterToolButton.addEventListener("click", () => {
  centerCanvas()
})

HTML.strokeColorPicker.addEventListener("change", () => {
  const paletteColour = event.target.value
  setStrokeColour(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)
  setStrokeRadius(sliderValue)
}

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")
    setStrokeColour(paletteColour)
    hideElement(HTML.palette)
  })
}