Flume

Extract logic from your apps with a user-friendly node editor powered by Re...

Visual ProgrammingReact
chrisjpatty/flumeflume.devflume

README

undefined
NPM JavaScript Style Guide Minzip Size

Flume


Guides & Examples


flume.dev

Install


  1. ``` sh
  2. npm install --save flume
  3. ```

Usage


Defining your nodes


Import FlumeConfig and use it to define the nodes and ports that will make up your node editor.

  1. ``` js
  2. import { FlumeConfig, Controls, Colors } from "flume";

  4. const flumeConfig = new FlumeConfig()

  6. flumeConfig
  7.   .addPortType({
  8.     type: "number",
  9.     name: "number",
  10.     label: "Number",
  11.     color: Colors.red,
  12.     controls: [
  13.       Controls.number({
  14.         name: "num",
  15.         label: "Number"
  16.       })
  17.     ]
  18.   })
  19.   .addNodeType({
  20.     type: "number",
  21.     label: "Number",
  22.     initialWidth: 150,
  23.     inputs: ports => [
  24.       ports.number()
  25.     ],
  26.     outputs: ports => [
  27.       ports.number()
  28.     ]
  29.   })
  30.   .addNodeType({
  31.     type: "addNumbers",
  32.     label: "Add Numbers",
  33.     initialWidth: 150,
  34.     inputs: ports => [
  35.       ports.number({name: "num1"}),
  36.       ports.number({name: "num2"})
  37.     ],
  38.     outputs: ports => [
  39.       ports.number({name: "result"})
  40.     ]
  41.   })
  42. ```

Rendering the node editor


To render the node editor, import NodeEditor and pass it your nodeTypes and portTypes from the configuration you created.

  1. ``` js
  2. import React from 'react'
  3. import { NodeEditor } from 'flume'
  4. import config from './config'

  6. const App = () => {

  8.   return (
  9.     <div style={{width: 600, height: 800}}> // Give the wrapper a width & height
  10.       <NodeEditor
  11.         nodeTypes={config.nodeTypes}
  12.         portTypes={config.portTypes}
  13.       />
  14.     </div>
  15.   )
  16. }
  17. ```

For more complete documentation visit: flume.dev

License


MIT © chrisjpatty