Adjust top position

packages/mindplot/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@wisemapping/mindplot",
-    "version": "0.4.13",
+    "version": "0.4.14",
     "description": "WiseMapping - Mindplot Canvas Library",
     "homepage": "http://www.wisemapping.org/",
     "main": "dist/main.js",

packages/mindplot/src/components/ScreenManager.ts

@@ -47,7 +47,7 @@ class ScreenManager {
   getVisibleBrowserSize():{width:number,height:number}{
     return {
       width: window.innerWidth,
-      height: window.innerHeight - 50 // Todo: Fix toolbar hardcode.
+      height: window.innerHeight - Number.parseInt(this._divContainer.css('top'), 10),
     }
   }
 

packages/mindplot/src/components/Workspace.ts

@@ -17,16 +17,17 @@
  */
 import { $assert, $defined } from '@wisemapping/core-js';
 import { Workspace as Workspace2D } from '@wisemapping/web2d';
+import { ElementClass as Element2D} from '@wisemapping/web2d';
 import ScreenManager from './ScreenManager';
 import { Size } from './Size';
 
 class Workspace {
-  _zoom: number;
-  _screenManager: ScreenManager;
-  _isReadOnly: boolean;
-  _containerSize: Size;
-  _workspace: Workspace2D;
-  _eventsEnabled: boolean;
+  private _zoom: number;
+  private _screenManager: ScreenManager;
+  private _isReadOnly: boolean;
+  private _containerSize: Size;
+  private _workspace: Workspace2D;
+  private _eventsEnabled: boolean;
   private _visibleAreaSize: Size;
 
   constructor(screenManager: ScreenManager, zoom: number, isReadOnly: boolean) {
@@ -70,7 +71,7 @@ class Workspace {
     return this._isReadOnly;
   }
 
-  private _createWorkspace() {
+  private _createWorkspace():Workspace2D {
     // Initialize workspace ...
     const browserVisibleSize = this._screenManager.getVisibleBrowserSize();
     const coordOriginX = -(browserVisibleSize.width / 2);
@@ -90,7 +91,7 @@ class Workspace {
     return new Workspace2D(workspaceProfile);
   }
 
-  append(shape) {
+  append(shape:Element2D):void {
     if ($defined(shape.addToWorkspace)) {
       shape.addToWorkspace(this);
     } else {
@@ -98,7 +99,7 @@ class Workspace {
     }
   }
 
-  removeChild(shape) {
+  removeChild(shape:Element2D):void {
     // Element is a node, not a web2d element?
     if ($defined(shape.removeFromWorkspace)) {
       shape.removeFromWorkspace(this);
@@ -107,17 +108,17 @@ class Workspace {
     }
   }
 
-  addEvent(type: string, listener) {
+  addEvent(type: string, listener):void {
     this._workspace.addEvent(type, listener);
   }
 
-  removeEvent(type: string, listener) {
+  removeEvent(type: string, listener):void {
     $assert(type, 'type can not be null');
     $assert(listener, 'listener can not be null');
     this._workspace.removeEvent(type, listener);
   }
 
-  getSize() {
+  getSize():Size {
     return this._workspace.getCoordSize();
   }
 

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

@@ -29,6 +29,7 @@ import KeyboardShortcutTooltip from './KeyboardShortcutTooltip';
 import KeyboardShortcutDialog from './KeyboardShortcutDialog';
 import AccountSettingsPanel from './AccountSettingsPanel';
 import Designer from '../Designer';
+import Topic from '../Topic';
 
 class Menu extends IMenu {
   constructor(designer: Designer, containerId: string, mapId: string, readOnly: boolean = false, baseUrl:string = '') {
@@ -360,7 +361,7 @@ class Menu extends IMenu {
     }
 
     const discardElem = $('#discard');
-    if (discardElem) {
+    if (discardElem.length!=0) {
       this._addButton('discard', false, false, () => {
         this.discardChanges(designer);
       });
@@ -368,7 +369,7 @@ class Menu extends IMenu {
     }
 
     const shareElem = $('#shareIt');
-    if (shareElem) {
+    if (shareElem.length!=0) {
       this._addButton('shareIt', false, false, () => {
         const dialog = new BootstrapDialogRequest(`c/maps/${mapId}/sharef`, $msg('COLLABORATE'), {
           closeButton: true,
@@ -380,7 +381,7 @@ class Menu extends IMenu {
     }
 
     const publishElem = $('#publishIt');
-    if (publishElem) {
+    if (publishElem.length!=0) {
       this._addButton('publishIt', false, false, () => {
         const dialog = new BootstrapDialogRequest(`c/maps/${mapId}/publishf`, $msg('PUBLISH'), {
           closeButton: true,
@@ -392,7 +393,7 @@ class Menu extends IMenu {
     }
 
     const historyElem = $('#history');
-    if (historyElem) {
+    if (historyElem.length!=0) {
       this._addButton('history', false, false, () => {
         const dialog = new BootstrapDialogRequest(`c/maps/${mapId}/historyf`, $msg('HISTORY'), {
           closeButton: true,
@@ -402,6 +403,7 @@ class Menu extends IMenu {
       });
       Menu._registerTooltip('history', $msg('HISTORY'));
     }
+
     // Keyboard Shortcuts Action ...
     const keyboardShortcut = $('#keyboardShortcuts');
     if (keyboardShortcut) {
@@ -425,7 +427,7 @@ class Menu extends IMenu {
 
     // Account dialog ...
     const accountSettings = $('#account');
-    if (accountSettings) {
+    if (accountSettings.length!=0) {
       accountSettings.bind('click', (event) => {
         event.preventDefault();
       });
@@ -436,7 +438,7 @@ class Menu extends IMenu {
     this._registerEvents(designer);
   }
 
-  _registerEvents(designer) {
+  private _registerEvents(designer:Designer) {
     // Register on close events ...
     this._toolbarElems.forEach((panel) => {
       panel.addEvent('show', () => {
@@ -483,14 +485,14 @@ class Menu extends IMenu {
     });
   }
 
-  _addButton(buttonId, topic, rel, fn) {
+  private _addButton(buttonId:string, isTopic:boolean, isRelationship:boolean, fn) {
     // Register Events ...
     let result = null;
     if ($(`#${buttonId}`)) {
       const button = new ToolbarItem(buttonId, ((event) => {
         fn(event);
         this.clear();
-      }), { topicAction: topic, relAction: rel });
+      }), { topicAction: isTopic, relAction: isRelationship });
 
       this._toolbarElems.push(button);
       result = button;

packages/mindplot/test/playground/index.html

@@ -22,11 +22,11 @@
     <p>You will find here a set of examples that shows how you can use integrate WiseMapping Mindplot.</p>
     <div>
         <ul>
-            <li><a href="viewmode.html">Mindmap Render:</a> Simple integration to load and render mindaps in read
+            <li><a href="/viewmode.html">Mindmap Render:</a> Simple integration to load and render mindaps in read
                 only mode</li>
-            <li><a href="editor.html">Mindmap Editor:</a> Example on how mindplot can be used for mindmap edition. Browser local storage is used for persistance.</li>
-            <li><a href="container.html">Embedded:</a> Example on how to embeded editor in a iframe.</li>
-            <li><a href="layout.html">Layout Renders:</a> Showcase the different supported layouts.</li>
+            <li><a href="/editor.html">Mindmap Editor:</a> Example on how mindplot can be used for mindmap edition. Browser local storage is used for persistance.</li>
+            <li><a href="/container.html">Embedded:</a> Example on how to embeded editor in a iframe.</li>
+            <li><a href="/layout.html">Layout Renders:</a> Showcase the different supported layouts.</li>
         </ul>
     </div>
 </body>

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

@@ -10,20 +10,7 @@
 </head>
 
 <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="mindplot" onselectstart="return false;"></div>    
     <div id="footer">
         <div id="footer-logo"><img src="../images/logo-small.svg" /></div>
         <div id="footer-desc">