learn-anything / react-mindmap Goto Github PK

View Code? Open in Web Editor NEW

422.0 20.0 107.0 5.49 MB

React component for MindNode maps

Home Page: https://learn-anything.xyz

License: MIT License

JavaScript 93.04% CSS 4.86% HTML 2.11%

react mindmaps rendering react-component

react-mindmap's Introduction

React Mindmap [UNMAINTAINED]

React component for MindNode maps (or other mindmaps)

This project is no longer maintained. The component is still usable, but if you find any problem or if you want to improve it, please fork it.

Install

npm install react-mindmap --save

Usage

import { Component } from "react";
import { render } from "react-dom";
import MindMap from "react-mindmap";
import { nodes, connections } from "./my-map.json";

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

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

Testing

To test this repository run these commands

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

and connect to http://localhost:3000/

Parser

This repo also has a parser that automates the conversion of JSON maps from MindNode to the format used by this component. To use it run:

npm run parse path/to/mindnode/maps path/to/converted/maps

Props

Prop	Type	Default	Description
nodes	Array	[]	Array of objects used to render nodes.
connections	Array	[]	Array of objects used to render connections.
subnodes	Array	[]	Array of objects used to render subnodes.
editable	Boolean	false	Enable editor mode, which allows to move around nodes.

nodes

Array of objects used to render nodes. Below an example of the node structure.

{
  "text": "python",
  "url": "http://www.wikiwand.com/en/Python_(programming_language)",
  "fx": -13.916222252976013,
  "fy": -659.1641376795345,
  "category": "wiki",
  "note": ""
}

The possible attributes are:

text: title of the node
url: url contained in the node
fx and fy: coordinates (if not present they'll be generated)
category: category used to generate an emoji
note: note that will be visible on hover

connections

Array of objects used to render connections. Below an example of the connection structure.

{
  "source": "python",
  "target": "basics",
  "curve": {
    "x": -43.5535,
    "y": 299.545
  }
}

The possible attributes are:

source: title of the node where the connection starts
target: title of the node where the connection ends
curve.x and curve.y: coordinates of the control point of a quadratic bezier curve (if not specified the connection will be straight)

subnodes

Array of objects used to render subnodes. The structure is the same as for nodes with two additional attributes:

parent: title of the parent node
color: used for the margin color, needs to be a valid CSS color

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

react-mindmap's People

Contributors

Stargazers

Watchers

Forkers

ewnd9 dieface roshnaomer wgong caplu jikkujose frantic0 ilhamtahir jslibrarydirectory mfpinheiro sandeshchinchole glacierck hunght v4dkou gpsbird pftom igor101964 jzarca01 zetixar grigb pjha1994 dumbomir anteriovieira rntatsuya mkinoshi mohisen bitzen505 kwahsog eduac huokedu pixel-perfect-metodology callcter antholimere richardfu tobby2002 etinin oneforwonder lsm szueric yarec lakecenter monwara98 hugoabernier midaaiz simonclouds pliman codesanook zvadim1593 intepra hubitor msvzero ecomgems sreenivasanac rusith srravula1 eeryinkblot berton1982 amelieoller afrknchld mykolasauliak lyuji282 luineo1 oviniciusfeitosa nicolas-ramon eduardoluizgs paraswatts jmuzsik krystofbe shijingjing1221 iplooox scott0730 10fred10 lasjoh georgehicks rlihm zhangqingq invalidz sabir184 sumnus00 dk2109 roshanraj pasanmahee shinchy lampo1024 basequatro complicated2018 saurabhupadhye8 adam16 bikram990 bsshetty17 sumitrahinj joelmharvey anilsharma01 coreader multiflat traders4great hestiasolutions mylhassane greatrepos itechdom

react-mindmap's Issues

Consider moving the project to create-react-app?

Having the project scaffolded with cra may solve many issues, I suggest moving it.

Edit connection curves on editor

At the moment only the nodes position can be changed on the editor. It would be awesome to be able to change the position of the control point of the curves too.

Example code seems to be failing

The example seems to be failing with the error:

Uncaught ReferenceError: React is not defined

Uncomment the lines in App/index.js to replicate the issue in this repo: https://github.com/JikkuJose/react-lab

Idea: Mindmap + Outliner

Hello,

I just discovered react-mindmap and it looks really awesome! I wondered if you are interested in the following idea:
Sometimes keywords are net enough and you would like to add further notes/text/comments. Some mindmapping tools support this, but only very limited. E.g., the text is displayed as hover or you have to click a button to see it etc. I think it would be great if you would have a panel on the right side for displaying the content. Would be a great combination of outliner and mindmap from my point of view.
I draw a quick moqup:

What do you think about it?

ReferenceError: constant is not defined

like title. while use this

add ability to render titles on connections similar to MindNode

Cannot read property 'x' of undefined error

×
I truncated the file paths for privacy reasons. I am using react-mindmap with redux:

render (

        <ConceptMap nodes={store.getState().graphModel.nodes.all} connections={store.getState().graphModel.connections} />,
        document.getElementById('GraphBox')
 );

However, when I try to generate graphs, I get this error:

Unhandled Rejection (TypeError): Cannot read property 'x' of undefined
▼ 50 stack frames were expanded.
SVGPathElement.r
/react-mindmap/dist/index.js:1
SVGPathElement.
/react-mindmap/dist/index.js:1
et.Mi [as each]
/react-mindmap/dist/index.js:1
et.Ti [as attr]
/react-mindmap/dist/index.js:1
n.onTick
/react-mindmap/dist/index.js:1
n.value
/react-mindmap/dist/index.js:1
n.value
/react-mindmap/dist/index.js:1

The nodes themselves seem to be generated fine. When I log the nodes prop of the generated graph object, I get, for example:

"[{"text":"Hello Kitty","url":"http://en.wikipedia.org/wiki/Hello_Kitty","note":"Hello Kitty (Japanese: ハロー・キティ, Hepburn: Harō Kiti), (full name: Kitty White (キティ・ホワイト, Kiti Howaito)) is a fictional character produced by the Japanese company Sanrio, created by Yuko Shimizu and currently designed by Yuko Yamaguchi.","html":"<a id=\"node-undefined\" href=\"http://en.wikipedia.org/wiki/Hello_Kitty\">Hello Kitty <img class=\"mindmap-emoji\" title=\"\" src=\"https://assets-cdn.github.com/images/icons/emoji/unicode/1f517.png\"></a>","nodesHTML":"","width":159,"height":61,"nodesWidth":0,"nodesHeight":0,"index":0,"x":67.1931607380315,"y":-430.8585618641549,"vy":0.005475231066065419,"vx":-0.16385505582576973},{"text":"Sanrio","url":"http://en.wikipedia.org/wiki/Sanrio","note":"Sanrio Co., Ltd. (株式会社サンリオ, Kabushikigaisha Sanrio) is a Japanese company that designs, licenses and produces products focusing on the kawaii (cute) segment of Japanese popular culture.","html":"<a id=\"node-undefined\" href=\"http://en.wikipedia.org/wiki/Sanrio\">Sanrio <img class=\"mindmap-emoji\" title=\"\" src=\"https://assets-cdn.github.com/images/icons/emoji/unicode/1f517.png\"></a>","nodesHTML":"","width":117,"height":61,"nodesWidth":0,"nodesHeight":0,"index":1,"x":109.81685930214637,"y":-235.45711663168223,"vy":-0.03301944998594324,"vx":0.013519864709321162},{"text":"Kitty","url":"http://en.wikipedia.org/wiki/Kitty","note":"Kitty or Kittie may refer to:","html":"<a id=\"node-undefined\" href=\"http://en.wikipedia.org/wiki/Kitty\">Kitty <img class=\"mindmap-emoji\" title=\"\" src=\"https://assets-cdn.github.com/images/icons/emoji/unicode/1f517.png\"></a>","nodesHTML":"","width":105,"height":61,"nodesWidth":0,"nodesHeight":0,"index":2,"x":-123.02180959822738,"y":-491.81785760230156,"vy":-0.01657491341339033,"vx":0.03924413758929733},{"text":"Yuko","url":"http://en.wikipedia.org/wiki/Yuko","note":"Yuko may refer to:","html":"<a id=\"node-undefined\" href=\"http://en.wikipedia.org/wiki/Yuko\">Yuko <img class=\"mindmap-emoji\" title=\"\" src=\"https://assets-cdn.github.com/images/icons/emoji/unicode/1f517.png\"></a>","nodesHTML":"","width":106,"height":61,"nodesWidth":0,"nodesHeight":0,"index":3,"x":257.7806109357365,"y":-369.97417845126284,"vy":-0.015398561259602124,"vx":0.021645928290699043},{"text":"Fairyland","url":"http://en.wikipedia.org/wiki/Fairyland","note":"Fairyland, in folklore, is the fabulous land or abode of fairies or fays.","html":"<a id=\"node-undefined\" href=\"http://en.wikipedia.org/wiki/Fairyland\">Fairyland <img class=\"mindmap-emoji\" title=\"\" src=\"https://assets-cdn.github.com/images/icons/emoji/unicode/1f517.png\"></a>","nodesHTML":"","width":144,"height":61,"nodesWidth":0,"nodesHeight":0,"index":4,"x":-80.67139825231155,"y":-296.3249364246367,"vy":-0.05314088879672288,"vx":0.012515393724210238},{"text":"Okamura","url":"http://en.wikipedia.org/wiki/Okamura","note":"Okamura (written:岡村, meaning \"hill, village\") is a Japanese surname, referring to:","html":"<a id=\"node-undefined\" href=\"http://en.wikipedia.org/wiki/Okamura\">Okamura <img class=\"mindmap-emoji\" title=\"\" src=\"https://assets-cdn.github.com/images/icons/emoji/unicode/1f517.png\"></a>","nodesHTML":"","width":141,"height":61,"nodesWidth":0,"nodesHeight":0,"index":5,"x":215.05913660358152,"y":-565.4270795870362,"vy":-0.05943208342659245,"vx":0.039727540540024454}]"
So I can see that react-mindmap seems to have written to the Redux store, adding fields like "html" to the original nodes object I passed in. Similarly, for the connections prop:

"[{"source":{"text":"Hello Kitty","url":"http://en.wikipedia.org/wiki/Hello_Kitty","note":"Hello Kitty (Japanese: ハロー・キティ, Hepburn: Harō Kiti), (full name: Kitty White (キティ・ホワイト, Kiti Howaito)) is a fictional character produced by the Japanese company Sanrio, created by Yuko Shimizu and currently designed by Yuko Yamaguchi.","html":"<a id=\"node-undefined\" href=\"http://en.wikipedia.org/wiki/Hello_Kitty\">Hello Kitty <img class=\"mindmap-emoji\" title=\"\" src=\"https://assets-cdn.github.com/images/icons/emoji/unicode/1f517.png\"></a>","nodesHTML":"","width":159,"height":61,"nodesWidth":0,"nodesHeight":0,"index":0,"x":67.1931607380315,"y":-430.8585618641549,"vy":0.005475231066065419,"vx":-0.16385505582576973},"target":{"text":"Sanrio","url":"http://en.wikipedia.org/wiki/Sanrio","note":"Sanrio Co., Ltd. (株式会社サンリオ, Kabushikigaisha Sanrio) is a Japanese company that designs, licenses and produces products focusing on the kawaii (cute) segment of Japanese popular culture.","html":"<a id=\"node-undefined\" href=\"http://en.wikipedia.org/wiki/Sanrio\">Sanrio <img class=\"mindmap-emoji\" title=\"\" src=\"https://assets-cdn.github.com/images/icons/emoji/unicode/1f517.png\"></a>","nodesHTML":"","width":117,"height":61,"nodesWidth":0,"nodesHeight":0,"index":1,"x":109.81685930214637,"y":-235.45711663168223,"vy":-0.03301944998594324,"vx":0.013519864709321162},"index":0},{"source":{"text":"Hello Kitty","url":"http://en.wikipedia.org/wiki/Hello_Kitty","note":"Hello Kitty (Japanese: ハロー・キティ, Hepburn: Harō Kiti), (full name: Kitty White (キティ・ホワイト, Kiti Howaito)) is a fictional character produced by the Japanese company Sanrio, created by Yuko Shimizu and currently designed by Yuko Yamaguchi.","html":"<a id=\"node-undefined\" href=\"http://en.wikipedia.org/wiki/Hello_Kitty\">Hello Kitty <img class=\"mindmap-emoji\" title=\"\" src=\"https://assets-cdn.github.com/images/icons/emoji/unicode/1f517.png\"></a>","nodesHTML":"","width":159,"height":61,"nodesWidth":0,"nodesHeight":0,"index":0,"x":67.1931607380315,"y":-430.8585618641549,"vy":0.005475231066065419,"vx":-0.16385505582576973},"target":{"text":"Kitty","url":"http://en.wikipedia.org/wiki/Kitty","note":"Kitty or Kittie may refer to:","html":"<a id=\"node-undefined\" href=\"http://en.wikipedia.org/wiki/Kitty\">Kitty <img class=\"mindmap-emoji\" title=\"\" src=\"https://assets-cdn.github.com/images/icons/emoji/unicode/1f517.png\"></a>","nodesHTML":"","width":105,"height":61,"nodesWidth":0,"nodesHeight":0,"index":2,"x":-123.02180959822738,"y":-491.81785760230156,"vy":-0.01657491341339033,"vx":0.03924413758929733},"index":1},{"source":{"text":"Hello Kitty","url":"http://en.wikipedia.org/wiki/Hello_Kitty","note":"Hello Kitty (Japanese: ハロー・キティ, Hepburn: Harō Kiti), (full name: Kitty White (キティ・ホワイト, Kiti Howaito)) is a fictional character produced by the Japanese company Sanrio, created by Yuko Shimizu and currently designed by Yuko Yamaguchi.","html":"<a id=\"node-undefined\" href=\"http://en.wikipedia.org/wiki/Hello_Kitty\">Hello Kitty <img class=\"mindmap-emoji\" title=\"\" src=\"https://assets-cdn.github.com/images/icons/emoji/unicode/1f517.png\"></a>","nodesHTML":"","width":159,"height":61,"nodesWidth":0,"nodesHeight":0,"index":0,"x":67.1931607380315,"y":-430.8585618641549,"vy":0.005475231066065419,"vx":-0.16385505582576973},"target":{"text":"Yuko","url":"http://en.wikipedia.org/wiki/Yuko","note":"Yuko may refer to:","html":"<a id=\"node-undefined\" href=\"http://en.wikipedia.org/wiki/Yuko\">Yuko <img class=\"mindmap-emoji\" title=\"\" src=\"https://assets-cdn.github.com/images/icons/emoji/unicode/1f517.png\"></a>","nodesHTML":"","width":106,"height":61,"nodesWidth":0,"nodesHeight":0,"index":3,"x":257.7806109357365,"y":-369.97417845126284,"vy":-0.015398561259602124,"vx":0.021645928290699043},"index":2},{"source":{"text":"Hello Kitty","url":"http://en.wikipedia.org/wiki/Hello_Kitty","note":"Hello Kitty (Japanese: ハロー・キティ, Hepburn: Harō Kiti), (full name: Kitty White (キティ・ホワイト, Kiti Howaito)) is a fictional character produced by the Japanese company Sanrio, created by Yuko Shimizu and currently designed by Yuko Yamaguchi.","html":"<a id=\"node-undefined\" href=\"http://en.wikipedia.org/wiki/Hello_Kitty\">Hello Kitty <img class=\"mindmap-emoji\" title=\"\" src=\"https://assets-cdn.github.com/images/icons/emoji/unicode/1f517.png\"></a>","nodesHTML":"","width":159,"height":61,"nodesWidth":0,"nodesHeight":0,"index":0,"x":67.1931607380315,"y":-430.8585618641549,"vy":0.005475231066065419,"vx":-0.16385505582576973},"target":{"text":"Fairyland","url":"http://en.wikipedia.org/wiki/Fairyland","note":"Fairyland, in folklore, is the fabulous land or abode of fairies or fays.","html":"<a id=\"node-undefined\" href=\"http://en.wikipedia.org/wiki/Fairyland\">Fairyland <img class=\"mindmap-emoji\" title=\"\" src=\"https://assets-cdn.github.com/images/icons/emoji/unicode/1f517.png\"></a>","nodesHTML":"","width":144,"height":61,"nodesWidth":0,"nodesHeight":0,"index":4,"x":-80.67139825231155,"y":-296.3249364246367,"vy":-0.05314088879672288,"vx":0.012515393724210238},"index":3},{"source":{"text":"Hello Kitty","url":"http://en.wikipedia.org/wiki/Hello_Kitty","note":"Hello Kitty (Japanese: ハロー・キティ, Hepburn: Harō Kiti), (full name: Kitty White (キティ・ホワイト, Kiti Howaito)) is a fictional character produced by the Japanese company Sanrio, created by Yuko Shimizu and currently designed by Yuko Yamaguchi.","html":"<a id=\"node-undefined\" href=\"http://en.wikipedia.org/wiki/Hello_Kitty\">Hello Kitty <img class=\"mindmap-emoji\" title=\"\" src=\"https://assets-cdn.github.com/images/icons/emoji/unicode/1f517.png\"></a>","nodesHTML":"","width":159,"height":61,"nodesWidth":0,"nodesHeight":0,"index":0,"x":67.1931607380315,"y":-430.8585618641549,"vy":0.005475231066065419,"vx":-0.16385505582576973},"target":{"text":"Okamura","url":"http://en.wikipedia.org/wiki/Okamura","note":"Okamura (written:岡村, meaning \"hill, village\") is a Japanese surname, referring to:","html":"<a id=\"node-undefined\" href=\"http://en.wikipedia.org/wiki/Okamura\">Okamura <img class=\"mindmap-emoji\" title=\"\" src=\"https://assets-cdn.github.com/images/icons/emoji/unicode/1f517.png\"></a>","nodesHTML":"","width":141,"height":61,"nodesWidth":0,"nodesHeight":0,"index":5,"x":215.05913660358152,"y":-565.4270795870362,"vy":-0.05943208342659245,"vx":0.039727540540024454},"index":4}]"

So what could be causing this error?

Usage screenshot broken

Hi,

Found this library today, while searching far and wide for a mindmap library to work with React.

The screenshot under usage:

https://raw.githubusercontent.com/learn-anything/img/master/react-mindmap-example.png

Is broken. I assume the image needs readding to the repo as the link is now invalid.

change 🤖 to reddit logo

Uncaught Error: Cannot find module "child_process"

"error Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style" when running on Windows

The testing examples describes running:

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

This fails on Windows (tested on Win10) with the same error in various JS files when using 'npm run test':

C:...\react-mindmap\src\utils\subnodesToHTML.js
1:50 error Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style
2:1 error Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style
3:3 error Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style

Solutions discussed in Stackoverflow:

https://stackoverflow.com/questions/39114446/how-can-i-write-a-eslint-rule-for-linebreak-style-changing-depending-on-windo/

Personally, I resolved by changing .eslintrc.js to:

rules: {
'react/jsx-uses-vars': 'error',
'react/jsx-uses-react': 'error',
"linebreak-style": 0
},

This just ignores line endings which I assume would be appriopriate for all OSs?

Show nodes that contain a note

Right now to see the node's note you have to hover on the node. The problem is that you can't distinguish nodes that have notes from ones that don't. Maybe we could assign a CSS class to them and style them differently.

strip empty characters from stack exchange

White Window

Hi guys!

I'm trying to use [email protected], but when I run that project it appears just a white window.
Probably I'm doing some thing wrong. I'm new at ReactJS world.

My window:

My codes:

Can you guys help?

Fix pan and zoom

Pan and zoom feels really weird on some devices, especially on mobile.
We need to find an alternative to the panzoom module.

Modules not found: XMLHttpRequest (child_process, fs)

> npm run test
...
ERROR in ./~/xmlhttprequest/lib/XMLHttpRequest.js
Module not found: Error: Cannot resolve module 'child_process' in /home/krikun/dev/react-mindmap/node_modules/xmlhttprequest/lib
 @ ./~/xmlhttprequest/lib/XMLHttpRequest.js 15:12-36

ERROR in ./~/xmlhttprequest/lib/XMLHttpRequest.js
Module not found: Error: Cannot resolve module 'fs' in /home/krikun/dev/react-mindmap/node_modules/xmlhttprequest/lib
 @ ./~/xmlhttprequest/lib/XMLHttpRequest.js 16:9-22

Is this normal situation? Try to read about this issue, but not found fast ways around.

I use:

Linux 4.11.9-1-ARCH
node v8.3.0
npm 5.3.0
webpack 2.7.0

npm install returns "added 114 packages in 22.083s" and some warnings:

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

The svg is going in a cyclic mode with editable

The svg is going in a cyclic mode when the no coordinates mapping is opened in editable mode.

Deeper Subnodes don't render properly

Subnodes of subnodes don't get the right positioning. Also, if the positioning was correct it would be unintuitive, so we need a better solution for rendering them.

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.