Allow overriding Pan interaction ID

silx-kit · Jul 12, 2022 · d0eeb8a · d0eeb8a
1 parent a613d45
commit d0eeb8a
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 3 deletions.
diff --git a/apps/storybook/src/Pan.stories.tsx b/apps/storybook/src/Pan.stories.tsx
@@ -45,17 +45,43 @@ Disabled.args = {
   disabled: true,
 };
 
+export const TwoComponents: Story<PanProps> = (args) => {
+  return (
+    <VisCanvas
+      title="Pan with middle button, or with <modifierKey> + left button"
+      abscissaConfig={{ visDomain: [-10, 0], showGrid: true }}
+      ordinateConfig={{ visDomain: [50, 100], showGrid: true }}
+    >
+      <Pan id="PanMiddle" button={MouseButton.Middle} />
+      <Pan
+        id="PanLeft"
+        button={MouseButton.Left}
+        modifierKey={args.modifierKey}
+      />
+      <Zoom />
+      <ResetZoomButton />
+    </VisCanvas>
+  );
+};
+TwoComponents.args = { modifierKey: ['Control'] };
+TwoComponents.argTypes = {
+  button: { control: false },
+  disabled: { control: false },
+};
+
 export default {
   title: 'Building Blocks/Interactions/Pan',
   component: Pan,
   parameters: { layout: 'fullscreen' },
   decorators: [FillHeight],
   args: {
+    id: undefined,
     button: [MouseButton.Left],
     modifierKey: [],
     disabled: false,
   },
   argTypes: {
+    id: { control: false },
     button: {
       control: {
         type: 'inline-check',

diff --git a/packages/lib/src/interactions/AxialSelectToZoom.tsx b/packages/lib/src/interactions/AxialSelectToZoom.tsx
@@ -70,10 +70,10 @@ function AxialSelectToZoom(props: Props) {
 
   return (
     <SelectionTool
-      onSelectionEnd={onSelectionEnd}
       id={`${axis.toUpperCase()}SelectToZoom`}
       modifierKey={modifierKey}
       disabled={disabled}
+      onSelectionEnd={onSelectionEnd}
     >
       {(selection) => (
         <SelectionRect

diff --git a/packages/lib/src/interactions/Pan.tsx b/packages/lib/src/interactions/Pan.tsx
@@ -13,14 +13,20 @@ import type { CanvasEvent, CommonInteractionProps } from './models';
 import { getModifierKeyArray } from './utils';
 
 interface Props extends CommonInteractionProps {
+  id?: string;
   button?: MouseButton | MouseButton[];
 }
 
 function Pan(props: Props) {
-  const { button = MouseButton.Left, modifierKey, disabled } = props;
+  const {
+    id = 'Pan',
+    button = MouseButton.Left,
+    modifierKey,
+    disabled,
+  } = props;
 
   const modifierKeys = getModifierKeyArray(modifierKey);
-  const shouldInteract = useInteraction('Pan', {
+  const shouldInteract = useInteraction(id, {
     button,
     modifierKeys,
     disabled,