ghostiam / Vue Blocks
Licence: mit
Vue2 dataflow graph editor
Stars: ✭ 201
Projects that are alternatives of or similar to Vue Blocks
Vue Dataflow Editor
Vue 2 dataflow graph editor
Stars: ✭ 73 (-63.68%)
Mutual labels: graph, dataflow, editor, vuejs2
Litegraph.js
A graph node engine and editor written in Javascript similar to PD or UDK Blueprints, comes with its own editor in HTML5 Canvas2D. The engine can run client side or server side using Node. It allows to export graphs as JSONs to be included in applications independently.
Stars: ✭ 2,735 (+1260.7%)
Mutual labels: graph, workflow, editor
Blocks.js
JavaScript dataflow graph editor
Stars: ✭ 165 (-17.91%)
Mutual labels: graph, dataflow, editor
Diagram Maker
A library to display an interactive editor for any graph-like data.
Stars: ✭ 2,086 (+937.81%)
Mutual labels: graph, workflow, editor
React Design Editor
React Design Editor has started to developed direct manipulation of editable design tools like Powerpoint, We've developed it with reactjs, ant.design, fabricjs
Stars: ✭ 687 (+241.79%)
Mutual labels: workflow, editor
Wfd
flowable workflow designer base on @antv/g6
Stars: ✭ 639 (+217.91%)
Mutual labels: workflow, editor
Scipipe
Robust, flexible and resource-efficient pipelines using Go and the commandline
Stars: ✭ 826 (+310.95%)
Mutual labels: dataflow, workflow
Gush
Fast and distributed workflow runner using ActiveJob and Redis
Stars: ✭ 894 (+344.78%)
Mutual labels: graph, workflow
Pyflowgraph
Python Module for displaying flowgraphs using Pyside or PyQt.
Stars: ✭ 61 (-69.65%)
Mutual labels: graph, dataflow
Diagram
☊ Tool for making node graphs. Inspired by dependency graph. Used mainly for automation services 📈
Stars: ✭ 510 (+153.73%)
Mutual labels: graph, editor
Vue Quill Editor
🍡@quilljs editor component for @vuejs
Stars: ✭ 6,874 (+3319.9%)
Mutual labels: editor, vuejs2
Luban H5
[WIP]en: web design tool || mobile page builder/editor || mini webflow for mobile page. zh: 类似易企秀的H5制作、建站工具、可视化搭建系统.
Stars: ✭ 4,991 (+2383.08%)
Mutual labels: editor, vuejs2
The Graph
SVG custom elements for FBP graph editing and visualization. Used in noflo/noflo-ui
Stars: ✭ 896 (+345.77%)
Mutual labels: graph, editor
Xnode
Unity Node Editor: Lets you view and edit node graphs inside Unity
Stars: ✭ 2,077 (+933.33%)
Mutual labels: graph, editor
Tesseract
A set of libraries for rapidly developing Pipeline driven micro/macroservices.
Stars: ✭ 20 (-90.05%)
Mutual labels: workflow, dataflow
Baklavajs
Graph / node editor in the browser using VueJS
Stars: ✭ 157 (-21.89%)
Mutual labels: graph, editor
Vue-Blocks
Demo
Basic usage
<template>
<div id="app">
<VueBlocksContainer
ref="container"
:blocksContent="blocks"
:scene.sync="scene"
class="container"/>
</div>
</template>
<script>
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
}
}
}
}
}
</script>
<style>
html, body {
margin: 0;
padding: 0;
}
html {
width: 100vw;
height: 100vh;
}
body,
#app,
.container {
width: 100%;
height: 100%;
}
</style>
Props
blocksContent
Type: Array.<Node>
Required: true
Default: []
Object Node
:
{
name: 'name-node',
title: 'Title node',
family: 'family - just for grouping',
description: 'Description text',
fields: Array.<NodeField>
}
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.<Block>,
links: Array.<BlockLinks>,
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
# 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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].