@imfusion/sdk-react 0.7.0-dev.31.g0ba92924

package/dist/useLayoutMode.js

@@ -0,0 +1,38 @@
+import { useState, useEffect, useCallback } from 'react';
+import { useImFusion } from './useImFusion.js';
+/**
+ * Returns the reactive display layout mode.
+ *
+ * Subscribes to {@link @imfusion/sdk!DisplayAutoLayouter.onModeChanged | DisplayAutoLayouter.onModeChanged}.
+ *
+ * @returns The current mode and a function to change it
+ * @throws If called outside of an {@link ImFusionProvider}
+ * @throws If called before the SDK has finished initializing
+ *
+ * @example
+ * ```tsx
+ * function LayoutPicker() {
+ *   const { mode, setMode } = useLayoutMode();
+ *   return (
+ *     <select value={mode} onChange={e => setMode(e.target.value as DisplayLayoutMode)}>
+ *       <option value="Auto">Auto</option>
+ *       <option value="Rows">Rows</option>
+ *       <option value="FocusPlusStack">Focus + Stack</option>
+ *       <option value="FocusPlusRows">Focus + Rows</option>
+ *     </select>
+ *   );
+ * }
+ * ```
+ */
+export function useLayoutMode() {
+    const imf = useImFusion();
+    const [mode, setModeState] = useState(() => imf.display.layouter().currentMode());
+    useEffect(() => {
+        const layouter = imf.display.layouter();
+        setModeState(layouter.currentMode());
+        const off = layouter.onModeChanged(setModeState);
+        return off;
+    }, [imf]);
+    const setMode = useCallback((newMode) => imf.display.layouter().setLayoutMode(newMode), [imf]);
+    return { mode, setMode };
+}

package/dist/useStableHandle.d.ts

@@ -0,0 +1,15 @@
+import type { ClassHandle } from '@imfusion/sdk';
+/**
+ * Returns a stable reference for a WASM handle, using
+ * {@link @imfusion/sdk!ClassHandle.isAliasOf | isAliasOf} instead of `===` to detect
+ * identity changes.
+ *
+ * Different JS wrapper objects can alias the same underlying C++ object.
+ * This hook ensures that the returned reference only changes when the
+ * underlying C++ object actually changes, making it safe to use in
+ * `useEffect` dependency arrays and other identity-sensitive contexts.
+ *
+ * @internal
+ */
+export declare function useStableHandle<T extends ClassHandle>(handle: T): T;
+export declare function useStableHandle<T extends ClassHandle>(handle: T | undefined): T | undefined;

package/dist/useStableHandle.js

@@ -0,0 +1,12 @@
+import { useState } from 'react';
+export function useStableHandle(handle) {
+    const [stable, setStable] = useState(handle);
+    if (handle !== undefined && stable !== undefined) {
+        if (!handle.isAliasOf(stable))
+            setStable(handle);
+    }
+    else if (handle !== stable) {
+        setStable(handle);
+    }
+    return stable;
+}

package/dist/useViewVisibility.d.ts

@@ -0,0 +1,30 @@
+import type { View } from '@imfusion/sdk';
+/**
+ * Returns the reactive 'hidden' state of a view.
+ *
+ * Subscribes to {@link @imfusion/sdk!DisplayAutoLayouter.onViewHiddenChanged | DisplayAutoLayouter.onViewHiddenChanged}
+ *
+ * @param view - The view to observe
+ * @returns The current 'hidden' state and a function to change it
+ * @throws If called outside of an {@link ImFusionProvider}
+ * @throws If called before the SDK has finished initializing
+ *
+ * @example
+ * ```tsx
+ * function ViewToggle({ view }: { view: View }) {
+ *   const { hidden, setHidden } = useViewVisibility(view);
+ *   return (
+ *     <label>
+ *       <input type="checkbox" checked={!hidden} onChange={e => setHidden(!e.target.checked)} />
+ *       Show view
+ *     </label>
+ *   );
+ * }
+ * ```
+ *
+ * @see {@link useLayoutMode}
+ */
+export declare function useViewVisibility(view: View): {
+    hidden: boolean;
+    setHidden: (hidden: boolean) => void;
+};

package/dist/useViewVisibility.js

@@ -0,0 +1,45 @@
+import { useState, useEffect, useCallback } from 'react';
+import { useImFusion } from './useImFusion.js';
+import { useStableHandle } from './useStableHandle.js';
+/**
+ * Returns the reactive 'hidden' state of a view.
+ *
+ * Subscribes to {@link @imfusion/sdk!DisplayAutoLayouter.onViewHiddenChanged | DisplayAutoLayouter.onViewHiddenChanged}
+ *
+ * @param view - The view to observe
+ * @returns The current 'hidden' state and a function to change it
+ * @throws If called outside of an {@link ImFusionProvider}
+ * @throws If called before the SDK has finished initializing
+ *
+ * @example
+ * ```tsx
+ * function ViewToggle({ view }: { view: View }) {
+ *   const { hidden, setHidden } = useViewVisibility(view);
+ *   return (
+ *     <label>
+ *       <input type="checkbox" checked={!hidden} onChange={e => setHidden(!e.target.checked)} />
+ *       Show view
+ *     </label>
+ *   );
+ * }
+ * ```
+ *
+ * @see {@link useLayoutMode}
+ */
+export function useViewVisibility(view) {
+    const imf = useImFusion();
+    const stableView = useStableHandle(view);
+    const [hidden, setHiddenState] = useState(() => imf.display.layouter().isViewHidden(stableView));
+    useEffect(() => {
+        const layouter = imf.display.layouter();
+        setHiddenState(layouter.isViewHidden(stableView));
+        const off = layouter.onViewHiddenChanged((changedView, isHidden) => {
+            if (changedView.isAliasOf(stableView)) {
+                setHiddenState(isHidden);
+            }
+        });
+        return off;
+    }, [imf, stableView]);
+    const setHidden = useCallback((value) => imf.display.layouter().setViewHidden(stableView, value), [imf, stableView]);
+    return { hidden, setHidden };
+}

package/dist/useVisibleData.d.ts

@@ -0,0 +1,21 @@
+import type { Data, HandleArray } from '@imfusion/sdk';
+/**
+ * Returns the reactive list of currently visible datasets.
+ *
+ * Subscribes to {@link @imfusion/sdk!RadiologyViewGroup.onVisibleDataChanged | RadiologyViewGroup.onVisibleDataChanged}.
+ *
+ * @returns A {@link @imfusion/sdk!HandleArray | HandleArray} of visible datasets
+ * @throws If called outside of an {@link ImFusionProvider}
+ * @throws If called before the SDK has finished initializing
+ *
+ * @example
+ * ```tsx
+ * function VisibleDataInfo() {
+ *   const visibleData = useVisibleData();
+ *   return <p>Visible: {visibleData.map(d => d.name).join(', ')}</p>;
+ * }
+ * ```
+ *
+ * @see {@link useData}
+ */
+export declare function useVisibleData(): HandleArray<Data>;

package/dist/useVisibleData.js

@@ -0,0 +1,32 @@
+import { useState, useEffect } from 'react';
+import { useImFusion } from './useImFusion.js';
+/**
+ * Returns the reactive list of currently visible datasets.
+ *
+ * Subscribes to {@link @imfusion/sdk!RadiologyViewGroup.onVisibleDataChanged | RadiologyViewGroup.onVisibleDataChanged}.
+ *
+ * @returns A {@link @imfusion/sdk!HandleArray | HandleArray} of visible datasets
+ * @throws If called outside of an {@link ImFusionProvider}
+ * @throws If called before the SDK has finished initializing
+ *
+ * @example
+ * ```tsx
+ * function VisibleDataInfo() {
+ *   const visibleData = useVisibleData();
+ *   return <p>Visible: {visibleData.map(d => d.name).join(', ')}</p>;
+ * }
+ * ```
+ *
+ * @see {@link useData}
+ */
+export function useVisibleData() {
+    const imf = useImFusion();
+    const [visibleData, setVisibleData] = useState(() => imf.display.viewGroup().visibleData());
+    useEffect(() => {
+        const off = imf.display.viewGroup().onVisibleDataChanged((_before, after) => {
+            setVisibleData(after);
+        });
+        return off;
+    }, [imf]);
+    return visibleData;
+}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@imfusion/sdk-react",
+  "version": "0.7.0-dev.31.g0ba92924",
+  "description": "React bindings for ImFusion WebSDK",
+  "author": "ImFusion GmbH",
+  "license": "SEE LICENSE IN License.rtf",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ImFusionGmbH/websdk-demo.git"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "restricted"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "prepack": "npm run build",
+    "test": "vitest",
+    "test:ci": "vitest run --coverage --reporter=default --reporter=junit --outputFile=reports/vitest.junit.xml",
+    "posttest:ci": "tsx -- ../coverage/parse-coverage.ts"
+  },
+  "files": [
+    "dist/**",
+    "License.rtf"
+  ],
+  "peerDependencies": {
+    "@imfusion/sdk": "0.7.0-dev.31.g0ba92924",
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@imfusion/sdk": "*",
+    "@testing-library/react": "^16.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitest/browser-playwright": "4.0.1",
+    "playwright": "1.55.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "serve-static": "^2.2.0",
+    "typescript": "^5.7.2"
+  }
+}