From 0f9a9121b3e0f9dfee4b84913d0b7d5f627db4ba Mon Sep 17 00:00:00 2001
From: Paulo Gustavo Veiga <pveiga@wisemapping.com>
Date: Sat, 25 Dec 2021 14:24:17 -0800
Subject: [PATCH] Add support on view mode to change sample map.

---
 .../map-render/css/compatibility.less         |  75 +++--
 .../playground/map-render/css/editor.less     |  45 ++-
 .../playground/map-render/css/embedded.less   |  10 +-
 .../playground/map-render/css/header.less     |  78 +++---
 .../playground/map-render/css/toolbar.less    |  18 +-
 .../playground/map-render/css/viewmode.less   |  25 +-
 .../test/playground/map-render/html/drag.html | 220 ---------------
 .../playground/map-render/html/viewmode.html  |   5 +-
 .../map-render/samples/error-on-load.xml      |  29 ++
 .../playground/map-render/samples/issue.xml   | 120 --------
 .../playground/map-render/samples/sample1.xml | 262 +++++++-----------
 .../playground/map-render/samples/sample2.xml | 183 ++++++++++--
 .../map-render/samples/welcome-reloaded.xml   |  48 ----
 13 files changed, 453 insertions(+), 665 deletions(-)
 delete mode 100644 packages/mindplot/test/playground/map-render/html/drag.html
 create mode 100644 packages/mindplot/test/playground/map-render/samples/error-on-load.xml
 delete mode 100644 packages/mindplot/test/playground/map-render/samples/issue.xml
 delete mode 100644 packages/mindplot/test/playground/map-render/samples/welcome-reloaded.xml

diff --git a/packages/mindplot/test/playground/map-render/css/compatibility.less b/packages/mindplot/test/playground/map-render/css/compatibility.less
index 9bf1281c..37bf4d52 100644
--- a/packages/mindplot/test/playground/map-render/css/compatibility.less
+++ b/packages/mindplot/test/playground/map-render/css/compatibility.less
@@ -2,7 +2,29 @@ html {
     overflow: hidden;
 }
 
-body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
+body,
+div,
+dl,
+dt,
+dd,
+ul,
+ol,
+li,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+pre,
+form,
+fieldset,
+input,
+textarea,
+p,
+blockquote,
+th,
+td {
     margin: 0;
     padding: 0;
 }
@@ -12,33 +34,51 @@ table {
     border-spacing: 0;
 }
 
-fieldset, img {
+fieldset,
+img {
     border: 0;
 }
 
-address, caption, cite, code, dfn, em, strong, th, var {
+address,
+caption,
+cite,
+code,
+dfn,
+em,
+strong,
+th,
+var {
     font-style: normal;
     font-weight: normal;
 }
 
-ol, ul {
+ol,
+ul {
     list-style: none;
 }
 
-caption, th {
+caption,
+th {
     text-align: left;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
     font-size: 100%;
     font-weight: normal;
 }
 
-q:before, q:after {
+q:before,
+q:after {
     content: '';
 }
 
-abbr, acronym {
+abbr,
+acronym {
     border: 0;
 }
 
@@ -62,14 +102,17 @@ table {
 /**
  * 99% for safari; 100% is too large
  */
-select, input, textarea {
+select,
+input,
+textarea {
     font: 99% arial, helvetica, clean, sans-serif;
 }
 
 /**
  * Bump up !IE to get to 13px equivalent
  */
-pre, code {
+pre,
+code {
     font: 115% monospace;
     font-size: 100%;
 }
@@ -89,7 +132,7 @@ body * {
 }
 
 body {
-//    font: normal 80% "Helvetica Neue",Helvetica,Arial,sans-serif;
+    //    font: normal 80% "Helvetica Neue",Helvetica,Arial,sans-serif;
     background-color: #fff;
 }
 
@@ -110,7 +153,8 @@ ul {
     list-style-position: inside;
 }
 
-a:hover, a:active {
+a:hover,
+a:active {
     font: bold 100%;
     text-decoration: underline;
     color: black;
@@ -129,7 +173,7 @@ h1 {
 }
 
 h3 {
-/* use as subhead on main body */
+    /* use as subhead on main body */
     clear: left;
     font-style: normal;
     font-size: 130%;
@@ -137,12 +181,11 @@ h3 {
 }
 
 h4 {
-/* use as headers in footer */
+    /* use as headers in footer */
     font-weight: bold;
     font-size: 120%;
     border-bottom: 1px solid #8e9181;
     color: #e2e3dd;
     padding-bottom: 10px;
     width: 400px;
-}
-
+}
\ No newline at end of file
diff --git a/packages/mindplot/test/playground/map-render/css/editor.less b/packages/mindplot/test/playground/map-render/css/editor.less
index 395cbabe..11681a19 100644
--- a/packages/mindplot/test/playground/map-render/css/editor.less
+++ b/packages/mindplot/test/playground/map-render/css/editor.less
@@ -37,8 +37,8 @@ div#small_error_icon {
     background-color: #dfcf3c;
     padding: 5px 15px;
     color: #666666;
-/*font-weight: bold;*/
-/*width: 100px;*/
+    /*font-weight: bold;*/
+    /*width: 100px;*/
     font-size: 13px;
     -moz-border-radius: 3px;
     -webkit-border-radius: 3px;
@@ -50,8 +50,8 @@ div#small_error_icon {
     background-color: #dfcf3c;
     padding: 5px 15px;
     color: #666666;
-/*font-weight: bold;*/
-/*width: 100px;*/
+    /*font-weight: bold;*/
+    /*width: 100px;*/
     font-size: 13px;
     -moz-border-radius: 3px;
     -webkit-border-radius: 3px;
@@ -82,7 +82,7 @@ div.modalDialog {
     padding: 10px;
     overflow: auto;
 
-/* IE6-7 */
+    /* IE6-7 */
     -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
     border-radius: 6px;
@@ -125,43 +125,42 @@ div.shareModalDialog {
     width: 550px;
 }
 
-#tutorialVideo{
+#tutorialVideo {
     background: url(../images/help.png) no-repeat left center;
     padding-left: 19px;
 }
 
-#keyboardShortcuts{
+#keyboardShortcuts {
     background: url(../images/help.png) no-repeat left center;
     padding-left: 19px;
 }
 
 .panelIcon {
-  width:16px;
-  height:16px;
-  margin-left: 4px;
-  margin-top:  3px;
-  cursor: pointer
+    width: 16px;
+    height: 16px;
+    margin-left: 4px;
+    margin-top: 3px;
+    cursor: pointer
 }
 
 .panelIcon:hover {
-  background-color: #efefef;
+    background-color: #efefef;
 }
 
 .popoverBlack {
-  background: black;
+    background: black;
 }
 
-.popoverBlack.bottom .arrow:after{
-  border-bottom-color: black;
+.popoverBlack.bottom .arrow:after {
+    border-bottom-color: black;
 }
 
 .popoverGray {
-  background: #e4e2d2;
-  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
-  border: 3px double #bebebe;
-}
-
-.popoverGray.bottom .arrow:after{
-  border-bottom-color: #e4e2d2;
+    background: #e4e2d2;
+    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
+    border: 3px double #bebebe;
 }
 
+.popoverGray.bottom .arrow:after {
+    border-bottom-color: #e4e2d2;
+}
\ No newline at end of file
diff --git a/packages/mindplot/test/playground/map-render/css/embedded.less b/packages/mindplot/test/playground/map-render/css/embedded.less
index 7a363e46..98ddd4e8 100644
--- a/packages/mindplot/test/playground/map-render/css/embedded.less
+++ b/packages/mindplot/test/playground/map-render/css/embedded.less
@@ -1,7 +1,7 @@
 @import "editor.less";
 
 /* Overwrite some styles */
-body{
+body {
     position: inherit;
 }
 
@@ -13,7 +13,9 @@ div#header {
     height: 35px;
 }
 
-div#headerMapTitle, #headerActions, #headerLogo {
+div#headerMapTitle,
+#headerActions,
+#headerLogo {
     display: none;
 }
 
@@ -101,6 +103,4 @@ div#infoPanel .textNode {
     border: 3px #023BB9 solid;
     padding: 4px;
     cursor: move
-}
-
-
+}
\ No newline at end of file
diff --git a/packages/mindplot/test/playground/map-render/css/header.less b/packages/mindplot/test/playground/map-render/css/header.less
index 67c32f59..27399eae 100644
--- a/packages/mindplot/test/playground/map-render/css/header.less
+++ b/packages/mindplot/test/playground/map-render/css/header.less
@@ -5,13 +5,20 @@
 div#header {
     width: 100%;
     height: @header-height;
-    background: #393939; /* Old browsers */
-    background: -moz-linear-gradient(top, #393939 0%, #000000 100%); /* FF3.6+ */
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #393939), color-stop(100%, #000000)); /* Chrome,Safari4+ */
-    background: -webkit-linear-gradient(top, #393939 0%, #000000 100%); /* Chrome10+,Safari5.1+ */
-    background: -o-linear-gradient(top, #393939 0%, #000000 100%); /* Opera11.10+ */
-    background: -ms-linear-gradient(top, #393939 0%, #000000 100%); /* IE10+ */
-    background: linear-gradient(top, #393939 0%, #000000 100%); /* W3C */
+    background: #393939;
+    /* Old browsers */
+    background: -moz-linear-gradient(top, #393939 0%, #000000 100%);
+    /* FF3.6+ */
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #393939), color-stop(100%, #000000));
+    /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(top, #393939 0%, #000000 100%);
+    /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(top, #393939 0%, #000000 100%);
+    /* Opera11.10+ */
+    background: -ms-linear-gradient(top, #393939 0%, #000000 100%);
+    /* IE10+ */
+    background: linear-gradient(top, #393939 0%, #000000 100%);
+    /* W3C */
     z-index: 1000;
     position: absolute;
     top: 0;
@@ -30,7 +37,6 @@ div#headerInfo {
     height: @header-info-height;
     color: white;
     padding: 0px 0px
-
 }
 
 div#headerActions {
@@ -52,7 +58,7 @@ div#headerActions a {
 
 div#headerMapTitle {
     min-width: 200px;
-    height:@header-info-height - 13;
+    height: @header-info-height - 13;
     text-align: left;
     padding-top: 13px;
     padding-left: 50px;
@@ -69,22 +75,22 @@ div#headerMapTitle span {
     -webkit-border-radius: 3px;
     border-radius: 3px;
     box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
-    white-space:nowrap;
+    white-space: nowrap;
 }
 
 div#headerNotifier {
-    border: 1px solid rgb(241,163,39);
-    background-color: rgb(252,235,192);
+    border: 1px solid rgb(241, 163, 39);
+    background-color: rgb(252, 235, 192);
     -moz-border-radius: 3px;
     -webkit-border-radius: 3px;
     border-radius: 3px;
     position: absolute;
     padding: 5px 9px;
-    color:back;
-    white-space:nowrap;
-    margin-top:5px;
-        /*margin-top:-34px;*/
-    display:none;
+    color: back;
+    white-space: nowrap;
+    margin-top: 5px;
+    /*margin-top:-34px;*/
+    display: none;
     /*right: 5px;*/
 }
 
@@ -98,28 +104,30 @@ div#embFooter {
     left: 0;
     border-top: 1px solid black;
     background: #E5E5E5;
-    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
 /* FIXME: duplicate in mindmapList
  ---------------------------- Scrollbar --------------------------------- */
 ::-webkit-scrollbar {
-  width: 8px;
-  direction:rtl;
-  text-align: left;
-  position: relative;
-  left: 10px;
-}
-::-webkit-scrollbar-track {
-  border-radius: 10px;
-  background-color: #eaeaea;
-  border-left: 1px solid #ccc;
-}
-::-webkit-scrollbar-thumb {
-  border-radius: 10px;
-  background-color: #c6c6c6;
-}
-::-webkit-scrollbar-thumb:hover {
-  background-color: #08c;
+    width: 8px;
+    direction: rtl;
+    text-align: left;
+    position: relative;
+    left: 10px;
 }
 
+::-webkit-scrollbar-track {
+    border-radius: 10px;
+    background-color: #eaeaea;
+    border-left: 1px solid #ccc;
+}
+
+::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background-color: #c6c6c6;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background-color: #08c;
+}
\ No newline at end of file
diff --git a/packages/mindplot/test/playground/map-render/css/toolbar.less b/packages/mindplot/test/playground/map-render/css/toolbar.less
index 2431dfa8..07f82f79 100644
--- a/packages/mindplot/test/playground/map-render/css/toolbar.less
+++ b/packages/mindplot/test/playground/map-render/css/toolbar.less
@@ -11,7 +11,7 @@ div#toolbar {
     background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.47, rgb(229, 227, 209)), color-stop(0.87, rgb(252, 250, 237)));
     border-bottom: 3px double rgb(190, 190, 190);
     border-top: 1px solid rgb(190, 190, 190);
-    padding:  0px 15px;
+    padding: 0px 15px;
 }
 
 div#toolbar .buttonContainer {
@@ -24,7 +24,10 @@ div#toolbar .buttonContainer {
 /* Buttons*/
 /******************************************************************************************/
 
-div#toolbar .buttonOn, div#toolbar .buttonOff, div#toolbar .buttonActive, div#toolbar .buttonOn:hover {
+div#toolbar .buttonOn,
+div#toolbar .buttonOff,
+div#toolbar .buttonActive,
+div#toolbar .buttonOn:hover {
     width: 28px;
     height: 28px;
     float: left;
@@ -60,7 +63,10 @@ div#exportAnchor {
     left: 0;
 }
 
-div#toolbar .buttonExtOn, div#toolbar .buttonExtOff, div#toolbar .buttonExtActive, div#toolbar .buttonExtOn:hover {
+div#toolbar .buttonExtOn,
+div#toolbar .buttonExtOff,
+div#toolbar .buttonExtActive,
+div#toolbar .buttonExtOn:hover {
     width: 40px;
     height: 28px;
     float: left;
@@ -123,7 +129,8 @@ div#colorPalette {
     top: 89px;
 }
 
-div.toolbarPanelLink, div.toolbarPanelLinkSelectedLink {
+div.toolbarPanelLink,
+div.toolbarPanelLinkSelectedLink {
     cursor: pointer;
     color: black;
     margin: 1px;
@@ -133,7 +140,8 @@ div.toolbarPanelLink, div.toolbarPanelLinkSelectedLink {
     font-weight: bold;
 }
 
-div.toolbarPanelLink:hover, div.toolbarPanelLinkSelectedLink {
+div.toolbarPanelLink:hover,
+div.toolbarPanelLinkSelectedLink {
     cursor: pointer;
     background-color: #efefef;
 }
diff --git a/packages/mindplot/test/playground/map-render/css/viewmode.less b/packages/mindplot/test/playground/map-render/css/viewmode.less
index e680b447..dc7c7d33 100644
--- a/packages/mindplot/test/playground/map-render/css/viewmode.less
+++ b/packages/mindplot/test/playground/map-render/css/viewmode.less
@@ -1,29 +1,26 @@
 @import "editor.less";
 
 /* Overwrite some styles */
-body{
+body {
     position: inherit;
 }
 
 div#footer {
     width: 100%;
-    height: 100px;
-    position: absolute; 
+    padding: 20px 30px;
+    height: 80px;
+    position: absolute;
     bottom: 0;
-    background-color:chocolate;
-}
-
-div#footer {
-    width: 100%;
-    padding: 20px 50px;
-    height: 100px;
-    position: absolute; 
-    bottom: 0;
-    background-color:#ffa800;
+    background-color: #ffa800;
 }
 
 div#footer-desc {
-    float:left;
+    float: left;
     height: 100px;
     padding: 0px 10px;
 }
+
+div#footer-logo {
+    float: left;
+    height: 100px;
+}
\ No newline at end of file
diff --git a/packages/mindplot/test/playground/map-render/html/drag.html b/packages/mindplot/test/playground/map-render/html/drag.html
deleted file mode 100644
index 7f82668a..00000000
--- a/packages/mindplot/test/playground/map-render/html/drag.html
+++ /dev/null
@@ -1,220 +0,0 @@
-<!DOCTYPE HTML>
-
-<html>
-<head>
-    <base href="../">
-    <title>WiseMapping - Editor </title>
-    <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
-
-    <!--[if lt IE 9]>
-    <meta http-equiv="X-UA-Compatible" content="chrome=1">
-    <![endif]-->
-    <link rel="stylesheet/less" type="text/css" href="css/editor.less"/>
-
-    <script type='text/javascript' src='js/core.js'></script>
-    <script type='text/javascript' src='js/less.js'></script>
-
-    <link rel="icon" href="images/favicon.ico" type="image/x-icon">
-    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
-
-    <script type="text/javascript">
-
-        var mapId = 'welcome';
-        $(document).on('loadcomplete', function(resource) {
-            var options = loadDesignerOptions();
-            var designer = buildDesigner(options);
-
-            // Load map from XML file persisted on disk...
-            var persistence = mindplot.PersistenceManager.getInstance();
-            var mindmap = mindmap = persistence.load(mapId);
-            designer.loadMap(mindmap);
-        });
-
-
-        $(document).on('loadcomplete', function(resource) {
-
-            $("dragImageNode").addEvent('mousedown', function(event) {
-                event.preventDefault();
-
-                // Create a image node ...
-                var mindmap = designer.getMindmap();
-                var node = mindmap.createNode();
-                node.setImageSize(80, 43);
-                node.setMetadata("{'media':'video,'url':'http://www.youtube.com/watch?v=P3FrXftyuzw&feature=g-vrec&context=G2b4ab69RVAAAAAAAAAA'}");
-                node.setImageUrl("images/logo-small.png");
-                node.setShapeType(mindplot.model.TopicShape.IMAGE);
-
-                designer.addDraggedNode(event, node);
-            });
-
-
-            $("dragTextNode").addEvent('mousedown', function(event) {
-                event.preventDefault();
-
-                // Create a image node ...
-                var mindmap = designer.getMindmap();
-                var node = mindmap.createNode();
-                node.setText("Node Text !!!!");
-                node.setMetadata("{'media':'test'}");
-                node.setShapeType(mindplot.model.TopicShape.RECTANGLE);
-
-                // Add link ...
-                var link = node.createFeature(mindplot.TopicFeature.Link.id, {url:"http://www.wisemapping.com"});
-                node.addFeature(link);
-
-                // Add Note ...
-                var note = node.createFeature(mindplot.TopicFeature.Note.id, {text:"This is a note"});
-                node.addFeature(note);
-
-
-                designer.addDraggedNode(event, node);
-            });
-
-            designer.addEvent(mindplot.TopicEvent.EDIT, function(event) {
-                var node = event.model;
-
-                console.log("Event: edit");
-                console.log("Node Id:" + node.getId());
-                console.log("Node Metadata:" + node.getMetadata());
-                console.log("Is Read Only:" + event.readOnly);
-            });
-
-            designer.addEvent(mindplot.TopicEvent.CLICK, function(event) {
-                var node = event.model;
-
-                console.log("Event: click");
-                console.log("Node Id:" + node.getId());
-                console.log("Node Metadata:" + node.getMetadata());
-                console.log("Is Read Only:" + event.readOnly);
-            });
-        });
-    </script>
-    <style>
-        #dragPanel {
-            border: 2px black solid;
-            position: absolute;
-            background: gray;
-            width: 100px;
-            height: 300px;
-            z-index: 100;
-            padding: 5px;
-            border-radius: 15px;
-            top: 150px;
-            left: 10px;
-            text-align: center;
-        }
-
-        #dragPanel .textNode {
-            background-color: #E0E5EF;
-            height: 20px;
-            width: 80px;
-            border: 3px #023BB9 solid;
-            padding: 4px;
-            cursor: move
-        }
-
-    </style>
-</head>
-<body>
-
-<div id="header">
-
-    <div id="headerInfo">
-        <div id="headerActions"></div>
-        <div id="headerLogo"></div>
-        <div id="headerMapTitle">Title: <span>Welcome</span></div>
-    </div>
-    <div id="toolbar">
-        <div id="editTab" class="tabContent">
-            <div id="persist" class="buttonContainer">
-                <div id="save" class="buttonOn">
-                    <img src="images/save.png"/>
-                </div>
-                <div id="discard" class="buttonOn">
-                    <img src="images/discard.png"/>
-                </div>
-                <div id="export" class="buttonOn">
-                    <img src="images/export.png"/>
-                </div>
-            </div>
-            <div id="edit" class="buttonContainer">
-                <div id="undoEdition" class="buttonOn">
-                    <img src="images/undo.png"/>
-                </div>
-                <div id="redoEdition" class="buttonOn">
-                    <img src="images/redo.png"/>
-                </div>
-            </div>
-            <div id="zoom" class="buttonContainer">
-                <div id="zoomIn" class="buttonOn">
-                    <img src="images/zoom-in.png"/>
-                </div>
-                <div id="zoomOut" class="buttonOn">
-                    <img src="images/zoom-out.png"/>
-                </div>
-            </div>
-            <div id="node" class="buttonContainer">
-                <div id="topicShape" class="buttonExtOn">
-                    <img src="images/topic-shape.png"/>
-                </div>
-                <div id="addTopic" class="buttonOn">
-                    <img src="images/topic-add.png"/>
-                </div>
-                <div id="deleteTopic" class="buttonOn">
-                    <img src="images/topic-delete.png"/>
-                </div>
-                <div id="topicBorder" class="buttonExtOn">
-                    <img src="images/topic-border.png"/>
-                </div>
-                <div id="topicColor" class="buttonExtOn">
-                    <img src="images/topic-color.png"/>
-                </div>
-                <div id="topicIcon" class="buttonExtOn">
-                    <img src="images/topic-icon.png"/>
-                </div>
-                <div id="topicNote" class="buttonOn">
-                    <img src="images/topic-note.png"/>
-                </div>
-                <div id="topicLink" class="buttonOn">
-                    <img src="images/topic-link.png"/>
-                </div>
-                <div id="topicRelation" class="buttonOn">
-                    <img src="images/topic-relation.png"/>
-                </div>
-            </div>
-            <div id="font" class="buttonContainer">
-                <div id="fontFamily" class="buttonExtOn">
-                    <img src="images/font-type.png"/>
-                </div>
-                <div id="fontSize" class="buttonExtOn">
-                    <img src="images/font-size.png"/>
-                </div>
-                <div id="fontBold" class="buttonOn">
-                    <img src="images/font-bold.png"/>
-                </div>
-                <div id="fontItalic" class="buttonOn">
-                    <img src="images/font-italic.png"/>
-                </div>
-                <div id="fontColor" class="buttonExtOn" style="padding-top:4px">
-                    <img src="images/font-color.png"/>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div id="headerNotifier"></div>
-    <div id="footer">
-        <div id="footerLogo"></div>
-    </div>
-</div>
-
-<div id="dragPanel">
-    <div id="dragImageNode" style="cursor: move">
-        <img src="images/logo-small.png"/>
-    </div>
-    <div id="dragTextNode" class="textNode">Text Node !!</div>
-</div>
-
-<div id="mindplot" onselectstart="return false;"></div>
-<script type="text/javascript" src="js/editor.js"></script>
-</body>
-</html>
diff --git a/packages/mindplot/test/playground/map-render/html/viewmode.html b/packages/mindplot/test/playground/map-render/html/viewmode.html
index 6ed8e9a5..76469067 100644
--- a/packages/mindplot/test/playground/map-render/html/viewmode.html
+++ b/packages/mindplot/test/playground/map-render/html/viewmode.html
@@ -14,7 +14,7 @@
 
 
     <div id="footer">
-        <div style="float:left;height: 100px;"><img src="../images/logo-small.svg" /></div>
+        <div id="footer-logo"><img src="../images/logo-small.svg" /></div>
         <div id="footer-desc">
             <p>The following example showcase rendering of mindmaps in read-only.</p>
             <p>Select one map to render from the gallery: <select id="map-select">
@@ -27,8 +27,9 @@
                     <option value="sample6">sample6</option>
                     <option value="sample7">sample7</option>
                     <option value="img-support">img-support</option>
-                    <option value="welcome-reloaded">welcome-reloaded</option>
+                    <option value="error-on-load">welcome-reloaded</option>
                     <option value="complex">complex</option>
+                    <option value="huge">complex</option>
                 </select>
             </p>
         </div>
diff --git a/packages/mindplot/test/playground/map-render/samples/error-on-load.xml b/packages/mindplot/test/playground/map-render/samples/error-on-load.xml
new file mode 100644
index 00000000..aad51a70
--- /dev/null
+++ b/packages/mindplot/test/playground/map-render/samples/error-on-load.xml
@@ -0,0 +1,29 @@
+<map name="8007">
+    <topic central="true" text="Prospace" bgColor="#f2981b" brColor="#cc5627">
+        <link url="prospace.com"/>
+        <note text="Prospace.com%0A%0A%0AShow%20them%20the%20value%20and%20sell%20them%20a%20product%20that%20is%20much%20lower%20than%20the%20preceived%20value.%0A%0AIdentify%20the%20pain%20in%20the%20industry.%20%0A%0ATrying%20to%20get%20a%20job%20is%20a%20pain.%20%20You%20need%20a%20high%20level%20of%20confidence%20to%20market%20yourself.%20%20Prospace%0Areinforces%20that%20confidence%20by%20allowing%20users%20to%20build%20a%20esteem-building%20portfolio%20on%20oneself.%20%20Getting%20a%0Ajob%20takes%20time.%20%0A%0ACareer%20Centers%20need%20to%20bring%20value%20to%20their%20audience.%20%0A%0A%0A%0AShow%20them%20a%20service%20that%20would%20solve%20that%20pain.%20%20%20First%0Abring%20awareness%20to%20that%20pain.%20%20How%20will%20you%20bring%20awareness%20to%20that%20pain%3F%20%20%20Bring%20awareness%20%0Aof%20a%20service%20that%20would%20solve%20that%20pain%20at%20a%20cost%20that%20can%20fit%20reasonable%20in%20their%20budget.%0A%0A%0A%0A%0A%20How%20are%20competitors%20solving%20that%20pain%20now%3F%20%20%20How%20is%20the%20compeition%0Amaking%20them%20aware%20of%20the%20pain.%20%20%20What%20is%20the%20value%20and%20price%20competitors%20bringing%20to%20their%20customers.%0A%0AWhat%20are%20the%20fears%20of%20the%20competition%3F%20%20What%20do%20they%20think%20they%20need%20to%20do%20in%20the%20next%20five%20years%20to%20%0Astay%20ahead%3F%0A"/>
+        <topic position="-314,-150" text="Newspapers">
+            <topic order="0" text="College Newspapers"/>
+        </topic>
+        <topic position="-203,-300" text="Third Party ">
+            <topic order="0" text="Thumbshot" shape="rectagle">
+                <link url="thumbshots.org"/>
+            </topic>
+        </topic>
+        <topic position="312,0" text="Partnerships">
+            <topic order="0" text="Websites">
+                <topic order="0" text="Business Networks">
+                    <topic order="0" text="Xing"/>
+                    <topic order="1" text="konnects.com"/>
+                </topic>
+            </topic>
+        </topic>
+        <topic position="-209,0" text="Career Counseling">
+            <topic order="0" text="Fraternity"/>
+            <topic order="1" text="Professional Associations"/>
+        </topic>
+        <topic position="-178,50" text="White-Label">
+            <topic order="0" text="http://www.harrisconnect.com/"/>
+        </topic>
+    </topic>
+</map>
\ No newline at end of file
diff --git a/packages/mindplot/test/playground/map-render/samples/issue.xml b/packages/mindplot/test/playground/map-render/samples/issue.xml
deleted file mode 100644
index e957fa3d..00000000
--- a/packages/mindplot/test/playground/map-render/samples/issue.xml
+++ /dev/null
@@ -1,120 +0,0 @@
-<map name="70866" version="tango">
-    <topic central="true" text="La computadora" shape="rounded rectagle" id="1" fontStyle="Verdana;15;#feffff;bold;;"
-           bgColor="#cc0000" brColor="#660000">
-        <topic position="220,0" order="0" shape="rounded rectagle" id="21" fontStyle=";10;#feffff;bold;;"
-               bgColor="#a64d79" brColor="#4c1130">
-            <text><![CDATA[Hardware
-(componentes físicos)]]></text>
-            <topic position="386,-29" order="0" shape="rounded rectagle" id="25" fontStyle=";8;#feffff;;;"
-                   bgColor="#c27ba0" brColor="#4c1130">
-                <text><![CDATA[Entrada de datos
-]]></text>
-                <topic position="558,-34" order="0" shape="rounded rectagle" id="28" fontStyle=";8;#000000;;;"
-                       bgColor="#ead1dc" brColor="#4c1130">
-                    <text><![CDATA[ Ratón, Teclado, Joystick,
-Cámara digital, Micrófono, Escáner.]]></text>
-                </topic>
-            </topic>
-            <topic position="383,0" order="1" text="Salida de datos" shape="rounded rectagle" id="29"
-                   fontStyle=";8;#feffff;;;" bgColor="#c27ba0" brColor="#4c1130">
-                <topic position="554,0" order="0" shape="rounded rectagle" id="30" fontStyle=";8;#000000;;;"
-                       bgColor="#ead1dc" brColor="#4c1130">
-                    <text><![CDATA[Monitor, Impresora, Bocinas, Plóter.
-]]></text>
-                </topic>
-            </topic>
-            <topic position="387,40" order="2" text="Almacenamiento" shape="rounded rectagle" id="31"
-                   fontStyle=";8;#feffff;;;" bgColor="#c27ba0" brColor="#4c1130">
-                <topic position="553,35" order="0" shape="rounded rectagle" id="32" fontStyle=";8;#000000;;;"
-                       bgColor="#ead1dc" brColor="#4c1130">
-                    <text><![CDATA[Disquete, Disco compacto, DVD,
-BD, Disco duro, Memoria flash.]]></text>
-                </topic>
-            </topic>
-        </topic>
-        <topic position="-314,-72" order="1" shape="rectagle" id="59" fontStyle=";8;#000000;bold;;" bgColor="#bf9000"
-               brColor="#7f6000">
-            <text><![CDATA[Software
-(Programas y datos con los que funciona la computadora)
-]]></text>
-            <topic position="-664,-145" order="0" shape="rectagle" id="92" fontStyle=";8;#000000;normal;;"
-                   bgColor="#f1c232" brColor="#7f6000">
-                <text><![CDATA[Software de Sistema:Permite el entendimiento
-entre el usuario y la maquina.]]></text>
-                <topic position="-883,-174" order="0" text="Microsoft Windows" shape="rectagle" id="101"
-                       fontStyle=";8;#000000;;;" bgColor="#ffd966" brColor="#7f6000"/>
-                <topic position="-864,-145" order="1" text="GNU/LINUX" shape="rectagle" id="106"
-                       fontStyle=";8;#000000;;;" bgColor="#ffd966" brColor="#7f6000"/>
-                <topic position="-846,-116" order="2" text="MAC " shape="rectagle" id="107" fontStyle=";8;#000000;;;"
-                       bgColor="#ffd966" brColor="#7f6000"/>
-            </topic>
-            <topic position="-667,-43" order="1" shape="rectagle" id="93" fontStyle=";8;#000000;;;" bgColor="#f1c232"
-                   brColor="#7f6000">
-                <text><![CDATA[Software de Aplicación: Permite hacer hojas de
-calculo navegar en internet, base de datos, etc.]]></text>
-                <topic position="-855,-87" order="0" text="Office" shape="rectagle" id="108" fontStyle=";8;#000000;;;"
-                       bgColor="#ffd966" brColor="#783f04"/>
-                <topic position="-869,-58" order="1" text="Libre Office" shape="rectagle" id="109"
-                       fontStyle=";8;#000000;;;" bgColor="#ffd966" brColor="#7f6000"/>
-                <topic position="-873,-29" order="2" text="Navegadores" shape="rectagle" id="110"
-                       fontStyle=";8;#000000;;;" bgColor="#ffd966" brColor="#7f6000"/>
-                <topic position="-851,0" order="3" text="Msn" shape="rectagle" id="111" fontStyle=";8;#000000;;;"
-                       bgColor="#ffd966" brColor="#783f04"/>
-            </topic>
-            <topic position="-590,29" order="2" shape="rectagle" id="94" fontStyle=";8;#000000;;;" bgColor="#f1c232"
-                   brColor="#7f6000">
-                <text><![CDATA[Software de Desarrollo
-]]></text>
-            </topic>
-        </topic>
-        <topic position="-218,116" order="3" text="Tipos de computadora" shape="elipse" id="3" fontStyle=";10;;bold;;">
-            <topic position="-476,58" order="0" text="Computadora personal de escritorio o Desktop" shape="elipse"
-                   id="8" fontStyle=";8;;bold;;"/>
-            <topic position="-352,87" order="1" shape="elipse" id="10" fontStyle=";8;;bold;;">
-                <text><![CDATA[PDA
-]]></text>
-            </topic>
-            <topic position="-360,116" order="2" text="Laptop" shape="elipse" id="11" fontStyle=";8;;bold;;"/>
-            <topic position="-365,145" order="3" text="Servidor" shape="elipse" id="12" fontStyle=";8;;bold;;"/>
-            <topic position="-368,174" order="4" text="Tablet PC" shape="elipse" id="13" fontStyle=";8;;bold;;"/>
-        </topic>
-    </topic>
-    <topic position="283,192" text="CPU y sus partes internas" shape="rounded rectagle" id="35"
-           fontStyle=";10;#feffff;;;" bgColor="#c27ba0" brColor="#4c1130">
-        <topic position="493,120" order="0" text="Ranuras de expansión o PCI" shape="rounded rectagle" id="36"
-               fontStyle=";8;#000000;;;" bgColor="#ead1dc" brColor="#4c1130"/>
-        <topic position="458,149" order="1" shape="rounded rectagle" id="38" fontStyle=";8;#000000;;;" bgColor="#ead1dc"
-               brColor="#4c1130">
-            <text><![CDATA[Memoria RAM
-]]></text>
-        </topic>
-        <topic position="466,178" order="2" shape="rounded rectagle" id="40" fontStyle=";8;#000000;;;" bgColor="#ead1dc"
-               brColor="#4c1130">
-            <text><![CDATA[Unidades ópticas
-]]></text>
-        </topic>
-        <topic position="457,207" order="3" shape="rounded rectagle" id="41" fontStyle=";8;#000000;;;" bgColor="#ead1dc"
-               brColor="#4c1130">
-            <text><![CDATA[Tarjeta Madre
-]]></text>
-        </topic>
-        <topic position="465,236" order="4" shape="rounded rectagle" id="42" fontStyle=";8;#000000;;;" bgColor="#ead1dc"
-               brColor="#4c1130">
-            <text><![CDATA[Microprocesador
-]]></text>
-        </topic>
-        <topic position="450,265" order="5" shape="rounded rectagle" id="43" fontStyle=";8;#000000;;;" bgColor="#ead1dc"
-               brColor="#4c1130">
-            <text><![CDATA[Disco Duro
-]]></text>
-        </topic>
-    </topic>
-    <topic position="80,-215" shape="rounded rectagle" id="118" fontStyle=";10;#feffff;;;" bgColor="#cc0000"
-           brColor="#660000">
-        <text><![CDATA[Máquina electrónica que sirve para:  escribir,  dibujar,  pintar,
-escuchar música, ver videos, calcular, comunicarnos con otras personas, etc-]]></text>
-    </topic>
-    <relationship srcTopicId="35" destTopicId="21" lineType="3" endArrow="true" startArrow="false"/>
-    <relationship srcTopicId="118" destTopicId="1" lineType="3" endArrow="true" startArrow="false"/>
-    <relationship srcTopicId="118" destTopicId="1" lineType="3" endArrow="true" startArrow="false"/>
-</map>
\ No newline at end of file
diff --git a/packages/mindplot/test/playground/map-render/samples/sample1.xml b/packages/mindplot/test/playground/map-render/samples/sample1.xml
index 29b16798..e957fa3d 100644
--- a/packages/mindplot/test/playground/map-render/samples/sample1.xml
+++ b/packages/mindplot/test/playground/map-render/samples/sample1.xml
@@ -1,172 +1,120 @@
-<map name="164378" version="tango">
-    <topic central="true" id="1">
-        <text><![CDATA[ A New Game
- For C Players   ]]></text>
-        <topic position="104,-211" order="0" text="Impacto C Players" id="16">
-            <icon id="thumb_thumb_down"/>
-            <topic position="150,-294" order="0" id="10">
-                <text><![CDATA[Ellos en parte son responsables de que la compañia no sea exitosa,
-si no se toma acciones se pone en riesgo a todos los empleados]]></text>
-            </topic>
-            <topic position="277,-265" order="1" text="El costo obvio de tirar abajo la performance global de la compañia. " id="17"/>
-            <topic position="214,-240" order="2" text="Son modelos incorrectos a seguir" id="18"/>
-            <topic position="215,-207" order="3" text="No son  buenos coughs o mentores" id="19">
-                <topic position="412,-211" order="0" id="20">
-                    <text><![CDATA[Empleados directos abandonan la compañía por 
-sentir que no aprenden ni progresan]]></text>
+<map name="70866" version="tango">
+    <topic central="true" text="La computadora" shape="rounded rectagle" id="1" fontStyle="Verdana;15;#feffff;bold;;"
+           bgColor="#cc0000" brColor="#660000">
+        <topic position="220,0" order="0" shape="rounded rectagle" id="21" fontStyle=";10;#feffff;bold;;"
+               bgColor="#a64d79" brColor="#4c1130">
+            <text><![CDATA[Hardware
+(componentes físicos)]]></text>
+            <topic position="386,-29" order="0" shape="rounded rectagle" id="25" fontStyle=";8;#feffff;;;"
+                   bgColor="#c27ba0" brColor="#4c1130">
+                <text><![CDATA[Entrada de datos
+]]></text>
+                <topic position="558,-34" order="0" shape="rounded rectagle" id="28" fontStyle=";8;#000000;;;"
+                       bgColor="#ead1dc" brColor="#4c1130">
+                    <text><![CDATA[ Ratón, Teclado, Joystick,
+Cámara digital, Micrófono, Escáner.]]></text>
                 </topic>
             </topic>
-            <topic position="218,-182" order="4" text="C players contratan otros C players" id="21"/>
-            <topic position="261,-157" order="5" text="Dañan la atractividad de la compañía para nuevos talentos" id="22"/>
-            <topic position="232,-128" order="6" id="23">
-                <text><![CDATA[Impactan directamente en la moral de los 
-que mejor se desempeñan.]]></text>
-            </topic>
-        </topic>
-        <topic position="-147,-228" order="1" id="24">
-            <text><![CDATA[Que hacer con los 
-players A y B ]]></text>
-            <topic position="-324,-307" order="0" text="Trabajar con ellos para acelerar su desarrollo" id="72"/>
-            <topic position="-308,-282" order="1" text="Hacer todo lo posible para retenerlos" id="73"/>
-            <topic position="-358,-253" order="2" id="82">
-                <text><![CDATA[Alentarlos a ser parte de tareas fuera de sus responsabilidades
-que los ayude a conectarse y aplicar su red de contactos]]></text>
-            </topic>
-            <topic position="-320,-224" order="3" text="Asignar mentores que ayuden a desarrorse" id="83"/>
-            <topic position="-298,-199" order="4" text="Feedback sobre sus debilidades" id="84"/>
-            <topic position="-282,-174" order="5" text="Resaltar sus fortalezas" id="85"/>
-            <topic position="-315,-149" order="6" text="Reconocer y Premiar sus contribuciones" id="86"/>
-        </topic>
-        <topic position="106,74" order="2" id="27">
-            <text><![CDATA[Proceso sistematico y disciplinado que enfrente a los 
-managers con la dificultad de liderar con este problema.
-Hay 3 pasos a seguir ...]]></text>
-            <icon id="sign_info"/>
-            <topic position="154,-46" order="0" text="1) Identificar" id="29">
-                <topic position="285,-95" order="0" id="33">
-                    <text><![CDATA[Es necesario definir objetivos de performance y 
-el criterio de evaluación.]]></text>
-                </topic>
-                <topic position="278,-62" order="1" id="34">
-                    <text><![CDATA[Claro acuerdo con la alta gerencia en definir 
-las expectativas en forma correcta.]]></text>
-                </topic>
-                <topic position="278,-29" order="2" id="35">
-                    <text><![CDATA[Acordar un nivel de calificación acorde a los 
-niveles de performance definidos]]></text>
-                </topic>
-                <topic position="291,4" order="3" id="36">
-                    <text><![CDATA[Monitorear y trabajar en ubicar a las personas
-en los posiciones correctos. Eg: Campana de Gaus]]></text>
-                    <topic position="479,4" order="0" id="37">
-                        <text><![CDATA[Depende de la 
-madurez de la organizacion]]></text>
-                    </topic>
+            <topic position="383,0" order="1" text="Salida de datos" shape="rounded rectagle" id="29"
+                   fontStyle=";8;#feffff;;;" bgColor="#c27ba0" brColor="#4c1130">
+                <topic position="554,0" order="0" shape="rounded rectagle" id="30" fontStyle=";8;#000000;;;"
+                       bgColor="#ead1dc" brColor="#4c1130">
+                    <text><![CDATA[Monitor, Impresora, Bocinas, Plóter.
+]]></text>
                 </topic>
             </topic>
-            <topic position="205,91" order="1" text="2) Definir  un plan de acción" id="30">
-                <topic position="364,37" order="0" id="40">
-                    <text><![CDATA[Es necesario definir un plan definido
-para los proximos 12 meses.]]></text>
-                </topic>
-                <topic position="350,70" order="1" id="41">
-                    <text><![CDATA[El plan depende de multiples
-factores]]></text>
-                </topic>
-                <topic position="320,124" order="2" text="Alternativas" id="42">
-                    <topic position="446,99" order="0" text="Mejorar la performance de C a B." id="43"/>
-                    <topic position="451,124" order="1" text="Cambiar el manager a otra posicion" id="44"/>
-                    <topic position="446,149" order="2" id="45">
-                        <text><![CDATA[Ofrecerle abandonar la compañia
-]]>                        </text>
-                    </topic>
-                </topic>
-            </topic>
-            <topic position="240,211" order="2" id="31">
-                <text><![CDATA[3) Asignar a los managers la responsabilidad
-de llevar a cabo el plan]]></text>
-                <topic position="415,178" order="0" id="48">
-                    <text><![CDATA[Es necesario compromiso
-de la alta dirección ]]></text>
-                </topic>
-                <topic position="433,211" order="1" id="49">
-                    <text><![CDATA[Tip: Bonos asociados al manejo del 
-grupo de talentos asignados]]></text>
-                </topic>
-                <topic position="420,244" order="2" id="50">
-                    <text><![CDATA[Suporte de HR y la dirección 
-en el proceso]]></text>
+            <topic position="387,40" order="2" text="Almacenamiento" shape="rounded rectagle" id="31"
+                   fontStyle=";8;#feffff;;;" bgColor="#c27ba0" brColor="#4c1130">
+                <topic position="553,35" order="0" shape="rounded rectagle" id="32" fontStyle=";8;#000000;;;"
+                       bgColor="#ead1dc" brColor="#4c1130">
+                    <text><![CDATA[Disquete, Disco compacto, DVD,
+BD, Disco duro, Memoria flash.]]></text>
                 </topic>
             </topic>
         </topic>
-        <topic position="-104,-33" order="3" id="5">
-            <text><![CDATA[Por que es dificil 
-lidear con C players ?]]></text>
-            <icon id="weather_showers-scattered"/>
-            <topic position="-151,-124" order="0" text="Falta de riguroso seguimiento" id="4"/>
-            <topic position="-192,-99" order="1" text="Razones emocionales" id="6"/>
-            <topic position="-207,-74" order="2" text="Amistad creada durante años" id="7"/>
-            <topic position="-219,-45" order="3" id="8">
-                <text><![CDATA[Barreras ideológicas en la creencia 
-que pueden volver a ser A y B]]></text>
+        <topic position="-314,-72" order="1" shape="rectagle" id="59" fontStyle=";8;#000000;bold;;" bgColor="#bf9000"
+               brColor="#7f6000">
+            <text><![CDATA[Software
+(Programas y datos con los que funciona la computadora)
+]]></text>
+            <topic position="-664,-145" order="0" shape="rectagle" id="92" fontStyle=";8;#000000;normal;;"
+                   bgColor="#f1c232" brColor="#7f6000">
+                <text><![CDATA[Software de Sistema:Permite el entendimiento
+entre el usuario y la maquina.]]></text>
+                <topic position="-883,-174" order="0" text="Microsoft Windows" shape="rectagle" id="101"
+                       fontStyle=";8;#000000;;;" bgColor="#ffd966" brColor="#7f6000"/>
+                <topic position="-864,-145" order="1" text="GNU/LINUX" shape="rectagle" id="106"
+                       fontStyle=";8;#000000;;;" bgColor="#ffd966" brColor="#7f6000"/>
+                <topic position="-846,-116" order="2" text="MAC " shape="rectagle" id="107" fontStyle=";8;#000000;;;"
+                       bgColor="#ffd966" brColor="#7f6000"/>
             </topic>
-            <topic position="-211,-12" order="4" id="9">
-                <text><![CDATA[Creencia que hay que ser leal a 
-la persona en forma indefinida]]></text>
+            <topic position="-667,-43" order="1" shape="rectagle" id="93" fontStyle=";8;#000000;;;" bgColor="#f1c232"
+                   brColor="#7f6000">
+                <text><![CDATA[Software de Aplicación: Permite hacer hojas de
+calculo navegar en internet, base de datos, etc.]]></text>
+                <topic position="-855,-87" order="0" text="Office" shape="rectagle" id="108" fontStyle=";8;#000000;;;"
+                       bgColor="#ffd966" brColor="#783f04"/>
+                <topic position="-869,-58" order="1" text="Libre Office" shape="rectagle" id="109"
+                       fontStyle=";8;#000000;;;" bgColor="#ffd966" brColor="#7f6000"/>
+                <topic position="-873,-29" order="2" text="Navegadores" shape="rectagle" id="110"
+                       fontStyle=";8;#000000;;;" bgColor="#ffd966" brColor="#7f6000"/>
+                <topic position="-851,0" order="3" text="Msn" shape="rectagle" id="111" fontStyle=";8;#000000;;;"
+                       bgColor="#ffd966" brColor="#783f04"/>
             </topic>
-            <topic position="-169,38" order="5" text="Practicas" id="11">
-                <topic position="-301,21" order="0" id="12">
-                    <text><![CDATA[Miedo a que tenga un impacto negativo
-en el resto de los empleados
-]]>                    </text>
-                </topic>
-                <topic position="-287,54" order="1" id="15">
-                    <text><![CDATA[Demandas por racismo, edad o 
-Genero ]]></text>
-                </topic>
+            <topic position="-590,29" order="2" shape="rectagle" id="94" fontStyle=";8;#000000;;;" bgColor="#f1c232"
+                   brColor="#7f6000">
+                <text><![CDATA[Software de Desarrollo
+]]></text>
             </topic>
         </topic>
-        <topic position="247,286" order="4" id="3">
-            <text><![CDATA[El éxito de una organización depende principalmente 
-del cuidado de managers A y B, pero 
-tambien de la reduccion de los C]]></text>
-        </topic>
-        <topic position="-174,170" order="5" id="53">
-            <text><![CDATA[Respecto y Justicia
-son Claves al Momento
-de Trabajar la Performance 
-de C Players.]]></text>
-            <topic position="-324,100" order="0" text="Feedback genuino" id="54">
-                <topic position="-481,87" order="0" id="55">
-                    <text><![CDATA[Honest and constructivo de forma escrita 
-como parte de su performance anual review]]></text>
-                </topic>
-                <topic position="-474,116" order="1" text="Despido no debe ser nunca una sorpresa" id="56"/>
+        <topic position="-218,116" order="3" text="Tipos de computadora" shape="elipse" id="3" fontStyle=";10;;bold;;">
+            <topic position="-476,58" order="0" text="Computadora personal de escritorio o Desktop" shape="elipse"
+                   id="8" fontStyle=";8;;bold;;"/>
+            <topic position="-352,87" order="1" shape="elipse" id="10" fontStyle=";8;;bold;;">
+                <text><![CDATA[PDA
+]]></text>
             </topic>
-            <topic position="-380,157" order="1" id="59">
-                <text><![CDATA[No tiene sentido decirle a alguien
-que mejore sin coaching y ayuda.
-Es necesario dar guia especifica de como
-hacer las cosas en forma distinta para mojorar
-su performance
-]]>                </text>
-            </topic>
-            <topic position="-351,227" order="2" id="64">
-                <text><![CDATA[Dar un generoso soporte al 
-separarlo. No solo económicas.]]></text>
-                <topic position="-487,202" order="0" id="67">
-                    <text><![CDATA[Ayudarlo a buscar 
-nuevo trabajo]]></text>
-                </topic>
-                <topic position="-469,231" order="1" text="Consejos" id="68"/>
-                <topic position="-507,256" order="2" text="Ir mas alla de los estupulado" id="71"/>
-            </topic>
-        </topic>
-        <topic position="-105,294" order="7" id="26">
-            <text><![CDATA[Quitar low performers de 
-las posiciones de liderazgo. Es necesario para 
-garantizar el exito de las compañia.]]></text>
-            <icon id="sign_warning"/>
+            <topic position="-360,116" order="2" text="Laptop" shape="elipse" id="11" fontStyle=";8;;bold;;"/>
+            <topic position="-365,145" order="3" text="Servidor" shape="elipse" id="12" fontStyle=";8;;bold;;"/>
+            <topic position="-368,174" order="4" text="Tablet PC" shape="elipse" id="13" fontStyle=";8;;bold;;"/>
         </topic>
     </topic>
+    <topic position="283,192" text="CPU y sus partes internas" shape="rounded rectagle" id="35"
+           fontStyle=";10;#feffff;;;" bgColor="#c27ba0" brColor="#4c1130">
+        <topic position="493,120" order="0" text="Ranuras de expansión o PCI" shape="rounded rectagle" id="36"
+               fontStyle=";8;#000000;;;" bgColor="#ead1dc" brColor="#4c1130"/>
+        <topic position="458,149" order="1" shape="rounded rectagle" id="38" fontStyle=";8;#000000;;;" bgColor="#ead1dc"
+               brColor="#4c1130">
+            <text><![CDATA[Memoria RAM
+]]></text>
+        </topic>
+        <topic position="466,178" order="2" shape="rounded rectagle" id="40" fontStyle=";8;#000000;;;" bgColor="#ead1dc"
+               brColor="#4c1130">
+            <text><![CDATA[Unidades ópticas
+]]></text>
+        </topic>
+        <topic position="457,207" order="3" shape="rounded rectagle" id="41" fontStyle=";8;#000000;;;" bgColor="#ead1dc"
+               brColor="#4c1130">
+            <text><![CDATA[Tarjeta Madre
+]]></text>
+        </topic>
+        <topic position="465,236" order="4" shape="rounded rectagle" id="42" fontStyle=";8;#000000;;;" bgColor="#ead1dc"
+               brColor="#4c1130">
+            <text><![CDATA[Microprocesador
+]]></text>
+        </topic>
+        <topic position="450,265" order="5" shape="rounded rectagle" id="43" fontStyle=";8;#000000;;;" bgColor="#ead1dc"
+               brColor="#4c1130">
+            <text><![CDATA[Disco Duro
+]]></text>
+        </topic>
+    </topic>
+    <topic position="80,-215" shape="rounded rectagle" id="118" fontStyle=";10;#feffff;;;" bgColor="#cc0000"
+           brColor="#660000">
+        <text><![CDATA[Máquina electrónica que sirve para:  escribir,  dibujar,  pintar,
+escuchar música, ver videos, calcular, comunicarnos con otras personas, etc-]]></text>
+    </topic>
+    <relationship srcTopicId="35" destTopicId="21" lineType="3" endArrow="true" startArrow="false"/>
+    <relationship srcTopicId="118" destTopicId="1" lineType="3" endArrow="true" startArrow="false"/>
+    <relationship srcTopicId="118" destTopicId="1" lineType="3" endArrow="true" startArrow="false"/>
 </map>
\ No newline at end of file
diff --git a/packages/mindplot/test/playground/map-render/samples/sample2.xml b/packages/mindplot/test/playground/map-render/samples/sample2.xml
index aad51a70..29b16798 100644
--- a/packages/mindplot/test/playground/map-render/samples/sample2.xml
+++ b/packages/mindplot/test/playground/map-render/samples/sample2.xml
@@ -1,29 +1,172 @@
-<map name="8007">
-    <topic central="true" text="Prospace" bgColor="#f2981b" brColor="#cc5627">
-        <link url="prospace.com"/>
-        <note text="Prospace.com%0A%0A%0AShow%20them%20the%20value%20and%20sell%20them%20a%20product%20that%20is%20much%20lower%20than%20the%20preceived%20value.%0A%0AIdentify%20the%20pain%20in%20the%20industry.%20%0A%0ATrying%20to%20get%20a%20job%20is%20a%20pain.%20%20You%20need%20a%20high%20level%20of%20confidence%20to%20market%20yourself.%20%20Prospace%0Areinforces%20that%20confidence%20by%20allowing%20users%20to%20build%20a%20esteem-building%20portfolio%20on%20oneself.%20%20Getting%20a%0Ajob%20takes%20time.%20%0A%0ACareer%20Centers%20need%20to%20bring%20value%20to%20their%20audience.%20%0A%0A%0A%0AShow%20them%20a%20service%20that%20would%20solve%20that%20pain.%20%20%20First%0Abring%20awareness%20to%20that%20pain.%20%20How%20will%20you%20bring%20awareness%20to%20that%20pain%3F%20%20%20Bring%20awareness%20%0Aof%20a%20service%20that%20would%20solve%20that%20pain%20at%20a%20cost%20that%20can%20fit%20reasonable%20in%20their%20budget.%0A%0A%0A%0A%0A%20How%20are%20competitors%20solving%20that%20pain%20now%3F%20%20%20How%20is%20the%20compeition%0Amaking%20them%20aware%20of%20the%20pain.%20%20%20What%20is%20the%20value%20and%20price%20competitors%20bringing%20to%20their%20customers.%0A%0AWhat%20are%20the%20fears%20of%20the%20competition%3F%20%20What%20do%20they%20think%20they%20need%20to%20do%20in%20the%20next%20five%20years%20to%20%0Astay%20ahead%3F%0A"/>
-        <topic position="-314,-150" text="Newspapers">
-            <topic order="0" text="College Newspapers"/>
-        </topic>
-        <topic position="-203,-300" text="Third Party ">
-            <topic order="0" text="Thumbshot" shape="rectagle">
-                <link url="thumbshots.org"/>
+<map name="164378" version="tango">
+    <topic central="true" id="1">
+        <text><![CDATA[ A New Game
+ For C Players   ]]></text>
+        <topic position="104,-211" order="0" text="Impacto C Players" id="16">
+            <icon id="thumb_thumb_down"/>
+            <topic position="150,-294" order="0" id="10">
+                <text><![CDATA[Ellos en parte son responsables de que la compañia no sea exitosa,
+si no se toma acciones se pone en riesgo a todos los empleados]]></text>
+            </topic>
+            <topic position="277,-265" order="1" text="El costo obvio de tirar abajo la performance global de la compañia. " id="17"/>
+            <topic position="214,-240" order="2" text="Son modelos incorrectos a seguir" id="18"/>
+            <topic position="215,-207" order="3" text="No son  buenos coughs o mentores" id="19">
+                <topic position="412,-211" order="0" id="20">
+                    <text><![CDATA[Empleados directos abandonan la compañía por 
+sentir que no aprenden ni progresan]]></text>
+                </topic>
+            </topic>
+            <topic position="218,-182" order="4" text="C players contratan otros C players" id="21"/>
+            <topic position="261,-157" order="5" text="Dañan la atractividad de la compañía para nuevos talentos" id="22"/>
+            <topic position="232,-128" order="6" id="23">
+                <text><![CDATA[Impactan directamente en la moral de los 
+que mejor se desempeñan.]]></text>
             </topic>
         </topic>
-        <topic position="312,0" text="Partnerships">
-            <topic order="0" text="Websites">
-                <topic order="0" text="Business Networks">
-                    <topic order="0" text="Xing"/>
-                    <topic order="1" text="konnects.com"/>
+        <topic position="-147,-228" order="1" id="24">
+            <text><![CDATA[Que hacer con los 
+players A y B ]]></text>
+            <topic position="-324,-307" order="0" text="Trabajar con ellos para acelerar su desarrollo" id="72"/>
+            <topic position="-308,-282" order="1" text="Hacer todo lo posible para retenerlos" id="73"/>
+            <topic position="-358,-253" order="2" id="82">
+                <text><![CDATA[Alentarlos a ser parte de tareas fuera de sus responsabilidades
+que los ayude a conectarse y aplicar su red de contactos]]></text>
+            </topic>
+            <topic position="-320,-224" order="3" text="Asignar mentores que ayuden a desarrorse" id="83"/>
+            <topic position="-298,-199" order="4" text="Feedback sobre sus debilidades" id="84"/>
+            <topic position="-282,-174" order="5" text="Resaltar sus fortalezas" id="85"/>
+            <topic position="-315,-149" order="6" text="Reconocer y Premiar sus contribuciones" id="86"/>
+        </topic>
+        <topic position="106,74" order="2" id="27">
+            <text><![CDATA[Proceso sistematico y disciplinado que enfrente a los 
+managers con la dificultad de liderar con este problema.
+Hay 3 pasos a seguir ...]]></text>
+            <icon id="sign_info"/>
+            <topic position="154,-46" order="0" text="1) Identificar" id="29">
+                <topic position="285,-95" order="0" id="33">
+                    <text><![CDATA[Es necesario definir objetivos de performance y 
+el criterio de evaluación.]]></text>
+                </topic>
+                <topic position="278,-62" order="1" id="34">
+                    <text><![CDATA[Claro acuerdo con la alta gerencia en definir 
+las expectativas en forma correcta.]]></text>
+                </topic>
+                <topic position="278,-29" order="2" id="35">
+                    <text><![CDATA[Acordar un nivel de calificación acorde a los 
+niveles de performance definidos]]></text>
+                </topic>
+                <topic position="291,4" order="3" id="36">
+                    <text><![CDATA[Monitorear y trabajar en ubicar a las personas
+en los posiciones correctos. Eg: Campana de Gaus]]></text>
+                    <topic position="479,4" order="0" id="37">
+                        <text><![CDATA[Depende de la 
+madurez de la organizacion]]></text>
+                    </topic>
+                </topic>
+            </topic>
+            <topic position="205,91" order="1" text="2) Definir  un plan de acción" id="30">
+                <topic position="364,37" order="0" id="40">
+                    <text><![CDATA[Es necesario definir un plan definido
+para los proximos 12 meses.]]></text>
+                </topic>
+                <topic position="350,70" order="1" id="41">
+                    <text><![CDATA[El plan depende de multiples
+factores]]></text>
+                </topic>
+                <topic position="320,124" order="2" text="Alternativas" id="42">
+                    <topic position="446,99" order="0" text="Mejorar la performance de C a B." id="43"/>
+                    <topic position="451,124" order="1" text="Cambiar el manager a otra posicion" id="44"/>
+                    <topic position="446,149" order="2" id="45">
+                        <text><![CDATA[Ofrecerle abandonar la compañia
+]]>                        </text>
+                    </topic>
+                </topic>
+            </topic>
+            <topic position="240,211" order="2" id="31">
+                <text><![CDATA[3) Asignar a los managers la responsabilidad
+de llevar a cabo el plan]]></text>
+                <topic position="415,178" order="0" id="48">
+                    <text><![CDATA[Es necesario compromiso
+de la alta dirección ]]></text>
+                </topic>
+                <topic position="433,211" order="1" id="49">
+                    <text><![CDATA[Tip: Bonos asociados al manejo del 
+grupo de talentos asignados]]></text>
+                </topic>
+                <topic position="420,244" order="2" id="50">
+                    <text><![CDATA[Suporte de HR y la dirección 
+en el proceso]]></text>
                 </topic>
             </topic>
         </topic>
-        <topic position="-209,0" text="Career Counseling">
-            <topic order="0" text="Fraternity"/>
-            <topic order="1" text="Professional Associations"/>
+        <topic position="-104,-33" order="3" id="5">
+            <text><![CDATA[Por que es dificil 
+lidear con C players ?]]></text>
+            <icon id="weather_showers-scattered"/>
+            <topic position="-151,-124" order="0" text="Falta de riguroso seguimiento" id="4"/>
+            <topic position="-192,-99" order="1" text="Razones emocionales" id="6"/>
+            <topic position="-207,-74" order="2" text="Amistad creada durante años" id="7"/>
+            <topic position="-219,-45" order="3" id="8">
+                <text><![CDATA[Barreras ideológicas en la creencia 
+que pueden volver a ser A y B]]></text>
+            </topic>
+            <topic position="-211,-12" order="4" id="9">
+                <text><![CDATA[Creencia que hay que ser leal a 
+la persona en forma indefinida]]></text>
+            </topic>
+            <topic position="-169,38" order="5" text="Practicas" id="11">
+                <topic position="-301,21" order="0" id="12">
+                    <text><![CDATA[Miedo a que tenga un impacto negativo
+en el resto de los empleados
+]]>                    </text>
+                </topic>
+                <topic position="-287,54" order="1" id="15">
+                    <text><![CDATA[Demandas por racismo, edad o 
+Genero ]]></text>
+                </topic>
+            </topic>
         </topic>
-        <topic position="-178,50" text="White-Label">
-            <topic order="0" text="http://www.harrisconnect.com/"/>
+        <topic position="247,286" order="4" id="3">
+            <text><![CDATA[El éxito de una organización depende principalmente 
+del cuidado de managers A y B, pero 
+tambien de la reduccion de los C]]></text>
+        </topic>
+        <topic position="-174,170" order="5" id="53">
+            <text><![CDATA[Respecto y Justicia
+son Claves al Momento
+de Trabajar la Performance 
+de C Players.]]></text>
+            <topic position="-324,100" order="0" text="Feedback genuino" id="54">
+                <topic position="-481,87" order="0" id="55">
+                    <text><![CDATA[Honest and constructivo de forma escrita 
+como parte de su performance anual review]]></text>
+                </topic>
+                <topic position="-474,116" order="1" text="Despido no debe ser nunca una sorpresa" id="56"/>
+            </topic>
+            <topic position="-380,157" order="1" id="59">
+                <text><![CDATA[No tiene sentido decirle a alguien
+que mejore sin coaching y ayuda.
+Es necesario dar guia especifica de como
+hacer las cosas en forma distinta para mojorar
+su performance
+]]>                </text>
+            </topic>
+            <topic position="-351,227" order="2" id="64">
+                <text><![CDATA[Dar un generoso soporte al 
+separarlo. No solo económicas.]]></text>
+                <topic position="-487,202" order="0" id="67">
+                    <text><![CDATA[Ayudarlo a buscar 
+nuevo trabajo]]></text>
+                </topic>
+                <topic position="-469,231" order="1" text="Consejos" id="68"/>
+                <topic position="-507,256" order="2" text="Ir mas alla de los estupulado" id="71"/>
+            </topic>
+        </topic>
+        <topic position="-105,294" order="7" id="26">
+            <text><![CDATA[Quitar low performers de 
+las posiciones de liderazgo. Es necesario para 
+garantizar el exito de las compañia.]]></text>
+            <icon id="sign_warning"/>
         </topic>
     </topic>
 </map>
\ No newline at end of file
diff --git a/packages/mindplot/test/playground/map-render/samples/welcome-reloaded.xml b/packages/mindplot/test/playground/map-render/samples/welcome-reloaded.xml
deleted file mode 100644
index cac5906b..00000000
--- a/packages/mindplot/test/playground/map-render/samples/welcome-reloaded.xml
+++ /dev/null
@@ -1,48 +0,0 @@
-<map name="welcome" version="tango">
-    <topic central="true" text="Welcome To WiseMapping" id="1" fontStyle=";;#dfcfe6;;;" bgColor="#0a0a08">
-        <topic position="178,-130" order="0" text="Try it Now!" id="11" fontStyle=";;#ffffff;;;" bgColor="#250be3"
-               brColor="#080559">
-            <topic position="272,-156" order="0" text="Double Click" id="12" fontStyle=";;#001be6;;italic;"/>
-            <topic position="274,-130" order="1" text=" INS to insert" id="13" fontStyle=";;#001be6;;italic;"/>
-            <topic position="285,-104" order="2" text="Drag map to move" id="14" fontStyle=";;#001be6;;italic;"/>
-        </topic>
-        <topic position="-189,-52" order="1" text="Productivity" id="2" fontStyle=";;#104f11;;;" bgColor="#d9b518">
-            <icon id="chart_bar"/>
-            <topic position="-310,-104" order="0" text="Share your ideas" id="3">
-                <icon id="bulb_light_on"/>
-            </topic>
-            <topic position="-299,-25" order="2" text="Brainstorming" id="4"/>
-            <topic position="-283,1" order="3" text="Visual " id="5"/>
-            <topic position="-307,-65" order="1" shape="image" image="80,43:images/logo-small.png" id="27"
-                   metadata="{'media':'video,'url':'http://www.youtube.com/watch?v=P3FrXftyuzw&amp;feature=g-vrec&amp;context=G2b4ab69RVAAAAAAAAAA'}"/>
-        </topic>
-        <topic position="185,-39" order="2" text="Mind Mapping" id="6" fontStyle=";;#602378;;;" bgColor="#edabff">
-            <topic position="303,-78" order="0" text="Share with Collegues" id="7"/>
-            <topic position="275,-52" order="1" text="Online" id="8"/>
-            <topic position="299,-26" order="2" text="Anyplace, Anytime" id="9"/>
-            <topic position="277,0" order="3" text="Free!!!" id="10"/>
-        </topic>
-        <topic position="-183,66" order="3" text="Web 2.0 Tool" id="22" fontStyle=";;#0c1d6b;;;" bgColor="#add1f7">
-            <topic position="-281,27" order="0" text="Collaborate" id="23"/>
-            <topic position="-302,53" order="1" text="No plugin required" id="24">
-                <icon id="conn_disconnect"/>
-            </topic>
-            <topic position="-271,79" order="2" text="Share" id="25"/>
-            <topic position="-282,105" order="3" text="Easy to use" id="26"/>
-        </topic>
-        <topic position="171,91" order="4" text="Features" id="15">
-            <topic position="266,26" order="0" text="Links to Sites" id="16" fontStyle=";6;;;;">
-                <link url="http://www.digg.com" type="url"/>
-            </topic>
-            <topic position="245,52" order="1" text="Fonts" id="17"/>
-            <topic position="255,78" order="2" text="Topic Color" id="18"/>
-            <topic position="260,104" order="3" text="Topic Shapes" shape="line" id="19"/>
-            <topic position="252,130" order="4" text="Icons" id="20">
-                <icon id="object_rainbow"/>
-            </topic>
-            <topic position="272,156" order="5" text="History Changes" id="21">
-                <icon id="arrowc_turn_left"/>
-            </topic>
-        </topic>
-    </topic>
-</map>
\ No newline at end of file