Adding Chrome, Safari and IE9 support

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

@@ -24,6 +24,9 @@ core.UserAgent = {
         if (!core.Utils.isDefined())
         {
             this._isVMLSupported = navigator.appVersion.match(/MSIE (\d\.\d)/);
+            if(this._isVMLSupported == null || parseInt(this._isVMLSupported[1])>=9){
+                this._isVMLSupported = false;
+            }
         }
         return this._isVMLSupported;
     },
@@ -75,6 +78,11 @@ core.UserAgent = {
             subString: "Apple",
             identity: "Safari"
         },
+        {
+            string: navigator.vendor,
+            subString: "Google Inc.",
+            identity: "Chrome"
+        },
         {
             prop: window.opera,
             identity: "Opera"

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

@@ -101,6 +101,9 @@ core.Utils.getMousePosition = function(event)
             throw "Could not obtain mouse position";
         }
     }
+    if(core.Utils.isDefined(event.$extended)){
+        event = event.event;
+    }
     if (typeof( event.pageX ) == 'number') {
         //most browsers
         xcoord = event.pageX;

mindplot/src/main/javascript/DragManager.js

@@ -21,9 +21,7 @@ mindplot.DragManager = function(workspace)
 {
     this._workspace = workspace;
     this._listeners = {};
-    this._processMouseMoveEvent = true;
     var dragManager = this;
-    this._precitionUpdater = null;
 };
 
 mindplot.DragManager.prototype.add = function(node)
@@ -44,19 +42,14 @@ mindplot.DragManager.prototype.add = function(node)
             var dragNode = node.createDragNode();
             var mousePos = screen.getWorkspaceMousePosition(event);
             dragNode.setPosition(mousePos.x, mousePos.y);
-            var periodicalFunction = function() {
-                dragManager._processMouseMoveEvent = true;
-            };
-            // Start precision timer updater ...
-            dragManager._precitionUpdater = periodicalFunction.periodical(mindplot.DragManager.DRAG_PRECISION_IN_SEG);
 
             // Register mouse move listener ...
             var mouseMoveListener = dragManager._buildMouseMoveListener(workspace, dragNode, dragManager);
-            workspace.addEventListener('mousemove', mouseMoveListener);
+            screen.addEventListener('mousemove', mouseMoveListener);
 
             // Register mouse up listeners ...
             var mouseUpListener = dragManager._buildMouseUpListener(workspace, node, dragNode, dragManager);
-            workspace.addEventListener('mouseup', mouseUpListener);
+            screen.addEventListener('mouseup', mouseUpListener);
 
             // Execute Listeners ..
             var startDragListener = dragManager._listeners['startdragging'];
@@ -92,10 +85,7 @@ mindplot.DragManager.prototype._buildMouseMoveListener = function(workspace, dra
 {
     var screen = workspace.getScreenManager();
     var result = function(event) {
-        if (dragManager._processMouseMoveEvent)
+
-        {
-            // Disable mouse move rendering ...
-            dragManager._processMouseMoveEvent = false;
         if (!dragNode._isInTheWorkspace)
         {
             // Add shadow node to the workspace.
@@ -112,8 +102,9 @@ mindplot.DragManager.prototype._buildMouseMoveListener = function(workspace, dra
         {
             dragListener(event, dragNode);
         }
-        }
+
-    };
+        event.preventDefault();
+    }.bindWithEvent(this);
     dragManager._mouseMoveListener = result;
     return result;
 };
@@ -133,8 +124,8 @@ mindplot.DragManager.prototype._buildMouseUpListener = function(workspace, node,
         }
 
         // Remove all the events.
-        workspace.removeEventListener('mousemove', dragManager._mouseMoveListener);
+        screen.removeEventListener('mousemove', dragManager._mouseMoveListener);
-        workspace.removeEventListener('mouseup', dragManager._mouseUpListener);
+        screen.removeEventListener('mouseup', dragManager._mouseUpListener);
 
         // Help GC
         dragManager._mouseMoveListener = null;
@@ -149,10 +140,6 @@ mindplot.DragManager.prototype._buildMouseUpListener = function(workspace, node,
             dragNode._isInTheWorkspace = false;
         }
 
-        // Stop presition updater listener ...
-        $clear(dragManager._precitionUpdater);
-        dragManager._precitionUpdater = null;
-
         // Change the cursor to the default.
         window.document.body.style.cursor = 'default';
 

mindplot/src/main/javascript/MindmapDesigner.js

@@ -159,17 +159,16 @@ mindplot.MindmapDesigner.prototype._registerEvents = function()
 
     if (!this._viewMode)
     {
-
         // Initialize workspace event listeners.
         // Create nodes on double click...
-        workspace.addEventListener('click', function(event)
+        screenManager.addEventListener('click', function(event)
         {
             mindmapDesigner.getEditor().lostFocus();
             // @todo: Puaj hack...
             mindmapDesigner._cleanScreen();
         });
 
-        workspace.addEventListener('dblclick', function(event)
+        screenManager.addEventListener('dblclick', function(event)
         {
             mindmapDesigner.getEditor().lostFocus();
             // Get mouse position

mindplot/src/main/javascript/ScreenManager.js

@@ -29,6 +29,14 @@ mindplot.ScreenManager.prototype.setScale = function(scale)
     this._workspaceScale = scale;
 };
 
+mindplot.ScreenManager.prototype.addEventListener=function(event, listener){
+    $(this._divContainer).addListener(event, listener);
+};
+
+mindplot.ScreenManager.prototype.removeEventListener=function(event, listener){
+    $(this._divContainer).removeListener(event, listener);
+};
+
 mindplot.ScreenManager.prototype.getWorkspaceElementPosition = function(e)
 {
     // Retrive current element position.

mindplot/src/main/javascript/Workspace.js

@@ -182,18 +182,9 @@ mindplot.Workspace.prototype._registerDragEvents = function()
 
                 var mouseDownPosition = screenManager.getWorkspaceMousePosition(event);
                 var originalCoordOrigin = workspace.getCoordOrigin();
-                var periodicalFunction = function() {
-                    mWorkspace._processMouseMoveEvent = true;
-                };
-                // Start precision timer updater ...
-                mWorkspace._precitionUpdater = periodicalFunction.periodical(mindplot.Workspace.DRAG_PRECISION_IN_SEG);
 
                 workspace.mouseMoveListener = function(event)
                 {
-                    if (mWorkspace._processMouseMoveEvent)
-                    {
-                        // Disable mouse move rendering ...
-                        mWorkspace._processMouseMoveEvent = false;
 
                         var currentMousePosition = screenManager.getWorkspaceMousePosition(event);
 
@@ -213,19 +204,16 @@ mindplot.Workspace.prototype._registerDragEvents = function()
                         {
                             window.document.body.style.cursor = "move";
                         }
-                    }
+                    event.preventDefault();
-                };
+                }.bindWithEvent(this);
-                workspace.addEventListener('mousemove', workspace.mouseMoveListener);
+                screenManager.addEventListener('mousemove', workspace.mouseMoveListener);
 
                 // Register mouse up listeners ...
                 workspace.mouseUpListener = function(event)
                 {
-                    // Stop presition updater listener ...
-                    $clear(mWorkspace._precitionUpdater);
-                    mWorkspace._precitionUpdater = null;
 
-                    workspace.removeEventListener('mousemove', workspace.mouseMoveListener);
+                    screenManager.removeEventListener('mousemove', workspace.mouseMoveListener);
-                    workspace.removeEventListener('mouseup', workspace.mouseUpListener);
+                    screenManager.removeEventListener('mouseup', workspace.mouseUpListener);
                     workspace.mouseUpListener = null;
                     workspace.mouseMoveListener = null;
                     window.document.body.style.cursor = 'default';
@@ -235,7 +223,7 @@ mindplot.Workspace.prototype._registerDragEvents = function()
                     screenManager.setOffset(coordOrigin.x, coordOrigin.y);
                     mWorkspace.enableWorkspaceEvents(true);
                 };
-                workspace.addEventListener('mouseup', workspace.mouseUpListener);
+                screenManager.addEventListener('mouseup', workspace.mouseUpListener);
             }
         } else
         {
@@ -243,7 +231,6 @@ mindplot.Workspace.prototype._registerDragEvents = function()
         }
     };
 
-    workspace.addEventListener('mousedown', mouseDownListener);
+    screenManager.addEventListener('mousedown', mouseDownListener);
 };
 
-mindplot.Workspace.DRAG_PRECISION_IN_SEG = 50;

web2d/src/main/javascript/peer/svg/TextPeer.js

@@ -167,14 +167,16 @@ web2d.peer.svg.TextPeer.prototype.setSize = function (size)
 
 web2d.peer.svg.TextPeer.prototype.getWidth = function ()
 {
-    var width = parseInt(this._native.getComputedTextLength());
+    var computedWidth = this._native.getBBox().width;
+    var width = parseInt(computedWidth);
     width = width + this._font.getWidthMargin();
     return width;
 };
 
 web2d.peer.svg.TextPeer.prototype.getHeight = function ()
 {
-    return this._font.getGraphSize();
+    var computedHeight = this._native.getBBox().height;
+    return parseInt(computedHeight);
 };
 
 web2d.peer.svg.TextPeer.prototype.getHtmlFontSize = function ()

web2d/src/test/javascript/render/events.html

@@ -2,7 +2,62 @@
 
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
-    <script type="text/javascript" src="web2dLibraryLoader.js"></script>
+    <script type="text/javascript">
+        web2d = {
+            peer: {}
+        };
+
+        web2d.peer =
+        {
+            svg: {},
+            vml: {}
+        };
+
+        web2d.peer.utils = {};
+    </script>
+
+    <script type="text/javascript" src="mootools.js"></script>
+    <script type="text/javascript" src="../../../../../core-js/target/classes/core.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/EventDispatcher.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ElementPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ElementPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Element.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Workspace.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/WorkspacePeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/WorkspacePeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Toolkit.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Elipse.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ElipsePeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ElipsePeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Line.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/LinePeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/LinePeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/PolyLine.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/PolyLinePeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/PolyLinePeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Group.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/GroupPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/GroupPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Rect.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/RectPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/RectPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Text.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TextPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TextPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TextBoxPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/utils/TransformUtils.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/utils/EventUtils.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Font.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/Font.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/Font.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TahomaFont.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TimesFont.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ArialFont.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/VerdanaFont.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TahomaFont.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TimesFont.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ArialFont.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/VerdanaFont.js"></script>
     <script type="text/javascript" src="utils.js"></script>
     <style type="text/css">
         .eventForm {
@@ -41,10 +96,95 @@
             return this._enable;
         };
 
+         function MultipleEventHandler(type, element)
+            {
+                this._listeners = [];
+                this._type = type;
+                this._element = element;
+            }
+
+            MultipleEventHandler.prototype.registerOneListener = function()
+            {
+                var count = this._listeners.length;
+                var listener = function(event) {
+                    alert("Listener #:" + count);
+                };
+                this._listeners.push(listener);
+                this._element.addEventListener(this._type, listener);
+
+            }
+
+            MultipleEventHandler.prototype.listenerCount = function()
+            {
+                return  this._listeners.length;
+            }
+
+            MultipleEventHandler.prototype.unRegisterOneListener = function()
+            {
+                if (this._listeners.length > 0)
+                {
+                    var listener = this._listeners.pop();
+                    this._element.removeEventListener(this._type, listener);
+                }
+            }
+
+        function initialize(){
+            web2d.peer.Toolkit.init();
+
+            // Workspace with CoordOrigin(100,100);
+            var workspace = new web2d.Workspace();
+            workspace.setSize("150px", "150px");
+            workspace.setCoordSize(150, 150);
+
+            var bigElipse = new web2d.Elipse();
+            bigElipse.setSize(100, 100);
+            bigElipse.setPosition(75, 75);
+            workspace.appendChild(bigElipse);
+
+            var smallElipse = new web2d.Elipse();
+            smallElipse.setSize(50, 50);
+            smallElipse.setPosition(75, 75);
+            smallElipse.setFill('red')
+            workspace.appendChild(smallElipse);
+
+            wClickEventLogger = new EventLogger('click', workspace);
+            wMouseoverEventLogger = new EventLogger('mouseover', workspace);
+            wMouseoutEventLogger = new EventLogger('mouseout', workspace);
+            wMousemoveEventLogger = new EventLogger('mousemove', workspace);
+            wDblCickEventLogger = new EventLogger('dblclick', workspace);
+
+            esClickEventLogger = new EventLogger('click', smallElipse);
+            esMouseoverEventLogger = new EventLogger('mouseover', smallElipse);
+            esMouseoutEventLogger = new EventLogger('mouseout', smallElipse);
+            esMousemoveEventLogger = new EventLogger('mousemove', smallElipse);
+            esDblCickEventLogger = new EventLogger('dblclick', smallElipse);
+
+            ebClickEventLogger = new EventLogger('click', bigElipse);
+            ebMouseoverEventLogger = new EventLogger('mouseover', bigElipse);
+            ebMouseoutEventLogger = new EventLogger('mouseout', bigElipse);
+            ebousemoveEventLogger = new EventLogger('mousemove', bigElipse);
+            ebblCickEventLogger = new EventLogger('dblclick', bigElipse);
+
+            workspace.addItAsChildTo($("workspaceContainer"));
+
+            var mEventWorkspace = new web2d.Workspace();
+            mEventWorkspace.setSize("150px", "150px");
+            mEventWorkspace.setCoordSize(150, 150);
+
+            var elipse = new web2d.Elipse();
+            elipse.setSize(100, 100);
+            elipse.setPosition(75, 75);
+            elipse.setFill('blue')
+            mEventWorkspace.appendChild(elipse);
+
+            mEventWorkspace.addItAsChildTo($("workspaceMultipleEvents"));
+            multipleHandler = new MultipleEventHandler('click', elipse);
+        }
+
     </script>
 </head>
 
-<body>
+<body onload="initialize();">
 
 <script type="text/javascript">
     //    Logger.setEnabled(true);
@@ -150,46 +290,6 @@
 </td>
 
 
-<script type="text/javascript">
-    web2d.peer.Toolkit.init();
-
-    // Workspace with CoordOrigin(100,100);
-    var workspace = new web2d.Workspace();
-    workspace.setSize("150px", "150px");
-    workspace.setCoordSize(150, 150);
-
-    var bigElipse = new web2d.Elipse();
-    bigElipse.setSize(100, 100);
-    bigElipse.setPosition(75, 75);
-    workspace.appendChild(bigElipse);
-
-    var smallElipse = new web2d.Elipse();
-    smallElipse.setSize(50, 50);
-    smallElipse.setPosition(75, 75);
-    smallElipse.setFill('red')
-    workspace.appendChild(smallElipse);
-
-    wClickEventLogger = new EventLogger('click', workspace);
-    wMouseoverEventLogger = new EventLogger('mouseover', workspace);
-    wMouseoutEventLogger = new EventLogger('mouseout', workspace);
-    wMousemoveEventLogger = new EventLogger('mousemove', workspace);
-    wDblCickEventLogger = new EventLogger('dblclick', workspace);
-
-    esClickEventLogger = new EventLogger('click', smallElipse);
-    esMouseoverEventLogger = new EventLogger('mouseover', smallElipse);
-    esMouseoutEventLogger = new EventLogger('mouseout', smallElipse);
-    esMousemoveEventLogger = new EventLogger('mousemove', smallElipse);
-    esDblCickEventLogger = new EventLogger('dblclick', smallElipse);
-
-    ebClickEventLogger = new EventLogger('click', bigElipse);
-    ebMouseoverEventLogger = new EventLogger('mouseover', bigElipse);
-    ebMouseoutEventLogger = new EventLogger('mouseout', bigElipse);
-    ebousemoveEventLogger = new EventLogger('mousemove', bigElipse);
-    ebblCickEventLogger = new EventLogger('dblclick', bigElipse);
-
-    workspace.addItAsChildTo($("workspaceContainer"));
-
-</script>
 </tr>
 <tr>
     <td>Multiple listeners can be attached to an element to handle an event type.
@@ -215,53 +315,6 @@
             </form>
 
         </div>
-        <script type="text/javascript">
-            function MultipleEventHandler(type, element)
-            {
-                this._listeners = [];
-                this._type = type;
-                this._element = element;
-            }
-
-            MultipleEventHandler.prototype.registerOneListener = function()
-            {
-                var count = this._listeners.length;
-                var listener = function(event) {
-                    alert("Listener #:" + count);
-                };
-                this._listeners.push(listener);
-                this._element.addEventListener(this._type, listener);
-
-            }
-
-            MultipleEventHandler.prototype.listenerCount = function()
-            {
-                return  this._listeners.length;
-            }
-
-            MultipleEventHandler.prototype.unRegisterOneListener = function()
-            {
-                if (this._listeners.length > 0)
-                {
-                    var listener = this._listeners.pop();
-                    this._element.removeEventListener(this._type, listener);
-                }
-            }
-
-            var mEventWorkspace = new web2d.Workspace();
-            mEventWorkspace.setSize("150px", "150px");
-            mEventWorkspace.setCoordSize(150, 150);
-
-            var elipse = new web2d.Elipse();
-            elipse.setSize(100, 100);
-            elipse.setPosition(75, 75);
-            elipse.setFill('blue')
-            mEventWorkspace.appendChild(elipse);
-
-            mEventWorkspace.addItAsChildTo($("workspaceMultipleEvents"));
-            multipleHandler = new MultipleEventHandler('click', elipse);
-
-        </script>
     </td>
 </tr>
 </tbody>

web2d/src/test/javascript/render/group.html

@@ -2,31 +2,65 @@
 
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
-    <script type="text/javascript" src="web2dLibraryLoader.js"></script>
-    <script type="text/javascript" src="utils.js"></script>
-</head>
-
-<body>
-
-<h1>Group Render Tests.</h1>
-<table border="1">
-<colgroup style="width:80%;">
-    <col style="width:50%"/>
-    <col style="width:50%"/>
-</colgroup>
-<tr>
-    <td>
-        A group object can be used to collect shapes. In this example,
-        There is a group that contains an elipse and two lines as children.
-        Changing the group position also change the position of all contained
-        elements.
-    </td>
-    <td>
-        <div id="groupBasicContainer"/>
-    </td>
-
-</tr>
     <script type="text/javascript">
+        web2d = {
+            peer: {}
+        };
+
+        web2d.peer =
+        {
+            svg: {},
+            vml: {}
+        };
+
+        web2d.peer.utils = {};
+    </script>
+
+    <script type="text/javascript" src="mootools.js"></script>
+    <script type="text/javascript" src="../../../../../core-js/target/classes/core.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/EventDispatcher.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ElementPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ElementPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Element.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Workspace.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/WorkspacePeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/WorkspacePeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Toolkit.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Elipse.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ElipsePeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ElipsePeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Line.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/LinePeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/LinePeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/PolyLine.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/PolyLinePeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/PolyLinePeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Group.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/GroupPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/GroupPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Rect.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/RectPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/RectPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Text.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TextPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TextPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TextBoxPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/utils/TransformUtils.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/utils/EventUtils.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Font.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/Font.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/Font.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TahomaFont.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TimesFont.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ArialFont.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/VerdanaFont.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TahomaFont.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TimesFont.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ArialFont.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/VerdanaFont.js"></script>
+    <script type="text/javascript" src="utils.js"></script>
+    <script type="text/javascript">
+    function initialize(){
         web2d.peer.Toolkit.init();
 
         var basicTest = function()
@@ -91,20 +125,7 @@
             executer.periodical(100);
         };
         basicTest();
-</script>
-<!-- ************************************************************************** -->
-<tr>
-    <td>
-        Following the bubbling event pattern, all the events over a shape are propageted to its
-        parent. In this example, both elipse objects are child of a group element and click event listeners
-        have been added to the elipse and the group.
-    </td>
-    <td>
-        <div id="groupEventsContainer"/>
-    </td>
 
-</tr>
-<script type="text/javascript">
 
         var eventTest = function()
         {
@@ -136,36 +157,8 @@
             workspace.addItAsChildTo($("groupEventsContainer"));
         }
         eventTest();
-</script>
-<!-- ************************************************************************** -->
-<tr>
-    <td>
-        Groups can be nested as a regular shape. An important property of the groups is the ability
-        to define their own coordSize, coorOrigin and size. In this example, both shapes have been
-        created with the same properties. The red one has been added as a child element of a group with the
-        following properties:<br/>
-        <br/>
-        Size(50,50);<br/>
-        Position(25,25);<br/>
-        CoordSize(100,100);<br/>
-        CoordOrigin(0,0)<br/>
 
-        The blue one has been added as a child of another group with the following properties::<br/>
-        <br/>
-        Size(50,50);<br/>
-        Position(25,25);<br/>
-        CoordSize(100,100);<br/>
-        CoordOrigin(0,0);<br/>
-        <br/>
-        Finally, the second group has been added as a child of the first declared group.
-    </td>
-    <td>
-        <div id="groupNestedContainer"/>
-    </td>
 
-</tr>
-
-<script type="text/javascript">
         var eventTest = function()
         {
             var workspace = new web2d.Workspace();
@@ -224,38 +217,8 @@
             workspace.addItAsChildTo($("groupNestedContainer"));
         };
         eventTest();
-</script>
 
-<!-- ************************************************************************** -->
-<tr>
-    <td>
-        Group coordsize defines how many units there are along the width of the containing block.
-        In all the examples, the coordsize of the workspaces have been set to (100,100) and the circles have been
-        positioned
-        at (0,0),(0,100),(100,0),(100,100)(50,50).<br/>
-        <br/>
-        1) Group with CoordSize(100,100)<br/>
-        2) Group with CoordSize(100,200)<br/>
-        3) Group with CoordSize(200,100)<br/>
-    </td>
-    <td>
-        <div style="position:relative;width:100%;">
-            <div id="coordsizeExample100x100" style="float:left;margin:20px;">
-                (1)
-            </div>
 
-            <div id="coordsizeExample100x200" style="float:left;margin:20px;">
-                (2)
-            </div>
-
-            <div id="coordsizeExample200x100" style="float:left;margin:20px;">
-                (3)
-            </div>
-        </div>
-    </td>
-</tr>
-
-<script type="text/javascript">
         var workspaceCoordSizeSample = function()
         {
 
@@ -296,37 +259,8 @@
             sample200x100.addItAsChildTo($("coordsizeExample200x100"));
         };
         workspaceCoordSizeSample();
-</script>
 
-<!-- ************************************************************************** -->
-<tr>
-    <td>
-        Group coordorigin defines the coordinate at the top left corner of the containing block.
-        In all the examples,the coordsize of the groups have been set to (100,100) and the circles have been positioned
-        at (0,0),(0,100),(100,0),(100,100)(50,50). <br/>
-        <br/>
-        1) Group with CoordOrigin(0,0)<br/>
-        2) Group with CoordOrigin(0,50)<br/>
-        3) Group with CoordOrigin(50,0)<br/>
-    </td>
-    <td>
-        <div style="position:relative;width:100%;">
-            <div id="coordOriginExample0x0" style="float:left;margin:20px;">
-                (1)
-            </div>
 
-            <div id="coordOriginExample0x50" style="float:left;margin:20px;">
-                (2)
-            </div>
-
-            <div id="coordOriginExample50x0" style="float:left;margin:20px;">
-                (3)
-            </div>
-        </div>
-    </td>
-</tr>
-
-<script type="text/javascript">
         var workspaceCoordOriginSample = function()
         {
 
@@ -368,20 +302,9 @@
             sample200x100.addItAsChildTo($("coordOriginExample50x0"));
         }
         workspaceCoordOriginSample();
-</script>
 
-<!-- ************************************************************************** -->
-<tr>
-    <td>
-        Visibility can be used to hide an element and disable all the element events.
-        In the case of a group, this property is applied to all the children elements.
-    </td>
-    <td>
-        <div id="visibilityExample" style="float:left;margin:20px;"></div>
-    </td>
-</tr>
 
-<script type="text/javascript">
+
         var groupVisibilitySample = function()
         {
 
@@ -423,19 +346,7 @@
 
         }
         groupVisibilitySample();
-</script>
 
-<!-- ************************************************************************** -->
-<tr>
-    <td>
-        Scale.
-    </td>
-    <td>
-        <div id="scaleStrokeExample" style="float:left;margin:20px;"></div>
-    </td>
-</tr>
-
-<script type="text/javascript">
         var groupVisibilitySample = function()
         {
 
@@ -473,7 +384,154 @@
 
         }
         groupVisibilitySample();
+
+    }
 </script>
+</head>
+
+<body onload="initialize();">
+
+<h1>Group Render Tests.</h1>
+<table border="1">
+<colgroup style="width:80%;">
+    <col style="width:50%"/>
+    <col style="width:50%"/>
+</colgroup>
+<tr>
+    <td>
+        A group object can be used to collect shapes. In this example,
+        There is a group that contains an elipse and two lines as children.
+        Changing the group position also change the position of all contained
+        elements.
+    </td>
+    <td>
+        <div id="groupBasicContainer"/>
+    </td>
+
+</tr>
+
+<!-- ************************************************************************** -->
+<tr>
+    <td>
+        Following the bubbling event pattern, all the events over a shape are propageted to its
+        parent. In this example, both elipse objects are child of a group element and click event listeners
+        have been added to the elipse and the group.
+    </td>
+    <td>
+        <div id="groupEventsContainer"/>
+    </td>
+
+</tr>
+<!-- ************************************************************************** -->
+<tr>
+    <td>
+        Groups can be nested as a regular shape. An important property of the groups is the ability
+        to define their own coordSize, coorOrigin and size. In this example, both shapes have been
+        created with the same properties. The red one has been added as a child element of a group with the
+        following properties:<br/>
+        <br/>
+        Size(50,50);<br/>
+        Position(25,25);<br/>
+        CoordSize(100,100);<br/>
+        CoordOrigin(0,0)<br/>
+
+        The blue one has been added as a child of another group with the following properties::<br/>
+        <br/>
+        Size(50,50);<br/>
+        Position(25,25);<br/>
+        CoordSize(100,100);<br/>
+        CoordOrigin(0,0);<br/>
+        <br/>
+        Finally, the second group has been added as a child of the first declared group.
+    </td>
+    <td>
+        <div id="groupNestedContainer"/>
+    </td>
+
+</tr>
+
+
+<!-- ************************************************************************** -->
+<tr>
+    <td>
+        Group coordsize defines how many units there are along the width of the containing block.
+        In all the examples, the coordsize of the workspaces have been set to (100,100) and the circles have been
+        positioned
+        at (0,0),(0,100),(100,0),(100,100)(50,50).<br/>
+        <br/>
+        1) Group with CoordSize(100,100)<br/>
+        2) Group with CoordSize(100,200)<br/>
+        3) Group with CoordSize(200,100)<br/>
+    </td>
+    <td>
+        <div style="position:relative;width:100%;">
+            <div id="coordsizeExample100x100" style="float:left;margin:20px;">
+                (1)
+            </div>
+
+            <div id="coordsizeExample100x200" style="float:left;margin:20px;">
+                (2)
+            </div>
+
+            <div id="coordsizeExample200x100" style="float:left;margin:20px;">
+                (3)
+            </div>
+        </div>
+    </td>
+</tr>
+
+<!-- ************************************************************************** -->
+<tr>
+    <td>
+        Group coordorigin defines the coordinate at the top left corner of the containing block.
+        In all the examples,the coordsize of the groups have been set to (100,100) and the circles have been positioned
+        at (0,0),(0,100),(100,0),(100,100)(50,50). <br/>
+        <br/>
+        1) Group with CoordOrigin(0,0)<br/>
+        2) Group with CoordOrigin(0,50)<br/>
+        3) Group with CoordOrigin(50,0)<br/>
+    </td>
+    <td>
+        <div style="position:relative;width:100%;">
+            <div id="coordOriginExample0x0" style="float:left;margin:20px;">
+                (1)
+            </div>
+
+            <div id="coordOriginExample0x50" style="float:left;margin:20px;">
+                (2)
+            </div>
+
+            <div id="coordOriginExample50x0" style="float:left;margin:20px;">
+                (3)
+            </div>
+        </div>
+    </td>
+</tr>
+
+<script type="text/javascript">
+
+</script>
+
+<!-- ************************************************************************** -->
+<tr>
+    <td>
+        Visibility can be used to hide an element and disable all the element events.
+        In the case of a group, this property is applied to all the children elements.
+    </td>
+    <td>
+        <div id="visibilityExample" style="float:left;margin:20px;"></div>
+    </td>
+</tr>
+
+<!-- ************************************************************************** -->
+<tr>
+    <td>
+        Scale.
+    </td>
+    <td>
+        <div id="scaleStrokeExample" style="float:left;margin:20px;"></div>
+    </td>
+</tr>
 
 </table>
 </body>

web2d/src/test/javascript/render/line.html

@@ -2,29 +2,65 @@
 
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
-    <script type="text/javascript" src="web2dLibraryLoader.js"></script>
-    <script type="text/javascript" src="utils.js"></script>
-</head>
-
-<body>
-
-<h1>Lines Render Tests </h1>
-
-<table border="1">
-<colgroup style="width:80%;">
-    <col style="width:30%"/>
-    <col style="width:60%"/>
-</colgroup>
-<tr>
-    <td>
-        Lines.
-    </td>
-    <td>
-        <div id="strokeWidthSample"/>
-    </td>
-
-</tr>
     <script type="text/javascript">
+        web2d = {
+            peer: {}
+        };
+
+        web2d.peer =
+        {
+            svg: {},
+            vml: {}
+        };
+
+        web2d.peer.utils = {};
+    </script>
+
+    <script type="text/javascript" src="mootools.js"></script>
+    <script type="text/javascript" src="../../../../../core-js/target/classes/core.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/EventDispatcher.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ElementPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ElementPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Element.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Workspace.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/WorkspacePeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/WorkspacePeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Toolkit.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Elipse.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ElipsePeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ElipsePeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Line.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/LinePeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/LinePeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/PolyLine.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/PolyLinePeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/PolyLinePeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Group.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/GroupPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/GroupPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Rect.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/RectPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/RectPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Text.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TextPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TextPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TextBoxPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/utils/TransformUtils.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/utils/EventUtils.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Font.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/Font.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/Font.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TahomaFont.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TimesFont.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ArialFont.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/VerdanaFont.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TahomaFont.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TimesFont.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ArialFont.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/VerdanaFont.js"></script>
+    <script type="text/javascript" src="utils.js"></script>
+    <script type="text/javascript">
+        function initialize(){
             web2d.peer.Toolkit.init();
             var workspaceAttributes = { width:'700px',height:'100px',coordSize:'350 50',fillColor:'#ffffcc'};
             var strokeWidthWorkspace = new web2d.Workspace(workspaceAttributes);
@@ -46,18 +82,7 @@
             strokeWidthWorkspace.appendChild(rect);
 
             strokeWidthWorkspace.addItAsChildTo($("strokeWidthSample"));
-</script>
 
-<tr>
-    <td>
-        Lines Opacity.
-    </td>
-    <td>
-        <div id="strokeOpacitySample"/>
-    </td>
-
-</tr>
-<script type="text/javascript">
             var strokeOpacityWorkspace = new web2d.Workspace(workspaceAttributes);
             for (var i = 0; i < 10; i++)
             {
@@ -70,19 +95,7 @@
                 strokeOpacityWorkspace.appendChild(line);
             }
             strokeOpacityWorkspace.addItAsChildTo($("strokeOpacitySample"));
-</script>
 
-<tr>
-    <td>
-        Line Styles.
-    </td>
-    <td>
-        <div id="strokeStyleSample"/>
-    </td>
-
-</tr>
-
-<script type="text/javascript">
             var strokeStyleWorkspace = new web2d.Workspace(workspaceAttributes);
             var styles = ['solid','dot','dash','dashdot','longdash'];
             for (var i = 0; i < styles.length; i++)
@@ -96,19 +109,7 @@
                 strokeStyleWorkspace.appendChild(line);
             }
             strokeStyleWorkspace.addItAsChildTo($("strokeStyleSample"));
-</script>
 
-<tr>
-    <td>
-        Line Arrows.
-    </td>
-    <td>
-        <div id="strokeArrowSample"/>
-    </td>
-
-</tr>
-
-<script type="text/javascript">
             var strokeArrowWorkspace = new web2d.Workspace(workspaceAttributes);
             var styles = ['none ','block ','classic','diamond ','oval','open','chevron','doublechevron'];
             for (var i = 0; i < styles.length; i++)
@@ -122,7 +123,58 @@
                 strokeArrowWorkspace.appendChild(line);
             }
             strokeArrowWorkspace.addItAsChildTo($("strokeArrowSample"));
+        }
     </script>
+</head>
+
+<body onload="initialize();">
+
+<h1>Lines Render Tests </h1>
+
+<table border="1">
+<colgroup style="width:80%;">
+    <col style="width:30%"/>
+    <col style="width:60%"/>
+</colgroup>
+<tr>
+    <td>
+        Lines.
+    </td>
+    <td>
+        <div id="strokeWidthSample"/>
+    </td>
+
+</tr>
+
+<tr>
+    <td>
+        Lines Opacity.
+    </td>
+    <td>
+        <div id="strokeOpacitySample"/>
+    </td>
+
+</tr>
+
+<tr>
+    <td>
+        Line Styles.
+    </td>
+    <td>
+        <div id="strokeStyleSample"/>
+    </td>
+
+</tr>
+
+<tr>
+    <td>
+        Line Arrows.
+    </td>
+    <td>
+        <div id="strokeArrowSample"/>
+    </td>
+
+</tr>
 
 </table>
 </body>

web2d/src/test/javascript/render/polyLine.html

@@ -2,28 +2,65 @@
 
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
-    <script type="text/javascript" src="web2dLibraryLoader.js"></script>
-</head>
-
-<body>
-
-<h1>PolyLines Render Tests </h1>
-
-<table border="1">
-<colgroup style="width:80%;">
-    <col style="width:30%"/>
-    <col style="width:60%"/>
-</colgroup>
-<tr>
-    <td>
-        Different types of PolyLines that can be used.
-    </td>
-    <td>
-        <div id="overflowExample"/>
-    </td>
-
-</tr>
     <script type="text/javascript">
+        web2d = {
+            peer: {}
+        };
+
+        web2d.peer =
+        {
+            svg: {},
+            vml: {}
+        };
+
+        web2d.peer.utils = {};
+    </script>
+
+    <script type="text/javascript" src="mootools.js"></script>
+    <script type="text/javascript" src="../../../../../core-js/target/classes/core.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/EventDispatcher.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ElementPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ElementPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Element.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Workspace.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/WorkspacePeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/WorkspacePeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Toolkit.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Elipse.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ElipsePeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ElipsePeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Line.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/LinePeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/LinePeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/PolyLine.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/PolyLinePeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/PolyLinePeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Group.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/GroupPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/GroupPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Rect.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/RectPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/RectPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Text.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TextPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TextPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TextBoxPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/utils/TransformUtils.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/utils/EventUtils.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Font.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/Font.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/Font.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TahomaFont.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TimesFont.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ArialFont.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/VerdanaFont.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TahomaFont.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TimesFont.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ArialFont.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/VerdanaFont.js"></script>
+    <script type="text/javascript" src="utils.js"></script>
+    <script type="text/javascript">
+        function initialize(){
             web2d.peer.Toolkit.init();
 
             var overflowWorkspace = new web2d.Workspace({fillColor:'green'});
@@ -107,17 +144,6 @@
 
             overflowWorkspace.addItAsChildTo($("overflowExample"));
 
-</script>
-<tr>
-    <td>
-        This is how multiple childs will look in each style line
-    </td>
-    <td>
-        <div id="multipleLineExample"/>
-    </td>
-
-</tr>
-<script type="text/javascript">
 
             var overflowWorkspace = new web2d.Workspace();
             overflowWorkspace.setSize("100px", "100px");
@@ -166,9 +192,37 @@
             overflowWorkspace.appendChild(line1);
 
             overflowWorkspace.addItAsChildTo($("multipleLineExample"));
-
+        }
     </script>
+</head>
 
+<body onload="initialize();">
+
+<h1>PolyLines Render Tests </h1>
+
+<table border="1">
+<colgroup style="width:80%;">
+    <col style="width:30%"/>
+    <col style="width:60%"/>
+</colgroup>
+<tr>
+    <td>
+        Different types of PolyLines that can be used.
+    </td>
+    <td>
+        <div id="overflowExample"/>
+    </td>
+
+</tr>
+<tr>
+    <td>
+        This is how multiple childs will look in each style line
+    </td>
+    <td>
+        <div id="multipleLineExample"/>
+    </td>
+
+</tr>
 </table>
 </body>
 </html>

web2d/src/test/javascript/render/prototype.html

@@ -2,36 +2,90 @@
 
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
-    <script type="text/javascript" src="web2dLibraryLoader.js"></script>
-    <script type="text/javascript" src="utils.js"></script>
-</head>
-
-<body>
-
-<h1>Chart prototype Tests </h1>
-
-<input type="button" value="Create Shape" name="Create Shape" onclick="createShape();"/>
-<input type="button" value="Zoom In" name="Create Shape" onclick="zoomIn();"/>
-<input type="button" value="Zoom Out" name="Create Shape" onclick="zoomOut();"/>
-
-
-<div id="divWorkspace" style="overflow:scroll;width:1020px;height:620px;position:relative;">
-</div>
-
-
     <script type="text/javascript">
+        web2d = {
+            peer: {}
+        };
 
-web2d.peer.Toolkit.init();
+        web2d.peer =
+        {
+            svg: {},
+            vml: {}
+        };
 
+        web2d.peer.utils = {};
+    </script>
+
+    <script type="text/javascript" src="mootools.js"></script>
+    <script type="text/javascript" src="../../../../../core-js/target/classes/core.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/EventDispatcher.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ElementPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ElementPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Element.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Workspace.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/WorkspacePeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/WorkspacePeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Toolkit.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Elipse.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ElipsePeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ElipsePeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Line.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/LinePeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/LinePeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/PolyLine.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/PolyLinePeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/PolyLinePeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Group.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/GroupPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/GroupPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Rect.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/RectPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/RectPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Text.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TextPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TextPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TextBoxPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/utils/TransformUtils.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/utils/EventUtils.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Font.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/Font.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/Font.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TahomaFont.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TimesFont.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ArialFont.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/VerdanaFont.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TahomaFont.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TimesFont.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ArialFont.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/VerdanaFont.js"></script>
+    <script type="text/javascript" src="utils.js"></script>
+    <script type="text/javascript">
         var xScale = 1000;
             var yScale = 600;
+            var shapeOrigX = 0;
+        function initialize(){
+            web2d.peer.Toolkit.init();
 
-var workspace = new web2d.Workspace();
+            workspace = new web2d.Workspace();
             workspace.setSize(xScale + "px", yScale + "px");
             workspace.setCoordSize(xScale, yScale);
             workspace.setCoordOrigin(0, 0);
             workspace.setFill("#f0f0f0");
 
+
+
+
+            // Center Topic Rect ...
+            centralRect = new web2d.Rect(0.3);
+            centralRect.setSize(200, 60);
+            centralRect.setPosition(300, 300);
+            centralRect.setFill("#99ccff");
+            centralRect.setStroke(1, 'solid', "#878b8f");
+            workspace.appendChild(centralRect);
+
+            workspace.addItAsChildTo($("divWorkspace"));
+        }
+
         function zoomIn()
             {
                 xScale = xScale / 2;
@@ -45,9 +99,6 @@ function zoomOut()
                 yScale = yScale * 2;
                 workspace.setSize(xScale + "px", yScale + "px");
             }
-
-
-var shapeOrigX = 0;
             function createShape()
             {
                 // Secondary Idea...
@@ -148,16 +199,20 @@ function createShape()
                 });
 
             }
-// Center Topic Rect ...
-centralRect = new web2d.Rect(0.3);
-centralRect.setSize(200, 60);
-centralRect.setPosition(300, 300);
-centralRect.setFill("#99ccff");
-centralRect.setStroke(1, 'solid', "#878b8f");
-workspace.appendChild(centralRect);
-
-workspace.addItAsChildTo($("divWorkspace"));
 </script>
+</head>
+
+<body onload="initialize();">
+
+<h1>Chart prototype Tests </h1>
+
+<input type="button" value="Create Shape" name="Create Shape" onclick="createShape();"/>
+<input type="button" value="Zoom In" name="Create Shape" onclick="zoomIn();"/>
+<input type="button" value="Zoom Out" name="Create Shape" onclick="zoomOut();"/>
+
+
+<div id="divWorkspace" style="overflow:scroll;width:1020px;height:620px;position:relative;">
+</div>
 
 Notas:
 <li>El evento de mousemove se debe agregar al workspace.

web2d/src/test/javascript/render/rect.html

@@ -2,6 +2,7 @@
 
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
+
     <script type="text/javascript">
         web2d = {
             peer: {}
@@ -58,30 +59,9 @@
     <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TimesFont.js"></script>
     <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ArialFont.js"></script>
     <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/VerdanaFont.js"></script>
-
     <script type="text/javascript" src="utils.js"></script>
-</head>
-
-<body>
-
-
-<h1>Rect Render Tests </h1>
-
-<table border="1">
-    <colgroup style="width:80%;">
-        <col style="width:10%"/>
-        <col style="width:90%"/>
-    </colgroup>
-    <tr>
-        <td>
-            Straight Lines.
-        </td>
-        <td>
-            <div id="rectExample"/>
-        </td>
-
-    </tr>
     <script type="text/javascript">
+        function initialize(){
             web2d.peer.Toolkit.init();
 
             var rectExampleTest = function ()
@@ -98,19 +78,6 @@
                 workspace.addItAsChildTo($("rectExample"));
             }
             rectExampleTest();
-    </script>
-
-    <!-- ********************************************************** -->
-    <tr>
-        <td>
-            Straight Lines.
-        </td>
-        <td>
-            <div id="roundRect" style="float:left;margin:10px"></div>
-        </td>
-
-    </tr>
-    <script type="text/javascript">
 
             var roundrectExampleTest = function ()
             {
@@ -142,7 +109,40 @@
 
             }
             roundrectExampleTest();
+        }
     </script>
+</head>
+
+<body onload="initialize();">
+
+
+<h1>Rect Render Tests </h1>
+
+<table border="1">
+    <colgroup style="width:80%;">
+        <col style="width:10%"/>
+        <col style="width:90%"/>
+    </colgroup>
+    <tr>
+        <td>
+            Straight Lines.
+        </td>
+        <td>
+            <div id="rectExample"></div>
+        </td>
+
+    </tr>
+
+    <!-- ********************************************************** -->
+    <tr>
+        <td>
+            Straight Lines.
+        </td>
+        <td>
+            <div id="roundRect" style="float:left;margin:10px"></div>
+        </td>
+
+    </tr>
 
 
 </table>

web2d/src/test/javascript/render/shapes.html

@@ -59,34 +59,8 @@
     <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ArialFont.js"></script>
     <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/VerdanaFont.js"></script>
     <script type="text/javascript" src="utils.js"></script>
-</head>
-
-<body>
-<script type="text/javascript">
-    // Logger.setEnabled(true);
-</script>
-
-
-<h1>Element properties Tests </h1>
-
-<table border="1">
-<colgroup style="width:80%;">
-    <col style="width:10%"/>
-    <col style="width:90%"/>
-</colgroup>
-<tr>
-    <td>
-        Stroke Styles.
-    </td>
-    <td>
-        <div>
-            <div id="strokeStyle"></div>
-            <div id="strokeStyleGroup"></div>
-            <div id="strokeStyleWidth"></div>
-        </div>
-    </td>
-</tr>
     <script type="text/javascript">
+    function initialize(){
         web2d.peer.Toolkit.init();
 
         var strokeStyleTest = function ()
@@ -136,7 +110,6 @@
                 rect.setStroke(strokeWidth, 'dashdot', 'black');
                 parent.appendChild(rect);
             }
-        ;
 
             // Workspace with default scale ...
             var workspace = new web2d.Workspace();
@@ -165,54 +138,7 @@
 
         };
         strokeStyleTest();
-</script>
 
-<tr>
-    <td>
-        Stroke Width.
-    </td>
-    <td>
-        <div id="strokeWidth"/>
-    </td>
-
-</tr>
-<script type="text/javascript">
-    var rectExampleTest = function ()
-    {
-        var workspace = new web2d.Workspace();
-        workspace.setSize("500px", "100px");
-        workspace.setCoordSize(500, 100);
-        workspace.setCoordOrigin(0, 0);
-
-        var elipse = new web2d.Elipse();
-        elipse.setSize(80, 80);
-        elipse.setPosition(50, 50);
-        elipse.setFill('yellow');
-        elipse.setStroke(10, 'solid', 'black');
-        workspace.appendChild(elipse);
-
-        var rect = new web2d.Rect();
-        rect.setSize(80, 80);
-        rect.setPosition(160, 10);
-        rect.setFill('yellow');
-        rect.setStroke(10, 'solid', 'black');
-        workspace.appendChild(rect);
-
-        workspace.addItAsChildTo($("strokeWidth"));
-    };
-    rectExampleTest();
-</script>
-<!-- ************************************************** -->
-<tr>
-    <td>
-        Stroke Opacity.
-    </td>
-    <td>
-        <div id="strokeOpacity"/>
-    </td>
-
-</tr>
-<script type="text/javascript">
         var strokeOpacityTest = function ()
         {
             var workspace = new web2d.Workspace();
@@ -248,18 +174,8 @@
             workspace.addItAsChildTo($("strokeOpacity"));
         };
         strokeOpacityTest();
-</script>
-<!-- ************************************************** -->
-<tr>
-    <td>
-        Fill Opacity.
-    </td>
-    <td>
-        <div id="fillOpacity"/>
-    </td>
 
-</tr>
+
-<script type="text/javascript">
         var fillOpacityTest = function ()
         {
             var workspace = new web2d.Workspace();
@@ -295,18 +211,8 @@
             workspace.addItAsChildTo($("fillOpacity"));
         };
         fillOpacityTest();
-</script>
-<!-- ************************************************** -->
-<tr>
-    <td>
-        Opacity.
-    </td>
-    <td>
-        <div id="opacity"/>
-    </td>
 
-</tr>
+
-<script type="text/javascript">
         var opacityTest = function ()
         {
             var workspace = new web2d.Workspace();
@@ -342,17 +248,8 @@
             workspace.addItAsChildTo($("opacity"));
         };
         opacityTest();
-</script>
-<tr>
-    <td>
-        Visibility.
-    </td>
-    <td>
-        <div id="visibility"/>
-    </td>
 
-</tr>
+
-<script type="text/javascript">
         var visibilityTest = function ()
         {
             var workspace = new web2d.Workspace({fillColor:'yellow',strokeWidth:'2px'});
@@ -379,7 +276,80 @@
             workspace.addItAsChildTo($("visibility"));
         };
         visibilityTest();
+    }
     </script>
+</head>
+
+<body onload="initialize();">
+
+<h1>Element properties Tests </h1>
+
+<table border="1">
+<colgroup style="width:80%;">
+    <col style="width:10%"/>
+    <col style="width:90%"/>
+</colgroup>
+<tr>
+    <td>
+        Stroke Styles.
+    </td>
+    <td>
+        <div>
+            <div id="strokeStyle"></div>
+            <div id="strokeStyleGroup"></div>
+            <div id="strokeStyleWidth"></div>
+        </div>
+    </td>
+</tr>
+
+<tr>
+    <td>
+        Stroke Width.
+    </td>
+    <td>
+        <div id="strokeWidth"></div>
+    </td>
+
+</tr>
+<!-- ************************************************** -->
+<tr>
+    <td>
+        Stroke Opacity.
+    </td>
+    <td>
+        <div id="strokeOpacity"></div>
+    </td>
+
+</tr>
+<!-- ************************************************** -->
+<tr>
+    <td>
+        Fill Opacity.
+    </td>
+    <td>
+        <div id="fillOpacity"></div>
+    </td>
+
+</tr>
+<!-- ************************************************** -->
+<tr>
+    <td>
+        Opacity.
+    </td>
+    <td>
+        <div id="opacity"></div>
+    </td>
+
+</tr>
+<tr>
+    <td>
+        Visibility.
+    </td>
+    <td>
+        <div id="visibility"></div>
+    </td>
+
+</tr>
 
 </table>
 </body>

web2d/src/test/javascript/render/text.html

@@ -2,11 +2,63 @@
 
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
-    <script type="text/javascript" src="web2dLibraryLoader.js"></script>
+    <script type="text/javascript">
-</head>
+        web2d = {
+            peer: {}
+        };
 
-<body>
+        web2d.peer =
+        {
+            svg: {},
+            vml: {}
+        };
 
+        web2d.peer.utils = {};
+    </script>
+
+    <script type="text/javascript" src="mootools.js"></script>
+    <script type="text/javascript" src="../../../../../core-js/target/classes/core.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/EventDispatcher.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ElementPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ElementPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Element.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Workspace.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/WorkspacePeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/WorkspacePeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Toolkit.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Elipse.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ElipsePeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ElipsePeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Line.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/LinePeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/LinePeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/PolyLine.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/PolyLinePeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/PolyLinePeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Group.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/GroupPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/GroupPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Rect.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/RectPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/RectPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Text.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TextPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TextPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TextBoxPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/utils/TransformUtils.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/utils/EventUtils.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Font.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/Font.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/Font.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TahomaFont.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TimesFont.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ArialFont.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/VerdanaFont.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TahomaFont.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TimesFont.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ArialFont.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/VerdanaFont.js"></script>
+    <script type="text/javascript" src="utils.js"></script>
     <script type="text/javascript">
     function zoomIn()
     {
@@ -18,6 +70,7 @@
     };
 
     workspaces = [];
+    var textot;
 
     var TextTest = function (size,coordSize,textval,font,fontSizeval, style, modifier, fontColor, owner, iesimo)
     {
@@ -38,6 +91,7 @@
                 text.setFont(font, fontSizeval, style, modifier);
                 text.setPosition(0, 0);
                 text.setColor(fontColor);
+            textot = text;
 
 
                 overflowWorkspace.addItAsChildTo($(owner));
@@ -64,7 +118,20 @@
                 parent.appendChild(span);
                 workspaces[iesimo]=overflowWorkspace;
     };
+
+    function initialize(){
+        web2d.peer.Toolkit.init();
+        TextTest("100px",200,"Test Text","Arial",10, "normal", "normal", "red", "text0", 0);
+        TextTest("100px",100,"Test Text","Arial",10, "normal", "normal", "blue", "text1", 1);
+        TextTest("100px",50,"Test Text","Arial",10, "normal", "normal", "blue", "text2", 2);
+        TextTest("100px",100,"Test Text","Arial",10, "italic", "normal", "blue", "text3", 3);
+        TextTest("100px",100,"Test Text","Arial",10, "italic", "bold", "green", "text4", 4);
+    }
+
 </script>
+</head>
+
+<body onload="initialize();">
 
 <h1>Text Render Tests </h1>
 
@@ -78,22 +145,14 @@
             Simple text
         </td>
         <td>
-            <div id="text0"/>
+            <div id="text0"></div>
-            <div id="text1"/>
+            <div id="text1"></div>
-            <div id="text2"/>
+            <div id="text2"></div>
-            <div id="text3"/>
+            <div id="text3"></div>
-            <div id="text4"/>
+            <div id="text4"></div>
         </td>
 
     </tr>
-    <script type="text/javascript">
-        web2d.peer.Toolkit.init();
-        TextTest("100px",200,"Test Text","Arial",10, "normal", "normal", "red", "text0", 0);
-        TextTest("100px",100,"Test Text","Arial",10, "normal", "normal", "blue", "text1", 1);
-        TextTest("100px",50,"Test Text","Arial",10, "normal", "normal", "blue", "text2", 2);
-        TextTest("100px",100,"Test Text","Arial",10, "italic", "normal", "blue", "text3", 3);
-        TextTest("100px",100,"Test Text","Arial",10, "italic", "bold", "green", "text4", 4);
-    </script>
     <!--**************************************************************************-->
 
 </table>

web2d/src/test/javascript/render/web2dLibraryLoader.js

@@ -31,18 +31,20 @@ web2d.peer =
 web2d.peer.utils = {};
 web2d.Loader =
 {
-    load: function(scriptPath, stylePath, jsFileName)
+    load: function(scriptPath, stylePath, jsFileName, callbackFn)
     {
         var headElement = document.getElementsByTagName('head');
         var htmlDoc = headElement.item(0);
         var baseUrl = this.baseUrl(jsFileName);
+        this.files = scriptPath;
+        this.callbackFn = callbackFn;
 
         if (scriptPath && scriptPath.length > 0)
         {
             for (var i = 0; i < scriptPath.length; i++)
             {
-
+                var file = scriptPath[i];
-                this.includeScriptNode(baseUrl + scriptPath[i]);
+                this.includeScriptNode(baseUrl + file);
             }
         }
     },
@@ -79,6 +81,24 @@ web2d.Loader =
         js.setAttribute('language', 'javascript');
         js.setAttribute('type', 'text/javascript');
         js.setAttribute('src', filename);
+
+        function calltheCBcmn() {
+            web2d.Loader.checkLoaded(filename);
+        }
+
+        if(typeof(js.addEventListener) != 'undefined') {
+            /* The FF, Chrome, Safari, Opera way */
+            js.addEventListener('load',calltheCBcmn,false);
+        }
+        else {
+            /* The MS IE 8+ way (may work with others - I dunno)*/
+            var ret = js.onreadystatechange= function handleIeState() {
+                if(js.readyState == 'loaded' || js.readyState == 'complete'){
+                    calltheCBcmn();
+                }
+            };
+        }
+
         html_doc.appendChild(js);
         return false;
     },
@@ -90,6 +110,23 @@ web2d.Loader =
         js.setAttribute('href', filename);
         html_doc.appendChild(js);
         return false;
+    },
+    checkLoaded:function(name) {
+        var index = -1;
+        for(var i = 0 ; i<this.files.length; i++){
+            var names = this.files[i].split('/');
+            var chkname = name.split('/');
+            if(names[names.length-1]==chkname[chkname.length-1]){
+                index = i;
+                break;
+            }
+        }
+        if(i!=-1){
+            this.files.splice(i,1);
+            if(this.files.length==0){
+                this.callbackFn();
+            }
+        }
     }
 };
 
@@ -98,10 +135,10 @@ web2d.JsLoader =
 {
     scriptPath: [
             "/render/mootools.js",
-            "/../../../../core-js/target/classes/core.js",
+            "../../../../../core-js/target/classes/core.js",
             "/../../../src/main/javascript/EventDispatcher.js",
             "/../../../src/main/javascript/peer/vml/ElementPeer.js",
-            "/../../../src/main/javascript/peer/svg/ElementPeer.js","" +
+            "/../../../src/main/javascript/peer/svg/ElementPeer.js",
             "/../../../src/main/javascript/Element.js",
             "/../../../src/main/javascript/Workspace.js",
             "/../../../src/main/javascript/peer/svg/WorkspacePeer.js",
@@ -141,10 +178,10 @@ web2d.JsLoader =
             "/../../../src/main/javascript/peer/vml/VerdanaFont.js"],
 
     stylePath: [],
-    load: function()
+    load: function(callbackFn)
     {
-        web2d.Loader.load(this.scriptPath, this.stylePath, "web2dLibraryLoader.js");
+        web2d.Loader.load(this.scriptPath, this.stylePath, "web2dLibraryLoader.js", callbackFn);
     }
 };
 
-web2d.JsLoader.load();
+//web2d.JsLoader.load();

web2d/src/test/javascript/render/workspace.html

@@ -2,6 +2,7 @@
 
 <html>
 <head>
+
 <script type="text/javascript">
         web2d = {
             peer: {}
@@ -59,31 +60,8 @@
     <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ArialFont.js"></script>
     <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/VerdanaFont.js"></script>
     <script type="text/javascript" src="utils.js"></script>
-</head>
-
-<body>
-
-<h1>Workspace Render Tests </h1>
-
-<table border="1">
-<colgroup style="width:80%;">
-    <col style="width:30%">
-    <col style="width:60%">
-</colgroup>
-<tr>
-    <td>
-        The Workspace's size defines the visible work area. If an element is outside the workspace, it must not be
-        visible.
-        In this example, The back circle is bigger than the workspace area. A big portion of the circle will not be
-        displayed.
-    </td>
-    <td>
-        <div id="overflowExample"></div>
-    </td>
-
-</tr>
     <script type="text/javascript">
-
+        function initialize(){
             web2d.peer.Toolkit.init();
 
             var overflowWorkspace = new web2d.Workspace();
@@ -94,18 +72,6 @@
             overflowWorkspace.appendChild(elipse1);
             overflowWorkspace.addItAsChildTo($("overflowExample"));
 
-</script>
-<!--**************************************************************************-->
-<tr>
-    <td>
-        Workspace will be added as child of a div element. That's why, Its parent will define this position.
-    </td>
-    <td>
-        <div id="positionExample" style="position:relative;left:0;top:0;width:100px"></div>
-    </td>
-</tr>
-
-<script type="text/javascript">
 
             var workspacePosition = function()
             {
@@ -130,24 +96,6 @@
             };
             workspacePosition();
 
-</script>
-<!--**************************************************************************-->
-<tr>
-    <td>
-        Workspaces size can be defined using standard CSS measures.
-        In this example, the first workspace is defined using pixes and the second one
-        using inchs.
-    </td>
-    <td>
-        <div id="sizeExampleContainer" style="position:relative;width:400px;">
-            <div id="sizeExamplePixels" style="float:left;margin:20px"></div>
-
-            <div id="sizeExampleInch" style="float:left;margin:20px"></div>
-        </div>
-    </td>
-</tr>
-<script type="text/javascript">
-
             // Draw a reference grid.
             var container = document.getElementById("sizeExampleContainer");
             var grid = new Grid(container, 35, 12);
@@ -173,42 +121,7 @@
             workspaceInchs.appendChild(elipse);
             workspaceInchs.addItAsChildTo($("sizeExampleInch"));
 
-</script>
-<!--**************************************************************************-->
-<tr>
-    <td>
-        Workspace coordsize defines how many units there are along the width of the containing block.
-        In all the examples,the coordsize of the workspaces have been set to (100,100) and the circles have been
-        positioned
-        at (0,0),(0,100),(100,0),(100,100)(50,50).<br/>
-        <br/>
-        1) Workspace with CoordSize(100,100)<br/>
-        2) Workspace with CoordSize(100,200)<br/>
-        3) Workspace with CoordSize(200,100)<br/>
-        4) Workspace animation changing the coordsize from (30,30) to (100,100)<br/>
-    </td>
-    <td>
-        <div style="position:relative;width:100%;">
-            <div id="coordsizeExample100x100" style="float:left;margin:20px;">
-                (1)
-            </div>
 
-            <div id="coordsizeExample100x200" style="float:left;margin:20px;">
-                (2)
-            </div>
-
-            <div id="coordsizeExample200x100" style="float:left;margin:20px;">
-                (3)
-            </div>
-
-            <div id="coordsizeExampleDynamic" style="float:left;margin:20px;">
-                (4)
-            </div>
-        </div>
-    </td>
-</tr>
-
-<script type="text/javascript">
             var workspaceCoordSizeSample = function()
             {
                 // Workspace with CoordSize(100,100);
@@ -268,43 +181,8 @@
             };
 
             workspaceCoordSizeSample();
-</script>
 
-<!--**************************************************************************-->
-<tr>
-    <td>
-        Workspace coordorigin defines the coordinate at the top left corner of the containing block.
-        In all the examples,the coordsize of the workspaces have been set to (100,100) and the circles have been
-        positioned
-        at (0,0),(0,100),(100,0),(100,100)(50,50). <br/>
-        <br/>
-        1) Workspace with CoordOrigin(0,0)<br/>
-        2) Workspace with CoordOrigin(0,50)<br/>
-        3) Workspace with CoordOrigin(50,0)<br/>
-        4) Workspace animation changing the coordorigin from (0,0) to (50,50)<br/>
-    </td>
-    <td>
-        <div style="position:relative;width:100%;">
-            <div id="coordorigin0x0" style="float:left;margin:20px">
-                (1)
-            </div>
 
-            <div id="coordorigin0x50" style="float:left;margin:20px">
-                (2)
-            </div>
-
-            <div id="coordorigin50x0" style="float:left;margin:20px">
-                (3)
-            </div>
-
-            <div id="coordoriginExampleDynamic" style="float:left;margin:20px">
-                (4)
-            </div>
-        </div>
-    </td>
-</tr>
-
-<script type="text/javascript">
             var workspaceCoordOriginSample = function()
             {
 
@@ -367,7 +245,124 @@
                 executer.periodical(100);
             };
             workspaceCoordOriginSample();
+
+        }
     </script>
+</head>
+
+<body onload="initialize();">
+
+<h1>Workspace Render Tests </h1>
+
+<table border="1">
+<colgroup style="width:80%;">
+    <col style="width:30%">
+    <col style="width:60%">
+</colgroup>
+<tr>
+    <td>
+        The Workspace's size defines the visible work area. If an element is outside the workspace, it must not be
+        visible.
+        In this example, The back circle is bigger than the workspace area. A big portion of the circle will not be
+        displayed.
+    </td>
+    <td>
+        <div id="overflowExample"></div>
+    </td>
+
+</tr>
+<!--**************************************************************************-->
+<tr>
+    <td>
+        Workspace will be added as child of a div element. That's why, Its parent will define this position.
+    </td>
+    <td>
+        <div id="positionExample" style="position:relative;left:0;top:0;width:100px"></div>
+    </td>
+</tr>
+
+<!--**************************************************************************-->
+<tr>
+    <td>
+        Workspaces size can be defined using standard CSS measures.
+        In this example, the first workspace is defined using pixes and the second one
+        using inchs.
+    </td>
+    <td>
+        <div id="sizeExampleContainer" style="position:relative;width:400px;">
+            <div id="sizeExamplePixels" style="float:left;margin:20px"></div>
+
+            <div id="sizeExampleInch" style="float:left;margin:20px"></div>
+        </div>
+    </td>
+</tr>
+<!--**************************************************************************-->
+<tr>
+    <td>
+        Workspace coordsize defines how many units there are along the width of the containing block.
+        In all the examples,the coordsize of the workspaces have been set to (100,100) and the circles have been
+        positioned
+        at (0,0),(0,100),(100,0),(100,100)(50,50).<br/>
+        <br/>
+        1) Workspace with CoordSize(100,100)<br/>
+        2) Workspace with CoordSize(100,200)<br/>
+        3) Workspace with CoordSize(200,100)<br/>
+        4) Workspace animation changing the coordsize from (30,30) to (100,100)<br/>
+    </td>
+    <td>
+        <div style="position:relative;width:100%;">
+            <div id="coordsizeExample100x100" style="float:left;margin:20px;">
+                (1)
+            </div>
+
+            <div id="coordsizeExample100x200" style="float:left;margin:20px;">
+                (2)
+            </div>
+
+            <div id="coordsizeExample200x100" style="float:left;margin:20px;">
+                (3)
+            </div>
+
+            <div id="coordsizeExampleDynamic" style="float:left;margin:20px;">
+                (4)
+            </div>
+        </div>
+    </td>
+</tr>
+
+<!--**************************************************************************-->
+<tr>
+    <td>
+        Workspace coordorigin defines the coordinate at the top left corner of the containing block.
+        In all the examples,the coordsize of the workspaces have been set to (100,100) and the circles have been
+        positioned
+        at (0,0),(0,100),(100,0),(100,100)(50,50). <br/>
+        <br/>
+        1) Workspace with CoordOrigin(0,0)<br/>
+        2) Workspace with CoordOrigin(0,50)<br/>
+        3) Workspace with CoordOrigin(50,0)<br/>
+        4) Workspace animation changing the coordorigin from (0,0) to (50,50)<br/>
+    </td>
+    <td>
+        <div style="position:relative;width:100%;">
+            <div id="coordorigin0x0" style="float:left;margin:20px">
+                (1)
+            </div>
+
+            <div id="coordorigin0x50" style="float:left;margin:20px">
+                (2)
+            </div>
+
+            <div id="coordorigin50x0" style="float:left;margin:20px">
+                (3)
+            </div>
+
+            <div id="coordoriginExampleDynamic" style="float:left;margin:20px">
+                (4)
+            </div>
+        </div>
+    </td>
+</tr>
 
 </table>
 </body>

wise-webapp/src/main/java/com/wisemapping/filter/UserAgent.java

@@ -33,10 +33,10 @@ public class UserAgent implements Serializable {
     private final org.apache.commons.logging.Log logger = LogFactory.getLog(UserAgent.class.getName());
 
     public static void main(final String argv[]) {
-      //  UserAgent explorer = UserAgent.create("Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1)");
+        UserAgent explorer = UserAgent.create("Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1)");
 //        UserAgent firefox = UserAgent.create("Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20050302 Firefox/0.9.6");
-        //UserAgent safari = UserAgent.create("iCab/2.9.5 (Macintosh; U; PPC; Mac OS X)");
+        UserAgent safari = UserAgent.create("iCab/2.9.5 (Macintosh; U; PPC; Mac OS X)");
-        //UserAgent opera = UserAgent.create("Opera/9.21 (Windows NT 5.1; U; en)");
+        UserAgent opera = UserAgent.create("Opera/9.21 (Windows NT 5.1; U; en)");
 
 
 
@@ -83,7 +83,7 @@ public class UserAgent implements Serializable {
     }
 
     public enum Product {
-        EXPLORER, FIREFOX, CAMINO, NETSCAPE, OPERA, SAFARI, KONQUEOR, KMELEON, MOZILLA, LYNX, ROBOT;
+        EXPLORER, FIREFOX, CAMINO, NETSCAPE, OPERA, SAFARI, CHROME, KONQUEOR, KMELEON, MOZILLA, LYNX, ROBOT;
     }
 
     public enum OS {
@@ -131,7 +131,21 @@ public class UserAgent implements Serializable {
             } else if (userAgentHeader.indexOf("iCab") != -1 || userAgentHeader.indexOf("Safari") != -1) {
                 // Safari:
                 //Formats:  Mozilla/5.0 (Windows; U; Windows NT 5.1; en) AppleWebKit/522.13.1 (KHTML, like Gecko) Version/3.0.2 Safari/522.13.1
+                //Chrome:
+                //Formats: "Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_4; en-US) AppleWebKit/534.7 (KHTML, like Gecko) Chrome/7.0.517.44 Safari/534.7"
+                String versionStr = "";
+                if(userAgentHeader.indexOf("Chrome")!=-1)
+                {
+                    this.product = Product.CHROME;
+                    versionStr = userAgentHeader.substring(userAgentHeader.indexOf("Chrome")+7,userAgentHeader.lastIndexOf(" "));
+                }
+                else
+                {
                     this.product = Product.SAFARI;
+                    versionStr = userAgentHeader.substring(userAgentHeader.indexOf("Version")+8,userAgentHeader.lastIndexOf(" "));
+                }
+
+                parseVersion(versionStr);
 
             } else if (userAgentHeader.indexOf("Konqueror") != -1) {
                 this.product = Product.KONQUEOR;
@@ -316,6 +330,8 @@ public class UserAgent implements Serializable {
 
         result = result || product == UserAgent.Product.EXPLORER && this.isVersionGreatedOrEqualThan(6, 0) && this.getOs() == UserAgent.OS.WINDOWS;
         result = result || product == UserAgent.Product.OPERA && this.isVersionGreatedOrEqualThan(9, 2);
+        result = result || product == UserAgent.Product.CHROME && this.isVersionGreatedOrEqualThan(7, 0);
+        result = result || product == UserAgent.Product.SAFARI && this.isVersionGreatedOrEqualThan(3, 0);
         return result;
     }
 

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

@@ -256,6 +256,15 @@ div#redoEdition {
 #export {
     background: url(../images/file_export.png) no-repeat center top;
     behavior: url(../css/iepngfix.htc);
+    position:relative;
+}
+
+#exportAnchor {
+    position:absolute;
+    width:100%;
+    height:100%;
+    top:0;
+    left:0;
 }
 
 div#zoomIn {

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

@@ -329,7 +329,7 @@ Properties:
 */
 
 window.xpath = !!(document.evaluate);
-if (window.ActiveXObject) window.ie = window[window.XMLHttpRequest ? 'ie7' : 'ie6'] = true;
+if (window.ActiveXObject) window.ie = window[document.createElementNS? 'ie9':window.XMLHttpRequest ? 'ie7' : 'ie6'] = true;
 else if (document.childNodes && !document.all && !navigator.taintEnabled) window.webkit = window[window.xpath ? 'webkit420' : 'webkit419'] = true;
 else if (document.getBoxObjectFor != null) window.gecko = true;
 
@@ -1733,7 +1733,7 @@ var Element = new Class({
 
     initialize: function(el, props) {
         if ($type(el) == 'string') {
-            if (window.ie && props && (props.name || props.type)) {
+            if (!window.ie9 && window.ie && props && (props.name || props.type)) {
                 var name = (props.name) ? ' name="' + props.name + '"' : '';
                 var type = (props.type) ? ' type="' + props.type + '"' : '';
                 delete props.name;
@@ -3100,7 +3100,11 @@ Elements.extend({
 
     filterByClass: function(className, nocash) {
         var elements = this.filter(function(el) {
+            if(el.className && el.className.contains)
                 return (el.className && el.className.contains(className, ' '));
+            else if(el.className){
+                return el.className[className]!=undefined;
+            }
         });
         return (nocash) ? elements : new Elements(elements);
     },

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

@@ -137,17 +137,17 @@
                 <div id="redoEdition" class="button" title="<spring:message code="REDO_EDITION"/>">
                     <div class="toolbarLabel"><p><spring:message code="REDO"/></p></div>
                 </div>
-                <a id="printAnchor" href="javascript:printMap();" title="<spring:message code="PRINT"/>">
+
-                    <div id="print" class="button" title="<spring:message code="PRINT"/>">
+                <div id="print" class="button" title="<spring:message code="PRINT"/>" onclick="printMap();">
                     <div class="toolbarLabel"><p><spring:message code="PRINT"/></p></div>
                 </div>
-                </a>
+
-                <a id="exportAnchor" href="export.htm?mapId=${mindmap.id}" rel="moodalbox 600px 400px"
-                   title="<spring:message code="EXPORT_DETAILS"/>">
                 <div id="export" class="button" title="<spring:message code="EXPORT"/>">
                     <div class="toolbarLabel"><p><spring:message code="EXPORT"/></p></div>
-                    </div>
+                    <a id="exportAnchor" href="export.htm?mapId=${mindmap.id}" rel="moodalbox 600px 400px"
+                   title="<spring:message code="EXPORT_DETAILS"/>">
                 </a>
+                </div>
             </fieldset>
         </div>
         <div id="zoom" class="buttonContainer" title="Zoom In">