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

Updates to the zelos rendering playground (#3420)

Browse Source
This commit is contained in:
Sam El-Husseini
2019-11-11 13:19:03 -08:00
committed by GitHub
parent cceda1589d
commit 825643f4c3
4 changed files with 103 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
tests/rendering/zelos/index.html
View File

@@ -37,6 +37,10 @@
width: 100%;
height: 500px;
}
.output {
height: 500px;
}
</style>
</head>
@@ -145,6 +149,18 @@
<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">
@@ -156,6 +172,25 @@
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);
});
@@ -179,8 +214,14 @@
if (rawFile.status === 200 || rawFile.status == 0) {
var xml = rawFile.responseText;
if (xml) {
pxtblockly.contentWindow.postMessage(xml, '*');
zelos.contentWindow.postMessage(xml, '*');
pxtblockly.contentWindow.postMessage({
type: 'post',
xml: xml
}, '*');
zelos.contentWindow.postMessage({
type: 'post',
xml: xml
}, '*');
}
}
}
@@ -195,10 +236,12 @@
} else if (e.keyCode === 39) {
selector.selectedIndex = selector.selectedIndex + 1;
updateWorkspaces(selector.value);
} else if (e.keyCode === 32) {
pause = !pause;
}
});
</script>
</body>
</html>
</html>

21
tests/rendering/zelos/pxtblockly.html
View File

@@ -4,6 +4,7 @@
<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>
@@ -12,7 +13,11 @@
var blocklyDiv = document.getElementById('blocklyDiv');
var workspace;
window.addEventListener('message', function (msg) {
var xml = msg.data;
var data = msg.data;
if (data.type !== 'post') {
return;
}
var xml = data.xml;
try {
if (workspace) {
workspace.dispose();
@@ -26,13 +31,25 @@
drag: true,
wheel: false,
},
zoom: {
wheel: true,
startScale: 2,
}
});
try {
Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(xml), workspace);
var topBlock = workspace.getTopBlocks()[0];
workspaceToSvg_(workspace, function (datauri) {
window.parent.postMessage({
type: 'svg',
from: 'pxtblockly',
text: datauri
}, '*');
});
} catch { }
});
</script>
</body>
</html>
</html>

39
tests/rendering/zelos/zelos.html
View File

@@ -4,13 +4,26 @@
<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>
<style>
.blocklyText {
<style id="blocklycss">
.blocklyText,
.blocklyHtmlInput {
font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
font-weight: bold;
font-size: 12pt;
}
.blocklyNonEditableText>text,
.blocklyEditableText>text,
.blocklyNonEditableText>g>text,
.blocklyEditableText>g>text {
fill: #575E75;
}
.blocklyHtmlInput {
color: #575E75;
}
</style>
</head>
@@ -26,7 +39,11 @@
var blocklyDiv = document.getElementById('blocklyDiv');
var workspace;
window.addEventListener('message', function (msg) {
var xml = msg.data;
var data = msg.data;
if (data.type !== 'post') {
return;
}
var xml = data.xml;
try {
if (workspace) {
workspace.dispose();
@@ -41,11 +58,25 @@
drag: true,
wheel: false,
},
zoom: {
wheel: true,
startScale: 2,
}
});
try {
Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(xml), workspace);
} catch { }
var topBlock = workspace.getTopBlocks()[0];
workspaceToSvg_(workspace, function (datauri) {
window.parent.postMessage({
type: 'svg',
from: 'zelos',
text: datauri
}, '*');
}, document.getElementById('blocklycss').innerText);
} catch (err) {
console.error(err);
}
});
</script>
</body>