项目作者: graphql-editor

项目描述 :
☊ Tool for making node graphs. Inspired by dependency graph. Used mainly for automation services 📈
高级语言: TypeScript
项目地址: git://github.com/graphql-editor/diagram.git
创建时间: 2018-05-26T09:38:45Z
项目社区:https://github.com/graphql-editor/diagram

开源协议:MIT License

下载


Vector 902 (Stroke) (1) Vector 902 (Stroke) (1)" class="reference-link">TREE - GRAPH VISUALISER Vector 902 (Stroke) (1) Vector 902 (Stroke) (1)

@aexol/tree"">npm @aexol/tree"">npm downloads

Tree is a tool for displaying node based systems.
This package contains one dependency.


Table of Contents

Tree Graph Visualiser


Getting Started

This section will help you get started with the graph visualizer.

Javascript

  1. import { Diagram } from '@aexol/tree'
  2. class App {
  3. constructor() {
  4. const root = document.getElementById("root");
  5. if (!root) {
  6. throw new Error("No root html element");
  7. }
  8. this.diagram = new Diagram(root, {});
  9. this.diagram.setNodes([
  10. {
  11. "name": "Query",
  12. "type": "type",
  13. "id": "1",
  14. "description": "",
  15. "inputs": [
  16. "2"
  17. ],
  18. "outputs": [],
  19. "options": [
  20. "query"
  21. ]
  22. },
  23. {
  24. "name": "pizzas",
  25. "type": "Pizza",
  26. "id": "2",
  27. "inputs": [],
  28. "outputs": [
  29. "2"
  30. ],
  31. "description":"get all pizzas a a a from the database",
  32. "options": [
  33. "array",
  34. "required"
  35. ]
  36. },
  37. {
  38. "name": "Pizza",
  39. "type": "type",
  40. "id": "3",
  41. "description": "Main type of the schema",
  42. "inputs": [
  43. "4",
  44. ],
  45. "outputs": [],
  46. "options": []
  47. },
  48. {
  49. "name": "name",
  50. "type": "String",
  51. "id": "4",
  52. "inputs": [],
  53. "outputs": [
  54. "3"
  55. ],
  56. "options": [
  57. "required"
  58. ]
  59. }
  60. ])
  61. }
  62. }
  63. new App()

Light Mode

Diagram is in dark mode by defult, but you can easily switch to light theme. Just add the options for that while creating the Diagram.

  1. import { Diagram, DefaultDiagramThemeLight } from '@aexol/tree'
  2. this.diagram = new Diagram(document.getElementById("root"),
  3. {
  4. theme: DefaultDiagramThemeLight
  5. });


Listening to Diagram Events

It’s possible to attach to certain events that occur inside the diagram.
You can do it by using familiar .on() syntax, e.g.:

  1. this.diagram = new Diagram(/* ... */);
  2. /* ... */
  3. this.diagram.on(EVENT_NAME, () => {
  4. // callback
  5. });


The list of all subscribable events:
|Event|Description|
|:—-|:—-|
| ViewModelChanged | Fires when a view model (pan, zoom) was changed |
| NodeMoving | Fires when node is being moved |
| NodeMoved | Fires when node stops being moved |
| NodeSelected | Fires when node(s) was selected |
| UndoRequested | Fires when undo was requested |
| RedoRequested | Fires when redo was requested |

[!NOTE]
You can unsubscribe your listener by either using .off() or by invoking the unsubscriber function that is returned from .on():

  1. this.diagram = new Diagram(/* ... */);
  2. const callback = (nodeList) => {
  3. console.log('Nodes are moving!', nodeList);
  4. };
  5. this.diagram.on('NodeMoving', callback); // callback will be fired
  6. // ...
  7. this.diagram.off('NodeMoving', callback); // callback will not be fired anymore
  1. this.diagram = new Diagram(/* ... */);
  2. const callback = () => {
  3. console.log('node moving!');
  4. };
  5. const unsubscriber = this.diagram.on('NodeMoving', callback); // callback will be fired
  6. // ...
  7. unsubscriber(); // callback will not be fired anymore


Serialisation of Data

  1. const diagram = new Diagram(/* ... */);
  2. const callback = ({nodes, links}) => {
  3. // Here you receive nodes and links after Serialisation
  4. };
  5. this.diagram.on('DataModelChanged', callback); // callback will be fired


Developing and Growth

  1. $ git clone https://github.com/aexol-studio/tree
  2. $ npm install
  3. $ npm run start


Adding to Your Own Project

  1. $ npm install @aexol/tree


Docs

To generate docs simply type:

  1. npm run docs


Controls

Here is a list of the available controls:
|Action| Result|
|:—-|:—-|
| Press and hold Left Mouse Button and move mouse | Pans the view |
| Press and hold Left Mouse Button on node | Moves the node |
| CLICK ON NODE TYPE | Centers view on parent node (if node is a children of other node) |
| SHIFT + Left Mouse Button Click | Selects multiple nodes |


💚 Contribute

Feel free to contribute! Don’t hesitate to:

  • Fork this repo
  • Create your own feature branch using: git checkout -b feature-name
  • Commit your changes with: git commit -am ‘Add some feature’
  • Push to the branch: git push origin my-new-feature
  • Submit a pull request