-
Notifications
You must be signed in to change notification settings - Fork 28
/
Copy pathuseCamera.ts
74 lines (65 loc) · 2.26 KB
/
useCamera.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
import { useCallback, useEffect, useState } from 'react';
import { CameraState } from 'sigma/types';
import { AnimateOptions } from 'sigma/utils';
import { isEqual } from '../utils';
import { useSigma } from './useSigma';
type CameraOptions = Partial<AnimateOptions> & { factor?: number };
/**
* React hook that helps you to manage the camera.
*
* ```typescript
* const {zoomIn, zoomOut, reset, goto, gotoNode } = useCamera();
*```
*
* @category Hook
*/
export function useCamera(options?: CameraOptions): {
zoomIn: (options?: CameraOptions) => void;
zoomOut: (options?: CameraOptions) => void;
reset: (options?: Partial<AnimateOptions>) => void;
goto: (state: Partial<CameraState>, options?: Partial<AnimateOptions>) => void;
gotoNode: (nodeKey: string, options?: Partial<AnimateOptions>) => void;
} {
const sigma = useSigma();
// Default camera options
const [defaultOptions, setDefaultOptions] = useState<CameraOptions>(options || {});
useEffect(() => {
setDefaultOptions((prev) => {
if (!isEqual(prev, options || {})) return options || {};
return prev;
});
}, [options]);
const zoomIn = useCallback(
(options?: CameraOptions) => {
sigma.getCamera().animatedZoom({ ...defaultOptions, ...options });
},
[sigma, defaultOptions],
);
const zoomOut = useCallback(
(options?: CameraOptions) => {
sigma.getCamera().animatedUnzoom({ ...defaultOptions, ...options });
},
[sigma, defaultOptions],
);
const reset = useCallback(
(options?: Partial<AnimateOptions>) => {
sigma.getCamera().animatedReset({ ...defaultOptions, ...options });
},
[sigma, defaultOptions],
);
const goto = useCallback(
(state: Partial<CameraState>, options?: Partial<AnimateOptions>) => {
sigma.getCamera().animate(state, { ...defaultOptions, ...options });
},
[sigma, defaultOptions],
);
const gotoNode = useCallback(
(nodeKey: string, options?: Partial<AnimateOptions>) => {
const nodeDisplayData = sigma.getNodeDisplayData(nodeKey);
if (nodeDisplayData) sigma.getCamera().animate(nodeDisplayData, { ...defaultOptions, ...options });
else console.warn(`Node ${nodeKey} not found`);
},
[sigma, defaultOptions],
);
return { zoomIn, zoomOut, reset, goto, gotoNode };
}