Skip to content

Commit

Permalink
merge
Browse files Browse the repository at this point in the history
  • Loading branch information
@christianalfoni
christianalfoni committed Mar 27, 2020
2 parents ec0260e + b4f0a94 commit 30c2fa9
Show file tree
Hide file tree
Showing 11 changed files with 508 additions and 313 deletions.
58 changes: 49 additions & 9 deletions packages/app/src/app/overmind/effects/vscode/ModelsHandler.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ export type OnOperationAppliedCallback = (data: OnOperationAppliedData) => void;
export type ModuleModel = {
changeListener: { dispose: Function };
selections: any[];
currentLine: number;
path: string;
model: Promise<any>;
comments: Array<{ commentId: string; range: [number, number] }>;
Expand Down Expand Up @@ -116,6 +117,7 @@ export class ModelsHandler {
this.moduleModels[fullPath] = this.moduleModels[fullPath] || {
changeListener: null,
model: null,
currentLine: 0,
path: fullPath,
selections: [],
comments: [],
Expand All @@ -125,6 +127,23 @@ export class ModelsHandler {
return this.moduleModels[fullPath];
}

public updateLineCommentIndication(model: any, lineNumber: number) {
const moduleModel = this.moduleModels[model.uri.path];

moduleModel.currentLine = lineNumber;

const newDecorationComments = this.createCommentDecorations(
moduleModel.comments,
model,
this.currentCommentThreadId,
moduleModel.currentLine
);
moduleModel.currentCommentDecorations = model.deltaDecorations(
moduleModel.currentCommentDecorations,
newDecorationComments
);
}

public changeModule = async (module: Module) => {
const moduleModel = this.getModuleModelByPath(module.path);

Expand All @@ -144,7 +163,8 @@ export class ModelsHandler {
const newDecorationComments = this.createCommentDecorations(
moduleModel.comments,
model,
this.currentCommentThreadId
this.currentCommentThreadId,
moduleModel.currentLine
);
moduleModel.currentCommentDecorations = model.deltaDecorations(
moduleModel.currentCommentDecorations,
Expand Down Expand Up @@ -188,13 +208,16 @@ export class ModelsHandler {
const newDecorationComments = this.createCommentDecorations(
commentThreads,
model,
currentCommentThreadId
currentCommentThreadId,
moduleModel.currentLine
);

moduleModel.currentCommentDecorations = model.deltaDecorations(
existingDecorationComments,
newDecorationComments
);

moduleModel.comments = commentThreads;
});
}

Expand Down Expand Up @@ -673,7 +696,8 @@ export class ModelsHandler {
range: [number, number];
}>,
model: any,
currentCommentThreadId: string | null
currentCommentThreadId: string | null,
currentLineNumber: number
) {
const commentDecorationsByLineNumber = commentThreadDecorations.reduce<{
[lineNumber: string]: Array<{
Expand All @@ -695,6 +719,24 @@ export class ModelsHandler {
return aggr;
}, {});

const initialDecorations: any[] =
currentLineNumber === -1
? []
: [
{
range: new this.monaco.Range(
currentLineNumber,
1,
currentLineNumber,
1
),
options: {
isWholeLine: true,
glyphMarginClassName: `editor-comments-glyph editor-comments-multi editor-comments-add`,
},
},
];

return Object.keys(commentDecorationsByLineNumber).reduce(
(aggr, lineNumberKey) => {
const lineCommentDecorations =
Expand All @@ -721,12 +763,10 @@ export class ModelsHandler {
isWholeLine: true,
// comment-id- class needs to be the LAST class!
glyphMarginClassName: `editor-comments-glyph ${
activeCommentDecoration ? 'active-comment ' : ''
activeCommentDecoration ? 'editor-comments-active ' : ''
}${
ids.length > 1
? `multi-comment multi-comment-${ids.length} `
: ''
}comment-ids-${ids.join('_')}`,
ids.length > 1 ? `editor-comments-multi` : ''
}editor-comments-ids-${ids.join('_')}`,
},
},
{
Expand All @@ -740,7 +780,7 @@ export class ModelsHandler {
}
);
},
[]
initialDecorations
);
}
}
39 changes: 25 additions & 14 deletions packages/app/src/app/overmind/effects/vscode/icons.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,70 +18,81 @@
opacity: 1;
}

.editor-comments-glyph.active-comment.multi-comment:before {
.editor-comments-glyph.active-comment.editor-comments-multi:before {
color: #fff;
}

.multi-comment:before {
.editor-comments-multi:before {
content: '...';
color: #fff;
position: absolute;
top: -2px;
left: 6px;
left: 7px;
z-index: 10;
font-size: 8px;
font-weight: bold;
letter-spacing: -2px;
height: 13px;
font-family: 'Inter', sans-serif;
}
.vs-dark .multi-comment:before {

.vs-dark .editor-comments-multi:before {
color: #242424;
}

.multi-comment-2:before {
.editor-comments-add:before {
content: '+';
font-size: 10px;
font-weight: bold;
top: 0;
left: 8px;
}

.editor-comments-multi-2:before {
content: '2';
top: 0px;
left: 9px;
}

.multi-comment-3:before {
.editor-comments-multi-3:before {
content: '3';
top: 0px;
left: 9px;
}
.multi-comment-4:before {
.editor-comments-multi-4:before {
content: '4';
top: 0px;
left: 9px;
}
.multi-comment-5:before {
.editor-comments-multi-5:before {
content: '5';
top: 0px;
left: 9px;
}
.multi-comment-6:before {
.editor-comments-multi-6:before {
content: '6';
top: 0px;
left: 9px;
}
.multi-comment-7:before {
.editor-comments-multi-7:before {
content: '7';
top: 0px;
left: 9px;
}
.multi-comment-8:before {
.editor-comments-multi-8:before {
content: '8';
top: 0px;
left: 9px;
}
.multi-comment-9:before {
.editor-comments-multi-9:before {
content: '9';
top: 0px;
left: 9px;
}

.editor-comments-glyph.active-comment {
.editor-comments-glyph.editor-comments-active:before {
content: '';
}
.editor-comments-glyph.editor-comments-active {
opacity: 1;
background-image: url('data:image/svg+xml,%3Csvg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0 5C0 7.76142 2.23858 10 5 10C7.76142 10 10 7.76142 10 5C10 2.23858 7.76142 0 5 0C2.23858 0 0 2.23858 0 5Z" fill="%230971F1"/%3E%3Cpath d="M5 5H0V10H5V5Z" fill="%230971F1"/%3E%3C/svg%3E%0A');
}
40 changes: 32 additions & 8 deletions packages/app/src/app/overmind/effects/vscode/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,7 @@ export class VSCodeEffect {
private linter: Linter | null;
private modelsHandler: ModelsHandler;
private modelSelectionListener: { dispose: Function };
private modelCursorPositionListener: { dispose: Function };
private modelViewRangeListener: { dispose: Function };
private readOnly: boolean;
private elements = {
Expand Down Expand Up @@ -232,9 +233,14 @@ export class VSCodeEffect {
}

setTimeout(() => {
const el = document.querySelector('.active-comment');
const commentGlyphs = document.querySelectorAll(
'.editor-comments-glyph'
);
const el = Array.from(commentGlyphs).find(glyphEl =>
glyphEl.className.includes(commentId)
);

if (el && el.className.includes(commentId)) {
if (el) {
resolve(el.getBoundingClientRect());
} else {
findActiveComment();
Expand Down Expand Up @@ -1026,6 +1032,10 @@ export class VSCodeEffect {
this.modelSelectionListener.dispose();
}

if (this.modelCursorPositionListener) {
this.modelCursorPositionListener.dispose();
}

if (this.modelViewRangeListener) {
this.modelViewRangeListener.dispose();
}
Expand Down Expand Up @@ -1091,9 +1101,21 @@ export class VSCodeEffect {
}
});

this.modelCursorPositionListener = activeEditor.onDidChangeCursorPosition(
cursor => {
const model = activeEditor.getModel();

this.modelsHandler.updateLineCommentIndication(
model,
cursor.position.lineNumber
);
}
);

this.modelSelectionListener = activeEditor.onDidChangeCursorSelection(
selectionChange => {
const lines = activeEditor.getModel().getLinesContent() || [];
const model = activeEditor.getModel();
const lines = model.getLinesContent() || [];
const data: onSelectionChangeData = {
primary: getSelection(lines, selectionChange.selection),
secondary: selectionChange.secondarySelections.map(s =>
Expand Down Expand Up @@ -1211,11 +1233,13 @@ export class VSCodeEffect {
We grab the id of the commenthread by getting the last classname.
The last part of the classname is the id.
*/
const commentIds = Array.from(target.classList)
.pop()
.split('comment-ids-')
.pop()
.split('_');
const lastClass = Array.from(target.classList).pop();
const commentIds = lastClass.startsWith('editor-comments-ids-')
? lastClass
.split('editor-comments-ids-')
.pop()
.split('_')
: [];
const boundingRect = target.getBoundingClientRect();
this.options.onCommentClick({
commentIds,
Expand Down
Loading

0 comments on commit 30c2fa9

Please sign in to comment.