disble mouse scroll

README.md

@@ -41,6 +41,7 @@ module system it is exported as `GraphQLVoyager` global variable.
 - `hideDocs` [`boolean`, default `false`] - hide the docs sidebar
 - `hideSettings` [`boolean`, default `false`] - hide settings panel
 - `hideVoyagerLogo` [`boolean`, default `true`] - hide voyager logo
+- `disableMouseWheelZoom` [`boolean`, default `false`] - disables scroll handler
 
 ## Using pre-bundled version
 

src/components/GraphViewport.tsx

@@ -19,6 +19,8 @@ interface GraphViewportProps {
 
   onSelectNode: (id: string | null) => void;
   onSelectEdge: (id: string) => void;
+
+  disableMouseWheelZoom?: boolean | null;
 }
 
 interface GraphViewportState {
@@ -106,6 +108,11 @@ export default class GraphViewport extends Component<
           this._containerRef.current!,
           onSelectNode,
           onSelectEdge,
+          {
+            mouseWheelZoomEnabled: this.props.disableMouseWheelZoom
+              ? false
+              : true,
+          },
         );
         this.setState({ svgViewport });
       })

src/components/Voyager.tsx

@@ -48,6 +48,7 @@ export interface VoyagerProps {
   hideDocs?: boolean;
   hideSettings?: boolean;
   hideVoyagerLogo?: boolean;
+  disableMouseWheelZoom?: boolean;
 
   children?: ReactNode;
 }
@@ -120,6 +121,7 @@ export default function Voyager(props: VoyagerProps) {
     hideSettings = false,
     // TODO: switch to false in the next major version
     hideVoyagerLogo = true,
+    disableMouseWheelZoom = false,
   } = props;
 
   const viewportRef = useRef<GraphViewport>(null);
@@ -223,6 +225,7 @@ export default function Voyager(props: VoyagerProps) {
           onSelectNode={handleSelectNode}
           onSelectEdge={handleSelectEdge}
           ref={viewportRef}
+          disableMouseWheelZoom={disableMouseWheelZoom}
         />
       </Box>
     );

src/graph/viewport.ts

@@ -41,6 +41,7 @@ export class Viewport {
     public container: HTMLElement,
     onSelectNode: (id: string | null) => void,
     onSelectEdge: (id: string) => void,
+    options: SvgPanZoom.Options = {},
   ) {
     this.onSelectNode = onSelectNode;
     this.onSelectEdge = onSelectEdge;
@@ -51,7 +52,7 @@ export class Viewport {
 
     // Allow the SVG dimensions to be computed
     // Quick fix for SVG manipulation issues.
-    setTimeout(() => this.enableZoom(), 0);
+    setTimeout(() => this.enableZoom(options), 0);
     this.bindClick();
     this.bindHover();
 
@@ -66,13 +67,14 @@ export class Viewport {
     this.resizeObserver.observe(this.container);
   }
 
-  enableZoom() {
+  enableZoom(options: SvgPanZoom.Options = {}) {
     const svgHeight = this.$svg['height'].baseVal.value;
     const svgWidth = this.$svg['width'].baseVal.value;
     const bbRect = this.container.getBoundingClientRect();
     this.maxZoom = Math.max(svgHeight / bbRect.height, svgWidth / bbRect.width);
 
     this.zoomer = svgPanZoom(this.$svg, {
+      ...options,
       zoomScaleSensitivity: 0.25,
       minZoom: 0.95,
       maxZoom: this.maxZoom,