Skip to content

Add grayscale filter for block #294

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
shakao wants to merge 2 commits into
base: develop
Choose a base branch
from
Draft

Add grayscale filter for block #294

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
843fda2
Add grayscale filter for block
shakao May 1, 2020
a0be7ad
Also add filter to other outlines (empty inputs etc)
shakao May 1, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions core/block_svg.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1323,6 +1323,18 @@ Blockly.BlockSvg.prototype.setHighlighted = function(highlighted) {
this.pathObject.updateHighlighted(highlighted);
};

/**
* Set whether the block is grayscale or not.
* @param {boolean} grayscale True if grayscale.
*/
Blockly.BlockSvg.prototype.setGrayscale = function(grayscale) {
if (!this.rendered) {
return;
}
this.pathObject.updateGrayscale(grayscale);
};


/**
* pxt-blockly specific:
* Set whether the block is highlighted as a warning or not.
Expand Down
17 changes: 17 additions & 0 deletions core/renderers/pxt/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,6 +205,23 @@ Blockly.pxt.ConstantProvider.prototype.createDom = function(svg) {
this.warningGlowFilterId = warningGlowFilter.id;
this.warningGlowFilter_ = warningGlowFilter;

// Grayscale filter
var grayscaleFilter = Blockly.utils.dom.createSvgElement('filter',
{
'id': 'blocklyGrayscaleFilter' + this.randomIdentifier_,
'height': '160%',
'width': '180%',
y: '-30%',
x: '-40%'
},
defs);
Blockly.utils.dom.createSvgElement('feColorMatrix',
{'type': 'saturate',
'values': '0.10'},
grayscaleFilter);
this.grayscaleFilterId = grayscaleFilter.id;
this.grayscaleFilter_ = grayscaleFilter;

// Add dropdown image definitions
var arrowSize = this.FIELD_DROPDOWN_SVG_ARROW_SIZE;
var dropdownArrowImage = Blockly.utils.dom.createSvgElement('image',
Expand Down
23 changes: 23 additions & 0 deletions core/renderers/pxt/path_object.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,6 +163,29 @@ Blockly.pxt.PathObject.prototype.updateSelected = function(enable) {
}
};

/**
* Set whether the block shows in grayscale or not.
* @param {boolean} enable True if grayscale.
* @package
*/
Blockly.pxt.PathObject.prototype.updateGrayscale = function(enable) {
if (enable) {
this.svgPath.setAttribute('filter',
'url(#' + this.constants_.grayscaleFilterId + ')');
var names = Object.keys(this.outlines_);
for (var i = 0; i < names.length; i++) {
this.outlines_[names[i]].setAttribute('filter',
'url(#' + this.constants_.grayscaleFilterId + ')');
}
} else {
this.svgPath.setAttribute('filter', 'none');
var names = Object.keys(this.outlines_);
for (var i = 0; i < names.length; i++) {
this.outlines_[names[i]].setAttribute('filter', 'none');
}
}
};

/**
* Position the svg connection indicator on the path object
* @param {number} x The x offset.
Expand Down