diff --git a/src/renderer/view/canvas/index.ts b/src/renderer/view/canvas/index.ts index 9fb7a3a..e0eb360 100644 --- a/src/renderer/view/canvas/index.ts +++ b/src/renderer/view/canvas/index.ts @@ -57,6 +57,9 @@ export default class CanvasView implements View { // Whether or not to draw the gutter. private drawGutter: boolean = true; + // Cursor beat timer + private cursorBeat: number; + // The character length of the longest line of the editor. // HACK: need to find a better way of getting the longest line, right now we just update it // whenever we render... (also won't decrease it longest line changes) @@ -309,8 +312,40 @@ export default class CanvasView implements View { // - have another transparent canvas on top for selections/highlights/cursors? * this.ctx.fillStyle = COLORS.CURSOR; line.cursors.forEach((ch) => { + if (this.cursorBeat != undefined) { + clearInterval(this.cursorBeat); + } + + const beatInterval = 800; const textWidth = this.metrics.stringWidth(line.text.substring(0, line.chTo16Indices[ch])); - this.ctx.fillRect(textWidth + xOffset, y, 2, lineHeight); + + const fadeCursor = (line: any) => () => { + let nondefaultStyles = line.styles.reverse() + .filter((span: StyleSpan) => (span.style.isSelection() || span.style.isHighlight())); + + this.ctx.fillStyle = COLORS.BACKGROUND; + this.ctx.fillRect(textWidth + xOffset, y, 2, lineHeight); + + if (nondefaultStyles.length) { + let span = nondefaultStyles[0]; + this.ctx.fillStyle = span.style.bg; + this.ctx.fillRect(textWidth + xOffset, y, 2, lineHeight); + } + }; + + const showCursor = () => { + this.ctx.fillStyle = COLORS.CURSOR; + this.ctx.fillRect(textWidth + xOffset, y, 2, lineHeight); + }; + + // First beat + showCursor(); + setTimeout(fadeCursor(line), beatInterval); + + this.cursorBeat = setInterval(() => { + showCursor(); + setTimeout(fadeCursor(line), beatInterval); + }, beatInterval * 2); }); // Draw text.