mirror of
https://github.com/google/blockly.git
synced 2025-12-16 14:20:10 +01:00
6a4a359f7b
* Add hideChaff() to core/workspace_svg.js * Mark Blockly.hideChaff as deprecated * Update uses of Blockly.hideChaff() to WorkspaceSvg.hideChaff() in core * Update uses of Blockly.hideChaff() to WorkspaceSvg.hideChaff() in demos * Style and formatting fixes * Switch from accessor to stub wrapper for Blockly.hideChaff Co-authored-by: Christopher Allen <cpcallen+github@gmail.com> Co-authored-by: Christopher Allen <cpcallen+github@gmail.com>
174 lines
5.0 KiB
HTML
174 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Blockly Demo: Custom Turtle Field</title>
|
|
<script src="../../../blockly_uncompressed.js"></script>
|
|
<script src="blocks.js"></script>
|
|
<script src="field_turtle.js"></script>
|
|
<script src="../../../msg/js/en.js"></script>
|
|
<style>
|
|
body {
|
|
margin: 0 10%;
|
|
background-color: #fff;
|
|
font-family: sans-serif;
|
|
}
|
|
h1 {
|
|
font-weight: normal;
|
|
font-size: 140%;
|
|
}
|
|
td {
|
|
padding: 1ex;
|
|
}
|
|
img {
|
|
border: none;
|
|
}
|
|
</style>
|
|
<link rel="stylesheet" type="text/css" href="turtle.css">
|
|
</head>
|
|
<body onload="start()">
|
|
<h1>
|
|
<a href="https://developers.google.com/blockly/">Blockly</a> >
|
|
<a href="../../index.html">Demos</a> >
|
|
<a href="../index.html">Custom Fields</a> > Turtle Field</h1>
|
|
|
|
|
|
<p>This is a demo of creating custom block fields. In this case the field
|
|
is used to define a turtle.
|
|
</p>
|
|
|
|
<p>All of the custom field implementation is in
|
|
demos/custom-fields/turtle/field_turtle.js, including comments on each required
|
|
function.
|
|
</p>
|
|
|
|
<p>Click on the blocks' comment icons to learn what they are demonstrating.
|
|
Use the buttons below to see how the fields react to changes.
|
|
</p>
|
|
|
|
<p>
|
|
<input type="button" value="set random style" onclick="setRandomStyle()">
|
|
<input type="button" value="toggle shadow" onclick="toggleShadow()">
|
|
<input type="button" value="toggle enabled" onclick="toggleEnabled()">
|
|
<input type="button" value="toggle editable" onclick="toggleEditable()">
|
|
<input type="button" value="toggle collapsed" onclick="toggleCollapsed()">
|
|
</p>
|
|
|
|
<p>
|
|
<input type="button" value="Export to XML" onclick="toXml()">
|
|
<input type="button" value="Import from XML" onclick="fromXml()">
|
|
</p>
|
|
|
|
<table>
|
|
<tr>
|
|
<td>
|
|
<textarea id="importExport"
|
|
style="width: 200px; height: 480px;"></textarea>
|
|
</td>
|
|
<td>
|
|
<div id="blocklyDiv" style="width: 600px; height: 480px;"></div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<script>
|
|
function toXml() {
|
|
var output = document.getElementById('importExport');
|
|
var xml = Blockly.Xml.workspaceToDom(workspace);
|
|
output.value = Blockly.Xml.domToPrettyText(xml);
|
|
output.focus();
|
|
output.select();
|
|
}
|
|
|
|
function fromXml() {
|
|
var input = document.getElementById('importExport');
|
|
var xml = Blockly.Xml.textToDom(input.value);
|
|
Blockly.Xml.domToWorkspace(xml, workspace);
|
|
}
|
|
|
|
function setRandomStyle() {
|
|
var blocks = workspace.getAllBlocks(false);
|
|
var styles =
|
|
Object.keys(workspace.getRenderer().getConstants().blockStyles);
|
|
styles.splice(styles.indexOf(blocks[0].getStyleName()), 1);
|
|
var style = styles[Math.floor(Math.random() * styles.length)];
|
|
for(var i = 0, block; block = blocks[i]; i++) {
|
|
block.setStyle(style);
|
|
}
|
|
}
|
|
|
|
function toggleShadow() {
|
|
var blocks = workspace.getAllBlocks(false);
|
|
for(var i = 0, block; block = blocks[i]; i++) {
|
|
block.setShadow(!block.isShadow());
|
|
}
|
|
}
|
|
|
|
function toggleEnabled() {
|
|
var blocks = workspace.getAllBlocks(false);
|
|
for(var i = 0, block; block = blocks[i]; i++) {
|
|
block.setEnabled(!block.isEnabled());
|
|
}
|
|
}
|
|
|
|
function toggleEditable() {
|
|
workspace.hideChaff();
|
|
var blocks = workspace.getAllBlocks(false);
|
|
for(var i = 0, block; block = blocks[i]; i++) {
|
|
block.setEditable(!block.isEditable());
|
|
}
|
|
}
|
|
|
|
function toggleCollapsed() {
|
|
workspace.hideChaff();
|
|
var blocks = workspace.getAllBlocks(false);
|
|
for(var i = 0, block; block = blocks[i]; i++) {
|
|
block.setCollapsed(!block.isCollapsed());
|
|
}
|
|
}
|
|
|
|
function appendDom() {
|
|
var blocks = document.getElementById('workspace-blocks');
|
|
if (blocks.firstElementChild) {
|
|
Blockly.Xml.appendDomToWorkspace(blocks, workspace);
|
|
}
|
|
}
|
|
|
|
function start() {
|
|
workspace = Blockly.inject('blocklyDiv', options);
|
|
appendDom();
|
|
workspace.scrollCenter();
|
|
}
|
|
|
|
var options = {
|
|
media: '../../../media/',
|
|
grid: {
|
|
spacing: 25,
|
|
length: 3,
|
|
colour: '#ccc'
|
|
},
|
|
move: {
|
|
scrollbars: true,
|
|
drag: true,
|
|
wheel: true,
|
|
},
|
|
zoom: {
|
|
controls: true,
|
|
startScale: 1.0,
|
|
maxScale: 4,
|
|
minScale: 0.25,
|
|
scaleSpeed: 1.1
|
|
}
|
|
/*toolbox: document.getElementById('toolbox')*/
|
|
}
|
|
|
|
</script>
|
|
|
|
<xml xmlns="https://developers.google.com/blockly/xml" id="workspace-blocks" style="display: none">
|
|
<block type="turtle_basic"></block>
|
|
<block type="turtle_nullifier" y="120"></block>
|
|
<block type="turtle_changer" y="230"></block>
|
|
</xml>
|
|
</body>
|
|
</html>
|