You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
527 lines
18 KiB
527 lines
18 KiB
<!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">
|
|
li{margin-top:2px; margin-bottom:2px;}
|
|
button{width:140px;}
|
|
select{width:140px;}
|
|
#layout{width:1230px;}
|
|
#jsmind_nav{width:210px;height:600px;border:solid 1px #ccc;overflow:auto;float:left;}
|
|
.file_input{width:100px;}
|
|
button.sub{width:100px;}
|
|
|
|
#jsmind_container{
|
|
float:left;
|
|
width:1000px;
|
|
height:600px;
|
|
border:solid 1px #ccc;
|
|
background:#f4f4f4;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="layout">
|
|
<div id="jsmind_nav">
|
|
<div>1. Open</div>
|
|
<ol type='A'>
|
|
<li><button onclick="open_json();">open example</button></li>
|
|
<li><button onclick="open_ajax();">open remote</button></li>
|
|
<li><button onclick="prompt_info('see 6.Multi Format');">open local file</button></li>
|
|
<li><button onclick="prompt_info('see 6.Multi Format');">save local file</button></li>
|
|
<li><button onclick="screen_shot();">screenshot</button></li>
|
|
</ol>
|
|
</ol>
|
|
<div>2. Select & Toggle</div>
|
|
<ol type='A'>
|
|
<li><button onclick="select_node();">select a node</button></li>
|
|
<li><button onclick="prompt_info('please try click a node');">try click a node</button></li>
|
|
<li><button onclick="show_selected();">get the selected</button></li>
|
|
</ol>
|
|
<div>3. Edit</div>
|
|
<ol type='A'>
|
|
<li><button onclick="toggle_editable(this);">disable editable</button></li>
|
|
<li><button onclick="add_node();">add a node</button></li>
|
|
<li><button onclick="add_image_node();">add a image node</button></li>
|
|
<li><button onclick="modify_node();">modify node</button></li>
|
|
<li><button onclick="prompt_info('please try double click a node');">try double click</button></li>
|
|
<li><button onclick="move_node();">move a node</button></li>
|
|
<li><button onclick="move_to_first();">move to first</button></li>
|
|
<li><button onclick="move_to_last();">move to last</button></li>
|
|
<li><button onclick="remove_node();">remove node</button></li>
|
|
</ol>
|
|
<div>4. Style</div>
|
|
<ol type='A'>
|
|
<li><button onclick="change_text_font();">change font</button></li>
|
|
<li><button onclick="change_text_color();">change color</button></li>
|
|
<li><button onclick="change_background_color();">change bg-color</button></li>
|
|
<li><button onclick="change_background_image();">change background</button></li>
|
|
</ol>
|
|
<div>5. Theme</div>
|
|
<ol type='A'>
|
|
<li>
|
|
<select onchange="set_theme(this.value);">
|
|
<option value="">default</option>
|
|
<option value="primary">primary</option>
|
|
<option value="warning">warning</option>
|
|
<option value="danger">danger</option>
|
|
<option value="success">success</option>
|
|
<option value="info">info</option>
|
|
<option value="greensea" selected="selected">greensea</option>
|
|
<option value="nephrite">nephrite</option>
|
|
<option value="belizehole">belizehole</option>
|
|
<option value="wisteria">wisteria</option>
|
|
<option value="asphalt">asphalt</option>
|
|
<option value="orange">orange</option>
|
|
<option value="pumpkin">pumpkin</option>
|
|
<option value="pomegranate">pomegranate</option>
|
|
<option value="clouds">clouds</option>
|
|
<option value="asbestos">asbestos</option>
|
|
</select>
|
|
</li>
|
|
</ol>
|
|
<div>6. Adjusting</div>
|
|
<ol type='A'>
|
|
<li><button onclick="change_container();">resize container</button>
|
|
<button onclick="resize_jsmind();">adusting</button></li>
|
|
<li>expand/collapse</li>
|
|
<ol>
|
|
<li><button class="sub" onclick="expand();">expand node</button></li>
|
|
<li><button class="sub" onclick="collapse();">collapse node</button></li>
|
|
<li><button class="sub" onclick="toggle();">toggle node</button></li>
|
|
<li><button class="sub" onclick="expand_to_level2();">expand to level 2</button></li>
|
|
<li><button class="sub" onclick="expand_to_level3();">expand to level 3</button></li>
|
|
<li><button class="sub" onclick="expand_all();">expand all</button></li>
|
|
<li><button class="sub" onclick="collapse_all();">collapse all</button></li>
|
|
</ol>
|
|
<li>zoom</li>
|
|
|
|
<button id="zoom-in-button" style="width:50px" onclick="zoomIn();">
|
|
In
|
|
</button>
|
|
<button id="zoom-out-button" style="width:50px" onclick="zoomOut();">
|
|
Out
|
|
</button>
|
|
</ol>
|
|
|
|
<div>7. Multi Format</div>
|
|
<ol type='A'>
|
|
<li>node_tree(default)</li>
|
|
<ol>
|
|
<li><button class="sub" onclick="show_data();">show data</button></li>
|
|
<li><button class="sub" onclick="save_file();">save file</button></li>
|
|
<li><input id="file_input" class="file_input" type="file"/></li>
|
|
<li><button class="sub" onclick="open_file();">open file</button></li>
|
|
</ol>
|
|
<li>node_array</li>
|
|
<ol>
|
|
<li><button class="sub" onclick="get_nodearray_data();">show data</button></li>
|
|
<li><button class="sub" onclick="save_nodearray_file();">save file</button></li>
|
|
<li><input id="file_input_nodearray" class="file_input" type="file"/></li>
|
|
<li><button class="sub" onclick="open_nodearray();">open file</button></li>
|
|
</ol>
|
|
<li>freemind(.mm)</li>
|
|
<ol>
|
|
<li><button class="sub" onclick="get_freemind_data();">show data</button></li>
|
|
<li><button class="sub" onclick="save_freemind_file();">save file</button></li>
|
|
<li><input id="file_input_freemind" class="file_input" type="file"/></li>
|
|
<li><button class="sub" onclick="open_freemind();">open file</button></li>
|
|
</ol>
|
|
</ol>
|
|
</div>
|
|
<div id="jsmind_container"></div>
|
|
<div style="display:none">
|
|
<input class="file" type="file" id="image-chooser" accept="image/*"/>
|
|
</div>
|
|
|
|
</div>
|
|
<script type="text/javascript" src="../js/jsmind.js"></script>
|
|
<script type="text/javascript" src="../js/jsmind.draggable.js"></script>
|
|
<script type="text/javascript" src="../js/jsmind.screenshot.js"></script>
|
|
<script type="text/javascript">
|
|
var _jm = null;
|
|
function open_empty(){
|
|
var options = {
|
|
container:'jsmind_container',
|
|
theme:'greensea',
|
|
editable:true
|
|
}
|
|
_jm = jsMind.show(options);
|
|
// _jm = jsMind.show(options,mind);
|
|
}
|
|
|
|
function open_json(){
|
|
var mind = {
|
|
"meta":{
|
|
"name":"jsMind remote",
|
|
"author":"hizzgdev@163.com",
|
|
"version":"0.2"
|
|
},
|
|
"format":"node_tree",
|
|
"data":{"id":"root","topic":"jsMind","children":[
|
|
{"id":"easy","topic":"Easy","direction":"left","children":[
|
|
{"id":"easy1","topic":"Easy to show"},
|
|
{"id":"easy2","topic":"Easy to edit"},
|
|
{"id":"easy3","topic":"Easy to store"},
|
|
{"id":"easy4","topic":"Easy to embed"},
|
|
{"id":"other3","background-image":"ant.png", "width": "100", "height": "100"}
|
|
]},
|
|
{"id":"open","topic":"Open Source","direction":"right","children":[
|
|
{"id":"open1","topic":"on GitHub", "background-color":"#eee", "foreground-color":"blue"},
|
|
{"id":"open2","topic":"BSD License"}
|
|
]},
|
|
{"id":"powerful","topic":"Powerful","direction":"right","children":[
|
|
{"id":"powerful1","topic":"Base on Javascript"},
|
|
{"id":"powerful2","topic":"Base on HTML5"},
|
|
{"id":"powerful3","topic":"Depends on you"}
|
|
]},
|
|
{"id":"other","topic":"test node","direction":"left","children":[
|
|
{"id":"other1","topic":"I'm from local variable"},
|
|
{"id":"other2","topic":"I can do everything"}
|
|
]}
|
|
]}
|
|
}
|
|
_jm.show(mind);
|
|
}
|
|
|
|
function open_ajax(){
|
|
var mind_url = 'data_example.json';
|
|
jsMind.util.ajax.get(mind_url,function(mind){
|
|
_jm.show(mind);
|
|
});
|
|
}
|
|
|
|
function screen_shot(){
|
|
_jm.screenshot.shootDownload();
|
|
}
|
|
|
|
function show_data(){
|
|
var mind_data = _jm.get_data();
|
|
var mind_string = jsMind.util.json.json2string(mind_data);
|
|
prompt_info(mind_string);
|
|
}
|
|
|
|
function save_file(){
|
|
var mind_data = _jm.get_data();
|
|
var mind_name = mind_data.meta.name;
|
|
var mind_str = jsMind.util.json.json2string(mind_data);
|
|
jsMind.util.file.save(mind_str,'text/jsmind',mind_name+'.jm');
|
|
}
|
|
|
|
function open_file(){
|
|
var file_input = document.getElementById('file_input');
|
|
var files = file_input.files;
|
|
if(files.length > 0){
|
|
var file_data = files[0];
|
|
jsMind.util.file.read(file_data,function(jsmind_data, jsmind_name){
|
|
var mind = jsMind.util.json.string2json(jsmind_data);
|
|
if(!!mind){
|
|
_jm.show(mind);
|
|
}else{
|
|
prompt_info('can not open this file as mindmap');
|
|
}
|
|
});
|
|
}else{
|
|
prompt_info('please choose a file first')
|
|
}
|
|
}
|
|
|
|
function select_node(){
|
|
var nodeid = 'other';
|
|
_jm.select_node(nodeid);
|
|
}
|
|
|
|
function show_selected(){
|
|
var selected_node = _jm.get_selected_node();
|
|
if(!!selected_node){
|
|
prompt_info(selected_node.topic);
|
|
}else{
|
|
prompt_info('nothing');
|
|
}
|
|
}
|
|
|
|
function get_selected_nodeid(){
|
|
var selected_node = _jm.get_selected_node();
|
|
if(!!selected_node){
|
|
return selected_node.id;
|
|
}else{
|
|
return null;
|
|
}
|
|
}
|
|
|
|
function add_node(){
|
|
var selected_node = _jm.get_selected_node(); // as parent of new node
|
|
if(!selected_node){prompt_info('please select a node first.');return;}
|
|
|
|
var nodeid = jsMind.util.uuid.newid();
|
|
var topic = '* Node_'+nodeid.substr(0,5)+' *';
|
|
var node = _jm.add_node(selected_node, nodeid, topic);
|
|
}
|
|
|
|
var imageChooser = document.getElementById('image-chooser');
|
|
|
|
imageChooser.addEventListener('change', function (event) {
|
|
// Read file here.
|
|
var reader = new FileReader();
|
|
reader.onloadend = (function () {
|
|
var selected_node = _jm.get_selected_node();
|
|
var nodeid = jsMind.util.uuid.newid();
|
|
var topic = undefined;
|
|
var data = {
|
|
"background-image": reader.result,
|
|
"width": "100",
|
|
"height": "100"};
|
|
var node = _jm.add_node(selected_node, nodeid, topic, data);
|
|
//var node = _jm.add_image_node(selected_node, nodeid, reader.result, 100, 100);
|
|
//add_image_node:function(parent_node, nodeid, image, width, height, data, idx, direction, expanded){
|
|
});
|
|
|
|
var file = imageChooser.files[0];
|
|
if (file) {
|
|
reader.readAsDataURL(file);
|
|
};
|
|
|
|
}, false);
|
|
|
|
function add_image_node(){
|
|
var selected_node = _jm.get_selected_node(); // as parent of new node
|
|
if(!selected_node){
|
|
prompt_info('please select a node first.');
|
|
return;
|
|
}
|
|
|
|
imageChooser.focus();
|
|
imageChooser.click();
|
|
}
|
|
|
|
function modify_node(){
|
|
var selected_id = get_selected_nodeid();
|
|
if(!selected_id){prompt_info('please select a node first.');return;}
|
|
|
|
// modify the topic
|
|
_jm.update_node(selected_id, '--- modified ---');
|
|
}
|
|
|
|
function move_to_first(){
|
|
var selected_id = get_selected_nodeid();
|
|
if(!selected_id){prompt_info('please select a node first.');return;}
|
|
|
|
_jm.move_node(selected_id,'_first_');
|
|
}
|
|
|
|
function move_to_last(){
|
|
var selected_id = get_selected_nodeid();
|
|
if(!selected_id){prompt_info('please select a node first.');return;}
|
|
|
|
_jm.move_node(selected_id,'_last_');
|
|
}
|
|
|
|
function move_node(){
|
|
// move a node before another
|
|
_jm.move_node('other','open');
|
|
}
|
|
|
|
function remove_node(){
|
|
var selected_id = get_selected_nodeid();
|
|
if(!selected_id){prompt_info('please select a node first.');return;}
|
|
|
|
_jm.remove_node(selected_id);
|
|
}
|
|
|
|
function change_text_font(){
|
|
var selected_id = get_selected_nodeid();
|
|
if(!selected_id){prompt_info('please select a node first.');return;}
|
|
|
|
_jm.set_node_font_style(selected_id, 28);
|
|
}
|
|
|
|
function change_text_color(){
|
|
var selected_id = get_selected_nodeid();
|
|
if(!selected_id){prompt_info('please select a node first.');return;}
|
|
|
|
_jm.set_node_color(selected_id, null, '#000');
|
|
}
|
|
|
|
function change_background_color(){
|
|
var selected_id = get_selected_nodeid();
|
|
if(!selected_id){prompt_info('please select a node first.');return;}
|
|
|
|
_jm.set_node_color(selected_id, '#eee', null);
|
|
}
|
|
|
|
function change_background_image(){
|
|
var selected_id = get_selected_nodeid();
|
|
if(!selected_id){prompt_info('please select a node first.');return;}
|
|
|
|
_jm.set_node_background_image(selected_id, 'ant.png', 100, 100);
|
|
}
|
|
|
|
function set_theme(theme_name){
|
|
_jm.set_theme(theme_name);
|
|
}
|
|
|
|
var zoomInButton = document.getElementById("zoom-in-button");
|
|
var zoomOutButton = document.getElementById("zoom-out-button");
|
|
|
|
function zoomIn() {
|
|
if (_jm.view.zoomIn()) {
|
|
zoomOutButton.disabled = false;
|
|
} else {
|
|
zoomInButton.disabled = true;
|
|
};
|
|
};
|
|
|
|
function zoomOut() {
|
|
if (_jm.view.zoomOut()) {
|
|
zoomInButton.disabled = false;
|
|
} else {
|
|
zoomOutButton.disabled = true;
|
|
};
|
|
};
|
|
|
|
function toggle_editable(btn){
|
|
var editable = _jm.get_editable();
|
|
if(editable){
|
|
_jm.disable_edit();
|
|
btn.innerHTML = 'enable editable';
|
|
}else{
|
|
_jm.enable_edit();
|
|
btn.innerHTML = 'disable editable';
|
|
}
|
|
}
|
|
|
|
// this method change size of container, perpare for adjusting jsmind
|
|
function change_container(){
|
|
var c = document.getElementById('jsmind_container');
|
|
c.style.width = '800px';
|
|
c.style.height = '500px';
|
|
}
|
|
|
|
function resize_jsmind(){
|
|
_jm.resize();
|
|
}
|
|
|
|
function expand(){
|
|
var selected_id = get_selected_nodeid();
|
|
if(!selected_id){prompt_info('please select a node first.');return;}
|
|
|
|
_jm.expand_node(selected_id);
|
|
}
|
|
|
|
function collapse(){
|
|
var selected_id = get_selected_nodeid();
|
|
if(!selected_id){prompt_info('please select a node first.');return;}
|
|
|
|
_jm.collapse_node(selected_id);
|
|
}
|
|
|
|
function toggle(){
|
|
var selected_id = get_selected_nodeid();
|
|
if(!selected_id){prompt_info('please select a node first.');return;}
|
|
|
|
_jm.toggle_node(selected_id);
|
|
}
|
|
|
|
function expand_all(){
|
|
_jm.expand_all();
|
|
}
|
|
|
|
function expand_to_level2(){
|
|
_jm.expand_to_depth(2);
|
|
}
|
|
|
|
function expand_to_level3(){
|
|
_jm.expand_to_depth(3);
|
|
}
|
|
|
|
function collapse_all(){
|
|
_jm.collapse_all();
|
|
}
|
|
|
|
|
|
function get_nodearray_data(){
|
|
var mind_data = _jm.get_data('node_array');
|
|
var mind_string = jsMind.util.json.json2string(mind_data);
|
|
prompt_info(mind_string);
|
|
}
|
|
|
|
function save_nodearray_file(){
|
|
var mind_data = _jm.get_data('node_array');
|
|
var mind_name = mind_data.meta.name;
|
|
var mind_str = jsMind.util.json.json2string(mind_data);
|
|
jsMind.util.file.save(mind_str,'text/jsmind',mind_name+'.jm');
|
|
}
|
|
|
|
function open_nodearray(){
|
|
var file_input = document.getElementById('file_input_nodearray');
|
|
var files = file_input.files;
|
|
if(files.length > 0){
|
|
var file_data = files[0];
|
|
jsMind.util.file.read(file_data,function(jsmind_data, jsmind_name){
|
|
var mind = jsMind.util.json.string2json(jsmind_data);
|
|
if(!!mind){
|
|
_jm.show(mind);
|
|
}else{
|
|
prompt_info('can not open this file as mindmap');
|
|
}
|
|
});
|
|
}else{
|
|
prompt_info('please choose a file first')
|
|
}
|
|
}
|
|
|
|
function get_freemind_data(){
|
|
var mind_data = _jm.get_data('freemind');
|
|
var mind_string = jsMind.util.json.json2string(mind_data);
|
|
alert(mind_string);
|
|
}
|
|
|
|
function save_freemind_file(){
|
|
var mind_data = _jm.get_data('freemind');
|
|
var mind_name = mind_data.meta.name || 'freemind';
|
|
var mind_str = mind_data.data;
|
|
jsMind.util.file.save(mind_str,'text/xml',mind_name+'.mm');
|
|
}
|
|
|
|
function open_freemind(){
|
|
var file_input = document.getElementById('file_input_freemind');
|
|
var files = file_input.files;
|
|
if(files.length > 0){
|
|
var file_data = files[0];
|
|
jsMind.util.file.read(file_data, function(freemind_data, freemind_name){
|
|
if(freemind_data){
|
|
var mind_name = freemind_name;
|
|
if(/.*\.mm$/.test(mind_name)){
|
|
mind_name = freemind_name.substring(0,freemind_name.length-3);
|
|
}
|
|
var mind = {
|
|
"meta":{
|
|
"name":mind_name,
|
|
"author":"hizzgdev@163.com",
|
|
"version":"1.0.1"
|
|
},
|
|
"format":"freemind",
|
|
"data":freemind_data
|
|
};
|
|
_jm.show(mind);
|
|
}else{
|
|
prompt_info('can not open this file as mindmap');
|
|
}
|
|
});
|
|
}else{
|
|
prompt_info('please choose a file first')
|
|
}
|
|
}
|
|
|
|
function prompt_info(msg){
|
|
alert(msg);
|
|
}
|
|
|
|
open_empty();
|
|
</script>
|
|
</body>
|
|
</html>
|