gridmangler.js

Simple grid/tile-based events for Canvas elements

Passes button number, shift-modifier, and double-click indicator by default

If you can see this your browser is quite bad.

Create the object

var tile_width = 20, tile_height = 20;

// with jQuery
var grid = gridmangler($('#your_canvas_id_here').get()[0], tile_width, tile_height);

// or without jQuery: (it's not required)
var grid = gridmangler(document.getElementById('your_canvas_id_here'), tile_width, tile_height);

// optional 'options' argument, currently supports doubleclickspeed (default is 500)
var grid = gridmangler($('#your_canvas_id_here').get()[0], tile_width, tile_height,
  {"doubleclickspeed": 250 }
);

Grid (or tile) coordinates are simple objects

var coord_xy = {"x": 1, "y": 2};
var array_of_coords = [{"x": 0, "y": 2}, {"x": 1, "y": 2}];

Add a simple mousedown grid-event

grid.addGridEvent("mousedown", 
    function (grid_xy, button, shiftKey, isDoubleClick) {
      // check for double-click
      var last = grid.getLastClickGrid();
      
      if (isDoubleClick) {
        $('#id_div_doubleclick').html('<p>double click detected at (' + grid_xy.x + ', ' + grid_xy.y + ')</p>');
      } 
      
      grid.drawFillAt(grid_xy, "#99CCFF");
      grid.drawBorderAt(grid_xy, "rgba(255, 0, 0, 1)");
      
      
      var html = '';
      html = '<p>Button ' + button + ' ';
    
      if (shiftKey) {
        html += 'Shift-';
      }
    
      html += 'Clicked on grid tile (' + grid_xy.x + ', ' + grid_xy.y + ')</p>';
        $('#id_div_click').html(html);
      }
);

Use the focus grid events to track mouse movement

grid.addGridEvent("gainfocus", 
  function (grid_xy) {
    grid.drawBorderAt(grid_xy, "#003366");
    $('#id_div_coordinates').html('<p>mouse is at grid tile (' + grid_xy.x + ', ' + grid_xy.y + ')</p>');
    $('#id_div_click').html('<p/>');
    $('#id_div_doubleclick').html('<p/>');
  }
);

// gridmangler's drawBorder result is entirely contained within the confines of the grid, 
// which as far as I can tell is different from the default strokeStyle of Canvas 
// (where borders are actually +1px outside the specified rectangle)

grid.addGridEvent("leavefocus", 
  function (grid_xy) {
    grid.clearAt(grid_xy);
  }
);

Add "longpress" support

"longpressspeed" option controls the timer, default is 500ms

var grid = gridmangler($('#your_canvas_id_here').get()[0], tile_width, tile_height,
  {"longpressspeed": 1000 }
  
grid.addGridEvent("longpress",
  function (grid_xy) {
    $('#id_div_click').html('<p>Long-press at grid tile (' + grid_xy.x + ', ' + grid_xy.y + ')</p>');
    $('#id_div_doubleclick').html('<p/>');
  }
);

Canvas Drawing

// images!
grid.drawImageAt(grid_xy, image);

// the basics
grid.drawBorderAt(grid_xy, strokeStyle);
grid.drawFillAt(grid_xy, fillStyle);
grid.clearAt(grid_xy);

// expand as necessary
var context_rect = grid.getContextRectangle(grid_xy); // scales back up to Canvas context coords
// by default, width and height are the size of an individual tile

grid.getCanvasContext().any_2d_canvas_method(context_rect.x, context_rect.y, context_rect.width, context_rect.height);

Other useful stuff

// grid utilities
var neighbors = grid.getSurroundingTiles(grid_xy); // all 8 surrounding 

for (i = 0; i < neighbors.length; i += 1) {
  grid.drawImageAt(neighbors[i], other_image);
}

var adjacent = grid.getCardinalTiles(grid_xy); // for the 4 N/S/E/W tiles

// simple grid coordinate math 
var right_xy = grid.getTileFromOffset(grid_xy, {"x": 1, "y": 0});
var array_of_coords = grid.getTilesFromArray(grid_xy,
    [{"x": 0, "y": 1}, {"x": 0, "y": 2}, {"x": 0, "y": 3}]);
    // returns an array of coords offset from the starting grid_xy

// use last visited grid to figure out what to re-draw 
// similar to .getLastClickGrid() above
grid.getLastVisitGrid(); // returns coord object {"x": x, "y": y}

Code snippets use prettify.js

Please leave any comments for me at github