JS_view

class Point {
    constructor(x, y) {
        this.coordinates = [x, y];
    }
}

class Rectangle {
    constructor(point1, point2) {
        this.point1 = point1;
        this.point2 = point2;
    }
}

class DecomposedField {
    constructor(field, cellWidth, cellHeight, useAllAlgorithm) {
        // Реализация DecomposedField
    }
}

class Field {
    constructor(height, width) {
        this.changeSize(height, width);
        this.clear();
    }

    changeSize(height, width) {
        this.height = height;
        this.width = width;
        this.decomposedField = null;
    }

    clear() {
        this.robot = null;
        this.places = [];
        this.barriers = [];
        this.decomposedField = null;
    }

    isDecomposed() {
        return this.decomposedField != null;
    }

    placeRobot(x, y) {
        let point = new Point(x, y);
        if (this.pointIsFree(point)) {
            this.robot = new Point(x, y);
            return true;
        }
        return false;
    }

    addBarrier(point1, point2) {
        let rectangle = new Rectangle(point1, point2);
        this.barriers.push(rectangle);
        this.decomposedField = null;
    }

    addPlace(x, y) {
        let newPlace = new Point(x, y);
        if (this.pointIsFree(newPlace)) {
            this.places.push(newPlace);
            return true;
        }
        return false;
    }

    isValidPoint(point) {
        return point.x >= 0 && point.x < this.width && point.y >= 0 && point.y < this.height;
    }

    pointIsFree(point) {
        if (!this.isValidPoint(point)) {
            return false;
        }

        for (let item of this.barriers) {
            if (this.isPointInsideRectangle(point, item) || this.isPointOnRectangle(point, item)) {
                return false;
            }
        }
        return true;
    }

    isPointInsideRectangle(point, rectangle) {
        const [x, y] = point.coordinates;
        const [x1, y1] = rectangle.point1.coordinates;
        const [x2, y2] = rectangle.point2.coordinates;

        return x >= Math.min(x1, x2) && x <= Math.max(x1, x2) && y >= Math.min(y1, y2) && y <= Math.max(y1, y2);
    }

    isPointOnRectangle(point, rectangle) {
        let pointOnLine1 = this.isPointOnLine(point, rectangle.point1, rectangle.point2);
        let pointOnLine2 = this.isPointOnLine(point, rectangle.point2, rectangle.point1);
        return pointOnLine1 || pointOnLine2;
    }

    isPointOnLine(point, linePoint1, linePoint2) {
        const [x, y] = point.coordinates;
        const [x1, y1] = linePoint1.coordinates;
        const [x2, y2] = linePoint2.coordinates;

        return (
            (x - x1) * (y2 - y1) === (x2 - x1) * (y - y1) &&
            x >= Math.min(x1, x2) &&
            x <= Math.max(x1, x2) &&
            y >= Math.min(y1, y2) &&
            y <= Math.max(y1, y2)
        );
    }

    decompose(cellWidth, cellHeight, useAllAlgorithm = false) {
        let decomposedField = new DecomposedField(this, cellWidth, cellHeight, useAllAlgorithm);

        if (decomposedField.composingErrorMessage) {
            return decomposedField.composingErrorMessage;
        }

        this.decomposedField = decomposedField;
        return null;
    }
}

class FieldView {
    constructor(canvasId, field) {
        let canvas = document.getElementById(canvasId);
        this.context = canvas.getContext('2d');
        this.field = field;
    }

    resizeCanvas() {
        this.context.canvas.width = this.field.width;
        this.context.canvas.height = this.field.height;
    }

    drawBarriers() {
        for (let item of this.field.barriers) {
            this.drawRectangle(item);
        }
    }

    drawRobot() {
        if (this.field.robot != null) {
            this.drawPoint(this.field.robot, this.getPointRadius(), "red", "red");
        }
    }

    drawPlaces() {
        for (let item of this.field.places) {
            this.drawPlace(item, 1);
        }
    }

    drawNewPlaces() {
        let decomposedField = this.field.decomposedField;

        if (!this.field.isDecomposed()) return;

        let cellWidth = this.field.decomposedField.cellWidth;
        let cellHeight = this.field.decomposedField.cellHeight;

        let radius = Math.max(Math.min(cellHeight, cellWidth) / 2, this.getPointRadius());

        this.context.fillStyle = "rgb(243,10,10, 1)";
        for (let place of decomposedField.places) {
            let newPoint = new Point(place.x * cellWidth + (cellWidth / 2), place.y * cellHeight + (cellHeight / 2));
            this.drawPoint(newPoint, radius, "", "yellow", 0);
        }

        if (decomposedField.robot != null) {
            const [x, y] = decomposedField.robot.coordinates;
            let newPoint = new Point(x * cellWidth + (cellWidth / 2), y * cellHeight + (cellHeight / 2));
            this.drawPoint(newPoint, radius, "", "red", 0);
        }
    }

    drawGridAndAreas(showGrid = true, showAreas = true) {
        if (!showAreas && !showGrid) return;

        let decomposedField = this.field.decomposedField;

        let cellWidth = decomposedField.cellWidth;
        let cellHeight = decomposedField.cellHeight;

        this.context.lineWidth = 2;
        this.context.strokeStyle = "rgba(0,21,255,0.3)";

        for (let rowId = 0; rowId < decomposedField.rows; rowId++) {
            for (let colId = 0; colId < decomposedField.cols; colId++) {
                this.context.beginPath();

                if (showAreas) {
                    if (decomposedField.field[rowId][colId]) {
                        this.context.fillStyle = "rgba(255,0,35,0.2)";
                    } else {
                        this.context.fillStyle = "rgba(0,255,60,0.2)";
                    }
                }

                this.context.rect(colId * cellWidth, rowId * cellHeight, cellWidth, cellHeight);
                if (showGrid) this.context.stroke();
                if (showAreas) this.context.fill();

                this.context.closePath();
            }
        }
    }

    drawGrid(cellHeight, cellWidth) {
        let numberOfCols = Math.floor(this.field.width / cellWidth);
        let numberOfRows = Math.floor(this.field.height / cellHeight);

        this.context.lineWidth = 2;
        this.context.strokeStyle = "rgba(0,21,255,0.3)";

        for (let rowId = 0; rowId < numberOfRows; rowId++) {
            for (let colId = 0; colId < numberOfCols; colId++) {
                this.context.beginPath();
                this.context.rect(colId * cellWidth, rowId * cellHeight, cellWidth, cellHeight);
                this.context.stroke();
                this.context.closePath();
            }
        }
    }

    drawPath(path) {
        let cellWidth = this.field.decomposedField.cellWidth;
        let cellHeight = this.field.decomposedField.cellHeight;

        this.context.beginPath();
        this.context.strokeStyle = "rgb(243,10,10, 0.5)";

        for (let i = 0; i < path.length - 1; i++) {
            this.context.moveTo(path[i].x * cellWidth + (cellWidth / 2), path[i].y * cellHeight + (cellHeight / 2));
            this.context.lineTo(path[i + 1].x * cellWidth + (cellWidth / 2), path[i + 1].y * cellHeight + (cellHeight / 2));
            this.context.stroke();
        }
        this.context.closePath();
    }

    drawPlace(place, isLastPlace = false) {
        let arcColor = "yellow";
        if (isLastPlace) {
            arcColor = "darkgoldenrod";
        }
        this.drawPoint(place, this.getPointRadius(), arcColor, "yellow");
    }

    drawPoint(point, radius, arcColor, fillColor, lineWidth = 10) {
        this.context.beginPath();
        this.context.lineWidth = lineWidth;
        if (radius > 0 && radius < 10) {
            this.context.lineWidth = 1;
        }
        this.context.arc(point.x, point.y, radius, 0, 6.28);
        if (lineWidth > 0) {
            this.context.strokeStyle = arcColor;
            this.context.stroke();
        }
        this.context.fillStyle = fillColor;
        this.context.fill();
        this.context.closePath();
    }

    drawRectangle(rectangle) {
        this.context.beginPath();
        const [x1, y1] = rectangle.point1.coordinates;
        const [x2, y2] = rectangle.point2.coordinates;
        this.context.rect(x1, y1, x2 - x1, y2 - y1);
        this.context.fillStyle = "black";
        this.context.fill();
        this.context.closePath();
    }

    drawLine(startPoint, endPoint, lineWidth, color) {
        this.context.beginPath();
        this.context.lineWidth = lineWidth;
        this.context.strokeStyle = color;
        this.context.moveTo(startPoint.x, startPoint.y);
        this.context.lineTo(endPoint.x, endPoint.y);
        this.context.stroke();
        this.context.closePath();
    }

    getPointRadius(k = 1) {
        return this.field.height * 0.005 * k;
    }
}