Move blockStyles into constants (google#3485)

* Move blockStyles into constants.

core/block_svg.js

@@ -68,14 +68,15 @@ Blockly.BlockSvg = function(workspace, prototypeName, opt_id) {
    * A block style object.
    * @type {!Blockly.Theme.BlockStyle}
    */
-  this.style = workspace.getTheme().getBlockStyle(null);
+  this.style = workspace.getRenderer().getConstants().getBlockStyle(null);
 
   /**
    * The renderer's path object.
    * @type {Blockly.blockRendering.IPathObject}
    * @package
    */
-  this.pathObject = workspace.getRenderer().makePathObject(this.svgGroup_);
+  this.pathObject = workspace.getRenderer().makePathObject(
+      this.svgGroup_, this.style);
 
   /** @type {boolean} */
   this.rendered = false;
@@ -1219,7 +1220,8 @@ Blockly.BlockSvg.prototype.getColour = function() {
  */
 Blockly.BlockSvg.prototype.setColour = function(colour) {
   Blockly.BlockSvg.superClass_.setColour.call(this, colour);
-  var styleObj = this.workspace.getTheme().getBlockStyleForColour(this.colour_);
+  var styleObj = this.workspace.getRenderer().getConstants()
+      .getBlockStyleForColour(this.colour_);
 
   this.pathObject.setStyle(styleObj.style);
   this.style = styleObj.style;
@@ -1234,7 +1236,8 @@ Blockly.BlockSvg.prototype.setColour = function(colour) {
  * @throws {Error} if the block style does not exist.
  */
 Blockly.BlockSvg.prototype.setStyle = function(blockStyleName) {
-  var blockStyle = this.workspace.getTheme().getBlockStyle(blockStyleName);
+  var blockStyle = this.workspace.getRenderer()
+      .getConstants().getBlockStyle(blockStyleName);
   this.styleName_ = blockStyleName;
 
   if (blockStyle) {

core/renderers/common/constants.js

@@ -23,6 +23,8 @@
 
 goog.provide('Blockly.blockRendering.ConstantProvider');
 
+goog.require('Blockly.utils');
+goog.require('Blockly.utils.colour');
 goog.require('Blockly.utils.dom');
 goog.require('Blockly.utils.svgPaths');
 goog.require('Blockly.utils.userAgent');
@@ -481,6 +483,134 @@ Blockly.blockRendering.ConstantProvider.prototype.init = function() {
   this.OUTSIDE_CORNERS = this.makeOutsideCorners();
 };
 
+/**
+ * Refresh constants properties that depend on the theme.
+ * @param {!Blockly.Theme} theme The current workspace theme.
+ * @package
+ */
+Blockly.blockRendering.ConstantProvider.prototype.refreshTheme = function(
+    theme) {
+
+  /**
+   * The block styles map.
+   * @type {Object.<string, Blockly.Theme.BlockStyle>}
+   * @package
+   */
+  this.blockStyles = {};
+
+  var blockStyles = theme.blockStyles;
+  for (var key in blockStyles) {
+    this.blockStyles[key] = this.validatedBlockStyle_(blockStyles[key]);
+  }
+};
+
+/**
+ * Get or create a block style based on a single colour value.  Generate a name
+ * for the style based on the colour.
+ * @param {string} colour #RRGGBB colour string.
+ * @return {{style: !Blockly.Theme.BlockStyle, name: string}} An object
+ *     containing the style and an autogenerated name for that style.
+ * @package
+ */
+Blockly.blockRendering.ConstantProvider.prototype.getBlockStyleForColour =
+    function(colour) {
+    /* eslint-disable indent */
+  var name = 'auto_' + colour;
+  if (!this.blockStyles[name]) {
+    this.blockStyles[name] = this.createBlockStyle_(colour);
+  }
+  return {style: this.blockStyles[name], name: name};
+}; /* eslint-enable indent */
+
+/**
+ * Gets the BlockStyle for the given block style name.
+ * @param {?string} blockStyleName The name of the block style.
+ * @return {!Blockly.Theme.BlockStyle} The named block style, or a default style
+ *     if no style with the given name was found.
+ */
+Blockly.blockRendering.ConstantProvider.prototype.getBlockStyle = function(
+    blockStyleName) {
+  return this.blockStyles[blockStyleName || ''] ||
+      this.createBlockStyle_('#000000');
+};
+
+/**
+ * Create a block style object based on the given colour.
+ * @param {string} colour #RRGGBB colour string.
+ * @return {!Blockly.Theme.BlockStyle} A populated block style based on the
+ *     given colour.
+ * @protected
+ */
+Blockly.blockRendering.ConstantProvider.prototype.createBlockStyle_ = function(
+    colour) {
+  return this.validatedBlockStyle_({
+    colourPrimary: colour
+  });
+};
+
+/**
+ * Get a full block style object based on the input style object.  Populate
+ * any missing values.
+ * @param {{
+ *     colourPrimary:string,
+ *     colourSecondary:(string|undefined),
+ *     colourTertiary:(string|undefined),
+ *     hat:(string|undefined)
+ * }} blockStyle A full or partial block style object.
+
+ * @return {!Blockly.Theme.BlockStyle} A full block style object, with all
+ *     required properties populated.
+ * @protected
+ */
+Blockly.blockRendering.ConstantProvider.prototype.validatedBlockStyle_ =
+    function(blockStyle) {
+    /* eslint-disable indent */
+  // Make a new object with all of the same properties.
+  var valid = /** @type {!Blockly.Theme.BlockStyle} */ ({});
+  if (blockStyle) {
+    Blockly.utils.object.mixin(valid, blockStyle);
+  }
+
+  // Validate required properties.
+  var parsedColour = Blockly.utils.parseBlockColour(
+      valid['colourPrimary'] || '#000');
+  valid.colourPrimary = parsedColour.hex;
+  valid.colourSecondary = valid['colourSecondary'] ?
+      Blockly.utils.parseBlockColour(valid['colourSecondary']).hex :
+      this.generateSecondaryColour_(valid.colourPrimary);
+  valid.colourTertiary = valid.colourTertiary ?
+      Blockly.utils.parseBlockColour(valid['colourTertiary']).hex :
+      this.generateTertiaryColour_(valid.colourPrimary);
+
+  valid.hat = valid['hat'] || '';
+  return valid;
+}; /* eslint-enable indent */
+
+/**
+ * Generate a secondary colour from the passed in primary colour.
+ * @param {string} colour Primary colour.
+ * @return {string} The generated secondary colour.
+ * @protected
+ */
+Blockly.blockRendering.ConstantProvider.prototype.generateSecondaryColour_ =
+    function(colour) {
+    /* eslint-disable indent */
+  return Blockly.utils.colour.blend('#fff', colour, 0.6) || colour;
+}; /* eslint-enable indent */
+
+/**
+ * Generate a tertiary colour from the passed in primary colour.
+ * @param {string} colour Primary colour.
+ * @return {string} The generated tertiary colour.
+ * @protected
+ */
+Blockly.blockRendering.ConstantProvider.prototype.generateTertiaryColour_ =
+    function(colour) {
+    /* eslint-disable indent */
+  return Blockly.utils.colour.blend('#fff', colour, 0.3) || colour;
+}; /* eslint-enable indent */
+
+
 /**
  * Dispose of this constants provider.
  * Delete all DOM elements that this provider created.

core/renderers/common/path_object.js

@@ -34,13 +34,15 @@ goog.require('Blockly.utils.dom');
  * An object that handles creating and setting each of the SVG elements
  * used by the renderer.
  * @param {!SVGElement} root The root SVG element.
+ * @param {!Blockly.Theme.BlockStyle} style The style object to use for
+ *     colouring.
  * @param {!Blockly.blockRendering.ConstantProvider} constants The renderer's
  *     constants.
  * @constructor
  * @implements {Blockly.blockRendering.IPathObject}
  * @package
  */
-Blockly.blockRendering.PathObject = function(root, constants) {
+Blockly.blockRendering.PathObject = function(root, style, constants) {
   /**
    * The renderer's constant provider.
    * @type {!Blockly.blockRendering.ConstantProvider}
@@ -63,7 +65,7 @@ Blockly.blockRendering.PathObject = function(root, constants) {
    * @type {!Blockly.Theme.BlockStyle}
    * @package
    */
-  this.style = Blockly.Theme.createBlockStyle('#000000');
+  this.style = style;
 
   /**
    * Holds the cursors svg element when the cursor is attached to the block.

core/renderers/common/renderer.js

@@ -126,11 +126,14 @@ Blockly.blockRendering.Renderer.prototype.makeMarkerDrawer = function(
 /**
  * Create a new instance of a renderer path object.
  * @param {!SVGElement} root The root SVG element.
+ * @param {!Blockly.Theme.BlockStyle} style The style object to use for
+ *     colouring.
  * @return {!Blockly.blockRendering.IPathObject} The renderer path object.
  * @package
  */
-Blockly.blockRendering.Renderer.prototype.makePathObject = function(root) {
-  return new Blockly.blockRendering.PathObject(root,
+Blockly.blockRendering.Renderer.prototype.makePathObject = function(root,
+    style) {
+  return new Blockly.blockRendering.PathObject(root, style,
       /** @type {!Blockly.blockRendering.ConstantProvider} */ (this.constants_));
 
 };

core/renderers/geras/path_object.js

@@ -35,12 +35,14 @@ goog.require('Blockly.utils.object');
  * An object that handles creating and setting each of the SVG elements
  * used by the renderer.
  * @param {!SVGElement} root The root SVG element.
+ * @param {!Blockly.Theme.BlockStyle} style The style object to use for
+ *     colouring.
  * @param {!Blockly.geras.ConstantProvider} constants The renderer's constants.
  * @constructor
  * @extends {Blockly.blockRendering.PathObject}
  * @package
  */
-Blockly.geras.PathObject = function(root, constants) {
+Blockly.geras.PathObject = function(root, style, constants) {
   /**
    * The renderer's constant provider.
    * @type {!Blockly.geras.ConstantProvider}
@@ -89,7 +91,7 @@ Blockly.geras.PathObject = function(root, constants) {
    * @type {!Blockly.Theme.BlockStyle}
    * @package
    */
-  this.style = Blockly.Theme.createBlockStyle('#000000');
+  this.style = style;
 };
 Blockly.utils.object.inherits(Blockly.geras.PathObject,
     Blockly.blockRendering.PathObject);

core/renderers/geras/renderer.js

@@ -99,12 +99,14 @@ Blockly.geras.Renderer.prototype.makeDrawer_ = function(block, info) {
 /**
  * Create a new instance of a renderer path object.
  * @param {!SVGElement} root The root SVG element.
+ * @param {!Blockly.Theme.BlockStyle} style The style object to use for
+ *     colouring.
  * @return {!Blockly.geras.PathObject} The renderer path object.
  * @package
  * @override
  */
-Blockly.geras.Renderer.prototype.makePathObject = function(root) {
-  return new Blockly.geras.PathObject(root,
+Blockly.geras.Renderer.prototype.makePathObject = function(root, style) {
+  return new Blockly.geras.PathObject(root, style,
       /** @type {!Blockly.geras.ConstantProvider} */ (this.getConstants()));
 };
 

core/renderers/zelos/constants.js

@@ -536,6 +536,22 @@ Blockly.zelos.ConstantProvider.prototype.makeInsideCorners = function() {
   };
 };
 
+/**
+ * @override
+ */
+Blockly.zelos.ConstantProvider.prototype.generateSecondaryColour_ = function(
+    colour) {
+  return Blockly.utils.colour.blend('#000', colour, 0.15) || colour;
+};
+
+/**
+ * @override
+ */
+Blockly.zelos.ConstantProvider.prototype.generateTertiaryColour_ = function(
+    colour) {
+  return Blockly.utils.colour.blend('#000', colour, 0.25) || colour;
+};
+
 /**
  * @override
  */

core/renderers/zelos/path_object.js

@@ -34,13 +34,16 @@ goog.require('Blockly.utils.object');
  * An object that handles creating and setting each of the SVG elements
  * used by the renderer.
  * @param {!SVGElement} root The root SVG element.
+ * @param {!Blockly.Theme.BlockStyle} style The style object to use for
+ *     colouring.
  * @param {!Blockly.zelos.ConstantProvider} constants The renderer's constants.
  * @constructor
  * @extends {Blockly.blockRendering.PathObject}
  * @package
  */
-Blockly.zelos.PathObject = function(root, constants) {
-  Blockly.zelos.PathObject.superClass_.constructor.call(this, root, constants);
+Blockly.zelos.PathObject = function(root, style, constants) {
+  Blockly.zelos.PathObject.superClass_.constructor.call(this, root, style,
+      constants);
 
   /**
    * The renderer's constant provider.

core/renderers/zelos/renderer.js

@@ -98,12 +98,14 @@ Blockly.zelos.Renderer.prototype.makeMarkerDrawer = function(
 /**
  * Create a new instance of a renderer path object.
  * @param {!SVGElement} root The root SVG element.
+ * @param {!Blockly.Theme.BlockStyle} style The style object to use for
+ *     colouring.
  * @return {!Blockly.zelos.PathObject} The renderer path object.
  * @package
  * @override
  */
-Blockly.zelos.Renderer.prototype.makePathObject = function(root) {
-  return new Blockly.zelos.PathObject(root,
+Blockly.zelos.Renderer.prototype.makePathObject = function(root, style) {
+  return new Blockly.zelos.PathObject(root, style,
       /** @type {!Blockly.zelos.ConstantProvider} */ (this.getConstants()));
 };