diff --git a/core/block_svg.js b/core/block_svg.js index 36b9dac54..bb8113813 100644 --- a/core/block_svg.js +++ b/core/block_svg.js @@ -250,7 +250,7 @@ Blockly.BlockSvg.prototype.initSvg = function() { icons[i].createIcon(); } this.applyColour(); - this.updateMovable(); + this.pathObject.updateMovable(this.isMovable()); var svg = this.getSvgRoot(); if (!this.workspace.options.readOnly && !this.eventsInit_ && svg) { Blockly.bindEventWithChecks_( @@ -881,26 +881,13 @@ Blockly.BlockSvg.prototype.setDragging = function(adding) { } }; -/** - * Add or remove the UI indicating if this block is movable or not. - */ -Blockly.BlockSvg.prototype.updateMovable = function() { - if (this.isMovable()) { - Blockly.utils.dom.addClass( - /** @type {!Element} */ (this.svgGroup_), 'blocklyDraggable'); - } else { - Blockly.utils.dom.removeClass( - /** @type {!Element} */ (this.svgGroup_), 'blocklyDraggable'); - } -}; - /** * Set whether this block is movable or not. * @param {boolean} movable True if movable. */ Blockly.BlockSvg.prototype.setMovable = function(movable) { Blockly.BlockSvg.superClass_.setMovable.call(this, movable); - this.updateMovable(); + this.pathObject.updateMovable(movable); }; /** @@ -937,8 +924,7 @@ Blockly.BlockSvg.prototype.setInsertionMarker = function(insertionMarker) { this.isInsertionMarker_ = insertionMarker; if (this.isInsertionMarker_) { this.setColour(Blockly.INSERTION_MARKER_COLOUR); - Blockly.utils.dom.addClass(/** @type {!Element} */ (this.svgGroup_), - 'blocklyInsertionMarker'); + this.pathObject.updateInsertionMarker(true); } }; @@ -1038,19 +1024,8 @@ Blockly.BlockSvg.prototype.applyColour = function() { * Enable or disable a block. */ Blockly.BlockSvg.prototype.updateDisabled = function() { - if (!this.isEnabled() || this.getInheritedDisabled()) { - var added = Blockly.utils.dom.addClass( - /** @type {!Element} */ (this.svgGroup_), 'blocklyDisabled'); - if (added) { - this.pathObject.setDisabled(true, this.isShadow()); - } - } else { - var removed = Blockly.utils.dom.removeClass( - /** @type {!Element} */ (this.svgGroup_), 'blocklyDisabled'); - if (removed) { - this.pathObject.setDisabled(false, this.isShadow()); - } - } + var isDisabled = !this.isEnabled() || this.getInheritedDisabled(); + this.pathObject.updateDisabled(isDisabled, this.isShadow()); var children = this.getChildren(false); for (var i = 0, child; (child = children[i]); i++) { child.updateDisabled(); @@ -1235,23 +1210,21 @@ Blockly.BlockSvg.prototype.setHighlighted = function(highlighted) { if (!this.rendered) { return; } - this.pathObject.setHighlighted(highlighted); + this.pathObject.updateHighlighted(highlighted); }; /** * Select this block. Highlight it visually. */ Blockly.BlockSvg.prototype.addSelect = function() { - Blockly.utils.dom.addClass( - /** @type {!Element} */ (this.svgGroup_), 'blocklySelected'); + this.pathObject.updateSelected(true); }; /** * Unselect this block. Remove its highlighting. */ Blockly.BlockSvg.prototype.removeSelect = function() { - Blockly.utils.dom.removeClass( - /** @type {!Element} */ (this.svgGroup_), 'blocklySelected'); + this.pathObject.updateSelected(false); }; /** @@ -1261,13 +1234,7 @@ Blockly.BlockSvg.prototype.removeSelect = function() { * @package */ Blockly.BlockSvg.prototype.setDeleteStyle = function(enable) { - if (enable) { - Blockly.utils.dom.addClass(/** @type {!Element} */ (this.svgGroup_), - 'blocklyDraggingDelete'); - } else { - Blockly.utils.dom.removeClass(/** @type {!Element} */ (this.svgGroup_), - 'blocklyDraggingDelete'); - } + this.pathObject.updateDraggingDelete(enable); }; diff --git a/core/renderers/common/i_path_object.js b/core/renderers/common/i_path_object.js index 870e5def1..b7f6b405a 100644 --- a/core/renderers/common/i_path_object.js +++ b/core/renderers/common/i_path_object.js @@ -70,12 +70,44 @@ Blockly.blockRendering.IPathObject.prototype.flipRTL; * Set whether the block shows a highlight or not. Block highlighting is * often used to visually mark blocks currently being executed. * @param {boolean} highlighted True if highlighted. + * @package */ -Blockly.blockRendering.IPathObject.prototype.setHighlighted; +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.setDisabled; +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. + * @package + */ +Blockly.blockRendering.IPathObject.prototype.updateSelected; + +/** + * Add or remove styling showing that a block is dragged over a delete area. + * @param {boolean} enable True if the block is being dragged over a delete + * area, false otherwise. + * @package + */ +Blockly.blockRendering.IPathObject.prototype.updateDraggingDelete; + +/** + * Add or remove styling showing that a block is an insertion marker. + * @param {boolean} enable True if the block is an insertion marker, false + * otherwise. + * @package + */ +Blockly.blockRendering.IPathObject.prototype.updateInsertionMarker; + +/** + * Add or remove styling showing that a block is movable. + * @param {boolean} enable True if the block is movable, false otherwise. + * @package + */ +Blockly.blockRendering.IPathObject.prototype.updateMovable; diff --git a/core/renderers/common/path_object.js b/core/renderers/common/path_object.js index 27cac6e04..8e82b2be2 100644 --- a/core/renderers/common/path_object.js +++ b/core/renderers/common/path_object.js @@ -44,6 +44,7 @@ Blockly.blockRendering.PathObject = function(root, constants) { /** * The renderer's constant provider. * @type {!Blockly.blockRendering.ConstantProvider} + * @protected */ this.constants_ = constants; @@ -121,14 +122,33 @@ Blockly.blockRendering.PathObject.prototype.setStyle = function(blockStyle) { this.style = blockStyle; }; +/** + * Add or remove the given CSS class on the path object's root SVG element. + * @param {string} className The name of the class to add or remove + * @param {boolean} add True if the class should be added. False if it should + * be removed. + * @protected + */ +Blockly.blockRendering.PathObject.prototype.setClass_ = function( + className, add) { + if (add) { + Blockly.utils.dom.addClass(/** @type {!Element} */ (this.svgRoot), + className); + } else { + Blockly.utils.dom.removeClass(/** @type {!Element} */ (this.svgRoot), + className); + } +}; + /** * Set whether the block shows a highlight or not. Block highlighting is * often used to visually mark blocks currently being executed. - * @param {boolean} highlighted True if highlighted. + * @param {boolean} enable True if highlighted. + * @package */ -Blockly.blockRendering.PathObject.prototype.setHighlighted = function( - highlighted) { - if (highlighted) { +Blockly.blockRendering.PathObject.prototype.updateHighlighted = function( + enable) { + if (enable) { this.svgPath.setAttribute('filter', 'url(#' + this.constants_.embossFilterId + ')'); } else { @@ -140,9 +160,12 @@ Blockly.blockRendering.PathObject.prototype.setHighlighted = 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 */ -Blockly.blockRendering.PathObject.prototype.setDisabled = function(disabled, +Blockly.blockRendering.PathObject.prototype.updateDisabled = function(disabled, isShadow) { + + this.setClass_('blocklyDisabled', disabled); if (disabled) { this.svgPath.setAttribute('fill', 'url(#' + this.constants_.disabledPatternId + ')'); @@ -150,3 +173,43 @@ Blockly.blockRendering.PathObject.prototype.setDisabled = function(disabled, this.applyColour(isShadow); } }; + +/** + * Add or remove styling showing that a block is selected. + * @param {boolean} enable True if selection is enabled, false otherwise. + * @package + */ +Blockly.blockRendering.PathObject.prototype.updateSelected = function(enable) { + this.setClass_('blocklySelected', enable); +}; + +/** + * Add or remove styling showing that a block is dragged over a delete area. + * @param {boolean} enable True if the block is being dragged over a delete + * area, false otherwise. + * @package + */ +Blockly.blockRendering.PathObject.prototype.updateDraggingDelete = function( + enable) { + this.setClass_('blocklyDraggingDelete', enable); +}; + +/** + * Add or remove styling showing that a block is an insertion marker. + * @param {boolean} enable True if the block is an insertion marker, false + * otherwise. + * @package + */ +Blockly.blockRendering.PathObject.prototype.updateInsertionMarker = function( + enable) { + this.setClass_('blocklyInsertionMarker', enable); +}; + +/** + * Add or remove styling showing that a block is movable. + * @param {boolean} enable True if the block is movable, false otherwise. + * @package + */ +Blockly.blockRendering.PathObject.prototype.updateMovable = function(enable) { + this.setClass_('blocklyDraggable', enable); +}; diff --git a/core/renderers/geras/path_object.js b/core/renderers/geras/path_object.js index f09bdb6aa..5572de4ac 100644 --- a/core/renderers/geras/path_object.js +++ b/core/renderers/geras/path_object.js @@ -153,7 +153,7 @@ Blockly.geras.PathObject.prototype.setStyle = function(blockStyle) { /** * @override */ -Blockly.geras.PathObject.prototype.setHighlighted = function(highlighted) { +Blockly.geras.PathObject.prototype.updateHighlighted = function(highlighted) { if (highlighted) { this.svgPath.setAttribute('filter', 'url(#' + this.constants_.embossFilterId + ')'); @@ -167,7 +167,8 @@ Blockly.geras.PathObject.prototype.setHighlighted = function(highlighted) { /** * @override */ -Blockly.geras.PathObject.prototype.setDisabled = function(disabled, isShadow) { +Blockly.geras.PathObject.prototype.updateDisabled = function( + disabled, isShadow) { if (disabled) { this.svgPath.setAttribute('fill', 'url(#' + this.constants_.disabledPatternId + ')');