mirror of
https://github.com/The-Low-Code-Foundation/OpenNoodl.git
synced 2026-01-13 15:52:56 +01:00
docs(blockly): Add Phase B1 completion document
Documents successful node registration and provides manual testing checklist
This commit is contained in:
Richard Osborne
@@ -0,0 +1,209 @@
|
||||
# Phase B1 Complete: Logic Builder Node Registration
|
||||
|
||||
**Status:** ✅ Complete - Ready for Manual Testing
|
||||
|
||||
**Date:** 2026-01-11
|
||||
|
||||
---
|
||||
|
||||
## What Was Accomplished
|
||||
|
||||
### 1. IODetector Utility
|
||||
|
||||
**File:** `packages/noodl-editor/src/editor/src/utils/IODetector.ts`
|
||||
|
||||
- Scans Blockly workspace JSON for Input/Output blocks
|
||||
- Auto-detects inputs, outputs, signal inputs, and signal outputs
|
||||
- Supports both explicit definitions and implicit usage detection
|
||||
- Returns typed structure with port information
|
||||
|
||||
### 2. Logic Builder Runtime Node
|
||||
|
||||
**File:** `packages/noodl-runtime/src/nodes/std-library/logic-builder.js`
|
||||
|
||||
**Features:**
|
||||
|
||||
- Stores Blockly workspace as JSON parameter
|
||||
- Dynamically creates ports based on detected I/O
|
||||
- Executes generated JavaScript code
|
||||
- Provides full Noodl API context (Variables, Objects, Arrays)
|
||||
- Signal-triggered execution
|
||||
- Error handling and reporting
|
||||
|
||||
**Inputs:**
|
||||
|
||||
- `workspace` - JSON string of Blockly workspace
|
||||
- `generatedCode` - JavaScript generated from blocks
|
||||
- Dynamic inputs detected from workspace
|
||||
|
||||
**Outputs:**
|
||||
|
||||
- `error` - Error message if execution fails
|
||||
- Dynamic outputs detected from workspace
|
||||
- Dynamic signal outputs
|
||||
|
||||
### 3. Node Registration
|
||||
|
||||
- Added to `packages/noodl-runtime/noodl-runtime.js` in Custom Code section
|
||||
- Added to node picker under "Custom Code" category
|
||||
- Configured with proper metadata (color: 'javascript', category: 'CustomCode')
|
||||
|
||||
---
|
||||
|
||||
## Manual Testing Checkpoint
|
||||
|
||||
### Test 1: Node Appears in Picker ✅ READY
|
||||
|
||||
**Steps:**
|
||||
|
||||
1. Run `npm run dev` to start the editor
|
||||
2. Open any project
|
||||
3. Click "Add Node" (or right-click canvas)
|
||||
4. Navigate to **Custom Code** category
|
||||
5. Look for "Logic Builder" node
|
||||
|
||||
**Expected Result:**
|
||||
|
||||
- Node appears in Custom Code section
|
||||
- Node has purple color (javascript category)
|
||||
- Node description: "Build logic visually with blocks"
|
||||
- Search tags work: "blockly", "visual", "logic", "blocks", "nocode"
|
||||
|
||||
### Test 2: Node Can Be Added to Canvas ✅ READY
|
||||
|
||||
**Steps:**
|
||||
|
||||
1. Add "Logic Builder" node to canvas
|
||||
2. Check node appears with proper color/styling
|
||||
3. Check property panel shows node parameters
|
||||
|
||||
**Expected Result:**
|
||||
|
||||
- Node renders on canvas
|
||||
- Node has "workspace" parameter (string, allowEditOnly)
|
||||
- Node has "generatedCode" parameter (string)
|
||||
- Node inspector shows "Logic Builder" text
|
||||
|
||||
### Test 3: Basic Functionality (Limited)
|
||||
|
||||
**Note:** Full functionality requires Phase C (tab system) to be usable.
|
||||
|
||||
**Current State:**
|
||||
|
||||
- Node can be added
|
||||
- Parameters exist but aren't editable via UI yet
|
||||
- No tab system for visual editing yet
|
||||
- No dynamic ports yet (need workspace content)
|
||||
|
||||
---
|
||||
|
||||
## What's Next: Phase C - Tab System Prototype
|
||||
|
||||
The next phase will add:
|
||||
|
||||
1. **Canvas Tabs Component**
|
||||
|
||||
- Tab bar UI for switching views
|
||||
- Active tab state management
|
||||
- Tab close functionality
|
||||
|
||||
2. **Blockly Integration in Tabs**
|
||||
|
||||
- "Edit Logic Blocks" button in property panel
|
||||
- Opens Logic Builder workspace in new tab
|
||||
- BlocklyWorkspace component renders in tab
|
||||
- Tab shows live Blockly editor
|
||||
|
||||
3. **State Management**
|
||||
- Context API for tab state
|
||||
- Persists workspace when switching tabs
|
||||
- Handles multiple Logic Builder nodes
|
||||
|
||||
**Estimated Time:** 2-3 hours
|
||||
|
||||
---
|
||||
|
||||
## Files Changed (7 files)
|
||||
|
||||
**Created:**
|
||||
|
||||
- `packages/noodl-editor/src/editor/src/utils/IODetector.ts`
|
||||
- `packages/noodl-runtime/src/nodes/std-library/logic-builder.js`
|
||||
|
||||
**Modified:**
|
||||
|
||||
- `packages/noodl-runtime/noodl-runtime.js`
|
||||
- `packages/noodl-runtime/src/nodelibraryexport.js`
|
||||
- `packages/noodl-editor/package.json` (added blockly dependency)
|
||||
|
||||
**From Phase A:**
|
||||
|
||||
- `packages/noodl-editor/src/editor/src/views/BlocklyEditor/*` (5 files)
|
||||
|
||||
---
|
||||
|
||||
## Git Commits
|
||||
|
||||
```
|
||||
5dc704d - feat(blockly): Phase B1 - Register Logic Builder node
|
||||
554dd9f - feat(blockly): Phase A foundation - Blockly setup, custom blocks, and generators
|
||||
df4ec44 - docs(blockly): Update CHANGELOG for Phase A completion
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Known Limitations (To Be Addressed)
|
||||
|
||||
1. **No Visual Editor Yet** - Need tab system (Phase C)
|
||||
2. **No Dynamic Ports** - Requires workspace parameter to be set
|
||||
3. **No Code Generation Hook** - Need to wire Blockly → generatedCode
|
||||
4. **No Property Panel Integration** - "Edit Logic Blocks" button doesn't exist yet
|
||||
5. **No Tests** - Unit tests deferred to later phase
|
||||
|
||||
---
|
||||
|
||||
## Developer Notes
|
||||
|
||||
### IODetector Pattern
|
||||
|
||||
The IODetector scans block types:
|
||||
|
||||
- `noodl_define_input` / `noodl_get_input` → inputs
|
||||
- `noodl_define_output` / `noodl_set_output` → outputs
|
||||
- `noodl_define_signal_input` / `noodl_on_signal` → signal inputs
|
||||
- `noodl_send_signal` / `noodl_define_signal_output` → signal outputs
|
||||
|
||||
### Node Execution Pattern
|
||||
|
||||
The Logic Builder node follows the pattern:
|
||||
|
||||
1. Workspace JSON stored in parameter
|
||||
2. On workspace change → detect I/O → update dynamic ports
|
||||
3. Signal input triggers → generate code → execute in context
|
||||
4. Outputs updated → downstream nodes receive values
|
||||
|
||||
### Integration Points
|
||||
|
||||
For Phase C, we'll need to hook into:
|
||||
|
||||
- Property panel to add "Edit Logic Blocks" button
|
||||
- Node graph editor to add tab system
|
||||
- Potentially NodeGraphEditor component for tab UI
|
||||
|
||||
---
|
||||
|
||||
## Questions for Manual Testing
|
||||
|
||||
When you test, please note:
|
||||
|
||||
1. Does the node appear in the correct category?
|
||||
2. Is the node color/styling correct?
|
||||
3. Can you add multiple instances?
|
||||
4. Does the inspector show correct info?
|
||||
5. Any console errors when adding the node?
|
||||
|
||||
Please provide feedback before we proceed to Phase C!
|
||||
|
||||
---
|
||||
|
||||
**Next Step:** Run `npm run dev` and verify the node appears in the picker.
|
||||
Reference in New Issue
Block a user