ENH: Adding panzoom as feature request from issue plotly#83

Author: Melchior du Lac

Project.toml

@@ -9,4 +9,4 @@ Dash = "1b08a953-4be3-4667-9a23-3db579824955"
 
 [compat]
 julia = "1.2"
-Dash = "0.1.3"
+Dash = "0.1.3, 1.0"

R/cytoCytoscape.R

@@ -1,5 +1,6 @@
 # AUTO GENERATED FILE - DO NOT EDIT
 
+#' @export
 cytoCytoscape <- function(id=NULL, autoRefreshLayout=NULL, autolock=NULL, autoungrabify=NULL, autounselectify=NULL, boxSelectionEnabled=NULL, className=NULL, elements=NULL, generateImage=NULL, imageData=NULL, layout=NULL, maxZoom=NULL, minZoom=NULL, mouseoverEdgeData=NULL, mouseoverNodeData=NULL, pan=NULL, panningEnabled=NULL, responsive=NULL, selectedEdgeData=NULL, selectedNodeData=NULL, style=NULL, stylesheet=NULL, tapEdge=NULL, tapEdgeData=NULL, tapNode=NULL, tapNodeData=NULL, userPanningEnabled=NULL, userZoomingEnabled=NULL, zoom=NULL, zoomingEnabled=NULL) {
 
     props <- list(id=id, autoRefreshLayout=autoRefreshLayout, autolock=autolock, autoungrabify=autoungrabify, autounselectify=autounselectify, boxSelectionEnabled=boxSelectionEnabled, className=className, elements=elements, generateImage=generateImage, imageData=imageData, layout=layout, maxZoom=maxZoom, minZoom=minZoom, mouseoverEdgeData=mouseoverEdgeData, mouseoverNodeData=mouseoverNodeData, pan=pan, panningEnabled=panningEnabled, responsive=responsive, selectedEdgeData=selectedEdgeData, selectedNodeData=selectedNodeData, style=style, stylesheet=stylesheet, tapEdge=tapEdge, tapEdgeData=tapEdgeData, tapNode=tapNode, tapNodeData=tapNodeData, userPanningEnabled=userPanningEnabled, userZoomingEnabled=userZoomingEnabled, zoom=zoom, zoomingEnabled=zoomingEnabled)

README.md

@@ -76,6 +76,18 @@ app.layout = html.Div([
 
 Calling `cyto.load_extra_layouts()` also enables generating SVG images.
 
+### Panzoom
+
+This version contains the [panzoom](https://github.com/cytoscape/cytoscape.js-panzoom) extension to the dash cytoscape app. Note that you still need to add "Font Awesome" to your app's `external_stylesheets`. For example:
+
+```
+    {
+        'href': 'https://use.fontawesome.com/releases/v5.8.1/css/all.css',
+        'rel': 'stylesheet',
+        'integrity': 'sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf',
+        'crossorigin': 'anonymous'
+    },
+```
 
 ## Getting Started in R
 

dash_cytoscape/dash_cytoscape.dev.js

@@ -37,6 +37,7 @@
     "cytoscape-klay": "^3.1.2",
     "cytoscape-spread": "^3.0.0",
     "cytoscape-svg": "0.2.0",
+    "cytoscape-panzoom": "^2.5.3",
     "lodash": "^4.17.11",
     "ramda": "^0.25.0",
     "react": "^16.14.0",

dash_cytoscape/dash_cytoscape.min.js

@@ -37,6 +37,7 @@
     "cytoscape-klay": "^3.1.2",
     "cytoscape-spread": "^3.0.0",
     "cytoscape-svg": "0.2.0",
+    "cytoscape-panzoom": "^2.5.3",
     "lodash": "^4.17.11",
     "ramda": "^0.25.0",
     "react": "^16.14.0",

dash_cytoscape/dash_cytoscape_extra.dev.js

@@ -6,9 +6,15 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import CytoscapeComponent from 'react-cytoscapejs';
 import _ from 'lodash';
+import CytoscapeJS from 'cytoscape';
+import panzoom from 'cytoscape-panzoom';
+import "cytoscape-panzoom/cytoscape.js-panzoom.css";
+
+CytoscapeJS.use(panzoom)
 
 import CyResponsive from '../cyResponsive.js';
 
+
 /**
 A Component Library for Dash aimed at facilitating network visualization in
 Python, wrapped around [Cytoscape.js](http://js.cytoscape.org/).
@@ -20,7 +26,7 @@ class Cytoscape extends Component {
         this.handleCy = this.handleCy.bind(this);
         this._handleCyCalled = false;
         this.handleImageGeneration = this.handleImageGeneration.bind(this);
-        this.cyResponsiveClass = false;
+        this.cyResponsiveClass = false;	
     }
 
     generateNode(event) {
@@ -150,6 +156,7 @@ class Cytoscape extends Component {
         return edgeObject;
     }
 
+
     handleCy(cy) {
         // If the cy pointer has not been modified, and handleCy has already
         // been called before, than we don't run this function.
@@ -160,6 +167,7 @@ class Cytoscape extends Component {
         window.cy = cy;
         this._handleCyCalled = true;
 
+
         // ///////////////////////////////////// CONSTANTS /////////////////////////////////////////
         const SELECT_THRESHOLD = 100;
 
@@ -279,6 +287,36 @@ class Cytoscape extends Component {
 
         this.cyResponsiveClass = new CyResponsive(cy);
         this.cyResponsiveClass.toggle(this.props.responsive);
+
+	// the default values of each option are outlined below:
+	var defaultZoomControls = {
+	zoomFactor: 0.05, // zoom factor per zoom tick
+	zoomDelay: 45, // how many ms between zoom ticks
+	minZoom: 0.1, // min zoom level
+	maxZoom: 10, // max zoom level
+	fitPadding: 50, // padding when fitting
+	panSpeed: 10, // how many ms in between pan ticks
+	panDistance: 10, // max pan distance per tick
+	panDragAreaSize: 75, // the length of the pan drag box in which the vector for panning is calculated (bigger = finer control of pan speed and direction)
+	panMinPercentSpeed: 0.25, // the slowest speed we can pan by (as a percent of panSpeed)
+	panInactiveArea: 8, // radius of inactive area in pan drag box
+	panIndicatorMinOpacity: 0.5, // min opacity of pan indicator (the draggable nib); scales from this to 1.0
+	zoomOnly: false, // a minimal version of the ui only with zooming (useful on systems with bad mousewheel resolution)
+	fitSelector: undefined, // selector of elements to fit
+	animateOnFit: function(){ // whether to animate on fit
+	return false;
+	},
+	fitAnimationDuration: 1000, // duration of animation on fit
+
+	// icon class names
+	sliderHandleIcon: 'fa fa-minus',
+	zoomInIcon: 'fa fa-plus',
+	zoomOutIcon: 'fa fa-minus',
+	resetIcon: 'fa fa-expand'
+	};
+
+	// add the panzoom control
+	cy.panzoom(defaultZoomControls);
     }
 
     handleImageGeneration(imageType, imageOptions, actionsToPerform, fileName) {
@@ -451,6 +489,7 @@ class Cytoscape extends Component {
             this.cyResponsiveClass.toggle(responsive);
         }
 
+
         return (
             <CytoscapeComponent
                 id={id}