ui-lit/circlepercent/index.js

UI Elements on LIT

import { __decorate } from "tslib";
import { LitElement, html, noChange } from 'lit';
import { property, customElement } from 'lit/decorators.js';
import { Directive, PartType, directive } from 'lit/directive.js';
import { circleStyles } from './styles';
class CanvasDirective extends Directive {
    constructor(partInfo) {
        super(partInfo);
        this._inited = false;
        this._ctx = null;
        if (partInfo.type !== PartType.ELEMENT) {
            throw new Error('Must be element');
        }
    }
    render(f, size, ratio) {
        return noChange;
    }
    update(part, args) {
        if (!this._ctx) {
            this._ctx = part.element.getContext('2d');
            this._ctx.canvas.height = args[1] * args[2];
            this._ctx.canvas.width = args[1] * args[2];
        }
        args[0](this._ctx);
    }
}
const canvasDirective = directive(CanvasDirective);
let LitCircle = class LitCircle extends LitElement {
    constructor() {
        super(...arguments);
        this._percent = 0;
        this._color = "";
        this.size = 14;
        this.ratio = 2;
        this.color = '';
        this._size = 0;
        this._defaultSize = 14;
        this.renderCircle = (ctx) => {
            if (!ctx)
                return;
            ctx.strokeStyle = this._color;
            ctx.fillStyle = this._color;
            ctx.clearRect(0, 0, this.radius * 2, this.radius * 2);
            ctx.lineWidth = 0;
            if (this.percent) {
                ctx.beginPath();
                ctx.moveTo(this.radius, this.radius);
                ctx.lineTo(this.radius, 0);
                ctx.arc(this.radius, this.radius, this.radius - this.ratio, -Math.PI / 2, (this.percent / 100) * 2 * Math.PI - Math.PI / 2);
                ctx.fill();
            }
            ctx.beginPath();
            ctx.arc(this.radius, this.radius, this.radius - this.lineWidth - 1, 0, 2 * Math.PI);
            ctx.stroke();
        };
    }
    static get properties() {
        return {
            percent: { type: Number }
        };
    }
    get percent() {
        return this._percent;
    }
    set percent(value) {
        if (value > 100)
            value = 100;
        this._percent = value;
        this.requestUpdate();
    }
    willUpdate(_changedProperties) {
        if (!this._color || this._color === "rgb(0, 0, 0)") {
            const styles = window.getComputedStyle(this);
            this._color = this.color || styles.getPropertyValue("color");
        }
        if (_changedProperties.has('size')) {
            this._size = this.size
                ? this.size
                : parseInt(window.getComputedStyle(this).getPropertyValue(`--lit-percent-size`)) || this._defaultSize;
            this.style.setProperty('--size', this._size + "px");
        }
    }
    get lineWidth() {
        return 1 * this.ratio;
    }
    get radius() {
        return this._size * this.ratio / 2;
    }
    render() {
        return html `<canvas ${canvasDirective(this.renderCircle, this._size, this.ratio)}></canvas>`;
    }
};
LitCircle.styles = circleStyles;
__decorate([
    property({ type: Number, attribute: true })
], LitCircle.prototype, "size", void 0);
__decorate([
    property({ type: Number, attribute: true })
], LitCircle.prototype, "ratio", void 0);
__decorate([
    property({ type: String })
], LitCircle.prototype, "color", void 0);
LitCircle = __decorate([
    customElement('lit-circle')
], LitCircle);
export { LitCircle };