// ***************************************************************************** // Copyright (C) 2018-2019 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 // ***************************************************************************** import { interfaces, injectable, inject, postConstruct } from 'inversify'; import { find, some, every, map, ArrayExt } from '@lumino/algorithm'; import { Widget, EXPANSION_TOGGLE_CLASS, COLLAPSED_CLASS, CODICON_TREE_ITEM_CLASSES, MessageLoop, Message, SplitPanel, BaseWidget, addEventListener, SplitLayout, LayoutItem, PanelLayout, addKeyListener, waitForRevealed, UnsafeWidgetUtilities, DockPanel, PINNED_CLASS } from './widgets'; import { Event as CommonEvent, Emitter } from '../common/event'; import { Disposable, DisposableCollection } from '../common/disposable'; import { CommandRegistry } from '../common/command'; import { MenuModelRegistry, MenuPath, MenuAction, SubmenuImpl, ActionMenuNode, Submenu } from '../common/menu'; import { ApplicationShell, StatefulWidget, SplitPositionHandler, SplitPositionOptions, SIDE_PANEL_TOOLBAR_CONTEXT_MENU } from './shell'; import { MAIN_AREA_ID, BOTTOM_AREA_ID } from './shell/theia-dock-panel'; import { FrontendApplicationStateService } from './frontend-application-state'; import { ContextMenuRenderer, Anchor } from './context-menu-renderer'; import { parseCssMagnitude } from './browser'; import { TabBarToolbarRegistry, TabBarToolbarFactory, TabBarToolbar, TabBarDelegator } from './shell/tab-bar-toolbar'; import { isEmpty, isObject, nls } from '../common'; import { WidgetManager } from './widget-manager'; import { Key } from './keys'; import { ProgressBarFactory } from './progress-bar-factory'; import { Drag } from '@lumino/dragdrop'; import { MimeData } from '@lumino/coreutils'; import { ElementExt } from '@lumino/domutils'; import { TabBarDecoratorService } from './shell/tab-bar-decorator'; import { ContextKeyService } from './context-key-service'; import { KeybindingRegistry } from './keybinding'; import { SubmenuAsToolbarItemWrapper } from './shell/tab-bar-toolbar/tab-bar-toolbar-menu-adapters'; import { TheiaSplitPanel } from './shell/theia-split-panel'; export interface ViewContainerTitleOptions { label: string; caption?: string; iconClass?: string; closeable?: boolean; } @injectable() export class ViewContainerIdentifier { id: string; progressLocationId?: string; } export interface DescriptionWidget { description: string; onDidChangeDescription: CommonEvent; } export interface BadgeWidget { badge?: number; badgeTooltip?: string; onDidChangeBadge: CommonEvent; onDidChangeBadgeTooltip: CommonEvent; } export namespace DescriptionWidget { export function is(arg: unknown): arg is DescriptionWidget { return isObject(arg) && 'onDidChangeDescription' in arg; } } export namespace BadgeWidget { export function is(arg: unknown): arg is BadgeWidget { return isObject(arg) && 'onDidChangeBadge' in arg && 'onDidChangeBadgeTooltip' in arg; } } /** * A widget that may change it's internal structure dynamically. * Current use is to update the toolbar when a contributed view is constructed "lazily". */ export interface DynamicToolbarWidget { onDidChangeToolbarItems: CommonEvent; } export namespace DynamicToolbarWidget { export function is(arg: unknown): arg is DynamicToolbarWidget { return isObject(arg) && 'onDidChangeToolbarItems' in arg; } } class PartsMenuToolbarItem extends SubmenuAsToolbarItemWrapper { constructor( protected readonly target: () => Widget | undefined, effectiveMenuPath: MenuPath, commandRegistry: CommandRegistry, menuRegistry: MenuModelRegistry, contextKeyService: ContextKeyService, contextMenuRenderer: ContextMenuRenderer, menuNode: Submenu, group: string | undefined, menuPath?: MenuPath, ) { super(effectiveMenuPath, commandRegistry, menuRegistry, contextKeyService, contextMenuRenderer, menuNode, group); } override isVisible(widget: Widget): boolean { return widget === this.target() && super.isVisible(widget); } } /** * A view container holds an arbitrary number of widgets inside a split panel. * Each widget is wrapped in a _part_ that displays the widget title and toolbar * and allows to collapse / expand the widget content. */ @injectable() export class ViewContainer extends BaseWidget implements StatefulWidget, ApplicationShell.TrackableWidgetProvider, TabBarDelegator { protected panel: SplitPanel; protected currentPart: ViewContainerPart | undefined; /** * Disable dragging parts from/to this view container. */ disableDNDBetweenContainers = false; @inject(FrontendApplicationStateService) protected readonly applicationStateService: FrontendApplicationStateService; @inject(ContextMenuRenderer) protected readonly contextMenuRenderer: ContextMenuRenderer; @inject(CommandRegistry) protected readonly commandRegistry: CommandRegistry; @inject(MenuModelRegistry) protected readonly menuRegistry: MenuModelRegistry; @inject(WidgetManager) protected readonly widgetManager: WidgetManager; @inject(SplitPositionHandler) protected readonly splitPositionHandler: SplitPositionHandler; @inject(ViewContainerIdentifier) readonly options: ViewContainerIdentifier; @inject(TabBarToolbarRegistry) protected readonly toolbarRegistry: TabBarToolbarRegistry; @inject(TabBarToolbarFactory) protected readonly toolbarFactory: TabBarToolbarFactory; protected readonly onDidChangeTrackableWidgetsEmitter = new Emitter(); readonly onDidChangeTrackableWidgets = this.onDidChangeTrackableWidgetsEmitter.event; @inject(ProgressBarFactory) protected readonly progressBarFactory: ProgressBarFactory; @inject(ApplicationShell) protected readonly shell: ApplicationShell; @inject(TabBarDecoratorService) protected readonly decoratorService: TabBarDecoratorService; @inject(ContextKeyService) protected readonly contextKeyService: ContextKeyService; @inject(KeybindingRegistry) protected readonly keybindingRegistry: KeybindingRegistry; @postConstruct() protected init(): void { this.toDispose.push(Disposable.create(() => { this.toDisposeOnUpdateTitle.dispose(); this.toDisposeOnDragEnd.dispose(); })); this.id = this.options.id; this.addClass('theia-view-container'); const layout = new PanelLayout(); this.layout = layout; this.panel = new TheiaSplitPanel({ layout: new ViewContainerLayout({ renderer: SplitPanel.defaultRenderer, orientation: this.orientation, spacing: 2, headerSize: ViewContainerPart.HEADER_HEIGHT, animationDuration: 200 }, this.splitPositionHandler) }); this.panel.node.tabIndex = -1; this.configureLayout(layout); const { commandRegistry, menuRegistry, contextMenuRenderer } = this; this.toDispose.pushAll([ addEventListener(this.node, 'contextmenu', event => { if (event.button === 2 && every(this.containerLayout.iter(), part => !!part.isHidden)) { event.stopPropagation(); event.preventDefault(); contextMenuRenderer.render({ menuPath: this.contextMenuPath, anchor: event, context: event.currentTarget instanceof HTMLElement ? event.currentTarget : this.node }); } }), commandRegistry.registerCommand({ id: this.globalHideCommandId }, { execute: (anchor: Anchor) => { const toHide = this.findPartForAnchor(anchor); if (toHide && toHide.canHide) { toHide.hide(); } }, isVisible: (anchor: Anchor) => { const toHide = this.findPartForAnchor(anchor); if (toHide) { return toHide.canHide && !toHide.isHidden; } else { return some(this.containerLayout.iter(), part => !part.isHidden); } } }), menuRegistry.registerMenuAction([...this.contextMenuPath, '0_global'], { commandId: this.globalHideCommandId, label: nls.localizeByDefault('Hide') }), this.onDidChangeTrackableWidgetsEmitter, this.onDidChangeTrackableWidgets(() => this.decoratorService.fireDidChangeDecorations()) ]); if (this.options.progressLocationId) { this.toDispose.push(this.progressBarFactory({ container: this.node, insertMode: 'prepend', locationId: this.options.progressLocationId })); } } protected configureLayout(layout: PanelLayout): void { layout.addWidget(this.panel); } protected updateCurrentPart(part?: ViewContainerPart): void { if (part && this.getParts().indexOf(part) !== -1) { this.currentPart = part; } if (this.currentPart && !this.currentPart.isDisposed) { return; } const visibleParts = this.getParts().filter(p => !p.isHidden); const expandedParts = visibleParts.filter(p => !p.collapsed); this.currentPart = expandedParts[0] || visibleParts[0]; } protected updateSplitterVisibility(): void { const className = 'lm-first-visible'; let firstFound = false; for (const part of this.getParts()) { if (!part.isHidden && !firstFound) { part.addClass(className); firstFound = true; } else { part.removeClass(className); } } } protected titleOptions: ViewContainerTitleOptions | undefined; setTitleOptions(titleOptions: ViewContainerTitleOptions | undefined): void { this.titleOptions = titleOptions; this.updateTitle(); } protected toDisposeOnUpdateTitle = new DisposableCollection(); protected _tabBarDelegate: Widget = this; updateTabBarDelegate(): void { const visibleParts = this.getParts().filter(part => !part.isHidden); if (visibleParts.length === 1) { this._tabBarDelegate = visibleParts[0].wrapped; } else { this._tabBarDelegate = this; } } getTabBarDelegate(): Widget | undefined { return this._tabBarDelegate; } protected updateTitle(): void { this.toDisposeOnUpdateTitle.dispose(); this.toDisposeOnUpdateTitle = new DisposableCollection(); this.updateTabBarDelegate(); let title = Object.assign({}, this.titleOptions); if (isEmpty(title)) { return; } const allParts = this.getParts(); const visibleParts = allParts.filter(part => !part.isHidden); this.title.label = title.label; // If there's only one visible part - inline it's title into the container title except in case the part // isn't originally belongs to this container but there are other **original** hidden parts. if (visibleParts.length === 1 && (visibleParts[0].originalContainerId === this.id || !this.findOriginalPart())) { const part = visibleParts[0]; this.toDisposeOnUpdateTitle.push(part.onTitleChanged(() => this.updateTitle())); const partLabel = part.wrapped.title.label; // Change the container title if it contains only one part that originally belongs to another container. if (allParts.length === 1 && part.originalContainerId !== this.id && !this.isCurrentTitle(part.originalContainerTitle)) { title = Object.assign({}, part.originalContainerTitle); this.setTitleOptions(title); return; } if (partLabel) { if (this.title.label && this.title.label !== partLabel) { this.title.label += ': ' + partLabel; } else { this.title.label = partLabel; } } part.collapsed = false; part.hideTitle(); } else { visibleParts.forEach(part => part.showTitle()); // If at least one part originally belongs to this container the title should return to its original value. const originalPart = this.findOriginalPart(); if (originalPart && !this.isCurrentTitle(originalPart.originalContainerTitle)) { title = Object.assign({}, originalPart.originalContainerTitle); this.setTitleOptions(title); return; } } this.updateToolbarItems(allParts); this.title.caption = title?.caption || title?.label; if (title.iconClass) { this.title.iconClass = title.iconClass; } if (this.title.className.includes(PINNED_CLASS)) { this.title.closable &&= false; } else if (title.closeable !== undefined) { this.title.closable = title.closeable; } } protected updateToolbarItems(allParts: ViewContainerPart[]): void { if (allParts.length > 1) { const group = new SubmenuImpl(`toggleParts-${this.id}`, this.getToggleVisibilityGroupLabel(), undefined, '000'); for (const part of allParts) { const existingId = this.toggleVisibilityCommandId(part); const { label } = part.wrapped.title; group.addNode(new ActionMenuNode({ commandId: existingId, label: label }, this.commandRegistry, this.keybindingRegistry, this.contextKeyService)); } // widget === this.getTabBarDelegate() const toolbarItem = new PartsMenuToolbarItem(() => this.getTabBarDelegate(), [this.id], this.commandRegistry, this.menuRegistry, this.contextKeyService, this.contextMenuRenderer, group, '000_views', [this.id]); this.toDisposeOnUpdateTitle.push(this.toolbarRegistry.doRegisterItem(toolbarItem)); } } protected getToggleVisibilityGroupLabel(): string { return 'Views'; } protected findOriginalPart(): ViewContainerPart | undefined { return this.getParts().find(part => part.originalContainerId === this.id); } protected isCurrentTitle(titleOptions: ViewContainerTitleOptions | undefined): boolean { // eslint-disable-next-line @typescript-eslint/no-explicit-any return (!!titleOptions && !!this.titleOptions && Object.keys(titleOptions).every(key => (titleOptions as any)[key] === (this.titleOptions as any)[key])) || (!titleOptions && !this.titleOptions); } protected findPartForAnchor(anchor: Anchor): ViewContainerPart | undefined { const element = document.elementFromPoint(anchor.x, anchor.y); if (element instanceof Element) { const closestPart = ViewContainerPart.closestPart(element); if (closestPart && closestPart.id) { return find(this.containerLayout.iter(), part => part.id === closestPart.id); } } return undefined; } protected readonly toRemoveWidgets = new Map(); protected createPartId(widget: Widget): string { const description = this.widgetManager.getDescription(widget); return widget.id || JSON.stringify(description); } addWidget(widget: Widget, options?: ViewContainer.Factory.WidgetOptions, originalContainerId?: string, originalContainerTitle?: ViewContainerTitleOptions): Disposable { const existing = this.toRemoveWidgets.get(widget.id); if (existing) { return existing; } const partId = this.createPartId(widget); const newPart = this.createPart(widget, partId, originalContainerId || this.id, originalContainerTitle || this.titleOptions, options); return this.attachNewPart(newPart); } protected attachNewPart(newPart: ViewContainerPart, insertIndex?: number): Disposable { const toRemoveWidget = new DisposableCollection(); this.toDispose.push(toRemoveWidget); this.toRemoveWidgets.set(newPart.wrapped.id, toRemoveWidget); toRemoveWidget.push(Disposable.create(() => this.toRemoveWidgets.delete(newPart.wrapped.id))); this.registerPart(newPart); if (insertIndex !== undefined || (newPart.options && newPart.options.order !== undefined)) { const index = insertIndex ?? this.getParts().findIndex(part => part.options.order === undefined || part.options.order > newPart.options.order!); if (index >= 0) { this.containerLayout.insertWidget(index, newPart); } else { this.containerLayout.addWidget(newPart); } } else { this.containerLayout.addWidget(newPart); } this.refreshMenu(newPart); this.updateTitle(); this.updateCurrentPart(); this.updateSplitterVisibility(); this.update(); this.fireDidChangeTrackableWidgets(); toRemoveWidget.pushAll([ Disposable.create(() => { if (newPart.currentViewContainerId === this.id) { newPart.dispose(); } this.unregisterPart(newPart); if (!newPart.isDisposed && this.getPartIndex(newPart.id) > -1) { this.containerLayout.removeWidget(newPart); } if (!this.isDisposed) { this.update(); this.updateTitle(); this.updateCurrentPart(); this.updateSplitterVisibility(); this.fireDidChangeTrackableWidgets(); } }), this.registerDND(newPart), newPart.onDidChangeVisibility(() => { this.updateTitle(); this.updateCurrentPart(); this.updateSplitterVisibility(); this.containerLayout.updateSashes(); }), newPart.onCollapsed(() => { this.containerLayout.updateCollapsed(newPart, this.enableAnimation); this.containerLayout.updateSashes(); this.updateCurrentPart(); }), newPart.onContextMenu(event => { if (event.button === 2) { event.preventDefault(); event.stopPropagation(); this.contextMenuRenderer.render({ menuPath: this.contextMenuPath, anchor: event, context: this.node }); } }), newPart.onTitleChanged(() => this.refreshMenu(newPart)), newPart.onDidFocus(() => this.updateCurrentPart(newPart)) ]); newPart.disposed.connect(() => toRemoveWidget.dispose()); return toRemoveWidget; } protected createPart(widget: Widget, partId: string, originalContainerId: string, originalContainerTitle?: ViewContainerTitleOptions, options?: ViewContainer.Factory.WidgetOptions): ViewContainerPart { return new ViewContainerPart(widget, partId, this.id, originalContainerId, originalContainerTitle, this.toolbarRegistry, this.toolbarFactory, options); } removeWidget(widget: Widget): boolean { const disposable = this.toRemoveWidgets.get(widget.id); if (disposable) { disposable.dispose(); return true; } return false; } getParts(): ViewContainerPart[] { return this.containerLayout.widgets; } protected getPartIndex(partId: string | undefined): number { if (partId) { return this.getParts().findIndex(part => part.id === partId); } return -1; } getPartFor(widget: Widget): ViewContainerPart | undefined { return this.getParts().find(p => p.wrapped.id === widget.id); } get containerLayout(): ViewContainerLayout { const layout = this.panel.layout; if (layout instanceof ViewContainerLayout) { return layout; } throw new Error('view container is disposed'); } protected get orientation(): SplitLayout.Orientation { return ViewContainer.getOrientation(this.node); } protected get enableAnimation(): boolean { return this.applicationStateService.state === 'ready'; } protected lastVisibleState: ViewContainer.State | undefined; storeState(): ViewContainer.State { if (!this.isVisible && this.lastVisibleState) { return this.lastVisibleState; } return this.doStoreState(); } protected doStoreState(): ViewContainer.State { const parts = this.getParts(); const availableSize = this.containerLayout.getAvailableSize(); const orientation = this.orientation; const partStates = parts.map(part => { let size = this.containerLayout.getPartSize(part); if (size && size > ViewContainerPart.HEADER_HEIGHT && orientation === 'vertical') { size -= ViewContainerPart.HEADER_HEIGHT; } return { widget: part.wrapped, partId: part.partId, collapsed: part.collapsed, hidden: part.isHidden, relativeSize: size && availableSize ? size / availableSize : undefined, originalContainerId: part.originalContainerId, originalContainerTitle: part.originalContainerTitle }; }); return { parts: partStates, title: this.titleOptions }; } restoreState(state: ViewContainer.State): void { this.lastVisibleState = state; this.doRestoreState(state); } protected doRestoreState(state: ViewContainer.State): void { this.setTitleOptions(state.title); // restore widgets for (const part of state.parts) { if (part.widget) { this.addWidget(part.widget, undefined, part.originalContainerId, part.originalContainerTitle || {} as ViewContainerTitleOptions); } } const partStates = state.parts.filter(partState => some(this.containerLayout.iter(), p => p.partId === partState.partId)); // Reorder the parts according to the stored state for (let index = 0; index < partStates.length; index++) { const partState = partStates[index]; const widget = this.getParts().find(part => part.partId === partState.partId); if (widget) { this.containerLayout.insertWidget(index, widget); } } // Restore visibility and collapsed state const parts = this.getParts(); for (let index = 0; index < parts.length; index++) { const part = parts[index]; const partState = partStates.find(s => part.partId === s.partId); if (partState) { part.setHidden(partState.hidden); part.collapsed = partState.collapsed || !partState.relativeSize; } else if (part.canHide) { part.hide(); } this.refreshMenu(part); } // Restore part sizes waitForRevealed(this).then(() => { this.containerLayout.setPartSizes(partStates.map(partState => partState.relativeSize)); this.updateSplitterVisibility(); }); } /** * Register a command to toggle the visibility of the new part. */ protected registerPart(toRegister: ViewContainerPart): void { const commandId = this.toggleVisibilityCommandId(toRegister); this.commandRegistry.registerCommand({ id: commandId }, { execute: () => { const toHide = find(this.containerLayout.iter(), part => part.id === toRegister.id); if (toHide) { toHide.setHidden(!toHide.isHidden); } }, isToggled: () => { if (!toRegister.canHide) { return true; } const widgetToToggle = find(this.containerLayout.iter(), part => part.id === toRegister.id); if (widgetToToggle) { return !widgetToToggle.isHidden; } return false; }, isEnabled: arg => toRegister.canHide && (!this.titleOptions || !(arg instanceof Widget) || arg === this.getTabBarDelegate()), isVisible: arg => !this.titleOptions || !(arg instanceof Widget) || arg === this.getTabBarDelegate() }); } /** * Register a menu action to toggle the visibility of the new part. * The menu action is unregistered first to enable refreshing the order of menu actions. */ protected refreshMenu(part: ViewContainerPart): void { const commandId = this.toggleVisibilityCommandId(part); this.menuRegistry.unregisterMenuAction(commandId); if (!part.wrapped.title.label) { return; } const { dataset: { visibilityCommandLabel }, caption, label } = part.wrapped.title; const action: MenuAction = { commandId: commandId, label: visibilityCommandLabel || caption || label, order: this.getParts().indexOf(part).toString() }; this.menuRegistry.registerMenuAction([...this.contextMenuPath, '1_widgets'], action); if (this.titleOptions) { this.menuRegistry.registerMenuAction([...SIDE_PANEL_TOOLBAR_CONTEXT_MENU, 'navigation'], action); } } protected unregisterPart(part: ViewContainerPart): void { const commandId = this.toggleVisibilityCommandId(part); this.commandRegistry.unregisterCommand(commandId); this.menuRegistry.unregisterMenuAction(commandId); } protected get contextMenuPath(): MenuPath { return [`${this.id}-context-menu`]; } protected toggleVisibilityCommandId(part: ViewContainerPart): string { return `${this.id}:toggle-visibility-${part.id}`; } protected get globalHideCommandId(): string { return `${this.id}:toggle-visibility`; } protected moveBefore(toMovedId: string, moveBeforeThisId: string): void { const parts = this.getParts(); const indexToMove = parts.findIndex(part => part.id === toMovedId); const targetIndex = parts.findIndex(part => part.id === moveBeforeThisId); if (indexToMove >= 0 && targetIndex >= 0) { this.containerLayout.insertWidget(targetIndex, parts[indexToMove]); for (let index = Math.min(indexToMove, targetIndex); index < parts.length; index++) { this.refreshMenu(parts[index]); this.activate(); } } this.updateSplitterVisibility(); } getTrackableWidgets(): Widget[] { return this.getParts().map(w => w.wrapped); } protected fireDidChangeTrackableWidgets(): void { this.onDidChangeTrackableWidgetsEmitter.fire(this.getTrackableWidgets()); } activateWidget(id: string): Widget | undefined { const part = this.revealPart(id); if (!part) { return undefined; } this.updateCurrentPart(part); part.collapsed = false; return part.wrapped; } revealWidget(id: string): Widget | undefined { const part = this.revealPart(id); return part && part.wrapped; } protected revealPart(id: string): ViewContainerPart | undefined { const part = this.getParts().find(p => p.wrapped.id === id); if (!part) { return undefined; } part.setHidden(false); return part; } protected override onActivateRequest(msg: Message): void { super.onActivateRequest(msg); if (this.currentPart) { this.currentPart.activate(); } else { this.panel.node.focus({ preventScroll: true }); } } protected override onAfterAttach(msg: Message): void { const orientation = this.orientation; this.containerLayout.orientation = orientation; if (orientation === 'horizontal') { for (const part of this.getParts()) { part.collapsed = false; } } super.onAfterAttach(msg); } protected override onBeforeHide(msg: Message): void { super.onBeforeHide(msg); this.lastVisibleState = this.storeState(); } protected override onAfterShow(msg: Message): void { super.onAfterShow(msg); this.updateTitle(); this.lastVisibleState = undefined; } protected override onBeforeAttach(msg: Message): void { super.onBeforeAttach(msg); this.node.addEventListener('lm-dragenter', this, true); this.node.addEventListener('lm-dragover', this, true); this.node.addEventListener('lm-dragleave', this, true); this.node.addEventListener('lm-drop', this, true); } protected override onAfterDetach(msg: Message): void { super.onAfterDetach(msg); this.node.removeEventListener('lm-dragenter', this, true); this.node.removeEventListener('lm-dragover', this, true); this.node.removeEventListener('lm-dragleave', this, true); this.node.removeEventListener('lm-drop', this, true); } handleEvent(event: Event): void { switch (event.type) { case 'lm-dragenter': this.handleDragEnter(event as Drag.Event); break; case 'lm-dragover': this.handleDragOver(event as Drag.Event); break; case 'lm-dragleave': this.handleDragLeave(event as Drag.Event); break; case 'lm-drop': this.handleDrop(event as Drag.Event); break; } } handleDragEnter(event: Drag.Event): void { if (event.mimeData.hasData('application/vnd.lumino.view-container-factory')) { event.preventDefault(); event.stopPropagation(); } } toDisposeOnDragEnd = new DisposableCollection(); handleDragOver(event: Drag.Event): void { const factory = event.mimeData.getData('application/vnd.lumino.view-container-factory'); const widget = factory && factory(); if (!(widget instanceof ViewContainerPart)) { return; } event.preventDefault(); event.stopPropagation(); const sameContainers = this.id === widget.currentViewContainerId; const targetPart = ArrayExt.findFirstValue(this.getParts(), (p => ElementExt.hitTest(p.node, event.clientX, event.clientY))); if (!targetPart && sameContainers) { event.dropAction = 'none'; return; } if (targetPart) { // add overlay class style to the `targetPart` node. targetPart.node.classList.add('drop-target'); this.toDisposeOnDragEnd.push(Disposable.create(() => targetPart.node.classList.remove('drop-target'))); } else { // show panel overlay. const dockPanel = this.getDockPanel(); if (dockPanel) { dockPanel.overlay.show({ top: 0, bottom: 0, right: 0, left: 0 }); this.toDisposeOnDragEnd.push(Disposable.create(() => dockPanel.overlay.hide(100))); } } const isDraggingOutsideDisabled = this.disableDNDBetweenContainers || widget.viewContainer?.disableDNDBetweenContainers || widget.options.disableDraggingToOtherContainers; if (isDraggingOutsideDisabled && !sameContainers) { const { target } = event; if (target instanceof HTMLElement) { target.classList.add('theia-cursor-no-drop'); this.toDisposeOnDragEnd.push(Disposable.create(() => { target.classList.remove('theia-cursor-no-drop'); })); } event.dropAction = 'none'; return; }; event.dropAction = event.proposedAction; }; handleDragLeave(event: Drag.Event): void { this.toDisposeOnDragEnd.dispose(); if (event.mimeData.hasData('application/vnd.lumino.view-container-factory')) { event.preventDefault(); event.stopPropagation(); } }; handleDrop(event: Drag.Event): void { this.toDisposeOnDragEnd.dispose(); const factory = event.mimeData.getData('application/vnd.lumino.view-container-factory'); const draggedPart = factory && factory(); if (!(draggedPart instanceof ViewContainerPart)) { event.dropAction = 'none'; return; } event.preventDefault(); event.stopPropagation(); const parts = this.getParts(); const toIndex = ArrayExt.findFirstIndex(parts, part => ElementExt.hitTest(part.node, event.clientX, event.clientY)); if (draggedPart.currentViewContainerId !== this.id) { this.attachNewPart(draggedPart, toIndex > -1 ? toIndex + 1 : toIndex); draggedPart.onPartMoved(this); } else { this.moveBefore(draggedPart.id, parts[toIndex].id); } event.dropAction = event.proposedAction; } protected registerDND(part: ViewContainerPart): Disposable { part.headerElement.draggable = true; return new DisposableCollection( addEventListener(part.headerElement, 'dragstart', event => { event.preventDefault(); const mimeData = new MimeData(); mimeData.setData('application/vnd.lumino.view-container-factory', () => part); const clonedHeader = part.headerElement.cloneNode(true) as HTMLElement; clonedHeader.style.width = part.node.style.width; clonedHeader.style.opacity = '0.6'; const drag = new Drag({ mimeData, dragImage: clonedHeader, proposedAction: 'move', supportedActions: 'move' }); part.node.classList.add('lm-mod-hidden'); drag.start(event.clientX, event.clientY).then(dropAction => { // The promise is resolved when the drag has ended if (dropAction === 'move' && part.currentViewContainerId !== this.id) { this.removeWidget(part.wrapped); this.lastVisibleState = this.doStoreState(); } }); setTimeout(() => { part.node.classList.remove('lm-mod-hidden'); }, 0); }, false)); } protected getDockPanel(): DockPanel | undefined { let panel: DockPanel | undefined; let parent = this.parent; while (!panel && parent) { if (this.isSideDockPanel(parent)) { panel = parent as DockPanel; } else { parent = parent.parent; } } return panel; } protected isSideDockPanel(widget: Widget): boolean { const { leftPanelHandler, rightPanelHandler } = this.shell; if (widget instanceof DockPanel && (widget.id === rightPanelHandler.dockPanel.id || widget.id === leftPanelHandler.dockPanel.id)) { return true; } return false; } } export namespace ViewContainer { export const Factory = Symbol('ViewContainerFactory'); export interface Factory { (options: ViewContainerIdentifier): ViewContainer; } export namespace Factory { export interface WidgetOptions { readonly order?: number; readonly weight?: number; readonly initiallyCollapsed?: boolean; readonly canHide?: boolean; readonly initiallyHidden?: boolean; /** * Disable dragging this part from its original container to other containers, * But allow dropping parts from other containers on it, * This option only applies to the `ViewContainerPart` and has no effect on the ViewContainer. */ readonly disableDraggingToOtherContainers?: boolean; } export interface WidgetDescriptor { readonly widget: Widget | interfaces.ServiceIdentifier; readonly options?: WidgetOptions; } } export interface State { title?: ViewContainerTitleOptions; parts: ViewContainerPart.State[] } export function getOrientation(node: HTMLElement): 'horizontal' | 'vertical' { if (node.closest(`#${MAIN_AREA_ID}`) || node.closest(`#${BOTTOM_AREA_ID}`)) { return 'horizontal'; } return 'vertical'; } } /** * Wrapper around a widget held by a view container. Adds a header to display the * title, toolbar, and collapse / expand handle. */ export class ViewContainerPart extends BaseWidget { protected readonly header: HTMLElement; protected readonly body: HTMLElement; protected readonly collapsedEmitter = new Emitter(); protected readonly contextMenuEmitter = new Emitter(); protected readonly onTitleChangedEmitter = new Emitter(); readonly onTitleChanged = this.onTitleChangedEmitter.event; protected readonly onDidFocusEmitter = new Emitter(); readonly onDidFocus = this.onDidFocusEmitter.event; protected readonly onPartMovedEmitter = new Emitter(); readonly onDidMove = this.onPartMovedEmitter.event; protected readonly onDidChangeDescriptionEmitter = new Emitter(); readonly onDidChangeDescription = this.onDidChangeDescriptionEmitter.event; protected readonly onDidChangeBadgeEmitter = new Emitter(); readonly onDidChangeBadge = this.onDidChangeBadgeEmitter.event; protected readonly onDidChangeBadgeTooltipEmitter = new Emitter(); readonly onDidChangeBadgeTooltip = this.onDidChangeBadgeTooltipEmitter.event; protected readonly toolbar: TabBarToolbar; protected _collapsed: boolean; uncollapsedSize: number | undefined; animatedSize: number | undefined; protected readonly toNoDisposeWrapped: Disposable; constructor( readonly wrapped: Widget, readonly partId: string, protected currentContainerId: string, readonly originalContainerId: string, readonly originalContainerTitle: ViewContainerTitleOptions | undefined, protected readonly toolbarRegistry: TabBarToolbarRegistry, protected readonly toolbarFactory: TabBarToolbarFactory, readonly options: ViewContainer.Factory.WidgetOptions = {} ) { super(); wrapped.parent = this; wrapped.disposed.connect(() => this.dispose()); this.id = `${originalContainerId}--${wrapped.id}`; this.addClass('part'); const fireTitleChanged = () => this.onTitleChangedEmitter.fire(undefined); this.wrapped.title.changed.connect(fireTitleChanged); this.toDispose.push(Disposable.create(() => this.wrapped.title.changed.disconnect(fireTitleChanged))); if (DescriptionWidget.is(this.wrapped)) { this.wrapped?.onDidChangeDescription(() => this.onDidChangeDescriptionEmitter.fire(), undefined, this.toDispose); } if (BadgeWidget.is(this.wrapped)) { this.wrapped.onDidChangeBadge(() => this.onDidChangeBadgeEmitter.fire(), undefined, this.toDispose); this.wrapped.onDidChangeBadgeTooltip(() => this.onDidChangeBadgeTooltipEmitter.fire(), undefined, this.toDispose); } if (DynamicToolbarWidget.is(this.wrapped)) { this.wrapped.onDidChangeToolbarItems(() => { this.toolbar.updateTarget(this.wrapped); this.viewContainer?.update(); }); } const { header, body, disposable } = this.createContent(); this.header = header; this.body = body; this.toNoDisposeWrapped = this.toDispose.push(wrapped); this.toolbar = this.toolbarFactory(); this.toolbar.addClass('theia-view-container-part-title'); this.toDispose.pushAll([ disposable, this.toolbar, this.toolbarRegistry.onDidChange(() => this.toolbar.updateTarget(this.wrapped)), this.collapsedEmitter, this.contextMenuEmitter, this.onTitleChangedEmitter, this.onDidChangeDescriptionEmitter, this.onDidChangeBadgeEmitter, this.onDidChangeBadgeTooltipEmitter, this.registerContextMenu(), this.onDidFocusEmitter, // focus event does not bubble, capture it addEventListener(this.node, 'focus', () => this.onDidFocusEmitter.fire(this), true) ]); this.scrollOptions = { suppressScrollX: true, minScrollbarLength: 35 }; this.collapsed = !!options.initiallyCollapsed; if (options.initiallyHidden && this.canHide) { this.hide(); } } get viewContainer(): ViewContainer | undefined { return this.parent ? this.parent.parent as ViewContainer : undefined; } get currentViewContainerId(): string { return this.currentContainerId; } get headerElement(): HTMLElement { return this.header; } get collapsed(): boolean { return this._collapsed; } set collapsed(collapsed: boolean) { // Cannot collapse/expand if the orientation of the container is `horizontal`. const orientation = ViewContainer.getOrientation(this.node); if (this._collapsed === collapsed || (orientation === 'horizontal' && collapsed)) { return; } this._collapsed = collapsed; this.node.classList.toggle('collapsed', collapsed); if (collapsed && this.wrapped.node.contains(document.activeElement)) { this.header.focus(); } this.wrapped.setHidden(collapsed); const toggleIcon = this.header.querySelector(`span.${EXPANSION_TOGGLE_CLASS}`); if (toggleIcon) { if (collapsed) { toggleIcon.classList.add(COLLAPSED_CLASS); } else { toggleIcon.classList.remove(COLLAPSED_CLASS); } } this.update(); this.collapsedEmitter.fire(collapsed); } onPartMoved(newContainer: ViewContainer): void { this.currentContainerId = newContainer.id; this.onPartMovedEmitter.fire(newContainer); } override setHidden(hidden: boolean): void { if (!this.canHide) { return; } super.setHidden(hidden); } get canHide(): boolean { return this.options.canHide === undefined || this.options.canHide; } get onCollapsed(): CommonEvent { return this.collapsedEmitter.event; } get onContextMenu(): CommonEvent { return this.contextMenuEmitter.event; } get minSize(): number { const style = getComputedStyle(this.body); if (ViewContainer.getOrientation(this.node) === 'horizontal') { return parseCssMagnitude(style.minWidth, 0); } else { return parseCssMagnitude(style.minHeight, 0); } } protected readonly toShowHeader = new DisposableCollection(); showTitle(): void { this.toShowHeader.dispose(); } hideTitle(): void { if (this.titleHidden) { return; } const display = this.header.style.display; const height = this.body.style.height; this.body.style.height = '100%'; this.header.style.display = 'none'; this.toShowHeader.push(Disposable.create(() => { this.header.style.display = display; this.body.style.height = height; })); } get titleHidden(): boolean { return !this.toShowHeader.disposed || this.collapsed; } protected override getScrollContainer(): HTMLElement { return this.body; } protected registerContextMenu(): Disposable { return new DisposableCollection( addEventListener(this.header, 'contextmenu', event => { this.contextMenuEmitter.fire(event); }) ); } protected createContent(): { header: HTMLElement, body: HTMLElement, disposable: Disposable } { const disposable = new DisposableCollection(); const { header, disposable: headerDisposable } = this.createHeader(); const body = document.createElement('div'); body.classList.add('body'); this.node.appendChild(header); this.node.appendChild(body); disposable.push(headerDisposable); return { header, body, disposable, }; } protected createHeader(): { header: HTMLElement, disposable: Disposable } { const disposable = new DisposableCollection(); const header = document.createElement('div'); header.tabIndex = 0; header.classList.add('theia-header', 'header', 'theia-view-container-part-header'); disposable.push(addEventListener(header, 'click', event => { if (this.toolbar && this.toolbar.shouldHandleMouseEvent(event)) { return; } this.collapsed = !this.collapsed; })); disposable.push(addKeyListener(header, Key.ARROW_LEFT, () => this.collapsed = true)); disposable.push(addKeyListener(header, Key.ARROW_RIGHT, () => this.collapsed = false)); disposable.push(addKeyListener(header, Key.ENTER, () => this.collapsed = !this.collapsed)); const toggleIcon = document.createElement('span'); toggleIcon.classList.add(EXPANSION_TOGGLE_CLASS, ...CODICON_TREE_ITEM_CLASSES); if (this.collapsed) { toggleIcon.classList.add(COLLAPSED_CLASS); } header.appendChild(toggleIcon); const title = document.createElement('span'); title.classList.add('label', 'noselect'); const description = document.createElement('span'); description.classList.add('description'); const badgeSpan = document.createElement('span'); badgeSpan.classList.add('notification-count'); const badgeContainer = document.createElement('div'); badgeContainer.classList.add('notification-count-container'); badgeContainer.appendChild(badgeSpan); const badgeContainerDisplay = badgeContainer.style.display; const updateTitle = () => { if (this.currentContainerId !== this.originalContainerId && this.originalContainerTitle?.label) { // Creating a title in format: : . title.innerText = this.originalContainerTitle.label + ': ' + this.wrapped.title.label; } else { title.innerText = this.wrapped.title.label; } }; const updateCaption = () => title.title = this.wrapped.title.caption || this.wrapped.title.label; const updateDescription = () => { description.innerText = DescriptionWidget.is(this.wrapped) && !this.collapsed && this.wrapped.description || ''; }; const updateBadge = () => { if (BadgeWidget.is(this.wrapped)) { const visibleToolBarItems = this.toolbarRegistry.visibleItems(this.wrapped).length > 0; const badge = this.wrapped.badge; if (badge && !visibleToolBarItems) { badgeSpan.innerText = badge.toString(); badgeSpan.title = this.wrapped.badgeTooltip || ''; badgeContainer.style.display = badgeContainerDisplay; return; } } badgeContainer.style.display = 'none'; }; updateTitle(); updateCaption(); updateDescription(); updateBadge(); disposable.pushAll([ this.onTitleChanged(updateTitle), this.onTitleChanged(updateCaption), this.onDidMove(updateTitle), this.onDidChangeDescription(updateDescription), this.onDidChangeBadge(updateBadge), this.onDidChangeBadgeTooltip(updateBadge), this.onCollapsed(updateDescription) ]); header.appendChild(title); header.appendChild(description); header.appendChild(badgeContainer); return { header, disposable }; } protected handleResize(): void { const handleMouseEnter = () => { this.node?.classList.add('no-pointer-events'); setTimeout(() => { this.node?.classList.remove('no-pointer-events'); this.node?.removeEventListener('mouseenter', handleMouseEnter); }, 100); }; this.node?.addEventListener('mouseenter', handleMouseEnter); } protected override onResize(msg: Widget.ResizeMessage): void { this.handleResize(); if (this.wrapped.isAttached && !this.collapsed) { MessageLoop.sendMessage(this.wrapped, Widget.ResizeMessage.UnknownSize); } super.onResize(msg); } protected override onUpdateRequest(msg: Message): void { if (this.wrapped.isAttached && !this.collapsed) { MessageLoop.sendMessage(this.wrapped, msg); } super.onUpdateRequest(msg); } protected override onAfterAttach(msg: Message): void { if (!this.wrapped.isAttached) { UnsafeWidgetUtilities.attach(this.wrapped, this.body); } UnsafeWidgetUtilities.attach(this.toolbar, this.header); super.onAfterAttach(msg); } protected override onBeforeDetach(msg: Message): void { super.onBeforeDetach(msg); if (this.toolbar.isAttached) { Widget.detach(this.toolbar); } if (this.wrapped.isAttached) { UnsafeWidgetUtilities.detach(this.wrapped); } } protected override onBeforeShow(msg: Message): void { if (this.wrapped.isAttached && !this.collapsed) { MessageLoop.sendMessage(this.wrapped, msg); } super.onBeforeShow(msg); } protected override onAfterShow(msg: Message): void { super.onAfterShow(msg); if (this.wrapped.isAttached && !this.collapsed) { MessageLoop.sendMessage(this.wrapped, msg); } } protected override onBeforeHide(msg: Message): void { if (this.wrapped.isAttached && !this.collapsed) { MessageLoop.sendMessage(this.wrapped, msg); } super.onBeforeShow(msg); } protected override onAfterHide(msg: Message): void { super.onAfterHide(msg); if (this.wrapped.isAttached && !this.collapsed) { MessageLoop.sendMessage(this.wrapped, msg); } } protected override onChildRemoved(msg: Widget.ChildMessage): void { super.onChildRemoved(msg); // if wrapped is not disposed, but detached then we should not dispose it, but only get rid of this part this.toNoDisposeWrapped.dispose(); this.dispose(); } protected override onActivateRequest(msg: Message): void { super.onActivateRequest(msg); if (this.collapsed) { this.header.focus(); } else { this.wrapped.activate(); } } } export namespace ViewContainerPart { /** * Make sure to adjust the `line-height` of the `.theia-view-container .part > .header` CSS class when modifying this, and vice versa. */ export const HEADER_HEIGHT = 22; export interface State { widget?: Widget partId: string; collapsed: boolean; hidden: boolean; relativeSize?: number; description?: string; /** The original container to which this part belongs */ originalContainerId: string; originalContainerTitle?: ViewContainerTitleOptions; } export function closestPart(element: Element | EventTarget | null, selector: string = 'div.part'): Element | undefined { if (element instanceof Element) { const part = element.closest(selector); if (part instanceof Element) { return part; } } return undefined; } } export class ViewContainerLayout extends SplitLayout { constructor(protected options: ViewContainerLayout.Options, protected readonly splitPositionHandler: SplitPositionHandler) { super(options); } protected get items(): ReadonlyArray { // eslint-disable-next-line @typescript-eslint/no-explicit-any return (this as any)._items as Array; } iter(): IterableIterator { return map(this.items, item => item.widget); } // @ts-expect-error TS2611 `SplitLayout.widgets` is declared as `readonly widgets` but is implemented as a getter. get widgets(): ViewContainerPart[] { return Array.from(this.iter()); } override attachWidget(index: number, widget: ViewContainerPart): void { super.attachWidget(index, widget); if (index > -1 && this.parent && this.parent.node.contains(this.widgets[index + 1]?.node)) { // Set the correct attach index to the DOM elements. const ref = this.widgets[index + 1].node; this.parent.node.insertBefore(widget.node, ref); this.parent.node.insertBefore(this.handles[index], ref); this.parent.fit(); } } getPartSize(part: ViewContainerPart): number | undefined { if (part.collapsed || part.isHidden) { return part.uncollapsedSize; } if (this.orientation === 'horizontal') { return part.node.offsetWidth; } else { return part.node.offsetHeight; } } /** * Set the sizes of the view container parts according to the given weights * by moving the split handles. This is similar to `setRelativeSizes` defined * in `SplitLayout`, but here we properly consider the collapsed / expanded state. */ setPartSizes(weights: (number | undefined)[]): void { const parts = this.widgets; const availableSize = this.getAvailableSize(); // Sum up the weights of visible parts let totalWeight = 0; let weightCount = 0; for (let index = 0; index < weights.length && index < parts.length; index++) { const part = parts[index]; const weight = weights[index]; if (weight && !part.isHidden && !part.collapsed) { totalWeight += weight; weightCount++; } } if (weightCount === 0 || availableSize === 0) { return; } // Add the average weight for visible parts without weight const averageWeight = totalWeight / weightCount; for (let index = 0; index < weights.length && index < parts.length; index++) { const part = parts[index]; const weight = weights[index]; if (!weight && !part.isHidden && !part.collapsed) { totalWeight += averageWeight; } } // Apply the weights to compute actual sizes let position = 0; for (let index = 0; index < weights.length && index < parts.length - 1; index++) { const part = parts[index]; if (!part.isHidden) { if (this.orientation === 'vertical') { position += this.options.headerSize; } const weight = weights[index]; if (part.collapsed) { if (weight) { part.uncollapsedSize = weight / totalWeight * availableSize; } } else { let contentSize = (weight || averageWeight) / totalWeight * availableSize; const minSize = part.minSize; if (contentSize < minSize) { contentSize = minSize; } position += contentSize; } this.setHandlePosition(index, position); position += this.spacing; } } } /** * Determine the size of the split panel area that is available for widget content, * i.e. excluding part headers and split handles. */ getAvailableSize(): number { if (!this.parent || !this.parent.isAttached) { return 0; } const parts = this.widgets; const visiblePartCount = parts.filter(part => !part.isHidden).length; let availableSize: number; if (this.orientation === 'horizontal') { availableSize = this.parent.node.offsetWidth; } else { availableSize = this.parent.node.offsetHeight; availableSize -= visiblePartCount * this.options.headerSize; } availableSize -= (visiblePartCount - 1) * this.spacing; if (availableSize < 0) { return 0; } return availableSize; } /** * Update a view container part that has been collapsed or expanded. The transition * to the new state is animated. */ updateCollapsed(part: ViewContainerPart, enableAnimation: boolean): void { const index = this.items.findIndex(item => item.widget === part); if (index < 0 || !this.parent || part.isHidden) { return; } // Do not store the height of the "stretched item". Otherwise, we mess up the "hint height". // Store the height only if there are other expanded items. const currentSize = this.orientation === 'horizontal' ? part.node.offsetWidth : part.node.offsetHeight; if (part.collapsed && this.items.some(item => !item.widget.collapsed && !item.widget.isHidden)) { part.uncollapsedSize = currentSize; } if (!enableAnimation || this.options.animationDuration <= 0) { MessageLoop.postMessage(this.parent, Widget.Msg.FitRequest); return; } let startTime: number | undefined = undefined; const duration = this.options.animationDuration; const direction = part.collapsed ? 'collapse' : 'expand'; let fullSize: number; if (direction === 'collapse') { fullSize = currentSize - this.options.headerSize; } else { fullSize = Math.max((part.uncollapsedSize || 0) - this.options.headerSize, part.minSize); if (this.items.filter(item => !item.widget.collapsed && !item.widget.isHidden).length === 1) { // Expand to full available size fullSize = Math.max(fullSize, this.getAvailableSize()); } } // The update function is called on every animation frame until the predefined duration has elapsed. const updateFunc = (time: number) => { if (!this.parent) { part.animatedSize = undefined; return; } if (startTime === undefined) { startTime = time; } if (time - startTime < duration) { // Render an intermediate state for the animation const t = this.tween((time - startTime) / duration); if (direction === 'collapse') { part.animatedSize = (1 - t) * fullSize; } else { part.animatedSize = t * fullSize; } requestAnimationFrame(updateFunc); } else { // The animation is finished if (direction === 'collapse') { part.animatedSize = undefined; } else { part.animatedSize = fullSize; // Request another frame to reset the part to variable size requestAnimationFrame(() => { part.animatedSize = undefined; if (this.parent) { MessageLoop.sendMessage(this.parent, Widget.Msg.FitRequest); } }); } } MessageLoop.sendMessage(this.parent, Widget.Msg.FitRequest); }; requestAnimationFrame(updateFunc); } updateSashes(): void { const { widgets, handles } = this; if (widgets.length !== handles.length) { console.warn('Unexpected mismatch between number of widgets and number of handles.'); return; } const firstUncollapsed = this.getFirstUncollapsedWidgetIndex(); const lastUncollapsed = firstUncollapsed === undefined ? undefined : this.getLastUncollapsedWidgetIndex(); const allHidden = firstUncollapsed === lastUncollapsed; for (const [index, handle] of this.handles.entries()) { // The or clauses are added for type checking. If they're true, allHidden will also have been true. if (allHidden || firstUncollapsed === undefined || lastUncollapsed === undefined) { handle.classList.add('sash-hidden'); } else if (index < lastUncollapsed && index >= firstUncollapsed) { handle.classList.remove('sash-hidden'); } else { handle.classList.add('sash-hidden'); } } } protected getFirstUncollapsedWidgetIndex(): number | undefined { const index = this.widgets.findIndex(widget => !widget.collapsed && !widget.isHidden); return index === -1 ? undefined : index; } protected getLastUncollapsedWidgetIndex(): number | undefined { for (let i = this.widgets.length - 1; i >= 0; i--) { if (!this.widgets[i].collapsed && !this.widgets[i].isHidden) { return i; } } } protected override onFitRequest(msg: Message): void { for (const part of this.widgets) { const style = part.node.style; if (part.animatedSize !== undefined) { // The part size has been fixed for animating the transition to collapsed / expanded state const fixedSize = `${this.options.headerSize + part.animatedSize}px`; style.minHeight = fixedSize; style.maxHeight = fixedSize; } else if (part.collapsed) { // The part size is fixed to the header size const fixedSize = `${this.options.headerSize}px`; style.minHeight = fixedSize; style.maxHeight = fixedSize; } else { const minSize = `${this.options.headerSize + part.minSize}px`; style.minHeight = minSize; style.maxHeight = ''; } } super.onFitRequest(msg); } /** * Sinusoidal tween function for smooth animation. */ protected tween(t: number): number { return 0.5 * (1 - Math.cos(Math.PI * t)); } setHandlePosition(index: number, position: number): Promise { const options: SplitPositionOptions = { referenceWidget: this.widgets[index], duration: 0 }; // eslint-disable-next-line @typescript-eslint/no-explicit-any return this.splitPositionHandler.setSplitHandlePosition(this.parent as SplitPanel, index, position, options) as Promise; } } export namespace ViewContainerLayout { export interface Options extends SplitLayout.IOptions { headerSize: number; animationDuration: number; } export interface Item { readonly widget: ViewContainerPart; } }