@codingame/monaco-vscode-api 1.79.0 → 1.79.2-next.0

package/dist/vscode/vs/workbench/browser/parts/editor/editorDropTarget.js

@@ -0,0 +1,499 @@
+import { __decorate, __param } from '../../../../../../node_modules/tslib/tslib.es6.js';
+import './media/editordroptarget.css.js';
+import { DataTransfers } from 'monaco-editor/esm/vs/base/browser/dnd.js';
+import { DragAndDropObserver, EventHelper, addDisposableListener, EventType, isAncestor } from 'monaco-editor/esm/vs/base/browser/dom.js';
+import { renderFormattedText } from 'monaco-editor/esm/vs/base/browser/formattedTextRenderer.js';
+import { RunOnceScheduler } from 'monaco-editor/esm/vs/base/common/async.js';
+import { toDisposable } from 'monaco-editor/esm/vs/base/common/lifecycle.js';
+import { isMacintosh, isWeb } from 'monaco-editor/esm/vs/base/common/platform.js';
+import { assertIsDefined, assertAllDefined } from 'monaco-editor/esm/vs/base/common/types.js';
+import { localize } from 'monaco-editor/esm/vs/nls.js';
+import { IConfigurationService } from 'monaco-editor/esm/vs/platform/configuration/common/configuration.js';
+import { IInstantiationService } from 'monaco-editor/esm/vs/platform/instantiation/common/instantiation.js';
+import { Registry } from 'monaco-editor/esm/vs/platform/registry/common/platform.js';
+import { activeContrastBorder } from 'monaco-editor/esm/vs/platform/theme/common/colorRegistry.js';
+import { Themable, IThemeService } from 'monaco-editor/esm/vs/platform/theme/common/themeService.js';
+import { isTemporaryWorkspace, IWorkspaceContextService } from 'monaco-editor/esm/vs/platform/workspace/common/workspace.js';
+import { LocalSelectionTransfer, Extensions, containsDragType, CodeDataTransfers } from 'monaco-editor/esm/vs/platform/dnd/browser/dnd.js';
+import { DraggedEditorGroupIdentifier, DraggedEditorIdentifier, extractTreeDropData, ResourcesDropHandler } from '../../dnd.js';
+import { fillActiveEditorViewState } from './editor.js';
+import { EDITOR_DRAG_AND_DROP_BACKGROUND, EDITOR_DROP_INTO_PROMPT_BACKGROUND, EDITOR_DROP_INTO_PROMPT_FOREGROUND, EDITOR_DROP_INTO_PROMPT_BORDER } from '../../../common/theme.js';
+import { IEditorGroupsService } from '../../../services/editor/common/editorGroupsService.js';
+import { IEditorService } from '../../../services/editor/common/editorService.js';
+import { ITreeViewsDnDService } from 'monaco-editor/esm/vs/editor/common/services/treeViewsDndService.js';
+import { DraggedTreeItemsIdentifier } from 'monaco-editor/esm/vs/editor/common/services/treeViewsDnd.js';
+function isDropIntoEditorEnabledGlobally(configurationService) {
+    return configurationService.getValue('editor.dropIntoEditor.enabled');
+}
+function isDragIntoEditorEvent(e) {
+    return e.shiftKey;
+}
+let DropOverlay = class DropOverlay extends Themable {
+    get disposed() { return !!this._disposed; }
+    constructor(accessor, groupView, themeService, configurationService, instantiationService, editorService, editorGroupService, treeViewsDragAndDropService, contextService) {
+        super(themeService);
+        this.accessor = accessor;
+        this.groupView = groupView;
+        this.configurationService = configurationService;
+        this.instantiationService = instantiationService;
+        this.editorService = editorService;
+        this.editorGroupService = editorGroupService;
+        this.treeViewsDragAndDropService = treeViewsDragAndDropService;
+        this.contextService = contextService;
+        this.editorTransfer = LocalSelectionTransfer.getInstance();
+        this.groupTransfer = LocalSelectionTransfer.getInstance();
+        this.treeItemsTransfer = LocalSelectionTransfer.getInstance();
+        this.cleanupOverlayScheduler = this._register(( new RunOnceScheduler(() => this.dispose(), 300)));
+        this.enableDropIntoEditor = isDropIntoEditorEnabledGlobally(this.configurationService) && this.isDropIntoActiveEditorEnabled();
+        this.create();
+    }
+    create() {
+        const overlayOffsetHeight = this.getOverlayOffsetHeight();
+        const container = this.container = document.createElement('div');
+        container.id = DropOverlay.OVERLAY_ID;
+        container.style.top = `${overlayOffsetHeight}px`;
+        this.groupView.element.appendChild(container);
+        this.groupView.element.classList.add('dragged-over');
+        this._register(toDisposable(() => {
+            this.groupView.element.removeChild(container);
+            this.groupView.element.classList.remove('dragged-over');
+        }));
+        this.overlay = document.createElement('div');
+        this.overlay.classList.add('editor-group-overlay-indicator');
+        container.appendChild(this.overlay);
+        if (this.enableDropIntoEditor) {
+            this.dropIntoPromptElement = renderFormattedText(( localize(
+                'dropIntoEditorPrompt',
+                "Hold __{0}__ to drop into editor",
+                isMacintosh ? '⇧' : 'Shift'
+            )), {});
+            this.dropIntoPromptElement.classList.add('editor-group-overlay-drop-into-prompt');
+            this.overlay.appendChild(this.dropIntoPromptElement);
+        }
+        this.registerListeners(container);
+        this.updateStyles();
+    }
+    updateStyles() {
+        const overlay = assertIsDefined(this.overlay);
+        overlay.style.backgroundColor = this.getColor(EDITOR_DRAG_AND_DROP_BACKGROUND) || '';
+        const activeContrastBorderColor = this.getColor(activeContrastBorder);
+        overlay.style.outlineColor = activeContrastBorderColor || '';
+        overlay.style.outlineOffset = activeContrastBorderColor ? '-2px' : '';
+        overlay.style.outlineStyle = activeContrastBorderColor ? 'dashed' : '';
+        overlay.style.outlineWidth = activeContrastBorderColor ? '2px' : '';
+        if (this.dropIntoPromptElement) {
+            this.dropIntoPromptElement.style.backgroundColor = this.getColor(EDITOR_DROP_INTO_PROMPT_BACKGROUND) ?? '';
+            this.dropIntoPromptElement.style.color = this.getColor(EDITOR_DROP_INTO_PROMPT_FOREGROUND) ?? '';
+            const borderColor = this.getColor(EDITOR_DROP_INTO_PROMPT_BORDER);
+            if (borderColor) {
+                this.dropIntoPromptElement.style.borderWidth = '1px';
+                this.dropIntoPromptElement.style.borderStyle = 'solid';
+                this.dropIntoPromptElement.style.borderColor = borderColor;
+            }
+            else {
+                this.dropIntoPromptElement.style.borderWidth = '0';
+            }
+        }
+    }
+    registerListeners(container) {
+        this._register(( new DragAndDropObserver(container, {
+            onDragEnter: e => undefined,
+            onDragOver: e => {
+                if (this.enableDropIntoEditor && isDragIntoEditorEvent(e)) {
+                    this.dispose();
+                    return;
+                }
+                const isDraggingGroup = this.groupTransfer.hasData(DraggedEditorGroupIdentifier.prototype);
+                const isDraggingEditor = this.editorTransfer.hasData(DraggedEditorIdentifier.prototype);
+                if (!isDraggingEditor && !isDraggingGroup && e.dataTransfer) {
+                    e.dataTransfer.dropEffect = 'copy';
+                }
+                let isCopy = true;
+                if (isDraggingGroup) {
+                    isCopy = this.isCopyOperation(e);
+                }
+                else if (isDraggingEditor) {
+                    const data = this.editorTransfer.getData(DraggedEditorIdentifier.prototype);
+                    if (Array.isArray(data)) {
+                        isCopy = this.isCopyOperation(e, data[0].identifier);
+                    }
+                }
+                if (!isCopy) {
+                    const sourceGroupView = this.findSourceGroupView();
+                    if (sourceGroupView === this.groupView) {
+                        if (isDraggingGroup || (isDraggingEditor && sourceGroupView.count < 2)) {
+                            this.hideOverlay();
+                            return;
+                        }
+                    }
+                }
+                let splitOnDragAndDrop = !!this.editorGroupService.partOptions.splitOnDragAndDrop;
+                if (this.isToggleSplitOperation(e)) {
+                    splitOnDragAndDrop = !splitOnDragAndDrop;
+                }
+                this.positionOverlay(e.offsetX, e.offsetY, isDraggingGroup, splitOnDragAndDrop);
+                if (this.cleanupOverlayScheduler.isScheduled()) {
+                    this.cleanupOverlayScheduler.cancel();
+                }
+            },
+            onDragLeave: e => this.dispose(),
+            onDragEnd: e => this.dispose(),
+            onDrop: e => {
+                EventHelper.stop(e, true);
+                this.dispose();
+                if (this.currentDropOperation) {
+                    this.handleDrop(e, this.currentDropOperation.splitDirection);
+                }
+            }
+        })));
+        this._register(addDisposableListener(container, EventType.MOUSE_OVER, () => {
+            if (!this.cleanupOverlayScheduler.isScheduled()) {
+                this.cleanupOverlayScheduler.schedule();
+            }
+        }));
+    }
+    isDropIntoActiveEditorEnabled() {
+        return !!this.groupView.activeEditor?.hasCapability(128 );
+    }
+    findSourceGroupView() {
+        if (this.groupTransfer.hasData(DraggedEditorGroupIdentifier.prototype)) {
+            const data = this.groupTransfer.getData(DraggedEditorGroupIdentifier.prototype);
+            if (Array.isArray(data)) {
+                return this.accessor.getGroup(data[0].identifier);
+            }
+        }
+        else if (this.editorTransfer.hasData(DraggedEditorIdentifier.prototype)) {
+            const data = this.editorTransfer.getData(DraggedEditorIdentifier.prototype);
+            if (Array.isArray(data)) {
+                return this.accessor.getGroup(data[0].identifier.groupId);
+            }
+        }
+        return undefined;
+    }
+    async handleDrop(event, splitDirection) {
+        const ensureTargetGroup = () => {
+            let targetGroup;
+            if (typeof splitDirection === 'number') {
+                targetGroup = this.accessor.addGroup(this.groupView, splitDirection);
+            }
+            else {
+                targetGroup = this.groupView;
+            }
+            return targetGroup;
+        };
+        if (this.groupTransfer.hasData(DraggedEditorGroupIdentifier.prototype)) {
+            const data = this.groupTransfer.getData(DraggedEditorGroupIdentifier.prototype);
+            if (Array.isArray(data)) {
+                const sourceGroup = this.accessor.getGroup(data[0].identifier);
+                if (sourceGroup) {
+                    if (typeof splitDirection !== 'number' && sourceGroup === this.groupView) {
+                        return;
+                    }
+                    let targetGroup;
+                    if (typeof splitDirection === 'number') {
+                        if (this.isCopyOperation(event)) {
+                            targetGroup = this.accessor.copyGroup(sourceGroup, this.groupView, splitDirection);
+                        }
+                        else {
+                            targetGroup = this.accessor.moveGroup(sourceGroup, this.groupView, splitDirection);
+                        }
+                    }
+                    else {
+                        let mergeGroupOptions = undefined;
+                        if (this.isCopyOperation(event)) {
+                            mergeGroupOptions = { mode: 0  };
+                        }
+                        this.accessor.mergeGroup(sourceGroup, this.groupView, mergeGroupOptions);
+                    }
+                    if (targetGroup) {
+                        this.accessor.activateGroup(targetGroup);
+                    }
+                }
+                this.groupTransfer.clearData(DraggedEditorGroupIdentifier.prototype);
+            }
+        }
+        else if (this.editorTransfer.hasData(DraggedEditorIdentifier.prototype)) {
+            const data = this.editorTransfer.getData(DraggedEditorIdentifier.prototype);
+            if (Array.isArray(data)) {
+                const draggedEditor = data[0].identifier;
+                const targetGroup = ensureTargetGroup();
+                const sourceGroup = this.accessor.getGroup(draggedEditor.groupId);
+                if (sourceGroup) {
+                    if (sourceGroup === targetGroup) {
+                        return;
+                    }
+                    const options = fillActiveEditorViewState(sourceGroup, draggedEditor.editor, {
+                        pinned: true,
+                        sticky: sourceGroup.isSticky(draggedEditor.editor),
+                    });
+                    const copyEditor = this.isCopyOperation(event, draggedEditor);
+                    if (!copyEditor) {
+                        sourceGroup.moveEditor(draggedEditor.editor, targetGroup, options);
+                    }
+                    else {
+                        sourceGroup.copyEditor(draggedEditor.editor, targetGroup, options);
+                    }
+                    targetGroup.focus();
+                }
+                this.editorTransfer.clearData(DraggedEditorIdentifier.prototype);
+            }
+        }
+        else if (this.treeItemsTransfer.hasData(DraggedTreeItemsIdentifier.prototype)) {
+            const data = this.treeItemsTransfer.getData(DraggedTreeItemsIdentifier.prototype);
+            if (Array.isArray(data)) {
+                const editors = [];
+                for (const id of data) {
+                    const dataTransferItem = await this.treeViewsDragAndDropService.removeDragOperationTransfer(id.identifier);
+                    if (dataTransferItem) {
+                        const treeDropData = await extractTreeDropData(dataTransferItem);
+                        editors.push(...( treeDropData.map(editor => ({ ...editor, options: { ...editor.options, pinned: true } }))));
+                    }
+                }
+                if (editors.length) {
+                    this.editorService.openEditors(editors, ensureTargetGroup(), { validateTrust: true });
+                }
+            }
+            this.treeItemsTransfer.clearData(DraggedTreeItemsIdentifier.prototype);
+        }
+        else {
+            const dropHandler = this.instantiationService.createInstance(ResourcesDropHandler, { allowWorkspaceOpen: !isWeb || isTemporaryWorkspace(this.contextService.getWorkspace()) });
+            dropHandler.handleDrop(event, () => ensureTargetGroup(), targetGroup => targetGroup?.focus());
+        }
+    }
+    isCopyOperation(e, draggedEditor) {
+        if (draggedEditor?.editor.hasCapability(8 )) {
+            return false;
+        }
+        return (e.ctrlKey && !isMacintosh) || (e.altKey && isMacintosh);
+    }
+    isToggleSplitOperation(e) {
+        return (e.altKey && !isMacintosh) || (e.shiftKey && isMacintosh);
+    }
+    positionOverlay(mousePosX, mousePosY, isDraggingGroup, enableSplitting) {
+        const preferSplitVertically = this.accessor.partOptions.openSideBySideDirection === 'right';
+        const editorControlWidth = this.groupView.element.clientWidth;
+        const editorControlHeight = this.groupView.element.clientHeight - this.getOverlayOffsetHeight();
+        let edgeWidthThresholdFactor;
+        let edgeHeightThresholdFactor;
+        if (enableSplitting) {
+            if (isDraggingGroup) {
+                edgeWidthThresholdFactor = preferSplitVertically ? 0.3 : 0.1;
+            }
+            else {
+                edgeWidthThresholdFactor = 0.1;
+            }
+            if (isDraggingGroup) {
+                edgeHeightThresholdFactor = preferSplitVertically ? 0.1 : 0.3;
+            }
+            else {
+                edgeHeightThresholdFactor = 0.1;
+            }
+        }
+        else {
+            edgeWidthThresholdFactor = 0;
+            edgeHeightThresholdFactor = 0;
+        }
+        const edgeWidthThreshold = editorControlWidth * edgeWidthThresholdFactor;
+        const edgeHeightThreshold = editorControlHeight * edgeHeightThresholdFactor;
+        const splitWidthThreshold = editorControlWidth / 3;
+        const splitHeightThreshold = editorControlHeight / 3;
+        let splitDirection;
+        if (mousePosX > edgeWidthThreshold && mousePosX < editorControlWidth - edgeWidthThreshold &&
+            mousePosY > edgeHeightThreshold && mousePosY < editorControlHeight - edgeHeightThreshold) {
+            splitDirection = undefined;
+        }
+        else {
+            if (preferSplitVertically) {
+                if (mousePosX < splitWidthThreshold) {
+                    splitDirection = 2 ;
+                }
+                else if (mousePosX > splitWidthThreshold * 2) {
+                    splitDirection = 3 ;
+                }
+                else if (mousePosY < editorControlHeight / 2) {
+                    splitDirection = 0 ;
+                }
+                else {
+                    splitDirection = 1 ;
+                }
+            }
+            else {
+                if (mousePosY < splitHeightThreshold) {
+                    splitDirection = 0 ;
+                }
+                else if (mousePosY > splitHeightThreshold * 2) {
+                    splitDirection = 1 ;
+                }
+                else if (mousePosX < editorControlWidth / 2) {
+                    splitDirection = 2 ;
+                }
+                else {
+                    splitDirection = 3 ;
+                }
+            }
+        }
+        switch (splitDirection) {
+            case 0 :
+                this.doPositionOverlay({ top: '0', left: '0', width: '100%', height: '50%' });
+                this.toggleDropIntoPrompt(false);
+                break;
+            case 1 :
+                this.doPositionOverlay({ top: '50%', left: '0', width: '100%', height: '50%' });
+                this.toggleDropIntoPrompt(false);
+                break;
+            case 2 :
+                this.doPositionOverlay({ top: '0', left: '0', width: '50%', height: '100%' });
+                this.toggleDropIntoPrompt(false);
+                break;
+            case 3 :
+                this.doPositionOverlay({ top: '0', left: '50%', width: '50%', height: '100%' });
+                this.toggleDropIntoPrompt(false);
+                break;
+            default:
+                this.doPositionOverlay({ top: '0', left: '0', width: '100%', height: '100%' });
+                this.toggleDropIntoPrompt(true);
+        }
+        const overlay = assertIsDefined(this.overlay);
+        overlay.style.opacity = '1';
+        setTimeout(() => overlay.classList.add('overlay-move-transition'), 0);
+        this.currentDropOperation = { splitDirection };
+    }
+    doPositionOverlay(options) {
+        const [container, overlay] = assertAllDefined(this.container, this.overlay);
+        const offsetHeight = this.getOverlayOffsetHeight();
+        if (offsetHeight) {
+            container.style.height = `calc(100% - ${offsetHeight}px)`;
+        }
+        else {
+            container.style.height = '100%';
+        }
+        overlay.style.top = options.top;
+        overlay.style.left = options.left;
+        overlay.style.width = options.width;
+        overlay.style.height = options.height;
+    }
+    getOverlayOffsetHeight() {
+        if (!this.groupView.isEmpty && this.accessor.partOptions.showTabs) {
+            return this.groupView.titleHeight.offset;
+        }
+        return 0;
+    }
+    hideOverlay() {
+        const overlay = assertIsDefined(this.overlay);
+        this.doPositionOverlay({ top: '0', left: '0', width: '100%', height: '100%' });
+        overlay.style.opacity = '0';
+        overlay.classList.remove('overlay-move-transition');
+        this.currentDropOperation = undefined;
+    }
+    toggleDropIntoPrompt(showing) {
+        if (!this.dropIntoPromptElement) {
+            return;
+        }
+        this.dropIntoPromptElement.style.opacity = showing ? '1' : '0';
+    }
+    contains(element) {
+        return element === this.container || element === this.overlay;
+    }
+    dispose() {
+        super.dispose();
+        this._disposed = true;
+    }
+};
+DropOverlay.OVERLAY_ID = 'monaco-workbench-editor-drop-overlay';
+DropOverlay = ( __decorate([
+    ( __param(2, IThemeService)),
+    ( __param(3, IConfigurationService)),
+    ( __param(4, IInstantiationService)),
+    ( __param(5, IEditorService)),
+    ( __param(6, IEditorGroupsService)),
+    ( __param(7, ITreeViewsDnDService)),
+    ( __param(8, IWorkspaceContextService))
+], DropOverlay));
+let EditorDropTarget = class EditorDropTarget extends Themable {
+    constructor(accessor, container, delegate, themeService, configurationService, instantiationService) {
+        super(themeService);
+        this.accessor = accessor;
+        this.container = container;
+        this.delegate = delegate;
+        this.configurationService = configurationService;
+        this.instantiationService = instantiationService;
+        this.counter = 0;
+        this.editorTransfer = LocalSelectionTransfer.getInstance();
+        this.groupTransfer = LocalSelectionTransfer.getInstance();
+        this.registerListeners();
+    }
+    get overlay() {
+        if (this._overlay && !this._overlay.disposed) {
+            return this._overlay;
+        }
+        return undefined;
+    }
+    registerListeners() {
+        this._register(addDisposableListener(this.container, EventType.DRAG_ENTER, e => this.onDragEnter(e)));
+        this._register(addDisposableListener(this.container, EventType.DRAG_LEAVE, () => this.onDragLeave()));
+        [this.container, window].forEach(node => this._register(addDisposableListener(node, EventType.DRAG_END, () => this.onDragEnd())));
+    }
+    onDragEnter(event) {
+        if (isDropIntoEditorEnabledGlobally(this.configurationService) && isDragIntoEditorEvent(event)) {
+            return;
+        }
+        this.counter++;
+        if (!this.editorTransfer.hasData(DraggedEditorIdentifier.prototype) &&
+            !this.groupTransfer.hasData(DraggedEditorGroupIdentifier.prototype) &&
+            event.dataTransfer) {
+            const dndContributions = ( Registry.as(Extensions.DragAndDropContribution)).getAll();
+            const dndContributionKeys = ( Array.from(dndContributions).map(e => e.dataFormatKey));
+            if (!containsDragType(event, DataTransfers.FILES, CodeDataTransfers.FILES, DataTransfers.RESOURCES, CodeDataTransfers.EDITORS, ...dndContributionKeys)) {
+                event.dataTransfer.dropEffect = 'none';
+                return;
+            }
+        }
+        this.updateContainer(true);
+        const target = event.target;
+        if (target) {
+            if (this.overlay && !this.overlay.contains(target)) {
+                this.disposeOverlay();
+            }
+            if (!this.overlay) {
+                const targetGroupView = this.findTargetGroupView(target);
+                if (targetGroupView) {
+                    this._overlay = this.instantiationService.createInstance(DropOverlay, this.accessor, targetGroupView);
+                }
+            }
+        }
+    }
+    onDragLeave() {
+        this.counter--;
+        if (this.counter === 0) {
+            this.updateContainer(false);
+        }
+    }
+    onDragEnd() {
+        this.counter = 0;
+        this.updateContainer(false);
+        this.disposeOverlay();
+    }
+    findTargetGroupView(child) {
+        const groups = this.accessor.groups;
+        return groups.find(groupView => isAncestor(child, groupView.element) || this.delegate.containsGroup?.(groupView));
+    }
+    updateContainer(isDraggedOver) {
+        this.container.classList.toggle('dragged-over', isDraggedOver);
+    }
+    dispose() {
+        super.dispose();
+        this.disposeOverlay();
+    }
+    disposeOverlay() {
+        if (this.overlay) {
+            this.overlay.dispose();
+            this._overlay = undefined;
+        }
+    }
+};
+EditorDropTarget = ( __decorate([
+    ( __param(3, IThemeService)),
+    ( __param(4, IConfigurationService)),
+    ( __param(5, IInstantiationService))
+], EditorDropTarget));
+export { EditorDropTarget };