@theia/core
Version:
Theia is a cloud & desktop IDE framework implemented in TypeScript.
1,102 lines • 83.6 kB
JavaScript
"use strict";
// *****************************************************************************
// Copyright (C) 2018 TypeFox and others.
//
// This program and the accompanying materials are made available under the
// terms of the Eclipse Public License v. 2.0 which is available at
// http://www.eclipse.org/legal/epl-2.0.
//
// This Source Code may also be made available under the following Secondary
// Licenses when the conditions for such availability set forth in the Eclipse
// Public License v. 2.0 are satisfied: GNU General Public License, version 2
// with the GNU Classpath Exception which is available at
// https://www.gnu.org/software/classpath/license.html.
//
// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
// *****************************************************************************
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var __param = (this && this.__param) || function (paramIndex, decorator) {
return function (target, key) { decorator(target, key, paramIndex); }
};
var ApplicationShell_1;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ApplicationShell = exports.DockPanelRenderer = exports.DockPanelRendererFactory = exports.ApplicationShellOptions = exports.applicationShellLayoutVersion = void 0;
const inversify_1 = require("inversify");
const algorithm_1 = require("@phosphor/algorithm");
const widgets_1 = require("@phosphor/widgets");
const common_1 = require("../../common");
const browser_1 = require("../browser");
const saveable_1 = require("../saveable");
const status_bar_1 = require("../status-bar/status-bar");
const theia_dock_panel_1 = require("./theia-dock-panel");
const side_panel_handler_1 = require("./side-panel-handler");
const tab_bars_1 = require("./tab-bars");
const split_panels_1 = require("./split-panels");
const frontend_application_state_1 = require("../frontend-application-state");
const tab_bar_toolbar_1 = require("./tab-bar-toolbar");
const context_key_service_1 = require("../context-key-service");
const event_1 = require("../../common/event");
const widgets_2 = require("../widgets");
const core_preferences_1 = require("../core-preferences");
const breadcrumbs_renderer_1 = require("../breadcrumbs/breadcrumbs-renderer");
const promise_util_1 = require("../../common/promise-util");
const save_resource_service_1 = require("../save-resource-service");
const nls_1 = require("../../common/nls");
const secondary_window_handler_1 = require("../secondary-window-handler");
const uri_1 = require("../../common/uri");
const opener_service_1 = require("../opener-service");
const previewable_widget_1 = require("../widgets/previewable-widget");
/** The class name added to ApplicationShell instances. */
const APPLICATION_SHELL_CLASS = 'theia-ApplicationShell';
/** The class name added to the main and bottom area panels. */
const MAIN_BOTTOM_AREA_CLASS = 'theia-app-centers';
/** Status bar entry identifier for the bottom panel toggle button. */
const BOTTOM_PANEL_TOGGLE_ID = 'bottom-panel-toggle';
/** The class name added to the main area panel. */
const MAIN_AREA_CLASS = 'theia-app-main';
/** The class name added to the bottom area panel. */
const BOTTOM_AREA_CLASS = 'theia-app-bottom';
/**
* When a version is increased, make sure to introduce a migration (ApplicationShellLayoutMigration) to this version.
*/
exports.applicationShellLayoutVersion = 5.0;
exports.ApplicationShellOptions = Symbol('ApplicationShellOptions');
exports.DockPanelRendererFactory = Symbol('DockPanelRendererFactory');
/**
* A renderer for dock panels that supports context menus on tabs.
*/
let DockPanelRenderer = class DockPanelRenderer {
constructor(tabBarRendererFactory, tabBarToolbarRegistry, tabBarToolbarFactory, breadcrumbsRendererFactory, corePreferences) {
this.tabBarRendererFactory = tabBarRendererFactory;
this.tabBarToolbarRegistry = tabBarToolbarRegistry;
this.tabBarToolbarFactory = tabBarToolbarFactory;
this.breadcrumbsRendererFactory = breadcrumbsRendererFactory;
this.corePreferences = corePreferences;
this.tabBarClasses = [];
this.onDidCreateTabBarEmitter = new event_1.Emitter();
}
get onDidCreateTabBar() {
return this.onDidCreateTabBarEmitter.event;
}
createTabBar() {
const getDynamicTabOptions = () => {
if (this.corePreferences.get('workbench.tab.shrinkToFit.enabled')) {
return {
minimumTabSize: this.corePreferences.get('workbench.tab.shrinkToFit.minimumSize'),
defaultTabSize: this.corePreferences.get('workbench.tab.shrinkToFit.defaultSize')
};
}
else {
return undefined;
}
};
const renderer = this.tabBarRendererFactory();
const tabBar = new tab_bars_1.ToolbarAwareTabBar(this.tabBarToolbarRegistry, this.tabBarToolbarFactory, this.breadcrumbsRendererFactory, {
renderer,
// Scroll bar options
handlers: ['drag-thumb', 'keyboard', 'wheel', 'touch'],
useBothWheelAxes: true,
scrollXMarginOffset: 4,
suppressScrollY: true
}, getDynamicTabOptions());
this.tabBarClasses.forEach(c => tabBar.addClass(c));
renderer.tabBar = tabBar;
tabBar.disposed.connect(() => renderer.dispose());
renderer.contextMenuPath = tab_bars_1.SHELL_TABBAR_CONTEXT_MENU;
tabBar.currentChanged.connect(this.onCurrentTabChanged, this);
this.corePreferences.onPreferenceChanged(change => {
if (change.preferenceName === 'workbench.tab.shrinkToFit.enabled' ||
change.preferenceName === 'workbench.tab.shrinkToFit.minimumSize' ||
change.preferenceName === 'workbench.tab.shrinkToFit.defaultSize') {
tabBar.dynamicTabOptions = getDynamicTabOptions();
}
});
this.onDidCreateTabBarEmitter.fire(tabBar);
return tabBar;
}
createHandle() {
return widgets_1.DockPanel.defaultRenderer.createHandle();
}
onCurrentTabChanged(sender, { currentIndex }) {
if (currentIndex >= 0) {
sender.revealTab(currentIndex);
}
}
};
__decorate([
(0, inversify_1.inject)(theia_dock_panel_1.TheiaDockPanel.Factory),
__metadata("design:type", Function)
], DockPanelRenderer.prototype, "dockPanelFactory", void 0);
DockPanelRenderer = __decorate([
(0, inversify_1.injectable)(),
__param(0, (0, inversify_1.inject)(tab_bars_1.TabBarRendererFactory)),
__param(1, (0, inversify_1.inject)(tab_bar_toolbar_1.TabBarToolbarRegistry)),
__param(2, (0, inversify_1.inject)(tab_bar_toolbar_1.TabBarToolbarFactory)),
__param(3, (0, inversify_1.inject)(breadcrumbs_renderer_1.BreadcrumbsRendererFactory)),
__param(4, (0, inversify_1.inject)(core_preferences_1.CorePreferences)),
__metadata("design:paramtypes", [Function, tab_bar_toolbar_1.TabBarToolbarRegistry, Function, Function, Object])
], DockPanelRenderer);
exports.DockPanelRenderer = DockPanelRenderer;
/**
* The application shell manages the top-level widgets of the application. Use this class to
* add, remove, or activate a widget.
*/
let ApplicationShell = ApplicationShell_1 = class ApplicationShell extends widgets_1.Widget {
/**
* Construct a new application shell.
*/
constructor(dockPanelRendererFactory, statusBar, sidePanelHandlerFactory, splitPositionHandler, applicationStateService, options = {}, corePreferences, saveResourceService, secondaryWindowHandler) {
super(options);
this.dockPanelRendererFactory = dockPanelRendererFactory;
this.statusBar = statusBar;
this.sidePanelHandlerFactory = sidePanelHandlerFactory;
this.splitPositionHandler = splitPositionHandler;
this.applicationStateService = applicationStateService;
this.corePreferences = corePreferences;
this.saveResourceService = saveResourceService;
this.secondaryWindowHandler = secondaryWindowHandler;
/**
* The current state of the bottom panel.
*/
this.bottomPanelState = {
empty: true,
expansion: side_panel_handler_1.SidePanel.ExpansionState.collapsed,
pendingUpdate: Promise.resolve()
};
this.tracker = new widgets_1.FocusTracker();
this.onDidAddWidgetEmitter = new event_1.Emitter();
this.onDidAddWidget = this.onDidAddWidgetEmitter.event;
this.onDidRemoveWidgetEmitter = new event_1.Emitter();
this.onDidRemoveWidget = this.onDidRemoveWidgetEmitter.event;
this.onDidChangeActiveWidgetEmitter = new event_1.Emitter();
this.onDidChangeActiveWidget = this.onDidChangeActiveWidgetEmitter.event;
this.onDidChangeCurrentWidgetEmitter = new event_1.Emitter();
this.onDidChangeCurrentWidget = this.onDidChangeCurrentWidgetEmitter.event;
this.onDidDoubleClickMainAreaEmitter = new event_1.Emitter();
this.onDidDoubleClickMainArea = this.onDidDoubleClickMainAreaEmitter.event;
this.toDisposeOnActiveChanged = new common_1.DisposableCollection();
this.activationTimeout = 2000;
this.toDisposeOnActivationCheck = new common_1.DisposableCollection();
// Merge the user-defined application options with the default options
this.options = {
bottomPanel: {
...ApplicationShell_1.DEFAULT_OPTIONS.bottomPanel,
...(options === null || options === void 0 ? void 0 : options.bottomPanel) || {}
},
leftPanel: {
...ApplicationShell_1.DEFAULT_OPTIONS.leftPanel,
...(options === null || options === void 0 ? void 0 : options.leftPanel) || {}
},
rightPanel: {
...ApplicationShell_1.DEFAULT_OPTIONS.rightPanel,
...(options === null || options === void 0 ? void 0 : options.rightPanel) || {}
}
};
}
fireDidAddWidget(widget) {
this.onDidAddWidgetEmitter.fire(widget);
}
fireDidRemoveWidget(widget) {
this.onDidRemoveWidgetEmitter.fire(widget);
}
get mainPanelRenderer() {
return this._mainPanelRenderer;
}
init() {
this.initializeShell();
this.initSidebarVisibleKeyContext();
this.initFocusKeyContexts();
if (!common_1.environment.electron.is()) {
this.corePreferences.ready.then(() => {
this.setTopPanelVisibility(this.corePreferences['window.menuBarVisibility']);
});
this.corePreferences.onPreferenceChanged(preference => {
if (preference.preferenceName === 'window.menuBarVisibility') {
this.setTopPanelVisibility(preference.newValue);
}
});
}
this.corePreferences.onPreferenceChanged(preference => {
if (preference.preferenceName === 'window.tabbar.enhancedPreview') {
this.allTabBars.forEach(tabBar => {
tabBar.update();
});
}
});
}
initializeShell() {
this.addClass(APPLICATION_SHELL_CLASS);
this.id = 'theia-app-shell';
this.mainPanel = this.createMainPanel();
this.topPanel = this.createTopPanel();
this.bottomPanel = this.createBottomPanel();
this.leftPanelHandler = this.sidePanelHandlerFactory();
this.leftPanelHandler.create('left', this.options.leftPanel);
this.leftPanelHandler.dockPanel.widgetAdded.connect((_, widget) => this.fireDidAddWidget(widget));
this.leftPanelHandler.dockPanel.widgetRemoved.connect((_, widget) => this.fireDidRemoveWidget(widget));
this.rightPanelHandler = this.sidePanelHandlerFactory();
this.rightPanelHandler.create('right', this.options.rightPanel);
this.rightPanelHandler.dockPanel.widgetAdded.connect((_, widget) => this.fireDidAddWidget(widget));
this.rightPanelHandler.dockPanel.widgetRemoved.connect((_, widget) => this.fireDidRemoveWidget(widget));
this.secondaryWindowHandler.init(this);
this.secondaryWindowHandler.onDidAddWidget(widget => this.fireDidAddWidget(widget));
this.secondaryWindowHandler.onDidRemoveWidget(widget => this.fireDidRemoveWidget(widget));
this.layout = this.createLayout();
this.tracker.currentChanged.connect(this.onCurrentChanged, this);
this.tracker.activeChanged.connect(this.onActiveChanged, this);
}
initSidebarVisibleKeyContext() {
const leftSideBarPanel = this.leftPanelHandler.dockPanel;
const sidebarVisibleKey = this.contextKeyService.createKey('sidebarVisible', leftSideBarPanel.isVisible);
const onAfterShow = leftSideBarPanel['onAfterShow'].bind(leftSideBarPanel);
leftSideBarPanel['onAfterShow'] = (msg) => {
onAfterShow(msg);
sidebarVisibleKey.set(true);
};
const onAfterHide = leftSideBarPanel['onAfterHide'].bind(leftSideBarPanel);
leftSideBarPanel['onAfterHide'] = (msg) => {
onAfterHide(msg);
sidebarVisibleKey.set(false);
};
}
initFocusKeyContexts() {
const sideBarFocus = this.contextKeyService.createKey('sideBarFocus', false);
const panelFocus = this.contextKeyService.createKey('panelFocus', false);
const updateFocusContextKeys = () => {
const area = this.activeWidget && this.getAreaFor(this.activeWidget);
sideBarFocus.set(area === 'left');
panelFocus.set(area === 'main');
};
updateFocusContextKeys();
this.onDidChangeActiveWidget(updateFocusContextKeys);
}
setTopPanelVisibility(preference) {
const hiddenPreferences = ['compact', 'hidden'];
this.topPanel.setHidden(hiddenPreferences.includes(preference));
}
onBeforeAttach(msg) {
document.addEventListener('p-dragenter', this, true);
document.addEventListener('p-dragover', this, true);
document.addEventListener('p-dragleave', this, true);
document.addEventListener('p-drop', this, true);
}
onAfterDetach(msg) {
document.removeEventListener('p-dragenter', this, true);
document.removeEventListener('p-dragover', this, true);
document.removeEventListener('p-dragleave', this, true);
document.removeEventListener('p-drop', this, true);
}
handleEvent(event) {
switch (event.type) {
case 'p-dragenter':
this.onDragEnter(event);
break;
case 'p-dragover':
this.onDragOver(event);
break;
case 'p-drop':
this.onDrop(event);
break;
case 'p-dragleave':
this.onDragLeave(event);
break;
}
}
onDragEnter({ mimeData }) {
if (!this.dragState) {
if (mimeData && mimeData.hasData('application/vnd.phosphor.widget-factory')) {
// The drag contains a widget, so we'll track it and expand side panels as needed
this.dragState = {
startTime: performance.now(),
leftExpanded: false,
rightExpanded: false,
bottomExpanded: false
};
}
}
}
onDragOver(event) {
const state = this.dragState;
if (state) {
state.lastDragOver = event;
if (state.leaveTimeout) {
window.clearTimeout(state.leaveTimeout);
state.leaveTimeout = undefined;
}
const { clientX, clientY } = event;
const { offsetLeft, offsetTop, clientWidth, clientHeight } = this.node;
// Don't expand any side panels right after the drag has started
const allowExpansion = performance.now() - state.startTime >= 500;
const expLeft = allowExpansion && clientX >= offsetLeft
&& clientX <= offsetLeft + this.options.leftPanel.expandThreshold;
const expRight = allowExpansion && clientX <= offsetLeft + clientWidth
&& clientX >= offsetLeft + clientWidth - this.options.rightPanel.expandThreshold;
const expBottom = allowExpansion && !expLeft && !expRight && clientY <= offsetTop + clientHeight
&& clientY >= offsetTop + clientHeight - this.options.bottomPanel.expandThreshold;
// eslint-disable-next-line no-null/no-null
if (expLeft && !state.leftExpanded && this.leftPanelHandler.tabBar.currentTitle === null) {
// The mouse cursor is moved close to the left border
this.leftPanelHandler.expand();
this.leftPanelHandler.state.pendingUpdate.then(() => this.dispatchMouseMove());
state.leftExpanded = true;
}
else if (!expLeft && state.leftExpanded) {
// The mouse cursor is moved away from the left border
this.leftPanelHandler.collapse();
state.leftExpanded = false;
}
// eslint-disable-next-line no-null/no-null
if (expRight && !state.rightExpanded && this.rightPanelHandler.tabBar.currentTitle === null) {
// The mouse cursor is moved close to the right border
this.rightPanelHandler.expand();
this.rightPanelHandler.state.pendingUpdate.then(() => this.dispatchMouseMove());
state.rightExpanded = true;
}
else if (!expRight && state.rightExpanded) {
// The mouse cursor is moved away from the right border
this.rightPanelHandler.collapse();
state.rightExpanded = false;
}
if (expBottom && !state.bottomExpanded && this.bottomPanel.isHidden) {
// The mouse cursor is moved close to the bottom border
this.expandBottomPanel();
this.bottomPanelState.pendingUpdate.then(() => this.dispatchMouseMove());
state.bottomExpanded = true;
}
else if (!expBottom && state.bottomExpanded) {
// The mouse cursor is moved away from the bottom border
this.collapseBottomPanel();
state.bottomExpanded = false;
}
}
}
/**
* This method is called after a side panel has been expanded while dragging a widget. It fires
* a `mousemove` event so that the drag overlay markers are updated correctly in all dock panels.
*/
dispatchMouseMove() {
if (this.dragState && this.dragState.lastDragOver) {
const { clientX, clientY } = this.dragState.lastDragOver;
const event = document.createEvent('MouseEvent');
event.initMouseEvent('mousemove', true, true, window, 0, 0, 0,
// eslint-disable-next-line no-null/no-null
clientX, clientY, false, false, false, false, 0, null);
document.dispatchEvent(event);
}
}
onDrop(event) {
const state = this.dragState;
if (state) {
if (state.leaveTimeout) {
window.clearTimeout(state.leaveTimeout);
}
this.dragState = undefined;
window.requestAnimationFrame(() => {
// Clean up the side panel state in the next frame
if (this.leftPanelHandler.dockPanel.isEmpty) {
this.leftPanelHandler.collapse();
}
if (this.rightPanelHandler.dockPanel.isEmpty) {
this.rightPanelHandler.collapse();
}
if (this.bottomPanel.isEmpty) {
this.collapseBottomPanel();
}
});
}
}
onDragLeave(event) {
const state = this.dragState;
if (state) {
state.lastDragOver = undefined;
if (state.leaveTimeout) {
window.clearTimeout(state.leaveTimeout);
}
state.leaveTimeout = window.setTimeout(() => {
this.dragState = undefined;
if (state.leftExpanded || this.leftPanelHandler.dockPanel.isEmpty) {
this.leftPanelHandler.collapse();
}
if (state.rightExpanded || this.rightPanelHandler.dockPanel.isEmpty) {
this.rightPanelHandler.collapse();
}
if (state.bottomExpanded || this.bottomPanel.isEmpty) {
this.collapseBottomPanel();
}
}, 100);
}
}
/**
* Create the dock panel in the main shell area.
*/
createMainPanel() {
const renderer = this.dockPanelRendererFactory();
renderer.tabBarClasses.push(MAIN_BOTTOM_AREA_CLASS);
renderer.tabBarClasses.push(MAIN_AREA_CLASS);
this._mainPanelRenderer = renderer;
const dockPanel = this.dockPanelFactory({
mode: 'multiple-document',
renderer,
spacing: 0
});
dockPanel.id = theia_dock_panel_1.MAIN_AREA_ID;
dockPanel.widgetAdded.connect((_, widget) => this.fireDidAddWidget(widget));
dockPanel.widgetRemoved.connect((_, widget) => this.fireDidRemoveWidget(widget));
const openUri = async (fileUri) => {
try {
const opener = await this.openerService.getOpener(fileUri);
opener.open(fileUri);
}
catch (e) {
console.info(`no opener found for '${fileUri}'`);
}
};
dockPanel.node.addEventListener('drop', event => {
var _a;
if (event.dataTransfer) {
const uris = this.additionalDraggedUris || ApplicationShell_1.getDraggedEditorUris(event.dataTransfer);
if (uris.length > 0) {
uris.forEach(openUri);
}
else if (((_a = event.dataTransfer.files) === null || _a === void 0 ? void 0 : _a.length) > 0) {
// the files were dragged from the outside the workspace
Array.from(event.dataTransfer.files).forEach(file => {
if (file.path) {
const fileUri = uri_1.default.fromComponents({
scheme: 'file',
path: file.path,
authority: '',
query: '',
fragment: ''
});
openUri(fileUri);
}
});
}
}
});
dockPanel.node.addEventListener('dblclick', event => {
const el = event.target;
if (el.id === theia_dock_panel_1.MAIN_AREA_ID || el.classList.contains('p-TabBar-content')) {
this.onDidDoubleClickMainAreaEmitter.fire();
}
});
const handler = (e) => {
if (e.dataTransfer) {
e.dataTransfer.dropEffect = 'link';
e.preventDefault();
e.stopPropagation();
}
};
dockPanel.node.addEventListener('dragover', handler);
dockPanel.node.addEventListener('dragenter', handler);
return dockPanel;
}
addAdditionalDraggedEditorUris(uris) {
this.additionalDraggedUris = uris;
}
clearAdditionalDraggedEditorUris() {
this.additionalDraggedUris = undefined;
}
static getDraggedEditorUris(dataTransfer) {
const data = dataTransfer.getData('theia-editor-dnd');
return data ? data.split('\n').map(entry => new uri_1.default(entry)) : [];
}
static setDraggedEditorUris(dataTransfer, uris) {
dataTransfer.setData('theia-editor-dnd', uris.map(uri => uri.toString()).join('\n'));
}
/**
* Create the dock panel in the bottom shell area.
*/
createBottomPanel() {
const renderer = this.dockPanelRendererFactory();
renderer.tabBarClasses.push(MAIN_BOTTOM_AREA_CLASS);
renderer.tabBarClasses.push(BOTTOM_AREA_CLASS);
const dockPanel = this.dockPanelFactory({
mode: 'multiple-document',
renderer,
spacing: 0
});
dockPanel.id = theia_dock_panel_1.BOTTOM_AREA_ID;
dockPanel.widgetAdded.connect((sender, widget) => {
this.refreshBottomPanelToggleButton();
});
dockPanel.widgetRemoved.connect((sender, widget) => {
if (sender.isEmpty) {
this.collapseBottomPanel();
}
this.refreshBottomPanelToggleButton();
}, this);
dockPanel.node.addEventListener('p-dragenter', event => {
// Make sure that the main panel hides its overlay when the bottom panel is expanded
this.mainPanel.overlay.hide(0);
});
dockPanel.hide();
dockPanel.widgetAdded.connect((_, widget) => this.fireDidAddWidget(widget));
dockPanel.widgetRemoved.connect((_, widget) => this.fireDidRemoveWidget(widget));
return dockPanel;
}
/**
* Create the top panel, which is used to hold the main menu.
*/
createTopPanel() {
const topPanel = new widgets_1.Panel();
topPanel.id = 'theia-top-panel';
topPanel.hide();
return topPanel;
}
/**
* Create a box layout to assemble the application shell layout.
*/
createBoxLayout(widgets, stretch, options) {
const boxLayout = new widgets_1.BoxLayout(options);
for (let i = 0; i < widgets.length; i++) {
if (stretch !== undefined && i < stretch.length) {
widgets_1.BoxPanel.setStretch(widgets[i], stretch[i]);
}
boxLayout.addWidget(widgets[i]);
}
return boxLayout;
}
/**
* Create a split layout to assemble the application shell layout.
*/
createSplitLayout(widgets, stretch, options) {
let optParam = { renderer: widgets_1.SplitPanel.defaultRenderer, };
if (options) {
optParam = { ...optParam, ...options };
}
const splitLayout = new widgets_1.SplitLayout(optParam);
for (let i = 0; i < widgets.length; i++) {
if (stretch !== undefined && i < stretch.length) {
widgets_1.SplitPanel.setStretch(widgets[i], stretch[i]);
}
splitLayout.addWidget(widgets[i]);
}
return splitLayout;
}
/**
* Assemble the application shell layout. Override this method in order to change the arrangement
* of the main area and the side panels.
*/
createLayout() {
const bottomSplitLayout = this.createSplitLayout([this.mainPanel, this.bottomPanel], [1, 0], { orientation: 'vertical', spacing: 0 });
const panelForBottomArea = new widgets_1.SplitPanel({ layout: bottomSplitLayout });
panelForBottomArea.id = 'theia-bottom-split-panel';
const leftRightSplitLayout = this.createSplitLayout([this.leftPanelHandler.container, panelForBottomArea, this.rightPanelHandler.container], [0, 1, 0], { orientation: 'horizontal', spacing: 0 });
const panelForSideAreas = new widgets_1.SplitPanel({ layout: leftRightSplitLayout });
panelForSideAreas.id = 'theia-left-right-split-panel';
return this.createBoxLayout([this.topPanel, panelForSideAreas, this.statusBar], [0, 1, 0], { direction: 'top-to-bottom', spacing: 0 });
}
/**
* Create an object that describes the current shell layout. This object may contain references
* to widgets; these need to be transformed before the layout can be serialized.
*/
getLayoutData() {
return {
version: exports.applicationShellLayoutVersion,
mainPanel: this.mainPanel.saveLayout(),
mainPanelPinned: this.getPinnedMainWidgets(),
bottomPanel: {
config: this.bottomPanel.saveLayout(),
pinned: this.getPinnedBottomWidgets(),
size: this.bottomPanel.isVisible ? this.getBottomPanelSize() : this.bottomPanelState.lastPanelSize,
expanded: this.isExpanded('bottom')
},
leftPanel: this.leftPanelHandler.getLayoutData(),
rightPanel: this.rightPanelHandler.getLayoutData(),
activeWidgetId: this.activeWidget ? this.activeWidget.id : undefined
};
}
// Get an array corresponding to main panel widgets' pinned state.
getPinnedMainWidgets() {
const pinned = [];
(0, algorithm_1.toArray)(this.mainPanel.widgets()).forEach((a, i) => {
pinned[i] = a.title.className.includes(widgets_2.PINNED_CLASS);
});
return pinned;
}
// Get an array corresponding to bottom panel widgets' pinned state.
getPinnedBottomWidgets() {
const pinned = [];
(0, algorithm_1.toArray)(this.bottomPanel.widgets()).forEach((a, i) => {
pinned[i] = a.title.className.includes(widgets_2.PINNED_CLASS);
});
return pinned;
}
/**
* Compute the current height of the bottom panel. This implementation assumes that the container
* of the bottom panel is a `SplitPanel`.
*/
getBottomPanelSize() {
const parent = this.bottomPanel.parent;
if (parent instanceof widgets_1.SplitPanel && parent.isVisible) {
const index = parent.widgets.indexOf(this.bottomPanel) - 1;
if (index >= 0) {
const handle = parent.handles[index];
if (!handle.classList.contains('p-mod-hidden')) {
const parentHeight = parent.node.clientHeight;
return parentHeight - handle.offsetTop;
}
}
}
}
/**
* Determine the default size to apply when the bottom panel is expanded for the first time.
*/
getDefaultBottomPanelSize() {
const parent = this.bottomPanel.parent;
if (parent && parent.isVisible) {
return parent.node.clientHeight * this.options.bottomPanel.initialSizeRatio;
}
}
/**
* Apply a shell layout that has been previously created with `getLayoutData`.
*/
async setLayoutData(layoutData) {
var _a, _b;
const { mainPanel, mainPanelPinned, bottomPanel, leftPanel, rightPanel, activeWidgetId } = layoutData;
if (leftPanel) {
this.leftPanelHandler.setLayoutData(leftPanel);
this.registerWithFocusTracker(leftPanel);
}
if (rightPanel) {
this.rightPanelHandler.setLayoutData(rightPanel);
this.registerWithFocusTracker(rightPanel);
}
// Proceed with the bottom panel once the side panels are set up
await Promise.all([this.leftPanelHandler.state.pendingUpdate, this.rightPanelHandler.state.pendingUpdate]);
if (bottomPanel) {
if (bottomPanel.config) {
this.bottomPanel.restoreLayout(bottomPanel.config);
this.registerWithFocusTracker(bottomPanel.config.main);
}
if (bottomPanel.size) {
this.bottomPanelState.lastPanelSize = bottomPanel.size;
}
if (bottomPanel.expanded) {
this.expandBottomPanel();
}
else {
this.collapseBottomPanel();
}
const widgets = (0, algorithm_1.toArray)(this.bottomPanel.widgets());
this.bottomPanel.markActiveTabBar((_a = widgets[0]) === null || _a === void 0 ? void 0 : _a.title);
if (bottomPanel.pinned && bottomPanel.pinned.length === widgets.length) {
widgets.forEach((a, i) => {
if (bottomPanel.pinned[i]) {
a.title.className += ` ${widgets_2.PINNED_CLASS}`;
a.title.closable = false;
}
});
}
this.refreshBottomPanelToggleButton();
}
// Proceed with the main panel once all others are set up
await this.bottomPanelState.pendingUpdate;
if (mainPanel) {
this.mainPanel.restoreLayout(mainPanel);
this.registerWithFocusTracker(mainPanel.main);
const widgets = (0, algorithm_1.toArray)(this.mainPanel.widgets());
// We don't store information about the last active tabbar
// So we simply mark the first as being active
this.mainPanel.markActiveTabBar((_b = widgets[0]) === null || _b === void 0 ? void 0 : _b.title);
if (mainPanelPinned && mainPanelPinned.length === widgets.length) {
widgets.forEach((a, i) => {
if (mainPanelPinned[i]) {
a.title.className += ` ${widgets_2.PINNED_CLASS}`;
a.title.closable = false;
}
});
}
}
if (activeWidgetId) {
this.activateWidget(activeWidgetId);
}
}
/**
* Modify the height of the bottom panel. This implementation assumes that the container of the
* bottom panel is a `SplitPanel`.
*/
setBottomPanelSize(size) {
const enableAnimation = this.applicationStateService.state === 'ready';
const options = {
side: 'bottom',
duration: enableAnimation ? this.options.bottomPanel.expandDuration : 0,
referenceWidget: this.bottomPanel
};
const promise = this.splitPositionHandler.setSidePanelSize(this.bottomPanel, size, options);
const result = new Promise(resolve => {
// Resolve the resulting promise in any case, regardless of whether resizing was successful
promise.then(() => resolve(), () => resolve());
});
this.bottomPanelState.pendingUpdate = this.bottomPanelState.pendingUpdate.then(() => result);
return result;
}
/**
* A promise that is resolved when all currently pending updates are done.
*/
get pendingUpdates() {
return Promise.all([
this.bottomPanelState.pendingUpdate,
this.leftPanelHandler.state.pendingUpdate,
this.rightPanelHandler.state.pendingUpdate
// eslint-disable-next-line @typescript-eslint/no-explicit-any
]);
}
/**
* Track all widgets that are referenced by the given layout data.
*/
registerWithFocusTracker(data) {
if (data) {
if (data.type === 'tab-area') {
for (const widget of data.widgets) {
if (widget) {
this.track(widget);
}
}
}
else if (data.type === 'split-area') {
for (const child of data.children) {
this.registerWithFocusTracker(child);
}
}
else if (data.type === 'sidepanel' && data.items) {
for (const item of data.items) {
if (item.widget) {
this.track(item.widget);
}
}
}
}
}
/**
* Add a widget to the application shell. The given widget must have a unique `id` property,
* which will be used as the DOM id.
*
* Widgets are removed from the shell by calling their `close` or `dispose` methods.
*
* Widgets added to the top area are not tracked regarding the _current_ and _active_ states.
*/
async addWidget(widget, options) {
if (!widget.id) {
console.error('Widgets added to the application shell must have a unique id property.');
return;
}
const { area, addOptions } = this.getInsertionOptions(options);
const sidePanelOptions = { rank: options === null || options === void 0 ? void 0 : options.rank };
switch (area) {
case 'main':
this.mainPanel.addWidget(widget, addOptions);
break;
case 'top':
this.topPanel.addWidget(widget);
break;
case 'bottom':
this.bottomPanel.addWidget(widget, addOptions);
break;
case 'left':
this.leftPanelHandler.addWidget(widget, sidePanelOptions);
break;
case 'right':
this.rightPanelHandler.addWidget(widget, sidePanelOptions);
break;
case 'secondaryWindow':
/** At the moment, widgets are only moved to this area (i.e. a secondary window) by moving them from one of the other areas. */
throw new Error('Widgets cannot be added directly to a secondary window');
default:
throw new Error('Unexpected area: ' + (options === null || options === void 0 ? void 0 : options.area));
}
if (area !== 'top') {
this.track(widget);
}
}
getInsertionOptions(options) {
let ref = options === null || options === void 0 ? void 0 : options.ref;
let area = (options === null || options === void 0 ? void 0 : options.area) || 'main';
if (!ref && (area === 'main' || area === 'bottom')) {
const tabBar = this.getTabBarFor(area);
ref = tabBar && tabBar.currentTitle && tabBar.currentTitle.owner || undefined;
}
// make sure that ref belongs to area
area = ref && this.getAreaFor(ref) || area;
const addOptions = {};
if (ApplicationShell_1.isOpenToSideMode(options === null || options === void 0 ? void 0 : options.mode)) {
const areaPanel = area === 'main' ? this.mainPanel : area === 'bottom' ? this.bottomPanel : undefined;
const sideRef = areaPanel && ref && ((options === null || options === void 0 ? void 0 : options.mode) === 'open-to-left' ?
areaPanel.previousTabBarWidget(ref) :
areaPanel.nextTabBarWidget(ref));
if (sideRef) {
addOptions.ref = sideRef;
}
else {
addOptions.ref = ref;
addOptions.mode = (options === null || options === void 0 ? void 0 : options.mode) === 'open-to-left' ? 'split-left' : 'split-right';
}
}
else {
addOptions.ref = ref;
addOptions.mode = options === null || options === void 0 ? void 0 : options.mode;
}
return { area, addOptions };
}
/**
* The widgets contained in the given shell area.
*/
getWidgets(area) {
switch (area) {
case 'main':
return (0, algorithm_1.toArray)(this.mainPanel.widgets());
case 'top':
return (0, algorithm_1.toArray)(this.topPanel.widgets);
case 'bottom':
return (0, algorithm_1.toArray)(this.bottomPanel.widgets());
case 'left':
return (0, algorithm_1.toArray)(this.leftPanelHandler.dockPanel.widgets());
case 'right':
return (0, algorithm_1.toArray)(this.rightPanelHandler.dockPanel.widgets());
case 'secondaryWindow':
return (0, algorithm_1.toArray)(this.secondaryWindowHandler.widgets);
default:
throw new Error('Illegal argument: ' + area);
}
}
/**
* Find the widget that contains the given HTML element. The returned widget may be one
* that is managed by the application shell, or one that is embedded in another widget and
* not directly managed by the shell, or a tab bar.
*/
findWidgetForElement(element) {
let widgetNode = element;
while (widgetNode && !widgetNode.classList.contains('p-Widget')) {
widgetNode = widgetNode.parentElement;
}
if (widgetNode) {
return this.findWidgetForNode(widgetNode, this);
}
return undefined;
}
findWidgetForNode(widgetNode, widget) {
if (widget.node === widgetNode) {
return widget;
}
let result;
(0, algorithm_1.each)(widget.children(), child => {
result = this.findWidgetForNode(widgetNode, child);
return !result;
});
return result;
}
/**
* Finds the title widget from the tab-bar.
* @param tabBar used for providing an array of titles.
* @returns the selected title widget, else returns the currentTitle or undefined.
*/
findTitle(tabBar, event) {
if ((event === null || event === void 0 ? void 0 : event.target) instanceof HTMLElement) {
const tabNode = event.target;
const titleIndex = Array.from(tabBar.contentNode.getElementsByClassName('p-TabBar-tab'))
.findIndex(node => node.contains(tabNode));
if (titleIndex !== -1) {
return tabBar.titles[titleIndex];
}
}
return tabBar.currentTitle || undefined;
}
/**
* Finds the tab-bar widget.
* @returns the selected tab-bar, else returns the currentTabBar.
*/
findTabBar(event) {
if ((event === null || event === void 0 ? void 0 : event.target) instanceof HTMLElement) {
const tabBar = this.findWidgetForElement(event.target);
if (tabBar instanceof widgets_1.TabBar) {
return tabBar;
}
}
return this.currentTabBar;
}
/**
* @returns the widget whose title has been targeted by a DOM event on a tabbar, or undefined if none can be found.
*/
findTargetedWidget(event) {
if (event) {
const tab = this.findTabBar(event);
const title = tab && this.findTitle(tab, event);
return title && title.owner;
}
}
/**
* The current widget in the application shell. The current widget is the last widget that
* was active and not yet closed. See the remarks to `activeWidget` on what _active_ means.
*/
get currentWidget() {
return this.tracker.currentWidget || undefined;
}
/**
* The active widget in the application shell. The active widget is the one that has focus
* (either the widget itself or any of its contents).
*
* _Note:_ Focus is taken by a widget through the `onActivateRequest` method. It is up to the
* widget implementation which DOM element will get the focus. The default implementation
* does not take any focus; in that case the widget is never returned by this property.
*/
get activeWidget() {
return this.tracker.activeWidget || undefined;
}
/**
* Returns the last active widget in the given shell area.
*/
getCurrentWidget(area) {
let title;
switch (area) {
case 'main':
title = this.mainPanel.currentTitle;
break;
case 'bottom':
title = this.bottomPanel.currentTitle;
break;
case 'left':
title = this.leftPanelHandler.tabBar.currentTitle;
break;
case 'right':
title = this.rightPanelHandler.tabBar.currentTitle;
break;
case 'secondaryWindow':
// The current widget in a secondary window is not tracked.
return undefined;
default:
throw new Error('Illegal argument: ' + area);
}
return title ? title.owner : undefined;
}
/**
* Handle a change to the current widget.
*/
onCurrentChanged(sender, args) {
this.onDidChangeCurrentWidgetEmitter.fire(args);
}
/**
* Handle a change to the active widget.
*/
onActiveChanged(sender, args) {
this.toDisposeOnActiveChanged.dispose();
const { newValue, oldValue } = args;
if (oldValue) {
let w = oldValue;
while (w) {
// Remove the mark of the previously active widget
w.title.className = w.title.className.replace(' theia-mod-active', '');
w = w.parent;
}
// Reset the z-index to the default
// eslint-disable-next-line no-null/no-null
this.setZIndex(oldValue.node, null);
}
if (newValue) {
let w = newValue;
while (w) {
// Mark the tab of the active widget
w.title.className += ' theia-mod-active';
w = w.parent;
}
// Reveal the title of the active widget in its tab bar
const tabBar = this.getTabBarFor(newValue);
if (tabBar instanceof tab_bars_1.ScrollableTabBar) {
const index = tabBar.titles.indexOf(newValue.title);
if (index >= 0) {
tabBar.revealTab(index);
}
}
const widget = this.toTrackedStack(newValue.id).pop();
const panel = this.findPanel(widget);
if (panel) {
// if widget was undefined, we wouldn't have gotten a panel back before
panel.markAsCurrent(widget.title);
}
// Add checks to ensure that the 'sash' for left panel is displayed correctly
if (newValue.node.className === 'p-Widget theia-view-container p-DockPanel-widget') {
// Set the z-index so elements with `position: fixed` contained in the active widget are displayed correctly
this.setZIndex(newValue.node, '1');
}
// activate another widget if an active widget will be closed
const onCloseRequest = newValue['onCloseRequest'];
newValue['onCloseRequest'] = msg => {
const currentTabBar = this.currentTabBar;
if (currentTabBar) {
const recentlyUsedInTabBar = currentTabBar['_previousTitle'];
if (recentlyUsedInTabBar && recentlyUsedInTabBar.owner !== newValue) {
currentTabBar.currentIndex = algorithm_1.ArrayExt.firstIndexOf(currentTabBar.titles, recentlyUsedInTabBar);
if (currentTabBar.currentTitle) {
this.activateWidget(currentTabBar.currentTitle.owner.id);
}
}
else if (!this.activateNextTabInTabBar(currentTabBar)) {
if (!this.activatePreviousTabBar(currentTabBar)) {
this.activateNextTabBar(currentTabBar);
}
}
}
newValue['onCloseRequest'] = onCloseRequest;
newValue['onCloseRequest'](msg);
};
this.toDisposeOnActiveChanged.push(common_1.Disposable.create(() => newValue['onCloseRequest'] = onCloseRequest));
if (previewable_widget_1.PreviewableWidget.is(newValue)) {
newValue.loaded = true;
}
}
this.onDidChangeActiveWidgetEmitter.fire(args);
}
/**
* Set the z-index of the given element and its ancestors to the value `z`.
*/
setZIndex(element, z) {
element.style.zIndex = z || '';
const parent = element.parentElement;
if (parent && parent !== this.node) {
this.setZIndex(parent, z);
}
}
/**
* Track the given widget so it is considered in the `current` and `active` state of the shell.
*/
track(widget) {
if (this.tracker.widgets.indexOf(widget) !== -1) {
return;
}
this.tracker.add(widget);
this.checkActivation(widget);
saveable_1.Saveable.apply(widget, () => this.widgets.filter((maybeSaveable) => !!saveable_1.Saveable.get(maybeSaveable)), (toSave, options) => this.saveResourceService.save(toSave, options));
if (ApplicationShell_1.TrackableWidgetProvider.is(widget)) {
for (const toTrack of widget.getTrackableWidgets()) {
this.track(toTrack);
}
if (widget.onDidChangeTrackableWidgets) {
widget.onDidChangeTrackableWidgets(widgets => widgets.forEach(w => this.track(w)));
}
}
}
/**
* @returns an array of Widgets, all of which are tracked by the focus tracker
* The first member of the array is the widget whose id is passed in, and the other widgets
* are its tracked parents in ascending order
*/
toTrackedStack(id) {
const tracked = new Map(this.tracker.widgets.map(w => [w.id, w]));
let current = tracked.get(id);
const stack = [];
while (current) {
if (tracked.has(current.id)) {
stack.push(current);
}
current = current.parent || undefined;
}
re