V1.4.0 (#14)

* main.ts を移動

* なんか一杯かえた

* なんか一杯かえた

* OptionWindowを開くようにした

* Debug.vue をちょっと修正

* tsのエラーをちょっと解消

* refactor

* フィルター処理の条件をoptionに移動

* めちゃくちゃリファクタした

* めちゃくちゃリファクタした

* bump 1.4.0

* fix build target

.eslintignore

@@ -3,3 +3,4 @@ dist
 out
 .gitignore
 .env
+build

.eslintrc.cjs

@@ -25,7 +25,8 @@ module.exports = {
     '@typescript-eslint/no-non-null-assertion': 'off',
     '@typescript-eslint/no-var-requires': 'off',
     'vue/require-default-prop': 'off',
-    'vue/multi-word-component-names': 'off'
+    'vue/multi-word-component-names': 'off',
+    "@typescript-eslint/explicit-function-return-type": "off"
   },
   overrides: [
     {

electron.vite.config.ts

@@ -1,18 +1,24 @@
 import { resolve } from 'path'
 import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
 import vue from '@vitejs/plugin-vue'
+import VueRouter from 'unplugin-vue-router/vite'
 
 export default defineConfig({
   main: {
     plugins: [externalizeDepsPlugin()],
     build: {
       watch: {},
+      rollupOptions: {
+        input: {
+          index: resolve(__dirname, 'src/main/main.ts')
+        }
+      }
     },
     resolve: {
       alias: {
         '@': resolve('src/main/')
       }
-    },
+    }
   },
   preload: {
     plugins: [externalizeDepsPlugin()],
@@ -26,11 +32,25 @@ export default defineConfig({
     }
   },
   renderer: {
+    build: {
+      watch: {},
+      rollupOptions: {
+        input: {
+          index: resolve(__dirname, 'src/renderer/index.html')
+        }
+      }
+    },
     resolve: {
       alias: {
         '@renderer': resolve('src/renderer/src')
       }
     },
-    plugins: [vue()]
+    plugins: [
+      VueRouter({
+        routesFolder: 'src/renderer/src/pages',
+        dts: 'src/renderer/typed-router.d.ts'
+      }),
+      vue()
+    ]
   }
 })

package.json

@@ -1,6 +1,6 @@
 {
   "name": "taskbar.fm",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Taskbar like windows for mac",
   "main": "./out/main/index.js",
   "author": "FruitRiin",
@@ -28,7 +28,9 @@
   "dependencies": {
     "@electron-toolkit/preload": "^1.0.3",
     "@electron-toolkit/utils": "^1.0.2",
-    "electron-updater": "^5.3.0"
+    "electron-updater": "^5.3.0",
+    "pinia": "^2.1.4",
+    "vue-router": "^4.2.4"
   },
   "devDependencies": {
     "@electron-toolkit/tsconfig": "^1.0.1",
@@ -52,6 +54,7 @@
     "prettier": "^2.8.7",
     "sass": "^1.62.1",
     "typescript": "^4.9.5",
+    "unplugin-vue-router": "^0.6.4",
     "vite": "^4.2.1",
     "vue": "^3.2.47",
     "vue-tsc": "^1.2.0"

src/main/funcs/events.ts

@@ -0,0 +1,32 @@
+// レンダラープロセスからのメッセージを受信する
+import { createOptionWindow, mainWindow, windowPosition } from './windows'
+import { activateWindow, grantPermission } from './helper'
+import { ipcMain, screen } from 'electron'
+import { store } from './store'
+
+type LayoutType = 'right' | 'left' | 'bottom'
+
+export function setEventHandlers() {
+  ipcMain.on('activeWindow', (_event, windowId) => {
+    activateWindow(windowId)
+  })
+  ipcMain.on('openOption', () => {
+    createOptionWindow()
+  })
+
+  ipcMain.on('setLayout', (_event, layout: LayoutType) => {
+    store.set('layout', layout)
+    const primaryDisplay = screen.getPrimaryDisplay()
+    const position = windowPosition(primaryDisplay, layout)
+    mainWindow.setBounds(position)
+    mainWindow.webContents.send('setLayout', layout)
+  })
+
+  ipcMain.on('grantPermission', () => {
+    grantPermission()
+    store.set('granted', true)
+  })
+  ipcMain.on('clearSetting', () => {
+    store.clear()
+  })
+}

src/main/funcs/helper.ts

@@ -15,7 +15,7 @@ if (app.isPackaged) {
 export function getAndSubmitProcesses(win: BrowserWindow): void {
   let rawData = ''
   try {
-    const taskbarHelper = spawn(binaryPath, ["list"])
+    const taskbarHelper = spawn(binaryPath, ['list'])
     // console.log("tick")
     taskbarHelper.stdout.on('data', (raw) => {
       rawData += raw
@@ -26,25 +26,25 @@ export function getAndSubmitProcesses(win: BrowserWindow): void {
       console.error(raw)
     })
     taskbarHelper.on('close', async (code) => {
-      await { result: code === 0 ? 'success' : 'failed' }
-      win.webContents.send('process', new Buffer(rawData).toString('utf-8'))
-      rawData = ''
+      if ((await code) === 0) {
+        win.webContents.send('process', new Buffer(rawData).toString('utf-8'))
+        rawData = ''
+      }
     })
   } catch (e) {
     console.log(e)
   }
 }
 
-export function grantPermission(): void{
-  spawn(binaryPath, ["grant"])
+export function grantPermission(): void {
+  spawn(binaryPath, ['grant'])
 }
 
-import { escape } from "html-escaper";
+import { escape } from 'html-escaper'
 
 // ウィンドウをアクティブにする関数
 export function activateWindow(window: MacWindow): void {
-  const script =
-  `tell application "System Events"
+  const script = `tell application "System Events"
     set targetProcess to first application process whose unix id is ${window.kCGWindowOwnerPID}
     set targetAppWindows to windows of targetProcess
     set frontmost of targetProcess to true

src/main/funcs/store.ts

@@ -0,0 +1,26 @@
+import Store from 'electron-store'
+
+export const store = new Store({
+  defaults: {
+    layout: 'bottom',
+    filters: [
+      [{ property: 'kCGWindowIsOnscreen', is: false }],
+      [{ property: 'kCGWindowOwnerName', is: 'Dock' }],
+      [{ property: 'kCGWindowOwnerName', is: 'DockHelper' }],
+      [{ property: 'kCGWindowOwnerName', is: 'screencapture' }],
+      [{ property: 'kCGWindowOwnerName', is: 'スクリーンショット' }],
+      [{ property: 'kCGWindowName', is: 'Notification Center' }],
+      [{ property: 'kCGWindowName', is: 'Item-0' }],
+      [{ property: 'kCGWindowOwnerName', is: 'Window Server' }],
+      [{ property: 'kCGWindowOwnerName', is: 'コントロールセンター' }],
+      [
+        { property: 'kCGWindowOwnerName', is: 'Finder' },
+        { property: 'kCGWindowName', is: '' }
+      ],
+      [{ property: 'kCGWindowName', is: 'Spotlight' }],
+      [{ property: 'kCGWindowOwnerName', is: 'GoogleJapaneseInputRenderer' }],
+      [{ property: 'kCGWindowOwnerName', is: 'taskbar.fm' }],
+      [{ property: 'kCGWindowName', is: 'taskbar.fm' }]
+    ]
+  }
+})

src/main/funcs/windows.ts

@@ -0,0 +1,86 @@
+import { join } from 'path'
+import { is } from '@electron-toolkit/utils'
+import { BrowserWindow, screen } from 'electron'
+import { getAndSubmitProcesses } from './helper'
+import { store } from './store'
+
+type LayoutType = 'right' | 'left' | 'bottom'
+
+export let mainWindow: BrowserWindow
+export function createWindow() {
+  // Create the browser window.
+
+  const primaryDisplay = screen.getPrimaryDisplay()
+
+  mainWindow = new BrowserWindow({
+    webPreferences: {
+      preload: join(__dirname, '../preload/index.js'),
+      sandbox: false
+    },
+    titleBarStyle: 'hiddenInset',
+    autoHideMenuBar: true,
+    // resizable: false,
+    movable: false,
+    maximizable: false,
+    minimizable: false,
+    alwaysOnTop: true,
+    skipTaskbar: true,
+    show: false,
+    ...windowPosition(primaryDisplay, store.get('layout') as LayoutType)
+  })
+
+  // 準備ができたら表示
+  mainWindow.on('ready-to-show', () => {
+    mainWindow.show()
+  })
+  // 閉じるボタンなどを消す
+  mainWindow.setWindowButtonVisibility(false)
+
+  // HMR for renderer base on electron-vite cli.
+  // Load the remote URL for development or the local html file for production.
+  if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
+    mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL'])
+  } else {
+    mainWindow.loadFile(join(__dirname, '../renderer/index.html'))
+  }
+
+  // 1秒ごとにプロセスのリストを取得
+  setInterval(() => {
+    getAndSubmitProcesses(mainWindow)
+  }, 1000)
+}
+
+export let optionWindow: BrowserWindow
+export function createOptionWindow() {
+  // すでにウィンドウを開いているならそれをアクティブにする
+  if (optionWindow && !optionWindow.isDestroyed()) {
+    optionWindow.show()
+    return
+  }
+  optionWindow = new BrowserWindow({
+    webPreferences: {
+      preload: join(__dirname, '../preload/index.js'),
+      sandbox: false
+    }
+  })
+  if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
+    optionWindow.loadURL(process.env['ELECTRON_RENDERER_URL'] + '#option')
+  } else {
+    optionWindow.loadFile(join(__dirname, '../renderer/index.html#option'))
+  }
+  optionWindow.on('ready-to-show', () => {
+    optionWindow.show()
+  })
+}
+
+export function windowPosition(
+  display: Electron.Display,
+  type: LayoutType
+): { width: number; height: number; x: number; y: number } {
+  return {
+    width: type === 'bottom' ? display.workArea.width : 210,
+    height: type !== 'bottom' ? display.workArea.height : 60,
+    x: type === 'right' ? display.workArea.width - 210 : 0,
+    y: type === 'bottom' ? display.workArea.height - 30 : 0
+  }
+}