vmario/wisemapping-frontend
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-frontend.git synced 2024-11-26 08:04:56 +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; -ms-user-select: none;
user-select: none; user-select: none;
overflow: hidden; overflow: hidden;
position: fixed
} }
div#mindplot { div#mindplot {
@ -142,48 +141,47 @@ div.shareModalDialog {
background-color: #efefef; 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 { .popover {
max-width: none; max-width: none;
} }
#zoom-button { #floating-panel {
height: 100px;
width: 50px;
border: 0;
position: absolute; position: absolute;
bottom: 100px; bottom: 0;
right:10px; 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-plus,
#zoom-minus { #zoom-minus {
height: 50px; height: 40px;
width: 50px; width: 40px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 40px 40px; background-size: 40px 40px;
background-position: center; background-position: center;
cursor: pointer; cursor: pointer;
background-color: lightgray; background-color: #FFF;
z-index: 1000;
} }
#zoom-plus { #zoom-plus {
border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0;
background-image: url('../images/add-icon.svg')
} }
#zoom-minus { #zoom-minus {
border-radius: 0 0 8px 8px; 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

@ -24,3 +24,7 @@ div#footer-logo {
float: left; float: left;
height: 100px; 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 id="headerNotifier"></div>
</div> </div>
<div id="mindplot" onselectstart="return false;"></div> <div id="mindplot" onselectstart="return false;"></div>
<div id="bottom-logo"></div> <div id="floating-panel">
<div id="zoom-button"> <div id="zoom-button">
<button id="zoom-plus"> <button id="zoom-plus">
<img src="images/add-icon.svg" /> <img src="images/add-icon.svg" />
</button> </button>
<button id="zoom-minus"> <button id="zoom-minus">
<img src="images/minus-icon.svg" /> <img src="images/minus-icon.svg" />
</button> </button>
</div>
<div id="bottom-logo"></div>
</div> </div>
</body> </body>

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

@ -12,6 +12,17 @@
<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>

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'); 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... // Load map from XML file persisted on disk...
const mapId = 'welcome'; const mapId = 'welcome';
const persistence = PersistenceManager.getInstance(); 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'); 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... // Load map from XML file persisted on disk...
const persistence = PersistenceManager.getInstance(); const persistence = PersistenceManager.getInstance();
const mindmap = persistence.load(mapId); const mindmap = persistence.load(mapId);