From 7eb847aee100be8609536e654dadfa63eb85a5bb Mon Sep 17 00:00:00 2001 From: Hernawan Fa'iz Abdillah Date: Tue, 23 Apr 2019 22:13:07 +0700 Subject: [PATCH 1/6] add canvas cursor blink --- src/renderer/view/canvas/index.ts | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/src/renderer/view/canvas/index.ts b/src/renderer/view/canvas/index.ts index 9fb7a3a..f2b5112 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,26 @@ 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 colorizeCursor = (color) => () => { + this.ctx.fillStyle = color; + this.ctx.fillRect(textWidth + xOffset, y, 2, lineHeight); + }; + + // First beat + colorizeCursor(COLORS.CURSOR); + setTimeout(colorizeCursor(COLORS.BACKGROUND), beatInterval); + + this.cursorBeat = setInterval(() => { + colorizeCursor(COLORS.CURSOR); + setTimeout(colorizeCursor(COLORS.BACKGROUND), beatInterval); + }, beatInterval * 2); }); // Draw text. From 1ca658cf9ee25c9a704fe5e739cefb2a3a427321 Mon Sep 17 00:00:00 2001 From: Hernawan Fa'iz Abdillah Date: Tue, 23 Apr 2019 22:19:20 +0700 Subject: [PATCH 2/6] add canvas colorizeCursor parameter type --- src/renderer/view/canvas/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/renderer/view/canvas/index.ts b/src/renderer/view/canvas/index.ts index f2b5112..3a985eb 100644 --- a/src/renderer/view/canvas/index.ts +++ b/src/renderer/view/canvas/index.ts @@ -319,7 +319,7 @@ export default class CanvasView implements View { const beatInterval = 800; const textWidth = this.metrics.stringWidth(line.text.substring(0, line.chTo16Indices[ch])); - const colorizeCursor = (color) => () => { + const colorizeCursor = (color: string) => () => { this.ctx.fillStyle = color; this.ctx.fillRect(textWidth + xOffset, y, 2, lineHeight); }; From 9500972f1a5bdaf13378f4bc594e3edca671a756 Mon Sep 17 00:00:00 2001 From: Hernawan Fa'iz Abdillah Date: Tue, 23 Apr 2019 22:28:38 +0700 Subject: [PATCH 3/6] change canvas to separate cursor blink function --- src/renderer/view/canvas/index.ts | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/src/renderer/view/canvas/index.ts b/src/renderer/view/canvas/index.ts index 3a985eb..0449099 100644 --- a/src/renderer/view/canvas/index.ts +++ b/src/renderer/view/canvas/index.ts @@ -319,18 +319,23 @@ export default class CanvasView implements View { const beatInterval = 800; const textWidth = this.metrics.stringWidth(line.text.substring(0, line.chTo16Indices[ch])); - const colorizeCursor = (color: string) => () => { - this.ctx.fillStyle = color; + const fadeCursor = () => { + this.ctx.fillStyle = COLORS.BACKGROUND; + 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 - colorizeCursor(COLORS.CURSOR); - setTimeout(colorizeCursor(COLORS.BACKGROUND), beatInterval); + showCursor(); + setTimeout(fadeCursor, beatInterval); this.cursorBeat = setInterval(() => { - colorizeCursor(COLORS.CURSOR); - setTimeout(colorizeCursor(COLORS.BACKGROUND), beatInterval); + showCursor(); + setTimeout(fadeCursor, beatInterval); }, beatInterval * 2); }); From 101120b58a3b0c07312b3b9e0f47c7e0ae3df76d Mon Sep 17 00:00:00 2001 From: Hernawan Fa'iz Abdillah Date: Thu, 25 Apr 2019 21:58:59 +0700 Subject: [PATCH 4/6] change canvas to redraw bg on selection This avoid cursor trace and double selection redraw (which make it ticker than normal transparent selection). --- src/renderer/view/canvas/index.ts | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/src/renderer/view/canvas/index.ts b/src/renderer/view/canvas/index.ts index 0449099..f180f42 100644 --- a/src/renderer/view/canvas/index.ts +++ b/src/renderer/view/canvas/index.ts @@ -319,9 +319,17 @@ export default class CanvasView implements View { const beatInterval = 800; const textWidth = this.metrics.stringWidth(line.text.substring(0, line.chTo16Indices[ch])); - const fadeCursor = () => { + 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 = () => { @@ -331,11 +339,11 @@ export default class CanvasView implements View { // First beat showCursor(); - setTimeout(fadeCursor, beatInterval); + setTimeout(fadeCursor(line), beatInterval); this.cursorBeat = setInterval(() => { showCursor(); - setTimeout(fadeCursor, beatInterval); + setTimeout(fadeCursor(line), beatInterval); }, beatInterval * 2); }); From 8e714c583a23f5a881ae38839af4f5e814fc1280 Mon Sep 17 00:00:00 2001 From: Hernawan Fa'iz Abdillah Date: Thu, 25 Apr 2019 22:30:42 +0700 Subject: [PATCH 5/6] fix lint max line length --- src/renderer/view/canvas/index.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/renderer/view/canvas/index.ts b/src/renderer/view/canvas/index.ts index f180f42..866fcfa 100644 --- a/src/renderer/view/canvas/index.ts +++ b/src/renderer/view/canvas/index.ts @@ -320,7 +320,8 @@ export default class CanvasView implements View { const textWidth = this.metrics.stringWidth(line.text.substring(0, line.chTo16Indices[ch])); const fadeCursor = (line: any) => () => { - let nondefaultStyles = line.styles.reverse().filter((span: StyleSpan) => (span.style.isSelection() || span.style.isHighlight())); + 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); From 0e07cd7901201222606ae07390671789a29fcead Mon Sep 17 00:00:00 2001 From: Hernawan Fa'iz Abdillah Date: Thu, 25 Apr 2019 23:03:12 +0700 Subject: [PATCH 6/6] fix lint not formatted error --- src/renderer/view/canvas/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/renderer/view/canvas/index.ts b/src/renderer/view/canvas/index.ts index 866fcfa..e0eb360 100644 --- a/src/renderer/view/canvas/index.ts +++ b/src/renderer/view/canvas/index.ts @@ -321,7 +321,7 @@ export default class CanvasView implements View { const fadeCursor = (line: any) => () => { let nondefaultStyles = line.styles.reverse() - .filter((span: StyleSpan) => (span.style.isSelection() || span.style.isHighlight())); + .filter((span: StyleSpan) => (span.style.isSelection() || span.style.isHighlight())); this.ctx.fillStyle = COLORS.BACKGROUND; this.ctx.fillRect(textWidth + xOffset, y, 2, lineHeight);