Jadelet Example Garden

Hello

Hello

editor
  canvas
  palette
    input(type="color" @value)
{Observable} = Jadelet

toLocalPosition = (e, element) ->
  {left, top} = element.getBoundingClientRect()

  # -1 for border
  x: e.clientX - left - 1
  y: e.clientY - top - 1

τ = 2 * Math.PI

activeColor = Observable "#ff00ff"

editor = Template
  value: activeColor

canvas = editor.querySelector 'canvas'
context = canvas.getContext('2d')

active = false
canvas.addEventListener "mousedown", ->
  active = true
document.addEventListener "mouseup", ->
  active = false

document.addEventListener "mousemove", (e) ->
  return unless active
  r = 10

  {x, y} = toLocalPosition(e, canvas)
  context.fillStyle = activeColor()
  context.beginPath()
  context.arc(x, y, r, 0, τ)
  context.fill()

return editor