@api-client/ui 0.0.9 → 0.0.11

package/dist/elements/layout/LayoutManager.js

@@ -1,747 +0,0 @@
-/* eslint-disable prefer-destructuring */
-/* eslint-disable max-classes-per-file */
-import { html } from 'lit';
-import { Events } from '../../events/Events.js';
-import '../../define/layout/layout-panel.js';
-var PanelState;
-(function (PanelState) {
-    PanelState[PanelState["Idle"] = 0] = "Idle";
-    PanelState[PanelState["Busy"] = 1] = "Busy";
-})(PanelState || (PanelState = {}));
-let panelId = 0;
-export class LayoutPanel {
-    get hasPanels() {
-        return this.panels.length > 0;
-    }
-    get hasItems() {
-        return this.items.length > 0;
-    }
-    static fromSchema(state, manager, parent) {
-        const panel = new LayoutPanel(manager, parent);
-        panel.id = state.id;
-        panel.selected = state.selected;
-        panel.layout = state.layout;
-        if (Array.isArray(state.items)) {
-            panel.items = state.items.map(i => ({ ...i }));
-        }
-        if (Array.isArray(state.panels)) {
-            panel.panels = state.panels.map(i => LayoutPanel.fromSchema(i, manager, panel));
-        }
-        return panel;
-    }
-    constructor(manager, parent) {
-        this.id = panelId++;
-        this.layout = 'horizontal';
-        this.panels = [];
-        this.items = [];
-        /**
-         * The current state of the panel.
-         */
-        this.state = PanelState.Idle;
-        /**
-         * The computed size value for each item.
-         * The value of `undefined` means "auto".
-         */
-        this.sizes = [];
-        this.manager = manager;
-        this.state = PanelState.Idle;
-        this.parent = parent;
-    }
-    /**
-     * @returns Returns a **copy** of the items array sorted by index.
-     */
-    sortedItems() {
-        const { items } = this;
-        return [...items].sort((a, b) => (a.index || 0) - (b.index || 0));
-    }
-    /**
-     * @returns True when the panel accepts drop events.
-     */
-    canDrop() {
-        if (this.hasItems) {
-            return true;
-        }
-        return !this.hasPanels;
-    }
-    nextIndex() {
-        let result = 0;
-        if (!this.items.length) {
-            return result;
-        }
-        this.items.forEach((item) => {
-            const { index = 0 } = item;
-            if (result < index) {
-                result = index;
-            }
-        });
-        return result + 1;
-    }
-    /**
-     * Adds an item to the layout.
-     *
-     * @param item The item to add
-     * @param opts Layout adding item options
-     * @returns Whether a new item was added to the layout. false when the item is already in the layout panel.
-     */
-    addItem(item, opts = {}) {
-        const { region = 'center' } = opts;
-        const hasItem = region === 'center' && this.items.some(i => i.key === item.key);
-        if (hasItem) {
-            this.selected = item.key;
-            this.manager.changed();
-            return false;
-        }
-        const hasIndex = typeof opts.index === 'number';
-        const index = !hasIndex ? this.nextIndex() : opts.index;
-        if (region === 'center' || (!this.hasItems && !this.hasPanels)) {
-            if (hasIndex) {
-                this.increaseIndex(index + 1);
-            }
-            this.manager.nameItem(item);
-            this.items.push({ ...item, index });
-            this.selected = item.key;
-            this.manager.changed();
-            return true;
-        }
-        let panel;
-        if (region === 'east') {
-            panel = this.split({
-                layout: 'horizontal',
-                itemsTarget: 0,
-            })[1];
-        }
-        else if (region === 'west') {
-            panel = this.split({
-                layout: 'horizontal',
-                itemsTarget: 1,
-            })[0];
-        }
-        else if (region === 'south') {
-            panel = this.split({
-                layout: 'vertical',
-                itemsTarget: 0,
-            })[1];
-        }
-        else {
-            panel = this.split({
-                layout: 'horizontal',
-                itemsTarget: 1,
-            })[0];
-        }
-        panel.addItem(item, { index });
-        this.manager.changed();
-        return true;
-    }
-    /**
-     * Splits this panel into 2 panels.
-     * This to be used when the panel has no other panels. Only items are allowed.
-     * It produces 2 new panels and moves the items to the first one leaving the other one available.
-     */
-    split(opts = {}) {
-        const { layout = 'horizontal', itemsTarget = 0 } = opts;
-        if (this.hasPanels) {
-            throw new Error(`Invalid state. Panels can be split only when containing items only.`);
-        }
-        this.layout = layout;
-        const { items, selected } = this;
-        this.items = [];
-        this.selected = undefined;
-        const p1 = new LayoutPanel(this.manager, this);
-        const p2 = new LayoutPanel(this.manager, this);
-        this.panels = [p1, p2];
-        this.panels[itemsTarget].items = items;
-        this.panels[itemsTarget].selected = selected;
-        this.manager.changed();
-        return this.panels;
-    }
-    unsplit() {
-        const { items, selected } = this.panels[0];
-        this.panels = [];
-        this.items = items;
-        this.selected = selected;
-        this.manager.changed();
-    }
-    /**
-     * Decreases items index by 1 to all items with index at least equal to `fromIndex`.
-     * @param fromIndex The minimal index to affect.
-     */
-    decreaseIndex(fromIndex) {
-        for (const item of this.items) {
-            const { index = 0 } = item;
-            if (index >= fromIndex && index > 0) {
-                item.index -= 1;
-            }
-        }
-    }
-    /**
-     * Increases items index by 1 to all items with index at least equal to `fromIndex`.
-     * @param fromIndex The minimal index to affect.
-     */
-    increaseIndex(fromIndex) {
-        for (const item of this.items) {
-            const { index = 0 } = item;
-            if (index >= fromIndex) {
-                item.index += 1;
-            }
-        }
-    }
-    /**
-     * Removes an item from the layout
-     * @param key The key of the item.
-     * @returns The removed item, if any.
-     */
-    removeItem(key) {
-        const index = this.items.findIndex(i => i.key === key);
-        if (index < 0) {
-            return undefined;
-        }
-        const removed = this.items[index];
-        this.items.splice(index, 1);
-        this.decreaseIndex(removed.index || 0);
-        if (this.items.length === 0) {
-            // remove panel
-            if (this.parent) {
-                this.parent.removePanel(this.id);
-            }
-        }
-        if (this.selected === key) {
-            let nextKey;
-            if (this.items[index]) {
-                nextKey = this.items[index].key;
-            }
-            else if (this.items[index - 1]) {
-                nextKey = this.items[index - 1].key;
-            }
-            this.selected = nextKey;
-        }
-        this.manager.dispatchEvent(new CustomEvent('closetab', {
-            bubbles: true,
-            cancelable: true,
-            composed: true,
-            detail: key,
-        }));
-        this.manager.changed();
-        this.manager.forceUpdateLayout(this.id);
-        return removed;
-    }
-    /**
-     * @param key The key of the item to perform a relative operation from.
-     * @param dir The direction to which close other items. Default to both directions leaving only the `key` item
-     */
-    relativeClose(key, dir = 'both') {
-        const index = this.items.findIndex(i => i.key === key);
-        if (index < 0) {
-            return;
-        }
-        const item = this.items[index];
-        if (dir === 'both') {
-            this.items = [item];
-            this.selected = item.key;
-        }
-        else if (dir === 'left') {
-            this.items = this.items.splice(index);
-            this.selected = item.key;
-        }
-        else {
-            this.items = this.items.splice(0, index + 1);
-            this.selected = item.key;
-        }
-        this.manager.changed();
-        this.manager.forceUpdateLayout(this.id);
-    }
-    removePanel(id) {
-        const index = this.panels.findIndex(p => p.id === id);
-        if (index < 0) {
-            return;
-        }
-        this.panels.splice(index, 1);
-        if (this.panels.length === 1) {
-            this.unsplit();
-        }
-        this.manager.changed();
-        this.manager.forceUpdateLayout(this.id);
-    }
-    /**
-     * Moves an item to a new index.
-     *
-     * @param key The item key
-     * @param toIndex The new index. When not set it moves the item to the end.
-     */
-    moveItem(key, toIndex) {
-        const item = this.items.find(i => i.key === key);
-        if (!item) {
-            return;
-        }
-        const hasIndex = typeof toIndex === 'number';
-        if (hasIndex && item.index === toIndex) {
-            return;
-        }
-        let hasTargetAtTarget = false;
-        if (hasIndex) {
-            hasTargetAtTarget = !!this.items[toIndex];
-        }
-        if (item.index !== undefined) {
-            this.decreaseIndex(item.index);
-        }
-        const finalIndex = hasIndex ? toIndex : this.nextIndex();
-        if (hasTargetAtTarget) {
-            this.increaseIndex(finalIndex);
-        }
-        item.index = finalIndex;
-        this.manager.changed();
-        this.manager.forceUpdateLayout(this.id);
-    }
-    rename(key, label) {
-        const item = this.items.find(i => i.key === key);
-        if (!item) {
-            return;
-        }
-        item.label = label;
-        this.manager.changed();
-        this.manager.forceUpdateLayout(this.id);
-    }
-    toJSON() {
-        const result = {
-            id: this.id,
-            layout: this.layout,
-        };
-        if (this.items.length) {
-            result.items = this.items.map(i => ({ ...i }));
-        }
-        if (this.panels) {
-            result.panels = this.panels.map(i => i.toJSON());
-        }
-        if (this.selected) {
-            result.selected = this.selected;
-        }
-        return result;
-    }
-    panelTemplate(panel, itemCallback) {
-        const { layout, panels, items, selected } = panel;
-        const { manager } = this;
-        const { dragTypes, constrain } = manager.opts;
-        let content;
-        if (panels.length) {
-            content = panels.map(p => this.panelTemplate(p, itemCallback));
-        }
-        else {
-            content = items.map(p => this.itemTemplate(p, p.key === selected, itemCallback));
-        }
-        const valid = content.filter(i => !!i);
-        if (!valid.length) {
-            return undefined;
-        }
-        return html `
-    <layout-panel 
-      layout="${layout}" 
-      .dragTypes="${dragTypes}" 
-      .panel="${panel}"
-      .layoutId="${panel.id}"
-      ?constrain="${constrain}"
-    >
-      ${content}
-    </layout-panel>
-    `;
-    }
-    itemTemplate(item, visible, itemCallback) {
-        return itemCallback(item, visible);
-    }
-    render(itemCallback) {
-        return this.panelTemplate(this, itemCallback);
-    }
-}
-/**
- * Layout manager for API Client apps.
- *
- * Supports:
- * - layout splitting depending on the selected region (east, west, north, south)
- * - drag and drop of items into the layout
- * - auto storing and restoring layout state from the application local storage.
- * - adding items to the last focused panel
- *
- * Limitations
- * - the rendered content has to be focusable (tabindex must be set) in order to detect active panel
- */
-export class LayoutManager extends EventTarget {
-    /**
-     * An active panel
-     */
-    get activePanel() {
-        if (!this._activePanel) {
-            this._activePanel = this.findFirstItemsPanel();
-        }
-        return this._activePanel;
-    }
-    constructor(opts = {}) {
-        super();
-        this.panels = [];
-        this.isDirty = false;
-        this.storing = false;
-        this.opts = opts;
-    }
-    /**
-     * @param itemCallback The callback called when rendering an item in layout view.
-     * @returns The template for the page layout.
-     */
-    render(itemCallback) {
-        const result = [];
-        this.panels.forEach(p => {
-            const content = p.render(itemCallback);
-            if (content) {
-                result.push(content);
-            }
-        });
-        return result;
-    }
-    /**
-     * Initializes the manager.
-     *
-     * @param restore Previously stored layout state, if any.
-     */
-    async initialize(restore) {
-        if (restore) {
-            this.restore(restore);
-        }
-        else if (this.opts.storeKey && this.opts.autoStore) {
-            await this.restoreLayout(this.opts.storeKey);
-        }
-        if (!this.panels.length) {
-            this.panels.push(new LayoutPanel(this));
-        }
-        document.body.addEventListener('focusin', this._focusInHandler.bind(this));
-    }
-    restore(restore) {
-        if (Array.isArray(restore.panels)) {
-            this.panels = restore.panels.map(i => LayoutPanel.fromSchema(i, this));
-        }
-    }
-    /**
-     * Informs the screen that something has changed
-     */
-    changed() {
-        this.dispatchEvent(new Event('change'));
-        this.autoStore();
-    }
-    /**
-     * Dispatches the `nameitem` event.
-     * The detail object has the item to be added to the items.
-     * The event handler can manipulate properties of the item, except for the index which will be set by the manager.
-     *
-     * @param item The item to notify.
-     */
-    nameItem(item) {
-        this.dispatchEvent(new CustomEvent('nameitem', {
-            detail: item,
-        }));
-    }
-    /**
-     * Serializes the layout state to a JSON safe object.
-     * This is automatically called when passing this object to `JSON.stringify()`.
-     */
-    toJSON() {
-        const result = {
-            panels: this.panels.map(i => i.toJSON()),
-        };
-        return result;
-    }
-    autoStore() {
-        const { autoStore, storeKey } = this.opts;
-        if (!autoStore || !storeKey) {
-            return;
-        }
-        this.storeLayout(storeKey);
-    }
-    async storeLayout(key) {
-        if (this.storing) {
-            this.isDirty = true;
-            return;
-        }
-        this.storing = true;
-        try {
-            await Events.Config.Local.set(key, this.toJSON());
-        }
-        finally {
-            this.storing = false;
-        }
-        if (this.isDirty) {
-            this.isDirty = false;
-            await this.storeLayout(key);
-        }
-    }
-    async restoreLayout(key) {
-        try {
-            const data = await Events.Config.Local.get(key);
-            if (data) {
-                this.restore(data);
-            }
-        }
-        catch (e) {
-            // 
-        }
-    }
-    _focusInHandler(e) {
-        const layout = this.findLayout(e);
-        if (layout) {
-            const id = Number(layout.dataset.panel);
-            const { activePanel } = this;
-            if (activePanel && activePanel.id === id) {
-                return;
-            }
-            this._activePanel = this.findPanel(id);
-        }
-    }
-    findLayout(e, last = true) {
-        const path = e.composedPath();
-        if (!last) {
-            path.reverse();
-        }
-        while (path.length) {
-            const node = path.shift();
-            if (node.nodeType !== Node.ELEMENT_NODE) {
-                continue;
-            }
-            if (node.localName === 'layout-panel') {
-                return node;
-            }
-        }
-        return undefined;
-    }
-    /**
-     * Finds a panel by id.
-     *
-     * @param id The id of the panel.
-     * @param parent THe parent panel to start searching from
-     * @returns The panel if found
-     */
-    findPanel(id, parent) {
-        const panels = parent && parent.panels || this.panels;
-        for (const p of panels) {
-            if (p.id === id) {
-                return p;
-            }
-            const child = this.findPanel(id, p);
-            if (child) {
-                return child;
-            }
-        }
-        return undefined;
-    }
-    /**
-     * Finds a first panel that can accept items.
-     * This will be a panel that has no other panels.
-     */
-    findFirstItemsPanel(parent) {
-        const panels = parent && parent.panels || this.panels;
-        for (const p of panels) {
-            if (!p.hasPanels) {
-                return p;
-            }
-            const child = this.findFirstItemsPanel(p);
-            if (child) {
-                return child;
-            }
-        }
-        return undefined;
-    }
-    /**
-     * Finds a panel for the item.
-     * @param key the key of the item to find.
-     */
-    findItemPanel(key, parent) {
-        const panels = parent && parent.panels || this.panels;
-        for (const p of panels) {
-            const { items } = p;
-            for (const i of items) {
-                if (i.key === key) {
-                    return p;
-                }
-            }
-            const deep = this.findItemPanel(key, p);
-            if (deep) {
-                return deep;
-            }
-        }
-        return undefined;
-    }
-    /**
-     * Finds a layout item.
-     * @param key the key of the item to find.
-     */
-    findItem(key, parent) {
-        const panels = parent && parent.panels || this.panels;
-        for (const p of panels) {
-            const { items } = p;
-            for (const i of items) {
-                if (i.key === key) {
-                    return i;
-                }
-            }
-            const deep = this.findItem(key, p);
-            if (deep) {
-                return deep;
-            }
-        }
-        return undefined;
-    }
-    *parentItemIterator(key, parent) {
-        const panels = parent ? parent.panels : this.panels;
-        for (const p of panels) {
-            const { items } = p;
-            for (const i of items) {
-                if (i.parent === key) {
-                    yield i;
-                }
-            }
-            for (const result of this.parentItemIterator(key, p)) {
-                yield result;
-            }
-        }
-    }
-    /**
-     * Adds an item to the active panel.
-     *
-     * @param item The item to add.
-     */
-    addItem(item) {
-        const { activePanel } = this;
-        if (!activePanel) {
-            throw new Error(`Unable to determine an active panel.`);
-        }
-        activePanel.addItem(item);
-        this.forceUpdateLayout();
-    }
-    /**
-     * Removes an item from layout.
-     * @param key The key of the item to remove.
-     */
-    removeItem(key) {
-        const panel = this.findItemPanel(key);
-        if (panel) {
-            panel.removeItem(key);
-        }
-    }
-    /**
-     * @param key The key of the item to perform a relative operation from.
-     * @param dir The direction to which close other items. Default to both directions leaving only the `key` item
-     */
-    relativeClose(key, dir = 'both') {
-        const panel = this.findItemPanel(key);
-        if (panel) {
-            panel.relativeClose(key, dir);
-        }
-    }
-    /**
-     * Requests an update on a layout.
-     *
-     * @param id The id of the panel. When not set it uses the active panel
-     */
-    forceUpdateLayout(id) {
-        let key;
-        if (id === undefined) {
-            const panel = this.activePanel;
-            if (!panel) {
-                return;
-            }
-            key = panel.id;
-        }
-        else {
-            key = id;
-        }
-        const layout = document.querySelector(`layout-panel[layoutId="${key}"]`);
-        if (!layout) {
-            return;
-        }
-        layout.requestUpdate();
-    }
-    /**
-     * Moves a tab between panels or inside a panel
-     *
-     * @param fromPanel The id of the source panel of the item
-     * @param toPanel The id of the target panel of the item
-     * @param key The key of the item
-     * @param toIndex The index to which add the item. Default as the last.
-     */
-    moveTab(fromPanel, toPanel, key, toIndex) {
-        const singlePanel = fromPanel === toPanel;
-        const from = this.findPanel(fromPanel);
-        if (!from) {
-            throw new Error(`The source layout panel not found.`);
-        }
-        if (singlePanel) {
-            from.moveItem(key, toIndex);
-        }
-        else {
-            const to = this.findPanel(toPanel);
-            if (!to) {
-                throw new Error(`The target layout panel not found.`);
-            }
-            const removed = from.removeItem(key);
-            if (!removed) {
-                return;
-            }
-            to.addItem(removed, { index: toIndex });
-        }
-        this.changed();
-    }
-    /**
-     * Finds the item's panel and renames the item.
-     *
-     * @param key The item's key
-     * @param label The new label
-     */
-    rename(key, label) {
-        const panel = this.findItemPanel(key);
-        if (panel) {
-            panel.rename(key, label);
-            this.changed();
-            this.forceUpdateLayout(panel.id);
-        }
-    }
-    /**
-     * Requests to dispatch the `nameitem` event so the application can update the name of the tab.
-     *
-     * @param key The key of the item.
-     */
-    requestNameUpdate(key) {
-        const item = this.findItem(key);
-        if (!item) {
-            return;
-        }
-        const before = item.label;
-        this.nameItem(item);
-        if (before !== item.label) {
-            const panel = this.findItemPanel(key);
-            if (panel) {
-                this.forceUpdateLayout(panel.id);
-            }
-        }
-    }
-    /**
-     * Requests to dispatch the `nameitem` event so the application can update the name of a tab
-     * that has a parent.
-     *
-     * @param parent The key of the parent.
-     */
-    parentNameUpdate(parent) {
-        for (const item of this.parentItemIterator(parent)) {
-            const before = item.label;
-            this.nameItem(item);
-            if (before !== item.label) {
-                const panel = this.findItemPanel(item.key);
-                if (panel) {
-                    this.forceUpdateLayout(panel.id);
-                }
-            }
-        }
-    }
-    /**
-     * Finds all items in all panels that have specified parent.
-     * @param key The key of the parent to search for.
-     */
-    removeByParent(key) {
-        for (const item of this.parentItemIterator(key)) {
-            this.removeItem(item.key);
-        }
-    }
-}
-//# sourceMappingURL=LayoutManager.js.map