Highlight input shape in Zelos (#3444)

* Highlight shape for input in zelos rendering

core/block_svg.js

@@ -1735,12 +1735,12 @@ Blockly.BlockSvg.prototype.highlightForReplacement = function(add) {
 };
 
 /**
- * Determine whether or not to highlight a connection.
- * @param {Blockly.Connection} conn The connection on the input to determine
- *     whether or not to highlight.
- * @return {boolean} Whether or not to highlight the connection.
+ * Visual effect to show that if the dragging block is dropped it will connect
+ * to this input.
+ * @param {Blockly.Connection} conn The connection on the input to highlight.
+ * @param {boolean} add True if highlighting should be added.
  * @package
  */
-Blockly.BlockSvg.prototype.shouldHighlightConnection = function(conn) {
-  return this.workspace.getRenderer().shouldHighlightConnection(conn);
+Blockly.BlockSvg.prototype.highlightShapeForInput = function(conn, add) {
+  this.pathObject.updateShapeForInputHighlight(conn, add);
 };

core/insertion_marker_manager.js

@@ -408,9 +408,9 @@ Blockly.InsertionMarkerManager.prototype.shouldReplace_ = function() {
   // Dragging a block over an existing block in an input.
   if (local.type == Blockly.OUTPUT_VALUE) {
     // Insert the dragged block into the stack if possible.
-    if (!closest.isConnected() ||
-      Blockly.Connection.lastConnectionInRow(this.topBlock_,
-          closest.targetConnection.getSourceBlock())) {
+    if (closest &&
+        this.workspace_.getRenderer()
+            .shouldInsertDraggedBlock(this.topBlock_, closest)) {
       return false; // Insert.
     }
     // Otherwise replace the existing block and bump it out.
@@ -505,7 +505,7 @@ Blockly.InsertionMarkerManager.prototype.showPreview_ = function() {
   }
   // Also highlight the actual connection, as a nod to previous behaviour.
   if (this.closestConnection_ && this.closestConnection_.targetBlock() &&
-      this.closestConnection_.targetBlock()
+      this.workspace_.getRenderer()
           .shouldHighlightConnection(this.closestConnection_)) {
     this.closestConnection_.highlight();
   }
@@ -551,7 +551,7 @@ Blockly.InsertionMarkerManager.prototype.maybeHidePreview_ = function(candidate)
  */
 Blockly.InsertionMarkerManager.prototype.hidePreview_ = function() {
   if (this.closestConnection_ && this.closestConnection_.targetBlock() &&
-      this.closestConnection_.targetBlock()
+      this.workspace_.getRenderer()
           .shouldHighlightConnection(this.closestConnection_)) {
     this.closestConnection_.unhighlight();
   }
@@ -574,8 +574,7 @@ Blockly.InsertionMarkerManager.prototype.highlightBlock_ = function() {
     closest.targetBlock().highlightForReplacement(true);
   } else if (local.type == Blockly.OUTPUT_VALUE) {
     this.highlightedBlock_ = closest.getSourceBlock();
-    // TODO: Bring this back for zelos rendering.
-    // closest.getSourceBlock().highlightShapeForInput(closest, true);
+    closest.getSourceBlock().highlightShapeForInput(closest, true);
   }
   this.highlightingBlock_ = true;
 };
@@ -589,8 +588,7 @@ Blockly.InsertionMarkerManager.prototype.unhighlightBlock_ = function() {
   // If there's no block in place, but we're still connecting to a value input,
   // then we must have been highlighting an input shape.
   if (closest.type == Blockly.INPUT_VALUE && !closest.isConnected()) {
-    // TODO: Bring this back for zelos rendering.
-    // this.highlightedBlock_.highlightShapeForInput(closest, false);
+    this.highlightedBlock_.highlightShapeForInput(closest, false);
   } else {
     this.highlightedBlock_.highlightForReplacement(false);
   }

core/renderers/common/path_object.js

@@ -265,3 +265,16 @@ Blockly.blockRendering.PathObject.prototype.updateReplacementHighlight =
     /* eslint-disable indent */
   this.setClass_('blocklyReplaceable', enable);
 }; /* eslint-enable indent */
+
+/**
+ * Add or remove styling that shows that if the dragging block is dropped, this
+ * block will be connected to the input.
+ * @param {Blockly.Connection} _conn The connection on the input to highlight.
+ * @param {boolean} _enable True if styling should be added.
+ * @package
+ */
+Blockly.blockRendering.PathObject.prototype.updateShapeForInputHighlight =
+    function(_conn, _enable) {
+    /* eslint-disable indent */
+  // NOP
+}; /* eslint-enable indent */

core/renderers/common/renderer.js

@@ -152,6 +152,21 @@ Blockly.blockRendering.Renderer.prototype.shouldHighlightConnection =
   return true;
 }; /* eslint-enable indent */
 
+/**
+ * Determine whether or not to insert a dragged block into a stack.
+ * @param {!Blockly.Block} block The target block.
+ * @param {!Blockly.Connection} conn The closest connection.
+ * @return {boolean} True if we should insert the dragged block into the stack.
+ * @package
+ */
+Blockly.blockRendering.Renderer.prototype.shouldInsertDraggedBlock =
+    function(block, conn) {
+    /* eslint-disable indent */
+  return !conn.isConnected() ||
+    !!Blockly.Connection.lastConnectionInRow(block,
+        conn.targetConnection.getSourceBlock());
+}; /* eslint-enable indent */
+
 /**
  * Render the block.
  * @param {!Blockly.BlockSvg} block The block to render.

core/renderers/zelos/path_object.js

@@ -131,6 +131,24 @@ Blockly.zelos.PathObject.prototype.updateReplacementHighlight = function(
   }
 };
 
+/**
+ * @override
+ */
+Blockly.zelos.PathObject.prototype.updateShapeForInputHighlight = function(
+    conn, enable) {
+  var name = conn.getParentInput().name;
+  var outlinePath = this.getOutlinePath_(name);
+  if (!outlinePath) {
+    return;
+  }
+  if (enable) {
+    outlinePath.setAttribute('filter',
+        'url(#' + this.constants_.replacementGlowFilterId + ')');
+  } else {
+    outlinePath.removeAttribute('filter');
+  }
+};
+
 /**
  * Method that's called when the drawer is about to draw the block.
  * @package

core/renderers/zelos/renderer.js

@@ -114,4 +114,12 @@ Blockly.zelos.Renderer.prototype.shouldHighlightConnection = function(conn) {
   return conn.type != Blockly.INPUT_VALUE && conn.type !== Blockly.OUTPUT_VALUE;
 };
 
+/**
+ * @override
+ */
+Blockly.zelos.Renderer.prototype.shouldInsertDraggedBlock = function(_block,
+    _conn) {
+  return false;
+};
+
 Blockly.blockRendering.register('zelos', Blockly.zelos.Renderer);