flow-view

is a visual editor for Dataflow programming, powered by React

Description | Installation | API | Examples | License

Whatchers Stargazers Forks

NPM version Build Status Dependency Status JavaScript Style Guide Change log

The image below is an SVG generated server side by flow-view Canvas: click it to see online example.

sample view

The following animated gif represents a family tree. You can use autocompletion thanks to nodeList option parameter.

The Simpsons

Description

flow-view is a reusable visual editor you can use to provide a GUI to your dataflow project. I am using it for a minimal Dataflow programming engine: dflow.

The following features are implemented:

Let’s give Node.js a common visual interface. Use flow-view!

Any feedback is welcome!

Installation

Using npm

Note that flow-view requires React as a peer dependency. If they are not already installed, with npm do

npm install react react-dom --save-dev

I guess you need it as a development dependency to build your project, so probably you need to launch

npm install flow-view --save-dev

Using a CDN

Adding this to your HTML page

<script src="https:[email protected]/dist/flow-view.min.js"></script>

API

new Canvas()

flow-view Canvas constructor

Suppose your containerId is drawing. In your HTML, optionally place a div where you want to mount the canvas.

<div id="drawing"></div>

If flow-view finds a document and does not exist a DOM element with given containerId, a brand new div is created and appended to the page body.

Create an empty canvas

var Canvas = require('flow-view').Canvas

var canvas = new Canvas('drawing')

Note that nothing will happen until you call the canvas.render(view) method.

canvas.container

It is the DOM element container, if any. On server side, this attribute is null.

canvas.render()

Draws a view, that is a collection of nodes and links. On server side it generates an SVG output like the one you see on top of this README.md, see render/serverside.js example.

Follows a basic example.

canvas.render({
  node: {
    a: {
      x: 80, y: 100,
      text: 'Drag me',
      outs: ['out1', 'out2', 'out3']
    },
    b: {
      x: 180, y: 200,
      text: 'Click me',
      ins: ['in0', { name: 'in1', type: 'bool' }],
      outs: ['return']
    }
  },
  link: {
    c: {
      from: ['a', 0],
      to: ['b', 1]
    }
  }
})

Theme

Theme is a prop object with the following attributes

Events

See event/emitter.js example. The following events are emitted by canvas:

name arguments
createLink link, linkId
createNode node, nodeId
createInputPin [nodeId, position], pin
createOutputPin [nodeId, position], pin
deleteLink linkId
deleteNode nodeId
deleteInputPin [nodeId, position]
deleteOutputPin [nodeId, position]
endDragging { nodeId: { x, y } }

Hotkeys

Few hotkyes are defined.

Arrows translate currently selected nodes, if also SHIFT is pressed translation is performed pixel by pixel. ESC cancel current selection. Keys i and o create respectively input and output pins from current selected node. If also SHIFT is pressed, pins are deleted.

Node spec

A node describes an element and has the following attributes:

An pin can be either a string or an object with the name attribute which must be a string. Input pins default to string in${position}. Output pins default to string out${position}. If ins is undefined, the node is a root. If outs is undefined, the node is a leaf.

A link describes a connection between elements and has the following attributes:

Examples

Try online example.

You can also clone this repo and install dependencies to run examples locally

git clone https://github.com/fibo/flow-view
cd flow-view
npm install

Every example has its homonym npm script, for example basic/usage.js example is launched by command

npm run example_basic_usage

Available examples are:

Note that examples are intended to be used for development, hence there is an overhead at start time. For instance: client side examples use hot reload, and are transpiled on the fly; also server side example will launch babel before starting.

License

MIT