Archives/convergencelabs_monaco-collab-ext
1
0
Fork 0
mirror of https://github.com/convergencelabs/monaco-collab-ext.git synced 2024-10-27 20:34:17 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #21 from CGNonofr/show-tooltip-on-hover

Browse Source 
Show tooltip on cursor hover
This commit is contained in:
Alec LaLonde 2022-09-19 20:40:23 -06:00 committed by GitHub
commit d13b0ec4d5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 24 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/ts/RemoteCursorManager.ts
View File

@ -39,6 +39,11 @@ export interface IRemoteCursorManagerOptions {
*/
tooltipDuration?: number;
/**
* Show the tooltip when the cursor is hovered
*/
showTooltipOnHover?: boolean;
/**
* An additional class name for the tooltip element, to tweak the default style
*/
@ -57,7 +62,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<IRemoteCursorManagerOptions> = {tooltips: true, tooltipDuration: 1, showTooltipOnHover: false};
/**
* A counter that generates unique ids for the cursor widgets.
@ -131,6 +136,7 @@ export class RemoteCursorManager {
label,
this._options.tooltips,
tooltipDurationMs,
this._options.showTooltipOnHover,
this._options.tooltipClassName,
() => this.removeCursor(id));
this._cursorWidgets.set(id, cursorWidget);

25
src/ts/RemoteCursorWidget.ts
View File

@ -56,6 +56,7 @@ export class RemoteCursorWidget implements editor.IContentWidget, IDisposable {
label: string,
tooltipEnabled: boolean,
tooltipDuration: number,
showTooltipOnHover: boolean,
tooltipClassName: string | undefined,
onDisposed: OnDisposed) {
this._editor = codeEditor;
@ -83,6 +84,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;
@ -173,17 +184,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);
}
@ -199,7 +203,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";