Merge pull request #203 from plotly/feature-wheel-sensivity

Feature wheel sensitivity

Author: alexcjohnson

R/cytoCytoscape.R

@@ -1,17 +1,17 @@
 # AUTO GENERATED FILE - DO NOT EDIT
 
 #' @export
-cytoCytoscape <- function(id=NULL, autoRefreshLayout=NULL, autolock=NULL, autoungrabify=NULL, autounselectify=NULL, boxSelectionEnabled=NULL, className=NULL, clearOnUnhover=NULL, contextMenu=NULL, contextMenuData=NULL, elements=NULL, extent=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) {
+cytoCytoscape <- function(id=NULL, autoRefreshLayout=NULL, autolock=NULL, autoungrabify=NULL, autounselectify=NULL, boxSelectionEnabled=NULL, className=NULL, clearOnUnhover=NULL, contextMenu=NULL, contextMenuData=NULL, elements=NULL, extent=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, wheelSensitivity=NULL, zoom=NULL, zoomingEnabled=NULL) {
 
-    props <- list(id=id, autoRefreshLayout=autoRefreshLayout, autolock=autolock, autoungrabify=autoungrabify, autounselectify=autounselectify, boxSelectionEnabled=boxSelectionEnabled, className=className, clearOnUnhover=clearOnUnhover, contextMenu=contextMenu, contextMenuData=contextMenuData, elements=elements, extent=extent, 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)
+    props <- list(id=id, autoRefreshLayout=autoRefreshLayout, autolock=autolock, autoungrabify=autoungrabify, autounselectify=autounselectify, boxSelectionEnabled=boxSelectionEnabled, className=className, clearOnUnhover=clearOnUnhover, contextMenu=contextMenu, contextMenuData=contextMenuData, elements=elements, extent=extent, 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, wheelSensitivity=wheelSensitivity, zoom=zoom, zoomingEnabled=zoomingEnabled)
     if (length(props) > 0) {
         props <- props[!vapply(props, is.null, logical(1))]
     }
     component <- list(
         props = props,
         type = 'Cytoscape',
         namespace = 'dash_cytoscape',
-        propNames = c('id', 'autoRefreshLayout', 'autolock', 'autoungrabify', 'autounselectify', 'boxSelectionEnabled', 'className', 'clearOnUnhover', 'contextMenu', 'contextMenuData', 'elements', 'extent', 'generateImage', 'imageData', 'layout', 'maxZoom', 'minZoom', 'mouseoverEdgeData', 'mouseoverNodeData', 'pan', 'panningEnabled', 'responsive', 'selectedEdgeData', 'selectedNodeData', 'style', 'stylesheet', 'tapEdge', 'tapEdgeData', 'tapNode', 'tapNodeData', 'userPanningEnabled', 'userZoomingEnabled', 'zoom', 'zoomingEnabled'),
+        propNames = c('id', 'autoRefreshLayout', 'autolock', 'autoungrabify', 'autounselectify', 'boxSelectionEnabled', 'className', 'clearOnUnhover', 'contextMenu', 'contextMenuData', 'elements', 'extent', 'generateImage', 'imageData', 'layout', 'maxZoom', 'minZoom', 'mouseoverEdgeData', 'mouseoverNodeData', 'pan', 'panningEnabled', 'responsive', 'selectedEdgeData', 'selectedNodeData', 'style', 'stylesheet', 'tapEdge', 'tapEdgeData', 'tapNode', 'tapNodeData', 'userPanningEnabled', 'userZoomingEnabled', 'wheelSensitivity', 'zoom', 'zoomingEnabled'),
         package = 'dashCytoscape'
         )
 

dash_cytoscape/Cytoscape.py

@@ -498,6 +498,9 @@ class attribute).
         Whether user events (e.g. dragging the graph background) are
         allowed to pan the graph.
 
+    - wheelSensitivity (number; default 1):
+        Changes the scroll wheel sensitivity when zooming.
+
     - zoom (number; default 1):
         The initial zoom level of the graph. You can set `minZoom` and
         `maxZoom` to set restrictions on the zoom level.
@@ -530,6 +533,7 @@ def __init__(
         maxZoom=Component.UNDEFINED,
         zoomingEnabled=Component.UNDEFINED,
         userZoomingEnabled=Component.UNDEFINED,
+        wheelSensitivity=Component.UNDEFINED,
         boxSelectionEnabled=Component.UNDEFINED,
         autoungrabify=Component.UNDEFINED,
         autolock=Component.UNDEFINED,
@@ -583,6 +587,7 @@ def __init__(
             "tapNodeData",
             "userPanningEnabled",
             "userZoomingEnabled",
+            "wheelSensitivity",
             "zoom",
             "zoomingEnabled",
         ]
@@ -620,6 +625,7 @@ def __init__(
             "tapNodeData",
             "userPanningEnabled",
             "userZoomingEnabled",
+            "wheelSensitivity",
             "zoom",
             "zoomingEnabled",
         ]

dash_cytoscape/dash_cytoscape.dev.js

@@ -558,6 +558,17 @@
           "computed": false
         }
       },
+      "wheelSensitivity": {
+        "type": {
+          "name": "number"
+        },
+        "required": false,
+        "description": "Changes the scroll wheel sensitivity when zooming.",
+        "defaultValue": {
+          "value": "1",
+          "computed": false
+        }
+      },
       "boxSelectionEnabled": {
         "type": {
           "name": "bool"

dash_cytoscape/dash_cytoscape.min.js

@@ -0,0 +1,53 @@
+import dash
+from dash import html
+import dash_cytoscape as cyto
+
+app = dash.Dash(__name__)
+server = app.server
+
+elements = [
+    {"data": {"id": "Node 1", "label": "Node 1"}, "position": {"x": 0, "y": 0}},
+    {"data": {"id": "Node 2", "label": "Node 2"}, "position": {"x": 50, "y": 50}},
+    {"data": {"source": "Node 1", "target": "Node 2", "label": ""}},
+]
+
+
+app.layout = html.Div(
+    [
+        html.Div(
+            [
+                html.H1("Low wheel sensitivity (0.01)"),
+                cyto.Cytoscape(
+                    id="cytoscape-slow",
+                    elements=elements,
+                    wheelSensitivity=0.01,
+                ),
+            ]
+        ),
+        html.Div(
+            [
+                html.H1("Default wheel sensitivity (1)"),
+                cyto.Cytoscape(
+                    id="cytoscape-normal",
+                    elements=elements,
+                    wheelSensitivity=1,
+                ),
+            ]
+        ),
+        html.Div(
+            [
+                html.H1("High wheel sensitivity (100)"),
+                cyto.Cytoscape(
+                    id="cytoscape-fast",
+                    elements=elements,
+                    wheelSensitivity=100,
+                ),
+            ]
+        ),
+    ],
+    style={"display": "flex"},
+)
+
+
+if __name__ == "__main__":
+    app.run_server(debug=True)