@codingame/monaco-vscode-api 13.1.7 → 14.0.1

package/vscode/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/sideBySideDiff.js

@@ -0,0 +1,584 @@
+
+import { __decorate, __param } from '../../../../../../../../../external/tslib/tslib.es6.js';
+import { $, getWindow } from '../../../../../../base/browser/dom.js';
+import { ActionViewItem } from '../../../../../../base/browser/ui/actionbar/actionViewItems.js';
+import { Color } from '../../../../../../base/common/color.js';
+import { structuralEquals } from '../../../../../../base/common/equals.js';
+import { Disposable } from '../../../../../../base/common/lifecycle.js';
+import '../../../../../../base/common/event.js';
+import { autorun } from '../../../../../../base/common/observableInternal/autorun.js';
+import { derived, derivedOpts } from '../../../../../../base/common/observableInternal/derived.js';
+import '../../../../../../base/common/cancellation.js';
+import { constObservable, derivedObservableWithCache, observableFromEvent } from '../../../../../../base/common/observableInternal/utils.js';
+import { MenuId, MenuItemAction } from '../../../../../../platform/actions/common/actions.js';
+import { ICommandService } from '../../../../../../platform/commands/common/commands.service.js';
+import { IInstantiationService } from '../../../../../../platform/instantiation/common/instantiation.js';
+import { registerColor, transparent } from '../../../../../../platform/theme/common/colorUtils.js';
+import '../../../../../../platform/theme/common/colors/baseColors.js';
+import '../../../../../../platform/theme/common/colors/chartsColors.js';
+import { diffRemoved, diffInsertedLine, diffInserted, editorHoverBorder } from '../../../../../../platform/theme/common/colors/editorColors.js';
+import '../../../../../../platform/theme/common/colors/inputColors.js';
+import '../../../../../../platform/theme/common/colors/listColors.js';
+import '../../../../../../platform/theme/common/colors/menuColors.js';
+import '../../../../../../platform/theme/common/colors/minimapColors.js';
+import '../../../../../../platform/theme/common/colors/miscColors.js';
+import '../../../../../../platform/theme/common/colors/quickpickColors.js';
+import '../../../../../../platform/theme/common/colors/searchColors.js';
+import { IThemeService } from '../../../../../../platform/theme/common/themeService.service.js';
+import { observableCodeEditor } from '../../../../../browser/observableCodeEditor.js';
+import { Point } from '../../../../../browser/point.js';
+import { EmbeddedCodeEditorWidget } from '../../../../../browser/widget/codeEditor/embeddedCodeEditorWidget.js';
+import { EditorOption } from '../../../../../common/config/editorOptions.js';
+import { OffsetRange } from '../../../../../common/core/offsetRange.js';
+import { Position } from '../../../../../common/core/position.js';
+import { Range } from '../../../../../common/core/range.js';
+import { StickyScrollController } from '../../../../stickyScroll/browser/stickyScrollController.js';
+import { InlineCompletionContextKeys } from '../../controller/inlineCompletionContextKeys.js';
+import { CustomizedMenuWorkbenchToolBar } from '../../hintsWidget/inlineCompletionsHintsWidget.js';
+import { maxContentWidthInRange, n, StatusBarViewItem, getOffsetForPos, PathBuilder, mapOutFalsy, createRectangle } from './utils.js';
+import { localize } from '../../../../../../nls.js';
+
+const originalBackgroundColor = registerColor('inlineEdit.originalBackground', Color.transparent, ( localize(1247, 'Background color for the original text in inline edits.')), true);
+registerColor('inlineEdit.modifiedBackground', Color.transparent, ( localize(1248, 'Background color for the modified text in inline edits.')), true);
+registerColor('inlineEdit.originalChangedLineBackground', Color.transparent, ( localize(
+    1249,
+    'Background color for the changed lines in the original text of inline edits.'
+)), true);
+registerColor('inlineEdit.originalChangedTextBackground', diffRemoved, ( localize(
+    1250,
+    'Overlay color for the changed text in the original text of inline edits.'
+)), true);
+registerColor('inlineEdit.modifiedChangedLineBackground', {
+    light: ( transparent(diffInsertedLine, 0.5)),
+    dark: ( transparent(diffInsertedLine, 0.5)),
+    hcDark: diffInsertedLine,
+    hcLight: diffInsertedLine
+}, ( localize(
+    1251,
+    'Background color for the changed lines in the modified text of inline edits.'
+)), true);
+registerColor('inlineEdit.modifiedChangedTextBackground', diffInserted, ( localize(
+    1252,
+    'Overlay color for the changed text in the modified text of inline edits.'
+)), true);
+registerColor('inlineEdit.originalBorder', {
+    light: editorHoverBorder,
+    dark: editorHoverBorder,
+    hcDark: editorHoverBorder,
+    hcLight: editorHoverBorder
+}, ( localize(1253, 'Border color for the original text in inline edits.')));
+registerColor('inlineEdit.modifiedBorder', {
+    light: editorHoverBorder,
+    dark: editorHoverBorder,
+    hcDark: editorHoverBorder,
+    hcLight: editorHoverBorder
+}, ( localize(1254, 'Border color for the modified text in inline edits.')));
+const PADDING = 4;
+let InlineEditsSideBySideDiff = class InlineEditsSideBySideDiff extends Disposable {
+    static fitsInsideViewport(editor, edit, reader) {
+        const editorObs = observableCodeEditor(editor);
+        const editorWidth = editorObs.layoutInfoWidth.read(reader);
+        const editorContentLeft = editorObs.layoutInfoContentLeft.read(reader);
+        const editorVerticalScrollBar = editor.getLayoutInfo().verticalScrollbarWidth;
+        const w = editor.getOption(EditorOption.fontInfo).typicalHalfwidthCharacterWidth;
+        const maxOriginalContent = maxContentWidthInRange(editorObs, edit.originalLineRange, undefined );
+        const maxModifiedContent = edit.lineEdit.newLines.reduce((max, line) => Math.max(max, line.length * w), 0);
+        const endOfEditorPadding = 20;
+        const editorsPadding = edit.modifiedLineRange.length <= edit.originalLineRange.length ? PADDING * 3 + endOfEditorPadding : 60 + endOfEditorPadding * 2;
+        return maxOriginalContent + maxModifiedContent + editorsPadding < editorWidth - editorContentLeft - editorVerticalScrollBar;
+    }
+    constructor(_editor, _edit, _previewTextModel, _uiState, _instantiationService, _commandService, _themeService) {
+        super();
+        this._editor = _editor;
+        this._edit = _edit;
+        this._previewTextModel = _previewTextModel;
+        this._uiState = _uiState;
+        this._instantiationService = _instantiationService;
+        this._commandService = _commandService;
+        this._themeService = _themeService;
+        this._editorObs = observableCodeEditor(this._editor);
+        this._display = derived(this, reader => !!this._uiState.read(reader) ? 'block' : 'none');
+        this.previewRef = n.ref();
+        this.toolbarRef = n.ref();
+        this._editorContainer = n.div({
+            class: ['editorContainer', ( this._editorObs.getOption(EditorOption.inlineSuggest).map(v => !v.edits.useGutterIndicator && 'showHover'))],
+            style: { position: 'absolute', overflow: 'hidden' },
+        }, [
+            n.div({ class: 'preview', style: {}, ref: this.previewRef }),
+            n.div({ class: 'toolbar', style: {}, ref: this.toolbarRef }),
+        ]).keepUpdated(this._store);
+        this.isHovered = this._editorContainer.getIsHovered(this._store);
+        this._toolbar = this._register(this._instantiationService.createInstance(CustomizedMenuWorkbenchToolBar, this.toolbarRef.element, MenuId.InlineEditsActions, {
+            menuOptions: { renderShortTitle: true },
+            toolbarOptions: {
+                primaryGroup: g => g.startsWith('primary'),
+            },
+            actionViewItemProvider: (action, options) => {
+                if (action instanceof MenuItemAction) {
+                    return this._instantiationService.createInstance(StatusBarViewItem, action, undefined);
+                }
+                if (action.class === undefined) {
+                    return this._instantiationService.createInstance(ActionViewItem, {}, action, { icon: false });
+                }
+                return undefined;
+            },
+            telemetrySource: 'inlineEditsToolbar'
+        }));
+        this._extraCommands = derivedOpts({ owner: this, equalsFn: structuralEquals }, reader => {
+            return this._uiState.read(reader)?.edit.commands ?? [];
+        });
+        this._updateToolbarAutorun = this._register(autorun(reader => {
+            const extraCommands = this._extraCommands.read(reader);
+            const primaryExtraActions = [];
+            const secondaryExtraActions = [];
+            for (const c of extraCommands) {
+                const action = {
+                    class: undefined,
+                    id: c.id,
+                    enabled: true,
+                    tooltip: c.tooltip || '',
+                    label: c.title,
+                    run: (event) => {
+                        return this._commandService.executeCommand(c.id, ...(c.arguments ?? []));
+                    },
+                };
+                if (c.title.toLowerCase().indexOf('feedback') !== -1) {
+                    primaryExtraActions.push(action);
+                }
+                else {
+                    secondaryExtraActions.push(action);
+                }
+            }
+            this._toolbar.setAdditionalPrimaryActions(primaryExtraActions);
+            this._toolbar.setAdditionalSecondaryActions(secondaryExtraActions);
+        }));
+        this.previewEditor = this._register(this._instantiationService.createInstance(EmbeddedCodeEditorWidget, this.previewRef.element, {
+            glyphMargin: false,
+            lineNumbers: 'off',
+            minimap: { enabled: false },
+            guides: {
+                indentation: false,
+                bracketPairs: false,
+                bracketPairsHorizontal: false,
+                highlightActiveIndentation: false,
+            },
+            rulers: [],
+            padding: { top: 0, bottom: 0 },
+            folding: false,
+            selectOnLineNumbers: false,
+            selectionHighlight: false,
+            columnSelection: false,
+            overviewRulerBorder: false,
+            overviewRulerLanes: 0,
+            lineDecorationsWidth: 0,
+            lineNumbersMinChars: 0,
+            revealHorizontalRightPadding: 0,
+            bracketPairColorization: { enabled: true, independentColorPoolPerBracketType: false },
+            scrollBeyondLastLine: false,
+            scrollbar: {
+                vertical: 'hidden',
+                horizontal: 'hidden',
+                handleMouseWheel: false,
+            },
+            readOnly: true,
+            wordWrap: 'off',
+            wordWrapOverride1: 'off',
+            wordWrapOverride2: 'off',
+        }, {
+            contextKeyValues: {
+                [InlineCompletionContextKeys.inInlineEditsPreviewEditor.key]: true,
+            },
+            contributions: [],
+        }, this._editor));
+        this._previewEditorObs = observableCodeEditor(this.previewEditor);
+        this._activeViewZones = [];
+        this._updatePreviewEditor = derived(reader => {
+            this._editorContainer.readEffect(reader);
+            this._display.read(reader);
+            if (this._overflowView) {
+                this._overflowView.element.style.display = this._display.read(reader);
+            }
+            if (this._nonOverflowView) {
+                this._nonOverflowView.element.style.display = this._display.read(reader);
+            }
+            const uiState = this._uiState.read(reader);
+            if (!uiState) {
+                return;
+            }
+            const range = uiState.edit.originalLineRange;
+            const hiddenAreas = [];
+            if (range.startLineNumber > 1) {
+                hiddenAreas.push(( new Range(1, 1, range.startLineNumber - 1, 1)));
+            }
+            if (range.startLineNumber + uiState.newTextLineCount < this._previewTextModel.getLineCount() + 1) {
+                hiddenAreas.push(( new Range(
+                    range.startLineNumber + uiState.newTextLineCount,
+                    1,
+                    this._previewTextModel.getLineCount() + 1,
+                    1
+                )));
+            }
+            this.previewEditor.setHiddenAreas(hiddenAreas, undefined, true);
+            const previousViewZones = [...this._activeViewZones];
+            this._activeViewZones = [];
+            const reducedLinesCount = (range.endLineNumberExclusive - range.startLineNumber) - uiState.newTextLineCount;
+            this.previewEditor.changeViewZones((changeAccessor) => {
+                previousViewZones.forEach(id => changeAccessor.removeZone(id));
+                if (reducedLinesCount > 0) {
+                    this._activeViewZones.push(changeAccessor.addZone({
+                        afterLineNumber: range.startLineNumber + uiState.newTextLineCount - 1,
+                        heightInLines: reducedLinesCount,
+                        showInHiddenAreas: true,
+                        domNode: $('div.diagonal-fill.inline-edits-view-zone'),
+                    }));
+                }
+            });
+        }).recomputeInitiallyAndOnChange(this._store);
+        this._previewEditorWidth = derived(this, reader => {
+            const edit = this._edit.read(reader);
+            if (!edit) {
+                return 0;
+            }
+            this._updatePreviewEditor.read(reader);
+            return maxContentWidthInRange(this._previewEditorObs, edit.modifiedLineRange, reader);
+        });
+        this._cursorPosIfTouchesEdit = derived(this, reader => {
+            const cursorPos = this._editorObs.cursorPosition.read(reader);
+            const edit = this._edit.read(reader);
+            if (!edit || !cursorPos) {
+                return undefined;
+            }
+            return edit.modifiedLineRange.contains(cursorPos.lineNumber) ? cursorPos : undefined;
+        });
+        this._originalStartPosition = derived(this, (reader) => {
+            const inlineEdit = this._edit.read(reader);
+            return inlineEdit ? ( new Position(inlineEdit.originalLineRange.startLineNumber, 1)) : null;
+        });
+        this._originalEndPosition = derived(this, (reader) => {
+            const inlineEdit = this._edit.read(reader);
+            return inlineEdit ? ( new Position(inlineEdit.originalLineRange.endLineNumberExclusive, 1)) : null;
+        });
+        this._originalVerticalStartPosition = ( this._editorObs.observePosition(this._originalStartPosition, this._store).map(p => p?.y));
+        this._originalVerticalEndPosition = ( this._editorObs.observePosition(this._originalEndPosition, this._store).map(p => p?.y));
+        this._originalDisplayRange = ( this._uiState.map(s => s?.originalDisplayRange));
+        this._editorMaxContentWidthInRange = ( derived(this, reader => {
+            const originalDisplayRange = this._originalDisplayRange.read(reader);
+            if (!originalDisplayRange) {
+                return constObservable(0);
+            }
+            this._editorObs.versionId.read(reader);
+            return derivedObservableWithCache(this, (reader, lastValue) => {
+                const maxWidth = maxContentWidthInRange(this._editorObs, originalDisplayRange, reader);
+                return Math.max(maxWidth, lastValue ?? 0);
+            });
+        }).map((v, r) => v.read(r)));
+        this._previewEditorLayoutInfo = derived(this, (reader) => {
+            const inlineEdit = this._edit.read(reader);
+            if (!inlineEdit) {
+                return null;
+            }
+            const state = this._uiState.read(reader);
+            if (!state) {
+                return null;
+            }
+            const range = inlineEdit.originalLineRange;
+            const horizontalScrollOffset = this._editorObs.scrollLeft.read(reader);
+            const editorContentMaxWidthInRange = this._editorMaxContentWidthInRange.read(reader);
+            const editorLayout = this._editorObs.layoutInfo.read(reader);
+            const previewContentWidth = this._previewEditorWidth.read(reader);
+            const editorContentAreaWidth = editorLayout.contentWidth - editorLayout.verticalScrollbarWidth;
+            const editorBoundingClientRect = this._editor.getContainerDomNode().getBoundingClientRect();
+            const clientContentAreaRight = editorLayout.contentLeft + editorLayout.contentWidth + editorBoundingClientRect.left;
+            const remainingWidthRightOfContent = getWindow(this._editor.getContainerDomNode()).innerWidth - clientContentAreaRight;
+            const remainingWidthRightOfEditor = getWindow(this._editor.getContainerDomNode()).innerWidth - editorBoundingClientRect.right;
+            const desiredMinimumWidth = Math.min(editorLayout.contentWidth * 0.3, previewContentWidth, 100);
+            const IN_EDITOR_DISPLACEMENT = 0;
+            const maximumAvailableWidth = IN_EDITOR_DISPLACEMENT + remainingWidthRightOfContent;
+            const cursorPos = this._cursorPosIfTouchesEdit.read(reader);
+            const maxPreviewEditorLeft = Math.max(
+            editorContentAreaWidth + horizontalScrollOffset - IN_EDITOR_DISPLACEMENT - Math.max(0, desiredMinimumWidth - maximumAvailableWidth),
+            Math.min(cursorPos ? getOffsetForPos(this._editorObs, cursorPos, reader) + 50 : 0, editorContentAreaWidth + horizontalScrollOffset));
+            const previewEditorLeftInTextArea = Math.min(editorContentMaxWidthInRange + 20, maxPreviewEditorLeft);
+            const maxContentWidth = editorContentMaxWidthInRange + 20 + previewContentWidth + 70;
+            const dist = maxPreviewEditorLeft - previewEditorLeftInTextArea;
+            let desiredPreviewEditorScrollLeft;
+            let left;
+            if (previewEditorLeftInTextArea > horizontalScrollOffset) {
+                desiredPreviewEditorScrollLeft = 0;
+                left = editorLayout.contentLeft + previewEditorLeftInTextArea - horizontalScrollOffset;
+            }
+            else {
+                desiredPreviewEditorScrollLeft = horizontalScrollOffset - previewEditorLeftInTextArea;
+                left = editorLayout.contentLeft;
+            }
+            const selectionTop = this._originalVerticalStartPosition.read(reader) ?? this._editor.getTopForLineNumber(range.startLineNumber) - this._editorObs.scrollTop.read(reader);
+            const selectionBottom = this._originalVerticalEndPosition.read(reader) ?? this._editor.getBottomForLineNumber(range.endLineNumberExclusive - 1) - this._editorObs.scrollTop.read(reader);
+            const codeLeft = editorLayout.contentLeft;
+            let code1 = ( new Point(left, selectionTop));
+            let codeStart1 = ( new Point(codeLeft, selectionTop));
+            let code2 = ( new Point(left, selectionBottom));
+            let codeStart2 = ( new Point(codeLeft, selectionBottom));
+            const editHeight = this._editor.getOption(EditorOption.lineHeight) * inlineEdit.modifiedLineRange.length;
+            const codeHeight = selectionBottom - selectionTop;
+            const previewEditorHeight = Math.max(codeHeight, editHeight);
+            const editIsSameHeight = codeHeight === previewEditorHeight;
+            const codeEditDistRange = editIsSameHeight
+                ? ( new OffsetRange(4, 61))
+                : ( new OffsetRange(60, 61));
+            const clipped = dist === 0;
+            const codeEditDist = editIsSameHeight ? PADDING : codeEditDistRange.clip(dist);
+            const previewEditorWidth = Math.min(previewContentWidth, remainingWidthRightOfEditor + editorLayout.width - editorLayout.contentLeft - codeEditDist);
+            let editStart1 = ( new Point(left + codeEditDist, selectionTop));
+            let edit1 = editStart1.deltaX(previewEditorWidth);
+            let editStart2 = ( new Point(left + codeEditDist, selectionTop + previewEditorHeight));
+            let edit2 = editStart2.deltaX(previewEditorWidth);
+            const isInsertion = codeHeight === 0;
+            if (!isInsertion) {
+                codeStart1 = codeStart1.deltaY(-4).deltaX(-4);
+                code1 = code1.deltaY(-4);
+                codeStart2 = codeStart2.deltaY(PADDING).deltaX(-4);
+                code2 = code2.deltaY(PADDING);
+                editStart1 = editStart1.deltaY(-4);
+                edit1 = edit1.deltaY(-4).deltaX(PADDING);
+                editStart2 = editStart2.deltaY(PADDING);
+                edit2 = edit2.deltaY(PADDING).deltaX(PADDING);
+            }
+            else {
+                edit1 = edit1.deltaX(PADDING);
+                editStart2 = editStart2.deltaY(2 * PADDING);
+                edit2 = edit2.deltaY(2 * PADDING).deltaX(PADDING);
+            }
+            return {
+                code1,
+                codeStart1,
+                code2,
+                codeStart2,
+                codeHeight,
+                codeScrollLeft: horizontalScrollOffset,
+                editStart1,
+                edit1,
+                editStart2,
+                edit2,
+                editHeight,
+                maxContentWidth,
+                shouldShowShadow: clipped,
+                desiredPreviewEditorScrollLeft,
+                previewEditorWidth,
+                padding: PADDING,
+                borderRadius: PADDING
+            };
+        });
+        this._stickyScrollController = StickyScrollController.get(this._editorObs.editor);
+        this._stickyScrollHeight = this._stickyScrollController ? observableFromEvent(this._stickyScrollController.onDidChangeStickyScrollHeight, () => this._stickyScrollController.stickyScrollWidgetHeight) : constObservable(0);
+        this._shouldOverflow = derived(reader => {
+            {
+                return false;
+            }
+        });
+        this._extendedModifiedPath = derived(reader => {
+            const layoutInfo = this._previewEditorLayoutInfo.read(reader);
+            if (!layoutInfo) {
+                return undefined;
+            }
+            const path = ( new PathBuilder())
+                .moveTo(layoutInfo.code2)
+                .lineTo(layoutInfo.code1)
+                .lineTo(layoutInfo.editStart1)
+                .lineTo(layoutInfo.edit1.deltaX(-layoutInfo.borderRadius))
+                .curveTo(layoutInfo.edit1, layoutInfo.edit1.deltaY(layoutInfo.borderRadius))
+                .lineTo(layoutInfo.edit2.deltaY(-layoutInfo.borderRadius))
+                .curveTo(layoutInfo.edit2, layoutInfo.edit2.deltaX(-layoutInfo.borderRadius))
+                .lineTo(layoutInfo.editStart2);
+            if (layoutInfo.editStart2.y !== layoutInfo.code2.y) {
+                path.curveTo2(layoutInfo.editStart2.deltaX(-20), layoutInfo.code2.deltaX(20), layoutInfo.code2.deltaX(0));
+            }
+            path.lineTo(layoutInfo.code2);
+            return path.build();
+        });
+        this._originalBackgroundColor = observableFromEvent(this, this._themeService.onDidColorThemeChange, () => {
+            return this._themeService.getColorTheme().getColor(originalBackgroundColor) ?? Color.transparent;
+        });
+        this._backgroundSvg = n.svg({
+            transform: 'translate(-0.5 -0.5)',
+            style: { overflow: 'visible', pointerEvents: 'none', position: 'absolute' },
+        }, [
+            n.svgElem('path', {
+                class: 'rightOfModifiedBackgroundCoverUp',
+                d: derived(reader => {
+                    const layoutInfo = this._previewEditorLayoutInfo.read(reader);
+                    if (!layoutInfo) {
+                        return undefined;
+                    }
+                    const originalBackgroundColor = this._originalBackgroundColor.read(reader);
+                    if (originalBackgroundColor.isTransparent()) {
+                        return undefined;
+                    }
+                    return ( new PathBuilder())
+                        .moveTo(layoutInfo.code1)
+                        .lineTo(layoutInfo.code1.deltaX(1000))
+                        .lineTo(layoutInfo.code2.deltaX(1000))
+                        .lineTo(layoutInfo.code2)
+                        .build();
+                }),
+                style: {
+                    fill: 'var(--vscode-editor-background, transparent)',
+                }
+            }),
+        ]).keepUpdated(this._store);
+        this._modifiedBackgroundSvg = n.svg({
+            transform: 'translate(-0.5 -0.5)',
+            style: { overflow: 'visible', pointerEvents: 'none', position: 'absolute' },
+        }, [
+            n.svgElem('path', {
+                class: 'extendedModifiedBackgroundCoverUp',
+                d: this._extendedModifiedPath,
+                style: {
+                    fill: 'var(--vscode-editor-background, transparent)',
+                    strokeWidth: '0px',
+                }
+            }),
+        ]).keepUpdated(this._store);
+        this._foregroundBackgroundSvg = n.svg({
+            transform: 'translate(-0.5 -0.5)',
+            style: { overflow: 'visible', pointerEvents: 'none', position: 'absolute' },
+        }, [
+            n.svgElem('path', {
+                class: 'extendedModifiedBackgroundCoverUp',
+                d: this._extendedModifiedPath,
+                style: {
+                    fill: 'var(--vscode-inlineEdit-modifiedChangedLineBackground, transparent)',
+                    strokeWidth: '1px',
+                }
+            }),
+        ]).keepUpdated(this._store);
+        this._middleBorderWithShadow = n.div({
+            class: ['middleBorderWithShadow'],
+            style: {
+                position: 'absolute',
+                display: ( this._previewEditorLayoutInfo.map(i => i?.shouldShowShadow ? 'block' : 'none')),
+                width: '6px',
+                boxShadow: 'var(--vscode-scrollbar-shadow) -6px 0 6px -6px inset',
+                left: ( this._previewEditorLayoutInfo.map(i => i ? i.code1.x - 6 : 0)),
+                top: ( this._previewEditorLayoutInfo.map(i => i ? i.code1.y : 0)),
+                height: ( this._previewEditorLayoutInfo.map(i => i ? i.code2.y - i.code1.y : 0)),
+            },
+        }, []).keepUpdated(this._store);
+        this._foregroundSvg = n.svg({
+            transform: 'translate(-0.5 -0.5)',
+            style: { overflow: 'visible', pointerEvents: 'none', position: 'absolute' },
+        }, derived(reader => {
+            const layoutInfoObs = mapOutFalsy(this._previewEditorLayoutInfo).read(reader);
+            if (!layoutInfoObs) {
+                return undefined;
+            }
+            return [
+                n.svgElem('path', {
+                    class: 'originalOverlay',
+                    d: ( layoutInfoObs.map(
+                        layoutInfo => createRectangle({ topLeft: layoutInfo.codeStart1, width: layoutInfo.code1.x - layoutInfo.codeStart1.x, height: layoutInfo.code2.y - layoutInfo.code1.y }, 0, { topLeft: layoutInfo.borderRadius, bottomLeft: layoutInfo.borderRadius, topRight: 0, bottomRight: 0 }, { hideRight: true, hideLeft: layoutInfo.codeScrollLeft !== 0 })
+                    )),
+                    style: {
+                        fill: 'var(--vscode-inlineEdit-originalBackground, transparent)',
+                        stroke: 'var(--vscode-inlineEdit-originalBorder)',
+                        strokeWidth: '1px',
+                    }
+                }),
+                n.svgElem('path', {
+                    class: 'extendedModifiedOverlay',
+                    d: this._extendedModifiedPath,
+                    style: {
+                        fill: 'var(--vscode-inlineEdit-modifiedBackground, transparent)',
+                        stroke: 'var(--vscode-inlineEdit-modifiedBorder)',
+                        strokeWidth: '1px',
+                    }
+                }),
+                n.svgElem('path', {
+                    class: 'middleBorder',
+                    d: ( layoutInfoObs.map(layoutInfo => ( new PathBuilder())
+                        .moveTo(layoutInfo.code1)
+                        .lineTo(layoutInfo.code2)
+                        .build())),
+                    style: {
+                        display: ( layoutInfoObs.map(i => i.shouldShowShadow ? 'none' : 'block')),
+                        stroke: 'var(--vscode-inlineEdit-modifiedBorder)',
+                        strokeWidth: '1px'
+                    }
+                })
+            ];
+        })).keepUpdated(this._store);
+        this._nonOverflowView = n.div({
+            class: 'inline-edits-view',
+            style: {
+                position: 'absolute',
+                overflow: 'visible',
+                top: '0px',
+                left: '0px',
+                zIndex: '0',
+                display: this._display,
+            },
+        }, [
+            this._backgroundSvg,
+            derived(this, reader => this._shouldOverflow.read(reader) ? [] : [this._modifiedBackgroundSvg, this._foregroundBackgroundSvg, this._editorContainer, this._foregroundSvg, this._middleBorderWithShadow]),
+        ]).keepUpdated(this._store);
+        this._overflowView = n.div({
+            class: 'inline-edits-view',
+            style: {
+                overflow: 'visible',
+                zIndex: '20',
+                display: this._display,
+            },
+        }, [
+            derived(this, reader => this._shouldOverflow.read(reader) ? [this._modifiedBackgroundSvg, this._foregroundBackgroundSvg, this._editorContainer, this._foregroundSvg, this._middleBorderWithShadow] : []),
+        ]).keepUpdated(this._store);
+        this._register(this._editorObs.createOverlayWidget({
+            domNode: this._overflowView.element,
+            position: constObservable({
+                preference: {
+                    top: 0,
+                    left: 0
+                }
+            }),
+            allowEditorOverflow: true,
+            minContentWidthInPx: constObservable(0),
+        }));
+        this._register(this._editorObs.createOverlayWidget({
+            domNode: this._nonOverflowView.element,
+            position: constObservable(null),
+            allowEditorOverflow: false,
+            minContentWidthInPx: derived(reader => {
+                const x = this._previewEditorLayoutInfo.read(reader)?.maxContentWidth;
+                if (x === undefined) {
+                    return 0;
+                }
+                return x;
+            }),
+        }));
+        this.previewEditor.setModel(this._previewTextModel);
+        this._register(autorun(reader => {
+            const layoutInfo = this._previewEditorLayoutInfo.read(reader);
+            if (!layoutInfo) {
+                return;
+            }
+            const editorTopLeft = layoutInfo.editStart1.deltaY(layoutInfo.padding);
+            const editorBottomLeft = layoutInfo.editStart2.deltaY(-layoutInfo.padding);
+            this.previewEditor.layout({ height: editorBottomLeft.y - editorTopLeft.y, width: layoutInfo.previewEditorWidth + 15  });
+            this._editorContainer.element.style.top = `${editorTopLeft.y}px`;
+            this._editorContainer.element.style.left = `${editorTopLeft.x}px`;
+            this._editorContainer.element.style.width = `${layoutInfo.previewEditorWidth}px`;
+        }));
+        this._register(autorun(reader => {
+            const layoutInfo = this._previewEditorLayoutInfo.read(reader);
+            if (!layoutInfo) {
+                return;
+            }
+            this._previewEditorObs.editor.setScrollLeft(layoutInfo.desiredPreviewEditorScrollLeft);
+        }));
+    }
+};
+InlineEditsSideBySideDiff = ( __decorate([
+    ( __param(4, IInstantiationService)),
+    ( __param(5, ICommandService)),
+    ( __param(6, IThemeService))
+], InlineEditsSideBySideDiff));
+
+export { InlineEditsSideBySideDiff, originalBackgroundColor };