30:Tb38,html`

${Tutorial.blocklyExecutionView({ width: width / 2, height: Global.Height })}

`31:Tb66,function setupToolbar(Blockly) { var tabs = document.getElementsByClassName("tab_item"); var changeActive = e => { var tabs = document.getElementsByClassName("tab_item"); for (var i = 0; i < tabs.length; i++) { tabs[i].classList.remove("is-active"); } for (var i = 0; i < e.path.length; i++) { if (e.path[i].classList.contains("tab_item")) { e.path[i].classList.add("is-active"); break; } } }; for (var i = 0; i < tabs.length; i++) { tabs[i].addEventListener("click", changeActive); } const toolbarBlockly = document.querySelector("#toolbar_blockly"); const toolbarCodeMirror = document.querySelector("#toolbar_codemirror"); const toolbarBlocklySave = document.querySelector("#toolbar_blockly_save"); const toolbarBlocklyRestore = document.querySelector( "#toolbar_blockly_restore" ); const toolbarLog = document.querySelector("#toolbar_log"); const blockly_editor = document.querySelector("#blockly_editor"); const codemirror_editor = document.querySelector("#codemirror_editor"); const blockly_save_workspace = document.querySelector( "#blockly-save-workspace" ); const blockly_restore_workspace = document.querySelector( "#blockly-restore-workspace" ); const blockly_save_content = document.querySelector("#blockly-save-content"); const blockly_restore_content = document.querySelector( "#blockly-restore-content" ); const blockly_log_workspace = document.querySelector( "#blockly-log-workspace" ); redirectLogs("#blockly-log-workspace"); const workspaces = [ blockly_editor, codemirror_editor, blockly_save_workspace, blockly_restore_workspace, blockly_log_workspace ]; const switchActiveWorkspace = ind => { for (let i = 0; i < workspaces.length; i++) { if (i == ind) { workspaces[i].style.display = "block"; } else { workspaces[i].style.display = "none"; } } }; // Toolbar onclick Handles toolbarBlockly.onclick = () => { switchActiveWorkspace(0); }; toolbarCodeMirror.onclick = () => { switchActiveWorkspace(1); if (window.editor) { codeMirrorSetFocus(window.editor); } }; toolbarBlocklySave.onclick = () => { switchActiveWorkspace(2); const blocks = Blockly.Xml.workspaceToDom(Blockly.mainWorkspace); const text = Blockly.Xml.domToPrettyText(blocks); blockly_save_content.value = text; }; toolbarBlocklyRestore.onclick = () => { switchActiveWorkspace(3); }; toolbarLog.onclick = () => { switchActiveWorkspace(4); }; // Restore Blocks Handler blockly_restore_content.oninput = () => { const content = blockly_restore_content.value; if (content != "") { Blockly.mainWorkspace.clear(); const blocks = Blockly.Xml.textToDom(content); Blockly.Xml.domToWorkspace(Blockly.mainWorkspace, blocks); } }; }32:[] 2e:{"title":"Blockly Editor","cells":[{"id":0,"value":"md`# Blockly Editor`","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"html`${blocklyCreateVariableWidget(Blockly)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"md`## Configuration`","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"Global = {\n return {\n ToolBarHeight: 42,\n Height: 540,\n WorkspaceHeight: 510,\n LocalStorageKeys: {\n WorkspaceXML: 'WorkspaceXML'\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"md`## Initialization`","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"{\n const workspace = initializeBlocklyWorkspace(Tutorial.blocklyToolbox);\n\n workspace.addChangeListener(() => {\n const code = Tutorial.blocklyWorkspaceToCode(Blockly, workspace);\n\n window.editor.setValue(BeautifyJS.js_beautify(code));\n\n Tutorial.blocklyWorkspaceExecution(code);\n });\n\n return \"Ready\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"function initializeBlocklyWorkspace(toolbox) {\n const container = document.querySelector('#blockly_editor');\n removeAllChildNodes(container);\n\n const workspace = Blockly.inject('blockly_editor', {\n media: 'https://unpkg.com/blockly/media/',\n toolbox: Tutorial.blocklyToolbox(Blockly),\n grid: { spacing: 20, length: 3, colour: '#ccc', snap: true },\n zoom: {\n controls: true,\n wheel: true,\n startScale: 1.0,\n maxScale: 1.6,\n minScale: 1.0,\n scaleSpeed: 0.4\n },\n trashcan: true\n });\n\n setupToolbar(Blockly);\n\n return workspace;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"md`### Toolbar`","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":370,"value":"md`### Debug`","pinned":false,"hidden":false,"mode":"ojs"},{"id":373,"value":"md`#### console.log`","pinned":false,"hidden":false,"mode":"ojs"},{"id":376,"value":"function redirectLogs(containerID) {\n const logs = document.querySelector(containerID);\n\n const logger = color => {\n return message => {\n const line = document.createElement('p');\n line.classList.add(color);\n line.innerHTML = `${formatTime(new Date())} ${message}`;\n\n logs.appendChild(line);\n };\n };\n\n const con = {\n ...window.console,\n debug: logger('has-text-link'),\n log: logger('has-text-black'),\n info: logger('has-text-primary'),\n error: logger('has-text-danger')\n };\n\n window.console = con;\n\n console.debug(\"This is a debug message.\");\n console.log(\"This is a log message.\");\n console.info(\"This is a info message.\");\n console.error(\"This is a error message.\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"md`### Bulma CSS`","pinned":false,"hidden":false,"mode":"ojs"},{"id":269,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"md`### Scripts`","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"import { requireBlockly } from '@fengyfei/blockly/2'","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"import { removeAllChildNodes } from '@fengyfei/html'","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"import {\n blocklyCreateVariableWidget,\n createCodeMirrorWidget,\n codeMirrorSetFocus\n} from '@fengyfei/blockly-widgets'","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"import { formatTime } from '@fengyfei/date-time'","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"Blockly = requireBlockly()","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"BeautifyJS = require('https://cdn.rawgit.com/beautify-web/js-beautify/v1.13.6/js/lib/beautify.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":406,"value":"import { Tutorial } from '@fengyfei/blockly-canvas-basic'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}