Slight refactor of colour handling; add additional properties (#218)

* Add and render opacity of blocks

* Add insertion marker colour and opacity

* Add goog.require for Colours in block.js

* Add color of text field during editing

* Add colour overriding upon injection

* Add colours to CSS at run-time injection

* Expand colour variables to include toolbox, flyout, scrollbars

* Example of dark mode in horizontal_playground

* Fix loop style for colours

core/block.js

@@ -27,6 +27,7 @@
 goog.provide('Blockly.Block');
 
 goog.require('Blockly.Blocks');
+goog.require('Blockly.Colours');
 goog.require('Blockly.Comment');
 goog.require('Blockly.Connection');
 goog.require('Blockly.Input');
@@ -564,7 +565,8 @@ Blockly.Block.prototype.setInsertionMarker = function(insertionMarker) {
   }
   this.isInsertionMarker_ = insertionMarker;
   if (this.isInsertionMarker_) {
-    this.setColour("#949494");
+    this.setColour(Blockly.Colours.insertionMarker);
+    this.setOpacity(Blockly.Colours.insertionMarkerOpacity);
   }
 };
 

core/block_render_svg_horizontal.js

@@ -217,6 +217,9 @@ Blockly.BlockSvg.prototype.updateColour = function() {
   var fillColour = (this.isGlowing_) ? this.getColourSecondary() : this.getColour();
   this.svgPath_.setAttribute('fill', fillColour);
 
+  // Render opacity
+  this.svgPath_.setAttribute('fill-opacity', this.getOpacity());
+
   // Bump every dropdown to change its colour.
   for (var x = 0, input; input = this.inputList[x]; x++) {
     for (var y = 0, field; field = input.fieldRow[y]; y++) {

core/block_render_svg_vertical.js

@@ -170,6 +170,9 @@ Blockly.BlockSvg.prototype.updateColour = function() {
   }
   this.svgPath_.setAttribute('fill', hexColour);
 
+  // Render opacity
+  this.svgPath_.setAttribute('fill-opacity', this.getOpacity());
+
   // Render block stroke
   var colorShift = goog.color.darken(rgb, 0.1);
   var strokeColor = goog.color.rgbArrayToHex(colorShift);

core/block_svg.js

@@ -66,13 +66,23 @@ goog.inherits(Blockly.BlockSvg, Blockly.Block);
 
 /**
  * Height of this block, not including any statement blocks above or below.
+ * @type {number}
  */
 Blockly.BlockSvg.prototype.height = 0;
+
 /**
  * Width of this block, including any connected value blocks.
+ * @type {number}
  */
 Blockly.BlockSvg.prototype.width = 0;
 
+/**
+ * Opacity of this block between 0 and 1.
+ * @type {number}
+ * @private
+ */
+Blockly.BlockSvg.prototype.opacity_ = 1;
+
 /**
  * Original location of block being dragged.
  * @type {goog.math.Coordinate}
@@ -466,6 +476,25 @@ Blockly.BlockSvg.prototype.getBoundingRectangle = function() {
   return {topLeft: topLeft, bottomRight: bottomRight};
 };
 
+/**
+ * Set block opacity for SVG rendering.
+ * @param {number} opacity Intended opacity, betweeen 0 and 1
+ */
+Blockly.BlockSvg.prototype.setOpacity = function(opacity) {
+  this.opacity_ = opacity;
+  if (this.rendered) {
+    this.updateColour();
+  }
+};
+
+/**
+ * Get block opacity for SVG rendering.
+ * @return {number} Intended opacity, betweeen 0 and 1
+ */
+Blockly.BlockSvg.prototype.getOpacity = function() {
+  return this.opacity_;
+};
+
 /**
  * Set whether the block is collapsed or not.
  * @param {boolean} collapsed True if collapsed.

core/colours.js

@@ -3,6 +3,8 @@
 goog.provide('Blockly.Colours');
 
 Blockly.Colours = {
+  // SVG colours: these must be specificed in #RRGGBB style
+  // To add an opacity, this must be specified as a separate property (for SVG fill-opacity)
   "motion": {
     "primary": "#4C97FF",
     "secondary": "#4280D7",
@@ -30,5 +32,12 @@ Blockly.Colours = {
   },
   "text": "#575E75",
   "workspace": "#F5F8FF",
-  "textField": "#FFFFFF"
+  "toolbox": "#DDDDDD",
+  "toolboxText": "#000000",
+  "flyout": "#DDDDDD",
+  "scrollbar": "#CCCCCC",
+  "scrollbarHover": '#BBBBBB',
+  "textField": "#FFFFFF",
+  "insertionMarker": "#949494",
+  "insertionMarkerOpacity": 0.6
 };

core/css.js

@@ -87,6 +87,13 @@ Blockly.Css.inject = function(hasCss, pathToMedia) {
   // Strip off any trailing slash (either Unix or Windows).
   Blockly.Css.mediaPath_ = pathToMedia.replace(/[\\\/]$/, '');
   text = text.replace(/<<<PATH>>>/g, Blockly.Css.mediaPath_);
+  // Dynamically replace colours in the CSS text, in case they have
+  // been set at run-time injection.
+  for (var colourProperty in Blockly.Colours) {
+    if (Blockly.Colours.hasOwnProperty(colourProperty)) {
+      text = text.replace('$colour_' + colourProperty, Blockly.Colours[colourProperty]);
+    }
+  }
   // Inject CSS tag.
   var cssNode = document.createElement('style');
   document.head.appendChild(cssNode);
@@ -140,7 +147,7 @@ Blockly.Css.setCursor = function(cursor) {
  */
 Blockly.Css.CONTENT = [
   '.blocklySvg {',
-    'background-color: ' + Blockly.Colours.workspace + ';',
+    'background-color: $colour_workspace;',
     'outline: none;',
     'overflow: hidden;',  /* IE overflows by default. */
   '}',
@@ -261,7 +268,7 @@ Blockly.Css.CONTENT = [
 
   '.blocklyNonEditableText>text,',
   '.blocklyEditableText>text {',
-    'fill: ' +  Blockly.Colours.text + ';',
+    'fill: $colour_text;',
   '}',
 
   '.blocklyEditableText:hover>rect {',
@@ -270,7 +277,7 @@ Blockly.Css.CONTENT = [
   '}',
 
   '.blocklyBubbleText {',
-    'fill:' + Blockly.Colours.text +';',
+    'fill: $colour_text;',
   '}',
 
   /*
@@ -333,6 +340,7 @@ Blockly.Css.CONTENT = [
     'padding: 2px 0;',
     'width: 100%;',
     'text-align: center;',
+    'color: $colour_text;',
   '}',
 
   '.blocklyMainBackground {',
@@ -347,7 +355,7 @@ Blockly.Css.CONTENT = [
   '}',
 
   '.blocklyFlyoutBackground {',
-    'fill: #ddd;',
+    'fill: $colour_flyout;',
     'fill-opacity: .8;',
   '}',
 
@@ -356,12 +364,12 @@ Blockly.Css.CONTENT = [
   '}',
 
   '.blocklyScrollbarKnob {',
-    'fill: #ccc;',
+    'fill: $colour_scrollbar;',
   '}',
 
   '.blocklyScrollbarBackground:hover+.blocklyScrollbarKnob,',
   '.blocklyScrollbarKnob:hover {',
-    'fill: #bbb;',
+    'fill: $colour_scrollbarHover;',
   '}',
 
   '.blocklyZoom>image {',
@@ -430,7 +438,8 @@ Blockly.Css.CONTENT = [
 
   /* Category tree in Toolbox. */
   '.blocklyToolboxDiv {',
-    'background-color: #ddd;',
+    'background-color: $colour_toolbox;',
+    'color: $colour_toolboxText;',
     'overflow-x: visible;',
     'overflow-y: auto;',
     'position: absolute;',

core/options.js

@@ -25,6 +25,7 @@
 'use strict';
 
 goog.provide('Blockly.Options');
+goog.require('Blockly.Colours');
 
 
 /**
@@ -106,6 +107,19 @@ Blockly.Options = function(options) {
   var enableRealtime = !!options['realtime'];
   var realtimeOptions = enableRealtime ? options['realtimeOptions'] : undefined;
 
+  // Colour overrides provided by the injection
+  var colours = options['colours'];
+  if (colours) {
+    for (var colourProperty in colours) {
+      if (colours.hasOwnProperty(colourProperty) &&
+          Blockly.Colours.hasOwnProperty(colourProperty)) {
+        // If a property is in both colours option and Blockly.Colours,
+        // set the Blockly.Colours value to the override.
+        Blockly.Colours[colourProperty] = colours[colourProperty];
+      }
+    }
+  }
+
   this.RTL = !!options['rtl'];
   this.collapse = hasCollapse;
   this.comments = hasComments;

tests/horizontal_playground.html

@@ -37,6 +37,11 @@ function start() {
     trashcan: true,
     horizontalLayout: true,
     toolboxPosition: 'start',
+    grid: {spacing: 16,
+      length: 1,
+      colour: '#2C344A',
+      snap: false
+    },
     zoom: {
       controls: true,
       wheel: true,
@@ -45,6 +50,14 @@ function start() {
       minScale: 0.25,
       scaleSpeed: 1.1
     },
+    colours: {
+      workspace: '#334771',
+      flyout: '#283856',
+      scrollbar: '#24324D',
+      scrollbarHover: '#0C111A',
+      insertionMarker: '#FFFFFF',
+      insertionMarkerOpacity: 0.3,
+    }
   });
   // Restore previously displayed text.
   var text = sessionStorage.getItem('textarea');