mirror of
https://github.com/The-Low-Code-Foundation/OpenNoodl.git
synced 2026-01-13 15:52:56 +01:00
554dd9f3b4
- Install blockly package (~500KB) - Create BlocklyWorkspace React component with serialization - Define custom Noodl blocks (Input/Output, Variables, Objects, Arrays) - Implement JavaScript code generators for all custom blocks - Add theme-aware styling for Blockly workspace - Export initialization functions for easy integration Part of TASK-012: Blockly Visual Logic Integration
2.2 KiB
2.2 KiB
TASK-012 Working Notes
Use this file to capture discoveries, decisions, and research during implementation.
Research Notes
Blockly Documentation References
Key Blockly Concepts
- Workspace: The canvas where blocks are placed
- Toolbox: The sidebar menu of available blocks
- Block Definition: JSON or JS object defining block appearance and connections
- Generator: Function that converts block to code
- Mutator: Dynamic block that can change shape (e.g., if/elseif/else)
Blockly React Integration
Options:
- @blockly/react - Official React wrapper (may have limitations)
- Direct integration - Use Blockly.inject() in useEffect
Research needed: Which approach works better with our build system?
Design Decisions
Decision 1: [Topic]
Date: Context: Options: 1. 2.
Decision: Rationale:
Decision 2: [Topic]
Date: Context: Options: 1. 2.
Decision: Rationale:
Technical Discoveries
Discovery 1: [Topic]
Date: Finding:
Impact:
Questions to Resolve
- Q1:
- Q2:
- Q3:
Code Snippets & Patterns
Pattern: [Name]
// Code here
Related Files in Codebase
Files to study:
packages/noodl-runtime/src/nodes/std-library/javascriptfunction.js- Function node patternpackages/noodl-runtime/src/nodes/std-library/expression.js- Expression node patternpackages/noodl-editor/src/editor/src/views/panels/propertyeditor/- Property panel patterns
Meeting Notes / Discussions
[Date]: [Topic]
Participants: Summary: Action Items:
Open Issues
-
Issue: Status: Notes:
-
Issue: Status: Notes: