JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 3612
  • Score
    100M100P100Q137300F
  • License MIT

A flexible, stateless flow chart library for react.

Package Exports

  • @mrblenny/react-flow-chart

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@mrblenny/react-flow-chart) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Flow Chart

CircleCI

WORK IN PROGRESS

  • Dragabble Nodes and Canvas
  • Create curved links between ports
  • Custom components for Canvas, Links, Ports, Nodes
  • React state container
  • Update state on Select/Hover nodes, ports and links
  • Base functionality complete
  • Stable NPM version + changelog
  • Scroll/Pinch canvas to zoom
  • Ctrl+z/Ctrl+y history
  • Read-only mode
  • Redux state container
  • Arrow heads on links
  • Docs

Demo

This project aims to build a highly customisable, declarative flow chart library. Critically, your control the state. Pick from Redux, MobX, React or any other state managment library - simply pass in the current state and hook up the callbacks.

For example:

demo

Data Stucture

The flow chart is designed as a collection of Nodes, Ports and Links. You can specify your own custom properties, making this format quite flexible. See types/chart.ts. Note, nodes, ports and links should have a unique id.

Example

export const chart: IChart = {
  offset: {
    x: 0,
    y: 0,
  },
  nodes: {
    node1: {
      id: 'node1',
      type: 'output-only',
      position: {
        x: 300,
        y: 100,
      },
      ports: {
        port1: {
          id: 'port1',
          type: 'output',
          properties: {
            value: 'yes',
          },
        },
        port2: {
          id: 'port2',
          type: 'output',
          properties: {
            value: 'no',
          },
        },
      },
    },
    node2: {
      id: 'node2',
      type: 'input-output',
      position: {
        x: 300,
        y: 300,
      },
      ports: {
        port1: {
          id: 'port1',
          type: 'input',
        },
        port2: {
          id: 'port2',
          type: 'output',
        },
      },
    },
  },
  links: {
    link1: {
      id: 'link1',
      from: {
        nodeId: 'node1',
        portId: 'port2',
      },
      to: {
        nodeId: 'node2',
        portId: 'port1',
      },
    },
  },
  selected: {},
  hovered: {},
}

This will produce a simple 2 noded chart which looks like:

Demo

Basic Usage

Probably best not to use npm at this point. Things will be changing wildly.

npm i @mrblenny/react-flow-chart

Most components/types are available as a root level export. For example:

import { FlowChartWithState } from '@mrblenny/react-flow-chart'

With Internal State

stories/InternalReactState.tsx

With External State

stories/ExternalReactState.tsx

Other Demos

stories/ExternalReactState.tsx

Contributing

If you're interested in helping out, let me know.

In particular, would be great to get a hand with docs and redux / mobx integrations.

Development

npm install
npm run start:storybook