CodingPirates/blockly
1
0
Fork 0
mirror of https://github.com/google/blockly.git synced 2026-01-09 01:50:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

Support passing renderer overrides in options (#3734)

Browse Source 
* Support passing in renderer options through workspace options.
This commit is contained in:
Sam El-Husseini
2020-03-10 18:36:29 -07:00
committed by GitHub
parent a9e10807ca
commit 13ac939b91
22 changed files with 176 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
core/renderers/common/block_rendering.js
View File

@@ -80,16 +80,17 @@ Blockly.blockRendering.stopDebugger = function() {
* Initialize anything needed for rendering (constants, etc).
* @param {!string} name Name of the renderer to initialize.
* @param {!Blockly.Theme} theme The workspace theme object.
* @param {Object=} opt_rendererOverrides Rendering constant overrides.
* @return {!Blockly.blockRendering.Renderer} The new instance of a renderer.
* Already initialized.
* @package
*/
Blockly.blockRendering.init = function(name, theme) {
Blockly.blockRendering.init = function(name, theme, opt_rendererOverrides) {
if (!Blockly.blockRendering.rendererMap_[name]) {
throw Error('Renderer not registered: ', name);
}
var renderer = (/** @type {!Blockly.blockRendering.Renderer} */ (
new Blockly.blockRendering.rendererMap_[name](name)));
renderer.init(theme);
renderer.init(theme, opt_rendererOverrides);
return renderer;
};

96
core/renderers/common/constants.js
View File

@@ -28,27 +28,6 @@ goog.requireType('Blockly.blockRendering.Debug');
*/
Blockly.blockRendering.ConstantProvider = function() {
/**
* A placeholder value for number constants that are dynamically set.
* @type {number}
* @protected
*/
this.DYNAMICALLY_SET_ = -1;
/**
* A placeholder value for string constants that are dynamically set.
* @type {string}
* @protected
*/
this.DYNAMICALLY_SET_STRING_ = '';
/**
* A placeholder value for boolean constants that are dynamically set.
* @type {boolean}
* @protected
*/
this.DYNAMICALLY_SET_BOOLEAN_ = false;
/**
* The size of an empty spacer.
* @type {number}
@@ -202,7 +181,7 @@ Blockly.blockRendering.ConstantProvider = function() {
* connections. Can be overridden by 'hat' property on Theme.BlockStyle.
* @type {boolean}
*/
this.ADD_START_HATS = this.DYNAMICALLY_SET_BOOLEAN_;
this.ADD_START_HATS = false;
/**
* Height of the top hat.
@@ -254,39 +233,36 @@ Blockly.blockRendering.ConstantProvider = function() {
this.JAGGED_TEETH_WIDTH = 6;
/**
* Point size of text. This constant is dynamically set in
* ``setFontConstants_`` to the size of the font used by the renderer/theme.
* Point size of text.
* @type {number}
*/
this.FIELD_TEXT_FONTSIZE = this.DYNAMICALLY_SET_;
this.FIELD_TEXT_FONTSIZE = 11;
/**
* Text font weight.
* @type {string}
*/
this.FIELD_TEXT_FONTWEIGHT = 'normal';
/**
* Text font family.
* @type {string}
*/
this.FIELD_TEXT_FONTFAMILY = 'sans-serif';
/**
* Height of text. This constant is dynamically set in ``setFontConstants_``
* to be the height of the text based on the font used.
* @type {number}
*/
this.FIELD_TEXT_HEIGHT = this.DYNAMICALLY_SET_;
this.FIELD_TEXT_HEIGHT = -1; // Dynamically set
/**
* Text baseline. This constant is dynamically set in ``setFontConstants_``
* to be the baseline of the text based on the font used.
* @type {number}
*/
this.FIELD_TEXT_BASELINE = this.DYNAMICALLY_SET_;
/**
* Text font weight. This constant is dynamically set in
* ``setFontConstants_`` to the weight of the font used by the renderer/theme.
* @type {string}
*/
this.FIELD_TEXT_FONTWEIGHT = this.DYNAMICALLY_SET_STRING_;
/**
* Text font family. This constant is dynamically set in
* ``setFontConstants_`` to the family of the font used by the renderer/theme.
* @type {string}
*/
this.FIELD_TEXT_FONTFAMILY = this.DYNAMICALLY_SET_STRING_;
this.FIELD_TEXT_BASELINE = -1; // Dynamically set
/**
* A field's border rect corner radius.
@@ -417,9 +393,9 @@ Blockly.blockRendering.ConstantProvider = function() {
* A random identifier used to ensure a unique ID is used for each
* filter/pattern for the case of multiple Blockly instances on a page.
* @type {string}
* @protected
* @package
*/
this.randomIdentifier_ = String(Math.random()).substring(2);
this.randomIdentifier = String(Math.random()).substring(2);
/**
* The ID of the emboss filter, or the empty string if no filter is set.
@@ -613,22 +589,8 @@ Blockly.blockRendering.ConstantProvider.prototype.setDynamicProperties_ =
/* eslint-disable indent */
this.setFontConstants_(theme);
this.ADD_START_HATS = theme.startHats != null ? theme.startHats : false;
}; /* eslint-enable indent */
/**
* Get an object representing the default font styles specified by the renderer.
* @return {!Blockly.Theme.FontStyle} A theme font style.
* @protected
*/
Blockly.blockRendering.ConstantProvider.prototype.getDefaultFontStyle_ =
function() {
/* eslint-disable indent */
return {
'weight': 'normal',
'size': 11,
'family': 'sans-serif'
};
this.ADD_START_HATS = theme.startHats != null ? theme.startHats :
this.ADD_START_HATS;
}; /* eslint-enable indent */
/**
@@ -638,17 +600,15 @@ Blockly.blockRendering.ConstantProvider.prototype.getDefaultFontStyle_ =
*/
Blockly.blockRendering.ConstantProvider.prototype.setFontConstants_ = function(
theme) {
var defaultFontStyle = this.getDefaultFontStyle_();
this.FIELD_TEXT_FONTFAMILY =
theme.fontStyle && theme.fontStyle['family'] != undefined ?
theme.fontStyle['family'] : defaultFontStyle['family'];
theme.fontStyle['family'] : this.FIELD_TEXT_FONTFAMILY;
this.FIELD_TEXT_FONTWEIGHT =
theme.fontStyle && theme.fontStyle['weight'] != undefined ?
theme.fontStyle['weight'] : defaultFontStyle['weight'];
theme.fontStyle['weight'] : this.FIELD_TEXT_FONTWEIGHT;
this.FIELD_TEXT_FONTSIZE =
theme.fontStyle && theme.fontStyle['size'] != undefined ?
theme.fontStyle['size'] : defaultFontStyle['size'];
theme.fontStyle['size'] : this.FIELD_TEXT_FONTSIZE;
var fontMetrics = Blockly.utils.dom.measureFontMetrics('Hg',
this.FIELD_TEXT_FONTSIZE + 'pt',
@@ -1039,7 +999,7 @@ Blockly.blockRendering.ConstantProvider.prototype.createDom = function(svg,
</filter>
*/
var embossFilter = Blockly.utils.dom.createSvgElement('filter',
{'id': 'blocklyEmbossFilter' + this.randomIdentifier_}, defs);
{'id': 'blocklyEmbossFilter' + this.randomIdentifier}, defs);
Blockly.utils.dom.createSvgElement('feGaussianBlur',
{'in': 'SourceAlpha', 'stdDeviation': 1, 'result': 'blur'}, embossFilter);
var feSpecularLighting = Blockly.utils.dom.createSvgElement('feSpecularLighting',
@@ -1083,7 +1043,7 @@ Blockly.blockRendering.ConstantProvider.prototype.createDom = function(svg,
*/
var disabledPattern = Blockly.utils.dom.createSvgElement('pattern',
{
'id': 'blocklyDisabledPattern' + this.randomIdentifier_,
'id': 'blocklyDisabledPattern' + this.randomIdentifier,
'patternUnits': 'userSpaceOnUse',
'width': 10,
'height': 10
@@ -1098,7 +1058,7 @@ Blockly.blockRendering.ConstantProvider.prototype.createDom = function(svg,
if (Blockly.blockRendering.Debug) {
var debugFilter = Blockly.utils.dom.createSvgElement('filter',
{
'id': 'blocklyDebugFilter' + this.randomIdentifier_,
'id': 'blocklyDebugFilter' + this.randomIdentifier,
'height': '160%',
'width': '180%',
y: '-30%',

8
core/renderers/common/path_object.js
View File

@@ -35,9 +35,9 @@ Blockly.blockRendering.PathObject = function(root, style, constants) {
/**
* The renderer's constant provider.
* @type {!Blockly.blockRendering.ConstantProvider}
* @protected
* @package
*/
this.constants_ = constants;
this.constants = constants;
this.svgRoot = root;
@@ -178,7 +178,7 @@ Blockly.blockRendering.PathObject.prototype.updateHighlighted = function(
enable) {
if (enable) {
this.svgPath.setAttribute('filter',
'url(#' + this.constants_.embossFilterId + ')');
'url(#' + this.constants.embossFilterId + ')');
} else {
this.svgPath.setAttribute('filter', 'none');
}
@@ -206,7 +206,7 @@ Blockly.blockRendering.PathObject.prototype.updateDisabled_ = function(
this.setClass_('blocklyDisabled', disabled);
if (disabled) {
this.svgPath.setAttribute('fill',
'url(#' + this.constants_.disabledPatternId + ')');
'url(#' + this.constants.disabledPatternId + ')');
}
};

31
core/renderers/common/renderer.js
View File

@@ -44,15 +44,28 @@ Blockly.blockRendering.Renderer = function(name) {
* @private
*/
this.constants_ = null;
/**
* Rendering constant overrides, passed in through options.
* @type {?Object}
* @package
*/
this.overrides = null;
};
/**
* Initialize the renderer.
* @param {!Blockly.Theme} theme The workspace theme object.
* @param {Object=} opt_rendererOverrides Rendering constant overrides.
* @package
*/
Blockly.blockRendering.Renderer.prototype.init = function(theme) {
Blockly.blockRendering.Renderer.prototype.init = function(theme,
opt_rendererOverrides) {
this.constants_ = this.makeConstants_();
if (opt_rendererOverrides) {
this.overrides = opt_rendererOverrides;
Blockly.utils.object.mixin(this.constants_, opt_rendererOverrides);
}
this.constants_.setTheme(theme);
this.constants_.init();
};
@@ -64,11 +77,17 @@ Blockly.blockRendering.Renderer.prototype.init = function(theme) {
* @package
*/
Blockly.blockRendering.Renderer.prototype.refresh = function(svg, theme) {
var constants = this.getConstants();
constants.dispose();
constants.setTheme(theme);
constants.init();
constants.createDom(svg, this.name);
var previousConstants = this.getConstants();
previousConstants.dispose();
this.constants_ = this.makeConstants_();
if (this.overrides) {
Blockly.utils.object.mixin(this.constants_, this.overrides);
}
// Ensure the constant provider's random identifier does not change.
this.constants_.randomIdentifier = previousConstants.randomIdentifier;
this.constants_.setTheme(theme);
this.constants_.init();
this.getConstants().createDom(svg, this.name);
};
/**

4
core/renderers/geras/path_object.js
View File

@@ -36,7 +36,7 @@ Blockly.geras.PathObject = function(root, style, constants) {
* The renderer's constant provider.
* @type {!Blockly.geras.ConstantProvider}
*/
this.constants_ = constants;
this.constants = constants;
this.svgRoot = root;
@@ -142,7 +142,7 @@ Blockly.geras.PathObject.prototype.setStyle = function(blockStyle) {
Blockly.geras.PathObject.prototype.updateHighlighted = function(highlighted) {
if (highlighted) {
this.svgPath.setAttribute('filter',
'url(#' + this.constants_.embossFilterId + ')');
'url(#' + this.constants.embossFilterId + ')');
this.svgPathLight.style.display = 'none';
} else {
this.svgPath.setAttribute('filter', 'none');

6
core/renderers/geras/renderer.js
View File

@@ -48,8 +48,10 @@ Blockly.utils.object.inherits(Blockly.geras.Renderer,
* @package
* @override
*/
Blockly.geras.Renderer.prototype.init = function(theme) {
Blockly.geras.Renderer.superClass_.init.call(this, theme);
Blockly.geras.Renderer.prototype.init = function(theme,
opt_rendererOverrides) {
Blockly.geras.Renderer.superClass_.init.call(this, theme,
opt_rendererOverrides);
this.highlightConstants_ = this.makeHighlightConstants_();
this.highlightConstants_.init();
};

34
core/renderers/zelos/constants.js
View File

@@ -234,6 +234,22 @@ Blockly.zelos.ConstantProvider = function() {
*/
this.FULL_BLOCK_FIELDS = true;
/**
* @override
*/
this.FIELD_TEXT_FONTSIZE = 3 * this.GRID_UNIT;
/**
* @override
*/
this.FIELD_TEXT_FONTWEIGHT = 'bold';
/**
* @override
*/
this.FIELD_TEXT_FONTFAMILY =
'"Helvetica Neue", "Segoe UI", Helvetica, sans-serif';
/**
* @override
*/
@@ -367,18 +383,6 @@ Blockly.zelos.ConstantProvider = function() {
Blockly.utils.object.inherits(Blockly.zelos.ConstantProvider,
Blockly.blockRendering.ConstantProvider);
/**
* @override
*/
Blockly.zelos.ConstantProvider.prototype.getDefaultFontStyle_ = function() {
var fontStyle =
Blockly.zelos.ConstantProvider.superClass_.getDefaultFontStyle_.call(this);
fontStyle['weight'] = 'bold';
fontStyle['size'] = 3 * this.GRID_UNIT;
fontStyle['family'] = '"Helvetica Neue", "Segoe UI", Helvetica, sans-serif';
return fontStyle;
};
/**
* @override
*/
@@ -807,7 +811,7 @@ Blockly.zelos.ConstantProvider.prototype.createDom = function(svg,
// Instead use a gaussian blur, and then set all alpha to 1 with a transfer.
var selectedGlowFilter = Blockly.utils.dom.createSvgElement('filter',
{
'id': 'blocklySelectedGlowFilter' + this.randomIdentifier_,
'id': 'blocklySelectedGlowFilter' + this.randomIdentifier,
'height': '160%',
'width': '180%',
y: '-30%',
@@ -849,7 +853,7 @@ Blockly.zelos.ConstantProvider.prototype.createDom = function(svg,
// Instead use a gaussian blur, and then set all alpha to 1 with a transfer.
var replacementGlowFilter = Blockly.utils.dom.createSvgElement('filter',
{
'id': 'blocklyReplacementGlowFilter' + this.randomIdentifier_,
'id': 'blocklyReplacementGlowFilter' + this.randomIdentifier,
'height': '160%',
'width': '180%',
y: '-30%',
@@ -960,7 +964,7 @@ Blockly.zelos.ConstantProvider.prototype.getCSS_ = function(name) {
// Disabled outline paths.
selector + ' .blocklyDisabled > .blocklyOutlinePath {',
'fill: url(#blocklyDisabledPattern' + this.randomIdentifier_ + ')',
'fill: url(#blocklyDisabledPattern' + this.randomIdentifier + ')',
'}',
/* eslint-enable indent */
];

8
core/renderers/zelos/path_object.js
View File

@@ -38,7 +38,7 @@ Blockly.zelos.PathObject = function(root, style, constants) {
* The renderer's constant provider.
* @type {!Blockly.zelos.ConstantProvider}
*/
this.constants_ = constants;
this.constants = constants;
/**
* The selected path of the block.
@@ -124,7 +124,7 @@ Blockly.zelos.PathObject.prototype.updateSelected = function(enable) {
/** @type {!SVGElement} */ (this.svgPath.cloneNode(true));
this.svgPathSelected_.setAttribute('fill', 'none');
this.svgPathSelected_.setAttribute('filter',
'url(#' + this.constants_.selectedGlowFilterId + ')');
'url(#' + this.constants.selectedGlowFilterId + ')');
this.svgRoot.appendChild(this.svgPathSelected_);
}
} else {
@@ -143,7 +143,7 @@ Blockly.zelos.PathObject.prototype.updateReplacementFade = function(
this.setClass_('blocklyReplaceable', enable);
if (enable) {
this.svgPath.setAttribute('filter',
'url(#' + this.constants_.replacementGlowFilterId + ')');
'url(#' + this.constants.replacementGlowFilterId + ')');
} else {
this.svgPath.removeAttribute('filter');
}
@@ -161,7 +161,7 @@ Blockly.zelos.PathObject.prototype.updateShapeForInputHighlight = function(
}
if (enable) {
outlinePath.setAttribute('filter',
'url(#' + this.constants_.replacementGlowFilterId + ')');
'url(#' + this.constants.replacementGlowFilterId + ')');
} else {
outlinePath.removeAttribute('filter');
}