jdmindmap v0.0.1

Install

NPM

npm i mind-elixir -S

import MindElixir, { E } from 'mind-elixir'

Script tag

<script src="https://cdn.jsdelivr.net/npm/mind-elixir/dist/mind-elixir.js"></script>

HTML structure

<div class="outer">
  <div id="map"></div>
</div>
<style>
  .outer {
    position: relative;
    margin: 50px;
  }
  #map {
    height: 500px;
    width: 100%;
    overflow: auto;
  }
</style>

Init

let mind = new MindElixir({
  el: '#map',
  direction: MindElixir.LEFT, // MindElixir.LEFT, MindElixir.RIGHT, default is MindElixir.SIDE
  data: // see data type def below
  style: // see style type def below
  contextMenuCallback: // see cb type below
  rootId: // root node id, default is 'root'
})

mind.init()

mind.reRender(data) // explicitly call reRender with new data to re-render the mind map

// get a node
E('node-id')

Data Export

mind.getAllData()
// see src/example.js

Doc

https://inspiring-golick-3c01b9.netlify.com/

Type & Fn

  data {
    nodeData: {
      id: string // required, and accpet only one root
      topic: string // displayed text in node
      root: true // for root node
      children: Node[]
    },
    linkData: {
      [linkId: string]: {
        id: string // same with linkId above,
        from: Node.id
        to: Node.id
      }
    }
  }

  Node {
    id: string
    topic: string
    tags?: string[]
    direction?: 0 | 1 // left | right
    children?: Node[]
    expanded? boolean // default true, it will not render children if expanded is false
  }

  style {
    root?: CSSObject | className
    node?: CSSObject | className
    leaf?: CSSObject | className
    tag?: CSSObject | className
    nodeTag?: CSSObject | className
    leafTag?: CSSObject | className
    [nodeid]?: {
      self?: CSSObject | className
      tag?: CSSObject | className
    }
  }

  contextMenuCallback: async (nodeid: string) => void // async fn while right click a node, passing the id of the node