@codingame/monaco-vscode-api 2.1.4 → 2.2.0-next.2

package/vscode/src/vs/workbench/browser/parts/compositeBar.js

@@ -0,0 +1,603 @@
+import { __decorate, __param } from '../../../../../../external/tslib/tslib.es6.js';
+import { localizeWithPath } from '../../../nls.js';
+import { toAction } from '../../../base/common/actions.js';
+import { IInstantiationService } from '../../../platform/instantiation/common/instantiation.js';
+import { ActionBar } from '../../../base/browser/ui/actionbar/actionbar.js';
+import { CompositeOverflowActivityAction, CompositeActionViewItem, CompositeOverflowActivityActionViewItem } from './compositeBarActions.js';
+import { $, addDisposableListener, getWindow, EventType, isAncestor, EventHelper } from '../../../base/browser/dom.js';
+import { StandardMouseEvent } from '../../../base/browser/mouseEvent.js';
+import { IContextMenuService } from '../../../platform/contextview/browser/contextView.js';
+import { Widget } from '../../../base/browser/ui/widget.js';
+import { isUndefinedOrNull } from '../../../base/common/types.js';
+import { Emitter } from '../../../base/common/event.js';
+import { IViewDescriptorService } from '../../common/views.js';
+import { CompositeDragAndDropObserver, toggleDropEffect } from '../dnd.js';
+import { Gesture, EventType as EventType$1 } from '../../../base/browser/touch.js';
+class CompositeDragAndDrop {
+    constructor(viewDescriptorService, targetContainerLocation, openComposite, moveComposite, getItems) {
+        this.viewDescriptorService = viewDescriptorService;
+        this.targetContainerLocation = targetContainerLocation;
+        this.openComposite = openComposite;
+        this.moveComposite = moveComposite;
+        this.getItems = getItems;
+    }
+    drop(data, targetCompositeId, originalEvent, before) {
+        const dragData = data.getData();
+        if (dragData.type === 'composite') {
+            const currentContainer = this.viewDescriptorService.getViewContainerById(dragData.id);
+            const currentLocation = this.viewDescriptorService.getViewContainerLocation(currentContainer);
+            if (currentLocation === this.targetContainerLocation) {
+                if (targetCompositeId) {
+                    this.moveComposite(dragData.id, targetCompositeId, before);
+                }
+            }
+            else {
+                this.viewDescriptorService.moveViewContainerToLocation(currentContainer, this.targetContainerLocation, this.getTargetIndex(targetCompositeId, before), 'dnd');
+            }
+        }
+        if (dragData.type === 'view') {
+            const viewToMove = this.viewDescriptorService.getViewDescriptorById(dragData.id);
+            if (viewToMove && viewToMove.canMoveView) {
+                this.viewDescriptorService.moveViewToLocation(viewToMove, this.targetContainerLocation, 'dnd');
+                const newContainer = this.viewDescriptorService.getViewContainerByViewId(viewToMove.id);
+                if (targetCompositeId) {
+                    this.moveComposite(newContainer.id, targetCompositeId, before);
+                }
+                this.openComposite(newContainer.id, true).then(composite => {
+                    composite?.openView(viewToMove.id, true);
+                });
+            }
+        }
+    }
+    onDragEnter(data, targetCompositeId, originalEvent) {
+        return this.canDrop(data, targetCompositeId);
+    }
+    onDragOver(data, targetCompositeId, originalEvent) {
+        return this.canDrop(data, targetCompositeId);
+    }
+    getTargetIndex(targetId, before2d) {
+        if (!targetId) {
+            return undefined;
+        }
+        const items = this.getItems();
+        const before = this.targetContainerLocation === 1  ? before2d?.horizontallyBefore : before2d?.verticallyBefore;
+        return items.filter(item => item.visible).findIndex(item => item.id === targetId) + (before ? 0 : 1);
+    }
+    canDrop(data, targetCompositeId) {
+        const dragData = data.getData();
+        if (dragData.type === 'composite') {
+            const currentContainer = this.viewDescriptorService.getViewContainerById(dragData.id);
+            const currentLocation = this.viewDescriptorService.getViewContainerLocation(currentContainer);
+            if (currentLocation === this.targetContainerLocation) {
+                return dragData.id !== targetCompositeId;
+            }
+            return true;
+        }
+        else {
+            const viewDescriptor = this.viewDescriptorService.getViewDescriptorById(dragData.id);
+            if (!viewDescriptor || !viewDescriptor.canMoveView) {
+                return false;
+            }
+            return true;
+        }
+    }
+}
+let CompositeBar = class CompositeBar extends Widget {
+    constructor(items, options, instantiationService, contextMenuService, viewDescriptorService) {
+        super();
+        this.options = options;
+        this.instantiationService = instantiationService;
+        this.contextMenuService = contextMenuService;
+        this.viewDescriptorService = viewDescriptorService;
+        this._onDidChange = this._register(( new Emitter()));
+        this.onDidChange = this._onDidChange.event;
+        this.model = ( new CompositeBarModel(items, options));
+        this.visibleComposites = [];
+        this.compositeSizeInBar = ( new Map());
+        this.computeSizes(this.model.visibleItems);
+    }
+    getCompositeBarItems() {
+        return [...this.model.items];
+    }
+    setCompositeBarItems(items) {
+        this.model.setItems(items);
+        this.updateCompositeSwitcher();
+    }
+    getPinnedComposites() {
+        return this.model.pinnedItems;
+    }
+    getVisibleComposites() {
+        return this.model.visibleItems;
+    }
+    create(parent) {
+        const actionBarDiv = parent.appendChild($('.composite-bar'));
+        this.compositeSwitcherBar = this._register(( new ActionBar(actionBarDiv, {
+            actionViewItemProvider: action => {
+                if (action instanceof CompositeOverflowActivityAction) {
+                    return this.compositeOverflowActionViewItem;
+                }
+                const item = this.model.findItem(action.id);
+                return item && this.instantiationService.createInstance(CompositeActionViewItem, { draggable: true, colors: this.options.colors, icon: this.options.icon, hoverOptions: this.options.activityHoverOptions, compact: this.options.compact }, action, item.pinnedAction, item.toggleBadgeAction, compositeId => this.options.getContextMenuActionsForComposite(compositeId), () => this.getContextMenuActions(), this.options.dndHandler, this);
+            },
+            orientation: this.options.orientation,
+            ariaLabel: ( localizeWithPath(
+                'vs/workbench/browser/parts/compositeBar',
+                'activityBarAriaLabel',
+                "Active View Switcher"
+            )),
+            ariaRole: 'tablist',
+            animated: false,
+            preventLoopNavigation: this.options.preventLoopNavigation,
+            triggerKeys: { keyDown: true }
+        })));
+        this._register(addDisposableListener(parent, EventType.CONTEXT_MENU, e => this.showContextMenu(getWindow(parent), e)));
+        this._register(Gesture.addTarget(parent));
+        this._register(addDisposableListener(parent, EventType$1.Contextmenu, e => this.showContextMenu(getWindow(parent), e)));
+        let insertDropBefore = undefined;
+        this._register(CompositeDragAndDropObserver.INSTANCE.registerTarget(parent, {
+            onDragOver: (e) => {
+                const visibleItems = this.getVisibleComposites();
+                if (!visibleItems.length || (e.eventData.target && isAncestor(e.eventData.target, actionBarDiv))) {
+                    insertDropBefore = this.updateFromDragging(parent, false, false, true);
+                    return;
+                }
+                const insertAtFront = this.insertAtFront(actionBarDiv, e.eventData);
+                const target = insertAtFront ? visibleItems[0] : visibleItems[visibleItems.length - 1];
+                const validDropTarget = this.options.dndHandler.onDragOver(e.dragAndDropData, target.id, e.eventData);
+                toggleDropEffect(e.eventData.dataTransfer, 'move', validDropTarget);
+                insertDropBefore = this.updateFromDragging(parent, validDropTarget, insertAtFront, true);
+            },
+            onDragLeave: (e) => {
+                insertDropBefore = this.updateFromDragging(parent, false, false, false);
+            },
+            onDragEnd: (e) => {
+                insertDropBefore = this.updateFromDragging(parent, false, false, false);
+            },
+            onDrop: (e) => {
+                const visibleItems = this.getVisibleComposites();
+                if (visibleItems.length) {
+                    const target = this.insertAtFront(actionBarDiv, e.eventData) ? visibleItems[0] : visibleItems[visibleItems.length - 1];
+                    this.options.dndHandler.drop(e.dragAndDropData, target.id, e.eventData, insertDropBefore);
+                }
+                insertDropBefore = this.updateFromDragging(parent, false, false, false);
+            }
+        }));
+        return actionBarDiv;
+    }
+    insertAtFront(element, event) {
+        const rect = element.getBoundingClientRect();
+        const posX = event.clientX;
+        const posY = event.clientY;
+        switch (this.options.orientation) {
+            case 0 :
+                return posX < rect.left;
+            case 1 :
+                return posY < rect.top;
+        }
+    }
+    updateFromDragging(element, showFeedback, front, isDragging) {
+        element.classList.toggle('dragged-over', isDragging);
+        element.classList.toggle('dragged-over-head', showFeedback && front);
+        element.classList.toggle('dragged-over-tail', showFeedback && !front);
+        if (!showFeedback) {
+            return undefined;
+        }
+        return { verticallyBefore: front, horizontallyBefore: front };
+    }
+    focus(index) {
+        this.compositeSwitcherBar?.focus(index);
+    }
+    recomputeSizes() {
+        this.computeSizes(this.model.visibleItems);
+        this.updateCompositeSwitcher();
+    }
+    layout(dimension) {
+        this.dimension = dimension;
+        if (dimension.height === 0 || dimension.width === 0) {
+            return;
+        }
+        if (this.compositeSizeInBar.size === 0) {
+            this.computeSizes(this.model.visibleItems);
+        }
+        this.updateCompositeSwitcher();
+    }
+    addComposite({ id, name, order, requestedIndex }) {
+        if (this.model.add(id, name, order, requestedIndex)) {
+            this.computeSizes([this.model.findItem(id)]);
+            this.updateCompositeSwitcher();
+        }
+    }
+    removeComposite(id) {
+        if (this.isPinned(id)) {
+            this.unpin(id);
+        }
+        if (this.model.remove(id)) {
+            this.updateCompositeSwitcher();
+        }
+    }
+    hideComposite(id) {
+        if (this.model.hide(id)) {
+            this.resetActiveComposite(id);
+            this.updateCompositeSwitcher();
+        }
+    }
+    activateComposite(id) {
+        const previousActiveItem = this.model.activeItem;
+        if (this.model.activate(id)) {
+            if (this.visibleComposites.indexOf(id) === -1 || (!!this.model.activeItem && !this.model.activeItem.pinned) || (previousActiveItem && !previousActiveItem.pinned)) {
+                this.updateCompositeSwitcher();
+            }
+        }
+    }
+    deactivateComposite(id) {
+        const previousActiveItem = this.model.activeItem;
+        if (this.model.deactivate()) {
+            if (previousActiveItem && !previousActiveItem.pinned) {
+                this.updateCompositeSwitcher();
+            }
+        }
+    }
+    async pin(compositeId, open) {
+        if (this.model.setPinned(compositeId, true)) {
+            this.updateCompositeSwitcher();
+            if (open) {
+                await this.options.openComposite(compositeId);
+                this.activateComposite(compositeId);
+            }
+        }
+    }
+    unpin(compositeId) {
+        if (this.model.setPinned(compositeId, false)) {
+            this.updateCompositeSwitcher();
+            this.resetActiveComposite(compositeId);
+        }
+    }
+    areBadgesEnabled(compositeId) {
+        return this.viewDescriptorService.getViewContainerBadgeEnablementState(compositeId);
+    }
+    toggleBadgeEnablement(compositeId) {
+        this.viewDescriptorService.setViewContainerBadgeEnablementState(compositeId, !this.areBadgesEnabled(compositeId));
+        this.updateCompositeSwitcher();
+        const item = this.model.findItem(compositeId);
+        if (item) {
+            item.activityAction.activity = item.activityAction.activity;
+        }
+    }
+    resetActiveComposite(compositeId) {
+        const defaultCompositeId = this.options.getDefaultCompositeId();
+        if (!this.model.activeItem || this.model.activeItem.id !== compositeId) {
+            return;
+        }
+        this.deactivateComposite(compositeId);
+        if (defaultCompositeId && defaultCompositeId !== compositeId && this.isPinned(defaultCompositeId)) {
+            this.options.openComposite(defaultCompositeId, true);
+        }
+        else {
+            this.options.openComposite(this.visibleComposites.filter(cid => cid !== compositeId)[0]);
+        }
+    }
+    isPinned(compositeId) {
+        const item = this.model.findItem(compositeId);
+        return item?.pinned;
+    }
+    move(compositeId, toCompositeId, before) {
+        if (before !== undefined) {
+            const fromIndex = this.model.items.findIndex(c => c.id === compositeId);
+            let toIndex = this.model.items.findIndex(c => c.id === toCompositeId);
+            if (fromIndex >= 0 && toIndex >= 0) {
+                if (!before && fromIndex > toIndex) {
+                    toIndex++;
+                }
+                if (before && fromIndex < toIndex) {
+                    toIndex--;
+                }
+                if (toIndex < this.model.items.length && toIndex >= 0 && toIndex !== fromIndex) {
+                    if (this.model.move(this.model.items[fromIndex].id, this.model.items[toIndex].id)) {
+                        setTimeout(() => this.updateCompositeSwitcher(), 0);
+                    }
+                }
+            }
+        }
+        else {
+            if (this.model.move(compositeId, toCompositeId)) {
+                setTimeout(() => this.updateCompositeSwitcher(), 0);
+            }
+        }
+    }
+    getAction(compositeId) {
+        const item = this.model.findItem(compositeId);
+        return item?.activityAction;
+    }
+    computeSizes(items) {
+        const size = this.options.compositeSize;
+        if (size) {
+            items.forEach(composite => this.compositeSizeInBar.set(composite.id, size));
+        }
+        else {
+            const compositeSwitcherBar = this.compositeSwitcherBar;
+            if (compositeSwitcherBar && this.dimension && this.dimension.height !== 0 && this.dimension.width !== 0) {
+                const currentItemsLength = compositeSwitcherBar.viewItems.length;
+                compositeSwitcherBar.push(( items.map(composite => composite.activityAction)));
+                items.forEach((composite, index) => this.compositeSizeInBar.set(composite.id, this.options.orientation === 1
+                    ? compositeSwitcherBar.getHeight(currentItemsLength + index)
+                    : compositeSwitcherBar.getWidth(currentItemsLength + index)));
+                items.forEach(() => compositeSwitcherBar.pull(compositeSwitcherBar.viewItems.length - 1));
+            }
+        }
+    }
+    updateCompositeSwitcher() {
+        const compositeSwitcherBar = this.compositeSwitcherBar;
+        if (!compositeSwitcherBar || !this.dimension) {
+            return;
+        }
+        let compositesToShow = ( this.model.visibleItems.filter(item => item.pinned
+            || (this.model.activeItem && this.model.activeItem.id === item.id) ).map(item => item.id));
+        let maxVisible = compositesToShow.length;
+        const totalComposites = compositesToShow.length;
+        let size = 0;
+        const limit = this.options.orientation === 1  ? this.dimension.height : this.dimension.width;
+        for (let i = 0; i < compositesToShow.length; i++) {
+            const compositeSize = this.compositeSizeInBar.get(compositesToShow[i]);
+            if (size + compositeSize > limit) {
+                maxVisible = i;
+                break;
+            }
+            size += compositeSize;
+        }
+        if (totalComposites > maxVisible) {
+            compositesToShow = compositesToShow.slice(0, maxVisible);
+        }
+        if (this.model.activeItem && compositesToShow.every(compositeId => !!this.model.activeItem && compositeId !== this.model.activeItem.id)) {
+            size += this.compositeSizeInBar.get(this.model.activeItem.id);
+            compositesToShow.push(this.model.activeItem.id);
+        }
+        while (size > limit && compositesToShow.length) {
+            const removedComposite = compositesToShow.length > 1 ? compositesToShow.splice(compositesToShow.length - 2, 1)[0] : compositesToShow.pop();
+            size -= this.compositeSizeInBar.get(removedComposite);
+        }
+        if (totalComposites > compositesToShow.length) {
+            size += this.options.overflowActionSize;
+        }
+        while (size > limit && compositesToShow.length) {
+            const removedComposite = compositesToShow.length > 1 && compositesToShow[compositesToShow.length - 1] === this.model.activeItem?.id ?
+                compositesToShow.splice(compositesToShow.length - 2, 1)[0] : compositesToShow.pop();
+            size -= this.compositeSizeInBar.get(removedComposite);
+        }
+        if (totalComposites === compositesToShow.length && this.compositeOverflowAction) {
+            compositeSwitcherBar.pull(compositeSwitcherBar.length() - 1);
+            this.compositeOverflowAction.dispose();
+            this.compositeOverflowAction = undefined;
+            this.compositeOverflowActionViewItem?.dispose();
+            this.compositeOverflowActionViewItem = undefined;
+        }
+        const compositesToRemove = [];
+        this.visibleComposites.forEach((compositeId, index) => {
+            if (!compositesToShow.includes(compositeId)) {
+                compositesToRemove.push(index);
+            }
+        });
+        compositesToRemove.reverse().forEach(index => {
+            compositeSwitcherBar.pull(index);
+            this.visibleComposites.splice(index, 1);
+        });
+        compositesToShow.forEach((compositeId, newIndex) => {
+            const currentIndex = this.visibleComposites.indexOf(compositeId);
+            if (newIndex !== currentIndex) {
+                if (currentIndex !== -1) {
+                    compositeSwitcherBar.pull(currentIndex);
+                    this.visibleComposites.splice(currentIndex, 1);
+                }
+                compositeSwitcherBar.push(this.model.findItem(compositeId).activityAction, { label: true, icon: this.options.icon, index: newIndex });
+                this.visibleComposites.splice(newIndex, 0, compositeId);
+            }
+        });
+        if (totalComposites > compositesToShow.length && !this.compositeOverflowAction) {
+            this.compositeOverflowAction = this._register(this.instantiationService.createInstance(CompositeOverflowActivityAction, () => {
+                this.compositeOverflowActionViewItem?.showMenu();
+            }));
+            this.compositeOverflowActionViewItem = this._register(this.instantiationService.createInstance(CompositeOverflowActivityActionViewItem, this.compositeOverflowAction, () => this.getOverflowingComposites(), () => this.model.activeItem ? this.model.activeItem.id : undefined, compositeId => {
+                const item = this.model.findItem(compositeId);
+                return item?.activity[0]?.badge;
+            }, this.options.getOnCompositeClickAction, this.options.colors, this.options.activityHoverOptions));
+            compositeSwitcherBar.push(this.compositeOverflowAction, { label: false, icon: true });
+        }
+        this._onDidChange.fire();
+    }
+    getOverflowingComposites() {
+        let overflowingIds = ( this.model.visibleItems.filter(item => item.pinned).map(item => item.id));
+        if (this.model.activeItem && !this.model.activeItem.pinned) {
+            overflowingIds.push(this.model.activeItem.id);
+        }
+        overflowingIds = overflowingIds.filter(compositeId => !this.visibleComposites.includes(compositeId));
+        return ( this.model.visibleItems.filter(c => overflowingIds.includes(c.id)).map(
+            item => { return { id: item.id, name: this.getAction(item.id)?.label || item.name }; }
+        ));
+    }
+    showContextMenu(targetWindow, e) {
+        EventHelper.stop(e, true);
+        const event = ( new StandardMouseEvent(targetWindow, e));
+        this.contextMenuService.showContextMenu({
+            getAnchor: () => event,
+            getActions: () => this.getContextMenuActions(e)
+        });
+    }
+    getContextMenuActions(e) {
+        const actions = ( this.model.visibleItems
+            .map(({ id, name, activityAction }) => (toAction({
+            id,
+            label: this.getAction(id).label || name || id,
+            checked: this.isPinned(id),
+            enabled: activityAction.enabled,
+            run: () => {
+                if (this.isPinned(id)) {
+                    this.unpin(id);
+                }
+                else {
+                    this.pin(id, true);
+                }
+            }
+        }))));
+        return actions;
+    }
+};
+CompositeBar = ( __decorate([
+    ( __param(2, IInstantiationService)),
+    ( __param(3, IContextMenuService)),
+    ( __param(4, IViewDescriptorService))
+], CompositeBar));
+class CompositeBarModel {
+    get items() { return this._items; }
+    constructor(items, options) {
+        this._items = [];
+        this.options = options;
+        this.setItems(items);
+    }
+    setItems(items) {
+        this._items = [];
+        this._items = ( items
+            .map(
+            i => this.createCompositeBarItem(i.id, i.name, i.order, i.pinned, i.visible)
+        ));
+    }
+    get visibleItems() {
+        return this.items.filter(item => item.visible);
+    }
+    get pinnedItems() {
+        return this.items.filter(item => item.visible && item.pinned);
+    }
+    createCompositeBarItem(id, name, order, pinned, visible) {
+        const options = this.options;
+        return {
+            id, name, pinned, order, visible,
+            activity: [],
+            get activityAction() {
+                return options.getActivityAction(id);
+            },
+            get pinnedAction() {
+                return options.getCompositePinnedAction(id);
+            },
+            get toggleBadgeAction() {
+                return options.getCompositeBadgeAction(id);
+            }
+        };
+    }
+    add(id, name, order, requestedIndex) {
+        const item = this.findItem(id);
+        if (item) {
+            let changed = false;
+            item.name = name;
+            if (!isUndefinedOrNull(order)) {
+                changed = item.order !== order;
+                item.order = order;
+            }
+            if (!item.visible) {
+                item.visible = true;
+                changed = true;
+            }
+            return changed;
+        }
+        else {
+            const item = this.createCompositeBarItem(id, name, order, true, true);
+            if (!isUndefinedOrNull(requestedIndex)) {
+                let index = 0;
+                let rIndex = requestedIndex;
+                while (rIndex > 0 && index < this.items.length) {
+                    if (this.items[index++].visible) {
+                        rIndex--;
+                    }
+                }
+                this.items.splice(index, 0, item);
+            }
+            else if (isUndefinedOrNull(order)) {
+                this.items.push(item);
+            }
+            else {
+                let index = 0;
+                while (index < this.items.length && typeof this.items[index].order === 'number' && this.items[index].order < order) {
+                    index++;
+                }
+                this.items.splice(index, 0, item);
+            }
+            return true;
+        }
+    }
+    remove(id) {
+        for (let index = 0; index < this.items.length; index++) {
+            if (this.items[index].id === id) {
+                this.items.splice(index, 1);
+                return true;
+            }
+        }
+        return false;
+    }
+    hide(id) {
+        for (const item of this.items) {
+            if (item.id === id) {
+                if (item.visible) {
+                    item.visible = false;
+                    return true;
+                }
+                return false;
+            }
+        }
+        return false;
+    }
+    move(compositeId, toCompositeId) {
+        const fromIndex = this.findIndex(compositeId);
+        const toIndex = this.findIndex(toCompositeId);
+        if (fromIndex === -1 || toIndex === -1) {
+            return false;
+        }
+        const sourceItem = this.items.splice(fromIndex, 1)[0];
+        this.items.splice(toIndex, 0, sourceItem);
+        sourceItem.pinned = true;
+        return true;
+    }
+    setPinned(id, pinned) {
+        for (const item of this.items) {
+            if (item.id === id) {
+                if (item.pinned !== pinned) {
+                    item.pinned = pinned;
+                    return true;
+                }
+                return false;
+            }
+        }
+        return false;
+    }
+    activate(id) {
+        if (!this.activeItem || this.activeItem.id !== id) {
+            if (this.activeItem) {
+                this.deactivate();
+            }
+            for (const item of this.items) {
+                if (item.id === id) {
+                    this.activeItem = item;
+                    this.activeItem.activityAction.activate();
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    deactivate() {
+        if (this.activeItem) {
+            this.activeItem.activityAction.deactivate();
+            this.activeItem = undefined;
+            return true;
+        }
+        return false;
+    }
+    findItem(id) {
+        return this.items.filter(item => item.id === id)[0];
+    }
+    findIndex(id) {
+        for (let index = 0; index < this.items.length; index++) {
+            if (this.items[index].id === id) {
+                return index;
+            }
+        }
+        return -1;
+    }
+}
+export { CompositeBar, CompositeDragAndDrop };