Arseniy_Yurchenko
/
Home_work_12


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #canvas-container {
            width: 500px;
            border: 2px solid black;
            background-color: white;
        }

        body {
            background-color: bisque;
        }
    </style>
</head>

<body>
    <div id="canvas-container">
        <canvas id="canvas" width="500" height="400"></canvas>
    </div>
    <div>
        <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="rectangle">Rectangle</option>
            <option value="line">Line</option>
            <option value="ellipse">Ellipse (huinya)</option>
            <option value="select">Select</option>

        </select>
        <input type="number" id="size" value="6">
        <button id="delete">Delete...</button>
    </div>
    <script>

        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.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
                }
            },

            rectangle: {
                mousedown(e) {
                    current = new Rectangle(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
                }
            },

            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
                }
            },

            ellipse: {
                mousedown(e) {
                    current = new Ellipse(e.clientX, e.clientY, 1, 1, color.value)
                },
                mousemove(e) {
                    if (!current) return;

                    current.radiusY = current.distanceTo(e.clientX, e.clientY)
                    current.radiusX = current.distanceTo(e.clientY, e.clientX)
                    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.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) {
                //debugger;  
                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 Rectangle 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() {
                ctx.beginPath();
                ctx.rect(this.x, this.y, this.width, this.height)
                ctx.fill();
            }
        }

        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() {
                ctx.beginPath();
                //ctx.rect(this.x,this.y, this.width, this.height)
                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();
            }
        }

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


        class Ellipse extends Drawable {
            constructor(x, y, radiusX, radiusY, color) {
                super()
                this.x = x;
                this.y = y;
                this.radiusX = radiusX;
                this.radiusY = radiusY;
                this.color = color;

                this.draw();
            }

            // draw() {
            //     ctx.beginPath();
            //     ctx.ellipse(this.x, this.y, this.radius, 75, Math.PI / 4, 0, 2 * Math.PI);
            //     ctx.stroke();
            // }

            draw(selected) {
                //debugger;
                ctx.beginPath();
                ctx.ellipse(this.x, this.y, this.radiusX, this.radiusY, Math.PI / 4, 0, 2 * Math.PI);
                //ctx.strokeStyle = this.color;
                ctx.closePath();
                if (selected) {
                    ctx.lineWidth = 2
                    ctx.stroke();
                }
                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
            }


        }


        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.instances = []
            Drawable.drawAll()
        }

    </script>
</body>

</html>