mirror of
https://github.com/google/blockly.git
synced 2026-01-18 22:37:09 +01:00
817ffab754
Refactor bootstrap.js and bootstrap_helper.js to be able to deal with generator chunks. In particular for each chunk, specify: - The goog.module ID to goog.require() in uncompressed mode. - The script filename to load in compressed mode. - Where the chunk's UMD wrapper will save the export object when loaded as a script. - What global variable the chunk's export object should be saved in (if desired). - Any individual named exports to destructure to global variables. This allows the bootstrap scripts to be slightly simpler while also being more flexible.
177 lines
4.7 KiB
HTML
177 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Advanced Blockly Playground</title>
|
|
|
|
<script>
|
|
var BLOCKLY_BOOTSTRAP_OPTIONS = {
|
|
scripts: [
|
|
'build/msg/en.js',
|
|
'tests/playgrounds/screenshot.js',
|
|
'tests/themes/test_themes.js',
|
|
'node_modules/@blockly/dev-tools/dist/index.js',
|
|
'node_modules/@blockly/theme-modern/dist/index.js',
|
|
],
|
|
};
|
|
</script>
|
|
<script src="../bootstrap.js"></script>
|
|
|
|
<script type="module">
|
|
// Wait for Blockly to finish loading.
|
|
import '../bootstrap_done.mjs';
|
|
|
|
function start() {
|
|
setBackgroundColour();
|
|
initPlayground();
|
|
}
|
|
|
|
function createWorkspace(blocklyDiv, options) {
|
|
var workspace = Blockly.inject(blocklyDiv, options);
|
|
workspace.configureContextMenu = configureContextMenu.bind(workspace);
|
|
return workspace;
|
|
}
|
|
|
|
function configurePlayground(playground) {
|
|
// Rendering options.
|
|
var gui = playground.getGUI();
|
|
var renderingFolder = gui.addFolder('Rendering');
|
|
var renderingOptions = {
|
|
'font Size': 10,
|
|
};
|
|
renderingFolder
|
|
.add(renderingOptions, 'font Size', 0, 50)
|
|
.onChange(function (value) {
|
|
var ws = playground.getWorkspace();
|
|
var fontStyle = {
|
|
'size': value,
|
|
};
|
|
ws.getTheme().setFontStyle(fontStyle);
|
|
// Refresh theme.
|
|
ws.setTheme(ws.getTheme());
|
|
});
|
|
}
|
|
|
|
function initPlayground() {
|
|
if (typeof window.createPlayground === 'undefined') {
|
|
alert(
|
|
"You need to run 'npm install' in order to use this playground."
|
|
);
|
|
return;
|
|
}
|
|
var defaultOptions = {
|
|
comments: true,
|
|
collapse: true,
|
|
disable: true,
|
|
grid: {
|
|
spacing: 25,
|
|
length: 3,
|
|
colour: '#ccc',
|
|
snap: true,
|
|
},
|
|
horizontalLayout: false,
|
|
maxBlocks: Infinity,
|
|
maxInstances: {'test_basic_limit_instances': 3},
|
|
maxTrashcanContents: 256,
|
|
media: '../../media/',
|
|
oneBasedIndex: true,
|
|
readOnly: false,
|
|
rtl: false,
|
|
move: {
|
|
scrollbars: true,
|
|
drag: true,
|
|
wheel: false,
|
|
},
|
|
toolbox: toolboxCategories,
|
|
toolboxPosition: 'start',
|
|
renderer: 'geras',
|
|
zoom: {
|
|
controls: true,
|
|
wheel: true,
|
|
startScale: 1.0,
|
|
maxScale: 4,
|
|
minScale: 0.25,
|
|
scaleSpeed: 1.1,
|
|
},
|
|
};
|
|
|
|
const playgroundConfig = {
|
|
toolboxes: {
|
|
'categories': toolboxCategories,
|
|
'simple': toolboxSimple,
|
|
'test blocks': toolboxTestBlocks,
|
|
},
|
|
};
|
|
|
|
createPlayground(
|
|
document.getElementById('root'),
|
|
createWorkspace,
|
|
defaultOptions,
|
|
playgroundConfig,
|
|
'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.19.2/min/vs'
|
|
).then(function (playground) {
|
|
configurePlayground(playground);
|
|
});
|
|
}
|
|
|
|
function setBackgroundColour() {
|
|
// Set background colour to differentiate file: vs. localhost
|
|
// vs. server copy.
|
|
if (location.protocol == 'file:') {
|
|
document.body.style.backgroundColor = '#89A203'; // Unpleasant green.
|
|
} else if (
|
|
location.hostname === 'localhost' ||
|
|
location.hostname === '127.0.0.1' ||
|
|
location.hostname === '[::1]'
|
|
) {
|
|
document.body.style.backgroundColor = '#d6d6ff'; // Familliar lilac.
|
|
}
|
|
}
|
|
|
|
function configureContextMenu(menuOptions, e) {
|
|
var workspace = this;
|
|
var screenshotOption = {
|
|
text: 'Download Screenshot',
|
|
enabled: workspace.getTopBlocks().length,
|
|
callback: function () {
|
|
downloadScreenshot(workspace);
|
|
},
|
|
};
|
|
menuOptions.push(screenshotOption);
|
|
|
|
// Adds a default-sized workspace comment to the workspace.
|
|
menuOptions.push(
|
|
Blockly.ContextMenu.workspaceCommentOption(workspace, e)
|
|
);
|
|
}
|
|
start();
|
|
</script>
|
|
|
|
<style>
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
}
|
|
|
|
.ioLabel > .blocklyFlyoutLabelText {
|
|
font-style: italic;
|
|
}
|
|
|
|
.playgroundToggleOptions {
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
.playgroundToggleOptions li {
|
|
margin-top: 1em;
|
|
}
|
|
|
|
.zelos-renderer .blocklyFlyoutButton .blocklyText {
|
|
font-size: 1.5rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
</body>
|
|
</html>
|