25:null 26:["$","title",null,{"children":"Blockly Editor | AbserAri | Observable"}] 2b:T6f9,html`

`2c:T44e,function setupToolbar() { 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 blockly_editor = document.querySelector("#blockly_editor"); const codemirror_editor = document.querySelector("#codemirror_editor"); toolbarBlockly.onclick = () => { blockly_editor.style.display = "block"; codemirror_editor.style.display = "none"; }; toolbarCodeMirror.onclick = () => { blockly_editor.style.display = "none"; codemirror_editor.style.display = "block"; }; }2d:[] 29:{"id":"25b3fd1dcb41d790","slug":"blockly-editor/2","title":"Blockly Editor","thumbnail":"f63e415abbdfddc3ab18be0adc36dbd7cec09983ed4a6b593f8d75487295e7e3","access_level":"public","create_time":"$D2021-03-11T02:43:58.719Z","update_time":"$D2021-03-11T05:53:07.032Z","view_time":null,"first_public_time":"$D2021-03-11T02:54:59.584Z","has_unpublished_edits":null,"fork":{"id":"068495065739592e","slug":"blockly-editor","title":"Blockly Editor","owner":{"id":"2a278c3908e45a90","login":"fengyfei","name":"Feng Yifei"}},"stars":0,"starred":false,"owner":{"type":"team","id":"8c968b856895152e","login":"yhyddr","name":"AbserAri","avatar_url":"https://avatars-next.observableusercontent.com/52e627081ba2d80c7443d9aa2d2f732769d9872798ccdeb00090f1cd68156140","tier":"starter_2024"},"version":293,"publish_version":293,"role":null,"authored":false,"authors":[{"type":"individual","id":"3935e5bc2f09179e","login":"yhyddr","name":"AbserAri","avatar_url":"https://avatars-next.observableusercontent.com/52e627081ba2d80c7443d9aa2d2f732769d9872798ccdeb00090f1cd68156140","tier":null}],"members":[{"type":"individual","id":"3935e5bc2f09179e","login":"yhyddr","name":"AbserAri","avatar_url":"https://avatars-next.observableusercontent.com/52e627081ba2d80c7443d9aa2d2f732769d9872798ccdeb00090f1cd68156140","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Blockly Editor","cells":[{"id":0,"value":"md`# Blockly Editor`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"md`## Configuration`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"Global = {\n return {\n ToolBarHeight: 41,\n Height: 540\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"md`## Framework`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"html`${blocklyCreateVariableWidget(Blockly)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"$2b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"function registerBlocklyCanvasExtensions(Blockly) {\n const category = {\n name: \"画板\",\n kind: \"category\",\n colour: 20,\n contents: [\n {\n name: \"路径\",\n kind: \"category\",\n colour: 120,\n contents: [\n canvasBeginPath(Blockly),\n canvasMoveTo(Blockly),\n canvasLineTo(Blockly)\n ]\n },\n {\n name: \"形状\",\n kind: \"category\",\n colour: 160,\n contents: [canvasRect(Blockly), canvasBlocklyArc(Blockly)]\n },\n {\n name: \"绘制\",\n kind: \"category\",\n colour: 180,\n contents: [canvasStroke(Blockly)]\n }\n ]\n };\n\n return category;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"function execution(code) {\n const canvas = document.getElementById('canvas');\n const context = canvas.getContext(\"2d\");\n\n try {\n eval(code);\n } catch (e) {\n console.log(e);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"workspace = {\n const container = document.querySelector('#blockly_editor');\n removeAllChildNodes(container);\n\n setupToolbar();\n\n const workspace = Blockly.inject('blockly_editor', {\n media: 'https://unpkg.com/blockly/media/',\n toolbox: extendedToolboxConfiguration(Blockly, [\n registerBlocklyCanvasExtensions(Blockly)\n ]),\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 return workspace;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"{\n workspace.addChangeListener(() => {\n const code = `function draw(context) {\\n${Blockly.JavaScript.workspaceToCode(\n workspace\n )}}\n \n context.clearRect(0, 0, canvas.width, canvas.height);\n draw(context);`;\n\n window.editor.setValue(BeautifyJS.js_beautify(code));\n\n execution(code);\n });\n\n return \"Ready\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"md`### Tailwind CSS`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"md`### Scripts`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"import {\n requireBlockly,\n defaultToolboxConfiguration,\n extendedToolboxConfiguration\n} from '@fengyfei/blockly/2'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"import { removeAllChildNodes } from '@fengyfei/html'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"import {\n canvasBeginPath,\n canvasMoveTo,\n canvasLineTo,\n canvasStroke,\n canvasRect,\n canvasBlocklyArc\n} from '@fengyfei/blockly-canvas-extensions'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"import {\n blocklyCreateVariableWidget,\n createCodeMirrorWidget\n} from '@fengyfei/blockly-widgets'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"Blockly = requireBlockly()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2d","stdlib":"1","titling":"auto"}} 2a:"$29:body"