diff --git a/core/block_svg.js b/core/block_svg.js index 98228c024..364e8808b 100644 --- a/core/block_svg.js +++ b/core/block_svg.js @@ -1322,7 +1322,7 @@ Blockly.BlockSvg.prototype.setStyle = function(blockStyleName) { if (blockStyle) { this.hat = blockStyle.hat; - this.pathObject.setFromStyle(blockStyle); + this.pathObject.setColourFromStyle(blockStyle); this.applyColour(); } else { throw Error('Invalid style name: ' + blockStyleName); diff --git a/core/renderers/common/i_path_object.js b/core/renderers/common/i_path_object.js new file mode 100644 index 000000000..4cbd940ac --- /dev/null +++ b/core/renderers/common/i_path_object.js @@ -0,0 +1,63 @@ +/** + * @license + * Copyright 2019 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/** + * @fileoverview The interface for an object that owns a block's rendering SVG + * elements. + * @author fenichel@google.com (Rachel Fenichel) + */ + +'use strict'; + +goog.provide('Blockly.blockRendering.IPathObject'); + + +/** + * An interface for a block's path object. + * @param {!SVGElement} _root The root SVG element. + * @interface + */ +Blockly.blockRendering.IPathObject = function(_root) {}; + +/** + * Apply the stored colours to the block's path, taking into account whether + * the paths belong to a shadow block. + * @param {boolean} isShadow True if the block is a shadow block. + * @package + */ +Blockly.blockRendering.IPathObject.prototype.applyColour; + +/** + * Update colour properties based on a single colour value. + * @param {number|string} colour HSV hue value (0 to 360), #RRGGBB string, + * or a message reference string pointing to one of those two values. + * @package + */ +Blockly.blockRendering.IPathObject.prototype.setColour; + +/** + * Update colour properties based on a block style. + * @param {!Blockly.Theme.BlockStyle} blockStyle The block style to use. + * @package + */ +Blockly.blockRendering.IPathObject.prototype.setColourFromStyle; + +/** + * Flip the SVG paths in RTL. + * @package + */ +Blockly.geras.PathObject.prototype.flipRTL; diff --git a/core/renderers/common/path_object.js b/core/renderers/common/path_object.js index 34d65733b..015e2af52 100644 --- a/core/renderers/common/path_object.js +++ b/core/renderers/common/path_object.js @@ -22,19 +22,12 @@ 'use strict'; -goog.provide('Blockly.blockRendering.IPathObject'); goog.provide('Blockly.blockRendering.PathObject'); +goog.require('Blockly.blockRendering.IPathObject'); goog.require('Blockly.utils.dom'); -/** - * An interface for a block's path object. - * @param {!SVGElement} _root The root SVG element. - * @interface - */ -Blockly.blockRendering.IPathObject = function(_root) {}; - /** * An object that handles creating and setting each of the SVG elements * used by the renderer. @@ -75,11 +68,26 @@ Blockly.blockRendering.PathObject = function(root) { {'class': 'blocklyPathDark', 'transform': 'translate(1,1)'}, this.svgRoot); + /** + * Primary colour of the block in '#RRGGBB' format. + * @type {string} + * @package + */ + this.primaryColour = '#000000'; - this.hue_; - this.primaryColour; - this.secondaryColour; - this.tertiaryColour; + /** + * Secondary colour of the block in '#RRGGBB' format. + * @type {string} + * @package + */ + this.secondaryColour = '#000000'; + + /** + * Tertiary colour of the block in '#RRGGBB' format. + * @type {string} + * @package + */ + this.tertiaryColour = '#000000'; }; /** @@ -125,9 +133,9 @@ Blockly.blockRendering.PathObject.prototype.applyColour = function(isShadow) { * generate it. * @param {string} tertiary The tertiary colour, or null to have the colourer * generate it. - * @package + * @protected */ -Blockly.blockRendering.PathObject.prototype.setColourFromTriplet = function( +Blockly.blockRendering.PathObject.prototype.setColourFromTriplet_ = function( primary, secondary, tertiary) { this.primaryColour = primary; this.secondaryColour = secondary || @@ -140,13 +148,11 @@ Blockly.blockRendering.PathObject.prototype.setColourFromTriplet = function( * Update colour properties based on a single colour value. * @param {number|string} colour HSV hue value (0 to 360), #RRGGBB string, * or a message reference string pointing to one of those two values. + * @package */ Blockly.blockRendering.PathObject.prototype.setColour = function(colour) { var parsed = Blockly.utils.colour.parseBlockColour(colour); - if (parsed.hue) { - this.hue_ = parsed.hue; - } - this.setColourFromTriplet(parsed.hex, null, null); + this.setColourFromTriplet_(parsed.hex, null, null); }; /** @@ -154,14 +160,11 @@ Blockly.blockRendering.PathObject.prototype.setColour = function(colour) { * @param {!Blockly.Theme.BlockStyle} blockStyle The block style to use. * @package */ -Blockly.blockRendering.PathObject.prototype.setFromStyle = function( +Blockly.blockRendering.PathObject.prototype.setColourFromStyle = function( blockStyle) { var parsed = Blockly.utils.colour.parseBlockColour(blockStyle['colourPrimary']); - if (parsed.hue) { - this.hue_ = parsed.hue; - } - this.setColourFromTriplet(parsed.hex, + this.setColourFromTriplet_(parsed.hex, blockStyle['colourSecondary'], blockStyle['colourTertiary']); }; diff --git a/core/renderers/geras/path_object.js b/core/renderers/geras/path_object.js index 5fafb4ff3..e1e90b51f 100644 --- a/core/renderers/geras/path_object.js +++ b/core/renderers/geras/path_object.js @@ -69,11 +69,35 @@ Blockly.geras.PathObject = function(root) { {'class': 'blocklyPathLight'}, this.svgRoot); - this.hue_; - this.primaryColour; - this.secondaryColour; - this.tertiaryColour; - this.darkColour; + /** + * Primary colour of the block in '#RRGGBB' format. + * @type {string} + * @package + */ + this.primaryColour = '#000000'; + + /** + * Secondary colour of the block in '#RRGGBB' format. + * Used for the body of a shadow block in Geras. + * @type {string} + * @package + */ + this.secondaryColour = '#000000'; + + /** + * Tertiary colour of the block in '#RRGGBB' format. + * Used for the light path (highlight) in Geras. + * @type {string} + * @package + */ + this.tertiaryColour = '#000000'; + + /** + * The colour of the dark path on the block in '#RRGGBB' format. + * @type {string} + * @package + */ + this.darkColour = '#000000'; }; Blockly.utils.object.inherits(Blockly.geras.PathObject, Blockly.blockRendering.PathObject); @@ -126,9 +150,9 @@ Blockly.geras.PathObject.prototype.applyColour = function(isShadow) { /** * @override */ -Blockly.geras.PathObject.prototype.setColourFromTriplet = function(primary, +Blockly.geras.PathObject.prototype.setColourFromTriplet_ = function(primary, secondary, tertiary) { - Blockly.geras.PathObject.superClass_.setColourFromTriplet.call(this, primary, + Blockly.geras.PathObject.superClass_.setColourFromTriplet_.call(this, primary, secondary, tertiary); this.darkColour = tertiary || Blockly.utils.colour.blend('#000', primary, 0.2);