From 46f323971a8000c4fa9a5f0186c6d22ae387a51e Mon Sep 17 00:00:00 2001 From: Rachel Fenichel Date: Fri, 1 Nov 2019 13:32:17 -0700 Subject: [PATCH] Move filter and pattern creation from inject into constants. --- core/block_svg.js | 6 ++- core/inject.js | 67 ----------------------- core/renderers/common/constants.js | 86 ++++++++++++++++++++++++++++++ core/workspace_svg.js | 1 + 4 files changed, 91 insertions(+), 69 deletions(-) diff --git a/core/block_svg.js b/core/block_svg.js index d568207fd..4c5902ed5 100644 --- a/core/block_svg.js +++ b/core/block_svg.js @@ -1061,7 +1061,8 @@ Blockly.BlockSvg.prototype.updateDisabled = function() { /** @type {!Element} */ (this.svgGroup_), 'blocklyDisabled'); if (added) { this.svgPath_.setAttribute('fill', - 'url(#' + this.workspace.options.disabledPatternId + ')'); + 'url(#' + + this.workspace.getRenderer().getConstants().disabledPatternId + ')'); } } else { var removed = Blockly.utils.dom.removeClass( @@ -1253,7 +1254,8 @@ Blockly.BlockSvg.prototype.setHighlighted = function(highlighted) { } if (highlighted) { this.svgPath_.setAttribute('filter', - 'url(#' + this.workspace.options.embossFilterId + ')'); + 'url(#' + + this.workspace.getRenderer().getConstants().embossFilterId + ')'); this.svgPathLight_.style.display = 'none'; } else { this.svgPath_.setAttribute('filter', 'none'); diff --git a/core/inject.js b/core/inject.js index 805200e75..be46c684c 100644 --- a/core/inject.js +++ b/core/inject.js @@ -139,73 +139,6 @@ Blockly.createDom_ = function(container, options) { // instances on a page. Browser behaviour becomes undefined otherwise. // https://neil.fraser.name/news/2015/11/01/ var rnd = String(Math.random()).substring(2); - /* - - - - - - - - - */ - var embossFilter = Blockly.utils.dom.createSvgElement('filter', - {'id': 'blocklyEmbossFilter' + rnd}, defs); - Blockly.utils.dom.createSvgElement('feGaussianBlur', - {'in': 'SourceAlpha', 'stdDeviation': 1, 'result': 'blur'}, embossFilter); - var feSpecularLighting = Blockly.utils.dom.createSvgElement('feSpecularLighting', - { - 'in': 'blur', - 'surfaceScale': 1, - 'specularConstant': 0.5, - 'specularExponent': 10, - 'lighting-color': 'white', - 'result': 'specOut' - }, - embossFilter); - Blockly.utils.dom.createSvgElement('fePointLight', - {'x': -5000, 'y': -10000, 'z': 20000}, feSpecularLighting); - Blockly.utils.dom.createSvgElement('feComposite', - { - 'in': 'specOut', - 'in2': 'SourceAlpha', - 'operator': 'in', - 'result': 'specOut' - }, embossFilter); - Blockly.utils.dom.createSvgElement('feComposite', - { - 'in': 'SourceGraphic', - 'in2': 'specOut', - 'operator': 'arithmetic', - 'k1': 0, - 'k2': 1, - 'k3': 1, - 'k4': 0 - }, embossFilter); - options.embossFilterId = embossFilter.id; - /* - - - - - */ - var disabledPattern = Blockly.utils.dom.createSvgElement('pattern', - { - 'id': 'blocklyDisabledPattern' + rnd, - 'patternUnits': 'userSpaceOnUse', - 'width': 10, - 'height': 10 - }, defs); - Blockly.utils.dom.createSvgElement('rect', - {'width': 10, 'height': 10, 'fill': '#aaa'}, disabledPattern); - Blockly.utils.dom.createSvgElement('path', - {'d': 'M 0 0 L 10 10 M 10 0 L 0 10', 'stroke': '#cc0'}, disabledPattern); - options.disabledPatternId = disabledPattern.id; options.gridPattern = Blockly.Grid.createDom(rnd, options.gridOptions, defs); return svg; diff --git a/core/renderers/common/constants.js b/core/renderers/common/constants.js index bfc753f09..fedfd85a7 100644 --- a/core/renderers/common/constants.js +++ b/core/renderers/common/constants.js @@ -398,3 +398,89 @@ Blockly.blockRendering.ConstantProvider.prototype.shapeFor = function( throw Error('Unknown connection type'); } }; + +/** + * Create any DOM elements that this renderer needs (filters, patterns, etc). + * @param {!SVGElement} svg The root of the workspace's SVG. + * @package + */ +Blockly.blockRendering.ConstantProvider.prototype.createDom = function(svg) { + /* + + ... filters go here ... + + */ + 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); + /* + + + + + + + + + */ + var embossFilter = Blockly.utils.dom.createSvgElement('filter', + {'id': 'blocklyEmbossFilter' + rnd}, defs); + Blockly.utils.dom.createSvgElement('feGaussianBlur', + {'in': 'SourceAlpha', 'stdDeviation': 1, 'result': 'blur'}, embossFilter); + var feSpecularLighting = Blockly.utils.dom.createSvgElement('feSpecularLighting', + { + 'in': 'blur', + 'surfaceScale': 1, + 'specularConstant': 0.5, + 'specularExponent': 10, + 'lighting-color': 'white', + 'result': 'specOut' + }, + embossFilter); + Blockly.utils.dom.createSvgElement('fePointLight', + {'x': -5000, 'y': -10000, 'z': 20000}, feSpecularLighting); + Blockly.utils.dom.createSvgElement('feComposite', + { + 'in': 'specOut', + 'in2': 'SourceAlpha', + 'operator': 'in', + 'result': 'specOut' + }, embossFilter); + Blockly.utils.dom.createSvgElement('feComposite', + { + 'in': 'SourceGraphic', + 'in2': 'specOut', + 'operator': 'arithmetic', + 'k1': 0, + 'k2': 1, + 'k3': 1, + 'k4': 0 + }, embossFilter); + this.embossFilterId = embossFilter.id; + + /* + + + + + */ + var disabledPattern = Blockly.utils.dom.createSvgElement('pattern', + { + 'id': 'blocklyDisabledPattern' + rnd, + 'patternUnits': 'userSpaceOnUse', + 'width': 10, + 'height': 10 + }, defs); + Blockly.utils.dom.createSvgElement('rect', + {'width': 10, 'height': 10, 'fill': '#aaa'}, disabledPattern); + Blockly.utils.dom.createSvgElement('path', + {'d': 'M 0 0 L 10 10 M 10 0 L 0 10', 'stroke': '#cc0'}, disabledPattern); + this.disabledPatternId = disabledPattern.id; +}; diff --git a/core/workspace_svg.js b/core/workspace_svg.js index 4876dd0e0..9e961d8df 100644 --- a/core/workspace_svg.js +++ b/core/workspace_svg.js @@ -676,6 +676,7 @@ Blockly.WorkspaceSvg.prototype.createDom = function(opt_backgroundClass) { var svgMarker = this.marker_.getDrawer().createDom(); this.svgGroup_.appendChild(svgMarker); + this.getRenderer().getConstants().createDom(this.svgGroup_); return this.svgGroup_; };