Merge pull request #73 from sentialx/menu

feat: add menu

src/main/container.ts

@@ -1,4 +1,4 @@
-import { AppWindow } from './app-window';
+import { AppWindow } from './windows/app';
 import { ProcessWindow } from './process-window';
 import { platform } from 'os';
 import { iohook } from '.';

src/main/index.ts

@@ -1,8 +1,9 @@
-import { ipcMain, app, Menu } from 'electron';
+import { ipcMain, app, Menu, BrowserWindow, webContents } from 'electron';
 import { resolve } from 'path';
 import { platform, homedir } from 'os';
-import { AppWindow } from './app-window';
+import { AppWindow } from './windows/app';
 import { autoUpdater } from 'electron-updater';
+import { Settings } from './settings';
 
 ipcMain.setMaxListeners(0);
 
@@ -22,6 +23,8 @@ if (!gotTheLock) {
   });
 }
 
+export const settings = new Settings();
+
 export const iohook = require('iohook');
 
 app.on('ready', () => {
@@ -33,6 +36,19 @@ app.on('ready', () => {
       {
         role: 'editMenu',
       },
+      {
+        label: 'Other',
+        submenu: [
+          {
+            accelerator: 'CmdOrCtrl+Shift+F12',
+            label: 'Toggle developer tools (window)',
+            visible: false,
+            click() {
+              webContents.getFocusedWebContents().openDevTools();
+            },
+          },
+        ],
+      },
     ]),
   );
 

src/main/process-window.ts

@@ -1,6 +1,5 @@
 import { Window } from 'node-window-manager';
-import { AppWindow } from './app-window';
-import { platform } from 'os';
+import { AppWindow } from './windows/app';
 
 export class ProcessWindow extends Window {
   public resizable = false;

src/main/settings.ts

@@ -0,0 +1,103 @@
+import { ipcMain } from 'electron';
+
+import { promises } from 'fs';
+import { EventEmitter } from 'events';
+import { appWindows } from '.';
+import { getPath } from '~/shared/utils/paths';
+import { makeId } from '~/shared/utils/string';
+
+export class Settings extends EventEmitter {
+  public object = { dark: false };
+
+  private queue: string[] = [];
+
+  private loaded = false;
+
+  public constructor() {
+    super();
+
+    ipcMain.on(
+      'save-settings',
+      (e, { settings }: { settings: string; incognito: boolean }) => {
+        this.object = { ...this.object, ...JSON.parse(settings) };
+
+        for (const window of appWindows) {
+          if (window.webContents.id !== e.sender.id) {
+            window.webContents.send('update-settings', this.object);
+            window.menu.webContents.send('update-settings', this.object);
+          }
+        }
+
+        this.addToQueue();
+      },
+    );
+
+    ipcMain.on('get-settings', e => {
+      if (!this.loaded) {
+        this.once('load', () => {
+          e.returnValue = this.object;
+        });
+      } else {
+        e.returnValue = this.object;
+      }
+    });
+
+    this.load();
+  }
+
+  private async load() {
+    try {
+      const file = await promises.readFile(getPath('settings.json'), 'utf8');
+
+      this.object = {
+        ...this.object,
+        ...JSON.parse(file),
+      };
+
+      this.loaded = true;
+
+      this.emit('load');
+    } catch (e) {
+      this.loaded = true;
+      this.emit('load');
+    }
+  }
+
+  private async save() {
+    try {
+      await promises.writeFile(
+        getPath('settings.json'),
+        JSON.stringify(this.object),
+      );
+
+      if (this.queue.length >= 3) {
+        for (let i = this.queue.length - 1; i > 0; i--) {
+          this.removeAllListeners(this.queue[i]);
+          this.queue.splice(i, 1);
+        }
+      } else {
+        this.queue.splice(0, 1);
+      }
+
+      if (this.queue[0]) {
+        this.emit(this.queue[0]);
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  public async addToQueue() {
+    const id = makeId(32);
+
+    this.queue.push(id);
+
+    if (this.queue.length === 1) {
+      this.save();
+    } else {
+      this.once(id, () => {
+        this.save();
+      });
+    }
+  }
+}

src/main/app-window.ts → src/main/windows/app.ts

@@ -1,12 +1,21 @@
-import { BrowserWindow, app, screen, globalShortcut, ipcMain } from 'electron';
+import {
+  BrowserWindow,
+  app,
+  screen,
+  globalShortcut,
+  ipcMain,
+  dialog,
+  nativeImage,
+} from 'electron';
 import { resolve, join } from 'path';
 import { platform } from 'os';
 import { windowManager, Window } from 'node-window-manager';
-import { TOOLBAR_HEIGHT } from '~/renderer/app/constants/design';
-import { ProcessWindow } from './process-window';
-import { Container } from './container';
+import { TOOLBAR_HEIGHT } from '~/renderer/views/app/constants/design';
+import { ProcessWindow } from '../process-window';
+import { Container } from '../container';
 import * as fileIcon from 'extract-file-icon';
-import { iohook } from '.';
+import { iohook } from '..';
+import { MenuWindow } from './menu';
 
 const containsPoint = (bounds: any, point: any) => {
   return (
@@ -21,6 +30,8 @@ export class AppWindow extends BrowserWindow {
   public containers: Container[] = [];
   public selectedContainer: Container;
 
+  public menu = new MenuWindow(this);
+
   public draggedWindow: ProcessWindow;
 
   public draggedIn = false;
@@ -32,8 +43,6 @@ export class AppWindow extends BrowserWindow {
 
   public interval: any;
 
-  private _selectedTab = false;
-
   private height = 700;
 
   public constructor() {
@@ -79,6 +88,8 @@ export class AppWindow extends BrowserWindow {
     const updateBounds = () => {
       this.isMoving = true;
 
+      this.menu.rearrange();
+
       if (platform() === 'darwin') {
         for (const c of this.containers) {
           if (
@@ -110,16 +121,36 @@ export class AppWindow extends BrowserWindow {
 
     this.interval = setInterval(this.intervalCallback, 100);
 
-    ipcMain.on('select-window', (e: any, id: number) => {
+    ipcMain.on('select-window', (e, id: number) => {
       this.selectContainer(this.containers.find(x => x.id === id));
     });
 
-    ipcMain.on('detach-window', (e: any, id: number) => {
+    ipcMain.on('detach-window', (e, id: number) => {
       for (const container of this.containers) {
         container.removeWindow(id);
       }
     });
 
+    ipcMain.on(`menu-toggle-${this.id}`, () => {
+      this.menu.toggle();
+    });
+
+    ipcMain.on(`get-title-${this.id}`, e => {
+      e.returnValue = this.getTitle();
+    });
+
+    ipcMain.on(`set-title-${this.id}`, (e, title) => {
+      this.setTitle(title);
+    });
+
+    ipcMain.on(`change-icon-${this.id}`, async () => {
+      const dialogRes = await dialog.showOpenDialog(this, {
+        filters: [{ name: 'All Files', extensions: ['*'] }],
+      });
+
+      this.setIcon(nativeImage.createFromPath(dialogRes.filePaths[0]));
+    });
+
     if (platform() !== 'darwin') {
       globalShortcut.register('Ctrl+Tab', () => {
         const { id } = windowManager.getActiveWindow();
@@ -146,10 +177,6 @@ export class AppWindow extends BrowserWindow {
     iohook.on('mousedown', () => {
       if (this.isMinimized()) return;
 
-      if (this.isFocused()) {
-        this._selectedTab = true;
-      }
-
       setTimeout(() => {
         if (this.isFocused()) {
           this.draggedWindow = null;

src/main/windows/menu.ts

@@ -0,0 +1,52 @@
+import { AppWindow } from './app';
+import { TOOLBAR_HEIGHT } from '~/renderer/views/app/constants/design';
+import { PopupWindow } from './popup';
+import { ipcMain } from 'electron';
+
+const WIDTH = 300;
+const HEIGHT = 146;
+
+export class MenuWindow extends PopupWindow {
+  public visible: boolean = false;
+
+  public constructor(appWindow: AppWindow) {
+    super(appWindow, 'menu');
+
+    this.setBounds({
+      height: HEIGHT,
+      width: WIDTH,
+    } as any);
+
+    ipcMain.on(`hide-${this.id}`, () => {
+      this.hide();
+    });
+
+    this.on('blur', () => {
+      this.hide();
+    });
+  }
+
+  public show() {
+    super.show();
+    this.rearrange();
+    this.visible = true;
+  }
+
+  public hide() {
+    super.hide();
+    this.visible = false;
+  }
+
+  public toggle() {
+    if (this.visible) this.hide();
+    else this.show();
+  }
+
+  public rearrange() {
+    const cBounds = this.appWindow.getContentBounds();
+    this.setBounds({
+      x: Math.round(cBounds.x + cBounds.width - WIDTH - 8),
+      y: cBounds.y + TOOLBAR_HEIGHT,
+    } as any);
+  }
+}

src/main/windows/popup.ts

@@ -0,0 +1,39 @@
+import { BrowserWindow, app, ipcMain } from 'electron';
+import { join } from 'path';
+import { AppWindow } from './app';
+
+export class PopupWindow extends BrowserWindow {
+  protected appWindow: AppWindow;
+
+  public constructor(appWindow: AppWindow, name: string, devtools = false) {
+    super({
+      frame: false,
+      resizable: false,
+      show: false,
+      fullscreenable: false,
+      webPreferences: {
+        nodeIntegration: true,
+        contextIsolation: false,
+      },
+      skipTaskbar: true,
+      backgroundColor: '#00ffffff',
+    });
+
+    this.appWindow = appWindow;
+
+    if (process.env.ENV === 'dev') {
+      if (devtools) {
+        this.webContents.openDevTools({ mode: 'detach' });
+      }
+      this.loadURL(`http://localhost:4444/${name}.html`);
+    } else {
+      this.loadURL(join('file://', app.getAppPath(), `build/${name}.html`));
+    }
+
+    ipcMain.on(`get-window-id-${this.id}`, e => {
+      e.returnValue = this.appWindow.id;
+    });
+
+    this.setParentWindow(this.appWindow);
+  }
+}

src/renderer/components/Switch/index.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+import { colors } from '~/renderer/constants';
+import { StyledSwitch, Thumb } from './styles';
+import { observer } from 'mobx-react-lite';
+
+interface Props {
+  color?: string;
+  onChange?: (value: boolean) => void;
+  value?: boolean;
+}
+
+export const Switch = observer(({ color, value }: Props) => {
+  return (
+    <StyledSwitch activated={value} color={color}>
+      <Thumb activated={value} color={color} />
+    </StyledSwitch>
+  );
+});
+
+(Switch as any).defaultProps = {
+  color: colors.blue['500'],
+};