change zoom with (ctrl + mouse wheel)

demo/lib/App.tsx

@@ -219,7 +219,7 @@ export default class App extends React.Component<any, AppState> {
               />
             </Menu.Item>
             <Menu.Item as="a">
-              <LinearZoomInput setZoom={zoom => this.setState({ zoom })} />
+              <LinearZoomInput zoom={this.state.zoom} setZoom={zoom => this.setState({ zoom })} />
             </Menu.Item>
             <Menu.Item as="a">
               <SearchQueryInput setQuery={query => this.setState({ search: { query } })} />
@@ -302,16 +302,16 @@ const ViewerTypeInput = ({ setType }: { setType: (viewType: string) => void }) =
   </div>
 );
 
-const LinearZoomInput = ({ setZoom }: { setZoom: (zoom: number) => void }) => (
+const LinearZoomInput = ({ zoom, setZoom }: { zoom: number; setZoom: (zoom: number) => void }) => (
   <div className="option" id="zoom">
     <span>Zoom</span>
     <input
       className="slider"
-      defaultValue="50"
       id="zoom"
       max="100"
       min="1"
       type="range"
+      value={zoom}
       onChange={e => {
         setZoom(parseInt(e.target.value));
       }}

src/EventHandler.tsx

@@ -12,7 +12,9 @@ export interface EventsHandlerProps {
   selectAllEvent: (e: React.KeyboardEvent<HTMLElement>) => boolean;
   selection: Selection;
   seq: string;
+  setLinearZoom: (zoom: number) => void;
   setSelection: (selection: Selection) => void;
+  zoom: number;
 }
 
 /**
@@ -26,6 +28,20 @@ export class EventHandler extends React.PureComponent<EventsHandlerProps> {
   clickedOnce: EventTarget | null = null;
   clickedTwice: EventTarget | null = null;
 
+  containerRef: React.RefObject<HTMLDivElement> = React.createRef();
+
+  componentDidMount = () => {
+    /*
+    Because React uses passive event handlers by default with wheel event which prevents using preventDefault(), 
+    so using refs is the solution for this issue to make event handler non-passive by adding event handler manually.
+    */
+    this.containerRef.current?.addEventListener("wheel", this.handleMouseWheel, { passive: false });
+  };
+
+  componentWillUnmount(): void {
+    this.containerRef.current?.removeEventListener("wheel", this.handleMouseWheel);
+  }
+
   /**
    * action handler for a keyboard keypresses.
    */
@@ -247,8 +263,33 @@ export class EventHandler extends React.PureComponent<EventsHandlerProps> {
     }
   };
 
+  updateLinearZoom(zoomLevel) {
+    const { setLinearZoom } = this.props;
+    setLinearZoom(Math.min(Math.max(zoomLevel, 11), 100));
+  }
+
+  zoomIn() {
+    this.updateLinearZoom(this.props.zoom + 20);
+  }
+
+  zoomOut() {
+    this.updateLinearZoom(this.props.zoom - 20);
+  }
+
+  handleMouseWheel = event => {
+    event.preventDefault();
+    if (event.ctrlKey) {
+      if (event.wheelDelta > 0) {
+        this.zoomIn();
+      } else if (event.wheelDelta < 0) {
+        this.zoomOut();
+      }
+    }
+  };
+
   render = () => (
     <div
+      ref={this.containerRef}
       className="la-vz-viewer-event-router"
       id="la-vz-event-router"
       role="presentation"

src/SeqViewerContainer.tsx

@@ -53,6 +53,7 @@ interface SeqViewerContainerProps {
   };
   seq: string;
   seqType: SeqType;
+  setLinearZoom: (zoom: number) => void;
   showComplement: boolean;
   showIndex: boolean;
   targetRef: React.LegacyRef<HTMLDivElement>;
@@ -246,7 +247,7 @@ class SeqViewerContainer extends React.Component<SeqViewerContainerProps, SeqVie
   };
 
   render() {
-    const { selection: selectionProp, seq, viewer } = this.props;
+    const { selection: selectionProp, seq, setLinearZoom, viewer, zoom } = this.props;
     const { centralIndex, selection } = this.state;
 
     const linearProps = this.linearProps();
@@ -284,7 +285,9 @@ class SeqViewerContainer extends React.Component<SeqViewerContainerProps, SeqVie
                   selectAllEvent={this.props.selectAllEvent}
                   selection={mergedSelection}
                   seq={seq}
+                  setLinearZoom={setLinearZoom}
                   setSelection={this.setSelection}
+                  zoom={zoom.linear}
                 >
                   {this.props.children ? (
                     this.props.children({

src/SeqViz.tsx

@@ -177,6 +177,10 @@ export interface SeqVizState {
   search: NameRange[];
   seq: string;
   seqType: SeqType;
+  zoom: {
+    circular: number;
+    linear: number;
+  };
 }
 
 /**
@@ -218,6 +222,10 @@ export default class SeqViz extends React.Component<SeqVizProps, SeqVizState> {
       ...seq,
       ...this.search(props, seq.seq),
       ...this.cut(seq.seq, seq.seqType),
+      zoom: {
+        circular: this.props.zoom!.circular!,
+        linear: this.props.zoom!.linear!,
+      },
     };
   }
 
@@ -278,7 +286,7 @@ export default class SeqViz extends React.Component<SeqVizProps, SeqVizState> {
    */
   componentDidUpdate = (
     // previous props
-    { accession = "", annotations, enzymes, enzymesCustom, file, search }: SeqVizProps,
+    { accession = "", annotations, enzymes, enzymesCustom, file, search, zoom }: SeqVizProps,
     // previous state
     { seq, seqType }: SeqVizState
   ) => {
@@ -321,6 +329,16 @@ export default class SeqViz extends React.Component<SeqVizProps, SeqVizState> {
         annotations: this.parseAnnotations(this.props.annotations, this.props.seq),
       });
     }
+
+    // zoom changed outside SeqViz
+    if (!isEqual(zoom, this.props.zoom)) {
+      this.setState({
+        zoom: {
+          circular: this.props.zoom?.circular ?? this.state.zoom.circular,
+          linear: this.props.zoom?.linear ?? this.state.zoom.linear,
+        },
+      });
+    }
   };
 
   /**
@@ -417,9 +435,9 @@ export default class SeqViz extends React.Component<SeqVizProps, SeqVizState> {
     }));
 
   render() {
-    const { highlightedRegions, highlights, primers, showComplement, showIndex, style, zoom } = this.props;
+    const { highlightedRegions, highlights, primers, showComplement, showIndex, style } = this.props;
     let { translations } = this.props;
-    const { compSeq, seq, seqType } = this.state;
+    const { compSeq, seq, seqType, zoom } = this.state;
 
     // This is an unfortunate bit of seq checking. We could get a seq directly or from a file parsed to a part.
     if (!seq) return <div className="la-vz-seqviz" />;
@@ -469,7 +487,19 @@ export default class SeqViz extends React.Component<SeqVizProps, SeqVizState> {
 
     return (
       <div className="la-vz-seqviz" data-testid="la-vz-seqviz" style={{ height: "100%", width: "100%", ...style }}>
-        <SeqViewerContainer {...this.props} {...props} {...this.state} />
+        <SeqViewerContainer
+          {...this.props}
+          {...props}
+          {...this.state}
+          setLinearZoom={(linearZoom: number) => {
+            this.setState({
+              zoom: {
+                circular: this.state.zoom.circular,
+                linear: linearZoom,
+              },
+            });
+          }}
+        />
       </div>
     );
   }