@meghdad/mindmap

Mind map Vue2 component

A mind map Vue component inspired by MindNode, based on d3.js
The currently implemented functions include basic editing, dragging, zooming, undoing, context menu, folding...

recent update

The project will basically no longer be maintained
Currently developing Vue3, d3v6 version [mind map component] (https://github.com/hellowuxin/vue3-mindmap), welcome to support

Install

npm install @hellowuxin/mindmap

PROPS

Name	Type	Default	Description
v-model	Array	undefined	Set mind map data
width	Number	100%	Set component width
height	Number	undefined	Set component height
xSpacing	Number	80	Set the horizontal interval of nodes
ySpacing	Number	20	Set the vertical interval of nodes
strokeWidth	Number	4	Set the width of the line
draggable	Boolean	true	Set whether the node can be dragged
gps	Boolean	true	Whether to display the center button
fitView	Boolean	true	Whether to show the zoom button
showNodeAdd	Boolean	true	Whether to display the add node button
keyboard	Boolean	true	Whether to respond to keyboard events
contextMenu	Boolean	true	Whether to respond to the right-click menu
zoomable	Boolean	true	Can zoom and drag
showUndo	Boolean	true	Whether to display the undo redo button
download	Boolean	true	Whether to display the download button

EVENTS

Name	arguments	Description
updateNodeName	data, id	When updating the node name, pass in the node data and node id
click	data, id	When a node is clicked, the node data and node id are passed in

Example

<template>
  <mindmap v-model="data"></mindmap>
</template>

<script>
import mindmap from '@hellowuxin/mindmap'

export default {
  components: { mindmap },
  data: () => ({
    data: [{
      "name":"How to learn D3",
      "children": [
        {
          "name":"Preliminary knowledge",
          "children": [
            { "name":"HTML & CSS" },
            { "name":"JavaScript" },
            ...
          ]
        },
        {
          "name":"Install",
          "_children": [
            { "name": "collapse node" }
          ]
        },
        {
          "name":"Advanced",
          "left": true
        },
        ...
      ]
    }]
  })
}
</script>

Keyboard Events

⇥ tab、⏎ enter、⌫ backspace、⌘ cmd+z、⌘ cmd+y

Interactive Logic

Mouse：space + left Click to move, right click Menu, ctrl + scroll wheel to zoom, left click to Select

Touchpad：Two-finger scrolling, two-finger menu, two-finger pinch-to-zoom, one-finger selection

to be solved

• [ ] Export to multiple formats
• [ ] Set the width and height of the node
• [ ] multiple root nodes
• [ ] ...