Skip to content

A mind map library for react that based on immutable.js.

License

Notifications You must be signed in to change notification settings

pmclachlan/blink-mind-react

 
 

Repository files navigation

A mind map library for react write in typescript which use immutable.js for state management.

The mind map can drag to any area of the view container area.

Editing a node with a rich text editor.

I have created app use this library.

https://github.com/awehook/react-mindmap

The online demo is react-mindmap

Futures

  1. drag and move

image

  1. drag and drop for reorganize the node relationship

image

  1. popup menu for operation the node

image

  1. rich text editor for mind map item

image

Usage

In your project, run the command

yarn add blink-mind-react

I have created a sample app to demonstrate how to use this library.

The main code is below.

import React from "react";
import {
  DiagramWidget,
  MindMapModel,
  DiagramConfig,
  DiagramState
} from "blink-mind-react";

import { Toolbar } from "./Toolbar";

export class MindMap extends React.Component {
  constructor(props) {
    super(props);
    let mindModel = MindMapModel.createWith({
      rootItemKey: "root",
      editorRootItemKey: "root",
      items: [
        { key: "root", content: "MainTopic", subItemKeys: ["sub1", "sub2"] },
        {
          key: "sub1",
          parentKey: "root",
          content: "SubTopic",
          subItemKeys: [],
          collapse: true
        },
        {
          key: "sub2",
          parentKey: "root",
          content: "SubTopic",
          subItemKeys: []
        }
      ]
    });
    let diagramConfig = {
      hMargin: 10
    };
    let diagramState = DiagramState.createWith(mindModel, diagramConfig);
    this.state = {
      diagramState: diagramState
    };
  }

  onChange = diagramState => {
    console.log('onChange');
    console.log(diagramState.mindMapModel);
    this.setState({ diagramState });
  };

  render() {
    return (
      <div className="mindmap">
        <Toolbar
          diagramState={this.state.diagramState}
          onChange={this.onChange}
        />
        <DiagramWidget
          diagramState={this.state.diagramState}
          onChange={this.onChange}
        />
      </div>
    );
  }
}
export default MindMap;

Run the Demo

yarn
yarn storybook

Then open http://localhost:6006/ . Click the demo1 menu item. image

Dependency

This library integrate the rich-markdown-editor which url is https://github.com/outline/rich-markdown-editor. I have modified some code of rich-markdown-editor. And this library used the library which forked from rich-markdown-editor and modified some code by me. The forked library's url is https://github.com/awehook/rich-markdown-editor.

About

A mind map library for react that based on immutable.js.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 93.8%
  • JavaScript 4.5%
  • CSS 1.7%