Merged in feature/new_editor_toolbar (pull request #27)

Feature/new editor toolbar

Approved-by: Matias Arriola

packages/mindplot/src/components/DesignerBuilder.js

@@ -79,7 +79,7 @@ export function buildOptions(options) {
   };
 
   const viewPort = {
-    height: Number.parseInt(window.innerHeight - 70, 10), // Footer and Header
+    height: Number.parseInt(window.innerHeight, 10),
     width: Number.parseInt(window.innerWidth, 10),
   };
 

packages/mindplot/src/components/lang/ca.js

@@ -55,7 +55,28 @@ const CA = {
   LINK: 'Enllaç',
   OPEN_LINK: 'Obrir Enllaç',
   SESSION_EXPIRED: 'La seva sessió ha finalitzat. Si us plau, torni a connectar-se.',
-  DUMMY: '',
+  ACTION: 'Acció',
+  CREATE_SIBLING_TOPIC: 'Afegir tòpic germà',
+  CREATE_CHILD_TOPIC: 'Agfegir tòpic fill',
+  DELETE_TOPIC: 'Esborrar tòpic',
+  EDIT_TOPIC_TEXT: 'Editar text de tòpic',
+  JUST_START_TYPING: 'Comença a escriure',
+  CANCEL_TEXT_CHANGES: 'Cancel·la edició de text',
+  TOPIC_NAVIGATION: 'Navegació entre tòpics',
+  ARROW_KEYS: 'Fletxes del cursor',
+  SELECT_MULTIPLE_NODES: 'Seleccionar múltiples tòpics',
+  UNDO_EDITION: 'Revertir canvis',
+  REDO_EDITION: 'Refer canvis',
+  SELECT_ALL_TOPIC: 'Seleccionar tots els tòpics',
+  CHANGE_TEXT_BOLD: 'Canviar text a negreta',
+  SAVE_CHANGES: 'Desar els canvis',
+  CHANGE_TEXT_ITALIC: 'Canviar text a itàlica',
+  DESELECT_ALL_TOPIC: 'Revertir la selecció de tòpics',
+  COLLAPSE_CHILDREN: 'Col·lapsar fills',
+  KEYBOARD_SHORTCUTS_MSG: 'Els accessos directes poden ajudar-li a reduir temps, millorant la utilització del teclat.',
+  NAME: 'Nom',
+  COPY_AND_PASTE_TOPICS: 'Copiar i Enganxar tòpics',
+  MULTIPLE_LINES: 'Afegir múltiples linies de text',
 };
 
 export default CA;

packages/mindplot/src/components/lang/de.js

@@ -54,7 +54,28 @@ const DE = {
   CANCEL: 'Abbrechen',
   LINK: 'Verbindung',
   OPEN_LINK: 'Öffne URL',
-  DUMMY: '',
+  ACTION: 'Aktion',
+  CREATE_SIBLING_TOPIC: 'Erzeuge ein Schwester Thema',
+  CREATE_CHILD_TOPIC: 'Eryeuge ein Unterthema',
+  DELETE_TOPIC: 'Lösche Thema',
+  EDIT_TOPIC_TEXT: 'Editiere Thematext',
+  JUST_START_TYPING: 'Einfach mit der Eingabe beginnen',
+  CANCEL_TEXT_CHANGES: 'Textänderungen abbrechen',
+  TOPIC_NAVIGATION: 'Themen Navigation',
+  ARROW_KEYS: 'Pfeiltasten',
+  SELECT_MULTIPLE_NODES: 'Wähle mehrfache Knoten aus',
+  UNDO_EDITION: 'Änderungen rückgängig machen',
+  REDO_EDITION: 'Änderung nochmal ausführen',
+  SELECT_ALL_TOPIC: 'Wähle alle Themen aus',
+  CHANGE_TEXT_BOLD: 'Ändere Text in fette Schrift',
+  SAVE_CHANGES: 'Änderungen sichern',
+  CHANGE_TEXT_ITALIC: 'Ändere Text in kursive Schrift',
+  DESELECT_ALL_TOPIC: 'Deselektiere alle Themen',
+  COLLAPSE_CHILDREN: 'Kindknoten zusammenklappen',
+  KEYBOARD_SHORTCUTS_MSG: 'Tastenkürzel helfen Zeit zu sparen und erlauben die Arbeit nur mit der Tatstatur, s.d. Sie niemals die Hand von der Tastatur nehmen müßen, um die Maus zu bedienen.',
+  COPY_AND_PASTE_TOPICS: 'Kopieren und Einsetzen von Themen',
+  MULTIPLE_LINES: 'Füge mehrer Textzeilen hinzu',
+
 };
 
 export default DE;

packages/mindplot/src/components/lang/en.js

@@ -56,7 +56,27 @@ const EN = {
   OPEN_LINK: 'Open URL',
   SESSION_EXPIRED: 'Your session has expired, please log-in again.',
   URL_ERROR: 'URL not valid',
-  DUMMY: '',
+  ACTION: 'Action',
+  CREATE_SIBLING_TOPIC: 'Create Sibling Topic',
+  CREATE_CHILD_TOPIC: 'Create Child Topic',
+  DELETE_TOPIC: 'Delete Topic',
+  EDIT_TOPIC_TEXT: 'Edit Topic Text',
+  JUST_START_TYPING: 'Just start typing',
+  CANCEL_TEXT_CHANGES: 'Cancel Text Changes',
+  TOPIC_NAVIGATION: 'Topic Navigation',
+  ARROW_KEYS: 'Arrow Keys',
+  SELECT_MULTIPLE_NODES: 'Select Multiple Nodes',
+  UNDO_EDITION: 'Undo Edition',
+  REDO_EDITION: 'Redo Edition',
+  SELECT_ALL_TOPIC: 'Select All Topic',
+  CHANGE_TEXT_BOLD: 'Change Text Bold Type',
+  SAVE_CHANGES: 'Save Changes',
+  CHANGE_TEXT_ITALIC: 'Change Text Italic',
+  DESELECT_ALL_TOPIC: 'Deselect All Topic',
+  COLLAPSE_CHILDREN: 'Collapse Children',
+  KEYBOARD_SHORTCUTS_MSG: 'Keyboard shortcuts can help you save time by allowing you to never take your hands off the keyboard to use the mouse.',
+  COPY_AND_PASTE_TOPICS: 'Copy and Paste Topics',
+  MULTIPLE_LINES: 'Add multiple text lines',
 };
 
 export default EN;

packages/mindplot/src/components/lang/es.js

@@ -55,6 +55,26 @@ const ES = {
   LINK: 'Enlace',
   OPEN_LINK: 'Abrir Enlace',
   SESSION_EXPIRED: 'Su session ha expirado. Por favor, ingrese nuevamente.',
+  ACTION: 'Acción',
+  CREATE_SIBLING_TOPIC: 'Agregar Tópico Hermano',
+  CREATE_CHILD_TOPIC: 'Agregar Tópico Hijo',
+  DELETE_TOPIC: 'Borrar Tópico',
+  EDIT_TOPIC_TEXT: 'Editar Texto de Tópico',
+  JUST_START_TYPING: 'Comenza a escribir',
+  CANCEL_TEXT_CHANGES: 'Cancelar Edición de Texto',
+  TOPIC_NAVIGATION: 'Navegación Entre Tópicos',
+  ARROW_KEYS: 'Flechas Del Cursor',
+  SELECT_MULTIPLE_NODES: 'Selecciónar Multiples Tópicos',
+  UNDO_EDITION: 'Revertir Cambios',
+  REDO_EDITION: 'Rehacer Cambios',
+  SELECT_ALL_TOPIC: 'Seleccionar Todos los Tópicos',
+  CHANGE_TEXT_BOLD: 'Cambiar Texto a Negrita',
+  SAVE_CHANGES: 'Guardar los Cambios',
+  CHANGE_TEXT_ITALIC: 'Cambiar Texto a Italica',
+  DESELECT_ALL_TOPIC: 'Revertir Selección de Tópicos',
+  COLLAPSE_CHILDREN: 'Colapsar Hijos',
+  KEYBOARD_SHORTCUTS_MSG: 'Los accesos directos pueden ayudarte a salvar tiempo permitiéndote no sacar las manos del teclado para usar el mouse.',
+
 };
 
 export default ES;

packages/mindplot/src/components/lang/fr.js

@@ -53,6 +53,28 @@ const FR = {
   REMOVE: 'Supprimer',
   WRITE_YOUR_TEXT_HERE: 'Écrivez votre texte ici ...',
   LINK: 'Lien',
+  ACTION: 'Action',
+  CREATE_SIBLING_TOPIC: 'Créer noeud même niveau',
+  CREATE_CHILD_TOPIC: 'Créer noeud enfant',
+  DELETE_TOPIC: 'Détruire noeud ',
+  EDIT_TOPIC_TEXT: 'Editer texte du noeud',
+  JUST_START_TYPING: 'Commencer saisie',
+  CANCEL_TEXT_CHANGES: 'Annuler changement texte',
+  TOPIC_NAVIGATION: 'Navigation sur les noeuds',
+  ARROW_KEYS: 'Touches flèches',
+  SELECT_MULTIPLE_NODES: 'Selection multiple de noeuds',
+  UNDO_EDITION: 'Annuler édition',
+  REDO_EDITION: 'Refaire édition',
+  SELECT_ALL_TOPIC: 'Sélection tous noeuds',
+  CHANGE_TEXT_BOLD: 'Caractères en gras',
+  SAVE_CHANGES: 'Enregistrer changements',
+  CHANGE_TEXT_ITALIC: 'Caractères en italique',
+  DESELECT_ALL_TOPIC: 'Deselection tous noeuds',
+  COLLAPSE_CHILDREN: 'Fermer enfants',
+  KEYBOARD_SHORTCUTS_MSG: 'Les raccourcis clavier vous font gagner du temps, en vous permettant de garder les mains sur le clavier sans utiliser la souris.',
+  COPY_AND_PASTE_TOPICS: 'Copier et coller les noeuds',
+  MULTIPLE_LINES: 'Ajouter plusieurs lignes de texte',
+
 };
 
 export default FR;

packages/mindplot/src/components/lang/pt_BR.js

@@ -48,6 +48,27 @@ const PT_BR = {
   RELATIONSHIP_COULD_NOT_BE_CREATED: 'A relação não pode ser criada. Uma relação pai deve ser selecionada primeiro.',
   SELECTION_COPIED_TO_CLIPBOARD: 'Tópicos copiados ao clipboard.',
   ONLY_ONE_TOPIC_MUST_BE_SELECTED_COLLAPSE: 'Tópicos filhos não podem ser colapsados. Só um tópico deve ser selecionado.',
+  ACTION: 'Ação',
+  CREATE_SIBLING_TOPIC: 'Criar tópico tronco',
+  CREATE_CHILD_TOPIC: 'Criar Tópico Filho',
+  DELETE_TOPIC: 'Deletar Tópico',
+  EDIT_TOPIC_TEXT: 'Editar Texto do Tópico',
+  JUST_START_TYPING: ' Comece apenas digitando',
+  CANCEL_TEXT_CHANGES: 'Cancelar Alterações no Texto',
+  TOPIC_NAVIGATION: 'Navegação de Tópico',
+  ARROW_KEYS: 'Setas de Navegação',
+  SELECT_MULTIPLE_NODES: 'Selecionar Múltiplos nós',
+  UNDO_EDITION: 'Desfazer Edição',
+  REDO_EDITION: 'REfazer Edição',
+  SELECT_ALL_TOPIC: 'SElecionar todos os Tópicos',
+  CHANGE_TEXT_BOLD: 'Mudar a fonte para negrito',
+  SAVE_CHANGES: 'Salvar alterações',
+  CHANGE_TEXT_ITALIC: 'Mudar texto Itálico',
+  DESELECT_ALL_TOPIC: 'Deselecionar todos os tópicos',
+  COLLAPSE_CHILDREN: 'Encolher Sub-Tópico',
+  KEYBOARD_SHORTCUTS_MSG: 'Atalhos de teclado podem ajud-alo a poupar tempo evitando que você precise tirar as mãos do teclado para usar o mouse.',
+  COPY_AND_PASTE_TOPICS: 'Copiar e colar tópicos',
+  MULTIPLE_LINES: 'Adicionar Múltiplas Linhas de Texto',
 };
 
 export default PT_BR;

packages/mindplot/src/components/lang/zh_CN.js

@@ -48,6 +48,28 @@ const ZH_CN = {
   CENTRAL_TOPIC_CAN_NOT_BE_DELETED: '不能删除根节点。',
   RELATIONSHIP_COULD_NOT_BE_CREATED: '不能创建关系。 应先选择创建关系的一对上级节点。',
   SELECTION_COPIED_TO_CLIPBOARD: '节点已拷贝到粘贴板。',
+  ACTION: '处理',
+  CREATE_SIBLING_TOPIC: '建立平行节点',
+  CREATE_CHILD_TOPIC: '建立子节点',
+  DELETE_TOPIC: '删除节点',
+  EDIT_TOPIC_TEXT: '编辑节点文本',
+  JUST_START_TYPING: '开始敲入文字吧',
+  CANCEL_TEXT_CHANGES: '取消文字修改',
+  TOPIC_NAVIGATION: '节点导航',
+  ARROW_KEYS: '方向键',
+  SELECT_MULTIPLE_NODES: '选择多个节点',
+  UNDO_EDITION: '撤销',
+  REDO_EDITION: '重做',
+  SELECT_ALL_TOPIC: '选择所有节点',
+  CHANGE_TEXT_BOLD: '设字体为粗体',
+  SAVE_CHANGES: '保存修改',
+  CHANGE_TEXT_ITALIC: '设字体为斜体',
+  DESELECT_ALL_TOPIC: '不选任何节点',
+  COLLAPSE_CHILDREN: '折叠子节点',
+  KEYBOARD_SHORTCUTS_MSG: '快捷键可以帮助你节约时间，使你的手不必离开键盘而去使用鼠标。',
+  COPY_AND_PASTE_TOPICS: '拷贝和粘贴节点',
+  MULTIPLE_LINES: '添加多行长文本',
+
 };
 
 export default ZH_CN;

packages/mindplot/src/components/lang/zh_TW.js

@@ -48,6 +48,27 @@ const ZH_TW = {
   CENTRAL_TOPIC_CAN_NOT_BE_DELETED: '不能刪除根節點。',
   RELATIONSHIP_COULD_NOT_BE_CREATED: '不能創建關係。 應先選擇創建關係的一對上級節點。',
   SELECTION_COPIED_TO_CLIPBOARD: '節點已拷貝到粘貼板。',
+  ACTION: '處理',
+  CREATE_SIBLING_TOPIC: '建立平行節點',
+  CREATE_CHILD_TOPIC: '建立子節點',
+  DELETE_TOPIC: '刪除節點',
+  EDIT_TOPIC_TEXT: '編輯節點文本',
+  JUST_START_TYPING: '開始敲入文字吧',
+  CANCEL_TEXT_CHANGES: '取消文字修改',
+  TOPIC_NAVIGATION: '節點導航',
+  ARROW_KEYS: '方向鍵',
+  SELECT_MULTIPLE_NODES: '選擇多個節點',
+  UNDO_EDITION: '撤銷',
+  REDO_EDITION: '重做',
+  SELECT_ALL_TOPIC: '選擇所有節點',
+  CHANGE_TEXT_BOLD: '設字體為粗體',
+  SAVE_CHANGES: '保存修改',
+  CHANGE_TEXT_ITALIC: '設字體為斜體',
+  DESELECT_ALL_TOPIC: '不選任何節點',
+  COLLAPSE_CHILDREN: '折疊子節點',
+  KEYBOARD_SHORTCUTS_MSG: '快捷鍵可以幫助你節約時間，使你的手不必離開鍵盤而去使用滑鼠。',
+  COPY_AND_PASTE_TOPICS: '拷貝和粘貼節點',
+  MULTIPLE_LINES: '添加多行長文本',
 };
 
 export default ZH_TW;

packages/mindplot/src/components/widget/ColorPaletteHtml.js

@@ -6,11 +6,6 @@ export const css = `
     outline: none;
     padding: 4px 0;
     z-index: 20000;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
     user-select: none;
 }
 

packages/mindplot/src/components/widget/KeyboardShortcutDialog.js

@@ -0,0 +1,135 @@
+/*
+ *    Copyright [2021] [wisemapping]
+ *
+ *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+ *   It is basically the Apache License, Version 2.0 (the "License") plus the
+ *   "powered by wisemapping" text requirement on every single page;
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the license at
+ *
+ *       http://www.wisemapping.org/license
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
+import BootstrapDialog from '../libraries/bootstrap/BootstrapDialog';
+import { $msg } from '../Messages';
+
+class KeyboardShortcutDialog extends BootstrapDialog {
+  constructor() {
+    super($msg('SHORTCUTS'), {
+      closeButton: true,
+      acceptButton: false,
+    });
+    this.setContent(`<div id="keyboardTable">
+    <table>
+        <colgroup>
+            <col width="40%"/>
+            <col width="30%"/>
+            <col width="30%"/>
+        </colgroup>
+        <thead>
+        <tr>
+            <th>${$msg('ACTION')}</th>
+            <th>Windows - Linux</th>
+            <th>Mac OS X</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr>
+            <td>${$msg('SAVE_CHANGES')}</td>
+            <td>Ctrl + s</td>
+            <td>⌘ + s</td>
+        </tr>
+        <tr>
+            <td>${$msg('CREATE_SIBLING_TOPIC')}</td>
+            <td>Enter</td>
+            <td>Enter</td>
+        </tr>
+        <tr>
+            <td>${$msg('CREATE_CHILD_TOPIC')}</td>
+            <td>Insert / Tab</td>
+            <td>⌘ + Enter / Tab</td>
+        </tr>
+        <tr>
+            <td>${$msg('DELETE_TOPIC')}</td>
+            <td>Delete</td>
+            <td>Delete</td>
+        </tr>
+        <tr>
+            <td>${$msg('EDIT_TOPIC_TEXT')}</td>
+            <td>${$msg('JUST_START_TYPING')} | F2</td>
+            <td>${$msg('JUST_START_TYPING')} | F2</td>
+        </tr>
+        <tr>
+            <td>${$msg('MULTIPLE_LINES')}</td>
+            <td>Ctrl + Enter</td>
+            <td>⌘ + Enter</td>
+        </tr>
+        <tr>
+            <td>${$msg('COPY_AND_PASTE_TOPICS')}</td>
+            <td>Ctrl + c/Ctrl + v</td>
+            <td>⌘ + c/⌘ + v</td>
+        </tr>
+
+        <tr>
+            <td>${$msg('COLLAPSE_CHILDREN')}</td>
+            <td>Space bar</td>
+            <td>Space bar</td>
+        </tr>
+        <tr>
+            <td>${$msg('TOPIC_NAVIGATION')}</td>
+            <td>${$msg('ARROW_KEYS')}</td>
+            <td>${$msg('ARROW_KEYS')}</td>
+        </tr>
+        <tr>
+            <td>${$msg('SELECT_MULTIPLE_NODES')}</td>
+            <td>Ctrl + Mouse Click</td>
+            <td>Ctrl + Mouse Click</td>
+        </tr>
+        <tr>
+            <td>${$msg('UNDO_EDITION')}</td>
+            <td>Ctrl + z</td>
+            <td>⌘ + z</td>
+        </tr>
+        <tr>
+            <td>${$msg('REDO_EDITION')}</td>
+            <td>Ctrl + Shift + z</td>
+            <td>⌘ + Shift + z</td>
+        </tr>
+        <tr>
+            <td>${$msg('SELECT_ALL_TOPIC')}</td>
+            <td>Ctrl + a</td>
+            <td>⌘ + a</td>
+        </tr>
+        <tr>
+            <td>${$msg('CANCEL_TEXT_CHANGES')}</td>
+            <td>Esc</td>
+            <td>Esc</td>
+        </tr>
+        <tr>
+            <td>${$msg('DESELECT_ALL_TOPIC')}</td>
+            <td>Ctrl + Shift + a</td>
+            <td>⌘ + Shift + a</td>
+        </tr>
+        <tr>
+            <td>${$msg('CHANGE_TEXT_ITALIC')}</td>
+            <td>Ctrl + i</td>
+            <td>⌘ + i</td>
+        </tr>
+        <tr>
+            <td>${$msg('CHANGE_TEXT_BOLD')}</td>
+            <td>Ctrl + b</td>
+            <td>⌘ + b</td>
+        </tr>
+        </tbody>
+    </table>
+</div>`);
+    this.show();
+  }
+}
+
+export default KeyboardShortcutDialog;

packages/mindplot/src/components/widget/KeyboardShortcutTooltip.js

@@ -48,7 +48,6 @@ class KeyboardShortcutTooltip extends FloatingTip {
     result.css({
       padding: '3px 0px',
       width: '100%',
-      color: 'white',
     });
 
     const textContainer = $('<div></div>').text(text);

packages/mindplot/src/components/widget/Menu.js

@@ -26,6 +26,7 @@ import IconPanel from './IconPanel';
 import ColorPalettePanel from './ColorPalettePanel';
 import ToolbarItem from './ToolbarItem';
 import KeyboardShortcutTooltip from './KeyboardShortcutTooltip';
+import KeyboardShortcutDialog from './KeyboardShortcutDialog';
 
 class Menu extends IMenu {
   constructor(designer, containerId, mapId, readOnly, baseUrl = '') {
@@ -399,35 +400,18 @@ class Menu extends IMenu {
     const keyboardShortcut = $('#keyboardShortcuts');
     if (keyboardShortcut) {
       keyboardShortcut.bind('click', (event) => {
-        BootstrapDialogRequest.active = new BootstrapDialogRequest('c/keyboard', $msg('SHORTCUTS'), {
-          closeButton: true,
-          cancelButton: true,
-        });
+        BootstrapDialogRequest.active = new KeyboardShortcutDialog();
         designer.onObjectFocusEvent();
         event.preventDefault();
       });
     }
-
-    const videoElem = $('#tutorialVideo');
-    if (videoElem) {
-      const width = 900;
-      const height = 500;
-      const left = (window.screen.width / 2) - (width / 2);
-      const top = (window.screen.height / 2) - (height / 2);
-
-      videoElem.bind('click', (event) => {
-        window.open('https://www.youtube.com/tv?vq=medium#/watch?v=rKxZwNKs9cE', '_blank', `toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, copyhistory=no, width=${width}, height=${height}, top=${top}, left=${left}`);
-        event.preventDefault();
-      });
-    }
   }
 
   _registerEvents(designer) {
-    const me = this;
     // Register on close events ...
     this._toolbarElems.forEach((elem) => {
       elem.addEvent('show', () => {
-        me.clear();
+        this.clear();
       });
     });
 
@@ -435,7 +419,7 @@ class Menu extends IMenu {
       const topics = designer.getModel().filterSelectedTopics();
       const rels = designer.getModel().filterSelectedRelationships();
 
-      me._toolbarElems.forEach((button) => {
+      this._toolbarElems.forEach((button) => {
         const isTopicAction = button.isTopicAction();
         const isRelAction = button.isRelAction();
 
@@ -453,7 +437,7 @@ class Menu extends IMenu {
       const topics = designer.getModel().filterSelectedTopics();
       const rels = designer.getModel().filterSelectedRelationships();
 
-      me._toolbarElems.forEach((button) => {
+      this._toolbarElems.forEach((button) => {
         const isTopicAction = button.isTopicAction();
         const isRelAction = button.isRelAction();
 

packages/mindplot/src/components/widget/ToolbarNotifier.js

@@ -35,7 +35,6 @@ class ToolbarNotifier {
       this.container.data('transitioning', true);
       this.container.text(msg);
       this.container.css({
-        top: '5px',
         left: ($(window).width() - this.container.width()) / 2 - 9,
       });
       this.container.show().fadeOut(5000);

packages/mindplot/src/components/widget/ToolbarPaneItem.js

@@ -50,7 +50,7 @@ class ToolbarPaneItem extends ToolbarItem {
       className: 'toolbarPaneTip',
       trigger: 'manual',
       template:
-        '<div class="popover popoverGray" role="tooltip"><div class="arrow arrowGray"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
+        '<div class="popover" role="tooltip"><div class="arrow arrowGray"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
     });
 
     this._tip.addEvent('hide', () => {

packages/mindplot/test/playground/map-render/css/editor.less

@@ -14,17 +14,21 @@ body {
     -ms-user-select: none;
     user-select: none;
     overflow: hidden;
-    position: fixed
 }
 
 div#mindplot {
     position: relative;
+    top: @header-toolbar-height;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border: 0;
     overflow: hidden;
+    opacity: 1;
+    background-color: #f2f2f2;
+    background-image:  linear-gradient(#ebe9e7 1px, transparent 1px), linear-gradient(to right, #ebe9e7 1px, #f2f2f2 1px);
+    background-size: 50px 50px;
 }
 
 div#small_error_icon {
@@ -81,15 +85,6 @@ div.modalDialog {
     border: 1px solid #999;
     padding: 10px;
     overflow: auto;
-
-    /* IE6-7 */
-    -webkit-border-radius: 6px;
-    -moz-border-radius: 6px;
-    border-radius: 6px;
-    -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-    -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-
     -webkit-background-clip: padding-box;
     -moz-background-clip: padding-box;
     background-clip: padding-box;
@@ -125,16 +120,6 @@ div.shareModalDialog {
     width: 550px;
 }
 
-#tutorialVideo {
-    background: url(../images/help.png) no-repeat left center;
-    padding-left: 19px;
-}
-
-#keyboardShortcuts {
-    background: url(../images/help.png) no-repeat left center;
-    padding-left: 19px;
-}
-
 .panelIcon {
     width: 20px;
     height: 20px;
@@ -147,21 +132,75 @@ div.shareModalDialog {
     background-color: #efefef;
 }
 
-.popoverBlack {
-    background: 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;
+.popover {
     max-width: none;
 }
 
-.popoverGray.bottom .arrow:after {
-    border-bottom-color: #e4e2d2;
+#floating-panel {
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    bottom: 20px;
+    right: 20px;
+}
+
+div#bottom-logo {
+    position: fixed;
+    left: 20px;
+    bottom: 10px;
+    background: url(../images/logo-text-black.svg) no-repeat;
+    width: 90px;
+    height: 40px;
+}
+
+#zoom-button {
+    width: 40px;
+    border: 0;
+}
+
+#zoom-plus,
+#zoom-minus {
+    height: 40px;
+    width: 40px;
+    background-repeat: no-repeat;
+    background-size: 40px 40px;
+    background-position: center;
+    cursor: pointer;
+    background-color: #FFF;
+}
+
+#zoom-plus {
+    border-radius: 8px 8px 0 0;
+}
+
+#zoom-minus {
+    border-radius: 0 0 8px 8px;
+}
+
+div#shotcuts > img{
+    margin: 20px 0;
+    width: 40px;
+    height: 40px;
+}
+
+#keyboardTable {
+    font-family: Arial, verdana, serif;
+    font-size: 13px;
+    width: 100%;
+}
+
+#keyboardTable td {
+    padding: 3px;
+    white-space: nowrap;
+}
+
+#keyboardTable th {
+    padding: 5px;
+    white-space: nowrap;
+}
+
+#keyboardTable th {
+    background-color: #000000;
+    color: #ffffff;
 }

packages/mindplot/test/playground/map-render/css/embedded.less

@@ -28,17 +28,6 @@ div#footer {
     left: 0;
 }
 
-div#footerLogo {
-    width: 114px;
-    height: 56px;
-    position: absolute;
-    display: list-item;
-    list-style-image: url(../images/logo-xsmall.png);
-    list-style-position: inside;
-    right: 10px;
-    top: -30px;
-}
-
 div#zoomIn {
     background: url(../images/zoom-in.png) no-repeat left top;
     margin-top: 10px;

packages/mindplot/test/playground/map-render/css/header.less

@@ -1,5 +1,5 @@
-@header-height : 75px;
-@header-toolbar-height : 35px;
+@header-height : 0px;
+@header-toolbar-height : 50px;
 @header-info-height : @header-height - @header-toolbar-height;
 
 div#header {
@@ -11,29 +11,6 @@ div#header {
     top: 0;
 }
 
-div#headerLogo {
-    background: url(../images/logo-small.png) no-repeat center top;
-    height: 40px;
-    width: 80px;
-    float: left;
-    padding-left: 20px;
-}
-
-div#headerInfo {
-    width: 100%;
-    height: @header-info-height;
-    color: white;
-    padding: 0px 0px
-}
-
-div#headerActions {
-    text-align: right;
-    margin-top: 13px;
-    padding-right: 10px;
-    color: white;
-    float: right;
-}
-
 div#headerActions span {
     border-bottom: 3px solid rgb(247, 201, 49);
 }
@@ -43,78 +20,62 @@ div#headerActions a {
     text-decoration: none;
 }
 
-div#headerMapTitle {
-    min-width: 200px;
-    height: @header-info-height - 13;
-    text-align: left;
-    padding-top: 13px;
-    padding-left: 50px;
-    color: white;
-    float: left;
-    font-style: italic;
-}
-
-div#headerMapTitle span {
-    padding: 4px 50px;
-    border: 1px solid rgb(90, 90, 90);
-    background-color: rgb(45, 45, 45);
-    -moz-border-radius: 3px;
-    -webkit-border-radius: 3px;
-    border-radius: 3px;
-    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
-    white-space: nowrap;
-}
-
 div#headerNotifier {
     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;
+    position: fixed;
     padding: 5px 9px;
     color: back;
     white-space: nowrap;
     margin-top: 5px;
-    /*margin-top:-34px;*/
     display: none;
-    /*right: 5px;*/
+    bottom: 10px;
+}
+
+div#toolbarRight {
+    float: right;
+    white-space: nowrap;
+    vertical-align: middle;
+    justify-content: center;
+    margin: 6px 10px;
+    height: 100%;
+}
+
+#account {
+    float: right;
+    display: inline;
+}
+
+#account >img {
+    width: 36x;
+    height: 36px;
+}
+
+#share {
+    margin: 0 30px;
+}
+
+.actionButton {
+    float: right;
+    cursor: pointer;
+    margin: 0px 10px;
+    font-family: Arial, Helvetica, sans-serif;
+    user-select: none;
+    vertical-align: middle;
+    justify-content: center;
+    padding: 10px 25px;
+    font-size: 15px;
+    min-width: 64px;
+    box-sizing: border-box;
+    font-weight: 600;
+    border-radius: 9px;
+    color: white;    
+    background-color: #ffa800;
+}
+
+.actionButton:hover {
+    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
 @import "toolbar.less";
-
-div#embFooter {
-    position: absolute;
-    height: 35px;
-    width: 100%;
-    bottom: 0;
-    left: 0;
-    border-top: 1px solid black;
-    background: #E5E5E5;
-    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;
-}

packages/mindplot/test/playground/map-render/css/toolbar.less

@@ -1,16 +1,36 @@
 div#toolbar {
     width: 100%;
-    height: @header-toolbar-height;
-    background-color: rgb(229, 227, 209);
-    border-bottom: 3px double rgb(190, 190, 190);
-    border-top: 1px solid rgb(190, 190, 190);
-    padding: 0px 15px;
+    height: 50px;
+    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
+    background-color: #fff;
+    // TODO: make toolbar responsive
+    min-width: 900px;
+    overflow: hidden;
 }
 
 div#toolbar .buttonContainer {
     height: @header-toolbar-height;
+    padding-top: 8px;
+    padding-right: 10px;
+    padding-left: 10px;
     float: left;
-    margin-left: 5px;
+    border-left: 1px solid lightgray;
+}
+
+div#mapName >span {
+    border-radius: 4px;
+    float: left;
+    padding: 8px;
+    min-width: 30px;
+    font-weight: bold;
+}
+
+div#back {
+    background: url(../images/back-icon.svg) no-repeat center center;
+    height: 40px;
+    width: 80px;
+    float: left;
+    margin: 6px 0px;
 }
 
 /******************************************************************************************/
@@ -35,17 +55,17 @@ div#toolbar .buttonOn:hover {
 div#toolbar .buttonOn:hover {
     cursor: pointer;
     opacity: 1;
-    background: url(../images/btn-bg-hover.png) no-repeat center top;
+    // background: url(../images/btn-bg-hover.png) no-repeat center top;
 }
 
 div#toolbar .buttonOn {
     opacity: 0.8;
-    background: url(../images/btn-bg-normal.png) no-repeat center top;
+    // background: url(../images/btn-bg-normal.png) no-repeat center top;
 }
 
 div#toolbar .buttonOff {
     opacity: 0.4;
-    background: url(../images/btn-bg-normal.png) no-repeat center top;
+    // background: url(../images/btn-bg-normal.png) no-repeat center top;
 }
 
 div#exportAnchor {
@@ -73,24 +93,24 @@ div#toolbar .buttonExtOn:hover {
 
 div#toolbar .buttonExtOn:hover {
     opacity: 1;
-    background: url(../images/btne-bg-hover.png) no-repeat center top;
+    // background: url(../images/btne-bg-hover.png) no-repeat center top;
 
 }
 
 div#toolbar .buttonExtActive {
     opacity: 1;
-    background: url(../images/btne-bg-selected.png) no-repeat center top;
-
+    // background: url(../images/btne-bg-selected.png) no-repeat center top;
 }
 
 div#toolbar .buttonExtOn {
     opacity: 0.8;
-    background: url(../images/btne-bg-normal.png) no-repeat center top;
+    cursor: pointer
+    // background: url(../images/btne-bg-normal.png) no-repeat center top;
 }
 
 div#toolbar .buttonExtOff {
     opacity: 0.4;
-    background: url(../images/btne-bg-normal.png) no-repeat center top;
+    // background: url(../images/btne-bg-normal.png) no-repeat center top;
 }
 
 div#exportAnchor {

packages/mindplot/test/playground/map-render/css/viewmode.less

@@ -23,4 +23,8 @@ div#footer-desc {
 div#footer-logo {
     float: left;
     height: 100px;
+}
+
+#floating-panel {
+    bottom: 80px;
 }

packages/mindplot/test/playground/map-render/html/editor.html

@@ -11,12 +11,8 @@
 
 <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">
+            <a href="/c/maps/"><div id="back"></div></a>
             <div id="editTab" class="tabContent">
                 <div id="persist" class="buttonContainer">
                     <div id="save" class="buttonOn">
@@ -25,9 +21,6 @@
                     <div id="discard" class="buttonOn">
                         <img src="images/discard.svg" />
                     </div>
-                    <div id="export" class="buttonOn">
-                        <img src="images/export.svg" />
-                    </div>
                 </div>
                 <div id="edit" class="buttonContainer">
                     <div id="undoEdition" class="buttonOn">
@@ -37,18 +30,7 @@
                         <img src="images/redo.svg"/>
                     </div>
                 </div>
-                <div id="zoom" class="buttonContainer">
-                    <div id="zoomOut" class="buttonOn">
-                        <img src="images/zoom-out.svg"/>
-                    </div>
-                    <div id="zoomIn" class="buttonOn">
-                        <img src="images/zoom-in.svg"/>
-                    </div>
-                </div>
                 <div id="node" class="buttonContainer">
-                    <div id="topicShape" class="buttonExtOn">
-                        <img src="images/topic-shape.svg"/>
-                    </div>
                     <div id="addTopic" class="buttonOn">
                         <img src="images/topic-add.svg"/>
                     </div>
@@ -64,6 +46,11 @@
                     <div id="topicIcon" class="buttonExtOn">
                         <img src="images/topic-icon.svg"/>
                     </div>
+                    <div id="topicShape" class="buttonExtOn">
+                        <img src="images/topic-shape.svg"/>
+                    </div>
+                </div>
+                <div id="node" class="buttonContainer">
                     <div id="topicNote" class="buttonOn" >
                         <img src="images/topic-note.svg"/>
                     </div>
@@ -91,15 +78,45 @@
                         <img src="images/font-color.svg"/>
                     </div>
                 </div>
+                <div id="font" class="buttonContainer"></div>
+            </div>
+            <div id="toolbarRight">
+                <div id="account">
+                    <img src="images/account.svg"/>
+                </div>
+                <div id="share" class="actionButton">Share</div>
+                <div id="export" class="buttonOn">
+                    <img src="images/export.svg" />
+                </div>
+                <div id="print" class="buttonOn">
+                    <img src="images/print.svg" />
+                </div>
+                <div id="history" class="buttonOn">
+                    <img src="images/history.svg" />
+                </div>
             </div>
-        </div>
-        <div id="headerNotifier"></div>
-        <div id="footer">
-            <div id="footerLogo"></div>
         </div>
     </div>
 
     <div id="mindplot" onselectstart="return false;"></div>
+  
+    <!-- Side Actions -->
+    <div id="floating-panel">
+        <div id="keyboardShortcuts" class="buttonExtOn">
+            <img src="images/keyboard.svg"/>
+        </div>
+        <div id="zoom-button">
+            <button id="zoom-plus">
+                <img src="images/add.svg" />
+            </button>
+            <button id="zoom-minus">
+                <img src="images/minus.svg" />
+            </button>
+        </div>
+    </div>
+    <div id="bottom-logo"></div>
+    <div id="headerNotifier"></div>
+
 </body>
 
 </html>

packages/mindplot/test/playground/map-render/html/embedded.html

@@ -94,7 +94,6 @@
                 </div>
             </div>
         </div>
-        <div id="headerNotifier"></div>
     </div>
 
     <div id="mindplot" onselectstart="return false;"></div>

packages/mindplot/test/playground/map-render/html/viewmode.html

@@ -12,7 +12,18 @@
 <body>
     <div id="mindplot" onselectstart="return false;"></div>
 
-
+    <div id="floating-panel">
+        <div id="zoom-button">
+            <button id="zoom-plus">
+                <img src="images/add-icon.svg" />
+            </button>
+            <button id="zoom-minus">
+                <img src="images/minus-icon.svg" />
+            </button>
+        </div>
+        <div id="bottom-logo"></div>
+    </div>
+    
     <div id="footer">
         <div id="footer-logo"><img src="../images/logo-small.svg" /></div>
         <div id="footer-desc">

packages/mindplot/test/playground/map-render/images/account.svg

@@ -0,0 +1,3 @@
+<svg  xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" style="color: black;">
+    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"></path>
+</svg>

packages/mindplot/test/playground/map-render/images/add.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>

packages/mindplot/test/playground/map-render/images/back-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M11.67 3.87L9.9 2.1 0 12l9.9 9.9 1.77-1.77L3.54 12z"/></svg>

packages/mindplot/test/playground/map-render/images/history.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"/></svg>

packages/mindplot/test/playground/map-render/images/keyboard.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M20 5H4c-1.1 0-1.99.9-1.99 2L2 17c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm-9 3h2v2h-2V8zm0 3h2v2h-2v-2zM8 8h2v2H8V8zm0 3h2v2H8v-2zm-1 2H5v-2h2v2zm0-3H5V8h2v2zm9 7H8v-2h8v2zm0-4h-2v-2h2v2zm0-3h-2V8h2v2zm3 3h-2v-2h2v2zm0-3h-2V8h2v2z"/><path d="M0 0h24v24H0zm0 0h24v24H0z" fill="none"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="36" viewBox="0 0 24 24" width="36"><path d="M20 5H4c-1.1 0-1.99.9-1.99 2L2 17c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm-9 3h2v2h-2V8zm0 3h2v2h-2v-2zM8 8h2v2H8V8zm0 3h2v2H8v-2zm-1 2H5v-2h2v2zm0-3H5V8h2v2zm9 7H8v-2h8v2zm0-4h-2v-2h2v2zm0-3h-2V8h2v2zm3 3h-2v-2h2v2zm0-3h-2V8h2v2z"/><path d="M0 0h24v24H0zm0 0h24v24H0z" fill="none"/></svg>

packages/mindplot/test/playground/map-render/images/minus.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 13H5v-2h14v2z"/></svg>

packages/mindplot/test/playground/map-render/images/print.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"/></svg>

packages/mindplot/test/playground/map-render/images/zoom-in.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/><path d="M12 10h-2v2H9v-2H7V9h2V7h1v2h2v1z"/></svg>

packages/mindplot/test/playground/map-render/images/zoom-out.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zM7 9h5v1H7z"/></svg>

packages/mindplot/test/playground/map-render/images/zoom_in.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/><path d="M12 10h-2v2H9v-2H7V9h2V7h1v2h2v1z"/></svg>

packages/mindplot/test/playground/map-render/images/zoom_out.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zM7 9h5v1H7z"/></svg>

packages/mindplot/test/playground/map-render/js/editor.js

@@ -15,6 +15,20 @@ designer.addEvent('loadSuccess', () => {
   document.getElementById('mindplot').classList.add('ready');
 });
 
+const zoomInButton = document.getElementById('zoom-plus');
+const zoomOutButton = document.getElementById('zoom-minus');
+
+if (zoomInButton) {
+  zoomInButton.addEventListener('click', () => {
+    designer.zoomIn();
+  });
+}
+if (zoomOutButton) {
+  zoomOutButton.addEventListener('click', () => {
+    designer.zoomOut();
+  });
+}
+
 // Load map from XML file persisted on disk...
 const mapId = 'welcome';
 const persistence = PersistenceManager.getInstance();

packages/mindplot/test/playground/map-render/js/viewmode.js

@@ -14,6 +14,20 @@ designer.addEvent('loadSuccess', () => {
   document.getElementById('mindplot').classList.add('ready');
 });
 
+const zoomInButton = document.getElementById('zoom-plus');
+const zoomOutButton = document.getElementById('zoom-minus');
+
+if (zoomInButton) {
+  zoomInButton.addEventListener('click', () => {
+    designer.zoomIn();
+  });
+}
+if (zoomOutButton) {
+  zoomOutButton.addEventListener('click', () => {
+    designer.zoomOut();
+  });
+}
+
 // Load map from XML file persisted on disk...
 const persistence = PersistenceManager.getInstance();
 const mindmap = persistence.load(mapId);