Skip to content

Commit

Permalink
chore: editor resizing debounce
Browse files Browse the repository at this point in the history
  • Loading branch information
dongchengjie committed Jul 8, 2024
1 parent df6e245 commit 49e36b6
Show file tree
Hide file tree
Showing 2 changed files with 23 additions and 10 deletions.
21 changes: 11 additions & 10 deletions src/components/profile/editor-viewer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import { Notice } from "@/components/base";
import { nanoid } from "nanoid";
import { appWindow } from "@tauri-apps/api/window";
import getSystem from "@/utils/get-system";
import debounce from "@/utils/debounce";

import * as monaco from "monaco-editor";
import MonacoEditor from "react-monaco-editor";
Expand Down Expand Up @@ -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(() => {
const unlistenResized = appWindow.onResized(() => {
const onResized = debounce(() => {
editorResize();
appWindow.isMaximized().then((maximized) => {
setIsMaximized(() => maximized);
});
});
}, 100);
const unlistenResized = appWindow.onResized(onResized);

return () => {
unlistenResized.then((fn) => fn());
Expand Down Expand Up @@ -221,14 +229,7 @@ export const EditorViewer = <T extends Language>(props: Props<T>) => {
size="medium"
color="inherit"
title={t(isMaximized ? "Minimize" : "Maximize")}
onClick={() =>
appWindow.toggleMaximize().then(() => {
editorRef.current?.layout();
setTimeout(() => {
editorRef.current?.layout();
}, 500);
})
}
onClick={() => appWindow.toggleMaximize().then(editorResize)}
>
{isMaximized ? <CloseFullscreenIcon /> : <OpenInFullIcon />}
</IconButton>
Expand Down
12 changes: 12 additions & 0 deletions src/utils/debounce.ts
Original file line number Diff line number Diff line change
@@ -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;
}

0 comments on commit 49e36b6

Please sign in to comment.