Fix add links.

mindplot/pom.xml

@@ -110,7 +110,8 @@
                                     <filelist dir="${basedir}/src/main/javascript/" files="BubbleTip.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/" files="Icon.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/" files="LinkIcon.js"/>
-                                    <filelist dir="${basedir}/src/main/javascript/" files="Note.js"/>
+                                    <filelist dir="${basedir}/src/main/javascript/" files="NoteIcon.js"/>
+
                                     <filelist dir="${basedir}/src/main/javascript/" files="ActionIcon.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/" files="ImageIcon.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/" files="model/IconModel.js"/>
@@ -130,7 +131,7 @@
                                     <filelist dir="${basedir}/src/main/javascript/commands/"
                                               files="AddTopicCommand.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/"
-                                              files="commands/AddLinkToTopicCommand.js"/>
+                                              files="commands/ChangeLinkToTopicCommand.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/"
                                               files="commands/RemoveLinkFromTopicCommand.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/"
@@ -189,6 +190,8 @@
                                     <filelist dir="${basedir}/src/main/javascript/widget/" files="NoteEditor.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/widget/" files="LinkEditor.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/widget/" files="FloatingTip.js"/>
+                                    <filelist dir="${basedir}/src/main/javascript/widget/" files="LinkIconTooltip.js"/>
+
 
                                     <filelist dir="${basedir}/src/main/javascript/"
                                               files="widget/ColorPickerPanel.js"/>

mindplot/src/main/javascript/ActionDispatcher.js

@@ -27,7 +27,7 @@ mindplot.ActionDispatcher = new Class({
         throw "method must be implemented.";
     },
 
-    addLinkToTopic: function(topicId, url) {
+    changeLinkToTopic: function(topicId, url) {
         throw "method must be implemented.";
     },
 

mindplot/src/main/javascript/IconGroup.js

@@ -99,6 +99,7 @@ mindplot.IconGroup = new Class({
 
     removeIconByUrl : function(url) {
         var icon = this._findIconFromUrl(url);
+        $assert(icon,'icon could not be found');
         this._removeIcon(icon);
     },
 

mindplot/src/main/javascript/LinkIcon.js

@@ -18,179 +18,40 @@
 
 mindplot.LinkIcon = new Class({
 
-    Extends:mindplot.Icon,
+    Extends: mindplot.Icon,
-    initialize:function(urlModel, topic, designer) {
+    initialize : function(topic, linkModel) {
-        $assert(urlModel, "urlModel can not be null");
+        $assert(topic, 'topic can not be null');
-        $assert(designer, "designer can not be null");
+        $assert(linkModel, 'linkModel can not be null');
-        $assert(topic, "topic can not be null");
+
 
         this.parent(mindplot.LinkIcon.IMAGE_URL);
-
+        this._noteModel = linkModel;
-        var divContainer = designer.getWorkSpace().getScreenManager().getContainer();
-        var bubbleTip = mindplot.BubbleTip.getInstance(divContainer);
-
-        this._linkModel = urlModel;
         this._topic = topic;
-        this._designer = designer;
-        var image = this.getImage();
-        var imgContainer = new Element('div').setStyles({textAlign:'center', cursor:'pointer'});
-        this._img = new Element('img');
-        var url = urlModel.getUrl();
-        this._img.src = 'http://open.thumbshots.org/image.pxf?url=' + url;
 
-        if (url.indexOf('http:') == -1) {
+        this._registerEvents();
-            url = 'http://' + url;
-        }
-        this._img.alt = url;
-        this._url = url;
-        var openWindow = function() {
-            var wOpen;
-            var sOptions;
-
-            sOptions = 'status=yes,menubar=yes,scrollbars=yes,resizable=yes,toolbar=yes';
-            sOptions = sOptions + ',width=' + (screen.availWidth - 10).toString();
-            sOptions = sOptions + ',height=' + (screen.availHeight - 122).toString();
-            sOptions = sOptions + ',screenX=0,screenY=0,left=0,top=0';
-            var url = this._img.alt;
-            wOpen = window.open(url, "link", "width=100px, height=100px");
-            wOpen.focus();
-            wOpen.moveTo(0, 0);
-            wOpen.resizeTo(screen.availWidth, screen.availHeight);
-        };
-
-        this._img.addEvent('click', openWindow.bindWithEvent(this));
-        this._img.inject(imgContainer);
-
-        var attribution = new Element('div').setStyles({fontSize:10, textAlign:"center"});
-        attribution.innerHTML = "<a href='http://www.thumbshots.org' target='_blank' title='About Thumbshots thumbnails' style='color:#08468F'>About Thumbshots thumbnails</a>";
-
-        var container = new Element('div');
-        var element = new Element('div').setStyles({borderBottom:'1px solid #e5e5e5'});
-
-        var title = new Element('div').setStyles({fontSize:12, textAlign:'center'});
-        this._link = new Element('span');
-        this._link.href = url;
-        this._link.innerHTML = url;
-        this._link.setStyle("text-decoration", "underline");
-        this._link.setStyle("cursor", "pointer");
-        this._link.inject(title);
-        this._link.addEvent('click', openWindow.bindWithEvent(this));
-        title.inject(element);
-
-        imgContainer.inject(element);
-        attribution.inject(element);
-        element.inject(container);
-
-        if (!$defined(designer._readOnly) || ($defined(designer._readOnly) && !designer._readOnly)) {
-            var buttonContainer = new Element('div').setStyles({paddingTop:5, textAlign:'center'});
-            var editBtn = new Element('input', {type:'button', 'class':'btn-primary', value:'Edit'}).addClass('button').inject(buttonContainer);
-            var removeBtn = new Element('input', {type:'button', value:'Remove','class':'btn-primary'}).addClass('button').inject(buttonContainer);
-
-            editBtn.setStyle("margin-right", "3px");
-            removeBtn.setStyle("margin-left", "3px");
-
-            removeBtn.addEvent('click', function(event) {
-
-                var actionDispatcher = mindplot.ActionDispatcher.getInstance();
-                actionDispatcher.removeLinkFromTopic(this._topic.getId());
-                bubbleTip.forceClose();
-            }.bindWithEvent(this));
-
-            var okButtonId = 'okLinkButtonId';
-            editBtn.addEvent('click', function(event) {
-                var topic = this._topic;
-                var designer = this._designer;
-                var link = this;
-                var okFunction = function(e) {
-                    var result = false;
-                    var url = urlInput.value;
-                    if ("" != url.trim()) {
-                        link._img.src = 'http://open.thumbshots.org/image.pxf?url=' + url;
-                        link._img.alt = url;
-                        link._link.href = url;
-                        link._link.innerHTML = url;
-                        this._linkModel.setUrl(url);
-                        result = true;
-                    }
-                    return result;
-                };
-                var msg = new Element('div');
-                var urlText = new Element('div').inject(msg);
-                urlText.innerHTML = "URL:";
-
-                var formElem = new Element('form', {'action': 'none', 'id':'linkFormId'});
-                var urlInput = new Element('input', {'type': 'text', 'size':30,'value':url});
-                urlInput.inject(formElem);
-                formElem.inject(msg);
-
-                formElem.addEvent('submit', function(e) {
-                    $(okButtonId).fireEvent('click', e);
-                    e = new Event(e);
-                    e.stop();
-                });
-
-
-                var dialog = mindplot.LinkIcon.buildDialog(designer, okFunction, okButtonId);
-                dialog.adopt(msg).show();
-
-            }.bindWithEvent(this));
-            buttonContainer.inject(container);
-        }
-
-        var linkIcon = this;
-        image.addEvent('mouseover', function(event) {
-            bubbleTip.open(event, container, linkIcon);
-        });
-        image.addEvent('mousemove', function(event) {
-            bubbleTip.updatePosition(event);
-        });
-        image.addEvent('mouseout', function(event) {
-            bubbleTip.close(event);
-        });
     },
 
-    getUrl : function() {
+    _registerEvents : function() {
-        return this._url;
+        this._image.setCursor('pointer');
+
+        // Add on click event to open the editor ...
+        this.addEvent('click', function(event) {
+            this._topic.showLinkEditor();
+            event.stopPropagation();
+        }.bind(this));
+
+        this._tip = new mindplot.widget.LinkIconTooltip(this);
     },
 
     getModel : function() {
-        return this._linkModel;
+        return this._noteModel;
+    },
+
+    remove : function() {
+        var actionDispatcher = mindplot.ActionDispatcher.getInstance();
+        actionDispatcher.removeLinkFromTopic(this._topic.getId());
     }
 });
-
-mindplot.LinkIcon.buildDialog = function(designer, okFunction, okButtonId) {
-    var windoo = new Windoo({
-        title: 'Write link URL',
-        theme: Windoo.Themes.wise,
-        modal:true,
-        buttons:{'menu':false, 'close':false, 'minimize':false, 'roll':false, 'maximize':false},
-        destroyOnClose:true,
-        height:130
-    });
-
-    var cancel = new Element('input', {'type': 'button', 'class':'btn-primary', 'value': 'Cancel'}).setStyle('margin-right', "5px");
-    cancel.setStyle('margin-left', "5px");
-    cancel.addEvent('click', function(event) {
-        $(document).addEvent('keydown', designer.keyEventHandler.bindWithEvent(designer));
-        windoo.close();
-    }.bindWithEvent(this));
-
-    var ok = new Element('input', {'type': 'button', 'class':'btn-primary','value': 'Ok','id':okButtonId}).setStyle('marginRight', 10);
-    ok.addEvent('click', function(event) {
-        var couldBeUpdated = okFunction.attempt();
-        if (couldBeUpdated) {
-            $(document).addEvent('keydown', designer.keyEventHandler.bindWithEvent(designer));
-            windoo.close();
-        }
-    }.bindWithEvent(this));
-
-    var panel = new Element('div', {'styles': {'padding-top': 10, 'text-align': 'right'}}).adopt(ok, cancel);
-
-    windoo.addPanel(panel);
-    $(document).removeEvents('keydown');
-    return windoo;
-};
-
 mindplot.LinkIcon.IMAGE_URL = "../images/world_link.png";
 
  

mindplot/src/main/javascript/NoteIcon.js

@@ -16,12 +16,12 @@
  *   limitations under the License.
  */
 
-mindplot.Note = new Class({
+mindplot.NoteIcon = new Class({
     Extends: mindplot.Icon,
     initialize : function(topic, noteModel) {
         $assert(topic, 'topic can not be null');
 
-        this.parent(mindplot.Note.IMAGE_URL);
+        this.parent(mindplot.NoteIcon.IMAGE_URL);
         this._noteModel = noteModel;
         this._topic = topic;
 
@@ -37,7 +37,7 @@ mindplot.Note = new Class({
             event.stopPropagation();
         }.bind(this));
 
-        this.tip = new mindplot.widget.FloatingTip(this.getImage()._peer._native, {
+        this._tip = new mindplot.widget.FloatingTip(this.getImage()._peer._native, {
             // Content can also be a function of the target element!
             content: function() {
                 var result = new Element('div');
@@ -82,5 +82,5 @@ mindplot.Note = new Class({
     }
 });
 
-mindplot.Note.IMAGE_URL = "../images/note.png";
+mindplot.NoteIcon.IMAGE_URL = "../images/note.png";
 

mindplot/src/main/javascript/StandaloneActionDispatcher.js

@@ -33,8 +33,8 @@ mindplot.StandaloneActionDispatcher = new Class({
         this.execute(command);
     },
 
-    addLinkToTopic: function(topicId, url) {
+    changeLinkToTopic: function(topicId, url) {
-        var command = new mindplot.commands.AddLinkToTopicCommand(topicId, url);
+        var command = new mindplot.commands.ChangeLinkToTopicCommand(topicId, url);
         this.execute(command);
     },
 

mindplot/src/main/javascript/Topic.js

@@ -280,7 +280,6 @@ mindplot.Topic = new Class({
         //Links
         var links = model.getLinks();
         for (var i = 0; i < links.length; i++) {
-            this._hasLink = true;
             this._link = new mindplot.LinkIcon(links[i], this, designer);
             result.addIcon(this._link);
         }
@@ -288,22 +287,21 @@ mindplot.Topic = new Class({
         //Notes
         var notes = model.getNotes();
         for (var j = 0; j < notes.length; j++) {
-            this._hasNote = true;
+            this._note = new mindplot.NoteIcon(this, notes[j]);
-            this._note = new mindplot.Note(this, notes[j]);
             result.addIcon(this._note);
         }
 
         return result;
     },
 
-    addLink : function(url, designer) {
+    addLink : function(url) {
         var iconGroup = this.getOrBuildIconGroup();
         var model = this.getModel();
         var linkModel = model.createLink(url);
         model.addLink(linkModel);
-        this._link = new mindplot.LinkIcon(linkModel, this, designer);
+
+        this._link = new mindplot.LinkIcon(this, linkModel);
         iconGroup.addIcon(this._link);
-        this._hasLink = true;
         this._adjustShapes();
     },
 
@@ -314,9 +312,8 @@ mindplot.Topic = new Class({
         var noteModel = model.createNote(text);
         model.addNote(noteModel);
 
-        this._note = new mindplot.Note(this, noteModel);
+        this._note = new mindplot.NoteIcon(this, noteModel);
         iconGroup.addIcon(this._note);
-        this._hasNote = true;
         this._adjustShapes();
     },
 
@@ -349,19 +346,18 @@ mindplot.Topic = new Class({
     },
 
     removeLink : function() {
+        // Update model ...
         var model = this.getModel();
         var links = model.getLinks();
         model._removeLink(links[0]);
+
+        // Remove UI ...
         var iconGroup = this.getIconGroup();
         if ($defined(iconGroup)) {
-            iconGroup.removeIcon(mindplot.LinkIcon.IMAGE_URL);
+            iconGroup.removeIconByUrl(mindplot.LinkIcon.IMAGE_URL);
-            if (iconGroup.getIcons().length == 0) {
-                this.get2DElement().removeChild(iconGroup.getNativeElement());
-                this._iconsGroup = null;
-            }
         }
+
         this._link = null;
-        this._hasLink = false;
         this._adjustShapes();
     },
 
@@ -374,16 +370,19 @@ mindplot.Topic = new Class({
         // Remove UI ...
         var iconGroup = this.getIconGroup();
         if ($defined(iconGroup)) {
-            iconGroup.removeIconByUrl(mindplot.Note.IMAGE_URL);
+            iconGroup.removeIconByUrl(mindplot.NoteIcon.IMAGE_URL);
         }
 
         this._note = null;
-        this._hasNote = false;
         this._adjustShapes();
     },
 
     hasNote : function() {
-        return this._hasNote;
+        return this.getModel().getNotes().length != 0;
+    },
+
+    hasLink : function() {
+        return this.getModel().getLinks().length != 0;
     },
 
     addRelationship : function(relationship) {
@@ -747,9 +746,8 @@ mindplot.Topic = new Class({
                 }
             }
         };
-
-        this.closeEditors();
         var editor = new mindplot.widget.NoteEditor(editorModel);
+        this.closeEditors();
         editor.show();
     },
 
@@ -759,22 +757,22 @@ mindplot.Topic = new Class({
         var model = this.getModel();
         var editorModel = {
             getValue : function() {
-//                var notes = model.getNotes();
+                var links = model.getLinks();
-//                var result;
+                var result;
-//                if (notes.length > 0)
+                if (links.length > 0)
-//                    result = notes[0].getText();
+                    result = links[0].getUrl();
-//
+
-//                return result;
+                return result;
             },
 
             setValue : function(value) {
-//                var dispatcher = mindplot.ActionDispatcher.getInstance();
+                var dispatcher = mindplot.ActionDispatcher.getInstance();
-//                if (!$defined(value)) {
+                if (!$defined(value)) {
-//                    dispatcher.removeNoteFromTopic(topicId);
+                    dispatcher.removeLinkFromTopic(topicId);
-//                }
+                }
-//                else {
+                else {
-//                    dispatcher.changeNoteToTopic(topicId, value);
+                    dispatcher.changeLinkToTopic(topicId, value);
-//                }
+                }
             }
         };
 

mindplot/src/main/javascript/commands/ChangeLinkToTopicCommand.js

@@ -16,7 +16,7 @@
  *   limitations under the License.
  */
 
-mindplot.commands.AddLinkToTopicCommand = new Class({
+mindplot.commands.ChangeLinkToTopicCommand = new Class({
     Extends:mindplot.Command,
     initialize: function(topicId, url) {
         $assert(topicId, 'topicId can not be null');
@@ -24,12 +24,25 @@ mindplot.commands.AddLinkToTopicCommand = new Class({
         this._url = url;
         this._id = mindplot.Command._nextUUID();
     },
+
     execute: function(commandContext) {
         var topic = commandContext.findTopics(this._objectsIds)[0];
-        topic.addLink(this._url, commandContext._designer);
+        if (topic.hasLink()) {
+            var model = topic.getModel();
+            var link = model.getLinks()[0];
+            this._oldUrl = link.getUrl();
+            topic.removeLink();
+        }
+        topic.addLink(this._url);
     },
+
     undoExecute: function(commandContext) {
         var topic = commandContext.findTopics(this._objectsIds)[0];
-        topic.removeLink();
+        if (this._oldtext) {
+            topic.removeLink();
+            topic.addLink(this._oldUrl);
+        } else {
+            topic.removeLink();
+        }
     }
 });

mindplot/src/main/javascript/commands/ChangeNoteToTopicCommand.js

@@ -25,7 +25,8 @@ mindplot.commands.ChangeNoteToTopicCommand = new Class({
         this._oldtext = null;
         this._id = mindplot.Command._nextUUID();
     },
-    execute: function(commandContext) {
+
+     execute: function(commandContext) {
         var topic = commandContext.findTopics(this._objectsIds)[0];
         if (topic.hasNote()) {
             var model = topic.getModel();
@@ -35,6 +36,7 @@ mindplot.commands.ChangeNoteToTopicCommand = new Class({
         }
         topic.addNote(this._text);
     },
+
     undoExecute: function(commandContext) {
         var topic = commandContext.findTopics(this._objectsIds)[0];
         if (this._oldtext) {

mindplot/src/main/javascript/commands/RemoveLinkFromTopicCommand.js

@@ -22,11 +22,15 @@ mindplot.commands.RemoveLinkFromTopicCommand = new Class({
         $assert(topicId, 'topicId can not be null');
         this._objectsIds = topicId;
     },
+
     execute: function(commandContext) {
         var topic = commandContext.findTopics(this._objectsIds)[0];
-        this._url = topic._link.getUrl();
+        var model = topic.getModel();
+        var links = model.getLinks()[0];
+        this._text = links.getUrl();
         topic.removeLink();
     },
+
     undoExecute: function(commandContext) {
         var topic = commandContext.findTopics(this._objectsIds)[0];
         topic.addLink(this._url, commandContext._designer);

mindplot/src/main/javascript/libraries/moodialog/MooDialog.js

@@ -33,11 +33,7 @@ var MooDialog = new Class({
 		onBeforeClose: function(){
 			this.wrapper.setStyle('display', 'none');
 			this.fireEvent('hide');
-		}/*,
+		}
-		onOpen: function(){},
-		onClose: function(){},
-		onShow: function(){},
-		onHide: function(){}*/
 	},
 
 	initialize: function(options){

mindplot/src/main/javascript/model/LinkModel.js

@@ -20,9 +20,8 @@ mindplot.model.LinkModel = new Class({
     initialize : function(url, topic) {
         $assert(url, 'url can not be null');
         $assert(topic, 'mindmap can not be null');
-
-        this._url = url;
         this._topic = topic;
+        this.setUrl(url);
     },
 
     getUrl : function() {
@@ -31,7 +30,8 @@ mindplot.model.LinkModel = new Class({
 
     setUrl : function(url) {
         $assert(url, 'url can not be null');
-        this._url = url;
+        this._url = this._fixUrl(url);
+        this._type = this._url.contains('mailto:') ? 'mail' : 'url';
     },
 
     getTopic : function() {
@@ -41,4 +41,12 @@ mindplot.model.LinkModel = new Class({
     isLinkModel : function() {
         return true;
     }
+    ,
+    _fixUrl : function(url) {
+        var result = url;
+        if (!result.contains('http://') && !result.contains('https://') && !result.contains('mailto://')) {
+            result = "http://" + result;
+        }
+        return result;
+    }
 });

mindplot/src/main/javascript/widget/FloatingTip.js

@@ -34,7 +34,7 @@ mindplot.widget.FloatingTip = new Class({
         showOn: 'mouseenter',
         hideOn: 'mouseleave',
         showDelay: 500,
-        hideDelay: 0,
+        hideDelay: 250,
         className: 'floating-tip',
         offset: {x: 0, y: 0},
         fx: { 'duration': 'short' }
@@ -71,9 +71,13 @@ mindplot.widget.FloatingTip = new Class({
             return this;
         }
         var tip = this._create(element);
-        if (tip == null) return this;
+        if (tip == null)
+            return this;
         element.store('floatingtip', tip);
         this._animate(tip, 'in');
+        tip.addEvent(this.options.showOn, this.boundShow);
+        tip.addEvent(this.options.hideOn, this.boundHide);
+
         this.fireEvent('show', [tip, element]);
         return this;
     },

mindplot/src/main/javascript/widget/LinkEditor.js

@@ -64,25 +64,36 @@ mindplot.widget.LinkEditor = new Class({
         var result = new Element('div');
         var form = new Element('form', {'action': 'none', 'id':'linkFormId'});
 
-        // Add textarea ...
+        // Add combo ...
-        var textArea = new Element('textarea', {placeholder: 'Write your note here ...'});
+        var select = new Element('select');
-        if (model.getValue() != null)
+        select.setStyles({margin: '5px'});
-            textArea.value = model.getValue();
+        new Element('option', {text:'URL'}).inject(select);
+        new Element('option', {text:'Mail'}).inject(select);
+        select.inject(form);
 
-        textArea.setStyles({'width':'100%', 'height':80,resize: 'none'
+        // Add Input ...
-        });
+        var input = new Element('input', {placeholder: 'http://www.example.com/',type:'url',required:true});
-        textArea.inject(form);
+        if (model.getValue() != null)
+            input.value = model.getValue();
+
+        input.setStyles({'width':'70%'});
+        input.inject(form);
+
+        // Register submit event ...
+        form.addEvent('submit', function(event) {
+            event.stopPropagation();
+            event.preventDefault();
+
+            model.setValue(input.value);
+            this.close();
+        }.bind(this));
 
         // Add buttons ...
         var buttonContainer = new Element('div').setStyles({paddingTop:5, textAlign:'center'});
 
         // Create accept button ...
-        var okButton = new Element('input', {type:'button', value:'Accept','class':'btn-primary'});
+        var okButton = new Element('input', {type:'submit', value:'Accept','class':'btn-primary'});
         okButton.addClass('button');
-        okButton.addEvent('click', function() {
-            model.setValue(textArea.value);
-            this.close();
-        }.bind(this));
         okButton.inject(buttonContainer);
 
         // Create remove button ...
@@ -91,16 +102,16 @@ mindplot.widget.LinkEditor = new Class({
             rmButton.setStyle('margin', '5px');
             rmButton.addClass('button');
             rmButton.inject(buttonContainer);
-            rmButton.addEvent('click', function() {
+            rmButton.addEvent('click', function(event) {
                 model.setValue(null);
+                event.stopPropagation();
                 this.close();
             }.bind(this));
             buttonContainer.inject(form);
         }
 
-
         // Create cancel button ...
-        var cButton = new Element('input', {type:'button', value:'Cancel','class':'btn-primary'});
+        var cButton = new Element('input', {type:'button', value:'Cancel','class':'btn-secondary'});
         cButton.setStyle('margin', '5px');
         cButton.addClass('button');
         cButton.inject(buttonContainer);

mindplot/src/main/javascript/widget/LinkIconTooltip.js

@@ -0,0 +1,91 @@
+/*
+ *    Copyright [2011] [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.widget.LinkIconTooltip = new Class({
+    Extends: mindplot.widget.FloatingTip,
+
+    initialize : function(linkIcon) {
+        $assert(linkIcon, "linkIcon can not be null");
+        this.parent(linkIcon.getImage()._peer._native, {
+            // Content can also be a function of the target element!
+            content: this._buildContent.pass(linkIcon, this),
+            html: true,
+            position: 'bottom',
+            arrowOffset : 10,
+            center: true,
+            arrowSize: 15,
+            offset : {x:10,y:20}
+        });
+    },
+
+    _buildContent : function(linkIcon) {
+        var result = new Element('div');
+        result.setStyles({
+            padding:'5px',
+            width:'100%'
+        });
+
+        var title = new Element('div', {text:'Link'});
+        title.setStyles({
+            'font-weight':'bold',
+            color:'black',
+            'padding-bottom':'5px',
+            width: '100px'
+        });
+        title.inject(result);
+
+        var text = new Element('div', {text: "URL: " + linkIcon.getModel().getUrl()});
+        text.setStyles({
+                'white-space': 'pre-wrap',
+                'word-wrap': 'break-word'
+            }
+        );
+        text.inject(result);
+
+        var imgContainer = new Element('div');
+        imgContainer.setStyles({
+            width: '100%',
+            textAlign: 'center',
+            'padding-bottom':'5px',
+            'padding-top': '5px'
+        });
+
+        var img = new Element('img', {
+                src: 'http://open.thumbshots.org/image.pxf?url=' + linkIcon.getModel().getUrl(),
+                img : linkIcon.getModel().getUrl(),
+                alt : linkIcon.getModel().getUrl()
+            }
+        );
+        img.setStyles({
+                padding: '5px'
+            }
+        );
+
+        var link = new Element('a', {
+            href : linkIcon.getModel().getUrl(),
+            alt : 'Open in new window ...',
+            target : '_blank'
+
+        });
+        img.inject(link);
+        link.inject(imgContainer);
+        imgContainer.inject(result);
+
+        return result;
+    }
+});

mindplot/src/main/javascript/widget/NoteEditor.js

@@ -65,24 +65,33 @@ mindplot.widget.NoteEditor = new Class({
         var form = new Element('form', {'action': 'none', 'id':'noteFormId'});
 
         // Add textarea ...
-        var textArea = new Element('textarea', {placeholder: 'Write your note here ...'});
+        var textArea = new Element('textarea', {placeholder: 'Write your note here ...',required:true});
         if (model.getValue() != null)
             textArea.value = model.getValue();
 
-        textArea.setStyles({'width':'100%', 'height':80,resize: 'none'
+        textArea.setStyles({
+            'width':'100%',
+            'height':80
+            ,resize: 'none'
         });
         textArea.inject(form);
 
+        // Register submit event ...
+        form.addEvent('submit', function(event) {
+            event.preventDefault();
+            event.stopPropagation();
+
+            model.setValue(textArea.value);
+            this.close();
+
+        }.bind(this));
+
         // Add buttons ...
         var buttonContainer = new Element('div').setStyles({paddingTop:5, textAlign:'center'});
 
         // Create accept button ...
-        var okButton = new Element('input', {type:'button', value:'Accept','class':'btn-primary'});
+        var okButton = new Element('input', {type:'submit', value:'Accept','class':'btn-primary'});
         okButton.addClass('button');
-        okButton.addEvent('click', function() {
-            model.setValue(textArea.value);
-            this.close();
-        }.bind(this));
         okButton.inject(buttonContainer);
 
         // Create remove button ...
@@ -100,7 +109,7 @@ mindplot.widget.NoteEditor = new Class({
 
 
         // Create cancel button ...
-        var cButton = new Element('input', {type:'button', value:'Cancel','class':'btn-primary'});
+        var cButton = new Element('input', {type:'button', value:'Cancel','class':'btn-secondary'});
         cButton.setStyle('margin', '5px');
         cButton.addClass('button');
         cButton.inject(buttonContainer);

web2d/src/main/javascript/Group.js

@@ -39,7 +39,7 @@ web2d.Group = new Class({
         }
 
         if (element == this) {
-            throw "It's not posible to add the group as a child of itself";
+            throw "It's not possible to add the group as a child of itself";
         }
 
         var elementType = element.getType();

wise-doc/src/main/webapp/css/common.css

@@ -130,7 +130,7 @@ h1 {
 }
 
 h3 {
-/* use as subhead on main body */
+    /* use as subhead on main body */
     clear: left;
     font-style: normal;
     font-size: 130%;
@@ -138,7 +138,7 @@ h3 {
 }
 
 h4 {
-/* use as headers in footer */
+    /* use as headers in footer */
     font-weight: bold;
     font-size: 120%;
     border-bottom: 1px solid #8e9181;
@@ -249,7 +249,7 @@ span#headerSubTitle {
 }
 
 div#headerButtons a:hover {
-/*text-decoration: underline;*/
+    /*text-decoration: underline;*/
     color: #7e72ad;
 }
 
@@ -346,57 +346,84 @@ div#printLogo {
 }
 
 .btn-primary {
-  cursor: pointer;
+    cursor: pointer;
-  display: inline-block;
+    display: inline-block;
-  background-color: #e6e6e6;
+    padding: 5px 14px 6px;
-  background-repeat: no-repeat;
+    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
+    color: #333;
-  background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
+    font-size: 13px;
-  background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
+    line-height: normal;
-  background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
+    border: 1px solid #ccc;
-  background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
+    border-bottom-color: #bbb;
-  background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
+    -webkit-border-radius: 4px;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
+    -moz-border-radius: 4px;
-  padding: 5px 14px 6px;
+    border-radius: 4px;
-  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
+    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-  color: #333;
+    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-  font-size: 13px;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-  line-height: normal;
+    -webkit-transition: 0.1s linear all;
-  border: 1px solid #ccc;
+    -moz-transition: 0.1s linear all;
-  border-bottom-color: #bbb;
+    -ms-transition: 0.1s linear all;
-  -webkit-border-radius: 4px;
+    -o-transition: 0.1s linear all;
-  -moz-border-radius: 4px;
+    transition: 0.1s linear all;
-  border-radius: 4px;
+    color: #ffffff;
-  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+    background-color: #0064cd;
-  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+    background-repeat: repeat-x;
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+    background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
-  -webkit-transition: 0.1s linear all;
+    background-image: -moz-linear-gradient(top, #049cdb, #0064cd);
-  -moz-transition: 0.1s linear all;
+    background-image: -ms-linear-gradient(top, #049cdb, #0064cd);
-  -ms-transition: 0.1s linear all;
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
-  -o-transition: 0.1s linear all;
+    background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);
-  transition: 0.1s linear all;
+    background-image: -o-linear-gradient(top, #049cdb, #0064cd);
-     color: #ffffff;
+    background-image: linear-gradient(top, #049cdb, #0064cd);
-  background-color: #0064cd;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#049cdb', endColorstr = '#0064cd', GradientType = 0);
-  background-repeat: repeat-x;
+    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
-  background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
+    border-color: #0064cd #0064cd #003f81;
-  background-image: -moz-linear-gradient(top, #049cdb, #0064cd);
+    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
-  background-image: -ms-linear-gradient(top, #049cdb, #0064cd);
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
-  background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);
-  background-image: -o-linear-gradient(top, #049cdb, #0064cd);
-  background-image: linear-gradient(top, #049cdb, #0064cd);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
-  border-color: #0064cd #0064cd #003f81;
-  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
 }
 
 .btn-primary:hover {
-  background-position: 0 -15px;
+    background-position: 0 -15px;
-  /*color: #333;*/
+    text-decoration: none;
-  text-decoration: none;
 }
 
+.btn-secondary {
+    cursor: pointer;
+    display: inline-block;
+    background-color: #e6e6e6;
+    background-repeat: no-repeat;
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
+    background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
+    background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
+    background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
+    background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
+    background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#e6e6e6', GradientType = 0);
+    padding: 5px 14px 6px;
+    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
+    color: #333;
+    font-size: 13px;
+    line-height: normal;
+    border: 1px solid #ccc;
+    border-bottom-color: #bbb;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+    -webkit-transition: 0.1s linear all;
+    -moz-transition: 0.1s linear all;
+    -ms-transition: 0.1s linear all;
+    -o-transition: 0.1s linear all;
+    transition: 0.1s linear all;
+    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+}
+
+.btn-secondary:hover {
+    background-position: 0 -15px;
+    text-decoration: none;
+}
 
 div#paypal {
     float: left;
@@ -610,30 +637,28 @@ span.fieldRequired {
     padding: 5px;
 }
 
-
 div.installCFG {
-    width:100%;
+    width: 100%;
-    font-size:130%;
+    font-size: 130%;
 }
 
-div.installCFG h1{
+div.installCFG h1 {
-    width:100%;
+    width: 100%;
-    font-size:130%;
+    font-size: 130%;
 }
 
-div.installCFG h2{
+div.installCFG h2 {
-    font-size:100%;
+    font-size: 100%;
-    border-bottom:0 solid black;
+    border-bottom: 0 solid black;
 }
 
 .chromeFrameInstallDefaultStyle {
-    position:relative;
+    position: relative;
-    left:0;
+    left: 0;
-    top:0;
+    top: 0;
-    margin:0;
+    margin: 0;
 }
 
-
 .floating-tip {
     background-color: #dfcf3c;
     padding: 5px 15px;
@@ -646,3 +671,4 @@ div.installCFG h2{
     border-radius: 3px;
     box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
 }
+