Mind map Vue2 component !npm !npm

> 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

``sh
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

`html



``

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
- [ ] ...