flow-view

is a visual editor for [Dataflow programming][dataflow_wikipedia], powered by [React]

Description | Installation | API | Examples | License

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

[![sample view][sample_view_svg]][online_example]

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

![The Simpsons][simpsons_gif]

Whatchers Stargazers Forks

NPM version Build Status Dependency Status Change log

js-standard-style

NPM

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][example_render_serverside].

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_event_emitter] 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 } }
selectLink linkId
selectNode nodeId

Hotkeys

Few hotkyes are defined.

Arrows translate currently selected nodes, if also SHIFT is pressed translation is performed pixel by pixel.

ESC</kbd> cancel current selection. Keys i</kbd> 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: * [email protected]** `Number` *x* coordinate of top left vertex * [email protected]** `Number` *y* coordinate of top left vertex * [email protected]** `String` *text* * [email protected]** `Array | undefined` *ins* list of input pins * [email protected]** `Array | undefined` *outs* list of output pins * [email protected]** `Number` *[width]*, defaults to a value depending on text lenght and number of pins. 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. ### Link spec A link describes a connection between elements and has the following attributes: * [email protected]** `Array` *from* has exactly two elements * [email protected]** `String` *from[0]* is the key of the source node * [email protected]** `Number` *from[1]* is the output pin position * [email protected]** `Array` *to* has exactly two elements * [email protected]** `String` *to[0]* is the key of the target node * [email protected]** `Number` *to[1]* is the input pin position ## Examples Try [online example][online_example]. You can also clone this repo and install dependencies to run examples locally ```bash 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_basic_usage] example is launched by command ```bash npm run example_basic_usage ``` Available examples are: * [basic/usage.js][example_basic_usage] `npm run example_basic_usage` * [custom/item.js][example_custom_item] `npm run example_custom_item` * [event/emitter.js][example_event_emitter]: `npm run example_event_emitter` * [empty/canvas.js][example_empty_canvas]: `npm run example_empty_canvas` * [genealogic/tree.js][example_genealogic_tree]: `npm run example_genealogic_tree` * [render/serverside.js][example_render_serverside]: `npm run example_render_serverside` 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](http://g14n.info/mit-license) [dflow]: http://g14n.info/dflow "dflow" [dataflow_wikipedia]: https://en.wikipedia.org/wiki/Dataflow_programming "Dataflow programming" [React]: https://facebook.github.io/react/ [example_basic_usage]: https://github.com/fibo/flow-view/blob/master/examples/basic/usage.js [example_custom_item]: https://github.com/fibo/flow-view/blob/master/examples/custom/item.js [example_empty_canvas]: https://github.com/fibo/flow-view/blob/master/examples/empty/canvas.js [example_event_emitter]: https://github.com/fibo/flow-view/blob/master/examples/event/emitter.js [example_genealogic_tree]: https://github.com/fibo/flow-view/blob/master/examples/genealogic/tree.js [example_render_serverside]: https://github.com/fibo/flow-view/blob/master/examples/render/serverside.js [online_example]: http://g14n.info/flow-view/example "Online example" [sample_view_svg]: https://g14n.info/flow-view/svg/sample-view.svg [simpsons_gif]: https://g14n.info/flow-view/media/TheSimspons.gif