feat: add new design

BREAKING CHANGE: new design

.github/workflows/release.yml

@@ -43,3 +43,22 @@ jobs:
  env:
  GH_TOKEN: ${{ secrets.GH_TOKEN }}
  run: npm run publish-linux-app
+
+ release-mac:
+ name: Release MacOS
+ runs-on: macos-latest
+ steps:
+ - name: Checkout
+ uses: actions/checkout@v3
+ - name: Setup Node.js
+ uses: actions/setup-node@v3
+ with:
+ node-version: 16.x
+ - name: Install dependencies
+ run: yarn install
+ - name: Build
+ run: npm run build
+ - name: Release
+ env:
+ GH_TOKEN: ${{ secrets.GH_TOKEN }}
+ run: npm run publish-mac-app

main/background.js

@@ -1,8 +1,8 @@
-const { app, ipcMain, dialog } = require('electron');
+const { app, ipcMain, dialog, remote, Menu, MenuItem } = require('electron');
 const serve = require('electron-serve');
 const path = require('path');
 const isDev = require('electron-is-dev');
-const { upscayl, autoUpdate, createWindow, store } = require('./helpers/');
+const { upscayl, autoUpdate, createWindow, store, utils } = require('./helpers/');
 
 if (isDev) {
  require('electron-reload')(__dirname, {
@@ -15,16 +15,24 @@ if (!isDev) {
 
 let mainWindow;
 let splashWindow;
-let files = [];
-let saveDirectory = [];
+let file = [];
+let filePathPosix = [];
+let temp = [];
 let flag = false;
 app.on('ready', async () => {
+ const userDataPath = (app || remote.app).getPath('userData');
  const settings = store({
  configName: 'settings',
  defaults: {
  locale: app.getLocaleCountryCode().toLowerCase(),
  },
  });
+ const previews = store({
+ configName: 'previews',
+ defaults: {
+ paths: [],
+ },
+ });
  ipcMain.handle('get-lang', async (e) => {
  const lang = await settings.get('locale');
  return lang;
@@ -34,6 +42,10 @@ app.on('ready', async () => {
  const lang = await settings.get('locale');
  return lang;
  });
+ ipcMain.handle('get-previews', async () => {
+ const oldPreviews = await previews.get('paths');
+ return oldPreviews;
+ });
  splashWindow = createWindow(
  'splash',
  {
@@ -59,7 +71,6 @@ app.on('ready', async () => {
  } else {
  await splashWindow.loadURL('app:https://./splash.html');
  }
-
  mainWindow = createWindow('main', {
  icon: path.join(__dirname, '../resources/icon.png'),
  width: 1000,
@@ -77,73 +88,107 @@ app.on('ready', async () => {
  mainWindow.webContents.openDevTools();
  }
  mainWindow.once('ready-to-show', () => {
- setTimeout(() => {
- splashWindow.close();
- mainWindow.show();
- }, 4000);
+ splashWindow.close();
+ mainWindow.show();
  });
  if (isDev) {
  await mainWindow.loadURL(`http:https://localhost:3000/`);
  } else {
  await mainWindow.loadURL('app:https://./index.html');
  }
+ const menu = new Menu();
+ menu.append(
+ new MenuItem({
+ label: 'Super-resolution',
+ submenu: [
+ {
+ role: 'Open',
+ accelerator: process.platform === 'darwin' ? 'Cmd+N' : 'Ctrl+N',
+ click: async () => {
+ const { filePaths } = await dialog.showOpenDialog({
+ filters: [{ name: 'Изображения', extensions: ['jpg', 'png', 'gif'] }],
+ properties: ['openFile'],
+ });
+ file = [...filePaths];
+ filePathPosix = [filePaths[0].split(path.sep).join(path.posix.sep)];
+ mainWindow.webContents.send('open-file', true);
+ },
+ },
+ {
+ role: 'Save',
+ accelerator: process.platform === 'darwin' ? 'Cmd+S' : 'Ctrl+S',
+ click: async () => {
+ if (temp[0]) {
+ const { filePath } = await dialog.showSaveDialog({
+ filters: [
+ { name: 'JPEG', extensions: ['jpg', 'jpeg'] },
+ { name: 'PNG', extensions: ['png'] },
+ { name: 'GIF', extensions: ['gif'] },
+ ],
+ });
+ await utils.previews(previews, userDataPath, temp[0]);
+ await utils.copy(temp[0], filePath);
+ temp[0] = null;
+ }
+ },
+ },
+ ],
+ }),
+ );
+ Menu.setApplicationMenu(menu);
  autoUpdate(mainWindow);
 
  ipcMain.on('upscayl', async () => {
- const index = 0;
- if (!flag && files.length > 0) {
+ if (!flag && file.length > 0) {
  flag = true;
- for (const file of files) {
- await upscayl(file, null, mainWindow, index);
- index++;
- }
+ await upscayl(file[0], userDataPath, mainWindow, temp);
  flag = false;
  }
  });
- ipcMain.on('window-min', () => {
- mainWindow.minimize();
- });
- ipcMain.on('window-max', () => {
- mainWindow.maximize();
- });
- ipcMain.on('window-unmax', () => {
- mainWindow.unmaximize();
- });
- ipcMain.handle('window-ismax', () => {
- if (mainWindow.isMaximized()) {
- return true;
- } else {
- return false;
- }
- });
- ipcMain.on('window-close', () => {
- mainWindow.close();
- });
-
- ipcMain.on('drag-files', async (e, filePaths) => {
- files = [...filePaths];
- const filesPathsPosix = filePaths.map((file) => file.split(path.sep).join(path.posix.sep));
- e.reply('open-files', filesPathsPosix);
+ ipcMain.on('drag-file', async (e, filePaths) => {
+ file = [...filePaths];
+ filePathPosix = [filePaths[0].split(path.sep).join(path.posix.sep)];
+ e.reply('open-file', true);
  });
- ipcMain.on('open-files', async (e) => {
+ ipcMain.on('open-file', async (e) => {
  const { filePaths } = await dialog.showOpenDialog({
  filters: [{ name: 'Изображения', extensions: ['jpg', 'png', 'gif'] }],
  properties: ['openFile'],
  });
- files = [...filePaths];
- const filesPathsPosix = filePaths.map((file) => file.split(path.sep).join(path.posix.sep));
- e.reply('open-files', filesPathsPosix);
- });
- ipcMain.on('open-directory', async () => {
- const { filePaths } = await dialog.showOpenDialog({
- properties: ['openDirectory'],
+ file = [...filePaths];
+ filePathPosix = [filePaths[0].split(path.sep).join(path.posix.sep)];
+ e.reply('open-file', true);
+ });
+ ipcMain.on('opened-file', async (e) => {
+ e.reply('opened-file', filePathPosix[0]);
+ });
+ ipcMain.on('save-file', async () => {
+ const { filePath } = await dialog.showSaveDialog({
+ filters: [
+ { name: 'JPEG', extensions: ['jpg', 'jpeg'] },
+ { name: 'PNG', extensions: ['png'] },
+ { name: 'GIF', extensions: ['gif'] },
+ ],
  });
- saveDirectory = filePaths;
- });
+ await utils.previews(previews, userDataPath, temp[0]);
+ await utils.copy(temp[0], filePath);
+ temp[0] = null;
+ });
+ // ipcMain.on('open-directory', async () => {
+ // const { filePaths } = await dialog.showOpenDialog({
+ // properties: ['openDirectory'],
+ // });
+ // saveDirectory = filePaths;
+ // });
 });
 
 app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
  app.quit();
  }
 });
+// app.on('activate', function () {
+// // В macOS обычно заново создают окно в приложении, когда
+// // нажата иконка док-станции, и другие окна не открыты.
+// if (BrowserWindow.getAllWindows().length === 0) createWindow();
+// });

main/helpers/createWindow.js

@@ -1,4 +1,4 @@
-const { screen, BrowserWindow } = require('electron');
+const { screen, BrowserWindow, ipcMain } = require('electron');
 const Store = require('./store.js');
 const createWindow = (windowName, options, splash = false) => {
  let win;
@@ -68,6 +68,25 @@ const createWindow = (windowName, options, splash = false) => {
  ...options,
  ...state,
  });
+ ipcMain.on(`window-${windowName}-min`, () => {
+ win.minimize();
+ });
+ ipcMain.on(`window-${windowName}-max`, () => {
+ win.maximize();
+ });
+ ipcMain.on(`window-${windowName}-unmax`, () => {
+ win.unmaximize();
+ });
+ ipcMain.handle(`window-${windowName}-ismax`, () => {
+ if (win.isMaximized()) {
+ return true;
+ } else {
+ return false;
+ }
+ });
+ ipcMain.on(`window-${windowName}-close`, () => {
+ win.close();
+ });
  win.on('close', saveState);
  return win;
 };

main/helpers/index.js

@@ -3,5 +3,6 @@ const binaries = require('./binaries');
 const createWindow = require('./createWindow');
 const upscayl = require('./upscayl');
 const store = require('./store');
+const utils = require('./utils');
 
-module.exports = { autoUpdate, binaries, createWindow, upscayl, store };
+module.exports = { autoUpdate, binaries, createWindow, upscayl, store, utils };

main/helpers/upscayl.js

@@ -3,7 +3,7 @@ const fs = require('fs');
 const path = require('path');
 const { modelsPath, execPath } = require('./binaries');
 
-const upscayl = (inputDir, outputDir = null, mainWindow, index) => {
+const upscayl = (inputDir, outputDir = null, mainWindow, temp, gpuId = null) => {
  mainWindow.setProgressBar(0.01);
  mainWindow.webContents.send('upscayl-progress', 1);
  let failed = false;
@@ -55,7 +55,8 @@ const upscayl = (inputDir, outputDir = null, mainWindow, index) => {
  mainWindow.setProgressBar(-1);
  if (!failed) {
  const out = outFile.split(path.sep).join(path.posix.sep);
- mainWindow.webContents.send('upscayl-done', { after: out, index });
+ mainWindow.webContents.send('upscayl-done', { url: out });
+ temp.push(out);
  } else {
  mainWindow.webContents.send('upscayl-error');
  }

main/helpers/utils.js

@@ -0,0 +1,48 @@
+const { dialog } = require('electron');
+const fs = require('fs');
+const path = require('path');
+const sharp = require('sharp');
+const store = require('./store');
+
+const copy = (oldPath, newPath) => {
+ let readStream = fs.createReadStream(oldPath);
+ let writeStream = fs.createWriteStream(newPath);
+ readStream.on('error', () => {});
+ writeStream.on('error', () => {});
+ readStream.on('close', () => {
+ // fs.unlink(oldPath, () => {});
+ });
+ readStream.pipe(writeStream);
+};
+const previews = async (previews, userDataPath, filePath) => {
+ if (!fs.existsSync(path.join(userDataPath, 'previews'))) {
+ fs.mkdirSync(path.join(userDataPath, 'previews'));
+ }
+ const fileName = path.parse(filePath).name;
+ const fileExt = path.parse(filePath).ext;
+ const dest = path.join(userDataPath, `previews/${fileName}${fileExt}`);
+ console.log(dest);
+ await sharp(filePath)
+ .resize(200, 200)
+ .toFile(dest, (err, resizeImage) => {
+ if (err) {
+ console.log(err);
+ } else {
+ console.log(resizeImage);
+ }
+ });
+ const oldPreviews = await previews.get('paths');
+ await previews.set('paths', [...oldPreviews, `${dest.split(path.sep).join(path.posix.sep)}`]);
+};
+
+const openFile = async () => {
+ const { filePaths } = await dialog.showOpenDialog({
+ filters: [{ name: 'Изображения', extensions: ['jpg', 'png', 'gif'] }],
+ properties: ['openFile'],
+ });
+ file = [...filePaths];
+ filePathPosix = [filePaths[0].split(path.sep).join(path.posix.sep)];
+ return { file, filePathPosix };
+};
+
+module.exports = { copy, previews, openFile };

package.json

@@ -29,7 +29,11 @@
  "electron-reload": "^2.0.0-alpha.1",
  "electron-serve": "^1.1.0",
  "electron-updater": "^5.3.0",
- "ui-forest": "^1.11.4"
+ "gm": "^1.25.0",
+ "graphicsmagick": "^0.0.1",
+ "imagemagick": "^0.1.3",
+ "sharp": "^0.31.3",
+ "ui-forest": "^1.11.6"
  },
  "devDependencies": {
  "@commitlint/cli": "^17.0.0",

src/components/Dragzone/Dragzone.module.css

@@ -1,5 +1,6 @@
 .wrapper {
  border: 4px dashed var(--accent);
+
  position: relative;
 }
 .text {

src/components/Editor/Editor.module.css

@@ -0,0 +1,6 @@
+.wrapper {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 20px;
+}

src/components/Editor/index.js

@@ -0,0 +1,24 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Image } from '../';
+import styles from './Editor.module.css';
+
+const Editor = (props) => {
+ const { image, progress, percent } = props;
+ const editor = useRef(null);
+ const [size, setSize] = useState(500);
+ const resize = () => setSize(Math.min(editor.current.offsetWidth, editor.current.offsetHeight));
+ useEffect(() => {
+ resize();
+ window.addEventListener('resize', resize);
+ return () => {
+ window.removeEventListener('resize', resize);
+ };
+ }, []);
+ return (
+ <div ref={editor} className={styles.wrapper}>
+ <Image image={image} size={size} progress={progress} percent={percent} />
+ </div>
+ );
+};
+
+export default Editor;

src/components/EditorPanel/EditorPanel.module.css

@@ -0,0 +1,5 @@
+.wrapper {
+ padding: 20px;
+ height: calc(100vh - 32px);
+ background-color: var(--frame);
+}