vmario/wisemapping-open-source
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-open-source.git synced 2024-11-22 06:07:57 +01:00
Code Issues Packages Projects Releases Wiki Activity

Document drag and drop

Browse Source
This commit is contained in:
Tarjei Huse 2012-03-19 11:43:40 +01:00
parent 8854d414d6
commit 6408fc4b82
1 changed files with 67 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
README.md
View File

@ -43,6 +43,73 @@ Start by creating the .zip file:
`mvn assembly:assembly -Dmaven.test.skip=true`
To test the javascript frontend you then do:
unzip target/wisemapping-3.0-SNAPSHOT-editor.zip
cd target/wisemapping-3.0-SNAPSHOT-editor
ruby -rwebrick -e 'WEBrick::HTTPServer.new(:Port=>8000,:DocumentRoot=>".").start'
Now open a browser using the URL http://localhost:8000/
### 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 attributes 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);
} });
## Author
* Pablo Luna