@imfusion/sdk-react 0.7.0-dev.46.g3dd09010 → 0.7.0-dev.47.g0708ae38
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +0 -1
- package/dist/index.js +0 -1
- package/package.json +2 -2
- package/dist/useThumbnail.d.ts +0 -27
- package/dist/useThumbnail.js +0 -69
package/dist/index.d.ts
CHANGED
|
@@ -15,4 +15,3 @@ export { useViewVisibility } from './useViewVisibility.js';
|
|
|
15
15
|
export { useDisplayOptions2d, useDisplayOptions3d } from './useDisplayOptions.js';
|
|
16
16
|
export { useFrameSelection } from './useFrameSelection.js';
|
|
17
17
|
export { useContextMenu } from './useContextMenu.js';
|
|
18
|
-
export { useThumbnail } from './useThumbnail.js';
|
package/dist/index.js
CHANGED
|
@@ -15,4 +15,3 @@ export { useViewVisibility } from './useViewVisibility.js';
|
|
|
15
15
|
export { useDisplayOptions2d, useDisplayOptions3d } from './useDisplayOptions.js';
|
|
16
16
|
export { useFrameSelection } from './useFrameSelection.js';
|
|
17
17
|
export { useContextMenu } from './useContextMenu.js';
|
|
18
|
-
export { useThumbnail } from './useThumbnail.js';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@imfusion/sdk-react",
|
|
3
|
-
"version": "0.7.0-dev.
|
|
3
|
+
"version": "0.7.0-dev.47.g0708ae38",
|
|
4
4
|
"description": "React bindings for ImFusion Web SDK",
|
|
5
5
|
"author": "ImFusion GmbH",
|
|
6
6
|
"license": "SEE LICENSE IN License.rtf",
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"License.rtf"
|
|
30
30
|
],
|
|
31
31
|
"peerDependencies": {
|
|
32
|
-
"@imfusion/sdk": "0.7.0-dev.
|
|
32
|
+
"@imfusion/sdk": "0.7.0-dev.47.g0708ae38",
|
|
33
33
|
"react": ">=18"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
package/dist/useThumbnail.d.ts
DELETED
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import type { Data } from '@imfusion/sdk';
|
|
2
|
-
/**
|
|
3
|
-
* Returns an object URL pointing at a PNG thumbnail of `data`.
|
|
4
|
-
* Returns `null` when:
|
|
5
|
-
* - Thumbnail is still being generated or
|
|
6
|
-
* - `data` is nullish, or if it does not support thumbnails.
|
|
7
|
-
*
|
|
8
|
-
* The thumbnail is generated asynchronously via `requestIdleCallback` (falling
|
|
9
|
-
* back to a 0ms `setTimeout`).
|
|
10
|
-
*
|
|
11
|
-
* @param data - The dataset to generate a thumbnail for. Currently only supports `SharedImageSet`.
|
|
12
|
-
* @param options.width - Logical width in CSS pixels (default 200).
|
|
13
|
-
* @param options.height - Logical height in CSS pixels (default 200).
|
|
14
|
-
* @returns A blob URL or `null`.
|
|
15
|
-
*
|
|
16
|
-
* @example
|
|
17
|
-
* ```tsx
|
|
18
|
-
* function DatasetCard({ data }: { data: Data }) {
|
|
19
|
-
* const url = useThumbnail(data);
|
|
20
|
-
* return url ? <img src={url} alt={data.name} /> : <Placeholder />;
|
|
21
|
-
* }
|
|
22
|
-
* ```
|
|
23
|
-
*/
|
|
24
|
-
export declare function useThumbnail(data: Data | null | undefined, options?: {
|
|
25
|
-
width?: number;
|
|
26
|
-
height?: number;
|
|
27
|
-
}): string | null;
|
package/dist/useThumbnail.js
DELETED
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
import { useEffect, useState } from 'react';
|
|
2
|
-
import { useImFusion } from './useImFusion.js';
|
|
3
|
-
import { useStableHandle } from './useStableHandle.js';
|
|
4
|
-
/**
|
|
5
|
-
* Returns an object URL pointing at a PNG thumbnail of `data`.
|
|
6
|
-
* Returns `null` when:
|
|
7
|
-
* - Thumbnail is still being generated or
|
|
8
|
-
* - `data` is nullish, or if it does not support thumbnails.
|
|
9
|
-
*
|
|
10
|
-
* The thumbnail is generated asynchronously via `requestIdleCallback` (falling
|
|
11
|
-
* back to a 0ms `setTimeout`).
|
|
12
|
-
*
|
|
13
|
-
* @param data - The dataset to generate a thumbnail for. Currently only supports `SharedImageSet`.
|
|
14
|
-
* @param options.width - Logical width in CSS pixels (default 200).
|
|
15
|
-
* @param options.height - Logical height in CSS pixels (default 200).
|
|
16
|
-
* @returns A blob URL or `null`.
|
|
17
|
-
*
|
|
18
|
-
* @example
|
|
19
|
-
* ```tsx
|
|
20
|
-
* function DatasetCard({ data }: { data: Data }) {
|
|
21
|
-
* const url = useThumbnail(data);
|
|
22
|
-
* return url ? <img src={url} alt={data.name} /> : <Placeholder />;
|
|
23
|
-
* }
|
|
24
|
-
* ```
|
|
25
|
-
*/
|
|
26
|
-
export function useThumbnail(data, options) {
|
|
27
|
-
const imf = useImFusion();
|
|
28
|
-
const { width = 200, height = 200 } = options ?? {};
|
|
29
|
-
const stable = useStableHandle(data ?? undefined);
|
|
30
|
-
const [url, setUrl] = useState(null);
|
|
31
|
-
useEffect(() => {
|
|
32
|
-
if (!(stable instanceof imf.bindings.SharedImageSet)) {
|
|
33
|
-
setUrl(null);
|
|
34
|
-
return;
|
|
35
|
-
}
|
|
36
|
-
let cancelled = false;
|
|
37
|
-
let objectUrl = null;
|
|
38
|
-
const generate = () => {
|
|
39
|
-
if (cancelled)
|
|
40
|
-
return;
|
|
41
|
-
try {
|
|
42
|
-
const frame = Math.floor(stable.size() / 2);
|
|
43
|
-
const widthPx = Math.round(width * imf.dpiScale);
|
|
44
|
-
const heightPx = Math.round(height * imf.dpiScale);
|
|
45
|
-
const bytes = stable.thumbnail(frame, widthPx, heightPx);
|
|
46
|
-
objectUrl = URL.createObjectURL(new Blob([bytes], { type: 'image/png' }));
|
|
47
|
-
if (!cancelled)
|
|
48
|
-
setUrl(objectUrl);
|
|
49
|
-
}
|
|
50
|
-
catch (err) {
|
|
51
|
-
console.warn('Thumbnail generation failed for dataset:', stable.name, err);
|
|
52
|
-
if (!cancelled)
|
|
53
|
-
setUrl(null);
|
|
54
|
-
}
|
|
55
|
-
};
|
|
56
|
-
// Safari doesn't support requestIdleCallback yet.
|
|
57
|
-
const id = window.requestIdleCallback?.(generate) ?? window.setTimeout(generate, 0);
|
|
58
|
-
return () => {
|
|
59
|
-
cancelled = true;
|
|
60
|
-
if (window.cancelIdleCallback)
|
|
61
|
-
window.cancelIdleCallback(id);
|
|
62
|
-
else
|
|
63
|
-
window.clearTimeout(id);
|
|
64
|
-
if (objectUrl)
|
|
65
|
-
URL.revokeObjectURL(objectUrl);
|
|
66
|
-
};
|
|
67
|
-
}, [stable, width, height, imf, imf.dpiScale]);
|
|
68
|
-
return url;
|
|
69
|
-
}
|