Vladislav_Postnikov
/
HomeWork1


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331
							<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="viewport" content="width=device-width">
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.3/papaparse.min.js"></script>
	<script src="http://gitlab.a-level.com.ua/gitgod/nanobind/raw/master/static/nb.js"></script>
</head>
<body>
	<canvas id='canvas' width=400 height=400></canvas> 
        <button id='undo'>UNDO</button>
        <input type='color' id='color'>
        <select id='tool'>
            <option value='graffity'>Graffity</option>
            <option value='circle'>Circle</option>
            <option value='line'>Line</option>
            <option value='select'>Select</option>
            <option value='rectangle'>Rectangle</option>
            <option value='ellipse'>Ellipse</option>
        </select>
        <input type='number' id='size' value=10>
        <button id='delete'>Delete...</button>
	

	<!-- <canvas id="canv" width="400" height="400"></canvas>
	<input type="submit" value="Click" id="btn">
	<input type="text" placeholder="color" id="color">
	<input type="submit" value="Delete" id="del"> -->
	<script>

		/*let canv=document.getElementById('canv');
			let ctx=canv.getContext('2d');

		del.onclick=()=>{
			ctx.fillStyle='white';
			ctx.fill();
		}

		btn.onclick=()=>{
			ctx.beginPath();
			ctx.arc(50, 50, 50, -Math.PI/6,	Math.PI/6,true);
			ctx.lineTo(50, 50)
			ctx.closePath()
			ctx.fillStyle=color.value;
			ctx.fill();
		}*/

	const canvas = document.getElementById('canvas')
const ctx    = canvas.getContext('2d')
const width  = canvas.width;
const height = canvas.height;
let current;
let selection = []

const tools = {
    graffity: {
        mousemove(e){
            (e.buttons & 1) && new Circle(e.clientX, e.clientY, +size.value, color.value)
        }
    },
    circle: {
        mousedown(e){
            current = new Circle(e.clientX, e.clientY, 1, color.value)
        },
        mousemove(e){
            if (!current) return;

            current.radius = current.distanceTo(e.clientX, e.clientY)
            Drawable.drawAll()
        },
        mouseup(e){
            current = null
        }
    },
    line: {
        mousedown(e){
            current = new Line(e.clientX, e.clientY, 0, 0, color.value, +size.value)
        },
        mousemove(e){
            if (!current) return;

            current.width = e.clientX - current.x
            current.height = e.clientY - current.y

            Drawable.drawAll()
        },
        mouseup(e){
            current = null
        }
    },
    select: {
        click(e){
            console.log(e)
            let found = Drawable.instances.filter(c => c.in && c.in(e.clientX, e.clientY))
            if (found.length){
                if (e.altKey){
                    selection.push(found.pop())
                }
                else {
                    selection = [found.pop()]
                }
            }
            else {
                if (!e.altKey) selection = []
            }

            Drawable.drawAll(selection)
        },
        mousedown(e){},
        mousemove(e){},
        mouseup(e){},
    },
    rectangle: {
        mousedown(e){
            current = new Rectangle(e.clientX, e.clientY, 0, 0, color.value)
        },
        mousemove(e){
            if (!current) return;
            current.width = e.clientX - current.x
            current.height = e.clientY - current.y
            Drawable.drawAll()
        },
        mouseup(e){
            current = null
        }
    },
    ellipse: {
        mousedown(e){
            current = new Elipse(e.clientX,e.clientY, 1,1, color.value)
        },
        mousemove(e){
            if (!current) return;
            var width = e.clientX - current.x;
            var height = e.clientY - current.y;
            current.width = width ? width : width * -1;
            current.height = height ? height : height * -1;
            Drawable.drawAll()
        },
        mouseup(e){
            current = null
        }
    }
}

function superHandler(evt){
    let t = tools[tool.value]
    if (typeof t[evt.type] === 'function')
        t[evt.type].call(this, evt)
}

canvas.onmousemove = superHandler
canvas.onmouseup   = superHandler
canvas.onmousedown = superHandler
canvas.onclick = superHandler

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

const distance = (x1, y1, x2, y2) => ((x1-x2)**2 + (y1-y2)**2)**0.5

Drawable.prototype.draw = function(){};

Drawable.prototype.distanceTo = function(x,y){
    if (typeof this.x !== 'number' ||
        typeof this.y !== 'number'){
        return NaN
    }
    return distance(this.x, this.y, x, y)
};

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

Drawable.drawAll = function(selection=[]){
    ctx.clearRect(0,0,width,height);
    Drawable.forAll(item => item.draw())
    selection.forEach(item  => item.draw(true))
}

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

class Circle extends Drawable {
    constructor(x,y,radius, color){
        super()
        this.x      = x
        this.y      = y
        this.radius = radius
        this.color  = color
        this.draw()
    }
    draw(selected){
        ctx.beginPath()
        ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI)
        ctx.closePath()
        ctx.fillStyle = this.color
        if (selected){
            ctx.lineWidth = 2
            ctx.stroke()
        }
        ctx.fill()
    }
    in(x, y){
        return this.distanceTo(x, y) < this.radius
    }
    inBounds(x, y, w, h){
        return this.x >= x && this.x <= x + w && this.y >= y && this.y <= y + h
    }
}

class Line extends Drawable {
    constructor(x,y, width, height, color, lineWidth){
        super()
        this.x          = x
        this.y          = y
        this.width      = width
        this.height     = height
        this.color      = color
        this.lineWidth  = lineWidth
        this.draw()
    }
    draw(selected){
        ctx.beginPath()
        ctx.moveTo(this.x, this.y)
        ctx.lineTo(this.x + this.width, this.y + this.height)
        ctx.closePath()
        ctx.strokeStyle = this.color
        ctx.lineWidth   = this.lineWidth
        if (selected){
            ctx.strokeStyle = '#f0f'
            ctx.stroke()
        }
        ctx.stroke()
    }
    in(x, y) {
        let rotateLine      = Math.atan2(this.height, this.width)
        let rotCursor       = Math.atan2(y - this.y, x - this.x)
        let distanceToPoint = distance(x, y, this.x, this.y)
        let angleLine       = rotCursor - rotateLine
        let rotateX         = Math.cos(angleLine) * distanceToPoint
        let rotateY         = Math.sin(angleLine) * distanceToPoint
        return rotateX >= 0 && rotateX <= this.length && rotateY <= this.lineWidth/2 && rotateY >= -this.lineWidth/2
    }
    get length(){
        return this.distanceTo(this.x + this.width, this.y + this.height)
    }
}

//------------------------------------------------------------------
class Rectangle extends Drawable{
    constructor(x, y, width, height, color){
        super()
        this.x      = x
        this.y      = y
        this.width  = width
        this.height = height
        this.color  = color
        this.draw()
    }
    draw(selected){
        ctx.beginPath()
        ctx.moveTo(this.x, this.y)
        ctx.fillRect(this.x, this.y, this.width, this.height)
        if (selected){
            ctx.rect(this.x, this.y, this.width, this.height)
            ctx.strokeStyle = '#f0f'
            ctx.stroke()
        }
        ctx.fillStyle = this.color
        ctx.stroke()
    }
    in(x, y){
        return x >= this.x && x <= this.x + this.width && y >= this.y && y <= this.y + this.height
    }
}

//--------------------------------------------------------------
class Elipse extends Drawable {
    constructor(x,y,width,height,color){
        super()
        this.x      = x ? x : x*-1;
        this.y      = y ? y : y*-1;
        this.width  = width;
        this.height = height;
        this.color  = color;
        this.draw(); 
    }
    draw(){
        this.width = this.width > 0 ? this.width : this.width * (-1);
        this.height = this.height > 0 ? this.height : this.height * (-1);
        ctx.beginPath();
        ctx.moveTo(this.x, this.y);
        ctx.ellipse(this.x, this.y, this.height, this.width,  Math.PI / 2, 0, 2 * Math.PI);
        ctx.closePath();
        ctx.fillStyle = this.color;
        ctx.fill();
    }
    in(x,y){
        return this.distanceTo(x,y) < this.radius
    }
    inBounds(x,y,w,h){ 
        return this.x >= x && this.x <= x + w &&
               this.y >= y && this.y <= y + h 
    }
}
//-------------------------------------------------------------------

color.onchange = () => {
    selection.forEach(c => c.color = color.value)
    Drawable.drawAll(selection)
}

document.getElementById('delete').onclick = () =>{
    Drawable.instances = []
    Drawable.drawAll()
}
undo.onclick = function(){
    Drawable.instances.pop()
    Drawable.drawAll()
}
	</script>
</body>
</html>