LA Map

A React component for Learn Anything maps (or other mindmaps).

Installation

npm install la-map --save

Usage

import { Component } from 'react';
import { render } from 'react-dom';
import LAMap from 'la-map';
import { nodes, resources } from './my-map.json';

class Example extends Component {
  render() {
    return (
      <LAMap
        nodes={this.props.nodes}
        resources={this.props.resources} />
    );
  }
}

render(
  <Example nodes={nodes} resources={resources} />,
  document.getElementById('target')
);

Testing

To test this repository run these commands

git clone https://github.com/learn-anything/la-map
cd la-map
npm install && npm run test

and connect to http://localhost:4000/

Props

| Prop | Type | Default | Description | |-----------------|:-------:|---------|----------------------------------------------------------------------| | nodes | Object | | Object containing IDs of nodes as keys and child nodes as values. | | resources | Object | | Object containing IDs of nodes as keys and child resources as values.|

nodes

Object containing IDs of nodes as keys and child nodes as values.

Note The root node, has parent null, and has only an object as key.

Example

{
  null: {
    "mapID": 1882,
    "text": "front end",
    "nodeID": 7357,
    "parentID": null
  },
  7357: [
    {
      "mapID": 1882,
      "text": "help",
      "nodeID": 7358,
      "parentID": 7357
    },
    {
      "mapID": 1882,
      "text": "basics",
      "nodeID": 7359,
      "parentID": 7357
    }
  ],
  7359: [
    {
      "mapID": 1882,
      "text": "CSS  ️",
      "nodeID": 7389,
      "parentID": 7359
    },
    {
      "mapID": 1882,
      "text": "javascript  ️",
      "nodeID": 7362,
      "parentID": 7359
    },
    {
      "mapID": 1882,
      "text": "HTML  ️",
      "nodeID": 7360,
      "parentID": 7359
    }
  ]
}

This object would render a tree that looks like this:

  front end (#7357)
  ├── help (#7358)
  └── basics (#7359)
      ├── CSS (#7389)
      ├── javascript (#7362)
      └── HTML (#7360)

The possible attributes for each node are:

• mapID: ID of the map containing this node
• text: title of the node
• nodeID: ID of this node
• parentID: ID of the parent node

resources

Object containing IDs of nodes as keys and child resources as values.

Example

{
  null: {
    "mapID": 1882,
    "text": "front end",
    "nodeID": 7357,
    "parentID": null
  },
  7357: [
    {
      "mapID": 1882,
      "text": "help",
      "nodeID": 7358,
      "parentID": 7357
    },
    {
      "mapID": 1882,
      "text": "basics",
      "nodeID": 7359,
      "parentID": 7357
    }
  ],
  7359: [
    {
      "mapID": 1882,
      "text": "CSS  ️",
      "nodeID": 7389,
      "parentID": 7359
    },
    {
      "mapID": 1882,
      "text": "javascript  ️",
      "nodeID": 7362,
      "parentID": 7359
    },
    {
      "mapID": 1882,
      "text": "HTML  ️",
      "nodeID": 7360,
      "parentID": 7359
    }
  ]
}

This object would render a tree that looks like this:

  front end (#7357)
  ├── help (#7358)
  └── basics (#7359)
      ├── CSS (#7389)
      ├── javascript (#7362)
      └── HTML (#7360)

The possible attributes for each node are:

• mapID: ID of the map containing this node
• text: title of the node
• nodeID: ID of this node
• parentID: ID of the parent node

Styling

Here's a list of all CSS classes for styling:

• .mindmap-svg: main svg element containing the map;
• .mindmap-node: foreignObject element representing a node;
• .mindmap-node--editable: foreignObject element representing a node in editor mode;
• .mindmap-subnode-group-text: foreignObject element containing all subnodes of a given node;
• .mindmap-subnode-text: div element containing a subnode;
• .mindmap-connection: path element for each connection;
• .mindmap-emoji: img tag for emoji

Contributing

If you want a new feature added, you find bugs or you want to help making some changes, feel free to open an issue or submit a pull request. Any help would be greatly appreciated :heart: