@avolutions/canvas-painter/dist/esm/shapes/Circle.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 { InvalidConstructorArgumentsError } from "../errors/InvalidConstructorArgumentsError.js";
import { CircleDefinition } from "../definitions/CircleDefinition.js";
import { CircleOptions } from "../options/CircleOptions.js";
import { CircleStyle } from "../styles/CircleStyle.js";
import { Point } from "../types/Point.js";
import { Shape } from "./Shape.js";
/**
 * Class representing a circle, extending the Shape class with a CircleDefinition.
 * Provides functionality for rendering, resizing and moving the circle.
 */
export class Circle extends Shape {
    /**
     * Creates an instance of the `Circle` class.
     *
     * The `Circle` can be created either by passing a `Point` object representing the center,
     * or by providing the individual coordinates for the center.
     *
     * @throws {@link InvalidConstructorArgumentsError} if invalid arguments are passed.
     */
    constructor(arg1, arg2, arg3, arg4, arg5) {
        let definition;
        let style;
        let options;
        if (typeof arg1 === 'number' && typeof arg3 === 'number') {
            // Constructor with coordinates
            const center = new Point(arg1, arg2);
            definition = new CircleDefinition(center, arg3);
            style = arg4;
            options = arg5;
        }
        else if (arg1 instanceof Point && typeof arg3 !== 'number' && arg5 === undefined) {
            // Constructor with Point object
            definition = new CircleDefinition(arg1, arg2);
            style = arg3;
            options = arg4;
        }
        else {
            throw new InvalidConstructorArgumentsError();
        }
        super(definition, new CircleStyle(style), new CircleOptions(options));
    }
    // Getters
    /**
     * Gets the center point of the circle.
     *
     * @returns The center point of the circle.
     */
    get center() {
        return this._definition.center;
    }
    /**
     * Gets the radius of the circle.
     *
     * @returns The radius of the circle.
     */
    get radius() {
        return this._definition.radius;
    }
    // Setters
    /**
     * Sets the center point of the circle.
     *
     * @param center - The new center point of the circle.
     */
    set center(center) {
        this._definition.center = center;
    }
    /**
     * Sets the radius of the circle.
     *
     * @param radius - The new radius of the circle.
     */
    set radius(radius) {
        this._definition.radius = radius;
    }
    /**
     * Moves the circle by adjusting the current center by delta values.
     *
     * @param deltaX - The change in the x-coordinate.
     * @param deltaY - The change in the y-coordinate.
     */
    move(deltaX = 0, deltaY = 0) {
        this.center.move(deltaX, deltaY);
    }
    /**
     * Resizes the circle by adjusting the current radius by delta values.
     *
     * @param delta - The change of the radius.
     */
    resize(delta) {
        this.radius += delta;
    }
    /**
     * Renders the circle on the canvas using the provided 2D rendering context.
     *
     * The circle will be rendered with its current position and radius size.
     *
     * @param context - The 2D rendering context of the canvas where the circle will be drawn.
     */
    render(context) {
        context.save(); // Save the current canvas state
        // Set circle specific styles
        context.fillStyle = this.stateStyle.color;
        context.beginPath();
        context.arc(this.center.x, this.center.y, this.radius, 0, Math.PI * 2);
        context.fill();
        // Draw border for circle
        if (this.hasBorder()) {
            context.strokeStyle = this.stateStyle.borderColor;
            context.lineWidth = this.stateStyle.borderWidth;
            context.stroke();
        }
        context.restore(); // Restore the canvas state to before the transformations
    }
    /**
     * Determines if the mouse is currently over the shape.
     *
     * @param mousePosition - The current mouse position.
     * @returns True if the mouse is over the shape, false otherwise.
     */
    isMouseOver(mousePosition) {
        const dx = mousePosition.x - this.center.x;
        const dy = mousePosition.y - this.center.y;
        const distance = Math.sqrt(dx * dx + dy * dy);
        // Adjust radius to include the border width
        const borderRadius = this.hasBorder() ? this.stateStyle.borderWidth / 2 : 0;
        const effectiveRadius = this.radius + borderRadius;
        // Check if the distance is within the circle's radius
        return distance <= effectiveRadius;
    }
    /**
     * Handles the drag operation by applying the given delta to the current position.
     *
     * @param delta - The change in position represented as a `Point`.
     */
    onDrag(delta) {
        this.move(delta.x, delta.y);
    }
}