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

Feature wheel sensitivity

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/metadata.json

@@ -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"

demos/usage-wheel-sensitivity.py

@@ -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)

man/cytoCytoscape.Rd

@@ -21,7 +21,8 @@ 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)
+userZoomingEnabled=NULL, wheelSensitivity=NULL, zoom=NULL,
+zoomingEnabled=NULL)
 }
 
 \arguments{
@@ -269,6 +270,8 @@ pan the graph.}
 \item{userZoomingEnabled}{Logical. Whether user events (e.g. dragging the graph background) are allowed
 to pan the graph.}
 
+\item{wheelSensitivity}{Numeric. Changes the scroll wheel sensitivity when zooming.}
+
 \item{zoom}{Numeric. The initial zoom level of the graph. You can set `minZoom` and
 `maxZoom` to set restrictions on the zoom level.}
 

src/jl/cyto_cytoscape.jl

@@ -221,13 +221,14 @@ Those elements have the following types:
 pan the graph.
 - `userZoomingEnabled` (Bool; optional): Whether user events (e.g. dragging the graph background) are allowed
 to pan the graph.
+- `wheelSensitivity` (Real; optional): Changes the scroll wheel sensitivity when zooming.
 - `zoom` (Real; optional): The initial zoom level of the graph. You can set `minZoom` and
 `maxZoom` to set restrictions on the zoom level.
 - `zoomingEnabled` (Bool; optional): Whether zooming the graph is enabled (i.e., the zoom level of the graph
 is mutable overall).
 """
 function cyto_cytoscape(; kwargs...)
-        available_props = Symbol[: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]
+        available_props = Symbol[: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]
         wild_props = Symbol[]
         return Component("cyto_cytoscape", "Cytoscape", "dash_cytoscape", available_props, wild_props; kwargs...)
 end

src/lib/components/Cytoscape.react.js

@@ -654,6 +654,7 @@ class Cytoscape extends Component {
             maxZoom,
             zoomingEnabled,
             userZoomingEnabled,
+            wheelSensitivity,
             boxSelectionEnabled,
             autoungrabify,
             autolock,
@@ -701,6 +702,7 @@ class Cytoscape extends Component {
                 maxZoom={maxZoom}
                 zoomingEnabled={zoomingEnabled}
                 userZoomingEnabled={userZoomingEnabled}
+                wheelSensitivity={wheelSensitivity}
                 boxSelectionEnabled={boxSelectionEnabled}
                 autoungrabify={autoungrabify}
                 autolock={autolock}
@@ -996,6 +998,11 @@ Cytoscape.propTypes = {
      */
     userZoomingEnabled: PropTypes.bool,
 
+    /**
+     * Changes the scroll wheel sensitivity when zooming.
+     */
+    wheelSensitivity: PropTypes.number,
+
     /**
      * Whether box selection (i.e. drag a box overlay around, and release it
      * to select) is enabled. If enabled, the user must taphold to pan the graph.
@@ -1215,6 +1222,7 @@ Cytoscape.defaultProps = {
     userZoomingEnabled: true,
     panningEnabled: true,
     userPanningEnabled: true,
+    wheelSensitivity: 1,
     boxSelectionEnabled: false,
     autolock: false,
     autoungrabify: false,