Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

Awesome Lists containing this project

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)