From a4225832db9f73b9aca22a990a955f5ae1726bf8 Mon Sep 17 00:00:00 2001
From: Matias Arriola <matias.arriola@gmail.com>
Date: Thu, 6 Jan 2022 19:18:47 -0300
Subject: [PATCH] Add zoom buttons for viewmode and editor

---
 .../playground/map-render/css/editor.less     | 46 +++++++++----------
 .../playground/map-render/css/viewmode.less   |  4 ++
 .../playground/map-render/html/editor.html    | 18 ++++----
 .../playground/map-render/html/viewmode.html  | 13 +++++-
 .../test/playground/map-render/js/editor.js   | 14 ++++++
 .../test/playground/map-render/js/viewmode.js | 14 ++++++
 6 files changed, 76 insertions(+), 33 deletions(-)

diff --git a/packages/mindplot/test/playground/map-render/css/editor.less b/packages/mindplot/test/playground/map-render/css/editor.less
index 9c3cfca0..2fc251f2 100644
--- a/packages/mindplot/test/playground/map-render/css/editor.less
+++ b/packages/mindplot/test/playground/map-render/css/editor.less
@@ -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')
 }
\ No newline at end of file
diff --git a/packages/mindplot/test/playground/map-render/css/viewmode.less b/packages/mindplot/test/playground/map-render/css/viewmode.less
index dc7c7d33..3e1905a5 100644
--- a/packages/mindplot/test/playground/map-render/css/viewmode.less
+++ b/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;
 }
\ No newline at end of file
diff --git a/packages/mindplot/test/playground/map-render/html/editor.html b/packages/mindplot/test/playground/map-render/html/editor.html
index 24cb5e68..97fe14d2 100644
--- a/packages/mindplot/test/playground/map-render/html/editor.html
+++ b/packages/mindplot/test/playground/map-render/html/editor.html
@@ -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>
 
diff --git a/packages/mindplot/test/playground/map-render/html/viewmode.html b/packages/mindplot/test/playground/map-render/html/viewmode.html
index c9ca7192..a503db1f 100644
--- a/packages/mindplot/test/playground/map-render/html/viewmode.html
+++ b/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">
diff --git a/packages/mindplot/test/playground/map-render/js/editor.js b/packages/mindplot/test/playground/map-render/js/editor.js
index 25c286a2..6e8a8245 100644
--- a/packages/mindplot/test/playground/map-render/js/editor.js
+++ b/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();
diff --git a/packages/mindplot/test/playground/map-render/js/viewmode.js b/packages/mindplot/test/playground/map-render/js/viewmode.js
index 49afd168..1f6e8ea2 100644
--- a/packages/mindplot/test/playground/map-render/js/viewmode.js
+++ b/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);