|
1 | | -# webpack4-starter-kit |
2 | | -A webpack starter kit for frontend development |
| 1 | +# Mindtree |
3 | 2 |
|
4 | | -## Install |
5 | | -``` |
6 | | -npm install |
| 3 | +`Mindtree` is a library which helps to visualize your text content as a mind map. Currently, Mindtree support indented text, markdown support is on the road map. |
| 4 | + |
| 5 | +- [Home page]() |
| 6 | +- [Installation]() |
| 7 | +- [Basic usage]() |
| 8 | +- Document - comming soon |
| 9 | + |
| 10 | + |
| 11 | +## Installation |
| 12 | +- Install from npm |
| 13 | + |
| 14 | +`yarn add mintree` |
| 15 | + |
| 16 | +- Add to your project assets |
| 17 | +Just copy `mindtree.js` to your assets directory |
| 18 | + |
| 19 | +## Basic usage |
| 20 | +You have to follow these steps to render a mindmap: |
| 21 | +1. Build mind map data represented as a hierarchy tree |
| 22 | +2. Which layout you want to render as |
| 23 | +3. Build a `Mindmap` object from `data` and `layout` |
| 24 | +4. Bind a `Viewer` to a DOM element and render `Mindmap` |
| 25 | + |
| 26 | +### 1. Vanilla javascript |
| 27 | + |
| 28 | +Add this to your html |
| 29 | +```html |
| 30 | +<script src="mindtree.js"></script> |
7 | 31 | ``` |
8 | | -or using yarn |
9 | 32 |
|
| 33 | + |
| 34 | +```javascript |
| 35 | +var text = ` |
| 36 | +Root |
| 37 | +
|
| 38 | + - branch 1 |
| 39 | + +branch 1.1 |
| 40 | +
|
| 41 | + - branch 2 |
| 42 | + branch 2.1 |
| 43 | + * branch 2.2 |
| 44 | + branch 2.2.1 |
| 45 | +
|
| 46 | + -Branch 3 |
| 47 | + - alo |
| 48 | + - ola |
| 49 | + - ollala |
| 50 | +
|
| 51 | + -Branch 4 |
| 52 | + - Branch 4.1 |
| 53 | + - Branch 4.1.1 |
| 54 | + - Branch 4.2 |
| 55 | + - Branch 4.3`; |
| 56 | + |
| 57 | +// parse indented text to hierarchy tree |
| 58 | +var data = mindtree.Parsers.TextParser.parse(text); |
| 59 | +// choose a layout |
| 60 | +var MindmapLayout = mindtree.MindmapLayouts.Standard; |
| 61 | + |
| 62 | +// build Mindmap object |
| 63 | +var mindMap = new mindtree.MindMap(data.root, MindmapLayout, {}); |
| 64 | +mindMap.build(); |
| 65 | + |
| 66 | +// binding viewer and render |
| 67 | +var viewer = new mindtree.Viewer("#drawing", {}); |
| 68 | +viewer.render(mindMap); |
10 | 69 | ``` |
11 | | -yarn install |
| 70 | + |
| 71 | +### 2. With ES6 |
| 72 | +Import required classes |
| 73 | + |
| 74 | +```javascript |
| 75 | +import {MindMap, Viewer, Parsers, MindmapLayout} from 'mindtree' |
12 | 76 | ``` |
13 | 77 |
|
14 | | -## Command |
| 78 | +And then follows the same steps as above |
| 79 | + |
| 80 | + |
| 81 | +## Features |
| 82 | + |
| 83 | +- **Parser** |
| 84 | + - Indented text |
| 85 | + |
| 86 | +- **Layout** |
| 87 | + - Standard |
| 88 | + - RightLogical |
| 89 | + - DownwardOrganizational |
| 90 | + - UpwardOrganizational |
| 91 | + - LeftLogical |
| 92 | + |
| 93 | + |
| 94 | +## Credits |
| 95 | +- Thanks [leungwensen](https://github.com/leungwensen), This library is inspired by his repo [Mindmap layouts](https://github.com/leungwensen/mindmap-layouts). And I still copy the layout code from his source |
| 96 | + |
| 97 | +- Thanks @stetrevor for his library [non-layered-tidy-tree-layout](https://github.com/stetrevor/non-layered-tidy-tree-layout) |
| 98 | + |
| 99 | +- This project use [two.js](https://two.js.org/) for the rendering mindmap. |
15 | 100 |
|
16 | | -- `yarn watch` : watch for changes |
17 | | -- `yarn start` : start dev server |
18 | | -- `yarn dev` : build dev |
19 | | -- `yarn build` : build production |
20 | | -- `yarn clean` : clean build directory |
|
0 commit comments