Update version

Fix footer.

README.md

@@ -8,7 +8,7 @@ The goal of this project is to provide a high quality product that can be deploy
 
 The following products must be installed:
 
-    * Java Development Kit 7 or higher ([http://www.oracle.com/technetwork/java/javase/downloads/index.html])
+    * Java Development Kit 8 or higher ([http://www.oracle.com/technetwork/java/javase/downloads/index.html])
     * Maven 3.x or higher ([http://maven.apache.org/])
 
 ### Compiling
@@ -32,7 +32,7 @@ The previously generated war can be deployed locally executing within the direct
 
 `cd wise-webapp;mvn jetty:run-war`
 
-This will start the application on the URL: [http://localhost:8080/wise-webapp/]. Additionally, a file based database is automatically populated with a test user.
+This will start the application on the URL: [http://localhost:8080/] using file based database..
 
 User: test@wisemapping.org
 Password: test
@@ -49,6 +49,10 @@ To test the javascript frontend you then do:
 
 Now open a browser using the URL http://localhost:8000/wise-editor/src/main/webapp/
 
+## Maintenance
+
+
+
 ## Members
 
 ### Founders
@@ -70,3 +74,4 @@ Now open a browser using the URL http://localhost:8000/wise-editor/src/main/weba
 
 The source code is Licensed under the WiseMapping Open License, Version 1.0 (the “License”);
 You may obtain a copy of the License at: [https://wisemapping.atlassian.net/wiki/display/WS/License]
+

config/database/hsql/apopulate-schemas.sql

@@ -6,22 +6,5 @@ INSERT INTO COLLABORATOR (id, email, creation_date) VALUES (2, 'admin@wisemappin
 INSERT INTO USER (colaborator_id, firstname, lastname, password, activation_code, activation_date, allow_send_email,authentication_type)
   VALUES (2, 'Admin', 'User', 'admin', 1237, CURDATE(), 1,'D');
 
-INSERT INTO COLLABORATOR (id, email, creation_date) VALUES (3, 'homer@wisemapping.org', CURDATE());
-INSERT INTO USER (colaborator_id, firstname, lastname, password, activation_code, activation_date, allow_send_email,authentication_type)
-  VALUES (3, 'Homer', 'Simpson', 'homer', 1237, CURDATE(), 1, 'D');
-
-INSERT INTO COLLABORATOR (id, email, creation_date) VALUES (4, 'marge@wisemapping.org', CURDATE());
-INSERT INTO USER (colaborator_id, firstname, lastname, password, activation_code, activation_date, allow_send_email,authentication_type)
-  VALUES (4, 'Marge', 'Bouvier', 'marge', 1237, CURDATE(), 1, 'D');
-
-INSERT INTO COLLABORATOR (id, email, creation_date) VALUES (5, 'bart@wisemapping.org', CURDATE());
-INSERT INTO USER (colaborator_id, firstname, lastname, password, activation_code, activation_date, allow_send_email,authentication_type)
-  VALUES (5, 'Bart', 'Simpson', 'bart', 1237, CURDATE(), 1, 'D');
-
-INSERT INTO COLLABORATOR (id, email, creation_date) VALUES (6, 'lisa@wisemapping.org', CURDATE());
-INSERT INTO USER (colaborator_id, firstname, lastname, password, activation_code, activation_date, allow_send_email,authentication_type)
-  VALUES (6, 'Lisa', 'Simpson', 'lisa', 1237, CURDATE(), 1, 'D');
-
-
 COMMIT;
-SHUTDOWN;
+SHUTDOWN;

config/database/hsql/create-schemas.sql

@@ -37,7 +37,8 @@ CREATE TABLE LABEL (
   title           VARCHAR(30),
   creator_id      INTEGER            NOT NULL,
   parent_label_id INTEGER,
-  color           VARCHAR(7)         NOT NULL
+  color           VARCHAR(7)         NOT NULL,
+  iconName        VARCHAR(50)       NOT NULL
   --FOREIGN KEY (creator_id) REFERENCES USER (colaborator_id)
 );
 

config/database/mysql/apopulate-schemas.sql

@@ -10,20 +10,4 @@ INSERT INTO COLLABORATOR (id, email, creation_date) VALUES (2, 'admin@wisemappin
 INSERT INTO USER (colaborator_id, firstname, lastname, password, activation_code, activation_date, allow_send_email,authentication_type)
   VALUES (2, 'Admin', 'User', 'admin', 1237, CURRENT_DATE(), 1,'D');
 
-INSERT INTO COLLABORATOR (id, email, creation_date) VALUES (3, 'homer@wisemapping.org', CURRENT_DATE());
-INSERT INTO USER (colaborator_id, firstname, lastname, password, activation_code, activation_date, allow_send_email,authentication_type)
-  VALUES (3, 'Homer', 'Simpson', 'homer', 1237, CURRENT_DATE(), 1, 'D');
-
-INSERT INTO COLLABORATOR (id, email, creation_date) VALUES (4, 'marge@wisemapping.org', CURRENT_DATE());
-INSERT INTO USER (colaborator_id, firstname, lastname, password, activation_code, activation_date, allow_send_email,authentication_type)
-  VALUES (4, 'Marge', 'Bouvier', 'marge', 1237, CURRENT_DATE(), 1, 'D');
-
-INSERT INTO COLLABORATOR (id, email, creation_date) VALUES (5, 'bart@wisemapping.org', CURRENT_DATE());
-INSERT INTO USER (colaborator_id, firstname, lastname, password, activation_code, activation_date, allow_send_email,authentication_type)
-  VALUES (5, 'Bart', 'Simpson', 'bart', 1237, CURRENT_DATE(), 1, 'D');
-
-INSERT INTO COLLABORATOR (id, email, creation_date) VALUES (6, 'lisa@wisemapping.org', CURRENT_DATE());
-INSERT INTO USER (colaborator_id, firstname, lastname, password, activation_code, activation_date, allow_send_email,authentication_type)
-  VALUES (6, 'Lisa', 'Simpson', 'lisa', 1237, CURRENT_DATE(), 1, 'D');
-
 COMMIT;

config/database/mysql/create-schemas.sql

@@ -58,6 +58,7 @@ CREATE TABLE LABEL (
   creator_id      INTEGER            NOT NULL,
   parent_label_id INTEGER,
   color           VARCHAR(7)         NOT NULL,
+  iconName        VARCHAR(50)       NOT NULL,
   FOREIGN KEY (creator_id) REFERENCES USER (colaborator_id),
   FOREIGN KEY (parent_label_id) REFERENCES LABEL (id)
     ON DELETE CASCADE

config/database/mysql/v3.0.2-to-v3.0.3.sql

@@ -31,4 +31,7 @@ CREATE TABLE R_LABEL_MINDMAP (
 )
   CHARACTER SET utf8;
 
+ALTER TABLE `LABEL`
+    ADD COLUMN iconName VARCHAR(50) NOT NULL;
 
+UPDATE LABEL SET iconName = 'glyphicon glyphicon-tag';

core-js/pom.xml

@@ -9,8 +9,11 @@
         <groupId>org.wisemapping</groupId>
         <artifactId>wisemapping</artifactId>
         <relativePath>../pom.xml</relativePath>
-        <version>3.1-SNAPSHOT</version>
+        <version>5.0.0</version>
     </parent>
+    <scm>
+        <developerConnection>scm:git:git@bitbucket.org:wisemapping/wisemapping-open-source.git</developerConnection>
+    </scm>
 
     <build>
         <plugins>
@@ -32,6 +35,28 @@
                 </executions>
             </plugin>
 
+            <plugin>
+                <groupId>org.apache.maven.plugins</groupId>
+                <artifactId>maven-release-plugin</artifactId>
+                <version>2.5</version>
+            </plugin>
+            <plugin>
+                <groupId>com.github.searls</groupId>
+                <artifactId>jasmine-maven-plugin</artifactId>
+                <version>1.3.1.5</version>
+                <executions>
+                    <execution>
+                        <goals>
+                            <goal>test</goal>
+                        </goals>
+                    </execution>
+                </executions>
+                <configuration>
+                    <sourceIncludes>
+                        <include>Functions.js</include>
+                    </sourceIncludes>
+                </configuration>
+            </plugin>
             <plugin>
                 <groupId>net.alchim31.maven</groupId>
                 <artifactId>yuicompressor-maven-plugin</artifactId>
@@ -51,19 +76,9 @@
                                         <include>${basedir}/target/tmp/header-min.js</include>
                                         <include>${basedir}/target/tmp/Functions-min.js</include>
                                         <include>${basedir}/target/tmp/Utils-min.js</include>
-                                        <!-- @Todo:Review this -->
-                                        <include>
-                                            ${basedir}/../mindplot/src/main/javascript/libraries/moodialog/Overlay.js
-                                        </include>
-                                        <include>
-                                            ${basedir}/../mindplot/src/main/javascript/libraries/moodialog/MooDialog.js
-                                        </include>
-                                        <include>
-                                            ${basedir}/../mindplot/src/main/javascript/libraries/moodialog/MooDialog.Request.js
-                                        </include>
-                                        <include>
-                                            ${basedir}/../mindplot/src/main/javascript/libraries/moodialog/MooDialog.Fx.js
-                                        </include>
+                                        <include>${basedir}/../mindplot/src/main/javascript/Options.js</include>
+                                        <include>${basedir}/../mindplot/src/main/javascript/libraries/bootstrap/BootstrapDialog.js</include>
+                                        <include>${basedir}/../mindplot/src/main/javascript/libraries/bootstrap/BootstrapDialog.Request.js</include>
                                     </includes>
                                 </aggregation>
                             </aggregations>

core-js/src/main/javascript/Utils.js

@@ -1,5 +1,5 @@
 /*
- *    Copyright [2012] [wisemapping]
+ *    Copyright [2015] [wisemapping]
  *
  *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
  *   It is basically the Apache License, Version 2.0 (the "License") plus the

core-js/src/main/javascript/header.js

@@ -1,5 +1,5 @@
 /*
-*    Copyright [2012] [wisemapping]
+*    Copyright [2015] [wisemapping]
 *
 *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
 *   It is basically the Apache License, Version 2.0 (the "License") plus the

core-js/src/test/javascript/testSuite.js

@@ -0,0 +1,10 @@
+describe("Functions suite test", function() {
+    it("$defined() test spec", function() {
+        var testVariable = undefined;
+        expect($defined(testVariable)).toBe(false);
+        testVariable = 1;
+        expect($defined(testVariable)).toBe(true);
+        testVariable = null;
+        expect($defined(testVariable)).toBe(false);
+    });
+});

distribution/Dockerfile

@@ -0,0 +1,47 @@
+# Dockerizing WiseMapping: Dockerfile for building WiseMapping images
+# Based on ubuntu:latest, installs WiseMapping (http://ww.wisemapping.org)
+
+FROM       ubuntu:latest
+MAINTAINER Paulo Gustavo Veiga <pveiga@wisemapping.com>
+
+ENV DEBIAN_FRONTEND noninteractive
+ENV MYSQL_ROOT_PASSWORD password
+ENV WISE_VERSION 4.0.2
+
+# Install utilities
+RUN apt-get install -y zip
+
+# Prepare distribution
+COPY target/wisemapping-v${WISE_VERSION}.zip .
+RUN unzip wisemapping-v${WISE_VERSION}.zip
+
+# Install MySQL
+RUN echo mysql-server mysql-server/root_password password ${MYSQL_ROOT_PASSWORD} | debconf-set-selections;\
+    echo mysql-server mysql-server/root_password_again password ${MYSQL_ROOT_PASSWORD} | debconf-set-selections;\
+    apt-get install -y mysql-server
+
+RUN service mysql start && \
+    mysql -uroot -p${MYSQL_ROOT_PASSWORD} < /wisemapping-v${WISE_VERSION}/config/database/mysql/create-database.sql && \
+    mysql -uwisemapping -Dwisemapping -ppassword < /wisemapping-v${WISE_VERSION}/config/database/mysql/create-schemas.sql && \
+    mysql -uwisemapping -Dwisemapping -ppassword < /wisemapping-v${WISE_VERSION}/config/database/mysql/apopulate-schemas.sql
+
+# Install Java 8
+RUN apt-get install -y software-properties-common && \
+    add-apt-repository ppa:webupd8team/java && \
+    apt-get update
+
+RUN echo oracle-java8-installer shared/accepted-oracle-license-v1-1 select true | debconf-set-selections;\
+    echo oracle-java8-installer shared/accepted-oracle-license-v1-1 seen true | debconf-set-selections;\
+    sudo apt-get install -y oracle-java8-installer
+
+# Configure instance
+COPY docker-conf/app.properties wisemapping-v4.0.1/webapps/wisemapping/WEB-INF/app.properties
+
+# Clean up
+RUN apt-get clean
+RUN rm wisemapping-v${WISE_VERSION}.zip
+
+
+EXPOSE 8080
+
+CMD "sh" "-c" "service mysql start;cd wisemapping-v${WISE_VERSION};./start.sh"

distribution/docker-conf/app.properties

@@ -0,0 +1,160 @@
+##################################################################################
+# Database Configuration
+##################################################################################
+
+# MariaDB configuration properties
+database.url=jdbc:mariadb://localhost/wisemapping?useUnicode=yes&characterEncoding=UTF-8
+database.driver=org.mariadb.jdbc.Driver
+database.hibernate.dialect=org.hibernate.dialect.MariaDBDialect
+database.username=wisemapping
+database.password=mappingwise
+database.validation.enabled=true
+database.validation.query=SELECT 1
+
+# MySQL 5.X configuration properties
+#database.url=jdbc:mysql://localhost/wisemapping?useUnicode=yes&characterEncoding=UTF-8
+#database.driver=com.mysql.jdbc.Driver
+#database.hibernate.dialect=org.hibernate.dialect.MySQL5Dialect
+#database.username=wisemapping
+#database.password=password
+#database.validation.enabled=true
+#database.validation.query=SELECT 1
+
+
+## PostgreSQL  configuration properties
+#database.url=jdbc:mariadb://localhost:3306/wisemapping
+#database.driver=org.mariadb.jdbc.Driver
+#database.hibernate.dialect=org.hibernate.dialect.MariaDBDialect
+#database.username=wisemapping
+#database.password=password
+#database.validation.query=
+#database.validation.enabled=false
+
+
+# HSQL Configuration properties
+#database.url=jdbc:hsqldb:file:${database.base.url}/db/wisemapping
+#database.driver=org.hsqldb.jdbc.JDBCDriver
+#database.hibernate.dialect=org.hibernate.dialect.HSQLDialect
+#database.username=sa
+#database.password=
+#database.validation.enabled=false
+#database.validation.query=
+
+##################################################################################
+# Mail configuration. Must be configured to enable user registration confirmation.
+##################################################################################
+
+#------------------------
+# Plain SMTP Server Configuration
+#------------------------
+mail.smtp.port=25
+mail.smtp.host=localhost
+mail.username=root
+mail.password=
+mail.smtp.auth=false
+mail.smtp.starttls.enable=false
+mail.smtp.quitwait=false
+
+#------------------------
+# GMAIL SMTP Configuration
+#------------------------
+#mail.smtp.port=587
+#mail.smtp.host=smtp.gmail.com
+#mail.username=<gmail-user-account>
+#mail.password=<gmail-password>
+#mail.smtp.auth=true
+#mail.smtp.starttls.enable=true
+#mail.smtp.quitwait=false
+
+#------------------------
+# Emails configuration
+#------------------------
+
+# Required: "from" email account that will appear in the emails sent from the sender.
+mail.serverSendEmail=root@localhost
+
+# Optional: Support account that the users could use to contact you. This address will appear in emails and in some places in the site.
+mail.supportEmail=root@localhost
+
+# Optional: Unexpected errors will be reported to this address.
+mail.errorReporterEmail=
+
+##################################################################################
+# Users Registration  Configuration
+##################################################################################
+
+# Enable captcha confirmation
+google.recaptcha2.enabled = true
+
+# ReCaptcha is the default captcha. Public and private keys are required.
+# More Info: http://www.google.com/recaptcha .
+google.recaptcha2.siteKey = 6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI
+google.recaptcha2.secretKey =  6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe
+
+##################################################################################
+# Site configuration
+##################################################################################
+
+# Site administration user. This user will have special permissions for operations such as removing users, set password
+# etc.
+admin.user = admin@wisemapping.org
+
+# Base URL where WiseMapping is deployed. By default, It will be automatically inferred.
+# If you are planning to put wisemapping behind an Apache using an Apache Proxy setup, you must enable this property.
+#site.baseurl = http://example.com:8080/wisemapping
+
+
+# Site Homepage URL. This will be used as URL for homepage location.
+site.homepage = c/home
+
+##################################################################################
+# Google Analytics Settings
+##################################################################################
+google.analytics.enabled=false
+google.analytics.account=UA-XXXX
+
+##################################################################################
+# Google Ads enable
+##################################################################################
+google.ads.enabled=false
+
+#######################################################################################
+# Authentication Configuration Section
+#######################################################################################
+
+# Two type of security are supported:
+#   - db: User are stored in the database. Registration is required in advance.
+#   - ldap: Authentication takes place using a LDAP. In this case, security.ldap.* must be configured.
+security.type=db
+
+# LDAP Configuration properties.
+security.ldap.server=ldap://localhost:389
+
+# If anonymous password is required, change the wisemapping-security-ldap.xml removing the
+security.ldap.server.user=cn=pveiga,dc=wisemapping,dc=com
+security.ldap.server.password=password
+
+security.ldap.basedn=dc=wisemapping,dc=com
+
+
+# This will be concatenated as part of the DN. In this case, I will be "ou=people".
+# In case this need to be changed, modify the wisemapping-security-ldap.xml.
+security.ldap.subDn=ou=people
+
+# Attribute used as authentication login (Eg: in this case, the user email will be used)
+security.ldap.auth.attribute=mail
+
+security.ldap.lastName.attribute=sn
+security.ldap.firstName.attribute=givenName
+
+# Enable OpenId Authentication.
+security.openid.enabled=false
+
+# REST Documentation
+#
+# This properties are used for REST API Documentation( http://localhost:8080/wisemapping/doc/rest/index.html)
+# Change the URL for proper documentation console setup.
+documentation.services.basePath=http://localhost:8080/service
+documentation.services.version=3.0.1
+
+

distribution/package-bin.sh

@@ -8,7 +8,7 @@ BASE_DIR=`pwd`
 TARGET_DIR=$BASE_DIR/target
 JETTY_DIR=$TARGET_DIR/wisemapping-$WISE_VERSION
 WISE_WEBAPP_DIR=$JETTY_DIR/webapps/wisemapping
-JETTY_VERSION=8.1.14.v20131031
+JETTY_VERSION=8.1.16.v20140903
 JETTY_DIST_DIR=jetty-distribution-${JETTY_VERSION}
 JETTY_ZIP=${JETTY_DIST_DIR}.zip
 
@@ -53,6 +53,7 @@ cp $BASE_DIR/wisemapping.xml $JETTY_DIR/contexts/
 # Distribute scripts
 cp -r $BASE_DIR/../config/ $TARGET_DIR/wisemapping-$WISE_VERSION/config
 cp ./start.sh ${JETTY_DIR}/
+cp -r $BASE_DIR/service $TARGET_DIR/wisemapping-$WISE_VERSION/service
 
 # Store version
 echo $1 > $WISE_WEBAPP_DIR/version

distribution/service/wisemapping

@@ -0,0 +1,72 @@
+#!/bin/bash
+### BEGIN INIT INFO
+# Provides:          wisemapping
+# Required-Start:    $all
+# Required-Stop:
+# Default-Start:     2 3 4 5
+# Default-Stop:      0 1 6
+# Short-Description: wisemapping
+# Description:       www.wisemapping.com
+### END INIT INFO
+
+set -e
+set -u
+
+#environmental variables
+JAVA_HOME="/usr/lib/jvm/java7"
+JDK_HOME=$JAVA_HOME
+export PATH=$JAVA_HOME/bin:$PATH
+WISE_HOME="/opt/wisemapping"
+PID_FILE="$WISE_HOME/.pid"
+SELF=$(cd $(dirname $0); pwd -P)/$(basename $0)
+
+preInitChecks() {
+  MYSQL_STATUS=`pgrep mysql`
+  if [ -z $MYSQL_STATUS ]; then
+    service mysql start >/dev/null 2>&1
+  fi
+}
+
+wiseStatus() {
+  echo `pgrep -f "$WISE_HOME/start.jar"`
+}
+
+case "${1:-''}" in
+  'start')
+    #preInitChecks
+    cd $WISE_HOME
+    echo "Starting Wisemapping..."
+    java -Xmx256m -Dorg.apache.jasper.compiler.disablejsr199=true -jar $WISE_HOME/start.jar > $WISE_HOME/logs/start.log 2>&1 &
+    PID=$!
+    cd - >/dev/null 2>&1
+    echo "proccess id: $PID"
+    echo "$PID" > $PID_FILE
+	;;
+  'stop')
+    if [ ! -f $PID_FILE ]; then
+      PID=$(wiseStatus)
+    else 
+      PID=`cat $PID_FILE`
+      rm $PID_FILE >/dev/null 2>&1
+    fi
+    kill $PID
+    echo "Wisemapping stopped"
+	;;
+  'restart')
+	set +e; $SELF stop; set -e
+	$SELF start 
+	;;
+  'status')
+	STATUS=$(wiseStatus)
+        if [ -n "$STATUS" ]; then
+          echo "Wisemapping server is running, pid: $STATUS"
+        else
+          echo "Wisemapping is stopped"
+        fi
+        ;;
+
+  *)
+	echo "Usage: $SELF start|stop|restart|status"
+	exit 1
+	;;
+esac

mindplot/pom.xml

@@ -9,7 +9,7 @@
         <groupId>org.wisemapping</groupId>
         <artifactId>wisemapping</artifactId>
         <relativePath>../pom.xml</relativePath>
-        <version>3.1-SNAPSHOT</version>
+        <version>5.0.0</version>
     </parent>
 
     <dependencies>
@@ -50,28 +50,27 @@
                         <configuration>
                             <source>
                                 def outdir = new File(project.basedir, 'src/main/javascript');
-                                if (project.packaging != 'pom')
-                                {
-                                def dir = new File(project.basedir, 'src/main/resources/');
+                                if (project.packaging != 'pom') {
+                                    def dir = new File(project.basedir, 'src/main/resources/');
 
-                                dir.eachFile { file ->
-                                def matcher = file.name =~ /messages_(.+)\.properties/;
-                                def lang = matcher[0][1];
-                                def outfile = new File(outdir, "MessageBundle_${lang}.js");
-                                println "Converting ${file.name} to ${outfile.name}";
+                                    dir.eachFile { file ->
+                                        def matcher = file.name =~ /messages_(.+)\.properties/;
+                                        def lang = matcher[0][1];
+                                        def outfile = new File(outdir, "MessageBundle_${lang}.js");
+                                        println "Converting ${file.name} to ${outfile.name}";
 
-                                outfile.withWriter('UTF-8') { out ->
-                                out.writeLine "mindplot.Messages.BUNDLES['${lang.toLowerCase()}'] = { ";
-                                file.eachLine('UTF-8') { line ->
-                                if( line.trim()!="" &amp;&amp; line[0]!='#' ) {
-                                  matcher = line =~ /(.+)=(.+)/;
-                                  out.writeLine("'${matcher[0][1]}' : \"${matcher[0][2]}\",");
-                                }
-                                }
-                                out.writeLine("'DUMMY' : '' ");
-                                out.writeLine "};"
-                                }
-                                }
+                                        outfile.withWriter('UTF-8') { out ->
+                                            out.writeLine "mindplot.Messages.BUNDLES['${lang.toLowerCase()}'] = { ";
+                                            file.eachLine('UTF-8') { line ->
+                                                if (line.trim() != "" &amp;&amp; line[0] != '#') {
+                                                    matcher = line =~ /(.+)=(.+)/;
+                                                    out.writeLine("'${matcher[0][1]}' : \"${matcher[0][2]}\",");
+                                                }
+                                            }
+                                            out.writeLine("'DUMMY' : '' ");
+                                            out.writeLine "};"
+                                        }
+                                    }
                                 }
                             </source>
                         </configuration>
@@ -124,6 +123,8 @@
                                     <inputDir>${basedir}/target/compress</inputDir>
                                     <includes>
                                         <include>header.js</include>
+                                        <include>Events.js</include>
+                                        <include>Options.js</include>
                                         <include>${basedir}/../web2d/target/classes/web2d.svg-min.js</include>
                                         <include>Messages.js</include>
                                         <include>TopicEventDispatcher.js</include>
@@ -139,7 +140,9 @@
                                         <include>ScreenManager.js</include>
                                         <include>Workspace.js</include>
                                         <include>ShrinkConnector.js</include>
+                                        <include>Keyboard.js</include>
                                         <include>DesignerKeyboard.js</include>
+                                        <include>Keyboard.js</include>
                                         <include>TopicStyle.js</include>
                                         <include>NodeGraph.js</include>
                                         <include>Topic.js</include>
@@ -250,6 +253,175 @@
                     <skipTests>true</skipTests>
                 </configuration>
             </plugin>
+            <plugin>
+                <groupId>com.github.searls</groupId>
+                <artifactId>jasmine-maven-plugin</artifactId>
+                <version>1.3.1.5</version>
+                <!--<executions>-->
+                    <!--<execution>-->
+                        <!--<goals>-->
+                            <!--<goal>test</goal>-->
+                        <!--</goals>-->
+                    <!--</execution>-->
+                <!--</executions>-->
+                <dependencies>
+                    <dependency>
+                        <groupId>net.sourceforge.htmlunit</groupId>
+                        <artifactId>htmlunit</artifactId>
+                        <version>2.15</version>
+                    </dependency>
+                </dependencies>
+                <configuration>
+                    <webDriverClassName>org.openqa.selenium.phantomjs.PhantomJSDriver</webDriverClassName>
+                    <webDriverCapabilities>
+                        <capability>
+                            <name>phantomjs.binary.path</name>
+                            <value>${phantomjs.binary}</value>
+                        </capability>
+                    </webDriverCapabilities>
+                    <preloadSources>
+                        <source>libraries/mootools/mootools-core-1.4.5-full-nocompat-yc.js</source>
+                        <source>lib/jquery.js</source>
+                        <source>lib/core.js/</source>
+                        <source>lib/web2d.svg-min.js</source>
+                        <source>libraries/hotkeys/jquery.hotkeys.js</source>
+                        <source>libraries/underscorejs/underscore-min.js</source>
+                        <source>libraries/bootstrap/js/bootstrap.js</source>
+                    </preloadSources>
+                    <sourceIncludes>
+                        <include>header.js</include>
+                        <include>Events.js</include>
+                        <include>Messages.js</include>
+                        <include>TopicEventDispatcher.js</include>
+                        <include>model/IMindmap.js</include>
+                        <include>model/Mindmap.js</include>
+                        <include>model/INodeModel.js</include>
+                        <include>model/NodeModel.js</include>
+                        <include>model/RelationshipModel.js</include>
+                        <include>ActionDispatcher.js</include>
+                        <include>StandaloneActionDispatcher.js</include>
+                        <include>DesignerModel.js</include>
+                        <include>Designer.js</include>
+                        <include>ScreenManager.js</include>
+                        <include>Workspace.js</include>
+                        <include>ShrinkConnector.js</include>
+                        <include>Keyboard.js</include>
+                        <include>DesignerKeyboard.js</include>
+                        <include>Keyboard.js</include>
+                        <include>TopicStyle.js</include>
+                        <include>NodeGraph.js</include>
+                        <include>Topic.js</include>
+                        <include>CentralTopic.js</include>
+                        <include>MainTopic.js</include>
+                        <include>DragTopic.js</include>
+                        <include>DragManager.js</include>
+                        <include>DragPivot.js</include>
+                        <include>ConnectionLine.js</include>
+                        <include>Relationship.js</include>
+                        <include>DragConnector.js</include>
+                        <include>TextEditor.js</include>
+                        <include>MultilineTextEditor.js</include>
+                        <include>TextEditorFactory.js</include>
+                        <include>util/Shape.js</include>
+                        <include>util/FadeEffect.js</include>
+                        <include>persistence/ModelCodeName.js</include>
+                        <include>persistence/XMLSerializer_Pela.js</include>
+                        <include>persistence/XMLSerializer_Tango.js</include>
+                        <include>persistence/Pela2TangoMigrator.js</include>
+                        <include>persistence/XMLSerializer_Beta.js</include>
+                        <include>persistence/Beta2PelaMigrator.js</include>
+                        <include>persistence/XMLSerializerFactory.js</include>
+                        <include>PersistenceManager.js</include>
+                        <include>RestPersistenceManager.js</include>
+                        <include>LocalStorageManager.js</include>
+                        <include>EditorProperties.js</include>
+                        <include>IconGroup.js</include>
+                        <include>Icon.js</include>
+                        <include>LinkIcon.js</include>
+                        <include>NoteIcon.js</include>
+                        <include>ActionIcon.js</include>
+                        <include>ImageIcon.js</include>
+                        <include>model/FeatureModel.js</include>
+                        <include>model/IconModel.js</include>
+                        <include>model/LinkModel.js</include>
+                        <include>model/NoteModel.js</include>
+                        <include>Command.js</include>
+                        <include>DesignerActionRunner.js</include>
+                        <include>DesignerUndoManager.js</include>
+                        <include>ControlPoint.js</include>
+                        <include>EditorOptions.js</include>
+                        <include>RelationshipPivot.js</include>
+                        <include>TopicFeature.js</include>
+                        <include>commands/GenericFunctionCommand.js</include>
+                        <include>commands/DeleteCommand.js</include>
+                        <include>commands/DragTopicCommand.js</include>
+                        <include>commands/AddTopicCommand.js</include>
+                        <include>commands/ChangeFeatureToTopicCommand.js</include>
+                        <include>commands/RemoveFeatureFromTopicCommand.js</include>
+                        <include>commands/AddFeatureToTopicCommand.js</include>
+                        <include>commands/AddRelationshipCommand.js</include>
+                        <include>commands/MoveControlPointCommand.js</include>
+                        <include>widget/ModalDialogNotifier.js</include>
+                        <include>widget/ToolbarNotifier.js</include>
+                        <include>widget/ToolbarItem.js</include>
+                        <include>widget/ToolbarPaneItem.js</include>
+                        <include>widget/NoteEditor.js</include>
+                        <include>widget/LinkEditor.js</include>
+                        <include>widget/FloatingTip.js</include>
+                        <include>widget/LinkIconTooltip.js</include>
+                        <include>widget/KeyboardShortcutTooltip.js</include>
+                        <include>widget/ColorPalettePanel.js</include>
+                        <include>widget/ListToolbarPanel.js</include>
+                        <include>widget/FontFamilyPanel.js</include>
+                        <include>widget/FontSizePanel.js</include>
+                        <include>widget/TopicShapePanel.js</include>
+                        <include>widget/IconPanel.js</include>
+                        <include>widget/IMenu.js</include>
+                        <include>widget/Menu.js</include>
+                        <include>TopicFeature.js</include>
+                        <include>layout/EventBusDispatcher.js</include>
+                        <include>layout/ChangeEvent.js</include>
+                        <include>layout/LayoutManager.js</include>
+                        <include>layout/Node.js</include>
+                        <include>layout/RootedTreeSet.js</include>
+                        <include>layout/ChildrenSorterStrategy.js</include>
+                        <include>layout/AbstractBasicSorter.js</include>
+                        <include>layout/BalancedSorter.js</include>
+                        <include>layout/SymmetricSorter.js</include>
+                        <include>layout/GridSorter.js</include>
+                        <include>layout/OriginalLayout.js</include>
+                        <include>layout/EventBus.js</include>
+                        <include>MessageBundle_en.js</include>
+                        <include>MessageBundle_es.js</include>
+                        <include>MessageBundle_de.js</include>
+                        <include>MessageBundle_fr.js</include>
+                        <include>MessageBundle_pt_BR.js</include>
+                        <include>MessageBundle_zh_CN.js</include>
+                        <include>MessageBundle_zh_TW.js</include>
+                        <include>MessageBundle_ca.js</include>
+                        <include>footer.js</include>
+                    </sourceIncludes>
+                    <specExcludes>
+                        <exclude>static/test/*.js</exclude>
+                        <exclude>simpleTest.js</exclude>
+                    </specExcludes>
+                </configuration>
+            </plugin>
+            <plugin>
+                <groupId>com.github.klieber</groupId>
+                <artifactId>phantomjs-maven-plugin</artifactId>
+                <version>0.5</version>
+                <executions>
+                    <execution>
+                        <goals>
+                            <goal>install</goal>
+                        </goals>
+                    </execution>
+                </executions>
+                <configuration>
+                    <version>1.9.2</version>
+                </configuration>
+            </plugin>
         </plugins>
     </build>
 </project>

mindplot/src/main/javascript/ActionDispatcher.js

@@ -1,5 +1,5 @@
 /*
- *    Copyright [2012] [wisemapping]
+ *    Copyright [2015] [wisemapping]
  *
  *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
  *   It is basically the Apache License, Version 2.0 (the "License") plus the
@@ -18,7 +18,7 @@
 
 //noinspection JSUnusedLocalSymbols
 mindplot.ActionDispatcher = new Class({
-    Implements:[Events],
+    Implements:[mindplot.Events],
     initialize: function(commandContext) {
         $assert(commandContext, "commandContext can not be null");
     },

mindplot/src/main/javascript/ActionIcon.js

@@ -1,5 +1,5 @@
 /*
- *    Copyright [2012] [wisemapping]
+ *    Copyright [2015] [wisemapping]
  *
  *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
  *   It is basically the Apache License, Version 2.0 (the "License") plus the
@@ -36,7 +36,7 @@ mindplot.ActionIcon = new Class({
     },
 
     addToGroup:function(group) {
-        group.appendChild(this.getImage());
+        group.append(this.getImage());
     },
 
     setVisibility:function(visible) {

mindplot/src/main/javascript/CentralTopic.js

@@ -1,5 +1,5 @@
 /*
- *    Copyright [2012] [wisemapping]
+ *    Copyright [2015] [wisemapping]
  *
  *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
  *   It is basically the Apache License, Version 2.0 (the "License") plus the
@@ -16,9 +16,15 @@
  *   limitations under the License.
  */
 
-mindplot.CentralTopic = new Class({
+mindplot.CentralTopic = new Class(/** @lends CentralTopic*/{
 
     Extends:mindplot.Topic,
+    /**
+     * @extends mindplot.Topic
+     * @constructs
+     * @param model
+     * @param options
+     */
     initialize:function (model, options) {
         this.parent(model, options);
     },
@@ -32,15 +38,18 @@ mindplot.CentralTopic = new Class({
         });
     },
 
+    /** */
     workoutIncomingConnectionPoint:function () {
         return this.getPosition();
     },
 
+    /** */
     setCursor:function (type) {
         type = (type == 'move') ? 'default' : type;
         this.parent(type);
     },
 
+    /** */
     updateTopicShape:function () {
 
     },
@@ -52,15 +61,17 @@ mindplot.CentralTopic = new Class({
         this.setPosition(zeroPoint);
     },
 
+    /** */
     getShrinkConnector:function () {
         return null;
     },
 
+    /** */
     workoutOutgoingConnectionPoint:function (targetPosition) {
         $assert(targetPosition, 'targetPoint can not be null');
         var pos = this.getPosition();
         var isAtRight = mindplot.util.Shape.isAtRight(targetPosition, pos);
         var size = this.getSize();
-        return   mindplot.util.Shape.calculateRectConnectionPoint(pos, size, !isAtRight);
+        return mindplot.util.Shape.calculateRectConnectionPoint(pos, size, !isAtRight);
     }
 });

mindplot/src/main/javascript/Command.js

@@ -1,5 +1,5 @@
 /*
-*    Copyright [2012] [wisemapping]
+*    Copyright [2015] [wisemapping]
 *
 *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
 *   It is basically the Apache License, Version 2.0 (the "License") plus the
@@ -16,23 +16,37 @@
 *   limitations under the License.
 */
 
-mindplot.Command = new Class(
-{
+mindplot.Command = new Class(/** @lends mindplot.Command */{
+    /**
+     * @classdesc The command base class for handling do/undo mindmap operations
+     * @constructs
+     */
     initialize: function()
     {
         this._id = mindplot.Command._nextUUID();
     },
 
+    /** 
+     * @abstract
+     */
     execute: function(commandContext)
     {
         throw "execute must be implemented.";
     },
 
+    /** 
+     * Triggered by the undo button - reverses the executed command 
+     * @abstract
+     */
     undoExecute: function(commandContext)
     {
         throw "undo must be implemented.";
     },
 
+    /** 
+     * Returns the unique id of this command
+     * @returns {Number} command id
+     */
     getId:function()
     {
         return this._id;

mindplot/src/main/javascript/ConnectionLine.js

@@ -1,5 +1,5 @@
 /*
- *    Copyright [2012] [wisemapping]
+ *    Copyright [2015] [wisemapping]
  *
  *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
  *   It is basically the Apache License, Version 2.0 (the "License") plus the
@@ -145,7 +145,7 @@ mindplot.ConnectionLine = new Class({
     },
 
     addToWorkspace:function (workspace) {
-        workspace.appendChild(this._line2d);
+        workspace.append(this._line2d);
         this._line2d.moveToBack();
     },
 

mindplot/src/main/javascript/ControlPoint.js

@@ -1,5 +1,5 @@
 /*
- *    Copyright [2012] [wisemapping]
+ *    Copyright [2015] [wisemapping]
  *
  *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
  *   It is basically the Apache License, Version 2.0 (the "License") plus the
@@ -17,45 +17,53 @@
  */
 
 mindplot.ControlPoint = new Class({
-    initialize:function() {
-        var control1 = new web2d.Elipse({width:6, height:6, stroke:'1 solid #6589de',fillColor:'gray', visibility:false});
+    initialize: function () {
+        var control1 = new web2d.Elipse({
+            width: 6,
+            height: 6,
+            stroke: '1 solid #6589de',
+            fillColor: 'gray',
+            visibility: false
+        });
         control1.setCursor('pointer');
 
-        var control2 = new web2d.Elipse({width:6, height:6, stroke:'1 solid #6589de',fillColor:'gray', visibility:false});
+        var control2 = new web2d.Elipse({
+            width: 6,
+            height: 6,
+            stroke: '1 solid #6589de',
+            fillColor: 'gray',
+            visibility: false
+        });
         control2.setCursor('pointer');
 
-        this._controlPointsController = [control1,control2];
-        this._controlLines = [new web2d.Line({strokeColor:"#6589de", strokeWidth:1, opacity:0.3}),
-            new web2d.Line({strokeColor:"#6589de", strokeWidth:1, opacity:0.3})];
+        this._controlPointsController = [control1, control2];
+        this._controlLines = [new web2d.Line({strokeColor: "#6589de", strokeWidth: 1, opacity: 0.3}),
+            new web2d.Line({strokeColor: "#6589de", strokeWidth: 1, opacity: 0.3})];
 
         this._isBinded = false;
-        this._controlPointsController[0].addEvent('mousedown', function(event) {
-            (this._mouseDown.bind(this))(event, mindplot.ControlPoint.FROM);
-        }.bind(this));
-        this._controlPointsController[0].addEvent('click', function(event) {
-            (this._mouseClick.bind(this))(event);
-        }.bind(this));
-        this._controlPointsController[0].addEvent('dblclick', function(event) {
-            (this._mouseClick.bind(this))(event);
-        }.bind(this));
+        var me = this;
+        this._controlPointsController[0].addEvent('mousedown', function (event) {
+            (me._mouseDown)(event, mindplot.ControlPoint.FROM, me);
+        });
+        this._controlPointsController[0].addEvent('click', function (event) {
+            (me._mouseClick)(event);
+        });
+        this._controlPointsController[0].addEvent('dblclick', function (event) {
+            (me._mouseClick)(event);
+        });
 
-        this._controlPointsController[1].addEvent('mousedown', function(event) {
-            (this._mouseDown.bind(this))(event, mindplot.ControlPoint.TO);
-        }.bind(this));
-        this._controlPointsController[1].addEvent('click', function(event) {
-            (this._mouseClick.bind(this))(event);
-        }.bind(this));
-        this._controlPointsController[1].addEvent('dblclick', function(event) {
-            (this._mouseClick.bind(this))(event);
-        }.bind(this));
+        this._controlPointsController[1].addEvent('mousedown', function (event) {
+            (me._mouseDown)(event, mindplot.ControlPoint.TO, me);
+        });
+        this._controlPointsController[1].addEvent('click', function (event) {
+            (me._mouseClick)(event);
+        });
+        this._controlPointsController[1].addEvent('dblclick', function (event) {
+            (me._mouseClick)(event);
+        });
     },
 
-
-    setSide  : function(side) {
-        this._side = side;
-    },
-
-    setLine  : function(line) {
+    setLine: function (line) {
         if ($defined(this._line)) {
             this._removeLine();
         }
@@ -69,12 +77,12 @@ mindplot.ControlPoint = new Class({
         this._endPoint[1] = this._line.getLine().getTo().clone();
     },
 
-    redraw  : function() {
+    redraw: function () {
         if ($defined(this._line))
             this._createControlPoint();
     },
 
-    _createControlPoint  : function() {
+    _createControlPoint: function () {
         this._controls = this._line.getLine().getControlPoints();
         var pos = this._line.getLine().getFrom();
         this._controlPointsController[0].setPosition(this._controls[mindplot.ControlPoint.FROM].x + pos.x, this._controls[mindplot.ControlPoint.FROM].y + pos.y - 3);
@@ -87,42 +95,43 @@ mindplot.ControlPoint = new Class({
 
     },
 
-    _removeLine  : function() {
+    _removeLine: function () {
 
     },
 
-    _mouseDown  : function(event, point) {
+    _mouseDown: function (event, point, me) {
         if (!this._isBinded) {
             this._isBinded = true;
-
-            this._mouseMoveFunction = function(event) {
-                (this._mouseMoveEvent.bind(this))(event, point);
-            }.bind(this);
+            this._mouseMoveFunction = function (event) {
+                (me._mouseMoveEvent)(event, point, me);
+            };
 
             this._workspace.getScreenManager().addEvent('mousemove', this._mouseMoveFunction);
-            this._mouseUpFunction = function(event) {
-                (this._mouseUp.bind(this))(event, point);
-            }.bind(this);
+            this._mouseUpFunction = function (event) {
+                (me._mouseUp)(event, point, me);
+            };
             this._workspace.getScreenManager().addEvent('mouseup', this._mouseUpFunction);
         }
         event.preventDefault();
-        event.stop();
+        event.stopPropagation();
         return false;
     },
 
-    _mouseMoveEvent  : function(event, point) {
+    _mouseMoveEvent: function (event, point) {
         var screen = this._workspace.getScreenManager();
         var pos = screen.getWorkspaceMousePosition(event);
-        var topic = null;
+
+        var cords;
         if (point == 0) {
-            var cords = mindplot.util.Shape.calculateRelationShipPointCoordinates(this._line.getSourceTopic(), pos);
+            cords = mindplot.util.Shape.calculateRelationShipPointCoordinates(this._line.getSourceTopic(), pos);
             this._line.setFrom(cords.x, cords.y);
             this._line.setSrcControlPoint(new core.Point(pos.x - cords.x, pos.y - cords.y));
         } else {
-            var cords = mindplot.util.Shape.calculateRelationShipPointCoordinates(this._line.getTargetTopic(), pos);
+            cords = mindplot.util.Shape.calculateRelationShipPointCoordinates(this._line.getTargetTopic(), pos);
             this._line.setTo(cords.x, cords.y);
             this._line.setDestControlPoint(new core.Point(pos.x - cords.x, pos.y - cords.y));
         }
+
         this._controls[point].x = (pos.x - cords.x);
         this._controls[point].y = (pos.y - cords.y);
         this._controlPointsController[point].setPosition(pos.x - 5, pos.y - 3);
@@ -132,7 +141,7 @@ mindplot.ControlPoint = new Class({
 
     },
 
-    _mouseUp  : function(event, point) {
+    _mouseUp: function (event, point) {
         this._workspace.getScreenManager().removeEvent('mousemove', this._mouseMoveFunction);
         this._workspace.getScreenManager().removeEvent('mouseup', this._mouseUpFunction);
 
@@ -141,13 +150,13 @@ mindplot.ControlPoint = new Class({
         this._isBinded = false;
     },
 
-    _mouseClick  : function(event) {
+    _mouseClick: function (event) {
         event.preventDefault();
-        event.stop();
+        event.stopPropagation();
         return false;
     },
 
-    setVisibility  : function(visible) {
+    setVisibility: function (visible) {
         if (visible) {
             this._controlLines[0].moveToFront();
             this._controlLines[1].moveToFront();
@@ -160,15 +169,15 @@ mindplot.ControlPoint = new Class({
         this._controlLines[1].setVisibility(visible);
     },
 
-    addToWorkspace  : function(workspace) {
+    addToWorkspace: function (workspace) {
         this._workspace = workspace;
-        workspace.appendChild(this._controlPointsController[0]);
-        workspace.appendChild(this._controlPointsController[1]);
-        workspace.appendChild(this._controlLines[0]);
-        workspace.appendChild(this._controlLines[1]);
+        workspace.append(this._controlPointsController[0]);
+        workspace.append(this._controlPointsController[1]);
+        workspace.append(this._controlLines[0]);
+        workspace.append(this._controlLines[1]);
     },
 
-    removeFromWorkspace  : function(workspace) {
+    removeFromWorkspace: function (workspace) {
         this._workspace = null;
         workspace.removeChild(this._controlPointsController[0]);
         workspace.removeChild(this._controlPointsController[1]);
@@ -176,15 +185,15 @@ mindplot.ControlPoint = new Class({
         workspace.removeChild(this._controlLines[1]);
     },
 
-    getControlPoint  : function(index) {
+    getControlPoint: function (index) {
         return this._controls[index];
     },
 
-    getOriginalEndPoint  : function(index) {
+    getOriginalEndPoint: function (index) {
         return this._endPoint[index];
     },
 
-    getOriginalCtrlPoint  : function(index) {
+    getOriginalCtrlPoint: function (index) {
         return this._orignalCtrlPoint[index];
     }
 });

mindplot/src/main/javascript/Designer.js

@@ -1,5 +1,5 @@
 /*
- *    Copyright [2012] [wisemapping]
+ *    Copyright [2015] [wisemapping]
  *
  *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
  *   It is basically the Apache License, Version 2.0 (the "License") plus the
@@ -16,11 +16,18 @@
  *   limitations under the License.
  */
 
-mindplot.Designer = new Class({
-        Extends:Events,
-        initialize:function (options, divElement) {
+mindplot.Designer = new Class(/** @lends Designer */{
+        Extends: mindplot.Events,
+        /**
+         * @constructs
+         * @param {Object} options
+         * @param {HTMLElement} divElement
+         * @extends mindplot.Events
+         */
+        initialize: function (options, divElement) {
             $assert(options, "options must be defined");
             $assert(options.zoom, "zoom must be defined");
+            $assert(options.size, "size must be defined");
             $assert(divElement, "divElement must be defined");
 
             // Set up i18n location ...
@@ -29,15 +36,16 @@ mindplot.Designer = new Class({
             this._options = options;
 
             // Set full div elem render area ...
-            divElement.setStyles(options.size);
+            divElement.css(options.size);
 
             // Dispatcher manager ...
             var commandContext = new mindplot.CommandContext(this);
             this._actionDispatcher = new mindplot.StandaloneActionDispatcher(commandContext);
 
+            var me = this;
             this._actionDispatcher.addEvent("modelUpdate", function (event) {
-                this.fireEvent("modelUpdate", event);
-            }.bind(this));
+                me.fireEvent("modelUpdate", event);
+            });
 
             mindplot.ActionDispatcher.setInstance(this._actionDispatcher);
             this._model = new mindplot.DesignerModel(options);
@@ -71,48 +79,28 @@ mindplot.Designer = new Class({
         },
 
         /**
-         * Deactivates the keyboard events so you can enter text into forms
+         * @private
          */
-        deactivateKeyboard:function () {
-            mindplot.DesignerKeyboard.getInstance().deactivate();
-            this.deselectAll();
-        },
-
-        _registerWheelEvents:function () {
-            var workspace = this._workspace;
-            var screenManager = workspace.getScreenManager();
-
+        _registerWheelEvents: function () {
+            var zoomFactor = 1.006;
+            var me = this;
             // Zoom In and Zoom Out must active event
-            $(document).addEvent('mousewheel', function (event) {
-                // Change mousewheel handling so we let the default
-                //event happen if we are outside the container.
-                var coords = screenManager.getContainer().getCoordinates();
-                var isOutsideContainer = event.client.y < coords.top ||
-                    event.client.y > coords.bottom ||
-                    event.client.x < coords.left ||
-                    event.client.x > coords.right;
-
-                if (!isOutsideContainer) {
-                    if (event.wheel > 0) {
-                        this.zoomIn(1.05);
-                    }
-                    else {
-                        this.zoomOut(1.05);
-                    }
-                    event.preventDefault();
+            $(document).on('mousewheel', function (event) {
+                if (event.deltaY > 0) {
+                    me.zoomIn(zoomFactor);
+                } else {
+                    me.zoomOut(zoomFactor);
                 }
-            }.bind(this));
+                event.preventDefault();
+            });
         },
 
         /**
-         * Activates the keyboard events so you can enter text into forms
+         * @param {String} type the event type
+         * @param {Function} listener
+         * forwards to the TopicEventDispatcher or the parent Events class, depending on the type
          */
-        activateKeyboard:function () {
-            mindplot.DesignerKeyboard.getInstance().activate();
-        },
-
-
-        addEvent:function (type, listener) {
+        addEvent: function (type, listener) {
             if (type == mindplot.TopicEvent.EDIT || type == mindplot.TopicEvent.CLICK) {
                 var editor = mindplot.TopicEventDispatcher.getInstance();
                 editor.addEvent(type, listener);
@@ -121,37 +109,37 @@ mindplot.Designer = new Class({
             }
         },
 
-        _registerMouseEvents:function () {
+        /**
+         * @private
+         */
+        _registerMouseEvents: function () {
             var workspace = this._workspace;
             var screenManager = workspace.getScreenManager();
-
+            var me = this;
             // Initialize workspace event listeners.
             screenManager.addEvent('update', function () {
                 // Topic must be set to his original state. All editors must be closed.
-                var topics = this.getModel().getTopics();
-                topics.each(function (object) {
+                var topics = me.getModel().getTopics();
+                _.each(topics, function (object) {
                     object.closeEditors();
                 });
 
                 // Clean some selected nodes on event ..
-                if (this._cleanScreen)
-                    this._cleanScreen();
-
-            }.bind(this));
+                if (me._cleanScreen)
+                    me._cleanScreen();
+            });
 
             // Deselect on click ...
             screenManager.addEvent('click', function (event) {
-                this.onObjectFocusEvent(null, event);
-            }.bind(this));
+                me.onObjectFocusEvent(null, event);
+            });
 
             // Create nodes on double click...
             screenManager.addEvent('dblclick', function (event) {
                 if (workspace.isWorkspaceEventsEnabled()) {
-
                     var mousePos = screenManager.getWorkspaceMousePosition(event);
-
-                    var centralTopic = this.getModel().getCentralTopic();
-                    var model = this._createChildModel(centralTopic, mousePos);
+                    var centralTopic = me.getModel().getCentralTopic();
+                    var model = me._createChildModel(centralTopic, mousePos);
                     this._actionDispatcher.addTopics([model], [centralTopic.getId()]);
                 }
             }.bind(this));
@@ -161,47 +149,15 @@ mindplot.Designer = new Class({
                 evt.stopPropagation();
                 evt.preventDefault();
             }
-
-            // Enable drag events ...
-            // @Todo: Images support on progress ...
-//            Element.NativeEvents.dragenter = 2;
-//            Element.NativeEvents.dragexit = 2;
-//            Element.NativeEvents.dragover = 2;
-//            Element.NativeEvents.drop = 2;
-//
-//            screenManager.addEvent('dragenter', noopHandler);
-//            screenManager.addEvent('dragexit', noopHandler);
-//            screenManager.addEvent('dragover', noopHandler);
-//            screenManager.addEvent('drop', function (evt) {
-//                evt.stopPropagation();
-//                evt.preventDefault();
-////
-//                var files = evt.event.dataTransfer.files;
-//                console.log(event);
-//
-//                var count = files.length;
-//
-//                // Only call the handler if 1 or more files was dropped.
-//                if (count > 0) {
-//
-//                    var model = this.getMindmap().createNode();
-//                    model.setImageSize(80, 43);
-//                    model.setMetadata("{'media':'video,'url':'http://www.youtube.com/watch?v=P3FrXftyuzw&feature=g-vrec&context=G2b4ab69RVAAAAAAAAAA'}");
-//                    model.setImageUrl("images/logo-small.png");
-//                    model.setShapeType(mindplot.model.TopicShape.IMAGE);
-//
-//                    var position = screenManager.getWorkspaceMousePosition(evt);
-//                    model.setPosition(position.x, position.y);
-//                    model.setPosition(100, 100);
-//
-//                    this._actionDispatcher.addTopics([model]);
-//                }
-//            }.bind(this));
-
-
         },
 
-        _buildDragManager:function (workspace) {
+        /**
+         * @private
+         * @param {mindplot.Workspace} workspace
+         * @return {mindplot.DragManager} the new dragManager for the workspace with events
+         * registered
+         */
+        _buildDragManager: function (workspace) {
 
             var designerModel = this.getModel();
             var dragConnector = new mindplot.DragConnector(designerModel, this._workspace);
@@ -237,24 +193,35 @@ mindplot.Designer = new Class({
             return dragManager;
         },
 
-        setViewPort:function (size) {
+        /**
+         * @param {{width:Number, height:Number}} size
+         * sets width and height of the workspace
+         */
+        setViewPort: function (size) {
             this._workspace.setViewPort(size);
             var model = this.getModel();
             this._workspace.setZoom(model.getZoom(), true);
         },
 
-
-        _buildNodeGraph:function (model, readOnly) {
+        /**
+         * @private
+         * @param {mindplot.model.NodeModel} model
+         * @param {Boolean} readOnly
+         * @return {mindplot.CentralTopic|mindplot.MainTopic} the topic to the given model,
+         * connected, added to the drag manager, with events registered - complying type & read mode
+         */
+        _buildNodeGraph: function (model, readOnly) {
+            
             // Create node graph ...
-            var topic = mindplot.NodeGraph.create(model, {readOnly:readOnly});
+            var topic = mindplot.NodeGraph.create(model, {readOnly: readOnly});
             this.getModel().addTopic(topic);
-
+            var me = this;
             // Add Topic events ...
             if (!readOnly) {
                 // If a node had gained focus, clean the rest of the nodes ...
                 topic.addEvent('mousedown', function (event) {
-                    this.onObjectFocusEvent(topic, event);
-                }.bind(this));
+                    me.onObjectFocusEvent(topic, event);
+                });
 
                 // Register node listeners ...
                 if (topic.getType() != mindplot.model.INodeModel.CENTRAL_TOPIC_TYPE) {
@@ -286,38 +253,44 @@ mindplot.Designer = new Class({
             }
 
             topic.addEvent('ontblur', function () {
-                var topics = this.getModel().filterSelectedTopics();
-                var rels = this.getModel().filterSelectedRelationships();
+                var topics = me.getModel().filterSelectedTopics();
+                var rels = me.getModel().filterSelectedRelationships();
 
                 if (topics.length == 0 || rels.length == 0) {
-                    this.fireEvent('onblur');
+                    me.fireEvent('onblur');
                 }
-            }.bind(this));
+            });
 
             topic.addEvent('ontfocus', function () {
-                var topics = this.getModel().filterSelectedTopics();
-                var rels = this.getModel().filterSelectedRelationships();
+                var topics = me.getModel().filterSelectedTopics();
+                var rels = me.getModel().filterSelectedRelationships();
 
                 if (topics.length == 1 || rels.length == 1) {
-                    this.fireEvent('onfocus');
+                    me.fireEvent('onfocus');
                 }
-            }.bind(this));
+            });
 
-            return  topic;
+            return topic;
         },
 
-        onObjectFocusEvent:function (currentObject, event) {
+        /**
+         * @param {?mindplot.Topic} currentObject
+         * @param {Event=} event
+         * sets focus to the given currentObject and removes it from any other objects if not
+         * triggered with Ctrl pressed
+         */
+        onObjectFocusEvent: function (currentObject, event) {
             // Close node editors ..
             var topics = this.getModel().getTopics();
-            topics.each(function (topic) {
+            _.each(topics, function (topic) {
                 topic.closeEditors();
             });
 
             var model = this.getModel();
             var objects = model.getEntities();
-            objects.each(function (object) {
+            _.each(objects, function (object) {
                 // Disable all nodes on focus but not the current if Ctrl key isn't being pressed
-                if (!$defined(event) || (!event.control && !event.meta)) {
+                if (!$defined(event) || (!event.ctrlKey && !event.metaKey)) {
                     if (object.isOnFocus() && object != currentObject) {
                         object.setOnFocus(false);
                     }
@@ -326,26 +299,28 @@ mindplot.Designer = new Class({
 
         },
 
-        selectAll:function () {
+        /** sets focus to all model entities, i.e. relationships and topics */
+        selectAll: function () {
             var model = this.getModel();
             var objects = model.getEntities();
-            objects.each(function (object) {
+            _.each(objects, function (object) {
                 object.setOnFocus(true);
             });
         },
 
-        deselectAll:function () {
+        /** removes focus from all model entities, i.e. relationships and topics */
+        deselectAll: function () {
             var objects = this.getModel().getEntities();
-            objects.each(function (object) {
+            _.each(objects, function (object) {
                 object.setOnFocus(false);
             });
         },
 
         /**
-         * Set the zoom of the map.
-         * @param: zoom: number between 0.3 and 1.9
+         * Set the zoom of the map
+         * @param {Number} zoom number between 0.3 and 1.9
          */
-        setZoom:function (zoom) {
+        setZoom: function (zoom) {
             if (zoom > 1.9 || zoom < 0.3) {
                 $notify($msg('ZOOM_IN_ERROR'));
                 return;
@@ -354,7 +329,11 @@ mindplot.Designer = new Class({
             this._workspace.setZoom(zoom);
         },
 
-        zoomOut:function (factor) {
+        /**
+         * @param {Number=} factor
+         * zoom out by the given factor, or 1.2, if undefined
+         */
+        zoomOut: function (factor) {
             if (!factor)
                 factor = 1.2;
 
@@ -370,7 +349,11 @@ mindplot.Designer = new Class({
 
         },
 
-        zoomIn:function (factor) {
+        /**
+         * @param {Number=} factor
+         * zoom in by the given factor, or 1.2, if undefined
+         */
+        zoomIn: function (factor) {
             if (!factor)
                 factor = 1.2;
 
@@ -386,7 +369,8 @@ mindplot.Designer = new Class({
             }
         },
 
-        copyToClipboard:function () {
+        /** copy selected topics to a private clipboard */
+        copyToClipboard: function () {
             var topics = this.getModel().filterSelectedTopics();
             if (topics.length <= 0) {
                 // If there are more than one node selected,
@@ -412,7 +396,8 @@ mindplot.Designer = new Class({
             $notify($msg('SELECTION_COPIED_TO_CLIPBOARD'));
         },
 
-        pasteClipboard:function () {
+        /** paste clipboard contents to the mindmap */
+        pasteClipboard: function () {
             if (this._clipboard.length == 0) {
                 $notify($msg('CLIPBOARD_IS_EMPTY'));
                 return;
@@ -421,12 +406,13 @@ mindplot.Designer = new Class({
             this._clipboard = [];
         },
 
-        getModel:function () {
+        /** @return {mindplot.DesignerModel} model */
+        getModel: function () {
             return this._model;
         },
 
-
-        shrinkSelectedBranch:function () {
+        /** collapse the subtree of the selected topic */
+        shrinkSelectedBranch: function () {
             var nodes = this.getModel().filterSelectedTopics();
             if (nodes.length <= 0 || nodes.length != 1) {
                 // If there are more than one node selected,
@@ -441,7 +427,8 @@ mindplot.Designer = new Class({
             }
         },
 
-        createChildForSelectedNode:function () {
+        /** create a NodeModel for the selected node's child and add it via the ActionDispatcher */
+        createChildForSelectedNode: function () {
             var nodes = this.getModel().filterSelectedTopics();
             if (nodes.length <= 0) {
                 // If there are more than one node selected,
@@ -466,49 +453,62 @@ mindplot.Designer = new Class({
 
         },
 
-        _copyNodeProps: function(sourceModel,targetModel){
+        /**
+         * @private
+         */
+        _copyNodeProps: function (sourceModel, targetModel) {
 
             // I don't copy the font size if the target is the source is the central topic.
-            if(sourceModel.getType() != mindplot.model.INodeModel.CENTRAL_TOPIC_TYPE)
-            {
+            if (sourceModel.getType() != mindplot.model.INodeModel.CENTRAL_TOPIC_TYPE) {
                 var fontSize = sourceModel.getFontSize();
-                if(fontSize){
+                if (fontSize) {
                     targetModel.setFontSize(fontSize)
                 }
             }
 
             var fontFamily = sourceModel.getFontFamily();
-            if(fontFamily){
+            if (fontFamily) {
                 targetModel.setFontFamily(fontFamily)
             }
 
             var fontColor = sourceModel.getFontColor();
-            if(fontColor){
+            if (fontColor) {
                 targetModel.setFontColor(fontColor)
             }
 
             var fontWeight = sourceModel.getFontWeight();
-            if(fontWeight){
+            if (fontWeight) {
                 targetModel.setFontWeight(fontWeight)
             }
 
             var fontStyle = sourceModel.getFontStyle();
-            if(fontStyle){
+            if (fontStyle) {
                 targetModel.setFontStyle(fontStyle)
             }
 
             var shape = sourceModel.getShapeType();
-            if(shape){
+            if (shape) {
                 targetModel.setShapeType(shape)
             }
 
             var borderColor = sourceModel.getBorderColor();
-            if(borderColor){
+            if (borderColor) {
                 targetModel.setBorderColor(borderColor)
             }
+
+            var backgroundColor = sourceModel.getBackgroundColor();
+            if (backgroundColor) {
+                targetModel.setBackgroundColor(backgroundColor)
+            }
         },
 
-        _createChildModel:function (topic, mousePos) {
+        /**
+         * @private
+         * @param {mindplot.Topic} topic the parent topic of the child to create the NodeModel for
+         * @param {core.Point} mousePos the mouse position
+         * @return {mindplot.NodeModel} the node model for the new child
+         */
+        _createChildModel: function (topic, mousePos) {
             // Create a new node ...
             var parentModel = topic.getModel();
             var mindmap = parentModel.getMindmap();
@@ -522,12 +522,17 @@ mindplot.Designer = new Class({
             var position = result.position;
             childModel.setPosition(position.x, position.y);
 
-            this._copyNodeProps(parentModel,childModel);
+            this._copyNodeProps(parentModel, childModel);
 
             return childModel;
         },
 
-        addDraggedNode:function (event, model) {
+        /**
+         * @param {Events} event
+         * @param {mindplot.model.NodeModel} model
+         * @todo not used
+         */
+        addDraggedNode: function (event, model) {
             $assert(event, "event can not be null");
             $assert(model, "model can not be null");
 
@@ -541,7 +546,11 @@ mindplot.Designer = new Class({
             topic.fireEvent("mousedown", event);
         },
 
-        createSiblingForSelectedNode:function () {
+        /**
+         * creates a sibling or child node of the selected node, if the selected node is the
+         * central topic
+         */
+        createSiblingForSelectedNode: function () {
             var nodes = this.getModel().filterSelectedTopics();
             if (nodes.length <= 0) {
                 // If there are no nodes selected,
@@ -575,7 +584,12 @@ mindplot.Designer = new Class({
             }
         },
 
-        _createSiblingModel:function (topic) {
+        /**
+         * @private
+         * @param {mindplot.Topic} topic the topic to create the sibling to
+         * @return {mindplot.NodeModel} the node model of the sibling
+         */
+        _createSiblingModel: function (topic) {
             var result = null;
             var parentTopic = topic.getOutgoingConnectedTopic();
             if (parentTopic != null) {
@@ -591,12 +605,15 @@ mindplot.Designer = new Class({
                 result.setPosition(10, 10);  // Set a dummy position ...
             }
 
-            this._copyNodeProps(model,result);
+            this._copyNodeProps(model, result);
 
             return result;
         },
 
-        showRelPivot:function (event) {
+        /**
+         * @param {Event} event
+         */
+        showRelPivot: function (event) {
 
             var nodes = this.getModel().filterSelectedTopics();
             if (nodes.length <= 0) {
@@ -613,23 +630,30 @@ mindplot.Designer = new Class({
             this._relPivot.start(nodes[0], pos);
         },
 
-        getMindmapProperties:function () {
-            return   {zoom:this.getModel().getZoom()};
+        /** @return {{zoom:Number}} the zoom */
+        getMindmapProperties: function () {
+            var model = this.getModel();
+            return {zoom: model.getZoom()};
         },
 
-        loadMap:function (mindmapModel) {
+        /**
+         * @param {mindplot.Mindmap} mindmapModel
+         * @throws will throw an error if mindmapModel is null or undefined
+         */
+        loadMap: function (mindmapModel) {
             $assert(mindmapModel, "mindmapModel can not be null");
             this._mindmap = mindmapModel;
 
             // Init layout manager ...
-            var size = {width:25, height:25};
+            var size = {width: 25, height: 25};
             var layoutManager = new mindplot.layout.LayoutManager(mindmapModel.getCentralTopic().getId(), size);
+            var me = this;
             layoutManager.addEvent('change', function (event) {
                 var id = event.getId();
-                var topic = this.getModel().findTopicById(id);
+                var topic = me.getModel().findTopicById(id);
                 topic.setPosition(event.getPosition());
                 topic.setOrder(event.getOrder());
-            }.bind(this));
+            });
             this._eventBussDispatcher.setLayoutManager(layoutManager);
 
 
@@ -638,7 +662,7 @@ mindplot.Designer = new Class({
             for (var i = 0; i < branches.length; i++) {
                 // NodeModel -> NodeGraph ...
                 var nodeModel = branches[i];
-                var nodeGraph = this._nodeModelToNodeGraph(nodeModel);
+                var nodeGraph = this.nodeModelToNodeGraph(nodeModel);
 
                 // Update shrink render state...
                 nodeGraph.setBranchVisibility(true);
@@ -659,24 +683,32 @@ mindplot.Designer = new Class({
             this.fireEvent('loadSuccess');
         },
 
-        getMindmap:function () {
+        /** */
+        getMindmap: function () {
             return this._mindmap;
         },
 
-        undo:function () {
+        /** */
+        undo: function () {
             // @Todo: This is a hack...
             this._actionDispatcher._actionRunner.undo();
         },
 
-        redo:function () {
+        /** */
+        redo: function () {
             this._actionDispatcher._actionRunner.redo();
         },
 
-        isReadOnly:function () {
+        /** */
+        isReadOnly: function () {
             return this._options.readOnly;
         },
 
-        _nodeModelToNodeGraph:function (nodeModel) {
+        /**
+         * @param {mindplot.model.NodeModel} nodeModel
+         * @return {mindplot.Topic} the topic (extends mindplot.NodeGraph) created to the model
+         */
+        nodeModelToNodeGraph: function (nodeModel) {
             $assert(nodeModel, "Node model can not be null");
             var children = nodeModel.getChildren().slice();
             children = children.sort(function (a, b) {
@@ -686,17 +718,23 @@ mindplot.Designer = new Class({
             var nodeGraph = this._buildNodeGraph(nodeModel, this.isReadOnly());
             nodeGraph.setVisibility(false);
 
-            this._workspace.appendChild(nodeGraph);
+            this._workspace.append(nodeGraph);
             for (var i = 0; i < children.length; i++) {
                 var child = children[i];
                 if ($defined(child))
-                    this._nodeModelToNodeGraph(child);
+                    this.nodeModelToNodeGraph(child);
             }
 
             return nodeGraph;
         },
 
-        _relationshipModelToRelationship:function (model) {
+        /**
+         * @private
+         * @param {mindplot.model.RelationshipModel} model
+         * @return {mindplot.Relationship} the relationship created to the model
+         * @throws will throw an error if model is null or undefined
+         */
+        _relationshipModelToRelationship: function (model) {
             $assert(model, "Node model can not be null");
 
             var result = this._buildRelationshipShape(model);
@@ -709,17 +747,25 @@ mindplot.Designer = new Class({
 
             result.setVisibility(sourceTopic.isVisible() && targetTopic.isVisible());
 
-            this._workspace.appendChild(result);
+            this._workspace.append(result);
             return result;
         },
 
-        _addRelationship:function (model) {
+        /**
+         * @param {mindplot.model.RelationshipModel} model
+         * @return {mindplot.Relationship} the relationship added to the mindmap
+         */
+        addRelationship: function (model) {
             var mindmap = this.getMindmap();
             mindmap.addRelationship(model);
             return this._relationshipModelToRelationship(model);
         },
 
-        _deleteRelationship:function (rel) {
+        /**
+         * deletes the relationship from the linked topics, DesignerModel, Workspace and Mindmap
+         * @param {mindplot.Relationship} rel the relationship to delete
+         */
+        deleteRelationship: function (rel) {
             var sourceTopic = rel.getSourceTopic();
             sourceTopic.deleteRelationship(rel);
 
@@ -733,7 +779,13 @@ mindplot.Designer = new Class({
             mindmap.deleteRelationship(rel.getModel());
         },
 
-        _buildRelationshipShape:function (model) {
+        /**
+         * @private
+         * @param {mindplot.model.RelationshipModel} model
+         * @return {mindplot.Relationship} the new relationship with events registered
+         * @throws will throw an error if the target topic cannot be found
+         */
+        _buildRelationshipShape: function (model) {
             var dmodel = this.getModel();
 
             var sourceTopicId = model.getFromNode();
@@ -747,40 +799,44 @@ mindplot.Designer = new Class({
 
             // Build relationship line ....
             var result = new mindplot.Relationship(sourceTopic, targetTopic, model);
+            var me = this;
 
             result.addEvent('ontblur', function () {
-                var topics = this.getModel().filterSelectedTopics();
-                var rels = this.getModel().filterSelectedRelationships();
+                var topics = me.getModel().filterSelectedTopics();
+                var rels = me.getModel().filterSelectedRelationships();
 
                 if (topics.length == 0 || rels.length == 0) {
-                    this.fireEvent('onblur');
+                    me.fireEvent('onblur');
                 }
-            }.bind(this));
+            });
 
             result.addEvent('ontfocus', function () {
-                var topics = this.getModel().filterSelectedTopics();
-                var rels = this.getModel().filterSelectedRelationships();
+                var topics = me.getModel().filterSelectedTopics();
+                var rels = me.getModel().filterSelectedRelationships();
 
                 if (topics.length == 1 || rels.length == 1) {
-                    this.fireEvent('onfocus');
+                    me.fireEvent('onfocus');
                 }
-            }.bind(this));
+            });
 
             // Append it to the workspace ...
             dmodel.addRelationship(result);
 
-
-            return  result;
+            return result;
         },
 
-        _removeTopic:function (node) {
+        /**
+         * @param {mindplot.Topic} node the topic to remove
+         * removes the given topic and its children from Workspace, DesignerModel and NodeModel
+         */
+        removeTopic: function (node) {
             if (!node.isCentralTopic()) {
                 var parent = node._parent;
                 node.disconnect(this._workspace);
 
                 //remove children
                 while (node.getChildren().length > 0) {
-                    this._removeTopic(node.getChildren()[0]);
+                    this.removeTopic(node.getChildren()[0]);
                 }
 
                 this._workspace.removeChild(node);
@@ -796,14 +852,18 @@ mindplot.Designer = new Class({
             }
         },
 
-        _resetEdition:function () {
+        /**
+         * @private
+         */
+        _resetEdition: function () {
             var screenManager = this._workspace.getScreenManager();
             screenManager.fireEvent("update");
             screenManager.fireEvent("mouseup");
             this._relPivot.dispose();
         },
 
-        deleteSelectedEntities:function () {
+        /** */
+        deleteSelectedEntities: function () {
             // Is there some action in progress ?.
             this._resetEdition();
 
@@ -822,8 +882,8 @@ mindplot.Designer = new Class({
             var topicIds = topics.filter(function (topic) {
                 return !topic.isCentralTopic();
             }).map(function (topic) {
-                    return topic.getId()
-                });
+                return topic.getId()
+            });
 
 
             var relIds = relation.map(function (rel) {
@@ -837,7 +897,8 @@ mindplot.Designer = new Class({
 
         },
 
-        changeFontFamily:function (font) {
+        /** */
+        changeFontFamily: function (font) {
             var topicsIds = this.getModel().filterTopicsIds();
             if (topicsIds.length > 0) {
                 this._actionDispatcher.changeFontFamilyToTopic(topicsIds, font);
@@ -845,14 +906,16 @@ mindplot.Designer = new Class({
             }
         },
 
-        changeFontStyle:function () {
+        /** */
+        changeFontStyle: function () {
             var topicsIds = this.getModel().filterTopicsIds();
             if (topicsIds.length > 0) {
                 this._actionDispatcher.changeFontStyleToTopic(topicsIds);
             }
         },
 
-        changeFontColor:function (color) {
+        /** */
+        changeFontColor: function (color) {
             $assert(color, "color can not be null");
 
             var topicsIds = this.getModel().filterTopicsIds();
@@ -861,7 +924,8 @@ mindplot.Designer = new Class({
             }
         },
 
-        changeBackgroundColor:function (color) {
+        /** */
+        changeBackgroundColor: function (color) {
 
             var validateFunc = function (topic) {
                 return topic.getShapeType() != mindplot.model.TopicShape.LINE;
@@ -874,7 +938,8 @@ mindplot.Designer = new Class({
             }
         },
 
-        changeBorderColor:function (color) {
+        /** */
+        changeBorderColor: function (color) {
             var validateFunc = function (topic) {
                 return topic.getShapeType() != mindplot.model.TopicShape.LINE;
             };
@@ -885,14 +950,16 @@ mindplot.Designer = new Class({
             }
         },
 
-        changeFontSize:function (size) {
+        /** */
+        changeFontSize: function (size) {
             var topicsIds = this.getModel().filterTopicsIds();
             if (topicsIds.length > 0) {
                 this._actionDispatcher.changeFontSizeToTopic(topicsIds, size);
             }
         },
 
-        changeTopicShape:function (shape) {
+        /** */
+        changeTopicShape: function (shape) {
             var validateFunc = function (topic) {
                 return !(topic.getType() == mindplot.model.INodeModel.CENTRAL_TOPIC_TYPE && shape == mindplot.model.TopicShape.LINE)
             };
@@ -904,42 +971,56 @@ mindplot.Designer = new Class({
             }
         },
 
-        changeFontWeight:function () {
+        /** */
+        changeFontWeight: function () {
             var topicsIds = this.getModel().filterTopicsIds();
             if (topicsIds.length > 0) {
                 this._actionDispatcher.changeFontWeightToTopic(topicsIds);
             }
         },
 
-        addIconType:function (iconType) {
+        /** */
+        addIconType: function (iconType) {
             var topicsIds = this.getModel().filterTopicsIds();
             if (topicsIds.length > 0) {
-                this._actionDispatcher.addFeatureToTopic(topicsIds[0], mindplot.TopicFeature.Icon.id, {id:iconType});
+                this._actionDispatcher.addFeatureToTopic(topicsIds[0], mindplot.TopicFeature.Icon.id, {id: iconType});
             }
         },
 
-        addLink:function () {
+        /**
+         * lets the selected topic open the link editor where the user can define or modify an
+         * existing link
+         */
+        addLink: function () {
             var model = this.getModel();
             var topic = model.selectedTopic();
             if (topic) {
                 topic.showLinkEditor();
+                this.onObjectFocusEvent();
             }
         },
 
-        addNote:function () {
+        /** */
+        addNote: function () {
             var model = this.getModel();
             var topic = model.selectedTopic();
             if (topic) {
                 topic.showNoteEditor();
+                this.onObjectFocusEvent();
             }
         },
 
-        goToNode:function (node) {
+        /**
+         * @param {mindplot.Topic} node
+         * sets the focus to the given node
+         */
+        goToNode: function (node) {
             node.setOnFocus(true);
             this.onObjectFocusEvent(node);
         },
 
-        getWorkSpace:function () {
+        /** @return {mindplot.Workspace} */
+        getWorkSpace: function () {
             return this._workspace;
         }
     }

mindplot/src/main/javascript/DesignerActionRunner.js

@@ -1,5 +1,5 @@
 /*
- *    Copyright [2012] [wisemapping]
+ *    Copyright [2015] [wisemapping]
  *
  *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
  *   It is basically the Apache License, Version 2.0 (the "License") plus the
@@ -17,7 +17,7 @@
  */
 
 mindplot.DesignerActionRunner = new Class({
-    initialize:function (commandContext, notifier) {
+    initialize: function (commandContext, notifier) {
         $assert(commandContext, "commandContext can not be null");
 
         this._undoManager = new mindplot.DesignerUndoManager();
@@ -25,7 +25,7 @@ mindplot.DesignerActionRunner = new Class({
         this._notifier = notifier;
     },
 
-    execute:function (command) {
+    execute: function (command) {
         $assert(command, "command can not be null");
         command.execute(this._context);
         this._undoManager.enqueue(command);
@@ -34,20 +34,20 @@ mindplot.DesignerActionRunner = new Class({
 
     },
 
-    undo:function () {
+    undo: function () {
         this._undoManager.execUndo(this._context);
         this.fireChangeEvent();
         mindplot.EventBus.instance.fireEvent(mindplot.EventBus.events.DoLayout);
     },
 
-    redo:function () {
+    redo: function () {
         this._undoManager.execRedo(this._context);
         this.fireChangeEvent();
         mindplot.EventBus.instance.fireEvent(mindplot.EventBus.events.DoLayout);
 
     },
 
-    fireChangeEvent:function () {
+    fireChangeEvent: function () {
         var event = this._undoManager.buildEvent();
         this._notifier.fireEvent("modelUpdate", event);
     }

mindplot/src/main/javascript/DesignerKeyboard.js

@@ -1,5 +1,5 @@
 /*
- *    Copyright [2012] [wisemapping]
+ *    Copyright [2015] [wisemapping]
  *
  *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
  *   It is basically the Apache License, Version 2.0 (the "License") plus the
@@ -17,11 +17,10 @@
  */
 
 mindplot.DesignerKeyboard = new Class({
-    Extends:Keyboard,
+    Extends: mindplot.Keyboard,
     Static:{
         register:function (designer) {
             this._instance = new mindplot.DesignerKeyboard(designer);
-            this._instance.activate();
         },
 
         getInstance:function () {
@@ -31,360 +30,257 @@ mindplot.DesignerKeyboard = new Class({
 
     initialize:function (designer) {
         $assert(designer, "designer can not be null");
-        this.parent({defaultEventType:'keydown'});
         this._registerEvents(designer);
     },
 
-
     _registerEvents:function (designer) {
 
         // Try with the keyboard ..
         var model = designer.getModel();
-        var keyboardEvents = {
-            'backspace':function (event) {
+        this.addShortcut(
+            ['backspace'], function (event) {
                 event.preventDefault();
                 event.stopPropagation();
-
                 designer.deleteSelectedEntities();
-
-            }.bind(this),
-
-            'space':function () {
+            }
+        );
+        this.addShortcut(
+            ['space'], function() {
                 designer.shrinkSelectedBranch();
-            }.bind(this),
-
-            'f2':function () {
+            }
+        );
+        this.addShortcut(
+            ['f2'],function(event) {
+                event.stopPropagation();
+                event.preventDefault();
                 var node = model.selectedTopic();
                 if (node) {
                     node.showTextEditor();
                 }
-            }.bind(this),
-
-            'delete':function (event) {
+            }
+        );
+        this.addShortcut(
+            ['del'], function(event) {
                 designer.deleteSelectedEntities();
-
                 event.preventDefault();
                 event.stopPropagation();
-            }.bind(this),
-
-            'enter':function () {
+            }
+        );
+        this.addShortcut(
+            ['enter'], function() {
                 designer.createSiblingForSelectedNode();
-            }.bind(this),
-
-            'insert':function (event) {
+            }
+        );
+        this.addShortcut(
+            ['insert'], function(event) {
                 designer.createChildForSelectedNode();
-
                 event.preventDefault();
                 event.stopPropagation();
-            }.bind(this),
-
-            'tab':function (event) {
+            }
+        );
+        this.addShortcut(
+            ['tab'], function(event) {
                 designer.createChildForSelectedNode();
-
                 event.preventDefault();
                 event.stopPropagation();
-            }.bind(this),
-
-            '-':function () { // "-" is a insert on several Browsers. Don't ask why ...
-                designer.createChildForSelectedNode();
-            }.bind(this),
-
-            'meta+enter':function (event) {
+            }
+        );
+        this.addShortcut(
+            ['meta+enter'], function(event) {
                 event.preventDefault();
                 event.stopPropagation();
                 designer.createChildForSelectedNode();
-
-            }.bind(this),
-
-            'ctrl+z':function (event) {
+            }
+        );
+        this.addShortcut(
+            ['ctrl+z', 'meta+z'], function(event) {
                 event.preventDefault(event);
                 event.stopPropagation();
                 designer.undo();
-            }.bind(this),
-
-            'meta+z':function (event) {
-                event.preventDefault();
-                event.stopPropagation();
-
-                designer.undo();
-
-            }.bind(this),
-
-            'ctrl+c':function (event) {
+            }
+        );
+        this.addShortcut(
+            ['ctrl+c', 'meta+c'], function (event) {
                 event.preventDefault(event);
                 event.stopPropagation();
                 designer.copyToClipboard();
-            }.bind(this),
-
-            'meta+c':function (event) {
-                event.preventDefault();
-                event.stopPropagation();
-
-                designer.copyToClipboard();
-
-            }.bind(this),
-
-            'ctrl+v':function (event) {
+            }
+        );
+        this.addShortcut(
+            ['ctrl+v', 'meta+v'], function (event) {
                 event.preventDefault(event);
                 event.stopPropagation();
-
                 designer.pasteClipboard();
-            }.bind(this),
-
-            'meta+v':function (event) {
+            }
+        );
+        this.addShortcut(
+            ['ctrl+shift+z', 'meta+shift+z', 'ctrl+y', 'meta+y'], function (event) {
                 event.preventDefault();
                 event.stopPropagation();
-
-                designer.pasteClipboard();
-
-            }.bind(this),
-
-            'ctrl+z+shift':function (event) {
-                event.preventDefault();
-                event.stopPropagation();
-
                 designer.redo();
-            }.bind(this),
-
-            'meta+z+shift':function (event) {
+            }
+        );
+        this.addShortcut(
+            ['ctrl+a', 'meta+a'], function (event) {
                 event.preventDefault();
                 event.stopPropagation();
-
-                designer.redo();
-            }.bind(this),
-
-            'ctrl+y':function (event) {
-                event.preventDefault();
-                event.stopPropagation();
-
-                designer.redo();
-
-            }.bind(this),
-
-            'meta+y':function (event) {
-                event.preventDefault();
-                event.stopPropagation();
-
-                designer.redo();
-
-            }.bind(this),
-
-            'ctrl+a':function (event) {
-                event.preventDefault();
-                event.stopPropagation();
-
                 designer.selectAll();
-            },
-
-            'ctrl+b':function (event) {
+            }
+        );
+        this.addShortcut(
+            ['ctrl+b', 'meta+b'], function (event) {
                 event.preventDefault();
                 event.stopPropagation();
 
                 designer.changeFontWeight();
-            },
-
-            'meta+b':function (event) {
+            }
+        );
+        this.addShortcut(
+            ['ctrl+s', 'meta+s'], function (event) {
                 event.preventDefault();
                 event.stopPropagation();
-
-                designer.changeFontWeight();
-            },
-
-            'ctrl+s':function (event) {
-                event.preventDefault();
-                event.stopPropagation();
-                $('save').fireEvent('click');
-            },
-
-            'meta+s':function (event) {
-                event.preventDefault();
-                event.stopPropagation();
-
-                $('save').fireEvent('click');
-            },
-
-            'ctrl+i':function (event) {
+                $(document).find('#save').trigger('click');
+            }
+        );
+        this.addShortcut(
+            ['ctrl+i', 'meta+i'], function (event) {
                 event.preventDefault();
                 event.stopPropagation();
 
                 designer.changeFontStyle();
-            },
-
-            'meta+i':function (event) {
-                event.preventDefault();
-                event.stopPropagation();
-
-                designer.changeFontStyle();
-            },
-
-            'meta+shift+a':function (event) {
+            }
+        );
+        this.addShortcut(
+            ['ctrl+shift+a', 'meta+shift+a'], function (event) {
                 event.preventDefault();
                 event.stopPropagation();
 
                 designer.deselectAll();
-            },
-
-            'ctrl+shift+a':function (event) {
-                event.preventDefault();
-                event.stopPropagation();
-
-                designer.deselectAll();
-            },
-
-            'meta+a':function (event) {
-                event.preventDefault();
-                event.stopPropagation();
-
-                designer.selectAll();
-            },
-
-            'meta+=':function (event) {
+            }
+        );
+        this.addShortcut(
+            ['meta+=', 'ctrl+='], function (event) {
                 event.preventDefault();
                 event.stopPropagation();
 
                 designer.zoomIn();
-            },
-
-            'meta+-':function (event) {
+            }
+        );
+        this.addShortcut(
+            ['meta+-', 'ctrl+-'], function (event) {
                 event.preventDefault();
                 event.stopPropagation();
 
                 designer.zoomOut();
-            },
-
-            'ctrl+=':function (event) {
-                event.preventDefault();
-                event.stopPropagation();
-
-                designer.zoomIn();
-            },
-
-            'ctrl+-':function (event) {
-                event.preventDefault();
-                event.stopPropagation();
-
-                designer.zoomOut();
-            },
-
-
-            'right':function (event) {
+            }
+        );
+        var me = this;
+        this.addShortcut(
+            'right', function (event) {
                 var node = model.selectedTopic();
                 if (node) {
                     if (node.isCentralTopic()) {
-                        this._goToSideChild(designer, node, 'RIGHT');
+                        me._goToSideChild(designer, node, 'RIGHT');
                     }
                     else {
                         if (node.getPosition().x < 0) {
-                            this._goToParent(designer, node);
+                            me._goToParent(designer, node);
                         }
                         else if (!node.areChildrenShrunken()) {
-                            this._goToChild(designer, node);
+                            me._goToChild(designer, node);
                         }
                     }
                 } else {
                     var centralTopic = model.getCentralTopic();
-                    this._goToNode(designer, centralTopic);
+                    me._goToNode(designer, centralTopic);
                 }
                 event.preventDefault();
                 event.stopPropagation();
-            }.bind(this),
-
-            'left':function (event) {
+            }
+        );
+        this.addShortcut(
+            'left', function (event) {
                 var node = model.selectedTopic();
                 if (node) {
                     if (node.isCentralTopic()) {
-                        this._goToSideChild(designer, node, 'LEFT');
+                        me._goToSideChild(designer, node, 'LEFT');
                     }
                     else {
                         if (node.getPosition().x > 0) {
-                            this._goToParent(designer, node);
+                            me._goToParent(designer, node);
                         }
                         else if (!node.areChildrenShrunken()) {
-                            this._goToChild(designer, node);
+                            me._goToChild(designer, node);
                         }
                     }
                 } else {
                     var centralTopic = model.getCentralTopic();
-                    this._goToNode(designer, centralTopic);
+                    me._goToNode(designer, centralTopic);
                 }
                 event.preventDefault();
                 event.stopPropagation();
-            }.bind(this),
-
-            'up':function (event) {
+            }
+        );
+        this.addShortcut(
+            'up', function (event) {
                 var node = model.selectedTopic();
                 if (node) {
                     if (!node.isCentralTopic()) {
-                        this._goToBrother(designer, node, 'UP');
+                        me._goToBrother(designer, node, 'UP');
                     }
                 } else {
                     var centralTopic = model.getCentralTopic();
-                    this._goToNode(designer, centralTopic);
+                    me._goToNode(designer, centralTopic);
                 }
                 event.preventDefault();
                 event.stopPropagation();
-            }.bind(this),
-
-            'down':function (event) {
+            }
+        );
+        this.addShortcut(
+            'down', function (event) {
                 var node = model.selectedTopic();
                 if (node) {
                     if (!node.isCentralTopic()) {
-                        this._goToBrother(designer, node, 'DOWN');
+                        me._goToBrother(designer, node, 'DOWN');
                     }
                 } else {
                     var centralTopic = model.getCentralTopic();
-                    this._goToNode(designer, centralTopic);
+                    me._goToNode(designer, centralTopic);
                 }
                 event.preventDefault();
                 event.stopPropagation();
-            }.bind(this)
-        };
-        this.addEvents(keyboardEvents);
-
-        var regex = /^(?:shift|control|ctrl|alt|meta)$/;
-        var modifiers = ['shift', 'control', 'alt', 'meta'];
-
-        var excludes = ['esc', 'capslock', 'tab', 'f1', 'f3', 'f4', 'f5', 'f6', 'f7', 'f8', 'f9', 'f10', 'f11', 'f12', 'backspace', 'down', 'up', 'left', 'right', 'control'];
-        if (!Browser.Platform.mac) {
-            // This is to avoid enter on edition mode in the node when alt+tab is pressed.
-            excludes.push("alt");
-        }
-
-        $(document).addEvent('keydown', function (event) {
-
-            // Convert key to mootools keyboard event format...
-            var keys = [];
-            modifiers.each(function (mod) {
-                if (event[mod]) keys.push(mod);
-            });
-            if (!regex.test(event.key))
-                keys.push(event.key);
-            var key = keys.join('+');
-
-            // Is the pressed key one of the already registered in the keyboard  ?
-            var isRegistered = false;
-            for (var eKey in  keyboardEvents) {
-                if (eKey == key) {
-                    isRegistered = true;
-                    break;
-                }
+            }
+        );
+        var excludes = ['esc', 'escape', 'f1', 'f3', 'f4', 'f5', 'f6', 'f7', 'f8', 'f9', 'f10', 'f11', 'f12'];
+        
+        $(document).on('keypress', function (event) {
+            var keyCode;
+            // Firefox doesn't skip special keys for keypress event...
+            if (event.key && excludes.contains(event.key.toLowerCase())) {
+                return;
+            }
+            // Sometimes Firefox doesn't contain keyCode value
+            if (event.key && event.keyCode == 0) {
+                keyCode = event.charCode;
+            } else {
+                keyCode = event.keyCode;
             }
 
-            // If it's not registered, let's
-            if (!isRegistered && !excludes.contains(key) && !excludes.contains(event.key) && !event.meta && !event.control) {
+            var specialKey = jQuery.hotkeys.specialKeys[keyCode];
+            if (["enter", "capslock"].indexOf(specialKey) == -1 && !jQuery.hotkeys.shiftNums[keyCode]) {
                 var nodes = designer.getModel().filterSelectedTopics();
                 if (nodes.length > 0) {
 
                     // If a modifier is press, the key selected must be ignored.
-                    var pressKey = event.key;
-                    if (modifiers.contains(event.key)) {
-                        pressKey = "";
+                    var pressKey = String.fromCharCode(keyCode);
+                    if (event.ctrlKey || event.altKey || event.metaKey) {
+                        return;
                     }
-
                     nodes[0].showTextEditor(pressKey);
                     event.stopPropagation();
                 }
             }
+            
         });
 
     },
@@ -488,3 +384,14 @@ mindplot.DesignerKeyboard = new Class({
     }
 
 });
+
+mindplot.DesignerKeyboard.specialKeys = {
+    8: "backspace", 9: "tab", 10: "return", 13: "enter", 16: "shift", 17: "ctrl", 18: "alt", 19: "pause",
+    20: "capslock", 27: "esc", 32: "space", 33: "pageup", 34: "pagedown", 35: "end", 36: "home",
+    37: "left", 38: "up", 39: "right", 40: "down", 45: "insert", 46: "del",
+    96: "0", 97: "1", 98: "2", 99: "3", 100: "4", 101: "5", 102: "6", 103: "7",
+    104: "8", 105: "9", 106: "*", 107: "+", 109: "-", 110: ".", 111 : "/",
+    112: "f1", 113: "f2", 114: "f3", 115: "f4", 116: "f5", 117: "f6", 118: "f7", 119: "f8",
+    120: "f9", 121: "f10", 122: "f11", 123: "f12", 144: "numlock", 145: "scroll", 186: ";", 191: "/",
+    220: "\\", 222: "'", 224: "meta"
+};

mindplot/src/main/javascript/DesignerModel.js

@@ -1,5 +1,5 @@
 /*
- *    Copyright [2012] [wisemapping]
+ *    Copyright [2015] [wisemapping]
  *
  *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
  *   It is basically the Apache License, Version 2.0 (the "License") plus the
@@ -16,35 +16,51 @@
  *   limitations under the License.
  */
 
-mindplot.DesignerModel = new Class({
-    Implements:[Events],
+mindplot.DesignerModel = new Class(/** @lends DesignerModel */{
+    Implements:[mindplot.Events],
+    /**
+     * @implements {mindplot.Events}
+     * @constructs
+     * @param {{readOnly: Boolean, zoom: Number, saveOnLoad: Boolean, size: {width: Number, 
+     * height: Number}, viewPort: {width: Number, height: Number}, container: String, 
+     * persistenceManager: String, mapId: String, locale: String}} options
+     * options loaded from json config 
+     * @see {@link ConfigParameters.md}
+     * @see {@link editor.html}
+     */
     initialize:function (options) {
         this._zoom = options.zoom;
         this._topics = [];
         this._relationships = [];
     },
 
+    /** @return {Number} zoom between 0.3 (largest text) and 1.9 */
     getZoom:function () {
         return this._zoom;
     },
 
+    /** @param {Number} zoom number between 0.3 and 1.9 to set the zoom to */
     setZoom:function (zoom) {
         this._zoom = zoom;
     },
 
+    /** @return {@link mindplot.Topic[]} all topics */
     getTopics:function () {
         return this._topics;
     },
 
+    /** @return {mindplot.Relationship[]} all relationships */
     getRelationships:function () {
         return this._relationships;
     },
 
+    /** @return {mindplot.CentralTopic} the central topic */
     getCentralTopic:function () {
         var topics = this.getTopics();
         return topics[0];
     },
 
+    /** @return {mindplot.Topic[]} selected topics */
     filterSelectedTopics:function () {
         var result = [];
         for (var i = 0; i < this._topics.length; i++) {
@@ -55,6 +71,9 @@ mindplot.DesignerModel = new Class({
         return result;
     },
 
+    /**
+     * @return {mindplot.Relationship[]} selected relationships
+     */
     filterSelectedRelationships:function () {
         var result = [];
         for (var i = 0; i < this._relationships.length; i++) {
@@ -65,33 +84,60 @@ mindplot.DesignerModel = new Class({
         return result;
     },
 
+    /**
+     * @return {Array.<mindplot.Relationship, mindplot.Topic>} all topics and relationships
+     */
     getEntities:function () {
         var result = [].append(this._topics);
         result.append(this._relationships);
         return result;
     },
 
+    /**
+     * removes occurrences of the given topic from the topic array
+     * @param {mindplot.Topic} topic the topic to remove
+     */
     removeTopic:function (topic) {
         $assert(topic, "topic can not be null");
         this._topics.erase(topic);
     },
 
+    /**
+     * removes occurrences of the given relationship from the relationship array
+     * @param {mindplot.Relationship} rel the relationship to remove
+     */
     removeRelationship:function (rel) {
         $assert(rel, "rel can not be null");
         this._relationships.erase(rel);
     },
 
+    /**
+     * adds the given topic to the topic array
+     * @param {mindplot.Topic} topic the topic to add
+     * @throws will throw an error if topic is null or undefined
+     * @throws will throw an error if the topic's id is not a number
+     */
     addTopic:function (topic) {
         $assert(topic, "topic can not be null");
         $assert(typeof  topic.getId() == "number", "id is not a number:" + topic.getId());
         this._topics.push(topic);
     },
 
+    /**
+     * adds the given relationship to the relationship array
+     * @param {mindplot.Relationship} rel the relationship to add
+     * @throws will throw an error if rel is null or undefined
+     */
     addRelationship:function (rel) {
         $assert(rel, "rel can not be null");
         this._relationships.push(rel);
     },
 
+    /**
+     * @param {Function=} validate a function to validate nodes
+     * @param {String=} errorMsg an error message to display if the validation fails
+     * @return {String} returns an array of the selected (and, if applicable, valid) topics' ids
+     */
     filterTopicsIds:function (validate, errorMsg) {
         var result = [];
         var topics = this.filterSelectedTopics();
@@ -114,12 +160,19 @@ mindplot.DesignerModel = new Class({
         return result;
     },
 
-
+    /**
+     * @return {mindplot.Topic} the first selected topic if one or more are found by the 
+     * filterSelectedTopics function, null otherwise
+     */
     selectedTopic:function () {
         var topics = this.filterSelectedTopics();
         return (topics.length > 0) ? topics[0] : null;
     },
 
+    /**
+     * @param {String} id the id of the topic to be retrieved
+     * @return {mindplot.Topic} the topic with the respective id
+     */
     findTopicById:function (id) {
         var result = null;
         for (var i = 0; i < this._topics.length; i++) {

mindplot/src/main/javascript/DesignerUndoManager.js

@@ -1,5 +1,5 @@
 /*
- *    Copyright [2012] [wisemapping]
+ *    Copyright [2015] [wisemapping]
  *
  *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
  *   It is basically the Apache License, Version 2.0 (the "License") plus the

mindplot/src/main/javascript/DragConnector.js

@@ -1,5 +1,5 @@
 /*
- *    Copyright [2012] [wisemapping]
+ *    Copyright [2015] [wisemapping]
  *
  *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
  *   It is basically the Apache License, Version 2.0 (the "License") plus the
@@ -84,15 +84,16 @@ mindplot.DragConnector = new Class({
         // - Horizontal proximity
         // - It's already connected.
         var currentConnection = dragTopic.getConnectedToTopic();
+        var me = this;
         topics = topics.sort(function (a, b) {
             var aPos = a.getPosition();
             var bPos = b.getPosition();
 
-            var av = this._isVerticallyAligned(a.getSize(), aPos, sPos);
-            var bv = this._isVerticallyAligned(b.getSize(), bPos, sPos);
-            return  this._proximityWeight(av, a, sPos, currentConnection) - this._proximityWeight(bv, b, sPos, currentConnection);
+            var av = me._isVerticallyAligned(a.getSize(), aPos, sPos);
+            var bv = me._isVerticallyAligned(b.getSize(), bPos, sPos);
+            return  me._proximityWeight(av, a, sPos, currentConnection) - me._proximityWeight(bv, b, sPos, currentConnection);
 
-        }.bind(this));
+        });
         return topics;
     },
 

mindplot/src/main/javascript/DragManager.js

@@ -1,5 +1,5 @@
 /*
- *    Copyright [2012] [wisemapping]
+ *    Copyright [2015] [wisemapping]
  *
  *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
  *   It is basically the Apache License, Version 2.0 (the "License") plus the
@@ -31,14 +31,14 @@ mindplot.DragManager = new Class({
         var workspace = this._workspace;
         var screen = workspace.getScreenManager();
         var dragManager = this;
-
+        var me = this;
         var mouseDownListener = function(event) {
             if (workspace.isWorkspaceEventsEnabled()) {
                 // Disable double drag...
                 workspace.enableWorkspaceEvents(false);
 
                 // Set initial position.
-                var layoutManager = this._eventDispatcher.getLayoutManager();
+                var layoutManager = me._eventDispatcher.getLayoutManager();
                 var dragNode = node.createDragNode(layoutManager);
 
                 // Register mouse move listener ...
@@ -52,7 +52,7 @@ mindplot.DragManager = new Class({
                 // Change cursor.
                 window.document.body.style.cursor = 'move';
             }
-        }.bind(this);
+        };
         node.addEvent('mousedown', mouseDownListener);
     },
 
@@ -70,18 +70,18 @@ mindplot.DragManager = new Class({
 
     _buildMouseMoveListener : function(workspace, dragNode, dragManager) {
         var screen = workspace.getScreenManager();
-
+        var me = this;
         var result = function(event) {
 
-            if (!this._isDragInProcess) {
+            if (!me._isDragInProcess) {
                 // Execute Listeners ..
                 var startDragListener = dragManager._listeners['startdragging'];
                 startDragListener(event, dragNode);
 
                 // Add shadow node to the workspace.
-                workspace.appendChild(dragNode);
+                workspace.append(dragNode);
 
-                this._isDragInProcess = true;
+                me._isDragInProcess = true;
             }
 
             var pos = screen.getWorkspaceMousePosition(event);
@@ -95,13 +95,14 @@ mindplot.DragManager = new Class({
 
             event.preventDefault();
 
-        }.bind(this);
+        };
         dragManager._mouseMoveListener = result;
         return result;
     },
 
     _buildMouseUpListener : function(workspace, node, dragNode, dragManager) {
         var screen = workspace.getScreenManager();
+        var me = this;
         var result = function(event) {
             $assert(dragNode.isDragTopic, 'dragNode must be an DragTopic');
 
@@ -117,7 +118,7 @@ mindplot.DragManager = new Class({
             // Change the cursor to the default.
             window.document.body.style.cursor = 'default';
 
-            if (this._isDragInProcess) {
+            if (me._isDragInProcess) {
 
                 // Execute Listeners only if the node has been moved.
                 var endDragListener = dragManager._listeners['enddragging'];
@@ -126,11 +127,11 @@ mindplot.DragManager = new Class({
                 // Remove drag node from the workspace.
                 dragNode.removeFromWorkspace(workspace);
 
-                this._isDragInProcess = false;
+                me._isDragInProcess = false;
             }
 
 
-        }.bind(this);
+        };
         dragManager._mouseUpListener = result;
         return result;
     },

mindplot/src/main/javascript/DragPivot.js

@@ -1,5 +1,5 @@
 /*
- *    Copyright [2012] [wisemapping]
+ *    Copyright [2015] [wisemapping]
  *
  *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
  *   It is basically the Apache License, Version 2.0 (the "License") plus the
@@ -146,27 +146,27 @@ mindplot.DragPivot = new Class({
 
     addToWorkspace : function(workspace) {
         var pivotRect = this._getPivotRect();
-        workspace.appendChild(pivotRect);
+        workspace.append(pivotRect);
 
         var connectToRect = this._connectRect;
-        workspace.appendChild(connectToRect);
+        workspace.append(connectToRect);
 
         // Add a hidden straight line ...
         var straighLine = this._straightLine;
         straighLine.setVisibility(false);
-        workspace.appendChild(straighLine);
+        workspace.append(straighLine);
         straighLine.moveToBack();
 
         // Add a hidden curved line ...
         var curvedLine = this._curvedLine;
         curvedLine.setVisibility(false);
-        workspace.appendChild(curvedLine);
+        workspace.append(curvedLine);
         curvedLine.moveToBack();
 
         // Add a connect rect ...
         var connectRect = this._connectRect;
         connectRect.setVisibility(false);
-        workspace.appendChild(connectRect);
+        workspace.append(connectRect);
         connectRect.moveToBack();
     },
 

mindplot/src/main/javascript/DragTopic.js

@@ -1,5 +1,5 @@
 /*
- *    Copyright [2012] [wisemapping]
+ *    Copyright [2015] [wisemapping]
  *
  *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
  *   It is basically the Apache License, Version 2.0 (the "License") plus the
@@ -67,7 +67,7 @@ mindplot.DragTopic = new Class({
     },
 
     updateFreeLayout:function (event) {
-        var isFreeEnabled = (event.meta && Browser.Platform.mac) || (event.control && !Browser.Platform.mac);
+        var isFreeEnabled = (event.metaKey && Browser.Platform.mac) || (event.ctrlKey && !Browser.Platform.mac);
         if (this.isFreeLayoutOn() != isFreeEnabled) {
             var dragPivot = this._getDragPivot();
             dragPivot.setVisibility(!isFreeEnabled);
@@ -133,7 +133,7 @@ mindplot.DragTopic = new Class({
 
     addToWorkspace:function (workspace) {
         if (!this._isInWorkspace) {
-            workspace.appendChild(this._elem2d);
+            workspace.append(this._elem2d);
             var dragPivot = this._getDragPivot();
             dragPivot.addToWorkspace(workspace);
             this._isInWorkspace = true;
@@ -201,7 +201,7 @@ mindplot.DragTopic.init = function (workspace) {
 
     $assert(workspace, "workspace can not be null");
     var pivot = mindplot.DragTopic.__getDragPivot();
-    workspace.appendChild(pivot);
+    workspace.append(pivot);
 };
 
 mindplot.DragTopic.__getDragPivot = function () {
@@ -211,5 +211,5 @@ mindplot.DragTopic.__getDragPivot = function () {
         mindplot.DragTopic._dragPivot = result;
     }
     return result;
-}
+};
                              

mindplot/src/main/javascript/EditorOptions.js

@@ -1,5 +1,5 @@
 /*
- *    Copyright [2012] [wisemapping]
+ *    Copyright [2015] [wisemapping]
  *
  *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
  *   It is basically the Apache License, Version 2.0 (the "License") plus the

mindplot/src/main/javascript/EditorProperties.js

@@ -1,5 +1,5 @@
 /*
- *    Copyright [2012] [wisemapping]
+ *    Copyright [2015] [wisemapping]
  *
  *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
  *   It is basically the Apache License, Version 2.0 (the "License") plus the
@@ -17,20 +17,20 @@
  */
 
 mindplot.EditorProperties = new Class({
-    initialize:function() {
+    initialize: function () {
         this._zoom = 0;
         this._position = 0;
     },
 
-    setZoom : function(zoom) {
+    setZoom: function (zoom) {
         this._zoom = zoom;
     },
 
-    getZoom : function() {
+    getZoom: function () {
         return this._zoom;
     },
 
-    asProperties : function() {
+    asProperties: function () {
         return "zoom=" + this._zoom + "\n";
     }
 });

mindplot/src/main/javascript/Events.js

@@ -0,0 +1,41 @@
+mindplot.Events = new Class({
+
+    $events: {},
+
+    _removeOn: function (string) {
+        return string.replace(/^on([A-Z])/, function (full, first) {
+            return first.toLowerCase();
+        });
+    },
+
+    addEvent: function (type, fn, internal) {
+        type = this._removeOn(type);
+
+        this.$events[type] = (this.$events[type] || []).include(fn);
+        if (internal) fn.internal = true;
+        return this;
+    },
+
+    fireEvent: function (type, args, delay) {
+        type = this._removeOn(type);
+        var events = this.$events[type];
+        if (!events) return this;
+        args = Array.from(args);
+        _.each(events, function (fn) {
+            if (delay) fn.delay(delay, this, args);
+            else fn.apply(this, args);
+        }, this);
+        return this;
+    },
+
+    removeEvent: function (type, fn) {
+        type = this._removeOn(type);
+        var events = this.$events[type];
+        if (events && !fn.internal) {
+            var index = events.indexOf(fn);
+            if (index != -1) events.splice(index, 1);
+        }
+        return this;
+    }
+
+});

mindplot/src/main/javascript/Icon.js

@@ -1,5 +1,5 @@
 /*
- *    Copyright [2012] [wisemapping]
+ *    Copyright [2015] [wisemapping]
  *
  *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
  *   It is basically the Apache License, Version 2.0 (the "License") plus the
@@ -17,38 +17,38 @@
  */
 
 mindplot.Icon = new Class({
-    initialize:function(url) {
+    initialize: function (url) {
         $assert(url, 'topic can not be null');
         this._image = new web2d.Image();
         this._image.setHref(url);
         this._image.setSize(mindplot.Icon.SIZE, mindplot.Icon.SIZE);
     },
 
-    getImage : function() {
+    getImage: function () {
         return this._image;
     },
 
-    setGroup : function(group) {
+    setGroup: function (group) {
         this._group = group;
     },
 
-    getGroup : function() {
+    getGroup: function () {
         return this._group;
     },
 
-    getSize : function() {
+    getSize: function () {
         return this._image.getSize();
     },
 
-    getPosition : function() {
+    getPosition: function () {
         return this._image.getPosition();
     },
 
-    addEvent : function(type, fnc) {
+    addEvent: function (type, fnc) {
         this._image.addEvent(type, fnc);
     },
 
-    remove : function() {
+    remove: function () {
         throw "Unsupported operation";
     }
 });

mindplot/src/main/javascript/IconGroup.js

@@ -1,5 +1,5 @@
 /*
- *    Copyright [2012] [wisemapping]
+ *    Copyright [2015] [wisemapping]
  *
  *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
  *   It is basically the Apache License, Version 2.0 (the "License") plus the
@@ -16,13 +16,27 @@
  *   limitations under the License.
  */
 
-mindplot.IconGroup = new Class({
-    initialize:function (topicId, iconSize) {
+mindplot.IconGroup = new Class(/**@lends IconGroup */{
+    /**
+     * @constructs
+     * @param topicId
+     * @param iconSize
+     * @throws will throw an error if topicId is null or undefined
+     * @throws will throw an error if iconSize is null or undefined
+     */
+    initialize: function (topicId, iconSize) {
         $assert($defined(topicId), "topicId can not be null");
         $assert($defined(iconSize), "iconSize can not be null");
 
         this._icons = [];
-        this._group = new web2d.Group({width:0, height:iconSize, x:0, y:0, coordSizeWidth:0, coordSizeHeight:100});
+        this._group = new web2d.Group({
+            width: 0,
+            height: iconSize,
+            x: 0,
+            y: 0,
+            coordSizeWidth: 0,
+            coordSizeHeight: 100
+        });
         this._removeTip = new mindplot.IconGroup.RemoveTip(this._group, topicId);
         this.seIconSize(iconSize, iconSize);
 
@@ -30,28 +44,38 @@ mindplot.IconGroup = new Class({
 
     },
 
-    setPosition:function (x, y) {
+    /** */
+    setPosition: function (x, y) {
         this._group.setPosition(x, y);
     },
 
-    getPosition:function () {
+    /** */
+    getPosition: function () {
         return this._group.getPosition();
     },
 
-    getNativeElement:function () {
+    /** */
+    getNativeElement: function () {
         return this._group;
     },
 
-    getSize:function () {
+    /** */
+    getSize: function () {
         return this._group.getSize();
     },
 
-    seIconSize:function (width, height) {
-        this._iconSize = {width:width, height:height};
+    /** */
+    seIconSize: function (width, height) {
+        this._iconSize = {width: width, height: height};
         this._resize(this._icons.length);
     },
 
-    addIcon:function (icon, remove) {
+    /**
+     * @param icon the icon to be added to the icon group
+     * @param {Boolean} remove
+     * @throws will throw an error if icon is not defined
+     */
+    addIcon: function (icon, remove) {
         $defined(icon, "icon is not defined");
 
         icon.setGroup(this);
@@ -62,7 +86,7 @@ mindplot.IconGroup = new Class({
         this._positionIcon(icon, this._icons.length - 1);
 
         var imageShape = icon.getImage();
-        this._group.appendChild(imageShape);
+        this._group.append(imageShape);
 
         // Register event for the group ..
         if (remove) {
@@ -70,9 +94,9 @@ mindplot.IconGroup = new Class({
         }
     },
 
-    _findIconFromModel:function (iconModel) {
+    _findIconFromModel: function (iconModel) {
         var result = null;
-        this._icons.each(function (icon) {
+        _.each(this._icons, function (icon) {
             var elModel = icon.getModel();
             if (elModel.getId() == iconModel.getId()) {
                 result = icon;
@@ -86,14 +110,15 @@ mindplot.IconGroup = new Class({
         return result;
     },
 
-    removeIconByModel:function (featureModel) {
+    /** */
+    removeIconByModel: function (featureModel) {
         $assert(featureModel, "featureModel can not be null");
 
         var icon = this._findIconFromModel(featureModel);
         this._removeIcon(icon);
     },
 
-    _removeIcon:function (icon) {
+    _removeIcon: function (icon) {
         $assert(icon, "icon can not be null");
 
         this._removeTip.close(0);
@@ -101,18 +126,19 @@ mindplot.IconGroup = new Class({
 
         this._icons.erase(icon);
         this._resize(this._icons.length);
-
+        var me = this;
         // Add all again ...
-        this._icons.each(function (elem, i) {
-            this._positionIcon(elem, i);
-        }.bind(this));
+        _.each(this._icons, function (elem, i) {
+            me._positionIcon(elem, i);
+        });
     },
 
-    moveToFront:function () {
+    /** */
+    moveToFront: function () {
         this._group.moveToFront();
     },
 
-    _registerListeners:function () {
+    _registerListeners: function () {
         this._group.addEvent('click', function (event) {
             // Avoid node creation ...
             event.stopPropagation();
@@ -125,29 +151,45 @@ mindplot.IconGroup = new Class({
         });
     },
 
-    _resize:function (iconsLength) {
+    _resize: function (iconsLength) {
         this._group.setSize(iconsLength * this._iconSize.width, this._iconSize.height);
 
         var iconSize = mindplot.Icon.SIZE + (mindplot.IconGroup.ICON_PADDING * 2);
         this._group.setCoordSize(iconsLength * iconSize, iconSize);
     },
 
-    _positionIcon:function (icon, order) {
+    _positionIcon: function (icon, order) {
 
         var iconSize = mindplot.Icon.SIZE + (mindplot.IconGroup.ICON_PADDING * 2);
         icon.getImage().setPosition(iconSize * order + mindplot.IconGroup.ICON_PADDING, mindplot.IconGroup.ICON_PADDING);
     }
 });
+
+/**
+ * @constant
+ * @type {Number}
+ * @default
+ */
 mindplot.IconGroup.ICON_PADDING = 5;
 
-mindplot.IconGroup.RemoveTip = new Class({
-    initialize:function (container) {
+mindplot.IconGroup.RemoveTip = new Class(/** @lends IconGroup.RemoveTip */{
+    /**
+     * @classdesc inner class of IconGroup
+     * @constructs
+     * @param container
+     */
+    initialize: function (container) {
         $assert(container, "group can not be null");
         this._fadeElem = container;
     },
 
 
-    show:function (topicId, icon) {
+    /**
+     * @param topicId
+     * @param icon
+     * @throws will throw an error if icon is null or undefined
+     */
+    show: function (topicId, icon) {
         $assert(icon, 'icon can not be null');
 
         // Nothing to do ...
@@ -166,16 +208,18 @@ mindplot.IconGroup.RemoveTip = new Class({
                 icon.remove();
             });
 
+            var me = this;
+
             widget.addEvent('mouseover', function () {
-                this.show(topicId, icon);
-            }.bind(this));
+                me.show(topicId, icon);
+            });
 
             widget.addEvent('mouseout', function () {
-                this.hide();
-            }.bind(this));
+                me.hide();
+            });
 
             widget.setPosition(pos.x + 80, pos.y - 50);
-            this._fadeElem.appendChild(widget);
+            this._fadeElem.append(widget);
 
             // Setup current element ...
             this._activeIcon = icon;
@@ -186,28 +230,30 @@ mindplot.IconGroup.RemoveTip = new Class({
         }
     },
 
-    hide:function () {
+    /** */
+    hide: function () {
         this.close(200);
     },
 
-    close:function (delay) {
+    /**
+     * @param delay
+     */
+    close: function (delay) {
 
         // This is not ok, trying to close the same dialog twice ?
         if (this._closeTimeoutId) {
             clearTimeout(this._closeTimeoutId)
         }
 
+        var me = this;
         if (this._activeIcon) {
             var widget = this._widget;
             var close = function () {
-
-                this._activeIcon = null;
-                this._fadeElem.removeChild(widget);
-                this._widget = null;
-
-                this._closeTimeoutId = null;
-
-            }.bind(this);
+                me._activeIcon = null;
+                me._fadeElem.removeChild(widget);
+                me._widget = null;
+                me._closeTimeoutId = null;
+            };
 
             if (!$defined(delay) || delay == 0) {
                 close();
@@ -218,46 +264,46 @@ mindplot.IconGroup.RemoveTip = new Class({
         }
     },
 
-    _buildWeb2d:function () {
+    _buildWeb2d: function () {
         var result = new web2d.Group({
-            width:10,
-            height:10,
-            x:0,
-            y:0,
-            coordSizeWidth:10,
-            coordSizeHeight:10
+            width: 10,
+            height: 10,
+            x: 0,
+            y: 0,
+            coordSizeWidth: 10,
+            coordSizeHeight: 10
         });
 
         var outerRect = new web2d.Rect(0, {
-            x:0,
-            y:0,
-            width:10,
-            height:10,
-            stroke:'0',
-            fillColor:'black'
+            x: 0,
+            y: 0,
+            width: 10,
+            height: 10,
+            stroke: '0',
+            fillColor: 'black'
         });
-        result.appendChild(outerRect);
+        result.append(outerRect);
         outerRect.setCursor('pointer');
 
         var innerRect = new web2d.Rect(0, {
-            x:1,
-            y:1,
-            width:8,
-            height:8,
-            stroke:'1 solid white',
-            fillColor:'gray'
+            x: 1,
+            y: 1,
+            width: 8,
+            height: 8,
+            stroke: '1 solid white',
+            fillColor: 'gray'
         });
-        result.appendChild(innerRect);
+        result.append(innerRect);
 
-        var line = new web2d.Line({stroke:'1 solid white'});
+        var line = new web2d.Line({stroke: '1 solid white'});
         line.setFrom(1, 1);
         line.setTo(9, 9);
-        result.appendChild(line);
+        result.append(line);
 
-        var line2 = new web2d.Line({stroke:'1 solid white'});
+        var line2 = new web2d.Line({stroke: '1 solid white'});
         line2.setFrom(1, 9);
         line2.setTo(9, 1);
-        result.appendChild(line2);
+        result.append(line2);
 
         // Some events ...
         result.addEvent('mouseover', function () {
@@ -271,16 +317,22 @@ mindplot.IconGroup.RemoveTip = new Class({
         return result;
     },
 
-    decorate:function (topicId, icon) {
+    /**
+     * @param topicId
+     * @param icon
+     */
+    decorate: function (topicId, icon) {
+
+        var me = this;
 
         if (!icon.__remove) {
             icon.addEvent('mouseover', function () {
-                this.show(topicId, icon);
-            }.bind(this));
+                me.show(topicId, icon);
+            });
 
             icon.addEvent('mouseout', function () {
-                this.hide();
-            }.bind(this));
+                me.hide();
+            });
             icon.__remove = true;
         }
     }

mindplot/src/main/javascript/ImageIcon.js

@@ -1,5 +1,5 @@
 /*
- *    Copyright [2012] [wisemapping]
+ *    Copyright [2015] [wisemapping]
  *
  *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
  *   It is basically the Apache License, Version 2.0 (the "License") plus the
@@ -17,8 +17,8 @@
  */
 
 mindplot.ImageIcon = new Class({
-    Extends:mindplot.Icon,
-    initialize:function (topic, iconModel, readOnly) {
+    Extends: mindplot.Icon,
+    initialize: function (topic, iconModel, readOnly) {
         $assert(iconModel, 'iconModel can not be null');
         $assert(topic, 'topic can not be null');
 
@@ -34,29 +34,30 @@ mindplot.ImageIcon = new Class({
 
             //Icon
             var image = this.getImage();
+            var me = this;
             image.addEvent('click', function () {
 
                 var iconType = iconModel.getIconType();
-                var newIconType = this._getNextFamilyIconId(iconType);
+                var newIconType = me._getNextFamilyIconId(iconType);
                 iconModel.setIconType(newIconType);
 
-                var imgUrl = this._getImageUrl(newIconType);
-                this._image.setHref(imgUrl);
+                var imgUrl = me._getImageUrl(newIconType);
+                me._image.setHref(imgUrl);
 
-            }.bind(this));
+            });
             this._image.setCursor('pointer');
         }
     },
 
-    _getImageUrl:function (iconId) {
+    _getImageUrl: function (iconId) {
         return "icons/" + iconId + ".png";
     },
 
-    getModel:function () {
+    getModel: function () {
         return this._featureModel;
     },
 
-    _getNextFamilyIconId:function (iconId) {
+    _getNextFamilyIconId: function (iconId) {
 
         var familyIcons = this._getFamilyIcons(iconId);
         $assert(familyIcons != null, "Family Icon not found!");
@@ -77,7 +78,7 @@ mindplot.ImageIcon = new Class({
         return result;
     },
 
-    _getFamilyIcons:function (iconId) {
+    _getFamilyIcons: function (iconId) {
         $assert(iconId != null, "id must not be null");
         $assert(iconId.indexOf("_") != -1, "Invalid icon id (it must contain '_')");
 
@@ -94,7 +95,7 @@ mindplot.ImageIcon = new Class({
         return result;
     },
 
-    remove:function () {
+    remove: function () {
         var actionDispatcher = mindplot.ActionDispatcher.getInstance();
         var featureId = this._featureModel.getId();
         var topicId = this._topicId;
@@ -103,30 +104,60 @@ mindplot.ImageIcon = new Class({
 });
 
 mindplot.ImageIcon.prototype.ICON_FAMILIES = [
-    {"id":"face", "icons":["face_plain", "face_sad", "face_crying", "face_smile", "face_surprise", "face_wink"]},
-    {"id":"funy", "icons":["funy_angel", "funy_devilish", "funy_glasses", "funy_grin", "funy_kiss", "funy_monkey"]},
-    {"id":"conn", "icons":["conn_connect", "conn_disconnect"]},
-    {"id":"sport", "icons":["sport_basketball", "sport_football", "sport_golf", "sport_raquet", "sport_shuttlecock", "sport_soccer", "sport_tennis"]},
-    {"id":"bulb", "icons":["bulb_light_on", "bulb_light_off"]},
-    {"id":"thumb", "icons":["thumb_thumb_up", "thumb_thumb_down"]},
-    {"id":"tick", "icons":["tick_tick", "tick_cross"]},
-    {"id":"onoff", "icons":["onoff_clock", "onoff_clock_red", "onoff_add", "onoff_delete", "onoff_status_offline", "onoff_status_online"]},
-    {"id":"money", "icons":["money_money", "money_dollar", "money_euro", "money_pound", "money_yen", "money_coins", "money_ruby"]},
-    {"id":"time", "icons":["time_calendar", "time_clock", "time_hourglass"]},
-    {"id":"number", "icons":["number_1", "number_2", "number_3", "number_4", "number_5", "number_6", "number_7", "number_8", "number_9"]},
-    {"id":"chart", "icons":["chart_bar", "chart_line", "chart_curve", "chart_pie", "chart_organisation"]},
-    {"id":"sign", "icons":["sign_warning", "sign_info", "sign_stop", "sign_help", "sign_cancel"]},
-    {"id":"hard", "icons":["hard_cd", "hard_computer", "hard_controller", "hard_driver_disk", "hard_ipod", "hard_keyboard", "hard_mouse", "hard_printer"]},
-    {"id":"soft", "icons":["soft_bug", "soft_cursor", "soft_database_table", "soft_database", "soft_feed", "soft_folder_explore", "soft_rss", "soft_penguin"]},
-    {"id":"arrow", "icons":["arrow_up", "arrow_down", "arrow_left", "arrow_right"]},
-    {"id":"arrowc", "icons":["arrowc_rotate_anticlockwise", "arrowc_rotate_clockwise", "arrowc_turn_left", "arrowc_turn_right"]},
-    {"id":"people", "icons":["people_group", "people_male1", "people_male2", "people_female1", "people_female2"]},
-    {"id":"mail", "icons":["mail_envelop", "mail_mailbox", "mail_edit", "mail_list"]},
-    {"id":"flag", "icons":["flag_blue", "flag_green", "flag_orange", "flag_pink", "flag_purple", "flag_yellow"]},
-    {"id":"bullet", "icons":["bullet_black", "bullet_blue", "bullet_green", "bullet_orange", "bullet_red", "bullet_pink", "bullet_purple"]},
-    {"id":"tag", "icons":["tag_blue", "tag_green", "tag_orange", "tag_red", "tag_pink", "tag_yellow"]},
-    {"id":"object", "icons":["object_bell", "object_clanbomber", "object_key", "object_pencil", "object_phone", "object_magnifier", "object_clip", "object_music", "object_star", "object_wizard", "object_house", "object_cake", "object_camera", "object_palette", "object_rainbow"]},
-    {"id":"weather", "icons":["weather_clear-night", "weather_clear", "weather_few-clouds-night", "weather_few-clouds", "weather_overcast", "weather_severe-alert", "weather_showers-scattered", "weather_showers", "weather_snow", "weather_storm"]},
-    {"id":"task", "icons":["task_0", "task_25", "task_50", "task_75", "task_100"]}
+    {"id": "face", "icons": ["face_plain", "face_sad", "face_crying", "face_smile", "face_surprise", "face_wink"]},
+    {"id": "funy", "icons": ["funy_angel", "funy_devilish", "funy_glasses", "funy_grin", "funy_kiss", "funy_monkey"]},
+    {"id": "conn", "icons": ["conn_connect", "conn_disconnect"]},
+    {
+        "id": "sport",
+        "icons": ["sport_basketball", "sport_football", "sport_golf", "sport_raquet", "sport_shuttlecock", "sport_soccer", "sport_tennis"]
+    },
+    {"id": "bulb", "icons": ["bulb_light_on", "bulb_light_off"]},
+    {"id": "thumb", "icons": ["thumb_thumb_up", "thumb_thumb_down"]},
+    {"id": "tick", "icons": ["tick_tick", "tick_cross"]},
+    {
+        "id": "onoff",
+        "icons": ["onoff_clock", "onoff_clock_red", "onoff_add", "onoff_delete", "onoff_status_offline", "onoff_status_online"]
+    },
+    {
+        "id": "money",
+        "icons": ["money_money", "money_dollar", "money_euro", "money_pound", "money_yen", "money_coins", "money_ruby"]
+    },
+    {"id": "time", "icons": ["time_calendar", "time_clock", "time_hourglass"]},
+    {
+        "id": "number",
+        "icons": ["number_1", "number_2", "number_3", "number_4", "number_5", "number_6", "number_7", "number_8", "number_9"]
+    },
+    {"id": "chart", "icons": ["chart_bar", "chart_line", "chart_curve", "chart_pie", "chart_organisation"]},
+    {"id": "sign", "icons": ["sign_warning", "sign_info", "sign_stop", "sign_help", "sign_cancel"]},
+    {
+        "id": "hard",
+        "icons": ["hard_cd", "hard_computer", "hard_controller", "hard_driver_disk", "hard_ipod", "hard_keyboard", "hard_mouse", "hard_printer"]
+    },
+    {
+        "id": "soft",
+        "icons": ["soft_bug", "soft_cursor", "soft_database_table", "soft_database", "soft_feed", "soft_folder_explore", "soft_rss", "soft_penguin"]
+    },
+    {"id": "arrow", "icons": ["arrow_up", "arrow_down", "arrow_left", "arrow_right"]},
+    {
+        "id": "arrowc",
+        "icons": ["arrowc_rotate_anticlockwise", "arrowc_rotate_clockwise", "arrowc_turn_left", "arrowc_turn_right"]
+    },
+    {"id": "people", "icons": ["people_group", "people_male1", "people_male2", "people_female1", "people_female2"]},
+    {"id": "mail", "icons": ["mail_envelop", "mail_mailbox", "mail_edit", "mail_list"]},
+    {"id": "flag", "icons": ["flag_blue", "flag_green", "flag_orange", "flag_pink", "flag_purple", "flag_yellow"]},
+    {
+        "id": "bullet",
+        "icons": ["bullet_black", "bullet_blue", "bullet_green", "bullet_orange", "bullet_red", "bullet_pink", "bullet_purple"]
+    },
+    {"id": "tag", "icons": ["tag_blue", "tag_green", "tag_orange", "tag_red", "tag_pink", "tag_yellow"]},
+    {
+        "id": "object",
+        "icons": ["object_bell", "object_clanbomber", "object_key", "object_pencil", "object_phone", "object_magnifier", "object_clip", "object_music", "object_star", "object_wizard", "object_house", "object_cake", "object_camera", "object_palette", "object_rainbow"]
+    },
+    {
+        "id": "weather",
+        "icons": ["weather_clear-night", "weather_clear", "weather_few-clouds-night", "weather_few-clouds", "weather_overcast", "weather_severe-alert", "weather_showers-scattered", "weather_showers", "weather_snow", "weather_storm"]
+    },
+    {"id": "task", "icons": ["task_0", "task_25", "task_50", "task_75", "task_100"]}
 ];
 

mindplot/src/main/javascript/Keyboard.js

@@ -0,0 +1,33 @@
+/*
+ *    Copyright [2015] [wisemapping]
+ *
+ *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+ *   It is basically the Apache License, Version 2.0 (the "License") plus the
+ *   "powered by wisemapping" text requirement on every single page;
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the license at
+ *
+ *       http://www.wisemapping.org/license
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
+
+mindplot.Keyboard = new Class({
+
+    initialize: function () {
+    },
+
+    addShortcut: function (shortcuts, callback) {
+        if (!$.isArray(shortcuts)) {
+            shortcuts = [shortcuts];
+        }
+        _.each(shortcuts, function (shortcut) {
+            $(document).bind('keydown', shortcut, callback);
+        });
+    }
+
+});

mindplot/src/main/javascript/LinkIcon.js

@@ -1,5 +1,5 @@
 /*
- *    Copyright [2012] [wisemapping]
+ *    Copyright [2015] [wisemapping]
  *
  *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
  *   It is basically the Apache License, Version 2.0 (the "License") plus the
@@ -18,8 +18,8 @@
 
 mindplot.LinkIcon = new Class({
 
-    Extends:mindplot.Icon,
-    initialize:function (topic, linkModel, readOnly) {
+    Extends: mindplot.Icon,
+    initialize: function (topic, linkModel, readOnly) {
         $assert(topic, 'topic can not be null');
         $assert(linkModel, 'linkModel can not be null');
 
@@ -31,21 +31,35 @@ mindplot.LinkIcon = new Class({
         this._registerEvents();
     },
 
-    _registerEvents:function () {
+    _registerEvents: function () {
         this._image.setCursor('pointer');
+        this._tip = new mindplot.widget.LinkIconTooltip(this);
 
+        var me = this;
         if (!this._readOnly) {
             // Add on click event to open the editor ...
             this.addEvent('click', function (event) {
-                this._topic.showLinkEditor();
+                me._tip.hide();
+                me._topic.showLinkEditor();
                 event.stopPropagation();
-            }.bind(this));
+            });
+            //FIXME: we shouldn't have timeout of that..
+            this.addEvent("mouseleave", function (event) {
+                window.setTimeout(function () {
+                    if (!$("#linkPopover:hover").length) {
+                        me._tip.hide();
+                    }
+                    event.stopPropagation();
+                }, 100)
+            });
         }
 
-        this._tip = new mindplot.widget.LinkIconTooltip(this);
+        $(this.getImage()._peer._native).mouseenter(function () {
+            me._tip.show();
+        })
     },
 
-    getModel:function () {
+    getModel: function () {
         return this._linksModel;
     }
 });

mindplot/src/main/javascript/LocalStorageManager.js

@@ -1,5 +1,5 @@
 /*
- *    Copyright [2012] [wisemapping]
+ *    Copyright [2015] [wisemapping]
  *
  *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
  *   It is basically the Apache License, Version 2.0 (the "License") plus the
@@ -17,46 +17,44 @@
  */
 
 mindplot.LocalStorageManager = new Class({
-        Extends:mindplot.PersistenceManager,
-        initialize:function (documentUrl,forceLoad) {
+        Extends: mindplot.PersistenceManager,
+        initialize: function (documentUrl, forceLoad) {
             this.parent();
             this.documentUrl = documentUrl;
             this.forceLoad = forceLoad;
         },
 
-        saveMapXml:function (mapId, mapXml, pref, saveHistory, events) {
+        saveMapXml: function (mapId, mapXml, pref, saveHistory, events) {
             localStorage.setItem(mapId + "-xml", mapXml);
         },
 
-        discardChanges:function (mapId) {
+        discardChanges: function (mapId) {
             localStorage.removeItem(mapId + "-xml");
         },
 
-        loadMapDom:function (mapId) {
+        loadMapDom: function (mapId) {
             var xml = localStorage.getItem(mapId + "-xml");
             if (xml == null || this.forceLoad) {
-                var xmlRequest = new Request({
-                    url:this.documentUrl.replace("{id}", mapId),
-                    headers:{"Content-Type":"text/plain","Accept":"application/xml"},
-                    method:'get',
-                    async:false,
-                    onSuccess:function (responseText) {
-                        xml = responseText;
+                $.ajax({
+                    url: this.documentUrl.replace("{id}", mapId),
+                    headers: {"Content-Type": "text/plain", "Accept": "application/xml"},
+                    type: 'get',
+                    dataType: "text",
+                    async: false,
+                    success: function (response) {
+                        xml = response;
                     }
                 });
-                xmlRequest.send();
-
                 // If I could not load it from a file, hard code one.
                 if (xml == null) {
                     throw new Error("Map could not be loaded");
                 }
             }
 
-            var parser = new DOMParser();
-            return  parser.parseFromString(xml, "text/xml");
+            return jQuery.parseXML(xml);
         },
 
-        unlockMap:function (mindmap) {
+        unlockMap: function (mindmap) {
             // Ignore, no implementation required ...
         }
     }

mindplot/src/main/javascript/MainTopic.js

@@ -1,5 +1,5 @@
 /*
- *    Copyright [2012] [wisemapping]
+ *    Copyright [2015] [wisemapping]
  *
  *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
  *   It is basically the Apache License, Version 2.0 (the "License") plus the
@@ -16,15 +16,21 @@
  *   limitations under the License.
  */
 
-mindplot.MainTopic = new Class({
-    Extends:mindplot.Topic,
-    initialize:function (model, options) {
+mindplot.MainTopic = new Class(/** @lends MainTopic */{
+    Extends: mindplot.Topic,
+    /**
+     * @extends mindplot.Topic
+     * @constructs
+     * @param model
+     * @param options
+     */
+    initialize: function (model, options) {
         this.parent(model, options);
     },
 
-    INNER_RECT_ATTRIBUTES:{stroke:'0.5 solid #009900'},
+    INNER_RECT_ATTRIBUTES: {stroke: '0.5 solid #009900'},
 
-    _buildDragShape:function () {
+    _buildDragShape: function () {
         var innerShape = this._buildShape(this.INNER_RECT_ATTRIBUTES, this.getShapeType());
         var size = this.getSize();
         innerShape.setSize(size.width, size.height);
@@ -40,9 +46,9 @@ mindplot.MainTopic = new Class({
         innerShape.setAttribute("fillColor", bgColor);
 
         //  Create group ...
-        var groupAttributes = {width:100, height:100, coordSizeWidth:100, coordSizeHeight:100};
+        var groupAttributes = {width: 100, height: 100, coordSizeWidth: 100, coordSizeHeight: 100};
         var group = new web2d.Group(groupAttributes);
-        group.appendChild(innerShape);
+        group.append(innerShape);
 
         // Add Text ...
         if (this.getShapeType() != mindplot.model.TopicShape.IMAGE) {
@@ -50,12 +56,13 @@ mindplot.MainTopic = new Class({
             var text = this.getText();
             textShape.setText(text);
             textShape.setOpacity(0.5);
-            group.appendChild(textShape);
+            group.append(textShape);
         }
         return group;
     },
 
-    updateTopicShape:function (targetTopic, workspace) {
+    /** */
+    updateTopicShape: function (targetTopic, workspace) {
         // Change figure based on the connected topic ...
         var model = this.getModel();
         var shapeType = model.getShapeType();
@@ -68,7 +75,8 @@ mindplot.MainTopic = new Class({
         }
     },
 
-    disconnect:function (workspace) {
+    /** */
+    disconnect: function (workspace) {
         this.parent(workspace);
         var size = this.getSize();
 
@@ -83,7 +91,7 @@ mindplot.MainTopic = new Class({
         innerShape.setVisibility(true);
     },
 
-    _updatePositionOnChangeSize:function (oldSize, newSize) {
+    _updatePositionOnChangeSize: function (oldSize, newSize) {
 
         var xOffset = Math.round((newSize.width - oldSize.width) / 2);
         var pos = this.getPosition();
@@ -97,11 +105,13 @@ mindplot.MainTopic = new Class({
         }
     },
 
-    workoutIncomingConnectionPoint:function (sourcePosition) {
+    /** */
+    workoutIncomingConnectionPoint: function (sourcePosition) {
         return mindplot.util.Shape.workoutIncomingConnectionPoint(this, sourcePosition);
     },
 
-    workoutOutgoingConnectionPoint:function (targetPosition) {
+    /** */
+    workoutOutgoingConnectionPoint: function (targetPosition) {
         $assert(targetPosition, 'targetPoint can not be null');
         var pos = this.getPosition();
         var isAtRight = mindplot.util.Shape.isAtRight(targetPosition, pos);

mindplot/src/main/javascript/Messages.js

@@ -1,5 +1,5 @@
 /*
- *    Copyright [2012] [wisemapping]
+ *    Copyright [2015] [wisemapping]
  *
  *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
  *   It is basically the Apache License, Version 2.0 (the "License") plus the
@@ -17,8 +17,8 @@
  */
 
 mindplot.Messages = new Class({
-    Static:{
-        init:function (locale) {
+    Static: {
+        init: function (locale) {
             locale = $defined(locale) ? locale : 'en';
             var bundle = mindplot.Messages.BUNDLES[locale];
             if (bundle == null && locale.indexOf("_") != -1) {

mindplot/src/main/javascript/MultilineTextEditor.js

@@ -1,5 +1,5 @@
 /*
- *    Copyright [2012] [wisemapping]
+ *    Copyright [2015] [wisemapping]
  *
  *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
  *   It is basically the Apache License, Version 2.0 (the "License") plus the
@@ -17,55 +17,50 @@
  */
 
 mindplot.MultilineTextEditor = new Class({
-    Extends:Events,
-    initialize:function () {
+    Extends: mindplot.Events,
+    initialize: function () {
         this._topic = null;
         this._timeoutId = -1;
     },
 
-    _buildEditor:function () {
+    _buildEditor: function () {
 
-        var result = new Element('div');
-        result.setStyles({
-                position:"absolute",
-                display:"none",
-                zIndex:"8",
-                overflow:"hidden",
-                border:"0 none"
-            }
-        );
+        var result = $('<div></div>')
+            .attr('id', 'textContainer')
+            .css({
+                display: "none",
+                zIndex: "8",
+                overflow: "hidden",
+                border: "0 none"
+            });
 
-        var textareaElem = new Element('textarea',
-            {   tabindex:'-1',
-                value:"",
-                wrap:'off'
-            }
-        );
 
-        textareaElem.setStyles({
-            border:"1px gray dashed",
-            background:"rgba(98, 135, 167, .3)",
-            outline:'0 none',
-            resize:'none',
-            overflow:"hidden"
-        });
-        textareaElem.inject(result);
+        var textareaElem = $('<textarea tabindex="-1" value="" wrap="off" ></textarea>')
+            .css({
+                border: "1px gray dashed",
+                background: "rgba(98, 135, 167, .3)",
+                outline: '0 none',
+                resize: 'none',
+                overflow: "hidden"
+            });
+
+        result.append(textareaElem);
         return result;
     },
 
-    _registerEvents:function (containerElem) {
+    _registerEvents: function (containerElem) {
         var textareaElem = this._getTextareaElem();
-
-        textareaElem.addEvent('keydown', function (event) {
-            switch (event.key) {
+        var me = this;
+        textareaElem.on('keydown', function (event) {
+            switch (jQuery.hotkeys.specialKeys[event.keyCode]) {
                 case 'esc':
-                    this.close(false);
+                    me.close(false);
                     break;
                 case 'enter':
-                    if (event.meta || event.control) {
+                    if (event.metaKey || event.ctrlKey) {
 
                         // Add return ...
-                        var text = textareaElem.value;
+                        var text = textareaElem.val();
                         var cursorPosition = text.length;
                         if (textareaElem.selectionStart) {
                             cursorPosition = textareaElem.selectionStart;
@@ -76,12 +71,12 @@ mindplot.MultilineTextEditor = new Class({
                         if (cursorPosition < text.length) {
                             tail = text.substring(cursorPosition, text.length);
                         }
-                        textareaElem.value = head + "\n" + tail;
+                        textareaElem.val(head + "\n" + tail);
 
                         // Position cursor ...
-                        if (textareaElem.setSelectionRange) {
+                        if (textareaElem[0].setSelectionRange) {
                             textareaElem.focus();
-                            textareaElem.setSelectionRange(cursorPosition + 1, cursorPosition + 1);
+                            textareaElem[0].setSelectionRange(cursorPosition + 1, cursorPosition + 1);
                         } else if (textareaElem.createTextRange) {
                             var range = textareaElem.createTextRange();
                             range.moveStart('character', cursorPosition + 1);
@@ -90,62 +85,73 @@ mindplot.MultilineTextEditor = new Class({
 
                     }
                     else {
-                        this.close(true);
+                        me.close(true);
                     }
                     break;
+                case 'tab':
+                    event.preventDefault();
+                    var start = $(this).get(0).selectionStart;
+                    var end = $(this).get(0).selectionEnd;
+
+                    // set textarea value to: text before caret + tab + text after caret
+                    $(this).val($(this).val().substring(0, start) + "\t" + $(this).val().substring(end));
+
+                    // put caret at right position again
+                    $(this).get(0).selectionStart = $(this).get(0).selectionEnd = start + 1;
+                    break;
             }
             event.stopPropagation();
-        }.bind(this));
+        });
 
-        textareaElem.addEvent('keypress', function (event) {
+        textareaElem.on('keypress', function (event) {
             event.stopPropagation();
         });
 
-        textareaElem.addEvent('keyup', function (event) {
-            var text = this._getTextareaElem().value;
-            this.fireEvent('input', [event, text]);
-            this._adjustEditorSize();
-        }.bind(this));
+        textareaElem.on('keyup', function (event) {
+            var text = me._getTextareaElem().val();
+            me.fireEvent('input', [event, text]);
+            me._adjustEditorSize();
+        });
 
         // If the user clicks on the input, all event must be ignored ...
-        containerElem.addEvent('click', function (event) {
+        containerElem.on('click', function (event) {
             event.stopPropagation();
         });
-        containerElem.addEvent('dblclick', function (event) {
+        containerElem.on('dblclick', function (event) {
             event.stopPropagation();
         });
-        containerElem.addEvent('mousedown', function (event) {
+        containerElem.on('mousedown', function (event) {
             event.stopPropagation();
         });
     },
 
-    _adjustEditorSize:function () {
+    _adjustEditorSize: function () {
 
         if (this.isVisible()) {
             var textElem = this._getTextareaElem();
 
-            var lines = textElem.value.split('\n');
+            var lines = textElem.val().split('\n');
             var maxLineLength = 1;
-            lines.each(function (line) {
+            _.each(lines, function (line) {
                 if (maxLineLength < line.length)
                     maxLineLength = line.length;
             });
 
-            textElem.setAttribute('cols', maxLineLength);
-            textElem.setAttribute('rows', lines.length);
+            textElem.attr('cols', maxLineLength);
+            textElem.attr('rows', lines.length);
 
-            this._containerElem.setStyles({
-                width:(maxLineLength + 3) + 'em',
-                height:textElem.getSize().height
+            this._containerElem.css({
+                width: (maxLineLength + 3) + 'em',
+                height: textElem.height()
             });
         }
     },
 
-    isVisible:function () {
-        return $defined(this._containerElem) && this._containerElem.getStyle('display') == 'block';
+    isVisible: function () {
+        return $defined(this._containerElem) && this._containerElem.css('display') == 'block';
     },
 
-    _updateModel:function () {
+    _updateModel: function () {
 
         if (this._topic.getText() != this._getText()) {
             var text = this._getText();
@@ -156,7 +162,7 @@ mindplot.MultilineTextEditor = new Class({
         }
     },
 
-    show:function (topic, text) {
+    show: function (topic, text) {
         // Close a previous node editor if it's opened ...
         if (this._topic) {
             this.close(false);
@@ -166,7 +172,7 @@ mindplot.MultilineTextEditor = new Class({
         if (!this.isVisible()) {
             //Create editor ui
             var containerElem = this._buildEditor();
-            containerElem.inject($(document.body));
+            $('body').append(containerElem);
 
             this._containerElem = containerElem;
             this._registerEvents(containerElem);
@@ -174,7 +180,7 @@ mindplot.MultilineTextEditor = new Class({
         }
     },
 
-    _showEditor:function (defaultText) {
+    _showEditor: function (defaultText) {
 
         var topic = this._topic;
 
@@ -187,31 +193,32 @@ mindplot.MultilineTextEditor = new Class({
         font.size = nodeText.getHtmlFontSize();
         font.color = nodeText.getColor();
         this._setStyle(font);
-
+        var me = this;
         // Set editor's initial size
         var displayFunc = function () {
             // Position the editor and set the size...
             var textShape = topic.getTextShape();
-            textShape.positionRelativeTo(this._containerElem, {
-                position:{x:'left', y:'top'},
-                edge:{x:'left', y:'top'}
-            });
-            this._containerElem.setStyle('display', 'block');
+
+            me._containerElem.css('display', 'block');
+
+            //FIXME: Im not sure if this is best way...
+            var shapePosition = textShape.getNativePosition();
+            me._containerElem.offset(shapePosition);
 
             // Set editor's initial text ...
             var text = $defined(defaultText) ? defaultText : topic.getText();
-            this._setText(text);
+            me._setText(text);
 
             // Set the element focus and select the current text ...
-            var inputElem = this._getTextareaElem();
-            this._positionCursor(inputElem, !$defined(defaultText));
+            var inputElem = me._getTextareaElem();
+            me._positionCursor(inputElem, !$defined(defaultText));
 
-        }.bind(this);
+        };
 
         this._timeoutId = displayFunc.delay(10);
     },
 
-    _setStyle:function (fontStyle) {
+    _setStyle: function (fontStyle) {
         var inputField = this._getTextareaElem();
         if (!$defined(fontStyle.font)) {
             fontStyle.font = "Arial";
@@ -226,56 +233,64 @@ mindplot.MultilineTextEditor = new Class({
             fontStyle.size = 12;
         }
         var style = {
-            fontSize:fontStyle.size + "px",
-            fontFamily:fontStyle.font,
-            fontStyle:fontStyle.style,
-            fontWeight:fontStyle.weight,
-            color:fontStyle.color
+            fontSize: fontStyle.size + "px",
+            fontFamily: fontStyle.font,
+            fontStyle: fontStyle.style,
+            fontWeight: fontStyle.weight,
+            color: fontStyle.color
         };
-        inputField.setStyles(style);
-        this._containerElem.setStyles(style);
+        inputField.css(style);
+        this._containerElem.css(style);
     },
 
-    _setText:function (text) {
+    _setText: function (text) {
         var textareaElem = this._getTextareaElem();
-        textareaElem.value = text;
+        textareaElem.val(text);
         this._adjustEditorSize();
     },
 
-    _getText:function () {
-        return this._getTextareaElem().value;
+    _getText: function () {
+        return this._getTextareaElem().val();
     },
 
-    _getTextareaElem:function () {
-        return this._containerElem.getElement('textarea');
+    _getTextareaElem: function () {
+        return this._containerElem.find('textarea');
     },
 
-    _positionCursor:function (textareaElem, selectText) {
+    _positionCursor: function (textareaElem, selectText) {
         textareaElem.focus();
+        var lengh = textareaElem.val().length;
         if (selectText) {
             // Mark text as selected ...
             if (textareaElem.createTextRange) {
                 var rang = textareaElem.createTextRange();
                 rang.select();
-                rang.move("character", textareaElem.value.length);
+                rang.move("character", lengh);
             }
             else {
-                textareaElem.setSelectionRange(0, textareaElem.value.length);
+                textareaElem[0].setSelectionRange(0, lengh);
             }
 
         } else {
             // Move the cursor to the last character ..
             if (textareaElem.createTextRange) {
                 var range = textareaElem.createTextRange();
-                range.move("character", textareaElem.value.length);
+                range.move("character", lengh);
             } else {
-                textareaElem.selectionStart = textareaElem.value.length;
+                if (Browser.ie11) {
+                    textareaElem[0].selectionStart = lengh;
+                    textareaElem[0].selectionEnd = lengh;
+                } else {
+                    textareaElem.selectionStart = lengh;
+                    textareaElem.selectionEnd = lengh;
+                }
+                textareaElem.focus();
             }
         }
 
     },
 
-    close:function (update) {
+    close: function (update) {
         if (this.isVisible() && this._topic) {
             // Update changes ...
             clearTimeout(this._timeoutId);
@@ -288,7 +303,7 @@ mindplot.MultilineTextEditor = new Class({
             this._topic.getTextShape().setVisibility(true);
 
             // Remove it form the screen ...
-            this._containerElem.dispose();
+            this._containerElem.remove();
             this._containerElem = null;
             this._timeoutId = -1;
         }

mindplot/src/main/javascript/NodeGraph.js

@@ -1,5 +1,5 @@
 /*
- *    Copyright [2012] [wisemapping]
+ *    Copyright [2015] [wisemapping]
  *
  *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
  *   It is basically the Apache License, Version 2.0 (the "License") plus the
@@ -16,92 +16,124 @@
  *   limitations under the License.
  */
 
-mindplot.NodeGraph = new Class({
-    initialize:function(nodeModel, options) {
+mindplot.NodeGraph = new Class(/** @lends NodeGraph */{
+    /**
+     * @constructs
+     * @param {mindplot.model.NodeModel} nodeModel
+     * @param {Object<Number, String, Boolean>} options
+     * @throws will throw an error if nodeModel is null or undefined
+     */
+    initialize: function (nodeModel, options) {
         $assert(nodeModel, "model can not be null");
 
         this._options = options;
         this._mouseEvents = true;
         this.setModel(nodeModel);
         this._onFocus = false;
-        this._event = new Events();
-        this._size = {width:50,height:20};
+        this._size = {width: 50, height: 20};
     },
 
-    isReadOnly : function(){
+    /** @return true if option is set to read-only */
+    isReadOnly: function () {
         return this._options.readOnly;
     },
 
-    getType : function() {
+    /** @return model type */
+    getType: function () {
         var model = this.getModel();
         return model.getType();
     },
 
-    setId : function(id) {
+    /**
+     * @param {String} id
+     * @throws will throw an error if the topic id is not a number
+     */
+    setId: function (id) {
         $assert(typeof  topic.getId() == "number", "id is not a number:" + id);
         this.getModel().setId(id);
     },
 
-    _set2DElement : function(elem2d) {
+    _set2DElement: function (elem2d) {
         this._elem2d = elem2d;
     },
 
-    get2DElement : function() {
+    /**
+     * @return 2D element
+     * @throws will throw an error if the element is null or undefined within node graph
+     */
+    get2DElement: function () {
         $assert(this._elem2d, 'NodeGraph has not been initialized properly');
         return this._elem2d;
     },
 
-    setPosition : function(point, fireEvent) {
+    /** @abstract */
+    setPosition: function (point, fireEvent) {
         throw "Unsupported operation";
     },
 
-    addEvent : function(type, listener) {
+    /** */
+    addEvent: function (type, listener) {
         var elem = this.get2DElement();
         elem.addEvent(type, listener);
     },
 
-    removeEvent : function(type, listener) {
+    /** */
+    removeEvent: function (type, listener) {
         var elem = this.get2DElement();
         elem.removeEvent(type, listener);
     },
 
-    fireEvent: function(type, event) {
+    /** */
+    fireEvent: function (type, event) {
         var elem = this.get2DElement();
-        elem.fireEvent(type, event);
+        elem.trigger(type, event);
     },
 
-    setMouseEventsEnabled : function(isEnabled) {
+    /** */
+    setMouseEventsEnabled: function (isEnabled) {
         this._mouseEvents = isEnabled;
     },
 
-    isMouseEventsEnabled : function() {
+    /** */
+    isMouseEventsEnabled: function () {
         return this._mouseEvents;
     },
 
-    getSize : function() {
+    /** @return {Object<Number>} size*/
+    getSize: function () {
         return this._size;
     },
 
-    setSize : function(size) {
+    /** @param {Object<Number>} size*/
+    setSize: function (size) {
         this._size.width = parseInt(size.width);
         this._size.height = parseInt(size.height);
     },
 
-    getModel:function() {
+    /**
+     * @return {mindplot.model.NodeModel} the node model
+     */
+    getModel: function () {
         $assert(this._model, 'Model has not been initialized yet');
-        return  this._model;
+        return this._model;
     },
 
-    setModel : function(model) {
+    /**
+     * @param {mindplot.NodeModel} model the node model
+     * @throws will throw an error if model is null or undefined
+     */
+    setModel: function (model) {
         $assert(model, 'Model can not be null');
         this._model = model;
     },
 
-    getId : function() {
+    /** */
+    getId: function () {
         return this._model.getId();
     },
 
-    setOnFocus : function(focus) {
+    /** */
+    setOnFocus: function (focus) {
         if (this._onFocus != focus) {
 
             this._onFocus = focus;
@@ -120,36 +152,51 @@ mindplot.NodeGraph = new Class({
             this.closeEditors();
 
             // Fire event ...
-            this.fireEvent(focus ? 'ontfocus' : 'ontblur',this);
+            this.fireEvent(focus ? 'ontfocus' : 'ontblur', this);
 
         }
     },
 
-    isOnFocus : function() {
+    /** @return {Boolean} true if the node graph is on focus */
+    isOnFocus: function () {
         return this._onFocus;
     },
 
-    dispose : function(workspace) {
+    /** */
+    dispose: function (workspace) {
         this.setOnFocus(false);
         workspace.removeChild(this);
     },
 
-    createDragNode : function(layoutManager) {
+    /** */
+    createDragNode: function (layoutManager) {
         var dragShape = this._buildDragShape();
-        return  new mindplot.DragTopic(dragShape, this, layoutManager);
+        return new mindplot.DragTopic(dragShape, this, layoutManager);
     },
 
-    _buildDragShape : function() {
+    _buildDragShape: function () {
         $assert(false, '_buildDragShape must be implemented by all nodes.');
     },
 
-    getPosition : function() {
+    /** */
+    getPosition: function () {
         var model = this.getModel();
         return model.getPosition();
     }
 });
 
-mindplot.NodeGraph.create = function(nodeModel, options) {
+/**
+ * creates a new topic from the given node model
+ * @memberof mindplot.Nodegraph
+ * @param {mindplot.model.NodeModel} nodeModel
+ * @param {Object} options
+ * @throws will throw an error if nodeModel is null or undefined
+ * @throws will throw an error if the nodeModel's type is null or undefined
+ * @throws will throw an error if the node type cannot be recognized as either central or main
+ * topic type
+ * @return {mindplot.CentralTopic|mindplot.MainTopic} the new topic
+ */
+mindplot.NodeGraph.create = function (nodeModel, options) {
     $assert(nodeModel, 'Model can not be null');
 
     var type = nodeModel.getType();
@@ -158,8 +205,7 @@ mindplot.NodeGraph.create = function(nodeModel, options) {
     var result;
     if (type == mindplot.model.INodeModel.CENTRAL_TOPIC_TYPE) {
         result = new mindplot.CentralTopic(nodeModel, options);
-    } else
-    if (type == mindplot.model.INodeModel.MAIN_TOPIC_TYPE) {
+    } else if (type == mindplot.model.INodeModel.MAIN_TOPIC_TYPE) {
         result = new mindplot.MainTopic(nodeModel, options);
     } else {
         $assert(false, "unsupported node type:" + type);

mindplot/src/main/javascript/NoteIcon.js

@@ -1,5 +1,5 @@
 /*
- *    Copyright [2012] [wisemapping]
+ *    Copyright [2015] [wisemapping]
  *
  *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
  *   It is basically the Apache License, Version 2.0 (the "License") plus the
@@ -17,8 +17,8 @@
  */
 
 mindplot.NoteIcon = new Class({
-    Extends:mindplot.Icon,
-    initialize:function (topic, noteModel, readOnly) {
+    Extends: mindplot.Icon,
+    initialize: function (topic, noteModel, readOnly) {
         $assert(topic, 'topic can not be null');
 
         this.parent(mindplot.NoteIcon.IMAGE_URL);
@@ -29,55 +29,50 @@ mindplot.NoteIcon = new Class({
         this._registerEvents();
     },
 
-    _registerEvents:function () {
+    _registerEvents: function () {
         this._image.setCursor('pointer');
+        var me = this;
 
         if (!this._readOnly) {
-
             // Add on click event to open the editor ...
             this.addEvent('click', function (event) {
-                this._topic.showNoteEditor();
+                me._topic.showNoteEditor();
                 event.stopPropagation();
-            }.bind(this));
+            });
         }
-
-        this._tip = new mindplot.widget.FloatingTip(this.getImage()._peer._native, {
+        this._tip = new mindplot.widget.FloatingTip($(me.getImage()._peer._native), {
+            title: $msg('NOTE'),
+            container: 'body',
             // Content can also be a function of the target element!
-            content:function () {
-                var result = new Element('div');
-                result.setStyles({padding:'5px'});
-
-                var title = new Element('div', {text:$msg('NOTE')});
-                title.setStyles({
-                    'font-weight':'bold',
-                    color:'black',
-                    'padding-bottom':'5px',
-                    width:'100px'
-                });
-                title.inject(result);
-
-                var text = new Element('div', {text:this._linksModel.getText()});
-                text.setStyles({
-                        'white-space':'pre-wrap',
-                        'word-wrap':'break-word'
-                    }
-                );
-                text.inject(result);
-
-
-                return result;
-            }.bind(this),
-            html:true,
-            position:'bottom',
-            arrowOffset:10,
-            center:true,
-            arrowSize:15,
-            offset:{x:10, y:20},
-            className:'notesTip'
+            content: function () {
+                return me._buildTooltipContent();
+            },
+            html: true,
+            placement: 'bottom',
+            destroyOnExit: true
         });
+
     },
 
-    getModel:function () {
+    _buildTooltipContent: function () {
+        if ($("body").find("#textPopoverNote").length == 1) {
+            var text = $("body").find("#textPopoverNote");
+            text.text(this._linksModel.getText());
+        } else {
+            var result = $('<div id="textPopoverNote"></div>').css({padding: '5px'});
+
+            var text = $('<div></div>').text(this._linksModel.getText())
+                .css({
+                    'white-space': 'pre-wrap',
+                    'word-wrap': 'break-word'
+                }
+            );
+            result.append(text);
+            return result;
+        }
+    },
+
+    getModel: function () {
         return this._linksModel;
     }
 });