Let Pan accept multiple mouse buttons

apps/storybook/src/Pan.stories.tsx

@@ -1,15 +1,11 @@
+import { MouseButton } from '@h5web/lib';
 import { Pan, ResetZoomButton, VisCanvas, Zoom } from '@h5web/lib';
-import type { ModifierKey as ModifierKeyType } from '@h5web/lib';
+import type { PanProps } from '@h5web/lib';
 import type { Meta, Story } from '@storybook/react';
 
-import VisCanvasStoriesConfig from './VisCanvas.stories';
+import FillHeight from './decorators/FillHeight';
 
-interface TemplateProps {
-  disabled?: boolean;
-  modifierKey?: ModifierKeyType;
-}
-
-const Template: Story<TemplateProps> = (args) => {
+const Template: Story<PanProps> = (args) => {
   return (
     <VisCanvas
       abscissaConfig={{ visDomain: [-10, 0], showGrid: true }}
@@ -23,36 +19,52 @@ const Template: Story<TemplateProps> = (args) => {
 };
 
 export const Default = Template.bind({});
-Default.args = {
-  disabled: false,
-  modifierKey: undefined,
+
+export const ModifierKey = Template.bind({});
+ModifierKey.args = {
+  modifierKey: ['Shift'],
+};
+
+export const MultipleModifierKey = Template.bind({});
+MultipleModifierKey.args = {
+  modifierKey: ['Control', 'Shift'],
+};
+
+export const MiddleButton = Template.bind({});
+MiddleButton.args = {
+  button: [MouseButton.Middle],
+};
+
+export const TwoButtons = Template.bind({});
+TwoButtons.args = {
+  button: [MouseButton.Left, MouseButton.Middle],
 };
 
 export const Disabled = Template.bind({});
 Disabled.args = {
   disabled: true,
-  modifierKey: undefined,
-};
-
-export const ModifierKey = Template.bind({});
-ModifierKey.args = {
-  disabled: false,
-  modifierKey: 'Shift',
 };
 
 export default {
-  ...VisCanvasStoriesConfig,
   title: 'Building Blocks/PanZoom/Pan',
-  parameters: {
-    ...VisCanvasStoriesConfig.parameters,
-    controls: {
-      include: ['disabled', 'modifierKey'],
-    },
+  parameters: { layout: 'fullscreen' },
+  decorators: [FillHeight],
+  args: {
+    button: [MouseButton.Left],
+    modifierKey: [],
+    disabled: false,
   },
   argTypes: {
+    button: {
+      control: {
+        type: 'inline-check',
+        labels: { [MouseButton.Left]: 'Left', [MouseButton.Middle]: 'Middle' },
+      },
+      options: [MouseButton.Left, MouseButton.Middle],
+    },
     modifierKey: {
-      control: { type: 'inline-radio' },
+      control: { type: 'inline-check' },
       options: ['Alt', 'Control', 'Shift'],
     },
   },
-} as Meta;
+} as Meta<PanProps>;

packages/lib/src/index.ts

@@ -1,11 +1,11 @@
 // Visualizations
 export { default as MatrixVis } from './vis/matrix/MatrixVis';
-export type { MatrixVisProps } from './vis/matrix/MatrixVis';
 export { default as LineVis } from './vis/line/LineVis';
-export type { LineVisProps } from './vis/line/LineVis';
 export { default as HeatmapVis } from './vis/heatmap/HeatmapVis';
-export type { HeatmapVisProps } from './vis/heatmap/HeatmapVis';
 export { default as ScatterVis } from './vis/scatter/ScatterVis';
+export type { MatrixVisProps } from './vis/matrix/MatrixVis';
+export type { LineVisProps } from './vis/line/LineVis';
+export type { HeatmapVisProps } from './vis/heatmap/HeatmapVis';
 export type { ScatterVisProps } from './vis/scatter/ScatterVis';
 
 // Toolbar and controls
@@ -16,7 +16,6 @@ export { default as LinkBtn } from './toolbar/controls/LinkBtn';
 export { default as ToggleBtn } from './toolbar/controls/ToggleBtn';
 export { default as ToggleGroup } from './toolbar/controls/ToggleGroup';
 export { default as DomainSlider } from './toolbar/controls/DomainSlider/DomainSlider';
-export type { DomainSliderProps } from './toolbar/controls/DomainSlider/DomainSlider';
 export { default as ColorMapSelector } from './toolbar/controls/ColorMapSelector/ColorMapSelector';
 export { default as ScaleSelector } from './toolbar/controls/ScaleSelector/ScaleSelector';
 export { default as GridToggler } from './toolbar/controls/GridToggler';
@@ -25,21 +24,22 @@ export { default as Selector } from './toolbar/controls/Selector/Selector';
 export { default as InteractionHelp } from './toolbar/controls/InteractionHelp';
 export { default as FloatingControl } from './toolbar/floating/FloatingControl';
 export { default as ResetZoomButton } from './toolbar/floating/ResetZoomButton';
+export type { DomainSliderProps } from './toolbar/controls/DomainSlider/DomainSlider';
 
 // Building blocks
 export { default as VisCanvas } from './vis/shared/VisCanvas';
-export type { VisCanvasProps } from './vis/shared/VisCanvas';
 export { default as TooltipMesh } from './vis/shared/TooltipMesh';
-export type { TooltipMeshProps } from './vis/shared/TooltipMesh';
 export { default as Html } from './vis/shared/Html';
 export { default as Overlay } from './vis/shared/Overlay';
 export { default as Annotation } from './vis/shared/Annotation';
+export type { VisCanvasProps } from './vis/shared/VisCanvas';
+export type { TooltipMeshProps } from './vis/shared/TooltipMesh';
 
 export { default as DataCurve } from './vis/line/DataCurve';
-export type { DataCurveProps } from './vis/line/DataCurve';
 export { default as ColorBar } from './vis/heatmap/ColorBar';
-export type { ColorBarProps } from './vis/heatmap/ColorBar';
 export { default as HeatmapMesh } from './vis/heatmap/HeatmapMesh';
+export type { DataCurveProps } from './vis/line/DataCurve';
+export type { ColorBarProps } from './vis/heatmap/ColorBar';
 export type { HeatmapMeshProps } from './vis/heatmap/HeatmapMesh';
 
 // Interactions
@@ -53,7 +53,17 @@ export { default as AxialSelectToZoom } from './interactions/AxialSelectToZoom';
 export { default as SelectionLine } from './interactions/SelectionLine';
 export { default as SelectionRect } from './interactions/SelectionRect';
 export { default as SelectionTool } from './interactions/SelectionTool';
+export type { PanProps } from './interactions/Pan';
+export type { ZoomProps } from './interactions/Zoom';
+export type { XAxisZoomProps } from './interactions/XAxisZoom';
+export type { YAxisZoomProps } from './interactions/YAxisZoom';
+export type { SelectToZoomProps } from './interactions/SelectToZoom';
+export type { AxialSelectToZoomProps } from './interactions/AxialSelectToZoom';
 export type { SelectionProps } from './interactions/SelectionTool';
+export type {
+  DefaultInteractionsConfig,
+  DefaultInteractionsProps,
+} from './interactions/DefaultInteractions';
 
 // Context
 export { useAxisSystemContext } from './vis/shared/AxisSystemProvider';
@@ -141,7 +151,7 @@ export { default as RgbVis } from './vis/rgb/RgbVis';
 export { default as VisMesh } from './vis/shared/VisMesh';
 export { default as ScatterPoints } from './vis/scatter/ScatterPoints';
 export { default as TiledHeatmapMesh } from './vis/tiles/TiledHeatmapMesh';
-export type { TiledHeatmapMeshProps } from './vis/tiles/TiledHeatmapMesh';
 export { getLayerSizes, TilesApi } from './vis/tiles/api';
 export { useValidDomainForScale } from './vis/hooks';
 export { assertLength, assertDefined } from '@h5web/shared';
+export type { TiledHeatmapMeshProps } from './vis/tiles/TiledHeatmapMesh';

packages/lib/src/interactions/InteractionsProvider.tsx

@@ -43,12 +43,14 @@ function InteractionsProvider(props: { children: ReactNode }) {
     (interactionId: string, event: MouseEvent | WheelEvent) => {
       const registeredInteractions = [...interactionMap.values()];
 
-      function isButtonPressed(button: MouseButton | 'Wheel') {
+      function isButtonPressed(button: MouseButton | MouseButton[] | 'Wheel') {
         if (event instanceof WheelEvent) {
           return button === 'Wheel';
         }
 
-        return event.button === button;
+        return Array.isArray(button)
+          ? button.includes(event.button)
+          : event.button === button;
       }
 
       function areKeysPressed(keys: ModifierKey[]) {

packages/lib/src/interactions/Pan.tsx

@@ -13,19 +13,20 @@ import type { CanvasEvent, CommonInteractionProps } from './models';
 import { getModifierKeyArray } from './utils';
 
 interface Props extends CommonInteractionProps {
-  button?: MouseButton;
+  button?: MouseButton | MouseButton[];
 }
 
 function Pan(props: Props) {
   const { button = MouseButton.Left, modifierKey, disabled } = props;
-  const modifierKeys = getModifierKeyArray(modifierKey);
 
-  const camera = useThree((state) => state.camera);
+  const modifierKeys = getModifierKeyArray(modifierKey);
   const shouldInteract = useInteraction('Pan', {
     button,
     modifierKeys,
     disabled,
   });
+
+  const camera = useThree((state) => state.camera);
   const moveCameraTo = useMoveCameraTo();
 
   const startOffsetPosition = useRef<Vector3>(); // `useRef` to avoid re-renders

packages/lib/src/interactions/models.ts

@@ -35,7 +35,7 @@ export interface InteractionInfo {
 }
 
 export interface InteractionEntry {
-  button: MouseButton | 'Wheel';
+  button: MouseButton | MouseButton[] | 'Wheel';
   modifierKeys: ModifierKey[];
   disabled?: boolean;
 }