Merge pull request #8153 from kisstkondoros/cursorstyles

New cursor animation styles implemented

src/vs/editor/browser/standalone/standaloneEditor.ts

@@ -416,6 +416,7 @@ export function createMonacoEditorAPI(): typeof monaco.editor {
 		CursorChangeReason: editorCommon.CursorChangeReason,
 		MouseTargetType: editorCommon.MouseTargetType,
 		TextEditorCursorStyle: editorCommon.TextEditorCursorStyle,
+		TextEditorCursorBlinkingStyle: editorCommon.TextEditorCursorBlinkingStyle,
 		ContentWidgetPositionPreference: ContentWidgetPositionPreference,
 		OverlayWidgetPositionPreference: OverlayWidgetPositionPreference,
 

src/vs/editor/browser/viewParts/viewCursors/viewCursors.css

@@ -46,3 +46,61 @@
 	border-color: #fff;
 	color: #000; /* opposite of #fff */
 }
+
+@keyframes cursor-blink {
+	50% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+}
+
+@keyframes cursor-smooth {
+	0%,
+	20% {
+		opacity: 0;
+	}
+	60%,
+	100% {
+		opacity: 1;
+	}
+}
+
+@keyframes cursor-phase {
+	0%,
+	20% {
+		opacity: 0;
+	}
+	90%,
+	100% {
+		opacity: 1;
+	}
+}
+
+@keyframes cursor-expand {
+	0%,
+	20% {
+		transform: scaleY(0);
+	}
+	80%,
+	100% {
+		transform: scaleY(1);
+	}
+}
+
+.cursor-blink > .cursor {
+	animation: cursor-blink 1s step-start 0s infinite;
+}
+
+.cursor-smooth > .cursor {
+	animation: cursor-smooth 0.5s ease-in-out 0s infinite alternate;
+}
+
+.cursor-phase > .cursor {
+	animation: cursor-phase 0.5s ease-in-out 0s infinite alternate;
+}
+
+.cursor-expand > .cursor {
+	animation: cursor-expand 0.5s ease-in-out 0s infinite alternate;
+}
\ No newline at end of file

src/vs/editor/browser/viewParts/viewCursors/viewCursors.ts

@@ -13,19 +13,17 @@ import {ViewCursor} from 'vs/editor/browser/viewParts/viewCursors/viewCursor';
 import {ViewContext} from 'vs/editor/common/view/viewContext';
 import {IRenderingContext, IRestrictedRenderingContext} from 'vs/editor/common/view/renderingContext';
 import {FastDomNode, createFastDomNode} from 'vs/base/browser/styleMutator';
+import {TimeoutTimer, IntervalTimer} from 'vs/base/common/async';
+import * as browsers from 'vs/base/browser/browser';
 
-enum RenderType {
-	Hidden,
-	Visible,
-	Blink
-}
+const ANIMATIONS_SUPPORTED = !browsers.isIE9;
 
 export class ViewCursors extends ViewPart {
 
 	static BLINK_INTERVAL = 500;
 
 	private _readOnly: boolean;
-	private _cursorBlinking: string;
+	private _cursorBlinking: editorCommon.TextEditorCursorBlinkingStyle;
 	private _cursorStyle: editorCommon.TextEditorCursorStyle;
 	private _canUseTranslate3d: boolean;
 
@@ -33,7 +31,9 @@ export class ViewCursors extends ViewPart {
 
 	private _domNode: FastDomNode;
 
-	private _blinkTimer: number;
+	private _startCursorBlinkAnimation: TimeoutTimer;
+	private _compatBlink: IntervalTimer;
+	private _blinkingEnabled: boolean;
 
 	private _editorHasFocus: boolean;
 
@@ -56,7 +56,9 @@ export class ViewCursors extends ViewPart {
 
 		this._domNode.domNode.appendChild(this._primaryCursor.getDomNode());
 
-		this._blinkTimer = -1;
+		this._startCursorBlinkAnimation = new TimeoutTimer();
+		this._compatBlink = new IntervalTimer();
+		this._blinkingEnabled = false;
 
 		this._editorHasFocus = false;
 		this._updateBlinking();
@@ -64,10 +66,8 @@ export class ViewCursors extends ViewPart {
 
 	public dispose(): void {
 		super.dispose();
-		if (this._blinkTimer !== -1) {
-			window.clearInterval(this._blinkTimer);
-			this._blinkTimer = -1;
-		}
+		this._startCursorBlinkAnimation.dispose();
+		this._compatBlink.dispose();
 	}
 
 	public getDomNode(): HTMLElement {
@@ -159,7 +159,7 @@ export class ViewCursors extends ViewPart {
 
 		this._primaryCursor.onConfigurationChanged(e);
 		this._updateBlinking();
-		if (e.viewInfo.cursorStyle) {
+		if (e.viewInfo.cursorStyle || e.viewInfo.cursorBlinking) {
 			this._updateDomClassName();
 		}
 		for (var i = 0, len = this._secondaryCursors.length; i < len; i++) {
@@ -189,41 +189,44 @@ export class ViewCursors extends ViewPart {
 
 	// ---- blinking logic
 
-	private _getRenderType(): RenderType {
-		if (this._editorHasFocus) {
-			if (this._primaryCursor.getIsInEditableRange() && !this._readOnly) {
-				switch (this._cursorBlinking) {
-					case 'blink':
-						return RenderType.Blink;
-					case 'visible':
-						return RenderType.Visible;
-					case 'hidden':
-						return RenderType.Hidden;
-					default:
-						return RenderType.Blink;
-				}
-			}
-			return RenderType.Visible;
+	private _getCursorBlinking(): editorCommon.TextEditorCursorBlinkingStyle {
+		if (!this._editorHasFocus) {
+			return editorCommon.TextEditorCursorBlinkingStyle.Hidden;
+		}
+		if (this._readOnly || !this._primaryCursor.getIsInEditableRange()) {
+			return editorCommon.TextEditorCursorBlinkingStyle.Solid;
 		}
-		return RenderType.Hidden;
+		return this._cursorBlinking;
 	}
 
 	private _updateBlinking(): void {
-		if (this._blinkTimer !== -1) {
-			window.clearInterval(this._blinkTimer);
-			this._blinkTimer = -1;
-		}
+		this._startCursorBlinkAnimation.cancel();
+		this._compatBlink.cancel();
 
-		var renderType = this._getRenderType();
+		let blinkingStyle = this._getCursorBlinking();
 
-		if (renderType === RenderType.Visible || renderType === RenderType.Blink) {
-			this._show();
-		} else {
+		// hidden and solid are special as they involve no animations
+		let isHidden = (blinkingStyle === editorCommon.TextEditorCursorBlinkingStyle.Hidden);
+		let isSolid = (blinkingStyle === editorCommon.TextEditorCursorBlinkingStyle.Solid);
+
+		if (isHidden) {
 			this._hide();
+		} else {
+			this._show();
 		}
 
-		if (renderType === RenderType.Blink) {
-			this._blinkTimer = window.setInterval(() => this._blink(), ViewCursors.BLINK_INTERVAL);
+		this._blinkingEnabled = false;
+		this._updateDomClassName();
+
+		if (!isHidden && !isSolid) {
+			if (ANIMATIONS_SUPPORTED) {
+				this._startCursorBlinkAnimation.setIfNotSet(() => {
+					this._blinkingEnabled = true;
+					this._updateDomClassName();
+				}, ViewCursors.BLINK_INTERVAL);
+			} else {
+				this._compatBlink.cancelAndSet(() => this._compatBlinkUpdate(), ViewCursors.BLINK_INTERVAL);
+			}
 		}
 	}
 	// --- end blinking logic
@@ -234,24 +237,46 @@ export class ViewCursors extends ViewPart {
 
 	private _getClassName(): string {
 		let result = ClassNames.VIEW_CURSORS_LAYER;
-		let extraClassName: string;
 		switch (this._cursorStyle) {
 			case editorCommon.TextEditorCursorStyle.Line:
-				extraClassName = 'cursor-line-style';
+				result += ' cursor-line-style';
 				break;
 			case editorCommon.TextEditorCursorStyle.Block:
-				extraClassName = 'cursor-block-style';
+				result += ' cursor-block-style';
 				break;
 			case editorCommon.TextEditorCursorStyle.Underline:
-				extraClassName = 'cursor-underline-style';
+				result += ' cursor-underline-style';
 				break;
 			default:
-				extraClassName = 'cursor-line-style';
+				result += ' cursor-line-style';
+		}
+		if (this._blinkingEnabled) {
+			switch (this._getCursorBlinking()) {
+				case editorCommon.TextEditorCursorBlinkingStyle.Blink:
+					result += ' cursor-blink';
+					break;
+				case editorCommon.TextEditorCursorBlinkingStyle.Smooth:
+					result += ' cursor-smooth';
+					break;
+				case editorCommon.TextEditorCursorBlinkingStyle.Phase:
+					result += ' cursor-phase';
+					break;
+				case editorCommon.TextEditorCursorBlinkingStyle.Expand:
+					result += ' cursor-expand';
+					break;
+				case editorCommon.TextEditorCursorBlinkingStyle.Solid:
+					result += ' cursor-solid';
+					break;
+				default:
+					result += ' cursor-solid';
+			}
+		} else {
+			result += ' cursor-solid';
 		}
-		return result + ' ' + extraClassName;
+		return result;
 	}
 
-	private _blink(): void {
+	private _compatBlinkUpdate(): void {
 		if (this._isVisible) {
 			this._hide();
 		} else {

src/vs/editor/common/config/commonEditorConfig.ts

@@ -237,7 +237,7 @@ class InternalEditorOptionsHelper {
 			revealHorizontalRightPadding: toInteger(opts.revealHorizontalRightPadding, 0),
 			roundedSelection: toBoolean(opts.roundedSelection),
 			overviewRulerLanes: toInteger(opts.overviewRulerLanes, 0, 3),
-			cursorBlinking: opts.cursorBlinking,
+			cursorBlinking: cursorBlinkingStyleFromString(opts.cursorBlinking),
 			mouseWheelZoom: toBoolean(opts.mouseWheelZoom),
 			cursorStyle: cursorStyleFromString(opts.cursorStyle),
 			hideCursorInOverviewRuler: toBoolean(opts.hideCursorInOverviewRuler),
@@ -378,6 +378,23 @@ function cursorStyleFromString(cursorStyle:string): editorCommon.TextEditorCurso
 	return editorCommon.TextEditorCursorStyle.Line;
 }
 
+function cursorBlinkingStyleFromString(cursorBlinkingStyle: string): editorCommon.TextEditorCursorBlinkingStyle {
+	switch (cursorBlinkingStyle) {
+		case 'blink':
+			return editorCommon.TextEditorCursorBlinkingStyle.Blink;
+		case 'smooth':
+			return editorCommon.TextEditorCursorBlinkingStyle.Smooth;
+		case 'phase':
+			return editorCommon.TextEditorCursorBlinkingStyle.Phase;
+		case 'expand':
+			return editorCommon.TextEditorCursorBlinkingStyle.Expand;
+		case 'visible': // maintain compatibility
+		case 'solid':
+			return editorCommon.TextEditorCursorBlinkingStyle.Solid;
+	}
+	return editorCommon.TextEditorCursorBlinkingStyle.Blink;
+}
+
 function toIntegerWithDefault(source:any, defaultValue:number): number {
 	if (typeof source === 'undefined') {
 		return defaultValue;
@@ -702,9 +719,9 @@ let editorConfiguration:IConfigurationNode = {
 		},
 		'editor.cursorBlinking' : {
 			'type': 'string',
-			'enum': ['blink', 'visible', 'hidden'],
+			'enum': ['blink', 'smooth', 'phase', 'expand', 'solid'],
 			'default': DefaultConfig.editor.cursorBlinking,
-			'description': nls.localize('cursorBlinking', "Controls the cursor blinking animation, accepted values are 'blink', 'visible', and 'hidden'")
+			'description': nls.localize('cursorBlinking', "Control the cursor animation style, possible values are 'blink', 'smooth', 'phase', 'expand' and 'solid'")
 		},
 		'editor.mouseWheelZoom': {
 			'type': 'boolean',

src/vs/editor/common/editorCommon.ts

@@ -259,7 +259,7 @@ export interface IEditorOptions {
 	 */
 	overviewRulerLanes?:number;
 	/**
-	 * Control the cursor blinking animation.
+	 * Control the cursor animation style, possible values are 'blink', 'smooth', 'phase', 'expand' and 'solid'.
 	 * Defaults to 'blink'.
 	 */
 	cursorBlinking?:string;
@@ -602,7 +602,7 @@ export class InternalEditorViewOptions {
 	revealHorizontalRightPadding:number;
 	roundedSelection:boolean;
 	overviewRulerLanes:number;
-	cursorBlinking:string;
+	cursorBlinking:TextEditorCursorBlinkingStyle;
 	mouseWheelZoom:boolean;
 	cursorStyle:TextEditorCursorStyle;
 	hideCursorInOverviewRuler:boolean;
@@ -629,7 +629,7 @@ export class InternalEditorViewOptions {
 		revealHorizontalRightPadding:number;
 		roundedSelection:boolean;
 		overviewRulerLanes:number;
-		cursorBlinking:string;
+		cursorBlinking:TextEditorCursorBlinkingStyle;
 		mouseWheelZoom:boolean;
 		cursorStyle:TextEditorCursorStyle;
 		hideCursorInOverviewRuler:boolean;
@@ -652,7 +652,7 @@ export class InternalEditorViewOptions {
 		this.revealHorizontalRightPadding = source.revealHorizontalRightPadding|0;
 		this.roundedSelection = Boolean(source.roundedSelection);
 		this.overviewRulerLanes = source.overviewRulerLanes|0;
-		this.cursorBlinking = String(source.cursorBlinking);
+		this.cursorBlinking = source.cursorBlinking|0;
 		this.mouseWheelZoom = Boolean(source.mouseWheelZoom);
 		this.cursorStyle = source.cursorStyle|0;
 		this.hideCursorInOverviewRuler = Boolean(source.hideCursorInOverviewRuler);
@@ -4262,6 +4262,36 @@ export enum TextEditorCursorStyle {
 	Underline = 3
 }
 
+/**
+ * The kind of animation in which the editor's cursor should be rendered.
+ */
+export enum TextEditorCursorBlinkingStyle {
+	/**
+	 * Hidden
+	 */
+	Hidden = 0,
+	/**
+	 * Blinking
+	 */
+	Blink = 1,
+	/**
+	 * Blinking with smooth fading
+	 */
+	Smooth = 2,
+	/**
+	 * Blinking with prolonged filled state and smooth fading
+	 */
+	Phase = 3,
+	/**
+	 * Expand collapse animation on the y axis
+	 */
+	Expand = 4,
+	/**
+	 * No-Blinking
+	 */
+	Solid = 5
+}
+
 /**
  * @internal
  */

src/vs/monaco.d.ts

@@ -1113,7 +1113,7 @@ declare module monaco.editor {
          */
         overviewRulerLanes?: number;
         /**
-         * Control the cursor blinking animation.
+         * Control the cursor animation style, possible values are 'blink', 'smooth', 'phase', 'expand' and 'solid'.
          * Defaults to 'blink'.
          */
         cursorBlinking?: string;
@@ -1354,7 +1354,7 @@ declare module monaco.editor {
         revealHorizontalRightPadding: number;
         roundedSelection: boolean;
         overviewRulerLanes: number;
-        cursorBlinking: string;
+        cursorBlinking: TextEditorCursorBlinkingStyle;
         mouseWheelZoom: boolean;
         cursorStyle: TextEditorCursorStyle;
         hideCursorInOverviewRuler: boolean;
@@ -3304,6 +3304,36 @@ declare module monaco.editor {
         Underline = 3,
     }
 
+    /**
+     * The kind of animation in which the editor's cursor should be rendered.
+     */
+    export enum TextEditorCursorBlinkingStyle {
+        /**
+         * Hidden
+         */
+        Hidden = 0,
+        /**
+         * Blinking
+         */
+        Blink = 1,
+        /**
+         * Blinking with smooth fading
+         */
+        Smooth = 2,
+        /**
+         * Blinking with prolonged filled state and smooth fading
+         */
+        Phase = 3,
+        /**
+         * Expand collapse animation on the y axis
+         */
+        Expand = 4,
+        /**
+         * No-Blinking
+         */
+        Solid = 5,
+    }
+
     /**
      * A view zone is a full horizontal rectangle that 'pushes' text down.
      * The editor reserves space for view zones when rendering.