fix: improve RoiList callback arguments (#174)

* fix: improve RoiList callback arguments

- Do not expose implementation details.
- Improve argument separation logic: first for ROI related data, second for global data
- Export types related to those callbacks
- unrelated fix: remove references to wrong "select_rotate" mode

BREAKING-CHANGE: getStyle, getReadOnly, renderLabel, getOverlayOpacity callback props on `RoiList` have changed their contract.

Closes: #147

Author: stropitek

src/components/RoiList.tsx

@@ -1,51 +1,19 @@
-import type { CSSProperties, JSX, ReactNode, SVGAttributes } from 'react';
 import { useMemo } from 'react';
 
 import { useRois } from '../hooks/useRois.js';
 import { useRoiState } from '../index.js';
-import type { Roi } from '../types/Roi.js';
+import type {
+  GetOverlayOpacity,
+  GetReadOnlyCallback,
+  GetStyleCallback,
+  RenderLabelCallback,
+} from '../types/RoiList.ts';
 import { assert } from '../utilities/assert.js';
 
 import { RoiBox } from './box/RoiBox.js';
 import { defaultGridLineOpacity, defaultHandlerColor } from './constants.js';
 import { LabelContainer } from './label/LabelContainer.js';
 
-export interface RoiAdditionalCallbackState {
-  isSelected: boolean;
-  isReadOnly: boolean;
-  zoomScale: number;
-}
-
-export interface CustomRoiStyle {
-  /**
-   * The attributes to forward to the SVG rect element which draws the ROI
-   */
-  rectAttributes?: SVGAttributes<SVGRectElement>;
-  resizeHandlerColor?: CSSProperties['color'];
-  gridLineOpacity?: CSSProperties['opacity'];
-  /**
-   * This property allows to render custom markup inside the ROI SVG
-   * This can be used for example to render an svg pattern that can then be used as a fill in `rectAttributes`
-   * It is not meant to be used to render markup that will be displayed on screen, see `rectAttributes` to customize the ROI appearance
-   */
-  renderCustomPattern?: () => JSX.Element;
-}
-
-export type GetStyleCallback<TData = unknown> = (
-  roi: Roi<TData>,
-  roiAdditionalState: RoiAdditionalCallbackState,
-) => CustomRoiStyle;
-
-export type GetReadOnlyCallback<TData = unknown> = (roi: Roi<TData>) => boolean;
-export type GetOverlayOpacity<TData = unknown> = (
-  roi: Roi<TData>,
-  roiAdditionalState: RoiAdditionalCallbackState,
-) => number;
-export type RenderLabelCallback<TData = unknown> = (
-  roi: Roi<TData>,
-  roiAdditionalState: RoiAdditionalCallbackState,
-) => ReactNode;
-
 export interface RoiListProps<TData = unknown> {
   getStyle?: GetStyleCallback<TData>;
   getReadOnly?: GetReadOnlyCallback<TData>;
@@ -132,12 +100,12 @@ export function RoiList<TData = unknown>(props: RoiListProps<TData>) {
   );
 }
 
-const defaultGetStyle: GetStyleCallback = (roi, state) => {
+const defaultGetStyle: GetStyleCallback = ({ isReadOnly, isSelected }) => {
   return {
     rectAttributes: {
-      fill: state.isReadOnly
+      fill: isReadOnly
         ? 'rgba(0,0,0,0.6)'
-        : state.isSelected
+        : isSelected
           ? 'rgba(0,0,0,0.2)'
           : 'rgba(0,0,0,0.4)',
     },

src/components/box/BoxSvg.tsx

@@ -55,11 +55,20 @@ export function BoxSvg({
   const isSelected = roi.id === roiState.selectedRoi;
   const styles = {
     ...baseRoiStyle,
-    ...getStyle(roi, {
-      isReadOnly,
-      isSelected,
-      zoomScale: panZoom.panZoom.scale * panZoom.initialPanZoom.scale,
-    }),
+    ...getStyle(
+      {
+        isReadOnly,
+        isSelected,
+        id: roi.id,
+        box: roi.box,
+        label: roi.label,
+        data: roi.data,
+        action: roi.action.type,
+      },
+      {
+        zoomScale: panZoom.panZoom.scale * panZoom.initialPanZoom.scale,
+      },
+    ),
   };
 
   const handlerSizes = getHandlerSizes(roi, panZoom);

src/components/box/RoiBox.tsx

@@ -8,6 +8,7 @@ import type {
   GetReadOnlyCallback,
   GetStyleCallback,
   RenderLabelCallback,
+  RoiCallbackPayload,
 } from '../../index.js';
 import type { Roi } from '../../types/Roi.js';
 import { applyTransformToBox } from '../../utilities/box.js';
@@ -49,13 +50,21 @@ function RoiBoxInternal(props: RoiBoxProps): JSX.Element {
   const roiDispatch = useRoiDispatch();
   const isReadOnly = getReadOnly(roi) || false;
 
-  const roiAdditionalState = {
+  const roiPayload: RoiCallbackPayload = {
+    id,
     isReadOnly,
     isSelected,
+    box: roi.box,
+    label: roi.label,
+    action: roi.action.type,
+    data: roi.data,
+  };
+
+  const globalStatePayload = {
     zoomScale: panzoom.panZoom.scale * panzoom.initialPanZoom.scale,
   };
 
-  const shadowOpacity = getOverlayOpacity(roi, roiAdditionalState);
+  const shadowOpacity = getOverlayOpacity(roiPayload, globalStatePayload);
 
   useEffect(() => {
     if (isReadOnly) {
@@ -64,7 +73,7 @@ function RoiBoxInternal(props: RoiBoxProps): JSX.Element {
   }, [id, isReadOnly, roiDispatch]);
 
   const box = applyTransformToBox(totalPanzoom, roi.box);
-  const label = renderLabel(roi, roiAdditionalState);
+  const label = renderLabel(roiPayload, globalStatePayload);
   return (
     <>
       <div

src/components/box/RoiBoxRotateHandler.tsx

@@ -1,5 +1,5 @@
+import type { CustomRoiStyle } from '../../types/RoiList.ts';
 import type { Box } from '../../utilities/box.js';
-import type { CustomRoiStyle } from '../RoiList.js';
 
 import { baseHandlerSizes } from './sizes.js';
 

src/components/box/styles.ts

@@ -1,4 +1,4 @@
-import type { CustomRoiStyle } from '../RoiList.js';
+import type { CustomRoiStyle } from '../../types/RoiList.js';
 import { defaultHandlerColor } from '../constants.js';
 
 export const baseRoiStyle: CustomRoiStyle = {

src/context/RoiProvider.tsx

@@ -79,7 +79,7 @@ export interface RoiProviderInitialConfig<TData> {
   rois?: Array<CommittedRoiProperties<TData>>;
   selectedRoiId?: string;
   /**
-   * When in select_rotate mode, this defines how much the mouse movement transnlates to a rotation angle.
+   * When in rotate_selected mode, this defines how much the mouse movement transnlates to a rotation angle.
    * It is expressed in number of pixels for a full 360 degree rotation.
    * @default 1200
    */

src/context/roiReducer.tsx

@@ -67,7 +67,7 @@ export interface ReactRoiState<TData = unknown> {
   commitRoiBoundaryStrategy: BoundaryStrategy;
 
   /**
-   * When in select_rotate mode, this defines how much the mouse movement transnlates to a rotation angle.
+   * When in rotate_selected mode, this defines how much the mouse movement transnlates to a rotation angle.
    * It is expressed in number of pixels for a full 360 degree rotation.
    * @default 1200
    */

src/context/updaters/selectBoxAndStartAction.ts

@@ -4,7 +4,7 @@ import type {
   MoveAction,
   RotateAction,
   RotateFreeAction,
-} from '../../types/Roi.ts';
+} from '../../types/Roi.js';
 import { assert } from '../../utilities/assert.js';
 import { changeBoxRotationCenter } from '../../utilities/box.js';
 import type { ReactRoiState } from '../roiReducer.js';

src/index.ts

@@ -9,6 +9,7 @@ export * from './types/state.js';
 export * from './types/utils.js';
 export * from './types/box.js';
 export * from './types/CommittedRoi.js';
+export * from './types/RoiList.js';
 
 export * from './hooks/useActions.js';
 export * from './hooks/useCommittedRois.js';

src/types/RoiList.ts

@@ -0,0 +1,50 @@
+import type { CSSProperties, JSX, ReactNode, SVGAttributes } from 'react';
+
+import type { Roi, RoiAction } from './Roi.ts';
+
+export interface GlobalStateCallbackPayload {
+  /**
+   * The current zoom scale.
+   */
+  zoomScale: number;
+}
+
+export type RoiCallbackPayload<TData = unknown> = Pick<
+  Roi<TData>,
+  'id' | 'box' | 'label' | 'data'
+> & {
+  action: RoiAction['type'];
+  isSelected: boolean;
+  isReadOnly: boolean;
+};
+
+export interface CustomRoiStyle {
+  /**
+   * The attributes to forward to the SVG rect element which draws the ROI
+   */
+  rectAttributes?: SVGAttributes<SVGRectElement>;
+  resizeHandlerColor?: CSSProperties['color'];
+  gridLineOpacity?: CSSProperties['opacity'];
+  /**
+   * This property allows to render custom markup inside the ROI SVG
+   * This can be used for example to render an svg pattern that can then be used as a fill in `rectAttributes`
+   * It is not meant to be used to render markup that will be displayed on screen, see `rectAttributes` to customize the ROI appearance
+   */
+  renderCustomPattern?: () => JSX.Element;
+}
+
+export type GetStyleCallback<TData = unknown> = (
+  roi: RoiCallbackPayload<TData>,
+  globalState: GlobalStateCallbackPayload,
+) => CustomRoiStyle;
+
+export type GetReadOnlyCallback<TData = unknown> = (roi: Roi<TData>) => boolean;
+export type GetOverlayOpacity<TData = unknown> = (
+  roi: RoiCallbackPayload<TData>,
+  globalState: GlobalStateCallbackPayload,
+) => number;
+
+export type RenderLabelCallback<TData = unknown> = (
+  roi: RoiCallbackPayload<TData>,
+  globalState: GlobalStateCallbackPayload,
+) => ReactNode;