缩略图自动生成背景服务插件
This commit is contained in:
Yeomai committed
1 parent
c28adf9fae
commit
065b6466f1
27 files changed
+81166
No files matched your search
@@ -0,0 +1,343 @@
|
||||
'use strict';
|
||||
|
||||
// 每次改动递增。Eagle 里的 service 插件是启动时加载并常驻的，改完代码必须重新加载插件
|
||||
// 才会生效；状态栏会显示这个版本号，方便确认加载的到底是不是最新代码。
|
||||
const VERSION = 'v26';
|
||||
|
||||
const path = require('path');
|
||||
const os = require('os');
|
||||
const fs = require('fs');
|
||||
|
||||
// 本地模块由 index.html 用 <script> 标签按顺序加载后挂在 window 上。
|
||||
const REQUIRED = ['SpineThumbLibraryWatcher', 'SpineThumbSpineAssets', 'SpineThumbRenderer', 'SpineThumbSettings', 'SpineUtils', 'SpineBadge'];
|
||||
const missing = REQUIRED.filter((name) => !window[name]);
|
||||
if (missing.length) {
|
||||
document.getElementById('status').textContent = '本地模块未加载：' + missing.join(', ');
|
||||
throw new Error('本地模块未加载，请检查 index.html 里 script 的顺序：' + missing.join(', '));
|
||||
}
|
||||
const { createLibraryWatcher } = window.SpineThumbLibraryWatcher;
|
||||
const { scanSpineItems } = window.SpineThumbSpineAssets;
|
||||
const { renderThumbnail, withTimeout } = window.SpineThumbRenderer;
|
||||
const settingsStore = window.SpineThumbSettings;
|
||||
const utils = window.SpineUtils;
|
||||
|
||||
const statusEl = document.getElementById('status');
|
||||
const libraryEl = document.getElementById('library');
|
||||
const statsEl = document.getElementById('stats');
|
||||
const logEl = document.getElementById('log');
|
||||
const toggleEl = document.getElementById('toggle');
|
||||
const clearEl = document.getElementById('clear');
|
||||
const filtersEl = document.getElementById('filters');
|
||||
|
||||
const stats = { batches: 0, added: 0, spine: 0, complete: 0, generated: 0, skipped: 0, failed: 0 };
|
||||
let settings = { ...settingsStore.DEFAULTS };
|
||||
let libraryPath = null;
|
||||
let imagesDir = null;
|
||||
const queue = [];
|
||||
let running = false;
|
||||
// 「待观察」：本次配套不全的资产记在这里，下一批导入时连带重新检查。
|
||||
// Eagle 的重复添加提示会把一次导入拆成几批，靠它才能等齐配套文件。
|
||||
const pending = new Set();
|
||||
|
||||
|
||||
function log(message, kind) {
|
||||
const line = document.createElement('li');
|
||||
if (kind) line.className = kind;
|
||||
line.textContent = '[' + new Date().toTimeString().slice(0, 8) + '] ' + message;
|
||||
logEl.appendChild(line);
|
||||
while (logEl.childElementCount > 400) logEl.removeChild(logEl.firstElementChild);
|
||||
logEl.scrollTop = logEl.scrollHeight;
|
||||
console.log('[SpineThumbnailGenerateServer] ' + message);
|
||||
}
|
||||
|
||||
function setStatus(text) {
|
||||
statusEl.textContent = text;
|
||||
}
|
||||
|
||||
function refreshStats() {
|
||||
statsEl.textContent = '批次 ' + stats.batches +
|
||||
' · 新增 ' + stats.added +
|
||||
' · Spine ' + stats.spine +
|
||||
' · 完整 ' + stats.complete +
|
||||
' · 已生成 ' + stats.generated +
|
||||
' · 跳过 ' + stats.skipped +
|
||||
' · 失败 ' + stats.failed;
|
||||
}
|
||||
|
||||
function itemIdOf(dirName) {
|
||||
return String(dirName).replace(/\.info$/i, '');
|
||||
}
|
||||
|
||||
// Eagle 里同一个文件可能同时存在于多个文件夹（34-43/3.7/tank 这种），只写 item id
|
||||
// 用户看不出是哪一份。这里把文件夹 id 还原成 Eagle 界面上显示的路径。
|
||||
// 文件夹树只在切换素材库时重新读，避免每个素材都解析一次库 metadata。
|
||||
let folderPaths = null;
|
||||
function folderPathOf(folderIds) {
|
||||
if (!folderPaths) {
|
||||
folderPaths = new Map();
|
||||
try {
|
||||
const tree = JSON.parse(fs.readFileSync(path.join(libraryPath, 'metadata.json'), 'utf8')).folders || [];
|
||||
const walk = (list, prefix) => {
|
||||
for (const f of list || []) {
|
||||
const full = prefix + (f.name || f.id);
|
||||
folderPaths.set(f.id, full);
|
||||
walk(f.children, full + '/');
|
||||
}
|
||||
};
|
||||
walk(tree, '');
|
||||
} catch (error) { /* 读不到就只显示未分类 */ }
|
||||
}
|
||||
const id = (Array.isArray(folderIds) && folderIds[0]) || null;
|
||||
return (id && folderPaths.get(id)) || '未分类';
|
||||
}
|
||||
|
||||
/** 一个素材的缩略图生成流程：查重 → 渲染 → 写临时文件 → 走官方接口设置 → 清理。 */
|
||||
async function generateOne(item) {
|
||||
let tempPath = null;
|
||||
// 日志统一用「文件名 ｜ Eagle 文件夹路径」，比 MU9RVSxxxx.info 好认；
|
||||
// 这些信息配对阶段就读到了，Eagle API 拿不到素材时也能照样显示。
|
||||
const label = item.entryName + ' ｜ ' + folderPathOf(item.folders);
|
||||
try {
|
||||
const itemId = itemIdOf(item.dirName);
|
||||
const eagleItem = await eagle.item.getById(itemId);
|
||||
if (!eagleItem) {
|
||||
stats.failed += 1;
|
||||
log('跳过 ' + label + '：Eagle 里找不到这个素材', 'warn');
|
||||
return;
|
||||
}
|
||||
// 复合后缀（.skel.bytes / .atlas.txt）：Eagle 只按最后一个点拆 name/ext，atlas.txt
|
||||
// 会被当成纯文本，卡片写死成文本预览，自定义缩略图根本显示不出来。把整段后缀塞进
|
||||
// ext 后 Eagle 认不出这个类型，就会用我们生成的缩略图当封面。
|
||||
// 只在「name + '.' + ext 就是磁盘上的真实文件名」时才改，避免覆盖用户自己改过的名字。
|
||||
const parts = utils.splitCompoundName(eagleItem.name + (eagleItem.ext ? '.' + eagleItem.ext : ''));
|
||||
if (parts && (eagleItem.name !== parts.name || eagleItem.ext !== parts.ext)) {
|
||||
try {
|
||||
eagleItem.name = parts.name;
|
||||
eagleItem.ext = parts.ext;
|
||||
await withTimeout(eagleItem.save(), 20000, '修正复合后缀 ' + label);
|
||||
log('修正复合后缀 ' + label + ' → ' + parts.name + '.' + parts.ext, 'dim');
|
||||
} catch (error) {
|
||||
log('修正复合后缀失败 ' + label + '：' + ((error && error.message) || error), 'warn');
|
||||
}
|
||||
}
|
||||
// 不覆盖用户已有的自定义缩略图（Eagle 审核要求避免静默覆盖用户数据）。
|
||||
if (eagleItem.customThumbnail === true) {
|
||||
stats.skipped += 1;
|
||||
log('跳过 ' + label + '：已有自定义缩略图', 'dim');
|
||||
return;
|
||||
}
|
||||
const version = utils.detectVersion(item.skeletonPath);
|
||||
const runtimeDir = utils.chooseRuntimeDir(version, item.isBinary);
|
||||
const rendered = await withTimeout(renderThumbnail({
|
||||
skeletonPath: item.skeletonPath,
|
||||
atlasPath: item.atlasPath,
|
||||
texturePaths: item.texturePaths,
|
||||
runtimeDir,
|
||||
isBinary: item.isBinary,
|
||||
version,
|
||||
size: 400,
|
||||
}), 60000, '渲染 ' + item.dirName);
|
||||
tempPath = path.join(os.tmpdir(), 'spine-thumb-' + itemId + '-' + Date.now() + '.png');
|
||||
fs.writeFileSync(tempPath, Buffer.from(await rendered.blob.arrayBuffer()));
|
||||
const applied = await withTimeout(eagleItem.setCustomThumbnail(tempPath), 20000, '设置缩略图 ' + item.dirName);
|
||||
if (applied !== true) throw new Error('Eagle 拒绝了这个缩略图');
|
||||
stats.generated += 1;
|
||||
log('已生成 ' + label + ' ｜ Spine ' + version, 'ok');
|
||||
} catch (error) {
|
||||
stats.failed += 1;
|
||||
log('生成失败 ' + label + '：' + ((error && error.message) || error), 'fail');
|
||||
} finally {
|
||||
try { if (tempPath && fs.existsSync(tempPath)) fs.unlinkSync(tempPath); } catch (error) { /* ignore */ }
|
||||
refreshStats();
|
||||
}
|
||||
}
|
||||
|
||||
/** 串行处理队列：一次只渲染一个，避免批量导入时把 Eagle 卡住。 */
|
||||
async function processQueue() {
|
||||
if (running) return;
|
||||
running = true;
|
||||
try {
|
||||
while (queue.length) {
|
||||
const item = queue.shift();
|
||||
setStatus('正在生成缩略图…剩余 ' + queue.length + ' 个');
|
||||
await generateOne(item);
|
||||
}
|
||||
setStatus('监听中');
|
||||
} finally {
|
||||
running = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 批次之间串行执行：配对大目录是同步重活，上一批没跑完就让下一批等着。
|
||||
let batchChain = Promise.resolve();
|
||||
|
||||
function handleBatch(batch) {
|
||||
batchChain = batchChain
|
||||
.then(() => handleBatchAsync(batch))
|
||||
.catch((error) => log('处理批次失败：' + ((error && error.message) || error), 'error'));
|
||||
}
|
||||
|
||||
/** 一批静默结束后触发：只分析本次新增的目录，避免每次全库扫描。 */
|
||||
async function handleBatchAsync({ added, total, reason }) {
|
||||
// Eagle 后台写缩略图、写 metadata 也会让 images/ 产生目录事件，静默后同样走到这里。
|
||||
// 没有新增目录就等于什么都没发生：不计数、不写日志，否则「批次」会被噪音刷成几十上百。
|
||||
if (!added.length) return;
|
||||
stats.batches += 1;
|
||||
stats.added += added.length;
|
||||
log('这批结束：新增 ' + added.length + ' 个，库内共 ' + total + ' 个（' + reason + '）');
|
||||
// 本次新增 + 之前配套不全的，一起重新检查。
|
||||
const candidates = [...new Set([...added, ...pending])];
|
||||
if (pending.size) log('连带重新检查之前 ' + pending.size + ' 个配套不全的资产', 'dim');
|
||||
// 先把上面这行日志真正刷到屏幕上，再开始配对——配对是同步扫全库的重活，
|
||||
// 一旦开始浏览器就没机会重绘，日志会「迟到」到全部结束才一次性出现。
|
||||
setStatus('正在配对新增素材…');
|
||||
await new Promise((resolve) => setTimeout(resolve, 0));
|
||||
const items = await scanSpineItems(imagesDir, candidates, utils, (current, all) => {
|
||||
setStatus('正在配对 ' + current + '/' + all);
|
||||
});
|
||||
// 统计只算本次新增的：待观察的重查会重复计入，数字会虚高。
|
||||
const fresh = items.filter((item) => added.includes(item.dirName));
|
||||
stats.spine += fresh.length;
|
||||
stats.complete += fresh.filter((item) => item.complete).length;
|
||||
if (!items.length) log('这批里没有 Spine 资产', 'dim');
|
||||
// 配套不全的先记下来，等下一批补齐时再处理；补齐了就从待观察里移除。
|
||||
const incomplete = items.filter((item) => !item.complete);
|
||||
pending.clear();
|
||||
for (const item of incomplete) pending.add(item.dirName);
|
||||
if (incomplete.length) {
|
||||
log('有 ' + incomplete.length + ' 个资产配套不全，先记为待观察，等后续批次补齐', 'warn');
|
||||
}
|
||||
for (const item of items) {
|
||||
const name = (filePath) => (filePath ? path.basename(filePath) : '无');
|
||||
log(' ' + item.entryName + ' ｜ ' + folderPathOf(item.folders) + ' ｜ ' +
|
||||
(item.complete ? '完整' : '不完整') +
|
||||
'｜骨架 ' + name(item.skeletonPath) +
|
||||
'｜atlas ' + name(item.atlasPath) +
|
||||
'｜贴图页 ' + item.pages + '（缺 ' + item.missingTextures + '）',
|
||||
item.complete ? 'ok' : 'warn');
|
||||
}
|
||||
refreshStats();
|
||||
|
||||
const ready = items.filter((item) => item.complete);
|
||||
if (!ready.length) return;
|
||||
if (!settings.enabled) {
|
||||
log('检测到 ' + ready.length + ' 个可生成的资产，但自动生成处于关闭状态；勾选上方开关后会立即处理', 'warn');
|
||||
setStatus('检测到新增 ' + added.length + ' 个素材（自动生成未启用）');
|
||||
return;
|
||||
}
|
||||
queue.push(...ready);
|
||||
log('已加入队列 ' + ready.length + ' 个，当前排队 ' + queue.length + ' 个' +
|
||||
(running ? '（正在处理中）' : ''), 'dim');
|
||||
processQueue();
|
||||
}
|
||||
|
||||
const libraryWatcher = createLibraryWatcher({ onBatch: handleBatch, onLog: log });
|
||||
|
||||
log('插件代码版本 ' + VERSION);
|
||||
|
||||
async function resolveLibraryPath() {
|
||||
const direct = eagle.library && eagle.library.path;
|
||||
if (direct) return direct;
|
||||
try {
|
||||
const info = await eagle.library.info();
|
||||
const fromApi = info && (info.path || info.libraryPath || info.dir);
|
||||
if (fromApi) return fromApi;
|
||||
log('library.info() 没有返回路径字段：' + JSON.stringify(info), 'dim');
|
||||
} catch (error) {
|
||||
log('library.info() 调用失败：' + ((error && error.message) || error), 'error');
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
async function start() {
|
||||
const resolved = await resolveLibraryPath();
|
||||
if (!resolved) {
|
||||
setStatus('没有拿到素材库路径');
|
||||
log('切换素材库时会重试', 'warn');
|
||||
return;
|
||||
}
|
||||
libraryPath = resolved;
|
||||
imagesDir = path.join(resolved, 'images');
|
||||
folderPaths = null; // 换库了，文件夹树重新读
|
||||
libraryEl.textContent = resolved;
|
||||
setStatus(libraryWatcher.start(resolved) ? '监听中' : '监听失败');
|
||||
}
|
||||
|
||||
function startSafely() {
|
||||
start().catch((error) => {
|
||||
setStatus('启动失败：' + ((error && error.message) || error));
|
||||
log('启动失败：' + ((error && error.stack) || error), 'error');
|
||||
});
|
||||
}
|
||||
|
||||
async function loadSettings() {
|
||||
try {
|
||||
settings = await settingsStore.read();
|
||||
} catch (error) {
|
||||
log('读取设置失败，按默认值处理（关闭）:' + ((error && error.message) || error), 'warn');
|
||||
settings = { ...settingsStore.DEFAULTS };
|
||||
}
|
||||
toggleEl.checked = settings.enabled === true;
|
||||
}
|
||||
|
||||
toggleEl.addEventListener('change', async () => {
|
||||
settings = { ...settings, enabled: toggleEl.checked };
|
||||
try {
|
||||
await settingsStore.write(settings);
|
||||
} catch (error) {
|
||||
log('保存设置失败：' + ((error && error.message) || error), 'warn');
|
||||
}
|
||||
if (settings.enabled) {
|
||||
log('自动生成已启用。之后导入的 Spine 资产会自动生成缩略图。', 'ok');
|
||||
setStatus('监听中');
|
||||
} else {
|
||||
queue.length = 0;
|
||||
log('自动生成已关闭，待处理队列已清空。', 'dim');
|
||||
setStatus('监听中（自动生成已关闭）');
|
||||
}
|
||||
});
|
||||
|
||||
// 只清显示，不动统计和 queue：Eagle 的 devtools 控制台里仍然留着完整历史。
|
||||
clearEl.addEventListener('click', () => {
|
||||
logEl.textContent = '';
|
||||
});
|
||||
|
||||
// 日志分类过滤交给 CSS：这里只切 #log 的 data-filter 和按钮高亮。
|
||||
filtersEl.addEventListener('click', (event) => {
|
||||
const button = event.target.closest('button[data-filter]');
|
||||
if (!button) return;
|
||||
logEl.dataset.filter = button.dataset.filter;
|
||||
for (const item of filtersEl.children) item.classList.toggle('active', item === button);
|
||||
});
|
||||
|
||||
// 先确认脚本本身执行到了这里，再谈 Eagle 事件有没有来。
|
||||
document.getElementById('status').textContent = '脚本已加载 ' + VERSION + '，等待 Eagle 事件…';
|
||||
|
||||
if (typeof eagle === 'undefined') {
|
||||
setStatus('eagle API 未注入');
|
||||
log('页面上没有 eagle 对象，插件无法与 Eagle 通信', 'error');
|
||||
} else {
|
||||
eagle.onPluginCreate(async (plugin) => {
|
||||
// 官方文档：onPluginCreate 用来初始化插件所需的模块，plugin.path 就是插件所在目录。
|
||||
// app.getPath 这类 API 必须在这个事件之后才能调用，所以设置读取也放在这里。
|
||||
window.SpinePluginPath = (plugin && plugin.path) || window.SpinePluginRoot;
|
||||
log('插件已创建：' + ((plugin && plugin.manifest && plugin.manifest.name) || 'SpineThumbnailGenerateServer'));
|
||||
try {
|
||||
await loadSettings();
|
||||
} catch (error) {
|
||||
log('读取设置失败，按默认值处理（关闭）：' + ((error && error.message) || error), 'warn');
|
||||
}
|
||||
startSafely();
|
||||
});
|
||||
eagle.onLibraryChanged((changedPath) => {
|
||||
log('切换素材库：' + changedPath);
|
||||
startSafely();
|
||||
});
|
||||
// 兜底：service 插件可能在窗口打开前就已创建完，创建事件错过了就自己启动一次。
|
||||
setTimeout(() => {
|
||||
if (libraryEl.textContent === '—') {
|
||||
log('没有收到创建事件，直接尝试启动', 'dim');
|
||||
loadSettings().catch(() => {}).then(startSafely);
|
||||
}
|
||||
}, 800);
|
||||
}
|
||||
Reference in new issue
Block a user