-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
72 lines (65 loc) · 4.44 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<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="https://cdn.jsdelivr.net/npm/[email protected]/style/jsmind.css">
<style type="text/css">
#jsmind_container {
width: 800px;
height: 500px;
border: solid 1px #ccc;
background: #f4f4f4;
}
</style>
</head>
<body>
<div id="jsmind_container"><div class="jsmind-inner jmnode-overflow-hidden" tabindex="1"><canvas class="jsmind" width="800" height="500"></canvas><jmnodes class="theme-primary" style="width: 800px; height: 500px;"><jmnode class="root" nodeid="root" style="visibility: visible; left: 229.5px; top: 226.5px;">jsMind</jmnode><jmexpander nodeid="sub1" style="visibility: visible; left: 416.5px; top: 127px;">-</jmexpander><jmnode nodeid="sub1" style="visibility: visible; background-color: rgb(0, 0, 255); left: 357.5px; top: 115px;">sub1</jmnode><jmexpander nodeid="sub11" style="visibility: hidden; display: none;">-</jmexpander><jmnode nodeid="sub11" style="visibility: visible; left: 459.5px; top: 57px;">sub11</jmnode><jmexpander nodeid="sub12" style="visibility: hidden; display: none;">-</jmexpander><jmnode nodeid="sub12" style="visibility: visible; left: 459.5px; top: 115px;">sub12</jmnode><jmexpander nodeid="sub13" style="visibility: hidden; display: none;">-</jmexpander><jmnode nodeid="sub13" style="visibility: visible; left: 459.5px; top: 173px;">sub13</jmnode><jmexpander nodeid="sub2" style="visibility: visible; left: 416.5px; top: 301px;">-</jmexpander><jmnode nodeid="sub2" style="visibility: visible; left: 357.5px; top: 289px;">sub2</jmnode><jmexpander nodeid="sub21" style="visibility: hidden; display: none;">-</jmexpander><jmnode nodeid="sub21" style="visibility: visible; left: 459.5px; top: 231px; background-color: green; color: rgb(204, 204, 204);">sub21</jmnode><jmexpander nodeid="sub22" style="visibility: hidden; display: none;">-</jmexpander><jmnode nodeid="sub22" style="visibility: visible; color: rgb(51, 255, 51); left: 459.5px; top: 289px;">sub22</jmnode><jmexpander nodeid="sub3" style="visibility: hidden; display: none;">-</jmexpander><jmnode nodeid="sub3" style="visibility: visible; left: 357.5px; top: 405px;">sub3</jmnode><jmexpander nodeid="sub23" style="visibility: hidden; display: none;">-</jmexpander><jmnode nodeid="sub23" style="visibility: visible; background-color: red; left: 459.5px; top: 347px;">new node</jmnode><jmnode class="jsmind-draggable-shadow-node" style="visibility: hidden; z-index: 3; cursor: move; opacity: 0.7;"></jmnode></jmnodes><canvas width="800" height="500"></canvas></div></div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/es6/jsmind.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/es6/jsmind.draggable-node.js"></script>
<script type="text/javascript">
function load_jsmind() {
var mind = {
meta: {
name: 'demo',
author: '[email protected]',
version: '0.2',
},
format: 'node_array',
data: [
{ id: 'root', isroot: true, topic: 'jsMind' },
{
'id': 'sub1',
'parentid': 'root',
'topic': 'sub1',
'background-color': '#0000ff',
},
{ 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',
'foreground-color': '#33ff33',
},
{ id: 'sub3', parentid: 'root', topic: 'sub3' },
],
};
var options = {
container: 'jsmind_container',
editable: true,
theme: 'primary',
};
var jm = new jsMind(options);
jm.show(mind);
// jm.set_readonly(true);
// var mind_data = jm.get_data();
// alert(mind_data);
jm.add_node('sub2', 'sub23', 'new node', { 'background-color': 'red' });
jm.set_node_color('sub21', 'green', '#ccc');
}
load_jsmind();
</script>
</body></html>