VueMindmap is a vue component for mindnode maps
JavaScript Vue CSS
Switch branches/tags
Nothing to show
Clone or download
Latest commit 89dfcd0 Jun 12, 2018
Permalink
Failed to load latest commit information.
build Fix libray, improvements and tests added Jan 11, 2018
media Improvements 🚀 Jan 11, 2018
sass init Jan 11, 2018
src Improvements 🚀 Jan 11, 2018
test Improvements 🚀 Jan 11, 2018
.babelrc init Jan 11, 2018
.editorconfig init Jan 11, 2018
.eslintignore init Jan 11, 2018
.eslintrc.js init Jan 11, 2018
.gitignore init Jan 11, 2018
.stylelintrc init Jan 11, 2018
CONTRIBUTING.md init Jan 11, 2018
LICENSE init Jan 11, 2018
README.md Fix typo Jun 12, 2018
package.json v0.0.4 Jan 11, 2018
yarn.lock Build Jan 11, 2018

README.md

VueMindmap

npm vue2

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

Live demo built on top of the awesome codesandbox.

vue-mindmap

Installation

npm install --save vue-mindmap

Usage

Bundler (Webpack, Rollup)

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)
<template>
  <mindmap
    :nodes="nodes"
    :connections="connections"
    :editable="true"
  />
</template>

<script>
  export default {
    name: 'MyMindmap',
    data() {
      return {
        nodes: [...],
        connections: [...]
      }
    }
  }
</script>

Browser

<!-- Include after Vue -->
<!-- Local files -->
<link rel="stylesheet" href="vue-mindmap/dist/vue-mindmap.css"></link>
<script src="vue-mindmap/dist/vue-mindmap.js"></script>

<!-- From CDN -->
<link rel="stylesheet" href="https://unpkg.com/vue-mindmap/dist/vue-mindmap.css"></link>
<script src="https://unpkg.com/vue-mindmap"></script>

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.

{
  "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

connections

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

{
  "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)

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

npm run dev

Launch Karma with coverage

npm run dev:coverage

Build

Bundle the js and css of to the dist folder:

npm run build

License

MIT