{"_id":"@amilajack/react-digraph","_rev":"1-56bb8f6c64d43d2925515bfc41cfb449","name":"@amilajack/react-digraph","dist-tags":{"latest":"4.1.0"},"versions":{"4.1.0":{"name":"@amilajack/react-digraph","description":"directed graph react component","version":"4.1.0","keywords":["uber-library","babel","es6","d3","react","graph","digraph"],"repository":{"type":"git","url":"git+https://github.com/uber/react-digraph.git"},"bugs":{"url":"https://github.com/uber/react-digraph/issues/new","email":"antonb@uber.com"},"engines":{"node":">= 0.10.0"},"license":"MIT","main":"dist/index.js","peerDependencies":{"d3":"^4.1.1","radium":"^0.24.1","react":"^16.3.0","react-dom":"^16.3.0","react-icons":"^3.0.5"},"devDependencies":{"babel-cli":"^6.6.5","babel-core":"^6.26.0","babel-eslint":"^8.1.0","babel-istanbul":"^0.12.2","babel-plugin-transform-object-assign":"^6.8.0","babel-preset-es2015":"^6.3.0","babel-preset-react":"^6.16.0","babel-preset-stage-2":"^6.3.0","browserify":"^14.4.0","build-changelog":"^2.1.2","d3":"^4.1.1","enzyme":"^3.2.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.14.0","eslint-plugin-es6-recommended":"^0.1.2","eslint-plugin-import-order":"^2.1.4","eslint-plugin-react":"^7.5.1","jsdom":"^11.5.1","nws":"^1.1.1","opn-cli":"3.1.0","prop-types":"^15.6.0","react":"^16.4.2","react-addons-test-utils":"^15.6.2","react-dom":"^16.4.2","react-icons":"^3.0.5","sinon":"^4.0.1","tape":"^4.0.0"},"scripts":{"build":"rm -rf dist && babel src -d dist --copy-files -s","build-example":"browserify dist/examples/graph.js > dist/examples/graph-example.js","build-large-example":"browserify dist/examples/graph-large.js > dist/examples/graph-large-example.js","prebuild-example":"npm run build","example":"npm run build-example && npm run build-large-example && cd dist/examples && nws -o -p 8000","changelog-major":"build-changelog --major","changelog-minor":"build-changelog --minor","changelog-patch":"build-changelog --patch","cover":"babel-istanbul cover dist/test/index.js --report=text --report=cobertura --report=html","fast-test":"NODE_ENV=test node dist/test/index.js","jenkins-install":"npm install","jenkins-jshint":"npm run lint -- --o=jshint.xml --f=checkstyle","jenkins-test":"npm run jenkins-jshint && (mkdir -p test && npm run cover | tee test/test.js.tap)","lint":"eslint src","precommit":"npm run lint -s","prefast-test":"npm run prepublish","prepublish":"npm run build","test":"NODE_ENV=test npm run lint && npm run fast-test","view-cover":"npm run cover -- --report=html && opn ./coverage/index.html"},"gitHead":"81e6b95de0462c65223a67feb2279e1ba56414c5","homepage":"https://github.com/uber/react-digraph#readme","_id":"@amilajack/react-digraph@4.1.0","_npmVersion":"5.6.0","_nodeVersion":"8.11.4","_npmUser":{"name":"amilajack","email":"amilajack@gmail.com"},"dist":{"integrity":"sha512-uBr0TRiRDrX61/na37bMNtpLg3vGDNeIqKltYOhDi4UiP+ranG9y0tAAzX/vT15RMvp6QHtSnQ7xV+qzXGa/cQ==","shasum":"b8c0036975b418442c77af047a879e433f4d7738","tarball":"https://registry.npmjs.org/@amilajack/react-digraph/-/react-digraph-4.1.0.tgz","fileCount":10,"unpackedSize":1629164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbkWt7CRA9TVsSAnZWagAAlAMP/0y9KY4MVfQkFfljEvKa\nUZlYj3ojMnwf8B2UOUwTI47qsnJpQYQF5pIoHHuph014oUUo+gBIPi6Pd9xn\n6CEjiUgm3gQN8zMh+OHIXHCBVUSYCpwftnjlE/oMql79UTgq8tsP6IdNYf4k\nrewTPXarCCkSjG9vikrj+G4UF297t7MN90FF1A8tzSvYqwz9BjUNbijZEYOD\nRR97yn/7ATNkZMrHHWdltC1GUBuG9EmWSriXFrJZvM+zkmKY5xPzkQy0ofjo\nfOJGTKmGvaGToUVhx/Antnsf/g07HUFomOjsUik12WcZj0yvJ7eVjXJdqtnH\nBrnoReyVvxYm3yCaXU9wIpWOyLswjVYUlyB74R/jCAn5Ane4MQd2QLWfgsA6\nes/FROoGpog1zzH4CE5krMKbulbk8qdmpFgcuvqHI39K6MneAck4vSEkZk0Z\nBxmSaSNRA7CvGgDJruqRnzTpuLnzFrdp1uo6JTXjfhxEHNGX3vxGSl3m+XED\nBY/ScUjf4jjuHxEPJxPE7jMpmVj8NBorxI0WnGQjnzit41glQhCDu0L7a0tX\n1YzMWrJIQOxYb077rPVHXrzfaoIRkHZiVvg1SPx0I+Y/pnTIMdemrZ+jpPn/\nvf80cYvt36eL0Tji7E8XASgqA47T6XzebbBRzkdc6Bjp1YHx5EzxDenud2Vm\nVa8y\r\n=fj9Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID/OAZQa8g9vzOuS2MN88pE2rAfDq56yU09i7R6a7PdwAiBU/xqp7W4YN577wA3CY+XNUVmOIgzYA+xvfpZbMGkVJQ=="}]},"maintainers":[{"name":"amilajack","email":"amilajack@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-digraph_4.1.0_1536256890525_0.11824328487825353"},"_hasShrinkwrap":false}},"time":{"created":"2018-09-06T18:01:30.373Z","4.1.0":"2018-09-06T18:01:30.791Z","modified":"2022-04-04T13:48:47.580Z"},"maintainers":[{"name":"amilajack","email":"amilajack@gmail.com"}],"description":"directed graph react component","homepage":"https://github.com/uber/react-digraph#readme","keywords":["uber-library","babel","es6","d3","react","graph","digraph"],"repository":{"type":"git","url":"git+https://github.com/uber/react-digraph.git"},"bugs":{"url":"https://github.com/uber/react-digraph/issues/new","email":"antonb@uber.com"},"license":"MIT","readme":"# react-digraph\n![Demo](example.gif?raw=true)\n## Overview\n\nA React component which makes it easy to create a directed graph editor without implementing any of the SVG drawing or event handling logic.\n\n## Installation\n\n```\nnpm install --save react-digraph\n```\n\n## Usage\n\n\nThe default export is a component called 'GraphView'; it provides a multitude of hooks for various graph editing operations and a set of controls for zooming. Typically, it should be wrapped in a higher order component that supplies various callbacks (onCreateNode, onCreateEdge etc...).\n\nAll nodes and edges can have a type attribute set - nodes also support a subtype attribute. These can be passed to GraphView via the nodeTypes, nodeSubtypes, and edgeTypes props. GraphView will look up the corresponding SVG elements for the node's type/subtype and the edge's type and draw it accordingly.\n\nIt is often convenient to combine these types into a configuration object that can be referred to elsewhere in the application and used to associate events fired from nodes/edges in the graphView with other actions in the application. Here is an abbreviated example:\n\n```jsx\nimport GraphView from 'react-digraph'\n\n\n\nconst GraphConfig = {\n NodeTypes: {\n empty: {\n typeText: \"None\",\n shapeId: \"#empty\",\n shape: (\n \n \n \n )\n }\n },\n NodeSubtypes: {},\n EdgeTypes: {\n emptyEdge: {\n shapeId: \"#emptyEdge\",\n shape: (\n \n \n \n )\n }\n }\n}\n\nconst EMPTY_TYPE = \"empty\" // Text on empty nodes is positioned differently\nconst NODE_KEY = \"id\" // Allows D3 to correctly update DOM\n\nclass Graph extends Component {\n\n constructor(props) {\n super(props);\n\n this.state = {\n graph: sample,\n selected: {}\n }\n }\n\n /* Define custom graph editing methods here */\n\n render() {\n const nodes = this.state.graph.nodes;\n const edges = this.state.graph.edges;\n const selected = this.state.selected;\n\n const NodeTypes = GraphConfig.NodeTypes;\n const NodeSubtypes = GraphConfig.NodeSubtypes;\n const EdgeTypes = GraphConfig.EdgeTypes;\n\n return (\n
\n\n \n
\n );\n }\n\n}\n```\n\nA typical graph that would be stored in the Graph component's state looks something like this:\n\n```json\n{\n \"nodes\": [\n {\n \"id\": 1,\n \"title\": \"Node A\",\n \"x\": 258.3976135253906,\n \"y\": 331.9783248901367,\n \"type\": \"empty\"\n },\n {\n \"id\": 2,\n \"title\": \"Node B\",\n \"x\": 593.9393920898438,\n \"y\": 260.6060791015625,\n \"type\": \"empty\"\n },\n {\n \"id\": 3,\n \"title\": \"Node C\",\n \"x\": 237.5757598876953,\n \"y\": 61.81818389892578,\n \"type\": \"empty\"\n },\n {\n \"id\": 4,\n \"title\": \"Node C\",\n \"x\": 600.5757598876953,\n \"y\": 600.81818389892578,\n \"type\": \"empty\"\n }\n ],\n \"edges\": [\n {\n \"source\": 1,\n \"target\": 2,\n \"type\": \"emptyEdge\"\n },\n {\n \"source\": 2,\n \"target\": 4,\n \"type\": \"emptyEdge\"\n }\n ]\n}\n\n```\n\n\nFor a detailed example, check out src/examples/graph.js.\nTo run the example:\n```\nnpm install\nnpm run example\n```\ngo to localhost:8000.\n\n- To add nodes, hold shift and click on the grid.\n- To add edges, hold shift and click/drag to between nodes.\n- To delete a node or edge, click on it and press delete.\n- Click and drag nodes to change their position.\n\nAll props are detailed below.\n\n\n## Props\n\n| Prop | Type | Required | Notes |\n| --------------------|:-------:| :--------:| :----------------------------------------:|\n| nodeKey | string | true | Key for D3 to update nodes(typ. UUID). |\n| emptyType | string | true | 'Default' node type. |\n| nodes | array | true | Array of graph nodes. |\n| edges | array | true | Array of graph edges. |\n| selected | object | true | The currently selected graph entity. |\n| nodeTypes | object | true | Config object of available node types. |\n| nodeSubtypes | object | true | Config object of available node subtypes. |\n| edgeTypes | object | true | Config object of available edge types. |\n| getViewNode | func | true | Node getter. |\n| onSelectNode | func | true | Called when a node is selected. |\n| onCreateNode | func | true | Called when a node is created. |\n| onUpdateNode | func | true | Called when a node is moved. |\n| onDeleteNode | func | true | Called when a node is deleted. |\n| onSelectEdge | func | true | Called when an edge is selected. |\n| onCreateEdge | func | true | Called when an edge is created. |\n| onSwapEdge | func | true | Called when an edge 'target' is swapped. |\n| onDeleteEdge | func | true | Called when an edge is deleted. |\n| canDeleteNode | func | false | Called before a node is deleted. |\n| canCreateEdge | func | false | Called before an edge is created. |\n| canDeleteEdge | func | false | Called before an edge is deleted. |\n| renderEdge | func | false | Called to render edge geometry. |\n| renderNode | func | false | Called to render node geometry. |\n| renderDefs | func | false | Called to render svg definitions. |\n| renderBackground | func | false | Called to render svg background. |\n| readOnly | bool | false | Disables all graph editing interactions. |\n| enableFocus | bool | false | Adds a 'focus' toggle state to GraphView. |\n| maxTitleChars | number | false | Truncates node title characters. |\n| transitionTime | number | false | Fade-in/Fade-out time. |\n| primary | string | false | Primary color. |\n| light | string | false | Light color. |\n| dark | string | false | Dark color. |\n| style | object | false | Style prop for wrapper. |\n| gridSize | number | false | Overall grid size. |\n| gridSpacing | number | false | Grid spacing. |\n| gridDot | number | false | Grid dot size. |\n| minZoom | number | false | Minimum zoom percentage. |\n| maxZoom | number | false | Maximum zoom percentage. |\n| nodeSize | number | false | Node bbox size. |\n| edgeHandleSize | number | false | Edge handle size. |\n| edgeArrowSize | number | false | Edge arrow size. |\n| zoomDelay | number | false | Delay before zoom occurs. |\n| zoomDur | number | false | Duration of zoom transition. |\n| graphControls | boolean | true | Whether to show zoom controls. |\n\n## Notes\n\n- To run the tests, you'll need to be using at least node v4.0 (for jsDom).\n","readmeFilename":"README.md"}