Adjust top position

This commit is contained in:
Paulo Gustavo Veiga 2022-01-10 12:12:15 -08:00
parent b44af03e6d
commit 2f49a2b8a5
6 changed files with 30 additions and 40 deletions

View File

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

View File

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

View File

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

View File

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

View File

@ -22,11 +22,11 @@
<p>You will find here a set of examples that shows how you can use integrate WiseMapping Mindplot.</p> <p>You will find here a set of examples that shows how you can use integrate WiseMapping Mindplot.</p>
<div> <div>
<ul> <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> 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="/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="/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="/layout.html">Layout Renders:</a> Showcase the different supported layouts.</li>
</ul> </ul>
</div> </div>
</body> </body>

View File

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