mirror of
https://github.com/google/blockly.git
synced 2026-01-09 10:00:09 +01:00
Add two new zelos rendering playgrounds for all the blocks in pxtblockly and scratchblocks. (#3582)
This commit is contained in:
Sam El-Husseini
GitHub
@@ -65,10 +65,10 @@ function workspaceToSvg_(workspace, callback, customCss) {
|
||||
}
|
||||
|
||||
var bBox = workspace.getBlocksBoundingBox();
|
||||
var x = bBox.left;
|
||||
var y = bBox.top;
|
||||
var width = bBox.right - x;
|
||||
var height = bBox.bottom - y;
|
||||
var x = bBox.x || bBox.left;
|
||||
var y = bBox.y || bBox.top;
|
||||
var width = bBox.width || bBox.right - x;
|
||||
var height = bBox.height || bBox.bottom - y;
|
||||
|
||||
var blockCanvas = workspace.getCanvas();
|
||||
var clone = blockCanvas.cloneNode(true);
|
||||
|
||||
166
tests/rendering/zelos/pxtblockly/index.html
Normal file
166
tests/rendering/zelos/pxtblockly/index.html
Normal file
@@ -0,0 +1,166 @@
|
||||
<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>
|
||||
68
tests/rendering/zelos/pxtblockly/pxtblockly.html
Normal file
68
tests/rendering/zelos/pxtblockly/pxtblockly.html
Normal file
@@ -0,0 +1,68 @@
|
||||
<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>
|
||||
102
tests/rendering/zelos/pxtblockly/zelos.html
Normal file
102
tests/rendering/zelos/pxtblockly/zelos.html
Normal file
@@ -0,0 +1,102 @@
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<body>
|
||||
<div id="blocklyDiv"></div>
|
||||
<script>
|
||||
goog.require('Blockly.blockRendering.Debug');
|
||||
goog.require('Blockly.zelos.Renderer');
|
||||
// Blockly.blockRendering.startDebugger();
|
||||
|
||||
// This stub is a workaround in order to load pxt-blockly blocks, as they
|
||||
// rely on a setOutputShape method on the block.
|
||||
Blockly.BlockSvg.prototype.setOutputShape = function() { };
|
||||
|
||||
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',
|
||||
move: {
|
||||
scrollbars: true,
|
||||
drag: true,
|
||||
wheel: false,
|
||||
},
|
||||
zoom: {
|
||||
wheel: true,
|
||||
startScale: 2,
|
||||
}
|
||||
});
|
||||
var constants = workspace.getRenderer().getConstants();
|
||||
constants.FIELD_TEXT_FONTSIZE = 12;
|
||||
constants.FIELD_TEXT_FONTWEIGHT = 'bold';
|
||||
constants.FIELD_TEXT_FONTFAMILY = 'Helvetica Neue';
|
||||
|
||||
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
|
||||
}, '*');
|
||||
}, document.getElementById('blocklycss').innerText);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
|
||||
workspace.addChangeListener(function(e) {
|
||||
if (e.type != 'ui') {
|
||||
postChange();
|
||||
}
|
||||
});
|
||||
|
||||
postChange();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
166
tests/rendering/zelos/scratchblocks/index.html
Normal file
166
tests/rendering/zelos/scratchblocks/index.html
Normal file
@@ -0,0 +1,166 @@
|
||||
<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>
|
||||
70
tests/rendering/zelos/scratchblocks/scratchblocks.html
Normal file
70
tests/rendering/zelos/scratchblocks/scratchblocks.html
Normal file
@@ -0,0 +1,70 @@
|
||||
<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>
|
||||
135
tests/rendering/zelos/scratchblocks/zelos.html
Normal file
135
tests/rendering/zelos/scratchblocks/zelos.html
Normal file
@@ -0,0 +1,135 @@
|
||||
<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>
|
||||
|
||||
<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;
|
||||
}
|
||||
.zelos-renderer .blocklyText {
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<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();
|
||||
|
||||
// This stub is a workaround in order to load pxt-blockly blocks, as they
|
||||
// rely on a setOutputShape method on the block.
|
||||
Blockly.BlockSvg.prototype.setOutputShape = function () { };
|
||||
|
||||
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',
|
||||
move: {
|
||||
scrollbars: true,
|
||||
drag: true,
|
||||
wheel: false,
|
||||
},
|
||||
zoom: {
|
||||
wheel: true,
|
||||
startScale: 2,
|
||||
},
|
||||
media: 'https://unpkg.com/scratch-blocks@0.1.0-prerelease.1578322100/media/'
|
||||
});
|
||||
var constants = workspace.getRenderer().getConstants();
|
||||
constants.FIELD_TEXT_FONTSIZE = 12;
|
||||
constants.FIELD_TEXT_FONTWEIGHT = '500';
|
||||
constants.FIELD_TEXT_FONTFAMILY = 'Helvetica Neue';
|
||||
|
||||
constants.FIELD_BORDER_RECT_X_PADDING = 2.75 * constants.GRID_UNIT;
|
||||
|
||||
constants.ADD_START_HATS = true;
|
||||
|
||||
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
|
||||
}, '*');
|
||||
}, document.getElementById('blocklycss').innerText);
|
||||
} 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