Merge pull request #1384 from silx-kit/mi-select-to-zoom

Allow controlling min select-to-zoom sizes
silx-kit · Mar 22, 2023 · 2afb2e2 · 2afb2e2
2 parents f264422 + 33ade79
commit 2afb2e2
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 10 deletions.
diff --git a/apps/storybook/src/AxialSelectToZoom.stories.tsx b/apps/storybook/src/AxialSelectToZoom.stories.tsx
@@ -62,6 +62,9 @@ MultipleModifierKeysY.args = {
   modifierKey: ['Control', 'Shift'],
 };
 
+export const MinZoom = Template.bind({});
+MinZoom.args = { minZoom: 200 };
+
 export const Disabled = Template.bind({});
 Disabled.args = {
   axis: 'x',

diff --git a/apps/storybook/src/SelectToZoom.stories.tsx b/apps/storybook/src/SelectToZoom.stories.tsx
@@ -76,10 +76,11 @@ MultipleModifierKeys.args = {
   modifierKey: ['Control', 'Shift'],
 };
 
+export const MinZoom = Template.bind({});
+MinZoom.args = { minZoom: 200 };
+
 export const Disabled = Template.bind({});
-Disabled.args = {
-  disabled: true,
-};
+Disabled.args = { disabled: true };
 
 export default {
   title: 'Building Blocks/Interactions/SelectToZoom',

diff --git a/packages/lib/src/interactions/AxialSelectToZoom.tsx b/packages/lib/src/interactions/AxialSelectToZoom.tsx
@@ -9,14 +9,15 @@ import type { CommonInteractionProps } from './models';
 import SvgElement from './svg/SvgElement';
 import SvgRect from './svg/SvgRect';
 
-const MIN_SIZE = 20;
+const DEFAULT_MIN_ZOOM = 20;
 
 interface Props extends CommonInteractionProps {
   axis: Axis;
+  minZoom?: number;
 }
 
 function AxialSelectToZoom(props: Props) {
-  const { axis, modifierKey, disabled } = props;
+  const { axis, modifierKey, disabled, minZoom = DEFAULT_MIN_ZOOM } = props;
 
   const { visRatio } = useVisCanvasContext();
   const zoomOnSelection = useZoomOnSelection();
@@ -27,7 +28,7 @@ function AxialSelectToZoom(props: Props) {
       id={`${axis.toUpperCase()}SelectToZoom`}
       modifierKey={modifierKey}
       disabled={visRatio !== undefined || disabled}
-      validate={({ html }) => Box.fromPoints(...html).hasMinSize(MIN_SIZE)}
+      validate={({ html }) => Box.fromPoints(...html).hasMinSize(minZoom)}
       onValidSelection={zoomOnSelection}
     >
       {({ html: htmlSelection }, _, isValid) => (

diff --git a/packages/lib/src/interactions/SelectToZoom.tsx b/packages/lib/src/interactions/SelectToZoom.tsx
@@ -10,11 +10,14 @@ import type { CommonInteractionProps, Rect, Selection } from './models';
 import SvgElement from './svg/SvgElement';
 import SvgRect from './svg/SvgRect';
 
-const MIN_SIZE = 20;
+const DEFAULT_MIN_ZOOM = 20;
 
-type Props = CommonInteractionProps;
+interface Props extends CommonInteractionProps {
+  minZoom?: number;
+}
 
 function SelectToZoom(props: Props) {
+  const { minZoom = DEFAULT_MIN_ZOOM, ...commonProps } = props;
   const {
     canvasSize,
     canvasRatio,
@@ -55,9 +58,9 @@ function SelectToZoom(props: Props) {
     <SelectionTool
       id="SelectToZoom"
       transform={computeZoomSelection}
-      validate={({ html }) => Box.fromPoints(...html).hasMinSize(MIN_SIZE)}
+      validate={({ html }) => Box.fromPoints(...html).hasMinSize(minZoom)}
       onValidSelection={zoomOnSelection}
-      {...props}
+      {...commonProps}
     >
       {({ html: htmlSelection }, { html: rawHtmlSelection }, isValid) => (
         <SvgElement>