@compas-oscd/open-scd 0.34.0 → 0.34.1

package/dist/openscd/src/addons/Layout.js

@@ -0,0 +1,619 @@
+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()}
+        @oscd-activate-editor=${this.handleActivateEditorByEvent}
+        @oscd-run-menu=${this.handleRunMenuByEvent}
+      >
+        <slot></slot>
+        ${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() {
+        return html `
+      <oscd-custom-plugin-dialog id="pluginAdd"></oscd-custom-plugin-dialog>
+    `;
+    }
+    /**
+     * 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 ``;
+        }
+        return html `
+      <mwc-list-item
+        class="${me.kind}"
+        iconid="${me.icon}"
+        graphic="icon"
+        data-name="${me.name}"
+        data-src="${me.src ?? ''}"
+        .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>`
+            : ''}
+      </mwc-list-item>
+    `;
+    }
+    renderActionItem(me) {
+        if (me === 'divider' || !me.actionItem) {
+            return html ``;
+        }
+        return html `
+    <mwc-icon-button
+      slot="actionItems"
+      icon="${me.icon}"
+      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() {
+        return html `<mwc-top-app-bar-fixed>
+      <mwc-icon-button
+        icon="menu"
+        label="Menu"
+        slot="navigationIcon"
+        @click=${() => (this.menuUI.open = true)}
+      ></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() {
+        return html `
+      <div id="menuContent">
+        ${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() {
+        return html `
+      <mwc-drawer class="mdc-theme--surface" hasheader type="modal" id="menu">
+        <span slot="title">${get('menu.title')}</span>
+          ${renderTitle(this.docName)}
+        <mwc-list
+          wrapFocus
+          @action=${makeListAction(this.menu)}
+        >
+          ${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 ``;
+        }
+        return html `
+      <oscd-menu-tabs
+        .editors=${this.calcActiveEditors()}
+        .activeEditor=${this.activeEditor}
+        @oscd-editor-tab-activated=${this.handleEditorTabActivated}
+      >
+      </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 ``;
+        }
+        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 ``;
+                }
+                return html `
+              <mwc-icon-button
+                class="landing_icon"
+                icon="${mi.icon}"
+                @click="${() => clickListItem(index)}"
+              >
+                <div class="landing_label">${mi.name}</div>
+              </mwc-icon-button>
+            `;
+            });
+            function clickListItem(index) {
+                const listItem = menuUI.querySelector('mwc-list').items[index];
+                listItem.click();
+            }
+        }
+    }
+};
+OscdLayout.styles = css `
+    mwc-drawer {
+      position: absolute;
+      top: 0;
+    }
+
+    mwc-top-app-bar-fixed {
+      --mdc-theme-text-disabled-on-light: rgba(255, 255, 255, 0.38);
+    } /* hack to fix disabled icon buttons rendering black */
+
+    mwc-tab {
+      background-color: var(--primary);
+      --mdc-theme-primary: var(--mdc-theme-on-primary);
+    }
+
+    input[type='file'] {
+      display: none;
+    }
+
+    mwc-dialog {
+      --mdc-dialog-max-width: 98vw;
+    }
+
+    mwc-dialog > form {
+      display: flex;
+      flex-direction: column;
+    }
+
+    mwc-dialog > form > * {
+      display: block;
+      margin-top: 16px;
+    }
+
+    mwc-linear-progress {
+      position: fixed;
+      --mdc-linear-progress-buffer-color: var(--primary);
+      --mdc-theme-primary: var(--secondary);
+      left: 0px;
+      top: 0px;
+      width: 100%;
+      pointer-events: none;
+      z-index: 1000;
+    }
+
+    tt {
+      font-family: 'Roboto Mono', monospace;
+      font-weight: 300;
+    }
+
+    .landing {
+      position: absolute;
+      text-align: center;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 100%;
+    }
+
+    .landing_icon:hover {
+      box-shadow: 0 12px 17px 2px rgba(0, 0, 0, 0.14),
+        0 5px 22px 4px rgba(0, 0, 0, 0.12), 0 7px 8px -4px rgba(0, 0, 0, 0.2);
+    }
+
+    .landing_icon {
+      margin: 12px;
+      border-radius: 16px;
+      width: 160px;
+      height: 140px;
+      text-align: center;
+      color: var(--mdc-theme-on-secondary);
+      background: var(--secondary);
+      --mdc-icon-button-size: 100px;
+      --mdc-icon-size: 100px;
+      --mdc-ripple-color: rgba(0, 0, 0, 0);
+      box-shadow: rgb(0 0 0 / 14%) 0px 6px 10px 0px,
+        rgb(0 0 0 / 12%) 0px 1px 18px 0px, rgb(0 0 0 / 20%) 0px 3px 5px -1px;
+      transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    .landing_label {
+      width: 160px;
+      height: 50px;
+      margin-top: 100px;
+      margin-left: -30px;
+      font-family: 'Roboto', sans-serif;
+    }
+
+    .plugin.menu {
+      display: flex;
+    }
+
+    .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 };
+//# sourceMappingURL=Layout.js.map