SvelteMindmap

> SvelteMindmap is a svelte component for mindnode maps inspired by react-mindmap.

!MIT License

Installation

``bash
npm install --save svelte-mindmap
`

Usage

$3

`js
import Mindmap from 'svelte-mindmap';

`

`html
let map = {
title: null,
nodes: [],
connections: []
}

map={map}
/>
`

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

$3

Array of objects used to render nodes. Below an example of the node structure.

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

$3

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

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

$3

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

Feedback would be much appreciated, questions, suggestions, issues are more than welcome.

---

If you like to support my open-source contributions and feeling generous, feel free to: