Flume

Fork warnings

• This is a fork of the original Flume library by chrisjpatty. Thanks for the great library!
• This fork is not maintained by the original author.
• This fork is not guaranteed to be up to date.
• We'll try to improve the functionality while maintaining the compatibility with the original library, but we can't guarantee it.

Changes

• Be able to duplicate your nodes.
• Be able to use React components in the label prop of the node. Before it worked but at filtering the app crashed. Now it will try to extract the text content of the node to filter the context menu.

Guides & Examples

flume.dev

Install

npm install --save flume

Usage

Defining your nodes

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

import { FlumeConfig, Controls, Colors } from "flume";

const flumeConfig = new FlumeConfig();

flumeConfig
  .addPortType({
    type: "number",
    name: "number",
    label: "Number",
    color: Colors.red,
    controls: [
      Controls.number({
        name: "num",
        label: "Number"
      })
    ]
  })
  .addNodeType({
    type: "number",
    label: "Number",
    initialWidth: 150,
    inputs: ports => [ports.number()],
    outputs: ports => [ports.number()]
  })
  .addNodeType({
    type: "addNumbers",
    label: "Add Numbers",
    initialWidth: 150,
    inputs: ports => [
      ports.number({ name: "num1" }),
      ports.number({ name: "num2" })
    ],
    outputs: ports => [ports.number({ name: "result" })]
  });

Rendering the node editor

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

import React from "react";
import { NodeEditor } from "flume";
import config from "./config";

const App = () => {
  return (
    <div style={{ width: 600, height: 800 }}>
      {" "}
      // Give the wrapper a width & height
      <NodeEditor nodeTypes={config.nodeTypes} portTypes={config.portTypes} />
    </div>
  );
};

For more complete documentation visit: flume.dev

License

MIT © chrisjpatty MIT © Soft For You (forked from chrisjpatty - modified by Soft For You)