# @bastinjafari/react-flow-chart-with-tooltips-and-multi-select

> A flexible, stateless flow chart library for react.

Latest version **0.0.14** (published 2020-11-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install @bastinjafari/react-flow-chart-with-tooltips-and-multi-select
pnpm add @bastinjafari/react-flow-chart-with-tooltips-and-multi-select
yarn add @bastinjafari/react-flow-chart-with-tooltips-and-multi-select
bun add @bastinjafari/react-flow-chart-with-tooltips-and-multi-select
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.14 |
| Published | 2020-11-10 |
| First published | 2020-11-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 159 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | David Revay |
| Maintainers | bastinjafari |

## Links

- npm: https://www.npmjs.com/package/@bastinjafari/react-flow-chart-with-tooltips-and-multi-select
- Repository: git@github.com:BastinJafari/react-flow-chart/tree/feat-multi-select
- npm.io page: https://npm.io/package/@bastinjafari/react-flow-chart-with-tooltips-and-multi-select

## Dependencies (6)

- [uuid](https://npm.io/package/uuid.md) ^3.3.2
- [pathfinding](https://npm.io/package/pathfinding.md) ^0.4.18
- [react-tooltip](https://npm.io/package/react-tooltip.md) ^4.2.10
- [react-draggable](https://npm.io/package/react-draggable.md) ^4.4.3
- [react-zoom-pan-pinch](https://npm.io/package/react-zoom-pan-pinch.md) ^1.6.1
- [react-resize-observer](https://npm.io/package/react-resize-observer.md) ^1.1.1

## Recent versions

- 0.0.14 (latest) — 2020-11-10

## README

# React Flow Chart

### This build additionally implements the multi-select-feature of Xiqi:
https://github.com/MrBlenny/react-flow-chart/pull/204


[![CircleCI](https://circleci.com/gh/MrBlenny/react-flow-chart.svg?style=svg)](https://circleci.com/gh/MrBlenny/react-flow-chart)

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

### [Storybook Demo](https://mrblenny.github.io/react-flow-chart/index.html?selectedKind=With%20Sidebar&selectedStory=default&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook-addon-viewport%2Faddon-panel)

### [CodeSandbox Demo](https://codesandbox.io/s/4w46wv71o7)

This project aims to build a highly customisable, declarative flow chart library. Critically, you 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](./images/demo.gif)

## 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](./src/types/chart.ts). Note, nodes, ports and links should have a unique id.

#### Example

```ts

export const chart: IChart = {
  offset: {
    x: 0,
    y: 0,
  },
  scale: 1,
  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](./images/demo.png)

## Basic Usage

```bash
npm i @mrblenny/react-flow-chart
```

Most components/types are available as a root level export. Check the storybook demo for more examples.

```tsx
import { FlowChartWithState } from "@mrblenny/react-flow-chart";

const chartSimple = {
  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: {}
};

const Example = (
  <FlowChartWithState initialValue={chartSimple} />
);
```

### With Internal State
[stories/InternalReactState.tsx](./stories/InternalReactState.tsx)

### With External State
[stories/ExternalReactState.tsx](./stories/ExternalReactState.tsx)

### Readonly Mode
[stories/ReadonlyMode.tsx](./stories/ReadonlyMode.tsx)

### Tooltips
[stories/Tooltips.tsx](./stories/Tooltips.tsx)

You can add tooltips by adding `tooltipsGlobal` into the chartState (`IChart`) or `tooltip` to the node objects.
`tooltipsGlobal` will apply for all nodes and `tooltip` for individual nodes.

#### Example

```tsx

export const tooltipChart: IChart = {
  tooltipsGlobal: {
    showTooltip: true,
    toogleOffWhenClicked: 'global',
    text: 'This is the global tooltip and will be toggled off, when clicked',
  },
  offset: {
    x: 0,
    y: 0,
  },
  scale: 1,
  nodes: {
    node1: {
      tooltip: {
        showTooltip: true,
        text: 'this is the tooltip for node1',
      },
...
  node2: {
    tooltip: {
     showTooltip: true,
      toogleOffWhenClicked: 'node',
      text: 'this is the tooltip for node2 and will be toggled off when clicked',
    },
    id: 'node2',
... 
  node3: {
    tooltip: {
     showTooltip: false,
      text: 'this is the tooltip for node3 but its off',
    },
    id: 'node3',
    type: 'input-output',
    position: {
     x: 100,
      y: 600,
    },
...
```
You can also customize the tooltipComponent by adding it to Component props of flowChart:

```tsx
const ExampleToolTipComponent = (props: ITooltipComponentDefaultProps) => {
  return (
    <div className="ExampleToolTipComponent" style={{ width: '300px', textAlign: 'center' }}>
       <h2 style={{ margin: 'auto' }}>{props.tooltip}</h2>
    </div>
  )
}

export class Tooltips extends React.Component {
...
  return (            
    <Page>
      <FlowChart
        chart={chart}
        callbacks={stateActions}
        Components={{TooltipComponent: ExampleToolTipComponent}}/>
    </Page>)
}

```

### Other Demos
[stories/ExternalReactState.tsx](./stories)


## 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

```bash
npm install
npm run start:storybook
```

---
_Source: https://npm.io/package/@bastinjafari/react-flow-chart-with-tooltips-and-multi-select · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._