diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..8de0620 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,10 @@ +# CHANGELOG + +## 0.0.2 (2021/05/23) + +* ADD: Paginate to save memory +* ADD: Use all cpu cores to increase the speed of image processing + +## 0.0.1 (2021/01/04) + +Initial release \ No newline at end of file diff --git a/gui/renderer/App.tsx b/gui/renderer/App.tsx index f0b5637..ef5caac 100644 --- a/gui/renderer/App.tsx +++ b/gui/renderer/App.tsx @@ -177,20 +177,29 @@ const renderErrorDetail = (ed: ErrorDetail) => { ); }; +type PageInfo = { + imageFileCount: number; + page: number; + dirPath: string; +}; + const App: React.FC = () => { const [dirPath, setDirPath] = useState(""); const [running, setRunning] = useState< "init" | "starting" | "started" | "finish" | "error" >("init"); const [interm, setInterm] = useState(null); - const [imageFileCount, setImageFileCount] = useState(0); const [imageFiles, setImageFiles] = useState([]); const [viewerMode, setViewerMode] = useState({ enabled: false, }); const [algo, setAlgo] = useState(algos[0]); const [errorDetail, setErrorDetail] = useState(null); - const [page, setPage] = useState(1); + const [pageInfo, setPageInfo] = useState({ + imageFileCount: 0, + page: 1, + dirPath: "", + }); async function clickDirectoryChooseButton() { const dir = await window.gahi.chooseDirectory(); @@ -203,13 +212,14 @@ const App: React.FC = () => { }; window.gahi.cli.addIntermListenser(listener); const resultsListener = async (_e: any, d: any) => { - setPage(1); setViewerMode({ enabled: false }); - setImageFileCount(d as number); + setPageInfo({ + imageFileCount: d.imageFileCount, + page: 1, + dirPath: d.dirPath, + }); setRunning("finish"); setInterm(null); - const ifs = await window.gahi.cli.fetchImagefiles(0, 10); - setImageFiles(ifs); }; window.gahi.cli.addResultsListenser(resultsListener); const errorListener = (_e: any, d: any) => { @@ -243,11 +253,14 @@ const App: React.FC = () => { useEffect(() => { const func = async () => { - const ifs = await window.gahi.cli.fetchImagefiles((page - 1) * 10, 10); + const ifs = await window.gahi.cli.fetchImagefiles( + (pageInfo.page - 1) * 10, + 10 + ); setImageFiles(ifs); }; func(); - }, [page]); + }, [pageInfo]); useLayoutEffect(() => { if ( @@ -343,7 +356,7 @@ const App: React.FC = () => { ? renderErrorDetail(errorDetail) : ""}
- {imageFileCount === 0 && running === "finish" ? ( + {pageInfo.imageFileCount === 0 && running === "finish" ? (
@@ -387,7 +400,7 @@ const App: React.FC = () => { ); })}
- {imageFileCount === 0 ? ( + {pageInfo.imageFileCount === 0 ? ( "" ) : ( @@ -395,18 +408,29 @@ const App: React.FC = () => { previousLabel={"<"} nextLabel={">"} breakLabel="..." - pageCount={Math.floor(imageFileCount / 10) + 1} + pageCount={ + // This formula reprensenting + // 0-10: 1 + // 11-20: 2 + // 21-30: 3 + // ... + pageInfo.imageFileCount === 0 + ? 1 + : Math.floor((pageInfo.imageFileCount - 1) / 10) + 1 + } marginPagesDisplayed={2} pageRangeDisplayed={5} onPageChange={(d) => { console.log(d); // prevent reset ImageFiles when transit from viewer mode - if (d.selected + 1 !== page) { + if (d.selected + 1 !== pageInfo.page) { setImageFiles([]); - setPage(d.selected + 1); + setPageInfo((p) => { + return { ...p, ...{ page: d.selected + 1 } }; + }); } }} - initialPage={page - 1} + forcePage={pageInfo.page - 1} // For Bootstrap 4 containerClassName="pagination" pageClassName="page-item" diff --git a/gui/src/main.ts b/gui/src/main.ts index e398ec9..a457bc9 100644 --- a/gui/src/main.ts +++ b/gui/src/main.ts @@ -97,7 +97,10 @@ ipcMain.on("start-cli", async (ev, dirPath, algo) => { mainWindow.setProgressBar(d.finished / d.total); } else if (d.type === "finish") { results = d.results; - ev.reply("cli-results", results.length); + ev.reply("cli-results", { + imageFileCount: results.length, + dirPath, + }); mainWindow.setProgressBar(-1); } else { console.log(d);