Vuejs-Vue mindmap: vue-mindmap - Vue component for mindnode maps.

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

Comments

  • Unknown custom element
    Unknown custom element

    Aug 2, 2018

    can you assist me, i got this warning

    [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

    found in

    ---> at src\App.vue

    Reply
  • Graph rotate indefinitely with 2 subsequent nodes
    Graph rotate indefinitely with 2 subsequent nodes

    Sep 2, 2018

    Using the following example (https://codesandbox.io/s/6wrx3q654z), making use of optional fx and fy, the graph will rotate until it's being clicked on (which is pretty challenging). Once clicked, the following nodes will start rotating slowly around the clicked one. Removing one of the 2 children nodes from basics solves the issue, but that kind of defeats the goal of a mindmap :)

    Reply
  • how can i setting node click event?
    how can i setting node click event?

    Sep 6, 2018

    how can i setting node click event? setting in the node item data? or setting in mind-map properties?

    help me....please

    Reply
  • how to design node? I need node style is vue component.
    how to design node? I need node style is vue component.

    Jan 7, 2019

    how to design node? I need node style is vue component. like : image

    Reply
  • does dragging and dropping a node in a different position change the fx and fy values in their corresponding object.
    does dragging and dropping a node in a different position change the fx and fy values in their corresponding object.

    Feb 13, 2019

    if dragging and dropping a node in a different position change the object in "nodes".

    Reply
  • On saving data in Vue state, nodes' are flying in air (Not connected with edges)
    On saving data in Vue state, nodes' are flying in air (Not connected with edges)

    Jan 8, 2021

    The data which is in file "map.js", I put that in-state, and after on first time reload its working fine, but on second-time page reload when I am dragging the nodes they are flying in the air not dragging with the edges.

    Below is my code snippet- Module (mindmap.js)-

    function initialState() {
        return {
          nodes: [
            {
              'text': 'Python library',
              'url': '',
              'fx': -13,
              'fy': -390,
              'nodes': []
            },
            {
              'text': 'Menu Section',
              'url': '',
              'fx': -13,
              'fy': -250,
              'nodes': []
            },
            {
              'text': 'basics',
              'url': '',
              'fx': 96,
              'fy': -300,
              'nodes': []
            }
          ],
          connections : [
            {
              'source': 'Python library',
              'target': 'basics',
              'curve': {
                'x': -43.5535,
                'y': 299.545
              }
            },
            {
              'source': 'Python library',
              'target': 'Menu Section',
              'curve': {
                'x': -78.1206,
                'y': -114.714
              }
            },
          ]
        }
    }
    
    

    In Vue component (MindMap.vue), I am taking data from the state using computed property-

    <template>
      <div>
        <div align="center">
          <v-row no-gutters>
            <v-col sm="6">
              <mindmap
                :nodes="nodes"
                :connections="connections"
                :editable="true"
              />
            </v-col>
          </v-row>
        </div>
      </div>
    </template>
    <script>
    import { mapState } from 'vuex';
    export default {
      name: 'MindMap',
    
      computed:{
        ...mapState({
          nodes:state => state.mindmap.nodes,
          connections:state => state.mindmap.connections
        })
      },
    }
    </script>
    

    Here is the behavior this code is performing-

    GIF

    Reply
  • Try to fork and feature the package, fail to build. Can I have the necessary files to build /dist?
    Try to fork and feature the package, fail to build. Can I have the necessary files to build /dist?

    Sep 13, 2021

    ➜ vue-mindmap git:(master) ✗ yarn install yarn install v1.22.10 [1/4] 🔍 Resolving packages... success Already up-to-date. $ yon run build yarn run v1.22.10 $ yon run build:common && yon run build:browser && yon run build:browser:min $ cross-env NODE_ENV=common webpack --config build/webpack.config.common.js --progress --hide-modules internal/modules/cjs/loader.js:883 throw err; ^

    Error: Cannot find module '/Users/?????/testmap/vue-mindmap/build/webpack.config.common.js' Require stack:

    • /Users/?????/testmap/vue-mindmap/node_modules/webpack/bin/convert-argv.js
    • /Users/?????/testmap/vue-mindmap/node_modules/webpack/bin/webpack.js at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15) at Function.Module._load (internal/modules/cjs/loader.js:725:27) at Module.require (internal/modules/cjs/loader.js:952:19) at require (internal/modules/cjs/helpers.js:88:18) at requireConfig (/Users/?????/testmap/vue-mindmap/node_modules/webpack/bin/convert-argv.js:96:18) at /Users/?????/testmap/vue-mindmap/node_modules/webpack/bin/convert-argv.js:109:17 at Array.forEach () at module.exports (/Users/?????/testmap/vue-mindmap/node_modules/webpack/bin/convert-argv.js:107:15) at Object. (/Users/?????/testmap/vue-mindmap/node_modules/webpack/bin/webpack.js:153:40) at Module._compile (internal/modules/cjs/loader.js:1063:30) { code: 'MODULE_NOT_FOUND', requireStack: [ '/Users/?????/testmap/vue-mindmap/node_modules/webpack/bin/convert-argv.js', '/Users/?????/testmap/vue-mindmap/node_modules/webpack/bin/webpack.js' ] } error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

    Try to fork and feature the package, fail to build. Can I have the necessary files to build /dist?

    Reply
  • TypeError: Cannot read property 'x' of undefined
    TypeError: Cannot read property 'x' of undefined

    Jun 28, 2020

    When I want add a node and a connection, I got this error. I tried in CodeSandBox, I only changed the App.vue file, the file link is (https://codesandbox.io/s/jv7pl7wn15?file=/App.vue), and below is my js code, you can change the App.vue file like that to reproduce the error. Could you tell me what should I do to make it work? I will very appreciate that.

    ` `

    Reply
  • Don't start
    Don't start

    Mar 5, 2018

    I will not start, tears fall down. why? npm run dev cont`t

    Reply