feat: add prop to opt into zooming with mouse wheel without the alt k…

…ey (#131)

src/components/container/ContainerComponent.tsx

@@ -46,6 +46,7 @@ interface ContainerProps<TData = unknown> {
   noUnselection?: boolean;
   lockZoom: boolean;
   lockPan: boolean;
+  zoomWithoutModifierKey?: boolean;
   minNewRoiSize?: number;
   getNewRoiData?: () => TData;
 }
@@ -62,6 +63,7 @@ export function ContainerComponent<TData = unknown>(
     noUnselection,
     lockZoom,
     lockPan,
+    zoomWithoutModifierKey = false,
     minNewRoiSize = 1,
   } = props;
 
@@ -147,7 +149,7 @@ export function ContainerComponent<TData = unknown>(
     }, 25);
 
     function onWheel(event: WheelEvent) {
-      if (!event.altKey || lockZoom) return;
+      if ((!event.altKey && !zoomWithoutModifierKey) || lockZoom) return;
       event.preventDefault();
       event.stopPropagation();
       onZoom(event);
@@ -173,6 +175,7 @@ export function ContainerComponent<TData = unknown>(
     noUnselection,
     stateRef,
     actions,
+    zoomWithoutModifierKey,
   ]);
 
   const lockContextValue = useMemo<LockContext>(() => {

src/components/container/RoiContainer.tsx

@@ -22,6 +22,11 @@ export interface RoiContainerProps<TData = unknown> {
    * Get the data of a new ROI as it is being drawn.
    */
   getNewRoiData?: () => TData;
+  /**
+   * If enabled, the user will be able to zoom into the target just by using the mouse wheel
+   * Discouraged in a scrollable container
+   */
+  zoomWithoutModifierKey?: boolean;
 }
 
 export type AfterDrawCallback<TData = unknown> = (

stories/panzoom/no-alt-key.stories.tsx

@@ -0,0 +1,42 @@
+import { Meta } from '@storybook/react';
+
+import { RoiContainer, RoiList, RoiProvider, TargetImage } from '../../src';
+import { Layout } from '../utils/Layout';
+
+export default {
+  title: 'Pan and zoom',
+} as Meta;
+
+export function ZoomWithoutAltKey() {
+  return (
+    <Layout>
+      <RoiProvider>
+        <RoiContainer
+          target={<TargetImage src="/barbara.jpg" />}
+          zoomWithoutModifierKey
+        >
+          <RoiList />
+        </RoiContainer>
+      </RoiProvider>
+    </Layout>
+  );
+}
+
+export function ZoomWithoutAltKeyScroll() {
+  return (
+    <>
+      <div style={{ height: 400 }} />
+      <Layout>
+        <RoiProvider>
+          <RoiContainer
+            target={<TargetImage src="/barbara.jpg" />}
+            zoomWithoutModifierKey
+          >
+            <RoiList />
+          </RoiContainer>
+        </RoiProvider>
+      </Layout>
+      <div style={{ height: 400 }} />
+    </>
+  );
+}