Finish Notes Support...

mindplot/pom.xml

@@ -138,7 +138,7 @@
                                     <filelist dir="${basedir}/src/main/javascript/"
                                               files="commands/RemoveIconFromTopicCommand.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/"
-                                              files="commands/AddNoteToTopicCommand.js"/>
+                                              files="commands/ChangeNoteToTopicCommand.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/"
                                               files="commands/RemoveNoteFromTopicCommand.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/"
@@ -187,6 +187,8 @@
                                     <filelist dir="${basedir}/src/main/javascript/widget/" files="ToolbarItem.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/widget/" files="ToolbarPaneItem.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/widget/" files="NoteEditor.js"/>
+                                    <filelist dir="${basedir}/src/main/javascript/widget/" files="FloatingTip.js"/>
+
                                     <filelist dir="${basedir}/src/main/javascript/"
                                               files="widget/ColorPickerPanel.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/"

mindplot/src/main/javascript/ActionDispatcher.js

@@ -31,7 +31,7 @@ mindplot.ActionDispatcher = new Class({
         throw "method must be implemented.";
     },
 
-    addNoteToTopic: function(topicId, text) {
+    changeNoteToTopic: function(topicId, text) {
         throw "method must be implemented.";
     },
 

mindplot/src/main/javascript/IconGroup.js

@@ -51,7 +51,7 @@ mindplot.IconGroup = new Class({
         this._resize(this._icons.length);
     },
 
-    addIcon : function(icon) {
+    addIcon : function(icon, remove) {
         $defined(icon, "icon is not defined");
 
         icon.setGroup(this);
@@ -65,7 +65,9 @@ mindplot.IconGroup = new Class({
         this._group.appendChild(imageShape);
 
         // Register event for the group ..
+        if (remove) {
             this._removeTip.decorate(this._topicId, icon);
+        }
     },
 
     _findIconFromUrl : function(url) {

mindplot/src/main/javascript/MainTopic.js

@@ -157,7 +157,7 @@ mindplot.MainTopic = new Class({
     },
 
     setPosition : function(point, fireEvent) {
-        mindplot.Topic.prototype.setPosition.call(this, point);
+        this.parent(point);
 
         // Update board zero entry position...
         if (fireEvent != false)

mindplot/src/main/javascript/Note.js

@@ -36,10 +36,24 @@ mindplot.Note = new Class({
             this._topic.showNoteEditor();
             event.stopPropagation();
         }.bind(this));
-    },
 
-    getText: function() {
+        this.tip = new mindplot.widget.FloatingTip(this.getImage()._peer._native, {
-        return this._text;
+            // Content can also be a function of the target element!
+            content: function() {
+                var result = new Element('div', {text:this._noteModel.getText()});
+                result.setStyles({
+                        'white-space': 'pre-wrap',
+                        'word-wrap': 'break-word'
+                    }
+                );
+                return result;
+            }.bind(this),
+            html: true,
+            position: 'bottom', // Bottom positioned
+            center: false,      // Place the tip aligned with target
+            arrowSize: 6,     // A bigger arrow! ); // Title attribute will be used as tip.
+            offset : {x:0,y:20}
+        });
     },
 
     getModel : function() {

mindplot/src/main/javascript/StandaloneActionDispatcher.js

@@ -43,8 +43,8 @@ mindplot.StandaloneActionDispatcher = new Class({
         this.execute(command);
     },
 
-    addNoteToTopic: function(topicId, text) {
+    changeNoteToTopic: function(topicId, text) {
-        var command = new mindplot.commands.AddNoteToTopicCommand(topicId, text);
+        var command = new mindplot.commands.ChangeNoteToTopicCommand(topicId, text);
         this.execute(command);
     },
 

mindplot/src/main/javascript/Topic.js

@@ -274,7 +274,7 @@ mindplot.Topic = new Class({
             // Update model identifier ...
             var iconModel = icons[i];
             var icon = new mindplot.ImageIcon(this, iconModel);
-            result.addIcon(icon);
+            result.addIcon(icon, true);
         }
 
         //Links
@@ -287,9 +287,9 @@ mindplot.Topic = new Class({
 
         //Notes
         var notes = model.getNotes();
-        for (var i = 0; i < notes.length; i++) {
+        for (var j = 0; j < notes.length; j++) {
             this._hasNote = true;
-            this._note = new mindplot.Note(this, notes[i]);
+            this._note = new mindplot.Note(this, notes[j]);
             result.addIcon(this._note);
         }
 
@@ -304,6 +304,7 @@ mindplot.Topic = new Class({
         this._link = new mindplot.LinkIcon(linkModel, this, designer);
         iconGroup.addIcon(this._link);
         this._hasLink = true;
+        this._adjustShapes();
     },
 
     addNote : function(text) {
@@ -316,6 +317,7 @@ mindplot.Topic = new Class({
         this._note = new mindplot.Note(this, noteModel);
         iconGroup.addIcon(this._note);
         this._hasNote = true;
+        this._adjustShapes();
     },
 
     addIcon : function(iconType) {
@@ -327,8 +329,8 @@ mindplot.Topic = new Class({
         model.addIcon(iconModel);
 
         var imageIcon = new mindplot.ImageIcon(this, iconModel);
-        iconGroup.addIcon(imageIcon);
+        iconGroup.addIcon(imageIcon,true);
-
+        this._adjustShapes();
         return imageIcon;
     },
 
@@ -343,6 +345,7 @@ mindplot.Topic = new Class({
         if ($defined(iconGroup)) {
             iconGroup.removeIcon(iconModel);
         }
+        this._adjustShapes();
     },
 
     removeLink : function() {
@@ -356,10 +359,10 @@ mindplot.Topic = new Class({
                 this.get2DElement().removeChild(iconGroup.getNativeElement());
                 this._iconsGroup = null;
             }
-            this._adjustShapes(this);
         }
         this._link = null;
         this._hasLink = false;
+        this._adjustShapes();
     },
 
     removeNote : function() {
@@ -374,9 +377,9 @@ mindplot.Topic = new Class({
             iconGroup.removeIconByUrl(mindplot.Note.IMAGE_URL);
         }
 
-        this._adjustShapes();
         this._note = null;
         this._hasNote = false;
+        this._adjustShapes();
     },
 
     hasNote : function() {
@@ -735,17 +738,17 @@ mindplot.Topic = new Class({
             },
 
             setValue : function(value) {
-                if ("" != value.trim()) {
                 var dispatcher = mindplot.ActionDispatcher.getInstance();
-                    // Only one note is supported ...
+                if (!$defined(value)) {
-                    if (model.getNotes().length > 0)
                     dispatcher.removeNoteFromTopic(topicId);
-
+                }
-                    dispatcher.addNoteToTopic(topicId, value);
+                else {
+                    dispatcher.changeNoteToTopic(topicId, value);
                 }
             }
         };
 
+        this.closeEditors();
         var editor = new mindplot.widget.NoteEditor(editorModel);
         editor.show();
     },

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

@@ -27,20 +27,12 @@ mindplot.commands.AddIconToTopicCommand = new Class({
 
     execute: function(commandContext) {
         var topic = commandContext.findTopics(this._objectsIds)[0];
-        var updated = function() {
         var iconImg = topic.addIcon(this._iconType, commandContext._designer);
         this._iconModel = iconImg.getModel();
-            topic._adjustShapes();
-        }.bind(this);
-        updated.delay(0);
     },
 
     undoExecute: function(commandContext) {
         var topic = commandContext.findTopics(this._objectsIds)[0];
-        var updated = function() {
         topic.removeIcon(this._iconModel);
-            topic._adjustShapes();
-        }.bind(this);
-        updated.delay(0);
     }
 });

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

@@ -26,17 +26,10 @@ mindplot.commands.AddLinkToTopicCommand = new Class({
     },
     execute: function(commandContext) {
         var topic = commandContext.findTopics(this._objectsIds)[0];
-        var updated = function() {
         topic.addLink(this._url, commandContext._designer);
-            topic._adjustShapes();
-        }.bind(this);
-        updated.delay(0);
     },
     undoExecute: function(commandContext) {
         var topic = commandContext.findTopics(this._objectsIds)[0];
-        var updated = function() {
         topic.removeLink();
-        }.bind(this);
-        updated.delay(0);
     }
 });

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

@@ -16,27 +16,32 @@
  *   limitations under the License.
  */
 
-mindplot.commands.AddNoteToTopicCommand = new Class({
+mindplot.commands.ChangeNoteToTopicCommand = new Class({
     Extends:mindplot.Command,
     initialize: function(topicId, text) {
         $assert(topicId, 'topicId can not be null');
         this._objectsIds = topicId;
         this._text = text;
+        this._oldtext = null;
         this._id = mindplot.Command._nextUUID();
     },
     execute: function(commandContext) {
         var topic = commandContext.findTopics(this._objectsIds)[0];
-        var updated = function() {
+        if (topic.hasNote()) {
+            var model = topic.getModel();
+            var notes = model.getNotes()[0];
+            this._oldtext = notes.getText();
+            topic.removeNote();
+        }
         topic.addNote(this._text);
-            topic._adjustShapes();
-        }.bind(this);
-        updated.delay(0);
     },
     undoExecute: function(commandContext) {
         var topic = commandContext.findTopics(this._objectsIds)[0];
-        var updated = function() {
+        if (this._oldtext) {
             topic.removeNote();
-        }.bind(this);
+            topic.addNote(this._oldtext);
-        updated.delay(0);
+        } else {
+            topic.removeNote();
+        }
     }
 });

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

@@ -18,31 +18,22 @@
 
 mindplot.commands.RemoveIconFromTopicCommand = new Class({
     Extends:mindplot.Command,
-    initialize: function(topicIds, iconModel)
+    initialize: function(topicIds, iconModel) {
-    {
         $assert(topicIds, 'topicIds can not be null');
         $assert(iconModel, 'iconModel can not be null');
         this._objectsIds = topicIds;
         this._iconModel = iconModel;
     },
-    execute: function(commandContext)
+
-    {
+    execute: function(commandContext) {
         var topic = commandContext.findTopics(this._objectsIds)[0];
-        var updated = function() {
         topic.removeIcon(this._iconModel);
-            topic._adjustShapes();
-        }.bind(this);
-        updated.delay(0);
     },
-    undoExecute: function(commandContext)
+
-    {
+    undoExecute: function(commandContext) {
         var topic = commandContext.findTopics(this._objectsIds)[0];
-        var updated = function() {
         var iconType = this._iconModel.getIconType();
         var iconImg = topic.addIcon(iconType, commandContext._designer);
         this._iconModel = iconImg.getModel();
-            topic._adjustShapes();
-        }.bind(this);
-        updated.delay(0);
     }
 });

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

@@ -25,17 +25,10 @@ mindplot.commands.RemoveLinkFromTopicCommand = new Class({
     execute: function(commandContext) {
         var topic = commandContext.findTopics(this._objectsIds)[0];
         this._url = topic._link.getUrl();
-        var updated = function() {
         topic.removeLink();
-        }.bind(this);
-        updated.delay(0);
     },
     undoExecute: function(commandContext) {
         var topic = commandContext.findTopics(this._objectsIds)[0];
-        var updated = function() {
         topic.addLink(this._url, commandContext._designer);
-            topic._adjustShapes();
-        }.bind(this);
-        updated.delay(0);
     }
 });

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

@@ -18,27 +18,19 @@
 
 mindplot.commands.RemoveNoteFromTopicCommand = new Class({
     Extends:mindplot.Command,
-    initialize: function(topicId)
+    initialize: function(topicId) {
-    {
         $assert(topicId, 'topicId can not be null');
         this._objectsIds = topicId;
     },
-    execute: function(commandContext)
+    execute: function(commandContext) {
-    {
         var topic = commandContext.findTopics(this._objectsIds)[0];
-        this._text = topic._note.getText();
+        var model = topic.getModel();
-        var updated = function() {
+        var notes = model.getNotes()[0];
+        this._text = notes.getText();
         topic.removeNote();
-        }.bind(this);
-        updated.delay(0);
     },
-    undoExecute: function(commandContext)
+    undoExecute: function(commandContext) {
-    {
         var topic = commandContext.findTopics(this._objectsIds)[0];
-        var updated = function() {
         topic.addNote(this._text, commandContext._designer);
-            topic._adjustShapes();
-        }.bind(this);
-        updated.delay(0);
     }
 });

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

@@ -0,0 +1,263 @@
+/*
+ *    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.FloatingTip = new Class({
+    Implements: [Options, Events],
+
+    options: {
+        position: 'top',
+        center: true,
+        content: 'title',
+        html: false,
+        balloon: true,
+        arrowSize: 6,
+        arrowOffset: 6,
+        distance: 7,
+        motion: 40,
+        motionOnShow: true,
+        motionOnHide: true,
+        showOn: 'mouseenter',
+        hideOn: 'mouseleave',
+        showDelay: 500,
+        hideDelay: 0,
+        className: 'floating-tip',
+        offset: {x: 0, y: 0},
+        fx: { 'duration': 'short' }
+    },
+
+    initialize: function(element, options) {
+        this.setOptions(options);
+        this.boundShow = function(event) {
+            this.show(event, element);
+        }.bind(this);
+
+        this.boundHide = function(event) {
+            this.hide(event, element);
+        }.bind(this);
+
+        if (!['top', 'right', 'bottom', 'left', 'inside'].contains(this.options.position))
+            this.options.position = 'top';
+        this.attach(element);
+    },
+
+    attach: function(element) {
+        if (element.retrieve('hasEvents') !== null) {
+            return;
+        }
+        element.addEvent(this.options.showOn, this.boundShow);
+        element.addEvent(this.options.hideOn, this.boundHide);
+        element.store('hasEvents', true);
+    },
+
+    show: function(event, element) {
+        var old = element.retrieve('floatingtip');
+        if (old) if (old.getStyle('opacity') == 1) {
+            clearTimeout(old.retrieve('timeout'));
+            return this;
+        }
+        var tip = this._create(element);
+        if (tip == null) return this;
+        element.store('floatingtip', tip);
+        this._animate(tip, 'in');
+        this.fireEvent('show', [tip, element]);
+        return this;
+    },
+
+    hide: function(event, element) {
+        var tip = element.retrieve('floatingtip');
+        if (!tip) {
+            if (this.options.position == 'inside') {
+                try {
+                    element = element.getParent().getParent();
+                    tip = element.retrieve('floatingtip');
+                } catch (x) {
+                }
+                if (!tip) return this;
+            } else {
+                return this;
+            }
+        }
+        this._animate(tip, 'out');
+        this.fireEvent('hide', [tip, element]);
+        return this;
+    },
+
+    _create: function(elem) {
+
+        var o = this.options;
+        var oc = o.content;
+        var opos = o.position;
+
+        if (oc == 'title') {
+            oc = 'floatingtitle';
+            if (!elem.get('floatingtitle')) elem.setProperty('floatingtitle', elem.get('title'));
+            elem.set('title', '');
+        }
+
+        var cnt = (typeof(oc) == 'string' ? elem.get(oc) : oc(elem));
+        var cwr = new Element('div').addClass(o.className).setStyle('margin', 0);
+        var tip = new Element('div').addClass(o.className + '-wrapper').setStyles({ 'margin': 0, 'padding': 0, 'z-index': cwr.getStyle('z-index') }).adopt(cwr);
+
+        if (cnt) {
+            if (o.html)
+                cnt.inject(cwr);
+            else
+                cwr.set('text', cnt);
+        } else {
+            return null;
+        }
+
+        var body = document.id(document.body);
+        tip.setStyles({ 'position': 'absolute', 'opacity': 0, 'top': 0, 'left': 0 }).inject(body);
+
+        if (o.balloon && !Browser.ie6) {
+
+            var trg = new Element('div').addClass(o.className + '-triangle').setStyles({ 'margin': 0, 'padding': 0 });
+            var trgSt = { 'border-color': cwr.getStyle('background-color'), 'border-width': o.arrowSize, 'border-style': 'solid','width': 0, 'height': 0 };
+
+            switch (opos) {
+                case 'inside':
+                case 'top':
+                    trgSt['border-bottom-width'] = 0;
+                    break;
+                case 'right':
+                    trgSt['border-left-width'] = 0;
+                    trgSt['float'] = 'left';
+                    cwr.setStyle('margin-left', o.arrowSize);
+                    break;
+                case 'bottom':
+                    trgSt['border-top-width'] = 0;
+                    break;
+                case 'left':
+                    trgSt['border-right-width'] = 0;
+                    if (Browser.ie7) {
+                        trgSt['position'] = 'absolute';
+                        trgSt['right'] = 0;
+                    } else {
+                        trgSt['float'] = 'right';
+                    }
+                    cwr.setStyle('margin-right', o.arrowSize);
+                    break;
+            }
+
+            switch (opos) {
+                case 'inside':
+                case 'top':
+                case 'bottom':
+                    trgSt['border-left-color'] = trgSt['border-right-color'] = 'transparent';
+                    trgSt['margin-left'] = o.center ? tip.getSize().x / 2 - o.arrowSize : o.arrowOffset;
+                    break;
+                case 'left':
+                case 'right':
+                    trgSt['border-top-color'] = trgSt['border-bottom-color'] = 'transparent';
+                    trgSt['margin-top'] = o.center ? tip.getSize().y / 2 - o.arrowSize : o.arrowOffset;
+                    break;
+            }
+
+            trg.setStyles(trgSt).inject(tip, (opos == 'top' || opos == 'inside') ? 'bottom' : 'top');
+
+        }
+
+        var tipSz = tip.getSize(), trgC = elem.getCoordinates(body);
+        var pos = { x: trgC.left + o.offset.x, y: trgC.top + o.offset.y };
+
+        if (opos == 'inside') {
+            tip.setStyles({ 'width': tip.getStyle('width'), 'height': tip.getStyle('height') });
+            elem.setStyle('position', 'relative').adopt(tip);
+            pos = { x: o.offset.x, y: o.offset.y };
+        } else {
+            switch (opos) {
+                case 'top':
+                    pos.y -= tipSz.y + o.distance;
+                    break;
+                case 'right':
+                    pos.x += trgC.width + o.distance;
+                    break;
+                case 'bottom':
+                    pos.y += trgC.height + o.distance;
+                    break;
+                case 'left':
+                    pos.x -= tipSz.x + o.distance;
+                    break;
+            }
+        }
+
+        if (o.center) {
+            switch (opos) {
+                case 'top':
+                case 'bottom':
+                    pos.x += (trgC.width / 2 - tipSz.x / 2);
+                    break;
+                case 'left':
+                case 'right':
+                    pos.y += (trgC.height / 2 - tipSz.y / 2);
+                    break;
+                case 'inside':
+                    pos.x += (trgC.width / 2 - tipSz.x / 2);
+                    pos.y += (trgC.height / 2 - tipSz.y / 2);
+                    break;
+            }
+        }
+
+        tip.set('morph', o.fx).store('position', pos);
+        tip.setStyles({ 'top': pos.y, 'left': pos.x });
+
+        return tip;
+
+    },
+
+    _animate: function(tip, d) {
+
+        clearTimeout(tip.retrieve('timeout'));
+        tip.store('timeout', (function(t) {
+
+            var o = this.options, din = (d == 'in');
+            var m = { 'opacity': din ? 1 : 0 };
+
+            if ((o.motionOnShow && din) || (o.motionOnHide && !din)) {
+                var pos = t.retrieve('position');
+                if (!pos) return;
+                switch (o.position) {
+                    case 'inside':
+                    case 'top':
+                        m['top'] = din ? [pos.y - o.motion, pos.y] : pos.y - o.motion;
+                        break;
+                    case 'right':
+                        m['left'] = din ? [pos.x + o.motion, pos.x] : pos.x + o.motion;
+                        break;
+                    case 'bottom':
+                        m['top'] = din ? [pos.y + o.motion, pos.y] : pos.y + o.motion;
+                        break;
+                    case 'left':
+                        m['left'] = din ? [pos.x - o.motion, pos.x] : pos.x - o.motion;
+                        break;
+                }
+            }
+
+            t.morph(m);
+            if (!din) t.get('morph').chain(function() {
+                this.dispose();
+            }.bind(t));
+
+        }).delay((d == 'in') ? this.options.showDelay : this.options.hideDelay, this, tip));
+
+        return this;
+
+    }
+
+});

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

@@ -85,15 +85,28 @@ mindplot.widget.NoteEditor = new Class({
         }.bind(this));
         okButton.inject(buttonContainer);
 
-        // Create move button ...
+        // Create remove button ...
-        var rmButton = new Element('input', {type:'button', value:'Cancel','class':'btn-primary'});
+        if ($defined(model.getValue())) {
+            var rmButton = new Element('input', {type:'button', value:'Remove','class':'btn-primary'});
             rmButton.setStyle('margin', '5px');
             rmButton.addClass('button');
             rmButton.inject(buttonContainer);
             rmButton.addEvent('click', function() {
+                model.setValue(null);
                 this.close();
             }.bind(this));
+            buttonContainer.inject(form);
+        }
 
+
+        // Create cancel button ...
+        var cButton = new Element('input', {type:'button', value:'Cancel','class':'btn-primary'});
+        cButton.setStyle('margin', '5px');
+        cButton.addClass('button');
+        cButton.inject(buttonContainer);
+        cButton.addEvent('click', function() {
+            this.close();
+        }.bind(this));
         buttonContainer.inject(form);
 
         result.addEvent('keydown', function(event) {

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

@@ -632,3 +632,15 @@ div.installCFG h2{
     top:0;
     margin:0;
 }
+
+
+.floating-tip {
+    background-color: #dfcf3c;
+    padding: 5px 15px;
+    color: #666666;
+    font-weight: bold;
+    font-size: 11px;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+}

wise-doc/src/main/webapp/html/editor.html

@@ -17,6 +17,7 @@
     <script type='text/javascript'
             src='/mindplot/src/main/javascript/libraries/mootools/mootools-more-1.3.2.1-yui.js'></script>
     <script type='text/javascript' src='/core-js/target/classes/core.js'></script>
+
     <script type="text/javascript">
 
         //Google-Brix framework load callback function

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

@@ -593,3 +593,13 @@ div.installCFG h2 {
     top: 0;
     margin: 0;
 }
+.floating-tip {
+    background-color: #dfcf3c;
+    padding: 5px 15px;
+    color: #666666;
+    font-weight: bold;
+    font-size: 11px;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+}