Skip to content

Commit

Permalink
data format has been changed
Browse files Browse the repository at this point in the history
  • Loading branch information
hizzgdev committed Mar 5, 2014
1 parent 6f0286e commit 364be76
Show file tree
Hide file tree
Showing 7 changed files with 580 additions and 479 deletions.
76 changes: 47 additions & 29 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
jsMind
======

jsMind is a pure javascript library for mindmap. It is easy to use, to understand, and to expand itself.<br />
jsMind is very powerful. It base on javascript and HTML5(Canvas).<br />
jsMind is under BSD license. You can embed it in any project, if only you observe the license.<br />
jsMind is a pure javascript library for mindmap. It is easy to use, to understand, and to expand itself.

jsMind is very powerful. It base on javascript and HTML5(Canvas).

jsMind is under BSD license. You can embed it in any project, if only you observe the license.

1. Usage
------
Expand All @@ -16,51 +18,65 @@ jsMind is under BSD license. You can embed it in any project, if only you observ
a div element should be in your HTML as container

<div id="jsmind_container"></div>

### 1.2. An empty mindmap
It is very easy to show a mindmap:

<script type="text/javascript">
var options = {
data:{readonly:false},
view:{container:'jsmind_container'}
container:'jsmind_container',
readonly:false,
theme:'orange'
};
var jm = jsMind.show(options);
</script>

The example above show how to display an empty mindmap. actually, it is not empty, it includes a root node as default.<br />
jsMind show a map in read-only mode, you can enable editable mode with setting the value of readonly property to false.<br />
The container option is the only required, the value should be the id of the container.<br />
The example above show how to display an empty mindmap. actually, it is not empty, it includes a root node as default.

jsMind show a map in read-only mode, you can enable editable mode with setting the value of readonly property to false.

The container option is the only required, the value should be the id of the container.

### 1.3. A simple mindmap
You can display an existing mindmap:

<script type="text/javascript">
var mind = [
{'nodeid':'root', 'isroot':true, 'topic':'jsMind'},

{'nodeid':'easy', 'parentid':'root', 'topic':'Easy'},
{'nodeid':'easy1', 'parentid':'easy', 'topic':'Easy to show'},
{'nodeid':'easy2', 'parentid':'easy', 'topic':'Easy to edit'},
{'nodeid':'easy3', 'parentid':'easy', 'topic':'Easy to store'},
{'nodeid':'easy4', 'parentid':'easy', 'topic':'Easy to embed'},

{'nodeid':'open', 'parentid':'root', 'topic':'Open Source'},
{'nodeid':'open1', 'parentid':'open', 'topic':'on GitHub'},
{'nodeid':'open2', 'parentid':'open', 'topic':'BSD License'},

{'nodeid':'powerful', 'parentid':'root', 'topic':'Powerful'},
{'nodeid':'powerful1', 'parentid':'powerful', 'topic':'Base on Javascript'},
{'nodeid':'powerful2', 'parentid':'powerful', 'topic':'Base on HTML5'},
{'nodeid':'powerful3', 'parentid':'powerful', 'topic':'Depends on you'},
]
var mind = {
"meta":{
"name":"example",
"author":"hizzgdev@163.com",
"version":"0.2",
"format":"node_array"
},
"nodes":[
{"id":"root", "isroot":true, "topic":"jsMind"},

{"id":"easy", "parentid":"root", "topic":"Easy"},
{"id":"easy1", "parentid":"easy", "topic":"Easy to show"},
{"id":"easy2", "parentid":"easy", "topic":"Easy to edit"},
{"id":"easy3", "parentid":"easy", "topic":"Easy to store"},
{"id":"easy4", "parentid":"easy", "topic":"Easy to embed"},

{"id":"open", "parentid":"root", "topic":"Open Source"},
{"id":"open1", "parentid":"open", "topic":"on GitHub"},
{"id":"open2", "parentid":"open", "topic":"BSD License"},

{"id":"powerful", "parentid":"root", "topic":"Powerful"},
{"id":"powerful1", "parentid":"powerful", "topic":"Base on Javascript"},
{"id":"powerful2", "parentid":"powerful", "topic":"Base on HTML5"},
{"id":"powerful3", "parentid":"powerful", "topic":"Depends on you"},
]
};
var options = {
data:{readonly:false},
view:{container:'jsmind_container'}
container:'jsmind_container',
readonly:false,
theme:'greensea'
};
var jm = jsMind.show(options,mind);
</script>

The difference is only the arguments of jsMind.show() .<br />
The difference is only the arguments of jsMind.show().

It is very easy, is not it?

### 1.4. Data format
Expand All @@ -69,6 +85,8 @@ To be continued
### 1.5. Options
To be continued

### 1.6. Themes
To be continued

2. Apis
------
Expand Down
36 changes: 22 additions & 14 deletions example/1_basic.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,24 +20,32 @@
<script type="text/javascript" src="../js/jsmind.js"></script>
<script type="text/javascript">
function load_jsmind(){
var mind = [
{'nodeid':'root', 'isroot':true, 'topic':'jsMind'},
var mind = {
meta:{
name:'demo',
author:'hizzgdev@163.com',
version:'0.2',
format:'node_array'
},
nodes:[
{"id":"root", "isroot":true, "topic":"jsMind"},

{'nodeid':'sub1', 'parentid':'root', 'topic':'sub1'},
{'nodeid':'sub11', 'parentid':'sub1', 'topic':'sub11'},
{'nodeid':'sub12', 'parentid':'sub1', 'topic':'sub12'},
{'nodeid':'sub13', 'parentid':'sub1', 'topic':'sub13'},
{"id":"sub1", "parentid":"root", "topic":"sub1"},
{"id":"sub11", "parentid":"sub1", "topic":"sub11"},
{"id":"sub12", "parentid":"sub1", "topic":"sub12"},
{"id":"sub13", "parentid":"sub1", "topic":"sub13"},

{'nodeid':'sub2', 'parentid':'root', 'topic':'sub2'},
{'nodeid':'sub21', 'parentid':'sub2', 'topic':'sub21'},
{'nodeid':'sub22', 'parentid':'sub2', 'topic':'sub22'},
{"id":"sub2", "parentid":"root", "topic":"sub2"},
{"id":"sub21", "parentid":"sub2", "topic":"sub21"},
{"id":"sub22", "parentid":"sub2", "topic":"sub22"},

{'nodeid':'sub3', 'parentid':'root', 'topic':'sub3'},
];
{"id":"sub3", "parentid":"root", "topic":"sub3"},
]
};
var options = {
data:{readonly:false},
theme:{name:'primary'},
view:{container:'jsmind_container'}
container:'jsmind_container',
readonly:false,
theme:'primary'
}
var jm = jsMind.show(options,mind);
// jm.set_readonly(true);
Expand Down
56 changes: 32 additions & 24 deletions example/2_features.html
Original file line number Diff line number Diff line change
Expand Up @@ -84,36 +84,44 @@
var _jm = null;
function open_empty(){
var options = {
data:{readonly:false},
view:{container:'jsmind_container'}
readonly:false,
container:'jsmind_container'
}
_jm = jsMind.show(options);
// _jm = jsMind.show(options,mind);
}

function open_json(){
var mind = [
{'nodeid':'root', 'isroot':true, 'topic':'jsMind'},

{'nodeid':'easy', 'parentid':'root', 'topic':'Easy'},
{'nodeid':'easy1', 'parentid':'easy', 'topic':'Easy to show'},
{'nodeid':'easy2', 'parentid':'easy', 'topic':'Easy to edit'},
{'nodeid':'easy3', 'parentid':'easy', 'topic':'Easy to store'},
{'nodeid':'easy4', 'parentid':'easy', 'topic':'Easy to embed'},

{'nodeid':'open', 'parentid':'root', 'topic':'Open Source'},
{'nodeid':'open1', 'parentid':'open', 'topic':'on GitHub'},
{'nodeid':'open2', 'parentid':'open', 'topic':'BSD License'},

{'nodeid':'other', 'parentid':'root', 'topic':'test node'},
{'nodeid':'other1', 'parentid':'other', 'topic':'I\'m from js variable'},
{'nodeid':'other2', 'parentid':'other', 'topic':'I can do everything'},

{'nodeid':'powerful', 'parentid':'root', 'topic':'Powerful'},
{'nodeid':'powerful1', 'parentid':'powerful', 'topic':'Base on Javascript'},
{'nodeid':'powerful2', 'parentid':'powerful', 'topic':'Base on HTML5'},
{'nodeid':'powerful3', 'parentid':'powerful', 'topic':'Depends on you'},
];
var mind = {
"meta":{
"name":"jsMind",
"author":"hizzgdev@163.com",
"version":"0.2",
"format":"node_array"
},
"nodes":[
{"id":"root", "isroot":true, "topic":"jsMind"},

{"id":"easy", "parentid":"root", "topic":"Easy"},
{"id":"easy1", "parentid":"easy", "topic":"Easy to show"},
{"id":"easy2", "parentid":"easy", "topic":"Easy to edit"},
{"id":"easy3", "parentid":"easy", "topic":"Easy to store"},
{"id":"easy4", "parentid":"easy", "topic":"Easy to embed"},

{"id":"open", "parentid":"root", "topic":"Open Source"},
{"id":"open1", "parentid":"open", "topic":"on GitHub"},
{"id":"open2", "parentid":"open", "topic":"BSD License"},

{"id":"other", "parentid":"root", "topic":"test node"},
{"id":"other1", "parentid":"other", "topic":"I'm from js variable"},
{"id":"other2", "parentid":"other", "topic":"I can do everything"},

{"id":"powerful", "parentid":"root", "topic":"Powerful"},
{"id":"powerful1", "parentid":"powerful", "topic":"Base on Javascript"},
{"id":"powerful2", "parentid":"powerful", "topic":"Base on HTML5"},
{"id":"powerful3", "parentid":"powerful", "topic":"Depends on you"},
]
};
_jm.show(mind);
}

Expand Down
44 changes: 26 additions & 18 deletions example/data_example.json
Original file line number Diff line number Diff line change
@@ -1,22 +1,30 @@
[
{'nodeid':'root', 'isroot':true, 'topic':'jsMind'},
{
"meta":{
"name":"jsMind",
"author":"hizzgdev@163.com",
"version":"0.2",
"format":"node_array"
},
"nodes":[
{"id":"root", "isroot":true, "topic":"jsMind"},

{'nodeid':'easy', 'parentid':'root', 'topic':'Easy'},
{'nodeid':'easy1', 'parentid':'easy', 'topic':'Easy to show'},
{'nodeid':'easy2', 'parentid':'easy', 'topic':'Easy to edit'},
{'nodeid':'easy3', 'parentid':'easy', 'topic':'Easy to store'},
{'nodeid':'easy4', 'parentid':'easy', 'topic':'Easy to embed'},
{"id":"easy", "parentid":"root", "topic":"Easy"},
{"id":"easy1", "parentid":"easy", "topic":"Easy to show"},
{"id":"easy2", "parentid":"easy", "topic":"Easy to edit"},
{"id":"easy3", "parentid":"easy", "topic":"Easy to store"},
{"id":"easy4", "parentid":"easy", "topic":"Easy to embed"},

{'nodeid':'open', 'parentid':'root', 'topic':'Open Source'},
{'nodeid':'open1', 'parentid':'open', 'topic':'on GitHub'},
{'nodeid':'open2', 'parentid':'open', 'topic':'BSD License'},
{"id":"open", "parentid":"root", "topic":"Open Source"},
{"id":"open1", "parentid":"open", "topic":"on GitHub"},
{"id":"open2", "parentid":"open", "topic":"BSD License"},

{'nodeid':'powerful', 'parentid':'root', 'topic':'Powerful'},
{'nodeid':'powerful1', 'parentid':'powerful', 'topic':'Base on Javascript'},
{'nodeid':'powerful2', 'parentid':'powerful', 'topic':'Base on HTML5'},
{'nodeid':'powerful3', 'parentid':'powerful', 'topic':'Depends on you'},
{"id":"powerful", "parentid":"root", "topic":"Powerful"},
{"id":"powerful1", "parentid":"powerful", "topic":"Base on Javascript"},
{"id":"powerful2", "parentid":"powerful", "topic":"Base on HTML5"},
{"id":"powerful3", "parentid":"powerful", "topic":"Depends on you"},

{'nodeid':'other', 'parentid':'root', 'topic':'test node'},
{'nodeid':'other1', 'parentid':'other', 'topic':'I\'m from ajax'},
{'nodeid':'other2', 'parentid':'other', 'topic':'I can do everything'},
]
{"id":"other", "parentid":"root", "topic":"test node"},
{"id":"other1", "parentid":"other", "topic":"I'm from ajax"},
{"id":"other2", "parentid":"other", "topic":"I can do everything"},
]
}
59 changes: 59 additions & 0 deletions example/demo.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jsMind</title>
<link type="text/css" rel="stylesheet" href="../style/jsmind.css" />
<style type="text/css">
#jsmind_container{
width:800px;
height:500px;
border:solid 1px #ccc;
/*background:#f4f4f4;*/
background:#f4f4f4;
}
</style>
</head>
<body>
<div id="jsmind_container"></div>
<script type="text/javascript" src="../js/jsmind.js"></script>
<script type="text/javascript">
function load_jsmind(){
var mind = {
meta:{
name:'demo',
author:'hizzgdev@163.com',
version:'0.2',
format:'node_array'
},
nodes:[
{"id":"root", "isroot":true, "topic":"jsMind"},

{"id":"sub1", "parentid":"root", "topic":"sub1"},
{"id":"sub11", "parentid":"sub1", "topic":"sub11"},
{"id":"sub12", "parentid":"sub1", "topic":"sub12"},
{"id":"sub13", "parentid":"sub1", "topic":"sub13"},

{"id":"sub2", "parentid":"root", "topic":"sub2"},
{"id":"sub21", "parentid":"sub2", "topic":"sub21"},
{"id":"sub22", "parentid":"sub2", "topic":"sub22"},

{"id":"sub3", "parentid":"root", "topic":"sub3"},
]
};
var options = {
container:'jsmind_container',
readonly:false,
theme:'primary'
}
var jm = jsMind.show(options,mind);
// jm.set_readonly(true);
// var mind_data = jm.get_data();
// alert(mind_data);
}

load_jsmind();
</script>
</body>
</html>
Loading

0 comments on commit 364be76

Please sign in to comment.