vue-mindmap

anteriovieira/vue-mindmap

README

VueMindmap


VueMindmap is a vue component for mindnode maps inspired by react-mindmap.


Live demo built on top of the awesome codesandbox.

Installation


  1. ``` shell
  2. npm install --save vue-mindmap
  3. ```

Usage


Bundler (Webpack, Rollup)


  1. ``` js
  2. import Vue from 'vue'
  3. import VueMindmap from 'vue-mindmap'
  4. // You need a specific loader for CSS files like https://github.com/webpack/css-loader
  5. import 'vue-mindmap/dist/vue-mindmap.css'

  7. Vue.use(VueMindmap)
  8. ```

  1. ``` html
  2. <template>
  3.   <mindmap
  4.     :nodes="nodes"
  5.     :connections="connections"
  6.     :editable="true"
  7.   />
  8. </template>
  10. <script>
  11.   export default {
  12.     name: 'MyMindmap',
  13.     data() {
  14.       return {
  15.         nodes: [...],
  16.         connections: [...]
  17.       }
  18.     }
  19.   }
  20. </script>
  21. ```

Browser


  1. ``` html
  2. !-- Include after Vue -->
  3. !-- Local files -->
  4. <link rel="stylesheet" href="vue-mindmap/dist/vue-mindmap.css"></link>
  5. <script src="vue-mindmap/dist/vue-mindmap.js"></script>
  7. !-- From CDN -->
  8. <link rel="stylesheet" href="https://unpkg.com/vue-mindmap/dist/vue-mindmap.css"></link>
  9. <script src="https://unpkg.com/vue-mindmap"></script>
  10. ```

Props


| Prop | Type | Default | Description |
|:--- |:--- |:--- |:--- |
| nodes| Array| [ ]| Array of objects used to render nodes. |
| connections| Array| [ ]| Array of objects used to render connections. |
| subnodes| Array| [ ]| Array of objects used to render subnodes. |
| editable| Boolean| false| Enable editor mode, which allows to move around nodes. |

nodes


Array of objects used to render nodes. Below an example of the node structure.

  1. ``` json
  2. {
  3.   "text": "python",
  4.   "url": "http://www.wikiwand.com/en/Python_(programming_language)",
  5.   "fx": -13.916222252976013,
  6.   "fy": -659.1641376795345,
  7.   "category": "wiki",
  8.   "note":
  9. }
  10. ```

The possible attributes are:

text: title of the node
url: url contained in the node
fxand fy: coordinates (if not present they'll be generated)
category: category used to generate an emoji
note: note that will be visible on hover

connections


Array of objects used to render connections. Below an example of the connection structure.

  1. ``` json
  2. {
  3.   "source": "python",
  4.   "target": "basics",
  5.   "curve": {
  6.     "x": -43.5535,
  7.     "y": 299.545
  8.   }
  9. }
  10. ```

The possible attributes are:

source: title of the node where the connection starts
target: title of the node where the connection ends
curve.xand curve.y: coordinates of the control point of a quadratic bezier curve (if not specified the connection will be straight)

subnodes


Array of objects used to render subnodes. The structure is the same as for nodes with two additional attributes:

parent: title of the parent node
color: used for the margin color, needs to be a valid CSS color

Styling


Here's a list of all CSS classes for styling:

.mindmap-svg: main svg element containing the map;
.mindmap-node: foreignObject element representing a node;
.mindmap-node--editable: foreignObject element representing a node in editor mode;
.mindmap-subnode-group-text: foreignObject element containing all subnodes of a given node;
.mindmap-subnode-text: div element containing a subnode;
.mindmap-connection: path element for each connection;
.mindmap-emoji: img tag for emoji

Development


Launch visual tests


  1. ``` shell
  2. npm run dev
  3. ```

Launch Karma with coverage


  1. ``` shell
  2. npm run dev:coverage
  3. ```

Build


Bundle the js and css of to the dist folder:

  1. ``` shell
  2. npm run build
  3. ```

License


MIT