From 0a6f41f5f90a92284cd193f3a7f1581ddbdbcfe7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=90=8B=E5=85=94?= Date: Fri, 7 Jul 2023 08:04:40 +0800 Subject: [PATCH] fix: dir preloading and support none-exif file --- main.js | 17 ++++++- package.json | 7 +-- preload.js | 2 +- src/App.vue | 90 ++++++++++++++++++++++++++++++++----- src/components/Lightbox.vue | 4 +- 5 files changed, 100 insertions(+), 20 deletions(-) diff --git a/main.js b/main.js index 58a67c0..9f3c3fb 100644 --- a/main.js +++ b/main.js @@ -14,7 +14,7 @@ const { LocalFileData } = require("get-file-object-from-local-path"); const exec = require("child_process").exec; const { default: axios } = require("axios"); -let readinPath = ""; +let readinPath = undefined; function createWindow() { // 創建瀏覽器窗口 @@ -81,7 +81,10 @@ function createWindow() { // console.log(appPath); - const d = readinPath ? readinPath : appPath; + console.log(`readinPath = ${readinPath}`); + console.log(`appPath = ${appPath}`); + + const d = readinPath ?? appPath; const fileList = fs.readdirSync(d); const files = []; @@ -183,8 +186,10 @@ function createWindow() { } app.on("ready", function () { + // console.log(" ==================== ready ===================="); if (process.argv.length > 1) { const temp = process.argv[1]; + // const temp = "C:\\Users\\narut\\Desktop\\test2"; if (fs.existsSync(temp) && fs.lstatSync(temp).isDirectory()) { readinPath = temp; @@ -197,6 +202,14 @@ app.on("ready", function () { // 部分 API 在 ready 事件觸發後才能使用。 app.whenReady().then(() => { + // if (process.argv.length > 1) { + // const temp = process.argv[1]; + + // if (fs.existsSync(temp) && fs.lstatSync(temp).isDirectory()) { + // readinPath = temp; + // } + // } + createWindow(); app.on("activate", function () { diff --git a/package.json b/package.json index eb18d47..e805dbb 100644 --- a/package.json +++ b/package.json @@ -1,9 +1,9 @@ { "name": "photolisting", - "version": "0.2.0", + "version": "0.2.1", "main": "main.js", "scripts": { - "dev": "cross-env NODE_ENV=dev vite", + "vite-dev": "cross-env NODE_ENV=dev vite", "build": "cross-env NODE_ENV=production vite build", "github:build": "cross-env NODE_ENV=github vite build --mode github", "serve": "vite preview", @@ -11,7 +11,8 @@ "pack": "electron-builder --dir", "pack-dist": "electron-builder", "full-build": "npm-run-all -s build pack-dist", - "github-full-build": "npm-run-all -s github:build pack-dist" + "github-full-build": "npm-run-all -s github:build pack-dist", + "dev": "npm-run-all -p vite-dev electron:serve" }, "dependencies": { "axios": "^1.4.0", diff --git a/preload.js b/preload.js index f04b5b9..ef222ab 100644 --- a/preload.js +++ b/preload.js @@ -15,7 +15,7 @@ contextBridge.exposeInMainWorld("electronAPI", { } return [ data.map((f) => { - console.log(f); + // console.log(f); return constructFileFromLocalFileData(f); }), // data, diff --git a/src/App.vue b/src/App.vue index 8cd203a..aab5847 100644 --- a/src/App.vue +++ b/src/App.vue @@ -206,7 +206,7 @@ export default { this.menuSize.width = contextMenu?.offsetWidth; this.menuSize.height = contextMenu?.offsetHeight; // this.processForm = true; - // this.preloadDirectory(); + this.preloadDirectory(); // window.addEventListener("keydown", this.handelKeypress); }, @@ -216,15 +216,21 @@ export default { console.log(checkPath); if (checkPath) { this.fileListScreen = true; - this.processForm = true; + // this.processForm = true; this.preloadDirectory(); } }, imgOnLoad(e, index) { - this.files[index].width = e.target.naturalWidth; - this.files[index].height = e.target.naturalHeight; - if (!Number.isInteger(this.files[index].rating)) { - this.files[index].rating = this.files[index].exif?.Rating; + const f = this.files[index]; + + f.width = e.target.naturalWidth; + f.height = e.target.naturalHeight; + + console.log(f.rating); + + if (!Number.isInteger(f.rating)) { + console.log(f.exif?.Rating); + f.rating = f.exif?.Rating ?? 5; } }, getFilesByRating(rating) { @@ -290,25 +296,26 @@ export default { } }, async preloadDirectory() { + this.processForm = true; this.files = []; const [files, dir] = await window.electronAPI.preloadDirectory(); this.savePath = dir; - if (!files.length) { + if (!files?.length) { this.fileListScreen = false; this.processForm = false; + return; } else { this.fileTotalCount = files.length; } - const fileLoadPromise = []; - for (let i = 0; i < files.length; i++) { this.files.push(await this.createFile(files[i], i)); } + this.fileListScreen = true; this.processForm = false; }, changeRating(nextRating) { @@ -319,17 +326,25 @@ export default { async createFile(file, index) { // console.log(file); - return { + // console.log(file.name, await exifr.thumbnailUrl(file)); + + const item = { index: index, name: file.name, - url: await exifr.thumbnailUrl(file), + url: + (await exifr.thumbnailUrl(file)) ?? + (await this.fileToBase64WithResize(file)), exif: await exifr.parse(file, true), width: 1, height: 1, checked: false, - rating: undefined, + rating: (await exifr.parse(file, true)?.rating) ?? 5, raw: file, }; + + console.log(item); + + return item; }, listingConfirm() { const finalList = this.files @@ -346,6 +361,8 @@ export default { }, checkUpdate() { window.electronAPI.checkUpdate((evt, arg) => { + if (!arg) return; + this.updateInfo = arg; this.updateForm = arg.currentVersion < arg.targetVersion; // console.log(this.updateForm); @@ -383,6 +400,55 @@ export default { handelKeypress(event) { console.log(event); }, + fileToBase64WithResize(file, maxSize = 640) { + return new Promise((resolve, reject) => { + const reader = new FileReader(); + + reader.onload = () => { + const img = new Image(); + img.onload = () => { + const canvas = document.createElement("canvas"); + let width = img.width; + let height = img.height; + + if (width > maxSize || height > maxSize) { + const aspectRatio = width / height; + if (height >= width) { + width = maxSize; + height = width / aspectRatio; + } + if (width > height) { + height = maxSize; + width = height * aspectRatio; + } + } + + canvas.width = width; + canvas.height = height; + + const ctx = canvas.getContext("2d"); + ctx.drawImage(img, 0, 0, width, height); + + ctx.canvas.toBlob((blob) => { + const url = URL.createObjectURL(blob); + resolve(url); + }, file.type); + }; + + img.onerror = (error) => { + reject(undefined); + }; + + img.src = reader.result; + }; + + reader.onerror = (error) => { + reject(undefined); + }; + + reader.readAsDataURL(file); + }); + }, }, watch: { menuOpened(value) { diff --git a/src/components/Lightbox.vue b/src/components/Lightbox.vue index 394f048..0417e33 100644 --- a/src/components/Lightbox.vue +++ b/src/components/Lightbox.vue @@ -139,7 +139,7 @@ export default { if (scaledWidth > screen.width) { const maxMove = (scaledWidth - screen.width) / 2 + 16; - this.movement.x += movementX; + this.movement.x += movementX / 2; if (movementX > 0 && this.movement.x > maxMove) { this.movement.x = maxMove; @@ -154,7 +154,7 @@ export default { if (scaledHeight > screen.height) { const maxMove = (scaledHeight - screen.height) / 2 + 16; - this.movement.y += movementY; + this.movement.y += movementY / 2; if (movementY > 0 && this.movement.y > maxMove) { this.movement.y = maxMove;