From 3a77a3d7ce1e8d554343d2e3a53c5d856a495f1e Mon Sep 17 00:00:00 2001 From: Neil Fraser Date: Tue, 18 Jun 2019 14:23:19 -0700 Subject: [PATCH] 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 | 16 +++++----- .../workspacefactory/wfactory_controller.js | 4 +++ .../workspacefactory/wfactory_init.js | 32 ++++++++++++------- 3 files changed, 33 insertions(+), 19 deletions(-) diff --git a/demos/blockfactory/standard_categories.js b/demos/blockfactory/standard_categories.js index 772f03608..089687ca3 100644 --- a/demos/blockfactory/standard_categories.js +++ b/demos/blockfactory/standard_categories.js @@ -52,7 +52,7 @@ StandardCategories.categoryMap['logic'].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 = '' + '' + ''); -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 = '' + '' + ''); -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 = '' + '' + ''); -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 = '' + '' + ''); -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 = '' + '' + ''); -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. diff --git a/demos/blockfactory/workspacefactory/wfactory_controller.js b/demos/blockfactory/workspacefactory/wfactory_controller.js index 72a7615a1..77e8ea6d8 100644 --- a/demos/blockfactory/workspacefactory/wfactory_controller.js +++ b/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(); diff --git a/demos/blockfactory/workspacefactory/wfactory_init.js b/demos/blockfactory/workspacefactory/wfactory_init.js index c4f137696..1ccd3206a 100644 --- a/demos/blockfactory/workspacefactory/wfactory_init.js +++ b/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');