Skip to content

Commit

Permalink
perf: 预览图片多窗口
Browse files Browse the repository at this point in the history
  • Loading branch information
@027xiguapi
027xiguapi committed May 7, 2024
1 parent 6abc62d commit 2486058
Show file tree
Hide file tree
Showing 6 changed files with 106 additions and 110 deletions.
33 changes: 13 additions & 20 deletions packages/desktop/electron/main/ipcMain.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -181,9 +181,6 @@ function initIpcMain() {
shotScreenWin.showShotScreenWin();
}, 100 * 2);
});
ipcMain.on('ss:save-img', async (e, downloadUrl) => {
shotScreenWin.downloadURLShotScreenWin(downloadUrl);
});
ipcMain.on('ss:download-img', async (e, file) => {
shotScreenWin.downloadImg(file);
});
Expand All @@ -195,33 +192,29 @@ function initIpcMain() {
});
// 图片展示
ipcMain.on('vi:open-win', (e, search) => {
viewImageWin.closeViewImageWin();
viewImageWin.openViewImageWin(search);
});
ipcMain.on('vi:close-win', () => {
viewImageWin.closeViewImageWin();
return viewImageWin.openViewImageWin(search);
});
ipcMain.on('vi:hide-win', () => {
viewImageWin.hideViewImageWin();
ipcMain.on('vi:hide-win', (e) => {
viewImageWin.hideViewImageWin(e.sender.id);
});
ipcMain.on('vi:minimize-win', () => {
viewImageWin.minimizeViewImageWin();
ipcMain.on('vi:minimize-win', (e) => {
viewImageWin.minimizeViewImageWin(e.sender.id);
});
ipcMain.on('vi:maximize-win', () => {
viewImageWin.maximizeViewImageWin();
ipcMain.on('vi:maximize-win', (e) => {
viewImageWin.maximizeViewImageWin(e.sender.id);
});
ipcMain.on('vi:unmaximize-win', () => {
viewImageWin.unmaximizeViewImageWin();
ipcMain.on('vi:unmaximize-win', (e) => {
viewImageWin.unmaximizeViewImageWin(e.sender.id);
});
ipcMain.on('vi:open-file', (e, imgUrl) => {
shell.showItemInFolder(imgUrl);
});
ipcMain.on('vi:alwaysOnTop-win', (e, isTop) => {
viewImageWin.setIsAlwaysOnTopViewImageWin(isTop);
viewImageWin.setIsAlwaysOnTopViewImageWin(e.sender.id, isTop);
});
ipcMain.handle('vi:set-always-on-top', () => {
const isAlwaysOnTop = viewImageWin.getIsAlwaysOnTopViewImageWin();
return viewImageWin.setIsAlwaysOnTopViewImageWin(!isAlwaysOnTop);
ipcMain.handle('vi:set-always-on-top', (e) => {
let isAlwaysOnTop = !viewImageWin.getIsAlwaysOnTopViewImageWin(e.sender.id);
return viewImageWin.setIsAlwaysOnTopViewImageWin(e.sender.id, isAlwaysOnTop);
});
ipcMain.handle('vi:get-imgs', async (e, img) => {
const imgs = await viewImageWin.getImgs(img);
Expand Down
2 changes: 0 additions & 2 deletions packages/desktop/electron/preload/electronAPI.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,13 +67,11 @@ contextBridge.exposeInMainWorld('electronAPI', {
sendSsHideWin: (callback) => ipcRenderer.on('ss:hide-win', () => callback()),
invokeSsGetShotScreenImg: () => ipcRenderer.invoke('ss:get-shot-screen-img'),
sendSsDownloadImg: (file: any) => ipcRenderer.send('ss:download-img', file),
sendSsSaveImg: (imgUrl: string) => ipcRenderer.send('ss:save-img', imgUrl),
sendSsOpenExternal: (imgUrl: string) => ipcRenderer.send('ss:open-external', imgUrl),
sendSsCopyImg: (imgUrl: string) => ipcRenderer.send('ss:copy-img', imgUrl),
sendSsFile: (callback) => ipcRenderer.on('ss:send-file', (e, file) => callback(file)),

//viWin
sendViCloseWin: () => ipcRenderer.send('vi:close-win'),
sendViOpenWin: (search?: string) => ipcRenderer.send('vi:open-win', search),
sendViMinimizeWin: () => ipcRenderer.send('vi:minimize-win'),
sendViMaximizeWin: () => ipcRenderer.send('vi:maximize-win'),
Expand Down
46 changes: 30 additions & 16 deletions packages/desktop/electron/win/viewImageWin.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,15 @@ import { BrowserWindow, dialog } from 'electron';
import { readFile, writeFile } from 'node:fs';
import { ICON, WEB_URL, WIN_CONFIG, preload, url } from '../main/constant';
import { getImgsByImgUrl } from '../main/utils';
import { v5 as uuidv5 } from 'uuid';

let viewImageWin: BrowserWindow | null = null;
// let viewImageWin: BrowserWindow | null = null;
let viewImageWinMap = new Map<number, BrowserWindow | null>();

function createViewImageWin(search?: any): BrowserWindow {
viewImageWin = new BrowserWindow({
let viewImageWin = new BrowserWindow({
title: 'pear-rec 图片',
icon: ICON,
// frame: WIN_CONFIG.viewImage.frame,
autoHideMenuBar: WIN_CONFIG.viewImage.autoHideMenuBar, // 自动隐藏菜单栏
webPreferences: {
preload,
Expand All @@ -18,7 +19,7 @@ function createViewImageWin(search?: any): BrowserWindow {

const imgUrl = search?.imgUrl || '';
const recordId = search?.recordId || '';
// viewImageWin.webContents.openDevTools();

if (url) {
viewImageWin.loadURL(
WEB_URL +
Expand All @@ -27,6 +28,7 @@ function createViewImageWin(search?: any): BrowserWindow {
}`,
);
// Open devTool if the app is not packaged
// viewImageWin.webContents.openDevTools();
} else {
viewImageWin.loadFile(WIN_CONFIG.viewImage.html, {
search: `?${imgUrl ? 'imgUrl=' + imgUrl : ''}${recordId ? 'recordId=' + recordId : ''}`,
Expand All @@ -37,46 +39,58 @@ function createViewImageWin(search?: any): BrowserWindow {
}

function openViewImageWin(search?: any) {
if (!viewImageWin || viewImageWin?.isDestroyed()) {
viewImageWin = createViewImageWin(search);
}
let viewImageWin = createViewImageWin(search);
const winId = viewImageWin.webContents.id;
viewImageWinMap.set(winId, viewImageWin);
viewImageWin.show();
return winId;
}

function closeViewImageWin() {
function closeViewImageWin(id) {
let viewImageWin = viewImageWinMap.get(id);
if (!(viewImageWin && viewImageWin.isDestroyed())) {
viewImageWin?.close();
}
viewImageWin = null;
}

function destroyViewImageWin() {
function destroyViewImageWin(id) {
let viewImageWin = viewImageWinMap.get(id);
viewImageWin?.destroy();
viewImageWin = null;
}

function hideViewImageWin() {
function hideViewImageWin(id) {
let viewImageWin = viewImageWinMap.get(id);
viewImageWin?.hide();
}

function minimizeViewImageWin() {
function minimizeViewImageWin(id) {
let viewImageWin = viewImageWinMap.get(id);
viewImageWin?.minimize();
}

function maximizeViewImageWin() {
function maximizeViewImageWin(id) {
let viewImageWin = viewImageWinMap.get(id);
viewImageWin?.maximize();
}

function unmaximizeViewImageWin() {
function unmaximizeViewImageWin(id) {
let viewImageWin = viewImageWinMap.get(id);
viewImageWin?.unmaximize();
}

function getIsAlwaysOnTopViewImageWin() {
function getIsAlwaysOnTopViewImageWin(id) {
let viewImageWin = viewImageWinMap.get(id);
return viewImageWin?.isAlwaysOnTop();
}

function setIsAlwaysOnTopViewImageWin(isAlwaysOnTop: boolean) {
viewImageWin?.setAlwaysOnTop(isAlwaysOnTop);
function setIsAlwaysOnTopViewImageWin(id, isAlwaysOnTop) {
let viewImageWin = viewImageWinMap.get(id);
if (viewImageWin) {
viewImageWin?.setAlwaysOnTop(isAlwaysOnTop);
}

return isAlwaysOnTop;
}

Expand Down
1 change: 0 additions & 1 deletion packages/web/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@
"axios": "^1.5.0",
"dayjs": "^1.11.7",
"dexie": "^3.2.5",
"dexie-react-hooks": "^1.1.7",
"eventemitter3": "^5.0.1",
"file-saver": "^2.0.5",
"gif.js": "^0.2.0",
Expand Down
3 changes: 1 addition & 2 deletions packages/web/src/pages/home/index.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,13 +155,12 @@
}

::-webkit-scrollbar-thumb {
background-color: transparent;
background-color: #cbcbcb;
border-radius: 4px;
}

::-webkit-scrollbar:hover {
width: 8px;
background-color: rgba(204, 201, 201, 0.2);
}

::-webkit-scrollbar-thumb:hover {
Expand Down
131 changes: 62 additions & 69 deletions packages/web/src/pages/home/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,75 +154,68 @@ const Home: React.FC = () => {
/>
</div>
<div className="content">
<div id="main">
<Card>
<Card.Grid style={gridStyle}>
<CutScreenCard ref={cscRef} />
</Card.Grid>
<Card.Grid style={gridStyle}>
<RecordScreenCard ref={rscRef} />
</Card.Grid>
<Card.Grid style={gridStyle}>
<RecordVideoCard ref={rvcRef} />
</Card.Grid>
<Card.Grid style={gridStyle}>
<RecordAudioCard ref={racRef} />
</Card.Grid>
<Card.Grid style={gridStyle}>
<EditGifCard />
</Card.Grid>
<Card.Grid style={gridStyle}>
<ViewImageCard />
</Card.Grid>
<Card.Grid style={gridStyle}>
<ViewVideoCard />
</Card.Grid>
<Card.Grid style={gridStyle}>
<ViewAudioCard />
</Card.Grid>
</Card>
</div>
<div id="image">
<Card>
<Card.Grid style={gridStyle}>
<EditGifCard />
</Card.Grid>
<Card.Grid style={gridStyle}>
<ViewImageCard />
</Card.Grid>
<Card.Grid style={gridStyle}>
<SearchImageCard user={user} />
</Card.Grid>
<Card.Grid style={gridStyle}>
<ScanImageCard />
</Card.Grid>
<Card.Grid style={gridStyle}>
<SpliceImageCard />
</Card.Grid>
<Card.Grid style={gridStyle}>
<PinImageCard />
</Card.Grid>
<Card.Grid style={gridStyle}>
<EditImageCard />
</Card.Grid>
</Card>
</div>
<div id="video">
<Card>
<Card.Grid style={gridStyle}>
<RecordVideoCard />
</Card.Grid>
<Card.Grid style={gridStyle}>
<RecordScreenCard />
</Card.Grid>
<Card.Grid style={gridStyle}>
<VideoConverterCard />
</Card.Grid>
<Card.Grid style={gridStyle}>
<RecordCanvasCard />
</Card.Grid>
</Card>
</div>
<Card>
<div id="main" />
<Card.Grid style={gridStyle}>
<CutScreenCard ref={cscRef} />
</Card.Grid>
<Card.Grid style={gridStyle}>
<RecordScreenCard ref={rscRef} />
</Card.Grid>
<Card.Grid style={gridStyle}>
<RecordVideoCard ref={rvcRef} />
</Card.Grid>
<Card.Grid style={gridStyle}>
<RecordAudioCard ref={racRef} />
</Card.Grid>
<Card.Grid style={gridStyle}>
<EditGifCard />
</Card.Grid>
<Card.Grid style={gridStyle}>
<ViewImageCard />
</Card.Grid>
<Card.Grid style={gridStyle}>
<ViewVideoCard />
</Card.Grid>
<Card.Grid style={gridStyle}>
<ViewAudioCard />
</Card.Grid>
<div id="image" />
<Card.Grid style={gridStyle}>
<EditGifCard />
</Card.Grid>
<Card.Grid style={gridStyle}>
<ViewImageCard />
</Card.Grid>
<Card.Grid style={gridStyle}>
<SearchImageCard user={user} />
</Card.Grid>
<Card.Grid style={gridStyle}>
<ScanImageCard />
</Card.Grid>
<Card.Grid style={gridStyle}>
<SpliceImageCard />
</Card.Grid>
<Card.Grid style={gridStyle}>
<PinImageCard />
</Card.Grid>
<Card.Grid style={gridStyle}>
<EditImageCard />
</Card.Grid>
<div id="video" />
<Card.Grid style={gridStyle}>
<RecordVideoCard />
</Card.Grid>
<Card.Grid style={gridStyle}>
<RecordScreenCard />
</Card.Grid>
<Card.Grid style={gridStyle}>
<VideoConverterCard />
</Card.Grid>
<Card.Grid style={gridStyle}>
<RecordCanvasCard />
</Card.Grid>
</Card>
</div>
</div>
<HomeFooter />
Expand Down

0 comments on commit 2486058

Please sign in to comment.