vmario/wisemapping-frontend
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-frontend.git synced 2024-12-31 15:33:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add zoom buttons for viewmode and editor

Browse Source
This commit is contained in:
Matias Arriola 2022-01-06 19:18:47 -03:00
parent ff02978467
commit a4225832db
6 changed files with 76 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,7 +14,6 @@ body {
-ms-user-select: none;
user-select: none;
overflow: hidden;
position: fixed
}
div#mindplot {
@ -142,48 +141,47 @@ div.shareModalDialog {
background-color: #efefef;
}
// TODO: Review position.
div#bottom-logo {
position: absolute;
bottom: 220px;
right: 0;
background: url(../images/logo-text-black.svg) no-repeat;
width: 100px;
height: 40px;
z-index: 10000;
}
.popover {
max-width: none;
}
#zoom-button {
height: 100px;
width: 50px;
border: 0;
#floating-panel {
position: absolute;
bottom: 100px;
right:10px;
bottom: 0;
right: 0;
padding: 10px;
display: flex;
flex-direction: column;
align-items: flex-end;
}
#bottom-logo {
background: url(../images/logo-text-black.svg) no-repeat;
width: 100px;
height: 40px;
margin-top: 20px;
}
#zoom-button {
width: 40px;
border: 0;
}
#zoom-plus,
#zoom-minus {
height: 50px;
width: 50px;
height: 40px;
width: 40px;
background-repeat: no-repeat;
background-size: 40px 40px;
background-position: center;
cursor: pointer;
background-color: lightgray;
z-index: 1000;
background-color: #FFF;
}
#zoom-plus {
border-radius: 8px 8px 0 0;
background-image: url('../images/add-icon.svg')
}
#zoom-minus {
border-radius: 0 0 8px 8px;
background-image: url('../images/minus-icon.svg')
}

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

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

18
packages/mindplot/test/playground/map-render/html/editor.html
View File

@ -87,14 +87,16 @@
<div id="headerNotifier"></div>
</div>
<div id="mindplot" onselectstart="return false;"></div>
<div id="bottom-logo"></div>
<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 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>
</body>

13
packages/mindplot/test/playground/map-render/html/viewmode.html
View File

@ -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">

14
packages/mindplot/test/playground/map-render/js/editor.js
View File

@ -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();

14
packages/mindplot/test/playground/map-render/js/viewmode.js
View File

@ -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);