Nougat Predominant Middleware

    vue-mindmap

    0.0.4 • Public • Published

    VueMindmap

    npm vue2

    VueMindmap is a vue component for mindnode maps inspered 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

    Keywords

    none

    Install

    npm i vue-mindmap

    DownloadsWeekly Downloads

    99

    Version

    0.0.4

    License

    MIT

    Last publish

    Collaborators

    • anteriovieira