@avolutions/canvas-painter/dist/esm/shapes/Square.js

CanvasPainter.js is a simple yet powerful JavaScript library for drawing basic shapes (rectangles, circles, etc.) on HTML5 Canvas with ease. Perfect for creating 2D graphics in your web projects.

import { Rectangle } from "./Rectangle.js";
/**
 * Class representing a Square, extending the Rectangle class.
 * Provides functionality for rendering, resizing, moving, and rotating the square.
 */
export class Square extends Rectangle {
    /**
     * Constructs a new Square instance.
     *
     * @param x - The x-coordinate of the square's position.
     * @param y - The y-coordinate of the square's position.
     * @param size - The size (width/height) of the square.
     * @param rotation - The initial rotation of the square in degrees clockwise.
     * @param style - The style options for the square.
     * @param options - The configuration options for the square.
     */
    constructor(x, y, size, rotation = 0, style, options) {
        super(x, y, size, size, rotation, style, options);
    }
    // Getters
    /**
     * Gets the size (widht/height) of the square.
     * @returns The size of the square.
     */
    get size() {
        return this._definition.width; // or height, both are the same
    }
    /**
     * Gets the height of the square.
     * @returns The height of the square.
     */
    get height() {
        return this._definition.height;
    }
    /**
     * Gets the width of the square.
     * @returns The width of the square.
     */
    get width() {
        return this._definition.width;
    }
    // Setters
    /**
     * Sets the size (width/height) of the square.
     * @param size - The new size of the square.
     */
    set size(size) {
        this._definition.width = size;
        this._definition.height = size;
    }
    /**
     * Sets the height of the square and updates the width with same value.
     * @param height - The new height of the square.
     */
    set height(height) {
        this._definition.height = height;
        this._definition.width = height; // Ensure the width matches the height
    }
    /**
     * Sets the width of the square and updates the height with same value.
     * @param width - The new width of the square.
     */
    set width(width) {
        this._definition.width = width;
        this._definition.height = width; // Ensure the height matches the width
    }
    /**
     * Updates the size of the square by setting new width and height values.
     *
     * @param size - The new width and height of the square.
     */
    setSize(size) {
        this._definition.width = size;
        this._definition.height = size;
    }
    /**
     * Resizes the rectangle by adjusting the current size, width and height by delta value.
     *
     * @param deltaSize - The change in width.
     */
    resize(deltaSize) {
        this.size += deltaSize;
    }
}