chore: add visually highlighting selected comment

core/comments/comment_view.ts

@@ -19,6 +19,11 @@ export class CommentView implements IRenderedElement {
   /** The root group element of the comment view. */
   private svgRoot: SVGGElement;
 
+  /**
+   * The svg rect element that we use to create a hightlight around the comment.
+   */
+  private highlightRect: SVGRectElement;
+
   /** The group containing all of the top bar elements. */
   private topBarGroup: SVGGElement;
 
@@ -99,6 +104,8 @@ export class CommentView implements IRenderedElement {
       'class': 'blocklyComment blocklyEditable',
     });
 
+    this.highlightRect = this.createHighlightRect(this.svgRoot);
+
     ({
       topBarGroup: this.topBarGroup,
       topBarBackground: this.topBarBackground,
@@ -124,6 +131,14 @@ export class CommentView implements IRenderedElement {
     this.moveTo(new Coordinate(0, 0));
   }
 
+  private createHighlightRect(svgRoot: SVGGElement): SVGRectElement {
+    return dom.createSvgElement(
+      Svg.RECT,
+      {'class': 'blocklyCommentHighlight'},
+      svgRoot,
+    );
+  }
+
   /**
    * Creates the top bar and the elements visually within it.
    * Registers event listeners.
@@ -293,6 +308,8 @@ export class CommentView implements IRenderedElement {
 
     this.svgRoot.setAttribute('height', `${size.height}`);
     this.svgRoot.setAttribute('width', `${size.width}`);
+    this.highlightRect.setAttribute('height', `${size.height}`);
+    this.highlightRect.setAttribute('width', `${size.width}`);
 
     this.updateTopBarSize(size);
     this.updateTextAreaSize(size, topBarSize);
@@ -816,4 +833,13 @@ css.register(`
   transform: scale(-1, 1);
   cursor: sw-resize;
 }
+
+.blocklyCommentHighlight {
+  fill: none;
+}
+
+.blocklySelected .blocklyCommentHighlight {
+  stroke: #fc3;
+  stroke-width: 3px;
+}
 `);

core/comments/rendered_workspace_comment.ts

@@ -192,10 +192,16 @@ export class RenderedWorkspaceComment
   }
 
   select(): void {
-    // TODO: Before merging, file an issue to implement this.
+    dom.addClass(this.getSvgRoot(), 'blocklySelected');
+    console.log(
+      'adding selected',
+      this.getSvgRoot(),
+      this.getSvgRoot().getAttribute('class'),
+    );
   }
 
   unselect(): void {
-    // TODO: Before merging, file an issue to implement this.
+    console.trace('unselect');
+    dom.removeClass(this.getSvgRoot(), 'blocklySelected');
   }
 }

core/gesture.ts

@@ -545,6 +545,8 @@ export class Gesture {
       } else if (this.isBubbleClick()) {
         // Bubbles are in front of all fields and blocks.
         this.doBubbleClick();
+      } else if (this.isCommentClick()) {
+        this.doCommentClick();
       } else if (this.isFieldClick()) {
         this.doFieldClick();
       } else if (this.isIconClick()) {
@@ -848,6 +850,9 @@ export class Gesture {
   /** Execute a bubble click. */
   private doBubbleClick() {}
 
+  /** Execute a comment click. */
+  private doCommentClick() {}
+
   /** Execute a field click. */
   private doFieldClick() {
     if (!this.startField) {
@@ -1079,6 +1084,10 @@ export class Gesture {
     return hasStartBubble && !this.hasExceededDragRadius;
   }
 
+  private isCommentClick(): boolean {
+    return !!this.startComment && !this.hasExceededDragRadius;
+  }
+
   /**
    * Whether this gesture is a click on a block.  This should only be called
    * when ending a gesture (pointerup).