Zum Hauptinhalt springen

Installation und Verwendung

Installation​

npm i mind-elixir -S

Verwendung​

import MindElixir from 'mind-elixir'

let options = {
  el: '#map', // or HTMLDivElement
}

let mind = new MindElixir(options)

// create new map data
const data = MindElixir.new('new topic')
mind.init(data)

Um Mind Elixir Core zu verwenden, übergib einfach ein el (das Zielelement im DOM, in das die Mindmap eingehängt wird) in den options. Weitere Konfigurationen findest du in den vollständigen Optionen.

warnung

Da Mind Elixir Core mit 100 % Höhe des Containers eingehängt wird, solltest du die Containerhöhe festlegen, um Darstellungsfehler zu vermeiden.

<div id="map"></div>
<style>
  #map {
    height: 500px;
    width: 100%;
  }
</style>

Interaktion mit der Mindmap​

  • Die Bedienung ähnelt gängigen Mindmap-Anwendungen
  • Die Tastenkürzel findest du im Abschnitt Tastenkürzel
  • Mit der linken Maustaste kannst du Knoten verschieben oder mehrere Knoten auswählen
  • Mit der rechten Maustaste kannst du die Zeichenfläche verschieben
  • Nachdem du mit der rechten Maustaste "Verbinden" gewählt hast, klicke auf einen anderen Knoten, um die beiden Knoten zu verbinden

Datenexport und Aktualisierung​

Nach Interaktionen mit der Mindmap ändern sich die Daten entsprechend. Mit der Methode getData kannst du die aktuellen Daten abrufen. Das Datenformat findest du unter Datenexport.

const data = mind.getData()

Wenn du die aktuelle Mindmap mit völlig neuen Daten aktualisieren möchtest, verwende die Methode refresh.

mind.refresh(data)

Für Inhalte auf Arabisch, Hebräisch, Persisch oder Urdu übergib rtl: true und verwende die mitgelieferte arabische Sprachdatei:

import MindElixir from 'mind-elixir'
import { ar } from 'mind-elixir/i18n'

const mind = new MindElixir({
  el: '#map',
  rtl: true,
  contextMenu: { locale: ar },
})

rtl ändert nur die Textrichtung von Knotenthemen, Editor, Beschriftungen und Kontextmenü – die Achse des Zweig-Layouts (direction) bleibt unberührt. Weitere Optionen findest du im v6-API-Leitfaden.