{"_id":"@bastinjafari/react-flow-chart-with-tooltips-and-multi-select","_rev":"1-1b78b7adde3cc4541c3758088bb56ed0","name":"@bastinjafari/react-flow-chart-with-tooltips-and-multi-select","dist-tags":{"latest":"0.0.14"},"versions":{"0.0.14":{"name":"@bastinjafari/react-flow-chart-with-tooltips-and-multi-select","version":"0.0.14","description":"A flexible, stateless flow chart library for react.","main":"src/index.js","repository":{"type":"git","url":"git@github.com:BastinJafari/react-flow-chart/tree/feat-multi-select.git"},"author":{"name":"David Revay","email":"daverevay@gmail.com"},"license":"MIT","devDependencies":{"@babel/core":"^7.1.2","@storybook/addon-centered":"^5.3.18","@storybook/addon-options":"5.3.18","@storybook/addon-viewport":"5.3.18","@storybook/react":"5.3.18","@types/lodash":"^4.14.118","@types/node":"10.12.0","@types/pathfinding":"0.0.4","@types/react":"^16.8.8","@types/react-dom":"^16.8.4","@types/styled-components":"^4.1.19","@types/uuid":"^3.4.4","@types/webpack":"4.4.17","babel-loader":"^8.0.4","lodash":"^4.17.15","np":"^3.0.4","react":"^16.8.4","react-dom":"^16.8.5","react-json-view":"^1.19.1","styled-components":"^5.1.0","ts-loader":"^5.2.2","ts-node":"^7.0.1","tslint":"^5.11.0","tslint-config-standard":"^8.0.1","tslint-react":"^3.6.0","typescript":"^3.4.1","webpack":"^4.21.0","webpack-cli":"^3.1.2"},"dependencies":{"pathfinding":"^0.4.18","react-draggable":"^4.4.3","react-resize-observer":"^1.1.1","react-tooltip":"^4.2.10","react-zoom-pan-pinch":"^1.6.1","uuid":"^3.3.2"},"peerDependencies":{"react":"^16.8.4","react-dom":"^16.8.4","styled-components":"^5.1.0"},"scripts":{"start:storybook":"start-storybook -p 6006 -c config/storybook","build:storybook":"build-storybook -c config/storybook -o docs","build":"tsc && cp package.json dist/ && cp README.md ./dist","test":"npm run lint","lint":"tslint -p tsconfig.json -c tslint.json"},"_id":"@bastinjafari/react-flow-chart-with-tooltips-and-multi-select@0.0.14","_nodeVersion":"12.13.0","_npmVersion":"6.12.0","dist":{"integrity":"sha512-10Bz6+JbIJGDu1L2+HLtXuKEZuh6g8Z7/dmycMwyY/OytmcRbd2mZTAfMKKRm7lYqs4uGW2W9qAofo+GtOxhbQ==","shasum":"83b1ced9f40dfb2fcf87059e2467223fcc95a460","tarball":"https://registry.npmjs.org/@bastinjafari/react-flow-chart-with-tooltips-and-multi-select/-/react-flow-chart-with-tooltips-and-multi-select-0.0.14.tgz","fileCount":140,"unpackedSize":162841,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqvEnCRA9TVsSAnZWagAAyccQAIM7eDAqJAQ77JAiIsPH\nhYoD9uw7Iarm4oVUuKBQWtoM15ycYAKNoneMCqe/3hWK4IWADmlOPmDlkSHk\nlNAL2d78cG3AykvsuEgsrp0UEta86p0bi++6elT9dK/bWfuANplE4lzPSDti\nELoFFNbx0Zf8ZkwpFQSkQR+6sVlC7f4gtiFLxRWrz3I5q1qNEyumGENdwXDz\nLO3M6jkNxkUyTgPxV1nQJFqvmtj1+kYhlU+2uBHr78T2mPBJfoJ/rk89c7cZ\nliSpp9aQOeyP0qy+OvxwJKsLcQPx74xwHB+3uDw0h4CAY94PfAE9wgIIXOGj\nTQ1MmL8R5oA7z4KZZrgw6NhryLs86SeKrIxtGQj3hr9Psz63FFQ0XYF9jaLd\nt11ZFyZcZP5kp8xNvWhlzyrGpgnHq5PGSFxbWoYiJuD8iSAxzwfpdgEEied4\nd5br7b2kHCbekySdorDjd8R0MHfGBx4zOgDUTwjL/daOM0Eyyw8tX79356A8\npvOnYbRNrMUyEN58lCiaWTX3N9QecsaWbJ/xOSAyPHKDqbId0n3RE8hxytDV\np/CRR+QVkFbFZ8PftfGIts9L4ialn88Vefhn6Oj9m0SKJOdUVHGO3Dk8Zthv\nFy5LCX79bX+zum+TWQetqe7Tz5iVofXhPlKqbestDg4WGV0ffOeIdR18A43g\n0u3a\r\n=uqSx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDW69EzdEe1Er53Nl0P3BGtbSXn+CqsuoZpxHbaofepewIgHXgedFlPO6I/HCuIx0keX+ehCVIMzwd7IV8A8UZpqRo="}]},"_npmUser":{"name":"bastinjafari","email":"bastinjafari@gmail.com"},"directories":{},"maintainers":[{"name":"bastinjafari","email":"bastinjafari@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-flow-chart-with-tooltips-and-multi-select_0.0.14_1605038374534_0.25347862229747853"},"_hasShrinkwrap":false}},"time":{"created":"2020-11-10T19:59:34.487Z","0.0.14":"2020-11-10T19:59:34.738Z","modified":"2022-04-04T17:47:25.310Z"},"maintainers":[{"name":"bastinjafari","email":"bastinjafari@gmail.com"}],"description":"A flexible, stateless flow chart library for react.","repository":{"type":"git","url":"git@github.com:BastinJafari/react-flow-chart/tree/feat-multi-select.git"},"author":{"name":"David Revay","email":"daverevay@gmail.com"},"license":"MIT","readme":"# React Flow Chart\n\n### This build additionally implements the multi-select-feature of Xiqi:\nhttps://github.com/MrBlenny/react-flow-chart/pull/204\n\n\n[](https://circleci.com/gh/MrBlenny/react-flow-chart)\n\n- [X] Dragabble Nodes and Canvas\n- [x] Create curved links between ports\n- [x] Custom components for Canvas, Links, Ports, Nodes\n- [X] React state container\n- [X] Update state on Select/Hover nodes, ports and links\n- [x] Base functionality complete\n- [X] Stable NPM version\n- [X] Scroll/Pinch canvas to zoom\n- [ ] Ctrl+z/Ctrl+y history\n- [X] Read-only mode\n- [ ] Redux state container\n- [ ] Arrow heads on links\n- [ ] Docs\n\n### [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)\n\n### [CodeSandbox Demo](https://codesandbox.io/s/4w46wv71o7)\n\nThis 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.\n\nFor example:\n\n\n\n## Data Stucture\n\nThe 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.\n\n#### Example\n\n```ts\n\nexport const chart: IChart = {\n offset: {\n x: 0,\n y: 0,\n },\n scale: 1,\n nodes: {\n node1: {\n id: 'node1',\n type: 'output-only',\n position: {\n x: 300,\n y: 100,\n },\n ports: {\n port1: {\n id: 'port1',\n type: 'output',\n properties: {\n value: 'yes',\n },\n },\n port2: {\n id: 'port2',\n type: 'output',\n properties: {\n value: 'no',\n },\n },\n },\n },\n node2: {\n id: 'node2',\n type: 'input-output',\n position: {\n x: 300,\n y: 300,\n },\n ports: {\n port1: {\n id: 'port1',\n type: 'input',\n },\n port2: {\n id: 'port2',\n type: 'output',\n },\n },\n },\n },\n links: {\n link1: {\n id: 'link1',\n from: {\n nodeId: 'node1',\n portId: 'port2',\n },\n to: {\n nodeId: 'node2',\n portId: 'port1',\n },\n },\n },\n selected: {},\n hovered: {},\n}\n\n```\n\nThis will produce a simple 2 noded chart which looks like:\n\n\n\n## Basic Usage\n\n```bash\nnpm i @mrblenny/react-flow-chart\n```\n\nMost components/types are available as a root level export. Check the storybook demo for more examples.\n\n```tsx\nimport { FlowChartWithState } from \"@mrblenny/react-flow-chart\";\n\nconst chartSimple = {\n offset: {\n x: 0,\n y: 0\n },\n nodes: {\n node1: {\n id: \"node1\",\n type: \"output-only\",\n position: {\n x: 300,\n y: 100\n },\n ports: {\n port1: {\n id: \"port1\",\n type: \"output\",\n properties: {\n value: \"yes\"\n }\n },\n port2: {\n id: \"port2\",\n type: \"output\",\n properties: {\n value: \"no\"\n }\n }\n }\n },\n node2: {\n id: \"node2\",\n type: \"input-output\",\n position: {\n x: 300,\n y: 300\n },\n ports: {\n port1: {\n id: \"port1\",\n type: \"input\"\n },\n port2: {\n id: \"port2\",\n type: \"output\"\n }\n }\n },\n },\n links: {\n link1: {\n id: \"link1\",\n from: {\n nodeId: \"node1\",\n portId: \"port2\"\n },\n to: {\n nodeId: \"node2\",\n portId: \"port1\"\n },\n },\n },\n selected: {},\n hovered: {}\n};\n\nconst Example = (\n \n);\n```\n\n### With Internal State\n[stories/InternalReactState.tsx](./stories/InternalReactState.tsx)\n\n### With External State\n[stories/ExternalReactState.tsx](./stories/ExternalReactState.tsx)\n\n### Readonly Mode\n[stories/ReadonlyMode.tsx](./stories/ReadonlyMode.tsx)\n\n### Tooltips\n[stories/Tooltips.tsx](./stories/Tooltips.tsx)\n\nYou can add tooltips by adding `tooltipsGlobal` into the chartState (`IChart`) or `tooltip` to the node objects.\n`tooltipsGlobal` will apply for all nodes and `tooltip` for individual nodes.\n\n#### Example\n\n```tsx\n\nexport const tooltipChart: IChart = {\n tooltipsGlobal: {\n showTooltip: true,\n toogleOffWhenClicked: 'global',\n text: 'This is the global tooltip and will be toggled off, when clicked',\n },\n offset: {\n x: 0,\n y: 0,\n },\n scale: 1,\n nodes: {\n node1: {\n tooltip: {\n showTooltip: true,\n text: 'this is the tooltip for node1',\n },\n...\n node2: {\n tooltip: {\n showTooltip: true,\n toogleOffWhenClicked: 'node',\n text: 'this is the tooltip for node2 and will be toggled off when clicked',\n },\n id: 'node2',\n... \n node3: {\n tooltip: {\n showTooltip: false,\n text: 'this is the tooltip for node3 but its off',\n },\n id: 'node3',\n type: 'input-output',\n position: {\n x: 100,\n y: 600,\n },\n...\n```\nYou can also customize the tooltipComponent by adding it to Component props of flowChart:\n\n```tsx\nconst ExampleToolTipComponent = (props: ITooltipComponentDefaultProps) => {\n return (\n \n
{props.tooltip}
\n \n )\n}\n\nexport class Tooltips extends React.Component {\n...\n return ( \n \n \n )\n}\n\n```\n\n### Other Demos\n[stories/ExternalReactState.tsx](./stories)\n\n\n## Contributing\n\nIf you're interested in helping out, let me know. \n\nIn particular, would be great to get a hand with docs and redux / mobx integrations.\n\n\n## Development\n\n```bash\nnpm install\nnpm run start:storybook\n```\n","readmeFilename":"README.md"}