Highlight and unhilight the closest connection

core/block_render_svg.js

@@ -1153,8 +1153,6 @@ Blockly.BlockSvg.prototype.renderStatementInput_ = function(pathObject, row,
 };
 
 /**
- * TODO: fenichel: consider moving to block_svg if this is in blockly and
- * scratch-blocks.
  * Position an new block correctly, so that it doesn't move the existing block
  * when connected to it.
  * @param {!Blockly.Block} newBlock The block to position - either the first
@@ -1181,7 +1179,7 @@ Blockly.BlockSvg.prototype.positionNewBlock = function(newBlock, newConnection,
 
 /**
  * Visual effect to show that if the dragging block is dropped, this block will
- * be replaced.  If a shadow block it will disappear.  Otherwise it will bump.
+ * be replaced.  If a shadow block, it will disappear.  Otherwise it will bump.
  * @param {boolean} add True if highlighting should be added.
  */
 Blockly.BlockSvg.prototype.highlightForReplacement = function(add) {

core/constants.js

@@ -57,6 +57,12 @@ Blockly.CONNECTING_SNAP_RADIUS = 68;
  */
 Blockly.CURRENT_CONNECTION_PREFERENCE = 20;
 
+/**
+ * The main colour of insertion markers, in hex.  The block is rendered a
+ * transparent grey by changing the fill opacity in CSS.
+ */
+Blockly.INSERTION_MARKER_COLOUR = '#000000';
+
 /**
  * Delay in ms between trigger and bumping unconnected block out of alignment.
  */
@@ -285,9 +291,3 @@ Blockly.RENAME_VARIABLE_ID = 'RENAME_VARIABLE_ID';
  * @const {string}
  */
 Blockly.DELETE_VARIABLE_ID = 'DELETE_VARIABLE_ID';
-
-/**
- * TODO: Put this somewhere else.  colours.js?
- *
- */
-Blockly.INSERTION_MARKER_COLOUR = '#000000';

core/css.js

@@ -293,8 +293,6 @@ Blockly.Css.CONTENT = [
 
   '.blocklyReplaceable>.blocklyPath {',
     'fill-opacity: 0.5;',
-    'stroke-width: 3px;',
-    'stroke: #ffdb70;',
   '}',
 
   '.blocklyReplaceable>.blocklyPathLight,',

core/insertion_marker_manager.js

@@ -508,6 +508,10 @@ Blockly.InsertionMarkerManager.prototype.showPreview_ = function() {
   } else {  // Should insert
     this.connectMarker_();
   }
+  // Also highlight the actual connection, as a nod to previous behaviour.
+  if (this.closestConnection_) {
+    this.closestConnection_.highlight();
+  }
 };
 
 /**
@@ -524,16 +528,17 @@ Blockly.InsertionMarkerManager.prototype.maybeHidePreview_ = function(candidate)
   // We might need it later, and this saves disposing of it and recreating it.
   if (!candidate.closest) {
     this.hidePreview_();
-  }
-  // If there's a new preview and there was an preview before, and either
-  // connection has changed, remove the old preview.
-  var hadPreview = this.closestConnection_ && this.localConnection_;
-  var closestChanged = this.closestConnection_ != candidate.closest;
-  var localChanged = this.localConnection_ != candidate.local;
+  } else {
+    // If there's a new preview and there was an preview before, and either
+    // connection has changed, remove the old preview.
+    var hadPreview = this.closestConnection_ && this.localConnection_;
+    var closestChanged = this.closestConnection_ != candidate.closest;
+    var localChanged = this.localConnection_ != candidate.local;
 
-  // Also hide if we had a preview before but now we're going to delete instead.
-  if (hadPreview && (closestChanged || localChanged || this.wouldDeleteBlock_)) {
-    this.hidePreview_();
+    // Also hide if we had a preview before but now we're going to delete instead.
+    if (hadPreview && (closestChanged || localChanged || this.wouldDeleteBlock_)) {
+      this.hidePreview_();
+    }
   }
 
   // Either way, clear out old state.
@@ -548,6 +553,9 @@ Blockly.InsertionMarkerManager.prototype.maybeHidePreview_ = function(candidate)
  * @private
  */
 Blockly.InsertionMarkerManager.prototype.hidePreview_ = function() {
+  if (this.closestConnection_) {
+    this.closestConnection_.unhighlight();
+  }
   if (this.highlightingBlock_) {
     this.unhighlightBlock_();
   } else if (this.markerConnection_) {
@@ -572,6 +580,7 @@ Blockly.InsertionMarkerManager.prototype.highlightBlock_ = function() {
     closest.targetBlock().highlightForReplacement(true);
   } else if (local.type == Blockly.OUTPUT_VALUE) {
     this.highlightedBlock_ = closest.sourceBlock_;
+    // TODO: remove?
     closest.sourceBlock_.highlightShapeForInput(closest, true);
   }
   this.highlightingBlock_ = true;
@@ -671,8 +680,7 @@ Blockly.InsertionMarkerManager.prototype.connectMarker_ = function() {
   imBlock.rendered = true;
   imBlock.getSvgRoot().setAttribute('visibility', 'visible');
 
-  // TODO: positionNewBlock should be on Blockly.BlockSvg, not prototype,
-  // because it doesn't rely on anything in the block it's called on.
+  // Position based on the calculated connection locations.
   imBlock.positionNewBlock(imBlock, imConn, closest);
 
   // Connect() also renders the insertion marker.