Merge pull request #1020 from silx-kit/interaction-conflict

Handle interaction key conflicts by setting them in VisCanvas

apps/storybook/src/Pan.stories.tsx

@@ -16,8 +16,9 @@ const Template: Story<TemplateProps> = (args) => {
     <VisCanvas
       abscissaConfig={{ visDomain: [-10, 0], showGrid: true }}
       ordinateConfig={{ visDomain: [50, 100], showGrid: true }}
+      interactionKeys={{ Pan: modifierKey || true, Zoom: true }}
     >
-      <Pan disabled={disabled} modifierKey={modifierKey} />
+      <Pan disabled={disabled} />
       <Zoom />
       <ResetZoomButton />
     </VisCanvas>

apps/storybook/src/SelectToZoom.stories.tsx

@@ -30,10 +30,15 @@ const Template: Story<TemplateProps> = (args) => {
     <VisCanvas
       abscissaConfig={{ visDomain: [-5, 5], showGrid: true }}
       ordinateConfig={{ visDomain: [-0.5, 1.5], showGrid: true }}
+      interactionKeys={{
+        Pan: true,
+        Zoom: true,
+        SelectToZoom: modifierKey,
+      }}
     >
       <Pan />
       <Zoom />
-      <SelectToZoom modifierKey={modifierKey} />
+      <SelectToZoom />
       <ResetZoomButton />
       <GaussianCurve />
     </VisCanvas>

apps/storybook/src/Selection.stories.tsx

@@ -53,14 +53,18 @@ const Template: Story<TemplateProps> = (args) => {
       }
       abscissaConfig={{ visDomain: [-10, 0], showGrid: true }}
       ordinateConfig={{ visDomain: [50, 100], showGrid: true }}
+      interactionKeys={{
+        Pan: true,
+        Zoom: true,
+        Selection: modifierKey || true,
+      }}
     >
       <Pan disabled={disablePan} />
       <Zoom disabled={disableZoom} />
       <ResetZoomButton />
       <SelectionTool
         onSelectionChange={setActiveSelection}
         onSelectionEnd={() => setActiveSelection(undefined)}
-        modifierKey={modifierKey}
       >
         {(selection) => <SelectionComponent {...selection} {...svgProps} />}
       </SelectionTool>
@@ -132,6 +136,11 @@ export const PersistSelection: Story<TemplateProps> = (args) => {
       }
       abscissaConfig={{ visDomain: [-10, 0], showGrid: true }}
       ordinateConfig={{ visDomain: [50, 100], showGrid: true }}
+      interactionKeys={{
+        Pan: true,
+        Zoom: true,
+        Selection: modifierKey || true,
+      }}
     >
       <Pan disabled={disablePan} />
       <Zoom disabled={disableZoom} />
@@ -140,7 +149,6 @@ export const PersistSelection: Story<TemplateProps> = (args) => {
           setPersistedSelection(undefined);
         }}
         onSelectionEnd={setPersistedSelection}
-        modifierKey={modifierKey}
       >
         {(selection) => <SelectionComponent {...selection} {...svgProps} />}
       </SelectionTool>

apps/storybook/src/XZoom.stories.tsx

@@ -16,9 +16,10 @@ const Template: Story<TemplateProps> = (args) => {
     <VisCanvas
       abscissaConfig={{ visDomain: [-10, 0], showGrid: true }}
       ordinateConfig={{ visDomain: [50, 100], showGrid: true }}
+      interactionKeys={{ Pan: true, XAxisZoom: modifierKey || true }}
     >
       <Pan />
-      <XAxisZoom disabled={disabled} modifierKey={modifierKey} />
+      <XAxisZoom disabled={disabled} />
       <ResetZoomButton />
     </VisCanvas>
   );

apps/storybook/src/YZoom.stories.tsx

@@ -16,9 +16,10 @@ const Template: Story<TemplateProps> = (args) => {
     <VisCanvas
       abscissaConfig={{ visDomain: [-10, 0], showGrid: true }}
       ordinateConfig={{ visDomain: [50, 100], showGrid: true }}
+      interactionKeys={{ Pan: true, YAxisZoom: modifierKey || true }}
     >
       <Pan />
-      <YAxisZoom disabled={disabled} modifierKey={modifierKey} />
+      <YAxisZoom disabled={disabled} />
       <ResetZoomButton />
     </VisCanvas>
   );

apps/storybook/src/Zoom.stories.tsx

@@ -16,9 +16,10 @@ const Template: Story<TemplateProps> = (args) => {
     <VisCanvas
       abscissaConfig={{ visDomain: [-10, 0], showGrid: true }}
       ordinateConfig={{ visDomain: [50, 100], showGrid: true }}
+      interactionKeys={{ Pan: true, Zoom: modifierKey || true }}
     >
       <Pan />
-      <Zoom disabled={disabled} modifierKey={modifierKey} />
+      <Zoom disabled={disabled} />
       <ResetZoomButton />
     </VisCanvas>
   );

packages/lib/src/interactions/Pan.tsx

@@ -2,17 +2,17 @@ import { useThree } from '@react-three/fiber';
 import { useRef, useCallback } from 'react';
 import type { Vector3 } from 'three';
 
+import { useAxisSystemContext } from '../vis/shared/AxisSystemContext';
 import { useCanvasEvents, useMoveCameraTo } from './hooks';
-import type { CanvasEvent, ModifierKey } from './models';
-import { checkModifierKey } from './utils';
+import type { CanvasEvent } from './models';
 
 interface Props {
   disabled?: boolean;
-  modifierKey?: ModifierKey;
 }
 
 function Pan(props: Props) {
-  const { disabled, modifierKey } = props;
+  const { disabled } = props;
+  const { shouldInteract } = useAxisSystemContext();
 
   const camera = useThree((state) => state.camera);
 
@@ -29,13 +29,12 @@ function Pan(props: Props) {
         return;
       }
 
-      const isPanAllowed = checkModifierKey(modifierKey, sourceEvent);
-      if (isPanAllowed) {
+      if (shouldInteract('Pan', sourceEvent)) {
         (target as Element).setPointerCapture(pointerId); // https://stackoverflow.com/q/28900077/758806
         startOffsetPosition.current = unprojectedPoint.clone();
       }
     },
-    [disabled, modifierKey]
+    [shouldInteract, disabled]
   );
 
   const onPointerUp = useCallback((evt: CanvasEvent<PointerEvent>) => {

packages/lib/src/interactions/SelectToZoom.tsx

@@ -4,16 +4,15 @@ import { useAxisSystemContext } from '../vis/shared/AxisSystemContext';
 import SelectionRect from './SelectionRect';
 import SelectionTool from './SelectionTool';
 import { useMoveCameraTo } from './hooks';
-import type { ModifierKey, Selection } from './models';
+import type { Selection } from './models';
 import { getRatioEndPoint } from './utils';
 
 interface Props {
-  modifierKey?: ModifierKey;
   keepRatio?: boolean;
 }
 
 function SelectToZoom(props: Props) {
-  const { modifierKey = 'Control', keepRatio } = props;
+  const { keepRatio } = props;
 
   const { dataToWorld } = useAxisSystemContext();
   const moveCameraTo = useMoveCameraTo();
@@ -53,7 +52,7 @@ function SelectToZoom(props: Props) {
   };
 
   return (
-    <SelectionTool modifierKey={modifierKey} onSelectionEnd={onSelectionEnd}>
+    <SelectionTool onSelectionEnd={onSelectionEnd} id="SelectToZoom">
       {({ startPoint, endPoint }) => (
         <>
           <SelectionRect

packages/lib/src/interactions/SelectionTool.tsx

@@ -6,14 +6,14 @@ import type { Vector2 } from 'three';
 
 import { useAxisSystemContext } from '../vis/shared/AxisSystemContext';
 import { useCanvasEvents } from './hooks';
-import type { CanvasEvent, ModifierKey, Selection } from './models';
-import { boundPointToFOV, checkModifierKey } from './utils';
+import type { CanvasEvent, Selection } from './models';
+import { boundPointToFOV } from './utils';
 
 interface Props {
   onSelectionStart?: () => void;
   onSelectionChange?: (points: Selection) => void;
   onSelectionEnd?: (points: Selection) => void;
-  modifierKey?: ModifierKey;
+  id?: string;
   children: (points: Selection) => ReactElement;
 }
 
@@ -24,11 +24,12 @@ function SelectionTool(props: Props) {
     onSelectionStart,
     onSelectionChange,
     onSelectionEnd,
-    modifierKey,
+    id = 'Selection',
   } = props;
 
   const camera = useThree((state) => state.camera);
-  const { worldToData } = useAxisSystemContext();
+  const { worldToData, shouldInteract, getModifierKey } =
+    useAxisSystemContext();
 
   const [startPoint, setStartPoint] = useState<Vector2>();
   const [endPoint, setEndPoint] = useRafState<Vector2 | undefined>(undefined);
@@ -37,7 +38,7 @@ function SelectionTool(props: Props) {
   const onPointerDown = useCallback(
     (evt: CanvasEvent<PointerEvent>) => {
       const { unprojectedPoint, sourceEvent } = evt;
-      if (!checkModifierKey(modifierKey, sourceEvent)) {
+      if (!shouldInteract(id, sourceEvent)) {
         return;
       }
 
@@ -49,7 +50,7 @@ function SelectionTool(props: Props) {
         onSelectionStart();
       }
     },
-    [modifierKey, onSelectionStart, worldToData]
+    [id, onSelectionStart, shouldInteract, worldToData]
   );
 
   const onPointerMove = useCallback(
@@ -62,20 +63,21 @@ function SelectionTool(props: Props) {
       const point = worldToData(boundPointToFOV(unprojectedPoint, camera));
       setEndPoint(point);
 
-      if (onSelectionChange && checkModifierKey(modifierKey, sourceEvent)) {
+      if (onSelectionChange && shouldInteract(id, sourceEvent)) {
         onSelectionChange({
           startPoint,
           endPoint: point,
         });
       }
     },
     [
-      camera,
-      modifierKey,
       startPoint,
-      onSelectionChange,
-      setEndPoint,
       worldToData,
+      camera,
+      setEndPoint,
+      onSelectionChange,
+      shouldInteract,
+      id,
     ]
   );
 
@@ -92,18 +94,27 @@ function SelectionTool(props: Props) {
       setStartPoint(undefined);
       setEndPoint(undefined);
 
-      if (onSelectionEnd && checkModifierKey(modifierKey, sourceEvent)) {
+      if (onSelectionEnd && shouldInteract(id, sourceEvent)) {
         onSelectionEnd({
           startPoint,
           endPoint: worldToData(boundPointToFOV(unprojectedPoint, camera)),
         });
       }
     },
-    [camera, modifierKey, startPoint, onSelectionEnd, setEndPoint, worldToData]
+    [
+      startPoint,
+      setEndPoint,
+      onSelectionEnd,
+      shouldInteract,
+      id,
+      worldToData,
+      camera,
+    ]
   );
 
   useCanvasEvents({ onPointerDown, onPointerMove, onPointerUp });
 
+  const modifierKey = getModifierKey(id);
   useKeyboardEvent(modifierKey, () => toggleVisible(), [], { event: 'keyup' });
   useKeyboardEvent(
     modifierKey,

packages/lib/src/interactions/XAxisZoom.tsx

@@ -1,16 +1,17 @@
+import { useAxisSystemContext } from '../vis/shared/AxisSystemContext';
 import { useCanvasEvents, useZoomOnWheel } from './hooks';
-import type { ModifierKey } from './models';
 
 interface Props {
   disabled?: boolean;
-  modifierKey?: ModifierKey;
 }
 
 function XAxisZoom(props: Props) {
-  const { disabled, modifierKey = 'Alt' } = props;
+  const { disabled } = props;
+
+  const { shouldInteract } = useAxisSystemContext();
 
   const isZoomAllowed = (sourceEvent: WheelEvent) => ({
-    x: sourceEvent.getModifierState(modifierKey),
+    x: shouldInteract('XAxisZoom', sourceEvent),
     y: false,
   });
 

packages/lib/src/interactions/YAxisZoom.tsx

@@ -1,17 +1,17 @@
+import { useAxisSystemContext } from '../vis/shared/AxisSystemContext';
 import { useCanvasEvents, useZoomOnWheel } from './hooks';
-import type { ModifierKey } from './models';
 
 interface Props {
   disabled?: boolean;
-  modifierKey?: ModifierKey;
 }
 
 function YAxisZoom(props: Props) {
-  const { disabled, modifierKey = 'Shift' } = props;
+  const { disabled } = props;
+  const { shouldInteract } = useAxisSystemContext();
 
   const isZoomAllowed = (sourceEvent: WheelEvent) => ({
     x: false,
-    y: sourceEvent.getModifierState(modifierKey),
+    y: shouldInteract('YAxisZoom', sourceEvent),
   });
 
   useCanvasEvents({ onWheel: useZoomOnWheel(isZoomAllowed, disabled) });

packages/lib/src/interactions/Zoom.tsx

@@ -1,17 +1,16 @@
+import { useAxisSystemContext } from '../vis/shared/AxisSystemContext';
 import { useCanvasEvents, useZoomOnWheel } from './hooks';
-import type { ModifierKey } from './models';
-import { checkModifierKey } from './utils';
 
 interface Props {
   disabled?: boolean;
-  modifierKey?: ModifierKey;
 }
 
 function Zoom(props: Props) {
-  const { disabled, modifierKey } = props;
+  const { disabled } = props;
+  const { shouldInteract } = useAxisSystemContext();
 
   const isZoomAllowed = (sourceEvent: WheelEvent) => {
-    const shouldZoom = checkModifierKey(modifierKey, sourceEvent);
+    const shouldZoom = shouldInteract('Zoom', sourceEvent);
 
     return { x: shouldZoom, y: shouldZoom };
   };

packages/lib/src/interactions/models.ts

@@ -7,7 +7,7 @@ export interface Selection {
   endPoint: Vector2;
 }
 
-export interface CanvasEvent<T extends PointerEvent | WheelEvent> {
+export interface CanvasEvent<T extends MouseEvent> {
   unprojectedPoint: Vector3;
   sourceEvent: T;
 }
@@ -23,3 +23,5 @@ export interface Interaction {
   shortcut: string;
   description: string;
 }
+
+export type InteractionKeys = Record<string, ModifierKey | true>;

packages/lib/src/vis/heatmap/HeatmapVis.tsx

@@ -9,16 +9,21 @@ import {
 import type { NdArray } from 'ndarray';
 import type { ReactElement, ReactNode } from 'react';
 
-import { XAxisZoom, YAxisZoom } from '../..';
 import Pan from '../../interactions/Pan';
 import ResetZoomButton from '../../interactions/ResetZoomButton';
 import SelectToZoom from '../../interactions/SelectToZoom';
+import XAxisZoom from '../../interactions/XAxisZoom';
+import YAxisZoom from '../../interactions/YAxisZoom';
 import Zoom from '../../interactions/Zoom';
 import { useAxisDomain, useValueToIndexScale } from '../hooks';
 import type { AxisParams, VisScaleType } from '../models';
 import TooltipMesh from '../shared/TooltipMesh';
 import VisCanvas from '../shared/VisCanvas';
-import { DEFAULT_DOMAIN, formatNumType } from '../utils';
+import {
+  DEFAULT_DOMAIN,
+  DEFAULT_INTERACTIONS_KEYS,
+  formatNumType,
+} from '../utils';
 import ColorBar from './ColorBar';
 import HeatmapMesh from './HeatmapMesh';
 import styles from './HeatmapVis.module.css';
@@ -103,6 +108,7 @@ function HeatmapVis(props: Props) {
           label: ordinateLabel,
           flip: flipYAxis,
         }}
+        interactionKeys={DEFAULT_INTERACTIONS_KEYS}
       >
         <Pan />
         <Zoom />