@thoschu/canvas-web-component/dist/esm/canvas-component.entry.js

Web Components made by Tom S. with Stencil.js

import { r as registerInstance, h, H as Host, g as getElement } from './index-349b9bce.js';
import { g as getElements, a as appendTemp, b as getCanvas, c as clipboard } from './utils-07adae92.js';

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

const CanvasComponent = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        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 getElement(this); }
};
CanvasComponent.style = CanvasComponentStyle0;

export { CanvasComponent as canvas_component };

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