Mind elixir is a free open source mind map core.

I have initialized one mind map by following the code of the repo, now I want to initialize another mind map bu it throws the error- "Cannot read property 'className' of null at me.init".

My source code is-

// vue file

<v-btn color="primary" @click="initializeSecond()">Add one more mind map</v-btn>
<v-row no-gutters>
       <v-col sm="6">
         <div id="map-1" style="width: 100%; height: 500px"></div>
       </v-col>
       <v-col sm="6">
         <div id="map-2" style="width: 100%; height: 500px"></div>
       </v-col>
</v-row>

// Js code

import MindElixir, { E } from "mind-elixir";

data() {
    return {
    ME: null,
    ME_1: null   
 }
},

mounted() {
  let options = {
    el: '#map-1',
    direction: MindElixir.LEFT,
    // the data return from `.getAllData()`
    data: dummyData,
    draggable: true, // default true
    contextMenu: true, // default true
    toolBar: true, // default true
    nodeMenu: true, // default true
    keypress: true, // default true
    locale: 'en', // [zh_CN,zh_TW,en,ja] waiting for PRs
    overflowHidden: false, // default false
    primaryLinkStyle: 2, // [1,2] default 1
    primaryNodeVerticalGap: 15, // default 25
    primaryNodeHorizontalGap: 15, // default 65
    contextMenuOption: {
      focus: true,
      link: true,
      extend: [
        {
          name: 'Node edit',
          onclick: () => {
            alert('extend menu')
          },
        },
      ],
    },
    allowUndo: false
  }

  this.ME = new MindElixir(options);
  this.ME.init();
},

methods: {
    async initializeSecond() {
      try {
      let option = {
        el: '#map-2',
        direction: MindElixir.LEFT,
        // the data return from `.getAllData()`
        data: dummyData,
        draggable: true, // default true
        contextMenu: true, // default true
        toolBar: true, // default true
        nodeMenu: true, // default true
        keypress: true, // default true
        locale: 'en', // [zh_CN,zh_TW,en,ja] waiting for PRs
        overflowHidden: false, // default false
        primaryLinkStyle: 2, // [1,2] default 1
        primaryNodeVerticalGap: 15, // default 25
        primaryNodeHorizontalGap: 15, // default 65
        contextMenuOption: {
          focus: true,
          link: true,
          extend: [
            {
              name: 'Node edit',
              onclick: () => {
                alert('extend menu')
              },
            },
          ],
        },
        allowUndo: false
      }
      this.ME_1 = await new MindElixir(option);
      this.ME_1.init();
      } catch (error) {
        console.error('______', error)
      }
    }
}

// Error

Could you please help? @ssshooter

Hi, I have one more question while testing. I want to disable editing and wanna see current work as final, so tried to block it with disableEdit() like :

        mind.toCenter();
        mind.disableEdit();

But I still can add new child and set new color for my nodes. Is there anyway to block to edit anymore ?

After removing a child there was no update in my screen, I guess I have to add refresh() at below code :

remove_child.onclick = e => { if (isRoot) return mind.removeNode() mind.refresh(); menuContainer.hidden = true }

Hi, I found one more important issue while testing.

Each last line of nodes was pale or hidden, so I couldn't see it clearly. I guess there is a line but overwrited by node object's outline. Maybe we should increase the height of each node will solve it.

<template>
  <div id="map" class="map"></div>
</template>
<script lang="ts" setup>
  import MindElixir from 'mind-elixir';
  import { onMounted, ref } from 'vue';

  const me = ref<MindElixir>();
  onMounted(() => {
    me.value = new MindElixir({
      el: '#map',
      direction: MindElixir.LEFT,
    });
    me.value.init(MindElixir.new('demo'));
  });
</script>
<style lang="less" scoped>
  .map {
    width: 100%;
    height: 500px;
  }
</style>

在我尝试使用vue3.2中setup语法使用mind-elixir时，一直提示init is not a function

Sometimes lines which connect nodes are not displayed. This often happens on nodes at the bottom. I think it is a bug. I will be glad if you have time to modify.

This is a fantastic library, one of the best I've seen for mind mapping. Excellent work. This might seem like a silly question but I could not see in demo how to collapse/expand nodes. Is that done by keystroke combination, mouse, or some or other configuration? :-)

I'm trying to add arrow with lines but it's not easy to handle with svg. Do you have any idea to add it ? When I added the arrow it's hidden by node objects. Covered. Arrows are under that... Maybe need to make line short a few pixel to draw arrow..

Hello I'm looking for create a mind map from a markdown file which was import. And I am searching How to support markdown with title and bullet and export markdown with title and bullet from the mind map? @ssshooter

      console.log('d', d)
      let mind = new MindElixir({
        el: '#map',
        direction: MindElixir.LEFT,
        data: MindElixir.new(d), // can also set data return from .getAllData()
        draggable: true, // default true
        contextMenu: true, // default true
        toolBar: true, // default true
        nodeMenu: true, // default true
        keypress: true, // default true
      })
      mind.init()

Where d in console

linkData: Object {  }
nodeData: Object { id: "root", topic: "Solid Map", root: true, … }

Any ideas?

Do you have a complete JSON structure of the data? In the example I don't see 'children' for example, while I do see it in the examples.

If I want to pass 'data' to the init function, what format does it need to be? That is very unclear to me.

Bumps loader-utils from 2.0.2 to 2.0.4.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.