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 { .monaco-remote-selection {
position: absolute; position: absolute;
pointer-events: auto; pointer-events: auto;
z-index: 10;
opacity: 0.3; opacity: 0.3;
background: blue; background: blue;
z-index: 4000;
} }

13
src/ts/RemoteSelection.ts
View File

@ -85,6 +85,12 @@ export class RemoteSelection {
*/ */
private readonly _styleElement: HTMLStyleElement; private readonly _styleElement: HTMLStyleElement;
/**
* The label to display on hover
* @internal
*/
private readonly _label: string;
/** /**
* The Monaco editor instance to render selection into. * The Monaco editor instance to render selection into.
* @internal * @internal
@ -131,6 +137,7 @@ export class RemoteSelection {
id: string, id: string,
classId: number, classId: number,
color: string, color: string,
label: string,
onDisposed: OnDisposed onDisposed: OnDisposed
) { ) {
this._editor = codeEditor; this._editor = codeEditor;
@ -138,6 +145,7 @@ export class RemoteSelection {
const uniqueClassId = `monaco-remote-selection-${classId}`; const uniqueClassId = `monaco-remote-selection-${classId}`;
this._className = `monaco-remote-selection ${uniqueClassId}`; this._className = `monaco-remote-selection ${uniqueClassId}`;
this._styleElement = RemoteSelection._addDynamicStyleElement(uniqueClassId, color); this._styleElement = RemoteSelection._addDynamicStyleElement(uniqueClassId, color);
this._label = label;
this._decorations = []; this._decorations = [];
this._onDisposed = onDisposed; this._onDisposed = onDisposed;
} }
@ -254,7 +262,10 @@ export class RemoteSelection {
this._endPosition.column this._endPosition.column
), ),
options: { 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 * @param color
* The color to render the selection with. * 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 = () => { const onDisposed = () => {
this.removeSelection(id); 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); this._remoteSelections.set(id, selection);
return selection; return selection;
} }