mirror of
https://github.com/clash-verge-rev/clash-verge-rev
synced 2025-05-05 04:43:44 +08:00
chore: editor resizing debounce
This commit is contained in:
parent
3b78d609b7
commit
23499497a3
@ -18,6 +18,7 @@ import { Notice } from "@/components/base";
|
|||||||
import { nanoid } from "nanoid";
|
import { nanoid } from "nanoid";
|
||||||
import { appWindow } from "@tauri-apps/api/window";
|
import { appWindow } from "@tauri-apps/api/window";
|
||||||
import getSystem from "@/utils/get-system";
|
import getSystem from "@/utils/get-system";
|
||||||
|
import debounce from "@/utils/debounce";
|
||||||
|
|
||||||
import * as monaco from "monaco-editor";
|
import * as monaco from "monaco-editor";
|
||||||
import MonacoEditor from "react-monaco-editor";
|
import MonacoEditor from "react-monaco-editor";
|
||||||
@ -144,12 +145,19 @@ export const EditorViewer = <T extends Language>(props: Props<T>) => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const editorResize = debounce(() => {
|
||||||
|
editorRef.current?.layout();
|
||||||
|
setTimeout(() => editorRef.current?.layout(), 500);
|
||||||
|
}, 100);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const unlistenResized = appWindow.onResized(() => {
|
const onResized = debounce(() => {
|
||||||
|
editorResize();
|
||||||
appWindow.isMaximized().then((maximized) => {
|
appWindow.isMaximized().then((maximized) => {
|
||||||
setIsMaximized(() => maximized);
|
setIsMaximized(() => maximized);
|
||||||
});
|
});
|
||||||
});
|
}, 100);
|
||||||
|
const unlistenResized = appWindow.onResized(onResized);
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
unlistenResized.then((fn) => fn());
|
unlistenResized.then((fn) => fn());
|
||||||
@ -221,14 +229,7 @@ export const EditorViewer = <T extends Language>(props: Props<T>) => {
|
|||||||
size="medium"
|
size="medium"
|
||||||
color="inherit"
|
color="inherit"
|
||||||
title={t(isMaximized ? "Minimize" : "Maximize")}
|
title={t(isMaximized ? "Minimize" : "Maximize")}
|
||||||
onClick={() =>
|
onClick={() => appWindow.toggleMaximize().then(editorResize)}
|
||||||
appWindow.toggleMaximize().then(() => {
|
|
||||||
editorRef.current?.layout();
|
|
||||||
setTimeout(() => {
|
|
||||||
editorRef.current?.layout();
|
|
||||||
}, 500);
|
|
||||||
})
|
|
||||||
}
|
|
||||||
>
|
>
|
||||||
{isMaximized ? <CloseFullscreenIcon /> : <OpenInFullIcon />}
|
{isMaximized ? <CloseFullscreenIcon /> : <OpenInFullIcon />}
|
||||||
</IconButton>
|
</IconButton>
|
||||||
|
12
src/utils/debounce.ts
Normal file
12
src/utils/debounce.ts
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
export default function debounce<T extends (...args: any[]) => void>(
|
||||||
|
func: T,
|
||||||
|
wait: number
|
||||||
|
): T {
|
||||||
|
let timeout: ReturnType<typeof setTimeout> | null = null;
|
||||||
|
return function (this: any, ...args: Parameters<T>) {
|
||||||
|
if (timeout !== null) {
|
||||||
|
clearTimeout(timeout);
|
||||||
|
}
|
||||||
|
timeout = setTimeout(() => func.apply(this, args), wait);
|
||||||
|
} as T;
|
||||||
|
}
|
Loading…
x
Reference in New Issue
Block a user