diff options
Diffstat (limited to 'packages/renderer/src')
-rw-r--r-- | packages/renderer/src/components/BrowserViewPlaceholder.tsx | 71 |
1 files changed, 9 insertions, 62 deletions
diff --git a/packages/renderer/src/components/BrowserViewPlaceholder.tsx b/packages/renderer/src/components/BrowserViewPlaceholder.tsx index 0187fee..1ea03c8 100644 --- a/packages/renderer/src/components/BrowserViewPlaceholder.tsx +++ b/packages/renderer/src/components/BrowserViewPlaceholder.tsx | |||
@@ -21,97 +21,44 @@ | |||
21 | import { throttle } from 'lodash'; | 21 | import { throttle } from 'lodash'; |
22 | import { observer } from 'mobx-react-lite'; | 22 | import { observer } from 'mobx-react-lite'; |
23 | import Box from '@mui/material/Box'; | 23 | import Box from '@mui/material/Box'; |
24 | import React, { | 24 | import React, { useCallback, useRef } from 'react'; |
25 | useCallback, | ||
26 | useEffect, | ||
27 | useRef, | ||
28 | useState, | ||
29 | } from 'react'; | ||
30 | import type { BrowserViewBounds } from '@sophie/shared'; | ||
31 | 25 | ||
32 | import { useStore } from './StoreProvider'; | 26 | import { useStore } from './StoreProvider'; |
33 | 27 | ||
34 | export const BrowserViewPlaceholder = observer(function BrowserViewPlaceholder() { | 28 | export const BrowserViewPlaceholder = observer(function BrowserViewPlaceholder() { |
35 | const { | 29 | const { |
36 | shared: { | ||
37 | browserViewBounds: { | ||
38 | x: storeX, | ||
39 | y: storeY, | ||
40 | width: storeWidth, | ||
41 | height: storeHeight, | ||
42 | }, | ||
43 | }, | ||
44 | setBrowserViewBounds, | 30 | setBrowserViewBounds, |
45 | } = useStore(); | 31 | } = useStore(); |
46 | 32 | ||
47 | const [ | 33 | const onResize = useCallback(throttle(([entry]: ResizeObserverEntry[]) => { |
48 | { | 34 | if (entry) { |
49 | x: currentX, | ||
50 | y: currentY, | ||
51 | width: currentWidth, | ||
52 | height: currentHeight, | ||
53 | }, | ||
54 | setBounds, | ||
55 | ] = useState<BrowserViewBounds>({ | ||
56 | x: 0, | ||
57 | y: 0, | ||
58 | width: 0, | ||
59 | height: 0, | ||
60 | }); | ||
61 | |||
62 | useEffect(() => { | ||
63 | if (storeX !== currentX | ||
64 | || storeY !== currentY | ||
65 | || storeWidth !== currentWidth | ||
66 | || storeHeight !== currentHeight) { | ||
67 | setBrowserViewBounds({ | ||
68 | x: currentX, | ||
69 | y: currentY, | ||
70 | width: currentWidth, | ||
71 | height: currentHeight, | ||
72 | }); | ||
73 | } | ||
74 | }, [ | ||
75 | storeX, | ||
76 | storeY, | ||
77 | storeWidth, | ||
78 | storeHeight, | ||
79 | setBrowserViewBounds, | ||
80 | currentX, | ||
81 | currentY, | ||
82 | currentWidth, | ||
83 | currentHeight, | ||
84 | ]); | ||
85 | |||
86 | const onResize = useCallback(throttle(([boxEntry]: ResizeObserverEntry[]) => { | ||
87 | if (boxEntry) { | ||
88 | const { | 35 | const { |
89 | x, | 36 | x, |
90 | y, | 37 | y, |
91 | width, | 38 | width, |
92 | height, | 39 | height, |
93 | } = boxEntry.target.getBoundingClientRect(); | 40 | } = entry.target.getBoundingClientRect(); |
94 | setBounds({ | 41 | setBrowserViewBounds({ |
95 | x, | 42 | x, |
96 | y, | 43 | y, |
97 | width, | 44 | width, |
98 | height, | 45 | height, |
99 | }); | 46 | }); |
100 | } | 47 | } |
101 | }, 100), [setBounds]); | 48 | }, 100), [setBrowserViewBounds]); |
102 | 49 | ||
103 | const resizeObserverRef = useRef<ResizeObserver | null>(null); | 50 | const resizeObserverRef = useRef<ResizeObserver | null>(null); |
104 | 51 | ||
105 | const ref = useCallback((box: HTMLElement | null) => { | 52 | const ref = useCallback((element: HTMLElement | null) => { |
106 | if (resizeObserverRef.current !== null) { | 53 | if (resizeObserverRef.current !== null) { |
107 | resizeObserverRef.current.disconnect(); | 54 | resizeObserverRef.current.disconnect(); |
108 | } | 55 | } |
109 | if (box === null) { | 56 | if (element === null) { |
110 | resizeObserverRef.current = null; | 57 | resizeObserverRef.current = null; |
111 | return; | 58 | return; |
112 | } | 59 | } |
113 | resizeObserverRef.current = new ResizeObserver(onResize); | 60 | resizeObserverRef.current = new ResizeObserver(onResize); |
114 | resizeObserverRef.current.observe(box); | 61 | resizeObserverRef.current.observe(element); |
115 | }, [onResize, resizeObserverRef]); | 62 | }, [onResize, resizeObserverRef]); |
116 | 63 | ||
117 | return ( | 64 | return ( |