Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ghostiam/vue-blocks
Vue2 dataflow graph editor
https://github.com/ghostiam/vue-blocks
blocks blueprints dataflow editor graph visual-programming vuejs2 workflow
Last synced: 4 days ago
JSON representation
Vue2 dataflow graph editor
- Host: GitHub
- URL: https://github.com/ghostiam/vue-blocks
- Owner: ghostiam
- License: mit
- Archived: true
- Created: 2018-02-05T06:29:54.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-12T02:59:20.000Z (almost 2 years ago)
- Last Synced: 2024-08-02T12:52:15.919Z (3 months ago)
- Topics: blocks, blueprints, dataflow, editor, graph, visual-programming, vuejs2, workflow
- Language: Vue
- Homepage: https://ghostiam.github.io/vue-blocks/index.html
- Size: 1.66 MB
- Stars: 278
- Watchers: 13
- Forks: 61
- Open Issues: 27
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-starred - ghostiam/vue-blocks - Vue2 dataflow graph editor (others)
README
## Vue-Blocks
### Demo
[Demo](https://ghostiam.github.io/vue-blocks/index.html)
### Basic usage
``` html
import VueBlocksContainer from '...path.../vue-blocks/src'
export default {
name: 'App',
components: {
VueBlocksContainer
},
data: function () {
return {
blocks: [
{
name: 'test',
title: 'Test block',
family: 'Test',
description: 'Description text',
fields: [
{
name: 'in1',
type: 'event',
attr: 'input'
},
{
name: 'in2',
type: 'event',
attr: 'input'
},
{
name: 'out1',
type: 'event',
attr: 'output'
},
{
name: 'out2',
type: 'event',
attr: 'output'
}
]
}
],
scene: {
blocks: [
{
id: 1,
x: 0,
y: 0,
name: 'test',
title: 'Test block',
values: {
property: [
{
name: 'message',
type: 'string'
}
]
}
},
{
id: 2,
x: 0,
y: 50,
name: 'test',
title: 'Test block 2',
values: {
property: [
{
name: 'message',
type: 'string'
}
]
}
}
],
links: [],
container: {
centerX: 0,
centerY: 0,
scale: 1
}
}
}
}
}
html, body {
margin: 0;
padding: 0;
}
html {
width: 100vw;
height: 100vh;
}
body,
#app,
.container {
width: 100%;
height: 100%;
}
```
### Props
#### blocksContent
Type: `Array.`
Required: `true`
Default: `[]`
Object `Node`:
```
{
name: 'name-node',
title: 'Title node',
family: 'family - just for grouping',
description: 'Description text',
fields: Array.
}
```
Object `NodeField`:
```
{
name: 'name',
type: 'type-name', // not used
attr: 'attribute' // input/output or custom
'other': - for custom
}
```
Custom attributes are available in `scene.blocks[index].values.YourAttrName`
#### scene
Type: `Object`
Required: `false`
Default:
```
{
blocks: [],
links: [],
container: {}
}
```
Object `Scene`:
```
{
blocks: Array.,
links: Array.,
container: {
centerX: number
centerY: number
scale: number
}
}
```
Object `Block`:
```
{
id: number,
x: number,
y: number,
name: string,
title: string,
values: {
customAttribute: [ // show "NodeField"
name: NodeField (without name and attr fields)
]
}
}
```
Object `BlockLinks`:
```
{
id: number, // ID
originID: number, // Origin block ID
originSlot: number, // Origin block slot number
targetID: number, // Target block ID
targetSlot: number // Target block slot number
}
```
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run serve
# build for production with minification
npm run build
# build for github pages
npm run build:docs
```
## License
[MIT license](LICENSE)