Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/catpea/signalcraft
A tiny visual programming language.
https://github.com/catpea/signalcraft
dataflow-programming flow-based-programming graph-editor low-code node-editor visual-programming
Last synced: 23 days ago
JSON representation
A tiny visual programming language.
- Host: GitHub
- URL: https://github.com/catpea/signalcraft
- Owner: catpea
- Created: 2023-11-12T17:17:02.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-12-26T03:43:04.000Z (about 1 year ago)
- Last Synced: 2024-11-11T19:33:35.332Z (3 months ago)
- Topics: dataflow-programming, flow-based-programming, graph-editor, low-code, node-editor, visual-programming
- Language: JavaScript
- Homepage: https://catpea.github.io/signalcraft/
- Size: 21 MB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# signalcraft
A tiny visual programming language.
## Usage
CTRL+Click on caption or cable will select it.
## TODO
- LOL, set primary button correctly for after JSON is loaded, default value ovveriding node value stored in json investigate
- Connectors are not removed from COnnectors array
, https://youtu.be/utrxk5_PeEY?t=104
- add boolean math for this.el.EditorValue to hide text overflow, currently substr is in place
- give view/menu/Dropdown.js .setData() support and make it generic
- finish load() in API
- break up Line in preparation for more UI complexity as onmouseDown foreignObject magic is introduced
- Ensure foreignObject data fields are created OnClick
- on mouse over indicate that the propery is editable by shifting the background color
- on mouse down create the foreignObject data editor, and on mouse leave (of xhtml field) destroy the edit field
- upon completion, ensure the value is clearly displayed where the foreignObject field was
### Bug Fix
- No bugs atm
### Urgent!
- Instead of centering nodes on add (which calls for rendering and measuring, and thus EventEmitter) allow drag and drop from the toolbox, allowing user to pick the position
- Add File > Save
- Add File > Load
- Finish Toolbox
- Add Property Pane
- Live Data Output Bottom Debugger
- Add minimal previews to nodes (string, number color, etc...)
- Drag Connecting lines between entire Line.js not just Port, it is easier to hit the target
- default action for drag should be selection manager not panning, see NodeRED
- Prefer Api usage over manually interacting with collections: search for [A-Z][a-z]+\.create and replace with API methods
### Main
- When deleting a Junction between two other junction reconnect them, investigate reconnecting of nodes as well
- Cable Type Sensitivity - Should be type sensitive numbers, strings, objects.
- Input/Output Line where both I/O ports visually align for neat programs (Line.js)
- ForeignObjects in ZUI Mode
- Give TODOM multiple code generation profiles
- Node Property Editor (YAML First)
- Add A Game Like Tutorial with Achievement unlocked
- documentaion must state that use cannot create id and type named fields on a node as those are reserved
### Unsure
- LOD: on scale 2+ show string preview in Line via FOreignObject
- Add Node Selection Manager (maybe groups, maybe lasso select with boolean math)
- Add Node Search And Canvas Scroll
- consider bounds padding to become a [0, 3, [0], [3]] with top right, bottom left like in CSS
- too hard to click on caption, at certain scale make the entire node draggable?
- Drag Cable at any point to take over XY of destination?
- Node Alignment, Aligh Tops of Nodes (via shortcut key)
## How It Works
- you define node types first
- then create a view, which is a UI, an SVG
- then you addNode(type) the view will update to show that node
- then you linkNodes to create a flow (see src/usage.js)
- then you .run(node), you have to specify a node you want to spider up and execute payload on
## How It Really Works
- System Is Reactive, Full Time Travel
- When defining Types, you really just specify Input Dots and Reply Dots.
- Input is the Property of a Node that you can link to
- Reply is the Function of a Node that gets executed via a downstream node
- Nodes are decorated as Panels
- Edges are decorated as Cables
- Reactivity Links everything together.
### Current State
### Design Ideas
### Notes
```JavaScript
// centering a node, it requires an even emitter trigerring "rendered" and then measuring width and height of the rendered node
// using the calculation below as base, but then setting CX/XY (centerX, centerY) by substracting half with/height from below
// this means that cx/cy calls for use of event emitter, good idea but too early in development atm.
x: (0-this.view.transform.x+((this.view.svg.getBoundingClientRect().width/2)))/this.view.transform.scale,
y: (0-this.view.transform.y+((this.view.svg.getBoundingClientRect().width/2)))/this.view.transform.scale
```