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

Move filter and pattern creation from inject into constants.

Browse Source
This commit is contained in:
Rachel Fenichel
2019-11-01 13:32:17 -07:00
parent 0f659b25fa
commit 46f323971a
4 changed files with 91 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
core/block_svg.js
View File

@@ -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');

67
core/inject.js
View File

@@ -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);
/*
<filter id="blocklyEmbossFilter837493">
<feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blur" />
<feSpecularLighting in="blur" surfaceScale="1" specularConstant="0.5"
specularExponent="10" lighting-color="white"
result="specOut">
<fePointLight x="-5000" y="-10000" z="20000" />
</feSpecularLighting>
<feComposite in="specOut" in2="SourceAlpha" operator="in"
result="specOut" />
<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic"
k1="0" k2="1" k3="1" k4="0" />
</filter>
*/
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;
/*
<pattern id="blocklyDisabledPattern837493" patternUnits="userSpaceOnUse"
width="10" height="10">
<rect width="10" height="10" fill="#aaa" />
<path d="M 0 0 L 10 10 M 10 0 L 0 10" stroke="#cc0" />
</pattern>
*/
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;

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

@@ -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) {
/*
<defs>
... filters go here ...
</defs>
*/
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);
/*
<filter id="blocklyEmbossFilter837493">
<feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blur" />
<feSpecularLighting in="blur" surfaceScale="1" specularConstant="0.5"
specularExponent="10" lighting-color="white"
result="specOut">
<fePointLight x="-5000" y="-10000" z="20000" />
</feSpecularLighting>
<feComposite in="specOut" in2="SourceAlpha" operator="in"
result="specOut" />
<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic"
k1="0" k2="1" k3="1" k4="0" />
</filter>
*/
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;
/*
<pattern id="blocklyDisabledPattern837493" patternUnits="userSpaceOnUse"
width="10" height="10">
<rect width="10" height="10" fill="#aaa" />
<path d="M 0 0 L 10 10 M 10 0 L 0 10" stroke="#cc0" />
</pattern>
*/
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;
};

1
core/workspace_svg.js
View File

@@ -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_;
};