From ae69c3fbcf7f67f1a4039a22bc0c3d38e8dc17c2 Mon Sep 17 00:00:00 2001
From: Neil Fraser <fraser@google.com>
Date: Thu, 8 Jan 2015 16:06:05 -0800
Subject: [PATCH] Improve porformance of colour changes.

---
 blockly_compressed.js         |  4 ++--
 core/block_svg.js             |  3 ---
 demos/blockfactory/blocks.js  |  8 ++++++++
 demos/blockfactory/index.html | 18 +++++++++---------
 4 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/blockly_compressed.js b/blockly_compressed.js
index 1828f3f4b..7656bef74 100644
--- a/blockly_compressed.js
+++ b/blockly_compressed.js
@@ -1052,8 +1052,8 @@ Blockly.BlockSvg.prototype.disposeUiEffect=function(){Blockly.playAudio("delete"
 Blockly.BlockSvg.disposeUiStep_=function(a){var b=(new Date-a.startDate_)/150;1<b?goog.dom.removeNode(a):(a.setAttribute("transform","translate("+(a.translateX_+(Blockly.RTL?-1:1)*a.bBox_.width/2*b+", "+(a.translateY_+a.bBox_.height*b))+") scale("+(1-b)+")"),setTimeout(function(){Blockly.BlockSvg.disposeUiStep_(a)},10))};
 Blockly.BlockSvg.prototype.connectionUiEffect=function(){Blockly.playAudio("click");var a=Blockly.getSvgXY_(this.svgGroup_);this.outputConnection?(a.x+=Blockly.RTL?3:-3,a.y+=13):this.previousConnection&&(a.x+=Blockly.RTL?-23:23,a.y+=3);a=Blockly.createSvgElement("circle",{cx:a.x,cy:a.y,r:0,fill:"none",stroke:"#888","stroke-width":10},Blockly.svg);a.startDate_=new Date;Blockly.BlockSvg.connectionUiStep_(a)};
 Blockly.BlockSvg.connectionUiStep_=function(a){var b=(new Date-a.startDate_)/150;1<b?goog.dom.removeNode(a):(a.setAttribute("r",25*b),a.style.opacity=1-b,setTimeout(function(){Blockly.BlockSvg.connectionUiStep_(a)},10))};
-Blockly.BlockSvg.prototype.updateColour=function(){if(!this.disabled){var a=Blockly.makeColour(this.getColour()),b=goog.color.hexToRgb(a),c=goog.color.lighten(b,.3),b=goog.color.darken(b,.4);this.svgPathLight_.setAttribute("stroke",goog.color.rgbArrayToHex(c));this.svgPathDark_.setAttribute("fill",goog.color.rgbArrayToHex(b));this.svgPath_.setAttribute("fill",a);c=this.getIcons();for(a=0;a<c.length;a++)c[a].updateColour();for(a=0;c=this.inputList[a];a++)for(var b=0,d;d=c.fieldRow[b];b++)d.setText(null);
-this.rendered&&this.render()}};Blockly.BlockSvg.prototype.updateDisabled=function(){var a=Blockly.hasClass_(this.svgGroup_,"blocklyDisabled");this.disabled||this.getInheritedDisabled()?a||(Blockly.addClass_(this.svgGroup_,"blocklyDisabled"),this.svgPath_.setAttribute("fill","url(#blocklyDisabledPattern)")):a&&(Blockly.removeClass_(this.svgGroup_,"blocklyDisabled"),this.updateColour());for(var a=this.getChildren(),b=0,c;c=a[b];b++)c.updateDisabled()};
+Blockly.BlockSvg.prototype.updateColour=function(){if(!this.disabled){var a=Blockly.makeColour(this.getColour()),b=goog.color.hexToRgb(a),c=goog.color.lighten(b,.3),b=goog.color.darken(b,.4);this.svgPathLight_.setAttribute("stroke",goog.color.rgbArrayToHex(c));this.svgPathDark_.setAttribute("fill",goog.color.rgbArrayToHex(b));this.svgPath_.setAttribute("fill",a);c=this.getIcons();for(a=0;a<c.length;a++)c[a].updateColour();for(a=0;c=this.inputList[a];a++)for(var b=0,d;d=c.fieldRow[b];b++)d.setText(null)}};
+Blockly.BlockSvg.prototype.updateDisabled=function(){var a=Blockly.hasClass_(this.svgGroup_,"blocklyDisabled");this.disabled||this.getInheritedDisabled()?a||(Blockly.addClass_(this.svgGroup_,"blocklyDisabled"),this.svgPath_.setAttribute("fill","url(#blocklyDisabledPattern)")):a&&(Blockly.removeClass_(this.svgGroup_,"blocklyDisabled"),this.updateColour());for(var a=this.getChildren(),b=0,c;c=a[b];b++)c.updateDisabled()};
 Blockly.BlockSvg.prototype.getCommentText=function(){return this.comment?this.comment.getText().replace(/\s+$/,"").replace(/ +\n/g,"\n"):""};Blockly.BlockSvg.prototype.setCommentText=function(a){var b=!1;goog.isString(a)?(this.comment||(this.comment=new Blockly.Comment(this),b=!0),this.comment.setText(a)):this.comment&&(this.comment.dispose(),b=!0);b&&this.rendered&&(this.render(),this.bumpNeighbours_())};
 Blockly.BlockSvg.prototype.setWarningText=function(a){this.isInFlyout&&(a=null);var b=!1;goog.isString(a)?(this.warning||(this.warning=new Blockly.Warning(this),b=!0),this.warning.setText(a)):this.warning&&(this.warning.dispose(),b=!0);b&&this.rendered&&(this.render(),this.bumpNeighbours_())};Blockly.BlockSvg.prototype.setMutator=function(a){this.mutator&&this.mutator!==a&&this.mutator.dispose();a&&(a.block_=this,this.mutator=a,this.rendered&&a.createIcon())};
 Blockly.BlockSvg.prototype.setDisabled=function(a){this.disabled!=a&&(Blockly.BlockSvg.superClass_.setDisabled.call(this,a),this.updateDisabled(),this.workspace.fireChangeEvent())};Blockly.BlockSvg.prototype.addSelect=function(){Blockly.addClass_(this.svgGroup_,"blocklySelected");this.svgGroup_.parentNode.appendChild(this.svgGroup_)};Blockly.BlockSvg.prototype.removeSelect=function(){Blockly.removeClass_(this.svgGroup_,"blocklySelected")};
diff --git a/core/block_svg.js b/core/block_svg.js
index 178503f6f..eea679dfd 100644
--- a/core/block_svg.js
+++ b/core/block_svg.js
@@ -1075,9 +1075,6 @@ Blockly.BlockSvg.prototype.updateColour = function() {
       field.setText(null);
     }
   }
-  if (this.rendered) {
-    this.render();
-  }
 };
 
 /**
diff --git a/demos/blockfactory/blocks.js b/demos/blockfactory/blocks.js
index bd70ed864..adcfe1aa8 100644
--- a/demos/blockfactory/blocks.js
+++ b/demos/blockfactory/blocks.js
@@ -653,6 +653,14 @@ Blockly.Blocks['colour_hue'] = {
   validator: function(text) {
     // Update the current block's colour to match.
     this.sourceBlock_.setColour(text);
+  },
+  mutationToDom: function(workspace) {
+    var container = document.createElement('mutation');
+    container.setAttribute('colour', this.getColour());
+    return container;
+  },
+  domToMutation: function(container) {
+    this.setColour(container.getAttribute('colour'));
   }
 };
 
diff --git a/demos/blockfactory/index.html b/demos/blockfactory/index.html
index 82f92729a..7175e2343 100644
--- a/demos/blockfactory/index.html
+++ b/demos/blockfactory/index.html
@@ -177,15 +177,15 @@
       <block type="type_other"></block>
     </category>
     <category name="Colour" id="colourCategory">
-      <block type="colour_hue"><field name="HUE">20</field></block>
-      <block type="colour_hue"><field name="HUE">65</field></block>
-      <block type="colour_hue"><field name="HUE">120</field></block>
-      <block type="colour_hue"><field name="HUE">160</field></block>
-      <block type="colour_hue"><field name="HUE">210</field></block>
-      <block type="colour_hue"><field name="HUE">230</field></block>
-      <block type="colour_hue"><field name="HUE">260</field></block>
-      <block type="colour_hue"><field name="HUE">290</field></block>
-      <block type="colour_hue"><field name="HUE">330</field></block>
+      <block type="colour_hue"><mutation colour="20"></mutation><field name="HUE">20</field></block>
+      <block type="colour_hue"><mutation colour="65"></mutation><field name="HUE">65</field></block>
+      <block type="colour_hue"><mutation colour="120"></mutation><field name="HUE">120</field></block>
+      <block type="colour_hue"><mutation colour="160"></mutation><field name="HUE">160</field></block>
+      <block type="colour_hue"><mutation colour="210"></mutation><field name="HUE">210</field></block>
+      <block type="colour_hue"><mutation colour="230"></mutation><field name="HUE">230</field></block>
+      <block type="colour_hue"><mutation colour="260"></mutation><field name="HUE">260</field></block>
+      <block type="colour_hue"><mutation colour="290"></mutation><field name="HUE">290</field></block>
+      <block type="colour_hue"><mutation colour="330"></mutation><field name="HUE">330</field></block>
     </category>
   </xml>
 </body>