Allow transforming selection in SelectionTool

apps/storybook/src/Selection.stories.tsx

@@ -1,4 +1,4 @@
-import type { Selection, ModifierKey } from '@h5web/lib';
+import type { Selection, ModifierKey, Axis } from '@h5web/lib';
 import { AxialSelectionTool } from '@h5web/lib';
 import {
   Pan,
@@ -202,9 +202,7 @@ Persisted.argTypes = {
   },
 };
 
-export const AxialSelection: Story<TemplateProps & { axis: 'x' | 'y' }> = (
-  args
-) => {
+export const AxialSelection: Story<TemplateProps & { axis: Axis }> = (args) => {
   const {
     selectionType,
     selectionModifierKey,

packages/app/src/dimension-mapper/AxisMapper.tsx

@@ -1,8 +1,9 @@
 import { ToggleGroup } from '@h5web/lib';
+import type { Axis } from '@h5web/shared';
 import { isNumber } from 'lodash';
 
 import styles from './DimensionMapper.module.css';
-import type { Axis, DimensionMapping } from './models';
+import type { DimensionMapping } from './models';
 
 interface Props {
   axis: Axis;

packages/app/src/dimension-mapper/models.ts

@@ -1,2 +1,3 @@
-export type Axis = 'x' | 'y';
+import type { Axis } from '@h5web/shared';
+
 export type DimensionMapping = (number | Axis)[];

packages/app/src/dimension-mapper/utils.ts

@@ -1,7 +1,6 @@
+import type { Axis } from '@h5web/shared';
 import { isNumber } from 'lodash';
 
-import type { Axis } from './models';
-
 export function isAxis(elem: number | Axis): elem is Axis {
   return !isNumber(elem);
 }

packages/app/src/vis-packs/core/utils.ts

@@ -1,10 +1,10 @@
-import type { Domain } from '@h5web/shared';
+import type { Axis, Domain } from '@h5web/shared';
 import { createArrayFromView } from '@h5web/shared';
 import { isNumber } from 'lodash';
 import type { NdArray, TypedArray } from 'ndarray';
 import ndarray from 'ndarray';
 
-import type { Axis, DimensionMapping } from '../../dimension-mapper/models';
+import type { DimensionMapping } from '../../dimension-mapper/models';
 import { isAxis } from '../../dimension-mapper/utils';
 
 export const DEFAULT_DOMAIN: Domain = [0.1, 1];

packages/lib/src/index.ts

@@ -122,7 +122,7 @@ export type {
 } from './interactions/models';
 export { MouseButton } from './interactions/models';
 
-export type { Domain, Dims } from '@h5web/shared';
+export type { Domain, Dims, Axis } from '@h5web/shared';
 
 export type {
   Aspect,

packages/lib/src/interactions/AxialSelectToZoom.tsx

@@ -1,3 +1,4 @@
+import type { Axis } from '@h5web/shared';
 import { useThree } from '@react-three/fiber';
 
 import { useVisCanvasContext } from '../vis/shared/VisCanvasProvider';
@@ -8,7 +9,7 @@ import type { Selection, CommonInteractionProps } from './models';
 import { getEnclosedRectangle } from './utils';
 
 interface Props extends CommonInteractionProps {
-  axis: 'x' | 'y';
+  axis: Axis;
 }
 
 function AxialSelectToZoom(props: Props) {

packages/lib/src/interactions/AxialSelectionTool.tsx

@@ -1,14 +1,16 @@
+import type { Axis } from '@h5web/shared';
 import { useThree } from '@react-three/fiber';
-import { Vector2 } from 'three';
+import { useCallback } from 'react';
+import { Vector3 } from 'three';
 
 import { useVisCanvasContext } from '../vis/shared/VisCanvasProvider';
-import { getVisibleDomains } from '../vis/utils';
+import { getWorldFOV } from '../vis/utils';
 import type { SelectionProps } from './SelectionTool';
 import SelectionTool from './SelectionTool';
 import type { Selection } from './models';
 
 interface Props extends SelectionProps {
-  axis: 'x' | 'y';
+  axis: Axis;
 }
 
 function AxialSelectionTool(props: Props) {
@@ -21,48 +23,43 @@ function AxialSelectionTool(props: Props) {
     ...restOfSelectionProps
   } = props;
 
-  const context = useVisCanvasContext();
-
+  const { worldToData } = useVisCanvasContext();
   const camera = useThree((state) => state.camera);
 
-  function getAxialSelection(selection: Selection): Selection {
-    const { xVisibleDomain, yVisibleDomain } = getVisibleDomains(
-      camera,
-      context
-    );
+  const toAxialSelection = useCallback(
+    (selection: Selection): Selection => {
+      const { worldStartPoint, worldEndPoint } = selection;
+      const { bottomLeft, topRight } = getWorldFOV(camera);
+
+      const axialWorldStartPoint =
+        axis === 'x'
+          ? new Vector3(worldStartPoint.x, bottomLeft.y, 0)
+          : new Vector3(bottomLeft.x, worldStartPoint.y, 0);
 
-    const { startPoint, endPoint } = selection;
-    const axialStartPoint =
-      axis === 'x'
-        ? new Vector2(startPoint.x, yVisibleDomain[0])
-        : new Vector2(xVisibleDomain[0], startPoint.y);
-    const axialEndPoint =
-      axis === 'x'
-        ? new Vector2(endPoint.x, yVisibleDomain[1])
-        : new Vector2(xVisibleDomain[1], endPoint.y);
+      const axialWorldEndPoint =
+        axis === 'x'
+          ? new Vector3(worldEndPoint.x, topRight.y, 0)
+          : new Vector3(topRight.x, worldEndPoint.y, 0);
 
-    return {
-      startPoint: axialStartPoint,
-      endPoint: axialEndPoint,
-      worldStartPoint: context.dataToWorld(axialStartPoint),
-      worldEndPoint: context.dataToWorld(axialEndPoint),
-    };
-  }
+      return {
+        startPoint: worldToData(axialWorldStartPoint),
+        endPoint: worldToData(axialWorldEndPoint),
+        worldStartPoint: axialWorldStartPoint,
+        worldEndPoint: axialWorldEndPoint,
+      };
+    },
+    [axis, camera, worldToData]
+  );
 
   return (
     <SelectionTool
+      transformSelection={toAxialSelection}
       onSelectionStart={onSelectionStart}
-      onSelectionChange={
-        onSelectionChange &&
-        ((selection) => onSelectionChange(getAxialSelection(selection)))
-      }
-      onSelectionEnd={
-        onSelectionEnd &&
-        ((selection) => onSelectionEnd(getAxialSelection(selection)))
-      }
+      onSelectionChange={onSelectionChange}
+      onSelectionEnd={onSelectionEnd}
       {...restOfSelectionProps}
     >
-      {(selection) => children(getAxialSelection(selection))}
+      {children}
     </SelectionTool>
   );
 }

packages/lib/src/interactions/SelectionTool.tsx

@@ -17,6 +17,7 @@ import { boundPointToFOV, getModifierKeyArray } from './utils';
 
 interface Props extends CommonInteractionProps {
   id?: string;
+  transformSelection?: (selection: Selection) => Selection;
   onSelectionStart?: (evt: CanvasEvent<PointerEvent>) => void;
   onSelectionChange?: (selection: Selection) => void;
   onSelectionEnd?: (selection: Selection) => void;
@@ -28,6 +29,7 @@ function SelectionTool(props: Props) {
     id = 'Selection',
     modifierKey,
     disabled,
+    transformSelection: customTransformSelection,
     onSelectionStart,
     onSelectionChange,
     onSelectionEnd,
@@ -67,6 +69,13 @@ function SelectionTool(props: Props) {
     [camera, startEvt, worldToData]
   );
 
+  const transformSelection = useCallback(
+    (selec: Selection): Selection => {
+      return customTransformSelection ? customTransformSelection(selec) : selec;
+    },
+    [customTransformSelection]
+  );
+
   const onPointerDown = useCallback(
     (evt: CanvasEvent<PointerEvent>) => {
       const { sourceEvent } = evt;
@@ -109,10 +118,17 @@ function SelectionTool(props: Props) {
       setSelection(undefined);
 
       if (onSelectionEnd && shouldInteract(sourceEvent)) {
-        onSelectionEnd(computeSelection(worldPt));
+        onSelectionEnd(transformSelection(computeSelection(worldPt)));
       }
     },
-    [startEvt, setSelection, onSelectionEnd, shouldInteract, computeSelection]
+    [
+      startEvt,
+      setSelection,
+      onSelectionEnd,
+      shouldInteract,
+      computeSelection,
+      transformSelection,
+    ]
   );
 
   useCanvasEvents({ onPointerDown, onPointerMove, onPointerUp });
@@ -129,15 +145,15 @@ function SelectionTool(props: Props) {
 
   useEffect(() => {
     if (onSelectionChange && selection && isModifierKeyPressed) {
-      onSelectionChange(selection);
+      onSelectionChange(transformSelection(selection));
     }
-  }, [selection, isModifierKeyPressed, onSelectionChange]);
+  }, [selection, isModifierKeyPressed, onSelectionChange, transformSelection]);
 
   if (!selection || !isModifierKeyPressed) {
     return null;
   }
 
-  return <>{children(selection)}</>;
+  return <>{children(transformSelection(selection))}</>;
 }
 
 export type { Props as SelectionProps };

packages/shared/src/models-vis.ts

@@ -15,6 +15,7 @@ export type TypedArrayConstructor =
   | Float64ArrayConstructor;
 
 export type Domain = [number, number];
+export type Axis = 'x' | 'y';
 
 export enum ScaleType {
   Linear = 'linear',