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 #2 from CGNonofr/remote-selection-hover

Browse Source 
Remote selection hover label
This commit is contained in:
Michael MacFadden 2020-01-08 08:42:31 -06:00 committed by GitHub
commit e34afb715c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 14 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/css/monaco-collab-ext.css
View File

@ -37,8 +37,6 @@
.monaco-remote-selection {
position: absolute;
pointer-events: auto;
z-index: 10;
opacity: 0.3;
background: blue;
z-index: 4000;
}

13
src/ts/RemoteSelection.ts
View File

@ -85,6 +85,12 @@ export class RemoteSelection {
*/
private readonly _styleElement: HTMLStyleElement;
/**
* The label to display on hover
* @internal
*/
private readonly _label: string;
/**
* The Monaco editor instance to render selection into.
* @internal
@ -131,6 +137,7 @@ export class RemoteSelection {
id: string,
classId: number,
color: string,
label: string,
onDisposed: OnDisposed
) {
this._editor = codeEditor;
@ -138,6 +145,7 @@ export class RemoteSelection {
const uniqueClassId = `monaco-remote-selection-${classId}`;
this._className = `monaco-remote-selection ${uniqueClassId}`;
this._styleElement = RemoteSelection._addDynamicStyleElement(uniqueClassId, color);
this._label = label;
this._decorations = [];
this._onDisposed = onDisposed;
}
@ -254,7 +262,10 @@ export class RemoteSelection {
this._endPosition.column
),
options: {
className: this._className
className: this._className,
hoverMessage: this._label != null ? {
value: this._label
} : null
}
}
]

4
src/ts/RemoteSelectionManager.ts
View File

@ -72,11 +72,11 @@ export class RemoteSelectionManager {
* @param color
* The color to render the selection with.
*/
public addSelection(id: string, color: string): RemoteSelection {
public addSelection(id: string, color: string, label?: string): RemoteSelection {
const onDisposed = () => {
this.removeSelection(id);
};
const selection = new RemoteSelection(this._options.editor, id, this._nextClassId++, color, onDisposed);
const selection = new RemoteSelection(this._options.editor, id, this._nextClassId++, color, label, onDisposed);
this._remoteSelections.set(id, selection);
return selection;
}