From 4c03bc00eb8751c5d81f114d811d46eaff35883e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lo=C3=AFc=20Mangeonjean?= Date: Wed, 18 May 2022 15:09:46 +0200 Subject: [PATCH 1/3] Refactor tooltip management a little --- src/ts/RemoteCursorWidget.ts | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/src/ts/RemoteCursorWidget.ts b/src/ts/RemoteCursorWidget.ts index 12eb600..d5a2897 100644 --- a/src/ts/RemoteCursorWidget.ts +++ b/src/ts/RemoteCursorWidget.ts @@ -171,17 +171,10 @@ export class RemoteCursorWidget implements editor.IContentWidget, IDisposable { } private _showTooltip(): void { - this._updateTooltipPosition(); - - if (this._hideTimer !== null) { - clearTimeout(this._hideTimer); - } else { - this._setTooltipVisible(true); - } + this._setTooltipVisible(true); this._hideTimer = setTimeout(() => { this._setTooltipVisible(false); - this._hideTimer = null; }, this._tooltipDuration); } @@ -197,7 +190,12 @@ export class RemoteCursorWidget implements editor.IContentWidget, IDisposable { } private _setTooltipVisible(visible: boolean): void { + if (this._hideTimer !== null) { + clearTimeout(this._hideTimer); + this._hideTimer = null; + } if (visible) { + this._updateTooltipPosition(); this._tooltipNode.style.opacity = "1.0"; } else { this._tooltipNode.style.opacity = "0"; From a3b0b8a57c58a380d1bdea9caaec85513c81bba6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lo=C3=AFc=20Mangeonjean?= Date: Wed, 18 May 2022 15:09:57 +0200 Subject: [PATCH 2/3] Add missing type --- src/ts/RemoteCursorManager.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ts/RemoteCursorManager.ts b/src/ts/RemoteCursorManager.ts index 94c9dac..13e2cb5 100644 --- a/src/ts/RemoteCursorManager.ts +++ b/src/ts/RemoteCursorManager.ts @@ -47,7 +47,7 @@ export class RemoteCursorManager { * The default values for optional parameters. * @internal */ - private static readonly DEFAULT_OPTIONS = {tooltips: true, tooltipDuration: 1}; + private static readonly DEFAULT_OPTIONS: Partial = {tooltips: true, tooltipDuration: 1, showTooltipOnHover: false}; /** * A counter that generates unique ids for the cursor widgets. From 38713d59b9b13a22e378d423e9a4e6050c5dddbc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lo=C3=AFc=20Mangeonjean?= Date: Wed, 18 May 2022 15:10:45 +0200 Subject: [PATCH 3/3] Add showTooltipOnHover option --- src/ts/RemoteCursorManager.ts | 8 +++++++- src/ts/RemoteCursorWidget.ts | 11 +++++++++++ 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/src/ts/RemoteCursorManager.ts b/src/ts/RemoteCursorManager.ts index 13e2cb5..3d10649 100644 --- a/src/ts/RemoteCursorManager.ts +++ b/src/ts/RemoteCursorManager.ts @@ -24,7 +24,7 @@ export interface IRemoteCursorManagerOptions { editor: monaco.editor.ICodeEditor; /** - * Determines if tooltips will be shown when the cursor is moved. + * Determines if tooltips will be shown when the cursor is moved or hovered. */ tooltips?: boolean; @@ -33,6 +33,11 @@ export interface IRemoteCursorManagerOptions { * it was last moved. */ tooltipDuration?: number; + + /** + * Show the tooltip when the cursor is hovered + */ + showTooltipOnHover?: boolean; } /** @@ -120,6 +125,7 @@ export class RemoteCursorManager { label, this._options.tooltips, tooltipDurationMs, + this._options.showTooltipOnHover, () => this.removeCursor(id)); this._cursorWidgets.set(id, cursorWidget); diff --git a/src/ts/RemoteCursorWidget.ts b/src/ts/RemoteCursorWidget.ts index d5a2897..1b5685f 100644 --- a/src/ts/RemoteCursorWidget.ts +++ b/src/ts/RemoteCursorWidget.ts @@ -55,6 +55,7 @@ export class RemoteCursorWidget implements editor.IContentWidget, IDisposable { label: string, tooltipEnabled: boolean, tooltipDuration: number, + showTooltipOnHover: boolean, onDisposed: OnDisposed) { this._editor = codeEditor; this._tooltipDuration = tooltipDuration; @@ -81,6 +82,16 @@ export class RemoteCursorWidget implements editor.IContentWidget, IDisposable { this._scrollListener = this._editor.onDidScrollChange(() => { this._updateTooltipPosition(); }); + + if (showTooltipOnHover) { + this._domNode.style.pointerEvents = 'auto'; + this._domNode.addEventListener('mouseover', () => { + this._setTooltipVisible(true); + }) + this._domNode.addEventListener('mouseout', () => { + this._setTooltipVisible(false); + }) + } } else { this._tooltipNode = null; this._scrollListener = null;