@evoke-ui/zsort3d/dist/objects/Z3DBall.js

TypeScript z-plane rendering engine with 3D depth simulation using Canvas 2D and mouse-based navigation

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Z3DBall = void 0;
const Z3DSortable_1 = require("../core/Z3DSortable");
class Z3DBall extends Z3DSortable_1.Z3DSortable {
    constructor(radius = 50) {
        super();
        this.radius = radius;
        this.ballWidth = radius * 2;
        this.ballHeight = radius * 2;
        this.width = this.ballWidth;
        this.height = this.ballHeight;
        this.color = this.generateRandomColor();
    }
    generateRandomColor() {
        const hex = Math.floor(Math.random() * 0xFFFFFF).toString(16).padStart(6, '0');
        return `#${hex}`;
    }
    render(ctx) {
        const scaledRadius = this.radius * this.scaleX;
        ctx.save();
        ctx.translate(this.x, this.y);
        const gradient = ctx.createRadialGradient(-scaledRadius * 0.3, -scaledRadius * 0.3, 0, 0, 0, scaledRadius);
        gradient.addColorStop(0, this.lightenColor(this.color, 0.4));
        gradient.addColorStop(0.7, this.color);
        gradient.addColorStop(1, this.darkenColor(this.color, 0.3));
        ctx.fillStyle = gradient;
        ctx.strokeStyle = '#33CCFF';
        ctx.lineWidth = 1 * this.scaleX;
        ctx.beginPath();
        ctx.arc(0, 0, scaledRadius, 0, Math.PI * 2);
        ctx.fill();
        if (this.scaleX > 0.15) {
            ctx.stroke();
        }
        ctx.restore();
    }
    lightenColor(color, amount) {
        const num = parseInt(color.slice(1), 16);
        const r = Math.min(255, Math.floor((num >> 16) + 255 * amount));
        const g = Math.min(255, Math.floor(((num >> 8) & 0x00FF) + 255 * amount));
        const b = Math.min(255, Math.floor((num & 0x0000FF) + 255 * amount));
        return `rgb(${r}, ${g}, ${b})`;
    }
    darkenColor(color, amount) {
        const num = parseInt(color.slice(1), 16);
        const r = Math.max(0, Math.floor((num >> 16) * (1 - amount)));
        const g = Math.max(0, Math.floor(((num >> 8) & 0x00FF) * (1 - amount)));
        const b = Math.max(0, Math.floor((num & 0x0000FF) * (1 - amount)));
        return `rgb(${r}, ${g}, ${b})`;
    }
    addEventListener(canvas, handler) {
        this.clickHandler = (e) => {
            const rect = canvas.getBoundingClientRect();
            const mouseX = e.clientX - rect.left;
            const mouseY = e.clientY - rect.top;
            const distance = Math.sqrt(Math.pow(mouseX - this.x, 2) + Math.pow(mouseY - this.y, 2));
            if (distance <= this.radius * this.scaleX) {
                handler(e);
            }
        };
        canvas.addEventListener('click', this.clickHandler);
    }
    removeEventListener(canvas) {
        if (this.clickHandler) {
            canvas.removeEventListener('click', this.clickHandler);
            this.clickHandler = undefined;
        }
    }
    get ballColor() {
        return this.color;
    }
    set ballColor(color) {
        this.color = color;
    }
    get ballRadius() {
        return this.radius;
    }
    destroy() {
        super.destroy();
        this.clickHandler = undefined;
    }
}
exports.Z3DBall = Z3DBall;
//# sourceMappingURL=Z3DBall.js.map