@infinite-canvas-tutorial/webcomponents/lib/systems/DownloadScreenshot.js

WebComponents UI implementation

"use strict";
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;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DownloadScreenshotSystem = void 0;
const ecs_1 = require("@infinite-canvas-tutorial/ecs");
const event_1 = require("../event");
const components_1 = require("../components");
const downloadedFilename = 'infinite-canvas-screenshot';
class DownloadScreenshotSystem extends ecs_1.System {
    constructor() {
        super();
        this.canvases = this.query((q) => q.current.and.added.with(ecs_1.Canvas));
        this.query((q) => q.using(components_1.Container, ecs_1.Screenshot).read);
    }
    execute() {
        this.canvases.added.forEach((canvas) => {
            const container = canvas.read(components_1.Container);
            container.element.addEventListener(event_1.Event.SCREENSHOT_REQUESTED, (e) => {
                if (e.detail instanceof ecs_1.RasterScreenshotRequest) {
                    if (!canvas.has(ecs_1.RasterScreenshotRequest)) {
                        canvas.add(ecs_1.RasterScreenshotRequest);
                    }
                    const rasterScreenshotRequest = canvas.write(ecs_1.RasterScreenshotRequest);
                    Object.assign(rasterScreenshotRequest, e.detail);
                    this.setScreenshotTrigger(rasterScreenshotRequest);
                }
                else if (e.detail instanceof ecs_1.VectorScreenshotRequest) {
                    if (!canvas.has(ecs_1.VectorScreenshotRequest)) {
                        canvas.add(ecs_1.VectorScreenshotRequest);
                    }
                    const vectorScreenshotRequest = canvas.write(ecs_1.VectorScreenshotRequest);
                    Object.assign(vectorScreenshotRequest, e.detail);
                    this.setScreenshotTrigger(vectorScreenshotRequest);
                }
            });
        });
        this.canvases.current.forEach((canvas) => {
            if (!canvas.has(ecs_1.Screenshot)) {
                return;
            }
            const { dataURL } = canvas.read(ecs_1.Screenshot);
            const container = canvas.read(components_1.Container);
            if (dataURL) {
                this.downloadImage(downloadedFilename, dataURL);
                container.element.dispatchEvent(new CustomEvent(event_1.Event.SCREENSHOT_DOWNLOADED, {
                    detail: {
                        dataURL,
                    },
                }));
            }
        });
    }
    *setScreenshotTrigger(screenshotRequest) {
        Object.assign(screenshotRequest, { enabled: true });
        yield;
        Object.assign(screenshotRequest, { enabled: false });
    }
    downloadImage(defaultFilename, dataURL) {
        const mimeType = dataURL.substring(dataURL.indexOf(':') + 1, dataURL.indexOf(';'));
        const suffix = mimeType.split('/')[1];
        // g-svg only support .svg
        const isSVG = dataURL.startsWith('data:image/svg');
        const fileName = `${defaultFilename}.${isSVG ? 'svg' : suffix}`;
        const link = ecs_1.DOMAdapter.get()
            .getDocument()
            .createElement('a');
        if (isSVG) {
            link.addEventListener('click', () => {
                link.download = fileName;
                link.href = dataURL;
            });
        }
        else if (window.Blob && window.URL) {
            const arr = dataURL.split(',');
            let mime = '';
            if (arr && arr.length > 0) {
                const match = arr[0].match(/:(.*?);/);
                // eslint-disable-next-line prefer-destructuring
                if (match && match.length >= 2)
                    mime = match[1];
            }
            const bstr = atob(arr[1]);
            let n = bstr.length;
            const u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            const blobObj = new Blob([u8arr], { type: mime });
            // account for IE
            // @see https://stackoverflow.com/a/41434373
            if (navigator.msSaveBlob) {
                navigator.msSaveBlob(blobObj, fileName);
            }
            else {
                link.addEventListener('click', () => {
                    link.download = fileName;
                    link.href = window.URL.createObjectURL(blobObj);
                });
            }
        }
        // trigger click
        if (link.click) {
            link.click();
        }
        else {
            const e = ecs_1.DOMAdapter.get().getDocument().createEvent('MouseEvents');
            e.initEvent('click', false, false);
            link.dispatchEvent(e);
        }
    }
}
exports.DownloadScreenshotSystem = DownloadScreenshotSystem;
__decorate([
    ecs_1.co
], DownloadScreenshotSystem.prototype, "setScreenshotTrigger", null);
//# sourceMappingURL=DownloadScreenshot.js.map