@theia/core
Version:
Theia is a cloud & desktop IDE framework implemented in TypeScript.
286 lines • 14.5 kB
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