Zoom WIP

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

@@ -163,4 +163,35 @@ div.shareModalDialog {
 
 .popoverGray.bottom .arrow:after {
     border-bottom-color: #e4e2d2;
+}
+
+#zoom-button {
+    height: 100px;
+    width: 50px;
+    border: 0;
+    position: absolute;
+    bottom: 100px;
+    right:10px;
+}
+
+#zoom-plus,
+#zoom-minus {
+    height: 50px;
+    width: 50px;
+    background-repeat: no-repeat;
+    background-size: 40px 40px;
+    background-position: center;
+    cursor: pointer;
+    background-color: lightgray;
+    z-index: 1000;
+}
+
+#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')
 }

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

@@ -46,14 +46,6 @@
                         <img src="images/redo.svg"/>
                     </div>
                 </div>
-                <div id="zoom" class="buttonContainer">
-                    <div id="zoomOut" class="buttonOn">
-                        <img src="images/zoom-out.svg"/>
-                    </div>
-                    <div id="zoomIn" class="buttonOn">
-                        <img src="images/zoom-in.svg"/>
-                    </div>
-                </div>
                 <div id="node" class="buttonContainer">
                     <div id="topicShape" class="buttonExtOn">
                         <img src="images/topic-shape.svg"/>
@@ -103,9 +95,10 @@
             </div>
         </div>
         <div id="headerNotifier"></div>
-        <div id="footer">
-            <div id="footerLogo"></div>
-        </div>
+    </div>
+    <div id="zoom-button">
+        <input type="button" id="zoom-plus"></input>
+        <input type="button" id="zoom-minus"></input>
     </div>
 
     <div id="mindplot" onselectstart="return false;"></div>

packages/mindplot/test/playground/map-render/images/add-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>

packages/mindplot/test/playground/map-render/images/minus-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 13H5v-2h14v2z"/></svg>