Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bhallstein/nodz
Javascript node tree editor. Small and efficient with minimal dependencies.
https://github.com/bhallstein/nodz
Last synced: about 2 months ago
JSON representation
Javascript node tree editor. Small and efficient with minimal dependencies.
- Host: GitHub
- URL: https://github.com/bhallstein/nodz
- Owner: bhallstein
- Created: 2022-01-20T12:53:48.000Z (almost 3 years ago)
- Default Branch: int
- Last Pushed: 2022-02-10T14:06:16.000Z (almost 3 years ago)
- Last Synced: 2023-03-21T04:43:39.256Z (almost 2 years ago)
- Language: JavaScript
- Homepage:
- Size: 70.3 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
# nodz
A tiny javascript node editor with minimal dependencies.
## Sample code
```js
import {render} from 'react'
import Nodz from 'nodz'const node_styles = selected => ({
backgroundColor: '#f3f3f3',
padding: '0.5rem',
borderRadius: '2px',
boxShadow: selected ? '0px 0px 3px 1px #29AFFF' : 'none',
border: selected ? '1px solid #29AFFF' : '1px solid #ccc',
})function A() {
returnA
}
function B() {
returnB
}
function C() {
returnC
}const node_types = {A, B, C}
const node_graph = {
node_type: 'A',
}function App() {
return (
)
}render(, document.body)
```## Children types
Node exit types:
- indexed - numeric children
- default
- render as line to AddChildBtn
- optional settings: max
- e.g.: {children_type: 'simple', max_children: 3}
- named - a set of named children
- render as, originating from the parent node, a set of mini-nodes (one for each named child), each then leading to a AddChildBtn
- each child has optional setting: max
- e.g.:
{
children_type: 'named',
children: [
{name: 'True'},
{name: 'False', max: 2},
]
}
- none - children are not allowed
- e.g.: {children_type: 'none'}NB: all 'plus' interaction points should either use a preset node type, or
// call out to user code to get the node types & descriptions amically
(so allowing a node to customise its possible children based on context)
(or, use user-supplied react elements instead of built in)
- Allow external elements to be passed into node addition popover