Initial commit for adding a style

core/block.js

@@ -152,6 +152,7 @@ Blockly.Block = function(workspace, prototypeName, opt_id) {
    */
   this.isInsertionMarker_ = false;
 
+
   // Copy the type-specific functions and data from the prototype.
   if (prototypeName) {
     /** @type {string} */
@@ -216,6 +217,13 @@ Blockly.Block.obtain = function(workspace, prototypeName) {
  */
 Blockly.Block.prototype.data = null;
 
+/**
+ * Colour of the block as HSV hue value (0-360)
+ * @type {?number}
+ * @private
+  */
+Blockly.Block.prototype.hue_ = null;
+
 /**
  * Colour of the block in '#RRGGBB' format.
  * @type {string}
@@ -224,11 +232,35 @@ Blockly.Block.prototype.data = null;
 Blockly.Block.prototype.colour_ = '#000000';
 
 /**
- * Colour of the block as HSV hue value (0-360)
- * @type {?number}
+ * Secondary color of the block.
+ * Color if the block is a shadow.
+ * @type {string}
  * @private
-  */
-Blockly.Block.prototype.hue_ = null;
+ */
+Blockly.Block.prototype.secondaryColour_ = null;
+
+/**
+ * Tertiary color of the block.
+ * Color of the border on the block.
+ * @type {string}
+ * @private
+ */
+Blockly.Block.prototype.tertiaryColour_ = null;
+
+/**
+ * Style of the block.
+ * @type {Object} Map from style name (string) to style value (string)
+ * @private
+ */
+Blockly.Block.prototype.style_ = null;
+
+/**
+ * Name of the block style.
+ * @type {string}
+ * @private
+ */
+Blockly.Block.prototype.styleName_ = null;
+
 
 /**
  * Dispose of this block.
@@ -824,6 +856,38 @@ Blockly.Block.prototype.getColour = function() {
   return this.colour_;
 };
 
+/**
+ * Get the secondary colour of a block.
+ * @return {string} #RRGGBB string.
+ */
+Blockly.Block.prototype.getSecondaryColour = function() {
+  return this.secondaryColour_;
+};
+
+/**
+ * Get the tertiary colour of a block.
+ * @return {string} #RRGGBB string.
+ */
+Blockly.Block.prototype.getTertiaryColour = function() {
+  return this.tertiaryColour_;
+};
+
+/**
+ * Get the style of a block.
+ * @return {Object} Map of style names (string) to style value (string).
+ */
+Blockly.Block.prototype.getStyle = function() {
+  return this.style_;
+};
+
+/**
+ * Get the name of the block style.
+ * @return {string} Name of the block style.
+ */
+Blockly.Block.prototype.getStyleName = function() {
+  return this.styleName_;
+};
+
 /**
  * Get the HSV hue value of a block. Null if hue not set.
  * @return {?number} Hue value (0-360)
@@ -832,6 +896,10 @@ Blockly.Block.prototype.getHue = function() {
   return this.hue_;
 };
 
+
+
+
+
 /**
  * Change the colour of a block.
  * @param {number|string} colour HSV hue value (0 to 360), #RRGGBB string,
@@ -859,6 +927,28 @@ Blockly.Block.prototype.setColour = function(colour) {
   }
 };
 
+/**
+ * Set the style and color values of a block.
+ * @param {string} blockStyleName Name of the block style
+ * @throws {Error} if the block style does not exist.
+ */
+Blockly.Block.prototype.setStyle = function(blockStyleName) {
+  if (blockStyleName) {
+    var blockStyle = Blockly.getStyle().getBlockStyle(blockStyleName);
+
+    if (blockStyle) {
+      this.style_ = blockStyle;
+      this.colour_ = blockStyle.primaryColour;
+      this.secondaryColour_ = blockStyle.secondaryColour;
+      this.tertiaryColour_ = blockStyle.tertiaryColour;
+    }
+    else {
+      var errorMsg = 'Invalid style name: ' + blockStyleName;
+      throw errorMsg;
+    }
+  }
+};
+
 /**
  * Sets a callback function to use whenever the block's parent workspace
  * changes, replacing any prior onchange handler. This is usually only called
@@ -1264,7 +1354,13 @@ Blockly.Block.prototype.jsonInit = function(json) {
   }
 
   // Set basic properties of block.
-  this.jsonInitColour_(json, warningPrefix);
+  if (json['style'] && json['colour']) {
+    throw Error(warningPrefix + 'Must not have both a colour and a style.');
+  } else if (json['style']){
+    this.jsonInitStyle_(json, warningPrefix);
+  } else {
+    this.jsonInitColour_(json, warningPrefix);
+  }
 
   // Interpolate the message blocks.
   var i = 0;
@@ -1344,6 +1440,23 @@ Blockly.Block.prototype.jsonInitColour_ = function(json, warningPrefix) {
   }
 };
 
+/**
+ * Initialize the style of this block from the JSON description.
+ * @param {!Object} json Structured data describing the block.
+ * @param {string} warningPrefix Warning prefix string identifying block.
+ * @private
+ */
+Blockly.Block.prototype.jsonInitStyle_ = function(json, warningPrefix) {
+  var blockStyleName = json['style'];
+  try {
+    this.styleName_ = blockStyleName;
+    this.setStyle(blockStyleName);
+  } catch (colorError) {
+    console.warn(warningPrefix + 'Style does not exist: ', blockStyleName);
+  }
+};
+
+
 /**
  * Add key/values from mixinObj to this block object. By default, this method
  * will check that the keys in mixinObj will not overwrite existing values in

core/block_svg.js

@@ -894,18 +894,14 @@ Blockly.BlockSvg.prototype.updateColour = function() {
     return;
   }
   var hexColour = this.getColour();
+  var secondaryColour = this.getSecondaryColour();
+  var tertiaryColour = this.getTertiaryColour();
   var rgb = goog.color.hexToRgb(hexColour);
+
   if (this.isShadow()) {
-    rgb = goog.color.lighten(rgb, 0.6);
-    hexColour = goog.color.rgbArrayToHex(rgb);
-    this.svgPathLight_.style.display = 'none';
-    this.svgPathDark_.setAttribute('fill', hexColour);
+    hexColour = this.setShadowColour_(rgb, hexColour, secondaryColour);
   } else {
-    this.svgPathLight_.style.display = '';
-    var hexLight = goog.color.rgbArrayToHex(goog.color.lighten(rgb, 0.3));
-    var hexDark = goog.color.rgbArrayToHex(goog.color.darken(rgb, 0.2));
-    this.svgPathLight_.setAttribute('stroke', hexLight);
-    this.svgPathDark_.setAttribute('fill', hexDark);
+    this.setBorderColour_(rgb, tertiaryColour);
   }
   this.svgPath_.setAttribute('fill', hexColour);
 
@@ -923,6 +919,46 @@ Blockly.BlockSvg.prototype.updateColour = function() {
   }
 };
 
+/**
+ * Sets the colour of the border.
+ * Removes the light and dark paths if a tertiary colour is defined.
+ * @param {string} rgb Colour of the block.
+ * @param {string} tertiaryColour Colour of the border.
+ */
+Blockly.BlockSvg.prototype.setBorderColour_ = function(rgb, tertiaryColour) {
+  if (tertiaryColour) {
+    this.svgPathLight_.setAttribute('stroke', 'none');
+    this.svgPathDark_.setAttribute('fill', 'none');
+    this.svgPath_.setAttribute('stroke', tertiaryColour);
+  } else {
+    this.svgPathLight_.style.display = '';
+    var hexLight = goog.color.rgbArrayToHex(goog.color.lighten(rgb, 0.3));
+    var hexDark = goog.color.rgbArrayToHex(goog.color.darken(rgb, 0.2));
+    this.svgPathLight_.setAttribute('stroke', hexLight);
+    this.svgPathDark_.setAttribute('fill', hexDark);
+  }
+};
+
+/**
+ * Sets the colour of shadow blocks.
+ * @param {string} hexColour Primary colour of the block.
+ * @param {string} rgb Primary colour of the block.
+ * @param {string} secondaryColour Colour for shadow block.
+ */
+
+Blockly.BlockSvg.prototype.setShadowColour_ = function(
+    rgb, hexColour, secondaryColour) {
+  if (secondaryColour) {
+    this.svgPathLight_.style.display = 'none';
+    this.svgPathDark_.setAttribute('fill', secondaryColour);
+  } else {
+    rgb = goog.color.lighten(rgb, 0.6);
+    hexColour = goog.color.rgbArrayToHex(rgb);
+    this.svgPathLight_.style.display = 'none';
+    this.svgPathDark_.setAttribute('fill', hexColour);
+  }
+  return hexColour;
+};
 /**
  * Enable or disable a block.
  */

core/blockly.js

@@ -112,6 +112,13 @@ Blockly.clipboardTypeCounts_ = null;
  */
 Blockly.cache3dSupported_ = null;
 
+/**
+ * Holds all styles for blocks and .
+ * @type {Blockly.Style}
+ * @private
+ */
+Blockly.style_ = null;
+
 /**
  * Convert a hue (HSV model) into an RGB hex triplet.
  * @param {number} hue Hue on a colour wheel (0-360).
@@ -667,6 +674,36 @@ Blockly.checkBlockColourConstant_ = function(
   }
 };
 
+
+/**
+ * Sets the style for blockly and refreshes all blocks in toolbox and workspace.
+ * @param {Blockly.Style} style Style for blockly.
+ */
+Blockly.setStyle = function(style){
+  this.style_ = style;
+  var workspace = Blockly.getMainWorkspace();
+  var blocks = workspace.getAllBlocks();
+
+  workspace.refreshToolboxSelection();
+  for (var i = 0; i < blocks.length; i++) {
+    var block = blocks[i];
+    block.setStyle(block.getStyleName());
+    block.updateColour();
+  }
+
+  var event = new Blockly.Events.Ui(null, 'styleChanged');
+  event.workspaceId = workspace.id;
+  Blockly.Events.fire(event);
+};
+
+/**
+ * Gets the style for blockly.
+ * @return {Blockly.Style} style Style for blockly.
+ */
+Blockly.getStyle = function(){
+  return this.style_;
+};
+
 // IE9 does not have a console.  Create a stub to stop errors.
 if (!goog.global['console']) {
   goog.global['console'] = {

core/style.js

@@ -0,0 +1,53 @@
+'use strict';
+
+goog.provide('Blockly.Style');
+/**
+ * Class for a style.
+ * @param {Object.<string, Blockly.BlockStyle>} blockStyles A map from style
+ * names (strings) to Blockly.BlockStyle objects.
+ * @constructor
+ */
+Blockly.Style = function(blockStyles) {
+  this.blockStyles_ = blockStyles;
+};
+
+/**
+ * Overrides or adds all values from blockStyles to blockStyles_
+ * @param {Object.<string, Blockly.BlockStyle>} blockStyles List of a
+ * block styles.
+ */
+Blockly.Style.prototype.setAllBlockStyles = function(blockStyles) {
+  var event = new Blockly.Events.Ui(null, 'blockStylesChanged', this.blockStyles_, blockStyles);
+  for (var key in blockStyles) {
+    this.setBlockStyle(key, blockStyles[key]);
+  }
+  Blockly.Events.fire(event);
+};
+
+/**
+ * Gets a list of all the block style names.
+ * @return{Array.<String>} styleName List of blockstyle names.
+ */
+Blockly.Style.prototype.getAllBlockStyles = function() {
+  return this.blockStyles_;
+};
+
+/**
+ * Returns the BlockStyle for the given key.
+ * @param{String} key The name of the block style.
+ * @return {Blockly.Style} The style corresponding to the key???? <-- REDO
+ */
+Blockly.Style.prototype.getBlockStyle = function(key) {
+  return this.blockStyles_[key];
+};
+
+/**
+ * Overrides or adds a style to the blockStyles map.
+ * @param{String} key The name of the block style.
+ * @param{Blockly.BlockStyle} blockStyle The block style
+*/
+Blockly.Style.prototype.setBlockStyle = function(key, blockStyle){
+  var event = new Blockly.Events.Ui(null, 'blockStyleChanged', this.blockStyles_[key], blockStyle);
+  this.blockStyles_[key] = blockStyle;
+  Blockly.Events.fire(event);
+};