Zoom in, zoom out and reset view buttons add

Author: nikitaeverywhere

package.json

@@ -1,6 +1,6 @@
 {
   "name": "iknow-entity-browser",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "description": "Visualizer for iKnow entities",
   "main": "gulpfile.babel.js",
   "scripts": {

src/static/index.html

@@ -26,6 +26,29 @@
                 </div>
             </div>
         </div>
+        <div id="zoomInButton" class="ui icon-zoom-in hint">
+            <div class="right tooltip">
+                <div class="two-line label">
+                    <div>Zoom In</div>
+                    <div class="sub">Use mouse/gestures as well</div>
+                </div>
+            </div>
+        </div>
+        <div id="resetZoomButton" class="ui icon-search hint">
+            <div class="right tooltip">
+                <div class="label">
+                    Reset View
+                </div>
+            </div>
+        </div>
+        <div id="zoomOutButton" class="ui icon-zoom-out hint">
+            <div class="right tooltip">
+                <div class="two-line label">
+                    <div>Zoom Out</div>
+                    <div class="sub">Use mouse/gestures as well</div>
+                </div>
+            </div>
+        </div>
     </div>
     <svg id="graph">
         <defs>

src/static/js/controls.js

@@ -3,11 +3,14 @@
  */
 import { onSelectionUpdate, updateSelection } from "./selection";
 import { dropDescendants, dropNodes } from "./model";
-import { updateSelected } from "./graph"
+import { updateSelected, scaleBy, resetZoom } from "./graph"
 
 let dropChildrenButton = null,
     removeButton = null,
     resetSelectionButton = null,
+    zoomInButton = null,
+    resetViewButton = null,
+    zoomOutButton = null,
     selection = [];
 
 onSelectionUpdate((sel) => {
@@ -54,5 +57,11 @@ export function init () {
     removeButton.addEventListener("click", deleteSelection);
     resetSelectionButton = document.getElementById(`resetSelectionButton`);
     resetSelectionButton.addEventListener(`click`, resetSelection);
+    zoomInButton = document.getElementById(`zoomInButton`);
+    zoomInButton.addEventListener("click", () => scaleBy(1.5));
+    resetViewButton = document.getElementById(`resetZoomButton`);
+    resetViewButton.addEventListener("click", () => resetZoom());
+    zoomOutButton = document.getElementById(`zoomOutButton`);
+    zoomOutButton.addEventListener("click", () => scaleBy(0.75));
     updateButtons();
 }

src/static/js/graph/index.js

@@ -1,4 +1,4 @@
-import { onModelUpdate, unfold, dropNodes } from "../model";
+import { onModelUpdate, unfold, dropNodesm, uiState } from "../model";
 import { updateSelection, selectAll, deselectAll } from "../selection";
 
 let shiftKey, ctrlKey,
@@ -50,12 +50,29 @@ let svg = null,
         }),
     view = null;
 
-export function translateZoom (x = 0, y = 0) {
+export function translateBy (x = 0, y = 0) {
     svg.transition()
         .duration(300)
         .call(zoomer.translateBy, x, y);
 }
 
+export function scaleBy (delta = 1) {
+    svg.transition()
+        .duration(300)
+        .call(zoomer.scaleBy, delta);
+}
+
+export function resetZoom () {
+    svg.transition()
+        .duration(300)
+        .call(zoomer.transform, d3.zoomIdentity.translate(
+            uiState.tabularToggled
+                ? - document.getElementById("table").getBoundingClientRect().width / 2
+                : 0,
+            0)
+        );
+}
+
 export function updateSelected () {
     node.classed("selected", p => p.selected);
 }

src/static/js/tabular/index.js

@@ -5,7 +5,7 @@ import {
 } from "../selection";
 import { getOption } from "../settings/values";
 import { getObjProp } from "../utils";
-import { translateZoom } from "../graph";
+import { translateBy } from "../graph";
 
 let sorting = {
     properties: ["entities", "0", "frequency"],
@@ -148,7 +148,7 @@ export function init () {
             if (d.tabularToggled)
                 updateAll();
             let w = document.getElementById("table").getBoundingClientRect().width / 2;
-            translateZoom(d.tabularToggled ? -w : w);
+            translateBy(d.tabularToggled ? -w : w);
         });
 
     d3.select("#exportCSV").on("click", () => {

src/static/scss/hint.scss

@@ -26,8 +26,17 @@
             visibility: hidden;
             border-radius: 4px;
             opacity: 0;
+            top: 50%;
             @include transition(opacity .3s ease);
 
+            &.two-line {
+                top: 25%;
+            }
+
+            .sub {
+                font-size: 8pt;
+            }
+
             &:after {
                 content: '';
                 position: absolute;
@@ -48,7 +57,6 @@
             > .label {
                 visibility: visible;
                 right: 100%;
-                top: 50%;
                 margin-top: -15px;
                 margin-right: 15px;
                 z-index: 999;

src/static/scss/icons.scss

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 
-// change here: http://app.fontastic.me/#publish/font/S2ZmpBbsKYvHqsjEzTVzeP
+// change here: http://app.fontastic.me/#customize/S2ZmpBbsKYvHqsjEzTVzeP
 
 @font-face {
     font-family: "iknowentitybrowsericons";