CodingPirates/blockly
1
0
Fork 0
mirror of https://github.com/google/blockly.git synced 2026-01-08 09:30:06 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add debug rendering to playground

Browse Source
This commit is contained in:
Rachel Fenichel
2019-07-23 16:15:20 -07:00
parent 71ef4b86b8
commit cd275ca67b
2 changed files with 58 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
tests/compile/index.html
View File

@@ -13,6 +13,9 @@
font-weight: normal;
font-size: 140%;
}
.blockRenderDebug {
display: none;
}
</style>
</head>
<body>

55
tests/playground.html
View File

@@ -136,6 +136,9 @@ function start() {
// Restore event logging state.
var state = sessionStorage.getItem('logEvents');
logEvents(Boolean(Number(state)));
// Restore render debug state.
var renderDebugState = sessionStorage.getItem('blockRenderDebug');
toggleRenderingDebug(Boolean(Number(renderDebugState)));
} else {
// MSIE 11 does not support sessionStorage on file:// URLs.
logEvents(false);
@@ -327,6 +330,19 @@ function logEvents(state) {
}
}
function toggleRenderingDebug(state) {
var checkbox = document.getElementById('blockRenderDebugCheck');
checkbox.checked = state;
if (sessionStorage) {
sessionStorage.setItem('blockRenderDebug', Number(state));
}
if (state) {
document.getElementById('blocklyDiv').className = 'renderingDebug';
} else {
document.getElementById('blocklyDiv').className = '';
}
}
function logger(e) {
console.log(e);
}
@@ -420,6 +436,40 @@ h1 {
font-style: italic;
}
#blocklyDiv.renderingDebug .blockRenderDebug {
display: block;
}
.blockRenderDebug {
display: none;
}
.rowRenderingRect {
stroke: black;
fill: none;
stroke-width: 1px;
}
.elemRenderingRect {
stroke: red;
fill: none;
stroke-width: 1px;
}
.rowSpacerRect {
stroke: blue;
fill-opacity: 0.5;
fill: blue;
stroke-width: 1px;
}
.elemSpacerRect {
stroke: pink;
fill-opacity: 0.5;
fill: pink;
stroke-width: 1px;
}
</style>
</head>
<body onload="start()">
@@ -483,6 +533,11 @@ h1 {
<input type="checkbox" onclick="logEvents(this.checked)" id="logCheck">
</p>
<p>
Block rendering debug: &nbsp;
<input type="checkbox" onclick="toggleRenderingDebug(this.checked)" id="blockRenderDebugCheck">
</p>
<!-- The next three blocks of XML are sample toolboxes for testing basic
configurations. For more information on building toolboxes, see https://developers.google.com/blockly/guides/configure/web/toolbox -->