mirror of
https://github.com/google/blockly.git
synced 2026-01-08 09:30:06 +01:00
chore(tests): delete test pages from rendering rewrite in 2019 (#6074)
This commit is contained in:
Rachel Fenichel
GitHub
@@ -1,98 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
@license
|
||||
Copyright 2019 Google LLC
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>SVG Path Playground</title>
|
||||
<script src="../../blockly_uncompressed.js"></script>
|
||||
|
||||
<style>
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
background-color: #fff;
|
||||
font-family: sans-serif;
|
||||
overflow: hidden;
|
||||
}
|
||||
.pathDebugClass {
|
||||
stroke-width: 1px;
|
||||
stroke: black;
|
||||
fill: none;
|
||||
}
|
||||
.lineStartMarker {
|
||||
fill: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
var svgSpace;
|
||||
|
||||
function addPathAt(path, x, y) {
|
||||
var group = Blockly.utils.dom.createSvgElement(
|
||||
Blockly.utils.Svg.G,
|
||||
{
|
||||
'transform': 'translate(' + (x + 50) + ', ' + y + ')'
|
||||
}, svgSpace);
|
||||
Blockly.utils.dom.createSvgElement(
|
||||
Blockly.utils.Svg.PATH, {
|
||||
'd': 'M 0,0 ' + path,
|
||||
'marker-start': 'url(#startDot)',
|
||||
'marker-end': 'url(#endDot)',
|
||||
'class': 'pathDebugClass'
|
||||
},
|
||||
group);
|
||||
|
||||
|
||||
return group;
|
||||
}
|
||||
|
||||
function start() {
|
||||
svgSpace = document.getElementById('workspace');
|
||||
addPathAt(Blockly.BlockSvg.START_HAT_PATH, 0, 40);
|
||||
addPathAt(Blockly.BlockSvg.NOTCH_PATH_LEFT, 0, 60);
|
||||
addPathAt(Blockly.BlockSvg.NOTCH_PATH_RIGHT, 0, 70);
|
||||
addPathAt(Blockly.BlockSvg.INNER_TOP_LEFT_CORNER, 0, 90);
|
||||
}
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body onload="start()">
|
||||
|
||||
<svg xmlns="http://www.w4.org/2000/svg" version="1.1" width="1000px" height="1000px" viewBox="0 0 200 200" id="workspace">
|
||||
|
||||
<defs>
|
||||
<!-- Background grid -->
|
||||
<pattern id="grid" patternUnits="userSpaceOnUse" width="10" height="10">
|
||||
<line stroke="#ccc" stroke-width="2" x1="0" y1="1" x2="2" y2="1"></line>
|
||||
</pattern>
|
||||
<!-- simple dot marker definitions -->
|
||||
<marker id="startDot" viewBox="0 0 10 10" refX="5" refY="5"
|
||||
markerWidth="5" markerHeight="5">
|
||||
<circle cx="5" cy="5" r="2" fill="red" />
|
||||
</marker>
|
||||
<marker id="endDot" viewBox="0 0 10 10" refX="5" refY="5"
|
||||
markerWidth="5" markerHeight="5">
|
||||
<circle cx="5" cy="5" r="2" fill="blue" />
|
||||
</marker>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="1000" height="1000" style="fill:url(#grid);"></rect>
|
||||
</svg>
|
||||
</body>
|
||||
@@ -1,19 +0,0 @@
|
||||
# Zelos Rendering / PXT-Blockly Comparison Playground
|
||||
|
||||
## Dependencies
|
||||
```
|
||||
npm install -g http-server
|
||||
```
|
||||
|
||||
## Running the Playground:
|
||||
|
||||
In Blockly's root directory, run:
|
||||
```
|
||||
http-server ./
|
||||
```
|
||||
|
||||
and browse to:
|
||||
```
|
||||
http://127.0.0.1:8080/tests/rendering/zelos
|
||||
```
|
||||
|
||||
@@ -1,247 +0,0 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#frames {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: calc(100% - 3rem);
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#frames .row {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#frames .col {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#frames .col h2 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#frames iframe {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.output {
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<select id="selector">
|
||||
<option value="colour_blend">colour_blend</option>
|
||||
<option value="colour_picker">colour_picker</option>
|
||||
<option value="colour_random">colour_random</option>
|
||||
<option value="colour_rgb">colour_rgb</option>
|
||||
<option value="controls_flow_statements">controls_flow_statements</option>
|
||||
<option value="controls_for">controls_for</option>
|
||||
<option value="controls_forEach">controls_forEach</option>
|
||||
<option value="controls_if">controls_if</option>
|
||||
<option value="controls_if_else">controls_if_else</option>
|
||||
<option value="controls_if_elseif">controls_if_elseif</option>
|
||||
<option value="controls_if_if">controls_if_if</option>
|
||||
<option value="controls_ifelse">controls_ifelse</option>
|
||||
<option value="controls_repeat">controls_repeat</option>
|
||||
<option value="controls_repeat_ext">controls_repeat_ext</option>
|
||||
<option value="controls_whileUntil">controls_whileUntil</option>
|
||||
<option value="lists_create_empty">lists_create_empty</option>
|
||||
<option value="lists_create_with">lists_create_with</option>
|
||||
<option value="lists_create_with_container">lists_create_with_container</option>
|
||||
<option value="lists_create_with_item">lists_create_with_item</option>
|
||||
<option value="lists_getIndex">lists_getIndex</option>
|
||||
<option value="lists_getSublist">lists_getSublist</option>
|
||||
<option value="lists_indexOf">lists_indexOf</option>
|
||||
<option value="lists_isEmpty">lists_isEmpty</option>
|
||||
<option value="lists_length">lists_length</option>
|
||||
<option value="lists_repeat">lists_repeat</option>
|
||||
<option value="lists_reverse">lists_reverse</option>
|
||||
<option value="lists_setIndex">lists_setIndex</option>
|
||||
<option value="lists_sort">lists_sort</option>
|
||||
<option value="lists_split">lists_split</option>
|
||||
<option value="logic_boolean">logic_boolean</option>
|
||||
<option value="logic_compare">logic_compare</option>
|
||||
<option value="logic_negate">logic_negate</option>
|
||||
<option value="logic_null">logic_null</option>
|
||||
<option value="logic_operation">logic_operation</option>
|
||||
<option value="logic_ternary">logic_ternary</option>
|
||||
<option value="math_addition">math_addition</option>
|
||||
<option value="math_arithmetic">math_arithmetic</option>
|
||||
<option value="math_atan2">math_atan2</option>
|
||||
<option value="math_change">math_change</option>
|
||||
<option value="math_constant">math_constant</option>
|
||||
<option value="math_constrain">math_constrain</option>
|
||||
<option value="math_modulo">math_modulo</option>
|
||||
<option value="math_number">math_number</option>
|
||||
<option value="math_number_property">math_number_property</option>
|
||||
<option value="math_on_list">math_on_list</option>
|
||||
<option value="math_random_float">math_random_float</option>
|
||||
<option value="math_random_int">math_random_int</option>
|
||||
<option value="math_round">math_round</option>
|
||||
<option value="math_single">math_single</option>
|
||||
<option value="math_subtraction">math_subtraction</option>
|
||||
<option value="math_trig">math_trig</option>
|
||||
<option value="multi_block_1">multi_block_1</option>
|
||||
<option value="multi_block_logic">multi_block_logic</option>
|
||||
<option value="multi_colour_with_external">multi_colour_with_external</option>
|
||||
<option value="multi_colour_with_internal">multi_colour_with_internal</option>
|
||||
<option value="multi_stack">multi_stack</option>
|
||||
<option value="not_true">not_true</option>
|
||||
<option value="procedures_callnoreturn">procedures_callnoreturn</option>
|
||||
<option value="procedures_callreturn">procedures_callreturn</option>
|
||||
<option value="procedures_defnoreturn">procedures_defnoreturn</option>
|
||||
<option value="procedures_defreturn">procedures_defreturn</option>
|
||||
<option value="procedures_ifreturn">procedures_ifreturn</option>
|
||||
<option value="procedures_mutatorarg">procedures_mutatorarg</option>
|
||||
<option value="procedures_mutatorcontainer">procedures_mutatorcontainer</option>
|
||||
<option value="text_append">text_append</option>
|
||||
<option value="text_changeCase">text_changeCase</option>
|
||||
<option value="text_charAt">text_charAt</option>
|
||||
<option value="text_count">text_count</option>
|
||||
<option value="text_create_join_container">text_create_join_container</option>
|
||||
<option value="text_create_join_item">text_create_join_item</option>
|
||||
<option value="text_getSubstring">text_getSubstring</option>
|
||||
<option value="text_indexOf">text_indexOf</option>
|
||||
<option value="text_isEmpty">text_isEmpty</option>
|
||||
<option value="text_join">text_join</option>
|
||||
<option value="text_length">text_length</option>
|
||||
<option value="text_print">text_print</option>
|
||||
<option value="text_prompt">text_prompt</option>
|
||||
<option value="text_prompt_ext">text_prompt_ext</option>
|
||||
<option value="text_replace">text_replace</option>
|
||||
<option value="text_reverse">text_reverse</option>
|
||||
<option value="text_trim">text_trim</option>
|
||||
<option value="variables_get">variables_get</option>
|
||||
<option value="variables_get_dynamic">variables_get_dynamic</option>
|
||||
<option value="variables_set">variables_set</option>
|
||||
<option value="variables_set_dynamic">variables_set_dynamic</option>
|
||||
</select>
|
||||
<div id="frames">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h2>Zelos Rendering</h2>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h2>PXT-Blockly Rendering</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<iframe id="zelos" src="./zelos.html"></iframe>
|
||||
</div>
|
||||
<div class="col">
|
||||
<iframe id="pxtblockly" src="./pxtblockly.html"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div id="zelosout">
|
||||
<h2>Zelos Rendering</h2>
|
||||
<img id="zelosoutput" class="output" />
|
||||
</div>
|
||||
<div id="pxtblocklyout">
|
||||
<h2>PXT-Blockly Rendering</h2>
|
||||
<img id="pxtblocklyoutput" class="output" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var pxtblockly = document.getElementById('pxtblockly');
|
||||
var zelos = document.getElementById('zelos');
|
||||
var selector = document.getElementById('selector');
|
||||
var hash = document.location.hash;
|
||||
if (hash) {
|
||||
selector.value = hash.substring(1);
|
||||
}
|
||||
|
||||
window.addEventListener('message', function (msg) {
|
||||
var data = msg.data;
|
||||
if (data.type === 'svg') {
|
||||
var output = document.getElementById(data.from + 'output');
|
||||
output.src = data.text;
|
||||
}
|
||||
});
|
||||
|
||||
var current = 'zelos';
|
||||
var pause = false;
|
||||
document.getElementById('pxtblocklyout').style.display = 'none';
|
||||
setInterval(function () {
|
||||
if (!pause) {
|
||||
document.getElementById(current + 'out').style.display = 'none';
|
||||
current = current == 'zelos' ? 'pxtblockly' : 'zelos';
|
||||
document.getElementById(current + 'out').style.display = 'block';
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
pxtblockly.addEventListener('load', function () {
|
||||
updateWorkspaces(selector.value);
|
||||
});
|
||||
|
||||
zelos.addEventListener('load', function () {
|
||||
updateWorkspaces(selector.value);
|
||||
});
|
||||
|
||||
selector.addEventListener('change', function (e) {
|
||||
updateWorkspaces(e.target.value);
|
||||
});
|
||||
|
||||
function updateWorkspaces(testCase) {
|
||||
var fileName = '../../screenshot/test_cases/' + testCase;
|
||||
window.location.hash = testCase;
|
||||
|
||||
var rawFile = new XMLHttpRequest();
|
||||
rawFile.open('GET', fileName, false);
|
||||
rawFile.onreadystatechange = function () {
|
||||
if (rawFile.readyState === 4) {
|
||||
if (rawFile.status === 200 || rawFile.status == 0) {
|
||||
var xml = rawFile.responseText;
|
||||
if (xml) {
|
||||
pxtblockly.contentWindow.postMessage({
|
||||
type: 'post',
|
||||
xml: xml
|
||||
}, '*');
|
||||
zelos.contentWindow.postMessage({
|
||||
type: 'post',
|
||||
xml: xml
|
||||
}, '*');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
rawFile.send();
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', function (e) {
|
||||
if (e.keyCode === 37) {
|
||||
selector.selectedIndex = selector.selectedIndex - 1;
|
||||
updateWorkspaces(selector.value);
|
||||
} else if (e.keyCode === 39) {
|
||||
selector.selectedIndex = selector.selectedIndex + 1;
|
||||
updateWorkspaces(selector.value);
|
||||
} else if (e.keyCode === 32) {
|
||||
pause = !pause;
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,66 +0,0 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<script type="text/javascript" src="https://unpkg.com/pxt-blockly@2.1.12/blockly_compressed.js"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/pxt-blockly@2.1.12/blocks_compressed.js"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/pxt-blockly@2.1.12/msg/messages.js"></script>
|
||||
<script type="text/javascript" src="../../playgrounds/screenshot.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="blocklyDiv"></div>
|
||||
<script>
|
||||
var blocklyDiv = document.getElementById('blocklyDiv');
|
||||
var workspace;
|
||||
window.addEventListener('message', function (msg) {
|
||||
var data = msg.data;
|
||||
if (data.type !== 'post') {
|
||||
return;
|
||||
}
|
||||
var xml = data.xml;
|
||||
try {
|
||||
if (workspace) {
|
||||
workspace.dispose();
|
||||
blocklyDiv.innerHTML = '';
|
||||
}
|
||||
} catch { }
|
||||
|
||||
workspace = Blockly.inject(blocklyDiv, {
|
||||
move: {
|
||||
scrollbars: true,
|
||||
drag: true,
|
||||
wheel: false,
|
||||
},
|
||||
zoom: {
|
||||
wheel: true,
|
||||
startScale: 2,
|
||||
}
|
||||
});
|
||||
|
||||
Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(xml), workspace);
|
||||
|
||||
function postChange() {
|
||||
try {
|
||||
var topBlock = workspace.getTopBlocks()[0];
|
||||
workspaceToSvg_(workspace, function (datauri) {
|
||||
window.parent.postMessage({
|
||||
type: 'svg',
|
||||
from: 'pxtblockly',
|
||||
text: datauri
|
||||
}, '*');
|
||||
});
|
||||
} catch { }
|
||||
}
|
||||
|
||||
workspace.addChangeListener(function(e) {
|
||||
if (e.type != 'ui') {
|
||||
postChange();
|
||||
}
|
||||
});
|
||||
|
||||
postChange();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,166 +0,0 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<script type="text/javascript" src="../../../../blockly_uncompressed.js"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/pxt-blockly@2.1.12/blocks_compressed.js"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/pxt-blockly@2.1.12/msg/messages.js"></script>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#frames {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: calc(100% - 3rem);
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#frames .row {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#frames .col {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#frames .col h2 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#frames iframe {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.output {
|
||||
max-height: 300px;
|
||||
max-width: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<select id="selector">
|
||||
</select>
|
||||
<a href="../scratchblocks/">Scratch-Blocks</a>
|
||||
<script>
|
||||
var selector = document.getElementById('selector');
|
||||
for (var blockId in Blockly.Blocks) {
|
||||
if (!Object.keys(Blockly.Blocks[blockId]).length) continue;
|
||||
var option = document.createElement('option');
|
||||
option.value = blockId;
|
||||
option.textContent = blockId;
|
||||
selector.appendChild(option);
|
||||
}
|
||||
</script>
|
||||
<div id="frames">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h2>Zelos Rendering</h2>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h2>PXT-Blockly Rendering</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<iframe id="zelos" src="./zelos.html"></iframe>
|
||||
</div>
|
||||
<div class="col">
|
||||
<iframe id="pxtblockly" src="./pxtblockly.html"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div id="zelosout">
|
||||
<h2>Zelos Rendering</h2>
|
||||
<img id="zelosoutput" class="output" />
|
||||
</div>
|
||||
<div id="pxtblocklyout">
|
||||
<h2>PXT-Blockly Rendering</h2>
|
||||
<img id="pxtblocklyoutput" class="output" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var pxtblockly = document.getElementById('pxtblockly');
|
||||
var zelos = document.getElementById('zelos');
|
||||
var selector = document.getElementById('selector');
|
||||
var hash = document.location.hash;
|
||||
if (hash) {
|
||||
selector.value = hash.substring(1);
|
||||
}
|
||||
|
||||
window.addEventListener('message', function (msg) {
|
||||
var data = msg.data;
|
||||
if (data.type === 'svg') {
|
||||
var output = document.getElementById(data.from + 'output');
|
||||
output.src = data.text;
|
||||
}
|
||||
});
|
||||
|
||||
var current = 'zelos';
|
||||
var pause = false;
|
||||
document.getElementById('pxtblocklyout').style.display = 'none';
|
||||
setInterval(function () {
|
||||
if (!pause) {
|
||||
document.getElementById(current + 'out').style.display = 'none';
|
||||
current = current == 'zelos' ? 'pxtblockly' : 'zelos';
|
||||
document.getElementById(current + 'out').style.display = 'block';
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
pxtblockly.addEventListener('load', function () {
|
||||
updateWorkspaces(selector.value);
|
||||
});
|
||||
|
||||
zelos.addEventListener('load', function () {
|
||||
updateWorkspaces(selector.value);
|
||||
});
|
||||
|
||||
selector.addEventListener('change', function (e) {
|
||||
updateWorkspaces(e.target.value);
|
||||
});
|
||||
|
||||
function updateWorkspaces(testCase) {
|
||||
window.location.hash = testCase;
|
||||
var xml = `<xml xmlns="https://developers.google.com/blockly/xml">
|
||||
<block type="${testCase}"></block>
|
||||
</xml>`;
|
||||
pxtblockly.contentWindow.postMessage({
|
||||
type: 'post',
|
||||
xml: xml
|
||||
}, '*');
|
||||
zelos.contentWindow.postMessage({
|
||||
type: 'post',
|
||||
xml: xml
|
||||
}, '*');
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', function (e) {
|
||||
if (e.keyCode === 37) {
|
||||
selector.selectedIndex = selector.selectedIndex - 1;
|
||||
updateWorkspaces(selector.value);
|
||||
} else if (e.keyCode === 39) {
|
||||
selector.selectedIndex = selector.selectedIndex + 1;
|
||||
updateWorkspaces(selector.value);
|
||||
} else if (e.keyCode === 32) {
|
||||
pause = !pause;
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,68 +0,0 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<script type="text/javascript" src="https://unpkg.com/pxt-blockly@2.1.12/blockly_compressed.js"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/pxt-blockly@2.1.12/blocks_compressed.js"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/pxt-blockly@2.1.12/msg/messages.js"></script>
|
||||
<script type="text/javascript" src="../../../playgrounds/screenshot.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="blocklyDiv"></div>
|
||||
<script>
|
||||
Blockly.utils.userAgent.IE = true;
|
||||
|
||||
var blocklyDiv = document.getElementById('blocklyDiv');
|
||||
var workspace;
|
||||
window.addEventListener('message', function (msg) {
|
||||
var data = msg.data;
|
||||
if (data.type !== 'post') {
|
||||
return;
|
||||
}
|
||||
var xml = data.xml;
|
||||
try {
|
||||
if (workspace) {
|
||||
workspace.dispose();
|
||||
blocklyDiv.innerHTML = '';
|
||||
}
|
||||
} catch { }
|
||||
|
||||
workspace = Blockly.inject(blocklyDiv, {
|
||||
move: {
|
||||
scrollbars: true,
|
||||
drag: true,
|
||||
wheel: false,
|
||||
},
|
||||
zoom: {
|
||||
wheel: true,
|
||||
startScale: 2,
|
||||
}
|
||||
});
|
||||
|
||||
Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(xml), workspace);
|
||||
|
||||
function postChange() {
|
||||
try {
|
||||
var topBlock = workspace.getTopBlocks()[0];
|
||||
workspaceToSvg_(workspace, function (datauri) {
|
||||
window.parent.postMessage({
|
||||
type: 'svg',
|
||||
from: 'pxtblockly',
|
||||
text: datauri
|
||||
}, '*');
|
||||
});
|
||||
} catch { }
|
||||
}
|
||||
|
||||
workspace.addChangeListener(function(e) {
|
||||
if (e.type != 'ui') {
|
||||
postChange();
|
||||
}
|
||||
});
|
||||
|
||||
postChange();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,79 +0,0 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<script type="text/javascript" src="../../../../blockly_uncompressed.js"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/pxt-blockly@2.1.12/blocks_compressed.js"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/pxt-blockly@2.1.12/msg/messages.js"></script>
|
||||
<script type="text/javascript" src="../../../playgrounds/screenshot.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="blocklyDiv"></div>
|
||||
<script>
|
||||
goog.require('Blockly.blockRendering.Debug');
|
||||
goog.require('Blockly.zelos.Renderer');
|
||||
// Blockly.blockRendering.startDebugger();
|
||||
|
||||
var blocklyDiv = document.getElementById('blocklyDiv');
|
||||
var workspace;
|
||||
window.addEventListener('message', function (msg) {
|
||||
var data = msg.data;
|
||||
if (data.type !== 'post') {
|
||||
return;
|
||||
}
|
||||
var xml = data.xml;
|
||||
try {
|
||||
if (workspace) {
|
||||
workspace.dispose();
|
||||
blocklyDiv.innerHTML = '';
|
||||
window.parent.focus();
|
||||
}
|
||||
} catch { }
|
||||
|
||||
workspace = Blockly.inject(blocklyDiv, {
|
||||
renderer: 'zelos',
|
||||
rendererOverrides: {
|
||||
'FIELD_TEXT_FONTFAMILY': '"Helvetica Neue", "Segoe UI", Helvetica, sans-serif',
|
||||
'FIELD_TEXT_FONTWEIGHT': 'bold',
|
||||
'FIELD_TEXT_FONTSIZE': 12
|
||||
},
|
||||
move: {
|
||||
scrollbars: true,
|
||||
drag: true,
|
||||
wheel: false,
|
||||
},
|
||||
zoom: {
|
||||
wheel: true,
|
||||
startScale: 2,
|
||||
}
|
||||
});
|
||||
|
||||
Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(xml), workspace);
|
||||
|
||||
function postChange() {
|
||||
try {
|
||||
var topBlock = workspace.getTopBlocks()[0];
|
||||
workspaceToSvg_(workspace, function (datauri) {
|
||||
window.parent.postMessage({
|
||||
type: 'svg',
|
||||
from: 'zelos',
|
||||
text: datauri
|
||||
}, '*');
|
||||
});
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
|
||||
workspace.addChangeListener(function(e) {
|
||||
if (e.type != 'ui') {
|
||||
postChange();
|
||||
}
|
||||
});
|
||||
|
||||
postChange();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,166 +0,0 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<script type="text/javascript" src="../../../../blockly_uncompressed.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://unpkg.com/scratch-blocks@0.1.0-prerelease.1578322100/blocks_compressed_vertical.js"></script>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#frames {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: calc(100% - 3rem);
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#frames .row {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#frames .col {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#frames .col h2 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#frames iframe {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.output {
|
||||
max-height: 300px;
|
||||
max-width: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<select id="selector">
|
||||
</select>
|
||||
<a href="../pxtblockly/">PXT-Blockly</a>
|
||||
<script>
|
||||
var selector = document.getElementById('selector');
|
||||
for (var blockId in Blockly.Blocks) {
|
||||
if (!Object.keys(Blockly.Blocks[blockId]).length) continue;
|
||||
var option = document.createElement('option');
|
||||
option.value = blockId;
|
||||
option.textContent = blockId;
|
||||
selector.appendChild(option);
|
||||
}
|
||||
</script>
|
||||
<div id="frames">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h2>Zelos Rendering</h2>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h2>Scratch-Blocks Rendering</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<iframe id="zelos" src="./zelos.html"></iframe>
|
||||
</div>
|
||||
<div class="col">
|
||||
<iframe id="scratchblocks" src="./scratchblocks.html"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div id="zelosout">
|
||||
<h2>Zelos Rendering</h2>
|
||||
<img id="zelosoutput" class="output" />
|
||||
</div>
|
||||
<div id="scratchblocksout">
|
||||
<h2>Scratch-Blocks Rendering</h2>
|
||||
<img id="scratchblocksoutput" class="output" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var scratchblocks = document.getElementById('scratchblocks');
|
||||
var zelos = document.getElementById('zelos');
|
||||
var selector = document.getElementById('selector');
|
||||
var hash = document.location.hash;
|
||||
if (hash) {
|
||||
selector.value = hash.substring(1);
|
||||
}
|
||||
|
||||
window.addEventListener('message', function (msg) {
|
||||
var data = msg.data;
|
||||
if (data.type === 'svg') {
|
||||
var output = document.getElementById(data.from + 'output');
|
||||
output.src = data.text;
|
||||
}
|
||||
});
|
||||
|
||||
var current = 'zelos';
|
||||
var pause = false;
|
||||
document.getElementById('scratchblocksout').style.display = 'none';
|
||||
setInterval(function () {
|
||||
if (!pause) {
|
||||
document.getElementById(current + 'out').style.display = 'none';
|
||||
current = current == 'zelos' ? 'scratchblocks' : 'zelos';
|
||||
document.getElementById(current + 'out').style.display = 'block';
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
scratchblocks.addEventListener('load', function () {
|
||||
updateWorkspaces(selector.value);
|
||||
});
|
||||
|
||||
zelos.addEventListener('load', function () {
|
||||
updateWorkspaces(selector.value);
|
||||
});
|
||||
|
||||
selector.addEventListener('change', function (e) {
|
||||
updateWorkspaces(e.target.value);
|
||||
});
|
||||
|
||||
function updateWorkspaces(testCase) {
|
||||
window.location.hash = testCase;
|
||||
var xml = `<xml xmlns="https://developers.google.com/blockly/xml">
|
||||
<block type="${testCase}"></block>
|
||||
</xml>`;
|
||||
scratchblocks.contentWindow.postMessage({
|
||||
type: 'post',
|
||||
xml: xml
|
||||
}, '*');
|
||||
zelos.contentWindow.postMessage({
|
||||
type: 'post',
|
||||
xml: xml
|
||||
}, '*');
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', function (e) {
|
||||
if (e.keyCode === 37) {
|
||||
selector.selectedIndex = selector.selectedIndex - 1;
|
||||
updateWorkspaces(selector.value);
|
||||
} else if (e.keyCode === 39) {
|
||||
selector.selectedIndex = selector.selectedIndex + 1;
|
||||
updateWorkspaces(selector.value);
|
||||
} else if (e.keyCode === 32) {
|
||||
pause = !pause;
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,70 +0,0 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<script type="text/javascript"
|
||||
src="https://unpkg.com/scratch-blocks@0.1.0-prerelease.1578322100/blockly_compressed_vertical.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://unpkg.com/scratch-blocks@0.1.0-prerelease.1578322100/blocks_compressed_vertical.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://unpkg.com/scratch-blocks@0.1.0-prerelease.1578322100/msg/messages.js"></script>
|
||||
<script type="text/javascript" src="../../../playgrounds/screenshot.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="blocklyDiv"></div>
|
||||
<script>
|
||||
var blocklyDiv = document.getElementById('blocklyDiv');
|
||||
var workspace;
|
||||
window.addEventListener('message', function (msg) {
|
||||
var data = msg.data;
|
||||
if (data.type !== 'post') {
|
||||
return;
|
||||
}
|
||||
var xml = data.xml;
|
||||
try {
|
||||
if (workspace) {
|
||||
workspace.dispose();
|
||||
blocklyDiv.innerHTML = '';
|
||||
}
|
||||
} catch { }
|
||||
|
||||
workspace = Blockly.inject(blocklyDiv, {
|
||||
move: {
|
||||
scrollbars: true,
|
||||
drag: true,
|
||||
wheel: false,
|
||||
},
|
||||
zoom: {
|
||||
wheel: true,
|
||||
startScale: 2,
|
||||
},
|
||||
media: 'https://unpkg.com/scratch-blocks@0.1.0-prerelease.1578322100/media/'
|
||||
});
|
||||
|
||||
Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(xml), workspace);
|
||||
|
||||
function postChange() {
|
||||
try {
|
||||
var topBlock = workspace.getTopBlocks()[0];
|
||||
workspaceToSvg_(workspace, function (datauri) {
|
||||
window.parent.postMessage({
|
||||
type: 'svg',
|
||||
from: 'scratchblocks',
|
||||
text: datauri
|
||||
}, '*');
|
||||
});
|
||||
} catch { }
|
||||
}
|
||||
|
||||
workspace.addChangeListener(function (e) {
|
||||
if (e.type != 'ui') {
|
||||
postChange();
|
||||
}
|
||||
});
|
||||
|
||||
postChange();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,105 +0,0 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<script type="text/javascript" src="../../../../blockly_uncompressed.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://unpkg.com/scratch-blocks@0.1.0-prerelease.1578322100/blocks_compressed_vertical.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://unpkg.com/scratch-blocks@0.1.0-prerelease.1578322100/msg/messages.js"></script>
|
||||
<script type="text/javascript" src="../../../playgrounds/screenshot.js"></script>
|
||||
<script>
|
||||
|
||||
Blockly.Block.prototype.setColourFromRawValues_ = function (primary, secondary,
|
||||
tertiary) {
|
||||
primary = typeof primary === 'string' || primary instanceof String ?
|
||||
Blockly.utils.replaceMessageReferences(primary) : primary;
|
||||
secondary = typeof secondary === 'string' || secondary instanceof String ?
|
||||
Blockly.utils.replaceMessageReferences(secondary) : secondary;
|
||||
tertiary = typeof tertiary === 'string' || tertiary instanceof String ?
|
||||
Blockly.utils.replaceMessageReferences(tertiary) : tertiary;
|
||||
|
||||
this.setColour(primary);
|
||||
this.style.colourSecondary = secondary;
|
||||
this.style.colourTertiary = tertiary;
|
||||
};
|
||||
|
||||
Blockly.Block.prototype.setCategory = function (category) {
|
||||
// NOP
|
||||
};
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="blocklyDiv"></div>
|
||||
<script>
|
||||
goog.require('Blockly.blockRendering.Debug');
|
||||
goog.require('Blockly.zelos.Renderer');
|
||||
// Blockly.blockRendering.startDebugger();
|
||||
|
||||
var blocklyDiv = document.getElementById('blocklyDiv');
|
||||
var workspace;
|
||||
window.addEventListener('message', function (msg) {
|
||||
var data = msg.data;
|
||||
if (data.type !== 'post') {
|
||||
return;
|
||||
}
|
||||
var xml = data.xml;
|
||||
try {
|
||||
if (workspace) {
|
||||
workspace.dispose();
|
||||
blocklyDiv.innerHTML = '';
|
||||
window.parent.focus();
|
||||
}
|
||||
} catch { }
|
||||
|
||||
workspace = Blockly.inject(blocklyDiv, {
|
||||
renderer: 'zelos',
|
||||
rendererOverrides: {
|
||||
'FIELD_TEXT_FONTFAMILY': 'Helvetica Neue',
|
||||
'FIELD_TEXT_FONTWEIGHT': '500',
|
||||
'FIELD_TEXT_FONTSIZE': 12,
|
||||
'FIELD_BORDER_RECT_X_PADDING': 2.75 * 4,
|
||||
'ADD_START_HATS': true
|
||||
},
|
||||
move: {
|
||||
scrollbars: true,
|
||||
drag: true,
|
||||
wheel: false,
|
||||
},
|
||||
zoom: {
|
||||
wheel: true,
|
||||
startScale: 2,
|
||||
},
|
||||
media: 'https://unpkg.com/scratch-blocks@0.1.0-prerelease.1578322100/media/'
|
||||
});
|
||||
|
||||
Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(xml), workspace);
|
||||
|
||||
function postChange() {
|
||||
try {
|
||||
var topBlock = workspace.getTopBlocks()[0];
|
||||
workspaceToSvg_(workspace, function (datauri) {
|
||||
window.parent.postMessage({
|
||||
type: 'svg',
|
||||
from: 'zelos',
|
||||
text: datauri
|
||||
}, '*');
|
||||
});
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
|
||||
workspace.addChangeListener(function (e) {
|
||||
if (e.type != 'ui') {
|
||||
postChange();
|
||||
}
|
||||
});
|
||||
|
||||
postChange();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,79 +0,0 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<script type="text/javascript" src="../../../blockly_uncompressed.js"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/pxt-blockly@2.1.12/blocks_compressed.js"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/pxt-blockly@2.1.12/msg/messages.js"></script>
|
||||
<script type="text/javascript" src="../../playgrounds/screenshot.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="blocklyDiv"></div>
|
||||
<script>
|
||||
goog.require('Blockly.blockRendering.Debug');
|
||||
goog.require('Blockly.zelos.Renderer');
|
||||
// Blockly.blockRendering.startDebugger();
|
||||
|
||||
var blocklyDiv = document.getElementById('blocklyDiv');
|
||||
var workspace;
|
||||
window.addEventListener('message', function (msg) {
|
||||
var data = msg.data;
|
||||
if (data.type !== 'post') {
|
||||
return;
|
||||
}
|
||||
var xml = data.xml;
|
||||
try {
|
||||
if (workspace) {
|
||||
workspace.dispose();
|
||||
blocklyDiv.innerHTML = '';
|
||||
window.parent.focus();
|
||||
}
|
||||
} catch { }
|
||||
|
||||
workspace = Blockly.inject(blocklyDiv, {
|
||||
renderer: 'zelos',
|
||||
rendererOverrides: {
|
||||
'FIELD_TEXT_FONTFAMILY': '"Helvetica Neue", "Segoe UI", Helvetica, sans-serif',
|
||||
'FIELD_TEXT_FONTWEIGHT': 'bold',
|
||||
'FIELD_TEXT_FONTSIZE': 12
|
||||
},
|
||||
move: {
|
||||
scrollbars: true,
|
||||
drag: true,
|
||||
wheel: false,
|
||||
},
|
||||
zoom: {
|
||||
wheel: true,
|
||||
startScale: 2,
|
||||
}
|
||||
});
|
||||
|
||||
Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(xml), workspace);
|
||||
|
||||
function postChange() {
|
||||
try {
|
||||
var topBlock = workspace.getTopBlocks()[0];
|
||||
workspaceToSvg_(workspace, function (datauri) {
|
||||
window.parent.postMessage({
|
||||
type: 'svg',
|
||||
from: 'zelos',
|
||||
text: datauri
|
||||
}, '*');
|
||||
});
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
|
||||
workspace.addChangeListener(function(e) {
|
||||
if (e.type != 'ui') {
|
||||
postChange();
|
||||
}
|
||||
});
|
||||
|
||||
postChange();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user