Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

flow-view

3.0.2 • Public • Published

flow-view

is a visual editor for Dataflow programming

Installation | API | Graph schema | Examples | License

Whatchers Stargazers Forks

NPM version Build Status Dependency Status JavaScript Style Guide Change log

Basic usage

Installation

Using npm

With npm do

npm install flow-view

Using a CDN

Adding this to your HTML page

<script src="https://unpkg.com/flow-view/dist/flow-view.min.js"></script>

API

Canvas constructor

To import flow-view Canvas choose your favourite syntax among:

  • const Canvas = require('flow-view').Canvas
  • import { FlowViewCanvas } from 'flow-view'

Suppose your container is a div with id drawing. In your HTML, place a div where you want to mount flow-view canvas.

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

Create an empty canvas.

const container = document.getElementById('drawing')
 
const canvas = new Canvas(container)

loadGraph

You can load a graph like in the following example.

const graph = {
  nodes: [
    {
      id: 'a',
      x: 80,
      y: 100,
      name: 'Drag me',
      outs: [
        { name: 'out1' },
        { name: 'out2' },
        { name: 'out3' }
      ]
    },
    {
      id: 'b',
      x: 180,
      y: 200,
      name: 'Click me',
      ins: [
        { name: 'in0' },
        { name: 'in1', type: 'bool' }
      ],
      outs: [
        { name: 'return' }
      ]
    }
  ],
  links: [
    {
      id: 'c',
      from: ['a', 0],
      to: ['b', 1]
    }
  ]
}
 
canvas.loadGraph(graph)

Graph schema

This section defines flow-view JSON Schema using cson. It is parsed by markdown2code to generate flow-view schema.json file.

$schema: 'http://json-schema.org/schema#'
id: 'http://g14n.info/flow-view/schema.json'
properties:

A flow-view graph has links and nodes.

Links

A graph can have none, one or many links.

  links:
    type: 'array'
    items:

Every link must have a unique id.

      title: 'link'
      type: 'object'
      properties:
        id:
          type: 'string'

A link connects two nodes.

It starts from a node output which is identified by an array of two elements that are the source node id and the output position.

        from:
          type: 'array'
          items: [
            { type: 'string' }
            { type: 'number' }
          ]
          minLength: 2
          maxLength: 2

It goes to a node input which is identified by an array of two elements that are the target node id and the input position.

        to:
          type: 'array'
          items: [
            { type: 'string' }
            { type: 'number' }
          ]
          minLength: 2
          maxLength: 2

All properties are required.

      required: [
        'id'
        'from'
        'to'
      ]

Nodes

A graph can have none, one or many nodes.

  nodes:
    type: 'array'
    items:

Every node must have a unique id.

      title: 'node'
      type: 'object'
      properties:
        id:
          type: 'string'

A node has a text.

        text:
          type: 'string'

A node has a position identified by x and y coordinates.

        x:
          type: 'number'
        y:
          type: 'number'

A node at the end is a block with inputs and outputs. Both ins and outs must have a name and may have a type.

        ins:
          type: 'array'
          items:
            title: 'in'
            type: 'object'
            properties:
              name:
                type: 'string'
              type:
                type: 'string'
            required: [
              'name'
            ]
        outs:
          type: 'array'
          items:
            title: 'out'
            type: 'object'
            properties:
              name:
                type: 'string'
              type:
                type: 'string'
            required: [
              'name'
            ]

Properties ins and outs are not required. A node with ins not defined is a root, a node with outs not defined is a leaf.

      required: [
        'id'
        'text'
        'x'
        'y'
      ]

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:

License

MIT

install

npm i flow-view

Downloadsweekly downloads

17

version

3.0.2

license

MIT

homepage

g14n.info

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability