Define colours of standard categories by hue.

Previously they were defined in hex.
This meant that saturation and value were hardcoded.
This also resulted in off-by-one errors (Math was hardcoded as #5C68A6, but is calculated as #5B67A5) which in turn resulted in the colour not being highlighted in the picker.

demos/blockfactory/standard_categories.js

@@ -52,7 +52,7 @@ StandardCategories.categoryMap['logic'].xml =
     '<block type="logic_null"></block>' +
     '<block type="logic_ternary"></block>' +
     '</xml>');
-StandardCategories.categoryMap['logic'].color ='#5C81A6';
+StandardCategories.categoryMap['logic'].hue = 210;
 
 StandardCategories.categoryMap['loops'] =
     new ListElement(ListElement.TYPE_CATEGORY, 'Loops');
@@ -87,7 +87,7 @@ StandardCategories.categoryMap['loops'].xml =
     '<block type="controls_forEach"></block>' +
     '<block type="controls_flow_statements"></block>' +
     '</xml>');
-StandardCategories.categoryMap['loops'].color = '#5CA65C';
+StandardCategories.categoryMap['loops'].hue = 120;
 
 StandardCategories.categoryMap['math'] =
     new ListElement(ListElement.TYPE_CATEGORY, 'Math');
@@ -180,7 +180,7 @@ StandardCategories.categoryMap['math'].xml =
     '</block>' +
     '<block type="math_random_float"></block>' +
     '</xml>');
-StandardCategories.categoryMap['math'].color = '#5C68A6';
+StandardCategories.categoryMap['math'].hue = 230;
 
 StandardCategories.categoryMap['text'] =
     new ListElement(ListElement.TYPE_CATEGORY, 'Text');
@@ -263,7 +263,7 @@ StandardCategories.categoryMap['text'].xml =
       '</value>' +
     '</block>' +
     '</xml>');
-StandardCategories.categoryMap['text'].color = '#5CA68D';
+StandardCategories.categoryMap['text'].hue = 160;
 
 StandardCategories.categoryMap['lists'] =
     new ListElement(ListElement.TYPE_CATEGORY, 'Lists');
@@ -320,7 +320,7 @@ StandardCategories.categoryMap['lists'].xml =
     '</block>' +
     '<block type="lists_sort"></block>' +
     '</xml>');
-StandardCategories.categoryMap['lists'].color = '#745CA6';
+StandardCategories.categoryMap['lists'].hue = 260;
 
 StandardCategories.categoryMap['colour'] =
     new ListElement(ListElement.TYPE_CATEGORY, 'Colour');
@@ -364,16 +364,16 @@ StandardCategories.categoryMap['colour'].xml =
       '</value>' +
     '</block>' +
     '</xml>');
-StandardCategories.categoryMap['colour'].color = '#A6745C';
+StandardCategories.categoryMap['colour'].hue = 20;
 
 StandardCategories.categoryMap['functions'] =
     new ListElement(ListElement.TYPE_CATEGORY, 'Functions');
-StandardCategories.categoryMap['functions'].color = '#9A5CA6'
+StandardCategories.categoryMap['functions'].hue = 290;
 StandardCategories.categoryMap['functions'].custom = 'PROCEDURE';
 
 StandardCategories.categoryMap['variables'] =
     new ListElement(ListElement.TYPE_CATEGORY, 'Variables');
-StandardCategories.categoryMap['variables'].color = '#A65C81';
+StandardCategories.categoryMap['variables'].hue = 330;
 StandardCategories.categoryMap['variables'].custom = 'VARIABLE';
 
 // All standard block types in provided in Blockly core.

demos/blockfactory/workspacefactory/wfactory_controller.js

@@ -602,6 +602,10 @@ WorkspaceFactoryController.prototype.loadCategoryByName = function(name) {
         + '. Rename your category and try again.');
     return;
   }
+  if (!standardCategory.color && standardCategory.hue !== undefined) {
+    // Calculate the hex colour based on the hue.
+    standardCategory.color = Blockly.hueToHex(standardCategory.hue);
+  }
   // Transfers current flyout blocks to a category if it's the first category
   // created.
   this.transferFlyoutBlocksToCategory();

demos/blockfactory/workspacefactory/wfactory_init.js

@@ -62,21 +62,30 @@ WorkspaceFactoryInit.initWorkspaceFactory = function(controller) {
  */
 WorkspaceFactoryInit.initColourPicker_ = function(controller) {
   // Array of Blockly category colours, consistent with the colour defaults.
-  var colours = [
-    [20, 65, 120],
-    [160, 210, 230],
-    [260, 290, '']
-  ];
+  var colours = [20, 65, 120, 160, 210, 230, 260, 290, 330, ''];
   // Convert hue numbers to RRGGBB strings.
-  for (var y = 0; y < colours.length; y++) {
-    for (var x = 0; x < colours[y].length; x++) {
-      if (colours[y][x] !== '') {
-        colours[y][x] = Blockly.hueToHex(colours[y][x]).substring(1);
-      }
+  for (var i = 0; i < colours.length; i++) {
+    if (colours[i] !== '') {
+      colours[i] = Blockly.hueToHex(colours[i]).substring(1);
     }
   }
+  // Convert to 2D array.
+  var maxCols = Math.ceil(Math.sqrt(colours.length));
+  var grid = [];
+  var row = [];
+  for (var i = 0; i < colours.length; i++) {
+    row.push(colours[i]);
+    if (row.length == maxCols) {
+      grid.push(row);
+      row = [];
+    }
+  }
+  if (row.length) {
+    grid.push(row);
+  }
+
   // Override the default colours.
-  cp_grid = colours;
+  cp_grid = grid;
 };
 
 /**
@@ -246,6 +255,7 @@ WorkspaceFactoryInit.assignWorkspaceFactoryClickHandlers_ =
         document.getElementById('categoryName').value = selected.name;
         document.getElementById('categoryColour').value = selected.color ?
             selected.color.substring(1).toLowerCase() : '';
+        console.log(document.getElementById('categoryColour').value);
         // Link the colour picker to the field.
         cp_init('categoryColour');
         blocklyFactory.openModal('dropdownDiv_editCategory');