@codingame/monaco-vscode-api 1.85.5 → 2.0.0-rework-ci.1

package/vscode/src/vs/editor/contrib/colorPicker/browser/colorHoverParticipant.js

@@ -0,0 +1,254 @@
+import { __decorate, __param } from '../../../../../../../external/tslib/tslib.es6.js';
+import { AsyncIterableObject } from '../../../../base/common/async.js';
+import { CancellationToken } from '../../../../base/common/cancellation.js';
+import { Color, RGBA } from '../../../../base/common/color.js';
+import { Disposable, DisposableStore } from '../../../../base/common/lifecycle.js';
+import { Range } from '../../../common/core/range.js';
+import { getColors, getColorPresentations } from './color.js';
+import { ColorDetector } from './colorDetector.js';
+import { ColorPickerModel } from './colorPickerModel.js';
+import { ColorPickerWidget } from './colorPickerWidget.js';
+import { IThemeService } from '../../../../platform/theme/common/themeService.js';
+import { Dimension } from '../../../../base/browser/dom.js';
+class ColorHover {
+    constructor(owner, range, model, provider) {
+        this.owner = owner;
+        this.range = range;
+        this.model = model;
+        this.provider = provider;
+        this.forceShowAtRange = true;
+    }
+    isValidForHoverAnchor(anchor) {
+        return (anchor.type === 1
+            && this.range.startColumn <= anchor.range.startColumn
+            && this.range.endColumn >= anchor.range.endColumn);
+    }
+}
+let ColorHoverParticipant = class ColorHoverParticipant {
+    constructor(_editor, _themeService) {
+        this._editor = _editor;
+        this._themeService = _themeService;
+        this.hoverOrdinal = 2;
+    }
+    computeSync(_anchor, _lineDecorations) {
+        return [];
+    }
+    computeAsync(anchor, lineDecorations, token) {
+        return AsyncIterableObject.fromPromise(this._computeAsync(anchor, lineDecorations, token));
+    }
+    async _computeAsync(_anchor, lineDecorations, _token) {
+        if (!this._editor.hasModel()) {
+            return [];
+        }
+        const colorDetector = ColorDetector.get(this._editor);
+        if (!colorDetector) {
+            return [];
+        }
+        for (const d of lineDecorations) {
+            if (!colorDetector.isColorDecoration(d)) {
+                continue;
+            }
+            const colorData = colorDetector.getColorData(d.range.getStartPosition());
+            if (colorData) {
+                const colorHover = await _createColorHover(this, this._editor.getModel(), colorData.colorInfo, colorData.provider);
+                return [colorHover];
+            }
+        }
+        return [];
+    }
+    renderHoverParts(context, hoverParts) {
+        return renderHoverParts(this, this._editor, this._themeService, hoverParts, context);
+    }
+};
+ColorHoverParticipant = ( __decorate([
+    ( __param(1, IThemeService))
+], ColorHoverParticipant));
+class StandaloneColorPickerHover {
+    constructor(owner, range, model, provider) {
+        this.owner = owner;
+        this.range = range;
+        this.model = model;
+        this.provider = provider;
+    }
+}
+let StandaloneColorPickerParticipant = class StandaloneColorPickerParticipant {
+    constructor(_editor, _themeService) {
+        this._editor = _editor;
+        this._themeService = _themeService;
+        this.hoverOrdinal = 2;
+        this._color = null;
+    }
+    async createColorHover(defaultColorInfo, defaultColorProvider, colorProviderRegistry) {
+        if (!this._editor.hasModel()) {
+            return null;
+        }
+        const colorDetector = ColorDetector.get(this._editor);
+        if (!colorDetector) {
+            return null;
+        }
+        const colors = await getColors(colorProviderRegistry, this._editor.getModel(), CancellationToken.None);
+        let foundColorInfo = null;
+        let foundColorProvider = null;
+        for (const colorData of colors) {
+            const colorInfo = colorData.colorInfo;
+            if (Range.containsRange(colorInfo.range, defaultColorInfo.range)) {
+                foundColorInfo = colorInfo;
+                foundColorProvider = colorData.provider;
+            }
+        }
+        const colorInfo = foundColorInfo ?? defaultColorInfo;
+        const colorProvider = foundColorProvider ?? defaultColorProvider;
+        const foundInEditor = !!foundColorInfo;
+        return { colorHover: await _createColorHover(this, this._editor.getModel(), colorInfo, colorProvider), foundInEditor: foundInEditor };
+    }
+    async updateEditorModel(colorHoverData) {
+        if (!this._editor.hasModel()) {
+            return;
+        }
+        const colorPickerModel = colorHoverData.model;
+        let range = ( new Range(
+            colorHoverData.range.startLineNumber,
+            colorHoverData.range.startColumn,
+            colorHoverData.range.endLineNumber,
+            colorHoverData.range.endColumn
+        ));
+        if (this._color) {
+            await _updateColorPresentations(this._editor.getModel(), colorPickerModel, this._color, range, colorHoverData);
+            range = _updateEditorModel(this._editor, range, colorPickerModel);
+        }
+    }
+    renderHoverParts(context, hoverParts) {
+        return renderHoverParts(this, this._editor, this._themeService, hoverParts, context);
+    }
+    set color(color) {
+        this._color = color;
+    }
+    get color() {
+        return this._color;
+    }
+};
+StandaloneColorPickerParticipant = ( __decorate([
+    ( __param(1, IThemeService))
+], StandaloneColorPickerParticipant));
+async function _createColorHover(participant, editorModel, colorInfo, provider) {
+    const originalText = editorModel.getValueInRange(colorInfo.range);
+    const { red, green, blue, alpha } = colorInfo.color;
+    const rgba = ( new RGBA(
+        Math.round(red * 255),
+        Math.round(green * 255),
+        Math.round(blue * 255),
+        alpha
+    ));
+    const color = ( new Color(rgba));
+    const colorPresentations = await getColorPresentations(editorModel, colorInfo, provider, CancellationToken.None);
+    const model = ( new ColorPickerModel(color, [], 0));
+    model.colorPresentations = colorPresentations || [];
+    model.guessColorPresentation(color, originalText);
+    if (participant instanceof ColorHoverParticipant) {
+        return ( new ColorHover(participant, Range.lift(colorInfo.range), model, provider));
+    }
+    else {
+        return ( new StandaloneColorPickerHover(participant, Range.lift(colorInfo.range), model, provider));
+    }
+}
+function renderHoverParts(participant, editor, themeService, hoverParts, context) {
+    if (hoverParts.length === 0 || !editor.hasModel()) {
+        return Disposable.None;
+    }
+    if (context.setMinimumDimensions) {
+        const minimumHeight = editor.getOption(66 ) + 8;
+        context.setMinimumDimensions(( new Dimension(302, minimumHeight)));
+    }
+    const disposables = ( new DisposableStore());
+    const colorHover = hoverParts[0];
+    const editorModel = editor.getModel();
+    const model = colorHover.model;
+    const widget = disposables.add(( new ColorPickerWidget(
+        context.fragment,
+        model,
+        editor.getOption(141 ),
+        themeService,
+        participant instanceof StandaloneColorPickerParticipant
+    )));
+    context.setColorPicker(widget);
+    let editorUpdatedByColorPicker = false;
+    let range = ( new Range(
+        colorHover.range.startLineNumber,
+        colorHover.range.startColumn,
+        colorHover.range.endLineNumber,
+        colorHover.range.endColumn
+    ));
+    if (participant instanceof StandaloneColorPickerParticipant) {
+        const color = hoverParts[0].model.color;
+        participant.color = color;
+        _updateColorPresentations(editorModel, model, color, range, colorHover);
+        disposables.add(model.onColorFlushed((color) => {
+            participant.color = color;
+        }));
+    }
+    else {
+        disposables.add(model.onColorFlushed(async (color) => {
+            await _updateColorPresentations(editorModel, model, color, range, colorHover);
+            editorUpdatedByColorPicker = true;
+            range = _updateEditorModel(editor, range, model, context);
+        }));
+    }
+    disposables.add(model.onDidChangeColor((color) => {
+        _updateColorPresentations(editorModel, model, color, range, colorHover);
+    }));
+    disposables.add(editor.onDidChangeModelContent((e) => {
+        if (editorUpdatedByColorPicker) {
+            editorUpdatedByColorPicker = false;
+        }
+        else {
+            context.hide();
+            editor.focus();
+        }
+    }));
+    return disposables;
+}
+function _updateEditorModel(editor, range, model, context) {
+    let textEdits;
+    let newRange;
+    if (model.presentation.textEdit) {
+        textEdits = [model.presentation.textEdit];
+        newRange = ( new Range(
+            model.presentation.textEdit.range.startLineNumber,
+            model.presentation.textEdit.range.startColumn,
+            model.presentation.textEdit.range.endLineNumber,
+            model.presentation.textEdit.range.endColumn
+        ));
+        const trackedRange = editor.getModel()._setTrackedRange(null, newRange, 3 );
+        editor.pushUndoStop();
+        editor.executeEdits('colorpicker', textEdits);
+        newRange = editor.getModel()._getTrackedRange(trackedRange) || newRange;
+    }
+    else {
+        textEdits = [{ range, text: model.presentation.label, forceMoveMarkers: false }];
+        newRange = range.setEndPosition(range.endLineNumber, range.startColumn + model.presentation.label.length);
+        editor.pushUndoStop();
+        editor.executeEdits('colorpicker', textEdits);
+    }
+    if (model.presentation.additionalTextEdits) {
+        textEdits = [...model.presentation.additionalTextEdits];
+        editor.executeEdits('colorpicker', textEdits);
+        if (context) {
+            context.hide();
+        }
+    }
+    editor.pushUndoStop();
+    return newRange;
+}
+async function _updateColorPresentations(editorModel, colorPickerModel, color, range, colorHover) {
+    const colorPresentations = await getColorPresentations(editorModel, {
+        range: range,
+        color: {
+            red: color.rgba.r / 255,
+            green: color.rgba.g / 255,
+            blue: color.rgba.b / 255,
+            alpha: color.rgba.a
+        }
+    }, colorHover.provider, CancellationToken.None);
+    colorPickerModel.colorPresentations = colorPresentations || [];
+}
+export { ColorHover, ColorHoverParticipant, StandaloneColorPickerHover, StandaloneColorPickerParticipant };

package/vscode/src/vs/editor/contrib/colorPicker/browser/colorPicker.css.js

@@ -0,0 +1,4 @@
+import n from '../../../../../../../external/rollup-plugin-styles/dist/runtime/inject-css.js';
+var css = ".colorpicker-widget{height:190px;user-select:none;-webkit-user-select:none}.colorpicker-color-decoration,.hc-light .colorpicker-color-decoration{border:.1em solid #000;box-sizing:border-box;cursor:pointer;display:inline-block;height:.8em;line-height:.8em;margin:.1em .2em 0;width:.8em}.hc-black .colorpicker-color-decoration,.vs-dark .colorpicker-color-decoration{border:.1em solid #eee}.colorpicker-header{background:url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAAHUlEQVQYV2PYvXu3JAi7uLiAMaYAjAGTQBPYLQkAa/0Zef3qRswAAAAASUVORK5CYII=\");background-size:9px 9px;display:flex;height:24px;image-rendering:pixelated;position:relative}.colorpicker-header .picked-color{align-items:center;color:#fff;cursor:pointer;display:flex;flex:1;justify-content:center;line-height:24px;overflow:hidden;white-space:nowrap;width:240px}.colorpicker-header .picked-color .picked-color-presentation{margin-left:5px;margin-right:5px;white-space:nowrap}.colorpicker-header .picked-color .codicon{color:inherit;font-size:14px}.colorpicker-header .picked-color.light{color:#000}.colorpicker-header .original-color{cursor:pointer;width:74px;z-index:inherit}.standalone-colorpicker{background-color:var(--vscode-editorHoverWidget-background);border:1px solid var(--vscode-editorHoverWidget-border);color:var(--vscode-editorHoverWidget-foreground)}.colorpicker-header.standalone-colorpicker{border-bottom:none}.colorpicker-header .close-button{background-color:var(--vscode-editorHoverWidget-background);border-left:1px solid var(--vscode-editorHoverWidget-border);cursor:pointer}.colorpicker-header .close-button-inner-div{height:100%;text-align:center;width:100%}.colorpicker-header .close-button-inner-div:hover{background-color:var(--vscode-toolbar-hoverBackground)}.colorpicker-header .close-icon{padding:3px}.colorpicker-body{display:flex;padding:8px;position:relative}.colorpicker-body .saturation-wrap{flex:1;height:150px;min-width:220px;overflow:hidden;position:relative}.colorpicker-body .saturation-box{height:150px;position:absolute}.colorpicker-body .saturation-selection{border:1px solid #fff;border-radius:100%;box-shadow:0 0 2px rgba(0,0,0,.8);height:9px;margin:-5px 0 0 -5px;position:absolute;width:9px}.colorpicker-body .strip{height:150px;width:25px}.colorpicker-body .standalone-strip{height:122px;width:25px}.colorpicker-body .hue-strip{background:linear-gradient(180deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red);cursor:grab;margin-left:8px;position:relative}.colorpicker-body .opacity-strip{background:url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAAHUlEQVQYV2PYvXu3JAi7uLiAMaYAjAGTQBPYLQkAa/0Zef3qRswAAAAASUVORK5CYII=\");background-size:9px 9px;cursor:grab;image-rendering:pixelated;margin-left:8px;position:relative}.colorpicker-body .strip.grabbing{cursor:grabbing}.colorpicker-body .slider{border:1px solid hsla(0,0%,100%,.71);box-shadow:0 0 1px rgba(0,0,0,.85);box-sizing:border-box;height:4px;left:-2px;position:absolute;top:0;width:calc(100% + 4px)}.colorpicker-body .strip .overlay{height:150px;pointer-events:none}.colorpicker-body .standalone-strip .standalone-overlay{height:122px;pointer-events:none}.standalone-colorpicker-body{border:1px solid transparent;border-bottom:1px solid var(--vscode-editorHoverWidget-border);display:block;overflow:hidden}.colorpicker-body .insert-button{background:var(--vscode-button-background);border:none;border-radius:2px;bottom:8px;color:var(--vscode-button-foreground);cursor:pointer;height:20px;padding:0;position:absolute;right:8px;width:58px}.colorpicker-body .insert-button:hover{background:var(--vscode-button-hoverBackground)}";
+n(css,{});
+export { css, css as default };

package/vscode/src/vs/editor/contrib/colorPicker/browser/colorPickerModel.js

@@ -0,0 +1,67 @@
+import { Emitter } from '../../../../base/common/event.js';
+class ColorPickerModel {
+    get color() {
+        return this._color;
+    }
+    set color(color) {
+        if (this._color.equals(color)) {
+            return;
+        }
+        this._color = color;
+        this._onDidChangeColor.fire(color);
+    }
+    get presentation() { return this.colorPresentations[this.presentationIndex]; }
+    get colorPresentations() {
+        return this._colorPresentations;
+    }
+    set colorPresentations(colorPresentations) {
+        this._colorPresentations = colorPresentations;
+        if (this.presentationIndex > colorPresentations.length - 1) {
+            this.presentationIndex = 0;
+        }
+        this._onDidChangePresentation.fire(this.presentation);
+    }
+    constructor(color, availableColorPresentations, presentationIndex) {
+        this.presentationIndex = presentationIndex;
+        this._onColorFlushed = ( new Emitter());
+        this.onColorFlushed = this._onColorFlushed.event;
+        this._onDidChangeColor = ( new Emitter());
+        this.onDidChangeColor = this._onDidChangeColor.event;
+        this._onDidChangePresentation = ( new Emitter());
+        this.onDidChangePresentation = this._onDidChangePresentation.event;
+        this.originalColor = color;
+        this._color = color;
+        this._colorPresentations = availableColorPresentations;
+    }
+    selectNextColorPresentation() {
+        this.presentationIndex = (this.presentationIndex + 1) % this.colorPresentations.length;
+        this.flushColor();
+        this._onDidChangePresentation.fire(this.presentation);
+    }
+    guessColorPresentation(color, originalText) {
+        let presentationIndex = -1;
+        for (let i = 0; i < this.colorPresentations.length; i++) {
+            if (originalText.toLowerCase() === this.colorPresentations[i].label) {
+                presentationIndex = i;
+                break;
+            }
+        }
+        if (presentationIndex === -1) {
+            const originalTextPrefix = originalText.split('(')[0].toLowerCase();
+            for (let i = 0; i < this.colorPresentations.length; i++) {
+                if (this.colorPresentations[i].label.toLowerCase().startsWith(originalTextPrefix)) {
+                    presentationIndex = i;
+                    break;
+                }
+            }
+        }
+        if (presentationIndex !== -1 && presentationIndex !== this.presentationIndex) {
+            this.presentationIndex = presentationIndex;
+            this._onDidChangePresentation.fire(this.presentation);
+        }
+    }
+    flushColor() {
+        this._onColorFlushed.fire(this._color);
+    }
+}
+export { ColorPickerModel };

package/vscode/src/vs/editor/contrib/colorPicker/browser/colorPickerWidget.js

@@ -0,0 +1,357 @@
+import { PixelRatio } from '../../../../base/browser/browser.js';
+import { $ as $$1, append, addDisposableListener, EventType, getDomNodePagePosition } from '../../../../base/browser/dom.js';
+import { GlobalPointerMoveMonitor } from '../../../../base/browser/globalPointerMoveMonitor.js';
+import { Widget } from '../../../../base/browser/ui/widget.js';
+import { Codicon } from '../../../../base/common/codicons.js';
+import { Color, HSVA, RGBA } from '../../../../base/common/color.js';
+import { Emitter } from '../../../../base/common/event.js';
+import { Disposable } from '../../../../base/common/lifecycle.js';
+import { ThemeIcon } from '../../../../base/common/themables.js';
+import './colorPicker.css.js';
+import { localizeWithPath } from '../../../../nls.js';
+import { editorHoverBackground } from '../../../../platform/theme/common/colorRegistry.js';
+import { registerIcon } from '../../../../platform/theme/common/iconRegistry.js';
+const $ = $$1;
+class ColorPickerHeader extends Disposable {
+    constructor(container, model, themeService, showingStandaloneColorPicker = false) {
+        super();
+        this.model = model;
+        this.showingStandaloneColorPicker = showingStandaloneColorPicker;
+        this._closeButton = null;
+        this._domNode = $('.colorpicker-header');
+        append(container, this._domNode);
+        this._pickedColorNode = append(this._domNode, $('.picked-color'));
+        append(this._pickedColorNode, $('span.codicon.codicon-color-mode'));
+        this._pickedColorPresentation = append(this._pickedColorNode, document.createElement('span'));
+        this._pickedColorPresentation.classList.add('picked-color-presentation');
+        const tooltip = ( localizeWithPath(
+            'vs/editor/contrib/colorPicker/browser/colorPickerWidget',
+            'clickToToggleColorOptions',
+            "Click to toggle color options (rgb/hsl/hex)"
+        ));
+        this._pickedColorNode.setAttribute('title', tooltip);
+        this._originalColorNode = append(this._domNode, $('.original-color'));
+        this._originalColorNode.style.backgroundColor = Color.Format.CSS.format(this.model.originalColor) || '';
+        this.backgroundColor = themeService.getColorTheme().getColor(editorHoverBackground) || Color.white;
+        this._register(themeService.onDidColorThemeChange(theme => {
+            this.backgroundColor = theme.getColor(editorHoverBackground) || Color.white;
+        }));
+        this._register(addDisposableListener(this._pickedColorNode, EventType.CLICK, () => this.model.selectNextColorPresentation()));
+        this._register(addDisposableListener(this._originalColorNode, EventType.CLICK, () => {
+            this.model.color = this.model.originalColor;
+            this.model.flushColor();
+        }));
+        this._register(model.onDidChangeColor(this.onDidChangeColor, this));
+        this._register(model.onDidChangePresentation(this.onDidChangePresentation, this));
+        this._pickedColorNode.style.backgroundColor = Color.Format.CSS.format(model.color) || '';
+        this._pickedColorNode.classList.toggle('light', model.color.rgba.a < 0.5 ? this.backgroundColor.isLighter() : model.color.isLighter());
+        this.onDidChangeColor(this.model.color);
+        if (this.showingStandaloneColorPicker) {
+            this._domNode.classList.add('standalone-colorpicker');
+            this._closeButton = this._register(( new CloseButton(this._domNode)));
+        }
+    }
+    get domNode() {
+        return this._domNode;
+    }
+    get closeButton() {
+        return this._closeButton;
+    }
+    get pickedColorNode() {
+        return this._pickedColorNode;
+    }
+    get originalColorNode() {
+        return this._originalColorNode;
+    }
+    onDidChangeColor(color) {
+        this._pickedColorNode.style.backgroundColor = Color.Format.CSS.format(color) || '';
+        this._pickedColorNode.classList.toggle('light', color.rgba.a < 0.5 ? this.backgroundColor.isLighter() : color.isLighter());
+        this.onDidChangePresentation();
+    }
+    onDidChangePresentation() {
+        this._pickedColorPresentation.textContent = this.model.presentation ? this.model.presentation.label : '';
+    }
+}
+class CloseButton extends Disposable {
+    constructor(container) {
+        super();
+        this._onClicked = this._register(( new Emitter()));
+        this.onClicked = this._onClicked.event;
+        this._button = document.createElement('div');
+        this._button.classList.add('close-button');
+        append(container, this._button);
+        const innerDiv = document.createElement('div');
+        innerDiv.classList.add('close-button-inner-div');
+        append(this._button, innerDiv);
+        const closeButton = append(innerDiv, $('.button' + ThemeIcon.asCSSSelector(registerIcon('color-picker-close', Codicon.close, ( localizeWithPath(
+            'vs/editor/contrib/colorPicker/browser/colorPickerWidget',
+            'closeIcon',
+            'Icon to close the color picker'
+        ))))));
+        closeButton.classList.add('close-icon');
+        this._button.onclick = () => {
+            this._onClicked.fire();
+        };
+    }
+}
+class ColorPickerBody extends Disposable {
+    constructor(container, model, pixelRatio, isStandaloneColorPicker = false) {
+        super();
+        this.model = model;
+        this.pixelRatio = pixelRatio;
+        this._insertButton = null;
+        this._domNode = $('.colorpicker-body');
+        append(container, this._domNode);
+        this._saturationBox = ( new SaturationBox(this._domNode, this.model, this.pixelRatio));
+        this._register(this._saturationBox);
+        this._register(this._saturationBox.onDidChange(this.onDidSaturationValueChange, this));
+        this._register(this._saturationBox.onColorFlushed(this.flushColor, this));
+        this._opacityStrip = ( new OpacityStrip(this._domNode, this.model, isStandaloneColorPicker));
+        this._register(this._opacityStrip);
+        this._register(this._opacityStrip.onDidChange(this.onDidOpacityChange, this));
+        this._register(this._opacityStrip.onColorFlushed(this.flushColor, this));
+        this._hueStrip = ( new HueStrip(this._domNode, this.model, isStandaloneColorPicker));
+        this._register(this._hueStrip);
+        this._register(this._hueStrip.onDidChange(this.onDidHueChange, this));
+        this._register(this._hueStrip.onColorFlushed(this.flushColor, this));
+        if (isStandaloneColorPicker) {
+            this._insertButton = this._register(( new InsertButton(this._domNode)));
+            this._domNode.classList.add('standalone-colorpicker');
+        }
+    }
+    flushColor() {
+        this.model.flushColor();
+    }
+    onDidSaturationValueChange({ s, v }) {
+        const hsva = this.model.color.hsva;
+        this.model.color = ( new Color(( new HSVA(hsva.h, s, v, hsva.a))));
+    }
+    onDidOpacityChange(a) {
+        const hsva = this.model.color.hsva;
+        this.model.color = ( new Color(( new HSVA(hsva.h, hsva.s, hsva.v, a))));
+    }
+    onDidHueChange(value) {
+        const hsva = this.model.color.hsva;
+        const h = (1 - value) * 360;
+        this.model.color = ( new Color(( new HSVA(h === 360 ? 0 : h, hsva.s, hsva.v, hsva.a))));
+    }
+    get domNode() {
+        return this._domNode;
+    }
+    get saturationBox() {
+        return this._saturationBox;
+    }
+    get opacityStrip() {
+        return this._opacityStrip;
+    }
+    get hueStrip() {
+        return this._hueStrip;
+    }
+    get enterButton() {
+        return this._insertButton;
+    }
+    layout() {
+        this._saturationBox.layout();
+        this._opacityStrip.layout();
+        this._hueStrip.layout();
+    }
+}
+class SaturationBox extends Disposable {
+    constructor(container, model, pixelRatio) {
+        super();
+        this.model = model;
+        this.pixelRatio = pixelRatio;
+        this._onDidChange = ( new Emitter());
+        this.onDidChange = this._onDidChange.event;
+        this._onColorFlushed = ( new Emitter());
+        this.onColorFlushed = this._onColorFlushed.event;
+        this._domNode = $('.saturation-wrap');
+        append(container, this._domNode);
+        this._canvas = document.createElement('canvas');
+        this._canvas.className = 'saturation-box';
+        append(this._domNode, this._canvas);
+        this.selection = $('.saturation-selection');
+        append(this._domNode, this.selection);
+        this.layout();
+        this._register(addDisposableListener(this._domNode, EventType.POINTER_DOWN, e => this.onPointerDown(e)));
+        this._register(this.model.onDidChangeColor(this.onDidChangeColor, this));
+        this.monitor = null;
+    }
+    get domNode() {
+        return this._domNode;
+    }
+    get canvas() {
+        return this._canvas;
+    }
+    onPointerDown(e) {
+        if (!e.target || !(e.target instanceof Element)) {
+            return;
+        }
+        this.monitor = this._register(( new GlobalPointerMoveMonitor()));
+        const origin = getDomNodePagePosition(this._domNode);
+        if (e.target !== this.selection) {
+            this.onDidChangePosition(e.offsetX, e.offsetY);
+        }
+        this.monitor.startMonitoring(e.target, e.pointerId, e.buttons, event => this.onDidChangePosition(event.pageX - origin.left, event.pageY - origin.top), () => null);
+    }
+    onDidChangePosition(left, top) {
+        const s = Math.max(0, Math.min(1, left / this.width));
+        const v = Math.max(0, Math.min(1, 1 - (top / this.height)));
+        this.paintSelection(s, v);
+        this._onDidChange.fire({ s, v });
+    }
+    layout() {
+        this.width = this._domNode.offsetWidth;
+        this.height = this._domNode.offsetHeight;
+        this._canvas.width = this.width * this.pixelRatio;
+        this._canvas.height = this.height * this.pixelRatio;
+        this.paint();
+        const hsva = this.model.color.hsva;
+        this.paintSelection(hsva.s, hsva.v);
+    }
+    paint() {
+        const hsva = this.model.color.hsva;
+        const saturatedColor = ( new Color(( new HSVA(hsva.h, 1, 1, 1))));
+        const ctx = this._canvas.getContext('2d');
+        const whiteGradient = ctx.createLinearGradient(0, 0, this._canvas.width, 0);
+        whiteGradient.addColorStop(0, 'rgba(255, 255, 255, 1)');
+        whiteGradient.addColorStop(0.5, 'rgba(255, 255, 255, 0.5)');
+        whiteGradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
+        const blackGradient = ctx.createLinearGradient(0, 0, 0, this._canvas.height);
+        blackGradient.addColorStop(0, 'rgba(0, 0, 0, 0)');
+        blackGradient.addColorStop(1, 'rgba(0, 0, 0, 1)');
+        ctx.rect(0, 0, this._canvas.width, this._canvas.height);
+        ctx.fillStyle = Color.Format.CSS.format(saturatedColor);
+        ctx.fill();
+        ctx.fillStyle = whiteGradient;
+        ctx.fill();
+        ctx.fillStyle = blackGradient;
+        ctx.fill();
+    }
+    paintSelection(s, v) {
+        this.selection.style.left = `${s * this.width}px`;
+        this.selection.style.top = `${this.height - v * this.height}px`;
+    }
+    onDidChangeColor(color) {
+        if (this.monitor && this.monitor.isMonitoring()) {
+            return;
+        }
+        this.paint();
+        const hsva = color.hsva;
+        this.paintSelection(hsva.s, hsva.v);
+    }
+}
+class Strip extends Disposable {
+    constructor(container, model, showingStandaloneColorPicker = false) {
+        super();
+        this.model = model;
+        this._onDidChange = ( new Emitter());
+        this.onDidChange = this._onDidChange.event;
+        this._onColorFlushed = ( new Emitter());
+        this.onColorFlushed = this._onColorFlushed.event;
+        if (showingStandaloneColorPicker) {
+            this.domNode = append(container, $('.standalone-strip'));
+            this.overlay = append(this.domNode, $('.standalone-overlay'));
+        }
+        else {
+            this.domNode = append(container, $('.strip'));
+            this.overlay = append(this.domNode, $('.overlay'));
+        }
+        this.slider = append(this.domNode, $('.slider'));
+        this.slider.style.top = `0px`;
+        this._register(addDisposableListener(this.domNode, EventType.POINTER_DOWN, e => this.onPointerDown(e)));
+        this._register(model.onDidChangeColor(this.onDidChangeColor, this));
+        this.layout();
+    }
+    layout() {
+        this.height = this.domNode.offsetHeight - this.slider.offsetHeight;
+        const value = this.getValue(this.model.color);
+        this.updateSliderPosition(value);
+    }
+    onDidChangeColor(color) {
+        const value = this.getValue(color);
+        this.updateSliderPosition(value);
+    }
+    onPointerDown(e) {
+        if (!e.target || !(e.target instanceof Element)) {
+            return;
+        }
+        const monitor = this._register(( new GlobalPointerMoveMonitor()));
+        const origin = getDomNodePagePosition(this.domNode);
+        this.domNode.classList.add('grabbing');
+        if (e.target !== this.slider) {
+            this.onDidChangeTop(e.offsetY);
+        }
+        monitor.startMonitoring(e.target, e.pointerId, e.buttons, event => this.onDidChangeTop(event.pageY - origin.top), () => null);
+    }
+    onDidChangeTop(top) {
+        const value = Math.max(0, Math.min(1, 1 - (top / this.height)));
+        this.updateSliderPosition(value);
+        this._onDidChange.fire(value);
+    }
+    updateSliderPosition(value) {
+        this.slider.style.top = `${(1 - value) * this.height}px`;
+    }
+}
+class OpacityStrip extends Strip {
+    constructor(container, model, showingStandaloneColorPicker = false) {
+        super(container, model, showingStandaloneColorPicker);
+        this.domNode.classList.add('opacity-strip');
+        this.onDidChangeColor(this.model.color);
+    }
+    onDidChangeColor(color) {
+        super.onDidChangeColor(color);
+        const { r, g, b } = color.rgba;
+        const opaque = ( new Color(( new RGBA(r, g, b, 1))));
+        const transparent = ( new Color(( new RGBA(r, g, b, 0))));
+        this.overlay.style.background = `linear-gradient(to bottom, ${opaque} 0%, ${transparent} 100%)`;
+    }
+    getValue(color) {
+        return color.hsva.a;
+    }
+}
+class HueStrip extends Strip {
+    constructor(container, model, showingStandaloneColorPicker = false) {
+        super(container, model, showingStandaloneColorPicker);
+        this.domNode.classList.add('hue-strip');
+    }
+    getValue(color) {
+        return 1 - (color.hsva.h / 360);
+    }
+}
+class InsertButton extends Disposable {
+    constructor(container) {
+        super();
+        this._onClicked = this._register(( new Emitter()));
+        this.onClicked = this._onClicked.event;
+        this._button = append(container, document.createElement('button'));
+        this._button.classList.add('insert-button');
+        this._button.textContent = 'Insert';
+        this._button.onclick = e => {
+            this._onClicked.fire();
+        };
+    }
+    get button() {
+        return this._button;
+    }
+}
+class ColorPickerWidget extends Widget {
+    static { this.ID = 'editor.contrib.colorPickerWidget'; }
+    constructor(container, model, pixelRatio, themeService, standaloneColorPicker = false) {
+        super();
+        this.model = model;
+        this.pixelRatio = pixelRatio;
+        this._register(PixelRatio.onDidChange(() => this.layout()));
+        const element = $('.colorpicker-widget');
+        container.appendChild(element);
+        this.header = this._register(( new ColorPickerHeader(element, this.model, themeService, standaloneColorPicker)));
+        this.body = this._register(( new ColorPickerBody(element, this.model, this.pixelRatio, standaloneColorPicker)));
+    }
+    getId() {
+        return ColorPickerWidget.ID;
+    }
+    layout() {
+        this.body.layout();
+    }
+}
+export { ColorPickerBody, ColorPickerHeader, ColorPickerWidget, InsertButton };