Code Hint: Mouseover and mouseout handling for highlighting relevant code blocks

core/block_svg.js

@@ -222,9 +222,34 @@ Blockly.BlockSvg.prototype.unselect = function() {
  * Glow only this particular block, to highlight it visually as if it's running.
  * @param {boolean} isGlowingBlock Whether the block should glow.
  */
-Blockly.BlockSvg.prototype.setGlowBlock = function(isGlowingBlock) {
+Blockly.BlockSvg.prototype.setGlowBlock = function(isGlowingBlock, refactor=false) {
   this.isGlowingBlock_ = isGlowingBlock;
-  this.updateColour();
+
+  if( refactor === false ){
+    this.updateColour();
+  }
+  else{
+    // Update the applied SVG filter if the property has changed
+    var svg = this.getSvgRoot();
+    if (this.isGlowingBlock_ && !svg.hasAttribute('filter')) {
+      svg.setAttribute('filter', 'url(#blocklyMessyBlockGlowFilter)');
+    } else if (!this.isGlowingBlock_ && svg.hasAttribute('filter')) {
+      svg.removeAttribute('filter');
+    }
+  }
+}
+
+/**
+ * Set whether the block is highlighted or not.
+ * @param {boolean} highlighted True if highlighted.
+ */
+Blockly.BlockSvg.prototype.setHighlighted = function(highlighted) {
+  var svg = this.getSvgRoot();
+  if (highlighted && !svg.hasAttribute('filter')) {
+    svg.setAttribute('filter', 'url(#blocklyMessyBlockGlowFilter)');
+  } else if (svg.hasAttribute('filter')) {
+    svg.removeAttribute('filter');
+  }
 };
 
 /**
@@ -391,6 +416,35 @@ Blockly.BlockSvg.prototype.moveBy = function(dx, dy) {
   this.workspace.resizeContents();
 };
 
+/**
+ * Move a block along with its connected blocks and attach it to given parent
+ * @param {Blockly.BlockSvg} parent 
+ */
+Blockly.BlockSvg.prototype.attachToParent = function(parent) {
+  goog.asserts.assert(parent, 'Parent not provided');
+  this.parentBlock_=null;
+  this.workspace.addTopBlock(this);
+  this.setParent(parent);
+};
+
+
+/**
+ * Connect block to given block 
+ * Note: any block below this block will be disconnected
+ * @param {Blockly.BlockSvg} block
+ */
+Blockly.BlockSvg.prototype.connectToBlock = function(block) {
+  var previousConn = this.nextConnection;
+  if(previousConn.targetConnection) previousConn.disconnect();
+  var nextConn = block.previousConnection;
+  if(nextConn && nextConn.targetConnection) nextConn.disconnect();
+  if (previousConn.checkType_(nextConn)) {
+    // Attach the given block to this block.
+    previousConn.connect(nextConn);
+  }
+};
+
+
 /**
  * Transforms a block by setting the translation on the transform attribute
  * of the block's SVG.

core/colours.js

@@ -99,6 +99,7 @@ Blockly.Colours = {
   "stackGlowSize": 4,
   "stackGlowOpacity": 1,
   "replacementGlow": "#FFFFFF",
+  "messyBlockGlow": "#ff0000",
   "replacementGlowSize": 2,
   "replacementGlowOpacity": 1,
   "colourPickerStroke": "#FFFFFF",

core/flyout_base.js

@@ -146,6 +146,14 @@ Blockly.Flyout = function(workspaceOptions) {
    */
   this.recycleBlocks_ = [];
 
+  /**
+   * List of current highlight boxes drawn in flyout.  Highlight boxes are often used to
+   * visually mark certain group of variables.
+   * @type !Array.<!Blockly.BlockSvg>
+   * @private
+   */
+  this.highlightBoxs_ = [];
+
 };
 
 /**
@@ -921,3 +929,39 @@ Blockly.Flyout.prototype.recycleBlock_ = function(block) {
   block.moveBy(-xy.x, -xy.y);
   this.recycleBlocks_.push(block);
 };
+
+/**
+ * Display highlighting box for given variables in the workspace.
+ * @param {array} ids IDs of variables to find.
+ */
+Blockly.Flyout.prototype.drawHighlightBox = function(ids) {
+  for ( var i=0; i< ids.length; i++ ) {
+    var id = ids[i];
+    var block = null;
+    var height = 0;
+    if (id) {
+      block = this.workspace_.getBlockById(id);
+      if (!block) {
+        throw 'Tried to highlight variable that does not exist.';
+      }
+    }
+    height = block.getHeightWidth().height;
+    this.highlightBoxs_.push(Blockly.utils.createSvgElement('rect',
+      {'height': height * this.workspace_.scale,
+      'width' : (block.getHeightWidth().width+10) * this.workspace_.scale,
+      'style' : "fill: none;stroke-width:5;stroke:rgb(255,0,0);",
+      'x' : (block.getBoundingRectangle().topLeft.x-5) * this.workspace_.scale,
+      'y' : (block.getBoundingRectangle().topLeft.y-this.getScrollPos()) * this.workspace_.scale
+      },
+      this.svgGroup_));
+  }
+};
+
+/**
+ * Remove all highlighting boxes for given variables in the workspace.
+ */
+Blockly.Flyout.prototype.removeHighlightBox = function() {
+  for ( var i=0; i<this.highlightBoxs_.length; i++ ) {
+    this.highlightBoxs_[i].remove();
+  }
+};

core/hint.js

@@ -146,6 +146,7 @@ Blockly.Hint.prototype.setVisible = function(visible) {
     // specific for hint
     this.bubble_.registerContextMenuCallback(this.showContextMenu_.bind(this));
     this.bubble_.registerMouseOverCallback(this.showCodeHint_.bind(this));
+    this.bubble_.registerMouseOutCallback(this.hideCodeHint_.bind(this));
 
     if (this.block_.RTL) {
       // Right-align the paragraph.
@@ -186,7 +187,16 @@ Blockly.Hint.prototype.showCodeHint_ = function(e) {
   var event = new Blockly.Events.HintClick(this,"mouseover");
       event.workspaceId = this.block_.workspace.id;
       Blockly.Events.fire(event);
-}
+  // this.block_.workspace.highlightBlock(this.block_.id, true);
+
+};
+Blockly.Hint.prototype.hideCodeHint_ = function(e) {
+  var event = new Blockly.Events.HintClick(this,"mouseout");
+      event.workspaceId = this.block_.workspace.id;
+      Blockly.Events.fire(event);
+  // this.block_.workspace.highlightBlock(this.block_.id, false);
+
+};
 
 /**
  * Make a context menu option for action resolving the hint

core/hint_bubble.js

@@ -74,6 +74,7 @@ Blockly.HintBubble = function(workspace, content, shape, anchorXY,
 
   if (!workspace.options.readOnly) {
     Blockly.bindEvent_(this.content_, 'mouseover', this, this.bubbleMouseOver_);
+    Blockly.bindEvent_(this.content_, 'mouseout', this, this.bubbleMouseOut_);
     Blockly.bindEventWithChecks_(
         this.content_, 'mousedown', this, this.bubbleMouseDown_);
   }
@@ -92,6 +93,10 @@ Blockly.HintBubble.prototype.registerMouseOverCallback = function(callback) {
   this.mouseoverCallback_ = callback;
 };
 
+Blockly.HintBubble.prototype.registerMouseOutCallback = function(callback) {
+  this.mouseoutCallback_ = callback;
+};
+
 /**
  * Width of the border around the bubble.
  */
@@ -232,7 +237,7 @@ Blockly.HintBubble.prototype.createDom_ = function(content, hasResize) {
   */
   this.bubbleGroup_ = Blockly.utils.createSvgElement('g', {}, null);
   this.resizeGroup_ = null;
-  
+
   this.bubbleGroup_.appendChild(content);
   return this.bubbleGroup_;
 };
@@ -290,7 +295,13 @@ Blockly.HintBubble.prototype.bubbleMouseOver_ = function(_e){
   if(this.mouseoverCallback_){
     this.mouseoverCallback_(_e);
   }
-}
+};
+
+Blockly.HintBubble.prototype.bubbleMouseOut_ = function(_e){
+  if(this.mouseoutCallback_){
+    this.mouseoutCallback_(_e);
+  }
+};
 
 /**
  * Get whether this bubble is deletable or not.

core/inject.js

@@ -177,6 +177,46 @@ Blockly.createDom_ = function(container, options) {
       },
       stackGlowFilter);
 
+  //  copy of stackGlowFilter with different color
+
+  var messyBlockGlowFilter = Blockly.utils.createSvgElement('filter',
+    {'id': 'blocklyMessyBlockGlowFilter',
+      'height': '160%', 
+      'width': '180%', 
+      y: '-30%', 
+      x: '-40%'
+    }, 
+    defs);
+
+  options.refactorGlowBlur = Blockly.utils.createSvgElement('feGaussianBlur',
+    {'in': 'SourceGraphic',
+      'stdDeviation': Blockly.Colours.stackGlowSize}, 
+      messyBlockGlowFilter);
+  // Set all gaussian blur pixels to 1 opacity before applying flood
+  var componentTransfer2 = Blockly.utils.createSvgElement('feComponentTransfer', {'result': 'outBlur'}, messyBlockGlowFilter);
+  Blockly.utils.createSvgElement('feFuncA',
+    {'type': 'table', 
+    'tableValues': '0' + goog.string.repeat(' 1', 16)}, 
+    componentTransfer2);
+  // Color the highlight
+  Blockly.utils.createSvgElement('feFlood',
+    {'flood-color': Blockly.Colours.messyBlockGlow,
+      'flood-opacity': Blockly.Colours.stackGlowOpacity, 
+      'result': 'outColor'}, 
+      messyBlockGlowFilter);
+  Blockly.utils.createSvgElement('feComposite',
+    {'in': 'outColor', 
+      'in2': 'outBlur',
+      'operator': 'in', 
+      'result': 'outGlow'}, 
+      messyBlockGlowFilter);
+  Blockly.utils.createSvgElement('feComposite',
+    {'in': 'SourceGraphic', 'in2': 'outGlow', 'operator': 'over'}, messyBlockGlowFilter);
+
+
+  // copy ends
+
+
   // Filter for replacement marker
   var replacementGlowFilter = Blockly.utils.createSvgElement('filter',
       {