{"_id":"@bastinjafari/react-flow-chart-with-tooltips","_rev":"6-f7fb110959cdc7be8e78a26414f6aa00","time":{"created":"2020-11-01T01:12:51.436Z","0.0.14":"2020-11-01T01:12:51.591Z","modified":"2022-04-04T17:47:25.152Z"},"name":"@bastinjafari/react-flow-chart-with-tooltips","dist-tags":{"latest":"0.0.14"},"versions":{"0.0.14":{"name":"@bastinjafari/react-flow-chart-with-tooltips","version":"0.0.14","description":"A flexible, stateless flow chart library for react, now with tooltips!.","main":"src/index.js","repository":{"type":"git","url":"git@github.com/BastinJafari/react-flow-chart/tree/add-tooltips.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@0.0.14","_nodeVersion":"12.13.0","_npmVersion":"6.12.0","dist":{"integrity":"sha512-7/FgymGcZGuLT1A3Jjvk8inJp1J9otfBb7hwq0RZUetjQrXaZzUWMigA56XgQ+GIqrR3LhkNR69bAWsuWoWEWg==","shasum":"a0eff1de97b8cb0bc1bbd961cb612525183038e0","tarball":"https://registry.npmjs.org/@bastinjafari/react-flow-chart-with-tooltips/-/react-flow-chart-with-tooltips-0.0.14.tgz","fileCount":140,"unpackedSize":159919,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnguTCRA9TVsSAnZWagAAYn8P/0m5DxoW+MI5PbJbSHUB\n6ei1WnvtxVnl0ALVKxLAgdBEXmuP1s4dMeJDnkIlxs/sMl+lCJ82xtG/V+6G\n0y+HswRmj1uFn3xi7i/k2AzsAvyWSCRCCd0268cI4hXqFQShErVnhya0zTyq\n+416dMyjsrSmqbpAa0D03TZ93U+iW3lUbk31LJwgPr8UZDlZ7oc5CVDY8pGT\nRPqrNapb3j7QiA2TLBivghzilZfK+7aQ8a0gcx+DgYwZrULjlWj+AjCG+3Gd\nRYq0t2ADLCJbn9IEF1fQtkEg4Te49GRtZb9QRk2jePQrOBB/0QLZVVKOsjjb\nDd1gSg/XERTe6kZ9Tb9fI1iuWOzc7HWEJjwUPi0gKz2+W453V7s1Iv4gyc8F\nKwOzlucGDua3As5lkL+DpwuFBOaUEjCTZB1FNPlt2nUzr89C2Kdty+V8/WkB\nZj4A6iXdfTThUSqJZzQ5xLywTsDT5CTDHpk3omIlXriRWidjS3SeU8GjbFM1\nC+3CUxMvIhkNMi92wqdT0+MT3Ss04INhXM7ddwIolh9mNIEnaSzWHQMqSuxk\nFKy7ViIU0mXdhRrgwKS5lfXbcmhTpyj34TrUscQTi2uT1UGNb7oxr7zRY5/M\nZDvrN8yzhbSCeNsuUO1cMZFe2nZZ6HN/r2b/tajRPtAPtBXvtPzcXoGU1D01\n8Oe0\r\n=4oHS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBwJGm8yc3LVb4PqAAXmNVycGYCyAyz9hUgxSt2u/zxgAiBQBfVuaUsPcKSygE/3BAJdWQTeY0WJoIm6eOXM1H1w0g=="}]},"maintainers":[{"name":"bastinjafari","email":"bastinjafari@gmail.com"}],"_npmUser":{"name":"bastinjafari","email":"bastinjafari@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-flow-chart-with-tooltips_0.0.14_1604193171486_0.3022315924892809"},"_hasShrinkwrap":false}},"maintainers":[{"name":"bastinjafari","email":"bastinjafari@gmail.com"}],"description":"A flexible, stateless flow chart library for react, now with tooltips!.","repository":{"type":"git","url":"git@github.com/BastinJafari/react-flow-chart/tree/add-tooltips.git"},"author":{"name":"David Revay","email":"daverevay@gmail.com"},"license":"MIT","readme":"# React Flow Chart\n\nThis is the npm package for the tooltip pull request:\n\nhttps://github.com/MrBlenny/react-flow-chart/pull/217\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### With Tooltips\n[stories/Tooltips.tsx](./stories/ReadonlyMode.tsx)\n\nYou can add tooltips by adding tooltipsGlobal into the chartState or tooltip to the node configuration.\ntooltipsGlobal will apply for all nodes and tooltip for individual nodes.\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 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 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 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 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...\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\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"}