summaryrefslogtreecommitdiff
path: root/js/ui/canvas.js
blob: 1e66a5bd19d5596fddf924ccd22f32de6a28bcf9 (plain)
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
99
100
101
102
103
104
105
106
var canvas = current_canvas = (function(){

  var cols = 100
  var rows = 30

  var exports = new Matrix (cols, rows, function(x,y){
    var lex = new Lex (x,y)
    lex.build()
    return lex
  })

  exports.bind = function(){

    exports.forEach(function(lex, x, y){

      if (lex.bound) return
      lex.bound = true
      var point = [x,y]
      lex.span.addEventListener('contextmenu', function(e){
        e.preventDefault()
      })
      lex.span.addEventListener('mousedown', function(e){
        if (is_mobile) return
        e.preventDefault()
        dragging = true
        current_canvas = canvas
        if (e.altKey) {
          if (e.shiftKey) {
            blit.copy_from(canvas, brush, floor(x-brush.w/2), floor(y-brush.h/2))
            draw.set_last_point(e, point)
          }
          else {
            brush.load(lex)
            brush.generate()
            dragging = false
          }
          return
        }
        else if (drawing) {
          draw.down(e, lex, point)
        }
        else if (selecting) {
          selection.down(e, lex, point)
        }
        else if (filling) {
          draw.fill(brush, x, y)
        }
        lex.focus()
      })

      lex.span.addEventListener("mousemove", function(e){
        if (is_mobile) return
        if (! dragging) return
        if (drawing) {
          draw.move(e, lex, point)
        }
        else if (selecting) {
          selection.move(e, lex, point)
        }
        lex.focus()
      })

    })

    if (is_mobile) {
      exports.rapper.addEventListener('touchstart', function(e){
        e.preventDefault()
        var x, y, point, lex
        x = (e.touches[0].pageX - exports.rapper.offsetTop) / exports.aa[0][0].span.offsetWidth
        y = (e.touches[0].pageY - exports.rapper.offsetTop) / exports.aa[0][0].span.offsetHeight
        x = ~~clamp(x, 0, exports.aa[0].length-1)
        y = ~~clamp(y, 0, exports.aa.length-1)
        point = [x,y]
        lex = exports.aa[y][x]
        dragging = true
        if (drawing) {
          draw.down(e, lex, point)
        }
        else if (filling) {
          draw.fill(brush, x, y)
        }
        lex.focus()
      })
      exports.rapper.addEventListener("touchmove", function(e){
        e.preventDefault()
        var x, y, point, lex
        x = (e.touches[0].pageX - exports.rapper.offsetTop) / exports.aa[0][0].span.offsetWidth
        y = (e.touches[0].pageY - exports.rapper.offsetTop) / exports.aa[0][0].span.offsetHeight
        x = ~~clamp(x, 0, exports.aa[0].length-1)
        y = ~~clamp(y, 0, exports.aa.length-1)
        point = [x,y]
        lex = exports.aa[y][x]
        if (! dragging) return
        shader_el.innerHTML = point.join(",")
        if (drawing) {
          draw.move(e, lex, point)
        }
        lex.focus()
      })
    }

  }

  return exports

})()