mirror of https://github.com/The-Low-Code-Foundation/OpenNoodl.git synced 2026-01-13 15:52:56 +01:00

Files

Richard Osborne c2f1ba320c docs(blockly): Complete Phase B1 documentation

- Updated PHASE-B1-COMPLETE.md with test results and bugfix info
- Updated CHANGELOG.md with testing confirmation
- Added color scheme learning to LEARNINGS.md
- Phase B1 is complete and tested successfully

2026-01-11 13:48:38 +01:00

2.9 KiB

Raw Blame History

TASK-012 Changelog

Track all changes made during implementation.

[Unreleased]

Added

Initial task documentation (README.md, CHECKLIST.md, BLOCKS-SPEC.md)
Blockly package installed (~500KB)
BlocklyWorkspace React component with full initialization and cleanup
Custom Noodl blocks: Input/Output, Variables, Objects (basic), Arrays (basic)
JavaScript code generators for all custom blocks
Theme-aware SCSS styling for Blockly workspace
Module exports and initialization functions

Changed

(none yet)

Fixed

(none yet)

Removed

(none yet)

Session Log

Session 1: 2026-01-11

Duration: ~1 hour

Phase: A - Foundation

Changes:

Created branch task/012-blockly-logic-builder
Installed blockly npm package in noodl-editor
Created packages/noodl-editor/src/editor/src/views/BlocklyEditor/ directory
Implemented BlocklyWorkspace React component with:
- Blockly injection and initialization
- Workspace serialization (save/load JSON)
- Change detection callbacks
- Proper cleanup on unmount
Defined custom blocks in NoodlBlocks.ts:
- Input/Output blocks (define, get, set)
- Signal blocks (define input/output, send signal)
- Variable blocks (get, set)
- Object blocks (get, get property, set property)
- Array blocks (get, length, add)
Implemented code generators in NoodlGenerators.ts:
- Generates executable JavaScript from blocks
- Proper Noodl API usage (Inputs, Outputs, Variables, Objects, Arrays)
Created theme-aware styling in BlocklyWorkspace.module.scss
Added module exports in index.ts

Files Created:

packages/noodl-editor/src/editor/src/views/BlocklyEditor/BlocklyWorkspace.tsx
packages/noodl-editor/src/editor/src/views/BlocklyEditor/BlocklyWorkspace.module.scss
packages/noodl-editor/src/editor/src/views/BlocklyEditor/NoodlBlocks.ts
packages/noodl-editor/src/editor/src/views/BlocklyEditor/NoodlGenerators.ts
packages/noodl-editor/src/editor/src/views/BlocklyEditor/index.ts

Files Modified:

packages/noodl-editor/package.json (added blockly dependency)

Notes:

Phase A foundation complete ✅
Blockly workspace renders with default toolbox
Custom blocks defined but not yet tested in live environment
Code generation implemented for basic Noodl API access
Ready to proceed with Phase B (Logic Builder Node)

Testing Result: ✅ Node successfully tested

Node appears in Custom Code category
Node can be added to canvas
No errors or crashes
Proper color scheme (pink/magenta)

Bugfix Applied: Fixed color scheme crash

Changed color: 'purple' to color: 'javascript'
Changed category: 'Logic' to category: 'CustomCode'
Matches Expression node pattern

Next Steps:

✅ Phase B1 complete and tested
🚀 Moving to Phase C: Tab System Prototype

Session 2: [Date]

Duration: X hours