{"_id":"@abusix/storm-react-diagrams","_rev":"11-dabfe583ef6d60d9230342618f1112f5","name":"@abusix/storm-react-diagrams","dist-tags":{"latest":"4.0.1"},"versions":{"4.0.0":{"name":"@abusix/storm-react-diagrams","version":"4.0.0","repository":{"type":"git","url":"git+https://github.com/projectstorm/react-diagrams.git"},"keywords":["web","diagram","diagrams","react","typescript","flowchart","simple","links","nodes"],"main":"./dist/main.js","typings":"./dist/src/main","author":{"name":"dylanvorster"},"scripts":{"test":"jest --no-cache","storybook":"start-storybook -p 9001 -c .storybook","storybook:build":"build-storybook -c .storybook -o .out","storybook:github":"storybook-to-ghpages","prepublishOnly":"export NODE_ENV=production && webpack && ./node_modules/node-sass/bin/node-sass --output-style compressed ./src/sass.scss > ./dist/style.min.css","pretty":"prettier --use-tabs --write \"{src,demos}/**/*.{ts,tsx}\" --print-width 120","build":"npm run prepublishOnly"},"dependencies":{"closest":"^0.0.1","lodash":"^4.17.4","react":"^16.2.0"},"devDependencies":{"@storybook/addon-actions":"^3.3.9","@storybook/addon-options":"^3.3.9","@storybook/addon-storyshots":"^3.3.9","@storybook/addons":"^3.3.9","@storybook/react":"^3.3.9","@storybook/storybook-deployer":"^2.2.0","@types/jest":"^22.0.1","@types/lodash":"^4.14.92","@types/node":"^9.3.0","@types/puppeteer":"^0.13.9","@types/react":"^16.0.34","awesome-typescript-loader":"^3.4.1","css-loader":"^0.28.9","dagre":"^0.8.1","file-loader":"^1.1.6","jest":"^22.1.3","jest-cli":"^22.1.3","json-beautify":"^1.0.1","node-sass":"^4.7.2","prettier":"^1.10.2","puppeteer":"^1.0.0","raf":"^3.4.0","raw-loader":"^0.5.1","react-dom":"^16.2.0","react-syntax-highlighter":"^6.1.2","react-test-renderer":"^16.2.0","sass-loader":"^6.0.6","source-map-loader":"^0.2.3","storybook-host":"^4.1.5","storybook-readme":"^3.2.0","style-loader":"^0.19.1","tslint":"^5.9.1","typescript":"^2.6.2","webpack":"^3.10.0"},"gitHead":"2621f3e451bc00789b5cca58b157f78b8ad48ea6","description":"__DEMO__: http://www.projectstorm.io/react-diagrams","bugs":{"url":"https://github.com/projectstorm/react-diagrams/issues"},"homepage":"https://github.com/projectstorm/react-diagrams#readme","_id":"@abusix/storm-react-diagrams@4.0.0","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"jupiterrr","email":"hello@carstengriesheimer.de"},"dist":{"integrity":"sha512-+MkekRrHBLTSKini1BzPabi6OCgEoYx6dSOVV3M7NB8pbj8N0WUxlRGpeU2cUyij8od8C7/DYqqz7Gzked4AvA==","shasum":"36caec029389f14d8603ffc6bf9dc80d381eccea","tarball":"https://registry.npmjs.org/@abusix/storm-react-diagrams/-/storm-react-diagrams-4.0.0.tgz","fileCount":110,"unpackedSize":845188,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbK+GUCRA9TVsSAnZWagAAhHAP/05KQMREBgYvXamNvwjZ\nLL8Aa7e3mZgAbDNNxhE3gMbyTT2eAL71wibM1E2+VWz+TsyhD2cyDuv7ihXB\nhpcaww8T0lvO1fZX0oEewQYHVtqwef7wjgQEQJfgYZROSWKOgXHsnSLslOVF\nzM39IrdO9dTmVrDDAATQ8FlswTcMuurxWwBBbyPw/K1m2eyeWh54w2c34PW/\nWXzPUWmSZ8Rtxy/64eDMZAeVCsvDPU+avSpsccc4I5bppWzsgUNqfzufwHGh\nhqeMkFrtLaLPTEmnll6a42MtnRvhBcytOaOT2VMOJ1XDUtEb6X9i2U6IQly6\nszv4rcLCdn7FR+Awtyd5JDeJ1w7rpI369+SZ8Ng0yPm7JOU7DdTD9xDugr75\nwINSOpQ7e6sCvLb/beV8k1eCy1hACrAbSLL9ISXz4oICkU74sKOGNoTGY/wq\n8FLkYBP3qUlwBHvuPsNdP3pdSPAe2E2hKEk1RKB1uPRS1T7sT1hF1w1g0zeF\nxTGSMgTNYZc5YlKDGQFGKQ/zfvDy8BGNNb7QF7/bWqrlEseq3E5Sbb3DYp9w\nr95KPsUwFpVsZgfm3DUPBr+RVnbm7PGt8MVICH7v+mLcwLe04Tbn/i5Qmtrr\nRlbs/rRb5Ugg3/Vmx1g9Lkot0d87hWSiInE21o06MYZZ7ZJwtCV9uVuiqlyg\nDyW2\r\n=R7yp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYRg9WmgZMeO2e/vxYl3sjvDd3Wfc2ptls/bdGcvYN9wIgZYGFltQEyhwqMWrJ7PCfQzYK6TfHqUSoi4LZOn8b8uE="}]},"maintainers":[{"name":"jupiterrr","email":"hello@carstengriesheimer.de"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storm-react-diagrams_4.0.0_1529602452851_0.504997244885208"},"_hasShrinkwrap":false},"4.0.1":{"name":"@abusix/storm-react-diagrams","version":"4.0.1","repository":{"type":"git","url":"git+https://github.com/projectstorm/react-diagrams.git"},"keywords":["web","diagram","diagrams","react","typescript","flowchart","simple","links","nodes"],"main":"./dist/main.js","typings":"./dist/src/main","author":{"name":"dylanvorster"},"scripts":{"test":"jest --no-cache","storybook":"start-storybook -p 9001 -c .storybook","storybook:build":"build-storybook -c .storybook -o .out","storybook:github":"storybook-to-ghpages","prepublishOnly":"export NODE_ENV=production && webpack && ./node_modules/node-sass/bin/node-sass --output-style compressed ./src/sass.scss > ./dist/style.min.css","pretty":"prettier --use-tabs --write \"{src,demos}/**/*.{ts,tsx}\" --print-width 120","build":"npm run prepublishOnly"},"dependencies":{"closest":"^0.0.1","lodash":"^4.17.4","react":"^16.2.0"},"devDependencies":{"@storybook/addon-actions":"^3.3.9","@storybook/addon-options":"^3.3.9","@storybook/addon-storyshots":"^3.3.9","@storybook/addons":"^3.3.9","@storybook/react":"^3.3.9","@storybook/storybook-deployer":"^2.2.0","@types/jest":"^22.0.1","@types/lodash":"^4.14.92","@types/node":"^9.3.0","@types/puppeteer":"^0.13.9","@types/react":"^16.0.34","awesome-typescript-loader":"^3.4.1","css-loader":"^0.28.9","dagre":"^0.8.1","file-loader":"^1.1.6","jest":"^22.1.3","jest-cli":"^22.1.3","json-beautify":"^1.0.1","node-sass":"^4.7.2","prettier":"^1.10.2","puppeteer":"^1.0.0","raf":"^3.4.0","raw-loader":"^0.5.1","react-dom":"^16.2.0","react-syntax-highlighter":"^6.1.2","react-test-renderer":"^16.2.0","sass-loader":"^6.0.6","source-map-loader":"^0.2.3","storybook-host":"^4.1.5","storybook-readme":"^3.2.0","style-loader":"^0.19.1","tslint":"^5.9.1","typescript":"^2.6.2","webpack":"^3.10.0"},"gitHead":"caec73330c3ee08db0282780af20050daeaab921","description":"__DEMO__: http://www.projectstorm.io/react-diagrams","bugs":{"url":"https://github.com/projectstorm/react-diagrams/issues"},"homepage":"https://github.com/projectstorm/react-diagrams#readme","_id":"@abusix/storm-react-diagrams@4.0.1","_nodeVersion":"10.9.0","_npmVersion":"6.10.1","dist":{"integrity":"sha512-FAugZYEdG1KvgJGXy0gMdsZlik8AVlHql0r6dmoxw2FRAamPPt7Vdc7MX+WxS5EMdVmZEg0iB/ut+MgKtytPAA==","shasum":"02574df49868a56b05c88331922c5c99c951a3a4","tarball":"https://registry.npmjs.org/@abusix/storm-react-diagrams/-/storm-react-diagrams-4.0.1.tgz","fileCount":109,"unpackedSize":559901,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdSVVYCRA9TVsSAnZWagAA5uwQAI1sj/inFCYaeyXjr40x\noyHD5cEcoAs61U8MYJuQeBj2WmtPXaWleUFhhgBqahZXKGbBaVV0zwGqhec9\n+hYTzD74/+UPz1J6aWysXj19Rxi7BlgyELSusblUPNwyLcEa/Kh+ViyCVlbU\nkBBNxMU+ZAHPkMaQ3Zb/hhd1cp4aMwHBH/I8I0+Y9+WMw10wDrmpzg4NA2+e\nOUnSjxDX9wTBT8OSBPR5q12weKNnsitMooAlDlXl9Nb14aRclMlXrHlSv/ng\n7yP84/MFDoF2wIUMjyS7GVEVM1cA9vSEkpa1mJyOOYew5gudn/UA93ZKb6kE\nDk+KuRmqGQFemG26GYt8OzO2TFUD1iML87hTuXLzEmwueEMfUznXKtc35t/N\nRiDmOVJZ3+JDFQOKBalMvTaQ/1uGZpOV7yZr17zWSvftn3z1HTJ+yvLCmdci\nVNMs+mtyRercErTPqAbeHvM9xbGGggWMlO9+Lc3vCaruw0nFZm292PMmEMuO\n4orDQKTeGeTzkDplKxxvTnGZ38RQYW10ilstnr6nEpPn+kBEuy15YrXE0gv2\niinabqOCQcWTMXmvrohm3me9mj6wj3ZLdyAFSzvvi1WbF3Lp1o+7kok+1lP4\nIOclHTr+qT0OTdR9dpok3td6WmB4/cgVFXnv3P5cYcD/PoB4EGWzuVw62Rqh\n0x9C\r\n=Xla2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHrlcn/ihxQpPg5pOct3MPKZEwP2MJ9Tobn1VIot2w/zAiADAEVgIKywcB36sHgg8CsmhJ8iO9GwUWmFRrnYTmTL3Q=="}]},"maintainers":[{"name":"jupiterrr","email":"hello@carstengriesheimer.de"}],"_npmUser":{"name":"jupiterrr","email":"hello@carstengriesheimer.de"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storm-react-diagrams_4.0.1_1565087063526_0.8647446521411168"},"_hasShrinkwrap":false}},"time":{"created":"2018-06-21T17:34:12.594Z","4.0.0":"2018-06-21T17:34:12.933Z","modified":"2024-05-08T14:13:41.800Z","4.0.1":"2019-08-06T10:24:23.681Z"},"maintainers":[{"email":"info@abusix.com","name":"abusix-main"},{"email":"social@coderwelsch.com","name":"coderwelsch"},{"email":"rodrigo.delarivera@abusix.com","name":"a-rodelta"},{"email":"alexander.wagner@abusix.com","name":"a2x_at_abusix"},{"email":"fabian.isele@abusix.com","name":"fabianskii"},{"email":"thomas.dissert@abusix.com","name":"thomasdissertabusix"}],"description":"__DEMO__: http://www.projectstorm.io/react-diagrams","homepage":"https://github.com/projectstorm/react-diagrams#readme","keywords":["web","diagram","diagrams","react","typescript","flowchart","simple","links","nodes"],"repository":{"type":"git","url":"git+https://github.com/projectstorm/react-diagrams.git"},"author":{"name":"dylanvorster"},"bugs":{"url":"https://github.com/projectstorm/react-diagrams/issues"},"readme":"# STORM React Diagrams\n\n__DEMO__: http://www.projectstorm.io/react-diagrams\n\n__Latest Release Notes__: http://dylanv.blog/2018/01/18/storm-react-diagrams-v4-0-0/\n\nA super simple, no-nonsense diagramming library written in React that just works.\n\n[![Join the chat at https://gitter.im/projectstorm/react-diagrams](https://badges.gitter.im/projectstorm/react-diagrams.svg)](https://gitter.im/projectstorm/react-diagrams?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)\n[![NPM](https://img.shields.io/npm/v/storm-react-diagrams.svg)](https://npmjs.org/package/storm-react-diagrams)\n[![NPM](https://img.shields.io/npm/dt/storm-react-diagrams.svg)](https://npmjs.org/package/storm-react-diagrams)\n[![CircleCI](https://circleci.com/gh/projectstorm/react-diagrams/tree/master.svg?style=svg)](https://circleci.com/gh/projectstorm/react-diagrams/tree/master)\n\n![Demo2](./images/example1.png)\n\n![Demo2](./images/example2.png)\n\n![Demo2](./images/example3.png)\n\n## Introduction\n\nA no-nonsense diagramming library written entirely in React with the help of Lodash, and a single polyfill. It aims to be:\n\n* Simple, and void of any fuss/complications when implementing it into your own application\n* Customizable without having to hack the core (adapters/factories etc..)\n* Simple to operate and understand without sugar and magic\n* Fast and optimized to handle large diagrams with hundreds of nodes/links\n* Super easy to use, and should work as you expect it to\n\n\n## Developer Usage\n\n`npm install storm-react-diagrams` or `yarn add storm-react-diagrams`\n\n### How to run demos\n\nAfter running `yarn install` you must then run:  `yarn run storybook`\n\n### How to build\n\nSimply run ```webpack``` in the root directory (or ```export NODE_ENV=production && webpack``` if you want a production build) and it will spit out the transpiled code and typescript definitions into the dist directory as a single file. __It will also compile the code for the demos__ .We use webpack for this because TSC cannot compile a single UMD file (TSC can currently only output multiple UMD files).\n\n_NOTE:_ We turn off name mangeling in production builds because we require class names to be left intact when serializing.\n\n### Make your own nodes\n\nTo see how to create your own nodes like the one below, take a look at __demo3__:\n\n![Demo2](./images/demo3.png)\n\n## How does it work\n\nThe library uses a Model Graph to represent the virtual diagram and then renders the diagram using\n2 layers:\n* Node Layer -> which is responsible for rendering nodes as HTML components\n* Link Layer -> which renders the links as SVG paths\n\nEach node and link is fed into a factory that then generates the corresponding node or link react widget.\nTherefore, to create custom nodes and links, register your own factories that return your own widgets.\n\nAs long as a node contains at least one port and the corresponding NodeWidget contains at least one PortWidget,\na link can be connected to it.\n\n## Questions\n\n[Questions](docs/Questions.md)\n\n## User Usage\n\n__Delete__ removes any selected items\n![__Delete__](./images/rjdDelete.gif)\n\n__Shift + Mouse Drag__ triggers a multi-selection box\n![Shift + Mouse Drag](./images/mouseDrag.gif)\n\n__Shift + Mouse Click__ selects the item (items can be multi-selected)\n![Shift + Mouse Click](./images/shiftClick.gif)\n\n__Mouse Drag__ drags the entire diagram\n![Mouse Drag](./images/canvasDrag.gif)\n\n__Mouse Wheel__ zooms the diagram in / out\n![Mouse Wheel](./images/mouseWheel.gif)\n\n__Click Link + Drag__ creates a new link point\n![Click Link + Drag](./images/createPoint.gif)\n\n__Click Node Port + Drag__ creates a new link\n![Click Node Port + Drag](./images/createLink.gif)\n","readmeFilename":"README.md"}