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