From f4431b33616bfa9e33d277f4352aa1ae79709879 Mon Sep 17 00:00:00 2001 From: Sam El-Husseini Date: Mon, 25 Nov 2019 14:18:10 -0800 Subject: [PATCH] [Zelos] apply Colour (#3465) * Only apply colour from a single entry point. Zelos rendering apply colour --- core/block_svg.js | 12 +++---- core/field_textinput.js | 16 +++++++++ core/renderers/common/i_path_object.js | 10 +----- core/renderers/common/path_object.js | 40 ++++++++++++---------- core/renderers/geras/path_object.js | 46 ++++++++++++++------------ core/renderers/zelos/path_object.js | 32 ++++++++++++++++++ core/renderers/zelos/renderer.js | 13 ++++++-- 7 files changed, 114 insertions(+), 55 deletions(-) diff --git a/core/block_svg.js b/core/block_svg.js index eb2e0674b..86059140f 100644 --- a/core/block_svg.js +++ b/core/block_svg.js @@ -359,6 +359,8 @@ Blockly.BlockSvg.prototype.setParent = function(newParent) { this.workspace.getCanvas().appendChild(svgRoot); this.translate(oldXY.x, oldXY.y); } + + this.applyColour(); }; /** @@ -970,12 +972,11 @@ Blockly.BlockSvg.prototype.dispose = function(healStack, animate) { * @package */ Blockly.BlockSvg.prototype.applyColour = function() { - if (!this.isEnabled() || !this.rendered) { - // Disabled blocks and non-rendered blocks don't have colour. + if (!this.rendered) { + // Non-rendered blocks don't have colour. return; } - - this.pathObject.applyColour(this.isShadow()); + this.pathObject.applyColour(this); var icons = this.getIcons(); for (var i = 0; i < icons.length; i++) { @@ -993,9 +994,8 @@ Blockly.BlockSvg.prototype.applyColour = function() { * Enable or disable a block. */ Blockly.BlockSvg.prototype.updateDisabled = function() { - var isDisabled = !this.isEnabled() || this.getInheritedDisabled(); - this.pathObject.updateDisabled(isDisabled, this.isShadow()); var children = this.getChildren(false); + this.applyColour(); for (var i = 0, child; (child = children[i]); i++) { child.updateDisabled(); } diff --git a/core/field_textinput.js b/core/field_textinput.js index e898351f1..8150f26de 100644 --- a/core/field_textinput.js +++ b/core/field_textinput.js @@ -238,6 +238,22 @@ Blockly.FieldTextInput.prototype.doValueUpdate_ = function(newValue) { } }; +/** + * Updates text field to match the colour/style of the block. + * @package + */ +Blockly.FieldTextInput.prototype.applyColour = function() { + if (this.sourceBlock_ && this.constants_.FULL_BLOCK_FIELDS) { + if (this.sourceBlock_.isShadow()) { + this.sourceBlock_.pathObject.svgPath.setAttribute('fill', '#fff'); + } else if (this.borderRect_) { + this.borderRect_.setAttribute('stroke', + this.sourceBlock_.style.colourTertiary); + this.borderRect_.setAttribute('fill', '#fff'); + } + } +}; + /** * Updates the colour of the htmlInput given the current validity of the * field's value. diff --git a/core/renderers/common/i_path_object.js b/core/renderers/common/i_path_object.js index bc9bc65e6..12454e41d 100644 --- a/core/renderers/common/i_path_object.js +++ b/core/renderers/common/i_path_object.js @@ -48,7 +48,7 @@ Blockly.blockRendering.IPathObject.prototype.setPath; /** * Apply the stored colours to the block's path, taking into account whether * the paths belong to a shadow block. - * @param {boolean} isShadow True if the block is a shadow block. + * @param {!Blockly.Block} block The source block. * @package */ Blockly.blockRendering.IPathObject.prototype.applyColour; @@ -90,14 +90,6 @@ Blockly.blockRendering.IPathObject.prototype.setMarkerSvg; */ Blockly.blockRendering.IPathObject.prototype.updateHighlighted; -/** - * Set whether the block shows a disable pattern or not. - * @param {boolean} disabled True if disabled. - * @param {boolean} isShadow True if the block is a shadow block. - * @package - */ -Blockly.blockRendering.IPathObject.prototype.updateDisabled; - /** * Add or remove styling showing that a block is selected. * @param {boolean} enable True if selection is enabled, false otherwise. diff --git a/core/renderers/common/path_object.js b/core/renderers/common/path_object.js index 1e4c09da5..bf2063cfe 100644 --- a/core/renderers/common/path_object.js +++ b/core/renderers/common/path_object.js @@ -139,17 +139,15 @@ Blockly.blockRendering.PathObject.prototype.setMarkerSvg = function(markerSvg) { /** * Apply the stored colours to the block's path, taking into account whether * the paths belong to a shadow block. - * @param {boolean} isShadow True if the block is a shadow block. + * @param {!Blockly.Block} block The source block. * @package */ -Blockly.blockRendering.PathObject.prototype.applyColour = function(isShadow) { - if (isShadow) { - this.svgPath.setAttribute('stroke', 'none'); - this.svgPath.setAttribute('fill', this.style.colourSecondary); - } else { - this.svgPath.setAttribute('stroke', this.style.colourTertiary); - this.svgPath.setAttribute('fill', this.style.colourPrimary); - } +Blockly.blockRendering.PathObject.prototype.applyColour = function(block) { + this.svgPath.setAttribute('stroke', this.style.colourTertiary); + this.svgPath.setAttribute('fill', this.style.colourPrimary); + + this.updateShadow_(block.isShadow()); + this.updateDisabled_(!block.isEnabled() || block.getInheritedDisabled()); }; /** @@ -196,20 +194,28 @@ Blockly.blockRendering.PathObject.prototype.updateHighlighted = function( }; /** - * Set whether the block shows a disable pattern or not. - * @param {boolean} disabled True if disabled. - * @param {boolean} isShadow True if the block is a shadow block. - * @package + * Updates the look of the block to reflect a shadow state. + * @param {boolean} shadow True if the block is a shadow block. + * @protected */ -Blockly.blockRendering.PathObject.prototype.updateDisabled = function(disabled, - isShadow) { +Blockly.blockRendering.PathObject.prototype.updateShadow_ = function(shadow) { + if (shadow) { + this.svgPath.setAttribute('stroke', 'none'); + this.svgPath.setAttribute('fill', this.style.colourSecondary); + } +}; +/** + * Updates the look of the block to reflect a disabled state. + * @param {boolean} disabled True if disabled. + * @protected + */ +Blockly.blockRendering.PathObject.prototype.updateDisabled_ = function( + disabled) { this.setClass_('blocklyDisabled', disabled); if (disabled) { this.svgPath.setAttribute('fill', 'url(#' + this.constants_.disabledPatternId + ')'); - } else { - this.applyColour(isShadow); } }; diff --git a/core/renderers/geras/path_object.js b/core/renderers/geras/path_object.js index 5572de4ac..8bf6cfe34 100644 --- a/core/renderers/geras/path_object.js +++ b/core/renderers/geras/path_object.js @@ -124,20 +124,15 @@ Blockly.geras.PathObject.prototype.flipRTL = function() { /** * @override */ -Blockly.geras.PathObject.prototype.applyColour = function(isShadow) { - if (isShadow) { - this.svgPathLight.style.display = 'none'; - this.svgPathDark.setAttribute('fill', this.style.colourSecondary); - this.svgPath.setAttribute('stroke', 'none'); - this.svgPath.setAttribute('fill', this.style.colourSecondary); - } else { - this.svgPathLight.style.display = ''; - this.svgPathDark.style.display = ''; - this.svgPath.setAttribute('stroke', 'none'); - this.svgPathLight.setAttribute('stroke', this.style.colourTertiary); - this.svgPathDark.setAttribute('fill', this.colourDark); - this.svgPath.setAttribute('fill', this.style.colourPrimary); - } +Blockly.geras.PathObject.prototype.applyColour = function(block) { + this.svgPathLight.style.display = ''; + this.svgPathDark.style.display = ''; + this.svgPathLight.setAttribute('stroke', this.style.colourTertiary); + this.svgPathDark.setAttribute('fill', this.colourDark); + + Blockly.geras.PathObject.superClass_.applyColour.call(this, block); + + this.svgPath.setAttribute('stroke', 'none'); }; /** @@ -167,12 +162,21 @@ Blockly.geras.PathObject.prototype.updateHighlighted = function(highlighted) { /** * @override */ -Blockly.geras.PathObject.prototype.updateDisabled = function( - disabled, isShadow) { - if (disabled) { - this.svgPath.setAttribute('fill', - 'url(#' + this.constants_.disabledPatternId + ')'); - } else { - this.applyColour(isShadow); +Blockly.geras.PathObject.prototype.updateShadow_ = function(shadow) { + if (shadow) { + this.svgPathLight.style.display = 'none'; + this.svgPathDark.setAttribute('fill', this.style.colourSecondary); + this.svgPath.setAttribute('stroke', 'none'); + this.svgPath.setAttribute('fill', this.style.colourSecondary); + } +}; + +/** + * @override + */ +Blockly.geras.PathObject.prototype.updateDisabled_ = function(disabled) { + Blockly.geras.PathObject.superClass_.updateDisabled_.call(this, disabled); + if (disabled) { + this.svgPath.setAttribute('stroke', 'none'); } }; diff --git a/core/renderers/zelos/path_object.js b/core/renderers/zelos/path_object.js index 537e015a9..9a1206331 100644 --- a/core/renderers/zelos/path_object.js +++ b/core/renderers/zelos/path_object.js @@ -85,6 +85,23 @@ Blockly.zelos.PathObject.prototype.setPath = function(pathString) { } }; +/** + * @override + */ +Blockly.zelos.PathObject.prototype.applyColour = function(block) { + Blockly.zelos.PathObject.superClass_.applyColour.call(this, block); + // Set shadow stroke colour. + if (block.isShadow() && block.getParent()) { + this.svgPath.setAttribute('stroke', block.getParent().style.colourTertiary); + } + + // Apply colour to outlines. + for (var i = 0, keys = Object.keys(this.outlines_), + key; (key = keys[i]); i++) { + this.outlines_[key].setAttribute('fill', this.style.colourTertiary); + } +}; + /** * @override */ @@ -97,6 +114,21 @@ Blockly.zelos.PathObject.prototype.flipRTL = function() { } }; +/** + * @override + */ +Blockly.zelos.PathObject.prototype.updateDisabled_ = function( + disabled) { + Blockly.zelos.PathObject.superClass_.updateDisabled_.call(this, disabled); + for (var i = 0, keys = Object.keys(this.outlines_), + key; (key = keys[i]); i++) { + if (disabled) { + this.outlines_[key].setAttribute('fill', + 'url(#' + this.constants_.disabledPatternId + ')'); + } + } +}; + /** * @override */ diff --git a/core/renderers/zelos/renderer.js b/core/renderers/zelos/renderer.js index 17d3f46a3..696eea71e 100644 --- a/core/renderers/zelos/renderer.js +++ b/core/renderers/zelos/renderer.js @@ -139,10 +139,18 @@ Blockly.zelos.Renderer.prototype.getCSS_ = function() { 'font-size: ' + constants.FIELD_TEXT_FONTSIZE + 'pt;', 'font-weight: ' + constants.FIELD_TEXT_FONTWEIGHT + ';', '}', + selector + ' .blocklyNonEditableText>text,', + selector + ' .blocklyEditableText>text,', + selector + ' .blocklyNonEditableText>g>text,', + selector + ' .blocklyEditableText>g>text {', + 'fill: #575E75;', + '}', // Editable field hover. - selector + ' .blocklyEditableText:not(.editing):hover>rect ,', - selector + ' .blocklyEditableText:not(.editing):hover>.blocklyPath {', + selector + ' .blocklyDraggable:not(.blocklyDisabled)', + ' .blocklyEditableText:not(.editing):hover>rect ,', + selector + ' .blocklyDraggable:not(.blocklyDisabled)', + ' .blocklyEditableText:not(.editing):hover>.blocklyPath {', 'stroke: #fff;', 'stroke-width: 2;', '}', @@ -151,6 +159,7 @@ Blockly.zelos.Renderer.prototype.getCSS_ = function() { selector + ' .blocklyHtmlInput {', 'font-family: ' + constants.FIELD_TEXT_FONTFAMILY + ';', 'font-weight: ' + constants.FIELD_TEXT_FONTWEIGHT + ';', + 'color: #575E75;', '}', // Dropdown field.