More refactors.

core-js/pom.xml

@@ -54,9 +54,21 @@
                                         <include>${basedir}/target/tmp/Monitor-min.js</include>
                                         <include>${basedir}/target/tmp/Point-min.js</include>
                                         <include>${basedir}/target/tmp/Utils-min.js</include>
-                                        <include>${basedir}/target/tmp/WaitDialog-min.js</include>
+                                        <!-- @Todo:Review this -->
-                                        <!--<include>${basedir}/target/tmp/LoadingDialog-min.js</include>-->
+                                        <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}/target/tmp/footer-min.js</include>
+
                                     </includes>
                                 </aggregation>
                             </aggregations>

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

@@ -1,56 +0,0 @@
-/*
- *    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.
- */
-
-core.LoadingDiaglog = new Class({
-    Extends:MooDialog,
-    initialize : function() {
-        this.parent({
-            closeButton:false,
-            useEscKey:false
-        });
-        var panel = this._buildPanel();
-        this.setContent(panel);
-    },
-
-    _buildPanel : function () {
-
-        var result = new Element('div');
-        var content = new Element('p', {text:"sample"});
-
-
-        result.addEvent('keydown', function(event) {
-            event.stopPropagation();
-        });
-
-//        waitDialog.activate(true, $("waitDialog"));
-//        $(window).addEvent("error", function(event) {
-//
-//            // Show error dialog ...
-//            waitDialog.changeContent($("errorDialog"), false);
-//            return false;
-//        });
-
-        content.inject(result);
-        return result;
-    },
-
-    show : function() {
-        this.open();
-    }
-
-});

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

@@ -1,135 +0,0 @@
-/*
-*    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.
- */
-
-/*
- Created By: Chris Campbell
- Website: http://particletree.com
- Date: 2/1/2006
-
- Inspired by the lightbox implementation found at http://www.huddletogether.com/projects/lightbox/
- /*-----------------------------------------------------------------------------------------------*/
-
-
-core.WaitDialog = new Class({
-
-
-    yPos : 0,
-    xPos : 0,
-
-    initialize: function() {
-    },
-    // Turn everything on - mainly the IE fixes
-    activate: function(changeCursor, dialogContent)
-    {
-
-        this.content = dialogContent;
-
-        this._initLightboxMarkup();
-
-        this.displayLightbox("block");
-
-        // Change to loading cursor.
-        if (changeCursor)
-        {
-            window.document.body.style.cursor = "wait";
-        }
-    },
-    changeContent: function(dialogContent, changeCursor)
-    {
-        this.content = dialogContent;
-        if (!$('lbContent'))
-        {
-            // Dialog is not activated. Nothing to do ...
-            window.document.body.style.cursor = "pointer";
-            return;
-        }
-
-        this.processInfo();
-
-        // Change to loading cursor.
-        if (changeCursor)
-        {
-            window.document.body.style.cursor = "wait";
-        }else
-        {
-            window.document.body.style.cursor = "auto";
-        }
-    },
-    displayLightbox: function(display) {
-        if (display != 'none')
-            this.processInfo();
-        $('overlay-lightbox').style.display = display;
-        $('lightbox').style.display = display;
-
-    },
-
-    // Display dialog content ...
-    processInfo: function() {
-        if ($('lbContent'))
-            $('lbContent').dispose();
-
-        var lbContentElement = new Element('div').setProperty('id', 'lbContent');
-        lbContentElement.innerHTML = this.content.innerHTML;
-
-        lbContentElement.inject($('lbLoadMessage'),'before');
-        $('lightbox').className = "done";
-    },
-
-    // Search through new links within the lightbox, and attach click event
-    actions: function() {
-        lbActions = document.getElementsByClassName('lbAction');
-
-        for (i = 0; i < lbActions.length; i++) {
-            $(lbActions[i]).addEvent('click', function() {
-                this[lbActions[i].rel].pass(this)
-            }.bind(this));
-            lbActions[i].onclick = function() {
-                return false;
-            };
-        }
-
-    },
-
-    // Example of creating your own functionality once lightbox is initiated
-    deactivate: function(time) {
-
-        if ($('lbContent'))
-            $('lbContent').dispose();
-
-        this.displayLightbox("none");
-
-        window.document.body.style.cursor = "default";
-    }
-    , _initLightboxMarkup:function()
-    {
-        // Add overlay element inside body ...
-        var bodyElem = document.getElementsByTagName('body')[0];
-        var overlayElem = new Element('div').setProperty('id', 'overlay-lightbox');
-        overlayElem.inject(bodyElem);
-
-        // Add lightbox element inside body ...
-        var lightboxElem = new Element('div').setProperty('id', 'lightbox');
-        lightboxElem.addClass('loading');
-
-        var lbLoadMessageElem = new Element('div').setProperty('id', 'lbLoadMessage');
-        lbLoadMessageElem.inject(lightboxElem);
-
-        lightboxElem.inject(bodyElem);
-
-    }
-});

mindplot/pom.xml

@@ -52,15 +52,6 @@
                                 <concat destfile="${basedir}/target/tmp/mindplot.js" append="false">
                                     <filelist dir="${basedir}/src/main/javascript/" files="header.js"/>
 
-                                    <filelist dir="${basedir}/src/main/javascript/libraries/moodialog/"
-                                              files="Overlay.js"/>
-                                    <filelist dir="${basedir}/src/main/javascript/libraries/moodialog/"
-                                              files="MooDialog.js"/>
-                                    <filelist dir="${basedir}/src/main/javascript/libraries/moodialog/"
-                                              files="MooDialog.Request.js"/>
-                                    <filelist dir="${basedir}/src/main/javascript/libraries/moodialog/"
-                                              files="MooDialog.Fx.js"/>
-
                                     <filelist dir="${basedir}/src/main/javascript/" files="model/IMindmap.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/" files="model/Mindmap.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/" files="model/INodeModel.js"/>

mindplot/src/main/javascript/Designer.js

@@ -422,6 +422,7 @@ mindplot.Designer = new Class({
             $assert(mindmapModel, "mindmapModel can not be null");
             this._mindmap = mindmapModel;
 
+            try {
                 // Init layout manager ...
                 var size = {width:25,height:25};
                 var layoutManager = new mindplot.layout.LayoutManager(mindmapModel.getCentralTopic().getId(), size);
@@ -457,6 +458,11 @@ mindplot.Designer = new Class({
 
                 // Finally, sort the map ...
                 mindplot.EventBus.instance.fireEvent(mindplot.EventBus.events.DoLayout);
+
+                this.fireEvent('loadSuccess');
+            } catch(e) {
+                this.fireEvent('loadError',e);
+            }
         },
 
         getMindmap : function() {

wise-editor/src/main/webapp/css/editor.less

@@ -1,5 +1,4 @@
 @import "compatibility.less";
-@import "../css/widget/lightbox.css";
 @import "../css/libraries/moodialog/css/MooDialog.css";
 
 

wise-editor/src/main/webapp/css/widget/lightbox.css

@@ -1 +0,0 @@
-../../../../../../mindplot/src/main/javascript/widget/lightbox.css

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

@@ -50,7 +50,9 @@
             <li>zoom: Scale to be applied to the map</li>
             <li>readOnly: If the map could be modified.</li>
             <li>persistenceManager: Persistence managers to be used. By default, local browser storage is used.</li>
-            <li>mapId: UUID of the map to be loaded..</li>
+            <li>mapId: UUID of the map to be loaded.</li>
+            <li>container: div element where the mindmap will be embedded..</li>
+
         </ul>
         <p>
             It's important to point out that embedded.html is a static html page that it's mean to be a template page

wise-editor/src/main/webapp/html/container.json

@@ -11,5 +11,6 @@
         "height":400
     },
     "persistenceManager": "mindplot.LocalStorageManager",
-    "mapId": "welcome"
+    "mapId": "welcome",
+    "container":"mindplot"
 }

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

@@ -24,9 +24,6 @@
             var options = loadDesignerOptions();
             var designer = buildDesigner(options);
 
-            // Configure default persistence manager ...
-            mindplot.PersistenceManager.init(new mindplot.LocalStorageManager());
-
             // Load map from XML ...
             var persistence = mindplot.PersistenceManager.getInstance();
             var mindmap;
@@ -37,11 +34,6 @@
                 mindmap = mindplot.model.Mindmap.buildEmpty(mapId);
             }
             designer.loadMap(mindmap);
-
-            // If not problem has arisen, close the dialog ...
-            if (!window.hasUnexpectedErrors) {
-                waitDialog.deactivate();
-            }
         });
 
 
@@ -49,37 +41,6 @@
 </head>
 <body>
 
-<div id="waitDialog" style="display:none">
-    <div id="waitingContainer">
-        <div class="loadingIcon"></div>
-        <div class="loadingText">
-            Loading ...
-        </div>
-    </div>
-</div>
-
-<div id="errorDialog" style="display:none">
-    <div id="errorContainer">
-        <div class="loadingIcon"></div>
-        <div class="loadingText">
-            Unexpected error loading your map :(
-        </div>
-    </div>
-</div>
-
-<script type="text/javascript">
-
-    var waitDialog = new core.WaitDialog();
-    waitDialog.activate(true, $("waitDialog"));
-    $(window).addEvent("error", function(event) {
-
-        // Show error dialog ...
-        waitDialog.changeContent($("errorDialog"), false);
-        return false;
-    });
-</script>
-
-
 <div id="header">
 
     <div id="headerInfo">
@@ -123,7 +84,7 @@
                 <div id="deleteTopic" class="buttonOn" title="Delete">
                     <img src="../images/topic-delete.png"/>
                 </div>
-                <div id="topicBorder" class="buttonOn" title="Border Color">
+                <div id="topicBorder" class="buttonExtOn" title="Border Color">
                     <img src="../images/topic-border.png"/>
                 </div>
                 <div id="topicColor" class="buttonExtOn" title="Background Color">
@@ -143,7 +104,7 @@
                 </div>
             </div>
             <div id="font" class="buttonContainer">
-                <div id="fontFamily" class="buttonOn" title="Font Style">
+                <div id="fontFamily" class="buttonExtOn" title="Font Style">
                     <img src="../images/font-type.png"/>
                 </div>
                 <div id="fontSize" class="buttonExtOn" title="Font Size">

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

@@ -19,64 +19,33 @@
 
     <script type="text/javascript">
 
+        var mapId = 'welcome';
         $(document).addEvent('loadcomplete', function(resource) {
-            var options = loadDesignerOptions();
+
+            // Options has been defined in by a external ile ?
+            var uri = new URI(window.location);
+            var query = String.parseQueryString(uri.get('query'));
+            var confUrl = query.confUrl;
+
+            var options = loadDesignerOptions(confUrl);
             var designer = buildDesigner(options);
 
             // Load map from XML ...
-            var mapId = options.mapId ? options.mapId : 'welcome';
+            var persistence = mindplot.PersistenceManager.getInstance();
             var mindmap;
             try {
-                var persistence = mindplot.PersistenceManager.getInstance();
                 mindmap = persistence.load(mapId);
             } catch(e) {
                 // If the map could not be loaded, create a new empty map...
                 mindmap = mindplot.model.Mindmap.buildEmpty(mapId);
             }
             designer.loadMap(mindmap);
-
-            // If not problem has arisen, close the dialog ...
-            if (!window.hasUnexpectedErrors) {
-                waitDialog.deactivate();
-            }
         });
 
-
     </script>
 </head>
 <body>
 
-<div id="waitDialog" style="display:none">
-    <div id="waitingContainer">
-        <div class="loadingIcon"></div>
-        <div class="loadingText">
-            Loading ...
-        </div>
-    </div>
-</div>
-
-<div id="errorDialog" style="display:none">
-    <div id="errorContainer">
-        <div class="loadingIcon"></div>
-        <div class="loadingText">
-            Unexpected error loading your map :(
-        </div>
-    </div>
-</div>
-
-<script type="text/javascript">
-
-    var waitDialog = new core.WaitDialog();
-    waitDialog.activate(true, $("waitDialog"));
-    $(window).addEvent("error", function(event) {
-
-        // Show error dialog ...
-        waitDialog.changeContent($("errorDialog"), false);
-        return false;
-    });
-</script>
-
-
 <div id="header">
 
     <div id="headerInfo">

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

@@ -1,199 +0,0 @@
-<!DOCTYPE HTML>
-
-<html>
-<head>
-    <title>WiseMapping - Editor </title>
-    <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
-    <!--[if lt IE 9]>
-    <meta http-equiv="X-UA-Compatible" content="chrome=1">
-    <![endif]-->
-    <link rel="stylesheet/less" type="text/css" href="../css/editor.less"/>
-
-    <script type='text/javascript' src='../js/mootools-core-1.3.2.js'></script>
-    <script type='text/javascript' src='../js/mootools-more-1.3.2.js'></script>
-    <script type='text/javascript' src='../js/core.js'></script>
-    <script type='text/javascript' src='../js/less-1.1.3.min.js'></script>
-
-    <link rel="icon" href="../images/favicon.ico" type="image/x-icon">
-    <link rel="shortcut icon" href="../images/favicon.ico" type="image/x-icon">
-
-    <script type="text/javascript">
-
-        var mapId = 'welcome';
-        var viewMode = false;
-
-        $(document).addEvent('loadcomplete', function(resource) {
-            var designer = buildDesigner(viewMode);
-
-            // Configure default persistence manager ...
-            mindplot.PersistenceManager.init(new mindplot.LocalStorageManager());
-
-            // Load map from XML ...
-            var persistence = mindplot.PersistenceManager.getInstance();
-            var mindmap;
-            try {
-                mindmap = persistence.load(mapId);
-            } catch(e) {
-                // If the map could not be loaded, create a new empty map...
-                mindmap = mindplot.model.Mindmap.buildEmpty(mapId);
-            }
-            designer.loadMap(mindmap);
-
-            // If not problem has arisen, close the dialog ...
-            if (!window.hasUnexpectedErrors) {
-                waitDialog.deactivate();
-            }
-        });
-
-    </script>
-</head>
-<body>
-
-<form method="post" id="printForm" name="printForm" action='' style="height:100%;" target="${mindmap.title}">
-    <input type="hidden" name="action" value="print">
-    <input type="hidden" name="mapId" value="${mindmap.id}">
-    <input type="hidden" name="mapSvg" value="">
-</form>
-
-<div id="waitDialog" style="display:none">
-    <div id="waitingContainer">
-        <div class="loadingIcon"></div>
-        <div class="loadingText">
-            Loading ...
-        </div>
-    </div>
-</div>
-
-<div id="errorDialog" style="display:none">
-    <div id="errorContainer">
-        <div class="loadingIcon"></div>
-        <div class="loadingText">
-            Unexpected error loading your map :(
-        </div>
-    </div>
-</div>
-
-<script type="text/javascript">
-
-    var waitDialog = new core.WaitDialog();
-    waitDialog.activate(true, $("waitDialog"));
-    $(window).addEvent("error", function(event) {
-
-        // Show error dialog ...
-        waitDialog.changeContent($("errorDialog"), false);
-        return false;
-    });
-</script>
-
-
-<div id="header">
-
-    <div id="headerInfo">
-        <div id="headerActions">
-            <span>MyWiseMappigs</span> | <span>Settings</span> | <span>Logout</span>
-        </div>
-        <div id="headerLogo"></div>
-        <div id="headerMapTitle">Title: <span>Welcome</span></div>
-    </div>
-    <div id="toolbar">
-        <div id="editTab" class="tabContent">
-            <div id="persist" class="buttonContainer">
-                <div id="save" class="buttonOn" title="Save">
-                    <img src="../images/save.png"/>
-                </div>
-                <div id="discard" class="buttonOn" title="Discard">
-                    <img src="../images/discard.png"/>
-                </div>
-                <div id="print" class="buttonOn" title="Print">
-                    <img src="../images/print.png"/>
-                </div>
-                <div id="export" class="buttonOn" title="Export">
-                    <img src="../images/export.png"/>
-                </div>
-            </div>
-            <div id="edit" class="buttonContainer">
-                <div id="undoEdition" class="buttonOn" title="Undo Edition">
-                    <img src="../images/undo.png"/>
-                </div>
-                <div id="redoEdition" class="buttonOn" title="Redo Edition">
-                    <img src="../images/redo.png"/>
-                </div>
-            </div>
-            <div id="zoom" class="buttonContainer">
-                <div id="zoomIn" class="buttonOn" title="Zoom In">
-                    <img src="../images/zoom-in.png"/>
-                </div>
-                <div id="zoomOut" class="buttonOn" title="Zoom Out">
-                    <img src="../images/zoom-out.png"/>
-                </div>
-            </div>
-            <div id="node" class="buttonContainer">
-                <div id="topicShape" class="buttonExtOn" title="Topic Shape">
-                    <img src="../images/topic-shape.png"/>
-                </div>
-                <div id="addTopic" class="buttonOn" title="Add Topic">
-                    <img src="../images/topic-add.png"/>
-                </div>
-                <div id="deleteTopic" class="buttonOn" title="Delete">
-                    <img src="../images/topic-delete.png"/>
-                </div>
-                <div id="topicBorder" class="buttonOn" title="Border Color">
-                    <img src="../images/topic-border.png"/>
-                </div>
-                <div id="topicColor" class="buttonExtOn" title="Background Color">
-                    <img src="../images/topic-color.png"/>
-                </div>
-                <div id="topicIcon" class="buttonExtOn" title="Add Icon">
-                    <img src="../images/topic-icon.png"/>
-                </div>
-                <div id="topicNote" class="buttonOn" title="Add Note">
-                    <img src="../images/topic-note.png"/>
-                </div>
-                <div id="topicLink" class="buttonOn" title="Add Link">
-                    <img src="../images/topic-link.png"/>
-                </div>
-                <div id="topicRelation" class="buttonOn" title="Add Relationship">
-                    <img src="../images/topic-relation.png"/>
-                </div>
-            </div>
-            <div id="font" class="buttonContainer">
-                <div id="fontFamily" class="buttonOn" title="Font Style">
-                    <img src="../images/font-type.png"/>
-                </div>
-                <div id="fontSize" class="buttonExtOn" title="Font Size">
-                    <img src="../images/font-size.png"/>
-                </div>
-                <div id="fontBold" class="buttonOn" title="Bold Style">
-                    <img src="../images/font-bold.png"/>
-                </div>
-                <div id="fontItalic" class="buttonOn" title="Italic Style">
-                    <img src="../images/font-italic.png"/>
-                </div>
-                <div id="fontColor" class="buttonExtOn" title="Fond Color" style="padding-top:4px">
-                    <img src="../images/font-color.png"/>
-
-                </div>
-            </div>
-            <div id="collaboration" class="buttonContainer">
-                <div id="tagIt" class="buttonOn" title="Tag">
-                    <img src="../images/tag.png"/>
-                </div>
-                <div id="shareIt" class="buttonOn" title="Share">
-                    <img src="../images/share.png"/>
-                </div>
-                <div id="publishIt" class="buttonOn" title="Publish">
-                    <img src="../images/public.png"/>
-                </div>
-                <div id="history" class="buttonOn" title="History">
-                    <img src="../images/history.png"/>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div id="headerNotifier"></div>
-</div>
-
-<div id="mindplot"></div>
-<script type="text/javascript" src="../js/editor.js"></script>
-</body>
-</html>

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

@@ -1,34 +1,36 @@
 <!DOCTYPE HTML>
 
-
 <html>
 <head>
-    <title>WiseMapping - View </title>
+    <title>WiseMapping - View Mode </title>
     <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
     <!--[if lt IE 9]>
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <![endif]-->
-    <link rel="stylesheet" type="text/css" href="../css/viewmode.css"/>
+    <link rel="stylesheet/less" type="text/css" href="../css/editor.less"/>
+
     <script type='text/javascript' src='../js/mootools-core-1.3.2.js'></script>
     <script type='text/javascript' src='../js/mootools-more-1.3.2.js'></script>
     <script type='text/javascript' src='../js/core.js'></script>
+    <script type='text/javascript' src='../js/less-1.1.3.min.js'></script>
 
     <link rel="icon" href="../images/favicon.ico" type="image/x-icon">
     <link rel="shortcut icon" href="../images/favicon.ico" type="image/x-icon">
 
     <script type="text/javascript">
 
-        var mapId = 'welcome';
-        var viewMode = true;
-
         $(document).addEvent('loadcomplete', function(resource) {
-            var designer = buildDesigner(viewMode);
 
-            // Configure default persistence manager ...
+            // Configure the map as read only ...
-            mindplot.PersistenceManager.init(new mindplot.LocalStorageManager());
+            var options = loadDesignerOptions();
+            options.readOnly = true;
+
+            // Load designer ...
+            var designer = buildDesigner(options);
 
             // Load map from XML ...
             var persistence = mindplot.PersistenceManager.getInstance();
+            var mapId = 'welcome';
             var mindmap;
             try {
                 mindmap = persistence.load(mapId);
@@ -37,33 +39,100 @@
                 mindmap = mindplot.model.Mindmap.buildEmpty(mapId);
             }
             designer.loadMap(mindmap);
-
-
-            $('zoomIn').addEvent('click', function() {
-                designer.zoomIn();
         });
 
-            $('zoomOut').addEvent('click', function() {
-                designer.zoomOut();
-            });
-        });
-
-
     </script>
 </head>
 <body>
 
-<div id="mapContainer">
+<div id="header">
+
+    <div id="headerInfo">
+        <div id="headerActions"></div>
+        <div id="headerLogo"></div>
+        <div id="headerMapTitle">Title: <span>Welcome</span></div>
+    </div>
+    <div id="toolbar">
+        <div id="editTab" class="tabContent">
+            <div id="persist" class="buttonContainer">
+                <div id="save" class="buttonOn" title="Save">
+                    <img src="../images/save.png"/>
+                </div>
+                <div id="discard" class="buttonOn" title="Discard">
+                    <img src="../images/discard.png"/>
+                </div>
+            </div>
+            <div id="edit" class="buttonContainer">
+                <div id="undoEdition" class="buttonOn" title="Undo Edition">
+                    <img src="../images/undo.png"/>
+                </div>
+                <div id="redoEdition" class="buttonOn" title="Redo Edition">
+                    <img src="../images/redo.png"/>
+                </div>
+            </div>
+            <div id="zoom" class="buttonContainer">
+                <div id="zoomIn" class="buttonOn" title="Zoom In">
+                    <img src="../images/zoom-in.png"/>
+                </div>
+                <div id="zoomOut" class="buttonOn" title="Zoom Out">
+                    <img src="../images/zoom-out.png"/>
+                </div>
+            </div>
+            <div id="node" class="buttonContainer">
+                <div id="topicShape" class="buttonExtOn" title="Topic Shape">
+                    <img src="../images/topic-shape.png"/>
+                </div>
+                <div id="addTopic" class="buttonOn" title="Add Topic">
+                    <img src="../images/topic-add.png"/>
+                </div>
+                <div id="deleteTopic" class="buttonOn" title="Delete">
+                    <img src="../images/topic-delete.png"/>
+                </div>
+                <div id="topicBorder" class="buttonExtOn" title="Border Color">
+                    <img src="../images/topic-border.png"/>
+                </div>
+                <div id="topicColor" class="buttonExtOn" title="Background Color">
+                    <img src="../images/topic-color.png"/>
+                </div>
+                <div id="topicIcon" class="buttonExtOn" title="Add Icon">
+                    <img src="../images/topic-icon.png"/>
+                </div>
+                <div id="topicNote" class="buttonOn" title="Add Note">
+                    <img src="../images/topic-note.png"/>
+                </div>
+                <div id="topicLink" class="buttonOn" title="Add Link">
+                    <img src="../images/topic-link.png"/>
+                </div>
+                <div id="topicRelation" class="buttonOn" title="Add Relationship">
+                    <img src="../images/topic-relation.png"/>
+                </div>
+            </div>
+            <div id="font" class="buttonContainer">
+                <div id="fontFamily" class="buttonExtOn" title="Font Style">
+                    <img src="../images/font-type.png"/>
+                </div>
+                <div id="fontSize" class="buttonExtOn" title="Font Size">
+                    <img src="../images/font-size.png"/>
+                </div>
+                <div id="fontBold" class="buttonOn" title="Bold Style">
+                    <img src="../images/font-bold.png"/>
+                </div>
+                <div id="fontItalic" class="buttonOn" title="Italic Style">
+                    <img src="../images/font-italic.png"/>
+                </div>
+                <div id="fontColor" class="buttonExtOn" title="Fond Color" style="padding-top:4px">
+                    <img src="../images/font-color.png"/>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div id="headerNotifier"></div>
+    <div id="footer">
+        <div id="footerLogo"></div>
+    </div>
+</div>
+
 <div id="mindplot"></div>
-    <div id="embFooter">
-        <div id="logo"></div>
-        <div id="zoomIn" class="button"></div>
-        <div id="zoomOut" class="button"></div>
-        <div id="mapDetails">
-            View Mode Sample
-        </div>
-    </div>
-</div>
 <script type="text/javascript" src="../js/editor.js"></script>
 </body>
 </html>

wise-editor/src/main/webapp/js/editor.js

@@ -20,8 +20,22 @@ var designer = null;
 
 function buildDesigner(options) {
 
-    var container = $('mindplot');
+    var container = $(options.container);
+    $assert(container, 'container could not be null');
+
+    // Register load events ...
     designer = new mindplot.Designer(options, container);
+    designer.addEvent('loadSuccess', function() {
+        window.waitDialog.close();
+        window.waitDialog.destroy();
+    });
+
+    designer.addEvent('loadError', function(e) {
+        window.waitDialog.close();
+        window.waitDialog.destroy();
+        console.log(e);
+    });
+
 
     // Configure default persistence manager ...
     var persistence;
@@ -33,8 +47,7 @@ function buildDesigner(options) {
     }
     mindplot.PersistenceManager.init(persistence);
 
-
+    // Register toolbar event ...
-    if (!options.readOnly) {
     if ($('toolbar')) {
         var menu = new mindplot.widget.Menu(designer, 'toolbar');
 
@@ -43,19 +56,14 @@ function buildDesigner(options) {
             menu.clear()
         };
     }
-    }
+
     return designer;
 }
 
 
-function loadDesignerOptions() {
+function loadDesignerOptions(jsonConf) {
     // Load map options ...
-    var uri = new URI(window.location);
-    var query = String.parseQueryString(uri.get('query'));
-    var jsonConf = query.confUrl;
-    var result;
     if (jsonConf) {
-
         var request = new Request.JSON({
                 url: jsonConf,
                 async:false,
@@ -80,10 +88,143 @@ function loadDesignerOptions() {
             height: parseInt(window.innerHeight - 70), // Footer and Header
             width:  parseInt(window.innerWidth)
         };
-        result = {readOnly:false,zoom:0.85,saveOnLoad:true,size:containerSize,viewPort:viewPort};
+        result = {readOnly:false,zoom:0.85,saveOnLoad:true,size:containerSize,viewPort:viewPort,container:'mindplot'};
     }
     return result;
 }
 
+editor = {};
+editor.WaitDialog = new Class({
+    Extends:MooDialog,
+    initialize : function() {
+        var panel = this._buildPanel();
+        this.parent({
+                closeButton:false,
+                destroyOnClose:true,
+                autoOpen:true,
+                useEscKey:false,
+                title:'Loading ...',
+                onInitialize: function(wrapper) {
+                    wrapper.setStyle('opacity', 0);
+                    this.fx = new Fx.Morph(wrapper, {
+                        duration: 100,
+                        transition: Fx.Transitions.Bounce.easeOut
+                    });
+                    this.overlay = new Overlay(this.options.inject, {
+                        duration: this.options.duration
+                    });
+                    if (this.options.closeOnOverlayClick) this.overlay.addEvent('click', this.close.bind(this));
+                }
+                ,
 
+                onBeforeOpen: function() {
+                    this.overlay.open();
+                    this.fx.start({
+                        'margin-top': [-200, -100],
+                        opacity: [0, 1]
+                    }).chain(function() {
+                        this.fireEvent('show');
+                    }.bind(this));
+                }
+                ,
+
+                onBeforeClose: function() {
+                    this.fx.start({
+                        'margin-top': [-100, 0],
+                        opacity: 0,
+                        duration: 200
+                    }).chain(function() {
+                        this.fireEvent('hide');
+                    }.bind(this));
+                    this.overlay.close();
+                }}
+        )
+            ;
+        this.setContent(panel);
+    },
+
+    _buildPanel : function () {
+        var result = new Element('div');
+        result.setStyles({
+            'text-align':'center',
+            width: '400px'
+        });
+        var img = new Element('img', {'src': '../images/ajax-loader.gif'});
+        img.inject(result);
+        return result;
+    },
+
+    show : function() {
+        this.open();
+    }
+
+});
+
+editor.Help = {
+    buildHelp:function(panel){
+        var container = new Element('div');
+        container.setStyles({width:'100%', textAlign:'center'});
+        var content1 = Help.buildContentIcon('../images/black-keyboard.png', 'Keyboard Shortcuts', function(){MOOdalBox.open('keyboard.htm','KeyBoard Shortcuts', '500px 400px', false);panel.hidePanel();});
+        var content2 = Help.buildContentIcon('../images/firstSteps.png', 'Editor First Steps', 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';
+
+           wOpen = window.open("firststeps.htm", "WiseMapping", "width=100px, height=100px");
+           wOpen.focus();
+           wOpen.moveTo( 0, 0 );
+           wOpen.resizeTo( screen.availWidth, screen.availHeight );
+           panel.hidePanel();
+        });
+
+        container.addEvent('show', function(){
+            content1.effect('opacity',{duration:800}).start(0,100);
+            var eff = function(){content2.effect('opacity',{duration:800}).start(0,100);};
+            eff.delay(150);
+        });
+        container.addEvent('hide', function(){
+            content1.effect('opacity').set(0);
+            content2.effect('opacity').set(0)
+        });
+        content1.inject(container);
+        content2.inject(container);
+        return container;
+    },
+    buildContentIcon:function(image, text, onClickFn){
+        var container = new Element('div').setStyles({margin:'15px 0px 0px 0px', opacity:0, padding:'5px 0px', border: '1px solid transparent', cursor:'pointer'});
+
+        var icon = new Element('div');
+        icon.addEvent('click',onClickFn);
+        var img = new Element('img');
+        img.setProperty('src',image);
+        img.inject(icon);
+        icon.inject(container);
+
+        var textContainer = new Element('div').setStyles({width:'100%', color:'white'});
+        textContainer.innerHTML=text;
+        textContainer.inject(container);
+
+        container.addEvent('mouseover', function(event){
+            $(this).setStyle('border-top', '1px solid #BBB4D6');
+            $(this).setStyle('border-bottom', '1px solid #BBB4D6');
+        }.bindWithEvent(container));
+        container.addEvent('mouseout', function(event){
+            $(this).setStyle('border-top', '1px solid transparent');
+            $(this).setStyle('border-bottom', '1px solid transparent');
+
+        }.bindWithEvent(container));
+        return container;
+    }
+};
+
+
+// Show loading dialog ...
+waitDialog = new editor.WaitDialog();
+waitDialog.show();
+
+// Loading libraries ...
 Asset.javascript("../js/mindplot-min.js");

wise-webapp/src/main/webapp/js/editor.js

@@ -1,60 +0,0 @@
-/*
- *    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.
- */
-Asset.javascript('../js/mindplot-min.js', {
-    id: 'MindplotSVGLib',
-    onLoad: function() {
-        $(document).fireEvent('loadcomplete', 'mind')
-    }
-});
-
-var designer = null;
-/* JavaScript tabs changer */
-
-function setUpToolbar(designer, readOnly) {
-
-    var menu = new mindplot.widget.Menu(designer, 'toolbar', mapId);
-
-    //  If a node has focus, focus can be move to another node using the keys.
-    designer._cleanScreen = function() {
-        menu.clear()
-    };
-
-
-}
-
-function buildDesigner(properties) {
-    $assert(properties, "properties can not be null");
-
-    var container = $('mindplot');
-    container.setStyles({
-        height: parseInt(screen.height),
-        width:  parseInt(screen.width)
-    });
-
-    designer = new mindplot.Designer(properties, container);
-    designer.setViewPort({
-        height: parseInt(window.innerHeight - 151), // Footer and Header
-        width:  parseInt(window.innerWidth)
-    });
-
-    // Toolbar is only loaded if it was defined ...
-    if ($('toolbar')) {
-        setUpToolbar(designer, properties.readOnly);
-    }
-    return designer;
-}

wise-webapp/src/main/webapp/jsp/mindmapEditor.jsp

@@ -14,53 +14,43 @@
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <![endif]-->
     <title><spring:message code="SITE.TITLE"/> - ${mindmap.title} </title>
-    <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
+
-    <link rel="icon" href="../images/favicon.ico" type="image/x-icon">
-    <link rel="shortcut icon" href="../images/favicon.ico" type="image/x-icon">
     <link rel="stylesheet/less" type="text/css" href="../css/editor.less"/>
-
+    <script type='text/javascript' src='../js/mootools-core-1.3.2.js'></script>
-    <script type='text/javascript' src='../js/libraries/mootools/mootools-core-1.3.2-full-compress.js'></script>
+    <script type='text/javascript' src='../js/mootools-more-1.3.2.js'></script>
-    <script type='text/javascript' src='../js/libraries/mootools/mootools-more-1.3.2.1-yui.js'></script>
-
-    <script type="text/javascript" src="../dwr/engine.js"></script>
-    <script type="text/javascript" src="../dwr/interface/MapEditorService.js"></script>
-    <script type="text/javascript" src="../dwr/interface/LoggerService.js"></script>
-
     <script type='text/javascript' src='../js/core.js'></script>
     <script type='text/javascript' src='../js/less-1.1.3.min.js'></script>
 
+    <link rel="icon" href="../images/favicon.ico" type="image/x-icon">
+    <link rel="shortcut icon" href="../images/favicon.ico" type="image/x-icon">
 
     <script type="text/javascript">
+
+        $(document).addEvent('loadcomplete', function(resource) {
             var mapId = '${mindmap.id}';
             var mapXml = '${mapXml}';
-        var mindReady = false;
-        $(document).addEvent('loadcomplete', function(resource) {
-            mindReady = resource == 'mind' ? true : mindReady;
-            if (mindReady) {
-                // Configure default persistence ...
-                mindplot.PersistenceManager.init(new mindplot.DwrPersitenceManager());
-                var persistence = mindplot.PersistenceManager.getInstance();
 
-                // Initialize editor ...
+            // Configure designer options ...
-                var editorProperties = ${mindmap.properties};
+            var options = loadDesignerOptions();
-                editorProperties.collab = 'standalone';
+            options.persistenceManager = "mindplot.DwrPersitenceManager";
-                editorProperties.readOnly = false;
+            var userOptions = ${mindmap.properties};
-                designer = buildDesigner(editorProperties);
+            options.zoom = userOptions.zoom;
 
+            // Build designer ...
+            var designer = buildDesigner(options);
+
+            // Load map from XML ...
             var domDocument = core.Utils.createDocumentFromText(mapXml);
+            var persistence = mindplot.PersistenceManager.getInstance();
             var mindmap = persistence.loadFromDom(mapId, domDocument);
-
-                // Now, load the map ...
             designer.loadMap(mindmap);
-
-                // If not problem has arisen, close the dialog ...
-                if (!window.hasUnexpectedErrors) {
-                    waitDialog.deactivate();
-                }
-            }
         });
-    </script>
 
+        function printMap() {
+            document.printForm.mapSvg.value = $("workspaceContainer").innerHTML;
+            document.printForm.submit();
+        }
+    </script>
 </head>
 <body>
 
@@ -71,42 +61,6 @@
     <input type="hidden" name="mapSvg" value="">
 </form>
 
-<div id="waitDialog" style="display:none">
-    <div id="waitingContainer">
-        <div class="loadingIcon"></div>
-        <div class="loadingText">
-            Loading ...
-        </div>
-    </div>
-</div>
-
-<div id="errorDialog" style="display:none">
-    <div id="errorContainer">
-        <div class="loadingIcon"></div>
-        <div class="loadingText">
-            Unexpected error loading your map :(
-        </div>
-    </div>
-</div>
-
-<script type="text/javascript">
-
-    var waitDialog = new core.WaitDialog();
-    waitDialog.activate(true, $("waitDialog"));
-    $(window).addEvent("error", function(event) {
-
-        // Show error dialog ...
-        waitDialog.changeContent($("errorDialog"), false);
-        return false;
-    });
-
-    function printMap() {
-        document.printForm.mapSvg.value = $("workspaceContainer").innerHTML;
-        document.printForm.submit();
-    }
-</script>
-
-
 <div id="actionsContainer"></div>
 <div>
     <c:url value="mymaps.htm" var="shareMap">

wise-webapp/src/main/webapp/jsp/toolbar.jsf

@@ -39,7 +39,7 @@
         <div id="deleteTopic" class="buttonOn" title="Delete">
             <img src="../images/topic-delete.png"/>
         </div>
-        <div id="topicBorder" class="buttonOn" title="Border Color">
+        <div id="topicBorder" class="buttonExtOn" title="Border Color">
             <img src="../images/topic-border.png"/>
         </div>
         <div id="topicColor" class="buttonExtOn" title="Background Color">