diff options
author | Kristóf Marussy <kristof@marussy.com> | 2021-12-26 00:27:39 +0100 |
---|---|---|
committer | Kristóf Marussy <kristof@marussy.com> | 2021-12-26 00:36:24 +0100 |
commit | ede3747a1d5ef1dd9a6d74ba9600ca4f9bc452ed (patch) | |
tree | cd5b779f76d3c4e6a77865bbe13e0dc85deb0af1 /packages | |
parent | feat: Disable main window devtools in production (diff) | |
download | sophie-ede3747a1d5ef1dd9a6d74ba9600ca4f9bc452ed.tar.gz sophie-ede3747a1d5ef1dd9a6d74ba9600ca4f9bc452ed.tar.zst sophie-ede3747a1d5ef1dd9a6d74ba9600ca4f9bc452ed.zip |
refactor: Simplify browserViewBounds handling
Diffstat (limited to 'packages')
-rw-r--r-- | packages/main/src/index.ts | 2 | ||||
-rw-r--r-- | packages/main/src/stores/RootStore.ts | 9 | ||||
-rw-r--r-- | packages/renderer/src/components/BrowserViewPlaceholder.tsx | 71 | ||||
-rw-r--r-- | packages/shared/src/stores/SharedStore.ts | 8 |
4 files changed, 18 insertions, 72 deletions
diff --git a/packages/main/src/index.ts b/packages/main/src/index.ts index 22ae8e2..a135902 100644 --- a/packages/main/src/index.ts +++ b/packages/main/src/index.ts | |||
@@ -178,7 +178,7 @@ function createWindow(): Promise<unknown> { | |||
178 | 178 | ||
179 | browserView.webContents.userAgent = userAgent; | 179 | browserView.webContents.userAgent = userAgent; |
180 | autorun(() => { | 180 | autorun(() => { |
181 | browserView.setBounds(store.shared.browserViewBounds); | 181 | browserView.setBounds(store.browserViewBounds); |
182 | }); | 182 | }); |
183 | mainWindow.setBrowserView(browserView); | 183 | mainWindow.setBrowserView(browserView); |
184 | 184 | ||
diff --git a/packages/main/src/stores/RootStore.ts b/packages/main/src/stores/RootStore.ts index 9d138ce..c09cd4a 100644 --- a/packages/main/src/stores/RootStore.ts +++ b/packages/main/src/stores/RootStore.ts | |||
@@ -27,10 +27,16 @@ import { | |||
27 | } from '@sophie/shared'; | 27 | } from '@sophie/shared'; |
28 | 28 | ||
29 | export const rootStore = types.model('RootStore', { | 29 | export const rootStore = types.model('RootStore', { |
30 | browserViewBounds: types.model("BrowserViewBoundsStore", { | ||
31 | x: 0, | ||
32 | y: 0, | ||
33 | width: 0, | ||
34 | height: 0, | ||
35 | }), | ||
30 | shared: sharedStore, | 36 | shared: sharedStore, |
31 | }).actions((self) => ({ | 37 | }).actions((self) => ({ |
32 | setBrowserViewBounds(bounds: BrowserViewBounds) { | 38 | setBrowserViewBounds(bounds: BrowserViewBounds) { |
33 | applySnapshot(self.shared.browserViewBounds, bounds); | 39 | applySnapshot(self.browserViewBounds, bounds); |
34 | }, | 40 | }, |
35 | setPaletteMode(mode: PaletteMode) { | 41 | setPaletteMode(mode: PaletteMode) { |
36 | self.shared.shouldUseDarkColors = mode === 'dark'; | 42 | self.shared.shouldUseDarkColors = mode === 'dark'; |
@@ -41,6 +47,7 @@ export interface RootStore extends Instance<typeof rootStore> {} | |||
41 | 47 | ||
42 | export function createRootStore(): RootStore { | 48 | export function createRootStore(): RootStore { |
43 | return rootStore.create({ | 49 | return rootStore.create({ |
50 | browserViewBounds: {}, | ||
44 | shared: emptySharedStore, | 51 | shared: emptySharedStore, |
45 | }); | 52 | }); |
46 | } | 53 | } |
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 ( |
diff --git a/packages/shared/src/stores/SharedStore.ts b/packages/shared/src/stores/SharedStore.ts index 7c2b742..9c7d5ad 100644 --- a/packages/shared/src/stores/SharedStore.ts +++ b/packages/shared/src/stores/SharedStore.ts | |||
@@ -27,18 +27,10 @@ import { | |||
27 | } from 'mobx-state-tree'; | 27 | } from 'mobx-state-tree'; |
28 | 28 | ||
29 | export const sharedStore = types.model("SharedStore", { | 29 | export const sharedStore = types.model("SharedStore", { |
30 | browserViewBounds: types.model("BrowserViewBoundsStore", { | ||
31 | x: 0, | ||
32 | y: 0, | ||
33 | width: 0, | ||
34 | height: 0, | ||
35 | }), | ||
36 | shouldUseDarkColors: true, | 30 | shouldUseDarkColors: true, |
37 | }); | 31 | }); |
38 | 32 | ||
39 | export const emptySharedStore: SharedStoreSnapshotIn = { | 33 | export const emptySharedStore: SharedStoreSnapshotIn = { |
40 | browserViewBounds: { | ||
41 | }, | ||
42 | }; | 34 | }; |
43 | 35 | ||
44 | export interface SharedStore extends Instance<typeof sharedStore> {} | 36 | export interface SharedStore extends Instance<typeof sharedStore> {} |