asciiblaster

- draw irc art in your web browser
git clone git://git.acid.vegas/asciiblaster.git
selection.js (4584B)
      1 var selection = (function(){
      2 
      3   var creating = false, moving = false, copying = false
      4   
      5   var selection_canvas = new Matrix (1, 1, function(x,y){
      6     var lex = new Lex (x,y)
      7     lex.build()
      8     return lex
      9   })
     10   
     11   var selector_el = document.createElement("div")
     12   selector_el.className = "selector_el"
     13   selection_canvas.append(selector_el)
     14   document.body.appendChild(selector_el)
     15 
     16   // in selection mode..
     17   // - we start by clicking the canvas. this positions the selection, and copies
     18   //   the character
     19   // - then we drag down and to the right. this resizes the selection and pushes new
     20   //   rows and columns. each of these copies the character underneath.
     21   // - on mouseup, the selection is locked. then..
     22   // - drag the selection to move it -- this "cuts" it and leaves a blank space on the canvas.
     23   // - shift-drag the selection to copy it
     24   
     25   var a = [0, 0]
     26   var b = [0, 0]
     27   var c = [0, 0]
     28   var d = [0, 0]
     29   
     30   function reset () {
     31     a[0] = a[1] = b[0] = b[1] = 0
     32   }
     33   function left (a,b) { return min(a[0],b[0]) }
     34   function top (a,b) { return min(a[1],b[1]) }
     35   function right (a,b) { return max(a[0],b[0]) }
     36   function bottom (a,b) { return max(a[1],b[1]) }
     37   function width (a,b) { return abs(a[0]-b[0])+1 }
     38   function height (a,b) { return abs(a[1]-b[1])+1 }
     39   function mag_x (a,b) { return a[0]-b[0] }
     40   function mag_y (a,b) { return a[1]-b[1] }
     41   function orient (a,b) {
     42     var l = left(a,b), m = top(a,b), n = right(a,b), o = bottom(a,b)
     43     a[0] = l ; a[1] = m ; b[0] = n ; b[1] = o
     44   }
     45   
     46   function contains (a,b,point) {
     47     var contains_x = a[0] <= point[0] && point[0] <= b[0]
     48     var contains_y = a[1] <= point[1] && point[1] <= b[1]
     49     return (contains_x && contains_y)
     50   }
     51   function reposition (aa, bb) {
     52     aa = aa || a
     53     bb = bb || b
     54     var cell = canvas.aa[top(aa, bb)][left(aa, bb)].span
     55     var cell_left = cell.offsetLeft
     56     var cell_top = cell.offsetTop
     57     var cell_width = cell.offsetWidth
     58     var cell_height = cell.offsetHeight
     59 
     60     var w = width(aa, bb)
     61     var h = height(aa, bb)
     62 
     63     selector_el.style.top = (cell_top-1) + "px"
     64     selector_el.style.left = (cell_left-1) + "px"
     65     selector_el.style.width = (cell_width*w+1) + "px"
     66     selector_el.style.height = (cell_height*h+1) + "px"
     67   }
     68   function down (e, lex, point){
     69     if ( ! contains(a,b,point) ) {
     70       copying = false
     71       moving = false
     72       creating = true
     73       a[0] = point[0]
     74       a[1] = point[1]
     75       b[0] = point[0]
     76       b[1] = point[1]
     77       reposition(a,b)
     78       selection.hidden = false
     79       selector_el.classList.add("creating")
     80     } else {
     81       copying = false
     82       moving = true
     83       creating = false
     84       c[0] = point[0]
     85       c[1] = point[1]
     86       d[0] = point[0]
     87       d[1] = point[1]
     88     }
     89     show()
     90     selector_el.classList.remove("dragging")
     91   }
     92   function move (e, lex, point){
     93     if (creating) {
     94       b[0] = point[0]
     95       b[1] = point[1]
     96       reposition(a,b)
     97     }
     98     else if (moving) {
     99       d[0] = point[0]
    100       d[1] = point[1]
    101       var dx = - clamp( mag_x(c,d), b[0] - canvas.w + 1, a[0] )
    102       var dy = - clamp( mag_y(c,d), b[1] - canvas.h + 1, a[1] )
    103       reposition( [ a[0] + dx, a[1] + dy ], [ b[0] + dx, b[1] + dy ])
    104     }
    105     else if (copying) {
    106     }
    107   }
    108   function up (e) {
    109     if (creating) {
    110       orient(a,b)
    111       selection_canvas.resize(width(a,b), height(a,b))
    112       reposition(a,b)
    113       blit.copy_from( canvas, selection_canvas, a[0], a[1] )
    114       selection_canvas.build()
    115       selector_el.classList.remove("creating")
    116     }
    117     if (moving) {
    118       var dx = - clamp( mag_x(c,d), b[0] - canvas.w + 1, a[0] )
    119       var dy = - clamp( mag_y(c,d), b[1] - canvas.h + 1, a[1] )
    120       a[0] += dx
    121       a[1] += dy
    122       b[0] += dx
    123       b[1] += dy
    124       undo.new()
    125       undo.save_rect(a[0], a[1], b[0] - a[0] + 1, b[1] - a[1] + 1)
    126       blit.copy_to( canvas, selection_canvas, a[0], a[1] )
    127     }
    128     if (copying) {
    129     }
    130     creating = moving = copying = false
    131     selector_el.classList.remove("dragging")
    132   }
    133   
    134   function show () {
    135     selecting = true
    136   }
    137   function hide () {
    138     reset()
    139     selector_el.style.top = "-9999px"
    140     selector_el.style.left = "-9999px"
    141     selector_el.style.width = "0px"
    142     selector_el.style.height = "0px"
    143     creating = moving = copying = false
    144     selection.hidden = true
    145     selecting = false
    146   }
    147   
    148   var selection = {}
    149   selection.reposition = reposition
    150   selection.down = down
    151   selection.move = move
    152   selection.up = up
    153   selection.canvas = selection_canvas
    154   selection.show = show
    155   selection.hide = hide
    156   selection.hidden = true
    157   return selection
    158 
    159 })()