Cheese Star

example: Simple mouse event routing.

code: route assignment example

    
    var elem = document.getElementById('viewport'),
        cheese = new Cheese(elem),
        
    ...
    
    
    cheese.addRoute('draw', {
        'mouseover' : function (e) { this.style.outlineColor = "#CC841D"; },
        'mouseout'  : function (e) { this.style.outlineColor = ""; },
        'mousedown' : function (e) { isDragging = true; draw(this, relCoords(e, this).x, relCoords(e, this).y, "red", 10); },
        'mousemove' : function (e) { if (isDragging) { draw(this, relCoords(e, this).x, relCoords(e, this).y, "red", 10); } },
        'mouseup'   : function (e) { isDragging = false; }
    });
    
    cheese.addRoute('erase', {
        'mousedown' : function (e) { isDragging = true; draw(this, relCoords(e, this).x, relCoords(e, this).y, "blue", 10); },
        'mousemove' : function (e) { if (isDragging) { draw(this, relCoords(e, this).x, relCoords(e, this).y, "blue", 10); } },
        'mouseup'   : function (e) { isDragging = false; }
    });
    
    cheese.addRoute('eyedropper', {
        'mousedown' : function (e) { isDragging = true; var c = colorSample(this, relCoords(e, this).x, relCoords(e, this).y); colorSampled.style.background = 'rgb(' + c.r + ',' + c.g + ',' + c.b + ')'; },
        'mousemove' : function (e) { if (isDragging) { var c = colorSample(this, relCoords(e, this).x, relCoords(e, this).y); colorSampled.style.backgroundColor = 'rgba(' + c[0] + ',' + c[1] + ',' + c[2] + ',' + c[3] + ')';} },
        'mouseup'   : function (e) { isDragging = false; }
    });