@compas-oscd/open-scd 0.34.16 → 0.34.18

package/dist/addons/Layout.js

@@ -1,37 +1,37 @@
-import { __decorate } from "tslib";
-import { customElement, html, LitElement, property, state, query, css, } from 'lit-element';
-import { get } from 'lit-translate';
-import { newPendingStateEvent } from '@compas-oscd/core/foundation/deprecated/waiter.js';
-import { newSettingsUIEvent } from '@compas-oscd/core/foundation/deprecated/settings.js';
-import { pluginIcons, } from '../open-scd.js';
-import { HistoryUIKind, newEmptyIssuesEvent, newHistoryUIEvent } from './History.js';
-import { List } from '@material/mwc-list';
-import '@material/mwc-drawer';
-import '@material/mwc-list';
-import '@material/mwc-dialog';
-import '@material/mwc-switch';
-import '@material/mwc-select';
-import '@material/mwc-textfield';
-import { pluginTag } from '../plugin-tag.js';
-import "./plugin-manager/plugin-manager.js";
-import "./plugin-manager/custom-plugin-dialog.js";
-import "./menu-tabs/menu-tabs.js";
-let OscdLayout = class OscdLayout extends LitElement {
-    constructor() {
-        super(...arguments);
-        /** The `XMLDocument` to be edited */
-        this.doc = null;
-        /** The name of the current [[`doc`]] */
-        this.docName = '';
-        /** Index of the last [[`EditorAction`]] applied. */
-        this.editCount = -1;
-        /** The plugins to render the layout. */
-        this.plugins = [];
-        this.validated = Promise.resolve();
-        this.shouldValidate = false;
-        this.activeEditor = this.calcActiveEditors()[0];
-    }
-    render() {
+import { __decorate } from "tslib";
+import { customElement, html, LitElement, property, state, query, css, } from 'lit-element';
+import { get } from 'lit-translate';
+import { newPendingStateEvent } from '@openscd/core/foundation/deprecated/waiter.js';
+import { newSettingsUIEvent } from '@openscd/core/foundation/deprecated/settings.js';
+import { pluginIcons, } from '../open-scd.js';
+import { HistoryUIKind, newEmptyIssuesEvent, newHistoryUIEvent } from './History.js';
+import { List } from '@material/mwc-list';
+import '@material/mwc-drawer';
+import '@material/mwc-list';
+import '@material/mwc-dialog';
+import '@material/mwc-switch';
+import '@material/mwc-select';
+import '@material/mwc-textfield';
+import { pluginTag } from '../plugin-tag.js';
+import "./plugin-manager/plugin-manager.js";
+import "./plugin-manager/custom-plugin-dialog.js";
+import "./menu-tabs/menu-tabs.js";
+let OscdLayout = class OscdLayout extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** The `XMLDocument` to be edited */
+        this.doc = null;
+        /** The name of the current [[`doc`]] */
+        this.docName = '';
+        /** Index of the last [[`EditorAction`]] applied. */
+        this.editCount = -1;
+        /** The plugins to render the layout. */
+        this.plugins = [];
+        this.validated = Promise.resolve();
+        this.shouldValidate = false;
+        this.activeEditor = this.calcActiveEditors()[0];
+    }
+    render() {
         return html `
       <div
         @open-plugin-download=${() => this.pluginDownloadUI.show()}
@@ -42,239 +42,239 @@ let OscdLayout = class OscdLayout extends LitElement {
         ${this.renderHeader()} ${this.renderAside()} ${this.renderMenuContent()}
         ${this.renderContent()} ${this.renderLanding()} ${this.renderPlugging()}
       </div>
-    `;
-    }
-    renderPlugging() {
-        return html ` ${this.renderPluginUI()} ${this.renderDownloadUI()} `;
-    }
-    getMenuContent(src) {
-        const tag = pluginTag(src);
-        return this.menuContent.querySelector(tag);
-    }
-    /** Renders the "Add Custom Plug-in" UI*/
-    renderDownloadUI() {
+    `;
+    }
+    renderPlugging() {
+        return html ` ${this.renderPluginUI()} ${this.renderDownloadUI()} `;
+    }
+    getMenuContent(src) {
+        const tag = pluginTag(src);
+        return this.menuContent.querySelector(tag);
+    }
+    /** Renders the "Add Custom Plug-in" UI*/
+    renderDownloadUI() {
         return html `
       <oscd-custom-plugin-dialog id="pluginAdd"></oscd-custom-plugin-dialog>
-    `;
-    }
-    /**
-     * Renders the plug-in management UI (turning plug-ins on/off)
-     */
-    renderPluginUI() {
+    `;
+    }
+    /**
+     * Renders the plug-in management UI (turning plug-ins on/off)
+     */
+    renderPluginUI() {
         return html `
       <oscd-plugin-manager id="pluginManager" .plugins=${this.plugins}></oscd-plugin-manager>
-    `;
-    }
-    // Computed properties
-    get validators() {
-        return this.plugins.filter(plugin => plugin.active && plugin.kind === 'validator');
-    }
-    get menuEntries() {
-        return this.plugins.filter(plugin => plugin.active && plugin.kind === 'menu');
-    }
-    get topMenu() {
-        return this.menuEntries.filter(plugin => plugin.position === 'top');
-    }
-    get middleMenu() {
-        return this.menuEntries.filter(plugin => plugin.position === 'middle');
-    }
-    get bottomMenu() {
-        return this.menuEntries.filter(plugin => plugin.position === 'bottom');
-    }
-    get menu() {
-        const topMenu = this.generateMenu(this.topMenu, 'top');
-        const middleMenu = this.generateMenu(this.middleMenu, 'middle');
-        const bottomMenu = this.generateMenu(this.bottomMenu, 'bottom');
-        const validators = this.generateValidatorMenus(this.validators);
-        if (middleMenu.length > 0)
-            middleMenu.push('divider');
-        if (bottomMenu.length > 0)
-            bottomMenu.push('divider');
-        return [
-            'divider',
-            ...topMenu,
-            'divider',
-            {
-                icon: 'undo',
-                name: 'undo',
-                actionItem: true,
-                action: () => {
-                    this.editor.undo();
-                },
-                disabled: () => !this.editor.canUndo,
-                kind: 'static',
-                content: () => html ``,
-            },
-            {
-                icon: 'redo',
-                name: 'redo',
-                actionItem: true,
-                action: () => {
-                    this.editor.redo();
-                },
-                disabled: () => !this.editor.canRedo,
-                kind: 'static',
-                content: () => html ``,
-            },
-            ...validators,
-            {
-                icon: 'list',
-                name: 'menu.viewLog',
-                actionItem: true,
-                action: () => {
-                    this.dispatchEvent(newHistoryUIEvent(true, HistoryUIKind.log));
-                },
-                kind: 'static',
-                content: () => html ``,
-            },
-            {
-                icon: 'history',
-                name: 'menu.viewHistory',
-                actionItem: true,
-                action: () => {
-                    this.dispatchEvent(newHistoryUIEvent(true, HistoryUIKind.history));
-                },
-                kind: 'static',
-                content: () => html ``,
-            },
-            {
-                icon: 'rule',
-                name: 'menu.viewDiag',
-                actionItem: true,
-                action: () => {
-                    this.dispatchEvent(newHistoryUIEvent(true, HistoryUIKind.diagnostic));
-                },
-                kind: 'static',
-                content: () => html ``,
-            },
-            'divider',
-            ...middleMenu,
-            {
-                icon: 'settings',
-                name: 'settings.title',
-                action: () => {
-                    this.dispatchEvent(newSettingsUIEvent(true));
-                },
-                kind: 'static',
-                content: () => html ``,
-            },
-            ...bottomMenu,
-            {
-                icon: 'extension',
-                name: 'plugins.heading',
-                action: () => this.pluginUI.show(),
-                kind: 'static',
-                content: () => html ``,
-            },
-        ];
-    }
-    get editors() {
-        return this.plugins.filter(plugin => plugin.active && plugin.kind === 'editor');
-    }
-    // Keyboard Shortcuts
-    handleKeyPress(e) {
-        // currently we only handley key shortcuts when users press ctrl
-        if (!e.ctrlKey) {
-            return;
-        }
-        const keyFunctionMap = {
-            'm': () => this.menuUI.open = !this.menuUI.open,
-            'o': () => this.menuUI.querySelector('mwc-list-item[iconid="folder_open"]')?.click(),
-            'O': () => this.menuUI.querySelector('mwc-list-item[iconid="create_new_folder"]')?.click(),
-            's': () => this.menuUI.querySelector('mwc-list-item[iconid="save"]')?.click(),
-            'P': () => this.pluginUI.show(),
-        };
-        const fn = keyFunctionMap[e.key];
-        if (!fn) {
-            return;
-        }
-        e.preventDefault();
-        fn();
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.host.addEventListener('close-drawer', async () => {
-            this.menuUI.open = false;
-        });
-        this.host.addEventListener('validate', async () => {
-            this.shouldValidate = true;
-            await this.validated;
-            if (!this.shouldValidate) {
-                return;
-            }
-            this.shouldValidate = false;
-            this.validated = Promise.allSettled(this.menuUI
-                .querySelector('mwc-list')
-                .items.filter(item => item.className === 'validator')
-                .map(item => {
-                const src = item.dataset.src ?? '';
-                const menuContentElement = this.getMenuContent(src);
-                if (!menuContentElement) {
-                    return;
-                }
-                return menuContentElement.validate();
-            })).then();
-            this.dispatchEvent(newPendingStateEvent(this.validated));
-        });
-        this.handleKeyPress = this.handleKeyPress.bind(this);
-        document.onkeydown = this.handleKeyPress;
-        document.addEventListener("open-plugin-download", () => {
-            this.pluginDownloadUI.show();
-        });
-    }
-    generateMenu(plugins, kind) {
-        return plugins.map(plugin => {
-            return {
-                icon: plugin.icon || pluginIcons['menu'],
-                name: plugin.name,
-                src: plugin.src,
-                action: ae => {
-                    const menuContentElement = this.getMenuContent(plugin.src);
-                    if (!menuContentElement) {
-                        return;
-                    }
-                    this.dispatchEvent(newPendingStateEvent(menuContentElement.run()));
-                },
-                disabled: () => plugin.requireDoc && this.doc === null,
-                content: () => {
-                    if (plugin.content) {
-                        return plugin.content();
-                    }
-                    return html ``;
-                },
-                kind: kind,
-            };
-        });
-    }
-    generateValidatorMenus(plugins) {
-        return plugins.map(plugin => {
-            return {
-                icon: plugin.icon || pluginIcons['validator'],
-                name: plugin.name,
-                src: plugin.src,
-                action: ae => {
-                    this.dispatchEvent(newEmptyIssuesEvent(plugin.src));
-                    const menuContentElement = this.getMenuContent(plugin.src);
-                    if (!menuContentElement) {
-                        return;
-                    }
-                    this.dispatchEvent(newPendingStateEvent(menuContentElement.validate()));
-                },
-                disabled: () => this.doc === null,
-                content: plugin.content ?? (() => html ``),
-                kind: 'validator',
-            };
-        });
-    }
-    renderMenuItem(me) {
-        const isDivider = me === 'divider';
-        const hasActionItem = me !== 'divider' && me.actionItem;
-        if (isDivider) {
-            return html `<li divider padded role="separator"></li>`;
-        }
-        if (hasActionItem) {
-            return html ``;
-        }
+    `;
+    }
+    // Computed properties
+    get validators() {
+        return this.plugins.filter(plugin => plugin.active && plugin.kind === 'validator');
+    }
+    get menuEntries() {
+        return this.plugins.filter(plugin => plugin.active && plugin.kind === 'menu');
+    }
+    get topMenu() {
+        return this.menuEntries.filter(plugin => plugin.position === 'top');
+    }
+    get middleMenu() {
+        return this.menuEntries.filter(plugin => plugin.position === 'middle');
+    }
+    get bottomMenu() {
+        return this.menuEntries.filter(plugin => plugin.position === 'bottom');
+    }
+    get menu() {
+        const topMenu = this.generateMenu(this.topMenu, 'top');
+        const middleMenu = this.generateMenu(this.middleMenu, 'middle');
+        const bottomMenu = this.generateMenu(this.bottomMenu, 'bottom');
+        const validators = this.generateValidatorMenus(this.validators);
+        if (middleMenu.length > 0)
+            middleMenu.push('divider');
+        if (bottomMenu.length > 0)
+            bottomMenu.push('divider');
+        return [
+            'divider',
+            ...topMenu,
+            'divider',
+            {
+                icon: 'undo',
+                name: 'undo',
+                actionItem: true,
+                action: () => {
+                    this.editor.undo();
+                },
+                disabled: () => !this.editor.canUndo,
+                kind: 'static',
+                content: () => html ``,
+            },
+            {
+                icon: 'redo',
+                name: 'redo',
+                actionItem: true,
+                action: () => {
+                    this.editor.redo();
+                },
+                disabled: () => !this.editor.canRedo,
+                kind: 'static',
+                content: () => html ``,
+            },
+            ...validators,
+            {
+                icon: 'list',
+                name: 'menu.viewLog',
+                actionItem: true,
+                action: () => {
+                    this.dispatchEvent(newHistoryUIEvent(true, HistoryUIKind.log));
+                },
+                kind: 'static',
+                content: () => html ``,
+            },
+            {
+                icon: 'history',
+                name: 'menu.viewHistory',
+                actionItem: true,
+                action: () => {
+                    this.dispatchEvent(newHistoryUIEvent(true, HistoryUIKind.history));
+                },
+                kind: 'static',
+                content: () => html ``,
+            },
+            {
+                icon: 'rule',
+                name: 'menu.viewDiag',
+                actionItem: true,
+                action: () => {
+                    this.dispatchEvent(newHistoryUIEvent(true, HistoryUIKind.diagnostic));
+                },
+                kind: 'static',
+                content: () => html ``,
+            },
+            'divider',
+            ...middleMenu,
+            {
+                icon: 'settings',
+                name: 'settings.title',
+                action: () => {
+                    this.dispatchEvent(newSettingsUIEvent(true));
+                },
+                kind: 'static',
+                content: () => html ``,
+            },
+            ...bottomMenu,
+            {
+                icon: 'extension',
+                name: 'plugins.heading',
+                action: () => this.pluginUI.show(),
+                kind: 'static',
+                content: () => html ``,
+            },
+        ];
+    }
+    get editors() {
+        return this.plugins.filter(plugin => plugin.active && plugin.kind === 'editor');
+    }
+    // Keyboard Shortcuts
+    handleKeyPress(e) {
+        // currently we only handley key shortcuts when users press ctrl
+        if (!e.ctrlKey) {
+            return;
+        }
+        const keyFunctionMap = {
+            'm': () => this.menuUI.open = !this.menuUI.open,
+            'o': () => this.menuUI.querySelector('mwc-list-item[iconid="folder_open"]')?.click(),
+            'O': () => this.menuUI.querySelector('mwc-list-item[iconid="create_new_folder"]')?.click(),
+            's': () => this.menuUI.querySelector('mwc-list-item[iconid="save"]')?.click(),
+            'P': () => this.pluginUI.show(),
+        };
+        const fn = keyFunctionMap[e.key];
+        if (!fn) {
+            return;
+        }
+        e.preventDefault();
+        fn();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.host.addEventListener('close-drawer', async () => {
+            this.menuUI.open = false;
+        });
+        this.host.addEventListener('validate', async () => {
+            this.shouldValidate = true;
+            await this.validated;
+            if (!this.shouldValidate) {
+                return;
+            }
+            this.shouldValidate = false;
+            this.validated = Promise.allSettled(this.menuUI
+                .querySelector('mwc-list')
+                .items.filter(item => item.className === 'validator')
+                .map(item => {
+                const src = item.dataset.src ?? '';
+                const menuContentElement = this.getMenuContent(src);
+                if (!menuContentElement) {
+                    return;
+                }
+                return menuContentElement.validate();
+            })).then();
+            this.dispatchEvent(newPendingStateEvent(this.validated));
+        });
+        this.handleKeyPress = this.handleKeyPress.bind(this);
+        document.onkeydown = this.handleKeyPress;
+        document.addEventListener("open-plugin-download", () => {
+            this.pluginDownloadUI.show();
+        });
+    }
+    generateMenu(plugins, kind) {
+        return plugins.map(plugin => {
+            return {
+                icon: plugin.icon || pluginIcons['menu'],
+                name: plugin.name,
+                src: plugin.src,
+                action: ae => {
+                    const menuContentElement = this.getMenuContent(plugin.src);
+                    if (!menuContentElement) {
+                        return;
+                    }
+                    this.dispatchEvent(newPendingStateEvent(menuContentElement.run()));
+                },
+                disabled: () => plugin.requireDoc && this.doc === null,
+                content: () => {
+                    if (plugin.content) {
+                        return plugin.content();
+                    }
+                    return html ``;
+                },
+                kind: kind,
+            };
+        });
+    }
+    generateValidatorMenus(plugins) {
+        return plugins.map(plugin => {
+            return {
+                icon: plugin.icon || pluginIcons['validator'],
+                name: plugin.name,
+                src: plugin.src,
+                action: ae => {
+                    this.dispatchEvent(newEmptyIssuesEvent(plugin.src));
+                    const menuContentElement = this.getMenuContent(plugin.src);
+                    if (!menuContentElement) {
+                        return;
+                    }
+                    this.dispatchEvent(newPendingStateEvent(menuContentElement.validate()));
+                },
+                disabled: () => this.doc === null,
+                content: plugin.content ?? (() => html ``),
+                kind: 'validator',
+            };
+        });
+    }
+    renderMenuItem(me) {
+        const isDivider = me === 'divider';
+        const hasActionItem = me !== 'divider' && me.actionItem;
+        if (isDivider) {
+            return html `<li divider padded role="separator"></li>`;
+        }
+        if (hasActionItem) {
+            return html ``;
+        }
         return html `
       <mwc-list-item
         class="${me.kind}"
@@ -285,16 +285,16 @@ let OscdLayout = class OscdLayout extends LitElement {
         .disabled=${me.disabled?.() || !me.action}
         ><mwc-icon slot="graphic">${me.icon}</mwc-icon>
         <span>${get(me.name)}</span>
-        ${me.hint
-            ? html `<span slot="secondary"><tt>${me.hint}</tt></span>`
+        ${me.hint
+            ? html `<span slot="secondary"><tt>${me.hint}</tt></span>`
             : ''}
       </mwc-list-item>
-    `;
-    }
-    renderActionItem(me) {
-        if (me === 'divider' || !me.actionItem) {
-            return html ``;
-        }
+    `;
+    }
+    renderActionItem(me) {
+        if (me === 'divider' || !me.actionItem) {
+            return html ``;
+        }
         return html `
     <mwc-icon-button
       slot="actionItems"
@@ -302,13 +302,13 @@ let OscdLayout = class OscdLayout extends LitElement {
       label="${me.name}"
       ?disabled=${me.disabled?.() || !me.action}
       @click=${me.action}
-    ></mwc-icon-button>`;
-    }
-    renderEditorTab({ name, icon }) {
-        return html `<mwc-tab label=${name} icon=${icon || 'edit'}> </mwc-tab>`;
-    }
-    /** Renders top bar which features icon buttons for undo, redo, log, scl history and diagnostics*/
-    renderHeader() {
+    ></mwc-icon-button>`;
+    }
+    renderEditorTab({ name, icon }) {
+        return html `<mwc-tab label=${name} icon=${icon || 'edit'}> </mwc-tab>`;
+    }
+    /** Renders top bar which features icon buttons for undo, redo, log, scl history and diagnostics*/
+    renderHeader() {
         return html `<mwc-top-app-bar-fixed>
       <mwc-icon-button
         icon="menu"
@@ -318,36 +318,36 @@ let OscdLayout = class OscdLayout extends LitElement {
       ></mwc-icon-button>
       ${this.renderTitle()}
       ${this.renderActionItems()}
-    </mwc-top-app-bar-fixed>`;
-    }
-    /**
-     * Renders the title section in the top bar
-     * Make sure to use slot="title" for the returned template
-     */
-    renderTitle() {
-        return html `<div slot="title" id="title">${this.docName}</div>`;
-    }
-    /**
-     * Renders the action items for the top bar
-     * Make sure to use slot="actionItems" for each element
-     */
-    renderActionItems() {
-        return html `${this.menu.map(this.renderActionItem)}`;
-    }
-    renderMenuContent() {
+    </mwc-top-app-bar-fixed>`;
+    }
+    /**
+     * Renders the title section in the top bar
+     * Make sure to use slot="title" for the returned template
+     */
+    renderTitle() {
+        return html `<div slot="title" id="title">${this.docName}</div>`;
+    }
+    /**
+     * Renders the action items for the top bar
+     * Make sure to use slot="actionItems" for each element
+     */
+    renderActionItems() {
+        return html `${this.menu.map(this.renderActionItem)}`;
+    }
+    renderMenuContent() {
         return html `
       <div id="menuContent">
-        ${this.menu
-            .filter(p => p.content)
+        ${this.menu
+            .filter(p => p.content)
             .map(p => p.content())}
       </div>
-    `;
-    }
-    /**
-     * Renders a drawer toolbar featuring the scl filename, enabled menu plugins,
-     * settings, help, scl history and plug-ins management
-     */
-    renderAside() {
+    `;
+    }
+    /**
+     * Renders a drawer toolbar featuring the scl filename, enabled menu plugins,
+     * settings, help, scl history and plug-ins management
+     */
+    renderAside() {
         return html `
       <mwc-drawer class="mdc-theme--surface" hasheader type="modal" id="menu">
         <span slot="title">${get('menu.title')}</span>
@@ -359,39 +359,39 @@ let OscdLayout = class OscdLayout extends LitElement {
           ${this.menu.map(this.renderMenuItem)}
         </mwc-list>
       </mwc-drawer>
-    `;
-        function renderTitle(docName) {
-            if (!docName)
-                return html ``;
-            return html `<span slot="subtitle">${docName}</span>`;
-        }
-        function makeListAction(menuItems) {
-            return function listAction(ae) {
-                //FIXME: dirty hack to be fixed in open-scd-core
-                //       if clause not necessary when oscd... components in open-scd not list
-                if (ae.target instanceof List)
-                    (menuItems.filter(item => item !== 'divider' && !item.actionItem)[ae.detail.index])?.action?.(ae);
-            };
-        }
-    }
-    calcActiveEditors() {
-        const hasActiveDoc = Boolean(this.doc);
-        return this.editors
-            .filter(editor => {
-            // this is necessary because `requireDoc` can be undefined
-            // and that is not the same as false
-            const doesNotRequireDoc = editor.requireDoc === false;
-            return doesNotRequireDoc || hasActiveDoc;
-        });
-    }
-    /** Renders the enabled editor plugins and a tab bar to switch between them*/
-    renderContent() {
-        const activeEditors = this.calcActiveEditors()
-            .map(this.renderEditorTab);
-        const hasActiveEditors = activeEditors.length > 0;
-        if (!hasActiveEditors) {
-            return html ``;
-        }
+    `;
+        function renderTitle(docName) {
+            if (!docName)
+                return html ``;
+            return html `<span slot="subtitle">${docName}</span>`;
+        }
+        function makeListAction(menuItems) {
+            return function listAction(ae) {
+                //FIXME: dirty hack to be fixed in open-scd-core
+                //       if clause not necessary when oscd... components in open-scd not list
+                if (ae.target instanceof List)
+                    (menuItems.filter(item => item !== 'divider' && !item.actionItem)[ae.detail.index])?.action?.(ae);
+            };
+        }
+    }
+    calcActiveEditors() {
+        const hasActiveDoc = Boolean(this.doc);
+        return this.editors
+            .filter(editor => {
+            // this is necessary because `requireDoc` can be undefined
+            // and that is not the same as false
+            const doesNotRequireDoc = editor.requireDoc === false;
+            return doesNotRequireDoc || hasActiveDoc;
+        });
+    }
+    /** Renders the enabled editor plugins and a tab bar to switch between them*/
+    renderContent() {
+        const activeEditors = this.calcActiveEditors()
+            .map(this.renderEditorTab);
+        const hasActiveEditors = activeEditors.length > 0;
+        if (!hasActiveEditors) {
+            return html ``;
+        }
         return html `
       <oscd-menu-tabs
         .editors=${this.calcActiveEditors()}
@@ -400,64 +400,64 @@ let OscdLayout = class OscdLayout extends LitElement {
       >
       </oscd-menu-tabs>
       ${renderEditorContent(this.doc, this.activeEditor)}
-    `;
-        function renderEditorContent(doc, activeEditor) {
-            const editor = activeEditor;
-            const requireDoc = editor?.requireDoc;
-            if (requireDoc && !doc) {
-                return html ``;
-            }
-            const content = editor?.content;
-            if (!content) {
-                return html ``;
-            }
-            return html `${content()}`;
-        }
-    }
-    handleEditorTabActivated(e) {
-        this.activeEditor = e.detail.editor;
-    }
-    handleActivateEditorByEvent(e) {
-        const { name, src } = e.detail;
-        const editors = this.calcActiveEditors();
-        const wantedEditor = editors.find(editor => editor.name === name || editor.src === src);
-        if (!wantedEditor) {
-            return;
-        } // TODO: log error
-        this.activeEditor = wantedEditor;
-    }
-    handleRunMenuByEvent(e) {
-        // TODO: this is a workaround, fix it
-        this.menuUI.open = true;
-        const menuEntry = this.menuUI.querySelector(`[data-name="${e.detail.name}"]`);
-        const menuContentElement = this.getMenuContent(menuEntry.dataset.src ?? '');
-        if (!menuContentElement) {
-            return;
-        }
-        menuContentElement.run();
-    }
-    /**
-     * Renders the landing buttons (open project and new project)
-     * it no document loaded we display the menu item that are in the position
-     * 'top' and are not disabled
-     *
-     * To enable replacement of this part we have to convert it to either an addon
-     * or a plugin
-     */
-    renderLanding() {
-        if (this.doc) {
-            return html ``;
-        }
+    `;
+        function renderEditorContent(doc, activeEditor) {
+            const editor = activeEditor;
+            const requireDoc = editor?.requireDoc;
+            if (requireDoc && !doc) {
+                return html ``;
+            }
+            const content = editor?.content;
+            if (!content) {
+                return html ``;
+            }
+            return html `${content()}`;
+        }
+    }
+    handleEditorTabActivated(e) {
+        this.activeEditor = e.detail.editor;
+    }
+    handleActivateEditorByEvent(e) {
+        const { name, src } = e.detail;
+        const editors = this.calcActiveEditors();
+        const wantedEditor = editors.find(editor => editor.name === name || editor.src === src);
+        if (!wantedEditor) {
+            return;
+        } // TODO: log error
+        this.activeEditor = wantedEditor;
+    }
+    handleRunMenuByEvent(e) {
+        // TODO: this is a workaround, fix it
+        this.menuUI.open = true;
+        const menuEntry = this.menuUI.querySelector(`[data-name="${e.detail.name}"]`);
+        const menuContentElement = this.getMenuContent(menuEntry.dataset.src ?? '');
+        if (!menuContentElement) {
+            return;
+        }
+        menuContentElement.run();
+    }
+    /**
+     * Renders the landing buttons (open project and new project)
+     * it no document loaded we display the menu item that are in the position
+     * 'top' and are not disabled
+     *
+     * To enable replacement of this part we have to convert it to either an addon
+     * or a plugin
+     */
+    renderLanding() {
+        if (this.doc) {
+            return html ``;
+        }
         return html `
       <div class="landing">
         ${renderMenuItems(this.menu, this.menuUI)}
-      </div>`;
-        function renderMenuItems(menuItemsAndDividers, menuUI) {
-            const menuItems = menuItemsAndDividers.filter(mi => mi !== 'divider');
-            return menuItems.map((mi, index) => {
-                if (mi.kind !== 'top' || mi.disabled?.()) {
-                    return html ``;
-                }
+      </div>`;
+        function renderMenuItems(menuItemsAndDividers, menuUI) {
+            const menuItems = menuItemsAndDividers.filter(mi => mi !== 'divider');
+            return menuItems.map((mi, index) => {
+                if (mi.kind !== 'top' || mi.disabled?.()) {
+                    return html ``;
+                }
                 return html `
               <mwc-icon-button
                 class="landing_icon"
@@ -466,15 +466,15 @@ let OscdLayout = class OscdLayout extends LitElement {
               >
                 <div class="landing_label">${mi.name}</div>
               </mwc-icon-button>
-            `;
-            });
-            function clickListItem(index) {
-                const listItem = menuUI.querySelector('mwc-list').items[index];
-                listItem.click();
-            }
-        }
-    }
-};
+            `;
+            });
+            function clickListItem(index) {
+                const listItem = menuUI.querySelector('mwc-list').items[index];
+                listItem.click();
+            }
+        }
+    }
+};
 OscdLayout.styles = css `
     mwc-drawer {
       position: absolute;
@@ -569,51 +569,51 @@ OscdLayout.styles = css `
     .plugin.validator {
       display: flex;
     }
-  `;
-__decorate([
-    property({ attribute: false })
-], OscdLayout.prototype, "doc", void 0);
-__decorate([
-    property({ type: String })
-], OscdLayout.prototype, "docName", void 0);
-__decorate([
-    property({ type: Number })
-], OscdLayout.prototype, "editCount", void 0);
-__decorate([
-    property({ type: Object })
-], OscdLayout.prototype, "editor", void 0);
-__decorate([
-    property({ type: Array })
-], OscdLayout.prototype, "plugins", void 0);
-__decorate([
-    property({ type: Object })
-], OscdLayout.prototype, "host", void 0);
-__decorate([
-    state()
-], OscdLayout.prototype, "validated", void 0);
-__decorate([
-    state()
-], OscdLayout.prototype, "shouldValidate", void 0);
-__decorate([
-    state()
-], OscdLayout.prototype, "activeEditor", void 0);
-__decorate([
-    query('#menu')
-], OscdLayout.prototype, "menuUI", void 0);
-__decorate([
-    query('#menuContent')
-], OscdLayout.prototype, "menuContent", void 0);
-__decorate([
-    query('#pluginManager')
-], OscdLayout.prototype, "pluginUI", void 0);
-__decorate([
-    query('#pluginList')
-], OscdLayout.prototype, "pluginList", void 0);
-__decorate([
-    query('#pluginAdd')
-], OscdLayout.prototype, "pluginDownloadUI", void 0);
-OscdLayout = __decorate([
-    customElement('oscd-layout')
-], OscdLayout);
-export { OscdLayout };
+  `;
+__decorate([
+    property({ attribute: false })
+], OscdLayout.prototype, "doc", void 0);
+__decorate([
+    property({ type: String })
+], OscdLayout.prototype, "docName", void 0);
+__decorate([
+    property({ type: Number })
+], OscdLayout.prototype, "editCount", void 0);
+__decorate([
+    property({ type: Object })
+], OscdLayout.prototype, "editor", void 0);
+__decorate([
+    property({ type: Array })
+], OscdLayout.prototype, "plugins", void 0);
+__decorate([
+    property({ type: Object })
+], OscdLayout.prototype, "host", void 0);
+__decorate([
+    state()
+], OscdLayout.prototype, "validated", void 0);
+__decorate([
+    state()
+], OscdLayout.prototype, "shouldValidate", void 0);
+__decorate([
+    state()
+], OscdLayout.prototype, "activeEditor", void 0);
+__decorate([
+    query('#menu')
+], OscdLayout.prototype, "menuUI", void 0);
+__decorate([
+    query('#menuContent')
+], OscdLayout.prototype, "menuContent", void 0);
+__decorate([
+    query('#pluginManager')
+], OscdLayout.prototype, "pluginUI", void 0);
+__decorate([
+    query('#pluginList')
+], OscdLayout.prototype, "pluginList", void 0);
+__decorate([
+    query('#pluginAdd')
+], OscdLayout.prototype, "pluginDownloadUI", void 0);
+OscdLayout = __decorate([
+    customElement('oscd-layout')
+], OscdLayout);
+export { OscdLayout };
 //# sourceMappingURL=Layout.js.map