Merge pull request #34001 from rebornix/ColorPickerFormatter

Functional style formatter. Color range is all float numb…
microsoft · Sep 9, 2017 · 3481343 · 3481343
2 parents 5829262 + 3753e0e
commit 3481343
Show file tree

Hide file tree

Showing 25 changed files with 287 additions and 465 deletions.
diff --git a/extensions/css/client/src/cssMain.ts b/extensions/css/client/src/cssMain.ts
@@ -6,27 +6,16 @@
 
 import * as path from 'path';
 
-import { languages, window, commands, ExtensionContext, TextDocument, ColorRange, Color } from 'vscode';
+import { languages, window, commands, ExtensionContext, TextDocument, ColorRange, ColorFormat, Color } from 'vscode';
 import { LanguageClient, LanguageClientOptions, ServerOptions, TransportKind, TextEdit } from 'vscode-languageclient';
 
 import { ConfigurationFeature } from 'vscode-languageclient/lib/proposed';
 import { DocumentColorRequest } from 'vscode-languageserver-protocol/lib/protocol.colorProvider.proposed';
 
 import * as nls from 'vscode-nls';
+import * as convert from 'color-convert';
 let localize = nls.loadMessageBundle();
 
-const CSSColorFormats = {
-	Hex: '#{red:X}{green:X}{blue:X}',
-	RGB: {
-		opaque: 'rgb({red:d[0-255]}, {green:d[0-255]}, {blue:d[0-255]})',
-		transparent: 'rgba({red:d[0-255]}, {green:d[0-255]}, {blue:d[0-255]}, {alpha})'
-	},
-	HSL: {
-		opaque: 'hsl({hue:d[0-360]}, {saturation:d[0-100]}%, {luminance:d[0-100]}%)',
-		transparent: 'hsla({hue:d[0-360]}, {saturation:d[0-100]}%, {luminance:d[0-100]}%, {alpha})'
-	}
-};
-
 // this method is called when vs code is activated
 export function activate(context: ExtensionContext) {
 
@@ -63,6 +52,11 @@ export function activate(context: ExtensionContext) {
 	// client can be deactivated on extension deactivation
 	context.subscriptions.push(disposable);
 
+	var _toTwoDigitHex = function (n: number): string {
+		const r = n.toString(16);
+		return r.length !== 2 ? '0' + r : r;
+	};
+
 	client.onReady().then(_ => {
 		// register color provider
 		context.subscriptions.push(languages.registerColorProvider(documentSelector, {
@@ -72,9 +66,32 @@ export function activate(context: ExtensionContext) {
 					return symbols.map(symbol => {
 						let range = client.protocol2CodeConverter.asRange(symbol.range);
 						let color = new Color(symbol.color.red * 255, symbol.color.green * 255, symbol.color.blue * 255, symbol.color.alpha);
-						return new ColorRange(range, color, [CSSColorFormats.Hex, CSSColorFormats.RGB, CSSColorFormats.HSL]);
+						return new ColorRange(range, color);
 					});
 				});
+			},
+			resolveDocumentColor(color: Color, colorFormat: ColorFormat): Thenable<string> | string {
+				switch (colorFormat) {
+					case ColorFormat.RGB:
+						if (color.alpha === 1) {
+							return `rgb(${Math.round(color.red * 255)}, ${Math.round(color.green * 255)}, ${Math.round(color.blue * 255)})`;
+						} else {
+							return `rgba(${Math.round(color.red * 255)}, ${Math.round(color.green * 255)}, ${Math.round(color.blue * 255)}, ${color.alpha})`;
+						}
+					case ColorFormat.HEX:
+						if (color.alpha === 1) {
+							return `#${_toTwoDigitHex(Math.round(color.red * 255))}${_toTwoDigitHex(Math.round(color.green * 255))}${_toTwoDigitHex(Math.round(color.blue * 255))}`;
+						} else {
+							return `#${_toTwoDigitHex(Math.round(color.red * 255))}${_toTwoDigitHex(Math.round(color.green * 255))}${_toTwoDigitHex(Math.round(color.blue * 255))}${_toTwoDigitHex(Math.round(color.alpha * 255))}`;
+						}
+					case ColorFormat.HSL:
+						const hsl = convert.rgb.hsl(Math.round(color.red * 255), Math.round(color.green * 255), Math.round(color.blue * 255));
+						if (color.alpha === 1) {
+							return `hsl(${hsl[0]}, ${hsl[1]}%, ${hsl[2]}%)`;
+						} else {
+							return `hsla(${hsl[0]}, ${hsl[1]}%, ${hsl[2]}%, ${color.alpha})`;
+						}
+				}
 			}
 		}));
 	});

diff --git a/extensions/css/client/src/typings/color-convert.d.ts b/extensions/css/client/src/typings/color-convert.d.ts
@@ -0,0 +1,11 @@
+declare module "color-convert" {
+	module convert {
+		module rgb {
+			function hex(r: number, g: number, b: number);
+			function hsl(r: number, g: number, b: number);
+			function hvs(r: number, g: number, b: number);
+		}
+	}
+
+	export = convert;
+}
diff --git a/extensions/css/npm-shrinkwrap.json b/extensions/css/npm-shrinkwrap.json
diff --git a/extensions/css/package.json b/extensions/css/package.json
@@ -737,6 +737,7 @@
     }
   },
   "dependencies": {
+	"color-convert": "^0.5.3",
     "vscode-languageclient": "3.4.0-next.17",
     "vscode-languageserver-protocol": "^3.1.1",
     "vscode-nls": "^2.0.2"

diff --git a/extensions/html/client/src/htmlMain.ts b/extensions/html/client/src/htmlMain.ts
@@ -6,11 +6,12 @@
 
 import * as path from 'path';
 
-import { languages, ExtensionContext, IndentAction, Position, TextDocument, Color, ColorRange } from 'vscode';
+import { languages, ExtensionContext, IndentAction, Position, TextDocument, Color, ColorRange, ColorFormat } from 'vscode';
 import { LanguageClient, LanguageClientOptions, ServerOptions, TransportKind, RequestType, TextDocumentPositionParams } from 'vscode-languageclient';
 import { EMPTY_ELEMENTS } from './htmlEmptyTagsShared';
 import { activateTagClosing } from './tagClosing';
 import TelemetryReporter from 'vscode-extension-telemetry';
+import * as convert from 'color-convert';
 
 import { ConfigurationFeature } from 'vscode-languageclient/lib/proposed';
 import { DocumentColorRequest } from 'vscode-languageserver-protocol/lib/protocol.colorProvider.proposed';
@@ -28,18 +29,6 @@ interface IPackageInfo {
 	aiKey: string;
 }
 
-const CSSColorFormats = {
-	Hex: '#{red:X}{green:X}{blue:X}',
-	RGB: {
-		opaque: 'rgb({red:d[0-255]}, {green:d[0-255]}, {blue:d[0-255]})',
-		transparent: 'rgba({red:d[0-255]}, {green:d[0-255]}, {blue:d[0-255]}, {alpha})'
-	},
-	HSL: {
-		opaque: 'hsl({hue:d[0-360]}, {saturation:d[0-100]}%, {luminance:d[0-100]}%)',
-		transparent: 'hsla({hue:d[0-360]}, {saturation:d[0-100]}%, {luminance:d[0-100]}%, {alpha})'
-	}
-};
-
 export function activate(context: ExtensionContext) {
 	let toDispose = context.subscriptions;
 
@@ -79,6 +68,11 @@ export function activate(context: ExtensionContext) {
 	let client = new LanguageClient('html', localize('htmlserver.name', 'HTML Language Server'), serverOptions, clientOptions);
 	client.registerFeature(new ConfigurationFeature(client));
 
+	var _toTwoDigitHex = function (n: number): string {
+		const r = n.toString(16);
+		return r.length !== 2 ? '0' + r : r;
+	};
+
 	let disposable = client.start();
 	toDispose.push(disposable);
 	client.onReady().then(() => {
@@ -89,9 +83,32 @@ export function activate(context: ExtensionContext) {
 					return symbols.map(symbol => {
 						let range = client.protocol2CodeConverter.asRange(symbol.range);
 						let color = new Color(symbol.color.red * 255, symbol.color.green * 255, symbol.color.blue * 255, symbol.color.alpha);
-						return new ColorRange(range, color, [CSSColorFormats.Hex, CSSColorFormats.RGB, CSSColorFormats.HSL]);
+						return new ColorRange(range, color);
 					});
 				});
+			},
+			resolveDocumentColor(color: Color, colorFormat: ColorFormat): Thenable<string> | string {
+				switch (colorFormat) {
+					case ColorFormat.RGB:
+						if (color.alpha === 1) {
+							return `rgb(${Math.round(color.red * 255)}, ${Math.round(color.green * 255)}, ${Math.round(color.blue * 255)})`;
+						} else {
+							return `rgba(${Math.round(color.red * 255)}, ${Math.round(color.green * 255)}, ${Math.round(color.blue * 255)}, ${color.alpha})`;
+						}
+					case ColorFormat.HEX:
+						if (color.alpha === 1) {
+							return `#${_toTwoDigitHex(Math.round(color.red * 255))}${_toTwoDigitHex(Math.round(color.green * 255))}${_toTwoDigitHex(Math.round(color.blue * 255))}`;
+						} else {
+							return `#${_toTwoDigitHex(Math.round(color.red * 255))}${_toTwoDigitHex(Math.round(color.green * 255))}${_toTwoDigitHex(Math.round(color.blue * 255))}${_toTwoDigitHex(Math.round(color.alpha * 255))}`;
+						}
+					case ColorFormat.HSL:
+						const hsl = convert.rgb.hsl(Math.round(color.red * 255), Math.round(color.green * 255), Math.round(color.blue * 255));
+						if (color.alpha === 1) {
+							return `hsl(${hsl[0]}, ${hsl[1]}%, ${hsl[2]}%)`;
+						} else {
+							return `hsla(${hsl[0]}, ${hsl[1]}%, ${hsl[2]}%, ${color.alpha})`;
+						}
+				}
 			}
 		});
 		toDispose.push(disposable);

diff --git a/extensions/html/client/src/typings/color-convert.d.ts b/extensions/html/client/src/typings/color-convert.d.ts
@@ -0,0 +1,11 @@
+declare module "color-convert" {
+	module convert {
+		module rgb {
+			function hex(r: number, g: number, b: number);
+			function hsl(r: number, g: number, b: number);
+			function hvs(r: number, g: number, b: number);
+		}
+	}
+
+	export = convert;
+}
diff --git a/extensions/html/npm-shrinkwrap.json b/extensions/html/npm-shrinkwrap.json
diff --git a/extensions/html/package.json b/extensions/html/package.json
@@ -215,6 +215,7 @@
     }
   },
   "dependencies": {
+	"color-convert": "^0.5.3",
     "vscode-extension-telemetry": "0.0.8",
     "vscode-languageclient": "3.4.0-next.17",
     "vscode-languageserver-protocol": "^3.1.1",

diff --git a/extensions/json/client/src/jsonMain.ts b/extensions/json/client/src/jsonMain.ts
@@ -6,7 +6,7 @@
 
 import * as path from 'path';
 
-import { workspace, languages, ExtensionContext, extensions, Uri, TextDocument, ColorRange, Color } from 'vscode';
+import { workspace, languages, ExtensionContext, extensions, Uri, TextDocument, ColorRange, Color, ColorFormat } from 'vscode';
 import { LanguageClient, LanguageClientOptions, RequestType, ServerOptions, TransportKind, NotificationType, DidChangeConfigurationNotification } from 'vscode-languageclient';
 import TelemetryReporter from 'vscode-extension-telemetry';
 import { ConfigurationFeature } from 'vscode-languageclient/lib/proposed';
@@ -56,11 +56,6 @@ interface JSONSchemaSettings {
 	schema?: any;
 }
 
-const ColorFormat_HEX = {
-	opaque: '"#{red:X}{green:X}{blue:X}"',
-	transparent: '"#{red:X}{green:X}{blue:X}{alpha:X}"'
-};
-
 export function activate(context: ExtensionContext) {
 
 	let packageInfo = getPackageInfo(context);
@@ -121,6 +116,10 @@ export function activate(context: ExtensionContext) {
 
 		client.sendNotification(SchemaAssociationNotification.type, getSchemaAssociation(context));
 
+		var _toTwoDigitHex = function (n: number): string {
+			const r = n.toString(16);
+			return r.length !== 2 ? '0' + r : r;
+		};
 		// register color provider
 		context.subscriptions.push(languages.registerColorProvider(documentSelector, {
 			provideDocumentColors(document: TextDocument): Thenable<ColorRange[]> {
@@ -129,9 +128,16 @@ export function activate(context: ExtensionContext) {
 					return symbols.map(symbol => {
 						let range = client.protocol2CodeConverter.asRange(symbol.range);
 						let color = new Color(symbol.color.red * 255, symbol.color.green * 255, symbol.color.blue * 255, symbol.color.alpha);
-						return new ColorRange(range, color, [ColorFormat_HEX]);
+						return new ColorRange(range, color);
 					});
 				});
+			},
+			resolveDocumentColor(color: Color, colorFormat: ColorFormat): Thenable<string> | string {
+				if (color.alpha === 1) {
+					return `#${_toTwoDigitHex(Math.round(color.red * 255))}${_toTwoDigitHex(Math.round(color.green * 255))}${_toTwoDigitHex(Math.round(color.blue * 255))}`;
+				} else {
+					return `#${_toTwoDigitHex(Math.round(color.red * 255))}${_toTwoDigitHex(Math.round(color.green * 255))}${_toTwoDigitHex(Math.round(color.blue * 255))}${_toTwoDigitHex(Math.round(color.alpha * 255))}`;
+				}
 			}
 		}));
 	});

diff --git a/src/vs/editor/common/modes.ts b/src/vs/editor/common/modes.ts
@@ -679,12 +679,23 @@ export interface IColor {
 	readonly alpha: number;
 }
 
+/**
+ * Represents a color format
+ */
+export enum ColorFormat {
+	RGB = 0,
+	HEX = 1,
+	HSL = 2
+}
+
 /**
  * A color formatter.
+ * @internal
  */
 export interface IColorFormatter {
 	readonly supportsTransparency: boolean;
-	format(color: IColor): string;
+	readonly colorFormat: ColorFormat;
+	format(color: Color): string;
 }
 
 /**
@@ -701,11 +712,6 @@ export interface IColorRange {
 	 * The color represented in this range.
 	 */
 	color: IColor;
-
-	/**
-	 * The available formats for this specific color.
-	 */
-	formatters: IColorFormatter[];
 }
 
 /**
@@ -716,6 +722,10 @@ export interface DocumentColorProvider {
 	 * Provides the color ranges for a specific model.
 	 */
 	provideColorRanges(model: editorCommon.IReadOnlyModel, token: CancellationToken): IColorRange[] | Thenable<IColorRange[]>;
+	/**
+	 * Provide the string representation for a color.
+	 */
+	resolveColor(color: IColor, colorFormat: ColorFormat, token: CancellationToken): string | Thenable<string>;
 }
 
 export interface IResourceEdit {