diff --git a/core/renderers/common/constants.js b/core/renderers/common/constants.js index 68e4294ca..47d418da4 100644 --- a/core/renderers/common/constants.js +++ b/core/renderers/common/constants.js @@ -366,6 +366,14 @@ Blockly.blockRendering.ConstantProvider = function() { */ this.FIELD_CHECKBOX_DEFAULT_WIDTH = 15; + /** + * 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 + */ + this.randomIdentifier_ = String(Math.random()).substring(2); + /** * The ID of the emboss filter, or the empty string if no filter is set. * @type {string} @@ -879,10 +887,6 @@ Blockly.blockRendering.ConstantProvider.prototype.createDom = function(svg) { */ var defs = Blockly.utils.dom.createSvgElement('defs', {}, svg); - // Each filter/pattern needs a unique ID for the case of multiple Blockly - // instances on a page. Browser behaviour becomes undefined otherwise. - // https://neil.fraser.name/news/2015/11/01/ - var rnd = String(Math.random()).substring(2); /* @@ -898,7 +902,7 @@ Blockly.blockRendering.ConstantProvider.prototype.createDom = function(svg) { */ var embossFilter = Blockly.utils.dom.createSvgElement('filter', - {'id': 'blocklyEmbossFilter' + rnd}, 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', @@ -942,7 +946,7 @@ Blockly.blockRendering.ConstantProvider.prototype.createDom = function(svg) { */ var disabledPattern = Blockly.utils.dom.createSvgElement('pattern', { - 'id': 'blocklyDisabledPattern' + rnd, + 'id': 'blocklyDisabledPattern' + this.randomIdentifier_, 'patternUnits': 'userSpaceOnUse', 'width': 10, 'height': 10 @@ -955,13 +959,35 @@ Blockly.blockRendering.ConstantProvider.prototype.createDom = function(svg) { this.disabledPattern_ = disabledPattern; }; +/** + * Inject renderer specific CSS into the page. + * @param {string} name Name of the renderer. + * @package + */ +Blockly.blockRendering.ConstantProvider.prototype.injectCSS = function( + name) { + var cssArray = this.getCSS_(name); + var cssNodeId = 'blockly-renderer-style-' + name; + if (document.getElementById(cssNodeId)) { + // Already injected. + return; + } + var text = cssArray.join('\n'); + // Inject CSS tag at start of head. + var cssNode = document.createElement('style'); + cssNode.id = cssNodeId; + var cssTextNode = document.createTextNode(text); + cssNode.appendChild(cssTextNode); + document.head.insertBefore(cssNode, document.head.firstChild); +}; + /** * Get any renderer specific CSS to inject when the renderer is initialized. * @param {string} name Name of the renderer. * @return {!Array.} Array of CSS strings. - * @package + * @protected */ -Blockly.blockRendering.ConstantProvider.prototype.getCSS = function(name) { +Blockly.blockRendering.ConstantProvider.prototype.getCSS_ = function(name) { var selector = '.' + name + '-renderer'; return [ /* eslint-disable indent */ diff --git a/core/renderers/common/renderer.js b/core/renderers/common/renderer.js index 92c07083f..3ec261e2a 100644 --- a/core/renderers/common/renderer.js +++ b/core/renderers/common/renderer.js @@ -63,7 +63,6 @@ Blockly.blockRendering.Renderer = function(name) { Blockly.blockRendering.Renderer.prototype.init = function() { this.constants_ = this.makeConstants_(); this.constants_.init(); - this.injectCSS_(this.constants_.getCSS(this.name)); }; /** @@ -150,26 +149,6 @@ Blockly.blockRendering.Renderer.prototype.getConstants = function() { (this.constants_)); }; -/** - * Get any renderer specific CSS to inject when the renderer is initialized. - * @param {!Array.} cssArray Array of CSS strings. - * @private - */ -Blockly.blockRendering.Renderer.prototype.injectCSS_ = function(cssArray) { - var cssNodeId = 'blockly-renderer-style-' + this.name; - if (document.getElementById(cssNodeId)) { - // Already injected. - return; - } - var text = cssArray.join('\n'); - // Inject CSS tag at start of head. - var cssNode = document.createElement('style'); - cssNode.id = cssNodeId; - var cssTextNode = document.createTextNode(text); - cssNode.appendChild(cssTextNode); - document.head.insertBefore(cssNode, document.head.firstChild); -}; - /** * Determine whether or not to highlight a connection. * @param {Blockly.Connection} _conn The connection to determine whether or not diff --git a/core/renderers/zelos/constants.js b/core/renderers/zelos/constants.js index 67f6b18be..f797e59c4 100644 --- a/core/renderers/zelos/constants.js +++ b/core/renderers/zelos/constants.js @@ -622,15 +622,11 @@ Blockly.zelos.ConstantProvider.prototype.createDom = function(svg) { */ var defs = Blockly.utils.dom.createSvgElement('defs', {}, svg); - // Each filter/pattern needs a unique ID for the case of multiple Blockly - // instances on a page. Browser behaviour becomes undefined otherwise. - // https://neil.fraser.name/news/2015/11/01/ - var rnd = String(Math.random()).substring(2); // Using a dilate distorts the block shape. // Instead use a gaussian blur, and then set all alpha to 1 with a transfer. var highlightGlowFilter = Blockly.utils.dom.createSvgElement('filter', { - 'id': 'blocklyHighlightGlowFilter' + rnd, + 'id': 'blocklyHighlightGlowFilter' + this.randomIdentifier_, 'height': '160%', 'width': '180%', y: '-30%', @@ -672,7 +668,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' + rnd, + 'id': 'blocklyReplacementGlowFilter' + this.randomIdentifier_, 'height': '160%', 'width': '180%', y: '-30%', @@ -720,7 +716,7 @@ Blockly.zelos.ConstantProvider.prototype.createDom = function(svg) { /** * @override */ -Blockly.zelos.ConstantProvider.prototype.getCSS = function(name) { +Blockly.zelos.ConstantProvider.prototype.getCSS_ = function(name) { var selector = '.' + name + '-renderer'; return [ /* eslint-disable indent */ @@ -776,6 +772,11 @@ Blockly.zelos.ConstantProvider.prototype.getCSS = function(name) { selector + ' .blocklyHighlightedConnectionPath {', 'stroke: #fff200;', '}', + + // Disabled outline paths. + selector + ' .blocklyDisabled > .blocklyOutlinePath {', + 'fill: url(#blocklyDisabledPattern' + this.randomIdentifier_ + ')', + '}', /* eslint-enable indent */ ]; }; diff --git a/core/renderers/zelos/path_object.js b/core/renderers/zelos/path_object.js index 56d09cd72..56e7932d6 100644 --- a/core/renderers/zelos/path_object.js +++ b/core/renderers/zelos/path_object.js @@ -118,23 +118,6 @@ Blockly.zelos.PathObject.prototype.flipRTL = function() { } }; -/** - * @override - */ -Blockly.zelos.PathObject.prototype.updateDisabled_ = function( - disabled) { - Blockly.zelos.PathObject.superClass_.updateDisabled_.call(this, disabled); - for (var i = 0, keys = Object.keys(this.outlines_), - key; (key = keys[i]); i++) { - if (disabled) { - this.outlines_[key].setAttribute('fill', - 'url(#' + this.constants_.disabledPatternId + ')'); - } else { - this.outlines_[key].setAttribute('fill', this.style.colourTertiary); - } - } -}; - /** * @override */ @@ -229,6 +212,7 @@ Blockly.zelos.PathObject.prototype.endDrawing = function() { Blockly.zelos.PathObject.prototype.setOutlinePath = function(name, pathString) { var outline = this.getOutlinePath_(name); outline.setAttribute('d', pathString); + outline.setAttribute('fill', this.style.colourTertiary); }; /** diff --git a/core/workspace_svg.js b/core/workspace_svg.js index 17fcf2811..74f960750 100644 --- a/core/workspace_svg.js +++ b/core/workspace_svg.js @@ -744,7 +744,9 @@ Blockly.WorkspaceSvg.prototype.createDom = function(opt_backgroundClass) { this.markerManager_.registerMarker(Blockly.navigation.MARKER_NAME, new Blockly.Marker()); - this.getRenderer().getConstants().createDom(this.svgGroup_); + var constants = this.getRenderer().getConstants(); + constants.injectCSS(this.getRenderer().name); + constants.createDom(this.svgGroup_); return this.svgGroup_; }; diff --git a/tests/scripts/selenium-config.js b/tests/scripts/selenium-config.js index 2bf53ff96..3e4880888 100644 --- a/tests/scripts/selenium-config.js +++ b/tests/scripts/selenium-config.js @@ -9,7 +9,7 @@ module.exports = { chrome: { // check for more recent versions of chrome driver here: // https://chromedriver.storage.googleapis.com/index.html - version: '77.0.3865.40', + version: '79.0.3945.36', arch: process.arch, baseURL: 'https://chromedriver.storage.googleapis.com' },