2012/04/23 16:48:41 | (127.0.0.1) 
{h1 paint}


_ul red :{input id:red; code:code; |0} green :{input id:green; code:code; |0} blue :{input id:blue; code:code; |255}
_ul size :{input id:size; |20} grid :{input id:grid; |10}

{submit id:initButton;  code:code; | init }
{submit id:saveButton;  code:code; | save }
{submit id:clearButton; code:code; | clear }




{canvas id:myCanvas; width:800; height:600; | }



{pre id:code; |_!! 

var Events = function(canvasId){

    this.canvas = document.getElementById(canvasId);
    this.context = this.canvas.getContext("2d");

    this.stage = undefined;
    this.listening = false;
    
    // desktop flags
    this.mousePos = null;
    this.mouseDown = false;
    this.mouseUp = false;
    this.mouseOver = false;
    this.mouseMove = false;
    
    // mobile flags
    this.touchPos = null;
    this.touchStart = false;
    this.touchMove = false;
    this.touchEnd = false;
    
    // Region Events
    this.currentRegion = null;
    this.regionIndex = 0;
    this.lastRegionIndex = -1;
    this.mouseOverRegionIndex = -1;
};

// ======================================= GENERAL =======================================

Events.prototype.getContext = function(){
    return this.context;
};

Events.prototype.getCanvas = function(){
    return this.canvas;
};

Events.prototype.clear = function(){
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
};

Events.prototype.getCanvasPos = function(){
    var obj = this.getCanvas();
    var top = 0;
    var left = 0;
    while (obj.tagName != "BODY") {
        top += obj.offsetTop;
        left += obj.offsetLeft;
        obj = obj.offsetParent;
    }
    return {
        top: top,
        left: left
    };
};

Events.prototype.setStage = function(func){
    this.stage = func;
    this.listen();
};

// ======================================= CANVAS EVENTS =======================================

Events.prototype.reset = function(evt){
    if (!evt) {
        evt = window.event;
    }
    
    this.setMousePosition(evt);
    this.setTouchPosition(evt);
    this.regionIndex = 0;
    
    if (this.stage !== undefined) {
        this.stage();
    }
    
    // desktop flags
    this.mouseOver = false;
    this.mouseMove = false;
    this.mouseDown = false;
    this.mouseUp = false;
    
    // mobile touch flags
    this.touchStart = false;
    this.touchMove = false;
    this.touchEnd = false;
};

Events.prototype.listen = function(){
    var that = this;
    
    if (this.stage !== undefined) {
        this.stage();
    }
    
    // desktop events
    this.canvas.addEventListener("mousedown", function(evt){
        that.mouseDown = true;
        that.reset(evt);
    }, false);
    
    this.canvas.addEventListener("mousemove", function(evt){
        that.reset(evt);
    }, false);
    
    this.canvas.addEventListener("mouseup", function(evt){
        that.mouseUp = true;
        that.reset(evt);
    }, false);
    
    this.canvas.addEventListener("mouseover", function(evt){
        that.reset(evt);
    }, false);
    
    this.canvas.addEventListener("mouseout", function(evt){
        that.mousePos = null;
    }, false);
    
    // mobile events
    this.canvas.addEventListener("touchstart", function(evt){
        evt.preventDefault();
        that.touchStart = true;
        that.reset(evt);
    }, false);
    
    this.canvas.addEventListener("touchmove", function(evt){
        evt.preventDefault();
        that.reset(evt);
    }, false);
    
    this.canvas.addEventListener("touchend", function(evt){
        evt.preventDefault();
        that.touchEnd = true;
        that.reset(evt);
    }, false);
};

Events.prototype.getMousePos = function(evt){
    return this.mousePos;
};

Events.prototype.getTouchPos = function(evt){
    return this.touchPos;
};

Events.prototype.setMousePosition = function(evt){
    var mouseX = evt.clientX - this.getCanvasPos().left + window.pageXOffset;
    var mouseY = evt.clientY - this.getCanvasPos().top + window.pageYOffset;
    this.mousePos = {
        x: mouseX,
        y: mouseY
    };
};

Events.prototype.setTouchPosition = function(evt){
    if (evt.touches !== undefined && evt.touches.length == 1) { // Only deal with one finger
        var touch = evt.touches[0]; // Get the information for finger #1
        var touchX = touch.pageX - this.getCanvasPos().left + window.pageXOffset;
        var touchY = touch.pageY - this.getCanvasPos().top + window.pageYOffset;
        
        this.touchPos = {
            x: touchX,
            y: touchY
        };
    }
};

// ======================================= REGION EVENTS =======================================

Events.prototype.beginRegion = function(){
    this.currentRegion = {};
    this.regionIndex++;
};

Events.prototype.addRegionEventListener = function(type, func){
    var event = (type.indexOf('touch') == -1) ? 'on' + type : type;
    this.currentRegion[event] = func;
};

Events.prototype.closeRegion = function(){
    var pos = this.touchPos || this.mousePos;
    
    if (pos !== null && this.context.isPointInPath(pos.x, pos.y)) {
        if (this.lastRegionIndex != this.regionIndex) {
            this.lastRegionIndex = this.regionIndex;
        }
        
        // handle onmousedown
        if (this.mouseDown && this.currentRegion.onmousedown !== undefined) {
            this.currentRegion.onmousedown();
            this.mouseDown = false;
        }
        
        // handle onmouseup
        else if (this.mouseUp && this.currentRegion.onmouseup !== undefined) {
            this.currentRegion.onmouseup();
            this.mouseUp = false;
        }
        
        // handle onmouseover
        else if (!this.mouseOver && this.regionIndex != this.mouseOverRegionIndex && this.currentRegion.onmouseover !== undefined) {
            this.currentRegion.onmouseover();
            this.mouseOver = true;
            this.mouseOverRegionIndex = this.regionIndex;
        }
        
        // handle onmousemove
        else if (!this.mouseMove && this.currentRegion.onmousemove !== undefined) {
            this.currentRegion.onmousemove();
            this.mouseMove = true;
        }
        
        // handle touchstart
        if (this.touchStart && this.currentRegion.touchstart !== undefined) {
            this.currentRegion.touchstart();
            this.touchStart = false;
        }
        
        // handle touchend
        if (this.touchEnd && this.currentRegion.touchend !== undefined) {
            this.currentRegion.touchend();
            this.touchEnd = false;
        }
        
        // handle touchmove
        if (!this.touchMove && this.currentRegion.touchmove !== undefined) {
            this.currentRegion.touchmove();
            this.touchMove = true;
        }
        
    }
    else if (this.regionIndex == this.lastRegionIndex) {
        this.lastRegionIndex = -1;
        this.mouseOverRegionIndex = -1;
        
        // handle mouseout condition
        if (this.currentRegion.onmouseout !== undefined) {
            this.currentRegion.onmouseout();
        }
    }
};


function addPoint(events, points, grid){
  var context = events.getContext();
  var drawingPos = events.getMousePos();
  						// ajout d'une grille
    drawingPos.x = Math.round( drawingPos.x/g_grid )*g_grid;
    drawingPos.y = Math.round( drawingPos.y/g_grid )*g_grid;
  						// ajout d'une grille
  if (drawingPos !== null) {
      points.push(drawingPos);
  }
}

function drawPath(canvas, points, canvasImg){
  var context = canvas.getContext("2d");
  // clear canvas
  context.clearRect(0, 0, canvas.width, canvas.height);
  // redraw canvas before path
  context.drawImage(canvasImg, 0, 0, canvas.width, canvas.height);
  // draw patch
  context.beginPath();
  context.lineTo(points[0].x, points[0].y);
  for (var n = 1; n < points.length; n++) {
      var point = points[n];
      context.lineTo(point.x, point.y);
  }
  context.stroke();
}

function updateColorSquare(){
  var red = document.getElementById("red").value;
  var green = document.getElementById("green").value;
  var blue = document.getElementById("blue").value;
  var colorSquare = document.getElementById("colorSquare");
  colorSquare.style.backgroundColor = "rgb(" + red + "," + green + "," + blue + ")";
}

function getCanvasImg(canvas){
  var img = new Image();
  img.src = canvas.toDataURL();
  return img;
}

	var init = function() {
  var events = new Events("myCanvas");
  var canvas = events.getCanvas();
  var context = events.getContext();
  var isMouseDown = false;
  var canvasImg = getCanvasImg(canvas);
  var points = [];
  
  // initialize drawing params
  var red = document.getElementById("red").value;
  var green = document.getElementById("green").value;
  var blue = document.getElementById("blue").value;
  var size = document.getElementById("size").value;
  var grid = document.getElementById("grid").value;
   
  // attach listeners
  document.getElementById("red").addEventListener("keyup", function(evt){ updateColorSquare(); }, false);
  document.getElementById("green").addEventListener("keyup", function(evt){ updateColorSquare(); }, false);
  document.getElementById("blue").addEventListener("keyup", function(evt){ updateColorSquare(); }, false);
  document.getElementById("clearButton").addEventListener("click", function(evt){
      events.clear();
      points = [];
      canvasImg = getCanvasImg(canvas);
  }, false);
  // open new window with saved image so user, can right click and save to their computer
  document.getElementById("saveButton").addEventListener("click", function(evt){ window.open(canvas.toDataURL()); }, false);
  // attach listeners to canvas
  canvas.addEventListener("mousedown", function(){
      // update drawing params
      red = document.getElementById("red").value;
      green = document.getElementById("green").value;
      blue = document.getElementById("blue").value;
      size = document.getElementById("size").value;
      g_grid = document.getElementById("grid").value;	// ajout d'une grille
      // start drawing path
      context.strokeStyle = "rgb(" + red + "," + green + "," + blue + ")";
      context.lineWidth = size;
      context.lineJoin = "round";
      context.lineCap = "round";
      addPoint(events, points, grid);
      isMouseDown = true;
  }, false);
  
  canvas.addEventListener("mouseup", function(){
      isMouseDown = false;
      if (points.length > 0) {
          drawPath(this, points, canvasImg);
          // reset points
          points = [];
      }
      canvasImg = getCanvasImg(this);
  }, false);
  
  canvas.addEventListener("mouseout", function(){
      if (document.createEvent) {
          var evt = document.createEvent('MouseEvents');
          evt.initEvent("mouseup", true, false);
          this.dispatchEvent(evt);
      }
      else {
          this.fireEvent("onmouseup");
      }
  }, false);
  
  events.setStage(function(){
      if (isMouseDown) {
          addPoint(this, points, grid);
          drawPath(canvas, points, canvasImg);
      }
  });
    
};

// window.onload = init();
document.getElementById("initButton").onclick = init();


!!_}