@imfusion/sdk-react 1.3.1-dev.1.g3f06a0fc → 1.3.1-dev.10.ge5572efd

package/README.md

@@ -1,4 +1,4 @@
-# ImFusion Web SDK React Bindings
+# ImFusion React SDK
 
 React components and hooks for using the ImFusion Web SDK in React applications. This package
 provides a canvas, SDK lifecycle components, and hooks for working with medical image data.
@@ -6,14 +6,14 @@ It builds on [@imfusion/sdk](https://www.npmjs.com/package/@imfusion/sdk).
 
 Documentation: [docs.imfusion.com/websdk](https://docs.imfusion.com/websdk).
 
-## Getting Started
-
-Install both packages in your React application:
+## Installation
 
 ```sh
 npm install @imfusion/sdk @imfusion/sdk-react
 ```
 
+## Getting Started
+
 Wrap your app with `ImFusionProvider`, add a canvas, and use the lifecycle components:
 
 ```tsx

package/dist/index.d.ts

@@ -17,3 +17,4 @@ export { useFrameSelection } from './useFrameSelection.js';
 export { useContextMenu } from './useContextMenu.js';
 export { useLabelConfig } from './useLabelConfig.js';
 export { useThumbnail } from './useThumbnail.js';
+export { useBrush } from './useBrush.js';

package/dist/index.js

@@ -17,3 +17,4 @@ export { useFrameSelection } from './useFrameSelection.js';
 export { useContextMenu } from './useContextMenu.js';
 export { useLabelConfig } from './useLabelConfig.js';
 export { useThumbnail } from './useThumbnail.js';
+export { useBrush } from './useBrush.js';

package/dist/useBrush.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Returns the reactive Brush state.
+ *
+ * Subscribes to {@link @imfusion/sdk!Brush.onBrushSettingsChanged | onBrushSettingsChanged} so the component re-renders
+ * when the brush's settings change.
+ *
+ * @returns The {@link @imfusion/sdk!Brush | Brush} handle
+ * @throws If called outside of an {@link ImFusionProvider}
+ * @throws If called before the SDK has finished initializing
+ *
+ * @example
+ * ```tsx
+ * function BrushAdaptivenessSlider() {
+ *   const brush = useBrush();
+ *
+ *   return (
+ *     <input
+ *       type="range"
+ *       min={0}
+ *       max={1}
+ *       value={brush.adaptiveness}
+ *       step={0.01}
+ *       onChange={(event) => {
+ *         brush.adaptiveness = parseFloat(event.target.value);
+ *       }}
+ *     ></input>
+ *   );
+ * }
+ * ```
+ */
+export declare function useBrush(): import("@imfusion/sdk").Brush;

package/dist/useBrush.js

@@ -0,0 +1,44 @@
+import { useState, useEffect, useReducer } from 'react';
+import { useImFusion } from './useImFusion.js';
+/**
+ * Returns the reactive Brush state.
+ *
+ * Subscribes to {@link @imfusion/sdk!Brush.onBrushSettingsChanged | onBrushSettingsChanged} so the component re-renders
+ * when the brush's settings change.
+ *
+ * @returns The {@link @imfusion/sdk!Brush | Brush} handle
+ * @throws If called outside of an {@link ImFusionProvider}
+ * @throws If called before the SDK has finished initializing
+ *
+ * @example
+ * ```tsx
+ * function BrushAdaptivenessSlider() {
+ *   const brush = useBrush();
+ *
+ *   return (
+ *     <input
+ *       type="range"
+ *       min={0}
+ *       max={1}
+ *       value={brush.adaptiveness}
+ *       step={0.01}
+ *       onChange={(event) => {
+ *         brush.adaptiveness = parseFloat(event.target.value);
+ *       }}
+ *     ></input>
+ *   );
+ * }
+ * ```
+ */
+export function useBrush() {
+    const imf = useImFusion();
+    const [brush, setBrush] = useState(() => imf.brush);
+    // Triggers a re-render without mirroring all C++ properties as React state.
+    const [, forceUpdate] = useReducer((x) => x + 1, 0);
+    useEffect(function syncBrush() {
+        setBrush(imf.brush);
+        const off = brush.onBrushSettingsChanged(() => forceUpdate());
+        return off;
+    }, [imf, brush]);
+    return brush;
+}

package/dist/useDisplayOptions.js

@@ -32,7 +32,7 @@ import { useStableHandle } from './useStableHandle.js';
 export function useDisplayOptions2d(sis) {
     useImFusion();
     // Triggers a re-render without mirroring all C++ properties as React state.
-    const [, forceUpdate] = useReducer((x) => !x, false);
+    const [, forceUpdate] = useReducer((x) => x + 1, 0);
     const stableSis = useStableHandle(sis);
     const [options, setOptions] = useState(() => stableSis.displayOptions2d());
     useEffect(() => {
@@ -74,7 +74,7 @@ export function useDisplayOptions2d(sis) {
 export function useDisplayOptions3d(sis) {
     useImFusion();
     // Triggers a re-render without mirroring all C++ properties as React state.
-    const [, forceUpdate] = useReducer((x) => !x, false);
+    const [, forceUpdate] = useReducer((x) => x + 1, 0);
     const stableSis = useStableHandle(sis);
     const [options, setOptions] = useState(() => stableSis.displayOptions3d());
     useEffect(() => {

package/dist/useLabelConfig.d.ts

@@ -2,7 +2,7 @@ import { LabelConfig, SharedImageSet } from '@imfusion/sdk';
 /**
  * Returns the reactive `LabelConfigMap` state of a label map.
  *
- * Subscribes to {@link @imfusion/sdk!EmbindModule.onLabelConfigChanged | onLabelConfigChanged}
+ * Subscribes to {@link @imfusion/sdk!Bindings.onLabelConfigChanged | onLabelConfigChanged}
  *
  * @param labelMap - The label map to observe
  * @returns The current label config state as a `Map<number, LabelConfig>`, a function to change the whole map and a function to change individual entries

package/dist/useLabelConfig.js

@@ -4,7 +4,7 @@ import { useStableHandle } from './useStableHandle.js';
 /**
  * Returns the reactive `LabelConfigMap` state of a label map.
  *
- * Subscribes to {@link @imfusion/sdk!EmbindModule.onLabelConfigChanged | onLabelConfigChanged}
+ * Subscribes to {@link @imfusion/sdk!Bindings.onLabelConfigChanged | onLabelConfigChanged}
  *
  * @param labelMap - The label map to observe
  * @returns The current label config state as a `Map<number, LabelConfig>`, a function to change the whole map and a function to change individual entries

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imfusion/sdk-react",
-  "version": "1.3.1-dev.1.g3f06a0fc",
+  "version": "1.3.1-dev.10.ge5572efd",
   "description": "React bindings for ImFusion Web SDK",
   "homepage": "https://docs.imfusion.com/websdk",
   "author": "ImFusion GmbH",
@@ -30,7 +30,7 @@
     "LICENSE.txt"
   ],
   "peerDependencies": {
-    "@imfusion/sdk": "1.3.1-dev.1.g3f06a0fc",
+    "@imfusion/sdk": "1.3.1-dev.10.ge5572efd",
     "react": ">=18"
   },
   "devDependencies": {