Split YComments into separated services

antmicro · Feb 26, 2024 · 1ba91a4 · 1ba91a4
1 parent 33affe6
commit 1ba91a4
Show file tree

Hide file tree

Showing 5 changed files with 227 additions and 162 deletions.
diff --git a/src/comments/sidebarWidget.js b/src/comments/sidebarWidget.js
@@ -5,66 +5,64 @@ import { updateShownComments, ycommentsFacet } from "./state";
 class CommentMarker extends GutterMarker {
   static MAIN_CLASS = "comment-gutter";
   static ICON_CLASS = "comment-gutter-icon";
-  static HAS_COMMENTS_CLASS = "has-comments";
+  static COMMENT_IMAGE_CLASS = "comment-image";
 
   /**
    * @param {BlockInfo} line 
    * @param {EditorView} view
    */
   constructor(line, view) {
     super();
-    this.line = line;
-    this.view = view;
-    if (view) {
-      this.ycomments = this.view.state.facet(ycommentsFacet);
-      this.lineNumber = this.view.state.doc.lineAt(this.line.to).number;
-    }
-  }
+    this.gutterMarker = null;
+    this.icon = null;
 
-  gutterCommentMarker() {
-    const commentMarker = document.createElement("div");
-    commentMarker.classList.add(CommentMarker.MAIN_CLASS)
-    if (this.lineNumber) {
-      commentMarker.style.width = (this.lineNumber.toString().length * 5) + "px";
+    if (view && line) {
+      this.ycomments = view.state.facet(ycommentsFacet);
+      this.lineNumber = view.state.doc.lineAt(line.to).number;
+      this.commentId = this.ycomments.findCommentOn(this.lineNumber)?.commentId;
     }
-    return commentMarker
   }
 
   hasComments() {
-    if (!this.line) {
-      return false;
-    }
-
-    this.commentId = this.ycomments
-      .iterYComments()
-      .find(({lineNumber}) => lineNumber == this.lineNumber)
-      ?.commentId;
-
     return Boolean(this.commentId);
   }
 
-  popupIcon() {
-    const icon = document.createElement("section");
-    icon.classList = CommentMarker.ICON_CLASS;
-    return icon;
+  createGutterMarker() {
+    this.gutterMarker = document.createElement("div");
+    this.gutterMarker.classList.add(CommentMarker.MAIN_CLASS);
+    if (this.lineNumber) {
+      this.gutterMarker.style.width = (this.lineNumber.toString().length * 7) + "px";
+    }
+  }
+
+  addHoverEffects() {
+    this.icon.onmouseenter = () => this.icon.classList.add(CommentMarker.COMMENT_IMAGE_CLASS);
+    this.icon.onmouseleave = () => this.icon.classList.remove(CommentMarker.COMMENT_IMAGE_CLASS);
   }
 
-  markHasComments(marker) {
-    marker.classList.add(CommentMarker.HAS_COMMENTS_CLASS);
+  createPopupIcon() {
+    this.icon = document.createElement("section");
+    this.icon.classList = CommentMarker.ICON_CLASS;
+
+    if (!this.commentId) {
+      this.addHoverEffects();
+    }
   }
 
-  addPopupIcon(marker) {
-    marker.appendChild(this.popupIcon())
+  markHasComments() {
+    this.icon.classList.add(CommentMarker.COMMENT_IMAGE_CLASS)
   }
 
   /** Main function. Used to render the actual gutter marker */
   toDOM() {
-    const marker = this.gutterCommentMarker();
+    this.createGutterMarker();
+    this.createPopupIcon();
     if (this.hasComments()) {
-      this.markHasComments(marker)
+      this.markHasComments();
     }
-    this.addPopupIcon(marker);
-    return marker
+
+    this.gutterMarker.appendChild(this.icon);
+    return this.gutterMarker;
   }
 }
 
@@ -73,13 +71,11 @@ class CommentMarker extends GutterMarker {
  * @param {EditorView} view
  */
 const getOrCreateComment = (view, line, ycomments) => {
-  const thisLineNumber = view.state.doc.lineAt(line.to).number;
-  const comment = ycomments.iterYComments()
-    .find(({lineNumber}) => lineNumber == thisLineNumber)
-    ?.commentId
-
+  const lineNumber = view.state.doc.lineAt(line.to).number;
+  const comment = ycomments.findCommentOn(lineNumber)?.commentId;
+
   if (!comment) {
-    return ycomments.newComment(thisLineNumber);
+    return ycomments.newComment(lineNumber);
   }
 
   return comment
@@ -96,7 +92,7 @@ const commentMarker = gutter({
     mousedown(view, line) {
       let ycomments = view.state.facet(ycommentsFacet.reader);
       let commentId = getOrCreateComment(view, line, ycomments);
-      let willBeVisible = ycomments.switchVisibility(commentId);
+      let willBeVisible = ycomments.display().switchVisibility(commentId);
 
       if (!willBeVisible && ycomments.isEmpty(commentId)) {
         ycomments.deleteComment(commentId);

diff --git a/src/comments/textareaWidget.js b/src/comments/textareaWidget.js
@@ -62,7 +62,7 @@ const moveComments = (transaction, ycomments) => {
     if (lineDiff != 0) {
       const docLines = transaction.state.doc.lines;
       const cursorLine = transaction.state.doc.lineAt(transaction.selection.main.from).number - lineDiff;
-      ycomments.moveComments(cursorLine, lineDiff, docLines);
+      ycomments.positions().shift(cursorLine, lineDiff, docLines);
     } 
   }
 }