vue-mindmap
v0.0.4
Vue component for mindnode maps
0/weekUpdated 3 years agoMIT
Published by Antério vieira
npm install vue-mindmapVueMindmap
 
> VueMindmap is a vue component for mindnode maps inspered by react-mindmap.
Live demo built on top of the awesome codesandbox.
Installation
``bash`
npm install --save vue-mindmap
Usage
$3
`js
import Vue from 'vue'
import VueMindmap from 'vue-mindmap'
// You need a specific loader for CSS files like https://github.com/webpack/css-loader
import 'vue-mindmap/dist/vue-mindmap.css'
Vue.use(VueMindmap)
`
`html
:connections="connections"
:editable="true"
/>
`
$3
`html
`
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. |
$3
Array of objects used to render nodes. Below an example of the node structure.
`json`
{
"text": "python",
"url": "http://www.wikiwand.com/en/Python_(programming_language)",
"fx": -13.916222252976013,
"fy": -659.1641376795345,
"category": "wiki",
"note": ""
}
The possible attributes are:
- text: title of the node
- url: url contained in the node
- fx and fy: coordinates (if not present they'll be generated)
- category: category used to generate an emoji
- note: note that will be visible on hover
$3
Array of objects used to render connections. Below an example of the connection
structure.
`json`
{
"source": "python",
"target": "basics",
"curve": {
"x": -43.5535,
"y": 299.545
}
}
The possible attributes are:
- source: title of the node where the connection starts
- target: title of the node where the connection ends
- curve.x and curve.y: coordinates of the control point of a quadratic bezier curve
(if not specified the connection will be straight)
$3
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;foreignObject
- .mindmap-node: element representing a node;foreignObject
- .mindmap-node--editable: element representing a node in editor mode;foreignObject
- .mindmap-subnode-group-text: element containing all subnodes of a given node;div
- .mindmap-subnode-text: element containing a subnode;path
- .mindmap-connection: element for each connection;img
- .mindmap-emoji: tag for emoji
Development
$3
`bash`
npm run dev
$3
`bash`
npm run dev:coverage
$3
Bundle the js and css of to the dist folder:
`bash``
npm run build