@alegendstale/holly-components/dist/components/canvas/canvas-gradient.js

Reusable UI components created using lit

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { Direction } from '../color-palette/color-palette-utils.js';
import { property } from 'lit/decorators.js';
import { CanvasBase } from './canvas-base.js';
import { isColorValid } from '../../utils/basicUtils.js';
import { condCustomElement } from '../../decorators/condCustomElement.js';
let CanvasGradient = class CanvasGradient extends CanvasBase {
    constructor() {
        super(...arguments);
        this.colors = [];
        this.height = 0;
        this.width = 0;
        this.direction = Direction.Column;
    }
    updated(_changedProperties) {
        super.updated(_changedProperties);
        this.createGradient(this.colors, this.height, this.width, this.direction);
    }
    /**
     * Creates a new gradient canvas
     */
    createGradient(colors, height, width, direction) {
        if (!this.context)
            return;
        this.canvas.height = height;
        this.canvas.width = width;
        let gradient = direction === Direction.Column ? this.context.createLinearGradient(0, 0, width, 0) : this.context.createLinearGradient(0, 0, 0, height);
        let colorStops = [];
        for (const [i, color] of colors.entries()) {
            // Skip non-colors, even with override enabled. This prevents errors, especially dealing with css-variables which cannot be parsed at run-time.
            if (isColorValid(color)) {
                gradient.addColorStop(i / (colors.length - 1), color);
                colorStops.push(color);
            }
        }
        if (colorStops.length <= 1)
            throw new Error('There are not enough valid color stops to create the gradient.');
        this.context.fillStyle = gradient || '#000';
        this.context.fillRect(0, 0, width, height);
        this.canvas.classList.add('gradient');
        this.canvas.style.setProperty('--palette-column-flex-basis', (height / colors.length / 2).toString() + 'px');
    }
};
CanvasGradient.styles = [
    ...CanvasBase.styles
];
__decorate([
    property({ type: Array })
], CanvasGradient.prototype, "colors", void 0);
__decorate([
    property({ type: Number })
], CanvasGradient.prototype, "height", void 0);
__decorate([
    property({ type: Number })
], CanvasGradient.prototype, "width", void 0);
__decorate([
    property({ type: String })
], CanvasGradient.prototype, "direction", void 0);
CanvasGradient = __decorate([
    condCustomElement('canvas-gradient')
], CanvasGradient);
export { CanvasGradient };