ZhouXY108
/
wisemapping-open-source
mirror of https://github.com/wisemapping/wisemapping-open-source.git
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Improve readme documentation.

main
Paulo Gustavo Veiga 2014-01-25 15:39:50 -03:00
parent 20a786460c
commit 7e5b3c51a8
3 changed files with 80 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
Home.textile
View File

@ -1,20 +0,0 @@
h1. What is WiseMapping Open Source?
WiseMapping is a free web based mindmapping application. The goal of this project is to provide a high quality product that can be deployed by educational and academic institutions, private and public companies and anyone who needs to have a mindmapping application. WiseMapping is based on the same code source supporting WiseMapping.com.
h1. Why Open Source ?
In the last years, we have received hundred of mails from different persons asking for:
Integrating wisemapping.com with their sites
Deploying a private instance of wisemapping.com
Participating in the development of the site
All this make us wonder "Why if we share our product to all this people and invite them to participate with us in this journey ?" .
h1. Who are we ?
We’re a couple of friends working on an idea: “Create the best on-line collaborative mind mapping tool ever created”. This has been our idea since the first day we started.
h1. [[Documentation]]
h1. [[Compiling and Running]]

83
README.md
View File

@ -37,84 +37,19 @@ This will start the application on the URL: [http://localhost:8080/wise-webapp/]
User: test@wisemapping.org User: test@wisemapping.org
Password: test Password: test
## Members
Founders
## Running the JS only version * Pablo Luna <pveiga@wisemapping.com>
* Paulo Veiga <pablo@wisemapping.com>
Start by creating the .zip file: Individual Controbutors
* Ezequiel Bergamaschi
`mvn assembly:assembly -Dmaven.test.skip=true` Past Individual Contributors
* Ignacio Manzano
To test the javascript frontend you then do: * Nicolas Damonte
ruby -rwebrick -e 'WEBrick::HTTPServer.new(:Port=>8000,:DocumentRoot=>".").start'
Now open a browser using the URL http://localhost:8000/wise-editor/src/main/webapp/
### Attaching drag and drop events.
1) Support for dragging TextNodes:
The following code is an example of how to add attach to the div dragImageNode the support for node dragging.
$("dragTextNode").addEvent('mousedown', function(event) {
event.preventDefault();
// Create a image node ...
var mindmap = designer.getMindmap();
var node = mindmap.createNode();
node.setText("Node Text !!!!");
node.setMetadata("{'media':'test'}");
node.setShapeType(mindplot.model.TopicShape.RECTANGLE);
// Add link ...
var link = node.createFeature(mindplot.TopicFeature.Link.id, {url:"http://www.wisemapping.com"});
node.addFeature(link);
// Add Note ...
var note = node.createFeature(mindplot.TopicFeature.Note.id, {text:"This is a note"});
node.addFeature(note);
designer.addDraggedNode(event, node);
});
In the example, a new node is created with text "Node Text !!!!" and a note and a link associated to it when the user drop the node. Something to pay attention is the node.setMetadata("{}"), this delegated will be persisted during the serialization. Here you can store all the data you need.
2) Support for dragging Images: Similar to the point 1,drag support is registered to the div dragImageNode.
$("dragImageNode").addEvent('mousedown', function(event) {
event.preventDefault();
// Create a image node ...
var mindmap = designer.getMindmap();
var node = mindmap.createNode();
node.setImageSize(80, 43);
node.setMetadata("{'media':'video,'url':'http://www.youtube.com/watch?v=P3FrXftyuzw&feature=g-vrec&context=G2b4ab69RVAAAAAAAAAA'}");
node.setImageUrl("images/logo-small.png");
node.setShapeType(mindplot.model.TopicShape.IMAGE);
designer.addDraggedNode(event, node);
});
The node.setShapeType(mindplot.model.TopicShape.IMAGE) defines a image node. This makes mandatory the set of setImageUrl and setImageSize properties in the node.
3) An event registration mechanism for Image nodes edit events: The next snipped show how to register a custom edition handler.
designer.addEvent("editnode", function(event) {
var node = event.model;
alert("Node Id:" + node.getId());
alert("Node Metadata:" + node.getMetadata());
alert("Is Read Only:" + event.readOnly);
} });
## Authors
* Pablo Luna
* Paulo Veiga
Past Collaborators: Ignacio Manzano, Nicolas Damonte
## License ## License

71
wise-editor/doc/Integration.md 100644
View File

@ -0,0 +1,71 @@
JS Editor Integration
---------------------
## Running the JS only version
Start by creating the .zip file:
`mvn assembly:assembly -Dmaven.test.skip=true`
To test the javascript frontend you then do:
ruby -rwebrick -e 'WEBrick::HTTPServer.new(:Port=>8000,:DocumentRoot=>".").start'
Now open a browser using the URL http://localhost:8000/wise-editor/src/main/webapp/
### Attaching drag and drop events.
1) Support for dragging TextNodes:
The following code is an example of how to add attach to the div dragImageNode the support for node dragging.
$("dragTextNode").addEvent('mousedown', function(event) {
event.preventDefault();
// Create a image node ...
var mindmap = designer.getMindmap();
var node = mindmap.createNode();
node.setText("Node Text !!!!");
node.setMetadata("{'media':'test'}");
node.setShapeType(mindplot.model.TopicShape.RECTANGLE);
// Add link ...
var link = node.createFeature(mindplot.TopicFeature.Link.id, {url:"http://www.wisemapping.com"});
node.addFeature(link);
// Add Note ...
var note = node.createFeature(mindplot.TopicFeature.Note.id, {text:"This is a note"});
node.addFeature(note);
designer.addDraggedNode(event, node);
});
In the example, a new node is created with text "Node Text !!!!" and a note and a link associated to it when the user drop the node. Something to pay attention is the node.setMetadata("{}"), this delegated will be persisted during the serialization. Here you can store all the data you need.
2) Support for dragging Images: Similar to the point 1,drag support is registered to the div dragImageNode.
$("dragImageNode").addEvent('mousedown', function(event) {
event.preventDefault();
// Create a image node ...
var mindmap = designer.getMindmap();
var node = mindmap.createNode();
node.setImageSize(80, 43);
node.setMetadata("{'media':'video,'url':'http://www.youtube.com/watch?v=P3FrXftyuzw&feature=g-vrec&context=G2b4ab69RVAAAAAAAAAA'}");
node.setImageUrl("images/logo-small.png");
node.setShapeType(mindplot.model.TopicShape.IMAGE);
designer.addDraggedNode(event, node);
});
The node.setShapeType(mindplot.model.TopicShape.IMAGE) defines a image node. This makes mandatory the set of setImageUrl and setImageSize properties in the node.
3) An event registration mechanism for Image nodes edit events: The next snipped show how to register a custom edition handler.
designer.addEvent("editnode", function(event) {
var node = event.model;
alert("Node Id:" + node.getId());
alert("Node Metadata:" + node.getMetadata());
alert("Is Read Only:" + event.readOnly);
} });