default workspace blocks

index.html

@@ -11,12 +11,10 @@
     <div id="pageContainer">
       <div id="outputPane">
         <h5>JSON</h5>
-        <pre id="generatedCode">
-          <code></code>
-        </pre>
+        <pre id="json-output-container"><code id="json-output"></code></pre>
 
         <h5>Markdown</h5>
-        <div id="output"></div>
+        <div id="markdown-output"></div>
       </div>
 
       <div id="blocklyDiv"></div>

src/blocks/action_root.js

@@ -0,0 +1,89 @@
+
+export const
+  toolbox = { },
+
+  json = {
+    "type": "action_root",
+    "message0": "Action Root %1 Max Frequency: %2 %3 %4 Triggers %5 Any: %6 %7 Actions %8 All: %9",
+    "args0": [
+      {
+        "type": "input_dummy",
+        "align": "CENTRE"
+      },
+      {
+        "type": "field_dropdown",
+        "name": "ACTION_FREQUENCY",
+        "options": [
+          [
+            "10 seconds",
+            "10"
+          ],
+          [
+            "30 seconds",
+            "30"
+          ],
+          [
+            "1 minute",
+            "60"
+          ],
+          [
+            "5 minutes",
+            "300"
+          ],
+          [
+            "1 hour",
+            "3600"
+          ]
+        ]
+      },
+      {
+        "type": "input_dummy"
+      },
+      {
+        "type": "input_dummy",
+        "align": "CENTRE"
+      },
+      {
+        "type": "input_dummy",
+        "align": "CENTRE"
+      },
+      {
+        "type": "input_statement",
+        "name": "TRIGGERS"
+      },
+      {
+        "type": "input_dummy",
+        "align": "CENTRE"
+      },
+      {
+        "type": "input_dummy",
+        "align": "CENTRE"
+      },
+      {
+        "type": "input_statement",
+        "name": "ACTIONS"
+      }
+    ],
+    "colour": 120,
+    "tooltip": "",
+    "helpUrl": ""
+  },
+
+  generators = {
+    json: (block, generator) => {
+      // TODO
+      var json = '{ "name": "action_root" }'
+      return json
+    },
+
+    markdown: (block, generator) => {
+      return '# Action Root'
+    }
+  }
+
+
+
+
+
+
+

src/blocks/index.js

@@ -1,11 +1,13 @@
 import * as Blockly from 'blockly';
 
+import * as action_root from './action_root'
 import * as trigger_on_change from './trigger_on_change'
 
 
 const
   ALL_BLOCKS = {
-    trigger_on_change
+    action_root,
+    trigger_on_change,
   },
   jsonGenerator = new Blockly.Generator('JSON'),
   markdownGenerator = new Blockly.Generator('markdown')

src/index.css

@@ -29,11 +29,11 @@ pre, code {
     margin: 1rem;
 }
 
-#generatedCode {
+#json-output-container {
     height: 50%;
     background-color: rgb(247, 240, 228);
 }
 
-#output {
+#markdown-output {
     height: 50%;
 }

src/index.js

@@ -2,6 +2,7 @@ import * as Blockly from 'blockly'
 import { allBlocksJson, allGenerators } from './blocks'
 import toolbox from './toolbox'
 import { save, load } from './serialization'
+import workspaceBlocks from './workspace.xml?raw'
 
 import './index.css'
 
@@ -11,36 +12,38 @@ Blockly.defineBlocksWithJsonArray(allBlocksJson)
 
 // inject blockly with our toolbox
 const blocklyDiv = document.getElementById('blocklyDiv')
-const ws = Blockly.inject(blocklyDiv, {toolbox})
+const workspace = Blockly.inject(blocklyDiv, {toolbox})
 
-// TODO: inject workspace blocks
+// inject workspace blocks
+Blockly.Xml.domToWorkspace(Blockly.utils.xml.textToDom(workspaceBlocks, 'text/xml'), workspace)
 
 // prepare generators and their dom targets
-const codeDiv = document.getElementById('generatedCode').firstChild
-const outputDiv = document.getElementById('output')
+const jsonOutputDiv = document.getElementById('json-output')
+const markdownOutputDiv = document.getElementById('markdown-output')
 const regenerate = () => {
-  const json = allGenerators.json.workspaceToCode(ws)
-  codeDiv.innerText = json
+  const json = allGenerators.json.workspaceToCode(workspace)
+  jsonOutputDiv.innerText = json
+  console.log("json:", json)
 
-  const markdown = allGenerators.markdown.workspaceToCode(ws)
-  outputDiv.innerText = markdown
+  const markdown = allGenerators.markdown.workspaceToCode(workspace)
+  markdownOutputDiv.innerText = markdown
 }
 
 // register listeners
 // auto-save on non-UI changes
-ws.addChangeListener((e) => e.isUiEvent || save(ws))
+workspace.addChangeListener((e) => e.isUiEvent || save(workspace))
 
 // auto-regenerate code
-ws.addChangeListener((e) => {
+workspace.addChangeListener((e) => {
   if(e.isUiEvent || // no UI events
      e.type == Blockly.Events.FINISHED_LOADING || // no on-load
-     ws.isDragging()) // not while dragging
+     workspace.isDragging()) // not while dragging
   { return }
 
   regenerate()
 })
 
 // load last sketch from storage
-load(ws)
+load(workspace)
 // run the generators
 regenerate()

src/workspace.xml

@@ -0,0 +1,5 @@
+<xml xmlns="https://developers.google.com/blockly/xml" id="workspaceBlocks" style="display: none">
+  <block type="action_root" id="KQN$}3HRW/nG0PBrd^Lo" deletable="false" movable="false" x="163" y="63">
+    <field name="ACTION_FREQUENCY">10</field>
+  </block>
+</xml>

vite.config.js

@@ -0,0 +1,5 @@
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  assetsInclude: ['**/*.xml'],
+})