Mind Map
An idea tree laid out around a central topic, with keyboard editing as in XMind and Miro.
c2-mind-map draws a tree of ideas around a central topic: the centre is a filled card, first-level topics are boxes tinted with their branch colour and deeper topics are text on a line, joined by curves that thin at each level. Hand it the map as data, one root node { id, label, children?, collapsed?, side?, color?, icon? }; layout="both" balances the branches on either side of the centre, and left or right draws a one-sided logic chart. Topics are measured in the page, so long labels wrap at --c2-mind-map__topic--max-width and the layout follows. The canvas is a c2-pan-zoom: a drag on empty canvas or the wheel pans, Ctrl/⌘ + wheel zooms, and controls and minimap add the zoom toolbar and an overview.
With editable, the keys work as in XMind: Tab or Insert adds a subtopic, Enter a sibling, F2 or typing edits the label, Delete removes the topic, Alt + the arrows move it, Space folds and Ctrl/⌘+Z undoes; a drag moves a topic onto another, and copy and paste use an indented list. Because Tab adds a subtopic, Escape moves focus to the canvas and Tab then leaves the map. The map edits its own copy: every edit fires a cancelable before-change, then change with the new data, which is where an app saves it. The arrows follow the drawing in read-only maps too, where a click or Enter fires node-click to open a topic’s details.
Import
import '@c2n/components/mind-map'Usage
The first map is editable: select a topic and press Tab to add a subtopic, Enter for a sibling, Space to fold, or drag a topic onto another. The fold dot of a folded topic counts its hidden topics. The second map is read-only: the arrows still follow the drawing and Space folds.
Saving the map
const map = document.querySelector('c2-mind-map')!
map.addEventListener('before-change', (event) => {
// Keep the "Support" branch locked.
if (event.detail.action.node.id === 'sup' && event.detail.action.type === 'delete') event.preventDefault()
})
map.addEventListener('change', (event) => {
save(event.detail.data) // the whole map after the edit
})toOutline(node) and fromOutline(text), exported next to the element, turn a map into an indented Markdown list and back.