fix: Ensure visual indicating for focus loss. (#226)

* fix: Ensure visual indicating for focus loss.

If the workspace loses focus, any existing block selection or cursor
visuals should be hidden to represent that the focus has been lost.

* feat: use CSS for passive focus on blocks and next connections

* Attempt to use passive focus indicator via CSS.

* Add a workaround to fix passive indicator hiding.

This was a workable solution found by Rachel with the explanation
captured in a new line comment.

* Use a better color for passive indicators.

This color came at Rachel's suggestion.

---------

Co-authored-by: Rachel Fenichel <fenichel@google.com>

Author: BenHenning

src/line_cursor.ts

@@ -652,6 +652,22 @@ export class LineCursor extends Marker {
     }
   }
 
+  override hide(): void {
+    super.hide();
+
+    // If there's a block currently selected, remove the selection since the
+    // cursor should now be hidden.
+    const curNode = this.getCurNode();
+    if (curNode.getType() === ASTNode.types.BLOCK) {
+      const block = curNode.getLocation() as Blockly.BlockSvg;
+      if (!block.isShadow()) {
+        Blockly.common.setSelected(null);
+      } else {
+        block.removeSelect();
+      }
+    }
+  }
+
   /**
    * Redraw the current marker.
    *

src/navigation.ts

@@ -501,6 +501,15 @@ export class Navigation {
     }
 
     if (this.markedNode) {
+      // Note that this hide happens twice, one before setCurNode() and once in
+      // removeMark. The latter is actually a logical no-op because setCurNode()
+      // will trigger a selection update of the currently marked node (if it's a
+      // block) and that, in turn, clones the underlying block's
+      // pathObject.svgPath. Since svgPath is updated to remove any passive
+      // focus indicator after selection clones it, the effect of removing the
+      // indicator doesn't do anything (hence it needs to be done *before*
+      // selection is added in order to immediately take effect).
+      this.passiveFocusIndicator.hide();
       cursor.setCurNode(this.markedNode);
       this.removeMark(workspace);
       return;

src/navigation_controller.ts

@@ -167,6 +167,11 @@ export class NavigationController {
     this.hasNavigationFocus = isFocused;
     if (isFocused) {
       this.navigation.focusWorkspace(workspace, true);
+    } else {
+      // Hide cursor to indicate lost focus. Also, mark the current node so that
+      // it can be properly restored upon returning to the workspace.
+      this.navigation.markAtCursor(workspace);
+      workspace.getCursor()?.hide();
     }
   }
 

src/passive_focus.ts

@@ -94,9 +94,7 @@ export class PassiveFocus {
    */
   showAtBlock(node: ASTNode) {
     const block = node.getLocation() as BlockSvg;
-    // Note that this changes rendering but does not change Blockly's
-    // internal selected state.
-    block.addSelect();
+    utils.dom.addClass(block.pathObject.svgPath, 'passiveBlockFocus');
   }
 
   /**
@@ -106,9 +104,7 @@ export class PassiveFocus {
    */
   hideAtBlock(node: ASTNode) {
     const block = node.getLocation() as BlockSvg;
-    // Note that this changes rendering but does not change Blockly's
-    // internal selected state.
-    block.removeSelect();
+    utils.dom.removeClass(block.pathObject.svgPath, 'passiveBlockFocus');
   }
 
   /**
@@ -122,8 +118,6 @@ export class PassiveFocus {
       'width': 100,
       'height': 5,
       'class': 'passiveNextIndicator',
-      'stroke': '#4286f4',
-      'fill': '#4286f4',
     });
     return indicator;
   }

test/index.html

@@ -96,6 +96,17 @@
       #announcer {
         height: 25%;
       }
+
+      .passiveBlockFocus.blocklyPath {
+        stroke-dasharray: 5 3;
+        stroke-width: 3;
+        stroke: #ffa200;
+      }
+
+      .passiveNextIndicator {
+        stroke: #ffa200;
+        fill: #ffa200;
+      }
     </style>
   </head>