scratchfoundation/scratch-blocks
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-blocks.git synced 2025-08-28 22:10:31 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Replacement marker glow similar to Scratch 2.0 (#437)

Browse source 
* Replacement marker glow similar to Scratch 2.0

* Update REPLACEMENT_GLOW_RADIUS=2
This commit is contained in:
Tim Mickel 2016-06-21 16:20:37 -04:00 • committed by GitHub
parent 789dc986b4
commit d106b41b50
4 changed files with 36 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

4
core/block_render_svg_horizontal.js
View file

@ -329,9 +329,9 @@ Blockly.BlockSvg.prototype.updateColour = function() {
*/
Blockly.BlockSvg.prototype.highlightForReplacement = function(add) {
if (add) {
this.svgPath_.setAttribute('fill', '#eeff01'); // TODO:#413
this.svgPath_.setAttribute('filter', 'url(#blocklyReplacementGlowFilter)');
} else {
this.updateColour();
this.svgPath_.removeAttribute('filter');
}
};

9
core/block_render_svg_vertical.js
View file

@ -445,9 +445,9 @@ Blockly.BlockSvg.prototype.updateColour = function() {
*/
Blockly.BlockSvg.prototype.highlightForReplacement = function(add) {
if (add) {
this.svgPath_.setAttribute('fill', '#eeff01'); // TODO:#413
this.svgPath_.setAttribute('filter', 'url(#blocklyReplacementGlowFilter)');
} else {
this.updateColour();
this.svgPath_.removeAttribute('filter');
}
};
@ -464,10 +464,9 @@ Blockly.BlockSvg.prototype.highlightShapeForInput = function(conn, add) {
}
var inputShape = this.inputShapes_[input.name];
if (add) {
inputShape.setAttribute('fill',
Math.random() < 0.5 ? '#ff00ff' : '#00ff00'); // TODO:#413
inputShape.setAttribute('filter', 'url(#blocklyReplacementGlowFilter)');
} else {
inputShape.setAttribute('fill', this.getColourTertiary());
inputShape.removeAttribute('filter');
}
};

2
core/colours.js
View file

@ -68,6 +68,8 @@ Blockly.Colours = {
"dragShadowOpacity": 0.3,
"stackGlow": "#FFF200",
"stackGlowOpacity": 1,
"replacementGlow": "#FFFFFF",
"replacementGlowOpacity": 1,
// CSS colours: support RGBA
"fieldShadow": "rgba(0,0,0,0.1)",
"dropDownShadow": "rgba(0, 0, 0, .3)",

28
core/inject.js
View file

@ -42,6 +42,13 @@ goog.require('goog.userAgent');
*/
Blockly.STACK_GLOW_RADIUS = 1;
/**
* Radius of replacement glow, in px.
* @type {number}
* @const
*/
Blockly.REPLACEMENT_GLOW_RADIUS = 2;
/**
* Inject a Blockly editor into the specified container element (usually a div).
* @param {!Element|string} container Containing element, or its ID,
@ -127,6 +134,27 @@ Blockly.createDom_ = function(container, options) {
Blockly.createSvgElement('feComposite',
{'in': 'SourceGraphic', 'in2': 'outGlow', 'operator': 'over'}, stackGlowFilter);
// Filter for replacement marker
var replacementGlowFilter = Blockly.createSvgElement('filter',
{'id': 'blocklyReplacementGlowFilter',
'height': '160%', 'width': '180%', y: '-30%', x: '-40%'}, defs);
Blockly.createSvgElement('feGaussianBlur',
{'in': 'SourceGraphic',
'stdDeviation': Blockly.REPLACEMENT_GLOW_RADIUS}, replacementGlowFilter);
// Set all gaussian blur pixels to 1 opacity before applying flood
var componentTransfer = Blockly.createSvgElement('feComponentTransfer', {'result': 'outBlur'}, replacementGlowFilter);
Blockly.createSvgElement('feFuncA',
{'type': 'table', 'tableValues': '0' + ' 1'.repeat(16)}, componentTransfer);
// Color the highlight
Blockly.createSvgElement('feFlood',
{'flood-color': Blockly.Colours.replacementGlow,
'flood-opacity': Blockly.Colours.replacementGlowOpacity, 'result': 'outColor'}, replacementGlowFilter);
Blockly.createSvgElement('feComposite',
{'in': 'outColor', 'in2': 'outBlur',
'operator': 'in', 'result': 'outGlow'}, replacementGlowFilter);
Blockly.createSvgElement('feComposite',
{'in': 'SourceGraphic', 'in2': 'outGlow', 'operator': 'over'}, replacementGlowFilter);
var disabledPattern = Blockly.createSvgElement('pattern',
{'id': 'blocklyDisabledPattern' + rnd,
'patternUnits': 'userSpaceOnUse',