diff --git a/core/block_svg.js b/core/block_svg.js index cb20b8797..b0cff9c7e 100644 --- a/core/block_svg.js +++ b/core/block_svg.js @@ -917,7 +917,8 @@ Blockly.BlockSvg.prototype.setInsertionMarker = function(insertionMarker) { } this.isInsertionMarker_ = insertionMarker; if (this.isInsertionMarker_) { - this.setColour(Blockly.INSERTION_MARKER_COLOUR); + this.setColour(this.workspace.getRenderer().getConstants(). + INSERTION_MARKER_COLOUR); this.pathObject.updateInsertionMarker(true); } }; diff --git a/core/constants.js b/core/constants.js index 3abb87520..8914bd140 100644 --- a/core/constants.js +++ b/core/constants.js @@ -54,12 +54,6 @@ Blockly.CONNECTING_SNAP_RADIUS = Blockly.SNAP_RADIUS; */ Blockly.CURRENT_CONNECTION_PREFERENCE = 8; -/** - * The main colour of insertion markers, in hex. The block is rendered a - * transparent grey by changing the fill opacity in CSS. - */ -Blockly.INSERTION_MARKER_COLOUR = '#000000'; - /** * Delay in ms between trigger and bumping unconnected block out of alignment. */ diff --git a/core/insertion_marker_manager.js b/core/insertion_marker_manager.js index 60fffb284..49f264e72 100644 --- a/core/insertion_marker_manager.js +++ b/core/insertion_marker_manager.js @@ -255,16 +255,18 @@ Blockly.InsertionMarkerManager.prototype.createMarkerBlock_ = function(sourceBlo } result.setCollapsed(sourceBlock.isCollapsed()); result.setInputsInline(sourceBlock.getInputsInline()); - // Copy field values from the other block. These values may impact the - // rendered size of the insertion marker. Note that we do not care about - // child blocks here. + // Copy visible field values from the other block. These values may impact + // the rendered size of the insertion marker. Note that we do not care + // about child blocks here. for (var i = 0; i < sourceBlock.inputList.length; i++) { var sourceInput = sourceBlock.inputList[i]; - var resultInput = result.inputList[i]; - for (var j = 0; j < sourceInput.fieldRow.length; j++) { - var sourceField = sourceInput.fieldRow[j]; - var resultField = resultInput.fieldRow[j]; - resultField.setValue(sourceField.getValue()); + if (sourceInput.isVisible()) { + var resultInput = result.inputList[i]; + for (var j = 0; j < sourceInput.fieldRow.length; j++) { + var sourceField = sourceInput.fieldRow[j]; + var resultField = resultInput.fieldRow[j]; + resultField.setValue(sourceField.getValue()); + } } } diff --git a/core/renderers/common/constants.js b/core/renderers/common/constants.js index 5120411de..343bcfd31 100644 --- a/core/renderers/common/constants.js +++ b/core/renderers/common/constants.js @@ -502,6 +502,21 @@ Blockly.blockRendering.ConstantProvider = function() { */ this.FULL_BLOCK_FIELDS = false; + /** + * The main colour of insertion markers, in hex. The block is rendered a + * transparent grey by changing the fill opacity in CSS. + * @type {string} + * @package + */ + this.INSERTION_MARKER_COLOUR = '#000000'; + + /** + * The insertion marker opacity. + * @type {number} + * @package + */ + this.INSERTION_MARKER_OPACITY = 0.2; + /** * Enum for connection shapes. * @enum {number} @@ -588,7 +603,7 @@ Blockly.blockRendering.ConstantProvider.prototype.setDynamicProperties_ = function(theme) { /* eslint-disable indent */ this.setFontConstants_(theme); - this.setAccessibilityConstants_(theme); + this.setComponentConstants_(theme); this.ADD_START_HATS = theme.startHats != null ? theme.startHats : this.ADD_START_HATS; @@ -621,17 +636,23 @@ Blockly.blockRendering.ConstantProvider.prototype.setFontConstants_ = function( }; /** - * Set constants related to accessibility. + * Set constants from a theme's component styles. * @param {!Blockly.Theme} theme The current workspace theme. * @protected */ -Blockly.blockRendering.ConstantProvider.prototype.setAccessibilityConstants_ = +Blockly.blockRendering.ConstantProvider.prototype.setComponentConstants_ = function(theme) { /* eslint-disable indent */ this.CURSOR_COLOUR = theme.getComponentStyle('cursorColour') || this.CURSOR_COLOUR; this.MARKER_COLOUR = theme.getComponentStyle('markerColour') || this.MARKER_COLOUR; + this.INSERTION_MARKER_COLOUR = + theme.getComponentStyle('insertionMarkerColour') || + this.INSERTION_MARKER_COLOUR; + this.INSERTION_MARKER_OPACITY = + Number(theme.getComponentStyle('insertionMarkerOpacity')) || + this.INSERTION_MARKER_OPACITY; }; /* eslint-enable indent */ /** @@ -1119,11 +1140,12 @@ Blockly.blockRendering.ConstantProvider.prototype.injectCSS_ = function( var cssNodeId = 'blockly-renderer-style-' + tagName; this.cssNode_ = /** @type {!HTMLStyleElement} */ (document.getElementById(cssNodeId)); + var text = cssArray.join('\n'); if (this.cssNode_) { - // Already injected. + // Already injected, update if the theme changed. + this.cssNode_.firstChild.textContent = text; return; } - var text = cssArray.join('\n'); // Inject CSS tag at start of head. var cssNode = /** @type {!HTMLStyleElement} */ (document.createElement('style')); @@ -1197,6 +1219,12 @@ Blockly.blockRendering.ConstantProvider.prototype.getCSS_ = function(selector) { selector + ' .blocklyReplaceable .blocklyPathDark {', 'display: none;', '}', + + // Insertion marker. + selector + ' .blocklyInsertionMarker>.blocklyPath {', + 'fill-opacity: ' + this.INSERTION_MARKER_OPACITY + ';', + 'stroke: none', + '}', /* eslint-enable indent */ ]; }; diff --git a/core/renderers/geras/constants.js b/core/renderers/geras/constants.js index 5234cfa83..0499a135b 100644 --- a/core/renderers/geras/constants.js +++ b/core/renderers/geras/constants.js @@ -44,3 +44,21 @@ Blockly.geras.ConstantProvider = function() { }; Blockly.utils.object.inherits(Blockly.geras.ConstantProvider, Blockly.blockRendering.ConstantProvider); + + +/** + * @override + */ +Blockly.geras.ConstantProvider.prototype.getCSS_ = function(selector) { + return Blockly.geras.ConstantProvider.superClass_.getCSS_.call(this, selector) + .concat([ + /* eslint-disable indent */ + // Insertion marker. + selector + ' .blocklyInsertionMarker>.blocklyPathLight,', + selector + ' .blocklyInsertionMarker>.blocklyPathDark {', + 'fill-opacity: ' + this.INSERTION_MARKER_OPACITY + ';', + 'stroke: none', + '}', + /* eslint-enable indent */ + ]); +}; diff --git a/core/renderers/zelos/constants.js b/core/renderers/zelos/constants.js index e30dfaa73..f37c37b87 100644 --- a/core/renderers/zelos/constants.js +++ b/core/renderers/zelos/constants.js @@ -965,6 +965,12 @@ Blockly.zelos.ConstantProvider.prototype.getCSS_ = function(selector) { selector + ' .blocklyDisabled > .blocklyOutlinePath {', 'fill: url(#blocklyDisabledPattern' + this.randomIdentifier + ')', '}', + + // Insertion marker. + selector + ' .blocklyInsertionMarker>.blocklyPath {', + 'fill-opacity: ' + this.INSERTION_MARKER_OPACITY + ';', + 'stroke: none', + '}', /* eslint-enable indent */ ]; }; diff --git a/core/theme.js b/core/theme.js index dfa2ed12b..311782f55 100644 --- a/core/theme.js +++ b/core/theme.js @@ -105,8 +105,14 @@ Blockly.Theme.CategoryStyle; * flyoutOpacity:number?, * scrollbarColour:string?, * scrollbarOpacity:number?, + * insertionMarkerColour:string?, + * insertionMarkerOpacity:number?, * markerColour:string?, - * cursorColour:string? + * cursorColour:string?, + * selectedGlowColour:string?, + * selectedGlowOpacity:number?, + * replacementGlowColour:string?, + * replacementGlowOpacity:number? * }} */ Blockly.Theme.ComponentStyle; @@ -202,6 +208,7 @@ Blockly.Theme.defineTheme = function(name, themeObj) { var base = themeObj['base']; if (base && base instanceof Blockly.Theme) { Blockly.utils.object.deepMerge(theme, base); + theme.name = name; } Blockly.utils.object.deepMerge(theme.blockStyles, diff --git a/core/theme/dark.js b/core/theme/dark.js index 7badcde66..c8cc976a4 100644 --- a/core/theme/dark.js +++ b/core/theme/dark.js @@ -24,6 +24,8 @@ Blockly.Themes.Dark = Blockly.Theme.defineTheme('dark', { 'flyoutForegroundColour': '#ccc', 'flyoutOpacity': 1, 'scrollbarColour': '#797979', + 'insertionMarkerColour': '#fff', + 'insertionMarkerOpacity': 0.3, 'scrollbarOpacity': 0.4, 'cursorColour': '#d0d0d0' }