Initial commit
This commit is contained in:
Loren Norman
commit
7a415e4329
15 changed files with 1655 additions and 0 deletions
2
.gitattributes
vendored
Normal file
2
.gitattributes
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
# Auto detect text files and perform LF normalization
|
||||||
|
* text=auto
|
||||||
127
.gitignore
vendored
Normal file
127
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,127 @@
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
.pnpm-debug.log*
|
||||||
|
|
||||||
|
# Diagnostic reports (https://nodejs.org/api/report.html)
|
||||||
|
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
|
||||||
|
|
||||||
|
# Runtime data
|
||||||
|
pids
|
||||||
|
*.pid
|
||||||
|
*.seed
|
||||||
|
*.pid.lock
|
||||||
|
|
||||||
|
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||||
|
lib-cov
|
||||||
|
|
||||||
|
# Coverage directory used by tools like istanbul
|
||||||
|
coverage
|
||||||
|
*.lcov
|
||||||
|
|
||||||
|
# nyc test coverage
|
||||||
|
.nyc_output
|
||||||
|
|
||||||
|
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
|
||||||
|
.grunt
|
||||||
|
|
||||||
|
# Bower dependency directory (https://bower.io/)
|
||||||
|
bower_components
|
||||||
|
|
||||||
|
# node-waf configuration
|
||||||
|
.lock-wscript
|
||||||
|
|
||||||
|
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||||
|
build/Release
|
||||||
|
|
||||||
|
# Dependency directories
|
||||||
|
node_modules/
|
||||||
|
jspm_packages/
|
||||||
|
|
||||||
|
# Snowpack dependency directory (https://snowpack.dev/)
|
||||||
|
web_modules/
|
||||||
|
|
||||||
|
# TypeScript cache
|
||||||
|
*.tsbuildinfo
|
||||||
|
|
||||||
|
# Optional npm cache directory
|
||||||
|
.npm
|
||||||
|
|
||||||
|
# Optional eslint cache
|
||||||
|
.eslintcache
|
||||||
|
|
||||||
|
# Optional stylelint cache
|
||||||
|
.stylelintcache
|
||||||
|
|
||||||
|
# Microbundle cache
|
||||||
|
.rpt2_cache/
|
||||||
|
.rts2_cache_cjs/
|
||||||
|
.rts2_cache_es/
|
||||||
|
.rts2_cache_umd/
|
||||||
|
|
||||||
|
# Optional REPL history
|
||||||
|
.node_repl_history
|
||||||
|
|
||||||
|
# Output of 'npm pack'
|
||||||
|
*.tgz
|
||||||
|
|
||||||
|
# Yarn Integrity file
|
||||||
|
.yarn-integrity
|
||||||
|
|
||||||
|
# dotenv environment variable files
|
||||||
|
.env
|
||||||
|
.env.development.local
|
||||||
|
.env.test.local
|
||||||
|
.env.production.local
|
||||||
|
.env.local
|
||||||
|
|
||||||
|
# parcel-bundler cache (https://parceljs.org/)
|
||||||
|
.cache
|
||||||
|
.parcel-cache
|
||||||
|
|
||||||
|
# Next.js build output
|
||||||
|
.next
|
||||||
|
out
|
||||||
|
|
||||||
|
# Nuxt.js build / generate output
|
||||||
|
.nuxt
|
||||||
|
dist
|
||||||
|
|
||||||
|
# Gatsby files
|
||||||
|
.cache/
|
||||||
|
# Comment in the public line in if your project uses Gatsby and not Next.js
|
||||||
|
# https://nextjs.org/blog/next-9-1#public-directory-support
|
||||||
|
# public
|
||||||
|
|
||||||
|
# vuepress build output
|
||||||
|
.vuepress/dist
|
||||||
|
|
||||||
|
# vuepress v2.x temp and cache directory
|
||||||
|
.temp
|
||||||
|
.cache
|
||||||
|
|
||||||
|
# Serverless directories
|
||||||
|
.serverless/
|
||||||
|
|
||||||
|
# FuseBox cache
|
||||||
|
.fusebox/
|
||||||
|
|
||||||
|
# DynamoDB Local files
|
||||||
|
.dynamodb/
|
||||||
|
|
||||||
|
# TernJS port file
|
||||||
|
.tern-port
|
||||||
|
|
||||||
|
# Stores VSCode versions used for testing VSCode extensions
|
||||||
|
.vscode-test
|
||||||
|
|
||||||
|
# yarn v2
|
||||||
|
.yarn/cache
|
||||||
|
.yarn/unplugged
|
||||||
|
.yarn/build-state.yml
|
||||||
|
.yarn/install-state.gz
|
||||||
|
.pnp.*
|
||||||
22
.npmignore
Normal file
22
.npmignore
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
|
||||||
|
# Dependency directories
|
||||||
|
node_modules/
|
||||||
|
|
||||||
|
# Generated files
|
||||||
|
dist/
|
||||||
|
build/
|
||||||
|
.DS_Store
|
||||||
|
|
||||||
|
# Optional npm cache directory
|
||||||
|
.npm
|
||||||
|
|
||||||
|
# IDEs and editors
|
||||||
|
.idea
|
||||||
|
*.sublime-workspace
|
||||||
|
.vscode/*
|
||||||
1
.tool-versions
Normal file
1
.tool-versions
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
nodejs 18.17.0
|
||||||
10
README.md
Normal file
10
README.md
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
# Blockly Tooling
|
||||||
|
|
||||||
|
A custom Blockly app needs to:
|
||||||
|
- define custom blocks
|
||||||
|
- define toolboxes of common and custom blocks
|
||||||
|
- define workspace settings, starting blocks, rules
|
||||||
|
- define custom generators
|
||||||
|
- install and configure Blockly plugins and extensions
|
||||||
|
|
||||||
|
This project tries to streamline all that into one place for dev and testing, with an import/export story to interop with tooling and production exports for embedding in other apps.
|
||||||
25
index.html
Normal file
25
index.html
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🧩</text></svg>">
|
||||||
|
<title>Blockly Sample App</title>
|
||||||
|
|
||||||
|
<script src="src/index.js" type="module"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="pageContainer">
|
||||||
|
<div id="outputPane">
|
||||||
|
<h5>JSON</h5>
|
||||||
|
<pre id="generatedCode">
|
||||||
|
<code></code>
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<h5>Markdown</h5>
|
||||||
|
<div id="output"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="blocklyDiv"></div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1148
package-lock.json
generated
Normal file
1148
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
23
package.json
Normal file
23
package.json
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
{
|
||||||
|
"name": "blockly-tool",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "A Blockly tooling project",
|
||||||
|
"main": "index.js",
|
||||||
|
"scripts": {
|
||||||
|
"start": "vite",
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"keywords": [
|
||||||
|
"blockly"
|
||||||
|
],
|
||||||
|
"author": "Loren Norman",
|
||||||
|
"license": "",
|
||||||
|
"devDependencies": {
|
||||||
|
"vite": "^4.4.9"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"blockly": "^10.1.3"
|
||||||
|
}
|
||||||
|
}
|
||||||
42
src/blocks/index.js
Normal file
42
src/blocks/index.js
Normal file
|
|
@ -0,0 +1,42 @@
|
||||||
|
import * as Blockly from 'blockly';
|
||||||
|
|
||||||
|
import * as trigger_on_change from './trigger_on_change'
|
||||||
|
|
||||||
|
|
||||||
|
const
|
||||||
|
ALL_BLOCKS = {
|
||||||
|
trigger_on_change
|
||||||
|
},
|
||||||
|
jsonGenerator = new Blockly.Generator('JSON'),
|
||||||
|
markdownGenerator = new Blockly.Generator('markdown')
|
||||||
|
|
||||||
|
export const
|
||||||
|
allBlocksJson = [],
|
||||||
|
allBlockCategories = {},
|
||||||
|
allBlockLabels = {},
|
||||||
|
allGenerators = {
|
||||||
|
json: jsonGenerator,
|
||||||
|
markdown: markdownGenerator,
|
||||||
|
}
|
||||||
|
|
||||||
|
Object.keys(ALL_BLOCKS).map(key => {
|
||||||
|
const { json, toolbox, generators } = ALL_BLOCKS[key]
|
||||||
|
|
||||||
|
// aggregate block JSON
|
||||||
|
allBlocksJson.push(json)
|
||||||
|
|
||||||
|
// sort blocks into their declared categories
|
||||||
|
const { label, category, categories=[] } = toolbox
|
||||||
|
categories.concat([category]).forEach(category => {
|
||||||
|
allBlockCategories[category] = (allBlockCategories[category] || [])
|
||||||
|
allBlockCategories[category].push(json.type)
|
||||||
|
})
|
||||||
|
|
||||||
|
if(label) {
|
||||||
|
allBlockLabels[json.type] = label
|
||||||
|
}
|
||||||
|
|
||||||
|
// register generators
|
||||||
|
jsonGenerator.forBlock[json.type] = block => generators.json(block, jsonGenerator)
|
||||||
|
markdownGenerator.forBlock[json.type] = block => generators.markdown(block, markdownGenerator)
|
||||||
|
})
|
||||||
42
src/blocks/trigger_on_change.js
Normal file
42
src/blocks/trigger_on_change.js
Normal file
|
|
@ -0,0 +1,42 @@
|
||||||
|
|
||||||
|
export const
|
||||||
|
toolbox = {
|
||||||
|
category: 'Triggers',
|
||||||
|
label: "Triggers when a feed receives a new value."
|
||||||
|
},
|
||||||
|
|
||||||
|
json = {
|
||||||
|
type: "trigger_on_change",
|
||||||
|
message0: "Feed Check: %1 Reactive? %2",
|
||||||
|
args0: [
|
||||||
|
{
|
||||||
|
type: "input_value",
|
||||||
|
name: "FEED_CHECK"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "field_checkbox",
|
||||||
|
name: "REACTIVE",
|
||||||
|
checked: true
|
||||||
|
}
|
||||||
|
],
|
||||||
|
inputsInline: false,
|
||||||
|
previousStatement: null,
|
||||||
|
nextStatement: null,
|
||||||
|
colour: 60,
|
||||||
|
tooltip: "Plug in a Feed, or Logic that references a Feed.",
|
||||||
|
helpUrl: ""
|
||||||
|
},
|
||||||
|
|
||||||
|
generators = {
|
||||||
|
json: (block, generator) => {
|
||||||
|
var value_feed_check = generator.valueToCode(block, 'FEED_CHECK', 0);
|
||||||
|
var checkbox_reactive = block.getFieldValue('REACTIVE') === 'TRUE';
|
||||||
|
// TODO: Assemble javascript into code variable.
|
||||||
|
var code = '...\n';
|
||||||
|
return code;
|
||||||
|
},
|
||||||
|
|
||||||
|
markdown: (block, generator) => {
|
||||||
|
return 'markity'
|
||||||
|
}
|
||||||
|
}
|
||||||
60
src/blocks/trigger_on_change.xml
Normal file
60
src/blocks/trigger_on_change.xml
Normal file
|
|
@ -0,0 +1,60 @@
|
||||||
|
<xml xmlns="https://developers.google.com/blockly/xml">
|
||||||
|
<block type="factory_base" id="b6/G{/rol$NA38SgaJ8q" deletable="false" movable="false" x="10" y="10">
|
||||||
|
<mutation connections="BOTH"></mutation>
|
||||||
|
<field name="NAME">trigger_on_change</field>
|
||||||
|
<field name="INLINE">EXT</field>
|
||||||
|
<field name="CONNECTIONS">BOTH</field>
|
||||||
|
<statement name="INPUTS">
|
||||||
|
<block type="input_value" id="19@il?b$a_V;F)$f{4bj">
|
||||||
|
<field name="INPUTNAME">FEED_CHECK</field>
|
||||||
|
<field name="ALIGN">LEFT</field>
|
||||||
|
<statement name="FIELDS">
|
||||||
|
<block type="field_static" id="mBA#K[0mL`AoZdj+Zcx`">
|
||||||
|
<field name="TEXT">Feed Check:</field>
|
||||||
|
</block>
|
||||||
|
</statement>
|
||||||
|
<value name="TYPE">
|
||||||
|
<shadow type="type_null" id="9gPLIk7f{~@+f%?(TS7a"></shadow>
|
||||||
|
</value>
|
||||||
|
<next>
|
||||||
|
<block type="input_dummy" id="!)h9czI+i/XUO02_ry|u">
|
||||||
|
<field name="ALIGN">LEFT</field>
|
||||||
|
<statement name="FIELDS">
|
||||||
|
<block type="field_static" id="8Gn/nezO.6NO?`uD5=c|">
|
||||||
|
<field name="TEXT">Reactive?</field>
|
||||||
|
<next>
|
||||||
|
<block type="field_checkbox" id="r9(=+Z980/IoQ[UJk(Bc">
|
||||||
|
<field name="CHECKED">TRUE</field>
|
||||||
|
<field name="FIELDNAME">REACTIVE</field>
|
||||||
|
</block>
|
||||||
|
</next>
|
||||||
|
</block>
|
||||||
|
</statement>
|
||||||
|
</block>
|
||||||
|
</next>
|
||||||
|
</block>
|
||||||
|
</statement>
|
||||||
|
<value name="TOOLTIP">
|
||||||
|
<block type="text" id="7f[ONAS~Ta3ScSB[!9pH" deletable="false" movable="false">
|
||||||
|
<field name="TEXT">Plug in a Feed, or Logic that references a Feed.</field>
|
||||||
|
</block>
|
||||||
|
</value>
|
||||||
|
<value name="HELPURL">
|
||||||
|
<block type="text" id="aP6i628P/(_u0;MXu`;N" deletable="false" movable="false">
|
||||||
|
<field name="TEXT"></field>
|
||||||
|
</block>
|
||||||
|
</value>
|
||||||
|
<value name="TOPTYPE">
|
||||||
|
<shadow type="type_null" id="eW9bs?,x2JXQZHE*_8.]"></shadow>
|
||||||
|
</value>
|
||||||
|
<value name="BOTTOMTYPE">
|
||||||
|
<shadow type="type_null" id="K1d+,^X!e)=.dAgE^ke$"></shadow>
|
||||||
|
</value>
|
||||||
|
<value name="COLOUR">
|
||||||
|
<block type="colour_hue" id="NWv?/Gla*%g19=#ijEAX">
|
||||||
|
<mutation colour="#a5a55b"></mutation>
|
||||||
|
<field name="HUE">60</field>
|
||||||
|
</block>
|
||||||
|
</value>
|
||||||
|
</block>
|
||||||
|
</xml>
|
||||||
39
src/index.css
Normal file
39
src/index.css
Normal file
|
|
@ -0,0 +1,39 @@
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
max-width: 100vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre, code {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#pageContainer {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
#blocklyDiv {
|
||||||
|
flex-basis: 100%;
|
||||||
|
height: 100%;
|
||||||
|
min-width: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#outputPane {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 400px;
|
||||||
|
flex: 0 0 400px;
|
||||||
|
overflow: auto;
|
||||||
|
margin: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#generatedCode {
|
||||||
|
height: 50%;
|
||||||
|
background-color: rgb(247, 240, 228);
|
||||||
|
}
|
||||||
|
|
||||||
|
#output {
|
||||||
|
height: 50%;
|
||||||
|
}
|
||||||
46
src/index.js
Normal file
46
src/index.js
Normal file
|
|
@ -0,0 +1,46 @@
|
||||||
|
import * as Blockly from 'blockly'
|
||||||
|
import { allBlocksJson, allGenerators } from './blocks'
|
||||||
|
import toolbox from './toolbox'
|
||||||
|
import { save, load } from './serialization'
|
||||||
|
|
||||||
|
import './index.css'
|
||||||
|
|
||||||
|
|
||||||
|
// export block library json
|
||||||
|
Blockly.defineBlocksWithJsonArray(allBlocksJson)
|
||||||
|
|
||||||
|
// inject blockly with our toolbox
|
||||||
|
const blocklyDiv = document.getElementById('blocklyDiv')
|
||||||
|
const ws = Blockly.inject(blocklyDiv, {toolbox})
|
||||||
|
|
||||||
|
// TODO: inject workspace blocks
|
||||||
|
|
||||||
|
// prepare generators and their dom targets
|
||||||
|
const codeDiv = document.getElementById('generatedCode').firstChild
|
||||||
|
const outputDiv = document.getElementById('output')
|
||||||
|
const regenerate = () => {
|
||||||
|
const json = allGenerators.json.workspaceToCode(ws)
|
||||||
|
codeDiv.innerText = json
|
||||||
|
|
||||||
|
const markdown = allGenerators.markdown.workspaceToCode(ws)
|
||||||
|
outputDiv.innerText = markdown
|
||||||
|
}
|
||||||
|
|
||||||
|
// register listeners
|
||||||
|
// auto-save on non-UI changes
|
||||||
|
ws.addChangeListener((e) => e.isUiEvent || save(ws))
|
||||||
|
|
||||||
|
// auto-regenerate code
|
||||||
|
ws.addChangeListener((e) => {
|
||||||
|
if(e.isUiEvent || // no UI events
|
||||||
|
e.type == Blockly.Events.FINISHED_LOADING || // no on-load
|
||||||
|
ws.isDragging()) // not while dragging
|
||||||
|
{ return }
|
||||||
|
|
||||||
|
regenerate()
|
||||||
|
})
|
||||||
|
|
||||||
|
// load last sketch from storage
|
||||||
|
load(ws)
|
||||||
|
// run the generators
|
||||||
|
regenerate()
|
||||||
26
src/serialization.js
Normal file
26
src/serialization.js
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
import * as Blockly from 'blockly/core'
|
||||||
|
|
||||||
|
const storageKey = 'blocklyToolWorkspace'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Saves the state of the workspace to browser's local storage.
|
||||||
|
* @param {Blockly.Workspace} workspace Blockly workspace to save.
|
||||||
|
*/
|
||||||
|
export const save = function(workspace) {
|
||||||
|
const data = Blockly.serialization.workspaces.save(workspace)
|
||||||
|
window.localStorage?.setItem(storageKey, JSON.stringify(data))
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Loads saved state from local storage into the given workspace.
|
||||||
|
* @param {Blockly.Workspace} workspace Blockly workspace to load into.
|
||||||
|
*/
|
||||||
|
export const load = function(workspace) {
|
||||||
|
const data = window.localStorage?.getItem(storageKey)
|
||||||
|
if (!data) return
|
||||||
|
|
||||||
|
// Don't emit events during loading.
|
||||||
|
Blockly.Events.disable()
|
||||||
|
Blockly.serialization.workspaces.load(JSON.parse(data), workspace, false)
|
||||||
|
Blockly.Events.enable()
|
||||||
|
}
|
||||||
42
src/toolbox.js
Normal file
42
src/toolbox.js
Normal file
|
|
@ -0,0 +1,42 @@
|
||||||
|
import { allBlockCategories, allBlockLabels } from './blocks'
|
||||||
|
|
||||||
|
const SEP = '---'
|
||||||
|
const toolboxConfig = [
|
||||||
|
{ name: 'IO' },
|
||||||
|
{ name: 'Feeds', colour: '0' },
|
||||||
|
{ name: 'Triggers', colour: 52, contents: [ 'trigger_on_change' ] },
|
||||||
|
{ name: 'Actions', colour: 104 },
|
||||||
|
SEP,
|
||||||
|
{ name: 'Tools' },
|
||||||
|
{ name: 'Values', colour: 156 },
|
||||||
|
{ name: 'Variables', colour: 208 },
|
||||||
|
{ name: 'Math', colour: 260 },
|
||||||
|
{ name: 'Logic', colour: 312 },
|
||||||
|
]
|
||||||
|
|
||||||
|
export default {
|
||||||
|
kind: 'categoryToolbox',
|
||||||
|
contents: toolboxConfig.reduce((acc, category, idx) => {
|
||||||
|
if(category === SEP) {
|
||||||
|
acc.push({ kind: 'sep' })
|
||||||
|
|
||||||
|
// } else if(category.label) {
|
||||||
|
// acc.push({ kind: 'label', text: category.label })
|
||||||
|
|
||||||
|
} else {
|
||||||
|
const colour = category.colour// || Math.floor(idx*360/toolboxConfig.length).toString()
|
||||||
|
acc.push({
|
||||||
|
kind: 'category',
|
||||||
|
name: category.name,
|
||||||
|
colour,
|
||||||
|
disabled: !!category.disabled,
|
||||||
|
contents: (allBlockCategories[category.name] || []).reduce((acc, type) => {
|
||||||
|
allBlockLabels[type] && acc.push({ kind: 'label', text: allBlockLabels[type] })
|
||||||
|
acc.push({ kind: 'block', type })
|
||||||
|
return acc
|
||||||
|
} , [])
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return acc
|
||||||
|
}, [])
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue