Flash on render (#3721)

* Flash a block when it's renderered in debug mode

core/block_svg.js

@@ -1645,7 +1645,8 @@ Blockly.BlockSvg.prototype.getRootBlock = function() {
 Blockly.BlockSvg.prototype.render = function(opt_bubble) {
   Blockly.utils.dom.startTextWidthCache();
   this.rendered = true;
-  (/** @type {!Blockly.WorkspaceSvg} */ (this.workspace)).getRenderer().render(this);
+  (/** @type {!Blockly.WorkspaceSvg} */ (this.workspace))
+      .getRenderer().render(this);
   // No matter how we rendered, connection locations should now be correct.
   this.updateConnectionLocations_();
   if (opt_bubble !== false) {

core/renderers/common/constants.js

@@ -18,6 +18,8 @@ goog.require('Blockly.utils.dom');
 goog.require('Blockly.utils.svgPaths');
 goog.require('Blockly.utils.userAgent');
 
+goog.requireType('Blockly.blockRendering.Debug');
+
 
 /**
  * An object that provides constants for rendering blocks.
@@ -440,6 +442,20 @@ Blockly.blockRendering.ConstantProvider = function() {
    */
   this.disabledPattern_ = null;
 
+  /**
+   * The ID of the debug filter, or the empty string if no pattern is set.
+   * @type {string}
+   * @package
+   */
+  this.debugFilterId = '';
+
+  /**
+   * The <filter> element to use for a debug highlight, or null if not set.
+   * @type {SVGElement}
+   * @private
+   */
+  this.debugFilter_ = null;
+
   /**
    * The <style> element to use for injecting renderer specific CSS.
    * @type {HTMLStyleElement}
@@ -754,6 +770,9 @@ Blockly.blockRendering.ConstantProvider.prototype.dispose = function() {
   if (this.disabledPattern_) {
     Blockly.utils.dom.removeNode(this.disabledPattern_);
   }
+  if (this.debugFilter_) {
+    Blockly.utils.dom.removeNode(this.debugFilter_);
+  }
   if (this.cssNode_) {
     Blockly.utils.dom.removeNode(this.cssNode_);
   }
@@ -984,6 +1003,7 @@ Blockly.blockRendering.ConstantProvider.prototype.shapeFor = function(
  * Create any DOM elements that this renderer needs (filters, patterns, etc).
  * @param {!SVGElement} svg The root of the workspace's SVG.
  * @param {string} rendererName Name of the renderer.
+ * @suppress {strictModuleDepCheck} Debug renderer only included in playground.
  * @package
  */
 Blockly.blockRendering.ConstantProvider.prototype.createDom = function(svg,
@@ -1065,6 +1085,42 @@ Blockly.blockRendering.ConstantProvider.prototype.createDom = function(svg,
       {'d': 'M 0 0 L 10 10 M 10 0 L 0 10', 'stroke': '#cc0'}, disabledPattern);
   this.disabledPatternId = disabledPattern.id;
   this.disabledPattern_ = disabledPattern;
+
+  if (Blockly.blockRendering.Debug) {
+    var debugFilter = Blockly.utils.dom.createSvgElement('filter',
+        {
+          'id': 'blocklyDebugFilter' + this.randomIdentifier_,
+          'height': '160%',
+          'width': '180%',
+          y: '-30%',
+          x: '-40%'
+        },
+        defs);
+    // Set all gaussian blur pixels to 1 opacity before applying flood
+    var debugComponentTransfer = Blockly.utils.dom.createSvgElement(
+        'feComponentTransfer', {'result': 'outBlur'}, debugFilter);
+    Blockly.utils.dom.createSvgElement('feFuncA',
+        {
+          'type': 'table', 'tableValues': '0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1'
+        },
+        debugComponentTransfer);
+    // Color the highlight
+    Blockly.utils.dom.createSvgElement('feFlood',
+        {
+          'flood-color': '#ff0000',
+          'flood-opacity': 0.5,
+          'result': 'outColor'
+        },
+        debugFilter);
+    Blockly.utils.dom.createSvgElement('feComposite',
+        {
+          'in': 'outColor', 'in2': 'outBlur',
+          'operator': 'in', 'result': 'outGlow'
+        },
+        debugFilter);
+    this.debugFilterId = debugFilter.id;
+    this.debugFilter_ = debugFilter;
+  }
 };
 
 /**

core/renderers/common/debugger.js

@@ -65,7 +65,8 @@ Blockly.blockRendering.Debug.config = {
   elems: true,
   connections: true,
   blockBounds: true,
-  connectedBlockBounds: true
+  connectedBlockBounds: true,
+  render: true
 };
 
 /**
@@ -397,4 +398,23 @@ Blockly.blockRendering.Debug.prototype.drawDebug = function(block, info) {
   }
 
   this.drawBoundingBox(info);
+
+  this.drawRender(block.pathObject.svgPath);
+};
+
+
+/**
+ * Show a debug filter to highlight that a block has been rendered.
+ * @param {!SVGElement} svgPath The block's svg path.
+ * @package
+ */
+Blockly.blockRendering.Debug.prototype.drawRender = function(svgPath) {
+  if (!Blockly.blockRendering.Debug.config.render) {
+    return;
+  }
+  svgPath.setAttribute('filter',
+      'url(#' + this.constants_.debugFilterId + ')');
+  setTimeout(function() {
+    svgPath.setAttribute('filter', '');
+  }, 100);
 };

tests/playground.html

@@ -288,6 +288,9 @@ function addToolboxButtonCallbacks() {
 }
 
 function setRenderDebugOptionCheckboxState(overrideOptions) {
+  if (!Blockly.blockRendering.Debug) {
+    return;
+  }
   Blockly.blockRendering.Debug.config = overrideOptions || {};
   if (!overrideOptions) {
     return;
@@ -303,6 +306,9 @@ function setRenderDebugOptionCheckboxState(overrideOptions) {
 }
 
 function updateRenderDebugOptions(e) {
+  if (!Blockly.blockRendering.Debug) {
+    return;
+  }
   var target = e.target;
   var optionName = target.getAttribute('data-optionName');
   var config = Blockly.blockRendering.Debug.config;
@@ -313,6 +319,9 @@ function updateRenderDebugOptions(e) {
 }
 
 function addRenderDebugOptionsCheckboxes() {
+  if (!Blockly.blockRendering.Debug) {
+    return;
+  }
   var renderDebugConfig = Blockly.blockRendering.Debug.config;
   var renderDebugOptionsListEl = document.getElementById('renderDebugOptions');
   var optionNames = Object.keys(renderDebugConfig);
@@ -438,6 +447,9 @@ function logEvents(state) {
 }
 
 function toggleRenderingDebug(state) {
+  if (!Blockly.blockRendering.Debug) {
+    return;
+  }
   var checkbox = document.getElementById('blockRenderDebugCheck');
   checkbox.checked = state;
   if (sessionStorage) {