js_homeworks/Canvas/main.js

/* var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

canvas.onclick= (e) => {
    ctx.beginPath();
    
    ctx.arc(e.layerX,e.layerY, 50, 0, 2 * Math.PI);
    ctx.closePath()
    ctx.stroke();
} 
 */

// let str = "      Appple             pizza           Phone         Iphone    Xiaomi              ";
// let re = "/\s* \s*/";
// let input = document.createElement('input');
// input.type = 'text';
// document.body.append(input);
// input.oninput = () => {
//     let newStr = input.value.trim().split(re).join("|");
// console.log(`/${newStr}/`);
// } 
    

/* let stred = str.split(re1).join("|"); */
/* console.log(stred); */
/* console.log(newStr);
let strArr = [];
for(let i=0; i<newStr.length; i++){
    if(newStr[i] == ''){
        console.log("empty str");
    }else{
        strArr.push(newStr[i])
    }
}
let combinedArr = strArr.join("|");
console.log(combinedArr); */

/* Прямоугольник:
    - еще один класс, как линия, только без толщины
    - поменять draw
    - проверить можно из консоли (new Rectangle(10,10,100,100, 'red')
    - ctx.fillRect
    - добавить инструмент в select
    - скопипастить то, что в tools про line, и поменять слово Line на Rectangle в коде (возле 
        new)
    - напишите метод in
    - сделайте что бы draw работал по разному, в зависимости от флага selected (выделенный вид/
        невыделенный вид)
        rect
Эллипс
    - еще один класс, как линия, только без толщины
    - поменять draw
    - проверить можно из консоли (new Ellipse(10,10,100,100, 'red')
    - ctx.ellipse
    - добавить инструмент
    - скопипастить то, что в tools про line, и поменять слово Line на Ellipse в коде (возле 
        new)
        x,y                                 x + w
        +-----------------------------------+
        |    -------------------------      |
        |  /                                |                  
        | |                                 |                  
        ||               *                  |                  
        |                h,k                |                  
        |                                   |                  
        |                                   |                  
        +-----------------------------------+
        y + h
    - in:
        https://math.stackexchange.com/questions/76457/check-if-a-point-is-within-an-ellipse:
        h - центр эллипса x + радиус 
        k - центр эллипса по y + радиус по y
        rx - ширина пополам
        ry - высота пополам


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

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


    lin
 */


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 & 0b001) && 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: { //ctrl-c ctrl-v в rectangle. Так же добавьте его в <select id='tool'>
        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
        }
    },
    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 = []
            }

            console.log('selection', selection)

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

        },

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



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 {
    //__proto__: Drawable.prototype
    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;
        ctx.fill();
        if (selected){
            ctx.lineWidth = 2
            ctx.stroke();
        }
    }

    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 { //смочь скопировать в Rectangle и поменять отприсовку
    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
        ctx.stroke();
    }

    in(x,y){
        //Гарри Поттер и орден Арктангенса
    }
} 

class Rectangle extends Drawable { //смочь скопировать в Rectangle и поменять отрисовку
    //поменять метод draw шоб рисовал прямоугольник
    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.fillStyle = this.color
        ctx.beginPath();
        ctx.rect(this.x,this.y,this.width,this.height);
        ctx.closePath();
        ctx.fill();
        if(selected){
            ctx.lineWidth = 5;
            ctx.stroke();
        }
    }
    in(x,y){
        return   x > this.x && x < this.x+this.width && y> this.y && y < this.y +this.height //условие попадания x,y в прямоугольник 
    }
}
//Ellipse по аналогии
//
class Ellipse extends Drawable { //смочь скопировать в Ellipse и поменять отрисовку
    //поменять метод draw шоб рисовал ellipse
    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.h,this.k,this.rx,this.ry,0,0,2*Math.PI);
        ctx.stroke();
        ctx.closePath();
        ctx.fillStyle = this.color;
        ctx.fill();
        if(selected){
            ctx.lineWidth = 5;
            ctx.stroke();
        }
    }
    get rx(){
        return this.width/2
    }

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

    get h(){
        return this.x + this.rx
    }
    get k () {
        return this.y + this.ry
    }
    in(x,y){
        console.log(((x -this.h)**2 /(this.rx)**2) + ((y - this.k)**2/(this.ry)**2))
        return  (((x -this.h)**2 /(this.rx)**2) + ((y - this.k)**2/(this.ry)**2)) <= 1
        
        //условие попадания x,y в ellipse 
    }
}

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