mirror of
https://github.com/The-Low-Code-Foundation/OpenNoodl.git
synced 2026-01-13 07:42:55 +01:00
210 lines
5.4 KiB
Markdown
210 lines
5.4 KiB
Markdown
# 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.
|