Saltar al contenido principal

Instalación y uso

Instalación​

npm i mind-elixir -S

Uso​

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)

Para usar Mind Elixir Core, basta con pasar un el (el elemento del DOM donde se montará el mapa) en options. Para ver más configuraciones, consulta las opciones completas.

aviso

Como Mind Elixir Core se monta con una altura del 100 % del contenedor, asegúrate de definir la altura del contenedor para evitar problemas de visualización.

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

Interacción con el mapa mental​

  • La interacción es similar a la de las aplicaciones de mapas mentales habituales
  • Los atajos de teclado están en la sección de atajos
  • Con el botón izquierdo del ratón puedes arrastrar nodos o seleccionar varios a la vez
  • Con el botón derecho del ratón puedes arrastrar el lienzo
  • Después de elegir "Conectar" con el botón derecho, haz clic en otro nodo para unir ambos nodos

Exportación y actualización de datos​

Tras las interacciones del usuario con el mapa mental, los datos cambian en consecuencia. Puedes usar el método getData para obtener los datos más recientes. El formato de los datos está en Exportación de datos.

const data = mind.getData()

Si necesitas actualizar el mapa actual con un conjunto de datos completamente nuevo, usa el método refresh.

mind.refresh(data)

Idiomas de derecha a izquierda​

Para contenido en árabe, hebreo, persa o urdu, pasa rtl: true y usa la configuración regional árabe incluida:

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

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

rtl solo cambia la dirección del texto de los temas de los nodos, el editor, las etiquetas y el menú contextual; el eje de disposición de las ramas (direction) no se ve afectado. Consulta la guía de la API v6 para ver más opciones.