learn-anything / react-mindmap

React component for MindNode maps

Learn Anything

Started from Next.js + EdgeDB + EdgeDB Auth template.

Setup

Bun is used to run/install things.

bun i

Install EdgeDB using:

curl --proto '=https' --tlsv1.2 -sSf https://sh.edgedb.com | sh

Create new EdgeDB instance:

edgedb project init

Name instance learn-anything. Apply migrations with:

edgedb migration apply --dev-mode

Setup auth with:

bun auth:setup

Generate EdgeDB-JS types with:

bun generate:all

Run

bun dev

Can then create account by pressing sign up on top corner.

More info on development can be read in Next.js + EdgeDB + EdgeDB Auth template and EdgeDB docs.

Contribute

Always open to useful ideas or fixes in form of issues or PRs.

react-mindmap's Issues

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?

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.

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"})

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.

ReferenceError: constant is not defined

like title. while use this

"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?

Uncaught Error: Cannot find module "child_process"

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?

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.

strip empty characters from stack exchange

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.

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.

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

Consider moving the project to create-react-app?

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

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.

change 🤖 to reddit logo

add ability to render titles on connections similar to MindNode

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?