@dodona/papyros/dist/frontend/components/FileViewer.js

Scratchpad for multiple programming languages in the browser.

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 { customElement, property } from "lit/decorators.js";
import { PapyrosElement } from "./PapyrosElement";
import { css, html } from "lit";
import { createRef, ref } from "lit/directives/ref.js";
import { debounce } from "../../util/Util";
import "./code_mirror/FileEditor";
let FileViewer = class FileViewer extends PapyrosElement {
    constructor() {
        super(...arguments);
        this.file = undefined;
        this.editorRef = createRef();
        this.debouncedUpdateFile = debounce((name, content) => {
            void this.papyros.runner.updateFile(name, content, false);
        }, 300);
    }
    static get styles() {
        return css `
            :host {
                display: block;
                width: 100%;
                height: 100%;
                overflow: auto;
            }

            p-file-editor {
                display: block;
                width: 100%;
                height: 100%;
            }

            .placeholder-container {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 1rem;
                padding: 2rem;
                color: var(--md-sys-color-on-surface-variant);
            }

            button {
                background-color: var(--md-sys-color-primary);
                color: var(--md-sys-color-on-primary);
                border: none;
                border-radius: 1rem;
                padding: 0.5rem 1.5rem;
                cursor: pointer;
                font-size: 0.875rem;
            }

            button:hover {
                opacity: 0.9;
            }
        `;
    }
    downloadBinary() {
        if (!this.file)
            return;
        const bytes = Uint8Array.from(atob(this.file.content), (c) => c.charCodeAt(0));
        const blob = new Blob([bytes]);
        const url = URL.createObjectURL(blob);
        const a = document.createElement("a");
        a.href = url;
        a.download = this.file.name;
        a.click();
        setTimeout(() => URL.revokeObjectURL(url), 1000);
    }
    updated(changedProperties) {
        var _a;
        if (changedProperties.has("file") && this.file && !this.file.binary) {
            (_a = this.editorRef.value) === null || _a === void 0 ? void 0 : _a.focus();
        }
    }
    onEditorChange(e) {
        if (!this.file || this.papyros.debugger.active)
            return;
        const name = this.file.name;
        const content = e.detail;
        this.papyros.io.updateFileContent(name, content, this.file.binary);
        this.debouncedUpdateFile(name, content);
    }
    render() {
        if (!this.file) {
            return html ``;
        }
        if (this.file.binary) {
            return html `
                <div class="placeholder-container">
                    <span>${this.t("Papyros.files_binary")}</span>
                    <button @click=${this.downloadBinary}>${this.t("Papyros.files_download")}</button>
                </div>
            `;
        }
        const readonly = this.papyros.debugger.active;
        return html `
            <p-file-editor
                ${ref(this.editorRef)}
                .value=${this.file.content}
                .readonly=${readonly}
                .theme=${this.papyros.constants.CodeMirrorTheme}
                @change=${this.onEditorChange}
            ></p-file-editor>
        `;
    }
};
__decorate([
    property({ type: Object })
], FileViewer.prototype, "file", void 0);
FileViewer = __decorate([
    customElement("p-file-viewer")
], FileViewer);
export { FileViewer };
//# sourceMappingURL=FileViewer.js.map