@theia/core/lib/browser/shell/tab-bars.d.ts

Theia is a cloud & desktop IDE framework implemented in TypeScript.

import PerfectScrollbar from 'perfect-scrollbar';
import { TabBar, Title, Widget } from '@phosphor/widgets';
import { VirtualElement, ElementInlineStyle } from '@phosphor/virtualdom';
import { DisposableCollection, MenuPath, SelectionService, CommandService } from '../../common';
import { ContextMenuRenderer } from '../context-menu-renderer';
import { Signal } from '@phosphor/signaling';
import { Message } from '@phosphor/messaging';
import { TabBarToolbarRegistry, TabBarToolbar } from './tab-bar-toolbar';
import { WidgetDecoration } from '../widget-decoration';
import { TabBarDecoratorService } from './tab-bar-decorator';
import { IconThemeService } from '../icon-theme-service';
import { BreadcrumbsRenderer, BreadcrumbsRendererFactory } from '../breadcrumbs/breadcrumbs-renderer';
import { IDragEvent } from '@phosphor/dragdrop';
import { CorePreferences } from '../core-preferences';
import { HoverService } from '../hover-service';
/** Menu path for tab bars used throughout the application shell. */
export declare const SHELL_TABBAR_CONTEXT_MENU: MenuPath;
export declare const SHELL_TABBAR_CONTEXT_CLOSE: MenuPath;
export declare const SHELL_TABBAR_CONTEXT_COPY: MenuPath;
export declare const SHELL_TABBAR_CONTEXT_PIN: MenuPath;
export declare const SHELL_TABBAR_CONTEXT_SPLIT: MenuPath;
export declare const TabBarRendererFactory: unique symbol;
export declare type TabBarRendererFactory = () => TabBarRenderer;
/**
 * Size information of DOM elements used for rendering tabs in side bars.
 */
export interface SizeData {
    width: number;
    height: number;
}
/**
 * Extension of the rendering data used for tabs in side bars of the application shell.
 */
export interface SideBarRenderData extends TabBar.IRenderData<Widget> {
    labelSize?: SizeData;
    iconSize?: SizeData;
    paddingTop?: number;
    paddingBottom?: number;
}
/**
 * A tab bar renderer that offers a context menu. In addition, this renderer is able to
 * set an explicit position and size on the icon and label of each tab in a side bar.
 * This is necessary because the elements of side bar tabs are rotated using the CSS
 * `transform` property, disrupting the browser's ability to arrange those elements
 * automatically.
 */
export declare class TabBarRenderer extends TabBar.Renderer {
    protected readonly contextMenuRenderer?: ContextMenuRenderer | undefined;
    protected readonly decoratorService?: TabBarDecoratorService | undefined;
    protected readonly iconThemeService?: IconThemeService | undefined;
    protected readonly selectionService?: SelectionService | undefined;
    protected readonly commandService?: CommandService | undefined;
    protected readonly corePreferences?: CorePreferences | undefined;
    protected readonly hoverService?: HoverService | undefined;
    /**
     * The menu path used to render the context menu.
     */
    contextMenuPath?: MenuPath;
    protected readonly toDispose: DisposableCollection;
    constructor(contextMenuRenderer?: ContextMenuRenderer | undefined, decoratorService?: TabBarDecoratorService | undefined, iconThemeService?: IconThemeService | undefined, selectionService?: SelectionService | undefined, commandService?: CommandService | undefined, corePreferences?: CorePreferences | undefined, hoverService?: HoverService | undefined);
    dispose(): void;
    protected _tabBar?: TabBar<Widget>;
    protected readonly toDisposeOnTabBar: DisposableCollection;
    /**
     * A reference to the tab bar is required in order to activate it when a context menu
     * is requested.
     */
    set tabBar(tabBar: TabBar<Widget> | undefined);
    get tabBar(): TabBar<Widget> | undefined;
    /**
     * Render tabs with the default DOM structure, but additionally register a context menu listener.
     * @param {SideBarRenderData} data Data used to render the tab.
     * @param {boolean} isInSidePanel An optional check which determines if the tab is in the side-panel.
     * @param {boolean} isPartOfHiddenTabBar An optional check which determines if the tab is in the hidden horizontal tab bar.
     * @returns {VirtualElement} The virtual element of the rendered tab.
     */
    renderTab(data: SideBarRenderData, isInSidePanel?: boolean, isPartOfHiddenTabBar?: boolean): VirtualElement;
    /**
     * Generate ID for an entry in the tab bar
     * @param {Title<Widget>} title Title of the widget controlled by this tab bar
     * @param {boolean} isPartOfHiddenTabBar Tells us if this entry is part of the hidden horizontal tab bar.
     *      If yes, add a suffix to differentiate it's ID from the entry in the visible tab bar
     * @returns {string} DOM element ID
     */
    createTabId(title: Title<Widget>, isPartOfHiddenTabBar?: boolean): string;
    /**
     * If size information is available for the label and icon, set an explicit height on the tab.
     * The height value also considers padding, which should be derived from CSS settings.
     */
    createTabStyle(data: SideBarRenderData): ElementInlineStyle;
    /**
     * If size information is available for the label, set it as inline style.
     * Tab padding and icon size are also considered in the `top` position.
     * @param {SideBarRenderData} data Data used to render the tab.
     * @param {boolean} isInSidePanel An optional check which determines if the tab is in the side-panel.
     * @returns {VirtualElement} The virtual element of the rendered label.
     */
    renderLabel(data: SideBarRenderData, isInSidePanel?: boolean): VirtualElement;
    renderBadge(data: SideBarRenderData, isInSidePanel?: boolean): VirtualElement;
    renderLock(data: SideBarRenderData, isInSidePanel?: boolean): VirtualElement;
    protected readonly decorations: Map<Title<Widget>, WidgetDecoration.Data[]>;
    protected resetDecorations(title?: Title<Widget>): void;
    /**
     * Get all available decorations of a given tab.
     * @param {string} title The widget title.
     */
    protected getDecorations(title: Title<Widget>): WidgetDecoration.Data[];
    /**
     * Get the decoration data given the tab URI and the decoration data type.
     * @param {string} title The title.
     * @param {K} key The type of the decoration data.
     */
    protected getDecorationData<K extends keyof WidgetDecoration.Data>(title: Title<Widget>, key: K): WidgetDecoration.Data[K][];
    /**
     * Get the class of an icon.
     * @param {string | string[]} iconName The name of the icon.
     * @param {string[]} additionalClasses Additional classes of the icon.
     */
    private getIconClass;
    /**
     * Find duplicate labels from the currently opened tabs in the tab bar.
     * Return the appropriate partial paths that can distinguish the identical labels.
     *
     * E.g., a/p/index.ts => a/..., b/p/index.ts => b/...
     *
     * To prevent excessively long path displayed, show at maximum three levels from the end by default.
     * @param {Title<Widget>[]} titles Array of titles in the current tab bar.
     * @returns {Map<string, string>} A map from each tab's original path to its displayed partial path.
     */
    findDuplicateLabels(titles: Title<Widget>[]): Map<string, string>;
    /**
     * If size information is available for the icon, set it as inline style. Tab padding
     * is also considered in the `top` position.
     * @param {SideBarRenderData} data Data used to render the tab icon.
     * @param {boolean} isInSidePanel An optional check which determines if the tab is in the side-panel.
     */
    renderIcon(data: SideBarRenderData, isInSidePanel?: boolean): VirtualElement;
    protected handleMouseEnterEvent: (event: MouseEvent) => void;
    protected handleContextMenuEvent: (event: MouseEvent) => void;
    protected handleCloseClickEvent: (event: MouseEvent) => void;
    protected handleDblClickEvent: (event: MouseEvent) => void;
}
/**
 * A specialized tab bar for the main and bottom areas.
 */
export declare class ScrollableTabBar extends TabBar<Widget> {
    protected scrollBar?: PerfectScrollbar;
    private scrollBarFactory;
    private pendingReveal?;
    protected readonly toDispose: DisposableCollection;
    constructor(options?: TabBar.IOptions<Widget> & PerfectScrollbar.Options);
    dispose(): void;
    protected onAfterAttach(msg: Message): void;
    protected onBeforeDetach(msg: Message): void;
    protected onUpdateRequest(msg: Message): void;
    protected onResize(msg: Widget.ResizeMessage): void;
    /**
     * Reveal the tab with the given index by moving the scroll bar if necessary.
     */
    revealTab(index: number): Promise<void>;
    protected get scrollbarHost(): HTMLElement;
}
/**
 * Specialized scrollable tab-bar which comes with toolbar support.
 * Instead of the following DOM structure.
 *
 * +-------------------------+
 * |[TAB_0][TAB_1][TAB_2][TAB|
 * +-------------Scrollable--+
 *
 * There is a dedicated HTML element for toolbar which does **not** contained in the scrollable element.
 *
 * +-------------------------+-----------------+
 * |[TAB_0][TAB_1][TAB_2][TAB|         Toolbar |
 * +-------------Scrollable--+-Non-Scrollable-+
 *
 */
export declare class ToolbarAwareTabBar extends ScrollableTabBar {
    protected readonly tabBarToolbarRegistry: TabBarToolbarRegistry;
    protected readonly tabBarToolbarFactory: () => TabBarToolbar;
    protected readonly breadcrumbsRendererFactory: BreadcrumbsRendererFactory;
    protected readonly options?: (TabBar.IOptions<Widget> & PerfectScrollbar.Options) | undefined;
    protected contentContainer: HTMLElement;
    protected toolbar: TabBarToolbar | undefined;
    protected breadcrumbsContainer: HTMLElement;
    protected readonly breadcrumbsRenderer: BreadcrumbsRenderer;
    protected topRow: HTMLElement;
    constructor(tabBarToolbarRegistry: TabBarToolbarRegistry, tabBarToolbarFactory: () => TabBarToolbar, breadcrumbsRendererFactory: BreadcrumbsRendererFactory, options?: (TabBar.IOptions<Widget> & PerfectScrollbar.Options) | undefined);
    /**
     * Overrides the `contentNode` property getter in PhosphorJS' TabBar.
     */
    get contentNode(): HTMLUListElement;
    /**
     * Overrides the scrollable host from the parent class.
     */
    protected get scrollbarHost(): HTMLElement;
    protected get tabBarContainer(): HTMLElement;
    protected updateBreadcrumbs(): Promise<void>;
    protected onAfterAttach(msg: Message): void;
    protected onBeforeDetach(msg: Message): void;
    protected onUpdateRequest(msg: Message): void;
    protected updateToolbar(): void;
    handleEvent(event: Event): void;
    /**
     * Restructures the DOM defined in PhosphorJS.
     *
     * By default the tabs (`li`) are contained in the `this.contentNode` (`ul`) which is wrapped in a `div` (`this.node`).
     * Instead of this structure, we add a container for the `this.contentNode` and for the toolbar.
     * The scrollbar will only work for the `ul` part but it does not affect the toolbar, so it can be on the right hand-side.
     */
    protected rewireDOM(): void;
}
export declare namespace ToolbarAwareTabBar {
    namespace Styles {
        const TAB_BAR_CONTENT = "p-TabBar-content";
        const TAB_BAR_CONTENT_CONTAINER = "p-TabBar-content-container";
    }
}
/**
 * A specialized tab bar for side areas.
 */
export declare class SideTabBar extends ScrollableTabBar {
    private static readonly DRAG_THRESHOLD;
    /**
     * Emitted when a tab is added to the tab bar.
     */
    readonly tabAdded: Signal<this, {
        title: Title<Widget>;
    }>;
    /**
     * Side panels can be collapsed by clicking on the currently selected tab. This signal is
     * emitted when the mouse is released on the selected tab without initiating a drag.
     */
    readonly collapseRequested: Signal<this, Title<Widget>>;
    private mouseData?;
    constructor(options?: TabBar.IOptions<Widget> & PerfectScrollbar.Options);
    /**
     * Tab bars of the left and right side panel are arranged vertically by rotating their labels.
     * Rotation is realized with the CSS `transform` property, which disrupts the browser's ability
     * to arrange the involved elements automatically. Therefore the elements are arranged explicitly
     * by the TabBarRenderer using inline `height` and `top` styles. However, the size of labels
     * must still be computed by the browser, so the rendering is performed in two steps: first the
     * tab bar is rendered horizontally inside a _hidden content node_, then it is rendered again
     * vertically inside the proper content node. After the first step, size information is gathered
     * from all labels so it can be applied during the second step.
     */
    get hiddenContentNode(): HTMLUListElement;
    insertTab(index: number, value: Title<Widget> | Title.IOptions<Widget>): Title<Widget>;
    protected onAfterAttach(msg: Message): void;
    protected onAfterDetach(msg: Message): void;
    protected onUpdateRequest(msg: Message): void;
    /**
     * Render the tab bar in the _hidden content node_ (see `hiddenContentNode` for explanation),
     * then gather size information for labels and render it again in the proper content node.
     */
    protected renderTabBar(): void;
    /**
     * Render the tab bar using the given DOM element as host. The optional `renderData` is forwarded
     * to the TabBarRenderer.
     */
    protected renderTabs(host: HTMLElement, renderData?: Partial<SideBarRenderData>[]): void;
    /**
     * The following event processing is used to generate `collapseRequested` signals
     * when the mouse goes up on the currently selected tab without too much movement
     * between `mousedown` and `mouseup`. The movement threshold is the same that
     * is used by the superclass to detect a drag event. The `allowDeselect` option
     * of the TabBar constructor cannot be used here because it is triggered when the
     * mouse goes down, and thus collides with dragging.
     */
    handleEvent(event: Event): void;
    private onMouseDown;
    private onMouseUp;
    private onMouseMove;
    toCancelViewContainerDND: DisposableCollection;
    protected cancelViewContainerDND: () => void;
    /**
     * Handles `viewContainerPart` drag enter.
     */
    protected onDragEnter: (event: IDragEvent) => void;
    /**
     * Handle `viewContainerPart` drag over,
     * Defines the appropriate `dropAction` and opens the tab on which the mouse stands on for more than 800 ms.
     */
    protected onDragOver: (event: IDragEvent) => void;
}
//# sourceMappingURL=tab-bars.d.ts.map