@thoschu/canvas-web-component/dist/components/canvas-component.js

Web Components made by Tom S. with Stencil.js

import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { g as getElements, a as appendTemp, b as getCanvas, c as clipboard } from './utils.js';

const canvasComponentCss = ":host{display:inline-block}:host .container{background:transparent}";
const CanvasComponentStyle0 = canvasComponentCss;

const CanvasComponent$1 = /*@__PURE__*/ proxyCustomElement(class CanvasComponent extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.copy = false;
        this.type = null;
        this.config = {
            useCORS: true,
        };
        this.stage = undefined;
        this.tempHTMLElement = document.createElement("object");
        this.imgElement = document.createElement("img");
    }
    /**
     * Public API to get content during runtime
     */
    async get(type = null) {
        switch (type) {
            case "canvas":
                return this.canvas;
            case "image":
                return this.imgElement;
            default:
                return CanvasComponent.dataUrl;
        }
    }
    async componentDidLoad() {
        const { elements } = getElements(this.hostHTMLElement);
        const element = appendTemp(elements, this.tempHTMLElement);
        this.set(await getCanvas(element, this.config).then((canvas) => {
            this.tempHTMLElement.remove();
            return canvas;
        }));
    }
    set(canvas) {
        CanvasComponent.dataUrl = canvas.toDataURL("image/png");
        this.imgElement.setAttribute("src", CanvasComponent.dataUrl);
        this.imgElement.setAttribute("data-created", Date.now().toString());
        this.imgElement.setAttribute("width", canvas.width.toString());
        this.imgElement.setAttribute("height", canvas.height.toString());
        this.imgElement.style.aspectRatio = "1";
        this.canvas = canvas;
        switch (this.type) {
            case "image": {
                this.stage = this.imgElement;
                break;
            }
            case "canvas": {
                this.stage = this.canvas;
                break;
            }
            default: {
                const { elements } = getElements(this.hostHTMLElement);
                this.stage = appendTemp(elements, this.tempHTMLElement);
                break;
            }
        }
        this.hostHTMLElement.shadowRoot.appendChild(this.stage);
    }
    async hostClick(evt) {
        const clipped = await clipboard(CanvasComponent.dataUrl);
        evt.stopPropagation();
        console.info(`Copy base64 encoded image (png) to clipboard: ${clipped}`);
    }
    render() {
        return (h(Host, { key: '4f31ef274d5db4cba34d5cbfdf1d3f124be5142c', onClick: this.copy && this.hostClick }, h("template", { key: '751e5a1a6ebd4ec4baac0ecac0dff31a89feb368' }, h("slot", { key: '7686b94ba5fc113537b3d992e0f18dcb32018c7b' }))));
    }
    get hostHTMLElement() { return this; }
    static get style() { return CanvasComponentStyle0; }
}, [1, "canvas-component", {
        "copy": [4],
        "type": [1],
        "config": [16],
        "stage": [32],
        "get": [64]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["canvas-component"];
    components.forEach(tagName => { switch (tagName) {
        case "canvas-component":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, CanvasComponent$1);
            }
            break;
    } });
}
defineCustomElement$1();

const CanvasComponent = CanvasComponent$1;
const defineCustomElement = defineCustomElement$1;

export { CanvasComponent, defineCustomElement };

//# sourceMappingURL=canvas-component.js.map