{"id":13559106,"url":"https://github.com/aexol-studio/tree","last_synced_at":"2025-04-07T18:11:26.041Z","repository":{"id":41798737,"uuid":"134948366","full_name":"aexol-studio/tree","owner":"aexol-studio","description":"☊ Tool for making node graphs. Inspired by dependency graph. Used mainly for automation services  📈","archived":false,"fork":false,"pushed_at":"2024-09-03T09:18:00.000Z","size":2798,"stargazers_count":547,"open_issues_count":16,"forks_count":49,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-03-31T17:15:37.863Z","etag":null,"topics":["canvas","diagram","editor","graph","node","visual"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aexol-studio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-05-26T09:38:45.000Z","updated_at":"2025-02-03T18:48:02.000Z","dependencies_parsed_at":"2024-08-26T15:56:39.526Z","dependency_job_id":"1f5e40eb-410d-4589-8595-137ff1b3dba6","html_url":"https://github.com/aexol-studio/tree","commit_stats":null,"previous_names":["aexol-studio/tree","graphql-editor/diagram"],"tags_count":64,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aexol-studio%2Ftree","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aexol-studio%2Ftree/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aexol-studio%2Ftree/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aexol-studio%2Ftree/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aexol-studio","download_url":"https://codeload.github.com/aexol-studio/tree/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247704569,"owners_count":20982298,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","diagram","editor","graph","node","visual"],"created_at":"2024-08-01T12:05:20.996Z","updated_at":"2025-04-07T18:11:26.020Z","avatar_url":"https://github.com/aexol-studio.png","language":"TypeScript","readme":"### ![TREE - GRAPH VISUALISER\u0010\u0010](https://github.com/user-attachments/assets/9a402a3c-0979-45e1-97e6-98ece5ec0d62) ![Vector 902 (Stroke) (1)](https://github.com/user-attachments/assets/93e38773-7467-4374-a9e8-13387aa5b076#gh-dark-mode-only) ![Vector 902 (Stroke) (1)](https://github.com/user-attachments/assets/51b16a12-11c3-4b72-8f87-d78afdbe9c83#gh-light-mode-only)\n\n\u003c!--STRONA WIZUALNA: słowo \"Tree\" w nagłówku można albo wyboldować, albo napisać wielkimi literami aby bardziej go wyróżnić, szczególnie, że występuje tylko raz i w związku z tym nie obciążyłaby taka zmiana wizualnie - alternatywnie można też napisać wielkimi literami całość tekstu; TREŚĆ MERYTORYCZNA: w zależności od tego, czy chcemy przestrzegać British English, czy American English, zmieni to pisownię słowa \"visualiser\" - w American English powinno być \"visualizer\"--\u003e\n[![npm](https://img.shields.io/npm/v/@aexol/tree.svg?style=flat-square)](https://www.npmjs.com/package/@aexol/tree) [![npm downloads](https://img.shields.io/npm/dm/@aexol/tree.svg?style=flat-square)](https://www.npmjs.com/package/@aexol/tree)\n\nTree is a tool for displaying node based systems. \u003c!--TREŚĆ MERYTORYCZNA: \"a tool\" zamiast \"the tool\" ponieważ pojawia się po raz pierwszy na stronie--\u003e\nThis package contains one dependency. \u003c!--STRONA WIZUALNA: można ewentualnie dodać element Markdowna do tej linijki tak, aby podkreślić, że następuje zależność. TREŚĆ MERYTORYCZNA: można dodać źródło, z którego czerpie ta paczka z nazwy albo z załącznika w postaci linku tak, aby użytkownik był o tym poinformowany bez konieczności przenoszenia wzroku na kod--\u003e \n\n\u003cbr /\u003e\n\n## Table of Contents\n\n[Tree Graph Visualiser](#TREE-GRAPH-VISUALISER)\n- [Table of Contents](#table-of-contents)\n- [Getting Started](#Getting-Started)\n    - [JavaScript](#Javascript)\n    - [Light Mode](#Light-Mode)\n- [Listening to Diagram Events](#Listening-to-Diagram-Events)\n- [Developing and Growth](#Developing-and-Growth)\n- [Adding to Your Own Project](#Adding-to-Your-Own-Project)\n- [Serialisation of Data](#Serialisation-of-Data)\n- [Docs](#Docs)\n- [Controls](#Controls)\n- [Contribute](#Contribute)\n\n\u003cbr /\u003e\n    \n## Getting Started \n\nThis section will help you get started with the graph visualizer.\n\n\n### Javascript\n```js\nimport { Diagram } from '@aexol/tree'\nclass App {\n  constructor() {\n    const root = document.getElementById(\"root\");\n    if (!root) {\n      throw new Error(\"No root html element\");\n    }\n    this.diagram = new Diagram(root, {});\n    this.diagram.setNodes([\n        {\n            \"name\": \"Query\",\n            \"type\": \"type\",\n            \"id\": \"1\",\n            \"description\": \"\",\n            \"inputs\": [\n                \"2\"\n            ],\n            \"outputs\": [],\n            \"options\": [\n                \"query\"\n            ]\n        },\n        {\n            \"name\": \"pizzas\",\n            \"type\": \"Pizza\",\n            \"id\": \"2\",\n            \"inputs\": [],\n            \"outputs\": [\n                \"2\"\n            ],\n            \"description\":\"get all pizzas a a a from the database\",\n            \"options\": [\n                \"array\",\n                \"required\"\n            ]\n        },\n        {\n            \"name\": \"Pizza\",\n            \"type\": \"type\",\n            \"id\": \"3\",\n            \"description\": \"Main type of the schema\",\n            \"inputs\": [\n                \"4\",\n            ],\n            \"outputs\": [],\n            \"options\": []\n        },\n        {\n            \"name\": \"name\",\n            \"type\": \"String\",\n            \"id\": \"4\",\n            \"inputs\": [],\n            \"outputs\": [\n                \"3\"\n            ],\n            \"options\": [\n                \"required\"\n            ]\n        }\n    ])\n  }\n}\nnew App()\n```\n\n### Light Mode\n\u003c!--STRONA WIZUALNA: zmiana na formatowanie Pierwsza Litera Wyrazu Pisana Wielką Literą--\u003e\n\nDiagram is in dark mode by defult, but you can easily switch to light theme. Just add the options for that while creating the Diagram.\n\n```ts\nimport { Diagram, DefaultDiagramThemeLight } from '@aexol/tree'\nthis.diagram = new Diagram(document.getElementById(\"root\"),\n{\n  theme: DefaultDiagramThemeLight\n});\n```\n\n\u003cbr /\u003e\n\n## Listening to Diagram Events\n\nIt's possible to attach \u003c!--attach what?--\u003e to certain events that occur inside the diagram.\nYou can do it by using familiar `.on()` syntax, e.g.:\n\n```\nthis.diagram = new Diagram(/* ... */);\n/* ... */\nthis.diagram.on(EVENT_NAME, () =\u003e {\n  // callback\n});\n```\n\u003cbr /\u003e\n\nThe list of all subscribable events:\n|Event|Description|\n|:---|:---|\n| *ViewModelChanged* | Fires when a view model (pan, zoom) was changed |\n| *NodeMoving* | Fires when node is being moved |\n| *NodeMoved* | Fires when node stops being moved |\n| *NodeSelected* | Fires when node(s) was selected |\n| *UndoRequested* | Fires when undo was requested |\n| *RedoRequested* | Fires when redo was requested |\n\n\u003e [!NOTE]\n\u003e You can unsubscribe your listener by either using `.off()` or by invoking the unsubscriber function that is returned from `.on()`:\n\n```js\nthis.diagram = new Diagram(/* ... */);\nconst callback = (nodeList) =\u003e {\n  console.log('Nodes are moving!', nodeList);\n};\nthis.diagram.on('NodeMoving', callback); // callback will be fired\n// ...\nthis.diagram.off('NodeMoving', callback); // callback will not be fired anymore\n```\n\n```js\nthis.diagram = new Diagram(/* ... */);\nconst callback = () =\u003e {\n  console.log('node moving!');\n};\nconst unsubscriber = this.diagram.on('NodeMoving', callback); // callback will be fired\n// ...\nunsubscriber(); // callback will not be fired anymore\n```\n\n\u003cbr /\u003e\n\n## Serialisation of Data\n\u003c!--STRONA WIZUALNA: zmiana na formatowanie Pierwsza Litera Wyrazu Pisana Wielką Literą--\u003e\n\u003c!--TREŚĆ MERYTORYCZNA: w zależności od tego, czy chcemy przestrzegać British English, czy American English, zmieni to pisownię słowa \"serialisation\" - w American English powinno być \"serialization\", American English w przypadku tego słowa jest też bardziej powszechny--\u003e\n\n```js\nconst diagram = new Diagram(/* ... */);\nconst callback = ({nodes, links}) =\u003e {\n  // Here you receive nodes and links after Serialisation\n};\nthis.diagram.on('DataModelChanged', callback); // callback will be fired\n\n```\n\n\u003cbr /\u003e\n\n## Developing and Growth\n\n```sh\n$ git clone https://github.com/aexol-studio/tree\n$ npm install\n$ npm run start\n```\n\n\u003cbr /\u003e\n\n## Adding to Your Own Project\n\n```sh\n$ npm install @aexol/tree\n```\n\n\u003cbr /\u003e\n\n## Docs\n\nTo generate docs \u003c!--what docs, does it need clarification?--\u003e simply type:\n```\nnpm run docs\n```\n\n\u003cbr /\u003e\n\n\n## Controls\n\nHere is a list of the available controls: \n|Action| Result|\n|:---|:---|\n| Press and hold Left Mouse Button and move mouse | Pans the view |\n| Press and hold Left Mouse Button on node | Moves the node |\n| CLICK ON NODE TYPE | Centers view on parent node (if node is a children of other node) |\n| SHIFT + Left Mouse Button Click | Selects multiple nodes |\n\n\u003cbr /\u003e\n\n## \u003cspan\u003e💚\u003c/span\u003e\u0026nbsp;\u0026nbsp;Contribute\n\nFeel free to contribute! Don't hesitate to:\n\n- Fork this repo\n- Create your own feature branch using: git checkout -b feature-name\n- Commit your changes with: git commit -am 'Add some feature'\n- Push to the branch: git push origin my-new-feature\n- Submit a pull request\n\n\u003c!-- ALTERNATIVE ARROW COLOR: ![arrow-top-blue](https://github.com/user-attachments/assets/db67ff9e-fc13-4e43-a48f-0a9182e8093c)--\u003e\n","funding_links":[],"categories":["TypeScript","node"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faexol-studio%2Ftree","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faexol-studio%2Ftree","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faexol-studio%2Ftree/lists"}