From 9639b9e113fae05257a54531c6e6fa604b9e6662 Mon Sep 17 00:00:00 2001
From: Ezequiel Bergamaschi <ezequiel.bergamaschi@avature.net>
Date: Sun, 19 Jan 2014 18:21:18 -0300
Subject: [PATCH] adding missing info to README.md

---
 README.md | 70 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 70 insertions(+)

diff --git a/README.md b/README.md
index 9cef7e88..2638a159 100644
--- a/README.md
+++ b/README.md
@@ -37,6 +37,76 @@ This will start the application on the URL: [http://localhost:8080/wise-webapp/]
 User: test@wisemapping.org
 Password: test
 
+## 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);
+       } });
+
+
 ## Authors
 
    * Pablo Luna