From 02e5b77a20f1d0ca50b7875bba5ffaea6a81523d Mon Sep 17 00:00:00 2001 From: kozbial Date: Thu, 12 Sep 2019 17:02:04 -0700 Subject: [PATCH] Adding checkboxes for debug rendering options to playground. --- core/renderers/common/debugger.js | 47 +++++---- tests/playground.html | 152 +++++++++++++++++++++--------- 2 files changed, 131 insertions(+), 68 deletions(-) diff --git a/core/renderers/common/debugger.js b/core/renderers/common/debugger.js index b0b4ff709..5a70fa261 100644 --- a/core/renderers/common/debugger.js +++ b/core/renderers/common/debugger.js @@ -54,24 +54,20 @@ Blockly.blockRendering.Debug = function() { * @type {SVGElement} */ this.svgRoot_ = null; - - /** - * @type {Object} Configuration object containing booleans to enable and - * disable debug rendering of specific rendering components. - */ - this.config_ = Blockly.blockRendering.Debug.getDebugConfig(); }; -Blockly.blockRendering.Debug.getDebugConfig = function() { - return { - // rowSpacers: true, - // elemSpacers: true, - // rows: true, - elems: true, - // connections: true, - blockBounds: true, - // connectedBlockBounds: true - }; +/** + * @type {!Object.} Configuration object containing booleans + * to enable and disable debug rendering of specific rendering components. + */ +Blockly.blockRendering.Debug.config = { + rowSpacers: true, + elemSpacers: true, + rows: true, + elems: true, + connections: true, + blockBounds: true, + connectedBlockBounds: true }; /** @@ -94,7 +90,7 @@ Blockly.blockRendering.Debug.prototype.clearElems = function() { * @package */ Blockly.blockRendering.Debug.prototype.drawSpacerRow = function(row, cursorY, isRtl) { - if (!this.config_.rowSpacers) { + if (!Blockly.blockRendering.Debug.config.rowSpacers) { return; } @@ -121,7 +117,7 @@ Blockly.blockRendering.Debug.prototype.drawSpacerRow = function(row, cursorY, is * @package */ Blockly.blockRendering.Debug.prototype.drawSpacerElem = function(elem, rowHeight, isRtl) { - if (!this.config_.elemSpacers) { + if (!Blockly.blockRendering.Debug.config.elemSpacers) { return; } @@ -153,7 +149,7 @@ Blockly.blockRendering.Debug.prototype.drawSpacerElem = function(elem, rowHeight * @package */ Blockly.blockRendering.Debug.prototype.drawRenderedElem = function(elem, isRtl) { - if (this.config_.elems) { + if (Blockly.blockRendering.Debug.config.elems) { var xPos = elem.xPos; if (isRtl) { xPos = -(xPos + elem.width); @@ -174,7 +170,8 @@ Blockly.blockRendering.Debug.prototype.drawRenderedElem = function(elem, isRtl) } - if (Blockly.blockRendering.Types.isInput(elem) && this.config_.connections) { + if (Blockly.blockRendering.Types.isInput(elem) && + Blockly.blockRendering.Debug.config.connections) { this.drawConnection(elem.connection); } }; @@ -187,7 +184,7 @@ Blockly.blockRendering.Debug.prototype.drawRenderedElem = function(elem, isRtl) * @package */ Blockly.blockRendering.Debug.prototype.drawConnection = function(conn) { - if (!this.config_.connections) { + if (!Blockly.blockRendering.Debug.config.connections) { return; } @@ -231,7 +228,7 @@ Blockly.blockRendering.Debug.prototype.drawConnection = function(conn) { * @package */ Blockly.blockRendering.Debug.prototype.drawRenderedRow = function(row, cursorY, isRtl) { - if (!this.config_.rows) { + if (!Blockly.blockRendering.Debug.config.rows) { return; } this.debugElements_.push(Blockly.utils.dom.createSvgElement('rect', @@ -251,7 +248,7 @@ Blockly.blockRendering.Debug.prototype.drawRenderedRow = function(row, cursorY, return; } - if (this.config_.connectedBlockBounds) { + if (Blockly.blockRendering.Debug.config.connectedBlockBounds) { this.debugElements_.push(Blockly.utils.dom.createSvgElement('rect', { 'class': 'connectedBlockWidth blockRenderDebug', @@ -293,7 +290,7 @@ Blockly.blockRendering.Debug.prototype.drawRowWithElements = function(row, curso * @package */ Blockly.blockRendering.Debug.prototype.drawBoundingBox = function(info) { - if (!this.config_.blockBounds) { + if (!Blockly.blockRendering.Debug.config.blockBounds) { return; } // Bounding box without children. @@ -313,7 +310,7 @@ Blockly.blockRendering.Debug.prototype.drawBoundingBox = function(info) { }, this.svgRoot_)); - if (this.config_.connectedBlockBounds) { + if (Blockly.blockRendering.Debug.config.connectedBlockBounds) { // Bounding box with children. xPos = info.RTL ? -info.widthWithChildren : 0; this.debugElements_.push(Blockly.utils.dom.createSvgElement('rect', diff --git a/tests/playground.html b/tests/playground.html index d765e5452..ff2413a9b 100644 --- a/tests/playground.html +++ b/tests/playground.html @@ -134,6 +134,7 @@ function start() { } }); addToolboxButtonCallbacks(); + addRenderDebugOptionsCheckboxes(); // Restore previously displayed text. if (sessionStorage) { var text = sessionStorage.getItem('textarea'); @@ -146,6 +147,10 @@ function start() { // Restore render debug state. var renderDebugState = sessionStorage.getItem('blockRenderDebug'); toggleRenderingDebug(Boolean(Number(renderDebugState))); + // Restore render debug options state. + var renderDebugOptionsState = + JSON.parse(sessionStorage.getItem('blockRenderDebugOptions')); + setRenderDebugOptionCheckboxState(renderDebugOptionsState); } else { // MSIE 11 does not support sessionStorage on file:// URLs. logEvents(false); @@ -260,6 +265,57 @@ function addToolboxButtonCallbacks() { 'removeDynamicOption', Blockly.TestBlocks.removeDynamicDropdownOption_); } +function setRenderDebugOptionCheckboxState(overrideOptions) { + Blockly.blockRendering.Debug.config = overrideOptions || {}; + if(!overrideOptions) return; + var renderDebugOptionsListEl = document.getElementById('renderDebugOptions'); + var renderDebugOptionInputs = + renderDebugOptionsListEl.getElementsByTagName('INPUT'); + for (var optionInput of renderDebugOptionInputs) { + var optionId = optionInput.getAttribute('id'); + var checkboxMatch = optionId.match('^RenderDebug(.*)Check$'); + if (!checkboxMatch) continue; + var optionName = checkboxMatch[1]; + optionInput.checked = !!overrideOptions[optionName]; + } +} + +function updateRenderDebugOptions() { + var renderDebugOptionsListEl = document.getElementById('renderDebugOptions'); + var renderDebugOptionInputs = + renderDebugOptionsListEl.getElementsByTagName('INPUT'); + var debugOptions = {}; + for (var optionInput of renderDebugOptionInputs) { + var optionId = optionInput.getAttribute('id'); + var checkboxMatch = optionId.match('^RenderDebug(.*)Check$'); + if (!checkboxMatch) continue; + var optionName = checkboxMatch[1]; + debugOptions[optionName] = optionInput.checked; + } + Blockly.blockRendering.Debug.config = debugOptions; + sessionStorage.setItem( + 'blockRenderDebugOptions',JSON.stringify(debugOptions)); +} + +function addRenderDebugOptionsCheckboxes() { + var renderDebugConfig = Blockly.blockRendering.Debug.config; + var renderDebugOptionsListEl = document.getElementById('renderDebugOptions'); + for (var optionName in renderDebugConfig) { + var optionCheckId = 'RenderDebug' + optionName + 'Check'; + var optionLabel = document.createElement('LABEL'); + optionLabel.setAttribute('htmlFor', optionCheckId); + optionLabel.innerHTML = optionName; + var optionCheck = document.createElement('INPUT'); + optionCheck.setAttribute('type', 'checkbox'); + optionCheck.setAttribute('id', optionCheckId); + optionCheck.onclick = updateRenderDebugOptions; + var optionLi = document.createElement('li'); + optionLi.appendChild(optionLabel); + optionLi.appendChild(optionCheck); + renderDebugOptionsListEl.appendChild(optionLi); + } +} + function changeTheme() { var theme = document.getElementById('themeChanger'); if (theme.value === "modern") { @@ -352,9 +408,11 @@ function toggleRenderingDebug(state) { if (state) { document.getElementById('blocklyDiv').className = 'renderingDebug'; Blockly.blockRendering.startDebugger(); + document.getElementById('renderDebugOptions').style.display = 'block'; } else { document.getElementById('blocklyDiv').className = ''; Blockly.blockRendering.stopDebugger(); + document.getElementById('renderDebugOptions').style.display = 'none'; } } @@ -434,39 +492,46 @@ var spaghettiXml = [ @@ -530,20 +595,21 @@ h1 {

-

- Log events:   - -

- -

- Block rendering debug:   - -

- -

- Enable Accessibility Mode:   - -

+