src/client/tools/RectangleTool.js - master - Gabryelf/Pixel-Orb

src/client/tools/RectangleTool.js
87 строк3 KB
Valeev Serj
restruct_v0.0.1
07 авг 2026, 22:50
07 авг 2026, 22:5041f78a4
import Tool from './Tool.js';

class RectangleTool extends Tool {
    constructor(canvas, context) {
        super(canvas, context);
        this.name = 'rectangle';
        this.icon = '▭';
        this.description = 'Draw rectangles';
        this.startX = 0;
        this.startY = 0;
        this.tempCanvas = null;
        this.tempContext = null;
    }

    onMouseDown(x, y) {
        this.isDrawing = true;
        this.startX = x;
        this.startY = y;
        this.lastX = x;
        this.lastY = y;

        this.tempCanvas = document.createElement('canvas');
        this.tempCanvas.width = this.canvas.width;
        this.tempCanvas.height = this.canvas.height;
        this.tempContext = this.tempCanvas.getContext('2d');
    }

    onMouseMove(x, y) {
        if (this.isDrawing) {
            this.tempContext.clearRect(0, 0, this.tempCanvas.width, this.tempCanvas.height);
            this.tempContext.drawImage(this.canvas, 0, 0);

            this.drawRectOnContext(this.tempContext, this.startX, this.startY, x, y);

            this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
            this.context.drawImage(this.tempCanvas, 0, 0);
        }
    }

    onMouseUp(x, y) {
        if (this.isDrawing) {
            this.drawRect(this.startX, this.startY, x, y);
            this.isDrawing = false;
            this.tempCanvas = null;
            this.tempContext = null;
        }
    }

    drawRect(x1, y1, x2, y2) {
        const pixelSize = this.getPixelSize();
        const ctx = this.context;
        const color = this.color;

        ctx.fillStyle = `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a / 255})`;

        const minX = Math.min(x1, x2);
        const maxX = Math.max(x1, x2);
        const minY = Math.min(y1, y2);
        const maxY = Math.max(y1, y2);

        for (let y = minY; y <= maxY; y++) {
            for (let x = minX; x <= maxX; x++) {
                ctx.fillRect(x * pixelSize, y * pixelSize, pixelSize, pixelSize);
            }
        }
    }

    drawRectOnContext(ctx, x1, y1, x2, y2) {
        const pixelSize = this.getPixelSize();
        const color = this.color;

        ctx.fillStyle = `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a / 255})`;

        const minX = Math.min(x1, x2);
        const maxX = Math.max(x1, x2);
        const minY = Math.min(y1, y2);
        const maxY = Math.max(y1, y2);

        for (let y = minY; y <= maxY; y++) {
            for (let x = minX; x <= maxX; x++) {
                ctx.fillRect(x * pixelSize, y * pixelSize, pixelSize, pixelSize);
            }
        }
    }
}

export default RectangleTool;