diff options
Diffstat (limited to 'packages/renderer/src/components/BrowserViewPlaceholder.tsx')
-rw-r--r-- | packages/renderer/src/components/BrowserViewPlaceholder.tsx | 14 |
1 files changed, 7 insertions, 7 deletions
diff --git a/packages/renderer/src/components/BrowserViewPlaceholder.tsx b/packages/renderer/src/components/BrowserViewPlaceholder.tsx index 9bd1176..2bfc9b0 100644 --- a/packages/renderer/src/components/BrowserViewPlaceholder.tsx +++ b/packages/renderer/src/components/BrowserViewPlaceholder.tsx | |||
@@ -22,29 +22,29 @@ import Box from '@mui/material/Box'; | |||
22 | import throttle from 'lodash-es/throttle'; | 22 | import throttle from 'lodash-es/throttle'; |
23 | import React, { ReactNode, useCallback, useRef } from 'react'; | 23 | import React, { ReactNode, useCallback, useRef } from 'react'; |
24 | 24 | ||
25 | import { useStore } from './StoreProvider'; | 25 | import Service from '../stores/Service'; |
26 | 26 | ||
27 | function BrowserViewPlaceholder({ | 27 | function BrowserViewPlaceholder({ |
28 | service, | ||
28 | children, | 29 | children, |
29 | }: { | 30 | }: { |
31 | service: Service; | ||
30 | children?: ReactNode; | 32 | children?: ReactNode; |
31 | }): JSX.Element { | 33 | }): JSX.Element { |
32 | const store = useStore(); | ||
33 | |||
34 | // eslint-disable-next-line react-hooks/exhaustive-deps -- react-hooks doesn't support `throttle`. | 34 | // eslint-disable-next-line react-hooks/exhaustive-deps -- react-hooks doesn't support `throttle`. |
35 | const onResize = useCallback( | 35 | const onResize = useCallback( |
36 | throttle(([entry]: ResizeObserverEntry[]) => { | 36 | throttle(([entry]: ResizeObserverEntry[]) => { |
37 | if (entry) { | 37 | if (entry) { |
38 | const { x, y, width, height } = entry.target.getBoundingClientRect(); | 38 | const { x, y, width, height } = entry.target.getBoundingClientRect(); |
39 | store.setBrowserViewBounds({ | 39 | service.setBrowserViewBounds({ |
40 | x: Math.round(x), | 40 | x: Math.round(x), |
41 | y: Math.round(y), | 41 | y: Math.round(y), |
42 | width: Math.round(width), | 42 | width: Math.round(width), |
43 | height: Math.round(height), | 43 | height: Math.round(height), |
44 | }); | 44 | }); |
45 | } | 45 | } |
46 | }, 40), | 46 | }, 100), |
47 | [store], | 47 | [service], |
48 | ); | 48 | ); |
49 | 49 | ||
50 | const resizeObserverRef = useRef<ResizeObserver | undefined>(); | 50 | const resizeObserverRef = useRef<ResizeObserver | undefined>(); |
@@ -61,7 +61,7 @@ function BrowserViewPlaceholder({ | |||
61 | resizeObserverRef.current = new ResizeObserver(onResize); | 61 | resizeObserverRef.current = new ResizeObserver(onResize); |
62 | resizeObserverRef.current.observe(element); | 62 | resizeObserverRef.current.observe(element); |
63 | }, | 63 | }, |
64 | [onResize, resizeObserverRef], | 64 | [onResize], |
65 | ); | 65 | ); |
66 | 66 | ||
67 | return ( | 67 | return ( |