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

Zelos replacement highlight (#3431)

Browse Source 
* Zelos replacement highlight
This commit is contained in:
Sam El-Husseini
2019-11-13 17:14:28 -08:00
committed by GitHub
parent a7ebd604e9
commit f9dcb60f82
9 changed files with 129 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -127,6 +127,11 @@ Blockly.zelos.ConstantProvider = function() {
*/
this.DUMMY_INPUT_MIN_HEIGHT = 6 * this.GRID_UNIT;
/**
* @override
*/
this.FULL_BLOCK_FIELDS = true;
/**
* @override
*/
@@ -158,9 +163,19 @@ Blockly.zelos.ConstantProvider = function() {
this.highlightGlowFilter_ = null;
/**
* @override
* The ID of the highlight glow filter, or the empty string if no filter is
* set.
* @type {string}
* @package
*/
this.FULL_BLOCK_FIELDS = true;
this.replacementGlowFilterId = '';
/**
* The <filter> element to use for a higlight glow, or null if not set.
* @type {SVGElement}
* @private
*/
this.replacementGlowFilter_ = null;
};
Blockly.utils.object.inherits(Blockly.zelos.ConstantProvider,
Blockly.blockRendering.ConstantProvider);
@@ -424,13 +439,13 @@ Blockly.zelos.ConstantProvider.prototype.createDom = function(svg) {
},
highlightGlowFilter);
// Set all gaussian blur pixels to 1 opacity before applying flood
var componentTransfer = Blockly.utils.dom.createSvgElement(
var highlightComponentTransfer = Blockly.utils.dom.createSvgElement(
'feComponentTransfer', {'result': 'outBlur'}, highlightGlowFilter);
Blockly.utils.dom.createSvgElement('feFuncA',
{
'type': 'table', 'tableValues': '0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1'
},
componentTransfer);
highlightComponentTransfer);
// Color the highlight
Blockly.utils.dom.createSvgElement('feFlood',
{
@@ -447,4 +462,52 @@ Blockly.zelos.ConstantProvider.prototype.createDom = function(svg) {
highlightGlowFilter);
this.highlightGlowFilterId = highlightGlowFilter.id;
this.highlightGlowFilter_ = highlightGlowFilter;
// Using a dilate distorts the block shape.
// 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,
'height': '160%',
'width': '180%',
y: '-30%',
x: '-40%'
},
defs);
Blockly.utils.dom.createSvgElement('feGaussianBlur',
{
'in': 'SourceGraphic',
'stdDeviation': 2 // TODO: configure size in theme.
},
replacementGlowFilter);
// Set all gaussian blur pixels to 1 opacity before applying flood
var replacementComponentTransfer = Blockly.utils.dom.createSvgElement(
'feComponentTransfer', {'result': 'outBlur'}, replacementGlowFilter);
Blockly.utils.dom.createSvgElement('feFuncA',
{
'type': 'table', 'tableValues': '0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1'
},
replacementComponentTransfer);
// Color the highlight
Blockly.utils.dom.createSvgElement('feFlood',
{
'flood-color': '#FFF200', // TODO: configure colour in theme.
'flood-opacity': 1,
'result': 'outColor'
},
replacementGlowFilter);
Blockly.utils.dom.createSvgElement('feComposite',
{
'in': 'outColor', 'in2': 'outBlur',
'operator': 'in', 'result': 'outGlow'
},
replacementGlowFilter);
Blockly.utils.dom.createSvgElement('feComposite',
{
'in': 'SourceGraphic', 'in2': 'outGlow',
'operator': 'over',
},
replacementGlowFilter);
this.replacementGlowFilterId = replacementGlowFilter.id;
this.replacementGlowFilter_ = replacementGlowFilter;
};