homework/js08-CanvasProto/files/index.js

var canvas = document.getElementById('canvas')
var ctx    = canvas.getContext('2d')

var width  = canvas.width;
var height = canvas.height;

function Drawable(){
   Drawable.prototype.addInstance(this);   
}


Drawable.prototype.draw = function(){};
Drawable.prototype.instances = [];
Drawable.prototype.selected = [];
Drawable.prototype.addInstance = function(item){
    Drawable.prototype.instances.push(item);
}

Drawable.prototype.drawAll = function(){
    ctx.clearRect(0,0,width,height);
    for(var i = 0; i<Drawable.prototype.instances.length;i++){

        Drawable.prototype.instances[i].draw(true);
    }
}


Drawable.prototype.forAll = function(callback){
    for(var i = 0; i<Drawable.prototype.instances.length;i++){
        callback(Drawable.prototype.instances[i])
    }
}

Drawable.prototype.forSelected = function(callback){
    for(var i = 0; i<Drawable.prototype.selected.length;i++){
        callback(Drawable.prototype.selected[i])
    }
}

function Circle(x,y,radius,color, name){
  Drawable.apply(this);

  this.coords   = {x: x || 0, y: y || 0}  
  this.radius   = radius || 10;
  this.color    = color  || "red";  
  this.name = name;
}

Circle.prototype = Object.create(Drawable.prototype);
Circle.prototype.constructor = Circle;

Circle.prototype.draw = function(){
  console.log('DRAW');
  ctx.beginPath();
  ctx.arc(this.coords.x, this.coords.y, this.radius, 0, 2 * Math.PI, false);
  ctx.fillStyle = this.color;
  ctx.closePath()
  ctx.fill();
}

Circle.prototype.coords = {x: null, y: null};
Circle.prototype.radius   = null;
Circle.prototype.color  = "black";


function Line(x1,y1,x2,y2,color,lineWidth){
  Drawable.apply(this);

  this.x1 = x1;
  this.y1 = y1;
  this.x2 = x2;
  this.y2 = y2;
  this.lineWidth = lineWidth;
  this.color    = color  || "red";  

}

Line.prototype = Object.create(Drawable.prototype);
Line.prototype.constructor = Line;

Line.prototype.draw = function(isShadow){
    ctx.beginPath()
    ctx.moveTo(this.x1,this.y1);
    ctx.lineTo(this.x2,this.y2);
    ctx.strokeStyle= this.color;
    ctx.lineWidth = this.lineWidth;
    ctx.stroke();
    ctx.closePath()
}

function Rectangle(x1,y1,x2,y2,color,lineWidth){
	Drawable.apply(this)

	this.x1 = x1;
	this.y1 = y1;
	this.x2 = x2;
	this.y2 = y2;
	this.color = color;
	this.lineWidth = lineWidth;
}
Rectangle.prototype = Object.create(Drawable.prototype);
Rectangle.prototype.constructor = Rectangle;
Rectangle.prototype.draw = function(){
	ctx.beginPath();
	ctx.rect(this.x1,this.y1,this.x2,this.y2);
	ctx.fillStyle = this.color;
	ctx.fill();
	ctx.closePath();

}



//ctx.moveTo(0,0);
//ctx.lineTo(width, height);
//ctx.strokeStyle="#FF0000";
//ctx.stroke();
//ctx.closePath()
//

var lineStartCoords = {x: null, y: null};

function draw(evt){
	if(event.ctrlKey){
		return;
	}
    var tool = document.getElementById('tool').value;
    var obj;
    if (tool == 'line'){
        if (evt.type == 'mousedown'){
            lineStartCoords = {x: evt.clientX, y: evt.clientY};
        }

        if (evt.type == 'mouseup'){
            obj = new Line(lineStartCoords.x, lineStartCoords.y, evt.clientX, evt.clientY, document.getElementById('color').value, document.getElementById("size").value)
        }
        if(evt.type == 'mousemove'){
        	
        	obj = new Line(lineStartCoords.x, lineStartCoords.y, evt.clientX, evt.clientY, document.getElementById('color').value, document.getElementById("size").value)
        	Line.prototype.instances.splice(-1,1);
        	Line.prototype.drawAll();
        }
    }
    else if (tool == 'circle'){
        obj = new Circle(evt.clientX,evt.clientY,document.getElementById("size").value,document.getElementById('color').value, "circle")
    }
    else if (tool == 'rectangle'){
    	if (evt.type == 'mousedown'){
            lineStartCoords = {x: evt.clientX, y: evt.clientY};
        }

        if (evt.type == 'mouseup'){
            obj = new Rectangle(lineStartCoords.x, lineStartCoords.y, evt.clientX - lineStartCoords.x, evt.clientY - lineStartCoords.y, document.getElementById('color').value, document.getElementById("size").value)
        }
        if(evt.type == 'mousemove'){
        	
        	obj = new Rectangle(lineStartCoords.x, lineStartCoords.y, evt.clientX - lineStartCoords.x, evt.clientY - lineStartCoords.y, document.getElementById('color').value, document.getElementById("size").value)
        	Line.prototype.instances.splice(-1,1)
        	Drawable.prototype.drawAll();
        	
        }
    }
    obj.draw()
}

canvas.onmousedown = draw
canvas.onmousemove = function(evt){
	var tool = document.getElementById('tool').value;
    if (evt.buttons & 1){
        draw(evt);
    }
}

canvas.onmouseup = draw


//document.getElementById('color').onchange = function(){
    //Drawable.prototype.forAll(function(item){
        //item.color = document.getElementById('color').value;
    //})
    //Drawable.prototype.drawAll();
//}

var undo = document.getElementById("undo");
undo.onclick = function(){
	Drawable.prototype.instances.splice(-1,1)
	Drawable.prototype.drawAll();
	console.log(Drawable.prototype.instances)
}




function hexToRgbA(hex){
    var c;
    if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)){
        c= hex.substring(1).split('');
        if(c.length== 3){
            c= [c[0], c[0], c[1], c[1], c[2], c[2]];
        }
        c= '0x'+c.join('');
        return 'rgba('+[(c>>16)&255, (c>>8)&255, c&255].join(',')+',0.3)';
    }
    throw new Error('Bad Hex');
}

canvas.onclick = function(event){
	if(!event.ctrlKey){
		return;
	}
	
	Drawable.prototype.forAll(function(obj){

		var x = event.clientX;
		var y = event.clientY;
		if(obj.name === "circle"){
			if(obj.coords.x - obj.radius < x && x < obj.coords.x + obj.radius && obj.coords.y - obj.radius < y && y < obj.coords.y + obj.radius)
			{
				obj.color = "red";
				Drawable.prototype.selected.push(obj);
				
				Drawable.prototype.drawAll();
			}
		}
		if((obj.x1 < x && x < obj.x2 + obj.x1 && obj.y1 < y && y < obj.y2 + obj.y1) || (obj.x1 < x && x < obj.x2 && obj.y1 < y && y < obj.y2)){
			obj.color = "red";
			Drawable.prototype.selected.push(obj);
			
			Drawable.prototype.drawAll();
		}	
	});
}

document.getElementById('color').onchange = function(){
	Drawable.prototype.forSelected(function(obj){
	obj.color = document.getElementById('color').value;
	Drawable.prototype.drawAll();
})
}
document.getElementById("size").onchange = function(){
	Drawable.prototype.forSelected(function(obj){
	obj.lineWidth = document.getElementById('size').value;
	obj.radius = document.getElementById('size').value;
	Drawable.prototype.drawAll();
})

}

document.getElementById("delete").onclick = function(event){
	for (var i = 0; i < Drawable.prototype.instances.length; i++) {
		if(Drawable.prototype.instances[i].color === "red")
			delete Drawable.prototype.instances[i];
		Drawable.prototype.drawAll()
	}
	console.log(Drawable.prototype.instances)
	console.log(Drawable.prototype.selected)

}