Homework/js/20_canvas-2/index.js

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 0b00000x11 & 0b00000100 == x
            (e.buttons & 1) && new Circle(e.layerX, e.layerY, +size.value, color.value)
        }
    },
    circle: {
        mousedown(e){
            current = new Circle(e.layerX,e.layerY, 1, color.value)
        },
        mousemove(e){
            if (!current) return;

            current.radius = current.distanceTo(e.layerX, e.layerY)
            Drawable.drawAll()
        },

        mouseup(e){
            current = null
        }
    },
    line: {
        mousedown(e){
            current = new Line(e.layerX, e.layerY, 0, 0, color.value, +size.value)
        },
        mousemove(e){
            if (!current) return;

            current.width = e.layerX - current.x
            current.height = e.layerY - current.y

            Drawable.drawAll()
        },

        mouseup(e){
            current = null
        }
    },
    rectangle: {
        mousedown(e){
            current = new Rectangle(e.layerX, e.layerY, 0, 0, color.value)
        },
        mousemove(e){
            if (!current) return;

            current.width = e.layerX - current.x
            current.height = e.layerY - current.y

            Drawable.drawAll()
        },

        mouseup(e){
            current = null
        }
    },
    ellipse: {
        mousedown(e){
            current = new Ellipse(e.layerX, e.layerY, 0, 0, color.value)
        },
        mousemove(e){
            if (!current) return;

            current.width = e.layerX - current.x
            current.height = e.layerY - 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.layerX, e.layerY))
            if (found.length){
                if (e.ctrlKey){
                    selection.push(found.pop())
                }
                else {
                    selection = [found.pop()]
                }
            }
            else {
                if (!e.ctrlKey) selection = []
            }

            Drawable.drawAll(selection)
        },
        mousedown(e){
            //
        },
        mousemove(e){

        },

        mouseup(e){
            //x,y, w, h прямоугольника
            //selection - только те элеменеты Drawable.instances которые в границах прямоугольника.
        },
    }
}



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){ // x = 100, this.x = 102, w = 5
        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){
        if (selected){
            ctx.beginPath()
            ctx.moveTo(this.x, this.y)
            ctx.lineTo(this.x + this.width, this.y + this.height)
            ctx.closePath()            
            ctx.strokeStyle = '#000000'            
            ctx.lineWidth   = this.lineWidth + 2
            ctx.stroke()
        }
        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
        ctx.stroke()
    }



    in(x,y){
        let lineAngle = Math.atan2(this.height, this.width);
        let mouseAngle = Math.atan2(y - this.y, x - this.x);
        let lineTurnAngle = mouseAngle - lineAngle;
        let cursorWidth = distance(this.x,this.y,x,y);

        let rotX = Math.cos(lineTurnAngle) * cursorWidth;
        let rotY = Math.sin(lineTurnAngle) * cursorWidth;
        
        if (rotX > 0 && rotX < this.distanceTo(this.x + this.width, this.y + this.height) && (rotY > -this.lineWidth / 2)
        && (rotY < this.lineWidth / 2)) {
            // console.log('попал')
            return true
        } else {
            // console.log('мимо')
            return false
        }
    }
}



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(); 
    }   

    // invertColor(hex){
    //     function padZero(str, len) {
    //         len = len || 2;
    //         let zeros = new Array(len).join('0');
    //         return (zeros + str).slice(-len);
    //     }
    //     if (hex.indexOf('#') === 0) {
    //         hex = hex.slice(1);
    //     }
    //     // convert 3-digit hex to 6-digits.
    //     if (hex.length === 3) {
    //         hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
    //     }
    //     if (hex.length !== 6) {
    //         throw new Error('Invalid HEX color.');
    //     }
    //     // invert color components
    //     let r = (255 - parseInt(hex.slice(0, 2), 16)).toString(16),
    //         g = (255 - parseInt(hex.slice(2, 4), 16)).toString(16),
    //         b = (255 - parseInt(hex.slice(4, 6), 16)).toString(16);
    //     // pad each with zeros and return
    //     return '#' + padZero(r) + padZero(g) + padZero(b);
    // }  


    draw(selected){

        ctx.beginPath();
        ctx.moveTo(this.x, this.y);

        ctx.fillStyle = this.color;
        ctx.fillRect(this.x, this.y, this.width, this.height);

        if (selected){     
            ctx.rect(this.x, this.y, this.width, this.height);
            ctx.lineWidth = 2;
            ctx.stroke();
            
        } 
        ctx.closePath();
    }


    in(x,y){

        if (this.width > 0 && this.height > 0) {
            if (this.x < x && this.x + this.width > x &&
                this.y < y && this.y + this.height > y) {
                    // console.log('попал', x, y, this.x, this.y, this.width, this.height)
                    return true
            } else {
                // console.log('мимо', x, y, this.x, this.y, this.width, this.height)
                return false
            }
        } 

        if (this.width < 0 && this.height < 0) {
            if (this.x > x && this.x + this.width < x &&
                this.y > y && this.y + this.height < y) {
                    return true
            } else {
                return false
            }
        } 

        if (this.width > 0 && this.height < 0) {
            if (this.x < x && this.x + this.width > x &&
                this.y > y && this.y + this.height < y) {
                    return true
            } else {
                return false
            }
        } 

        if (this.width < 0 && this.height > 0) {
            if (this.x > x && this.x + this.width < x &&
                this.y < y && this.y + this.height > y) {
                    return true
            } else {
                return false
            }
        } 
           
    }
}



class Ellipse extends Drawable {

    #width = 0
    #height = 0

    set width(newWidth){
        if (newWidth < 0){
            this.#width = -newWidth
            this.x     += newWidth/2
        }
        else 
            this.#width = newWidth
    }

    set height(newHeight){
        if (newHeight < 0){
            this.#height = -newHeight
            this.y      +=  newHeight/2
        }
        else 
            this.#height = newHeight
    }

    get width(){
        return this.#width
    }

    get height(){
        return this.#height
    }

    get rx(){
        return this.#width/2
    }

    get ry(){
        return this.#height/2
    }

    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.ellipse(this.x + this.rx, this.y + this.ry, this.rx, this.ry, 0, 0, 2 * Math.PI);
        ctx.closePath();
        ctx.fillStyle = this.color;
        if (selected){
            ctx.lineWidth = 2
            ctx.strokeStyle = '#000000'
            ctx.stroke()
        }
        ctx.fill()
    }


    in(x,y){
        return (( (x - (this.x + this.rx))**2 / this.rx**2 ) + ( (y - (this.y + this.ry))**2 / this.ry**2 )) <= 1
    }
}


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

document.getElementById('delete').onclick = () =>{
    Drawable.instances = Drawable.instances.filter(item => !selection.includes(item))
    selection = []
    Drawable.drawAll()
}

undo.onclick = function(){
    Drawable.instances.pop()
    Drawable.drawAll()
}



//new Line(0,0,100,100, "red")
////new Circle(30,30,10, "red")

////canvas.onmousemove = function(e){
////}