{"_id":"@dendrityc/ngx-canvas-graph","_rev":"3-7ed9794d2ee7a3b73b4d35d6d64b7801","name":"@dendrityc/ngx-canvas-graph","dist-tags":{"latest":"0.0.4"},"versions":{"0.0.1":{"name":"@dendrityc/ngx-canvas-graph","version":"0.0.1","peerDependencies":{"@angular/common":"^12.2.0","@angular/core":"^12.2.0","@dendrityc/ngx-smart-canvas":"latest","dagre":"^0.8.5","uuid":"^8.3.2"},"dependencies":{"tslib":"^2.3.0"},"main":"bundles/dendrityc-ngx-canvas-graph.umd.js","module":"fesm2015/dendrityc-ngx-canvas-graph.js","es2015":"fesm2015/dendrityc-ngx-canvas-graph.js","esm2015":"esm2015/dendrityc-ngx-canvas-graph.js","fesm2015":"fesm2015/dendrityc-ngx-canvas-graph.js","typings":"dendrityc-ngx-canvas-graph.d.ts","sideEffects":false,"description":"This library provides the ngx-canvas-graph component (lib-ngx-canvas-graph) that renders graphs using the dagre graph layout algorithm (https://www.npmjs.com/package/dagre).","_id":"@dendrityc/ngx-canvas-graph@0.0.1","_nodeVersion":"14.16.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-77OCWL4JdR6JVbduLuN0vUKofvmv+aVSm5wM/G4YiNkMql/TZYOct+58oE1DWyXlz2V8eHfLSZAWM9jgItqLEw==","shasum":"23bf1838d759f5d17135dad770d7f8751ffb71b4","tarball":"https://registry.npmjs.org/@dendrityc/ngx-canvas-graph/-/ngx-canvas-graph-0.0.1.tgz","fileCount":26,"unpackedSize":253235,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhmw/oCRA9TVsSAnZWagAA9MYP/0G8KYz1ul8b2gUzSV7Y\n53izWya7Jv2HPK/qgvbMc44CpN5L42BlTi/fgSQzaYvf7Dh1sNXzjv0J4rVr\naVWb6QH0EdrW2US/U+P0HOlRl1I0MBwh+loJzL/JQdu7JDdRlc01TKjZ910G\nqFFUIBlB46pACJjPj2WFM3xI+PUrqzSn7Lq7rcUOWAT84L14HqA76mtTEImc\nTf7b+3i/MHyqw31PkScbseb15hCe8zdwfUhtfRQJp3Vkkev557N2TYFbKvyd\nuy99Zm65Rx2XJ/IajI6fin+PbZ4DiVzU4kxV5hpSL9jbz7RhygZYDsKsg4hi\nARQPbVE9Xl+SRKgrjjeprbXhbo8u5LGWnZ86PN6K0x+0Usai3wE3jt1rBqSV\n1We7ps46J19Qou+HRa0Y8S8+M8lQFdHtVyjVpTMDpHezjFW41GUD8oGZfFEz\nYh9Asd5MMxmhhw1j+sryOKOBjsDsyB/c8It3wv4T4Bsnl7atZMoc2YVW7XRK\nFaUN3alTRCqvjVKcl4pvlV703h0fqY18sLeXQthTC03XU7Vb/ZcRtsi6TWNR\nyTjeO6BC/NECoPds/PWZ9OqVmMbbiLJ8PvJt+hKQAlbjnaROkgN70/Sx3cNV\n0MPzDS7H9mhHtUsp7kZVM5Qjlw+YbtDk4A7cJIKwG2oJ74wc/ks81Jm2bjdV\n7BWl\r\n=u3k+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDDfsiwG/Evg3VF4tdMmQctU98Is7e0L4Srw3BAWWszXgIgWlWTW654HyhuH8Qt8JqjHeIvORzuMftuDM0k7OZS18s="}]},"_npmUser":{"name":"danbellard","email":"danbellard@micron.com"},"directories":{},"maintainers":[{"name":"danbellard","email":"danbellard@micron.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-canvas-graph_0.0.1_1637552104533_0.2995467500197806"},"_hasShrinkwrap":false},"0.0.3":{"name":"@dendrityc/ngx-canvas-graph","version":"0.0.3","peerDependencies":{"@angular/common":"^12.2.0","@angular/core":"^12.2.0","@dendrityc/ngx-smart-canvas":"latest","dagre":"^0.8.5","uuid":"^8.3.2"},"dependencies":{"tslib":"^2.3.0"},"repository":{"type":"git","directory":"https://github.com/JerpJorp/-dendritic-ngx-canvas-graph"},"homepage":"https://github.com/JerpJorp/-dendritic-ngx-smart-canvas/blob/main/README.md","main":"bundles/dendrityc-ngx-canvas-graph.umd.js","module":"fesm2015/dendrityc-ngx-canvas-graph.js","es2015":"fesm2015/dendrityc-ngx-canvas-graph.js","esm2015":"esm2015/dendrityc-ngx-canvas-graph.js","fesm2015":"fesm2015/dendrityc-ngx-canvas-graph.js","typings":"dendrityc-ngx-canvas-graph.d.ts","sideEffects":false,"description":"This library provides the ngx-canvas-graph component (lib-ngx-canvas-graph) that renders graphs using the dagre graph layout algorithm (https://www.npmjs.com/package/dagre).","_id":"@dendrityc/ngx-canvas-graph@0.0.3","_nodeVersion":"14.16.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-RKK8WJRzPgNOmqkb7tqlEVByEs0a9BH7QR/WUzi7la2UTqIHkdM9bYLgiMDpodIUx7eRrwkRWHJ5Z2M8DkhFCA==","shasum":"651dc835249de5c30d446995ce758db5ff8032ae","tarball":"https://registry.npmjs.org/@dendrityc/ngx-canvas-graph/-/ngx-canvas-graph-0.0.3.tgz","fileCount":26,"unpackedSize":265839,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnBhMCRA9TVsSAnZWagAArgwP/2nf8ulQjEzD3SMzBeJd\nM2fl5fLDuj3WLk3d+Q6fuIQe49aMCEoNgdmBXyssqbgsfbUUDB5iv+gh/3cO\nFzQrfv4nY0pG5y5flr/PONxjDZ6kK9hyDMtpl8e6mc6LRgmoLvFbjkNVyJG0\nLfS1/MuMqCzy66+bILB2gGdMoSGudpULioW39z6v/lgcnFHzvXEjEDylBxu0\nKHW7r+gY+paQ1L0RPwYBSg99DvrF5D59Lb84ohrEQkLL4lADTh93gENq00Hc\ngTEbiP2IGd53xnbZlEJ0AIhwfXfka/EoOOY+Erl+OZQmuU3Lr5Tun7PJ/FLU\nJ0wOS96VZDmUiPtFlFYtdk1slfLF/QzNu6wjfm5LXgQrkXM/5fQg+Q1BdgSf\nov+wkARuGemajJJjwNnhaTyakZI6Wd+nJ/slD+ADTD+g4p9Rk+5fQ/7N8fq4\nlL5ewYisoTzBCSr7E1QbI0wk9L8k6ipi1bkQ4dp10XD8EZ55wZV8dFhmKvdp\nFYuNfPv7dcYixWpPwxAAIUX/Cn0hfnnhjHqu42MasVAX4qVqKDNJA9TryJO8\n+tj8bfwA03GDrk7rQ7O8kNJlg22+Vb2rJP8xOxp2INR3QzTgjN/LgdvdJ/il\noVvU8UNTzlpSKlIMFR8tjQJnwJbagm9lxCmEYK8OY2RYZUmWi5kC8urNj7NF\nKtUv\r\n=KLbi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH0EnR6LDxNlj44MM5hSqOhgs/c5dWyQ9AilITzEKZIXAiEAtkAa+1B5wgABFWbEkHW1eDrWPEDlOlM7SjkNRdQ6U1I="}]},"_npmUser":{"name":"danbellard","email":"danbellard@micron.com"},"directories":{},"maintainers":[{"name":"danbellard","email":"danbellard@micron.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-canvas-graph_0.0.3_1637619788302_0.2449624189537205"},"_hasShrinkwrap":false},"0.0.4":{"name":"@dendrityc/ngx-canvas-graph","version":"0.0.4","peerDependencies":{"@angular/common":"^12.2.0","@angular/core":"^12.2.0","@dendrityc/ngx-smart-canvas":"latest","dagre":"^0.8.5","uuid":"^8.3.2"},"dependencies":{"tslib":"^2.3.0"},"repository":{"type":"git","directory":"https://github.com/JerpJorp/-dendritic-ngx-canvas-graph"},"homepage":"https://github.com/JerpJorp/-dendritic-ngx-smart-canvas/blob/main/README.md","main":"bundles/dendrityc-ngx-canvas-graph.umd.js","module":"fesm2015/dendrityc-ngx-canvas-graph.js","es2015":"fesm2015/dendrityc-ngx-canvas-graph.js","esm2015":"esm2015/dendrityc-ngx-canvas-graph.js","fesm2015":"fesm2015/dendrityc-ngx-canvas-graph.js","typings":"dendrityc-ngx-canvas-graph.d.ts","sideEffects":false,"description":"This library provides the ngx-canvas-graph component (lib-ngx-canvas-graph) that renders graphs using the dagre graph layout algorithm (https://www.npmjs.com/package/dagre).","_id":"@dendrityc/ngx-canvas-graph@0.0.4","_nodeVersion":"14.16.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-urFuGoA4zXiE04agXZEecflssjmusLJNW9/KSXmVk95BAz0Fd81O2zpqxY3KXQ5mVHXf8FIzPwohu3Gx+5Biyg==","shasum":"2616b8949adad966eb83bbad7c9e74f45e42e1f4","tarball":"https://registry.npmjs.org/@dendrityc/ngx-canvas-graph/-/ngx-canvas-graph-0.0.4.tgz","fileCount":26,"unpackedSize":264608,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpqcrCRA9TVsSAnZWagAA/cEP/0nh4xV0hknxlDHV7okN\nz4rcGwovm59l5CoAXjFAHx3jss4tI2EGMavJlMJ0Uq4YicBDseodalafyL+1\nE96TbwJXsvNLA6f5aAQrOP7rxb35ZFD+EnW6H8rY65VmL2eJD4ijHz2EtrQG\nqnTzJAymq11WJxyLFhEgMbE4tlqs120Em/+vsXRwQJPgEKEBzCs2hrmYejOn\nC/ZFsrHmEUGcCi05UI/axNKFh5XFOcV8onPuVdGQJoZuIUL4DLc5rHIx96eN\nCx467wJN8aO7/TRQZTTLoHxh8cDNN51MFnmqzTypB8KdVd2BI07e+K2o5fG4\nRZGFKdAUMD4WYDZYNztxUUbjpTaAtEhMMKleXM8T/bVM1XMrhEhDCfTXmbdn\nB/EJhNpGNdq3I5lU+3+HW8VFBqRH4/GpysxhVw04AbaPAKlHW6L2PA0k80Dj\n6FQH5YAPyHxUj2hm6xsMJ9+85CqJLPAQ73mxhFG7d8Z61gIpsyW65bPF2+DR\n/ReZJuj6vx7izUs0hokyuqGx5pL2cOIjU/MoHJqndEEQyMMVGGO0VykGiwdQ\neLp4vnxkUT2dD4rcVaAlCTkB3AdobCtRDKgQllgwNoDuNnfkXxcCDRCn5GLw\nRdSEnUm9tEH1nH5j6tswIk6abxQWuvMKBK4MlpTfyQ5Js5FIIpf8btMMAjAg\njoM9\r\n=kxfp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB5ccZHI9w518raXgKAXVgpQwE4GX2gF+gf6MqxCS5eRAiEA5PV1oRFmST/VFrXlJN8YUXCAjHItNH2UrLyvm3otEDg="}]},"_npmUser":{"name":"danbellard","email":"danbellard@micron.com"},"directories":{},"maintainers":[{"name":"danbellard","email":"danbellard@micron.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-canvas-graph_0.0.4_1638311723167_0.16922784933078105"},"_hasShrinkwrap":false}},"time":{"created":"2021-11-22T03:35:04.481Z","0.0.1":"2021-11-22T03:35:04.723Z","modified":"2022-04-05T03:44:30.741Z","0.0.3":"2021-11-22T22:23:08.508Z","0.0.4":"2021-11-30T22:35:23.318Z"},"maintainers":[{"name":"danbellard","email":"danbellard@micron.com"}],"description":"This library provides the ngx-canvas-graph component (lib-ngx-canvas-graph) that renders graphs using the dagre graph layout algorithm (https://www.npmjs.com/package/dagre).","readme":"# @dendrityc/ngx-canvas-graph\n\nThis library provides the ngx-canvas-graph component (lib-ngx-canvas-graph) that renders graphs using the dagre graph layout algorithm (https://www.npmjs.com/package/dagre).\n\nThe library is a result of running into performance issues with the @swimlane/ngx-graph library, which uses svg and allows for user interactivity with the rendered noded for moving them around that causes performance issues with high node counts. \n\nThe graphing component relies on @dendrityc/ngx-smart-canvas (https://www.npmjs.com/package/@dendrityc/ngx-smart-canvas), which provides a component for wrapping a canvas element and handling scroll/zoom. \n\nExample usage \n```html\n\n \n\n\n```\n\n### component parameters\n\n* **graphId**: Important only if you are displaying multiple graphs in the same view as it is used to uniquely tag underlying elements. If not provided, a generic uuid is auto-generated\n* **graphSettings**: Instance of dagre.GraphLabel from @types/dagre, and represents the available parameters for the dagre layout algorithm. Default:\n```javascript\n{ width: 1800, \n height: 1000, \n nodesep: 20, \n ranksep: 15, \n rankdir: 'LR' }\n```\n* **initialCollapseDepth**: sets the initial depth in the graph where nodes are collapsed. Default is 99, which means essentially none are collapsed. \n\n* **graphData**: Represents the nodes and edges that will be positioned by the dagre algorithm and rendered as a graph. Updating this input parameter will triger a layout/render cycle.\n```javascript\nexport class GraphData {\n nodes: Node[] = [];\n links: Link[] = []; }\nclass Node {\n id: string;\n displayText: string; \n backColor?: string; \n textColor?: string;\n properties?: { [index: string]: any}) }\nclass Link {\n fromNodeId: string | undefined;\n toNodeId: string | undefined;\n displayText: string; \n color?: string;\n properties?: { [index: string]: any}) }\n```\n* **nodeClick**: Emitted when user clicks on a node (parameter is your Node instance)\n* **nodeDoubleClick**: Emitted when user double clicks on a node (parameter is your Node instance). Note that nodeClick will fire first\n* **nodeMouseOver**: Emitted when user hovers on a node (parameter is your Node instance)\n* **nodePreDraw/nodePostDraw**: Emitted before and after drawing a node. You can implement your own drawing before/after and tell the component to skip default drawing via nodePreDraw.skipDefaultDraw = true\n* **linkPreDraw/linkPostDraw**: Emitted before and after drawing a link. You can implement your own drawing before/after and tell the component to skip default drawing via linkPreDraw.skipDefaultDraw = true\n* **clearOverride**: Emitted when clearing the canvas. If provided by your code, you can draw/clear/color the blank canvas however you want before the graph rendering occurs\n* \n### Other items of note\n* To optimize performance, there is no handling of user interaction with the canvas to reposition rendered nodes. The component relies on the dagre layout algorithm, and the resulting layout is static. \n* Collapse/expand\n * If you use the initialCollapseDepth input parameter, the component will collapse all nodes beyond the depth value.\n * Users can toggle expand/collapse after the graph is rendered\n * **double click** toggles expand/collapse for node under mouse\n * **click**\n * with shift modifer, toggles expand/collapse\n * with shift + ctrl modifier, toggles expand/collapse for node and all descendents\n\n\n### Building a graph\n\nThe library comes with a graph builder class that handles making nodes/links intuitively. Here is an example taking a data structure and turning into a graph\n```javascript\nimport { Project } from \"./project\";\nimport { Action } from \"./action\";\nimport { Possibility } from \"./possibility\";\nimport { BuiltNode, GraphBuilder, Link, Node } from \"ngx-canvas-graph\";\nimport { BuType, SelectedUnit } from \"./common\";\nimport { BaseUnit } from \"./base-unit\";\n\nexport class ProjectToCanvasGraph {\n\n static readonly RootID = 'rootID';\n\n static readonly ColorLkp: {[index: string]: {backColor: string, textColor: string};} = {\n 'situation': {backColor: '#0c515c', textColor: '#5dbecd'},\n 'possibility': {backColor: '#005e46', textColor: '#4dd0af'}, \n 'action': {backColor: '#74261e', textColor: '#ee8277'},\n 'condition': {backColor: '#74261e', textColor: '#ee8277'},\n };\n\n static seenActionNodes: {id: string, node: Node}[];\n\n static Build(project: Project): GraphBuilder {\n this.seenActionNodes = [];\n const builder: GraphBuilder = new GraphBuilder();\n const rootNode = new Node('Flows', '#313131', '#919191', {path: 'Flows'}, 'idROOT' );\n \n const root = builder.AddNode(new Node('Flows', '#313131', '#919191', {path: 'Flows'}, 'idROOT' ));\n project.situations.filter(x => x.initial).forEach(situation => {\n const s = root.AddLinkTo(new Link('', '#DDDDDD'), this.newNode(situation, 'situation', root.node));\n situation.possibilityIds.map(pid => project.possibilities.find(x => x.id === pid))\n .filter(x => x !== undefined)\n .map(x => x as Possibility)\n .forEach(possibility => {\n const p = s.endNode.AddLinkTo(new Link('', '#DDDDDD'), this.newNode(possibility, 'possibility', s.endNode.node));\n possibility.actions.forEach(action => {\n const s = p.endNode.AddLinkTo(new Link('', '#DDDDDD'), this.newNode(action, 'action', p.endNode.node)); \n this.addActionConditions(builder, action, s.endNode);\n });\n });\n });\n\n return builder;\n }\n\n private static addActionConditions(builder: GraphBuilder, action: Action, actionBuiltNode: BuiltNode) {\n action.conditions\n .filter(c => c.action !== undefined)\n .forEach(condition => {\n const targetAction = condition.action as Action; \n\n // this action might already exist \n const existing = this.seenActionNodes.find(x => x.id === targetAction.id);\n \n if (existing) {\n const tabn = actionBuiltNode.AddLinkTo(new Link('', '#767676'), existing.node);\n \n } else {\n const tabn = actionBuiltNode.AddLinkTo(new Link('', '#DDDDDD'), this.newNode(targetAction, 'action', actionBuiltNode.node));\n this.seenActionNodes.push({id: targetAction.id, node: tabn.endNode.node})\n this.addActionConditions(builder, targetAction, tabn.endNode);\n }\n });\n } \n\n private static newNode(bu: BaseUnit, type: BuType, parentNode: Node) {\n const lkp = ProjectToCanvasGraph.ColorLkp[type]; \n const parentBu = parentNode.properties?.selectedUnit?.baseUnit;\n if (parentBu !== undefined) {\n bu.pathToRoot = [... (parentBu as BaseUnit).pathToRoot, bu];\n } else {\n bu.pathToRoot = [bu] ;\n } \n return new Node(bu.name, lkp.backColor, lkp.textColor, {selectedUnit: new SelectedUnit(bu, type)}, bu.id );\n }\n}\n\n```\n\n## Code scaffolding\n\nRun `ng generate component component-name --project ngx-canvas-graph` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ngx-canvas-graph`.\n> Note: Don't forget to add `--project ngx-canvas-graph` or else it will be added to the default project in your `angular.json` file. \n\n## Build\n\nRun `ng build ngx-canvas-graph` to build the project. The build artifacts will be stored in the `dist/` directory.\n\n## Publishing\n\nAfter building your library with `ng build ngx-canvas-graph`, go to the dist folder `cd dist/ngx-canvas-graph` and run `npm publish`.\ne.log\n## Running unit tests\n\nRun `ng test ngx-canvas-graph` to execute the unit tests via [Karma](https://karma-runner.github.io).\n\n## Further help\n\nTo get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.\n\n## publishing\n\n```\nng build @dendrityc/ngx-canvas-graph\ncd dist//dendrityc/ngx-canvas-graph/\nnpm publish --access public\ncd ../../..\n\n```\n","readmeFilename":"README.md","homepage":"https://github.com/JerpJorp/-dendritic-ngx-smart-canvas/blob/main/README.md","repository":{"type":"git","directory":"https://github.com/JerpJorp/-dendritic-ngx-canvas-graph"}}