/
useCamera.ts
71 lines (62 loc) · 2.22 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
import { useCallback, useEffect, useState } from "react";
import { AnimateOptions } from "sigma/utils";
import { CameraState } from "sigma/types";
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(() => {
if (!isEqual(defaultOptions, options || {})) setDefaultOptions(options || {});
}, [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.log(`Node ${nodeKey} not found`);
},
[sigma, defaultOptions],
);
return { zoomIn, zoomOut, reset, goto, gotoNode };
}